From a32671f302e1b8f0a66b6e84509c88bf3bfce159 Mon Sep 17 00:00:00 2001
From: Yashovardhan Agrawal <21066442+yashovardhan@users.noreply.github.com>
Date: Thu, 19 Sep 2024 10:31:54 +0530
Subject: [PATCH] Update playground SSV

---
 .../src/services/evmProvider.ts                       | 10 +++-------
 .../src/services/playground.tsx                       | 10 ++++++++++
 .../src/services/web3authContext.tsx                  | 11 +++++++----
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/web-modal-sdk/react-modal-playground/src/services/evmProvider.ts b/web-modal-sdk/react-modal-playground/src/services/evmProvider.ts
index 9e86ac7c0..91d2d9b99 100644
--- a/web-modal-sdk/react-modal-playground/src/services/evmProvider.ts
+++ b/web-modal-sdk/react-modal-playground/src/services/evmProvider.ts
@@ -1,4 +1,3 @@
-import { getPublicCompressed } from "@toruslabs/eccrypto";
 import type { IProvider } from "@web3auth/base";
 import { ContractFactory, ethers } from "ethers";
 
@@ -8,12 +7,9 @@ import { IWalletProvider } from "./walletProvider";
 const ethersWeb3Provider = (provider: IProvider | null, uiConsole: (...args: unknown[]) => void): IWalletProvider => {
   const getPublicKey = async (): Promise<string> => {
     try {
-      const privKey: string = await provider?.request({
-        method: "eth_private_key",
-      });
-      const pubkey = getPublicCompressed(Buffer.from(privKey, "hex")).toString("hex");
-
-      return pubkey;
+      const pubKey: string = await provider.request({ method: "public_key" });
+      // Remove 0x and return the compressed public key
+      return pubKey.slice(2) as string;
     } catch (error: any) {
       uiConsole(error);
       return error.toString();
diff --git a/web-modal-sdk/react-modal-playground/src/services/playground.tsx b/web-modal-sdk/react-modal-playground/src/services/playground.tsx
index 8aa4620b1..5e0dc88e7 100644
--- a/web-modal-sdk/react-modal-playground/src/services/playground.tsx
+++ b/web-modal-sdk/react-modal-playground/src/services/playground.tsx
@@ -262,6 +262,16 @@ export const Playground = ({ children }: IPlaygroundProps) => {
             "Parsed Id Token: ",
             await parseToken(idTokenInFrontend)
           );
+        } else {
+          uiConsole(
+            "Validation Failed!",
+            "Public Key from Provider: ",
+            pubkey,
+            "Public Key from decoded JWT: ",
+            pubKeyFromIdToken,
+            "Parsed Id Token: ",
+            await parseToken(idTokenInFrontend)
+          );
         }
       } else {
         const jwks = jose.createRemoteJWKSet(new URL("https://authjs.web3auth.io/jwks"));
diff --git a/web-modal-sdk/react-modal-playground/src/services/web3authContext.tsx b/web-modal-sdk/react-modal-playground/src/services/web3authContext.tsx
index a11694454..1a7077f17 100644
--- a/web-modal-sdk/react-modal-playground/src/services/web3authContext.tsx
+++ b/web-modal-sdk/react-modal-playground/src/services/web3authContext.tsx
@@ -1,9 +1,9 @@
-import { AuthAdapter } from "@web3auth/auth-adapter";
+import { AuthAdapter, MFA_LEVELS } from "@web3auth/auth-adapter";
 import { UX_MODE, WEB3AUTH_NETWORK } from "@web3auth/base";
 import { getDefaultExternalAdapters } from "@web3auth/default-evm-adapter";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { Web3AuthOptions } from "@web3auth/modal";
-import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
+import { BUTTON_POSITION, CONFIRMATION_STRATEGY, WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
 
 import { chain } from "../config/chainConfig";
 
@@ -24,7 +24,7 @@ const web3AuthOptions: Web3AuthOptions = {
 
 const authAdapter = new AuthAdapter({
   loginSettings: {
-    mfaLevel: "optional",
+    mfaLevel: MFA_LEVELS.OPTIONAL,
   },
   adapterSettings: {
     uxMode: UX_MODE.REDIRECT, // "redirect" | "popup"
@@ -33,7 +33,10 @@ const authAdapter = new AuthAdapter({
 
 const walletServicesPlugin = new WalletServicesPlugin({
   wsEmbedOpts: {},
-  walletInitOptions: { whiteLabel: { showWidgetButton: true, buttonPosition: "bottom-right" } },
+  walletInitOptions: {
+    whiteLabel: { showWidgetButton: true, buttonPosition: BUTTON_POSITION.BOTTOM_RIGHT },
+    confirmationStrategy: CONFIRMATION_STRATEGY.MODAL,
+  },
 });
 
 const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions });