feat: eth_signTypedDataV4 implementation

stephancill · Jul 17, 2024 · 544181a · 544181a
1 parent 863d901
commit 544181a
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 14 deletions.
diff --git a/front/src/app/connect/page.tsx b/front/src/app/connect/page.tsx
@@ -118,7 +118,9 @@ export default function Page() {
             content: message,
           });
 
-          closePopup();
+          if (decrypted.action.method !== "eth_sendTransaction") {
+            closePopup();
+          }
         }
       },
       false,

diff --git a/front/src/components/EIP712Renderer/index.tsx b/front/src/components/EIP712Renderer/index.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { Theme, Box, Heading, ScrollArea, Text } from "@radix-ui/themes";
+
+interface EIP712Data {
+  domain: Record<string, any>;
+  message: Record<string, any>;
+  primaryType: string;
+  types: Record<string, { name: string; type: string }[]>;
+}
+
+const EIP712Renderer: React.FC<{ data: EIP712Data }> = ({ data }) => {
+  const renderValue = (value: any, depth = 0): JSX.Element => {
+    if (typeof value !== "object" || value === null) {
+      return <Text>{JSON.stringify(value)}</Text>;
+    }
+
+    return (
+      <Box style={{ paddingLeft: `${depth * 8}px` }}>
+        {Object.entries(value).map(([key, val]) => (
+          <Box key={key}>
+            <Text weight="bold">{key}:</Text> {renderValue(val, depth + 1)}
+          </Box>
+        ))}
+      </Box>
+    );
+  };
+
+  return (
+    <Theme>
+      <ScrollArea style={{ height: "300px", width: "100%" }}>
+        <Box p="4">
+          <Box>
+            <Heading size="3">Domain</Heading>
+            {renderValue(data.domain)}
+          </Box>
+          <Box mt="4">
+            <Heading size="3">Message</Heading>
+            {renderValue(data.message)}
+          </Box>
+        </Box>
+      </ScrollArea>
+    </Theme>
+  );
+};
+
+export default EIP712Renderer;
diff --git a/front/src/components/WCSignModal/index.tsx b/front/src/components/WCSignModal/index.tsx
@@ -10,8 +10,9 @@ import {
 } from "@radix-ui/react-icons";
 import { Button, Callout, Flex, Heading, Link, Text, TextArea } from "@radix-ui/themes";
 import { useState } from "react";
-import { Chain, Hash, Hex, WalletRpcSchema, hashMessage, hexToString } from "viem";
+import { Chain, Hash, Hex, WalletRpcSchema, hashMessage, hashTypedData, hexToString } from "viem";
 import Spinner from "../Spinner";
+import EIP712Renderer from "../EIP712Renderer";
 
 type SignSchemas = WalletRpcSchema[8] | WalletRpcSchema[10];
 
@@ -42,6 +43,8 @@ export default function WCSignModal({
       console.log("message", hexToString(params[0]));
       if (method === "personal_sign") {
         hash = hashMessage(hexToString(params[0]) as string);
+      } else if (method === "eth_signTypedData_v4") {
+        hash = hashTypedData(params[1] as any);
       } else {
         throw new Error("Unsupported method");
       }
@@ -123,17 +126,28 @@ export default function WCSignModal({
             <Flex direction="column">
               <Flex direction="column" gap="3">
                 <div>
-                  <Text style={{ color: "var(--accent-10)", marginLeft: "1rem" }}>Data:</Text>
-                  <TextArea
-                    disabled
-                    style={{
-                      resize: "none",
-                      minHeight: "100px",
-                      borderRadius: "20px",
-                      padding: ".5rem",
-                    }}
-                    value={hexToString(params[0])}
-                  />
+                  {method === "personal_sign" ? (
+                    <div>
+                      <Text style={{ color: "var(--accent-10)", marginLeft: "1rem" }}>Data:</Text>
+                      <TextArea
+                        disabled
+                        style={{
+                          resize: "none",
+                          minHeight: "100px",
+                          borderRadius: "20px",
+                          padding: ".5rem",
+                        }}
+                        value={hexToString(params[0])}
+                      />
+                    </div>
+                  ) : (
+                    <div>
+                      <Text style={{ color: "var(--accent-10)", marginLeft: "1rem" }}>
+                        Typed Data:
+                      </Text>
+                      <EIP712Renderer data={params[1] as any} />
+                    </div>
+                  )}
                 </div>
               </Flex>
             </Flex>

diff --git a/front/src/libs/wallet-connect/service/wallet-connect.ts b/front/src/libs/wallet-connect/service/wallet-connect.ts
@@ -293,7 +293,7 @@ class WalletConnect extends EventEmitter {
         return null;
       }
 
-      // case EIP155Method.SignTypedDataV4:
+      case EIP155Method.SignTypedDataV4:
       case EIP155Method.PersonalSign: {
         this.emit(WCEvent.Sign, {
           method,