Upgrade embed dev

example/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@passportxyz/passport-embed": "^0.0.2",
     "@tanstack/react-query": "^5.62.11",
+    "buffer": "^6.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

example/src/index.tsx

@@ -1,4 +1,6 @@
 import { createRoot } from "react-dom/client";
+import { useState } from "react";
+import { Buffer } from "buffer";
 import {
   PassportScoreWidget,
   usePassportScore,
@@ -7,8 +9,6 @@ import {
 
 import "./index.css";
 
-import { useState } from "react";
-
 const passportEmbedParams = {
   apiKey: import.meta.env.VITE_API_KEY,
   scorerId: import.meta.env.VITE_SCORER_ID,
@@ -51,10 +51,13 @@ const generateSignature = async (message: string) => {
 
     const signerAddress = accounts[0];
 
+    const stringToSign = `0x${Buffer.from(message, "utf8").toString(
+      "hex"
+    )}`;
     // Sign the message
     const signature = await window.ethereum.request({
       method: "personal_sign",
-      params: [message, signerAddress],
+      params: [stringToSign, signerAddress],
     });
 
     return signature ? signature : "";

package.json

@@ -90,7 +90,6 @@
   "dependencies": {
     "@tanstack/react-query": "^5.62.11",
     "axios": "^1.7.7",
-    "buffer": "^6.0.3",
     "dompurify": "^3.2.4",
     "html-react-parser": "^5.2.2"
   }

src/components/Body/PlatformVerification.tsx

@@ -1,7 +1,6 @@
 import styles from "./PlatformVerification.module.css";
 import utilStyles from "../../utilStyles.module.css";
 import { useEffect, useState } from "react";
-import { Buffer } from "buffer";
 import { Button } from "../Button";
 import { Hyperlink } from "./ScoreTooLowBody";
 import { ScrollableDiv } from "../ScrollableDiv";
@@ -144,12 +143,7 @@ export const PlatformVerification = ({
             credential = challenge.credential;
             const _challenge = challenge.credential.credentialSubject.challenge;
 
-            const challengeToSign = `0x${Buffer.from(
-              _challenge,
-              "utf8"
-            ).toString("hex")}`;
-
-            signature = await generateSignatureCallback(challengeToSign);
+            signature = await generateSignatureCallback(_challenge);
           }
 
           if (platform.requiresPopup && platform.popupUrl) {
@@ -184,7 +178,6 @@ export const PlatformVerification = ({
               if (popup.closed) {
                 clearInterval(checkPopupClosed);
                 console.log("Pop-up closed");
-                alert("OAuth process completed or cancelled. Interval check");
                 // Refresh stamps
                 verifyCredentials(platformCredentialIds);
               }

test/components/PlatformVerification.test.tsx

@@ -4,7 +4,7 @@ import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { PlatformVerification } from "../../src/components/Body/PlatformVerification";
 import * as usePassportScore from "../../src/hooks/usePassportScore";
 import * as usePlatformStatus from "../../src/hooks/usePlatformStatus";
-import * as QueryContext from "../../src/contexts/QueryContext";
+import * as useQueryContext from "../../src/hooks/useQueryContext";
 import {
   mockExpectedConsoleErrorLog,
   setupTestQueryClient,
@@ -14,7 +14,7 @@ import { Platform } from "../../src/hooks/useStampPages";
 // Mock the hooks
 jest.mock("../../src/hooks/usePassportScore");
 jest.mock("../../src/hooks/usePlatformStatus");
-jest.mock("../../src/contexts/QueryContext");
+jest.mock("../../src/hooks/useQueryContext");
 
 // Mock fetch
 global.fetch = jest.fn();
@@ -48,7 +48,7 @@ describe("PlatformVerification", () => {
     (usePlatformStatus.usePlatformStatus as jest.Mock).mockReturnValue({
       claimed: false,
     });
-    (QueryContext.useQueryContext as jest.Mock).mockReturnValue({
+    (useQueryContext.useQueryContext as jest.Mock).mockReturnValue({
       address: "0x123",
       embedServiceUrl: "https://test.com",
     });
@@ -196,7 +196,7 @@ describe("PlatformVerification", () => {
 
     it("handles missing address error", async () => {
       // Mock missing address in context
-      (QueryContext.useQueryContext as jest.Mock).mockReturnValue({
+      (useQueryContext.useQueryContext as jest.Mock).mockReturnValue({
         address: null,
       });
 

test/components/ScoreTooLowBody.test.tsx

@@ -10,10 +10,10 @@ import {
   useWidgetPassportScore,
   useWidgetVerifyCredentials,
 } from "../../src/hooks/usePassportScore";
-import { useHeaderControls } from "../../src/contexts/HeaderContext";
+import { useHeaderControls } from "../../src/hooks/useHeaderControls";
 
 jest.mock("../../src/hooks/usePassportScore");
-jest.mock("../../src/contexts/HeaderContext");
+jest.mock("../../src/hooks/useHeaderControls");
 
 jest.mock("../../src/utils/stampDataApi", () => ({
   fetchStampPages: jest.fn().mockResolvedValue([