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) 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 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'; 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