with useConnectUI

FuelLabs · Feb 22, 2024 · 9551b8b · 9551b8b
1 parent a6be5e5
commit 9551b8b
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 46 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -39,16 +39,6 @@ function App() {
   // An error message to display to the user.
   const [drawerOpen, setDrawerOpen] = useState(false);
 
-  // Select the wallet connector that is installed, if any.
-  const { fuel } = useFuel();
-  const { connectors } = useConnectors();
-  useEffect(() => {
-    const installed = connectors.find((c) => !!c.installed);
-    if (installed && !fuel.currentConnector()) {
-      fuel.selectConnector(installed.name);
-    }
-  }, [fuel, connectors]);
-
   const onCodeChange = useCallback(
     (code: string) => {
       saveCode(code);

diff --git a/app/src/features/toolbar/components/ActionToolbar.tsx b/app/src/features/toolbar/components/ActionToolbar.tsx
@@ -5,7 +5,6 @@ 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,
@@ -33,9 +32,6 @@ function ActionToolbar({
   setDrawerOpen,
   updateLog,
 }: ActionToolbarProps) {
-  let { fuel } = useFuel();
-  const fuelInstalled = !!fuel.currentConnector();
-
   return (
     <div
       style={{
@@ -49,28 +45,17 @@ function ActionToolbar({
         disabled={isCompiled === true || deployState === DeployState.DEPLOYING}
         tooltip='Compile sway code'
       />
-      {!fuelInstalled ? (
-        <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)}

diff --git a/app/src/features/toolbar/components/DeploymentButton.tsx b/app/src/features/toolbar/components/DeploymentButton.tsx
@@ -6,7 +6,7 @@ import {
 } from '../hooks/useDeployContract';
 import SecondaryButton from '../../../components/SecondaryButton';
 import { ButtonSpinner } from '../../../components/shared';
-import { useFuel } from '@fuel-wallet/react';
+import { useConnectIfNotAlready } from '../hooks/useConnectIfNotAlready';
 
 interface DeploymentButtonProps {
   abi: string;
@@ -31,7 +31,7 @@ export function DeploymentButton({
   setDrawerOpen,
   updateLog,
 }: DeploymentButtonProps) {
-  const { fuel } = useFuel();
+  const { connectIfNotAlready, isConnected } = useConnectIfNotAlready();
 
   const handleError = useCallback(
     (error: Error) => {
@@ -60,16 +60,29 @@ export function DeploymentButton({
     updateLog
   );
 
+  const handleDeploy = useCallback(async () => {
+    updateLog(`Deploying contract...`);
+    setDeployState(DeployState.DEPLOYING);
+    deployContractMutation.mutate();
+  }, [updateLog, setDeployState, deployContractMutation]);
+
+  const handleConnectionFailed = useCallback(
+    async () => handleError(new Error('Failed to connect to wallet.')),
+    [handleError]
+  );
+
   const onDeployClick = useCallback(async () => {
-    const isConnected = await fuel.currentConnector()?.connect();
-    if (isConnected) {
-      updateLog(`Deploying contract...`);
-      setDeployState(DeployState.DEPLOYING);
-      deployContractMutation.mutate();
-    } else {
-      handleError(new Error('Failed to connect to wallet.'));
+    if (!isConnected) {
+      updateLog(`Connecting to wallet...`);
     }
-  }, [deployContractMutation, setDeployState, updateLog, fuel, handleError]);
+    await connectIfNotAlready(handleDeploy, handleConnectionFailed);
+  }, [
+    isConnected,
+    updateLog,
+    connectIfNotAlready,
+    handleDeploy,
+    handleConnectionFailed,
+  ]);
 
   const { isDisabled, tooltip } = useMemo(() => {
     switch (deployState) {

diff --git a/app/src/features/toolbar/hooks/useConnectIfNotAlready.ts b/app/src/features/toolbar/hooks/useConnectIfNotAlready.ts
@@ -0,0 +1,35 @@
+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();
+    }
+  }, [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 };
+}