Update sequence and ethers packages, fix block explorer urls (#43)

0xsequence · Sep 2, 2024 · ffe0598 · ffe0598
1 parent 9aaeb70
commit ffe0598
Show file tree

Hide file tree

Showing 8 changed files with 750 additions and 1,158 deletions.
diff --git a/package.json b/package.json
@@ -14,16 +14,16 @@
     "clear:vite:cache": "rm -rf node_modules/.vite/"
   },
   "dependencies": {
-    "@0xsequence/design-system": "1.6.3",
-    "@0xsequence/indexer": "1.10.11",
-    "@0xsequence/network": "1.10.11",
-    "@0xsequence/waas": "1.10.11",
+    "@0xsequence/design-system": "1.7.6",
+    "@0xsequence/indexer": "2.0.0",
+    "@0xsequence/network": "2.0.0",
+    "@0xsequence/waas": "2.0.0",
     "@react-oauth/google": "^0.11.1",
     "@stytch/react": "^18.1.0",
     "@stytch/vanilla-js": "^4.13.2",
     "@vanilla-extract/css": "^1.12.0",
     "axios": "^1.6.0",
-    "ethers": "5.7.2",
+    "ethers": "6.13.2",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-apple-login": "^1.1.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/views/CallContractsView.tsx b/src/components/views/CallContractsView.tsx
@@ -1,16 +1,11 @@
+import { Box, Text, Button, TextInput, Spinner } from '@0xsequence/design-system'
+import { SetStateAction, useEffect, useState } from 'react'
+import { sequence } from '../../main'
+import { delayedEncode, FeeOption, isSentTransactionResponse, Network } from '@0xsequence/waas'
+import { checkTransactionFeeOptions, TransactionFeeOptions } from './TransactionFeeOptions.tsx'
+import { findSupportedNetwork } from '@0xsequence/network'
 
-import { Box, Text, Button, TextInput, Spinner } from "@0xsequence/design-system"
-import { SetStateAction, useState } from "react"
-import { sequence } from "../../main"
-import {
-  delayedEncode,
-  FeeOption,
-  isSentTransactionResponse,
-  Network,
-} from "@0xsequence/waas"
-import { checkTransactionFeeOptions, TransactionFeeOptions } from "./TransactionFeeOptions.tsx";
-
-export function CallContractsView(props: {network?: Network}) {
+export function CallContractsView(props: { network?: Network }) {
   const [contractAddress, setContractAddress] = useState<string>('')
   const [contractAbi, setContractAbi] = useState<string>('')
   const [contractMethod, setContractMethod] = useState<string>('')
@@ -24,15 +19,28 @@ export function CallContractsView(props: {network?: Network}) {
   const [feeQuote, setFeeQuote] = useState<string>()
   const [feeSponsored, setFeeSponsored] = useState<boolean>(false)
 
+  const [blockExplorerURL, setBlockExplorerURL] = useState<string>('')
+
+  useEffect(() => {
+    if (props.network) {
+      const networkConfig = findSupportedNetwork(props.network.name)
+      if (networkConfig?.blockExplorer?.rootUrl) {
+        setBlockExplorerURL(networkConfig.blockExplorer?.rootUrl)
+      }
+    }
+  }, [props.network])
+
   const checkFeeOptions = async () => {
     const resp = await checkTransactionFeeOptions({
-      transactions: [delayedEncode({
-        to: contractAddress,
-        abi: contractAbi,
-        func: contractMethod,
-        args: JSON.parse(contractMethodArgs),
-        value: "0"
-      })],
+      transactions: [
+        delayedEncode({
+          to: contractAddress,
+          abi: contractAbi,
+          func: contractMethod,
+          args: JSON.parse(contractMethodArgs),
+          value: '0'
+        })
+      ],
       network: props.network
     })
 
@@ -132,44 +140,30 @@ export function CallContractsView(props: {network?: Network}) {
         />
       </Box>
 
-      <TransactionFeeOptions feeOptions={feeOptions} onSelected={setFeeOption}/>
-      { feeSponsored && (
+      <TransactionFeeOptions feeOptions={feeOptions} onSelected={setFeeOption} />
+      {feeSponsored && (
         <Box marginTop="5">
           <Text variant="normal" fontWeight="bold">
             Fee options: Tx Sponsored!
           </Text>
         </Box>
       )}
 
-      {sendTransactionError && (
-        <Box marginTop="3">
-          Transaction failed: {sendTransactionError}
-        </Box>
-      )}
+      {sendTransactionError && <Box marginTop="3">Transaction failed: {sendTransactionError}</Box>}
       {!inProgress ? (
         <Box>
           <Button
             marginTop="5"
             marginRight="2"
             label="Check fee options"
-            disabled={
-              contractAddress === '' &&
-              contractAbi === '' &&
-              contractMethod === '' &&
-              contractMethodArgs === ''
-            }
+            disabled={contractAddress === '' && contractAbi === '' && contractMethod === '' && contractMethodArgs === ''}
             onClick={() => checkFeeOptions()}
           />
           <Button
             marginTop="5"
             label="Call contract"
-            disabled={
-              contractAddress === '' &&
-              contractAbi === '' &&
-              contractMethod === '' &&
-              contractMethodArgs === ''
-            }
-            onClick={() => callContract() }
+            disabled={contractAddress === '' && contractAbi === '' && contractMethod === '' && contractMethodArgs === ''}
+            onClick={() => callContract()}
           />
         </Box>
       ) : (
@@ -183,7 +177,7 @@ export function CallContractsView(props: {network?: Network}) {
             Send native token transaction hash:
           </Text>
           <br />
-          <a href={`https://polygonscan.com/tx/${transactionHash}`} target="_blank" rel="noopener noreferrer">
+          <a href={`${blockExplorerURL}tx/${transactionHash}`} target="_blank" rel="noopener noreferrer">
             {transactionHash}
           </a>
         </Box>

diff --git a/src/components/views/SendERC1155View.tsx b/src/components/views/SendERC1155View.tsx
@@ -5,6 +5,7 @@ import { sequence } from '../../main'
 import { erc1155, FeeOption, isSentTransactionResponse, Network } from '@0xsequence/waas'
 import { GetTokenBalancesReturn, SequenceIndexer } from '@0xsequence/indexer'
 import { checkTransactionFeeOptions, TransactionFeeOptions } from './TransactionFeeOptions.tsx'
+import { findSupportedNetwork } from '@0xsequence/network'
 
 const INDEXER_API_KEY = import.meta.env.VITE_SEQUENCE_INDEXER_API_KEY
 
@@ -89,6 +90,17 @@ export function SendERC1155View(props: { network?: Network }) {
   const [feeQuote, setFeeQuote] = useState<string>()
   const [feeSponsored, setFeeSponsored] = useState<boolean>(false)
 
+  const [blockExplorerURL, setBlockExplorerURL] = useState<string>('')
+
+  useEffect(() => {
+    if (props.network) {
+      const networkConfig = findSupportedNetwork(props.network.name)
+      if (networkConfig?.blockExplorer?.rootUrl) {
+        setBlockExplorerURL(networkConfig.blockExplorer?.rootUrl)
+      }
+    }
+  }, [props.network])
+
   const addTokenEntry = () => {
     setTokenEntries([...tokenEntries, { tokenId: '', amount: '' }])
   }
@@ -149,7 +161,7 @@ export function SendERC1155View(props: { network?: Network }) {
           token: tokenAddress,
           values: tokenEntries.map(entry => ({
             id: entry.tokenId,
-            amount: ethers.utils.parseUnits(entry.amount, 0)
+            amount: ethers.parseUnits(entry.amount, 0)
           }))
         })
       ],
@@ -178,7 +190,7 @@ export function SendERC1155View(props: { network?: Network }) {
         token: tokenAddress,
         values: tokenEntries.map(entry => ({
           id: entry.tokenId,
-          amount: ethers.utils.parseUnits(entry.amount, 0)
+          amount: ethers.parseUnits(entry.amount, 0)
         })),
         network: props.network?.id,
         transactionsFeeOption: feeOption,
@@ -269,7 +281,7 @@ export function SendERC1155View(props: { network?: Network }) {
           <Text variant="normal" color="text100" fontWeight="bold">
             Transaction Hash:
           </Text>
-          <a href={`https://polygonscan.com/tx/${transactionHash}`} target="_blank" rel="noopener noreferrer">
+          <a href={`${blockExplorerURL}tx/${transactionHash}`} target="_blank" rel="noopener noreferrer">
             {transactionHash}
           </a>
         </Box>

diff --git a/src/components/views/SendERC20View.tsx b/src/components/views/SendERC20View.tsx
@@ -4,6 +4,7 @@ import { ethers } from 'ethers'
 import { sequence } from '../../main'
 import { FeeOption, isSentTransactionResponse, Network, erc20 } from '@0xsequence/waas'
 import { checkTransactionFeeOptions, TransactionFeeOptions } from './TransactionFeeOptions.tsx'
+import { findSupportedNetwork } from '@0xsequence/network'
 
 interface TokenOption {
   label: string
@@ -34,19 +35,30 @@ export function SendERC20View(props: { network?: Network }) {
   const [feeQuote, setFeeQuote] = useState<string>()
   const [feeSponsored, setFeeSponsored] = useState<boolean>(false)
 
+  const [blockExplorerURL, setBlockExplorerURL] = useState<string>('')
+
+  useEffect(() => {
+    if (props.network) {
+      const networkConfig = findSupportedNetwork(props.network.name)
+      if (networkConfig?.blockExplorer?.rootUrl) {
+        setBlockExplorerURL(networkConfig.blockExplorer?.rootUrl)
+      }
+    }
+  }, [props.network])
+
   useEffect(() => {
     fetchTokenBalance(customTokenAddress)
   }, [customTokenAddress])
 
   const fetchTokenBalance = async (tokenAddress: string) => {
-    if (!ethers.utils.isAddress(tokenAddress)) {
+    if (!ethers.isAddress(tokenAddress)) {
       setTokenBalance('---')
       return
     }
 
     setTokenBalance('...')
 
-    const node = new ethers.providers.JsonRpcProvider(`https://nodes.sequence.app/${props.network?.name}`)
+    const node = new ethers.JsonRpcProvider(`https://nodes.sequence.app/${props.network?.name}`)
     const contract = new ethers.Contract(
       tokenAddress,
       [
@@ -65,7 +77,7 @@ export function SendERC20View(props: { network?: Network }) {
       ])
 
       setDecimals(decimals)
-      setTokenBalance(`${ethers.utils.formatUnits(balance, decimals)} ${symbol}`)
+      setTokenBalance(`${ethers.formatUnits(balance, decimals)} ${symbol}`)
     } catch (e) {
       setTokenBalance('---')
     }
@@ -77,7 +89,7 @@ export function SendERC20View(props: { network?: Network }) {
         erc20({
           token: customTokenAddress,
           to: destinationAddress,
-          value: ethers.utils.parseUnits(amount, decimals).toString()
+          value: ethers.parseUnits(amount, decimals).toString()
         })
       ],
       network: props.network
@@ -103,7 +115,7 @@ export function SendERC20View(props: { network?: Network }) {
       const tx = await sequence.sendERC20({
         token: customTokenAddress,
         to: destinationAddress,
-        value: ethers.utils.parseUnits(amount, decimals),
+        value: ethers.parseUnits(amount, decimals),
         network: props.network?.id,
         transactionsFeeOption: feeOption,
         transactionsFeeQuote: feeQuote
@@ -148,7 +160,9 @@ export function SendERC20View(props: { network?: Network }) {
       </Box>
 
       <Box marginTop="3">
-        <Text variant="normal" color="text100">Token Balance: {tokenBalance}</Text>
+        <Text variant="normal" color="text100">
+          Token Balance: {tokenBalance}
+        </Text>
         <Button marginLeft="2" size="xs" label="Fetch" onClick={() => fetchTokenBalance(customTokenAddress)} />
       </Box>
 
@@ -202,7 +216,7 @@ export function SendERC20View(props: { network?: Network }) {
           <Text variant="normal" color="text100" fontWeight="bold">
             Transaction Hash:
           </Text>
-          <a href={`https://polygonscan.com/tx/${transactionHash}`} target="_blank" rel="noopener noreferrer">
+          <a href={`${blockExplorerURL}tx/${transactionHash}`} target="_blank" rel="noopener noreferrer">
             {transactionHash}
           </a>
         </Box>