-
goToHome()}>
-
+
+
SFA Passkey
+
{isLoggedIn && (
);
-};
+}
export default Header;
diff --git a/example/react-app/src/components/Loader.tsx b/example/react-app/src/components/Loader.tsx
index 700466a..c5422f7 100644
--- a/example/react-app/src/components/Loader.tsx
+++ b/example/react-app/src/components/Loader.tsx
@@ -1,17 +1,17 @@
import web3authLogo from "../assets/web3authLogoBlue.svg";
-const Loader = () => {
+function Loader() {
return (
-
-
+
+
We will be there in a few seconds.
);
-};
+}
export default Loader;
diff --git a/example/react-app/src/components/NftServices.tsx b/example/react-app/src/components/NftServices.tsx
index e838b49..63c9ab4 100644
--- a/example/react-app/src/components/NftServices.tsx
+++ b/example/react-app/src/components/NftServices.tsx
@@ -1,14 +1,15 @@
-import Button from "./Button";
-import Card from "./Card";
-import nftSample from "../assets/nftSample.svg";
import { useEffect, useState } from "react";
+
+import nftSample from "../assets/nftSample.svg";
import config from "../config";
import { usePlayground } from "../services/playground";
+import Button from "./Button";
+import Card from "./Card";
const FREE_MINT_CONTRACT_ID = "b5b4de3f-0212-11ef-a08f-0242ac190003";
const PAID_MINT_CONTRACT_ID = "d1145a8b-98ae-44e0-ab63-2c9c8371caff";
-const DocsDetails = () => {
+function DocsDetails() {
const [showNftMinting, setShowNftMinting] = useState(false);
const [showNftPurchase, setShowNftPurchase] = useState(false);
const { address: receiverAddress } = usePlayground();
@@ -108,5 +109,5 @@ const DocsDetails = () => {
)}
);
-};
+}
export default DocsDetails;
diff --git a/example/react-app/src/components/Passkeys.tsx b/example/react-app/src/components/Passkeys.tsx
index b988253..d9dbfa7 100644
--- a/example/react-app/src/components/Passkeys.tsx
+++ b/example/react-app/src/components/Passkeys.tsx
@@ -1,11 +1,11 @@
-import Card from "./Card";
-import { usePlayground } from "../services/playground";
import keyIcon from "../assets/keyIcon.svg";
+import { usePlayground } from "../services/playground";
+import Badge from "./Badge";
import Button from "./Button";
+import Card from "./Card";
import Divider from "./Divider";
-import Badge from "./Badge";
-const Passkeys = () => {
+function Passkeys() {
const { hasPasskeys, passkeys, registerPasskey } = usePlayground();
return (
@@ -28,7 +28,7 @@ const Passkeys = () => {
{hasPasskeys && (
- {passkeys.map((passkey, index) => (
+ {passkeys.map((passkey) => (
@@ -44,5 +44,5 @@ const Passkeys = () => {
)}
);
-};
+}
export default Passkeys;
diff --git a/example/react-app/src/components/ProtectedRoute.tsx b/example/react-app/src/components/ProtectedRoute.tsx
index 36e29bc..353a907 100644
--- a/example/react-app/src/components/ProtectedRoute.tsx
+++ b/example/react-app/src/components/ProtectedRoute.tsx
@@ -1,12 +1,13 @@
+import { ReactNode } from "react";
import { Navigate } from "react-router-dom";
+
import { usePlayground } from "../services/playground";
-import { ReactNode } from "react";
-export const ProtectedRoute = ({ children }: { children?: ReactNode }) => {
+export function ProtectedRoute({ children }: { children?: ReactNode }) {
const { isLoggedIn } = usePlayground();
if (!isLoggedIn) {
// user is not authenticated
return
;
}
return children;
-};
+}
diff --git a/example/react-app/src/components/WalletServices.tsx b/example/react-app/src/components/WalletServices.tsx
index fc02b2e..78e9901 100644
--- a/example/react-app/src/components/WalletServices.tsx
+++ b/example/react-app/src/components/WalletServices.tsx
@@ -1,21 +1,23 @@
-import Card from "./Card";
-import { usePlayground } from "../services/playground";
+import { log } from "@web3auth/base";
+import { useState } from "react";
+
import walletServices from "../assets/walletServices.svg";
+import { usePlayground } from "../services/playground";
import Button from "./Button";
-import { useState } from "react";
+import Card from "./Card";
-const WalletServices = () => {
+function WalletServices() {
const [signedMessage, setSignedMessage] = useState
("");
const [signingState, setSigningState] = useState<"success" | "error" | "">("");
const { showCheckout, showWalletUI, showWalletScanner, signMessage } = usePlayground();
- async function onSignMessage() {
+ const onSignMessage = async () => {
try {
const signature = await signMessage();
setSignedMessage(signature);
setSigningState("success");
} catch (error) {
- console.error(error);
+ log.error(error);
setSigningState("error");
} finally {
setTimeout(() => {
@@ -23,7 +25,7 @@ const WalletServices = () => {
setSigningState("");
}, 3000);
}
- }
+ };
return (
@@ -52,12 +54,12 @@ const WalletServices = () => {
{signedMessage && {signedMessage}
}
) : (
-
);
-};
+}
export default WalletServices;
diff --git a/example/react-app/src/evm.ethers.ts b/example/react-app/src/evm.ethers.ts
index e8aaca5..3b2c2f8 100644
--- a/example/react-app/src/evm.ethers.ts
+++ b/example/react-app/src/evm.ethers.ts
@@ -1,5 +1,5 @@
import type { IProvider } from "@web3auth/base";
-import { BrowserProvider, formatEther, parseEther } from "ethers";
+import { BrowserProvider, type Eip1193Provider, formatEther, parseEther } from "ethers";
export default class EthereumRpc {
private provider: IProvider;
@@ -8,20 +8,20 @@ export default class EthereumRpc {
this.provider = provider;
}
- async getChainId(): Promise
{
+ async getChainId(): Promise {
try {
const ethersProvider = new BrowserProvider(this.provider);
// Get the connected Chain's ID
const networkDetails = await ethersProvider.getNetwork();
- return networkDetails.chainId;
+ return networkDetails.chainId.toString();
} catch (error) {
- return error;
+ return error as string;
}
}
async getAccounts(): Promise {
try {
- const provider = new BrowserProvider(this.provider as any);
+ const provider = new BrowserProvider(this.provider as Eip1193Provider);
const signer = await provider.getSigner();
const account = await signer.getAddress();
return account;
@@ -32,7 +32,7 @@ export default class EthereumRpc {
async getBalance(): Promise {
try {
- const provider = new BrowserProvider(this.provider as any);
+ const provider = new BrowserProvider(this.provider as Eip1193Provider);
const signer = await provider.getSigner();
const account = await signer.getAddress();
// Get user's balance in ether
@@ -47,7 +47,7 @@ export default class EthereumRpc {
async signMessage(): Promise {
try {
- const provider = new BrowserProvider(this.provider as any);
+ const provider = new BrowserProvider(this.provider as Eip1193Provider);
const signer = await provider.getSigner();
const originalMessage = "YOUR_MESSAGE";
@@ -61,7 +61,7 @@ export default class EthereumRpc {
async signAndSendTransaction(): Promise {
try {
- const provider = new BrowserProvider(this.provider as any);
+ const provider = new BrowserProvider(this.provider as Eip1193Provider);
const signer = await provider.getSigner();
const address = await signer.getAddress();
diff --git a/example/react-app/src/evm.web3.ts b/example/react-app/src/evm.web3.ts
deleted file mode 100644
index b8c8d00..0000000
--- a/example/react-app/src/evm.web3.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import Web3 from "web3";
-import { IProvider } from "@web3auth/base";
-
-export default class EthereumRpc {
- private provider: IProvider;
-
- constructor(provider: IProvider) {
- this.provider = provider;
- }
- async getAccounts(): Promise {
- try {
- const web3 = new Web3(this.provider as any);
- const accounts = await web3.eth.getAccounts();
- return accounts;
- } catch (error: unknown) {
- return error as string[];
- }
- }
-
- async getChainId(): Promise {
- try {
- const web3Provider = new Web3(this.provider);
- // Get the connected Chain's ID
-
- return (await web3Provider.eth.net.getId()).toString(16);
- } catch (error) {
- return error;
- }
- }
-
- async getBalance(): Promise {
- try {
- const web3 = new Web3(this.provider as any);
- const accounts = await web3.eth.getAccounts();
- const balance = web3.utils.fromWei(await web3.eth.getBalance(accounts[0]), "ether");
- return parseFloat(balance).toString();
- } catch (error) {
- return error as string;
- }
- }
-
- async signMessage(): Promise {
- try {
- const web3 = new Web3(this.provider as any);
- const accounts = await web3.eth.getAccounts();
- const message = "0x47173285a8d7341e5e972fc677286384f802f8ef42a5ec5f03bbfa254cb01fad";
- const result = (web3.currentProvider as any)?.sendAsync({
- method: "eth_sign",
- params: [accounts[0], message],
- from: accounts[0],
- });
- return result;
- } catch (error) {
- return error as string;
- }
- }
-
- async signAndSendTransaction(): Promise {
- try {
- const web3 = new Web3(this.provider as any);
- const accounts = await web3.eth.getAccounts();
-
- const txRes = await web3.eth.sendTransaction({
- from: accounts[0],
- to: accounts[0],
- value: web3.utils.toWei("0.01", "ether"),
- });
- return txRes.transactionHash.toString();
- } catch (error) {
- return error as string;
- }
- }
-}
diff --git a/example/react-app/src/global.d.ts b/example/react-app/src/global.d.ts
new file mode 100644
index 0000000..df47fd4
--- /dev/null
+++ b/example/react-app/src/global.d.ts
@@ -0,0 +1,7 @@
+import { type Web3Auth } from "@web3auth/single-factor-auth";
+
+declare global {
+ interface Window {
+ web3auth: Web3Auth;
+ }
+}
diff --git a/example/react-app/src/hooks/window-dimensions.ts b/example/react-app/src/hooks/window-dimensions.ts
index b784666..9785b40 100644
--- a/example/react-app/src/hooks/window-dimensions.ts
+++ b/example/react-app/src/hooks/window-dimensions.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
diff --git a/example/react-app/src/index.css b/example/react-app/src/index.css
index 9406c62..8a52cda 100644
--- a/example/react-app/src/index.css
+++ b/example/react-app/src/index.css
@@ -4,16 +4,14 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
.sidebarHeading {
@@ -44,7 +42,6 @@ code {
padding: 1% 2.2%;
}
-
.loader {
@apply relative inline-flex h-[60px] w-[60px];
}
@@ -57,11 +54,7 @@ code {
border-radius: 100vw;
background-size: 100% 100%;
background-position: 0px 0px;
- background-image: conic-gradient(from 0deg at 50% 50%,
- #0364ff 0%,
- rgb(229, 231, 235, 0.8) 90deg,
- rgb(229, 231, 235, 0.8) 270deg,
- #0364ff 360deg);
+ background-image: conic-gradient(from 0deg at 50% 50%, #0364ff 0%, rgb(229, 231, 235, 0.8) 90deg, rgb(229, 231, 235, 0.8) 270deg, #0364ff 360deg);
-webkit-mask:
radial-gradient(farthest-side, #000 98%, #0000) center/85% 85% no-repeat,
@@ -76,4 +69,4 @@ code {
.loader-image {
@apply w-[40%] h-[40%] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
-}
\ No newline at end of file
+}
diff --git a/example/react-app/src/index.tsx b/example/react-app/src/index.tsx
index 6962bef..3c89617 100644
--- a/example/react-app/src/index.tsx
+++ b/example/react-app/src/index.tsx
@@ -1,9 +1,11 @@
-import ReactDOM from "react-dom/client";
import "./globals";
import "./index.css";
import "./App.css";
+
+import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
+
import router from "./router";
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
-root.render();
+root.render();
diff --git a/example/react-app/src/pages/HomePage.tsx b/example/react-app/src/pages/HomePage.tsx
index f0cbcaf..bb4b8b8 100644
--- a/example/react-app/src/pages/HomePage.tsx
+++ b/example/react-app/src/pages/HomePage.tsx
@@ -1,34 +1,39 @@
+import { log } from "@web3auth/base";
import { useEffect, useRef } from "react";
-import { usePlayground } from "../services/playground";
-import Loader from "../components/Loader";
-import Dialog from "../components/Dialog";
+
import Account from "../components/Account";
-import Passkeys from "../components/Passkeys";
-import WalletServices from "../components/WalletServices";
import Card from "../components/Card";
-import DocsDetails from "../components/DocsDetails";
import Console from "../components/Console";
+import Dialog, { DialogRef } from "../components/Dialog";
+import DocsDetails from "../components/DocsDetails";
+import Loader from "../components/Loader";
import NftServices from "../components/NftServices";
+import Passkeys from "../components/Passkeys";
+import WalletServices from "../components/WalletServices";
+import { usePlayground } from "../services/playground";
function HomePage() {
- const dialogHowRef = useRef(null);
+ const dialogHowRef = useRef(null);
const { isLoading, showRegisterPasskeyModal, registerPasskey, toggleRegisterPasskeyModal } = usePlayground();
function toggleDialog(open: boolean) {
if (!dialogHowRef.current) {
return;
}
- open ? dialogHowRef.current.showModal() : dialogHowRef.current.close();
+ if (open) {
+ dialogHowRef.current.show();
+ return;
+ }
+ dialogHowRef.current.close();
}
useEffect(() => {
toggleDialog(showRegisterPasskeyModal);
}, [showRegisterPasskeyModal]);
-
useEffect(() => {
document.title = "Home";
- console.log("Home Page");
+ log.info("Home Page");
});
return isLoading ? (
@@ -64,7 +69,7 @@ function HomePage() {
-
- {steps.map((step, index) => (
- -
-
{index + 1}
- {step}
+ {steps.map((step) => (
+ -
+
{step.index}
+ {step.text}
))}
diff --git a/example/react-app/src/router.tsx b/example/react-app/src/router.tsx
index 34c2753..b307834 100644
--- a/example/react-app/src/router.tsx
+++ b/example/react-app/src/router.tsx
@@ -1,24 +1,23 @@
-import { Navigate, Outlet, createBrowserRouter } from "react-router-dom";
-import LoginPage from "./pages/LoginPage";
-import Header from "./components/Header";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { createBrowserRouter, Navigate, Outlet } from "react-router-dom";
+
import CancelModal from "./components/CancelModal";
+import Header from "./components/Header";
+import LoginPage from "./pages/LoginPage";
import { Playground } from "./services/playground";
-import { GoogleOAuthProvider } from "@react-oauth/google";
const router = createBrowserRouter([
{
element: (
- <>
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
),
children: [
{
@@ -51,7 +50,7 @@ const router = createBrowserRouter([
{
path: "*",
- element:
,
+ element:
,
},
],
},
diff --git a/example/react-app/src/services/playground.tsx b/example/react-app/src/services/playground.tsx
index 451e737..f2fe92e 100644
--- a/example/react-app/src/services/playground.tsx
+++ b/example/react-app/src/services/playground.tsx
@@ -1,15 +1,15 @@
-import { CHAIN_NAMESPACES, IProvider, WEB3AUTH_NETWORK } from "@web3auth/base";
+import { CredentialResponse, googleLogout } from "@react-oauth/google";
+import { OpenloginUserInfo } from "@toruslabs/openlogin-utils";
+import { CHAIN_NAMESPACES, IProvider, log, WEB3AUTH_NETWORK } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
-import { createContext, ReactNode, useContext, useEffect, useState } from "react";
-
-// Import Single Factor Auth SDK for no redirect flow
-import { Web3Auth, ADAPTER_EVENTS, decodeToken } from "@web3auth/single-factor-auth";
import { PasskeysPlugin } from "@web3auth/passkeys-sfa-plugin";
+// Import Single Factor Auth SDK for no redirect flow
+import { ADAPTER_EVENTS, decodeToken, Web3Auth } from "@web3auth/single-factor-auth";
import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
-import { CredentialResponse, googleLogout } from "@react-oauth/google";
-import { shouldSupportPasskey } from "../utils";
-import { OpenloginUserInfo } from "@toruslabs/openlogin-utils";
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
+
import RPC from "../evm.ethers";
+import { shouldSupportPasskey } from "../utils";
type PasskeysData = {
id: string;
@@ -41,7 +41,7 @@ export interface IPlaygroundContext {
signMessage: () => Promise
;
sendTransaction: () => void;
toggleCancelModal: (isOpen: boolean) => void;
- toggleRegisterPasskeyModal: () => void;
+ toggleRegisterPasskeyModal: (isOpen: boolean) => void;
resetConsole: () => void;
}
@@ -109,7 +109,7 @@ export const chainConfigMain = {
// logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
// };
-export const Playground = ({ children }: IPlaygroundProps) => {
+export function Playground({ children }: IPlaygroundProps) {
const [web3authSFAuth, setWeb3authSFAuth] = useState(null);
const [provider, setProvider] = useState(null);
const [plugin, setPlugin] = useState(null);
@@ -129,39 +129,56 @@ export const Playground = ({ children }: IPlaygroundProps) => {
// Dialog
const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
- const onSuccess = async (response: CredentialResponse): Promise => {
- try {
- if (!web3authSFAuth) {
- console.log("Web3Auth Single Factor Auth SDK not initialized yet");
- return;
- }
- setIsLoading(true);
- const idToken = response.credential;
- if (!idToken) {
- setIsLoading(false);
- return;
- }
- const { payload } = decodeToken(idToken);
- await web3authSFAuth.connect({
- verifier,
- verifierId: (payload as any).email,
- idToken: idToken!,
- });
- setIsLoading(false);
- const res = await plugin?.listAllPasskeys();
- if (res && Object.values(res).length === 0) {
- setShowRegisterPasskeyModal(true);
- }
- uiConsole();
- } catch (err) {
- // Single Factor Auth SDK throws an error if the user has already enabled MFA
- // One can use the Web3AuthNoModal SDK to handle this case
- setIsLoading(false);
- console.error(err);
+ const uiConsole = (...args: unknown[]) => {
+ log.info(...args);
+ };
+
+ const toggleCancelModal = (isOpen: boolean) => {
+ if (isOpen) {
+ setTimeout(() => {
+ setIsCancelModalOpen(true);
+ }, 0);
+ } else {
+ setIsCancelModalOpen(false);
}
};
- const loginWithPasskey = async () => {
+ const onSuccess = useCallback(
+ async (response: CredentialResponse): Promise => {
+ try {
+ if (!web3authSFAuth) {
+ log.info("Web3Auth Single Factor Auth SDK not initialized yet");
+ return;
+ }
+ setIsLoading(true);
+ const idToken = response.credential;
+ if (!idToken) {
+ setIsLoading(false);
+ return;
+ }
+ const { payload } = decodeToken<{ email: string }>(idToken);
+ await web3authSFAuth.connect({
+ verifier,
+ verifierId: payload.email,
+ idToken: idToken!,
+ });
+ setIsLoading(false);
+ const res = await plugin?.listAllPasskeys();
+ if (res && Object.values(res).length === 0) {
+ setShowRegisterPasskeyModal(true);
+ }
+ uiConsole();
+ } catch (err) {
+ // Single Factor Auth SDK throws an error if the user has already enabled MFA
+ // One can use the Web3AuthNoModal SDK to handle this case
+ setIsLoading(false);
+ log.error(err);
+ }
+ },
+ [plugin, web3authSFAuth]
+ );
+
+ const loginWithPasskey = useCallback(async () => {
try {
setIsLoading(true);
if (!plugin) throw new Error("Passkey plugin not initialized");
@@ -173,14 +190,14 @@ export const Playground = ({ children }: IPlaygroundProps) => {
await plugin.loginWithPasskey();
uiConsole("Passkey logged in successfully");
} catch (error) {
- console.error((error as Error).message);
+ log.error((error as Error).message);
toggleCancelModal(true);
} finally {
setIsLoading(false);
}
- };
+ }, [plugin]);
- const registerPasskey = async () => {
+ const registerPasskey = useCallback(async () => {
try {
setIsLoading(true);
setShowRegisterPasskeyModal(false);
@@ -193,9 +210,9 @@ export const Playground = ({ children }: IPlaygroundProps) => {
uiConsole("Browser not supported");
return;
}
- const userInfo = await web3authSFAuth?.getUserInfo();
+ const sfaAuthUserInfo = await web3authSFAuth?.getUserInfo();
const res = await plugin?.registerPasskey({
- username: `google|${userInfo?.email || userInfo?.name} - ${new Date().toLocaleDateString("en-GB")}`,
+ username: `google|${sfaAuthUserInfo?.email || sfaAuthUserInfo?.name} - ${new Date().toLocaleDateString("en-GB")}`,
});
if (res) uiConsole("Passkey saved successfully");
} catch (error: unknown) {
@@ -204,19 +221,18 @@ export const Playground = ({ children }: IPlaygroundProps) => {
} finally {
setIsLoading(false);
}
- };
+ }, [hasPasskeys, plugin, web3authSFAuth]);
- const logout = async () => {
+ const logout = useCallback(async () => {
if (!web3authSFAuth) {
throw new Error("web3auth sfa auth not initialized.");
}
googleLogout();
await web3authSFAuth.logout();
uiConsole("Logged out");
- return;
- };
+ }, [web3authSFAuth]);
- const getUserInfo = async (): Promise => {
+ const getUserInfo = useCallback(async (): Promise => {
if (web3authSFAuth && web3authSFAuth?.connected) {
const useInfo = await web3authSFAuth?.getUserInfo();
setPlaygroundConsoleTitle("User Info Console");
@@ -224,29 +240,29 @@ export const Playground = ({ children }: IPlaygroundProps) => {
uiConsole(useInfo);
}
return null;
- };
+ }, [web3authSFAuth]);
- const showCheckout = async () => {
+ const showCheckout = useCallback(async () => {
if (!wsPlugin) {
uiConsole("wallet services plugin not initialized yet");
return;
}
if (chainId !== chainConfigMain.chainId) {
- console.warn("check: checkout not supported on testnets");
+ log.warn("check: checkout not supported on testnets");
return;
}
await wsPlugin.showCheckout();
- };
+ }, [chainId, wsPlugin]);
- const showWalletUI = async () => {
+ const showWalletUI = useCallback(async () => {
if (!wsPlugin) {
uiConsole("wallet services plugin not initialized yet");
return;
}
await wsPlugin.showWalletUi();
- };
+ }, [wsPlugin]);
- const signMessage = async (): Promise => {
+ const signMessage = useCallback(async (): Promise => {
if (!provider) {
uiConsole("No provider found");
return "";
@@ -260,9 +276,9 @@ export const Playground = ({ children }: IPlaygroundProps) => {
})) as string;
uiConsole(signedMessage);
return signedMessage;
- };
+ }, [address, provider, wsPlugin]);
- const sendTransaction = async () => {
+ const sendTransaction = useCallback(async () => {
if (!provider) {
uiConsole("No provider found");
return;
@@ -270,38 +286,24 @@ export const Playground = ({ children }: IPlaygroundProps) => {
const rpc = new RPC(provider);
const result = await rpc.signAndSendTransaction();
uiConsole(result);
- };
+ }, [provider]);
- const showWalletScanner = async () => {
+ const showWalletScanner = useCallback(async () => {
if (!wsPlugin) {
uiConsole("wallet services plugin not initialized yet");
return;
}
await wsPlugin.showWalletConnectScanner();
- };
+ }, [wsPlugin]);
- const toggleCancelModal = (isOpen: boolean) => {
- if (isOpen) {
- setTimeout(() => {
- setIsCancelModalOpen(true);
- }, 0);
- } else {
- setIsCancelModalOpen(false);
- }
- };
-
- const toggleRegisterPasskeyModal = () => {
- setShowRegisterPasskeyModal((prev) => !prev);
+ const toggleRegisterPasskeyModal = (isOpen: boolean) => {
+ setShowRegisterPasskeyModal(isOpen);
};
useEffect(() => {
setIsLoggedIn(!!(provider && web3authSFAuth));
}, [provider, web3authSFAuth]);
- const uiConsole = (...args: unknown[]) => {
- console.log(...args);
- };
-
const resetConsole = () => {
setPlaygroundConsoleData("");
setPlaygroundConsoleTitle("");
@@ -310,17 +312,17 @@ export const Playground = ({ children }: IPlaygroundProps) => {
useEffect(() => {
const init = async () => {
try {
- const provider = new EthereumPrivateKeyProvider({ config: { chainConfig: chainConfigMain } });
+ const ethPrivateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig: chainConfigMain } });
// Initialising Web3Auth Single Factor Auth SDK
const web3authSfa = new Web3Auth({
clientId, // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
usePnPKey: true, // Setting this to true returns the same key as PnP Web SDK, By default, this SDK returns CoreKitKey.
- privateKeyProvider: provider,
+ privateKeyProvider: ethPrivateKeyProvider,
});
- const plugin = new PasskeysPlugin();
- web3authSfa?.addPlugin(plugin);
- const wsPlugin = new WalletServicesPlugin({
+ const passkeyPlugin = new PasskeysPlugin();
+ web3authSfa?.addPlugin(passkeyPlugin);
+ const walletServicePlugin = new WalletServicesPlugin({
walletInitOptions: {
whiteLabel: {
logoLight: "https://web3auth.io/images/web3auth-logo.svg",
@@ -329,28 +331,24 @@ export const Playground = ({ children }: IPlaygroundProps) => {
confirmationStrategy: "modal",
},
});
- web3authSfa?.addPlugin(wsPlugin);
- setWsPlugin(wsPlugin);
- setPlugin(plugin);
+ web3authSfa?.addPlugin(walletServicePlugin);
+ setWsPlugin(walletServicePlugin);
+ setPlugin(passkeyPlugin);
web3authSfa.on(ADAPTER_EVENTS.CONNECTED, async (data) => {
- console.log("sfa:connected", data);
- console.log("sfa:state", web3authSfa?.state);
+ log.info("sfa:connected", data);
+ log.info("sfa:state", web3authSfa?.state);
setProvider(web3authSfa.provider);
if (web3authSfa.state.userInfo) setUserInfo(web3authSfa.state.userInfo);
// Get account data
- const rpc = new RPC(provider);
- const account = await rpc.getAccounts();
- if (account) setAddress(account);
+ const rpc = new RPC(ethPrivateKeyProvider);
+ const [account, rpcBalance, rpcChainId] = await Promise.all([rpc.getAccounts(), rpc.getBalance(), rpc.getChainId()]);
+ setAddress(account);
+ setBalance(rpcBalance);
+ setChainId(`0x${rpcChainId}`);
- const balance = await rpc.getBalance();
- setBalance(balance);
-
- const chainId = await rpc.getChainId();
- setChainId(`0x${chainId}`);
-
- const res = (await plugin?.listAllPasskeys()) as unknown as Record[];
+ const res = (await passkeyPlugin?.listAllPasskeys()) as unknown as Record[];
setHasPasskeys(res.length > 0);
setPasskeys(
res.map((passkey) => {
@@ -363,46 +361,75 @@ export const Playground = ({ children }: IPlaygroundProps) => {
})
);
});
+
web3authSfa.on(ADAPTER_EVENTS.DISCONNECTED, () => {
- console.log("sfa:disconnected");
+ log.info("sfa:disconnected");
setProvider(null);
});
+
setWeb3authSFAuth(web3authSfa);
await web3authSfa.init();
- (window as any).web3auth = web3authSfa;
+ window.web3auth = web3authSfa;
} catch (error) {
- console.error(error);
+ log.error(error);
}
};
init();
}, []);
- const contextProvider = {
- address,
- balance,
- chainId,
- isLoggedIn,
- isLoading,
- userInfo,
- playgroundConsoleTitle,
- playgroundConsoleData,
- hasPasskeys,
- passkeys,
- isCancelModalOpen,
- showRegisterPasskeyModal,
- onSuccess,
- loginWithPasskey,
- registerPasskey,
- logout,
- getUserInfo,
- showCheckout,
- showWalletUI,
- showWalletScanner,
- signMessage,
- sendTransaction,
- toggleCancelModal,
- toggleRegisterPasskeyModal,
- resetConsole,
- };
+
+ const contextProvider = useMemo(
+ () => ({
+ address,
+ balance,
+ chainId,
+ isLoggedIn,
+ isLoading,
+ userInfo,
+ playgroundConsoleTitle,
+ playgroundConsoleData,
+ hasPasskeys,
+ passkeys,
+ isCancelModalOpen,
+ showRegisterPasskeyModal,
+ onSuccess,
+ loginWithPasskey,
+ registerPasskey,
+ logout,
+ getUserInfo,
+ showCheckout,
+ showWalletUI,
+ showWalletScanner,
+ signMessage,
+ sendTransaction,
+ toggleCancelModal,
+ toggleRegisterPasskeyModal,
+ resetConsole,
+ }),
+ [
+ address,
+ balance,
+ chainId,
+ isLoggedIn,
+ isLoading,
+ userInfo,
+ playgroundConsoleTitle,
+ playgroundConsoleData,
+ hasPasskeys,
+ passkeys,
+ isCancelModalOpen,
+ showRegisterPasskeyModal,
+ onSuccess,
+ loginWithPasskey,
+ registerPasskey,
+ logout,
+ getUserInfo,
+ showCheckout,
+ showWalletUI,
+ showWalletScanner,
+ signMessage,
+ sendTransaction,
+ ]
+ );
return {children};
-};
+}
diff --git a/example/react-app/src/utils.ts b/example/react-app/src/utils.ts
index acd1bb8..77f9eeb 100644
--- a/example/react-app/src/utils.ts
+++ b/example/react-app/src/utils.ts
@@ -8,7 +8,7 @@ const getWindowsVersion = (osVersion: string) => {
if (match) return parseInt(match[1], 10);
return 0;
};
-
+
const checkIfOSIsSupported = (osName: string, osVersion: string) => {
if (!PASSKEYS_ALLOWED_MAP.includes(osName)) return false;
if (osName === bowser.OS_MAP.MacOS) return true;
@@ -60,6 +60,5 @@ export function shouldSupportPasskey(): { isBrowserSupported: boolean; isOsSuppo
}
export function browserSupportsWebAuthn() {
- return (window?.PublicKeyCredential !== undefined &&
- typeof window.PublicKeyCredential === 'function');
-}
\ No newline at end of file
+ return window?.PublicKeyCredential !== undefined && typeof window.PublicKeyCredential === "function";
+}
diff --git a/example/react-app/vite.config.ts b/example/react-app/vite.config.ts
index 93d17c0..8e41d5b 100644
--- a/example/react-app/vite.config.ts
+++ b/example/react-app/vite.config.ts
@@ -1,15 +1,22 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+/* eslint-disable import/no-extraneous-dependencies */
+import { resolve } from "node:path";
+
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
export default defineConfig(() => {
return {
build: {
- outDir: 'build',
+ outDir: "build",
+ sourcemap: false,
},
plugins: [react()],
server: {
open: true,
port: 3000,
- }
+ },
+ resolve: {
+ alias: { "bn.js": resolve("./node_modules/bn.js"), lodash: resolve("./node_modules/lodash-es") },
+ },
};
-});
\ No newline at end of file
+});
-