Feat: Add Reown wagmi, solana, ethers and ethers5 examples (#729)

* WIP - add wagmi, ethers and ethers5 examples

* upgrade react single examples and add the solana one

* update to 1.0.6 and fix examples

* update to 1.0.7

* improve Readmes

* upgrade react example to reown

* fix comments

* delete unused fn

* upgrade appkit siwe example

* fix some text

* update Readme

* update to v1.1.0 with networks integration

* version update and delete disconnect hook

* update networks for v1.1.0

* update some projects to 1.1.2

* clean an approve example

dapps/appkit-siwe/next/README.md

@@ -4,7 +4,7 @@ A Minimal demo using React so developers can work on their integration with Wall
 
 1. Install dependencies in the frontend: `pnpm install`
 
-2. Create and complete the .env.local file with your Project Id from http://cloud.walletconnect.com
+2. Create and complete the .env.local file with your Project Id from http://cloud.reown.com
 
 ```
 NEXT_PUBLIC_PROJECT_ID=...
@@ -21,6 +21,6 @@ NEXTAUTH_SECRET=<any-random-text>
 
 ## Reference
 
-- https://docs.walletconnect.com/appkit/next/core/siwe
+- https://docs.reown.com/appkit/react/core/siwe
 - https://docs.login.xyz/general-information/siwe-overview/eip-4361
 - https://next-auth.js.org/

dapps/appkit-siwe/next/app/api/auth/[...nextauth]/route.ts

@@ -4,8 +4,8 @@ import {
   type SIWESession,
   verifySignature,
   getChainIdFromMessage,
-  getAddressFromMessage,
-} from '@web3modal/siwe';
+  getAddressFromMessage
+} from '@reown/appkit-siwe'
 
 declare module 'next-auth' {
   interface Session extends SIWESession {

dapps/appkit-siwe/next/app/config/index.tsx

@@ -1,45 +1,44 @@
 import {
+  type SIWESession,
+  type SIWEVerifyMessageArgs,
+  type SIWECreateMessageArgs,
   createSIWEConfig,
-  SIWECreateMessageArgs,
   formatMessage,
-  SIWESession,
-  SIWEVerifyMessageArgs,
-} from '@web3modal/siwe';
-import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
+} from '@reown/appkit-siwe'
+import { WagmiAdapter, authConnector } from '@reown/appkit-adapter-wagmi'
 import { getCsrfToken, getSession, signIn, signOut } from 'next-auth/react';
 
 import { cookieStorage, createStorage } from 'wagmi';
-import { arbitrum, mainnet, optimism, sepolia } from 'wagmi/chains';
+import { arbitrum, mainnet, sepolia, optimism, AppKitNetwork } from '@reown/appkit/networks'
+import { CaipNetwork } from '@reown/appkit';
 
-// Get projectId from https://cloud.walletconnect.com
+// Get projectId from https://cloud.reown.com
 export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
 
 if (!projectId) throw new Error('Project ID is not defined');
 
 export const metadata = {
-  name: 'Appkit',
+  name: 'Appkit SIWE Example',
   description: 'Appkit Siwe Example - Next.js',
-  url: 'https://web3modal.com', // origin must match your domain & subdomain
-  icons: ['https://avatars.githubusercontent.com/u/37784886'],
+  url: 'https://reown.com', // origin must match your domain & subdomain
+  icons: ["https://avatars.githubusercontent.com/u/179229932"],
 };
 
 // Create wagmiConfig
-const chains = [mainnet, optimism, arbitrum, sepolia] as const;
-export const config = defaultWagmiConfig({
-  chains,
+export const chains: [AppKitNetwork, ...AppKitNetwork[]] = [mainnet, optimism, arbitrum, sepolia];
+
+// 4. Create Wagmi Adapter
+export const wagmiAdapter = new WagmiAdapter({
+  networks: chains,
   projectId,
-  metadata,
-  ssr: true,
-  storage: createStorage({
-    storage: cookieStorage,
-  }),
+  ssr: true
 });
 
 export const siweConfig = createSIWEConfig({
   getMessageParams: async () => ({
     domain: typeof window !== 'undefined' ? window.location.host : '',
     uri: typeof window !== 'undefined' ? window.location.origin : '',
-    chains: [mainnet.id, sepolia.id, optimism.id, arbitrum.id],
+    chains: chains.map((chain: AppKitNetwork) => parseInt(chain.id.toString())),
     statement: 'Please sign with your account',
   }),
   createMessage: ({ address, ...args }: SIWECreateMessageArgs) =>

dapps/appkit-siwe/next/app/context/index.tsx

@@ -1,12 +1,9 @@
 'use client';
 
 import React, { ReactNode } from 'react';
-import { config, projectId, siweConfig, metadata } from '../config';
-
-import { createWeb3Modal } from '@web3modal/wagmi/react';
-
+import { createAppKit } from '@reown/appkit/react'
+import { wagmiAdapter, projectId, siweConfig, metadata, chains } from '../config';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
 import { State, WagmiProvider } from 'wagmi';
 
 // Setup queryClient
@@ -15,24 +12,28 @@ const queryClient = new QueryClient();
 if (!projectId) throw new Error('Project ID is not defined');
 
 // Create modal
-createWeb3Modal({
-  metadata: metadata,
-  wagmiConfig: config,
-  projectId,
-  enableAnalytics: true, // Optional - defaults to your Cloud configuration
-  enableOnramp: true, // Optional - false as default
-  siweConfig,
+createAppKit({ 
+  adapters: [wagmiAdapter], 
+  networks: chains, 
+  projectId, 
+  siweConfig, 
+  metadata,
+  features: {
+    email: true, // default to true
+    socials: ['google', 'x', 'github', 'discord', 'apple', 'facebook', 'farcaster'],
+    emailShowWallets: true, // default to true
+  } 
 });
 
-export default function Web3ModalProvider({
+export default function AppKitProvider({
   children,
   initialState,
 }: {
   children: ReactNode;
   initialState?: State;
 }) {
   return (
-    <WagmiProvider config={config} initialState={initialState}>
+    <WagmiProvider config={wagmiAdapter.wagmiConfig} initialState={initialState}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </WagmiProvider>
   );

dapps/appkit-siwe/next/app/layout.tsx

@@ -4,26 +4,21 @@ import { headers } from 'next/headers';
 
 import { cookieToInitialState } from 'wagmi';
 
-import { config } from './config';
-import Web3ModalProvider from './context';
-
-export const metadata: Metadata = {
-  title: 'Appkit SIWE Example - Next.js',
-  description: 'Appkit example using SIWE with Next.js',
-};
+import { wagmiAdapter } from './config';
+import AppKitProvider from './context';
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const initialState = cookieToInitialState(config, headers().get('cookie'));
+  const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig, headers().get('cookie'));
   return (
     <html lang='en'>
       <body>
-        <Web3ModalProvider initialState={initialState}>
+        <AppKitProvider initialState={initialState}>
           {children}
-        </Web3ModalProvider>
+        </AppKitProvider>
       </body>
     </html>
   );

dapps/appkit-siwe/next/package.json

@@ -10,8 +10,9 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.53.1",
-    "@web3modal/siwe": "^5.1.4",
-    "@web3modal/wagmi": "^5.1.4",
+		"@reown/appkit-siwe": "^1.1.2",
+    "@reown/appkit": "^1.1.2",
+    "@reown/appkit-adapter-wagmi": "^1.1.2",
     "next": "14.2.7",
     "next-auth": "^4.24.7",
     "react": "^18",