fix(send, bridge): use totalSupplyProofList in select (#1067)

cybercongress · Dec 15, 2023 · 0d44f4a · 0d44f4a
1 parent d0587c5
commit 0d44f4a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 27 deletions.
diff --git a/src/pages/teleport/Teleport.context.tsx b/src/pages/teleport/Teleport.context.tsx
@@ -5,12 +5,17 @@ import { RootState } from 'src/redux/store';
 import { ObjKeyValue } from 'src/types/data';
 import { Nullable } from 'src/types';
 import useGetBalances from 'src/hooks/getBalances';
+import useGetTotalSupply from 'src/hooks/useGetTotalSupply';
 
 const TeleportContext = React.createContext<{
   accountBalances: Nullable<ObjKeyValue>;
+  totalSupplyProofList: Nullable<ObjKeyValue>;
+  totalSupplyAll: Nullable<ObjKeyValue>;
   refreshBalances: () => void;
 }>({
   accountBalances: null,
+  totalSupplyProofList: undefined,
+  totalSupplyAll: undefined,
   refreshBalances: () => undefined,
 });
 
@@ -21,13 +26,16 @@ function TeleportContextProvider({ children }: { children: React.ReactNode }) {
   const { defaultAccount } = useAppSelector((state: RootState) => state.pocket);
   const addressActive = defaultAccount.account?.cyber;
 
+  const { totalSupplyProofList, totalSupplyAll } = useGetTotalSupply();
   const { liquidBalances: accountBalances, refresh: refreshBalances } =
     useGetBalances(addressActive);
 
   const contextValue = useMemo(
     () => ({
       accountBalances,
       refreshBalances,
+      totalSupplyProofList,
+      totalSupplyAll,
     }),
     [accountBalances, refreshBalances]
   );

diff --git a/src/pages/teleport/bridge/bridge.tsx b/src/pages/teleport/bridge/bridge.tsx
@@ -38,7 +38,8 @@ const isCyberChain = (chainId: string) => chainId === CYBER.CHAIN_ID;
 function Bridge() {
   const { traseDenom } = useIbcDenom();
   const { channels } = useChannels();
-  const { accountBalances, refreshBalances } = useTeleport();
+  const { totalSupplyProofList, accountBalances, refreshBalances } =
+    useTeleport();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const [tokenSelect, setTokenSelect] = useState<string>(
@@ -151,8 +152,8 @@ function Bridge() {
 
   const tokenOptions = useMemo(
     () =>
-      accountBalances
-        ? Object.keys(accountBalances).map((key) => ({
+      totalSupplyProofList
+        ? Object.keys(totalSupplyProofList).map((key) => ({
             value: key,
             text: (
               <DenomArr
@@ -165,7 +166,7 @@ function Bridge() {
           }))
         : [],
 
-    [accountBalances, tokenSelect]
+    [totalSupplyProofList, tokenSelect]
   );
 
   const validInputAmountToken = useMemo(() => {

diff --git a/src/pages/teleport/send/send.tsx b/src/pages/teleport/send/send.tsx
@@ -47,7 +47,8 @@ function Send() {
   const { defaultAccount } = useAppSelector((state: RootState) => state.pocket);
   useAccountsPassports();
   const { addressActive } = useSetActiveAddress(defaultAccount);
-  const { accountBalances, refreshBalances } = useTeleport();
+  const { totalSupplyProofList, accountBalances, refreshBalances } =
+    useTeleport();
   const [update, setUpdate] = useState(0);
   const [recipient, setRecipient] = useState<string | undefined>(undefined);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -159,22 +160,20 @@ function Send() {
     );
   }, [recipientBalances, tokenSelect]);
 
-  const reduceOptions = useMemo(() => {
-    const tempList: SelectOption[] = [];
-
-    if (accountBalances) {
-      Object.keys(accountBalances).forEach((key) => {
-        tempList.push({
-          value: key,
-          text: (
-            <DenomArr denomValue={key} onlyText tooltipStatusText={false} />
-          ),
-          img: <DenomArr denomValue={key} onlyImg tooltipStatusImg={false} />,
-        });
-      });
-    }
-    return tempList;
-  }, [accountBalances]);
+  const reduceOptions = useMemo(
+    () =>
+      totalSupplyProofList
+        ? Object.keys(totalSupplyProofList).map((key) => ({
+            value: key,
+            text: (
+              <DenomArr denomValue={key} onlyText tooltipStatusText={false} />
+            ),
+            img: <DenomArr denomValue={key} onlyImg tooltipStatusImg={false} />,
+          }))
+        : [],
+
+    [totalSupplyProofList]
+  );
 
   const setPercentageBalanceHook = useCallback(
     (value: number) => {

diff --git a/src/pages/teleport/swap/swap.tsx b/src/pages/teleport/swap/swap.tsx
@@ -1,5 +1,4 @@
 import { MainContainer, Slider } from 'src/components';
-import useGetTotalSupply from 'src/hooks/useGetTotalSupply';
 import { CYBER } from 'src/utils/config';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { RootState } from 'src/redux/store';
@@ -16,9 +15,7 @@ import {
 import { useQueryClient } from 'src/contexts/queryClient';
 import { createSearchParams, useSearchParams } from 'react-router-dom';
 import { useAppSelector } from 'src/redux/hooks';
-import TokenSetterSwap, {
-  TokenSetterId,
-} from './components/TokenSetterSwap';
+import TokenSetterSwap, { TokenSetterId } from './components/TokenSetterSwap';
 import { useGetParams, useGetSwapPrice } from '../hooks';
 import { sortReserveCoinDenoms, calculatePairAmount } from './utils';
 
@@ -34,7 +31,11 @@ const tokenBDefaultValue = CYBER.DENOM_LIQUID_TOKEN;
 
 function Swap() {
   const { traseDenom } = useIbcDenom();
-  const { accountBalances, refreshBalances } = useTeleport();
+  const {
+    totalSupplyProofList: totalSupply,
+    accountBalances,
+    refreshBalances,
+  } = useTeleport();
   const queryClient = useQueryClient();
   const [update, setUpdate] = useState(0);
   const { defaultAccount } = useAppSelector((state: RootState) => state.pocket);
@@ -45,7 +46,6 @@ function Swap() {
   );
   const poolsData = usePoolListInterval({ refetchInterval: 5 * 60 * 1000 });
   const params = useGetParams();
-  const { totalSupplyProofList: totalSupply } = useGetTotalSupply();
   const [searchParams, setSearchParams] = useSearchParams();
   const [tokenA, setTokenA] = useState<string>(tokenADefaultValue);
   const [tokenB, setTokenB] = useState<string>(tokenBDefaultValue);