From 571de08a456e085b317d242963b2beee44379d0a Mon Sep 17 00:00:00 2001 From: MK Date: Tue, 28 May 2024 21:19:23 +0100 Subject: [PATCH] chore: upgrade wagmi / viem to latest version and add siwe verify endpoint chore: tweak chore: prettify revert: removing getSiweMessageOptions chore: tweak --- examples/with-create-react-app/package.json | 8 +- examples/with-next-app-i18n/package.json | 2 +- examples/with-next-app/package.json | 2 +- examples/with-next-custom-button/package.json | 2 +- examples/with-next-mint-nft/package.json | 2 +- .../with-next-rainbow-button/package.json | 2 +- .../with-next-siwe-iron-session/package.json | 2 +- .../pages/_app.tsx | 13 +- .../pages/api/verify.ts | 24 +- .../types/iron-session.d.ts | 4 +- .../with-next-siwe-next-auth/package.json | 2 +- .../with-next-siwe-next-auth/pages/_app.tsx | 12 +- .../pages/api/auth/[...nextauth].ts | 42 +-- examples/with-next-wallet-button/package.json | 2 +- examples/with-next/package.json | 2 +- examples/with-remix/package.json | 2 +- examples/with-vite/package.json | 2 +- package.json | 2 +- .../generated-test-app/package.json | 2 +- .../templates/next-app/package.json | 2 +- packages/example/package.json | 2 +- packages/example/pages/_app.tsx | 19 +- .../example/pages/api/auth/[...nextauth].ts | 42 +-- .../src/RainbowKitSiweNextAuthProvider.tsx | 30 +- .../AuthenticationContext.tsx | 5 +- .../src/components/SignIn/SignIn.tsx | 6 +- pnpm-lock.yaml | 285 +++--------------- site/package.json | 2 +- 28 files changed, 190 insertions(+), 332 deletions(-) diff --git a/examples/with-create-react-app/package.json b/examples/with-create-react-app/package.json index 72a845826f..7a52c2d206 100644 --- a/examples/with-create-react-app/package.json +++ b/examples/with-create-react-app/package.json @@ -14,10 +14,12 @@ "react-scripts": "5.0.1", "react": "^18.3.0", "typescript": "5.4.2", - "util": "0.12.5", - "viem": "2.12.1", + "util": "0.12.4", + "viem": "2.13.1", "wagmi": "^2.9.7", - "@tanstack/react-query": "^5.28.4" + "@tanstack/react-query": "^5.28.4", + "web-vitals": "^2.1.4", + "buffer": "npm:buffer@6.0.3" }, "scripts": { "dev": "GENERATE_SOURCEMAP=false react-scripts start", diff --git a/examples/with-next-app-i18n/package.json b/examples/with-next-app-i18n/package.json index e176921276..91f11cea28 100644 --- a/examples/with-next-app-i18n/package.json +++ b/examples/with-next-app-i18n/package.json @@ -13,7 +13,7 @@ "next-intl": "^3.9.4", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-next-app/package.json b/examples/with-next-app/package.json index 935ae9d4a1..d22bee1e6d 100644 --- a/examples/with-next-app/package.json +++ b/examples/with-next-app/package.json @@ -12,7 +12,7 @@ "next": "^14.2.3", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-next-custom-button/package.json b/examples/with-next-custom-button/package.json index 8f0206746f..f1f386aea9 100644 --- a/examples/with-next-custom-button/package.json +++ b/examples/with-next-custom-button/package.json @@ -12,7 +12,7 @@ "next": "^14.2.3", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-next-mint-nft/package.json b/examples/with-next-mint-nft/package.json index 5df21d86a5..7671310e11 100644 --- a/examples/with-next-mint-nft/package.json +++ b/examples/with-next-mint-nft/package.json @@ -13,7 +13,7 @@ "next": "^14.2.3", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-next-rainbow-button/package.json b/examples/with-next-rainbow-button/package.json index 5f42f4ae27..88ac2a2c07 100644 --- a/examples/with-next-rainbow-button/package.json +++ b/examples/with-next-rainbow-button/package.json @@ -12,7 +12,7 @@ "next": "^14.2.3", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-next-siwe-iron-session/package.json b/examples/with-next-siwe-iron-session/package.json index 65e2daac94..469126a125 100644 --- a/examples/with-next-siwe-iron-session/package.json +++ b/examples/with-next-siwe-iron-session/package.json @@ -13,7 +13,7 @@ "next": "^14.2.3", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-next-siwe-iron-session/pages/_app.tsx b/examples/with-next-siwe-iron-session/pages/_app.tsx index f4206cfa34..c8c7d6ab1e 100644 --- a/examples/with-next-siwe-iron-session/pages/_app.tsx +++ b/examples/with-next-siwe-iron-session/pages/_app.tsx @@ -32,7 +32,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const { wallets } = getDefaultWallets(); -const config = getDefaultConfig({ +export const wagmiConfig = getDefaultConfig({ appName: 'RainbowKit demo', projectId: 'YOUR_PROJECT_ID', wallets: [ @@ -97,12 +97,13 @@ export default function App({ Component, pageProps }: AppProps) { createMessage: ({ nonce, address, chainId }) => { return createSiweMessage({ - address, - chainId, domain: window.location.host, - nonce, + address, + statement: 'Sign in with Ethereum to the app.', uri: window.location.origin, - version: '1' + version: '1', + chainId, + nonce }); }, @@ -138,7 +139,7 @@ export default function App({ Component, pageProps }: AppProps) { }, []); return ( - + { const { method } = req; switch (method) { case 'POST': try { - const { message, signature } = req.body; - const siweMessage = createSiweMessage(message); - // TODO: remove @ts-ignore - // @ts-ignore - const { success, error, data } = await siweMessage.verify({ + const { message, signature, address } = req.body; + + const publicClient = wagmiConfig.getClient().extend(publicActions); + + const valid = await publicClient.verifyMessage({ + address, + message, signature, }); - if (!success) throw error; + if (!valid) { + throw new Error('Invalid message'); + } - if (data.nonce !== req.session.nonce) + if (parseSiweMessage(message).nonce !== req.session.nonce) return res.status(422).json({ message: 'Invalid nonce.' }); - req.session.siwe = data; + req.session.siwe = { address }; await req.session.save(); res.json({ ok: true }); } catch (_error) { diff --git a/examples/with-next-siwe-iron-session/types/iron-session.d.ts b/examples/with-next-siwe-iron-session/types/iron-session.d.ts index 298873b71a..98f5a7ae2d 100644 --- a/examples/with-next-siwe-iron-session/types/iron-session.d.ts +++ b/examples/with-next-siwe-iron-session/types/iron-session.d.ts @@ -1,9 +1,9 @@ import 'iron-session'; -import { SiweMessage } from 'siwe'; +import { Address } from 'viem'; declare module 'iron-session' { interface IronSessionData { nonce?: string; - siwe?: SiweMessage; + siwe?: { address: Address }; } } diff --git a/examples/with-next-siwe-next-auth/package.json b/examples/with-next-siwe-next-auth/package.json index 036e4cce7d..0bb89f7aea 100644 --- a/examples/with-next-siwe-next-auth/package.json +++ b/examples/with-next-siwe-next-auth/package.json @@ -14,7 +14,7 @@ "next-auth": "4.24.5", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-next-siwe-next-auth/pages/_app.tsx b/examples/with-next-siwe-next-auth/pages/_app.tsx index 4bdc7af7de..98669cbf70 100644 --- a/examples/with-next-siwe-next-auth/pages/_app.tsx +++ b/examples/with-next-siwe-next-auth/pages/_app.tsx @@ -32,7 +32,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const { wallets } = getDefaultWallets(); -const config = getDefaultConfig({ +export const wagmiConfig = getDefaultConfig({ appName: 'RainbowKit demo', projectId: 'YOUR_PROJECT_ID', wallets: [ @@ -53,6 +53,10 @@ const config = getDefaultConfig({ ssr: true, }); +const getSiweMessageOptions: GetSiweMessageOptions = () => ({ + statement: 'Sign in to the RainbowKit + SIWE example app', +}); + const queryClient = new QueryClient(); export default function App({ @@ -63,9 +67,11 @@ export default function App({ }>) { return ( - + - + diff --git a/examples/with-next-siwe-next-auth/pages/api/auth/[...nextauth].ts b/examples/with-next-siwe-next-auth/pages/api/auth/[...nextauth].ts index 8da8e50371..6bce9b1280 100644 --- a/examples/with-next-siwe-next-auth/pages/api/auth/[...nextauth].ts +++ b/examples/with-next-siwe-next-auth/pages/api/auth/[...nextauth].ts @@ -7,49 +7,57 @@ import { NextApiRequest, NextApiResponse } from 'next'; import NextAuth, { NextAuthOptions } from 'next-auth'; import CredentialsProvider from 'next-auth/providers/credentials'; import { getCsrfToken } from 'next-auth/react'; -import { createSiweMessage } from 'viem/siwe'; +import { wagmiConfig } from '../../_app'; +import { ByteArray, Hex, Signature, publicActions } from 'viem'; +import { parseSiweMessage } from 'viem/siwe'; export function getAuthOptions(req: IncomingMessage): NextAuthOptions { const providers = [ CredentialsProvider({ async authorize(credentials) { try { - const siwe = createSiweMessage( - JSON.parse(credentials?.message || '{}') - ); + const message = credentials?.message ?? ''; + + const { domain, nonce, address } = parseSiweMessage(message); + + if (!address) return null; const nextAuthUrl = process.env.NEXTAUTH_URL || (process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : null); + if (!nextAuthUrl) { return null; } const nextAuthHost = new URL(nextAuthUrl).host; - // TODO: remove @ts-ignore - // @ts-ignore - if (siwe.domain !== nextAuthHost) { + + if (domain !== nextAuthHost) { return null; } if ( - // TODO: remove @ts-ignore - // @ts-ignore - siwe.nonce !== - (await getCsrfToken({ req: { headers: req.headers } })) + nonce !== (await getCsrfToken({ req: { headers: req.headers } })) ) { return null; } - // TODO: remove @ts-ignore - // @ts-ignore - await siwe.verify({ signature: credentials?.signature || '' }); + const publicClient = wagmiConfig.getClient().extend(publicActions); + + const valid = await publicClient.verifyMessage({ + address, + message, + signature: credentials?.signature as Hex | ByteArray | Signature, + }); + + if (!valid) { + throw new Error('Invalid message'); + } + return { - // TODO: remove @ts-ignore - // @ts-ignore - id: siwe.address, + id: address, }; } catch (e) { return null; diff --git a/examples/with-next-wallet-button/package.json b/examples/with-next-wallet-button/package.json index 161858eef1..63ff3fe856 100644 --- a/examples/with-next-wallet-button/package.json +++ b/examples/with-next-wallet-button/package.json @@ -12,7 +12,7 @@ "next": "^14.2.3", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-next/package.json b/examples/with-next/package.json index 7d577461d0..24250c369c 100644 --- a/examples/with-next/package.json +++ b/examples/with-next/package.json @@ -12,7 +12,7 @@ "next": "^14.2.3", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-remix/package.json b/examples/with-remix/package.json index d8b978b140..3877268a8f 100644 --- a/examples/with-remix/package.json +++ b/examples/with-remix/package.json @@ -15,7 +15,7 @@ "@remix-run/serve": "^2.9.2", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/examples/with-vite/package.json b/examples/with-vite/package.json index 64aef0c378..b048d81128 100644 --- a/examples/with-vite/package.json +++ b/examples/with-vite/package.json @@ -12,7 +12,7 @@ "@rainbow-me/rainbowkit": "workspace:*", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7", "@tanstack/react-query": "^5.28.4" }, diff --git a/package.json b/package.json index c7257e67cd..f7b9ba19c7 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "react-dom": "^18.3.0", "recursive-readdir-files": "^2.3.1", "typescript": "5.4.2", - "viem": "2.12.1", + "viem": "2.13.1", "vitest": "^0.33.0", "wagmi": "^2.9.7", "dotenv": "^16.4.5" diff --git a/packages/create-rainbowkit/generated-test-app/package.json b/packages/create-rainbowkit/generated-test-app/package.json index 3bd09e9275..57ce2f9b63 100644 --- a/packages/create-rainbowkit/generated-test-app/package.json +++ b/packages/create-rainbowkit/generated-test-app/package.json @@ -13,7 +13,7 @@ "next": "^14.2.3", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7" }, "devDependencies": { diff --git a/packages/create-rainbowkit/templates/next-app/package.json b/packages/create-rainbowkit/templates/next-app/package.json index 4cd3f7771b..ef6d172647 100644 --- a/packages/create-rainbowkit/templates/next-app/package.json +++ b/packages/create-rainbowkit/templates/next-app/package.json @@ -13,7 +13,7 @@ "next": "^14.2.3", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7" }, "devDependencies": { diff --git a/packages/example/package.json b/packages/example/package.json index 5391752e0b..668990a3d9 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -13,7 +13,7 @@ "next-auth": "4.24.5", "react": "^18.3.0", "react-dom": "^18.3.0", - "viem": "2.12.1", + "viem": "2.13.1", "wagmi": "^2.9.7" }, "scripts": { diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx index cf93b951f9..e3cf5e49a7 100644 --- a/packages/example/pages/_app.tsx +++ b/packages/example/pages/_app.tsx @@ -13,7 +13,10 @@ import { lightTheme, midnightTheme, } from '@rainbow-me/rainbowkit'; -import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth'; +import { + GetSiweMessageOptions, + RainbowKitSiweNextAuthProvider, +} from '@rainbow-me/rainbowkit-siwe-next-auth'; import { argentWallet, bifrostWallet, @@ -142,7 +145,7 @@ const sei = { contracts: {}, } as const satisfies Chain; -const config = getDefaultConfig({ +export const wagmiConfig = getDefaultConfig({ appName: 'RainbowKit Demo', projectId, chains: [ @@ -265,6 +268,9 @@ const CustomAvatar: AvatarComponent = ({ size }) => { ); }; +const getSiweMessageOptions: GetSiweMessageOptions = () => ({ + statement: 'Sign in to the RainbowKit Demo', +}); const themes = [ { name: 'light', theme: lightTheme }, { name: 'dark', theme: darkTheme }, @@ -350,7 +356,10 @@ function RainbowKitApp({ // at the bottom of the file. This is so that our example app // component can use their corresponding Hooks. return ( - + - {[undefined, ...config.chains].map((chain) => ( + {[undefined, ...wagmiConfig.chains].map((chain) => (