update embed-sdk and usage to listen error events

src/components/CrossMintingStep.tsx

@@ -8,7 +8,7 @@ import {
 import Link from "next/link";
 import Image from "next/image";
 import { bundlerActions, ENTRYPOINT_ADDRESS_V07 } from "permissionless";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { HiOutlineArrowSmRight } from "react-icons/hi";
 import { encodeFunctionData, Hex, createClient, http } from "viem";
 import { polygonAmoy } from "viem/chains";
@@ -39,6 +39,7 @@ const CrossMintingStep = ({
     address: web3PayAddress,
     selectedEnv,
     setLoggedIn,
+    error: errorFromWallet,
   } = useWallet();
   const [displayErrorPopup, setDisplayErrorPopup] = useState(false);
   const [errorText, setErrorText] = useState("");
@@ -68,6 +69,7 @@ const CrossMintingStep = ({
           value: "0",
         },
       });
+
       if (resp) {
         // setMintSuccess(true);
         setMintNftState({
@@ -149,6 +151,19 @@ const CrossMintingStep = ({
     }
   }
 
+  useEffect(() => {
+    if (errorFromWallet) {
+      // show error
+      setDisplayErrorPopup(true);
+      setErrorText("Minting failed");
+      setSubErrorText(errorFromWallet);
+    } else {
+      setDisplayErrorPopup(false);
+      setErrorText("");
+      setSubErrorText("");
+    }
+  }, [errorFromWallet]);
+
   return (
     <div className="flex flex-col items-center justify-center w-full">
       {!showSummary && (

src/components/LogoutPopup.tsx

@@ -1,7 +1,5 @@
 import { useWallet } from "@/context/walletContext";
 import useMintStore from "@/lib/store/mint";
-import { HiExclamationCircle } from "react-icons/hi";
-import { text } from "stream/consumers";
 
 const LogoutPopup = ({ onCancel }: {
   onCancel: () => void;

src/context/walletContext.tsx

@@ -2,7 +2,6 @@
 
 import { SelectedEnv } from "@/utils/interfaces";
 import { calculateBaseUrl } from "@/utils/utils";
-// WalletContext.js
 import { WalletProvider } from "@web3auth/global-accounts-sdk";
 import { useRouter } from "next/navigation";
 import React, { createContext, useContext, useEffect, useState } from "react";
@@ -17,7 +16,8 @@ interface IWalletContext {
   loggedIn: boolean;
   setLoggedIn: (val: boolean) => void;
   showNextLoginModal: boolean;
-  setShowNextLoginModal: (val: boolean) => void;  
+  setShowNextLoginModal: (val: boolean) => void;
+  error?: string;
 }
 
 const WalletContext = createContext<IWalletContext>({
@@ -47,6 +47,7 @@ export const WalletProviderContext = ({
   const [showNextLoginModal, setShowNextLoginModal] = useState<boolean>(false);
   const [loggedIn, setLoggedIn] = useState(false);
   const [chainId, setChainId] = useState(80002);
+  const [error, setError] = useState<string | undefined>();
 
   useEffect(() => {
     const getWalletURL = () => {
@@ -67,14 +68,17 @@ export const WalletProviderContext = ({
         preference: {
           keysUrl: getWalletURL(),
         },
-      });
-
-      _walletProvider.addListener("disconnect", () => {
-        setAddress("");
-        setWalletProvider(null);
-        localStorage.clear();
-        setLoggedIn(false);
-        setShowNextLoginModal(true);
+        onError: (_error) => {
+          console.log("Error occured::error", _error);
+          setError(_error);
+        },
+        onDisconnect: () => {
+          setAddress("");
+          setWalletProvider(null);
+          localStorage.clear();
+          setLoggedIn(false);
+          setShowNextLoginModal(true);
+        },
       });
 
       setWalletProvider(_walletProvider);
@@ -121,6 +125,7 @@ export const WalletProviderContext = ({
         setLoggedIn,
         showNextLoginModal,
         setShowNextLoginModal,
+        error,
       }}
     >
       {children}