feat: balance

src/components/AccountActions/AccountActions.tsx

@@ -20,7 +20,7 @@ export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
   const { t } = useTranslation();
   const { disconnect } = useDisconnect();
   const navigate = useNavigate();
-  const { balance } = useSQToken();
+  const { balance, ethSqtBalance, consumerHostBalance } = useSQToken();
   const { data: walletClient } = useWalletClient();
 
   const handleDisconnect = () => disconnect();
@@ -87,12 +87,15 @@ export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
                     you'll need to connect to a bridge and deposit funds.
                   </Typography>
                 }
+                overlayInnerStyle={{
+                  padding: 16,
+                }}
               >
                 <InfoCircleOutlined style={{ marginLeft: 8 }} />
               </Tooltip>
             </Typography>
             <Typography weight={600}>
-              {formatEther(balance.data, 4)} {TOKEN}
+              {formatEther(ethSqtBalance.data, 4)} {TOKEN}
             </Typography>
           </div>
         </div>
@@ -130,7 +133,9 @@ export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
         >
           <div style={{ display: 'flex', flexDirection: 'column' }}>
             <Typography>Billing Balance:</Typography>
-            <Typography>200 {TOKEN}</Typography>
+            <Typography>
+              {formatEther(consumerHostBalance.data?.balance, 4)} {TOKEN}
+            </Typography>
           </div>
 
           <Typography.Link active>View Details</Typography.Link>

src/components/ConnectWallet/ChainStatus.tsx

@@ -10,12 +10,14 @@ import { useNetwork, useSwitchNetwork } from 'wagmi';
 import { ECOSYSTEM_NETWORK } from '../../containers/Web3';
 import styles from './ChainStatus.module.css';
 
