feat: improve sdks and tests (#982)

.changeset/afraid-terms-push.md

@@ -0,0 +1,7 @@
+---
+'@fuel-wallet/sdk': minor
+---
+
+feat: add hooks `useAddAssets`, `useAddNetwork`, `useAssets` and `useNetwork`.
+feat: improve hooks `useWallet` `useConnect` and `useAccounts`.
+feat: remove `FuelConnectorProvider` and consolidate into `FuelProvider`.

examples/cra-dapp/src/App.tsx

@@ -2,14 +2,14 @@
 import {
   useAccounts,
   useDisconnect,
-  useFuelConnect,
+  useConnectUI,
   useIsConnected,
 } from '@fuel-wallet/react';
 import './App.css';
 
 function App() {
   const { connect, error, isError, theme, setTheme, isConnecting } =
-    useFuelConnect();
+    useConnectUI();
   const { disconnect } = useDisconnect();
   const { isConnected } = useIsConnected();
   const { accounts } = useAccounts();

examples/cra-dapp/src/index.tsx

@@ -1,4 +1,4 @@
-import { FuelProvider, FuelConnectProvider } from '@fuel-wallet/react';
+import { FuelProvider } from '@fuel-wallet/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
@@ -11,10 +11,12 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <FuelProvider>
-      <FuelConnectProvider>
-        <App />
-      </FuelConnectProvider>
+    <FuelProvider
+      fuelConfig={{
+        devMode: true,
+      }}
+    >
+      <App />
     </FuelProvider>
   </React.StrictMode>
 );

packages/app/connect/connect.stories.tsx

@@ -1,15 +1,10 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box, Button, Text } from '@fuel-ui/react';
-import {
-  FuelProvider,
-  FuelConnectProvider,
-  useAccount,
-  useFuelConnect,
-} from '@fuel-wallet/react';
+import { FuelProvider, useAccount, useConnectUI } from '@fuel-wallet/react';
 import { useDarkMode } from 'storybook-dark-mode';
 
 export default {
-  component: FuelConnectProvider,
+  component: FuelProvider,
   title: 'Connect',
   parameters: {
     layout: 'fullscreen',
@@ -18,7 +13,7 @@ export default {
 
 const App = () => {
   const { account } = useAccount();
-  const { connect, isConnecting } = useFuelConnect();
+  const { connect, isConnecting } = useConnectUI();
 
   return (
     <>
@@ -35,9 +30,9 @@ export const Usage = () => {
   return (
     <Box css={styles.box}>
       <FuelProvider>
-        <FuelConnectProvider theme={isDark ? 'dark' : 'light'}>
+        <FuelProvider theme={isDark ? 'dark' : 'light'}>
           <App />
-        </FuelConnectProvider>
+        </FuelProvider>
       </FuelProvider>
     </Box>
   );

packages/app/src/systems/Send/machines/sendMachine.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/consistent-type-imports */
-import { BN, Provider, TransactionRequest } from 'fuels';
+import { BN, Provider, TransactionRequest, bn } from 'fuels';
 import { assign, createMachine, InterpreterFrom, StateFrom } from 'xstate';
 import { AccountService } from '~/systems/Account';
 import { FetchMachine, assignError } from '~/systems/Core';

packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts

@@ -23,7 +23,7 @@ test.describe('Forward Half ETH and Mint Custom Asset', () => {
     }));
   });
 
-  test('e2e foreward half eth and mint custom asset', async ({ page }) => {
+  test('e2e forward half eth and mint custom asset', async ({ page }) => {
     await connect(page, fuelWalletTestHelper);
 
     const depositAmount = '1.000';

packages/e2e-contract-tests/src/components/AssetConfigurationCard.tsx

@@ -10,8 +10,8 @@ export const AssetConfigurationCard = () => {
     subId: '',
     decimals: '',
   });
-  const account = useAccount();
-  const wallet = useWallet({ address: account.account });
+  const { account } = useAccount();
+  const wallet = useWallet(account);
 
   return (
     <div>

packages/e2e-contract-tests/src/components/DepositAndMintMultiCall.tsx

@@ -8,7 +8,7 @@ export const DepositAndMintMultiCalls = () => {
   const [forwardAmount, setForwardAmount] = useState<string>('');
   const [mintAmount, setMintAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet({ address: account });
+  const wallet = useWallet(account);
 
   return (
     <div>

packages/e2e-contract-tests/src/components/DepositHalfEthCard.tsx

@@ -6,8 +6,8 @@ import { depositHalf } from '../contract_interactions';
 
 export const DepositHalfEthCard = () => {
   const [amount, setAmount] = useState<string>('');
-  const account = useAccount();
-  const wallet = useWallet({ address: account.account });
+  const { account } = useAccount();
+  const wallet = useWallet(account);
 
   return (
     <div>

packages/e2e-contract-tests/src/components/ForwardCustomAssetCard.tsx

@@ -8,8 +8,8 @@ import { calculateAssetId } from '../utils';
 
 export const ForwardCustomAssetCard = () => {
   const [amount, setAmount] = useState<string>('');
-  const account = useAccount();
-  const wallet = useWallet({ address: account.account });
+  const { account } = useAccount();
+  const wallet = useWallet(account);
 
   const assetId = calculateAssetId(MAIN_CONTRACT_ID, BaseAssetId);
 

packages/e2e-contract-tests/src/components/ForwardEthCard.tsx

@@ -6,8 +6,8 @@ import { deposit } from '../contract_interactions';
 
 export const ForwardEthCard = () => {
   const [amount, setAmount] = useState<string>('');
-  const account = useAccount();
-  const wallet = useWallet({ address: account.account });
+  const { account } = useAccount();
+  const wallet = useWallet(account);
 
   return (
     <div>

packages/e2e-contract-tests/src/components/ForwardHalfAndExternalMintCard.tsx

@@ -7,8 +7,8 @@ import { depositHalfAndExternalMint } from '../contract_interactions';
 export const ForwardHalfAndExternalMintCard = () => {
   const [forwardAmount, setForwardAmount] = useState<string>('');
   const [mintAmount, setMintAmount] = useState<string>('');
-  const account = useAccount();
-  const wallet = useWallet({ address: account.account });
+  const { account } = useAccount();
+  const wallet = useWallet(account);
 
   return (
     <div>

packages/e2e-contract-tests/src/components/ForwardHalfAndMintCard.tsx

@@ -7,8 +7,8 @@ import { depositHalfAndMint } from '../contract_interactions';
 export const ForwardHalfAndMintCard = () => {
   const [forwardAmount, setForwardAmount] = useState<string>('');
   const [mintAmount, setMintAmount] = useState<string>('');
-  const account = useAccount();
-  const wallet = useWallet({ address: account.account });
+  const { account } = useAccount();
+  const wallet = useWallet(account);
 
   return (
     <div>

packages/e2e-contract-tests/src/components/ForwardHalfCustomAssetCard.tsx

@@ -8,8 +8,8 @@ import { calculateAssetId } from '../utils';
 
 export const ForwardHalfCustomAssetCard = () => {
   const [amount, setAmount] = useState<string>('');
-  const account = useAccount();
-  const wallet = useWallet({ address: account.account });
+  const { account } = useAccount();
+  const wallet = useWallet(account);
 
   const assetId = calculateAssetId(MAIN_CONTRACT_ID, BaseAssetId);
 

packages/e2e-contract-tests/src/components/Header.tsx

@@ -1,12 +1,7 @@
-import { useConnectors, useFuelConnect } from '@fuel-wallet/react';
+import { useConnectUI } from '@fuel-wallet/react';
 
 export const Header = () => {
-  const { connect } = useFuelConnect();
-  const { connectors } = useConnectors();
+  const { connect } = useConnectUI();
 
-  return (
-    <button disabled={!connectors.length} onClick={connect}>
-      Connect
-    </button>
-  );
+  return <button onClick={connect}>Connect</button>;
 };

packages/e2e-contract-tests/src/components/MintAssetCard.tsx

@@ -7,7 +7,7 @@ import { mint } from '../contract_interactions';
 export const MintAssetCard = () => {
   const [amount, setAmount] = useState<string>('');
   const { account } = useAccount();
-  const { wallet } = useWallet({ address: account });
+  const { wallet } = useWallet(account);
 
   return (
     <div>

packages/e2e-contract-tests/src/components/Providers.tsx

@@ -1,14 +1,10 @@
-import { FuelProvider, FuelConnectProvider } from '@fuel-wallet/react';
+import { FuelProvider } from '@fuel-wallet/react';
 import type { ReactNode } from 'react';
 
 type ProviderProps = {
   children: ReactNode;
 };
 
 export const Providers = ({ children }: ProviderProps) => {
-  return (
-    <FuelProvider>
-      <FuelConnectProvider>{children}</FuelConnectProvider>
-    </FuelProvider>
-  );
+  return <FuelProvider>{children}</FuelProvider>;
 };

packages/react/package.json

@@ -35,8 +35,11 @@
     "react": "^18.2.0"
   },
   "dependencies": {
+    "@fuel-wallet/sdk": "workspace:*",
     "@radix-ui/react-dialog": "^1.0.5",
     "@tanstack/react-query": "^4.36.1",
+    "styled-components": "^6.1.1",
+    "compare-versions": "^6.1.0",
     "events": "^3.3.0"
   },
   "devDependencies": {

packages/react/src/hooks/index.tsx

@@ -2,6 +2,10 @@ export * from './useAccount';
 export * from './useAccounts';
 export * from './useBalance';
 export * from './useChain';
+export * from './useAssets';
+export * from './useAddNetwork';
+export * from './useNetwork';
+export * from './useAddAssets';
 export * from './useConnect';
 export * from './useConnectors';
 export * from './useDisconnect';

packages/react/src/hooks/useAccount.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useFuel } from '../components';
+import { useFuel } from '../providers';
 import { QUERY_KEYS } from '../utils';
 
 export const useAccount = () => {
@@ -17,12 +17,12 @@ export const useAccount = () => {
       }
     },
     {
-      enabled: !!fuel,
+      initialData: null,
     }
   );
 
   return {
-    account: data || undefined,
+    account: data,
     ...queryProps,
   };
 };

packages/react/src/hooks/useAccounts.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useFuel } from '../components';
+import { useFuel } from '../providers';
 import { QUERY_KEYS } from '../utils';
 
 export const useAccounts = () => {
@@ -10,19 +10,19 @@ export const useAccounts = () => {
     [QUERY_KEYS.accounts],
     async () => {
       try {
-        const accounts = await fuel?.accounts();
-        return accounts || null;
+        const accounts = await fuel.accounts();
+        return accounts || [];
       } catch (error: unknown) {
-        return null;
+        return [];
       }
     },
     {
-      enabled: !!fuel,
+      initialData: [],
     }
   );
 
   return {
-    accounts: data || undefined,
+    accounts: data,
     ...queryProps,
   };
 };

packages/react/src/hooks/useAddAssets.tsx

@@ -0,0 +1,25 @@
+import type { Asset } from '@fuel-wallet/sdk';
+import { useMutation } from '@tanstack/react-query';
+
+import { useFuel } from '../providers';
+import { MUTATION_KEYS } from '../utils';
+
+export const useAddAssets = () => {
+  const { fuel } = useFuel();
+
+  const { mutate, mutateAsync, ...queryProps } = useMutation(
+    [MUTATION_KEYS.addAssets],
+    async (assets: Asset | Asset[]) => {
+      if (Array.isArray(assets)) {
+        return fuel.addAssets(assets);
+      }
+      return fuel.addAsset(assets);
+    }
+  );
+
+  return {
+    addAssets: (assets: Asset | Asset[]) => mutate(assets),
+    addAssetsAsync: (assets: Asset | Asset[]) => mutateAsync(assets),
+    ...queryProps,
+  };
+};

packages/react/src/hooks/useAddNetwork.tsx

@@ -0,0 +1,21 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { useFuel } from '../providers';
+import { MUTATION_KEYS } from '../utils';
+
+export const useAddNetwork = () => {
+  const { fuel } = useFuel();
+
+  const { mutate, mutateAsync, ...queryProps } = useMutation(
+    [MUTATION_KEYS.addAssets],
+    async (networkUrl: string) => {
+      return fuel.addNetwork(networkUrl);
+    }
+  );
+
+  return {
+    addNetwork: (networkUrl: string) => mutate(networkUrl),
+    addNetworkAsync: (networkUrl: string) => mutateAsync(networkUrl),
+    ...queryProps,
+  };
+};

packages/react/src/hooks/useAssets.tsx

@@ -0,0 +1,29 @@
+import type { Asset } from '@fuel-wallet/sdk';
+import { useQuery } from '@tanstack/react-query';
+
+import { useFuel } from '../providers';
+import { QUERY_KEYS } from '../utils';
+
+export const useAssets = () => {
+  const { fuel } = useFuel();
+
+  const { data, ...queryProps } = useQuery(
+    [QUERY_KEYS.assets],
+    async () => {
+      try {
+        const assets = (await fuel.assets()) as Array<Asset>;
+        return assets || [];
+      } catch (error: unknown) {
+        return [];
+      }
+    },
+    {
+      initialData: [],
+    }
+  );
+
+  return {
+    assets: data,
+    ...queryProps,
+  };
+};