Fix all cases with network change

src/contexts/Account.tsx

@@ -19,19 +19,19 @@ export function AccountProvider ({ children }: {
   const [ balances, setBalances ] = useState<Balances>({})
 
   const refresh = useCallback(async () => {
-    if (!address || indexer.current.url === '') return // indexer url goes off-sync
+    if (!address || indexer.url === '') return setBalances({})
 
-    const balances = (await indexer.current.getKRC20Balances({ address })).result
+    const balances = (await indexer.getKRC20Balances({ address })).result
 
     setBalances(balances.reduce((acc: { [ticker: string]: Balance }, balance) => {
       acc[balance.tick] = balance
       return acc
     }, {}))
-  }, [ address ])
+  }, [ address, indexer ])
 
   useEffect(() => {
     refresh()
-  }, [ refresh, address, tokens ])
+  }, [ refresh, address ])
 
   return (
     <AccountContext.Provider value={{ 

src/contexts/Indexer.tsx

@@ -1,30 +1,39 @@
 import { Indexer } from "kasplexbuilder"
-import { createContext, ReactNode, useCallback, useEffect, useRef, useState } from "react"
+import { createContext, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import type { Token } from "kasplexbuilder/src/indexer/protocol"
 
 type Tokens = {[ ticker: string ]: Token}
 export const IndexerContext = createContext<{
   tokens: Tokens
   networkId: string | undefined
   setNetworkId: (address: string) => void
-  indexer: React.MutableRefObject<Indexer>
+  indexer: Indexer
 } | undefined>(undefined)
 
 export function IndexerProvider ({ children }: {
   children: ReactNode
 }) {
-  const indexer = useRef(new Indexer(''))
   const [ networkId, setNetworkId ] = useState<string>()
   const [ tokens, setTokens ] = useState<Tokens>({})
 
-  const refresh = useCallback(async () => {
-    if (indexer.current.url === '') return
+  const indexer = useMemo(() => {
+    const indexer = new Indexer('')
+
+    if (networkId === 'mainnet') {
+      // indexer.url = 'https://api.kasplex.org'
+    } else if (networkId === 'testnet-10') {
+      indexer.url = 'https://tn10api.kasplex.org'
+    }
+
+    return indexer
+  }, [ networkId ])
 
+  const refresh = useCallback(async () => {
     let tokens: Token[] = []
     let cursor = undefined
 
     while (true) {
-      const response = await indexer.current.getKRC20TokenList({ next: cursor })
+      const response = await indexer.getKRC20TokenList({ next: cursor })
 
       tokens.push(...response.result)
 
@@ -36,17 +45,13 @@ export function IndexerProvider ({ children }: {
       acc[token.tick] = token
       return acc
     }, {}))
-  }, [])
-  
+  }, [ indexer ])
+
   useEffect(() => {
-    if (networkId === 'mainnet') {
-      // indexer.current.url = 'https://api.kasplex.org'
-    } else if (networkId === 'testnet-10') {
-      indexer.current.url = 'https://tn10api.kasplex.org'
-    }
+    if (indexer.url === '') return setTokens({})
 
     refresh()
-  }, [ networkId ])
+  }, [ indexer, refresh ])
 
   return (
     <IndexerContext.Provider value={{ networkId, setNetworkId, indexer, tokens }}>