From ed4723dd7b17726a102847d6ef812ba9df1c55bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Wed, 12 Feb 2025 11:23:35 -0400 Subject: [PATCH 1/3] docs: add reown installation step --- packages/docs/docs/dev/getting-started.mdx | 89 ++++++++++++++++++++-- 1 file changed, 82 insertions(+), 7 deletions(-) diff --git a/packages/docs/docs/dev/getting-started.mdx b/packages/docs/docs/dev/getting-started.mdx index 4af53d5e36..960b83b9cc 100644 --- a/packages/docs/docs/dev/getting-started.mdx +++ b/packages/docs/docs/dev/getting-started.mdx @@ -4,7 +4,6 @@ category: For Developers --- # Getting Started - The Fuel Wallet SDK serves as a connection manager between your DApp and other wallets compatible with the Fuel Network. This package ensures that you can connect to the Fuel Wallet as well as any other wallet using a unified API. If you are using **React** jump to the [React section](./#using-react). @@ -14,11 +13,19 @@ 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 @fuels/connectors +npm install fuels @fuels/connectors wagmi viem ``` 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. +Besides that, we also need to install the `@reown/appkit` to allow connection to Ethereum and Solana wallets. + +```bash +npm install @reown/appkit @reown/appkit-adapter-wagmi @reown/appkit-adapter-solana @solana/wallet-adapter-wallets +``` + +This will allow developers and projects to choose and configure multiple blockchain networks within their instance of AppKit, extending beyond just Fuel (fuelVM) networks. + ## 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. @@ -56,13 +63,26 @@ We also provide a set of React hooks and a user interface (UI) for seamless inte ### Installation ```bash -npm install fuels @fuels/connectors @fuels/react @tanstack/react-query +npm install fuels @fuels/connectors @fuels/react @tanstack/react-query wagmi viem ``` - [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/fuel-connectors/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. +- [wagmi](https://github.com/wevm/wagmi) is a React library for Ethereum apps. +- [viem](https://github.com/wevm/viem) is a Typescript interface for Ethereum apps. + +Besides that, we also need to install the `@reown/appkit` to allow connection to Ethereum and Solana wallets. + +```bash +npm install @reown/appkit @reown/appkit-adapter-wagmi @reown/appkit-adapter-solana @solana/wallet-adapter-wallets +``` + +- [@reown/appkit](https://github.com/reown/appkit) is a SDK that allows you to connect to Ethereum and Solana wallets. +- [@reown/appkit-adapter-wagmi](https://github.com/reown-com/appkit/tree/main/packages/adapters/wagmi) is a adapter for the Wagmi library. +- [@reown/appkit-adapter-solana](https://github.com/reown-com/appkit/tree/main/packages/adapters/solana) is a adapter for the Solana Wallet Adapter. +- [@solana/wallet-adapter-wallets](https://github.com/anza-xyz/wallet-adapter) is a modular TypeScript wallet adapters for Solana. ### Example @@ -73,17 +93,72 @@ Wrap your application with the providers `QueryClientProvider` and `FuelProvider ```tsx import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { FuelProvider } from '@fuels/react'; +import { createAppKit } from '@reown/appkit'; +import { type AppKitNetwork, mainnet, solana } from '@reown/appkit/networks'; +import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'; +import { SolanaAdapter } from '@reown/appkit-adapter-solana'; + +import { Provider, CHAIN_IDS, type FuelConfig } from 'fuels'; +import { FuelProvider, type NetworkConfig } from '@fuels/react'; import { defaultConnectors } from '@fuels/connectors'; +// 1. Setup queryClient const queryClient = new QueryClient(); +// 2. Setup Ethereum and Solana networks +const networks: [AppKitNetwork, ...AppKitNetwork[]] = [mainnet, solana]; + +// 3. Create Wagmi Adapter +const WC_PROJECT_ID = 'YOUR_WALLET_CONNECT_PROJECT_ID'; +const wagmiAdapter = new WagmiAdapter({ + networks, + projectId: WC_PROJECT_ID, +}); + +// 4. Create Solana Adapter +const solanaAdapter = new SolanaAdapter(); + +// 5. Create AppKit +const appkit = createAppKit({ + adapters: [wagmiAdapter, solanaAdapter], + enableWalletConnect: !!WC_PROJECT_ID, + projectId: WC_PROJECT_ID, + networks, + features: { + email: false, + socials: false, + analytics: false, + }, +}); + +// 6. Setup fuelConfig +const PROVIDER_URL = 'https://node.fuel.network/graphql'; +const CHAIN_ID = CHAIN_IDS.fuel.mainnet; +const fuelConfig: FuelConfig = { + connectors: defaultConnectors({ + devMode: true, + chainId: CHAIN_ID, + fuelProvider: Provider.create(PROVIDER_URL), + appkit, + }), +}; + +// 7. Setup fuelNetworks +const fuelNetworks: NetworkConfig[] = [ + { + chainId: CHAIN_ID, + url: PROVIDER_URL, + }, +]; + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - - - + + + + + ); From 61193915f83aa083030af8dcfc78bab4f4159a85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Wed, 12 Feb 2025 11:27:33 -0400 Subject: [PATCH 2/3] docs: add custom words --- packages/docs/spell-check-custom-words.txt | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/docs/spell-check-custom-words.txt b/packages/docs/spell-check-custom-words.txt index c10f32e5f3..dcacdd0242 100644 --- a/packages/docs/spell-check-custom-words.txt +++ b/packages/docs/spell-check-custom-words.txt @@ -1,3 +1,5 @@ +AppKit +appkit SDK SDKs SDK's @@ -34,6 +36,7 @@ quickstart forc bytecode struct +fuelVM Fuelup fuelup LSP @@ -102,3 +105,9 @@ tanstack BadgeDeprecated tooltip useTransactionResult +solana +Solana +wagmi +viem +reown + From 0b257742e384f75e58d2b1c50a4faec335c71fcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9lcio=20Franco?= Date: Wed, 12 Feb 2025 11:35:26 -0400 Subject: [PATCH 3/3] fix: @reown/appkit github url --- 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 960b83b9cc..44786059e9 100644 --- a/packages/docs/docs/dev/getting-started.mdx +++ b/packages/docs/docs/dev/getting-started.mdx @@ -79,7 +79,7 @@ Besides that, we also need to install the `@reown/appkit` to allow connection to npm install @reown/appkit @reown/appkit-adapter-wagmi @reown/appkit-adapter-solana @solana/wallet-adapter-wallets ``` -- [@reown/appkit](https://github.com/reown/appkit) is a SDK that allows you to connect to Ethereum and Solana wallets. +- [@reown/appkit](https://github.com/reown-com/appkit) is a SDK that allows you to connect to Ethereum and Solana wallets. - [@reown/appkit-adapter-wagmi](https://github.com/reown-com/appkit/tree/main/packages/adapters/wagmi) is a adapter for the Wagmi library. - [@reown/appkit-adapter-solana](https://github.com/reown-com/appkit/tree/main/packages/adapters/solana) is a adapter for the Solana Wallet Adapter. - [@solana/wallet-adapter-wallets](https://github.com/anza-xyz/wallet-adapter) is a modular TypeScript wallet adapters for Solana.