improve staking dashboard

app/javascript/src/components/SideNav/SideNav.tsx

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

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">
+        {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"
           >
-                Pool
+            <p className="text-sm w-max text-gray-700 dark:text-white font-semibold border-b border-gray-200">
-              </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>
+            <div className="flex items-end space-x-2 my-6">
-                  <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+              <p
-                    <p className="text-gray-900 whitespace-no-wrap">
+                className={cx(
-                      {vault.depositedTokens.toFixed(4)}
+                  "text-5xl text-black dark:text-white font-bold",
+                  isLoading
+                    ? "w-36 h-10 inline-block animate-pulse bg-gray-300 rounded"
+                    : ""
+                )}
+              >
+                {!isLoading &&
+                  (
+                    (vault.depositedTokens ?? 0) + (vault.totalRewards ?? 0)
+                  ).toFixed(4)}
               </p>
-                  </td>
+            </div>
-                  <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+            <div className="dark:text-white">
-                    <p className="text-gray-900 whitespace-no-wrap">
+              <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">
-                      {vault.totalRewards.toFixed(4)}
+                <p>Depositado</p>
-                    </p>
+                <div
-                  </td>
+                  className={cx(
-                </tr>
+                    "flex items-end text-xs",
-              );
+                    isLoading
-            })}
+                      ? "w-10 h-4 inline-block animate-pulse bg-gray-300 rounded"
-          </tbody>
+                      : ""
-        </table>
+                  )}
+                >
+                  {!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>
   );

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;