update: use viem for siwe

packages/connectkit-next-siwe/package.json

@@ -37,14 +37,14 @@
   ],
   "dependencies": {
     "iron-session": "^6.2.1",
-    "siwe": "^2.1.4"
+    "viem": "2.12.0"
   },
   "peerDependencies": {
     "connectkit": ">=1.2.0",
     "next": ">=12.x",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x",
-    "siwe": ">=2"
+    "viem": ">=2.12.0"
   },
   "devDependencies": {
     "@types/node": "^16.11.27",

packages/connectkit-next-siwe/src/configureSIWE.tsx

@@ -3,7 +3,10 @@ import { SIWEProvider } from 'connectkit';
 import type { IncomingMessage, ServerResponse } from 'http';
 import { getIronSession, IronSession, IronSessionOptions } from 'iron-session';
 import { NextApiHandler, NextApiRequest, NextApiResponse } from 'next';
-import { generateNonce, SiweErrorType, SiweMessage } from 'siwe';
+import { generateSiweNonce, createSiweMessage } from 'viem/siwe';
+
+import { createPublicClient, http } from 'viem';
+import * as allChains from 'viem/chains';
 
 type RouteHandlerOptions = {
   afterNonce?: (
@@ -108,7 +111,7 @@ const nonceRoute = async (
     case 'GET':
       const session = await getSession(req, res, sessionConfig);
       if (!session.nonce) {
-        session.nonce = generateNonce();
+        session.nonce = generateSiweNonce();
         await session.save();
       }
       if (afterCallback) {
@@ -153,31 +156,44 @@ const verifyRoute = async (
     case 'POST':
       try {
         const session = await getSession(req, res, sessionConfig);
-        const { message, signature } = req.body;
-        const siweMessage = new SiweMessage(message);
-        const { data: fields } = await siweMessage.verify({ signature, nonce: session.nonce });
-        if (fields.nonce !== session.nonce) {
+        const { message, signature } = req.body as {
+          message: string;
+          signature: `0x${string}`;
+        };
+
+        const splitMessage = message.split('\n');
+        const address = splitMessage.find((m) => m.startsWith('0x'));
+        const chainId = Number(
+          splitMessage
+            .find((m) => m.startsWith('Chain ID: '))
+            ?.split('Chain ID: ')[1]
+        );
+
+        const chain = Object.values(allChains).find((c) => c.id === chainId);
+        if (!chain) throw new Error('Invalid chain ID');
+
+        const publicClient = createPublicClient({
+          chain,
+          transport: http(),
+        });
+        const verified = await publicClient.verifySiweMessage({
+          message,
+          signature,
+          nonce: session.nonce,
+        });
+        if (!verified) {
           return res.status(422).end('Invalid nonce.');
         }
-        session.address = fields.address;
-        session.chainId = fields.chainId;
+        session.address = address;
+        session.chainId = chainId;
+
         await session.save();
         if (afterCallback) {
           await afterCallback(req, res, session);
         }
         res.status(200).end();
       } catch (error) {
-        switch (error) {
-          case SiweErrorType.INVALID_NONCE:
-          case SiweErrorType.INVALID_SIGNATURE: {
-            res.status(422).end(String(error));
-            break;
-          }
-          default: {
-            res.status(400).end(String(error));
-            break;
-          }
-        }
+        res.status(400).end(String(error));
       }
       break;
     default:
@@ -253,15 +269,15 @@ export const configureClientSIWE = <TSessionData extends Object = {}>({
           return nonce;
         }}
         createMessage={({ nonce, address, chainId }) =>
-          new SiweMessage({
+          createSiweMessage({
             version: '1',
             domain: window.location.host,
             uri: window.location.origin,
             address,
             chainId,
             nonce,
             statement,
-          }).prepareMessage()
+          })
         }
         verifyMessage={({ message, signature }) =>
           fetch(`${apiRoutePrefix}/verify`, {

packages/connectkit/src/components/Common/ChainSelectList/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useAccount, useSwitchChain } from 'wagmi';
 import { chainConfigs } from '../../../constants/chainConfigs';
 
@@ -58,7 +59,8 @@ const ChainSelectList = ({
   variant?: 'primary' | 'secondary';
 }) => {
   const { connector, chain } = useAccount();
-  const { chains, isPending, data, switchChain, error } = useSwitchChain();
+  const { chains, isPending, switchChain, error } = useSwitchChain();
+  const [pendingChainId, setPendingChainId] = useState<number>(1);
 
   const locales = useLocales({});
   const mobile = isMobile();
@@ -68,10 +70,10 @@ const ChainSelectList = ({
 
   const handleSwitchNetwork = (chainId: number) => {
     if (switchChain) {
+      setPendingChainId(chainId);
       switchChain({ chainId });
     }
   };
-  const pendingChainId = isPending ? data?.id : undefined;
 
   const { triggerResize } = useContext();
 

packages/connectkit/src/siwe/SIWEContext.tsx

@@ -1,5 +1,6 @@
 import { createContext } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import { Address } from 'viem';
 
 export enum StatusState {
   READY = 'ready',
@@ -10,7 +11,7 @@ export enum StatusState {
 }
 
 export type SIWESession = {
-  address: string;
+  address: Address;
   chainId: number;
 };
 
@@ -19,7 +20,7 @@ export type SIWEConfig = {
   getNonce: () => Promise<string>;
   createMessage: (args: {
     nonce: string;
-    address: string;
+    address: Address;
     chainId: number;
   }) => string;
   verifyMessage: (args: {

yarn.lock

@@ -7728,14 +7728,14 @@ __metadata:
     "@types/react": ^18.0.6
     "@types/react-dom": ^18.0.2
     iron-session: ^6.2.1
-    siwe: ^2.1.4
     typescript: ^4.9.5
+    viem: 2.12.0
   peerDependencies:
     connectkit: ">=1.2.0"
     next: ">=12.x"
     react: 17.x || 18.x
     react-dom: 17.x || 18.x
-    siwe: ">=2"
+    viem: ">=2.12.0"
   languageName: unknown
   linkType: soft
 
@@ -12110,6 +12110,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isows@npm:1.0.4":
+  version: 1.0.4
+  resolution: "isows@npm:1.0.4"
+  peerDependencies:
+    ws: "*"
+  checksum: a3ee62e3d6216abb3adeeb2a551fe2e7835eac87b05a6ecc3e7739259bf5f8e83290501f49e26137390c8093f207fc3378d4a7653aab76ad7bbab4b2dba9c5b9
+  languageName: node
+  linkType: hard
+
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0":
   version: 3.2.2
   resolution: "istanbul-lib-coverage@npm:3.2.2"
@@ -19291,6 +19300,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"viem@npm:2.12.0":
+  version: 2.12.0
+  resolution: "viem@npm:2.12.0"
+  dependencies:
+    "@adraffy/ens-normalize": 1.10.0
+    "@noble/curves": 1.2.0
+    "@noble/hashes": 1.3.2
+    "@scure/bip32": 1.3.2
+    "@scure/bip39": 1.2.1
+    abitype: 1.0.0
+    isows: 1.0.4
+    ws: 8.13.0
+  peerDependencies:
+    typescript: ">=5.0.4"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 7373bf955eca9a044cfa51a3d0eece054eb91d1088f500a056c7d3f84ea10e8c79efaaca237e6d47beb9c7f21febd67085b8098838ad6f2fe13fe4c19ee626e8
+  languageName: node
+  linkType: hard
+
 "viem@npm:^1.0.0, viem@npm:^1.1.4":
   version: 1.21.4
   resolution: "viem@npm:1.21.4"