Separate getting token balance for non-connected chain (#106)

liquidity/lib/useBlockchain/useBlockchain.tsx

@@ -1,6 +1,6 @@
 import { ethers } from 'ethers';
 import React from 'react';
-import { EthereumIcon, FailedIcon, OptimismIcon, LogoIcon, BaseIcon } from '@snx-v3/icons';
+import { BaseIcon, EthereumIcon, FailedIcon, LogoIcon, OptimismIcon } from '@snx-v3/icons';
 import { INFURA_KEY, ONBOARD_KEY } from '@snx-v3/constants';
 import onboardInit, { AppState, WalletState } from '@web3-onboard/core';
 import injectedModule from '@web3-onboard/injected-wallets';
@@ -330,6 +330,10 @@ export function useProvider() {
   return new ethers.providers.JsonRpcProvider(network.rpcUrl);
 }
 
+export function useProviderForChain(network?: Network) {
+  return network ? new ethers.providers.JsonRpcProvider(network.rpcUrl) : undefined;
+}
+
 export function useSigner() {
   const wallet = useOnboardWallet();
 

liquidity/lib/useTokenBalance/index.ts

@@ -1 +1,2 @@
 export * from './useTokenBalance';
+export * from './useTokenBalanceForChain';

liquidity/lib/useTokenBalance/package.json

@@ -4,7 +4,6 @@
   "main": "index.ts",
   "version": "0.0.1",
   "dependencies": {
-    "@ethersproject/providers": "^5.7.2",
     "@snx-v3/assertAddressType": "workspace:*",
     "@snx-v3/useBlockchain": "workspace:*",
     "@snx-v3/zod": "workspace:*",

liquidity/lib/useTokenBalance/useTokenBalance.ts

@@ -1,21 +1,19 @@
 import { assertAddressType } from '@snx-v3/assertAddressType';
 import { wei } from '@synthetixio/wei';
 import { useQuery } from '@tanstack/react-query';
-import { useWallet, useNetwork, useProvider } from '@snx-v3/useBlockchain';
-import { Contract } from 'ethers';
+import { useNetwork, useProvider, useWallet } from '@snx-v3/useBlockchain';
+import { ethers } from 'ethers';
 import { ZodBigNumber } from '@snx-v3/zod';
-import { InfuraProvider } from '@ethersproject/providers';
 
-const BalanceSchema = ZodBigNumber.transform((x) => wei(x));
-const abi = ['function balanceOf(address) view returns (uint256)'];
+export const BalanceSchema = ZodBigNumber.transform((x) => wei(x));
+export const abi = ['function balanceOf(address) view returns (uint256)'];
 
-export const useTokenBalance = (address?: string, networkId?: number) => {
+export const useTokenBalance = (address?: string) => {
   const wallet = useWallet();
-  const connectedProvider = useProvider();
+  const provider = useProvider();
   const network = useNetwork();
 
   const tokenAddress = assertAddressType(address) ? address : undefined;
-  const networkIdToUse = networkId ?? network.id;
   return useQuery({
     queryKey: [
       `${network.id}-${network.preset}`,
@@ -24,16 +22,12 @@ export const useTokenBalance = (address?: string, networkId?: number) => {
       { tokenAddress },
     ],
     queryFn: async () => {
-      if (!tokenAddress || !wallet?.address) throw Error('Query should not be enabled');
-      const provider =
-        networkId && networkId !== network.id
-          ? new InfuraProvider(networkId, process.env.NEXT_PUBLIC_INFURA_PROJECT_ID)
-          : connectedProvider;
-      const contract = new Contract(tokenAddress, abi, provider);
-
-      return BalanceSchema.parse(await contract.balanceOf(wallet.address));
+      if (wallet?.address && tokenAddress && provider) {
+        const contract = new ethers.Contract(tokenAddress, abi, provider);
+        return BalanceSchema.parse(await contract.balanceOf(wallet?.address));
+      }
     },
-    enabled: Boolean(networkIdToUse && wallet?.address && tokenAddress),
+    enabled: Boolean(wallet?.address && tokenAddress && provider),
     refetchInterval: 5000,
   });
 };

liquidity/lib/useTokenBalance/useTokenBalanceForChain.ts

@@ -0,0 +1,28 @@
+import { assertAddressType } from '@snx-v3/assertAddressType';
+import { useQuery } from '@tanstack/react-query';
+import { Network, useProviderForChain, useWallet } from '@snx-v3/useBlockchain';
+import { Contract } from 'ethers';
+
+import { abi, BalanceSchema } from './useTokenBalance';
+
+export const useTokenBalanceForChain = (address?: string, network?: Network) => {
+  const wallet = useWallet();
+  const provider = useProviderForChain(network);
+  const tokenAddress = assertAddressType(address) ? address : undefined;
+  return useQuery({
+    queryKey: [
+      `${network?.id}-${network?.preset}`,
+      'TokenBalance',
+      { accountAddress: wallet?.address },
+      { tokenAddress },
+    ],
+    queryFn: async () => {
+      if (wallet?.address && tokenAddress && provider) {
+        const contract = new Contract(tokenAddress, abi, provider);
+        return BalanceSchema.parse(await contract.balanceOf(wallet?.address));
+      }
+    },
+    enabled: Boolean(wallet?.address && tokenAddress && provider),
+    refetchInterval: 5000,
+  });
+};

liquidity/lib/useUSDProxy/index.ts

@@ -1 +1,2 @@
 export * from './useUSDProxy';
+export * from './useUSDProxyForChain';

liquidity/lib/useUSDProxy/package.json

@@ -5,7 +5,6 @@
   "version": "0.0.1",
   "dependencies": {
     "@ethersproject/contracts": "^5.7.0",
-    "@ethersproject/providers": "^5.7.2",
     "@snx-v3/useBlockchain": "workspace:*",
     "@synthetixio/v3-contracts": "workspace:*",
     "@tanstack/react-query": "^5.0.5"

liquidity/lib/useUSDProxy/useUSDProxy.ts

@@ -1,21 +1,15 @@
 import { Contract } from '@ethersproject/contracts';
 import { useQuery } from '@tanstack/react-query';
-import type { JsonRpcProvider } from '@ethersproject/providers';
-import { NETWORKS, useNetwork, useProvider, useSigner } from '@snx-v3/useBlockchain';
+import { useNetwork, useProvider, useSigner } from '@snx-v3/useBlockchain';
 import { importUSDProxy, USDProxyType } from '@synthetixio/v3-contracts';
 
-export function useUSDProxy(nonConnectedProvider?: JsonRpcProvider) {
-  const connectedNetwork = useNetwork();
+export function useUSDProxy() {
+  const network = useNetwork();
   const provider = useProvider();
   const signer = useSigner();
-
-  const providerToUse = nonConnectedProvider || provider;
-  const signerOrProvider = signer || providerToUse;
+  const signerOrProvider = signer || provider;
   const withSigner = Boolean(signer);
 
-  const network =
-    NETWORKS.find((n) => n.id === nonConnectedProvider?.network.chainId) ?? connectedNetwork;
-
   return useQuery({
     queryKey: [`${network.id}-${network.preset}`, 'USDProxy', { withSigner }],
     queryFn: async function () {

liquidity/lib/useUSDProxy/useUSDProxyForChain.ts

@@ -0,0 +1,20 @@
+import { Contract } from '@ethersproject/contracts';
+import { useQuery } from '@tanstack/react-query';
+import { Network, useProviderForChain } from '@snx-v3/useBlockchain';
+import { importUSDProxy, USDProxyType } from '@synthetixio/v3-contracts';
+
+export function useUSDProxyForChain(network?: Network) {
+  const provider = useProviderForChain(network);
+  const withSigner = false;
+  return useQuery({
+    queryKey: [`${network?.id}-${network?.preset}`, 'USDProxy', { withSigner }],
+    queryFn: async function () {
+      if (network && provider) {
+        const { address, abi } = await importUSDProxy(network.id, network.preset);
+        return new Contract(address, abi, provider) as USDProxyType;
+      }
+    },
+    enabled: Boolean(network && provider),
+    staleTime: Infinity,
+  });
+}

liquidity/ui/src/pages/Teleporter/Teleporter.tsx

@@ -4,33 +4,32 @@ import {
   Divider,
   Flex,
   Heading,
+  Link,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
   Text,
-  Link,
 } from '@chakra-ui/react';
 import { Balance } from '@snx-v3/Balance';
 import { NumberInput } from '@snx-v3/NumberInput';
-import { useTokenBalance } from '@snx-v3/useTokenBalance';
+import { useTokenBalance, useTokenBalanceForChain } from '@snx-v3/useTokenBalance';
 import { FC, useState } from 'react';
 import Head from 'react-helmet';
 import { TeleporterModal } from './TeleporterModal';
 import { BorderBox } from '@snx-v3/BorderBox';
-import { ChevronDown, ChevronUp, DollarCircle, CCIP } from '@snx-v3/icons';
+import { CCIP, ChevronDown, ChevronUp, DollarCircle } from '@snx-v3/icons';
 import {
-  NETWORKS,
   Network,
+  NETWORKS,
   onboard,
   useNetwork,
   useSetNetwork,
   useWallet,
 } from '@snx-v3/useBlockchain';
-import { useUSDProxy } from '@snx-v3/useUSDProxy';
+import { useUSDProxy, useUSDProxyForChain } from '@snx-v3/useUSDProxy';
 import Wei, { wei } from '@synthetixio/wei';
 import { HomeLink } from '@snx-v3/HomeLink';
-import { providers } from 'ethers';
 
 const SUPPORTED_NETWORKS = NETWORKS.filter((network) => network.isSupported);
 
@@ -285,8 +284,6 @@ export const TeleporterUi: FC<{
 };
 
 export const Teleporter = () => {
-  const { data: USDProxy } = useUSDProxy();
-
   const [amount, setAmount] = useState(wei(0));
   const [txnModalOpen, setTxnModalOpen] = useState(false);
 
@@ -295,13 +292,11 @@ export const Teleporter = () => {
   const setNetwork = useSetNetwork();
   const [toNetwork, setToNetwork] = useState<Network | undefined>();
 
-  const { data: USDProxyTNetwork } = useUSDProxy(
-    toNetwork?.id
-      ? new providers.InfuraProvider(toNetwork?.id, process.env.NEXT_PUBLIC_INFURA_PROJECT_ID)
-      : undefined
-  );
+  const { data: USDProxy } = useUSDProxy();
   const { data: balance } = useTokenBalance(USDProxy?.address);
-  const { data: toBalance } = useTokenBalance(USDProxyTNetwork?.address, toNetwork?.id);
+
+  const { data: USDProxyForChain } = useUSDProxyForChain(toNetwork);
+  const { data: toBalance } = useTokenBalanceForChain(USDProxyForChain?.address, toNetwork);
 
   return (
     <>

yarn.lock

@@ -6094,7 +6094,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@snx-v3/useTokenBalance@workspace:liquidity/lib/useTokenBalance"
   dependencies:
-    "@ethersproject/providers": ^5.7.2
     "@snx-v3/assertAddressType": "workspace:*"
     "@snx-v3/useBlockchain": "workspace:*"
     "@snx-v3/zod": "workspace:*"
@@ -6121,7 +6120,6 @@ __metadata:
   resolution: "@snx-v3/useUSDProxy@workspace:liquidity/lib/useUSDProxy"
   dependencies:
     "@ethersproject/contracts": ^5.7.0
-    "@ethersproject/providers": ^5.7.2
     "@snx-v3/useBlockchain": "workspace:*"
     "@synthetixio/v3-contracts": "workspace:*"
     "@tanstack/react-query": ^5.0.5