Parse and sign typed data

wallets/react-wallet-v2/src/utils/HelperUtil.ts

@@ -26,3 +26,29 @@ export function convertHexToUtf8(value: string) {
 
   return value
 }
+
+/**
+ * Gets message from various signing request methods by filtering out
+ * a value that is not an address (thus is a message).
+ * If it is a hex string, it gets converted to utf8 string
+ */
+export function getSignParamsMessage(params: string[]) {
+  const message = params.filter(p => !utils.isAddress(p))[0]
+
+  return convertHexToUtf8(message)
+}
+
+/**
+ * Gets data from various signTypedData request methods by filtering out
+ * a value that is not an address (thus is data).
+ * If data is a string convert it to object
+ */
+export function getSignTypedDataParamsData(params: string[]) {
+  const data = params.filter(p => !utils.isAddress(p))[0]
+
+  if (typeof data === 'string') {
+    return JSON.parse(data)
+  }
+
+  return data
+}

wallets/react-wallet-v2/src/utils/RequestHandlerUtil.ts

@@ -1,5 +1,5 @@
 import { EIP155_SIGNING_METHODS } from '@/data/EIP155Data'
-import { convertHexToUtf8 } from '@/utils/HelperUtil'
+import { getSignParamsMessage, getSignTypedDataParamsData } from '@/utils/HelperUtil'
 import { formatJsonRpcError, formatJsonRpcResult } from '@json-rpc-tools/utils'
 import { RequestEvent } from '@walletconnect/types'
 import { ERROR } from '@walletconnect/utils'
@@ -9,13 +9,28 @@ export async function approveEIP155Request(request: RequestEvent['request'], wal
   const { method, params, id } = request
 
   switch (method) {
+    /**
+     * Handle message signing requests
+     */
     case EIP155_SIGNING_METHODS.PERSONAL_SIGN:
-      const personalSignResult = await wallet.signMessage(convertHexToUtf8(params[0]))
-      return formatJsonRpcResult(id, personalSignResult)
-
     case EIP155_SIGNING_METHODS.ETH_SIGN:
-      const ethSignResult = await wallet.signMessage(convertHexToUtf8(params[1]))
-      return formatJsonRpcResult(id, ethSignResult)
+      const message = getSignParamsMessage(params)
+      const signedMessage = await wallet.signMessage(message)
+      return formatJsonRpcResult(id, signedMessage)
+
+    /**
+     * Handle data signing requests
+     */
+    case EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA:
+    case EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V3:
+    case EIP155_SIGNING_METHODS.ETH_SIGN_TYPED_DATA_V4:
+      const { domain, types, message: data } = getSignTypedDataParamsData(params)
+
+      // https://github.com/ethers-io/ethers.js/issues/687#issuecomment-714069471
+      delete types.EIP712Domain
+
+      const signedData = await wallet._signTypedData(domain, types, data)
+      return formatJsonRpcResult(id, signedData)
 
     default:
       throw new Error(ERROR.UNKNOWN_JSONRPC_METHOD.format().message)

wallets/react-wallet-v2/src/utils/WalletUtil.ts

@@ -1,17 +1,15 @@
 import { Wallet } from 'ethers'
 
-const STORAGE_KEY = 'WALLET_MNEMONIC'
-
 export let wallet: Wallet
 
 export function createOrRestoreWallet() {
-  const mnemonic = localStorage.getItem(STORAGE_KEY)
+  const mnemonic = localStorage.getItem('WALLET_MNEMONIC')
 
   if (mnemonic) {
     wallet = Wallet.fromMnemonic(mnemonic)
   } else {
     wallet = Wallet.createRandom()
     // Don't store mnemonic in local storage in a production project!
-    localStorage.setItem(STORAGE_KEY, wallet.mnemonic.phrase)
+    localStorage.setItem('WALLET_MNEMONIC', wallet.mnemonic.phrase)
   }
 }