Feat/eip1271 support (#445)

* chore: add signature detection

* chore: bump packages

* chore: log signMessage error

* chore: throw error

* chore: move Toaster to main instead of app to show errors

* chore: remove redundant log

---------

Co-authored-by: Chris Smith <1979423+chris13524@users.noreply.github.com>

Author: devceline

package.json

@@ -22,8 +22,8 @@
     "@sentry/react": "^7.93.0",
     "@tanstack/react-query": "^5.20.1",
     "@walletconnect/core": "2.11.0",
-    "@walletconnect/identity-keys": "^1.0.1",
-    "@walletconnect/notify-client": "^0.16.5",
+    "@walletconnect/identity-keys": "^2.0.1",
+    "@walletconnect/notify-client": "^1.1.0",
     "@walletconnect/notify-message-decrypter": "^0.1.0",
     "@web3modal/wagmi": "4.0.10",
     "classnames": "^2.3.2",
@@ -43,7 +43,7 @@
     "rxjs": "^7.6.0",
     "viem": "2.7.8",
     "vite-plugin-pwa": "^0.16.7",
-    "wagmi": "2.5.5"
+    "wagmi": "^2.5.7"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.1",

src/App.tsx

@@ -1,7 +1,6 @@
 import { Fragment, useContext } from 'react'
 
 import { AnimatePresence, LazyMotion, domAnimation, m } from 'framer-motion'
-import { Toaster } from 'react-hot-toast'
 import { Outlet, useLocation } from 'react-router-dom'
 
 import MobileFooter from '@/components/layout/MobileFooter'
@@ -30,16 +29,6 @@ const App = () => {
         </m.div>
       </LazyMotion>
       <MobileFooter />
-      <Toaster
-        toastOptions={{
-          position: 'bottom-right',
-          duration: 5000,
-          style: {
-            border: '1px solid rgba(0, 0, 0, 0.1)',
-            borderRadius: '1em'
-          }
-        }}
-      />
     </AuthProtectedPage>
   )
 }

src/main.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createWeb3Modal } from '@web3modal/wagmi/react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
+import { Toaster } from 'react-hot-toast'
 import { WagmiProvider } from 'wagmi'
 
 import { PRIVACY_POLICY_URL, TERMS_OF_SERVICE_URL } from '@/constants/web3Modal'
@@ -53,5 +54,15 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         </SettingsContextProvider>
       </QueryClientProvider>
     </WagmiProvider>
+      <Toaster
+        toastOptions={{
+          position: 'bottom-right',
+          duration: 5000,
+          style: {
+            border: '1px solid rgba(0, 0, 0, 0.1)',
+            borderRadius: '1em'
+          }
+        }}
+      />
   </React.StrictMode>
 )

src/utils/signature.ts

@@ -0,0 +1,13 @@
+import { getBytecode } from '@wagmi/core'
+import { wagmiConfig } from './wagmiConfig';
+
+
+export const isSmartContractWallet = async (address: `0x${string}`) => {
+  const bytecode = await getBytecode(wagmiConfig, {
+    address
+  })
+
+  const nonContractBytecode = !bytecode || bytecode === '0x' || bytecode === '0x0' || bytecode === '0x00';
+
+  return !nonContractBytecode;
+}

src/w3iProxy/index.ts

@@ -13,6 +13,7 @@ import { wagmiConfig } from '@/utils/wagmiConfig'
 import W3iAuthFacade from '@/w3iProxy/w3iAuthFacade'
 import type W3iChatFacade from '@/w3iProxy/w3iChatFacade'
 import W3iNotifyFacade from '@/w3iProxy/w3iNotifyFacade'
+import { showErrorMessageToast } from '@/utils/toasts'
 
 export type W3iChatClient = Omit<W3iChatFacade, 'initState'>
 export type W3iNotifyClient = Omit<W3iNotifyFacade, 'initState'>
@@ -102,7 +103,16 @@ class Web3InboxProxy {
     this.dappOrigin = dappOrigin
 
     this.signMessage = async (message: string) => {
-      return signMessage(wagmiConfig, { message })
+      try {
+        const signed = await signMessage(wagmiConfig, {
+          message
+        })
+
+        return signed
+      } catch (e: any) {
+	showErrorMessageToast("Failed to sign message. Consider using different wallet.")
+	throw new Error(`Failed to sign message. ${e.message}`)
+      }
     }
   }
 
@@ -171,7 +181,7 @@ class Web3InboxProxy {
     }
 
     if (this.core) {
-      this.identityKeys = new IdentityKeys(this.core)
+      this.identityKeys = new IdentityKeys(this.core, this.projectId)
     }
 
     if (this.authProvider === 'internal') {

src/w3iProxy/notifyProviders/internalNotifyProvider.ts

@@ -14,6 +14,7 @@ import {
   userEnabledNotification
 } from '@/utils/notifications'
 import { W3iNotifyProvider } from '@/w3iProxy/notifyProviders/types'
+import { isSmartContractWallet } from '@/utils/signature'
 
 export default class InternalNotifyProvider implements W3iNotifyProvider {
   private notifyClient: NotifyClient | undefined
@@ -156,9 +157,14 @@ export default class InternalNotifyProvider implements W3iNotifyProvider {
       })
     })(preparedRegistration.message)
 
+    const [,,address] = props.account.split(':')
+
+    const isEip1271Signature = await isSmartContractWallet(address as `0x${string}`);
+
     const identityKey = await this.notifyClient.register({
       registerParams: preparedRegistration.registerParams,
-      signature
+      signature,
+      signatureType: isEip1271Signature? 'eip1271' : 'eip191'
     })
 
     return identityKey