feat: use Fuel SDK on react (#914)

FuelLabs · Oct 13, 2023 · d6b847d · d6b847d
1 parent 154d5e4
commit d6b847d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 43 deletions.
diff --git a/.changeset/happy-seas-leave.md b/.changeset/happy-seas-leave.md
@@ -0,0 +1,5 @@
+---
+'@fuel-wallet/react': patch
+---
+
+feat: use Fuel SDK instead of window.fuel
diff --git a/packages/react/src/components/FuelProvider.tsx b/packages/react/src/components/FuelProvider.tsx
@@ -1,9 +1,8 @@
-import type { Fuel } from '@fuel-wallet/sdk';
+import { Fuel } from '@fuel-wallet/sdk';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useEffect } from 'react';
 
-import { useWindowFuel } from '../hooks';
 import { QUERY_KEYS } from '../utils';
 
 export const fuelQueryClient = new QueryClient({
@@ -38,7 +37,14 @@ export const useFuel = () => {
 };
 
 export const FuelProvider = ({ children }: FuelProviderProps) => {
-  const fuel = useWindowFuel();
+  const fuel = new Fuel();
+
+  function onFuelLoaded() {
+    const connectorName = localStorage.getItem('connector');
+    if (connectorName) {
+      fuel.selectConnector(connectorName);
+    }
+  }
 
   function onCurrentAccountChange() {
     fuelQueryClient.invalidateQueries([QUERY_KEYS.account]);
@@ -67,16 +73,18 @@ export const FuelProvider = ({ children }: FuelProviderProps) => {
   }
 
   useEffect(() => {
-    fuel?.on(fuel.events.currentAccount, onCurrentAccountChange);
-    fuel?.on(fuel.events.connection, onConnectionChange);
-    fuel?.on(fuel.events.accounts, onAccountsChange);
-    fuel?.on(fuel.events.network, onNetworkChange);
+    fuel.on(fuel.events.currentAccount, onCurrentAccountChange);
+    fuel.on(fuel.events.connection, onConnectionChange);
+    fuel.on(fuel.events.accounts, onAccountsChange);
+    fuel.on(fuel.events.network, onNetworkChange);
+    fuel.on(fuel.events.load, onFuelLoaded);
 
     return () => {
-      fuel?.off(fuel.events.currentAccount, onCurrentAccountChange);
-      fuel?.off(fuel.events.connection, onConnectionChange);
-      fuel?.off(fuel.events.accounts, onAccountsChange);
-      fuel?.off(fuel.events.network, onNetworkChange);
+      fuel.off(fuel.events.currentAccount, onCurrentAccountChange);
+      fuel.off(fuel.events.connection, onConnectionChange);
+      fuel.off(fuel.events.accounts, onAccountsChange);
+      fuel.off(fuel.events.network, onNetworkChange);
+      fuel.off(fuel.events.load, onFuelLoaded);
     };
   }, [fuel]);
 

diff --git a/packages/react/src/hooks/index.tsx b/packages/react/src/hooks/index.tsx
@@ -10,4 +10,3 @@ export * from './useProvider';
 export * from './useTransaction';
 export * from './useTransactionReceipts';
 export * from './useWallet';
-export * from './useWindowFuel';
diff --git a/packages/react/src/hooks/useConnectors.tsx b/packages/react/src/hooks/useConnectors.tsx
@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { useFuel } from '../components';
 import { QUERY_KEYS } from '../utils';
 
-import { useWindowFuel } from './useWindowFuel';
-
 export const useConnectors = () => {
-  const fuel = useWindowFuel();
+  const { fuel } = useFuel();
 
   const query = useQuery(
     [QUERY_KEYS.chain, fuel],

diff --git a/packages/react/src/hooks/useWindowFuel.tsx b/packages/react/src/hooks/useWindowFuel.tsx