Add Sophon Labs account integration for EIP-6963 support

Author: joaquim-verges

apps/playground-web/package.json

@@ -1,5 +1,7 @@
 {
   "dependencies": {
+    "@sophon-labs/account-core": "^1.3.7",
+    "@sophon-labs/account-eip6963": "^1.3.7",
     "@abstract-foundation/agw-react": "^1.6.4",
     "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-checkbox": "^1.3.2",

apps/playground-web/src/app/providers.tsx

@@ -5,6 +5,8 @@ import type { ThemeProviderProps } from "next-themes";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import type * as React from "react";
 
+import "@sophon-labs/account-eip6963/mainnet";
+
 const queryClient = new QueryClient();
 
 export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {

apps/playground-web/src/app/wallets/auth/server/actions/auth.ts

@@ -24,7 +24,9 @@ export async function generatePayload(options: GenerateLoginPayloadParams) {
 }
 
 export async function login(payload: VerifyLoginPayloadParams) {
+  console.log("payload", payload);
   const verifiedPayload = await thirdwebAuth.verifyPayload(payload);
+  console.log("verifiedPayload", verifiedPayload);
   if (verifiedPayload.valid) {
     const jwt = await thirdwebAuth.generateJWT({
       payload: verifiedPayload.payload,

apps/playground-web/src/components/auth/auth-button.tsx

@@ -9,6 +9,7 @@ import {
   logout,
 } from "@/app/wallets/auth/server/actions/auth";
 import { THIRDWEB_CLIENT } from "@/lib/client";
+import { defineChain } from "thirdweb";
 
 export function AuthButton() {
   return (
@@ -17,10 +18,11 @@ export function AuthButton() {
         doLogin: (params) => login(params),
         doLogout: () => logout(),
         getLoginPayload: ({ address }) =>
-          generatePayload({ address, chainId: 84532 }),
+          generatePayload({ address, chainId: 50104 }),
         isLoggedIn: (address) => isLoggedIn(address),
       }}
       client={THIRDWEB_CLIENT}
+      chain={defineChain(50104)}
       wallets={[
         inAppWallet({
           auth: {

packages/thirdweb/src/auth/verify-hash.ts

@@ -86,6 +86,8 @@ export async function verifyHash({
     }),
   );
 
+  console.log("isDeployed", isDeployed);
+
   if (isDeployed) {
     const validEip1271 = await verifyEip1271Signature({
       contract: getContract({
@@ -195,6 +197,13 @@ export async function verifyEip1271Signature({
       hash,
       signature,
     });
+    console.log("result", {
+      hash,
+      address: contract.address,
+      chain: contract.chain.id,
+      signature,
+      result,
+    });
     return result === EIP_1271_MAGIC_VALUE;
   } catch (err) {
     console.error("Error verifying EIP-1271 signature", err);

packages/thirdweb/src/auth/verify-signature.ts

@@ -3,10 +3,11 @@ import * as ox__Secp256k1 from "ox/Secp256k1";
 import * as ox__Signature from "ox/Signature";
 import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
-import { type Hex, isHex } from "../utils/encoding/hex.js";
+import { type Hex, isHex, stringToHex } from "../utils/encoding/hex.js";
 import { hashMessage } from "../utils/hashing/hashMessage.js";
 import type { Prettify } from "../utils/type-utils.js";
 import { verifyHash } from "./verify-hash.js";
+import { recoverAddress, verifyMessage } from "viem";
 
 type Message = Prettify<
   | string
@@ -48,11 +49,27 @@ export async function verifyEOASignature(options: VerifyEOASignatureParams) {
     return false;
   }
 
+  const viewm = await verifyMessage({
+    message: options.message,
+    signature: options.signature,
+    address: options.address,
+  });
+
+  const viemRecoveredAddress = await recoverAddress({
+    hash: messageHash,
+    signature: options.signature,
+  });
+
+  console.log("viewm", viewm);
+  console.log("viemRecoveredAddress", viemRecoveredAddress);
+
   const recoveredAddress = ox__Secp256k1.recoverAddress({
     payload: messageHash,
     signature: ox__Signature.fromHex(options.signature),
   });
 
+  console.log("recoveredAddress", recoveredAddress);
+
   if (recoveredAddress.toLowerCase() === options.address.toLowerCase()) {
     return true;
   }
@@ -111,7 +128,8 @@ export async function verifyContractWalletSignature({
   client,
   accountFactory,
 }: VerifyContractWalletSignatureParams) {
-  const messageHash = hashMessage(message);
+  // FIXME undo stringToHex, but this is what fixes sophon
+  const messageHash = hashMessage(stringToHex(message as string));
 
   const parsedSignature = (() => {
     if (ox__Bytes.validate(signature)) {
@@ -167,6 +185,7 @@ export async function verifySignature(options: VerifySignatureParams) {
     // no-op, we skip to contract signature check
   }
   if (isVerifyContractWalletSignatureParams(options)) {
+    console.log("isVerifyContractWalletSignatureParams");
     try {
       return await verifyContractWalletSignature(options);
     } catch (err) {

packages/thirdweb/src/utils/hashing/hashMessage.ts

@@ -3,6 +3,7 @@ import type { Hex } from "../encoding/hex.js";
 import { stringToBytes, toBytes } from "../encoding/to-bytes.js";
 import type { SignableMessage } from "../types.js";
 import { keccak256 } from "./keccak256.js";
+import { hashMessage as viemHashMessage } from "viem";
 
 const presignMessagePrefix = "\x19Ethereum Signed Message:\n";
 type To = "hex" | "bytes";
@@ -27,6 +28,10 @@ export function hashMessage<TTo extends To = "hex">(
   message: SignableMessage,
   to_?: TTo,
 ): HashMessage<TTo> {
+  console.log("hashMessage", {
+    message,
+    to_,
+  });
   const messageBytes = (() => {
     if (typeof message === "string") {
       return stringToBytes(message);
@@ -39,5 +44,12 @@ export function hashMessage<TTo extends To = "hex">(
   const prefixBytes = stringToBytes(
     `${presignMessagePrefix}${messageBytes.length}`,
   );
-  return keccak256(ox__Bytes.concat(prefixBytes, messageBytes), to_);
+  const ours = keccak256(ox__Bytes.concat(prefixBytes, messageBytes), to_);
+
+  const viem = viemHashMessage(message, to_);
+
+  console.log("ours", ours);
+  console.log("viem", viem);
+
+  return ours;
 }

packages/thirdweb/src/wallets/injected/index.ts

@@ -5,14 +5,16 @@ import {
   serializeTypedData,
   stringify,
   validateTypedData,
+  verifyMessage,
+  hashMessage,
 } from "viem";
 import { isInsufficientFundsError } from "../../analytics/track/helpers.js";
 import {
   trackInsufficientFundsError,
   trackTransaction,
 } from "../../analytics/track/transaction.js";
 import type { Chain } from "../../chains/types.js";
-import { getCachedChain, getChainMetadata } from "../../chains/utils.js";
+import { defineChain, getCachedChain, getChainMetadata } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { getAddress } from "../../utils/address.js";
 import {
@@ -34,6 +36,8 @@ import { normalizeChainId } from "../utils/normalizeChainId.js";
 import type { WalletEmitter } from "../wallet-emitter.js";
 import type { WalletId } from "../wallet-types.js";
 import { injectedProvider } from "./mipdStore.js";
+import { verifyEip1271Signature } from "../../auth/verify-hash.js";
+import { getContract } from "../../contract/contract.js";
 
 // TODO: save the provider in data
 export function getInjectedProvider(walletId: WalletId) {
@@ -250,6 +254,11 @@ function createAccount({
         throw new Error("Provider not setup");
       }
 
+      console.log("signMessage", {
+        message,
+        address: account.address,
+      });
+
       const messageToSign = (() => {
         if (typeof message === "string") {
           return stringToHex(message);
@@ -260,10 +269,32 @@ function createAccount({
         return message.raw;
       })();
 
-      return await provider.request({
+      const signature = await provider.request({
         method: "personal_sign",
         params: [messageToSign, getAddress(account.address)],
       });
+      console.log("signature", {
+        messageToSign,
+        address: account.address,
+        signature,
+      });
+      const isValid = await verifyEip1271Signature({
+        contract: getContract({
+          address: account.address,
+          chain: defineChain(50104),
+          client: client,
+        }),
+        hash: hashMessage(stringToHex(message as string)),
+        signature: signature as Hex,
+      });
+      console.log("isValid 1271", isValid);
+      const viemValidSignature = await verifyMessage({
+        message,
+        signature,
+        address: account.address,
+      });
+      console.log("valid signature from viem", viemValidSignature);
+      return signature as Hex;
     },
     async signTypedData(typedData) {
       if (!provider || !account.address) {