Improve network settings

src/App.tsx

@@ -9,7 +9,7 @@ import { useLocalStorage, useHotkeys } from '@mantine/hooks'
 import AppShellExample from './components/AppShell'
 
 import { AlephiumWalletProvider } from '@alephium/web3-react'
-import { NetworkId } from '@alephium/web3'
+import { useNetworkId } from './utils/utils'
 
 function App() {
   const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
@@ -18,11 +18,7 @@ function App() {
     getInitialValueInEffect: true,
   })
 
-  const [network] = useLocalStorage<NetworkId>({
-    key: 'alephium-network',
-    defaultValue: 'mainnet',
-    getInitialValueInEffect: true,
-  })
+  const [network] = useNetworkId()
 
   const toggleColorScheme = (value?: ColorScheme) =>
     setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'))

src/components/AppHeader.tsx

@@ -8,12 +8,12 @@ import {
   Menu,
   Button,
 } from '@mantine/core'
-import { useDisclosure, useLocalStorage } from '@mantine/hooks'
+import { useDisclosure } from '@mantine/hooks'
 import LightDarkModeButton from './LightDarkButton'
 import { Link } from 'react-router-dom'
 
 import { AlephiumConnectButton } from '@alephium/web3-react'
-import { NetworkId } from '@alephium/web3'
+import { useNetworkId } from '../utils/utils'
 
 const useStyles = createStyles((theme) => ({
   link: {
@@ -88,11 +88,7 @@ export function AppHeader() {
   const [drawerOpened, { toggle: toggleDrawer }] = useDisclosure(false)
   const { classes } = useStyles()
 
-  const [network, setNetwork] = useLocalStorage<NetworkId>({
-    key: 'alephium-network',
-    defaultValue: 'devnet',
-    getInitialValueInEffect: true,
-  })
+  const [network, setNetwork] = useNetworkId()
 
   return (
     <Header height={60} px="md">

src/components/AppShell.tsx

@@ -13,14 +13,16 @@ import ImportMultisig from './Multisig/ImportMultiSig'
 import ShowMultiSig from './Multisig/ShowMultiSig'
 import SignMultisigTx from './Multisig/SignMultisigTx'
 import BuildMultisigTx from './Multisig/BuildMultiSigTx'
+import { useAlephium } from '../utils/utils'
 
 function AppShellExample() {
   const theme = useMantineTheme()
   const context = useAlephiumConnectContext()
+  const nodeProvider = useAlephium()
 
   useEffect(() => {
     if (context.signerProvider?.nodeProvider !== undefined) {
-      web3.setCurrentNodeProvider(context.signerProvider.nodeProvider)
+      web3.setCurrentNodeProvider(nodeProvider)
     }
   }, [context.signerProvider])
 

src/components/Multisig/BuildMultiSigTx.tsx

@@ -21,8 +21,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import MyBox from '../Misc/MyBox'
 import { FORM_INDEX, useForm } from '@mantine/form'
 import {
-  ExplorerProvider,
-  NodeProvider,
   convertAlphAmountWithDecimals,
   isBase58,
   node,
@@ -38,6 +36,7 @@ import {
   waitTxSubmitted,
 } from './shared'
 import CopyTextarea from '../Misc/CopyTextarea'
+import { useAlephium, useExplorer } from '../../utils/utils'
 
 function BuildMultisigTx() {
   const form = useForm<{
@@ -81,6 +80,9 @@ function BuildMultisigTx() {
     node.SubmitTxResult | undefined
   >()
 
+  const nodeProvider = useAlephium()
+  const explorerProvider = useExplorer()
+
   const buildTxCallback = useCallback(async () => {
     try {
       // we can not use the `form.validate()` because the `signatures` is invalid now,
@@ -96,8 +98,6 @@ function BuildMultisigTx() {
       })
       if (hasError) throw new Error('Invalid destinations')
 
-      // const nodeProvider = web3.getCurrentNodeProvider()
-      const nodeProvider = new NodeProvider('http://127.0.0.1:22973')
       const buildTxResult = await buildMultisigTx(
         nodeProvider,
         form.values.multisig,
@@ -124,8 +124,6 @@ function BuildMultisigTx() {
       })
       if (hasError) throw new Error(`Invalid signatures`)
 
-      // const nodeProvider = web3.getCurrentNodeProvider()
-      const nodeProvider = new NodeProvider('http://127.0.0.1:22973')
       const submitTxResult = await submitMultisigTx(
         nodeProvider,
         form.values.multisig,
@@ -138,7 +136,6 @@ function BuildMultisigTx() {
       setSubmitTxResult(submitTxResult)
       form.setValues({ step: 3 })
 
-      const explorerProvider = new ExplorerProvider('http://localhost:9090')
       await waitTxSubmitted(explorerProvider, submitTxResult.txId)
       setTxSubmitted(true)
       setSubmitTxError(undefined)

src/components/Multisig/CreateMultisig.tsx

@@ -127,10 +127,16 @@ function CreateMultisig() {
             ta="left"
             {...form.getInputProps(`pubkeys.${index}.pubkey`)}
           />
-          <Tooltip label="Remove Signer" disabled={form.values.pubkeys.length === 1}>
+          <Tooltip
+            label="Remove Signer"
+            disabled={form.values.pubkeys.length === 1}
+          >
             <IconSquareRoundedMinus
               size="1.2rem"
-              onClick={() => form.values.pubkeys.length!==1 && form.removeListItem('pubkeys', index)}
+              onClick={() =>
+                form.values.pubkeys.length !== 1 &&
+                form.removeListItem('pubkeys', index)
+              }
             />
           </Tooltip>
         </Group>

src/components/Multisig/SignMultisigTx.tsx

@@ -4,6 +4,7 @@ import { useWallet } from '@alephium/web3-react'
 import { MultisigConfig, getAllMultisigConfig, signMultisigTx } from './shared'
 import { NodeProvider, isHexString } from '@alephium/web3'
 import CopyTextarea from '../Misc/CopyTextarea'
+import { useAlephium } from '../../utils/utils'
 
 type P2MPKUnlockScript = { pubkey: string; index: number }[]
 
@@ -20,6 +21,8 @@ function SignMultisigTx() {
 
   const [error, setError] = useState<string>()
 
+  const nodeProvider = useAlephium()
+
   const tryLoadMultisigConfig = useCallback(
     async (unsignedTx: string) => {
       try {
@@ -28,8 +31,6 @@ function SignMultisigTx() {
           throw new Error('Invalid unsigned tx')
         }
 
-        const nodeProvider =
-          wallet?.nodeProvider ?? new NodeProvider('http://127.0.0.1:22973')
         const unlockScript = await getUnlockScript(nodeProvider, unsignedTx)
         const multisigConfig = getMultisigByUnlockScript(unlockScript)
         setMultisigConfig(multisigConfig)

src/components/Token/TokenInfo.tsx

@@ -1,6 +1,6 @@
 import { Box, Center, Stack, TextInput, rem } from '@mantine/core'
 import { useCallback, useState } from 'react'
-import { connectAlephium, getTokenMetadata } from '../../utils/utils'
+import { getTokenMetadata, useAlephium } from '../../utils/utils'
 import {
   FungibleTokenMetaData,
   addressFromTokenId,
@@ -21,12 +21,12 @@ type TokenInfo = FungibleTokenMetaData & {
 function TokenInfo() {
   const [value, setValue] = useState('')
   const [tokenInfo, setTokenInfo] = useState<TokenInfo>()
+  const nodeProvider = useAlephium()
 
   const searchToken = useCallback(async (tokenId: string) => {
     setValue(tokenId)
 
     if (tokenId) {
-      const nodeProvider = connectAlephium(network)
       const tokenMetadata = await nodeProvider.fetchFungibleTokenMetaData(
         tokenId
       )

src/utils/utils.ts

@@ -4,6 +4,7 @@ import {
   testnetTokensMetadata,
 } from '@alephium/token-list'
 import { ExplorerProvider, NetworkId, NodeProvider } from '@alephium/web3'
+import { useLocalStorage } from '@mantine/hooks'
 
 const mainnet_node_url = 'https://wallet-v20.mainnet.alephium.org'
 const testnet_node_url = 'https://wallet-v20.testnet.alephium.org'
@@ -12,7 +13,19 @@ const mainnet_explorer_url = 'https://backend-v113.mainnet.alephium.org'
 const testnet_explorer_url = 'https://backend-v113.testnet.alephium.org'
 const devnet_explorer_url = 'http://127.0.0.1:9090'
 
-export function connectAlephium(network: NetworkId): NodeProvider {
+const networkStorageKey = 'alephium-network'
+
+export function useNetworkId(): [NetworkId, (network: NetworkId) => void] {
+  const [network, setNetwork] = useLocalStorage<NetworkId>({
+    key: networkStorageKey,
+    defaultValue: 'mainnet',
+    getInitialValueInEffect: true,
+  })
+  return [network, setNetwork]
+}
+
+export function useAlephium(): NodeProvider {
+  const [network] = useNetworkId()
   return new NodeProvider(
     network === 'mainnet'
       ? mainnet_node_url
@@ -22,7 +35,8 @@ export function connectAlephium(network: NetworkId): NodeProvider {
   )
 }
 
-export function connectExplorer(network: NetworkId): ExplorerProvider {
+export function useExplorer(): ExplorerProvider {
+  const [network] = useNetworkId()
   return new ExplorerProvider(
     network === 'mainnet'
       ? mainnet_explorer_url