From d23e50c5a1c97a8903a226982179add2ad44ed8c Mon Sep 17 00:00:00 2001 From: enesozturk Date: Tue, 8 Oct 2024 12:04:17 +0300 Subject: [PATCH] chore: add custom network sections --- .../javascript/core/custom-networks.mdx | 66 +++++++++++++++++++ .../javascript/wagmi/about/implementation.mdx | 32 +++------ docs/appkit/next/core/custom-networks.mdx | 66 +++++++++++++++++++ .../next/wagmi/about/implementation.mdx | 32 +++------ docs/appkit/react/core/custom-networks.mdx | 66 +++++++++++++++++++ .../react/wagmi/about/implementation.mdx | 32 +++------ docs/appkit/vue/core/custom-networks.mdx | 66 +++++++++++++++++++ .../appkit/vue/wagmi/about/implementation.mdx | 32 +++------ sidebars.js | 4 ++ 9 files changed, 301 insertions(+), 95 deletions(-) create mode 100644 docs/appkit/javascript/core/custom-networks.mdx create mode 100644 docs/appkit/next/core/custom-networks.mdx create mode 100644 docs/appkit/react/core/custom-networks.mdx create mode 100644 docs/appkit/vue/core/custom-networks.mdx diff --git a/docs/appkit/javascript/core/custom-networks.mdx b/docs/appkit/javascript/core/custom-networks.mdx new file mode 100644 index 00000000..b45a6e6e --- /dev/null +++ b/docs/appkit/javascript/core/custom-networks.mdx @@ -0,0 +1,66 @@ +--- +title: Custom networks +--- + +# Custom networks + +If you cannot find the network you are looking for within the `@reown/appkit/networks` path, you can always add your own network. + +We have two ways to add your network to the AppKit: + +### 1. Adding Your Chain to Viem’s Directory (Recommended) + +We are using Viem for providing EVM chains to the users under the hood. If your chain is for EVM. We recommend you to open a PR to Viem to add your network to Viem's directory. Once your chain is accepted to Viem, it'll be available on AppKit. No new steps required. + +Here is the documentation of how to add new chian to Viem: https://github.com/wevm/viem/blob/main/.github/CONTRIBUTING.md#chains + +### 2. Creating Custom Chain Object + +You can also create a custom network object without waiting for approval from Viem’s repository. + +**Required Information** + +You should have the following values to create a custom network: + +- **id**: Chain ID of the network. +- **name**: Name of the network. +- **caipNetworkId**: CAIP-2 compliant network ID. +- **chainNamespace**: Chain namespace. +- **nativeCurrency**: Native currency of the network. +- **rpcUrls**: Object containing the RPC URLs for the network. +- **blockExplorers**: Object containing the block explorers for the network. + +```js +import { defineChain } from '@reown/appkit/networks'; + +// Define the custom network +const customNetwork = defineChain({ + id: 123456789, + caipNetworkId: 'eip155:123456789', + chainNamespace: 'eip155', + name: 'Custom Network', + nativeCurrency: { + decimals: 18, + name: 'Ether', + symbol: 'ETH', + }, + rpcUrls: { + default: { + http: ['RPC_URL'], + webSocket: ['WS_RPC_URL'], + }, + }, + blockExplorers: { + default: { name: 'Explorer', url: 'BLOCK_EXPLORER_URL' }, + }, + contracts: { + // Add contracts here + } +}) + +// Then pass it to the AppKit +createAppKit({ + adapters: [...], + networks: [customNetwork] +}) +``` diff --git a/docs/appkit/javascript/wagmi/about/implementation.mdx b/docs/appkit/javascript/wagmi/about/implementation.mdx index 99eebcf1..9bc2cf98 100644 --- a/docs/appkit/javascript/wagmi/about/implementation.mdx +++ b/docs/appkit/javascript/wagmi/about/implementation.mdx @@ -49,33 +49,17 @@ openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks // 5. Alternatively use w3m component buttons within the index.html file ``` -## Would you like to use Viem chains? +## Importing networks -You can also use Viem chains with the `WagmiAdapter`. Viem is provides a variety of chain definitions, while on the other hand, while AppKit provides networks supported by the WalletConnect protocol. +We are using [Viem](https://viem.sh/) networks under the hood which provides wide variety of networks for EVM chains. You can find every network that Viem is supporting within the `@reown/appkit/networks` path. -```ts +```js import { createAppKit } from '@reown/appkit' -import { mainnet, arbitrum } from '@reown/appkit/networks' -import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' -import { linea, morphSepolia } from 'viem/chains' - -export const networks = [mainnet, arbitrum, linea, morphSepolia] - -const wagmiAdapter = new WagmiAdapter({ - projectId, - networks - ... -}) +/* highlight-add-start */ +import { mainnet, arbitrum, base, base, polygon } from '@reown/appkit/networks' +/* highlight-add-end */ ``` -:::caution -When using Viem chains along with AppKit's network objects, ensure that you pass the `caipNetworks` value from the `WagmiAdapter` to the `networks` parameter in `createAppKit`, as shown below. +:::info +Looking for adding a custom network? Check out the [custom networks](../../core/custom-networks.mdx) section. ::: - -```ts -createAppKit({ - adapters: [wagmiAdapter], - networks: wagmiAdapter.caipNetworks, // <- essential to use `wagmiAdapter.caipNetworks` - .. -}) -``` diff --git a/docs/appkit/next/core/custom-networks.mdx b/docs/appkit/next/core/custom-networks.mdx new file mode 100644 index 00000000..b45a6e6e --- /dev/null +++ b/docs/appkit/next/core/custom-networks.mdx @@ -0,0 +1,66 @@ +--- +title: Custom networks +--- + +# Custom networks + +If you cannot find the network you are looking for within the `@reown/appkit/networks` path, you can always add your own network. + +We have two ways to add your network to the AppKit: + +### 1. Adding Your Chain to Viem’s Directory (Recommended) + +We are using Viem for providing EVM chains to the users under the hood. If your chain is for EVM. We recommend you to open a PR to Viem to add your network to Viem's directory. Once your chain is accepted to Viem, it'll be available on AppKit. No new steps required. + +Here is the documentation of how to add new chian to Viem: https://github.com/wevm/viem/blob/main/.github/CONTRIBUTING.md#chains + +### 2. Creating Custom Chain Object + +You can also create a custom network object without waiting for approval from Viem’s repository. + +**Required Information** + +You should have the following values to create a custom network: + +- **id**: Chain ID of the network. +- **name**: Name of the network. +- **caipNetworkId**: CAIP-2 compliant network ID. +- **chainNamespace**: Chain namespace. +- **nativeCurrency**: Native currency of the network. +- **rpcUrls**: Object containing the RPC URLs for the network. +- **blockExplorers**: Object containing the block explorers for the network. + +```js +import { defineChain } from '@reown/appkit/networks'; + +// Define the custom network +const customNetwork = defineChain({ + id: 123456789, + caipNetworkId: 'eip155:123456789', + chainNamespace: 'eip155', + name: 'Custom Network', + nativeCurrency: { + decimals: 18, + name: 'Ether', + symbol: 'ETH', + }, + rpcUrls: { + default: { + http: ['RPC_URL'], + webSocket: ['WS_RPC_URL'], + }, + }, + blockExplorers: { + default: { name: 'Explorer', url: 'BLOCK_EXPLORER_URL' }, + }, + contracts: { + // Add contracts here + } +}) + +// Then pass it to the AppKit +createAppKit({ + adapters: [...], + networks: [customNetwork] +}) +``` diff --git a/docs/appkit/next/wagmi/about/implementation.mdx b/docs/appkit/next/wagmi/about/implementation.mdx index d8fcb89a..f7a1f296 100644 --- a/docs/appkit/next/wagmi/about/implementation.mdx +++ b/docs/appkit/next/wagmi/about/implementation.mdx @@ -35,36 +35,22 @@ export const wagmiAdapter = new WagmiAdapter({ export const config = wagmiAdapter.wagmiConfig ``` -## Would you like to use Viem chains? +## Importing networks -You can also use Viem chains with the `WagmiAdapter`. Viem is provides a variety of chain definitions, while on the other hand, while AppKit provides networks supported by the WalletConnect protocol. +We are using [Viem](https://viem.sh/) networks under the hood which provides wide variety of networks for EVM chains. You can find every network that Viem is supporting within the `@reown/appkit/networks` path. -```ts +```js import { createAppKit } from '@reown/appkit' -import { mainnet, arbitrum } from '@reown/appkit/networks' -import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' -import { linea, morphSepolia } from 'viem/chains' - -export const networks = [mainnet, arbitrum, linea, morphSepolia] - -const wagmiAdapter = new WagmiAdapter({ - projectId, - networks - ... -}) +/* highlight-add-start */ +import { mainnet, arbitrum, base, base, polygon } from '@reown/appkit/networks' +/* highlight-add-end */ ``` -:::caution -When using Viem chains along with AppKit's network objects, ensure that you pass the `caipNetworks` value from the `WagmiAdapter` to the `networks` parameter in `createAppKit`, as shown below. +:::info +Looking for adding a custom network? Check out the [custom networks](../../core/custom-networks.mdx) section. ::: -```ts -createAppKit({ - adapters: [wagmiAdapter], - networks: wagmiAdapter.caipNetworks, // <- essential to use `wagmiAdapter.caipNetworks` - .. -}) -``` +## SSR and Hydration :::info diff --git a/docs/appkit/react/core/custom-networks.mdx b/docs/appkit/react/core/custom-networks.mdx new file mode 100644 index 00000000..b45a6e6e --- /dev/null +++ b/docs/appkit/react/core/custom-networks.mdx @@ -0,0 +1,66 @@ +--- +title: Custom networks +--- + +# Custom networks + +If you cannot find the network you are looking for within the `@reown/appkit/networks` path, you can always add your own network. + +We have two ways to add your network to the AppKit: + +### 1. Adding Your Chain to Viem’s Directory (Recommended) + +We are using Viem for providing EVM chains to the users under the hood. If your chain is for EVM. We recommend you to open a PR to Viem to add your network to Viem's directory. Once your chain is accepted to Viem, it'll be available on AppKit. No new steps required. + +Here is the documentation of how to add new chian to Viem: https://github.com/wevm/viem/blob/main/.github/CONTRIBUTING.md#chains + +### 2. Creating Custom Chain Object + +You can also create a custom network object without waiting for approval from Viem’s repository. + +**Required Information** + +You should have the following values to create a custom network: + +- **id**: Chain ID of the network. +- **name**: Name of the network. +- **caipNetworkId**: CAIP-2 compliant network ID. +- **chainNamespace**: Chain namespace. +- **nativeCurrency**: Native currency of the network. +- **rpcUrls**: Object containing the RPC URLs for the network. +- **blockExplorers**: Object containing the block explorers for the network. + +```js +import { defineChain } from '@reown/appkit/networks'; + +// Define the custom network +const customNetwork = defineChain({ + id: 123456789, + caipNetworkId: 'eip155:123456789', + chainNamespace: 'eip155', + name: 'Custom Network', + nativeCurrency: { + decimals: 18, + name: 'Ether', + symbol: 'ETH', + }, + rpcUrls: { + default: { + http: ['RPC_URL'], + webSocket: ['WS_RPC_URL'], + }, + }, + blockExplorers: { + default: { name: 'Explorer', url: 'BLOCK_EXPLORER_URL' }, + }, + contracts: { + // Add contracts here + } +}) + +// Then pass it to the AppKit +createAppKit({ + adapters: [...], + networks: [customNetwork] +}) +``` diff --git a/docs/appkit/react/wagmi/about/implementation.mdx b/docs/appkit/react/wagmi/about/implementation.mdx index 8fb3ffe2..3ff1a5c0 100644 --- a/docs/appkit/react/wagmi/about/implementation.mdx +++ b/docs/appkit/react/wagmi/about/implementation.mdx @@ -56,33 +56,17 @@ export function AppKitProvider({ children }) { } ``` -## Would you like to use Viem chains? +## Importing networks -You can also use Viem chains with the `WagmiAdapter`. Viem is provides a variety of chain definitions, while on the other hand, while AppKit provides networks supported by the WalletConnect protocol. +We are using [Viem](https://viem.sh/) networks under the hood which provides wide variety of networks for EVM chains. You can find every network that Viem is supporting within the `@reown/appkit/networks` path. -```ts +```js import { createAppKit } from '@reown/appkit' -import { mainnet, arbitrum } from '@reown/appkit/networks' -import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' -import { linea, morphSepolia } from 'viem/chains' - -export const networks = [mainnet, arbitrum, linea, morphSepolia] - -const wagmiAdapter = new WagmiAdapter({ - projectId, - networks - ... -}) +/* highlight-add-start */ +import { mainnet, arbitrum, base, base, polygon } from '@reown/appkit/networks' +/* highlight-add-end */ ``` -:::caution -When using Viem chains along with AppKit's network objects, ensure that you pass the `caipNetworks` value from the `WagmiAdapter` to the `networks` parameter in `createAppKit`, as shown below. +:::info +Looking for adding a custom network? Check out the [custom networks](../../core/custom-networks.mdx) section. ::: - -```ts -createAppKit({ - adapters: [wagmiAdapter], - networks: wagmiAdapter.caipNetworks, // <- essential to use `wagmiAdapter.caipNetworks` - .. -}) -``` diff --git a/docs/appkit/vue/core/custom-networks.mdx b/docs/appkit/vue/core/custom-networks.mdx new file mode 100644 index 00000000..b45a6e6e --- /dev/null +++ b/docs/appkit/vue/core/custom-networks.mdx @@ -0,0 +1,66 @@ +--- +title: Custom networks +--- + +# Custom networks + +If you cannot find the network you are looking for within the `@reown/appkit/networks` path, you can always add your own network. + +We have two ways to add your network to the AppKit: + +### 1. Adding Your Chain to Viem’s Directory (Recommended) + +We are using Viem for providing EVM chains to the users under the hood. If your chain is for EVM. We recommend you to open a PR to Viem to add your network to Viem's directory. Once your chain is accepted to Viem, it'll be available on AppKit. No new steps required. + +Here is the documentation of how to add new chian to Viem: https://github.com/wevm/viem/blob/main/.github/CONTRIBUTING.md#chains + +### 2. Creating Custom Chain Object + +You can also create a custom network object without waiting for approval from Viem’s repository. + +**Required Information** + +You should have the following values to create a custom network: + +- **id**: Chain ID of the network. +- **name**: Name of the network. +- **caipNetworkId**: CAIP-2 compliant network ID. +- **chainNamespace**: Chain namespace. +- **nativeCurrency**: Native currency of the network. +- **rpcUrls**: Object containing the RPC URLs for the network. +- **blockExplorers**: Object containing the block explorers for the network. + +```js +import { defineChain } from '@reown/appkit/networks'; + +// Define the custom network +const customNetwork = defineChain({ + id: 123456789, + caipNetworkId: 'eip155:123456789', + chainNamespace: 'eip155', + name: 'Custom Network', + nativeCurrency: { + decimals: 18, + name: 'Ether', + symbol: 'ETH', + }, + rpcUrls: { + default: { + http: ['RPC_URL'], + webSocket: ['WS_RPC_URL'], + }, + }, + blockExplorers: { + default: { name: 'Explorer', url: 'BLOCK_EXPLORER_URL' }, + }, + contracts: { + // Add contracts here + } +}) + +// Then pass it to the AppKit +createAppKit({ + adapters: [...], + networks: [customNetwork] +}) +``` diff --git a/docs/appkit/vue/wagmi/about/implementation.mdx b/docs/appkit/vue/wagmi/about/implementation.mdx index 3e0bbf7b..e63f12c8 100644 --- a/docs/appkit/vue/wagmi/about/implementation.mdx +++ b/docs/appkit/vue/wagmi/about/implementation.mdx @@ -54,33 +54,17 @@ In your `App.vue` file set up the following configuration ``` -## Like to use Viem chains? +## Importing networks -You can also use Viem chains with the `WagmiAdapter`. Viem is providing bunch of chains definitions, while on the other hand, AppKit is providing the network which are supported by the WC protocol. +We are using [Viem](https://viem.sh/) networks under the hood which provides wide variety of networks for EVM chains. You can find every network that Viem is supporting within the `@reown/appkit/networks` path. -```ts +```js import { createAppKit } from '@reown/appkit' -import { mainnet, arbitrum } from '@reown/appkit/networks' -import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' -import { polygon, fantom } from 'viem/chains' - -export const networks = [mainnet, arbitrum, polygon, fantom] - -const wagmiAdapter = new WagmiAdapter({ - projectId, - networks - ... -}) +/* highlight-add-start */ +import { mainnet, arbitrum, base, base, polygon } from '@reown/appkit/networks' +/* highlight-add-end */ ``` -:::caution -When you use Viem chains along with AppKit's network objects, you need to make sure that you're passing the WagmiAdapter's `caipNetworks` value to the `createAppKit`'s `networks` parameter like the following. +:::info +Looking for adding a custom network? Check out the [custom networks](../../core/custom-networks.mdx) section. ::: - -```ts -createAppKit({ - adapters: [wagmiAdapter], - networks: wagmiAdapter.caipNetworks, // <- essential to use `wagmiAdapter.caipNetworks` - .. -}) -``` diff --git a/sidebars.js b/sidebars.js index eb21d29a..4fd3ee85 100644 --- a/sidebars.js +++ b/sidebars.js @@ -328,6 +328,7 @@ module.exports = { 'appkit/react/core/options', 'appkit/react/core/components', 'appkit/react/core/custom-connectors', + 'appkit/react/core/custom-networks', 'appkit/react/core/siwe', 'appkit/react/core/multichain', 'appkit/react/core/theming', @@ -420,6 +421,7 @@ module.exports = { 'appkit/next/core/options', 'appkit/next/core/components', 'appkit/next/core/custom-connectors', + 'appkit/next/core/custom-networks', 'appkit/next/core/siwe', 'appkit/next/core/multichain', 'appkit/next/core/theming', @@ -512,6 +514,7 @@ module.exports = { 'appkit/vue/core/options', 'appkit/vue/core/components', 'appkit/vue/core/custom-connectors', + 'appkit/vue/core/custom-networks', 'appkit/vue/core/siwe', 'appkit/vue/core/multichain', 'appkit/vue/core/theming', @@ -604,6 +607,7 @@ module.exports = { 'appkit/javascript/core/options', 'appkit/javascript/core/components', 'appkit/javascript/core/custom-connectors', + 'appkit/javascript/core/custom-networks', 'appkit/javascript/core/siwe', 'appkit/javascript/core/multichain', 'appkit/javascript/core/theming',