Feat/loading init common (#1113)

* asdf * refactor: improve script loading and add loading indicator in index.html * refactor: streamline script loading and enhance error handling in index.html * refactor: remove loading state management and delete unused LoadingPage component * refactor: comment out Google Analytics scripts and clean up initialization logic * refactor: remove unused event listener and clean up initialization logic * refactor: uncomment Google Analytics script in index.html
oraidex · Jan 3, 2025 · 016174f · 016174f
1 parent 33a7fda
commit 016174f
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 59 deletions.
diff --git a/index.html b/index.html
@@ -33,20 +33,17 @@
     <meta name="twitter:title" content="%VITE_APP_SITE_TITLE%" />
     <meta name="twitter:description" content="%VITE_APP_SITE_DESC%" />
     <meta name="twitter:image" content="%PUBLIC_URL%/thumbnail_oraidex_final.png" />
-
     <meta property="twitter:url" content="%PUBLIC_URL%" />
     <meta property="twitter:domain" content="%PUBLIC_URL%" />
     <script>
       var exports = {};
       var require = {};
     </script>
-    <script type="module" src="src/initCommon.ts"></script>
   </head>
   <body>
     <div id="oraiswap"></div>
-    <script src="https://do.featurebase.app/js/sdk.js" id="featurebase-sdk"></script>
     <script type="module" src="/src/index.tsx"></script>
-    <script type="text/javascript">
+    <!-- <script type="text/javascript">
       (function (c, l, a, r, i, t, y) {
         c[a] =
           c[a] ||
@@ -59,6 +56,6 @@
         y = l.getElementsByTagName(r)[0];
         y.parentNode.insertBefore(t, y);
       })(window, document, 'clarity', 'script', 'jnp2ipoqck');
-    </script>
+    </script> -->
   </body>
 </html>
diff --git a/src/helper/index.tsx b/src/helper/index.tsx
@@ -1,48 +1,40 @@
+import { fromBech32, toBech32 } from '@cosmjs/encoding';
+import { Bech32Config } from '@keplr-wallet/types';
+import { getSnap } from '@leapwallet/cosmos-snap-provider';
+import { CosmosChainId, CustomChainInfo, NetworkChainId } from '@oraichain/common';
 import {
   BigDecimal,
   BSC_SCAN,
   ChainIdEnum,
   COSMOS_CHAIN_ID_COMMON,
   ETHEREUM_SCAN,
+  EVM_CHAIN_ID_COMMON,
+  EvmDenom,
   KWT_SCAN,
   MULTIPLIER,
-  TRON_SCAN,
-  EVM_CHAIN_ID_COMMON,
   SOL_SCAN,
-  WalletType as WalletCosmosType,
   solChainId,
-  oraichainNetwork
+  TokenItemType,
+  TRON_SCAN,
+  WalletType as WalletCosmosType
 } from '@oraichain/oraidex-common';
-import { serializeError } from 'serialize-error';
-import { fromBech32, toBech32 } from '@cosmjs/encoding';
-import { bitcoinChainId, leapSnapId } from './constants';
-import { getSnap } from '@leapwallet/cosmos-snap-provider';
-import { Bech32Config } from '@keplr-wallet/types';
-import { EvmDenom, TokenItemType } from '@oraichain/oraidex-common';
+import { getHttpEndpoint } from '@orbs-network/ton-access';
+import { TonClient } from '@ton/ton';
+import { toUserFriendlyAddress } from '@tonconnect/ui-react';
 import { isMobile } from '@walletconnect/browser-utils';
+import DefaultIcon from 'assets/icons/tokens.svg?react';
 import { displayToast, TToastType } from 'components/Toasts/Toast';
 import { WalletType } from 'components/WalletManagement/walletConfig';
+import { evmChainInfos } from 'config/evmChainInfos';
+import { TonChainId } from 'context/ton-provider';
+import { chainInfos, chainInfosWithIcon, cosmosChains, evmChains, flattenTokens, network } from 'initCommon';
 import { MetamaskOfflineSigner } from 'libs/eip191';
 import Keplr from 'libs/keplr';
 import { WalletsByNetwork } from 'reducer/wallet';
-import { evmChainInfos } from 'config/evmChainInfos';
-import { TonChainId } from 'context/ton-provider';
-import { toUserFriendlyAddress, useTonAddress } from '@tonconnect/ui-react';
-import DefaultIcon from 'assets/icons/tokens.svg?react';
-import { numberWithCommas } from './format';
-import {
-  chainInfos,
-  chainInfosWithIcon,
-  cosmosChains,
-  evmChains,
-  flattenTokens,
-  flattenTokensWithIcon,
-  network
-} from 'initCommon';
-import { CosmosChainId, CustomChainInfo, NetworkChainId } from '@oraichain/common';
-import { getHttpEndpoint } from '@orbs-network/ton-access';
-import { TonClient } from '@ton/ton';
+import { serializeError } from 'serialize-error';
 import { store } from 'store/configure';
+import { bitcoinChainId, leapSnapId } from './constants';
+import { numberWithCommas } from './format';
 
 export interface Tokens {
   denom?: string;
@@ -89,10 +81,6 @@ export const filterChainBridge = (token: Tokens, item: CustomChainInfo) => {
   return tokenCanBridgeTo.includes(item.chainId);
 };
 
-export const findChainByChainId = (chainId: string) => {
-  return networks.find((n) => n.chainId === chainId) || oraichainNetwork;
-};
-
 export const getDenomEvm = (): EvmDenom => {
   switch (Number(window.ethereumDapp?.chainId)) {
     case Networks.bsc:

diff --git a/src/initCommon.ts b/src/initCommon.ts
@@ -2,12 +2,16 @@ import { OraidexCommon, TokenItemType } from '@oraichain/oraidex-common';
 import { AnyAction, Dispatch } from '@reduxjs/toolkit';
 import { updateAllOraichainTokens, updateAllOtherChainTokens } from 'reducer/token';
 
-export const oraidexCommon = await OraidexCommon.load();
+let oraidexCommonOg = await OraidexCommon.load();
+while (!oraidexCommonOg) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  oraidexCommonOg = await OraidexCommon.load();
+}
+export const oraidexCommon = oraidexCommonOg;
 
 export const initializeOraidexCommon = async (dispatch: Dispatch<AnyAction>, allOraichainTokens: TokenItemType[]) => {
-  const oraidexCommon = await OraidexCommon.load();
-  const oraichainTokens = oraidexCommon.oraichainTokens;
-  const otherChainTokens = oraidexCommon.otherChainTokens;
+  const oraichainTokens = oraidexCommonOg.oraichainTokens;
+  const otherChainTokens = oraidexCommonOg.otherChainTokens;
   if (oraichainTokens.length > (allOraichainTokens || []).length) {
     dispatch(updateAllOraichainTokens(oraichainTokens));
   }

diff --git a/src/layouts/App.tsx b/src/layouts/App.tsx
@@ -33,6 +33,7 @@ import Menu from './Menu';
 import routes from 'routes';
 import { NoticeBanner } from './NoticeBanner';
 import Sidebar from './Sidebar';
+import LoadingPage from './LoadingPage';
 
 const App = () => {
   const [address, setOraiAddress] = useConfigReducer('address');

diff --git a/src/pages/Balance/TransferConvertToken/index.tsx b/src/pages/Balance/TransferConvertToken/index.tsx
@@ -1,12 +1,5 @@
-import {
-  BigDecimal,
-  getTokensFromNetwork,
-  toDisplay,
-  TokenItemType,
-  BTC_CONTRACT,
-  tonNetworkMainnet,
-  solChainId
-} from '@oraichain/oraidex-common';
+import { NetworkChainId } from '@oraichain/common';
+import { BigDecimal, BTC_CONTRACT, toDisplay, TokenItemType } from '@oraichain/oraidex-common';
 import loadingGif from 'assets/gif/loading.gif';
 import ArrowDownIcon from 'assets/icons/arrow.svg?react';
 import ArrowDownIconLight from 'assets/icons/arrow_light.svg?react';
@@ -16,14 +9,19 @@ import Input from 'components/Input';
 import Loader from 'components/Loader';
 import PowerByOBridge from 'components/PowerByOBridge';
 import { displayToast, TToastType } from 'components/Toasts/Toast';
+import ToggleSwitch from 'components/ToggleSwitch';
 import TokenBalance from 'components/TokenBalance';
+import { TonChainId } from 'context/ton-provider';
 import copy from 'copy-to-clipboard';
-import { filterChainBridge, findChainByChainId, getAddressTransfer, networks } from 'helper';
+import { filterChainBridge, getAddressTransfer, networks } from 'helper';
+import { CWBitcoinFactoryDenom } from 'helper/constants';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useTokenFee, { useRelayerFeeToken } from 'hooks/useTokenFee';
 import useWalletReducer from 'hooks/useWalletReducer';
+import { btcChains, cosmosTokens, evmChains, flattenTokens, tokenMap, tonTokens } from 'initCommon';
 import { reduceString } from 'libs/utils';
+import { useGetContractConfig } from 'pages/BitcoinDashboardV2/hooks';
 import { AMOUNT_BALANCE_ENTRIES } from 'pages/UniversalSwap/helpers';
 import { FC, useEffect, useState } from 'react';
 import NumberFormat from 'react-number-format';
@@ -34,16 +32,10 @@ import {
   useGetWithdrawlFeesBitcoin,
   useGetWithdrawlFeesBitcoinV2
 } from '../helpers';
-import styles from './index.module.scss';
-import { useGetContractConfig } from 'pages/BitcoinDashboardV2/hooks';
-import ToggleSwitch from 'components/ToggleSwitch';
-import { CWBitcoinFactoryDenom } from 'helper/constants';
-import { btcChains, cosmosTokens, evmChains, flattenTokens, tokenMap, tonTokens } from 'initCommon';
-import { NetworkChainId } from '@oraichain/common';
 import useGetFee from '../hooks/useGetFee';
-import useTonBridgeHandler, { EXTERNAL_MESSAGE_FEE } from '../hooks/useTonBridgeHandler';
-import { TonChainId } from 'context/ton-provider';
 import useGetFeeSol from '../hooks/useGetFeeSol';
+import useTonBridgeHandler, { EXTERNAL_MESSAGE_FEE } from '../hooks/useTonBridgeHandler';
+import styles from './index.module.scss';
 
 interface TransferConvertProps {
   token: TokenItemType;

diff --git a/src/polyfill.ts b/src/polyfill.ts
@@ -154,4 +154,4 @@ if (!('timeout' in AbortSignal)) {
     timeoutId?.unref?.();
     return controller.signal;
   };
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -154,4 +154,4 @@ if (!('timeout' in AbortSignal)) { @@
         timeoutId?.unref?.();
         return controller.signal;
       };
-    }
+    }