feat: add in app wallet private key export

Author: ElasticBottle

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") {

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: {
       }}
     >
       <Container p="lg">
-        <ModalHeader title="Export Private Key" onBack={props.onBack} />
+        <ModalHeader
+          title={props.connectLocale.manageWallet.exportPrivateKey}
+          onBack={props.onBack}
+        />
       </Container>
       <Line />
       <Container
@@ -68,6 +123,7 @@ export function PrivateKey(props: {
             }}
           >
             <iframe
+              id={`export-wallet-${props.wallet.id}`}
               title="Export In-App Wallet"
               style={{
                 width: "100%",
@@ -78,9 +134,7 @@ export function PrivateKey(props: {
                 setLoading(false);
               }}
               allow="clipboard-read; clipboard-write"
-              src={`${
-                baseDomain.includes("localhost") ? "http" : "https"
-              }://${baseDomain}/sdk/2022-08-12/embedded-wallet/export-private-key?clientId=${
+              src={`${baseDomain}/sdk/2022-08-12/embedded-wallet/export-private-key?clientId=${
                 props.client.clientId
               }&theme=${
                 typeof props.theme === "string" ? props.theme : props.theme.type