chore: add custom network sections

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]
+})
+```

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`
-  ..
-})
-```

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]
+})
+```

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
 

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]
+})
+```

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`
-  ..
-})
-```

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]
+})
+```