+const tipsChainIds = import.meta.env.MODE === 'testnet' ? [80001] : [137];
+
 export const ChainStatus: React.FC<React.PropsWithChildren> = ({ children }) => {
   const { chain } = useNetwork();
   const { chains, switchNetwork } = useSwitchNetwork();
   const { t } = useTranslation();
 
-  if (chain?.unsupported) {
+  if (!tipsChainIds.includes(chain?.id || 0)) {
     return (
       <div className={styles.container}>
         <div className={styles.content}>

src/components/Modal/Modal.module.css

@@ -1,3 +1,7 @@
+.steps {
+  margin: 0 0 1.25rem 0;
+}
+
 .title {
   font-weight: 600;
 }

src/config/rainbowConf.tsx

@@ -4,12 +4,14 @@
 import React from 'react';
 import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { metaMaskWallet, rainbowWallet, talismanWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets';
-import { configureChains, createConfig, WagmiConfig } from 'wagmi';
-import { polygon, polygonMumbai } from 'wagmi/chains';
+import { configureChains, createConfig, mainnet, WagmiConfig } from 'wagmi';
+import { goerli, polygon, polygonMumbai } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
 
 import '@rainbow-me/rainbowkit/styles.css';
-const supportedChains = import.meta.env.VITE_NETWORK === 'testnet' ? [polygonMumbai] : [polygon];
+
+// goerli and mainnet just for get data actually not supported
+const supportedChains = import.meta.env.VITE_NETWORK === 'testnet' ? [polygonMumbai, goerli] : [polygon, mainnet];
 
 // This should ok. It seems is a bug of Ts.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

src/containers/SQToken.ts

@@ -12,14 +12,21 @@ import { createContainer } from './Container';
 
 function useSQTokenImpl() {
   const { address: account } = useAccount();
-  const { contracts } = useWeb3Store();
+  const { contracts, rootContracts } = useWeb3Store();
   const balance = useAsyncMemo(async () => {
     assert(contracts, 'Contracts not available');
     assert(account, 'Account not available');
 
     return limitContract(() => contracts.sqToken.balanceOf(account));
   }, [account, contracts]);
 
+  const ethSqtBalance = useAsyncMemo(async () => {
+    assert(rootContracts, 'Contracts not available');
+    assert(account, 'Account not available');
+
+    return limitContract(() => rootContracts.sqToken.balanceOf(account));
+  }, [account, rootContracts]);
+
   const consumerHostBalance = useAsyncMemo(async () => {
     assert(contracts, 'Contracts not available');
     assert(account, 'Account not available');
@@ -64,6 +71,7 @@ function useSQTokenImpl() {
 
   return {
     balance,
+    ethSqtBalance,
     consumerHostBalance,
     stakingAllowance,
     planAllowance,

src/containers/Web3.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { SubqueryNetwork } from '@subql/contract-sdk';
 import mainnetJSON from '@subql/contract-sdk/publish/mainnet.json';
 import testnetJSON from '@subql/contract-sdk/publish/testnet.json';
 import { NETWORKS_CONFIG_INFO, SQNetworks } from '@subql/network-config';

src/hooks/useInitContracts.ts

@@ -3,19 +3,25 @@
 
 import React from 'react';
 import { NETWORK_NAME } from '@containers/Web3';
-import { ContractSDK } from '@subql/contract-sdk';
+import { ContractSDK, SQToken__factory } from '@subql/contract-sdk';
+import mainnetJSON from '@subql/contract-sdk/publish/mainnet.json';
+import testnetJSON from '@subql/contract-sdk/publish/testnet.json';
 import { ContractClient } from '@subql/network-clients';
 import { parseError } from '@utils';
+import { goerli, mainnet } from 'viem/chains';
 
 import { useWeb3Store } from 'src/stores';
 
 import { useEthersProviderWithPublic, useEthersSigner } from './useEthersProvider';
 
 export function useInitContracts(): { loading: boolean } {
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
-  const { setContracts, setContractClient } = useWeb3Store();
+  const { setContracts, setRootContracts, setContractClient } = useWeb3Store();
   const { signer } = useEthersSigner();
   const provider = useEthersProviderWithPublic();
+  const ethereumProvider = useEthersProviderWithPublic({
+    chainId: import.meta.env.MODE === 'testnet' ? goerli.id : mainnet.id,
+  });
 
   React.useEffect(() => {
     function initContract() {
@@ -32,6 +38,17 @@ export function useInitContracts(): { loading: boolean } {
           parseError(error);
         }
       }
+
+      if (ethereumProvider) {
+        const sqTokenContract = SQToken__factory.connect(
+          import.meta.env.MODE === 'testnet' ? testnetJSON.root.SQToken.address : mainnetJSON.root.SQToken.address,
+          ethereumProvider,
+        );
+        const rootContractInstance = {
+          sqToken: sqTokenContract,
+        };
+        setRootContracts(rootContractInstance);
+      }
     }
     setIsLoading(true);
     initContract();

src/stores/web3Account.ts

@@ -1,7 +1,7 @@
 // Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { ContractSDK } from '@subql/contract-sdk';
+import { ContractSDK, SQToken } from '@subql/contract-sdk';
 import { ContractClient } from '@subql/network-clients';
 import { ethers } from 'ethers';
 import { create } from 'zustand';
@@ -12,6 +12,10 @@ import { create } from 'zustand';
  *
  */
 
+interface rootContracts {
+  sqToken: SQToken;
+}
+
 interface Web3Store {
   error?: any;
   setError: (error: any) => void;
@@ -26,6 +30,10 @@ interface Web3Store {
 
   contracts?: ContractSDK;
   setContracts: (contracts: ContractSDK) => void;
+
+  rootContracts?: rootContracts;
+  setRootContracts: (rootContracts: rootContracts) => void;
+
   contractClient?: ContractClient;
   setContractClient: (contracts: ContractClient) => void;
 }
@@ -34,6 +42,8 @@ export const useWeb3Store = create<Web3Store>()((set) => ({
   ethWindowObj: window?.ethereum,
   contracts: undefined,
   isInitialAccount: false,
+  rootContracts: undefined,
+  setRootContracts: (rootContracts: rootContracts | undefined) => set((state) => ({ ...state, rootContracts })),
   ethProvider: () => {
     const providers = [
       new ethers.providers.JsonRpcProvider('https://eth.llamarpc.com'),