Merge branch 'main' of https://github.com/efdevcon/monorepo

devcon-app/package.json

@@ -24,10 +24,14 @@
     "@radix-ui/react-toast": "^1.2.1",
     "@react-three/drei": "^9.108.3",
     "@react-three/fiber": "^8.16.8",
+    "@reown/appkit-adapter-wagmi": "^1.0.1",
     "@sentry/nextjs": "^7.13.0",
+    "@tanstack/react-query": "^5.56.2",
     "@tippyjs/react": "^4.2.6",
     "@types/three": "^0.166.0",
     "@types/web-push": "^3.6.3",
+    "@walletconnect/http-connection": "^1.8.0",
+    "@walletconnect/sign-client": "^2.16.2",
     "@walletconnect/web3-provider": "^1.8.0",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.16",
@@ -36,9 +40,7 @@
     "clsx": "^2.1.1",
     "dotenv": "^15.0.0",
     "email-validator": "^2.0.4",
-    "eth-sig-util": "^3.0.1",
     "ethereum-blockies-base64": "^1.0.2",
-    "ethers": "^5.5.4",
     "file-saver": "^2.0.5",
     "framer-motion": "10.16.16",
     "fuse.js": "^6.6.2",
@@ -92,11 +94,12 @@
     "three": "^0.166.1",
     "three-orbit-controls": "^82.1.0",
     "unique-names-generator": "^4.7.1",
+    "viem": "^2.21.8",
+    "wagmi": "^2.12.12",
     "web-push": "^3.6.6",
-    "web3modal": "^1.9.5",
     "webpack": "^5.89.0",
     "yarn": "^1.22.22",
-    "zustand": "^4.5.4"
+    "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {
     "@octokit/types": "^6.34.0",

devcon-app/src/components/domain/app/Layout.tsx

@@ -1,46 +1,39 @@
-import React from 'react'
-import { AccountContextProvider } from 'context/account-context-provider'
+import React, { PropsWithChildren } from 'react'
 import { BottomNav } from 'components/domain/app/navigation'
 import css from './app.module.scss'
 import { Header } from 'components/common/layouts/header'
-import { useAccountContext } from 'context/account-context'
 import useGetElementHeight from 'hooks/useGetElementHeight'
 import { AppContext } from 'context/app-context'
+import { Web3Provider } from 'context/web3'
+import { AccountContextProvider } from 'context/account-context-provider'
 
