From 9e4f8f9441ca630325b524be89909b572c220974 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Fri, 20 Aug 2021 16:18:55 -0300
Subject: [PATCH] improve staking dashboard

---
 .../src/components/SideNav/SideNav.tsx        |   2 +-
 .../src/pages/Dashboard/Dashboard.tsx         | 114 ++++++++++--------
 app/javascript/src/types/yieldwatch.d.ts      |   2 +-
 3 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/app/javascript/src/components/SideNav/SideNav.tsx b/app/javascript/src/components/SideNav/SideNav.tsx
index 98eb554..7b52c1c 100644
--- a/app/javascript/src/components/SideNav/SideNav.tsx
+++ b/app/javascript/src/components/SideNav/SideNav.tsx
@@ -15,7 +15,7 @@ const MenuItems: MenuItem[] = [
     path: "/",
   },
   {
-    label: "Dashbaord",
+    label: "Minhas Posições",
     path: "/dashboard",
   },
   {
diff --git a/app/javascript/src/pages/Dashboard/Dashboard.tsx b/app/javascript/src/pages/Dashboard/Dashboard.tsx
index 91ef210..19b25dd 100644
--- a/app/javascript/src/pages/Dashboard/Dashboard.tsx
+++ b/app/javascript/src/pages/Dashboard/Dashboard.tsx
@@ -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>
   );
diff --git a/app/javascript/src/types/yieldwatch.d.ts b/app/javascript/src/types/yieldwatch.d.ts
index 2d64201..9335d57 100644
--- a/app/javascript/src/types/yieldwatch.d.ts
+++ b/app/javascript/src/types/yieldwatch.d.ts
@@ -60,7 +60,7 @@ type PoolInfo = {
   apr: number;
 };
 
-type Vault = {
+export type Vault = {
   type: string;
   name: string;
   platform: string;