Grant clipboard-write on iframe

Author: amircheikh

.changeset/beige-cycles-grab.md

@@ -0,0 +1,5 @@
+---
+"@turnkey/react-wallet-kit": patch
+---
+
+Added optional `clearClipboardOnPaste` to `handleImportWallet` and `handleImportPrivateKey`. Defaulting to true, this will create the import iframe with `clipboard-write` permissions. Allows clipboard to be cleared after pasting in secrets to import.

.changeset/loose-women-run.md

@@ -0,0 +1,5 @@
+---
+"@turnkey/iframe-stamper": patch
+---
+
+Updated `TIframeStamperConfig` to include `clearClipboardOnPaste`. Defaulting to true, this will grant the iframe `clipboard-write` permissions. Allows clipboard to be cleared after pasting in secrets to import.

packages/iframe-stamper/src/index.ts

@@ -100,6 +100,8 @@ export type TIframeStamperConfig = {
   iframeUrl: string;
   iframeElementId: string;
   iframeContainer: HTMLElement | null | undefined;
+  // If true, the iframe will clear the clipboard when pasting into it. Defaults to true.
+  clearClipboardOnPaste?: boolean | undefined;
 };
 
 export type TIframeStyles = {
@@ -208,6 +210,10 @@ export class IframeStamper {
     iframe.id = config.iframeElementId;
     iframe.src = config.iframeUrl;
 
+    if (config.clearClipboardOnPaste ?? true) {
+      iframe.allow = "clipboard-write"; // Clipboard will clear when pasting in the iframe
+    }
+
     this.iframe = iframe;
     const iframeUrl = new URL(config.iframeUrl);
     this.iframeOrigin = iframeUrl.origin;

packages/react-wallet-kit/src/components/import/Import.tsx

@@ -39,6 +39,7 @@ export function ImportComponent(props: {
   onError: (error: TurnkeyError) => void;
   successPageDuration?: number | undefined; // Duration in milliseconds for the success page to show. If 0, it will not show the success page.
   stampWith?: StamperType | undefined;
+  clearClipboardOnPaste?: boolean | undefined;
   name?: string;
   organizationId?: string;
   userId?: string;
@@ -51,6 +52,7 @@ export function ImportComponent(props: {
     onError,
     defaultWalletAccounts,
     successPageDuration,
+    clearClipboardOnPaste,
     stampWith,
     name,
   } = props;
@@ -121,6 +123,7 @@ export function ImportComponent(props: {
           iframeContainer: document.getElementById(
             TurnkeyImportIframeContainerId,
           ),
+          clearClipboardOnPaste,
         });
         await newImportIframeClient.init();
         await newImportIframeClient.applySettings({

packages/react-wallet-kit/src/providers/client/Provider.tsx

@@ -3996,6 +3996,7 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
         successPageDuration = 2000,
         stampWith,
         walletName,
+        clearClipboardOnPaste,
         organizationId,
         userId,
       } = params || {};
@@ -4018,6 +4019,9 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
                     {...(successPageDuration !== undefined && {
                       successPageDuration,
                     })}
+                    {...(clearClipboardOnPaste !== undefined && {
+                      clearClipboardOnPaste, // Note: This is defaulted to true in the IframeStamper
+                    })}
                     {...(stampWith !== undefined && { stampWith })}
                     {...(walletName !== undefined && { name: walletName })}
                     {...(organizationId !== undefined && { organizationId })}
@@ -4050,6 +4054,7 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
         successPageDuration = 2000,
         stampWith,
         keyName,
+        clearClipboardOnPaste,
         organizationId,
       } = params || {};
       try {
@@ -4070,6 +4075,9 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
                     {...(successPageDuration !== undefined && {
                       successPageDuration,
                     })}
+                    {...(clearClipboardOnPaste !== undefined && {
+                      clearClipboardOnPaste, // Note: This is defaulted to true in the IframeStamper
+                    })}
                     {...(stampWith !== undefined && { stampWith })}
                     {...(keyName !== undefined && { name: keyName })}
                     {...(organizationId !== undefined && { organizationId })}

packages/react-wallet-kit/src/providers/client/Types.tsx

@@ -380,6 +380,7 @@ export type ClientContextType = Override<
      * @param params.successPageDuration - duration (in ms) for the success page after import (default: 0, no success page).
      * @param params.stampWith - parameter to specify the stamper to use for the import (Passkey, ApiKey, or Wallet).
      * @param params.walletName - name for the imported wallet, if not provided, an input box will be shown for the name.
+     * @param params.clearClipboardOnPaste - whether to clear the clipboard after pasting the import bundle (default: true).
      * @param params.organizationId - The organization ID to target (defaults to the session's organization ID or the parent organization ID).
      * @param params.userId - The user ID to target (defaults to the session's user ID).
      *
@@ -402,6 +403,7 @@ export type ClientContextType = Override<
      * @param params.successPageDuration - duration (in ms) for the success page after import (default: 0, no success page).
      * @param params.stampWith - parameter to specify the stamper to use for the import (Passkey, ApiKey, or Wallet).
      * @param params.keyName - name for the imported private key, if not provided, an input box will be shown for the name.
+     * @param params.clearClipboardOnPaste - whether to clear the clipboard after pasting the import bundle (default: true).
      * @param params.organizationId - The organization ID to target (defaults to the session's organization ID or the parent organization ID).
      * @param params.userId - The user ID to target (defaults to the session's user ID).
      *

packages/react-wallet-kit/src/types/method-types.ts

@@ -122,6 +122,7 @@ export type HandleImportWalletParams = {
   successPageDuration?: number | undefined; // Duration in milliseconds for the success page to show. If 0, it will not show the success page.
   stampWith?: StamperType | undefined;
   walletName?: string;
+  clearClipboardOnPaste?: boolean | undefined; // If true, the clipboard will be cleared when pasting into the import iframe. Defaults to true.
   organizationId?: string;
   userId?: string;
 };
@@ -132,6 +133,7 @@ export type HandleImportPrivateKeyParams = {
   successPageDuration?: number | undefined; // Duration in milliseconds for the success page to show. If 0, it will not show the success page.
   stampWith?: StamperType | undefined;
   keyName?: string;
+  clearClipboardOnPaste?: boolean | undefined; // If true, the clipboard will be cleared when pasting into the import iframe. Defaults to true.
   organizationId?: string;
   userId?: string;
 };