docs: added connector documentation (#2786)

* docs: connectors

* chore: changeset

* chore: lint

* chore: added URI to spell check

* chore: removed methods from tests

* chore: added missing events

* chore: applied code suggests

Co-authored-by: Anderson Arboleya <[email protected]>

* chore: fixed link

* chore: added missing group

* chore: added missing error code

* chore: simplified connector introduction

* chore: updated suggestions :)

Co-authored-by: Chad Nehemiah <[email protected]>

* docs: migrated Fuel SDK to connector manager

* docs: around connector `devMode`

---------

Co-authored-by: Anderson Arboleya <[email protected]>
Co-authored-by: Chad Nehemiah <[email protected]>
Co-authored-by: Sérgio Torres <[email protected]>

.changeset/small-chicken-hear.md

@@ -0,0 +1,6 @@
+---
+"@fuel-ts/account": patch
+"fuels": patch
+---
+
+docs: added connector documentation

apps/docs-snippets/src/guide/wallets/connectors.test.ts

@@ -0,0 +1,221 @@
+/* eslint-disable max-classes-per-file */
+import { Fuel, LocalStorage, MemoryStorage, FuelConnector } from 'fuels';
+import type { TargetObject, Network, Asset, FuelABI } from 'fuels';
+
+// prettier-ignore
+// #region fuel-connector-extends
+class MyWalletConnector extends FuelConnector
+// #endregion fuel-connector-extends
+{}
+
+let metadata: FuelConnector['metadata'] = {
+  // #region fuel-connector-metadata-install
+  install: {
+    action: 'Install',
+    description: 'Install the My Wallet Connector',
+    link: 'https://example.com/install',
+  },
+  // #endregion fuel-connector-metadata-install
+
+  // #region fuel-connector-metadata-image
+  image: 'https://example.com/image.png',
+  // #endregion fuel-connector-metadata-image
+};
+
+metadata = {
+  install: metadata.install,
+  // #region fuel-connector-metadata-image-theme
+  image: {
+    light: 'https://example.com/light.png',
+    dark: 'https://example.com/dark.png',
+  },
+  // #endregion fuel-connector-metadata-image-theme
+};
+
+class WalletConnector extends FuelConnector {
+  // #region fuel-connector-name
+  name: string = 'My Wallet Connector';
+  // #endregion fuel-connector-name
+
+  // #region fuel-connector-metadata
+  metadata = {
+    install: metadata.install,
+    image: metadata.image,
+  };
+  // #endregion fuel-connector-metadata
+
+  private eventsConnectorEvents(): void {
+    // #region fuel-connector-events-accounts
+    const accounts: Array<string> = ['0x1234567890abcdef'];
+
+    this.emit(this.events.accounts, accounts);
+    // #endregion fuel-connector-events-accounts
+
+    // #region fuel-connector-events-connection
+    const connection: boolean = true;
+
+    this.emit(this.events.connection, connection);
+    // #endregion fuel-connector-events-connection
+
+    // #region fuel-connector-events-connectors
+    const connectors: Array<FuelConnector> = [new MyWalletConnector()];
+
+    this.emit(this.events.connectors, connectors);
+    // #endregion fuel-connector-events-connectors
+
+    // #region fuel-connector-events-currentConnector
+    const currentConnector: FuelConnector = new MyWalletConnector();
+
+    this.emit(this.events.currentConnector, currentConnector);
+    // #endregion fuel-connector-events-currentConnector
+
+    // #region fuel-connector-events-currentAccount
+    const currentAccount: string = '0x1234567890abcdef';
+
+    this.emit(this.events.currentAccount, currentAccount);
+    // #endregion fuel-connector-events-currentAccount
+
+    // #region fuel-connector-events-networks
+    // #import { Network };
+
+    const network: Network = {
+      chainId: 1,
+      url: 'https://example.com/rpc',
+    };
+
+    this.emit(this.events.networks, network);
+    // #endregion fuel-connector-events-networks
+
+    // #region fuel-connector-events-currentNetwork
+    // #import { Network };
+
+    const currentNetwork: Network = {
+      chainId: 1,
+      url: 'https://example.com/rpc',
+    };
+
+    this.emit(this.events.currentNetwork, currentNetwork);
+    // #endregion fuel-connector-events-currentNetwork
+
+    // #region fuel-connector-events-assets
+    // #import { Asset };
+
+    const assets: Array<Asset> = [
+      {
+        name: 'Ethereum',
+        symbol: 'ETH',
+        icon: 'https://cdn.fuel.network/assets/eth.svg',
+        networks: [
+          {
+            type: 'ethereum',
+            chainId: 11155111,
+            decimals: 18,
+          },
+        ],
+      },
+    ];
+
+    this.emit(this.events.assets, assets);
+    // #endregion fuel-connector-events-assets
+
+    // #region fuel-connector-events-abis
+    const abis: Array<FuelABI> = [
+      {
+        encoding: '1',
+        types: [],
+        loggedTypes: [],
+        functions: [],
+        messagesTypes: [],
+        configurables: [],
+      },
+    ];
+
+    this.emit(this.events.abis, abis);
+    // #endregion fuel-connector-events-abis
+  }
+}
+
+/**
+ * @group node
+ */
+describe('connectors', () => {
+  describe('instantiation', () => {
+    test('should be able to instantiate a Fuel SDK', () => {
+      // #region fuel-instantiation-1
+      // #import { Fuel };
+
+      const sdk = new Fuel();
+      // #endregion fuel-instantiation-1
+
+      expect(sdk).toBeDefined();
+    });
+
+    test('should be able to instantiate with connectors', () => {
+      const defaultConnectors = (_opts: { devMode: boolean }): Array<FuelConnector> => [
+        new WalletConnector(),
+      ];
+
+      // #region fuel-options-connectors
+      // #import { Fuel };
+      // #context import { defaultConnectors } from '@fuels/connectors';
+
+      const sdk = new Fuel({
+        connectors: defaultConnectors({
+          devMode: true,
+        }),
+      });
+      // #endregion fuel-options-connectors
+
+      expect(sdk).toBeDefined();
+    });
+
+    test('should be able to instantiate with memory storage', () => {
+      // #region fuel-options-storage-memory
+      // #import { Fuel, MemoryStorage };
+
+      const sdk = new Fuel({
+        storage: new MemoryStorage(),
+      });
+      // #endregion fuel-options-storage-memory
+
+      expect(sdk).toBeDefined();
+    });
+
+    test('should be able to instantiate with local storage', () => {
+      const window = {
+        localStorage: {
+          setItem: vi.fn(),
+          getItem: vi.fn(),
+          removeItem: vi.fn(),
+          clear: vi.fn(),
+        } as unknown as Storage,
+      };
+
+      // #region fuel-options-storage-local
+      // #import { Fuel, LocalStorage };
+
+      const sdk = new Fuel({
+        storage: new LocalStorage(window.localStorage),
+      });
+      // #endregion fuel-options-storage-local
+
+      expect(sdk).toBeDefined();
+    });
+
+    test('should be able to instantiate with targetObject', () => {
+      const window = {} as unknown as TargetObject;
+
+      // #region fuel-options-target-object
+      // #import { Fuel, TargetObject };
+
+      const targetObject: TargetObject = window || document;
+
+      const sdk = new Fuel({
+        targetObject,
+      });
+      // #endregion fuel-options-target-object
+
+      expect(sdk).toBeDefined();
+    });
+  });
+});

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

@@ -327,3 +327,4 @@ launchTestNode
 Vitest
 CODEOWNERS
 incentivise
+URI

apps/docs/src/guide/errors/index.md

@@ -138,6 +138,12 @@ When the supplied policy type is invalid for the given Script.
 
 Check the policy type is defined in `PolicyType`.
 
+### `INVALID_PROVIDER`
+
+When unable to connect to the `Provider` or `Network` supplied to a method on the [`Fuel`](../wallets/connectors.md) class.
+
+Check that the `Provider` or `Network` is supplied correctly.
+
 ### `INVALID_PUBLIC_KEY`
 
 When the provided public key is invalid.