docs: configure spell-check

.github/workflows/pr.yaml

@@ -83,4 +83,5 @@ jobs:
     uses: FuelLabs/github-actions/.github/workflows/next-docs.yml@master
     with:
       doc-folder-path: 'packages/docs/docs'
-      src-folder-path: 'packages/docs/src'
+      src-folder-path: 'packages/docs/src'
+      spellcheck-config-path: 'packages/docs/.spellcheck.yml'

package.json

@@ -137,7 +137,8 @@
       "@adobe/css-tools": ">=4.3.1",
       "postcss@<8.4.31": ">=8.4.31",
       "zod@<=3.22.2": ">=3.22.3",
-      "@adobe/css-tools@<4.3.2": ">=4.3.2"
+      "@adobe/css-tools@<4.3.2": ">=4.3.2",
+      "@babel/traverse@<7.23.2": ">=7.23.2"
     }
   }
 }

packages/docs/.spellcheck.yml

@@ -0,0 +1,21 @@
+matrix:
+  - name: SPCheck
+    aspell:
+      lang: en
+    dictionary:
+      encoding: utf-8
+      wordlists:
+        - packages/docs/spell-check-custom-words.txt
+    pipeline:
+      - pyspelling.filters.markdown:
+          markdown_extensions:
+            - pymdownx.superfences
+      - pyspelling.filters.html:
+          comments: false
+          ignores:
+            - code
+            - pre
+    sources:
+      - '**/docs/*.mdx'
+      - '**/docs/**/*.mdx'
+    default_encoding: utf-8

packages/docs/docs/contributing/guide.mdx

@@ -14,7 +14,7 @@ If you run into any difficulties getting started, you can always ask questions o
 There are many ways in which you may contribute to the Fuel Wallet project, some of which involve coding knowledge and some which do not. A few examples include:
 
 - Reporting bugs
