Feat/use recaps (#557)

* chore: install canaries that have prepare registration

* chore: use alpha version and create siwe config

* chore: store registerParams

* chore: add example

* chore: use fixed versions

* chore: use exact version from wagmi

* chore: add logs and bump w3m

* chore: pass allApps

* chore: bump client canary

* chore: signing animation when recapsing in

* chore: enable wallet features

* fix: bug where signature modal shows up in sign 2.5 mode

* feat: remove signature modal

* chore: run prettier

* chore: update session interval

* chore: add more logs, pass cacao

* chore: use 2.5.0

* refactor: move siwe logic to own file

* chore: init w3i before w3m

* chore: run prettier

* chore: bump web3modal

* chore: add spinner

* chore: make the spinner bigger

* chore: reverse connecting condition

* chore: fix web3modal email sign

* chore: use main yarn.lock

* chore: bump packages

* chore: remove console logs

* chore: use latest w3m canary

* chore: bump web3modal

* chore: update test to use new sign

* chore: use latest w3m

* chore: bump patch

* chore: bump packages

* chore: alter e2e tests to accomadate new wallet

* chore: fix canary

* chore: remove all promptSiwe refs

package.json

@@ -18,14 +18,17 @@
     "playwright:test:canary": "playwright test --retries=0 --grep canary.spec.ts --project=chromium",
     "playwright:debug": "playwright test --debug"
   },
