fix(crypto): fix utf-8 encoding during L1 signing

- Add debug logs to track utf-8 byte encoding/decoding
- Compare utf-8 bytes between TextEncoder/TextDecoder and ethers.toUtf8Bytes
- Attempt to fix encoding issue by using ethers.toUtf8Bytes directly for signing
- Add validation that encoded bytes match expected connection string

Author: brayansdt

packages/internal/toolkit/src/crypto.ts

@@ -43,8 +43,37 @@ export async function signRaw(
   signer: Signer,
 ): Promise<string> {
   console.log('signRaw.payload', { payload });
-  console.log('signRaw.toUtf8Bytes', { toUtf8Bytes: toUtf8Bytes(payload).toString() });
-  const signature = deserializeSignature(await signer.signMessage(toUtf8Bytes(payload)));
+  console.log('signRaw.toUtf8Bytes', { bytes: toUtf8Bytes(payload).toString() });
+  console.log('signRaw.payload.normalize() === payload', { result: payload === payload.normalize() });
+
+  // prevent utf-8 encoding issues
+  const encoder = new TextEncoder();
+  const buffer = encoder.encode(payload);
+  // use this message to sign
+  const message = new TextDecoder('utf-8').decode(buffer);
+
+  const buffer2 = Buffer.from(payload, 'utf8');
+  const message2 = new TextDecoder('utf-8').decode(buffer2);
+
+  // compare message utf8 bytes with payload.normalize()
+  console.log('signRaw.message === payload.normalize()', { result: message === payload.normalize() });
+  console.log('signRaw.message2 === payload.normalize()', { result: message2 === payload.normalize() });
+
+  // output utf8 bytes
+  console.log('signRaw.message', { message, bytes: toUtf8Bytes(message).toString() });
+  console.log('signRaw.message2', { message2, bytes: toUtf8Bytes(message2).toString() });
+
+  // compare utf8 bytes output
+  console.log(
+    'signRaw.toUtf8Bytes === toUtf8Bytes(message)',
+    { result: toUtf8Bytes(payload).toString() === toUtf8Bytes(message).toString() },
+  );
+  console.log(
+    'signRaw.toUtf8Bytes === toUtf8Bytes(message2)',
+    { result: toUtf8Bytes(payload).toString() === toUtf8Bytes(message2).toString() },
+  );
+
+  const signature = deserializeSignature(await signer.signMessage(toUtf8Bytes(message)));
   return serializeEthSignature(signature);
 }
 

packages/x-client/src/utils/crypto/crypto.ts

@@ -48,7 +48,18 @@ export async function signRaw(
   payload: string,
   signer: Signer,
 ): Promise<string> {
-  const signature = deserializeSignature(await signer.signMessage(payload));
+  // prevent utf-8 encoding issues
+  const encoder = new TextEncoder();
+  const buffer = encoder.encode(payload);
+  const message = new TextDecoder('utf-8').decode(buffer);
+
+  const buffer2 = Buffer.from(payload, 'utf8');
+  const message2 = new TextDecoder('utf-8').decode(buffer2);
+
+  console.log('signRaw.message', { message });
+  console.log('signRaw.message2', { message2 });
+
+  const signature = deserializeSignature(await signer.signMessage(message));
   return serializeEthSignature(signature);
 }
 

packages/x-provider/src/imx-wallet/ImxSigner.ts

@@ -1,5 +1,4 @@
 import { StarkSigner } from '@imtbl/x-client';
-import { toUtf8Bytes } from 'ethers';
 import {
   COMMUNICATION_TYPE,
   ResponseEventType,
@@ -29,9 +28,6 @@ export class ImxSigner implements StarkSigner {
   }
 
   public signMessage(rawMessage: string): Promise<string> {
-    console.log('signMessage.rawMessage', { rawMessage });
-    console.log('signMessage.toUtf8Bytes.toString()', { toUtf8Bytes: toUtf8Bytes(rawMessage).toString() });
-
     return new Promise((resolve, reject) => {
       const listener = (event: MessageEvent) => {
         messageResponseListener<SignMessageResponse>(

packages/x-provider/src/imx-wallet/imxWallet.ts

@@ -1,6 +1,7 @@
 import { Environment } from '@imtbl/config';
 import {
   BrowserProvider,
+  toUtf8Bytes,
   toUtf8String,
 } from 'ethers';
 import {
@@ -27,6 +28,37 @@ const DEFAULT_CONNECTION_BYTES = new Uint8Array([
   97, 99, 116, 105, 111, 110, 32, 119, 105, 116, 104, 32, 73, 109, 109, 117,
   116, 97, 98, 108, 101, 32, 88, 46,
 ]);
+const DEFAULT_CONNECTION_STRING_1 = 'Only sign this request if you’ve initiated an action with Immutable X.';
+const DEFAULT_CONNECTION_STRING_2 = Buffer.from(DEFAULT_CONNECTION_STRING_1, 'utf8').toString('utf8');
+console.log('DEFAULT_CONNECTION_STRING_2', { string: DEFAULT_CONNECTION_STRING_2 });
+
+// log utf8 bytes
+console.log('DEFAULT_CONNECTION_BYTES.toString()', { bytes: DEFAULT_CONNECTION_BYTES.toString() });
+console.log('DEFAULT_CONNECTION_STRING_1', { bytes: toUtf8Bytes(DEFAULT_CONNECTION_STRING_1).toString() });
+console.log('DEFAULT_CONNECTION_STRING_2', { bytes: toUtf8Bytes(DEFAULT_CONNECTION_STRING_2).toString() });
+console.log(
+  'DEFAULT_CONNECTION_STRING_1.normalize()',
+  { bytes: toUtf8Bytes(DEFAULT_CONNECTION_STRING_1.normalize()).toString() },
+);
+console.log(
+  'DEFAULT_CONNECTION_STRING_2.normalize()',
+  { bytes: toUtf8Bytes(DEFAULT_CONNECTION_STRING_2.normalize()).toString() },
+);
+console.log(
+  'Buffer.from(DEFAULT_CONNECTION_STRING_1, utf8).toString()',
+  { bytes: Buffer.from(DEFAULT_CONNECTION_STRING_1, 'utf8').toString() },
+);
+
+// console.log if the bytes of DEFAULT_CONNECTION_STRING_1 and DEFAULT_CONNECTION_STRING_2 are the same as DEFAULT_CONNECTION_BYTES
+console.log(
+  'DEFAULT_CONNECTION_BYTES === toUtf8Bytes(DEFAULT_CONNECTION_STRING_1)',
+  { bytes: DEFAULT_CONNECTION_BYTES.toString() === toUtf8Bytes(DEFAULT_CONNECTION_STRING_1).toString() },
+);
+console.log(
+  'DEFAULT_CONNECTION_BYTES === toUtf8Bytes(DEFAULT_CONNECTION_STRING_2)',
+  { bytes: DEFAULT_CONNECTION_BYTES.toString() === toUtf8Bytes(DEFAULT_CONNECTION_STRING_2).toString() },
+);
+
 const CONNECTION_FAILED_ERROR = 'The L2 IMX Wallet connection has failed';
 
 export async function connect(