From 61977358e22f7ee4634c43b4a2d6a771bfe0cebd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 18 Mar 2024 16:03:51 -0400 Subject: [PATCH 1/5] docs: add @fuels/connectors to the docs --- packages/docs/docs/dev/connectors.mdx | 9 +++- packages/docs/docs/dev/getting-started.mdx | 53 +++++++++++++++---- packages/docs/docs/dev/hooks-reference.mdx | 28 ++++++---- .../examples/connectors/ListConnectors.tsx | 4 +- .../connectors/ListDefaultConnectors.tsx | 45 ++++++++++++++++ packages/docs/examples/connectors/index.tsx | 1 + 6 files changed, 115 insertions(+), 25 deletions(-) create mode 100644 packages/docs/examples/connectors/ListDefaultConnectors.tsx diff --git a/packages/docs/docs/dev/connectors.mdx b/packages/docs/docs/dev/connectors.mdx index b50dbd3eeb..7c5e13e794 100644 --- a/packages/docs/docs/dev/connectors.mdx +++ b/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 + + +### Using a custom list - - - + + + + + ); ``` -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 diff --git a/packages/docs/docs/dev/hooks-reference.mdx b/packages/docs/docs/dev/hooks-reference.mdx index 537700a60d..8299d426de 100644 --- a/packages/docs/docs/dev/hooks-reference.mdx +++ b/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 ``. +Retrieves the current fuel account and returns the account address ``. ```tsx const { account } = useAccount(); @@ -19,7 +19,7 @@ console.log(account); ## `useAccounts` -Retrieves the fuel accounts and returns the addresses of the accounts `` +Retrieves the fuel accounts and returns the addresses of the accounts `` ```tsx const { accounts } = useAccounts(); @@ -31,7 +31,7 @@ console.log(accounts); ## `useBalance` -Fetches the balance `` 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 `` 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 ``. +Fetches information about the current Fuel network ``. ```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 `>` 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 `>` for connecting to Fuel. +Retrieves a list of available connectors `>` 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 ` { - await disconnect(); + disconnect(); + + // Async way + await disconnectAsync(); }; handleDisconnect(); @@ -144,7 +150,7 @@ const { transaction } = useTransaction({ txId: 'fuel1r20zhd...' }); ## `useTransactionReceipts` -Retrieves transaction receipts `` associated with a specific transaction ID using the `useFuel` hook. +Retrieves transaction receipts `>` 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 `` and ensures the presence of a valid address and fuel instance. +Retrieves wallet instance `` and ensures the presence of a valid address and fuel instance. ```tsx const { wallet } = useWallet({ address: 'fuel1r20zhd...' }); diff --git a/packages/docs/examples/connectors/ListConnectors.tsx b/packages/docs/examples/connectors/ListConnectors.tsx index bea044f398..07469a2b75 100644 --- a/packages/docs/examples/connectors/ListConnectors.tsx +++ b/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 diff --git a/packages/docs/examples/connectors/ListDefaultConnectors.tsx b/packages/docs/examples/connectors/ListDefaultConnectors.tsx new file mode 100644 index 0000000000..98b0e58d23 --- /dev/null +++ b/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>([]); + + 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 ( + + {connectors.map((connector) => { + const label = `Installed: ${connector.installed} - Connected: ${connector.connected}`; + return ( + + {connector.name} - {label} + + ); + })} + + ); +} diff --git a/packages/docs/examples/connectors/index.tsx b/packages/docs/examples/connectors/index.tsx index d2bb42048d..04720834b6 100644 --- a/packages/docs/examples/connectors/index.tsx +++ b/packages/docs/examples/connectors/index.tsx @@ -1,3 +1,4 @@ export * from './ListConnectors'; +export * from './ListDefaultConnectors'; export * from './SelectConnector'; export * from './hooks'; From 84f242fe423709b3b4520c2f6e527b0c6f904717 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 18 Mar 2024 16:10:11 -0400 Subject: [PATCH 2/5] fix: add tanstack ot the spellcheck --- packages/docs/spell-check-custom-words.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/spell-check-custom-words.txt b/packages/docs/spell-check-custom-words.txt index b086ce6cfa..a2ffac2963 100644 --- a/packages/docs/spell-check-custom-words.txt +++ b/packages/docs/spell-check-custom-words.txt @@ -98,4 +98,4 @@ UI assetId contractId boolean - +tanstack From d21cbe3fb1bd6e590525694780ff00e3f02df8f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Mon, 18 Mar 2024 16:20:55 -0400 Subject: [PATCH 3/5] fix: add the right URL for the @fuels/react --- packages/docs/docs/dev/getting-started.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/docs/dev/getting-started.mdx b/packages/docs/docs/dev/getting-started.mdx index 014bb66af0..899a11162b 100644 --- a/packages/docs/docs/dev/getting-started.mdx +++ b/packages/docs/docs/dev/getting-started.mdx @@ -61,7 +61,7 @@ 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-react) is a set of React hooks and a UI for seamless interaction with connectors. +- [@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 From d276781c5f16289530f5a4f2919f1a0b4c188c95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Tue, 19 Mar 2024 09:35:18 -0400 Subject: [PATCH 4/5] docs: revert to patch --- .changeset/new-owls-tickle.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/new-owls-tickle.md b/.changeset/new-owls-tickle.md index 3e0e46ed45..a7739d3cd7 100644 --- a/.changeset/new-owls-tickle.md +++ b/.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) From e97558cb2dd49fcc6d0726768d04e8b959df327f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Tue, 19 Mar 2024 09:36:05 -0400 Subject: [PATCH 5/5] docs: revert to patch --- .changeset/tame-flowers-grow.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/tame-flowers-grow.md b/.changeset/tame-flowers-grow.md index 4f9dd2c3dd..1b81cd1a1f 100644 --- a/.changeset/tame-flowers-grow.md +++ b/.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