-
Notifications
You must be signed in to change notification settings - Fork 440
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add/select network flow (#1468)
- Closes #1163 --- | 📷 Demo | | --- | | <video src="https://github.com/user-attachments/assets/57d657de-2315-407a-9683-daf002235b78" /> |
- Loading branch information
1 parent
32abae8
commit ce5925c
Showing
44 changed files
with
1,557 additions
and
790 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "fuels-wallet": minor | ||
| --- | ||
|
|
||
| Allow users to switch to or create a network through the `selectNetwork` flow, selecting it if it already exists or creating it if not. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| import { | ||
| useAccount, | ||
| useAccounts, | ||
| useAddNetwork, | ||
| useDisconnect, | ||
| useFuel, | ||
| useNetwork, | ||
| useNetworks, | ||
| useSelectNetwork, | ||
| useWallet, | ||
| } from '@fuels/react'; | ||
|
|
||
| import { DEVNET_NETWORK_URL, TESTNET_NETWORK_URL, bn } from 'fuels'; | ||
| import './App.css'; | ||
|
|
||
| export function Connected() { | ||
| const { fuel } = useFuel(); | ||
| const { disconnect } = useDisconnect(); | ||
| const { wallet } = useWallet(); | ||
| const { account } = useAccount(); | ||
| const { accounts } = useAccounts(); | ||
|
|
||
| const { network } = useNetwork(); | ||
| const { networks } = useNetworks(); | ||
| const { selectNetworkAsync, isPending: isSelectingNetwork } = | ||
| useSelectNetwork(); | ||
|
|
||
| const { addNetworkAsync, isPending: isAddingNetwork } = useAddNetwork(); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="Actions"> | ||
| <button type="button" onClick={() => disconnect()}> | ||
| Disconnect | ||
| </button> | ||
| <button | ||
| type="button" | ||
| onClick={async () => { | ||
| const txn = await wallet?.createTransfer( | ||
| '0xed73857a06ba2a706700e4e69e59f63a012ae6663a54309043e8fdc690bed926', | ||
| bn(100), | ||
| undefined, | ||
| { | ||
| tip: bn(2000), | ||
| } | ||
| ); | ||
|
|
||
| if (!txn || !account) return; | ||
|
|
||
| try { | ||
| const result = await fuel.sendTransaction(account, txn); | ||
| console.log(result); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| }} | ||
| > | ||
| Send transaction with custom fees | ||
| </button> | ||
| <button | ||
| type="button" | ||
| onClick={async () => { | ||
| const txn = await wallet?.createTransfer( | ||
| '0xed73857a06ba2a706700e4e69e59f63a012ae6663a54309043e8fdc690bed926', | ||
| bn(100), | ||
| undefined, | ||
| undefined | ||
| ); | ||
|
|
||
| if (!txn || !account) return; | ||
|
|
||
| try { | ||
| const result = await fuel.sendTransaction(account, txn); | ||
| console.log(result); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| }} | ||
| > | ||
| Send transaction with default fees | ||
| </button> | ||
| </div> | ||
|
|
||
| <br /> | ||
| <br /> | ||
|
|
||
| <div className="Actions"> | ||
| <button | ||
| type="button" | ||
| onClick={async () => { | ||
| try { | ||
| const res = await selectNetworkAsync({ | ||
| chainId: 0, | ||
| }); | ||
| console.log(res); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| }} | ||
| > | ||
| {isSelectingNetwork ? 'Loading...' : 'Select chainId 0'} | ||
| </button> | ||
| <button | ||
| type="button" | ||
| onClick={async () => { | ||
| try { | ||
| const res = await selectNetworkAsync({ | ||
| url: DEVNET_NETWORK_URL, | ||
| }); | ||
| console.log(res); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| }} | ||
| > | ||
| {isSelectingNetwork ? 'Loading...' : 'Select Devnet by URL'} | ||
| </button> | ||
| <button | ||
| type="button" | ||
| onClick={async () => { | ||
| try { | ||
| const res = await selectNetworkAsync({ | ||
| url: TESTNET_NETWORK_URL, | ||
| }); | ||
| console.log(res); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| }} | ||
| > | ||
| {isSelectingNetwork ? 'Loading...' : 'Select Testnet by URL'} | ||
| </button> | ||
| <button | ||
| type="button" | ||
| onClick={async () => { | ||
| try { | ||
| const res = await selectNetworkAsync({ | ||
| chainId: 111, | ||
| }); | ||
| console.log(res); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| }} | ||
| > | ||
| {isSelectingNetwork ? 'Loading...' : 'Select Unknown ChainId'} | ||
| </button> | ||
|
|
||
| <button | ||
| type="button" | ||
| onClick={async () => { | ||
| try { | ||
| const res = await addNetworkAsync(TESTNET_NETWORK_URL); | ||
| console.log(res); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| }} | ||
| > | ||
| {isAddingNetwork ? 'Loading...' : 'Add testnet'} | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className="Accounts"> | ||
| <h3>Current Network</h3> | ||
| <div> | ||
| <b>Chain Id:</b> {network?.chainId?.toString()} | ||
| </div> | ||
| <div> | ||
| <b>Url:</b> {network?.url} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="Accounts"> | ||
| <h3>Connected accounts</h3> | ||
| {accounts?.map((account) => ( | ||
| <div key={account}> | ||
| <b>Account:</b> {account} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div className="Accounts"> | ||
| <h3>Networks</h3> | ||
| {networks?.map((network) => ( | ||
| <div key={network.url}> | ||
| <b>{network.chainId}:</b> {network.url} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.