-type LayoutProps = {
-  children: React.ReactChild | React.ReactChild[]
-}
-
-export const AppLayout = (props: LayoutProps) => {
-  const accountContext = useAccountContext()
-  // const loggedIn = !!accountContext.account
-
+export const AppLayout = (props: PropsWithChildren) => {
   const headerHeight = useGetElementHeight('header')
   const upperNavHeight = useGetElementHeight('inline-nav')
   const lowerNavHeight = useGetElementHeight('bottom-nav')
 
   return (
     <AppContext>
-      <AccountContextProvider>
-        <div
-          className={css['app']}
-          style={
-            {
-              '--header-height': `${headerHeight}px`,
-              '--app-nav-upper-height': `${upperNavHeight || 49}px`,
-              '--app-nav-lower-height': `${lowerNavHeight}px`,
-            } as any
-          }
-        >
-          <Header isApp className={css['header']} withStrip={false} withHero={false} />
-
-          {props.children}
+      <Web3Provider>
+        <AccountContextProvider>
+          <div
+            className={css['app']}
+            style={
+              {
+                '--header-height': `${headerHeight}px`,
+                '--app-nav-upper-height': `${upperNavHeight || 49}px`,
+                '--app-nav-lower-height': `${lowerNavHeight}px`,
+              } as any
+            }
+          >
+            <Header isApp className={css['header']} withStrip={false} withHero={false} />
 
-          <BottomNav />
+            {props.children}
 
-          {/* {loggedIn && <BottomNav location={location} />} */}
-        </div>
-      </AccountContextProvider>
+            <BottomNav />
+          </div>
+        </AccountContextProvider>
+      </Web3Provider>
     </AppContext>
   )
 }

devcon-app/src/components/domain/app/account/Login.tsx

@@ -2,31 +2,31 @@ import React, { useEffect, useState } from 'react'
 import IconSwirl from 'assets/icons/swirl.svg'
 import css from './login.module.scss'
 import pwaIcon from './pwa-icon.png'
-import footerRoad from './footer-road.png'
-import { Link } from 'components/common/link'
 import { InputForm } from 'components/common/input-form'
 import { Button } from 'components/common/button'
-import IconHelp from 'assets/icons/icon-help.svg'
-import { Tooltip } from 'components/common/tooltip'
 import { isEmail } from 'utils/validators'
 import { useAccountContext } from 'context/account-context'
 import { Alert } from 'components/common/alert'
-import { getSiweMessage } from 'utils/web3'
 import AccountFooter from './AccountFooter'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
 import { AppNav } from 'components/domain/app/navigation'
-// import { InfoIcon } from 'components/common/info-icon'
-// import Info from 'pages/info'
+import { useAccount, useSignMessage } from 'wagmi'
+import { createSiweMessage } from 'viem/siwe'
+import { useAppKit } from '@reown/appkit/react'
 
 export default function LoginPage() {
+  const { open, close } = useAppKit()
+  const { address } = useAccount()
+  const { signMessageAsync } = useSignMessage()
   const router = useRouter()
   const [tooltipVisible, setTooltipVisible] = useState(false)
   const accountContext = useAccountContext()
   const [emailSent, setEmailSent] = useState(false)
   const [error, setError] = useState('')
   const [email, setEmail] = useState('')
   const [nonce, setNonce] = useState('')
+  const [loginWeb3, setLoginWeb3] = useState(false)
   const loggedIn = !!accountContext.account
 
   useEffect(() => {
@@ -49,45 +49,52 @@ export default function LoginPage() {
     if (router.query.token) LoginWithToken()
   }, [router.query.token])
 
+  useEffect(() => {
+    async function LoginWithWallet() {
+      if (!address) {
+        setError('No address.')
+        return
+      }
+
+      const token = await accountContext.getToken(address.toLowerCase(), false)
+      if (!token) {
+        setError('Unable to create verification token')
+        return
+      }
+
+      const message = createSiweMessage({
+        address: address,
+        chainId: 1,
+        domain: 'app.devcon.org',
+        nonce: token.nonce.toString(),
+        statement: `Sign this message to prove you have access to this wallet. This won't cost you anything.`,
+        uri: 'https://app.devcon.org/',
+        version: '1',
+      })
+
+      const signature = await signMessageAsync({ message })
+      const userAccount = await accountContext.loginWeb3(address.toLowerCase(), token.nonce, message, signature)
+      if (userAccount) {
+        router.push('/')
+      }
+      if (!userAccount) {
+        setError('Unable to login with web3')
+      }
+    }
+
+    if (address && loginWeb3) LoginWithWallet()
+  }, [address, loginWeb3])
+
   if (loggedIn) {
     return null
   }
 
   const connectWeb3AndLogin = async () => {
-    const provider = await accountContext.connectWeb3()
-    if (!provider) {
-      setError('Unable to connect to Web3 provider')
-      return
+    if (!address) {
+      await open()
     }
 
-    const signer = provider.getSigner()
-    const address = await signer.getAddress()
-    const token = await accountContext.getToken(address.toLowerCase(), false)
-    if (!token) {
-      setError('Unable to create verification token')
-      return
-    }
-
-    const message = getSiweMessage(address, token)
-    setError('Sign the message in your wallet to prove you have access.')
-    const signedMessage = await accountContext.signMessage(message, provider)
-    if (!signedMessage) {
-      setError('Unable to sign message')
-      return
-    }
-
-    const userAccount = await accountContext.loginWeb3(
-      signedMessage.address.toLowerCase(),
-      token.nonce,
-      signedMessage.message,
-      signedMessage.signature
-    )
-    if (userAccount) {
-      router.push('/')
-    }
-    if (!userAccount) {
-      setError('Unable to login with web3')
-    }
+    setLoginWeb3(true)
   }
 
   const connectEmail = async () => {

devcon-app/src/components/domain/app/account/settings/Wallet.tsx

@@ -6,12 +6,13 @@ import AccountFooter from '../AccountFooter'
 import NotFound from './NotFound'
 import IconCross from 'assets/icons/cross.svg'
 import { Button } from 'components/common/button'
-import { getSiweMessage } from 'utils/web3'
 import { Link } from 'components/common/link'
 import { useActiveAddress } from 'hooks/useActiveAddress'
 import { Tooltip } from 'components/common/tooltip'
 import { useRouter } from 'next/router'
 import { AppNav } from 'components/domain/app/navigation'
+import { useAccount, useSignMessage } from 'wagmi'
+import { createSiweMessage } from 'viem/siwe'
 
 export default function WalletSettings() {
   const router = useRouter()
@@ -20,41 +21,35 @@ export default function WalletSettings() {
   const [error, setError] = useState('')
   const [promptRemove, setPromptRemove] = useState('')
   const [tooltipVisible, setTooltipVisible] = useState(false)
+  const { address } = useAccount()
+  const { signMessageAsync } = useSignMessage()
 
-  if (!accountContext.account) {
+  if (!address || !accountContext.account) {
     return null
   }
 
   const canDelete = accountContext.account?.addresses?.length > 0 && !!accountContext.account.email
 
   const addWallet = async () => {
-    const provider = await accountContext.connectWeb3()
-    if (!provider) {
-      setError('Unable to connect to Web3 provider')
-      return
-    }
-
-    const signer = provider.getSigner()
-    const address = await signer.getAddress()
     const token = await accountContext.getToken(address.toLowerCase(), false)
     if (!token) {
       setError('Unable to create verification token')
       return
     }
 
-    const message = getSiweMessage(address, token)
-    const signedMessage = await accountContext.signMessage(message, provider)
-    if (!signedMessage) {
-      setError('Unable to sign message')
-      return
-    }
+    const message = createSiweMessage({
+      address: address,
+      chainId: 1,
+      domain: 'app.devcon.org',
+      nonce: token.nonce.toString(),
+      statement: `Sign this message to prove you have access to this wallet. This won't cost you anything.`,
+      uri: 'https://app.devcon.org/',
+      version: '1',
+    })
+
+    const signature = await signMessageAsync({ message })
+    const userAccount = await accountContext.loginWeb3(address.toLowerCase(), token.nonce, message, signature)
 
-    const userAccount = await accountContext.loginWeb3(
-      signedMessage.address.toLowerCase(),
-      token.nonce,
-      signedMessage.message,
-      signedMessage.signature
-    )
     if (!userAccount) {
       setError('Unable to login with web3')
     }
@@ -86,7 +81,7 @@ export default function WalletSettings() {
         <div>
           <div className="section">
             <div className="content">
-              <div className={css['alert']}>{error && <Alert title='Info' type="info" message={error} />}</div>
+              <div className={css['alert']}>{error && <Alert title="Info" type="info" message={error} />}</div>
 
               <div className={css['form']}>
                 <p className={`${css['title']} title`}>Manage Wallets</p>

devcon-app/src/components/domain/app/home/Home.tsx

@@ -1,19 +1,17 @@
 import React from 'react'
-import { SliderStickyNotes } from 'components/common/slider/SliderVariations'
 import { Link } from 'components/common/link'
 import { DropdownVariationDots } from 'components/common/dropdown/Dropdown'
 import { useRouter } from 'next/router'
 import css from './home.module.scss'
-import { useAccountContext } from 'context/account-context'
-import { useActiveAddress } from 'hooks/useActiveAddress'
-import { useAvatar } from 'hooks/useAvatar'
 import { AppNav } from 'components/domain/app/navigation'
 import { useMediaQuery } from 'hooks/useMediaQuery'
-import { TruncateMiddle } from 'utils/formatting'
 import { Dashboard } from 'components/domain/app/dashboard'
 import AppPhones from 'assets/images/app-phones.png'
 import AppLogoColor from 'assets/images/app-logo-color.png'
 import Image from 'next/image'
+import { useAccountContext } from 'context/account-context'
+import { TruncateMiddle } from 'utils/formatting'
+import { useAvatar } from 'hooks/useAvatar'
 
 type PageIntroduction = {
   background: any
@@ -64,12 +62,9 @@ export const Home = (props: any) => {
   const router = useRouter()
   const maxWidthTruncate = useMediaQuery(640) // breakpoint-sm
   const accountContext = useAccountContext()
-  const activeAddress = useActiveAddress()
   const avatar = useAvatar()
   const loggedIn = !!accountContext.account
 
-  console.log(loggedIn, 'logged in')
-
   const accountContextOptions = [
     {
       text: 'Settings',
@@ -155,7 +150,7 @@ export const Home = (props: any) => {
           </div>
         )}
 
-        {loggedIn && !!activeAddress && (
+        {loggedIn && !!accountContext.account?.activeAddress && (
           <div className={css['connection-info']}>
             <div className={css['wallet']}>
               <div className={css['circle']}>