feat: enhance token icon styling with rounded borders and clean up co…

…nsole logs
oraidex · Dec 24, 2024 · 36f1e99 · 36f1e99
1 parent 5f9c427
commit 36f1e99
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 38 deletions.
diff --git a/src/layouts/App.tsx b/src/layouts/App.tsx
@@ -68,7 +68,6 @@ const App = () => {
   });
 
   useEffect(() => {
-    console.log('here');
     initializeOraidexCommon(dispatch, allOraichainTokens);
   }, [allOraichainTokens]);
 

diff --git a/src/pages/Pools/NewPoolModal/NewPoolModal.tsx b/src/pages/Pools/NewPoolModal/NewPoolModal.tsx
@@ -236,7 +236,7 @@ const NewPoolModal: FC<ModalProps> = ({ isOpen, close, open }) => {
                 (() => {
                   return (
                     <>
-                      {Token1Icon && <img src={Token1Icon} className={cx('logo', theme)} alt="" />}
+                      {Token1Icon && <img style={{ borderRadius: '100%' }} src={Token1Icon} className={cx('logo', theme)} alt="" />}
                       <div className={cx('title', theme)}>
                         <div>{token1InfoData?.symbol ?? ''}</div>
                       </div>
@@ -262,7 +262,7 @@ const NewPoolModal: FC<ModalProps> = ({ isOpen, close, open }) => {
                     disabled={!token1InfoData}
                     type="text"
                     value={amountToken1 ? amountToken1 : ''}
-                    onChange={() => {}}
+                    onChange={() => { }}
                     isAllowed={(values) => {
                       const { floatValue } = values;
                       // allow !floatValue to let user can clear their input
@@ -317,7 +317,7 @@ const NewPoolModal: FC<ModalProps> = ({ isOpen, close, open }) => {
                 (() => {
                   return (
                     <>
-                      {Token2Icon && <img src={Token2Icon} className={cx('logo', theme)} alt="" />}
+                      {Token2Icon && <img style={{ borderRadius: '100%' }} src={Token2Icon} className={cx('logo', theme)} alt="" />}
                       <div className={cx('title', theme)}>
                         <div>{token2InfoData?.symbol ?? ''}</div>
                       </div>
@@ -343,7 +343,7 @@ const NewPoolModal: FC<ModalProps> = ({ isOpen, close, open }) => {
                     disabled={!token2InfoData}
                     type="text"
                     value={amountToken2 ? amountToken2 : ''}
-                    onChange={() => {}}
+                    onChange={() => { }}
                     isAllowed={(values) => {
                       const { floatValue } = values;
                       // allow !floatValue to let user can clear their input
@@ -409,7 +409,7 @@ const NewPoolModal: FC<ModalProps> = ({ isOpen, close, open }) => {
         <div className={cx('stats_info', theme)}>
           <div className={cx('stats_info_wrapper', theme)}>
             <div className={cx('stats_info_row', theme)}>
-              <div>{Token1Icon && <img src={Token1Icon} className={cx('stats_info_lg', theme)} alt="" />}</div>
+              <div>{Token1Icon && <img style={{ borderRadius: '100%' }} src={Token1Icon} className={cx('stats_info_lg', theme)} alt="" />}</div>
               <div>
                 <span className={cx('stats_info_value_amount', theme)}>{amountToken1} </span>
                 <span className={cx('stats_info_name', theme)}>{token1InfoData?.symbol}</span>
@@ -427,7 +427,7 @@ const NewPoolModal: FC<ModalProps> = ({ isOpen, close, open }) => {
 
           <div className={cx('stats_info_wrapper', theme)}>
             <div className={cx('stats_info_row', theme)}>
-              {Token2Icon && <img src={Token2Icon} className={cx('stats_info_lg', theme)} alt="" />}
+              {Token2Icon && <img style={{ borderRadius: '100%' }} src={Token2Icon} className={cx('stats_info_lg', theme)} alt="" />}
               <div>
                 <span className={cx('stats_info_value_amount', theme)}>{amountToken2} </span>
                 <span className={cx('stats_info_name', theme)}>{token2InfoData?.symbol}</span>
@@ -457,10 +457,10 @@ const NewPoolModal: FC<ModalProps> = ({ isOpen, close, open }) => {
               type="text"
               value={0.3}
               disabled={true}
-              // value={supplyToken2 ? supplyToken2 : ''}
-              // onValueChange={({ floatValue }) => {
-              //   setSupplyToken2(floatValue);
-              // }}
+            // value={supplyToken2 ? supplyToken2 : ''}
+            // onValueChange={({ floatValue }) => {
+            //   setSupplyToken2(floatValue);
+            // }}
             />
             <span>%</span>
           </div>

diff --git a/src/pages/Pools/components/MyPoolInfo/MyPoolInfo.tsx b/src/pages/Pools/components/MyPoolInfo/MyPoolInfo.tsx
@@ -64,7 +64,7 @@ export const MyPoolInfo: FC<Props> = ({ myLpBalance, onLiquidityChange, isInacti
 
     const myLiquidityInUsdt = Number(myLpBalance) * lpPrice;
     setLpBalance({
-      myLiquidityInUsdt: BigInt(Math.trunc(myLiquidityInUsdt)),
+      myLiquidityInUsdt: myLiquidityInUsdt ? BigInt(Math.trunc(myLiquidityInUsdt)) : 0n,
       lpPrice
     });
   }, [lpTokenInfoData, myLpBalance, poolDetail.info]);

diff --git a/src/pages/Pools/components/TransactionHistory/index.tsx b/src/pages/Pools/components/TransactionHistory/index.tsx
@@ -120,7 +120,13 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
                           <div className={styles.titleItem}>Receive amount</div>
                           <div className={styles.amount}>
                             <div>
-                              <img style={{ borderRadius: '100%' }} width={20} height={20} src={QuoteTokenIcon} alt="" />
+                              <img
+                                style={{ borderRadius: '100%' }}
+                                width={20}
+                                height={20}
+                                src={QuoteTokenIcon}
+                                alt=""
+                              />
                             </div>
                             <span>
                               {numberWithCommas(toDisplay(item.returnAmount), undefined, { maximumFractionDigits: 6 })}
@@ -196,7 +202,13 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
                           <td className={`${styles.pay}`}>
                             <div className={styles.amount}>
                               <div>
-                                <img style={{ borderRadius: '100%' }} src={BaseTokenIcon} width={20} height={20} alt="" />
+                                <img
+                                  style={{ borderRadius: '100%' }}
+                                  src={BaseTokenIcon}
+                                  width={20}
+                                  height={20}
+                                  alt=""
+                                />
                               </div>
                               <span>
                                 {numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })}
@@ -212,7 +224,13 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
                           <td className={`${styles.receive}`}>
                             <div className={styles.amount}>
                               <div>
-                                <img style={{ borderRadius: '100%' }} src={QuoteTokenIcon} width={20} height={20} alt="" />
+                                <img
+                                  style={{ borderRadius: '100%' }}
+                                  src={QuoteTokenIcon}
+                                  width={20}
+                                  height={20}
+                                  alt=""
+                                />
                               </div>
                               <span>
                                 {numberWithCommas(toDisplay(item.returnAmount), undefined, {

diff --git a/src/pages/Pools/hooks/hooks.ts b/src/pages/Pools/hooks/hooks.ts
@@ -175,7 +175,7 @@ export const useGetMyStake = ({ stakerAddress, pairDenoms, tf }: GetStakedByUser
     const { totalSupply, totalLiquidity } = pool;
     const myStakedLP = pool.liquidityAddr
       ? totalRewardInfoData?.reward_infos.find((item) => isEqual(item.staking_token, pool.liquidityAddr))
-          ?.bond_amount || '0'
+        ?.bond_amount || '0'
       : 0;
 
     const lpPrice = Number(totalSupply) ? totalLiquidity / Number(totalSupply) : 0;
@@ -186,9 +186,9 @@ export const useGetMyStake = ({ stakerAddress, pairDenoms, tf }: GetStakedByUser
 
   const totalEarned = myStakes
     ? myStakes.reduce((total, current) => {
-        total += current.earnAmountInUsdt;
-        return total;
-      }, 0)
+      total += current.earnAmountInUsdt;
+      return total;
+    }, 0)
     : 0;
 
   return {
@@ -220,23 +220,28 @@ export const useGetPoolDetail = ({ pairDenoms }: { pairDenoms: string }) => {
   useEffect(() => {
     if (!pairDenoms) return;
     (async function fetchTokens() {
-      const pairRawData = pairDenoms.split('_');
-      const tokenTypes = pairRawData.map((raw) =>
-        oraichainTokens.find((token) => token.denom === raw || token.contractAddress === raw)
-      );
+      try {
 
-      let token1 = tokenTypes[0];
-      let token2 = tokenTypes[1];
+        const pairRawData = pairDenoms.split('_');
+        const tokenTypes = pairRawData.map((raw) =>
+          oraichainTokens.find((token) => token.denom === raw || token.contractAddress === raw)
+        );
 
-      if (!tokenTypes[0]) {
-        const inspectedToken1 = await tokenInspector.inspectToken({ tokenId: pairRawData[0], getOffChainData: true });
-        token1 = onChainTokenToTokenItem(inspectedToken1);
-      }
-      if (!tokenTypes[1]) {
-        const inspectedToken2 = await tokenInspector.inspectToken({ tokenId: pairRawData[1], getOffChainData: true });
-        token2 = onChainTokenToTokenItem(inspectedToken2);
+        let token1 = tokenTypes[0];
+        let token2 = tokenTypes[1];
+
+        if (!tokenTypes[0]) {
+          const inspectedToken1 = await tokenInspector.inspectToken({ tokenId: pairRawData[0], getOffChainData: true });
+          token1 = onChainTokenToTokenItem(inspectedToken1);
+        }
+        if (!tokenTypes[1]) {
+          const inspectedToken2 = await tokenInspector.inspectToken({ tokenId: pairRawData[1], getOffChainData: true });
+          token2 = onChainTokenToTokenItem(inspectedToken2);
+        }
+        setTokens([token1, token2]);
+      } catch (e) {
+        console.error('error fetchTokens: ', e);
       }
-      setTokens([token1, token2]);
     })();
   }, [pairDenoms]);
 

diff --git a/src/pages/Pools/index.tsx b/src/pages/Pools/index.tsx
@@ -74,7 +74,7 @@ const Pools: React.FC<{}> = () => {
       // calculate my stake in usdt, we calculate by bond_amount from contract and totalLiquidity from backend.
       const myStakedLP = stakingToken
         ? totalRewardInfoData?.reward_infos.find((item) => isEqual(item.staking_token, stakingToken))?.bond_amount ||
-          '0'
+        '0'
         : 0;
       const lpPrice = Number(totalSupply) ? totalLiquidity / Number(totalSupply) : 0;
       const myStakeLPInUsdt = +myStakedLP * lpPrice;
@@ -122,16 +122,16 @@ const Pools: React.FC<{}> = () => {
     if (isReverseLogo) {
       return (
         <div className={styles.symbols}>
-          <img width={32} height={32} src={QuoteTokenIcon} className={styles.symbols_logo_left} alt="" />
-          <img width={32} height={32} src={BaseTokenIcon} className={styles.symbols_logo_right} alt="" />
+          <img style={{ borderRadius: '100%' }} width={32} height={32} src={QuoteTokenIcon} className={styles.symbols_logo_left} alt="" />
+          <img style={{ borderRadius: '100%' }} width={32} height={32} src={BaseTokenIcon} className={styles.symbols_logo_right} alt="" />
         </div>
       );
     }
 
     return (
       <div className={styles.symbols}>
-        <img width={32} height={32} src={BaseTokenIcon} className={styles.symbols_logo_left} alt="" />
-        <img width={32} height={32} src={QuoteTokenIcon} className={styles.symbols_logo_right} alt="" />
+        <img style={{ borderRadius: '100%' }} width={32} height={32} src={BaseTokenIcon} className={styles.symbols_logo_left} alt="" />
+        <img style={{ borderRadius: '100%' }} width={32} height={32} src={QuoteTokenIcon} className={styles.symbols_logo_right} alt="" />
       </div>
     );
   };