attempt to fix createMetadataTargetIdPayHash

packages/juice-sdk-react/src/hooks/jb721Hook/use721HookMetadataId.tsx

@@ -1,18 +1,26 @@
 import { useEffect, useState } from "react";
 import { useJb721TiersHookMetadataIdTarget } from "src/generated/juicebox";
-import { Address } from "viem";
+import { Address, bytesToString, keccak256, toBytes } from "viem";
 
 /**
  * createMetadataTargetIdPayHash returns metadataTargetId hashed with string `"pay"`.
  */
-async function createMetadataTargetIdPayHash(metadataTargetId: Address) {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(metadataTargetId + "pay");
-  const hash = await window.crypto.subtle.digest("SHA-256", data);
-
-  return Array.from(new Uint8Array(hash))
-    .map((b) => b.toString(16).padStart(2, "0"))
-    .join("");
+async function createMetadataTargetIdPayHash(
+  metadataTargetId: Address,
+  purpose: string = "pay"
+) {
+  const targetBytes = toBytes(metadataTargetId);
+  const purposeBytes = toBytes(purpose);
+
+  const targetBytes20 = keccak256(targetBytes).slice(0, 20);
+  const purposeKeccak = keccak256(purposeBytes);
+  const purposeBytes20 = purposeKeccak.slice(0, 20);
+
+  const xorResult = toBytes(targetBytes20).map(
+    (byte, i) => byte ^ toBytes(purposeBytes20)[i]
+  );
+
+  return bytesToString(xorResult.slice(0, 4));
 }
 
 /**
@@ -35,7 +43,9 @@ export function use721HookMetadataId({
       return;
     }
 
-    createMetadataTargetIdPayHash(metadataTargetId).then(setHashedMetadataId);
+    createMetadataTargetIdPayHash(metadataTargetId, "pay").then(
+      setHashedMetadataId
+    );
   }, [metadataTargetId]);
 
   return hashedMetadataId;

packages/juice-sdk-react/src/hooks/usePreparePayMetadata.ts

@@ -39,6 +39,8 @@ export function usePreparePayMetadata({
     dataHookAddress: jb721Hook?.dataHookAddress,
   });
 
+  console.log("usePreparePayMetadata::metadataId", metadataId);
+
   if (!jb721Hook || jb721Hook.tierIdsToMint.length == 0 || !metadataId) {
     return null;
   }