chore: continue with staking data handling

forbole · Jan 11, 2024 · 91fa42a · 91fa42a
1 parent 67cd129
commit 91fa42a
Show file tree

Hide file tree

Showing 19 changed files with 347 additions and 102 deletions.
diff --git a/public/locales/en/staking.json b/public/locales/en/staking.json
@@ -63,6 +63,9 @@
   "reward q": "What is staking reward and how often are the rewards distributed?",
   "rewards": "Earn Rewards",
   "rewards desc": "You earn staking rewards on your tokens",
+  "rewardsModal": {
+    "button": "Claim Rewards"
+  },
   "risks para 1": "There may be some risks when your validator is having poor performance or making critical mistakes, your funds will be slashed accordingly.",
   "risks q": "What are the risks of staking?",
   "searchNetwork": "Search network",
@@ -95,6 +98,9 @@
     "title": "Stake with Forbole",
     "tokenAmount": "Token amount"
   },
+  "stakingWidget": {
+    "connectWallet": "Connect Wallet"
+  },
   "string": " ",
   "success": "Email sent! We will get back to you shortly",
   "technical_support": "Technical support",

diff --git a/public/locales/zh-CN/staking.json b/public/locales/zh-CN/staking.json
@@ -63,6 +63,9 @@
   "reward q": "什么是质押奖励以及奖励多久发放一次？",
   "rewards": "赚取收益",
   "rewards desc": "可以通过质押通证赚取收益",
+  "rewardsModal": {
+    "button": "Claim Rewards"
+  },
   "risks para 1": "当您的验证人表现不佳或犯严重错误时，可能会存在一些风险，您的资金将被相应削减。",
   "risks q": "质押有哪些风险？",
   "searchNetwork": "搜索网络",
@@ -95,6 +98,9 @@
     "title": "Stake with forbole",
     "tokenAmount": "Token amount"
   },
+  "stakingWidget": {
+    "connectWallet": "Connect Wallet"
+  },
   "string": " ",
   "success": "邮件已发送！",
   "technical_support": "技术支持",

diff --git a/public/locales/zh-HK/staking.json b/public/locales/zh-HK/staking.json
@@ -63,6 +63,9 @@
   "reward q": "什麼是質押獎勵以及獎勵多久發放一次？",
   "rewards": "賺取收益",
   "rewards desc": "可以透過質押通證賺取收益",
+  "rewardsModal": {
+    "button": "Claim Rewards"
+  },
   "risks para 1": "當您的驗證人表現不佳或犯嚴重錯誤時，可能會存在一些風險，您的資金將被相應削減。",
   "risks q": "質押有哪些風險？",
   "searchNetwork": "搜尋網絡",
@@ -95,6 +98,9 @@
     "title": "Stake with forbole",
     "tokenAmount": "Token amount"
   },
+  "stakingWidget": {
+    "connectWallet": "Connect Wallet"
+  },
   "string": " ",
   "success": "郵件已發送！",
   "technical_support": "技術支援",

diff --git a/src/components/highlight-button/index.module.scss b/src/components/highlight-button/index.module.scss
@@ -46,6 +46,10 @@
     &,
     &:hover {
       box-shadow: 4px 8px 24px 0 #fd247240;
+
+      &:disabled {
+        box-shadow: none;
+      }
     }
   }
 }
diff --git a/...s/staking/components/networks/components/network_grid/components/network_card/popover.tsx b/...s/staking/components/networks/components/network_grid/components/network_card/popover.tsx
@@ -6,7 +6,7 @@ import type {
   ReactNode,
   SetStateAction,
 } from "react";
-import { useContext, useMemo } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import CtaButton from "@src/components/cta-button";
 import EmptyButton from "@src/components/empty-button";
@@ -16,10 +16,15 @@ import IconInfoCircle from "@src/components/icons/info-circle.svg";
 import { tooltipId } from "@src/components/tooltip";
 import {
   StakingContext,
+  getNetworkInfo,
   getUserAccountsForNetwork,
   setSelectedAccount,
 } from "@src/screens/staking/lib/context";
