feat: add/select network flow

.changeset/tough-bobcats-retire.md

@@ -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.

examples/cra-dapp/package.json

@@ -7,10 +7,10 @@
     "start": "vite"
   },
   "dependencies": {
-    "@fuels/connectors": "0.25.0",
-    "@fuels/react": "0.25.0",
+    "@fuels/connectors": "0.28.0",
+    "@fuels/react": "0.28.0",
     "@tanstack/react-query": "5.28.4",
-    "fuels": "0.94.5",
+    "fuels": "0.94.6",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

examples/cra-dapp/src/App.css

@@ -1,3 +1,8 @@
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+}
+
 .App {
   display: flex;
   flex-direction: column;

examples/cra-dapp/src/App.tsx

@@ -1,101 +1,33 @@
-import {
-  useAccount,
-  useAccounts,
-  useConnectUI,
-  useDisconnect,
-  useFuel,
-  useIsConnected,
-  useWallet,
-} from '@fuels/react';
+import { useConnectUI, useIsConnected } from '@fuels/react';
+import { Connected } from './Connected';
 
-import { bn } from 'fuels';
 import './App.css';
 
 function App() {
-  const { connect, error, isError, theme, isConnecting } = useConnectUI();
+  const { connect, theme, isConnecting } = useConnectUI();
 
-  const { fuel } = useFuel();
-  const { disconnect } = useDisconnect();
   const { isConnected } = useIsConnected();
-  const { wallet } = useWallet();
-  const { account } = useAccount();
-  const { accounts } = useAccounts();
 
-  return (
-    <div className="App" data-theme={theme}>
-      <div className="Actions">
-        <button
-          type="button"
-          onClick={() => {
-            console.log('connect');
-            connect();
-          }}
-        >
-          {isConnecting ? 'Connecting' : 'Connect'}
-        </button>
-        {isConnected && (
-          <button type="button" onClick={() => disconnect()}>
-            Disconnect
+  if (!isConnected) {
+    return (
+      <div className="App" data-theme={theme}>
+        <div className="Actions">
+          <button
+            type="button"
+            onClick={() => {
+              connect();
+            }}
+          >
+            {isConnecting ? 'Connecting' : 'Connect'}
           </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>
-      {isError && <p className="Error">{error?.message}</p>}
-      {isConnected && (
-        <div className="Accounts">
-          <h3>Connected accounts</h3>
-          {accounts?.map((account) => (
-            <div key={account}>
-              <b>Account:</b> {account}
-            </div>
-          ))}
         </div>
-      )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="App" data-theme={theme}>
+      <Connected />
     </div>
   );
 }

examples/cra-dapp/src/Connected.tsx

@@ -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>
+  );
+}

packages/app/package.json

@@ -2,7 +2,7 @@
   "name": "fuels-wallet",
   "private": true,
   "version": "0.27.4",
-  "database": "18",
+  "database": "19",
   "scripts": {
     "build:all": "run-s build:web build:crx build:storybook",
     "build:web": "./scripts/build.sh --app=vite",
@@ -44,7 +44,7 @@
     "events": "3.3.0",
     "fake-indexeddb": "4.0.2",
     "framer-motion": "10.16.4",
-    "fuels": "0.94.5",
+    "fuels": "0.94.6",
     "json-edit-react": "1.13.3",
     "json-rpc-2.0": "1.7.0",
     "lodash.debounce": "4.0.8",

packages/app/playwright/crx/crx.test.ts

@@ -1,6 +1,14 @@
 import type { Account as WalletAccount } from '@fuel-wallet/types';
 import { type Locator, expect } from '@playwright/test';
-import { type Asset, Provider, Signer, Wallet, bn, hashMessage } from 'fuels';
+import {
+  type Asset,
+  Provider,
+  type SelectNetworkArguments,
+  Signer,
+  Wallet,
+  bn,
+  hashMessage,
+} from 'fuels';
 
 import {
   delay,
@@ -582,7 +590,7 @@ test.describe('FuelWallet Extension', () => {
       }
 
       async function testAddNetwork() {
-        const addingNetwork = addNetwork(FUEL_NETWORK.url);
+        const addingNetwork = addNetwork(FUEL_NETWORK.testnet);
 
         const addNetworkPage = await context.waitForEvent('page', {
           predicate: (page) => page.url().includes(extensionId),