refactor: streamline Google Tag Manager integration and update token …

…inspector initialization
oraidex · Jan 3, 2025 · ec52dfd · ec52dfd
1 parent 61727ea
commit ec52dfd
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -4,15 +4,15 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.svg" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <!-- <script defer src="https://www.googletagmanager.com/gtag/js?id=G-8T22XRLHXY"></script> -->
-    <!-- <script>
+    <script defer src="https://www.googletagmanager.com/gtag/js?id=G-8T22XRLHXY"></script>
+    <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
       }
       gtag('js', new Date());
       gtag('config', 'G-8T22XRLHXY');
-    </script> -->
+    </script>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <title>%VITE_APP_SITE_TITLE%</title>
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -92,26 +92,3 @@ const initApp = async () => {
 };
 
 initApp();
-
-// Dynamically load the Google Tag Manager script after the app has rendered
-const loadGTM = () => {
-  const script = document.createElement('script');
-  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-8T22XRLHXY';
-  script.defer = true;
-  document.head.appendChild(script);
-
-  script.onload = () => {
-    // @ts-ignore
-    window.dataLayer = window.dataLayer || [];
-    function gtag() {
-      // @ts-ignore
-      window.dataLayer.push(arguments);
-    }
-    // @ts-ignore
-    gtag('js', new Date());
-    // @ts-ignore
-    gtag('config', 'G-8T22XRLHXY');
-  };
-};
-
-loadGTM();
diff --git a/src/initTokenInspector.ts b/src/initTokenInspector.ts
@@ -1,9 +1,16 @@
-import { Inspector } from "@oraichain/orai-token-inspector";
+import { Inspector } from '@oraichain/orai-token-inspector';
 
-export const tokenInspector = await Inspector.create({
-    oraiRpcUrl: "https://indexer.orai.io",
-    bscRpcUrl: "https://bsc-dataseed.binance.org",
-    ethRpcUrl: "https://eth.llamarpc.com",
-    tronRpcUrl: "https://api.trongrid.io/",
-    solanaRpcUrl: "https://mainnet.helius-rpc.com/?api-key=3b28a0fc-0ef6-48ef-b55c-c55ae74cb6a6"
-});
+console.time('load-inspector');
+
+export const getTokenInspectorInstance = async () => {
+  if (!window.tokenInspector) {
+    window.tokenInspector = await Inspector.create({
+      oraiRpcUrl: 'https://indexer.orai.io',
+      bscRpcUrl: 'https://bsc-dataseed.binance.org',
+      ethRpcUrl: 'https://eth.llamarpc.com',
+      tronRpcUrl: 'https://api.trongrid.io/',
+      solanaRpcUrl: 'https://mainnet.helius-rpc.com/?api-key=3b28a0fc-0ef6-48ef-b55c-c55ae74cb6a6'
+    });
+  }
+  return window.tokenInspector;
+};
diff --git a/src/pages/Balance/index.tsx b/src/pages/Balance/index.tsx
@@ -103,7 +103,6 @@ import { NATIVE_MINT } from '@solana/spl-token';
 import { TonChainId } from 'context/ton-provider';
 import useTonBridgeHandler from './hooks/useTonBridgeHandler';
 // import { SolanaNetworkConfig } from '@oraichain/orai-token-inspector';
-import { tokenInspector } from 'initTokenInspector';
 import { addToOtherChainTokens } from 'reducer/token';
 import { onChainTokenToTokenItem } from 'reducer/onchainTokens';
 
