From dcdb611b538b53b8fff9c474cf8d3899b5d32690 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= Date: Mon, 6 Sep 2021 21:26:27 -0300 Subject: [PATCH] improve staking dashboard --- .../src/components/SideNav/SideNav.tsx | 2 +- .../src/pages/Dashboard/Dashboard.tsx | 31 ++++---- .../Vault/{Vault.tsx => VaultCard.tsx} | 76 ++++++------------- ...y.graphql.ts => VaultCardQuery.graphql.ts} | 24 +++--- .../src/pages/Dashboard/Vault/index.ts | 2 +- app/javascript/src/utils/tokenBalance.ts | 3 + 6 files changed, 55 insertions(+), 83 deletions(-) rename app/javascript/src/pages/Dashboard/Vault/{Vault.tsx => VaultCard.tsx} (54%) rename app/javascript/src/pages/Dashboard/Vault/__generated__/{VaultQuery.graphql.ts => VaultCardQuery.graphql.ts} (86%) create mode 100644 app/javascript/src/utils/tokenBalance.ts diff --git a/app/javascript/src/components/SideNav/SideNav.tsx b/app/javascript/src/components/SideNav/SideNav.tsx index 51b5edf..ed99304 100644 --- 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", }, { diff --git a/app/javascript/src/pages/Dashboard/Dashboard.tsx b/app/javascript/src/pages/Dashboard/Dashboard.tsx index aa76ec8..d45ee79 100644 --- 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 = { - 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( `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 ( +
+ +
+ ); + + if (!vaults?.length) return ; return ( -
+
{vaults?.map((vault) => ( - + ))}
diff --git a/app/javascript/src/pages/Dashboard/Vault/Vault.tsx b/app/javascript/src/pages/Dashboard/Vault/VaultCard.tsx similarity index 54% rename from app/javascript/src/pages/Dashboard/Vault/Vault.tsx rename to app/javascript/src/pages/Dashboard/Vault/VaultCard.tsx index 11a4202..e082b62 100644 --- a/app/javascript/src/pages/Dashboard/Vault/Vault.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; - isLoading: boolean; + vault: Vault; }; -export const Vault: FC = ({ vault, isLoading }) => { - const { stakeOrders } = useLazyLoadQuery( +export const VaultCard: FC = ({ vault }) => { + const { stakeOrders } = useLazyLoadQuery( graphql` - query VaultQuery( + query VaultCardQuery( $status: ProcessStatus! $poolName: String! $amount: Float! @@ -40,7 +40,7 @@ export const Vault: FC = ({ vault, isLoading }) => { `, { status: "PROCESSING", - poolName: vault.name ?? "", + poolName: vault.name, amount: 0, } ); @@ -56,8 +56,7 @@ export const Vault: FC = ({ 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 = ({ 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 = ({ vault, isLoading }) => { stakedCake={totalStakedFixed} poolName={vault.name} /> -
+
-

+

{vault.name}

-
-
-

- {!isLoading && totalStakedFixed} -

-
-
+ +

Depositado

-
- {!isLoading && totalDeposited} -
+
{totalDeposited}
+
+
+

Ganho

+
{totalRewarded}
-

Ganho

-
- {!isLoading && totalRewarded} +

Rendimento

+
+ {`${(vault.poolInfo.apr * 100).toFixed(2)} %`}
diff --git a/app/javascript/src/pages/Dashboard/Vault/__generated__/VaultQuery.graphql.ts b/app/javascript/src/pages/Dashboard/Vault/__generated__/VaultCardQuery.graphql.ts similarity index 86% rename from app/javascript/src/pages/Dashboard/Vault/__generated__/VaultQuery.graphql.ts rename to app/javascript/src/pages/Dashboard/Vault/__generated__/VaultCardQuery.graphql.ts index 69ef4fd..a08da9d 100644 --- a/app/javascript/src/pages/Dashboard/Vault/__generated__/VaultQuery.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; diff --git a/app/javascript/src/pages/Dashboard/Vault/index.ts b/app/javascript/src/pages/Dashboard/Vault/index.ts index 1ad773a..182c8ee 100644 --- 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"; diff --git a/app/javascript/src/utils/tokenBalance.ts b/app/javascript/src/utils/tokenBalance.ts new file mode 100644 index 0000000..61b48d9 --- /dev/null +++ b/app/javascript/src/utils/tokenBalance.ts @@ -0,0 +1,3 @@ +export const formatTokenBalance = (value: number) => { + return Math.round(value * 10000) / 10000; +};