+  "resolutions": {
+    "@walletconnect/ethereum-provider": "2.12.1"
+  },
   "dependencies": {
     "@sentry/react": "^7.93.0",
     "@tanstack/react-query": "^5.20.1",
     "@walletconnect/identity-keys": "^2.0.1",
     "@walletconnect/notify-message-decrypter": "^0.1.0",
-    "@web3inbox/core": "1.3.0",
-    "@web3inbox/react": "1.3.0",
-    "@web3modal/wagmi": "^4.0.13",
+    "@web3inbox/core": "1.4.0-16773f4",
+    "@web3inbox/react": "^1.4.0-efaaba3",
+    "@web3modal/wagmi": "4.2.1",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "detect-browser": "^5.3.0",
@@ -42,7 +45,7 @@
     "react-select": "^5.7.0",
     "viem": "2.10.5",
     "vite-plugin-pwa": "^0.16.7",
-    "wagmi": "^2.5.7"
+    "wagmi": "2.5.20"
   },
   "devDependencies": {
     "@aws-sdk/client-cloudwatch": "^3.535.0",

src/Modals.tsx

@@ -8,7 +8,6 @@ import ChangeBrowserModal from '@/components/utils/ChangeBrowserModal'
 import NotificationPwaModal from '@/components/utils/NotificationPwaModal'
 import PwaModal from '@/components/utils/PwaModal'
 import W3iContext from '@/contexts/W3iContext/context'
-import { SignatureModal } from '@/pages/Login/SignatureModal'
 import { isCI } from '@/utils/env'
 import { useModals } from '@/utils/hooks'
 import { useNotificationPermissionState } from '@/utils/hooks/notificationHooks'
@@ -17,19 +16,13 @@ import {
   notificationsAvailableInBrowser
 } from '@/utils/notifications'
 import { isAppleMobile, isMobileButNotInstalledOnHomeScreen, isNonSafari } from '@/utils/pwa'
-import { notificationPwaModalService, signatureModalService } from '@/utils/store'
+import { notificationPwaModalService } from '@/utils/store'
 import { isMobile } from '@/utils/ui'
 
 export const Modals = () => {
-  const {
-    isPreferencesModalOpen,
-    isUnsubscribeModalOpen,
-    isSignatureModalOpen,
-    isNotificationPwaModalOpen,
-    isSigning
-  } = useModals()
+  const { isPreferencesModalOpen, isUnsubscribeModalOpen, isNotificationPwaModalOpen } = useModals()
 
-  const { notifyRegisteredKey, userPubkey, clientReady } = useContext(W3iContext)
+  const { notifyRegisteredKey } = useContext(W3iContext)
 
   const notificationsEnabled = useNotificationPermissionState()
 
@@ -38,7 +31,6 @@ export const Modals = () => {
   const explicitlyDeniedOnDesktop = !isMobile() && window.Notification?.permission === 'denied'
   const shouldShowChangeBrowserModal = isAppleMobile ? isNonSafari : false
   const shouldShowPWAModal = isMobileButNotInstalledOnHomeScreen && !shouldShowChangeBrowserModal
-  const shouldShowSignatureModal = isSignatureModalOpen && !shouldShowChangeBrowserModal
   const shouldShowUnsubscribeModalOpen = isUnsubscribeModalOpen && !shouldShowChangeBrowserModal
   const shouldShowPreferencesModalOpen = isPreferencesModalOpen && !shouldShowChangeBrowserModal
 
@@ -48,32 +40,9 @@ export const Modals = () => {
     !isMobileButNotInstalledOnHomeScreen &&
     !notificationsEnabled &&
     Boolean(notifyRegisteredKey) &&
-    !isSignatureModalOpen &&
     !notificationModalClosed &&
     !shouldShowChangeBrowserModal
 
-  useEffect(() => {
-    const shouldOpenSignatureModal =
-      !notifyRegisteredKey &&
-      (isSignatureModalOpen || (userPubkey && clientReady && !notifyRegisteredKey)) &&
-      !shouldShowChangeBrowserModal
-
-    if (shouldOpenSignatureModal) {
-      if (!isSigning) {
-        signatureModalService.openModal()
-      }
-    } else {
-      signatureModalService.closeModal()
-    }
-  }, [
-    isSigning,
-    isSignatureModalOpen,
-    notifyRegisteredKey,
-    userPubkey,
-    clientReady,
-    shouldShowChangeBrowserModal
-  ])
-
   useEffect(() => {
     // Create an artificial delay to prevent modals being spammed one after the other
     if (shouldShowNotificationModal) {
@@ -91,8 +60,6 @@ export const Modals = () => {
 
       {shouldShowPreferencesModalOpen && <PreferencesModal />}
 
-      {shouldShowSignatureModal && <SignatureModal />}
-
       {shouldShowPWAModal && <PwaModal />}
 
       {!isCI && isNotificationPwaModalOpen && <NotificationPwaModal />}

src/components/general/IntroContent/IntroContent.scss

@@ -37,7 +37,7 @@
     }
   }
 
-  svg {
+  & > svg {
     z-index: 0;
     margin-bottom: 4.75rem;
     filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.75));

src/main.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Web3InboxClient } from '@web3inbox/core'
 import { initWeb3InboxClient } from '@web3inbox/react'
+import { createSIWEConfig } from '@web3modal/siwe'
 import { createWeb3Modal } from '@web3modal/wagmi/react'
 import ReactDOM from 'react-dom/client'
 import { Toaster } from 'react-hot-toast'
@@ -18,6 +20,7 @@ import { metadata, wagmiConfig } from '@/utils/wagmiConfig'
 
 import { Modals } from './Modals'
 import DevTimeStamp from './components/dev/DevTimeStamp'
+import { createMessage, getMessageParams, getNonce, getSession, verifyMessage } from './utils/siwe'
 
 import './index.css'
 
@@ -29,24 +32,39 @@ if (!projectId) {
   throw new Error('VITE_PROJECT_ID is required')
 }
 
+let client: Web3InboxClient | null = null
+
+initWeb3InboxClient({
+  projectId,
+  allApps: true,
+  domain: window.location.hostname,
+  logLevel: import.meta.env.PROD ? 'error' : import.meta.env.NEXT_PUBLIC_LOG_LEVEL || 'debug'
+}).then(w3iClient => {
+  client = w3iClient
+})
+
+const siweConfig = createSIWEConfig({
+  getMessageParams: () => getMessageParams(client),
+  createMessage: params => createMessage(params),
+  getNonce: () => getNonce(),
+  getSession: () => getSession(client),
+  verifyMessage: params => verifyMessage(params, client),
+  signOut: () => Promise.resolve(true)
+})
+
 createWeb3Modal({
   wagmiConfig,
   enableAnalytics: import.meta.env.PROD,
   projectId,
   termsConditionsUrl: TERMS_OF_SERVICE_URL,
   privacyPolicyUrl: PRIVACY_POLICY_URL,
   themeMode: 'light',
+  enableWalletFeatures: true,
+  siweConfig,
   themeVariables: { '--w3m-z-index': 9999 },
   metadata
 })
 
-initWeb3InboxClient({
-  projectId,
-  allApps: true,
-  domain: window.location.hostname,
-  logLevel: import.meta.env.PROD ? 'error' : import.meta.env.NEXT_PUBLIC_LOG_LEVEL || 'debug'
-})
-
 const queryClient = new QueryClient()
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

src/pages/Login/Login.scss

@@ -31,7 +31,10 @@
     gap: 4rem;
 
     &__connect-button {
-      min-width: fit-content;
+      .Spinner {
+        width: 1.5em;
+        height: 1.5em;
+      }
     }
 
     &__footer {