Use beta-5 wallet connector UI

app/package.json

@@ -5,17 +5,17 @@
   "dependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@fuel-ui/css": "^0.21",
-    "@fuel-wallet/react": "^0.13",
-    "@fuel-wallet/sdk": "^0.13",
+    "@fuel-ui/css": "^0.23",
+    "@fuel-wallet/react": "^0.15.2",
+    "@fuel-wallet/sdk": "^0.15.2",
     "@mui/base": "^5.0.0-beta.2",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.46",
     "@mui/material": "^5.13.2",
     "@tanstack/react-query": "^4.24.9",
     "ace-builds": "^1.22.0",
     "ansicolor": "^1.1.100",
-    "fuels": "^0.69",
+    "fuels": "^0.74",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-dom": "^18.2.0",

app/src/features/editor/hooks/useCompile.tsx

@@ -1,7 +1,11 @@
 import styled from '@emotion/styled';
 import ansicolor from 'ansicolor';
 import React, { useState, useEffect } from 'react';
-import { saveAbi, saveBytecode, saveStorageSlots } from '../../../utils/localStorage';
+import {
+  saveAbi,
+  saveBytecode,
+  saveStorageSlots,
+} from '../../../utils/localStorage';
 import { CopyableHex } from '../../../components/shared';
 import { Toolchain } from '../components/ToolchainDropdown';
 

app/src/features/interact/hooks/useContract.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useWallet } from '../../toolbar/hooks/useWallet';
+import { useWallet } from '@fuel-wallet/react';
 import { Contract, Interface } from 'fuels';
 import { loadAbi } from '../../../utils/localStorage';
 

app/src/features/toolbar/components/ActionToolbar.tsx

@@ -5,8 +5,11 @@ import { DeployState } from '../../../utils/types';
 import { DeploymentButton } from './DeploymentButton';
 import CompileButton from './CompileButton';
 import SecondaryButton from '../../../components/SecondaryButton';
