Merge pull request #32 from exstake/add-staking-dashboard

add straking dashboard

app/javascript/relay/environment.ts

@@ -1,7 +1,7 @@
 import type { Variables, RequestParameters, CacheConfig } from "relay-runtime";
 import { Environment, Network, RecordSource, Store } from "relay-runtime";
 
-export const fetchRelay = async (
+const fetchRelay = async (
   params: RequestParameters,
   variables: Variables,
   _cacheConfig: CacheConfig

app/javascript/src/Routes.tsx

@@ -2,7 +2,7 @@ import type { FC } from "react";
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 
-import { Home, Orders, Wallet } from "./pages";
+import { Dashbaord, Home, Orders, Wallet } from "./pages";
 
 export const Routes: FC = () => {
   return (
@@ -10,6 +10,9 @@ export const Routes: FC = () => {
       <Route exact path="/">
         <Home />
       </Route>
+      <Route exact path="/dashboard">
+        <Dashbaord />
+      </Route>
       <Route exact path="/wallet">
         <Wallet />
       </Route>

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

@@ -14,6 +14,10 @@ const MenuItems: MenuItem[] = [
     label: "Início",
     path: "/",
   },
+  {
+    label: "Dashbaord",
+    path: "/dashboard",
+  },
   {
     label: "Carteira",
     path: "/wallet",

app/javascript/src/pages/Dashboard/Dashboard.tsx

@@ -0,0 +1,70 @@
+import type { FC } from "react";
+import React from "react";
+import useSWR from "swr";
+
+import { useCurrentUser } from "../../contexts/UserProvider";
+import type { YieldwatchResponse } from "../../types/yieldwatch";
+
+export const Dashbaord: FC = () => {
+  const { user } = useCurrentUser();
+
+  const { data } = useSWR<YieldwatchResponse>(
+    `https://www.yieldwatch.net/api/all/${user?.walletAddress}?platforms=pancake`
+  );
+
+  if (data?.status === "0" || !data) return null;
+
+  return (
+    <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>
+  );
+};

app/javascript/src/pages/Dashboard/index.ts

@@ -0,0 +1 @@
+export * from "./Dashboard";

app/javascript/src/pages/index.ts

@@ -1,3 +1,4 @@
+export * from "./Dashboard";
 export * from "./Home";
-export * from "./Wallet";
 export * from "./Orders";
+export * from "./Wallet";

app/javascript/src/types/yieldwatch.d.ts

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type WatchBalance = {
+  USDPrice: number;
+  totalBalance: number;
+  maxMonitorValue: number;
+  walletBalance: number;
+  watchFromLP: number;
+};
+
+type Currencies = {
+  EUR: number;
+  RMB: number;
+  JPY: number;
+  GBP: number;
+  BTCB: number;
+  WBNB: number;
+  BRL: number;
+  AUD: number;
+  HKD: number;
+  SGD: number;
+  RUB: number;
+  KRW: number;
+  CAD: number;
+  THB: number;
+  CHF: number;
+  IDR: number;
+  TRY: number;
+  TWD: number;
+};
+
+type TotalUSDValues = {
+  deposit: number;
+  yield: number;
+  total: number;
+};
+
+type Vaults = {
+  totalUSDValues: TotalUSDValues;
+  vaults: any[];
+};
+
+type TotalUSDValues2 = {
+  deposit: number;
+  yield: number;
+  total: number;
+};
+
+type LPStaking = {
+  totalUSDValues: TotalUSDValues2;
+  vaults: any[];
+};
+
+type TotalUSDValues3 = {
+  deposit: number;
+  yield: number;
+  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: Vault[];
+};
+
+type PancakeSwap = {
+  vaults: Vaults;
+  LPStaking: LPStaking;
+  staking: Staking;
+};
+
+type WalletBalance = {
+  totalUSDValue: number;
+  balances: any[];
+};
+
+type Result = {
+  watchBalance: WatchBalance;
+  currencies: Currencies;
+  PancakeSwap: PancakeSwap;
+  walletBalance: WalletBalance;
+};
+
+export type YieldwatchResponse = {
+  status: string;
+  message: string;
+  result: Result;
+};

config/routes.rb

@@ -20,7 +20,7 @@ Rails.application.routes.draw do
   root to: "home#index"
   get "*all" => "home#index", constraints: lambda { |req|
     ["playground", "rails", "sidekiq"].filter do |path|
-      req.path != path
+      req.path.include?(path)
     end.blank?
   }
 

package.json

@@ -40,6 +40,7 @@
     "react-router-dom": "^5.2.0",
     "regenerator-runtime": "^0.13.9",
     "relay-runtime": "^11.0.2",
+    "swr": "^0.5.6",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "turbolinks": "^5.2.0",
     "typescript": "^4.3.5",

yarn.lock

@@ -3472,6 +3472,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -8684,6 +8689,13 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swr@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.6.tgz#70bfe9bc9d7ac49a064be4a0f4acf57982e55a31"
+  integrity sha512-Bmx3L4geMZjYT5S2Z6EE6/5Cx6v1Ka0LhqZKq8d6WL2eu9y6gHWz3dUzfIK/ymZVHVfwT/EweFXiYGgfifei3w==
+  dependencies:
+    dequal "2.0.2"
+
 table@^6.0.9:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"