From c9764c1eae2243cbaeed1f6f012bd101417fefa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Thu, 19 Aug 2021 22:15:03 -0300
Subject: [PATCH] show stakings on table

---
 .../src/pages/Dashboard/Dashboard.tsx         | 58 ++++++++++++++++---
 app/javascript/src/types/yieldwatch.d.ts      | 27 ++++++++-
 2 files changed, 75 insertions(+), 10 deletions(-)

diff --git a/app/javascript/src/pages/Dashboard/Dashboard.tsx b/app/javascript/src/pages/Dashboard/Dashboard.tsx
index 3e9df27..91ef210 100644
--- a/app/javascript/src/pages/Dashboard/Dashboard.tsx
+++ b/app/javascript/src/pages/Dashboard/Dashboard.tsx
@@ -15,14 +15,56 @@ export const Dashbaord: FC = () => {
   if (data?.status === "0" || !data) return null;
 
   return (
-    <div>
-      <ul>
-        <li>Ganho: {data.result.PancakeSwap.staking.totalUSDValues.yield}</li>
-        <li>
-          Depositado: {data.result.PancakeSwap.staking.totalUSDValues.deposit}
-        </li>
-        <li>Total: {data.result.PancakeSwap.staking.totalUSDValues.total}</li>
-      </ul>
+    <div className="grid place-items-center w-full h-5 mt-16">
+      <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"
+              >
+                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>
+      </div>
     </div>
   );
 };
diff --git a/app/javascript/src/types/yieldwatch.d.ts b/app/javascript/src/types/yieldwatch.d.ts
index ce33460..2d64201 100644
--- a/app/javascript/src/types/yieldwatch.d.ts
+++ b/app/javascript/src/types/yieldwatch.d.ts
@@ -56,9 +56,31 @@ type TotalUSDValues3 = {
   total: number;
 };
 
+type PoolInfo = {
+  apr: number;
+};
+
+type Vault = {
+  type: string;
+  name: string;
+  platform: string;
+  chainId: number;
+  depositToken: string;
+  rewardToken: string;
+  depositedTokens: number;
+  pendingRewards: number;
+  harvestedRewards: number;
+  totalRewards: number;
+  priceInUSDRewardToken: number;
+  priceInUSDDepositToken: number;
+  stakingTx: any[];
+  apy: number;
+  poolInfo: PoolInfo;
+};
+
 type Staking = {
   totalUSDValues: TotalUSDValues3;
-  vaults: any[];
+  vaults: Vault[];
 };
 
 type PancakeSwap = {
@@ -76,10 +98,11 @@ type Result = {
   watchBalance: WatchBalance;
   currencies: Currencies;
   PancakeSwap: PancakeSwap;
+  walletBalance: WalletBalance;
 };
 
 export type YieldwatchResponse = {
-  status: "0" | "1";
+  status: string;
   message: string;
   result: Result;
 };