-- Adding new features or bugfixes for which there is already an open issue
+- Adding new features or bug fixes for which there is already an open issue
 - Making feature requests
 
 Check out our [Help Wanted](https://github.com/FuelLabs/fuels-wallet/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) or [Good First Issues](https://github.com/FuelLabs/fuels-wallet/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) to find a suitable task.
@@ -42,7 +42,7 @@ This is a rough outline of what a contributor's workflow looks like:
     - `test:` - Adding missing tests or correcting existing tests
     - `build:` - Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
     - `ci:` - Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
-    - `chore:` - Other changes that don't modify src or test files
+    - `chore:` - Other changes that don't modify `src` or test files
     - `revert:` - Reverts a previous commit
   - Make sure to mention the issue, which is created at step 1, in the commit message.
 - Your PR will be reviewed and some changes may be requested.

packages/docs/docs/contributing/linking-deps.mdx

@@ -5,7 +5,7 @@ category: Contributing
 
 # Supported dependencies
 
-We support locally link with [@fuel-ui](https://github.com/FuelLabs/fuel-ui) and [@fuel-ts](https://github.com/FuelLabs/fuels-ts) repositories
+We support locally link with [`@fuel-ui`](https://github.com/FuelLabs/fuel-ui) and [@fuel-ts](https://github.com/FuelLabs/fuels-ts) repositories
 
 # Using local dependencies in wallet project
 

packages/docs/docs/contributing/running-locally.mdx

@@ -14,7 +14,7 @@ This is a guide that will show you how you can run this project locally if you w
 This project includes frontend. To begin, install dependencies:
 
 - [Node.js 18.14.1 or latest stable](https://nodejs.org/en/). We recommend using [nvm](https://github.com/nvm-sh/nvm) to install.
-- [PNPM v7.18.2 or latest stable](https://pnpm.io/installation/)
+- [pnpm v7.18.2 or latest stable](https://pnpm.io/installation/)
 - [Docker v0.8.2 or latest stable](https://docs.docker.com/get-docker/)
 - [Docker Compose v2.6.0 or latest stable](https://docs.docker.com/get-docker/)
 
@@ -70,20 +70,20 @@ This section has a brief description of each directory. More details can be foun
 
 ### Useful Scripts
 
-To make life easier we added as many useful scripts as possible to our [package.json](@repository/package.json). These are some of the most used during development:
+To make life easier we added as many useful scripts as possible to our [`package.json`](@repository/package.json). These are some of the most used during development:
 
 ```sh
 pnpm <command name>
 ```
 
-| Script          | Description                                                                     |
-| --------------- | ------------------------------------------------------------------------------- |
-| `dev`           | Run development server for the WebApp [packages/app](@repository/packages/app/) |
-| `dev:storybook` | Run storybook, which is the place we use to develop our components.             |
-| `test`          | Run all units tests that are based on Jest.                                     |
-| `test:e2e`      | Run all E2E tests that are based on Cypress.                                    |
+| Script          | Description                                                                      |
+| --------------- | -------------------------------------------------------------------------------- |
+| `dev`           | Run development server for the web app [packages/app](@repository/packages/app/) |
+| `dev:storybook` | Run storybook, which is the place we use to develop our components.              |
+| `test`          | Run all units tests that are based on Jest.                                      |
+| `test:e2e`      | Run all E2E tests that are based on Cypress.                                     |
 
-> Other scripts can be found in [package.json](@repository/package.json).
+> Other scripts can be found in [`package.json`](@repository/package.json).
 
 ### Running Tests
 

packages/docs/docs/dev/abis.mdx

@@ -15,7 +15,7 @@ To get the ABI of a contract ID use the `getAbi('contractId')` method on the `wi
 
 ## Adding ABI
 
-To add Abi, use the `wallet.addAbi` method and pass in the `AbiMap` you want to add.
+To add an ABI, use the `wallet.addAbi` method and pass in the `AbiMap` you want to add.
 
 <CodeImport file="../../examples/AddAbi.tsx" />
 

packages/docs/docs/dev/connectors.mdx

@@ -5,7 +5,7 @@ category: For Developers
 
 # Wallet Connectors
 
-A Wallet Connector is an interface to integrate with third-party wallets on the Fuel Ecosystem. It exposes all currently installed wallets in a unified manner
+A wallet connector is an interface to integrate with third-party wallets on the Fuel Ecosystem. It exposes all currently installed wallets in a unified manner
 via `window.fuel`.
 
 <Examples.Connectors />
@@ -23,7 +23,7 @@ To list all available connectors you can use the `listConnectors()` method.
 
 ### Selecting connector
 
-To select a different Wallet Connector use the `selectConnector(connectorName: string)` method.
+To select a different wallet connector use the `selectConnector(connectorName: string)` method.
 
 <CodeImport
   file="../../examples/Connectors.tsx"
@@ -32,9 +32,9 @@ To select a different Wallet Connector use the `selectConnector(connectorName: s
 
 ## Events
 
-### CurrentConnector
+### `CurrentConnector`
 
-This event is triggered when the Current Connector is updated. The callback function receives the `FuelWalletConnector` object.
+This event is triggered when the current connector is updated. The callback function receives the `FuelWalletConnector` object.
 
 <CodeImport
   file="../../examples/Connectors.tsx"
@@ -43,7 +43,7 @@ This event is triggered when the Current Connector is updated. The callback func
 
 ### Connectors
 
-This event is triggered when the Connectors list is updated. The callback function receives the list of connectors, `Array<FuelWalletConnector>`.
+This event is triggered when the connectors list is updated. The callback function receives the list of connectors, `Array<FuelWalletConnector>`.
 
 <CodeImport
   file="../../examples/Connectors.tsx"
@@ -52,12 +52,12 @@ This event is triggered when the Connectors list is updated. The callback functi
 
 ## For Wallet Developers
 
-Third-party wallets developed by the community can use the Wallet Connector to integrate with the current `fuel` instance on the window, enabling a better experience for
+Third-party wallets developed by the community can use the wallet connector to integrate with the current `fuel` instance on the window, enabling a better experience for
 developers and users.
 
 ### Creating a Wallet Connector
 
-Inside `pageScript.ts` you can call the method `createConnector` instead of creating a new object on the window. This method will add your Connector to the current,
+Inside `pageScript.ts` you can call the method `createConnector` instead of creating a new object on the window. This method will add your connector to the current,
 `window.fuel` element.
 
 ```ts
@@ -66,9 +66,9 @@ import { createConnector } from '@fuel-wallet/sdk';
 createConnector({ name: 'Wallet Name' });
 ```
 
-If you are using our Communication SDK [Content Page Script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) import `ContentProxyConnection` and pass the name of Wallet Extension.
+If you are using our Communication SDK [Content Page Script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) import `ContentProxyConnection` and pass the name of wallet extension.
 
-> Otherwise, remember to filter events by the ones that have your Wallet Connector Name as the target.
+> Otherwise, remember to filter events by the ones that have your wallet connector name as the target.
 
 ```ts
 import { ContentProxyConnection } from '@fuel-wallet/sdk';

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

@@ -30,15 +30,15 @@ To use it, you must also install the [`fuels`](https://www.npmjs.com/package/fue
 npm install fuels @fuel-wallet/sdk
 ```
 
-To install the latest pre-release of `@fuel-wallet/sdk`, use the command:
+To install the latest prerelease of `@fuel-wallet/sdk`, use the command:
 
 ```bash
 npm install fuels @fuel-wallet/sdk@master
 ```
 
 ### Usage
 
-To use the SDK and the React Hooks in your TypeScript project, add the following line to your tsconfig.json file:
+To use the SDK and the React Hooks in your TypeScript project, add the following line to your `tsconfig.json` file:
 
 ```json
 {
@@ -93,7 +93,7 @@ Fuel Wallet provides a set of React hooks that improve the developer experience.
 npm install @fuel-wallet/react
 ```
 
-To install the latest pre-release of `@fuel-wallet/react`, use the command:
+To install the latest prerelease of `@fuel-wallet/react`, use the command:
 
 ```bash
 npm install fuels @fuel-wallet/react@master

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

@@ -5,7 +5,7 @@ category: For Developers
 
 # React Hooks Reference
 
-## useAccount
+## `useAccount`
 
 Retrieves the current fuel account and returns the account address `<string | undefined>`.
 
@@ -17,7 +17,7 @@ console.log(account);
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useAccount.tsx)
 
-## useAccounts
+## `useAccounts`
 
 Retrieves the fuel accounts and returns the addresses of the accounts `<string[] | undefined>`
 
@@ -27,9 +27,9 @@ console.log(accounts);
 // [fuel1r20zhd..., fuel1qqluc9..., ...]
 ```
 
-{/* TODO add source file after pr is merged and useAccounts is in master */}
+{/* TODO add source file after pr is merged and `useAccounts` is in master */}
 
-## useBalance
+## `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.
 
@@ -45,7 +45,7 @@ console.log(balance);
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useBalance.tsx)
 
-## useChain
+## `useChain`
 
 Fetches information about the current Fuel network `<ChainInfo | undefined>`.
 
@@ -57,7 +57,7 @@ console.log(chain.name);
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useChain.tsx)
 
-## useConnect
+## `useConnect`
 
 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.
 
@@ -73,7 +73,7 @@ handleConnect();
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useConnect.tsx)
 
-## useConnectors
+## `useConnectors`
 
 Retrieves a list of available connectors `<Array<FuelWalletConnector>>` for connecting to Fuel.
 
@@ -85,7 +85,7 @@ console.log(connectors);
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useConnectors.tsx)
 
-## useDisconnect
+## `useDisconnect`
 
 Facilitates disconnection from the Fuel Wallet. It provides a function `<UseMutateAsyncFunction<boolean | undefined>>` to initiate disconnection.
 
@@ -101,9 +101,9 @@ handleDisconnect();
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useDisconnect.tsx)
 
-## useIsConnected
+## `useIsConnected`
 
-Checks whether the user is connected to the Fuel protocol. It provides a boolean indicating the connection.
+Checks whether the user is connected to the Fuel protocol. It provides a `boolean` indicating the connection.
 
 ```tsx
 const { isConnected } = useIsConnected();
@@ -113,17 +113,17 @@ console.log(isConnected);
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useIsConnected.tsx)
 
-## useNodeInfo
+## `useNodeInfo`
 
-Asynchronously retrieves information about the connected node, checks compatibility with a specified version. The function returns isCompatible `<boolean>` and node information.
+Asynchronously retrieves information about the connected node, checks compatibility with a specified version. The function returns `isCompatible` (a `<boolean>`), and node information.
 
 ```tsx
 const { isCompatible } = useNodeInfo();
 ```
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useNodeInfo.tsx)
 
-## useProvider
+## `useProvider`
 
 Returns the provider from the Fuel object instance.
 
@@ -133,7 +133,7 @@ const { provider } = useProvider();
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useProvider.tsx)
 
-## useTransaction
+## `useTransaction`
 
 Retrieves transaction information associated with a specific transaction ID by using the `provider.getTransaction` method.
 
@@ -143,7 +143,7 @@ const { transaction } = useTransaction({ txId: 'fuel1r20zhd...' });
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useTransaction.tsx)
 
-## useTransactionReceipts
+## `useTransactionReceipts`
 
 Retrieves transaction receipts `<TransactionResponse.Receipts>` associated with a specific transaction ID using the `useFuel` hook.
 
@@ -155,7 +155,7 @@ const { transactionReceipts } = useTransactionReceipts({
 
 [See the source file](https://github.com/FuelLabs/fuels-wallet/blob/master/packages/react/src/hooks/useTransactionReceipts.tsx)
 
-## useWallet
+## `useWallet`
 
 Retrieves wallet instance `<FuelWalletLocked | undefined>` and ensures the presence of a valid address and fuel instance.
 

packages/docs/docs/dev/reference.mdx

@@ -97,14 +97,14 @@ Add assets to the wallet.
 ### Get ABI
 
 `async getAbi(contractId: string): Promise<JsonAbi>`<br />
-Get ABI of contractId given.
+Get ABI of a given `contractId`.
 
 <CodeImport file="../../../sdk/src/tests/Fuel.test.ts" testCase="getAbi" />
 
 ### Has ABI
 
 `async hasAbi(contractId: string): Promise<boolean>`<br />
-Check if has ABI for contractId given.
+Check if has ABI for a given `contractId`.
 
 <CodeImport file="../../../sdk/src/tests/Fuel.test.ts" testCase="hasAbi" />
 
@@ -136,15 +136,15 @@ sign, and send the transaction.
 ### Get Wallet
 
 `getWallet(address: string | AbstractAddress): Promise<FuelWalletLocked>`<br />
-Return `FuelWalletLocked` using a FuelWalletProvider on the connection point to request signed actions.
+Return `FuelWalletLocked` using a `FuelWalletProvider` on the connection point to request signed actions.
 
 <CodeImport file="../../../sdk/src/tests/Fuel.test.ts" testCase="getWallet" />
 
 ### Get Provider
 
 `getProvider(): Promise<FuelWalletProvider>`<br />
-Return a FuelWalletProvider. This class extends the fuels-ts SDK's `Provider`,
-enabling all of the methods available for `Provider` while using the FuelSDK on signature points to request user permissions.
+Return a `FuelWalletProvider`. This class extends the `fuels-ts` SDK's `Provider`,
+enabling all of the methods available for `Provider` while using the Fuel SDK on signature points to request user permissions.
 
 Note: The provider returned is tied to the current network selected by the user in their wallet. This means that if the user changes the network within their wallet,
 the DApp will also switch to that network. Support for specific DApp networks will be available in the future.
@@ -254,7 +254,7 @@ This event is triggered when the client connects to a different network. The cal
 
 <CodeImport file="../../examples/events/Network.tsx" commentBlock="network" />
 
-### CurrentConnector
+### `CurrentConnector`
 
 This event is triggered when the Current Connector is updated. The callback function receives the `FuelWalletConnector` object.