From ec52dfdda2bb839d1c250e2647ea6a79fce5ad87 Mon Sep 17 00:00:00 2001 From: trungbach Date: Fri, 3 Jan 2025 15:51:33 +0700 Subject: [PATCH] refactor: streamline Google Tag Manager integration and update token inspector initialization --- index.html | 6 +++--- src/index.tsx | 23 ----------------------- src/initTokenInspector.ts | 23 +++++++++++++++-------- src/pages/Balance/index.tsx | 13 ------------- src/pages/Pool-V3/hooks/useGetPoolList.ts | 3 ++- src/pages/Pools/hooks/hooks.ts | 14 +++++++------- src/reducer/onchainTokens.ts | 3 ++- src/types/global.d.ts | 2 ++ 8 files changed, 31 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index 0efff91cd..a3975ca66 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,15 @@ - - + %VITE_APP_SITE_TITLE% diff --git a/src/index.tsx b/src/index.tsx index 4b1579580..984856cb6 100644 --- 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 index 19f5a4e78..601d7e987 100644 --- 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" -}); \ No newline at end of file +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 index 07955417f..bb60cacfe 100644 --- 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 = () => { 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 index 78409d21b..c69764536 100644 --- 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) => { 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 index a0f2e9e22..a5ba1c3f3 100644 --- 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 index a4c901f16..dad67a520 100644 --- 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 index b32fa718a..ac72ab1db 100644 --- 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;