diff --git a/.changeset/smooth-hounds-kneel.md b/.changeset/smooth-hounds-kneel.md new file mode 100644 index 00000000000..9fc8ccf74f3 --- /dev/null +++ b/.changeset/smooth-hounds-kneel.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +enable private key export for enclave wallets upon initial login diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx index e2bf3292aa9..4c1de4ce13e 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx @@ -882,6 +882,7 @@ function DetailsModal(props: { }} wallet={activeWallet} client={client} + connectLocale={locale} /> ); } else if (screen === "manage-wallet") { diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/PrivateKey.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/PrivateKey.tsx index c2a3cb1322c..c9734449218 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/PrivateKey.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/PrivateKey.tsx @@ -1,13 +1,16 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import type { ThirdwebClient } from "../../../../../client/client.js"; -import { getThirdwebDomains } from "../../../../../utils/domains.js"; +import { getThirdwebBaseUrl } from "../../../../../utils/domains.js"; +import { webLocalStorage } from "../../../../../utils/storage/webStorage.js"; import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js"; +import { ClientScopedStorage } from "../../../../../wallets/in-app/core/authentication/client-scoped-storage.js"; import type { Wallet } from "../../../../../wallets/interfaces/wallet.js"; import type { Theme } from "../../../../core/design-system/index.js"; import { Spacer } from "../../components/Spacer.js"; import { Spinner } from "../../components/Spinner.js"; import { Container, Line, ModalHeader } from "../../components/basic.js"; +import type { ConnectLocale } from "../locale/types.js"; /** * @internal @@ -17,13 +20,62 @@ export function PrivateKey(props: { wallet?: Wallet; theme: "light" | "dark" | Theme; client: ThirdwebClient; + connectLocale: ConnectLocale; }) { const [isLoading, setLoading] = useState(true); + useEffect(() => { + const loginReady = async (e: MessageEvent<{ eventType: string }>) => { + if ( + typeof e.data === "object" && + "eventType" in e.data && + e.origin === baseDomain + ) { + if (e.data.eventType === "exportPrivateKeyIframeLoaded") { + const iframe = document.getElementById( + `export-wallet-${props.wallet?.id}`, + ); + + if (!(iframe instanceof HTMLIFrameElement)) { + return; + } + if (!props.wallet) { + return; + } + + const clientStorage = new ClientScopedStorage({ + clientId: props.client.clientId, + storage: webLocalStorage, + ecosystem: isEcosystemWallet(props.wallet) + ? { + id: props.wallet.id, + partnerId: props.wallet.getConfig()?.partnerId, + } + : undefined, + }); + if (iframe?.contentWindow) { + iframe.contentWindow.postMessage( + { + eventType: "initExportPrivateKey", + authToken: await clientStorage.getAuthCookie(), + }, + e.origin, + ); + } + } + } + }; + window.addEventListener("message", loginReady); + + return () => { + window.removeEventListener("message", loginReady); + }; + }, [props.wallet, props.client.clientId]); + if (!props.wallet) { throw new Error("[PrivateKey] No wallet found"); } - const baseDomain = getThirdwebDomains().inAppWallet; + const baseDomain = getThirdwebBaseUrl("inAppWallet"); const ecosystem = isEcosystemWallet(props.wallet) ? { id: props.wallet.id, partnerId: props.wallet.getConfig()?.partnerId } : undefined; @@ -35,7 +87,10 @@ export function PrivateKey(props: { }} > - +