feat(multichain): add multichain on token component

PoCInnovation · Sep 22, 2024 · 8be40cb · 8be40cb
1 parent 0179bf3
commit 8be40cb
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/src/components/main/ERC/token/ButtonBalance.vue b/src/components/main/ERC/token/ButtonBalance.vue
@@ -39,9 +39,10 @@ import { Network } from 'alchemy-sdk';
 export default defineComponent({
   name: 'TokenBalances',
   setup() {
-    const modes: Network[] = [Network.ETH_SEPOLIA, Network.ETH_MAINNET];
-    const currentMode = ref(modes[0]);
     const store = useStore();
+    const myChain = computed(() => store.getters.chain);
+    const modes = [Network.ETH_SEPOLIA, Network.ETH_MAINNET];
+    const currentMode = ref(modes[0]);
 
     const userAddress = ref('');
     const balances = ref<Array<{ name: string; logo: string; balance: string; symbol: string; decimals: number; balanceValue: string | null }>>([]);
@@ -85,6 +86,12 @@ export default defineComponent({
       handleButtonClick();
     });
 
+    watchEffect(() => {
+      if (myChain.value) {
+        handleButtonClick();
+      }
+    });
+
     return {
       modes,
       currentMode,

diff --git a/src/components/main/user-info/UserInfos.vue b/src/components/main/user-info/UserInfos.vue
@@ -8,13 +8,20 @@ const store = useStore();
 const account = computed(() => store.getters.selectedAccount);
 const balance = ref<number | null>(null);
 const ETH = ref<number | null>(null);
+const myChain = computed(() => store.getters.chain);
 
 ETH.value = await exchangeRates('ETH').then((res: any) => res.data.rates.USD);
 watchEffect(async () => {
   if (account.value) {
     balance.value = await getBalance(account.value).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)));
   }
 });
+
+watchEffect(async () => {
+  if (myChain.value) {
+    balance.value = await getBalance(account.value).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)));
+  }
+});
 </script>
 
 <template>

diff --git a/src/getBalance.ts b/src/getBalance.ts
@@ -1,6 +1,9 @@
 import { x } from "./main";
 
 export const getBalance = async (address: string): Promise<bigint> => {
+  if (address === '' || address == undefined) {
+    return BigInt(0);
+  }
   try {
     const response = await x.post('/', {
       jsonrpc: '2.0',

diff --git a/src/multichain.ts b/src/multichain.ts
@@ -1,7 +1,7 @@
 import { sepolia, mainnet } from 'viem/chains'
-import { createPublicClient, http } from 'viem'
 import { ref } from 'vue'
 import { x } from './main'
+import { Network } from 'alchemy-sdk';
 
 const apiKey = import.meta.env.VITE_ALCHEMY_API_KEY
 
@@ -11,12 +11,14 @@ const chainLs = [
         chain: sepolia,
         alchemyURL: `https://eth-sepolia.g.alchemy.com/v2/${apiKey}`,
         alchemyURLNFT: `https://eth-sepolia.g.alchemy.com/nft/v3/${apiKey}/getNFTsForOwner/`,
+        alchemyNetwork: Network.ETH_SEPOLIA
     },
     {
         name: "ethereum",
         chain: mainnet,
         alchemyURL: `https://eth-mainnet.g.alchemy.com/v2/${apiKey}`,
         alchemyURLNFT: `https://eth-mainnet.g.alchemy.com/nft/v3/${apiKey}/getNFTsForOwner/`,
+        alchemyNetwork: Network.ETH_MAINNET
     },
 ]
 
@@ -38,16 +40,10 @@ const SwitchChain = (store: any, chainID?: number) => {
     chain.value = chainLs[chainIdx]
     x.defaults.baseURL = chainLs[chainIdx].alchemyURL
     console.log("Switched to chain: ", chain.value)
-    // const newPubClient = createPublicClient({
-    //     chain: chain.value.chain,
-    //     transport: http(),
-    // })
-    // console.log("newPubClient: ", newPubClient)
 
     if (store) {
         store.dispatch('saveChain', { chain: chain.value })
         store.dispatch('switchWalletChain')
-        // store.dispatch('savePubClient', { pubClient: newPubClient })
     } else {
         console.error('Vuex store is not initialized')
     }