Updated injective vue config endpoints and adjust UI related components accordingly

Author: NorOldBurden

examples/injective-vue/src/components/asset-list/wallet/wallet.vue

@@ -20,15 +20,8 @@ const { username, logoUrl, connect, status, address, openView } = chainInfo;
 
 console.log("chainInfo", chainInfo, username);
 
-let balanceVue: any;
+const balanceVue = useBalanceVue(chainName);
 
-if (address) {
-  try {
-    balanceVue = useBalanceVue(address);
-  } catch (e) {
-    console.log("error", e);
-  }
-}
 
 const { balance, isBalanceLoaded, isFetchingBalance, refetchBalance } = balanceVue || {};
 

examples/injective-vue/src/composables/injective/useBalanceVue.ts

@@ -1,13 +1,18 @@
 import BigNumber from "bignumber.js";
-import { Ref, computed } from "vue";
+import { ref, computed } from "vue";
 import { assetLists } from "@chain-registry/v2";
 import { useGetBalance } from '@interchainjs/vue/cosmos/bank/v1beta1/query.rpc.vue';
+import { defaultRpcEndpoint } from '../../config/asset-list/defaults';
+import { useChain } from "@interchain-kit/vue";
 
-const defaultChainName = 'osmosistestnet' // 'cosmoshub'\
-const defaultAssetList = assetLists.find((assetList) => assetList.chainName === defaultChainName)
-const defaultRpcEndpoint = 'https://rpc.testnet.osmosis.zone' // 'https://cosmos-rpc.publicnode.com'
 
-export const useBalanceVue = (address: Ref) => {
+export const useBalanceVue = (chainName: ref) => {
+  const chainInfo = useChain(chainName);
+  
+  const { address } = chainInfo;
+  
+  const defaultAssetList = assetLists.find((assetList) => assetList.chainName === chainName.value)
+
   const coin = defaultAssetList?.assets[0];
 
   const denom = coin!.base!

examples/injective-vue/src/config/asset-list/defaults.ts

@@ -1,3 +1,14 @@
+import { assetLists, chains } from "@chain-registry/v2";
 
-export const defaultChainName = 'osmosis';
-export const KeplrWalletName = 'keplr-extension';
+/**
+ * mainnet: 'injective'
+ * testnet: 'injectivetestnet'
+ * mainnet rpc: 'https://sentry.tm.injective.network'
+ * testnet rpc: 'https://testnet.sentry.tm.injective.network'
+ */
+export const defaultChainName = 'injective'
+export const defaultRpcEndpoint = 'https://sentry.tm.injective.network'
+
+export const defaultChain = chains.find((chain) => chain.chainName === defaultChainName)
+
+export const defaultAssetList = assetLists.find((assetList) => assetList.chainName === defaultChainName)

examples/injective-vue/src/views/injective.vue

@@ -15,7 +15,7 @@ const {
   isFetchingBalance,
   refetchBalance,
   denom,
-} = useBalanceVue(address);
+} = useBalanceVue(chainName);
 
 const txHash = ref("");