-import type { Account } from "@src/screens/staking/lib/context/types";
+import type {
+  Account,
+  NetworkInfo,
+  TStakingContext,
+} from "@src/screens/staking/lib/context/types";
 import {
   WalletId,
   networkNameToChainId,
@@ -50,25 +55,45 @@ const PopOver = ({
 }: PopOverProps) => {
   const isStakingSupported = networksWithStaking.has(network.graphql);
   const { t } = useTranslation("staking");
+  const stakingRef = useRef({} as TStakingContext);
+
+  const [stakingNetworkInfo, setStakingNetworkInfo] =
+    useState<NetworkInfo | null>(null);
 
   const { setState: setStakingState, state: stakingState } =
     useContext(StakingContext);
 
+  stakingRef.current.state = stakingState;
+  stakingRef.current.setState = setStakingState;
+
+  const stakingChainId = networkNameToChainId[network.graphql];
+
+  useEffect(() => {
+    if (stakingChainId) {
+      getNetworkInfo(
+        stakingRef.current.setState,
+        stakingRef.current.state,
+        stakingChainId,
+      ).then((newInfo) => {
+        setStakingNetworkInfo(newInfo);
+      });
+    }
+  }, [stakingChainId]);
+
   const { account, chainId, hasRewards } = useMemo(() => {
     const wallet = WalletId.Keplr;
-    const newChainId = networkNameToChainId[network.graphql];
 
     const result = {
       account: null as Account | null,
-      chainId: newChainId,
+      chainId: stakingChainId,
       hasRewards: false,
     };
 
-    if (!!newChainId && !!wallet) {
+    if (!!stakingChainId && !!wallet) {
       const accounts = getUserAccountsForNetwork(
         stakingState,
         WalletId.Keplr, // @TODO
-        newChainId,
+        stakingChainId,
       );
 
       if (!accounts?.length) {
@@ -85,7 +110,7 @@ const PopOver = ({
     }
 
     return result;
-  }, [network, stakingState]);
+  }, [stakingState, stakingChainId]);
 
   return (
     <div
@@ -115,7 +140,7 @@ const PopOver = ({
             <div>
               <h6 className={styles.label}>
                 <IconInfoCircle
-                  data-tooltip-content="Foo Tooltip"
+                  data-tooltip-content="@TODO"
                   data-tooltip-id={tooltipId}
                 />
                 {network.denom?.toUpperCase()}
@@ -125,17 +150,28 @@ const PopOver = ({
               </span>
             </div>
           )}
-          {!!networkSummary.APY && networkSummary.APY > 0 && (
-            <div>
-              <h6 className={styles.label}>
-                <IconInfoCircle />
-                APY
-              </h6>
-              <span className={styles.value}>{`${Math.round(
-                networkSummary.APY * 100,
-              )}%`}</span>
-            </div>
-          )}
+          {(() => {
+            const apy = (() => {
+              if (stakingChainId) return stakingNetworkInfo?.apy;
+
+              return networkSummary.APY;
+            })();
+
+            return (
+              !!apy &&
+              apy > 0 && (
+                <div>
+                  <h6 className={styles.label}>
+                    <IconInfoCircle />
+                    APY
+                  </h6>
+                  <span className={styles.value}>{`${Math.round(
+                    apy * 100,
+                  )}%`}</span>
+                </div>
+              )
+            );
+          })()}
           {!!networkSummary.TVL && (
             <div>
               <h6 className={styles.label}>

diff --git a/src/screens/staking/components/staking_section/claim_rewards_modal.tsx b/src/screens/staking/components/staking_section/claim_rewards_modal.tsx
@@ -2,13 +2,14 @@
 import useTranslation from "next-translate/useTranslation";
 import { useContext, useState } from "react";
 
+import HighlightButton from "@src/components/highlight-button";
 import { toastSuccess } from "@src/components/notification";
 import {
-  ChainId,
   StakingContext,
   setSelectedAccount,
 } from "@src/screens/staking/lib/context";
 import { claimRewards } from "@src/screens/staking/lib/context/operations";
+import { ChainId } from "@src/screens/staking/lib/context/types";
 
 import ModalBase from "./modal_base";
 import NetworksSelect from "./networks_select";
@@ -38,7 +39,7 @@ const ClaimRewardsModal = () => {
         <div>Gas Fee</div>
         <div>0.002 ATOM</div>
       </div>
-      <button
+      <HighlightButton
         onClick={() => {
           if (!selectedAccount) return;
 
@@ -57,9 +58,11 @@ const ClaimRewardsModal = () => {
               console.error(error);
             });
         }}
+        pinkShadow
+        size="big"
       >
-        Claim Rewards
-      </button>
+        {t("rewardsModal.button")}
+      </HighlightButton>
     </ModalBase>
   );
 };

diff --git a/src/screens/staking/components/staking_section/index.tsx b/src/screens/staking/components/staking_section/index.tsx
@@ -25,6 +25,7 @@ import { tooltipId } from "@src/components/tooltip";
 import {
   StakingContext,
   addToConnectedWallets,
+  fetchNetworksInfo,
   getConnectedWallets,
   setUserWallet,
 } from "@src/screens/staking/lib/context";
@@ -233,7 +234,13 @@ const StakingSection = () => {
   useEffect(() => {
     const connectedWallets = getConnectedWallets();
 
-    tryToConnectWallets(connectedWallets);
+    fetchNetworksInfo(setStakingState);
+
+    tryToConnectWallets(connectedWallets).then(() => {
+      setStakingState({
+        hasInit: true,
+      });
+    });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

diff --git a/src/screens/staking/components/staking_section/modal_base.module.scss b/src/screens/staking/components/staking_section/modal_base.module.scss
@@ -51,3 +51,8 @@
 .modal {
   overflow: auto;
 }
+
+.error {
+  // @TODO: Move to a component
+  color: red;
+}
diff --git a/src/screens/staking/components/staking_section/modal_base.tsx b/src/screens/staking/components/staking_section/modal_base.tsx
@@ -6,6 +6,16 @@ import IconClose from "@src/components/icons/icon_cross_grey.svg";
 
 import * as styles from "./modal_base.module.scss";
 
+type ModalErrorProps = {
+  children: ReactNode;
+};
+
+export const ModalError = ({ children }: ModalErrorProps) => {
+  if (!children) return null;
+
+  return <div className={styles.error}>{children}</div>;
+};
+
 type Props = {
   children: ReactNode;
   onClose: () => void;

diff --git a/src/screens/staking/components/staking_section/staking_modal.module.scss b/src/screens/staking/components/staking_section/staking_modal.module.scss
@@ -35,11 +35,5 @@
 }
 
 .input {
-  margin: 0;
   width: 100%;
 }
-
-.error {
-  // @TODO: Move to a component
-  color: red;
-}