feat: update UI components and improve functionality across various p…

…ages
oraidex · Jan 2, 2025 · 298763f · 298763f
2 parents b96bbec + f6b26b7
commit 298763f
Show file tree

Hide file tree

Showing 23 changed files with 359 additions and 135 deletions.
diff --git a/package.json b/package.json
@@ -25,8 +25,8 @@
     "@oraichain/ethereum-multicall": "^1.0.2",
     "@oraichain/kawaiiverse-txs": "^0.0.3",
     "@oraichain/orai-bitcoin": "2.0.0",
-    "@oraichain/orai-token-inspector": "^0.1.24",
-    "@oraichain/oraidex-common": "2.0.5",
+    "@oraichain/oraidex-common": "2.0.6",
+    "@oraichain/orai-token-inspector": "^0.1.25",
     "@oraichain/oraidex-common-ui": "1.0.11",
     "@oraichain/oraidex-contracts-sdk": "1.0.55",
     "@oraichain/oraidex-universal-swap": "1.2.0-beta28",
@@ -171,7 +171,7 @@
     "axios": "0.26.1",
     "@sentry/react": "7.99.0",
     "@cosmjs/amino": "0.32.4",
-    "@oraichain/oraidex-common": "2.0.5"
+    "@oraichain/oraidex-common": "2.0.6"
   },
   "overrides": {
     "cosmjs-types@>0.7.0 <0.8.0": "0.7.1",

diff --git a/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.tsx b/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.tsx
@@ -8,7 +8,13 @@ import ToggleSwitch from 'components/ToggleSwitch';
 import { type NetworkType } from 'components/WalletManagement/walletConfig';
 import { ThemeContext } from 'context/theme-context';
 import copy from 'copy-to-clipboard';
-import { btcNetworksWithIcon, cosmosNetworksWithIcon, evmNetworksIconWithoutTron, tronNetworksWithIcon } from 'helper';
+import {
+  btcNetworksWithIcon,
+  cosmosNetworksWithIcon,
+  evmNetworksIconWithoutTron,
+  solanaNetworksWithIcon,
+  tronNetworksWithIcon
+} from 'helper';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useOnClickOutside from 'hooks/useOnClickOutside';
@@ -33,6 +39,7 @@ export const MyWalletMobile: React.FC<{
   const [metamaskAddress] = useConfigReducer('metamaskAddress');
   const [cosmosAddresses] = useConfigReducer('cosmosAddress');
   const [btcAddress] = useConfigReducer('btcAddress');
+  const [solAddress] = useConfigReducer('solAddress');
 
   const [currentDisconnectingNetwork, setCurrentDisconnectingNetwork] = useState<NetworkType>(null);
   const [isShowDisconnect, setIsShowDisconnect] = useState(false);
@@ -154,14 +161,13 @@ export const MyWalletMobile: React.FC<{
     return (
       <div className={styles.addressByNetworkItem}>
         {tronNetworksWithIcon.map((network) => {
-          let NetworkIcon = theme === 'dark' ? network.Icon : network.IconLight;
+          let NetworkIcon = theme === 'dark' ? network.chainSymbolImageUrl : network.chainSymbolImageUrl;
           if (!NetworkIcon) NetworkIcon = DefaultIcon;
           return (
             <div key={network.chainId} className={styles.addressByChainInNetwork}>
               <div className={styles.left}>
                 <div className={styles.icon}>
                   <div className={styles.iconChain}>
-                    {/* <NetworkIcon width={30} height={30} /> */}
                     <img src={NetworkIcon} width={30} height={30} alt="network-icon" />
                   </div>
                 </div>
@@ -191,14 +197,13 @@ export const MyWalletMobile: React.FC<{
     return (
       <div className={styles.addressByNetworkItem}>
         {btcNetworksWithIcon.map((network) => {
-          let NetworkIcon = theme === 'dark' ? network.Icon : network.IconLight;
+          let NetworkIcon = theme === 'dark' ? network.chainSymbolImageUrl : network.chainSymbolImageUrl;
           if (!NetworkIcon) NetworkIcon = DefaultIcon;
           return (
             <div key={network.chainId} className={styles.addressByChainInNetwork}>
               <div className={styles.left}>
                 <div className={styles.icon}>
                   <div className={styles.iconChain}>
-                    {/* <NetworkIcon width={30} height={30} /> */}
                     <img src={NetworkIcon} width={30} height={30} alt="network-icon" />
                   </div>
                 </div>
@@ -223,6 +228,43 @@ export const MyWalletMobile: React.FC<{
     );
   };
 
+  const renderSolAddresses = () => {
+    if (!solAddress) return <></>;
+
+    return (
+      <div className={styles.addressByNetworkItem}>
+        {solanaNetworksWithIcon.map((network) => {
+          let NetworkIcon = theme === 'dark' ? network.chainSymbolImageUrl : network.chainSymbolImageUrl;
+          if (!NetworkIcon) NetworkIcon = DefaultIcon;
+          return (
+            <div key={network.chainId} className={styles.addressByChainInNetwork}>
+              <div className={styles.left}>
+                <div className={styles.icon}>
+                  <div className={styles.iconChain}>
+                    <img src={NetworkIcon} width={30} height={30} alt="network-icon" />
+                  </div>
+                </div>
+                <div className={styles.info}>
+                  <div className={styles.chainName}>{network.chainName}</div>
+                  <div className={styles.chainAddress}>
+                    <span>{reduceString(solAddress, 6, 6)}</span>
+                    <div className={styles.copyBtn} onClick={(e) => copyWalletAddress(e, solAddress)}>
+                      {copiedValue === solAddress ? (
+                        <SuccessIcon width={15} height={15} />
+                      ) : (
+                        <CopyIcon width={15} height={15} />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
   return (
     <div
       ref={myWalletRef}
@@ -273,6 +315,7 @@ export const MyWalletMobile: React.FC<{
         </div>
         <div className={styles.listAddressByNetwork}>
           {renderCosmosAddresses()}
+          {renderSolAddresses()}
           {renderEvmAddresses()}
           {renderTronAddresses()}
           {renderBtcAddresses()}

diff --git a/src/helper/index.tsx b/src/helper/index.tsx
@@ -427,16 +427,16 @@ export const getAddressTransferForEvm = async (walletByNetworks: WalletsByNetwor
 export const getAddressTransfer = async (network: CustomChainInfo, walletByNetworks: WalletsByNetwork) => {
   try {
     let address = '';
-    if (network.networkType === 'ton' && walletByNetworks.ton) {
+    if (network.networkType === 'ton' && isConnectSpecificNetwork(walletByNetworks.ton)) {
       address =
         JSON.parse(JSON.parse(localStorage.getItem('persist:root'))?.config)?.tonAddress ||
         toUserFriendlyAddress(window.Ton?.account?.address);
       // address = useTonAddress();
-    } else if (network.networkType === 'evm') {
+    } else if (network.networkType === 'evm' && isConnectSpecificNetwork(walletByNetworks.evm)) {
       address = await getAddressTransferForEvm(walletByNetworks, network);
-    } else if (network.networkType == 'svm' && walletByNetworks.solana) {
+    } else if (network.networkType == 'svm' && isConnectSpecificNetwork(walletByNetworks.solana)) {
       let provider = window?.solana;
-      if (walletByNetworks.solana === 'owallet') {
+      if (walletByNetworks.solana === 'owallet' || isMobile()) {
         provider = window?.owalletSolana;
       }
       const { publicKey } = await provider.connect();

diff --git a/src/index.tsx b/src/index.tsx
@@ -19,6 +19,7 @@ import 'polyfill';
 import App from './layouts/App';
 import { network } from 'initCommon';
 import { TonProvider } from 'context/ton-provider';
+import { SolanaWalletProvider } from 'context/solana-content';
 
 const queryClient = new QueryClient();
 
@@ -69,7 +70,9 @@ const initApp = async () => {
             <ScrollToTop />
             <QueryClientProvider client={queryClient}>
               <TonProvider>
-                <App />
+                <SolanaWalletProvider>
+                  <App />
+                </SolanaWalletProvider>
               </TonProvider>
             </QueryClientProvider>
           </Router>

diff --git a/src/layouts/App.tsx b/src/layouts/App.tsx
@@ -7,10 +7,9 @@ import { useTonConnectUI } from '@tonconnect/ui-react';
 import { isMobile } from '@walletconnect/browser-utils';
 import { TToastType, displayToast } from 'components/Toasts/Toast';
 import { useWallet } from '@solana/wallet-adapter-react';
-import { SolanaWalletProvider } from 'context/solana-content';
 import { ThemeProvider } from 'context/theme-context';
 import { TonNetwork } from 'context/ton-provider';
-import { getListAddressCosmos, getWalletByNetworkFromStorage, interfaceRequestTron } from 'helper';
+import { getListAddressCosmos, getWalletByNetworkFromStorage, interfaceRequestTron, retry } from 'helper';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useWalletReducer from 'hooks/useWalletReducer';
 import SingletonOraiswapV3 from 'libs/contractSingleton';
@@ -296,11 +295,26 @@ const App = () => {
     let solAddress;
     if (walletByNetworks.solana === 'owallet' || mobileMode) {
       if (window.owalletSolana) {
-        const { publicKey } = await window.owalletSolana.connect();
-        if (publicKey) {
-          solAddress = publicKey.toBase58();
-          setSolAddress(solAddress);
-        }
+        const provider = window?.owalletSolana;
+        solanaWallet.select('OWallet' as any);
+        await retry(
+          async () => {
+            try {
+              await solanaWallet.connect();
+            } catch (err) {
+              console.log('err', err);
+            }
+            const { publicKey } = await provider.connect();
+            if (publicKey) {
+              solAddress = publicKey.toBase58();
+              setSolAddress(solAddress);
+            } else {
+              throw new Error('Cannot connect to Solana wallet');
+            }
+          },
+          3,
+          1000
+        );
       }
     }
     return solAddress;
@@ -375,20 +389,18 @@ const App = () => {
   const [openBanner, setOpenBanner] = useState(false);
 
   return (
-    <SolanaWalletProvider>
-      <ThemeProvider>
-        <div className={`app ${theme}`}>
-          {/* <button data-featurebase-feedback>Open Widget</button> */}
-          <Menu />
-          <NoticeBanner openBanner={openBanner} setOpenBanner={setOpenBanner} />
-          {/* {(!bannerTime || Date.now() > bannerTime + 86_400_000) && <FutureCompetition />} */}
-          <div className="main">
-            <Sidebar />
-            <div className={openBanner ? `bannerWithContent appRight` : 'appRight'}>{routes()}</div>
-          </div>
+    <ThemeProvider>
+      <div className={`app ${theme}`}>
+        {/* <button data-featurebase-feedback>Open Widget</button> */}
+        <Menu />
+        <NoticeBanner openBanner={openBanner} setOpenBanner={setOpenBanner} />
+        {/* {(!bannerTime || Date.now() > bannerTime + 86_400_000) && <FutureCompetition />} */}
+        <div className="main">
+          <Sidebar />
+          <div className={openBanner ? `bannerWithContent appRight` : 'appRight'}>{routes()}</div>
         </div>
-      </ThemeProvider>
-    </SolanaWalletProvider>
+      </div>
+    </ThemeProvider>
   );
 };
 

diff --git a/src/layouts/Menu.module.scss b/src/layouts/Menu.module.scss
@@ -381,6 +381,19 @@
     color: theme-get('neutral-text-title');
   }
 
+  &.dark {
+    svg {
+      path {
+        stroke: #efefef;
+      }
+    }
+  }
+  svg {
+    path {
+      stroke: #474747;
+    }
+  }
+
   &:hover {
     @include theme() {
       background-color: theme-get('neutral-border-border-bold');

diff --git a/src/libs/contractSingleton.ts b/src/libs/contractSingleton.ts
@@ -385,22 +385,22 @@ export default class SingletonOraiswapV3 {
     });
   }
 
-  public static approveToken = async (token: string, amount: bigint, address: string) => {
+  public static async approveToken(token: string, amount: bigint, address: string) {
     const tokenClient = new OraiswapTokenClient(this._dex.client, address, token);
 
     return await tokenClient.increaseAllowance({
       amount: amount.toString(),
       spender: this._dex.contractAddress
     });
-  };
+  }
 
-  public static getTicksAndIncentivesInfo = async (
+  public static async getTicksAndIncentivesInfo(
     lowerTick: number,
     upperTick: number,
     positionIndex: number,
     user: string,
     poolKey: PoolKey
-  ) => {
+  ) {
     try {
       await this.loadCosmwasmClient();
       const multicallClient = new MulticallQueryClient(this._cosmwasmClient, network.multicall);
@@ -449,13 +449,13 @@ export default class SingletonOraiswapV3 {
       console.log('error', error);
       return null;
     }
-  };
+  }
 
-  public static getLiquidityByPool = async (
+  public static async getLiquidityByPool(
     pool: PoolWithPoolKey,
     prices: CoinGeckoPrices<string>,
     positions: Position[]
-  ): Promise<any> => {
+  ): Promise<any> {
     const poolKey = pool.pool_key;
     const tokenX = oraichainTokens.find((token) => extractAddress(token) === poolKey.token_x);
     const tokenY = oraichainTokens.find((token) => extractAddress(token) === poolKey.token_y);
@@ -490,18 +490,18 @@ export default class SingletonOraiswapV3 {
       total: tvlLockedUSD,
       allocation
     };
-  };
+  }
 
   public static async getAllPosition(): Promise<Position[]> {
     await this.loadHandler();
     const positions = await this._handler.allPositions();
     return positions;
   }
 
-  public static getPoolLiquidities = async (
+  public static async getPoolLiquidities(
     pools: PoolWithPoolKey[],
     prices: CoinGeckoPrices<string>
-  ): Promise<Record<string, number>> => {
+  ): Promise<Record<string, number>> {
     const poolLiquidities: Record<string, number> = {};
     await this.loadHandler();
 
@@ -522,11 +522,11 @@ export default class SingletonOraiswapV3 {
     }
 
     return poolLiquidities;
-  };
+  }
 
-  public static getTotalLiquidityValue = async (): Promise<number> => {
+  public static async getTotalLiquidityValue() {
     return 1;
-  };
+  }
 }
 
 export interface PositionTest {

diff --git a/src/libs/utils.ts b/src/libs/utils.ts
@@ -9,7 +9,7 @@ import { isMobile } from '@walletconnect/browser-utils';
 import WalletConnectProvider from '@walletconnect/ethereum-provider';
 import bech32 from 'bech32';
 import { CoinGeckoPrices } from 'hooks/useCoingecko';
-import { chainInfos, cosmosTokens, network, oraichainTokens, tokenMap } from 'initCommon';
+import { chainInfos, cosmosTokens, flattenTokens, network, oraichainTokens, tokenMap } from 'initCommon';
 import { getCosmWasmClient } from 'libs/cosmjs';
 import { NetworkChainId } from '@oraichain/common';
 import { store } from 'store/configure';
@@ -75,14 +75,8 @@ export const toSumDisplay = (amounts: AmountDetails): number => {
     // update later
     const balance = amounts[denom];
     if (!balance) continue;
-    // amount += toDisplay(balance, tokenMap[denom]?.decimals);
 
-    const storage = store.getState();
-    const allOraichainTokens = storage.token.allOraichainTokens || [];
-    amount += toDisplay(
-      balance,
-      allOraichainTokens.find((t) => t.contractAddress === denom || t.denom === denom)?.decimals
-    );
+    amount += toDisplay(balance, flattenTokens.find((t) => t.contractAddress === denom || t.denom === denom)?.decimals);
   }
   return amount;
 };

diff --git a/src/pages/Balance/TransferConvertToken/index.tsx b/src/pages/Balance/TransferConvertToken/index.tsx
@@ -409,7 +409,7 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
                             {net && (
                               <div className={classNames(styles.items_chain)}>
                                 <div>
-                                  <net.Icon width={44} height={44} />{' '}
+                                  <img width={44} height={44} src={net.chainSymbolImageUrl} alt="chainSymbolImageUrl" />
                                 </div>
                                 <div className={classNames(styles.items_title, styles[theme])}>{net.chainName}</div>
                               </div>