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: "/",
},
{
label: "Dashbaord",
label: "Minhas Posições",
path: "/dashboard",
},
{

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

@@ -1,9 +1,17 @@
import type { FC } from "react";
import React from "react";
import useSWR from "swr";
import cx from "classnames";
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 = () => {
const { user } = useCurrentUser();
@@ -12,58 +20,66 @@ export const Dashbaord: FC = () => {
`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 (
<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">
<table className="min-w-full leading-normal">
<thead>
<tr>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
{vaults?.map((vault) => (
<div
key={vault.chainId}
className="shadow-lg px-4 py-6 w-full bg-white dark:bg-gray-800 relative"
>
<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
</th>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Depositado
</th>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Ganho
</th>
</tr>
</thead>
<tbody>
{data.result.PancakeSwap.staking.vaults.map((vault) => {
return (
<tr key={vault.chainId}>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-no-wrap">
{vault.name}
</p>
</td>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-no-wrap">
{vault.depositedTokens.toFixed(4)}
</p>
</td>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-no-wrap">
{vault.totalRewards.toFixed(4)}
</p>
</td>
</tr>
);
})}
</tbody>
</table>
{!isLoading &&
(
(vault.depositedTokens ?? 0) + (vault.totalRewards ?? 0)
).toFixed(4)}
</p>
</div>
<div className="dark:text-white">
<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 && vault.depositedTokens?.toFixed(4)}
</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 && vault.totalRewards?.toFixed(4)}
</div>
</div>
</div>
</div>
))}
</div>
</div>
);

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

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