fix custom connectors docs (#423)

Author: rtomas

appkit/javascript/core/custom-connectors.mdx

@@ -18,8 +18,9 @@ import { createAppKit } from '@reown/appkit'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 import { reconnect, http, createConfig } from '@wagmi/core'
 import { CreateConnectorFn } from 'wagmi'
-import { sepolia } from '@reown/appkit/networks'
-import { walletConnect, coinbaseWallet, injected } from 'wagmi/connectors'
+import { abstractTestnet } from '@reown/appkit/networks'
+// you need to add the abstract library in order to make it work
+import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";
 
 const projectId = 'YOUR_PROJECT_ID'
 
@@ -29,16 +30,9 @@ const metadata = {
 
 // create the connectors (delete the ones you don't need)
 const connectors: CreateConnectorFn[] = []
-connectors.push(walletConnect({ projectId, metadata, showQrModal: false })) // showQrModal must be false
-connectors.push(injected({ shimDisconnect: true }))
-connectors.push(
-  coinbaseWallet({
-    appName: metadata.name,
-    appLogoUrl: metadata.icons[0]
-  })
-)
+connectors.push(abstractWalletConnector())
 
-export const networks = [sepolia]
+export const networks = [abstractTestnet]
 
 export const wagmiAdapter = new WagmiAdapter({
   connectors,
@@ -51,7 +45,7 @@ export const config = wagmiAdapter.wagmiConfig
 createAppKit({
   adapters: [wagmiAdapter],
   projectId,
-  networks: [sepolia]
+  networks
 })
 ```
 

appkit/next/core/custom-connectors.mdx

@@ -18,8 +18,9 @@ import { createAppKit } from '@reown/appkit/react'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 
 import { http, WagmiProvider, CreateConnectorFn } from 'wagmi'
-import { sepolia } from '@reown/appkit/networks'
-import { walletConnect, coinbaseWallet, injected } from 'wagmi/connectors'
+import { abstractTestnet } from '@reown/appkit/networks'
+// you need to add the abstract library in order to make it work
+import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const queryClient = new QueryClient()
@@ -30,23 +31,13 @@ const metadata = {
   //...
 }
 
-// create the connectors (delete the ones you don't need)
+// create the custom connector (in this example Abastract)
 const connectors: CreateConnectorFn[] = []
-connectors.push(walletConnect({ projectId, metadata, showQrModal: false })) // showQrModal must be false
-connectors.push(injected({ shimDisconnect: true }))
-connectors.push(
-  coinbaseWallet({
-    appName: metadata.name,
-    appLogoUrl: metadata.icons[0]
-  })
-)
+connectors.push(abstractWalletConnector())
 
-export const networks = [sepolia]
+export const networks = [abstractTestnet]
 
 export const wagmiAdapter = new WagmiAdapter({
-  transports: {
-    [sepolia.id]: http()
-  },
   connectors,
   projectId,
   networks
@@ -57,7 +48,7 @@ export const config = wagmiAdapter.wagmiConfig
 createAppKit({
   adapters: [wagmiAdapter],
   projectId,
-  networks: [sepolia]
+  networks
 })
 
 export function ContextProvider({ children }) {

appkit/react/core/custom-connectors.mdx

@@ -19,8 +19,9 @@ import { createAppKit } from '@reown/appkit/react'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 
 import { http, WagmiProvider, CreateConnectorFn } from 'wagmi'
-import { sepolia } from '@reown/appkit/networks'
-import { walletConnect, coinbaseWallet, injected } from 'wagmi/connectors'
+import { abstractTestnet } from '@reown/appkit/networks'
+// you need to add the abstract library in order to make it work
+import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
@@ -32,23 +33,13 @@ const metadata = {
   //...
 }
 
-// create the connectors (delete the ones you don't need)
+// create the custom connector (in this example Abastract)
 const connectors: CreateConnectorFn[] = []
-connectors.push(walletConnect({ projectId, metadata, showQrModal: false })) // showQrModal must be false
-connectors.push(injected({ shimDisconnect: true }))
-connectors.push(
-  coinbaseWallet({
-    appName: metadata.name,
-    appLogoUrl: metadata.icons[0]
-  })
-)
+connectors.push(abstractWalletConnector())
 
-export const networks = [sepolia]
+export const networks = [abstractTestnet]
 
 export const wagmiAdapter = new WagmiAdapter({
-  transports: {
-    [sepolia.id]: http()
-  },
   connectors,
   projectId,
   networks

appkit/vue/core/custom-connectors.mdx

@@ -18,32 +18,23 @@ import { createAppKit } from '@reown/appkit/vue'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 
 import { http, WagmiProvider, CreateConnectorFn } from 'wagmi'
-import { sepolia } from '@reown/appkit/networks'
-import { walletConnect, coinbaseWallet, injected } from 'wagmi/connectors'
+import { abstractTestnet } from '@reown/appkit/networks'
+// you need to add the abstract library in order to make it work
+import { abstractWalletConnector } from "@abstract-foundation/agw-react/connectors";
 
 const projectId = 'YOUR_PROJECT_ID'
 
 const metadata = {
   //....
 }
 
-// create the connectors (delete the ones you don't need)
+// create the custom connector (in this example Abastract)
 const connectors: CreateConnectorFn[] = []
-connectors.push(walletConnect({ projectId, metadata, showQrModal: false })) // showQrModal must be false
-connectors.push(injected({ shimDisconnect: true }))
-connectors.push(
-  coinbaseWallet({
-    appName: metadata.name,
-    appLogoUrl: metadata.icons[0]
-  })
-)
+connectors.push(abstractWalletConnector())
 
-const export networks = [sepolia]
+const export networks = [abstractTestnet]
 
 export const wagmiAdapter = new WagmiAdapter({
-  transports: {
-    [sepolia.id]: http()
-  },
   connectors,
   projectId,
   networks
@@ -54,7 +45,7 @@ export const config = wagmiAdapter.wagmiConfig
 createAppKit({
   adapters: [wagmiAdapter],
   projectId,
-  networks: [sepolia]
+  networks
 })
 ```