-import { useFuel } from '@fuel-wallet/react';
-import { loadAbi, loadBytecode, loadStorageSlots } from '../../../utils/localStorage';
+import {
+  loadAbi,
+  loadBytecode,
+  loadStorageSlots,
+} from '../../../utils/localStorage';
 
 export interface ActionToolbarProps {
   deployState: DeployState;
@@ -29,8 +32,6 @@ function ActionToolbar({
   setDrawerOpen,
   updateLog,
 }: ActionToolbarProps) {
-  const { fuel } = useFuel();
-
   return (
     <div
       style={{
@@ -44,28 +45,17 @@ function ActionToolbar({
         disabled={isCompiled === true || deployState === DeployState.DEPLOYING}
         tooltip='Compile sway code'
       />
-      {!fuel ? (
-        <SecondaryButton
-          header={true}
-          onClick={() =>
-            window.open('https://wallet.fuel.network/docs/install/', '_blank')
-          }
-          text='INSTALL'
-          tooltip={'Install the fuel wallet to deploy contracts'}
-        />
-      ) : (
-        <DeploymentButton
-          abi={loadAbi()}
-          bytecode={loadBytecode()}
-          storageSlots={loadStorageSlots()}
-          isCompiled={isCompiled}
-          setContractId={setContractId}
-          deployState={deployState}
-          setDeployState={setDeployState}
-          setDrawerOpen={setDrawerOpen}
-          updateLog={updateLog}
-        />
-      )}
+      <DeploymentButton
+        abi={loadAbi()}
+        bytecode={loadBytecode()}
+        storageSlots={loadStorageSlots()}
+        isCompiled={isCompiled}
+        setContractId={setContractId}
+        deployState={deployState}
+        setDeployState={setDeployState}
+        setDrawerOpen={setDrawerOpen}
+        updateLog={updateLog}
+      />
       <SecondaryButton
         header={true}
         onClick={() => setDrawerOpen(!drawerOpen)}
@@ -80,7 +70,11 @@ function ActionToolbar({
       <SecondaryButton
         header={true}
         onClick={() =>
-          window.open('https://docs.fuel.network/docs/sway', '_blank', 'noreferrer')
+          window.open(
+            'https://docs.fuel.network/docs/sway',
+            '_blank',
+            'noreferrer'
+          )
         }
         text='DOCS'
         tooltip={'Open documentation for Sway in a new tab'}

app/src/features/toolbar/components/DeploymentButton.tsx

@@ -1,9 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
 import { DeployState } from '../../../utils/types';
-import { useDeployContract } from '../hooks/useDeployContract';
+import {
+  DeployContractData,
+  useDeployContract,
+} from '../hooks/useDeployContract';
 import SecondaryButton from '../../../components/SecondaryButton';
 import { ButtonSpinner } from '../../../components/shared';
-import { useProvider } from '@fuel-wallet/react';
+import { useConnectIfNotAlready } from '../hooks/useConnectIfNotAlready';
 
 interface DeploymentButtonProps {
   abi: string;
@@ -28,9 +31,7 @@ export function DeploymentButton({
   setDrawerOpen,
   updateLog,
 }: DeploymentButtonProps) {
-  const { provider } = useProvider();
-
-  const networkUrl = provider?.url;
+  const { connectIfNotAlready, isConnected } = useConnectIfNotAlready();
 
   const handleError = useCallback(
     (error: Error) => {
@@ -41,13 +42,13 @@ export function DeploymentButton({
   );
 
   const handleSuccess = useCallback(
-    (data: any) => {
+    ({ contractId, networkUrl }: DeployContractData) => {
       setDeployState(DeployState.DEPLOYED);
-      setContractId(data);
+      setContractId(contractId);
       setDrawerOpen(true);
       updateLog(`Contract was successfully deployed to ${networkUrl}`);
     },
-    [setContractId, setDeployState, setDrawerOpen, updateLog, networkUrl]
+    [setContractId, setDeployState, setDrawerOpen, updateLog]
   );
 
   const deployContractMutation = useDeployContract(
@@ -56,17 +57,32 @@ export function DeploymentButton({
     storageSlots,
     handleError,
     handleSuccess,
-    updateLog,
-    // Only attempt to fetch the wallet after the deploy button has been clicked. This prevents
-    // the wallet from opening when the page first loads.
-    deployState === DeployState.NOT_DEPLOYED
+    updateLog
   );
 
-  const onDeployClick = useCallback(async () => {
+  const handleDeploy = useCallback(async () => {
     updateLog(`Deploying contract...`);
     setDeployState(DeployState.DEPLOYING);
     deployContractMutation.mutate();
-  }, [deployContractMutation, setDeployState, updateLog]);
+  }, [updateLog, setDeployState, deployContractMutation]);
+
+  const handleConnectionFailed = useCallback(
+    async () => handleError(new Error('Failed to connect to wallet.')),
+    [handleError]
+  );
+
+  const onDeployClick = useCallback(async () => {
+    if (!isConnected) {
+      updateLog(`Connecting to wallet...`);
+    }
+    await connectIfNotAlready(handleDeploy, handleConnectionFailed);
+  }, [
+    isConnected,
+    updateLog,
+    connectIfNotAlready,
+    handleDeploy,
+    handleConnectionFailed,
+  ]);
 
   const { isDisabled, tooltip } = useMemo(() => {
     switch (deployState) {

app/src/features/toolbar/hooks/useConnectIfNotAlready.ts

@@ -0,0 +1,43 @@
+import { useConnectUI, useWallet } from '@fuel-wallet/react';
+import { useCallback, useMemo, useEffect, useRef } from 'react';
+
+export function useConnectIfNotAlready() {
+  const connectedCallbackRef = useRef<(() => Promise<void>) | null>(null);
+  const failedCallbackRef = useRef<(() => Promise<void>) | null>(null);
+  const { connect, isError, isConnecting } = useConnectUI();
+  const { wallet } = useWallet();
+  const isConnected = useMemo(() => !!wallet, [wallet]);
+
+  const connectIfNotAlready = useCallback(
+    (
+      connectedCallback: () => Promise<void>,
+      failedCallback: () => Promise<void>
+    ) => {
+      connectedCallbackRef.current = connectedCallback;
+      failedCallbackRef.current = failedCallback;
+
+      if (!isConnected && !isConnecting) {
+        connect();
+      } else {
+        connectedCallback();
+      }
+    },
+    [connect, isConnected, isConnecting]
+  );
+
+  useEffect(() => {
+    if (connectedCallbackRef.current && isConnected) {
+      connectedCallbackRef.current();
+      connectedCallbackRef.current = null;
+    }
+  }, [isConnected, connectedCallbackRef]);
+
+  useEffect(() => {
+    if (failedCallbackRef.current && isError) {
+      failedCallbackRef.current();
+      failedCallbackRef.current = null;
+    }
+  }, [isError, failedCallbackRef]);
+
+  return { connectIfNotAlready, isConnected };
+}

app/src/features/toolbar/hooks/useDeployContract.ts

@@ -1,22 +1,28 @@
 import { ContractFactory, JsonAbi, StorageSlot } from 'fuels';
 import { useMutation } from '@tanstack/react-query';
-import { useWallet } from './useWallet';
+import { useFuel, useWallet } from '@fuel-wallet/react';
 
 const DEPLOYMENT_TIMEOUT_MS = 120000;
 
+export interface DeployContractData {
+  contractId: string;
+  networkUrl: string;
+}
+
 export function useDeployContract(
   abi: string,
   bytecode: string,
   storageSlots: string,
   onError: (error: any) => void,
   onSuccess: (data: any) => void,
-  updateLog: (entry: string) => void,
-  isDisabled: boolean
+  updateLog: (entry: string) => void
 ) {
-  const { wallet, isLoading: walletIsLoading } = useWallet(isDisabled);
+  const { wallet, isLoading: walletIsLoading } = useWallet();
+  const { fuel } = useFuel();
 
   const mutation = useMutation(
     async () => {
+      const network = await fuel.currentNetwork();
       if (!wallet) {
         if (walletIsLoading) {
           updateLog('Connecting to wallet...');
@@ -25,22 +31,27 @@ export function useDeployContract(
         }
       }
 
-      const contractIdPromise = new Promise(async (resolve, reject) => {
-        const contractFactory = new ContractFactory(
-          bytecode,
-          JSON.parse(abi) as JsonAbi,
-          wallet
-        );
+      const resultPromise = new Promise(
+        async (resolve: (data: DeployContractData) => void, reject) => {
+          const contractFactory = new ContractFactory(
+            bytecode,
+            JSON.parse(abi) as JsonAbi,
+            wallet
+          );
 
-        try {
-          const contract = await contractFactory.deployContract({
-            storageSlots: JSON.parse(storageSlots) as StorageSlot[],
-          });
-          resolve(contract.id.toB256());
-        } catch (error) {
-          reject(error);
+          try {
+            const contract = await contractFactory.deployContract({
+              storageSlots: JSON.parse(storageSlots) as StorageSlot[],
+            });
+            resolve({
+              contractId: contract.id.toB256(),
+              networkUrl: network.url,
+            });
+          } catch (error) {
+            reject(error);
+          }
         }
-      });
+      );
 
       const timeoutPromise = new Promise((_resolve, reject) =>
         setTimeout(
@@ -56,7 +67,7 @@ export function useDeployContract(
         )
       );
 
-      return await Promise.race([contractIdPromise, timeoutPromise]);
+      return await Promise.race([resultPromise, timeoutPromise]);
     },
     {
       // Retry once if the wallet is still loading.