docs: add @fuels/connectors to the docs (#1142)

Add `@fuels/connectors` and `@tanstack/react-query` to the docs.

| Demo |
| ---- |
| <img width="920" alt="Screenshot 2024-03-18 at 16 13 10"
src="https://github.com/FuelLabs/fuels-wallet/assets/7074983/b36222fb-1cf7-4ec5-bd2c-d18eeedef0a8">
|

.changeset/new-owls-tickle.md

@@ -1,7 +1,7 @@
 ---
-"@fuel-wallet/connections": patch
-"@fuel-wallet/types": patch
-"fuels-wallet": patch
+'@fuel-wallet/connections': patch
+'@fuel-wallet/types': patch
+'fuels-wallet': patch
 ---
 
 ci: replace prettier and eslint with biomejs (dev)

.changeset/tame-flowers-grow.md

@@ -1,7 +1,7 @@
 ---
-'@fuel-wallet/connections': minor
-'@fuel-wallet/types': minor
-'fuels-wallet': minor
+'@fuel-wallet/connections': patch
+'@fuel-wallet/types': patch
+'fuels-wallet': patch
 ---
 
 feat: bump SDK to latest version

packages/docs/docs/dev/connectors.mdx

@@ -11,8 +11,15 @@ You can learn more about how Fuel Wallet Connectors work, by reading the [Fuel W
 
 ## Setup Fuel Wallet Connectors
 
-The Fuel Wallet SDK enables you to include a set of connectors when creating a new instance. If you don't provide any connectors, the SDK will default to using the `FuelWalletConnector()` and `FueletWalletConnector()` methods.
+The Fuel Wallet SDK enables you to include a set of connectors when creating a new instance.
 
+### Using default connectors
+<CodeImport
+  file="../../examples/connectors/ListDefaultConnectors.tsx"
+  commentBlock="createInstance"
+/>
+
+### Using a custom list
 <CodeImport
   file="../../examples/connectors/ListConnectors.tsx"
   commentBlock="createInstance"

packages/docs/docs/dev/getting-started.mdx

@@ -14,51 +14,82 @@ If you are using **React** jump to the [React section](./#using-react).
 To begin integrating the Fuel Wallet SDK into your DApp, you first need to install the packages `@fuels/connectors` and `fuels`.
 
 ```bash
-npm install @fuels/connectors fuels
+npm install fuels @fuels/connectors
 ```
 
 The installation also requires the `fuels` SDK, as it is used to communicate with the Fuel Network and provides a set of utilities required for interacting with contracts on the Fuel Network.
 
 ## Example
 
+You can import `defaultConnectors` from `@fuels/connectors` to get a list of all the default connectors. Besides that, you can also create your own connectors or import them individually.
+
+### Using default connectors
 ```ts
 import { Fuel } from 'fuels';
+import { defaultConnectors } from '@fuels/connectors';
 
-const fuel = new Fuel();
+const fuel = new Fuel({
+  connectors: defaultConnectors({ devMode: true }),
+});
 
+await fuel.selectConnector('Fuel Wallet');
+await fuel.connect();
+```
+
+### Using a custom list
+```ts
+import { Fuel } from 'fuels';
+import { FuelWalletConnector } from '@fuels/connectors';
+
+const fuel = new Fuel({
+  connectors: [new FuelWalletConnector()],
+});
+
+await fuel.selectConnector('Fuel Wallet');
 await fuel.connect();
 ```
 
 ## Using React
 
-We also provide a set of React hooks and a UI for working with it connectors without,
-the need for manually create a UI, for it.
+We also provide a set of React hooks and a user interface (UI) for seamless interaction with connectors, eliminating the need for manual UI creation.
 
 ### Installation
 
 ```bash
-npm install @fuels/react @fuels/connectors fuels
+npm install fuels @fuels/connectors @fuels/react @tanstack/react-query
 ```
 
+- [fuels](https://github.com/FuelLabs/fuels-ts) is the SDK that provides a set of utilities for interacting with the Fuel Network.
+- [@fuels/connectors](https://github.com/FuelLabs/fuel-connectors) is the collection of connectors that allow you to connect to the Fuel Wallet.
+- [@fuels/react](https://github.com/FuelLabs/fuels-npm-packs/tree/main/packages/react) is a set of React hooks and a UI for seamless interaction with connectors.
+- [@tanstack/react-query](https://github.com/tanstack/query) is a library for managing and caching data in React applications.
+
 ### Example
 
 #### Setup
 
-Wrap your application with the provider `FuelConnectProvider`.
+Wrap your application with the providers `QueryClientProvider` and `FuelProvider`.
 
 ```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
 import { FuelProvider } from '@fuels/react';
+import { defaultConnectors } from '@fuels/connectors';
+
+const queryClient = new QueryClient();
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <FuelProvider>
-      <App />
-    </FuelProvider>
+    <QueryClientProvider client={queryClient}>
+      <FuelProvider fuelConfig={{ connectors: defaultConnectors({ devMode: true }) }}>
+        <App />
+      </FuelProvider>
+    </QueryClientProvider>
   </React.StrictMode>
 );
 ```
 
-Alternatively, you can use just the `FuelProvider` if you prefer not to use the provided UI.
+Alternatively, you can pass `ui={false}` to the `FuelProvider` to disable the UI in order to implement your own UI.
 
 #### Usage
 

packages/docs/docs/dev/hooks-reference.mdx

@@ -7,7 +7,7 @@ category: For Developers
 
 ## `useAccount`
 
-Retrieves the current fuel account and returns the account address `<string | undefined>`.
+Retrieves the current fuel account and returns the account address `<string | null>`.
 
 ```tsx
 const { account } = useAccount();
@@ -19,7 +19,7 @@ console.log(account);
 
 ## `useAccounts`
 
-Retrieves the fuel accounts and returns the addresses of the accounts `<string[] | undefined>`
+Retrieves the fuel accounts and returns the addresses of the accounts `<string[]>`
 
 ```tsx
 const { accounts } = useAccounts();
@@ -31,7 +31,7 @@ console.log(accounts);
 
 ## `useBalance`
 
-Fetches the balance `<number | undefined>` of a specified address and asset ID. Additionally, it includes a listener that triggers a balance refresh when the window gains focus.
+Fetches the balance `<BN | null>` of a specified address and asset ID. Additionally, it includes a listener that triggers a balance refresh when the window gains focus.
 
 ```tsx
 const { balance } = useBalance({
@@ -47,7 +47,7 @@ console.log(balance);
 
 ## `useChain`
 
-Fetches information about the current Fuel network `<ChainInfo | undefined>`.
+Fetches information about the current Fuel network `<ChainInfo | null>`.
 
 ```tsx
 const { chain } = useChain();
@@ -61,10 +61,13 @@ console.log(chain.name);
 Facilitates the connection to the Fuel wallet. Allows selecting a connector by name. It also provides a function `<UseMutateAsyncFunction<boolean | undefined>>` to initiate the connection and relevant mutation properties for managing the connection state.
 
 ```tsx
-const { connect } = useConnect();
+const { connect, connectAsync } = useConnect();
 
 const handleConnect = async () => {
-  await connect('exampleConnectorName');
+  connect('Fuel Wallet');
+
+  // Async way
+  await connectAsync('exampleConnectorName');
 };
 
 handleConnect();
@@ -74,10 +77,10 @@ handleConnect();
 
 ## `useConnectors`
 
-Retrieves a list of available connectors `<Array<FuelWalletConnector>>` for connecting to Fuel.
+Retrieves a list of available connectors `<Array<FuelConnector>>` for connecting to Fuel.
 
 ```tsx
-const { connector } = useConnectors();
+const { connectors } = useConnectors();
 
 console.log(connectors);
 ```
@@ -92,7 +95,10 @@ Facilitates disconnection from the Fuel Wallet. It provides a function `<UseMuta
 const { disconnect } = useDisconnect();
 
 const handleDisconnect = async () => {
-  await disconnect();
+  disconnect();
+
+  // Async way
+  await disconnectAsync();  
 };
 
 handleDisconnect();
@@ -144,7 +150,7 @@ const { transaction } = useTransaction({ txId: 'fuel1r20zhd...' });
 
 ## `useTransactionReceipts`
 
-Retrieves transaction receipts `<TransactionResponse.Receipts>` associated with a specific transaction ID using the `useFuel` hook.
+Retrieves transaction receipts `<Array<TransactionResultReceipt>>` associated with a specific transaction ID using the `useFuel` hook.
 
 ```tsx
 const { transactionReceipts } = useTransactionReceipts({
@@ -156,7 +162,7 @@ const { transactionReceipts } = useTransactionReceipts({
 
 ## `useWallet`
 
-Retrieves wallet instance `<Account | undefined>` and ensures the presence of a valid address and fuel instance.
+Retrieves wallet instance `<Account | null | undefined>` and ensures the presence of a valid address and fuel instance.
 
 ```tsx
 const { wallet } = useWallet({ address: 'fuel1r20zhd...' });

packages/docs/examples/connectors/ListConnectors.tsx

@@ -3,10 +3,10 @@ import { Tag } from '@fuel-ui/react';
 /* createInstance:start */
 import {
   FuelWalletConnector,
-  FueletWalletConnector,
   FuelWalletDevelopmentConnector,
+  FueletWalletConnector,
 } from '@fuels/connectors';
-import type { FuelConnector } from 'fuels';
+import type { FuelConnector } from 'fuels'; // ignore-line
 import { Fuel } from 'fuels';
 import { useEffect, useState } from 'react'; // ignore-line
 

packages/docs/examples/connectors/ListDefaultConnectors.tsx

@@ -0,0 +1,45 @@
+import { Tag } from '@fuel-ui/react';
+/* createInstance:start */
+import { defaultConnectors } from '@fuels/connectors';
+import type { FuelConnector } from 'fuels'; // ignore-line
+import { Fuel } from 'fuels';
+import { useEffect, useState } from 'react'; // ignore-line
+
+import { ExampleBox } from '../../src/components/ExampleBox'; // ignore-line
+
+const fuel = new Fuel({
+  connectors: defaultConnectors({ devMode: true }),
+});
+/* createInstance:end */
+
+export function ListDefaultConnectors() {
+  const [connectors, setConnectors] = useState<Array<FuelConnector>>([]);
+
+  useEffect(() => {
+    async function handleConnectors() {
+      const connectors = await fuel.connectors();
+      console.log('available connectors', connectors);
+
+      fuel.on(fuel.events.connectors, (connectors) => {
+        console.log('available connectors', connectors);
+        setConnectors(connectors);
+      });
+      setConnectors(connectors);
+    }
+
+    handleConnectors();
+  }, []);
+
+  return (
+    <ExampleBox>
+      {connectors.map((connector) => {
+        const label = `Installed: ${connector.installed} - Connected: ${connector.connected}`;
+        return (
+          <Tag variant="ghost" key={connector.name} intent="base">
+            {connector.name} - {label}
+          </Tag>
+        );
+      })}
+    </ExampleBox>
+  );
+}

packages/docs/examples/connectors/index.tsx

@@ -1,3 +1,4 @@
 export * from './ListConnectors';
+export * from './ListDefaultConnectors';
 export * from './SelectConnector';
 export * from './hooks';

packages/docs/spell-check-custom-words.txt

@@ -98,4 +98,4 @@ UI
 assetId
 contractId
 boolean
-
+tanstack