diff --git a/src/App.tsx b/src/App.tsx index 6575bc9..3943188 100644 --- a/src/App.tsx +++ b/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({ @@ -18,11 +18,7 @@ function App() { getInitialValueInEffect: true, }) - const [network] = useLocalStorage({ - key: 'alephium-network', - defaultValue: 'mainnet', - getInitialValueInEffect: true, - }) + const [network] = useNetworkId() const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark')) diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx index e66b3dd..9d4815a 100644 --- a/src/components/AppHeader.tsx +++ b/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({ - key: 'alephium-network', - defaultValue: 'devnet', - getInitialValueInEffect: true, - }) + const [network, setNetwork] = useNetworkId() return (
diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx index 61aa137..3e313fa 100644 --- a/src/components/AppShell.tsx +++ b/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]) diff --git a/src/components/Multisig/BuildMultiSigTx.tsx b/src/components/Multisig/BuildMultiSigTx.tsx index 0c89a46..85714aa 100644 --- a/src/components/Multisig/BuildMultiSigTx.tsx +++ b/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) diff --git a/src/components/Multisig/CreateMultisig.tsx b/src/components/Multisig/CreateMultisig.tsx index 69b751b..62aa9b0 100644 --- a/src/components/Multisig/CreateMultisig.tsx +++ b/src/components/Multisig/CreateMultisig.tsx @@ -127,10 +127,16 @@ function CreateMultisig() { ta="left" {...form.getInputProps(`pubkeys.${index}.pubkey`)} /> - + form.values.pubkeys.length!==1 && form.removeListItem('pubkeys', index)} + onClick={() => + form.values.pubkeys.length !== 1 && + form.removeListItem('pubkeys', index) + } /> diff --git a/src/components/Multisig/SignMultisigTx.tsx b/src/components/Multisig/SignMultisigTx.tsx index 2015d21..eebeb95 100644 --- a/src/components/Multisig/SignMultisigTx.tsx +++ b/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() + 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) diff --git a/src/components/Token/TokenInfo.tsx b/src/components/Token/TokenInfo.tsx index 1fbab4c..7948149 100644 --- a/src/components/Token/TokenInfo.tsx +++ b/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() + const nodeProvider = useAlephium() const searchToken = useCallback(async (tokenId: string) => { setValue(tokenId) if (tokenId) { - const nodeProvider = connectAlephium(network) const tokenMetadata = await nodeProvider.fetchFungibleTokenMetaData( tokenId ) diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 8cff93a..521ed22 100644 --- a/src/utils/utils.ts +++ b/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({ + 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