geonizeli/x-stake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve staking dashboard

Browse Source
This commit is contained in:
João Geonizeli
2021-09-06 21:26:27 -03:00
parent 361048ab67
commit dcdb611b53
6 changed files with 55 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/src/components/SideNav/SideNav.tsx
View File

@@ -21,7 +21,7 @@ const MenuItems: MenuItem[] = [
path: "/dashboard",
},
{
label: "Histórico de Investimentos",
label: "Pedidos de Investimentos",
path: "/orders/stake",
},
{

31
app/javascript/src/pages/Dashboard/Dashboard.tsx
View File

@@ -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>

74
app/javascript/src/pages/Dashboard/Vault/Vault.tsx → app/javascript/src/pages/Dashboard/Vault/VaultCard.tsx
View File

@@ -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 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>

24
app/javascript/src/pages/Dashboard/Vault/__generated__/VaultQuery.graphql.ts → app/javascript/src/pages/Dashboard/Vault/__generated__/VaultCardQuery.graphql.ts generated
View File

@@ -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;

2
app/javascript/src/pages/Dashboard/Vault/index.ts
View File

@@ -1 +1 @@
export * from "./Vault";
export * from "./VaultCard";

3
app/javascript/src/utils/tokenBalance.ts Normal file
View File

@@ -0,0 +1,3 @@
export const formatTokenBalance = (value: number) => {
return Math.round(value * 10000) / 10000;
};