V3 / ethers preview

apps/gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apps/gallery",
-  "version": "3.1.0",
+  "version": "3.2.0-f9b3ed8",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -9,17 +9,17 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/ui": "3.1.0",
+    "@web3modal/ui": "3.2.0-f9b3ed8",
     "lit": "3.0.0",
-    "storybook": "7.4.6"
+    "storybook": "7.5.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addon-links": "7.4.6",
-    "@storybook/blocks": "7.4.6",
-    "@storybook/theming": "7.4.6",
-    "@storybook/web-components": "7.4.6",
-    "@storybook/web-components-vite": "7.4.6",
+    "@storybook/addon-essentials": "7.5.0",
+    "@storybook/addon-links": "7.5.0",
+    "@storybook/blocks": "7.5.0",
+    "@storybook/theming": "7.5.0",
+    "@storybook/web-components": "7.5.0",
+    "@storybook/web-components-vite": "7.5.0",
     "file-system-cache": "2.4.4"
   }
 }

apps/laboratory/next.config.js

@@ -1,7 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  output: 'export'
+  output: 'export',
+  trailingSlash: true
 }
 
 module.exports = nextConfig

apps/laboratory/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apps/laboratory",
-  "version": "3.1.0",
+  "version": "3.2.0-f9b3ed8",
   "private": true,
   "scripts": {
     "dev:laboratory": "next dev",
@@ -11,11 +11,12 @@
     "@chakra-ui/react": "2.8.1",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@sentry/browser": "7.73.0",
-    "@sentry/react": "7.73.0",
-    "@web3modal/wagmi": "3.1.0",
+    "@sentry/browser": "7.74.1",
+    "@sentry/react": "7.74.1",
+    "@web3modal/ethers5": "3.2.0-f9b3ed8",
+    "@web3modal/wagmi": "3.2.0-f9b3ed8",
     "framer-motion": "10.16.4",
-    "next": "13.5.4",
+    "next": "13.5.6",
     "react-icons": "4.11.0",
     "valtio": "1.11.2"
   }

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

@@ -0,0 +1,29 @@
+import { Button, useToast } from '@chakra-ui/react'
+import { useWeb3ModalAccount, useWeb3ModalSigner } from '@web3modal/ethers5/react'
+
+export function EthersConnectButton() {
+  const toast = useToast()
+  const { isConnected } = useWeb3ModalAccount()
+  const { signer } = useWeb3ModalSigner()
+
+  async function onSignMessage() {
+    try {
+      const signature = await signer?.signMessage('Hello Web3Modal Ethers')
+      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+    } catch {
+      toast({
+        title: 'Error',
+        description: 'Failed to sign message',
+        status: 'error',
+        isClosable: true
+      })
+    }
+  }
+
+  return (
+    <>
+      <w3m-button />
+      {isConnected ? <Button onClick={() => onSignMessage()}>Sign Message</Button> : null}
+    </>
+  )
+}

apps/laboratory/src/components/ConnectButton.tsx → apps/laboratory/src/components/Wagmi/WagmiConnectButton.tsx

@@ -1,7 +1,7 @@
 import { Button, useToast } from '@chakra-ui/react'
 import { useAccount, useSignMessage } from 'wagmi'
 