@@ -195,18 +194,6 @@ const Balance: React.FC<BalanceProps> = () => {
   useEffect(() => {
     if (!tokenUrl) return setTokens([otherChainTokenCommon, oraichainTokensCommon]);
 
-    // TODO: vuonghuuhung support dynamic bridge orai <-> solana
-    // (async () => {
-    // if (tokenUrl && filterNetworkUI === SolanaNetworkConfig.chainId) {
-    //     const token = await tokenInspector.inspectTokenFromSpecifiedChain({
-    //       tokenId: tokenUrl,
-    //       chainId: filterNetworkUI
-    //     });
-
-    //     dispatch(addToOtherChainTokens([onChainTokenToTokenItem(token)]));
-    //   }
-    // })();
-
     setTokens(
       [otherChainTokens, oraichainTokens].map((childTokens) =>
         childTokens.filter((t) => t.name.includes(tokenUrl.toUpperCase()))

diff --git a/src/pages/Pool-V3/hooks/useGetPoolList.ts b/src/pages/Pool-V3/hooks/useGetPoolList.ts
@@ -10,7 +10,7 @@ import { PoolInfoResponse } from 'types/pool';
 import { calcPrice } from '../components/PriceRangePlot/utils';
 import { extractAddress, formatPoolData } from '../helpers/format';
 import { parseAssetInfo } from '@oraichain/oraidex-common';
-import { tokenInspector } from 'initTokenInspector';
+import { getTokenInspectorInstance } from 'initTokenInspector';
 import { onChainTokenToTokenItem } from 'reducer/onchainTokens';
 import { useDispatch, useSelector } from 'react-redux';
 import { addToOraichainTokens } from 'reducer/token';
@@ -97,6 +97,7 @@ export const useGetPoolList = (coingeckoPrices: CoinGeckoPrices<string>) => {
             tokenAddresses.has('factory/orai17hyr3eg92fv34fdnkend48scu32hn26gqxw3hnwkfy904lk9r09qqzty42/HMSTR')
           )
         ) {
+          const tokenInspector = await getTokenInspectorInstance();
           const extendedInfos = await tokenInspector.inspectMultiTokens([...tokenAddresses]);
           const convertToTokensType = extendedInfos.map((info) => onChainTokenToTokenItem(info));
           dispatch(addToOraichainTokens(convertToTokensType));

diff --git a/src/pages/Pools/hooks/hooks.ts b/src/pages/Pools/hooks/hooks.ts
@@ -11,7 +11,6 @@ import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import axios from 'rest/request';
 
-import { tokenInspector } from 'initTokenInspector';
 import { getUsd } from 'libs/utils';
 import { parseAssetOnlyDenom } from 'pages/Pools/helpers';
 import { RewardPoolType } from 'reducer/config';
@@ -20,6 +19,7 @@ import { updateLpPools } from 'reducer/token';
 import { fetchRewardPerSecInfo, fetchTokenInfo } from 'rest/api';
 import { RootState } from 'store/configure';
 import { PoolInfoResponse } from 'types/pool';
+import { getTokenInspectorInstance } from 'initTokenInspector';
 
 export const calculateLpPoolsV3 = (lpAddresses: string[], res: AggregateResult) => {
   const lpTokenData = Object.fromEntries(
@@ -166,7 +166,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;
@@ -177,9 +177,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 {
@@ -214,7 +214,6 @@ export const useGetPoolDetail = ({ pairDenoms }: { pairDenoms: string }) => {
 
     (async function fetchTokens() {
       try {
-
         const pairRawData = pairDenoms.split('_');
         const tokenTypes = pairRawData.map((raw) =>
           allOraichainTokens.find((token) => token.denom === raw || token.contractAddress === raw)
@@ -224,10 +223,12 @@ export const useGetPoolDetail = ({ pairDenoms }: { pairDenoms: string }) => {
         let token2 = tokenTypes[1];
 
         if (!tokenTypes[0]) {
+          const tokenInspector = await getTokenInspectorInstance();
           const inspectedToken1 = await tokenInspector.inspectToken({ tokenId: pairRawData[0], getOffChainData: true });
           token1 = onChainTokenToTokenItem(inspectedToken1);
         }
         if (!tokenTypes[1]) {
+          const tokenInspector = await getTokenInspectorInstance();
           const inspectedToken2 = await tokenInspector.inspectToken({ tokenId: pairRawData[1], getOffChainData: true });
           token2 = onChainTokenToTokenItem(inspectedToken2);
         }
@@ -236,7 +237,6 @@ export const useGetPoolDetail = ({ pairDenoms }: { pairDenoms: string }) => {
         console.error('error fetchTokens: ', e);
       }
     })();
-
   }, [pairDenoms]);
 
   return {

diff --git a/src/reducer/onchainTokens.ts b/src/reducer/onchainTokens.ts
@@ -3,8 +3,8 @@ import { InspectedToken } from '@oraichain/orai-token-inspector/dist/types';
 import { TokenItemType } from '@oraichain/oraidex-common';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { network } from 'initCommon';
-import { tokenInspector } from 'initTokenInspector';
 import { addToOraichainTokens, updateAddedTokens, updateAmounts } from './token';
+import { getTokenInspectorInstance } from 'initTokenInspector';
 
 export interface OnchainTokensState {
   tokens: TokenItemType[];
@@ -67,6 +67,7 @@ export const inspectToken = createAsyncThunk(
     token: InspectedToken;
     balance: string;
   }> => {
+    const tokenInspector = await getTokenInspectorInstance();
     const token = await tokenInspector.inspectToken({
       tokenId,
       getOffChainData: true

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -11,6 +11,7 @@ import { DuckDb } from 'libs/duckdb';
 import { Class } from '@oraichain/common-contracts-sdk/build/CwIcs721Bridge.types';
 import Bitcoin, { IBitcoin } from 'libs/bitcoin';
 import { TonConnectUI } from '@tonconnect/ui-react';
+import { Inspector } from '@oraichain/orai-token-inspector';
 
 declare global {
   type AmountDetails = { [denom: string]: string };
@@ -142,6 +143,7 @@ declare global {
     eth_owallet: MetaMaskEthereumProvider;
     tronWeb_owallet: _TronWeb;
     tronLink_owallet: TronLink;
+    tokenInspector: Inspector;
   }
 
   declare const APP_SETTINGS: Record<string, any>;