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-08-20 16:18:55 -03:00
parent 16fa38778f
commit 9e4f8f9441
3 changed files with 67 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,7 @@ const MenuItems: MenuItem[] = [
path: "/", path: "/",
}, },
{ {
label: "Dashbaord", label: "Minhas Posições",
path: "/dashboard", path: "/dashboard",
}, },
{ {

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

@@ -1,9 +1,17 @@
import type { FC } from "react"; import type { FC } from "react";
import React from "react"; import React from "react";
import useSWR from "swr"; import useSWR from "swr";
import cx from "classnames";
import { useCurrentUser } from "../../contexts/UserProvider"; import { useCurrentUser } from "../../contexts/UserProvider";
import type { YieldwatchResponse } from "../../types/yieldwatch"; import type { Vault, YieldwatchResponse } from "../../types/yieldwatch";
const exampleVault: Partial<Vault> = {
chainId: 1,
name: "Cake-Cake Staking",
depositedTokens: 0,
totalRewards: 0,
};
export const Dashbaord: FC = () => { export const Dashbaord: FC = () => {
const { user } = useCurrentUser(); const { user } = useCurrentUser();
@@ -12,58 +20,66 @@ export const Dashbaord: FC = () => {
`https://www.yieldwatch.net/api/all/${user?.walletAddress}?platforms=pancake` `https://www.yieldwatch.net/api/all/${user?.walletAddress}?platforms=pancake`
); );
if (data?.status === "0" || !data) return null; const isLoading = !data;
const vaults = data?.result?.PancakeSwap?.staking?.vaults ?? [exampleVault];
return ( return (
<div className="grid place-items-center w-full h-5 mt-16"> <div className="grid place-items-center w-full h-5 mt-32">
<div className="inline-block max-w-3xl shadow rounded-lg overflow-hidden"> <div className="inline-block max-w-3xl shadow rounded-lg overflow-hidden">
<table className="min-w-full leading-normal"> {vaults?.map((vault) => (
<thead> <div
<tr> key={vault.chainId}
<th className="shadow-lg px-4 py-6 w-full bg-white dark:bg-gray-800 relative"
scope="col" >
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal" <p className="text-sm w-max text-gray-700 dark:text-white font-semibold border-b border-gray-200">
{vault.name}
</p>
<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"
: ""
)}
> >
Pool {!isLoading &&
</th> (
<th (vault.depositedTokens ?? 0) + (vault.totalRewards ?? 0)
scope="col" ).toFixed(4)}
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal" </p>
> </div>
Depositado <div className="dark:text-white">
</th> <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">
<th <p>Depositado</p>
scope="col" <div
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal" className={cx(
> "flex items-end text-xs",
Ganho isLoading
</th> ? "w-10 h-4 inline-block animate-pulse bg-gray-300 rounded"
</tr> : ""
</thead> )}
<tbody> >
{data.result.PancakeSwap.staking.vaults.map((vault) => { {!isLoading && vault.depositedTokens?.toFixed(4)}
return ( </div>
<tr key={vault.chainId}> </div>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <div className="flex items-center text-sm space-x-12 md:space-x-24 justify-between">
<p className="text-gray-900 whitespace-no-wrap"> <p>Ganho</p>
{vault.name} <div
</p> className={cx(
</td> "flex items-end text-xs",
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> isLoading
<p className="text-gray-900 whitespace-no-wrap"> ? "w-10 h-4 inline-block animate-pulse bg-gray-300 rounded"
{vault.depositedTokens.toFixed(4)} : ""
</p> )}
</td> >
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> {!isLoading && vault.totalRewards?.toFixed(4)}
<p className="text-gray-900 whitespace-no-wrap"> </div>
{vault.totalRewards.toFixed(4)} </div>
</p> </div>
</td> </div>
</tr> ))}
);
})}
</tbody>
</table>
</div> </div>
</div> </div>
); );

2
app/javascript/src/types/yieldwatch.d.ts vendored
View File

@@ -60,7 +60,7 @@ type PoolInfo = {
apr: number; apr: number;
}; };
type Vault = { export type Vault = {
type: string; type: string;
name: string; name: string;
platform: string; platform: string;