-export function ConnectButton() {
+export function WagmiConnectButton() {
   const toast = useToast()
   const { isConnected } = useAccount()
   const { signMessageAsync } = useSignMessage({ message: 'Hello Web3Modal!' })

apps/laboratory/src/layout/Header.tsx

@@ -10,7 +10,6 @@ import {
   Flex,
   Icon,
   Link,
-  Text,
   useColorMode,
   useDisclosure
 } from '@chakra-ui/react'
@@ -19,6 +18,7 @@ import { FaMagic } from 'react-icons/fa'
 import AccentColorInput from '../components/Theming/AccentColorInput'
 import BorderRadiusInput from '../components/Theming/BorderRadiusInput'
 import MixColorInput from '../components/Theming/MixColorInput'
+import NextLink from 'next/link'
 
 export default function Header() {
   const { colorMode, toggleColorMode } = useColorMode()
@@ -50,9 +50,15 @@ export default function Header() {
       <Box borderBottom={'1px'} zIndex={2} position="relative">
         <Container maxW="container.xl" padding={'4'}>
           <Flex justify={['flex-end', 'space-between']} alignItems={'center'}>
-            <Text fontSize={'lg'} fontWeight={'bold'} display={['none', 'block']}>
+            <Link
+              as={NextLink}
+              href="/"
+              fontSize={'lg'}
+              fontWeight={'bold'}
+              display={['none', 'block']}
+            >
               Web3Modal Lab
-            </Text>
+            </Link>
             <Flex gridGap={4} alignItems={'center'}>
               <Link isExternal href="https://github.com/WalletConnect/web3modal">
                 GitHub

apps/laboratory/src/pages/index.tsx

@@ -1,85 +1,29 @@
-import { Center, VStack, useColorMode } from '@chakra-ui/react'
-import { createWeb3Modal, defaultWagmiConfig, useWeb3ModalTheme } from '@web3modal/wagmi/react'
-import { useEffect, useState } from 'react'
-import { WagmiConfig } from 'wagmi'
-import {
-  arbitrum,
-  aurora,
-  avalanche,
-  base,
-  bsc,
-  celo,
-  gnosis,
-  mainnet,
-  optimism,
-  polygon,
-  zkSync,
-  zora
-} from 'wagmi/chains'
-import { ConnectButton } from '../components/ConnectButton'
-import { NetworksButton } from '../components/NetworksButton'
-
-// 1. Get projectId
-const projectId = process.env['NEXT_PUBLIC_PROJECT_ID']
-if (!projectId) {
-  throw new Error('NEXT_PUBLIC_PROJECT_ID is not set')
-}
-
-// 2. Create wagmiConfig
-const chains = [
-  mainnet,
-  arbitrum,
-  polygon,
-  avalanche,
-  bsc,
-  optimism,
-  gnosis,
-  zkSync,
-  zora,
-  base,
-  celo,
-  aurora
-]
-export const wagmiConfig = defaultWagmiConfig({
-  chains,
-  projectId,
-  metadata: {
-    name: 'Web3Modal',
-    description: 'Web3Modal Laboratory',
-    url: 'https://web3modal.com',
-    icons: ['https://avatars.githubusercontent.com/u/37784886']
-  }
-})
-
-// 3. Create Web3Modal
-export const modal = createWeb3Modal({
-  wagmiConfig,
-  projectId,
-  chains,
-  enableAnalytics: true
-})
+import { Center, Link, VStack } from '@chakra-ui/react'
+import NextLink from 'next/link'
 
 export default function HomePage() {
-  const [ready, setReady] = useState(false)
-  const { colorMode } = useColorMode()
-  const { setThemeMode } = useWeb3ModalTheme()
-
-  useEffect(() => {
-    setReady(true)
-  }, [])
-
-  useEffect(() => {
-    setThemeMode(colorMode)
-  }, [colorMode])
-
-  return ready ? (
-    <WagmiConfig config={wagmiConfig}>
-      <Center h="80vh">
-        <VStack gap={4}>
-          <ConnectButton />
-          <NetworksButton />
-        </VStack>
-      </Center>
-    </WagmiConfig>
-  ) : null
+  return (
+    <Center h="80vh">
+      <VStack gap={4}>
+        <Link
+          as={NextLink}
+          href="/library/wagmi"
+          padding={4}
+          border={'1px solid #47a1ff'}
+          borderRadius="xl"
+        >
+          V3 with Wagmi
+        </Link>
+        <Link
+          as={NextLink}
+          href="/library/ethers"
+          padding={4}
+          border={'1px solid #26D962'}
+          borderRadius="xl"
+        >
+          V3 with Ethers
+        </Link>
+      </VStack>
+    </Center>
+  )
 }

apps/laboratory/src/pages/library/ethers.tsx

@@ -0,0 +1,47 @@
+import { Center, Text, VStack } from '@chakra-ui/react'
+import { NetworksButton } from '../../components/NetworksButton'
+import { EthersConnectButton } from '../../components/Ethers/EthersConnectButton'
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react'
+import { ThemeStore } from '../../utils/StoreUtil'
+
+const projectId = process.env['NEXT_PUBLIC_PROJECT_ID']
+if (!projectId) {
+  throw new Error('NEXT_PUBLIC_PROJECT_ID is not set')
+}
+const chains = [1, 42161, 137, 43114, 56, 10, 100, 324, 7777777, 8453, 42220, 1313161554]
+
+const modal = createWeb3Modal({
+  ethersConfig: defaultConfig({
+    metadata: {
+      name: 'Web3Modal',
+      description: 'Web3Modal Laboratory',
+      url: 'https://web3modal.com',
+      icons: ['https://avatars.githubusercontent.com/u/37784886']
+    },
+    defaultChainId: 1,
+    rpcUrl: 'https://cloudflare-eth.com'
+  }),
+  chains,
+  projectId,
+  enableAnalytics: true
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <Center paddingTop={10}>
+        <Text fontSize="xl" fontWeight={700}>
+          V3 with Ethers
+        </Text>
+      </Center>
+      <Center h="65vh">
+        <VStack gap={4}>
+          <EthersConnectButton />
+          <NetworksButton />
+        </VStack>
+      </Center>
+    </>
+  )
+}

apps/laboratory/src/pages/library/wagmi.tsx

@@ -0,0 +1,86 @@
+import { Center, Text, VStack } from '@chakra-ui/react'
+import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
+import { useEffect, useState } from 'react'
+import { WagmiConfig } from 'wagmi'
+import {
+  arbitrum,
+  aurora,
+  avalanche,
+  base,
+  bsc,
+  celo,
+  gnosis,
+  mainnet,
+  optimism,
+  polygon,
+  zkSync,
+  zora
+} from 'wagmi/chains'
+import { WagmiConnectButton } from '../../components/Wagmi/WagmiConnectButton'
+import { NetworksButton } from '../../components/NetworksButton'
+import { ThemeStore } from '../../utils/StoreUtil'
+
+// 1. Get projectId
+const projectId = process.env['NEXT_PUBLIC_PROJECT_ID']
+if (!projectId) {
+  throw new Error('NEXT_PUBLIC_PROJECT_ID is not set')
+}
+
+// 2. Create wagmiConfig
+const chains = [
+  mainnet,
+  arbitrum,
+  polygon,
+  avalanche,
+  bsc,
+  optimism,
+  gnosis,
+  zkSync,
+  zora,
+  base,
+  celo,
+  aurora
+]
+export const wagmiConfig = defaultWagmiConfig({
+  chains,
+  projectId,
+  metadata: {
+    name: 'Web3Modal',
+    description: 'Web3Modal Laboratory',
+    url: 'https://web3modal.com',
+    icons: ['https://avatars.githubusercontent.com/u/37784886']
+  }
+})
+
+const modal = createWeb3Modal({
+  wagmiConfig,
+  projectId,
+  chains,
+  enableAnalytics: true
+})
+
+ThemeStore.setModal(modal)
+
+export default function Wagmi() {
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    setReady(true)
+  }, [])
+
+  return ready ? (
+    <WagmiConfig config={wagmiConfig}>
+      <Center paddingTop={10}>
+        <Text fontSize="xl" fontWeight={700}>
+          V3 with Wagmi
+        </Text>
+      </Center>
+      <Center h="65vh">
+        <VStack gap={4}>
+          <WagmiConnectButton />
+          <NetworksButton />
+        </VStack>
+      </Center>
+    </WagmiConfig>
+  ) : null
+}