Fix native token balance (#13)

* Upgrade Sequence dependencies to 1.9.5 * Show correct native token balance for selected network * Fix block explorer URL * Upgrade Sequence dependencies to 1.9.5 (#12) * Show correct native token balance for selected network * Fix block explorer URL
0xsequence · Mar 11, 2024 · 9cb5ef2 · 9cb5ef2
1 parent e970361
commit 9cb5ef2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -25,7 +25,6 @@ function App() {
   const [isFinishValidateSessionPending, setIsFinishValidateSessionPending] = useState(false)
 
   const [network, setNetwork] = useState<undefined | Network>()
-  console.log(network)
 
   useEffect(() => {
     sequence

diff --git a/src/components/views/SendTransactionsView.tsx b/src/components/views/SendTransactionsView.tsx
@@ -1,22 +1,60 @@
 import { Box, Text, Button, TextInput, Spinner } from "@0xsequence/design-system"
 import { ethers } from "ethers"
 import { SetStateAction, useEffect, useState } from "react"
-import { node, sequence } from "../../main"
+import { sequence } from "../../main"
 import { isSentTransactionResponse, Network } from "@0xsequence/waas"
+import { GetEtherBalanceArgs, SequenceIndexer } from '@0xsequence/indexer'
+import { findSupportedNetwork, indexerURL } from '@0xsequence/network'
+
+const INDEXER_API_KEY = import.meta.env.VITE_SEQUENCE_INDEXER_API_KEY
 
 export function SendTransactionsView(props: {network?: Network}) {
   const [nativeTokenBalance, setNativeTokenBalance] = useState<ethers.BigNumber>()
+  const [nativeTokenName, setNativeTokenName] = useState<string>('ETH')
+  const [blockExplorerURL, setBlockExplorerURL] = useState<string>('')
   const [nativeTokenSendAddress, setNativeTokenSendAddress] = useState<string>('')
   const [nativeTokenSendAmount, setNativeTokenSendAmount] = useState<string>('')
   const [nativeTokenSendTxHash, setNativeTokenSendTxHash] = useState<string>()
   const [isNativeTokenSendTxInProgress, setIsNativeTokenSendTxInProgress] = useState<boolean>(false)
   const [sendTransactionError, setSendTransactionError] = useState<string>()
 
-  useEffect(() => { fetchNativeTokenBalance() }, [])
+  useEffect(() => {
+    fetchNativeTokenBalance()
+  }, [])
+
+  useEffect(() => {
+    if (props.network) {
+      const networkConfig = findSupportedNetwork(props.network.name)
+
+      if (networkConfig) {
+        // Hack to set the native token name, should ideally come from networkConfig.nativeTokenName
+        const tokenName = networkConfig.name in {'polygon': 1, 'mumbai': 1} ? 'MATIC' : 'ETH'
+        setNativeTokenName(tokenName)
+        fetchNativeTokenBalance()
+
+        if (networkConfig.blockExplorer?.rootUrl) {
+          setBlockExplorerURL(networkConfig.blockExplorer?.rootUrl)
+        }
+      }
+    }
+  }, [props.network])
 
   const fetchNativeTokenBalance = async () => {
-    const address = sequence.getAddress()
-    setNativeTokenBalance(await node.getBalance(address))
+    if (!props.network) {
+      return
+    }
+
+    const networkConfig = findSupportedNetwork(props.network.name)
+
+    if (!networkConfig) {
+      return
+    }
+
+    const address = await sequence.getAddress()
+    const client = new SequenceIndexer(indexerURL(networkConfig.name), INDEXER_API_KEY)
+    const res = await client.getEtherBalance({ accountAddress: address } as GetEtherBalanceArgs)
+
+    setNativeTokenBalance(ethers.BigNumber.from(res.balance.balanceWei))
   }
 
   const sendNativeToken = async (to: string, amount: string) => {
@@ -47,7 +85,7 @@ export function SendTransactionsView(props: {network?: Network}) {
   return (
     <Box>
       <Text variant="normal" fontWeight="bold">
-        Native token balance: {ethers.utils.formatEther(nativeTokenBalance || 0)} MATIC
+        Native token balance: {ethers.utils.formatEther(nativeTokenBalance || 0)} {nativeTokenName}
       </Text>
       <Button marginLeft="2" size="xs" label="Fetch" onClick={fetchNativeTokenBalance} />
       <Box marginTop="5">
@@ -99,7 +137,7 @@ export function SendTransactionsView(props: {network?: Network}) {
             Send native token transaction hash:
           </Text>
           <br />
-          <a href={`https://polygonscan.com/tx/${nativeTokenSendTxHash}`} target="_blank" rel="noopener noreferrer">
+          <a href={`${blockExplorerURL}tx/${nativeTokenSendTxHash}`} target="_blank" rel="noopener noreferrer">
             {nativeTokenSendTxHash}
           </a>
         </Box>