Merge branch v4 into feat/support-web3js (#23)

* chore(lab): dogfooding button (reown-com#2206)

* chore: fix typos (reown-com#2188)

Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: tomiir <rocchitomas@gmail.com>

* refactor: render tooltip in root (reown-com#2210)

* feat: add react-ethers 6 example (reown-com#1920)

Co-authored-by: Sven <38101365+svenvoskamp@users.noreply.github.com>

* refactor: swap business logic improvements (reown-com#2199)

* chore: detailed canary timings (reown-com#2214)

* chore: add apple app site association (reown-com#2216)

* :feat add send logic  (reown-com#2173)

Co-authored-by: Cali93 <32299095+Cali93@users.noreply.github.com>
Co-authored-by: Enes <enesozturk.d@gmail.com>

* fix: apple-app-site-association content type header (reown-com#2217)

* feat: Sign 2.5 (reown-com#2033)

Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>
Co-authored-by: Glitch <glitch.txs@gmail.com>
Co-authored-by: Glitch <66949816+glitch-txs@users.noreply.github.com>
Co-authored-by: Sven <fr.sven.fr@gmail.com>
Co-authored-by: tomiir <rocchitomas@gmail.com>
Co-authored-by: Enes <enesozturk.d@gmail.com>

* feat: Smart Account 6492 Signature Tests (reown-com#2196)

* fix: sign modal not appearing when going through siwe flow (reown-com#2213)

* Add signAndSendTransaction to Solflare, Backpack and Trust Wallet Ada… (reown-com#2190)

Co-authored-by: Valentyn <valentin.vad.sh@gmail.com>

* fix: missing call to SIWE `onSignOut` (reown-com#2054)

Co-authored-by: Glitch <66949816+glitch-txs@users.noreply.github.com>
Co-authored-by: tomiir <rocchitomas@gmail.com>

* fix: dayjs locale format seconds is not working and is polluting the global dayjs locale (reown-com#1689)

Co-authored-by: tomiir <rocchitomas@gmail.com>
Co-authored-by: Gancho Radkov <43912948+ganchoradkov@users.noreply.github.com>
Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>
Co-authored-by: Ilja <3154053+xzilja@users.noreply.github.com>
Co-authored-by: enesozturk <enesozturk.d@gmail.com>

* :deprecate - injected connector (reown-com#2223)

* chore: more canary timings (reown-com#2215)

* chore: updates ethereum-provider to latest (reown-com#2226)

* fix: add assertion for the erc20 abi json import (reown-com#2225)

* update packages

---------

Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Chris Smith <1979423+chris13524@users.noreply.github.com>
Co-authored-by: Snoppy <michaleli@foxmail.com>
Co-authored-by: tomiir <rocchitomas@gmail.com>
Co-authored-by: Enes <enesozturk.d@gmail.com>
Co-authored-by: Sven <38101365+svenvoskamp@users.noreply.github.com>
Co-authored-by: Luka Isailovic <lukaisailovic@gmail.com>
Co-authored-by: Cali93 <32299095+Cali93@users.noreply.github.com>
Co-authored-by: Gancho Radkov <43912948+ganchoradkov@users.noreply.github.com>
Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>
Co-authored-by: Glitch <glitch.txs@gmail.com>
Co-authored-by: Glitch <66949816+glitch-txs@users.noreply.github.com>
Co-authored-by: Sven <fr.sven.fr@gmail.com>
Co-authored-by: GooxPF <gooxpf@gmail.com>
Co-authored-by: Valentyn <valentin.vad.sh@gmail.com>
Co-authored-by: Tiến Nguyễn Khắc <tien.nguyenkhac@icloud.com>
Co-authored-by: Nikos Rossolatos <nikos@cointracker.com>
Co-authored-by: Ilja <3154053+xzilja@users.noreply.github.com>

.eslintrc.json

@@ -20,7 +20,7 @@
     "dist",
     ".next",
     ".turbo",
-    "exbamples",
+    "examples",
     "coverage",
     ".changeset",
     "playwright-report"

.github/workflows/pr_checks.yml

@@ -37,6 +37,9 @@ jobs:
 
   code_style:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
     strategy:
       matrix:
         style-command:
@@ -98,5 +101,8 @@ jobs:
   ui-test:
     uses: ./.github/workflows/ui_tests.yml
     secrets: inherit
+    permissions:
+      contents: write
+      pull-requests: write
     with:
       branch: ${{ github.ref }}

apps/demo/CHANGELOG.md

@@ -13,7 +13,7 @@
 
 ### Patch Changes
 
-- refactor: Solana exported helper methods and proram instruction improvements
+- refactor: Solana exported helper methods and program instruction improvements
 - refactor: email and smart account improvements
 - refactor: unit test CI check improvements
 - feat: convert
@@ -52,7 +52,7 @@
 
 ### Patch Changes
 
-- Hotfix for inccorect state of w3m-button when email is enabled
+- Hotfix for incorrect state of w3m-button when email is enabled
 
 - Updated dependencies []:
   - @web3modal/wagmi@4.1.7

apps/demo/package.json

@@ -21,7 +21,7 @@
     "tailwind-merge": "2.2.1",
     "vaul": "0.9.0",
     "viem": "2.7.19",
-    "wagmi": "2.5.7",
+    "wagmi": "2.5.19",
     "zustand": "4.5.2"
   },
   "devDependencies": {

apps/gallery/CHANGELOG.md

@@ -57,7 +57,7 @@
 
 ### Patch Changes
 
-- Hotfix for inccorect state of w3m-button when email is enabled
+- Hotfix for incorrect state of w3m-button when email is enabled
 
 - Updated dependencies []:
   - @web3modal/common@4.1.7

apps/gallery/stories/composites/wui-tooltip-select.stories.ts → apps/gallery/stories/composites/wui-icon-button.stories.ts

@@ -1,14 +1,14 @@
 import type { Meta } from '@storybook/web-components'
-import '@web3modal/ui/src/composites/wui-tooltip-select'
-import type { WuiTooltipSelect } from '@web3modal/ui/src/composites/wui-tooltip-select'
+import '@web3modal/ui/src/composites/wui-icon-button'
+import type { WuiIconButton } from '@web3modal/ui/src/composites/wui-icon-button'
 import { html } from 'lit'
 import '../../components/gallery-container'
 import { iconOptions } from '../../utils/PresetUtils'
 
-type Component = Meta<WuiTooltipSelect>
+type Component = Meta<WuiIconButton>
 
 export default {
-  title: 'Composites/wui-tooltip-select',
+  title: 'Composites/wui-icon-button',
   args: {
     icon: 'card',
     text: 'Buy'
@@ -23,8 +23,8 @@ export default {
 
 export const Default: Component = {
   render: args => html`
-    <gallery-container width="120"
-      ><wui-tooltip-select icon=${args.icon} text=${args.text}></wui-tooltip-select>
+    <gallery-container width="120">
+      <wui-icon-button icon=${args.icon} text=${args.text}></wui-icon-button>
     </gallery-container>
   `
 }

apps/laboratory/next.config.js

@@ -3,7 +3,15 @@ const nextConfig = {
   reactStrictMode: true,
   trailingSlash: true,
   distDir: 'out',
-  cleanDistDir: true
+  cleanDistDir: true,
+  async headers() {
+    return [
+      {
+        source: '/.well-known/apple-app-site-association',
+        headers: [{ key: 'content-type', value: 'application/json' }]
+      }
+    ]
+  }
 }
 
 module.exports = nextConfig

apps/laboratory/package.json

@@ -13,12 +13,14 @@
     "playwright:test:wallet": "playwright test --grep 'connect-qr.spec.ts|wallet.spec.ts'",
     "playwright:test:email": "playwright test --grep 'email.spec.ts'",
     "playwright:test:siwe": "playwright test --grep siwe.spec.ts",
+    "playwright:test:siwe-email": "playwright test --grep siwe-email.spec.ts",
     "playwright:test:sa": "playwright test --grep smart-account.spec.ts",
     "playwright:test:canary": "playwright test --retries=0 --grep canary.spec.ts --project='Desktop Chrome/wagmi'",
     "playwright:debug": "npm run playwright:test -- --debug",
     "playwright:debug:wallet": "npm run playwright:test:wallet -- --debug",
     "playwright:debug:email": "npm run playwright:test:email -- --debug",
     "playwright:debug:siwe": "npm run playwright:test:siwe -- --debug",
+    "playwright:debug:siwe-email": "npm run playwright:test:siwe-email -- --debug",
     "playwright:debug:sa": "npm run playwright:test:sa -- --debug",
     "playwright:debug:canary": "npm run playwright:test:canary -- --debug"
   },
@@ -31,25 +33,27 @@
     "@sentry/react": "7.92.0",
     "@solana/web3.js": "1.87.6",
     "@tanstack/react-query": "5.24.8",
+    "@walletconnect/utils": "2.12.0",
     "@web3modal/ethers": "4.1.12-910a844.0",
     "@web3modal/siwe": "4.1.12-910a844.0",
     "@web3modal/solana": "4.1.12-910a844.0",
     "@web3modal/wagmi": "4.1.12-910a844.0",
-    "web3modal-web3js": "0.1.0-alpha.1",
     "ethers": "6.9.0",
     "framer-motion": "10.17.9",
     "next": "14.0.4",
     "next-auth": "4.24.5",
     "react-icons": "4.12.0",
-    "siwe": "2.1.4",
     "valtio": "1.11.2",
     "viem": "2.9.3",
-    "wagmi": "2.5.7",
+    "wagmi": "2.5.19",
+    "web3": "^4.8.0",
     "web3-eth": "4.6.0",
     "web3-eth-contract": "4.4.0",
     "web3-eth-ens": "4.2.0",
+    "web3-eth-personal": "^4.0.8",
     "web3-types": "1.6.0",
-    "web3-utils": "4.2.3"
+    "web3-utils": "4.2.3",
+    "web3modal-web3js": "0.1.0-alpha.1"
   },
   "devDependencies": {
     "@aws-sdk/client-cloudwatch": "3.509.0",

apps/laboratory/public/.well-known/apple-app-site-association

@@ -0,0 +1,19 @@
+{
+  "applinks": {
+    "apps": [],
+    "details": [
+      {
+        "appID": "W5R8AG9K22.com.walletconnect.dapp",
+        "paths": ["/dapp*"]
+      },
+      {
+        "appID": "W5R8AG9K22.com.walletconnect.walletapp",
+        "paths": ["/wallet*"]
+      },
+      {
+        "appID": "W5R8AG9K22.com.walletconnect.universal-link-test",
+        "paths": ["/test*"]
+      }
+    ]
+  }
+}

apps/laboratory/src/components/Ethers/EthersModalInfo.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { useWeb3ModalAccount } from '@web3modal/ethers/react'
+
+import { Web3ModalInfo } from '../Web3ModalInfo'
+
+export function EthersModalInfo() {
+  const { isConnected, address, chainId } = useWeb3ModalAccount()
+  const [ready, setReady] = React.useState(false)
+
+  React.useEffect(() => {
+    setReady(true)
+  }, [])
+
+  return ready && isConnected ? <Web3ModalInfo address={address} chainId={chainId} /> : null
+}

apps/laboratory/src/components/Ethers/EthersSignMessageTest.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@chakra-ui/react'
+import { useState } from 'react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { BrowserProvider, JsonRpcSigner } from 'ethers'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
@@ -8,6 +9,7 @@ export function EthersSignMessageTest() {
   const toast = useChakraToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
+  const [signature, setSignature] = useState<string | undefined>()
 
   async function onSignMessage() {
     try {
@@ -16,8 +18,8 @@ export function EthersSignMessageTest() {
       }
       const provider = new BrowserProvider(walletProvider, chainId)
       const signer = new JsonRpcSigner(provider, address)
-      const signature = await signer?.signMessage('Hello Web3Modal Ethers')
-
+      const sig = await signer?.signMessage('Hello Web3Modal!')
+      setSignature(sig)
       toast({
         title: ConstantsUtil.SigningSucceededToastTitle,
         description: signature,
@@ -33,8 +35,13 @@ export function EthersSignMessageTest() {
   }
 
   return (
-    <Button data-testid="sign-message-button" onClick={onSignMessage}>
-      Sign Message
-    </Button>
+    <>
+      <Button data-testid="sign-message-button" onClick={onSignMessage} width="auto">
+        Sign Message
+      </Button>
+      <div data-testid="w3m-signature" hidden>
+        {signature}
+      </div>
+    </>
   )
 }

apps/laboratory/src/components/Wagmi/WagmiModalInfo.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+import { useAccount } from 'wagmi'
+import { Web3ModalInfo } from '../Web3ModalInfo'
+
+export function WagmiModalInfo() {
+  const { isConnected, address, chainId } = useAccount()
+
+  return isConnected ? <Web3ModalInfo address={address} chainId={chainId} /> : null
+}

apps/laboratory/src/components/Wagmi/WagmiSignMessageTest.tsx

@@ -10,13 +10,15 @@ export function WagmiSignMessageTest() {
   const { signMessageAsync } = useSignMessage()
   const { status } = useAccount()
   const isConnected = status === 'connected'
+  const [signature, setSignature] = React.useState<string | undefined>()
 
   async function onSignMessage() {
     try {
-      const signature = await signMessageAsync({ message: 'Hello Web3Modal!' })
+      const sig = await signMessageAsync({ message: 'Hello Web3Modal!' })
+      setSignature(sig)
       toast({
         title: ConstantsUtil.SigningSucceededToastTitle,
-        description: signature,
+        description: sig,
         type: 'success'
       })
     } catch {
@@ -29,8 +31,13 @@ export function WagmiSignMessageTest() {
   }
 
   return (
-    <Button data-testid="sign-message-button" onClick={onSignMessage} isDisabled={!isConnected}>
-      Sign Message
-    </Button>
+    <>
+      <Button data-testid="sign-message-button" onClick={onSignMessage} isDisabled={!isConnected}>
+        Sign Message
+      </Button>
+      <div data-testid="w3m-signature" hidden>
+        {signature}
+      </div>
+    </>
   )
 }

apps/laboratory/src/components/Web3ModalInfo.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+import {
+  StackDivider,
+  Card,
+  CardHeader,
+  Heading,
+  CardBody,
+  Box,
+  Stack,
+  Text
+} from '@chakra-ui/react'
+
+export function Web3ModalInfo({ address, chainId }: { address?: string; chainId?: number }) {
+  return (
+    <Card marginTop={10} marginBottom={10}>
+      <CardHeader>
+        <Heading size="md">Account Information</Heading>
+      </CardHeader>
+
+      <CardBody>
+        <Stack divider={<StackDivider />} spacing="4">
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Address
+            </Heading>
+            <Text data-testid="w3m-address">{address}</Text>
+          </Box>
+
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Chain Id
+            </Heading>
+            <Text data-testid="w3m-chain-id">{chainId}</Text>
+          </Box>
+        </Stack>
+      </CardBody>
+    </Card>
+  )
+}

apps/laboratory/src/pages/api/auth/[...nextauth].ts

@@ -1,18 +1,19 @@
-import type { SIWESession } from '@web3modal/siwe'
 import type { NextApiRequest, NextApiResponse } from 'next'
 import nextAuth from 'next-auth'
 import credentialsProvider from 'next-auth/providers/credentials'
-import { getCsrfToken } from 'next-auth/react'
-import { SiweMessage } from 'siwe'
-import { ethers } from 'ethers'
+import {
+  type SIWESession,
+  verifySignature,
+  getChainIdFromMessage,
+  getAddressFromMessage
+} from '@web3modal/siwe'
 
 declare module 'next-auth' {
   interface Session extends SIWESession {
     address: string
     chainId: number
   }
 }
-
 /*
  * For more information on each option (and a full list of options) go to
  * https://next-auth.js.org/configuration/options
@@ -47,22 +48,15 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
           if (!credentials?.message) {
             throw new Error('SiweMessage is undefined')
           }
-          const siwe = new SiweMessage(credentials.message)
-          const provider = new ethers.JsonRpcProvider(
-            `https://rpc.walletconnect.com/v1?chainId=eip155:${siwe.chainId}&projectId=${projectId}`
-          )
-          const nonce = await getCsrfToken({ req: { headers: req.headers } })
-          const result = await siwe.verify(
-            {
-              signature: credentials?.signature || '',
-              nonce
-            },
-            { provider }
-          )
+          const { message, signature } = credentials
+          const address = getAddressFromMessage(message)
+          const chainId = getChainIdFromMessage(message)
+
+          const isValid = await verifySignature({ address, message, signature, chainId, projectId })
 
-          if (result.success) {
+          if (isValid) {
             return {
-              id: `eip155:${siwe.chainId}:${siwe.address}`
+              id: `${chainId}:${address}`
             }
           }