improve staking dashboard

2021-09-06 21:26:27 -03:00
parent 361048ab67
commit dcdb611b53
6 changed files with 55 additions and 83 deletions
--- a/app/javascript/src/components/SideNav/SideNav.tsx
+++ b/app/javascript/src/components/SideNav/SideNav.tsx
@@ -21,7 +21,7 @@ const MenuItems: MenuItem[] = [
    path: "/dashboard",
  },
  {
-    label: "Histórico de Investimentos",
+    label: "Pedidos de Investimentos",
    path: "/orders/stake",
  },
  {
--- a/app/javascript/src/pages/Dashboard/Dashboard.tsx
+++ b/app/javascript/src/pages/Dashboard/Dashboard.tsx
@@ -2,36 +2,35 @@ import type { FC } from "react";
 import React from "react";
 import useSWR from "swr";

+import { Spinner } from "../../components";
 import { useCurrentUser } from "../../contexts/UserProvider";
-import type {
-  Vault as VaultType,
-  YieldwatchResponse,
-} from "../../types/yieldwatch";
-import { Vault } from "./Vault";
-
-const exampleVault: Partial<VaultType> = {
-  chainId: 1,
-  name: "Cake-Cake Staking",
-  depositedTokens: 0,
-  totalRewards: 0,
-};
+import { Messages } from "../../messages";
+import type { YieldwatchResponse } from "../../types/yieldwatch";
+import { VaultCard } from "./Vault";

 export const Dashbaord: FC = () => {
  const { user } = useCurrentUser();
-
  const { data } = useSWR<YieldwatchResponse>(
    `https://www.yieldwatch.net/api/all/${user?.walletAddress}?platforms=pancake`
  );

  const isLoading = !data;
+  const vaults = data?.result?.PancakeSwap?.staking?.vaults;

-  const vaults = data?.result?.PancakeSwap?.staking?.vaults ?? [exampleVault];
+  if (isLoading)
+    return (
+      <div className="w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  if (!vaults?.length) return <Messages.NoHistory historyName="Staking" />;

  return (
-    <div className="grid place-items-center w-full h-5 mt-32">
+    <div className="grid place-items-center w-full h-full mt-20">
      <div className="max-w-3xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {vaults?.map((vault) => (
-          <Vault key={vault.name} isLoading={isLoading} vault={vault} />
+          <VaultCard key={vault.name} vault={vault} />
        ))}
      </div>
    </div>
--- a/app/javascript/src/pages/Dashboard/Vault/VaultCard.tsx
+++ b/app/javascript/src/pages/Dashboard/Vault/VaultCard.tsx
@@ -6,19 +6,19 @@ import { useLazyLoadQuery } from "react-relay";
 import { graphql } from "babel-plugin-relay/macro";
 import BigNumber from "bignumber.js";

-import type { Vault as VaultType } from "../../../types/yieldwatch";
+import type { Vault } from "../../../types/yieldwatch";
 import { RemoveStakeModal } from "./RemoveStakeModal";
-import type { VaultQuery } from "./__generated__/VaultQuery.graphql";
+import { formatTokenBalance } from "../../../utils/tokenBalance";
+import type { VaultCardQuery } from "./__generated__/VaultCardQuery.graphql";

 type VaultProps = {
-  vault: Partial<VaultType>;
-  isLoading: boolean;
+  vault: Vault;
 };

-export const Vault: FC<VaultProps> = ({ vault, isLoading }) => {
-  const { stakeOrders } = useLazyLoadQuery<VaultQuery>(
+export const VaultCard: FC<VaultProps> = ({ vault }) => {
+  const { stakeOrders } = useLazyLoadQuery<VaultCardQuery>(
    graphql`
-      query VaultQuery(
+      query VaultCardQuery(
        $status: ProcessStatus!
        $poolName: String!
        $amount: Float!
@@ -40,7 +40,7 @@ export const Vault: FC<VaultProps> = ({ vault, isLoading }) => {
    `,
    {
      status: "PROCESSING",
-      poolName: vault.name ?? "",
+      poolName: vault.name,
      amount: 0,
    }
  );
@@ -56,8 +56,7 @@ export const Vault: FC<VaultProps> = ({ vault, isLoading }) => {
    return BigNumber.sum(acc, current.node.amount);
  }, new BigNumber(0));

-  const totalDepositedAndRewarded =
-    (vault.depositedTokens ?? 0) + (vault.totalRewards ?? 0);
+  const totalDepositedAndRewarded = vault.depositedTokens + vault.totalRewards;

  let totalStaked = BigNumber.sum(
    alreadyOnUnstakeOrder,
@@ -67,13 +66,8 @@ export const Vault: FC<VaultProps> = ({ vault, isLoading }) => {
  totalStaked = totalStaked.isLessThan(0.0001) ? new BigNumber(0) : totalStaked;

  const totalStakedFixed = totalStaked.toFixed(4);
-  const totalDeposited = (
-    totalStaked.isEqualTo(0) ? 0 : vault.depositedTokens
-  )?.toFixed(4);
-
-  const totalRewarded = (
-    totalStaked.isEqualTo(0) ? 0 : vault.totalRewards
-  )?.toFixed(4);
+  const totalDeposited = formatTokenBalance(vault.depositedTokens);
+  const totalRewarded = formatTokenBalance(vault.totalRewards);

  return (
    <>
@@ -83,53 +77,29 @@ export const Vault: FC<VaultProps> = ({ vault, isLoading }) => {
        stakedCake={totalStakedFixed}
        poolName={vault.name}
      />
-      <div className="shadow-lg px-4 py-6 w-full bg-white dark:bg-gray-800 rounded-lg">
+      <div className="shadow-lg px-4 py-6 mb-4 w-full bg-white rounded-lg">
        <div className="flex justify-between">
-          <p className="text-sm w-max text-gray-700 dark:text-white font-semibold border-b border-gray-200">
+          <p className="text-sm w-max text-gray-700 font-semibold border-b border-gray-200">
            {vault.name}
          </p>
-
          <button onClick={handleRemoveStakeModal} aria-label="Remover Stake">
            <XCircleIcon className="h-5 w-5 text-red-500" />
          </button>
        </div>
-        <div className="flex items-end space-x-2 my-6">
-          <p
-            className={cx(
-              "text-5xl text-black dark:text-white font-bold",
-              isLoading
-                ? "w-36 h-10 inline-block animate-pulse bg-gray-300 rounded"
-                : ""
-            )}
-          >
-            {!isLoading && totalStakedFixed}
-          </p>
-        </div>
-        <div className="dark:text-white">
+
+        <div className="mt-6">
          <div className="flex items-center pb-2 mb-2 text-sm space-x-12 md:space-x-24 justify-between border-b border-gray-200">
            <p>Depositado</p>
-            <div
-              className={cx(
-                "flex items-end text-xs",
-                isLoading
-                  ? "w-10 h-4 inline-block animate-pulse bg-gray-300 rounded"
-                  : ""
-              )}
-            >
-              {!isLoading && totalDeposited}
-            </div>
+            <div className={cx("flex items-end text-xs")}>{totalDeposited}</div>
+          </div>
+          <div className="flex items-center pb-2 mb-2 text-sm space-x-12 md:space-x-24 justify-between border-b border-gray-200">
+            <p>Ganho</p>
+            <div className={cx("flex items-end text-xs")}>{totalRewarded}</div>
          </div>
          <div className="flex items-center text-sm space-x-12 md:space-x-24 justify-between">
-            <p>Ganho</p>
-            <div
-              className={cx(
-                "flex items-end text-xs",
-                isLoading
-                  ? "w-10 h-4 inline-block animate-pulse bg-gray-300 rounded"
-                  : ""
-              )}
-            >
-              {!isLoading && totalRewarded}
+            <p>Rendimento</p>
+            <div className={cx("flex items-end text-xs whitespace-nowrap")}>
+              {`${(vault.poolInfo.apr * 100).toFixed(2)} %`}
            </div>
          </div>
        </div>
--- a/app/javascript/src/pages/Dashboard/Vault/generated/VaultCardQuery.graphql.ts
+++ b/app/javascript/src/pages/Dashboard/Vault/generated/VaultCardQuery.graphql.ts
@@ -4,12 +4,12 @@

 import { ConcreteRequest } from "relay-runtime";
 export type ProcessStatus = "CANCELED" | "COMPLETED" | "PROCESSING" | "%future added value";
-export type VaultQueryVariables = {
+export type VaultCardQueryVariables = {
    status: ProcessStatus;
    poolName: string;
    amount: number;
 };
-export type VaultQueryResponse = {
+export type VaultCardQueryResponse = {
    readonly stakeOrders: {
        readonly edges: ReadonlyArray<{
            readonly node: {
@@ -18,15 +18,15 @@ export type VaultQueryResponse = {
        }>;
    };
 };
-export type VaultQuery = {
-    readonly response: VaultQueryResponse;
-    readonly variables: VaultQueryVariables;
+export type VaultCardQuery = {
+    readonly response: VaultCardQueryResponse;
+    readonly variables: VaultCardQueryVariables;
 };



 /*
-query VaultQuery(
+query VaultCardQuery(
  $status: ProcessStatus!
  $poolName: String!
  $amount: Float!
@@ -115,7 +115,7 @@ return {
    ],
    "kind": "Fragment",
    "metadata": null,
-    "name": "VaultQuery",
+    "name": "VaultCardQuery",
    "selections": [
      {
        "alias": null,
@@ -163,7 +163,7 @@ return {
      (v0/*: any*/)
    ],
    "kind": "Operation",
-    "name": "VaultQuery",
+    "name": "VaultCardQuery",
    "selections": [
      {
        "alias": null,
@@ -209,14 +209,14 @@ return {
    ]
  },
  "params": {
-    "cacheID": "6565697f7f43e955abee8a8a1eeb8e9b",
+    "cacheID": "1bbb395dae29c85a1be62eb32995458d",
    "id": null,
    "metadata": {},
-    "name": "VaultQuery",
+    "name": "VaultCardQuery",
    "operationKind": "query",
-    "text": "query VaultQuery(\n  $status: ProcessStatus!\n  $poolName: String!\n  $amount: Float!\n) {\n  stakeOrders(filter: {status: [$status], poolName: {eq: $poolName}, amount: {lt: $amount}}) {\n    edges {\n      node {\n        amount\n        id\n      }\n    }\n  }\n}\n"
+    "text": "query VaultCardQuery(\n  $status: ProcessStatus!\n  $poolName: String!\n  $amount: Float!\n) {\n  stakeOrders(filter: {status: [$status], poolName: {eq: $poolName}, amount: {lt: $amount}}) {\n    edges {\n      node {\n        amount\n        id\n      }\n    }\n  }\n}\n"
  }
 };
 })();
-(node as any).hash = 'e5dced4589579717b408bc2f555b98ab';
+(node as any).hash = 'dbf07265190b32d9f6f4e66c5e3d851f';
 export default node;
--- a/app/javascript/src/pages/Dashboard/Vault/index.ts
+++ b/app/javascript/src/pages/Dashboard/Vault/index.ts
@@ -1 +1 @@
-export * from "./Vault";
+export * from "./VaultCard";
--- a/app/javascript/src/utils/tokenBalance.ts
+++ b/app/javascript/src/utils/tokenBalance.ts
@@ -0,0 +1,3 @@
+export const formatTokenBalance = (value: number) => {
+  return Math.round(value * 10000) / 10000;
+};