From 4cf941142f77209814a2c55c6edde314711c1894 Mon Sep 17 00:00:00 2001 From: Olivia Thet Date: Thu, 7 Dec 2023 17:19:11 -0500 Subject: [PATCH 1/5] use container element instead of id for iframe stamper constructor. update auth, recovery, export examples. clean up export example --- examples/email-auth/src/components/Auth.tsx | 43 ++++++----- .../src/components/Recovery.tsx | 43 ++++++----- .../wallet-export/src/components/Export.tsx | 75 +++++++++++++++++++ examples/wallet-export/src/pages/index.tsx | 41 +++------- packages/iframe-stamper/CHANGELOG.md | 6 ++ packages/iframe-stamper/README.md | 11 ++- packages/iframe-stamper/src/index.ts | 10 +-- 7 files changed, 150 insertions(+), 79 deletions(-) create mode 100644 examples/wallet-export/src/components/Export.tsx diff --git a/examples/email-auth/src/components/Auth.tsx b/examples/email-auth/src/components/Auth.tsx index 34c6ebc4f..dde17b460 100644 --- a/examples/email-auth/src/components/Auth.tsx +++ b/examples/email-auth/src/components/Auth.tsx @@ -18,24 +18,33 @@ export function Auth(props: AuthProps) { ); useEffect(() => { - if (!iframeStamper) { - const iframeStamper = new IframeStamper({ - iframeUrl: props.iframeUrl, - iframeContainerId: TurnkeyIframeContainerId, - iframeElementId: TurnkeyIframeElementId, - }); - iframeStamper.init().then(() => { - setIframeStamper(iframeStamper); - props.setIframeStamper(iframeStamper); - }); - } - - return () => { - if (iframeStamper) { - iframeStamper.clear(); - setIframeStamper(null); + try { + if (!iframeStamper) { + const iframeContainer = document.getElementById(TurnkeyIframeContainerId); + if (!iframeContainer) { + console.error(`Cannot create iframe stamper: no container with ID ${TurnkeyIframeContainerId} exists`); + return; + } + const iframeStamper = new IframeStamper({ + iframeUrl: props.iframeUrl, + iframeContainer, + iframeElementId: TurnkeyIframeElementId, + }); + iframeStamper.init().then(() => { + setIframeStamper(iframeStamper); + props.setIframeStamper(iframeStamper); + }); } - }; + + return () => { + if (iframeStamper) { + iframeStamper.clear(); + setIframeStamper(null); + } + }; + } catch (error) { + console.error('Error initializing iframe stamper:', error); + } }, [props, iframeStamper, setIframeStamper]); return
; diff --git a/examples/email-recovery/src/components/Recovery.tsx b/examples/email-recovery/src/components/Recovery.tsx index 77169986f..4c42fd87e 100644 --- a/examples/email-recovery/src/components/Recovery.tsx +++ b/examples/email-recovery/src/components/Recovery.tsx @@ -18,24 +18,33 @@ export function Recovery(props: RecoveryProps) { ); useEffect(() => { - if (!iframeStamper) { - const iframeStamper = new IframeStamper({ - iframeUrl: props.iframeUrl, - iframeContainerId: TurnkeyIframeContainerId, - iframeElementId: TurnkeyIframeElementId, - }); - iframeStamper.init().then(() => { - setIframeStamper(iframeStamper); - props.setIframeStamper(iframeStamper); - }); - } - - return () => { - if (iframeStamper) { - iframeStamper.clear(); - setIframeStamper(null); + try { + if (!iframeStamper) { + const iframeContainer = document.getElementById(TurnkeyIframeContainerId); + if (!iframeContainer) { + console.error(`Cannot create iframe stamper: no container with ID ${TurnkeyIframeContainerId} exists`); + return; + } + const iframeStamper = new IframeStamper({ + iframeUrl: props.iframeUrl, + iframeContainer, + iframeElementId: TurnkeyIframeElementId, + }); + iframeStamper.init().then(() => { + setIframeStamper(iframeStamper); + props.setIframeStamper(iframeStamper); + }); } - }; + + return () => { + if (iframeStamper) { + iframeStamper.clear(); + setIframeStamper(null); + } + }; + } catch (error) { + console.error('Error initializing iframe stamper:', error); + } }, [props, iframeStamper, setIframeStamper]); return
; diff --git a/examples/wallet-export/src/components/Export.tsx b/examples/wallet-export/src/components/Export.tsx new file mode 100644 index 000000000..b4caee6f1 --- /dev/null +++ b/examples/wallet-export/src/components/Export.tsx @@ -0,0 +1,75 @@ +"use client"; + +import { IframeStamper } from "@turnkey/iframe-stamper"; +import { Dispatch, SetStateAction, useEffect, useState } from "react"; + +interface ExportProps { + iframeUrl: string; + turnkeyBaseUrl: string; + iframeDisplay: string; + setIframeStamper: Dispatch>; +} + +const TurnkeyIframeContainerId = "turnkey-iframe-container-id"; +const TurnkeyIframeElementId = "turnkey-iframe-element-id"; + +export function Export(props: ExportProps) { + const [iframeStamper, setIframeStamper] = useState( + null + ); + const [iframeDisplay, setIframeDisplay] = useState("none"); + + useEffect(() => { + setIframeDisplay(props.iframeDisplay); + return () => { + if (iframeDisplay === "block") { + setIframeDisplay("none"); + } + }; + + }, [props.iframeDisplay]); + + useEffect(() => { + try { + if (!iframeStamper) { + const iframeContainer = document.getElementById(TurnkeyIframeContainerId); + if (!iframeContainer) { + console.error(`Cannot create iframe stamper: no container with ID ${TurnkeyIframeContainerId} exists`); + return; + } + const iframeStamper = new IframeStamper({ + iframeUrl: props.iframeUrl, + iframeContainer, + iframeElementId: TurnkeyIframeElementId, + }); + iframeStamper.init().then(() => { + setIframeStamper(iframeStamper); + props.setIframeStamper(iframeStamper); + }); + } + + return () => { + if (iframeStamper) { + iframeStamper.clear(); + setIframeStamper(null); + } + }; + } catch (error) { + console.error('Error initializing iframe stamper:', error); + } + }, [props.setIframeStamper, iframeStamper, setIframeStamper]); + + const iframeCss = ` + iframe { + width: 400px; + height: 340px; + border: none; + } + `; + + return ( +
+ +
+ ); +} diff --git a/examples/wallet-export/src/pages/index.tsx b/examples/wallet-export/src/pages/index.tsx index 5de98ec82..33efe5375 100644 --- a/examples/wallet-export/src/pages/index.tsx +++ b/examples/wallet-export/src/pages/index.tsx @@ -5,42 +5,19 @@ import { IframeStamper } from "@turnkey/iframe-stamper"; import * as React from "react"; import { useEffect, useState } from "react"; import axios from "axios"; +import { Export } from "@/components/Export"; import { WalletsTable } from "@/components/WalletsTable"; type TWallet = TurnkeyApiTypes["v1Wallet"]; -const TurnkeyIframeContainerId = "turnkey-iframe-container-id"; -const TurnkeyIframeElementId = "turnkey-iframe-element-id"; - export default function ExportPage() { const [wallets, setWallets] = useState([]); const [iframeStamper, setIframeStamper] = useState( null ); - const [showWallet, setShowWallet] = useState(false); + const [iframeDisplay, setIframeDisplay] = useState("none"); const [selectedWallet, setSelectedWallet] = useState(null); - // Initialize the iframeStamper - useEffect(() => { - if (!iframeStamper) { - const iframeStamper = new IframeStamper({ - iframeUrl: process.env.NEXT_PUBLIC_EXPORT_IFRAME_URL!, - iframeContainerId: TurnkeyIframeContainerId, - iframeElementId: TurnkeyIframeElementId, - }); - iframeStamper.init().then(() => { - setIframeStamper(iframeStamper); - }); - } - - return () => { - if (iframeStamper) { - iframeStamper.clear(); - setIframeStamper(null); - } - }; - }, [iframeStamper]); - // Get wallets useEffect(() => { getWallets(); @@ -72,7 +49,7 @@ export default function ExportPage() { throw new Error("unexpected error while injecting export bundle"); } - setShowWallet(true); + setIframeDisplay("block"); }; return ( @@ -126,11 +103,13 @@ export default function ExportPage() { )} -
+ + ); } diff --git a/packages/iframe-stamper/CHANGELOG.md b/packages/iframe-stamper/CHANGELOG.md index e981433eb..7a0a8e894 100644 --- a/packages/iframe-stamper/CHANGELOG.md +++ b/packages/iframe-stamper/CHANGELOG.md @@ -1,5 +1,11 @@ # @turnkey/iframe-stamper +## 1.0.0 + +### Major Changes + +- This breaking change uses an HTML element instead of an ID to reference the iframe's container. + ## 0.4.1 ### Patch Changes diff --git a/packages/iframe-stamper/README.md b/packages/iframe-stamper/README.md index 6bf94971e..2525d3601 100644 --- a/packages/iframe-stamper/README.md +++ b/packages/iframe-stamper/README.md @@ -2,7 +2,7 @@ [![npm](https://img.shields.io/npm/v/@turnkey/iframe-stamper?color=%234C48FF)](https://www.npmjs.com/package/@turnkey/iframe-stamper) -This package contains functions to stamp a Turnkey request through credentials contained in an iframe. It is meant to be used with [`@turnkey/http`](https://www.npmjs.com/package/@turnkey/http) to build flows. +This package contains functions to stamp a Turnkey request through credentials contained in an iframe. It is meant to be used with [`@turnkey/http`](https://www.npmjs.com/package/@turnkey/http) to build flows. To stamp the request, use the Recovery and Auth flows to request and inject a credential bundle. Usage: @@ -12,12 +12,11 @@ Recovery and Auth import { IframeStamper } from "@turnkey/iframe-stamper"; import { TurnkeyClient } from "@turnkey/http"; -const TurnkeyIframeContainerId = "turnkey-iframe-container"; const TurnkeyIframeElementId = "turnkey-iframe"; const iframeStamper = new IframeStamper({ iframeUrl: process.env.IFRAME_URL!, - iframeContainerId: TurnkeyIframeContainerId, + iframeContainer: document.getElementById(TurnkeyIframeContainerId), iframeElementId: TurnkeyIframeElementId, }); @@ -45,13 +44,13 @@ const TurnkeyIframeElementId = "turnkey-iframe"; const iframeStamper = new IframeStamper({ iframeUrl: process.env.IFRAME_URL!, - iframeContainerId: TurnkeyIframeContainerId, + iframeContainer: document.getElementById(TurnkeyIframeContainerId), iframeElementId: TurnkeyIframeElementId, }); // This inserts the iframe in the DOM and returns the public key const publicKey = await iframeStamper.init(); -// Injects a new private key in the iframe -const injected = await iframeStamper.injectKeyExportBundle(exportBundle); +// Injects a new wallet in the iframe +const injected = await iframeStamper.injectWalletExportBundle(exportBundle); ``` diff --git a/packages/iframe-stamper/src/index.ts b/packages/iframe-stamper/src/index.ts index 48733b0b2..e1770f4ee 100644 --- a/packages/iframe-stamper/src/index.ts +++ b/packages/iframe-stamper/src/index.ts @@ -39,7 +39,7 @@ type TStamp = { export type TIframeStamperConfig = { iframeUrl: string; iframeElementId: string; - iframeContainerId: string; + iframeContainer: HTMLElement; }; /** @@ -67,13 +67,7 @@ export class IframeStamper { ); } - const container = document.getElementById(config.iframeContainerId); - if (!container) { - throw new Error( - `Cannot create iframe stamper: no container with ID ${config.iframeContainerId} exists in the current document` - ); - } - this.container = container; + this.container = config.iframeContainer; let iframe = window.document.createElement("iframe"); iframe.id = config.iframeElementId; From 4f3f563c39cc5d2f975290318afc745c998b9caf Mon Sep 17 00:00:00 2001 From: Olivia Thet Date: Thu, 7 Dec 2023 17:23:34 -0500 Subject: [PATCH 2/5] iframe stamper readme typo --- packages/iframe-stamper/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/iframe-stamper/README.md b/packages/iframe-stamper/README.md index 2525d3601..6399b01c0 100644 --- a/packages/iframe-stamper/README.md +++ b/packages/iframe-stamper/README.md @@ -12,6 +12,7 @@ Recovery and Auth import { IframeStamper } from "@turnkey/iframe-stamper"; import { TurnkeyClient } from "@turnkey/http"; +const TurnkeyIframeContainerId = "turnkey-iframe-container"; const TurnkeyIframeElementId = "turnkey-iframe"; const iframeStamper = new IframeStamper({ From 6794fec5b3e0ad768d84bc5783899f247ca5dacb Mon Sep 17 00:00:00 2001 From: Olivia Thet Date: Thu, 7 Dec 2023 17:28:22 -0500 Subject: [PATCH 3/5] export wallet copy --- .../wallet-export/src/pages/index.module.css | 15 +++++---------- examples/wallet-export/src/pages/index.tsx | 16 +++++++++------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/examples/wallet-export/src/pages/index.module.css b/examples/wallet-export/src/pages/index.module.css index 38925db50..337d2d2d6 100644 --- a/examples/wallet-export/src/pages/index.module.css +++ b/examples/wallet-export/src/pages/index.module.css @@ -140,30 +140,25 @@ color: #fff; } -.copyKey { +.reveal { display: flex; flex-direction: column; align-items: center; } -.copyKey h2 { +.reveal h2 { text-align: center; font-family: "Inter"; padding-top: 40px; } -.copyKey ul { +.reveal ul { margin-top: 0; + text-align: justify; } -.copyKey p { +.reveal p { font-family: "Inter"; font-size: 14px; color: #555b64; } - -.walletIframe iframe { - border: none; - width: 600px; - height: 600px; -} diff --git a/examples/wallet-export/src/pages/index.tsx b/examples/wallet-export/src/pages/index.tsx index 33efe5375..0486d9946 100644 --- a/examples/wallet-export/src/pages/index.tsx +++ b/examples/wallet-export/src/pages/index.tsx @@ -74,21 +74,23 @@ export default function ExportPage() { )} {selectedWallet && ( -
-

Wallet seedphrase

+
+

Before you continue

- You are about to reveal your wallet seedphrase. By revealing this - seedphrase you understand that: + By revealing the private key, you understand and agree that:

  • -

    Your seedphrase is the only way to recover your funds.

    +

    You should never share your private key with anyone, including the Turnkey team. Turnkey will never ask you for your private key.

  • -

    Do not let anyone see your seedphrase.

    +

    You are responsible for the security of this private key and any assets associated with it, and Turnkey cannot help recover it on your behalf. Failure to properly secure your private key may result in total loss of the associated assets.

  • -

    Never share your seedphrase with anyone, including Turnkey.

    +

    Turnkey is not responsible for any other wallet you may use with this private key, and Turnkey does not represent that any other software or hardware will be compatible with or protect your private key.

    +
    • +
  • +

    You have read and agree to Turnkey{"\'"}s Terms of Service, including the risks related to exporting your private key disclosed therein.

From e1b9a6630a71c59d0463bc0a9d50d4d3be117251 Mon Sep 17 00:00:00 2001 From: Olivia Thet Date: Tue, 12 Dec 2023 23:26:41 -0500 Subject: [PATCH 4/5] iframe container can be null or undefined --- examples/email-auth/src/components/Auth.tsx | 7 +------ .../email-recovery/src/components/Recovery.tsx | 7 +------ examples/wallet-export/src/components/Export.tsx | 16 ++++++++-------- .../wallet-export/src/pages/index.module.css | 1 + .../iframe-stamper/src/__tests__/iframe-test.ts | 2 +- packages/iframe-stamper/src/index.ts | 11 +++++++---- 6 files changed, 19 insertions(+), 25 deletions(-) diff --git a/examples/email-auth/src/components/Auth.tsx b/examples/email-auth/src/components/Auth.tsx index dde17b460..844a5179e 100644 --- a/examples/email-auth/src/components/Auth.tsx +++ b/examples/email-auth/src/components/Auth.tsx @@ -20,14 +20,9 @@ export function Auth(props: AuthProps) { useEffect(() => { try { if (!iframeStamper) { - const iframeContainer = document.getElementById(TurnkeyIframeContainerId); - if (!iframeContainer) { - console.error(`Cannot create iframe stamper: no container with ID ${TurnkeyIframeContainerId} exists`); - return; - } const iframeStamper = new IframeStamper({ iframeUrl: props.iframeUrl, - iframeContainer, + iframeContainer: document.getElementById(TurnkeyIframeContainerId), iframeElementId: TurnkeyIframeElementId, }); iframeStamper.init().then(() => { diff --git a/examples/email-recovery/src/components/Recovery.tsx b/examples/email-recovery/src/components/Recovery.tsx index 4c42fd87e..995e5b47e 100644 --- a/examples/email-recovery/src/components/Recovery.tsx +++ b/examples/email-recovery/src/components/Recovery.tsx @@ -20,14 +20,9 @@ export function Recovery(props: RecoveryProps) { useEffect(() => { try { if (!iframeStamper) { - const iframeContainer = document.getElementById(TurnkeyIframeContainerId); - if (!iframeContainer) { - console.error(`Cannot create iframe stamper: no container with ID ${TurnkeyIframeContainerId} exists`); - return; - } const iframeStamper = new IframeStamper({ iframeUrl: props.iframeUrl, - iframeContainer, + iframeContainer: document.getElementById(TurnkeyIframeContainerId), iframeElementId: TurnkeyIframeElementId, }); iframeStamper.init().then(() => { diff --git a/examples/wallet-export/src/components/Export.tsx b/examples/wallet-export/src/components/Export.tsx index b4caee6f1..d29206549 100644 --- a/examples/wallet-export/src/components/Export.tsx +++ b/examples/wallet-export/src/components/Export.tsx @@ -32,14 +32,9 @@ export function Export(props: ExportProps) { useEffect(() => { try { if (!iframeStamper) { - const iframeContainer = document.getElementById(TurnkeyIframeContainerId); - if (!iframeContainer) { - console.error(`Cannot create iframe stamper: no container with ID ${TurnkeyIframeContainerId} exists`); - return; - } const iframeStamper = new IframeStamper({ iframeUrl: props.iframeUrl, - iframeContainer, + iframeContainer: document.getElementById(TurnkeyIframeContainerId), iframeElementId: TurnkeyIframeElementId, }); iframeStamper.init().then(() => { @@ -61,9 +56,14 @@ export function Export(props: ExportProps) { const iframeCss = ` iframe { + box-sizing: border-box; width: 400px; - height: 340px; - border: none; + height: 120px; + border-radius: 8px; + border-width: 1px; + border-style: solid; + border-color: rgba(216, 219, 227, 1); + padding: 20px; } `; diff --git a/examples/wallet-export/src/pages/index.module.css b/examples/wallet-export/src/pages/index.module.css index 337d2d2d6..28207698c 100644 --- a/examples/wallet-export/src/pages/index.module.css +++ b/examples/wallet-export/src/pages/index.module.css @@ -144,6 +144,7 @@ display: flex; flex-direction: column; align-items: center; + width: 600px; } .reveal h2 { diff --git a/packages/iframe-stamper/src/__tests__/iframe-test.ts b/packages/iframe-stamper/src/__tests__/iframe-test.ts index feff3e406..e3b59d547 100644 --- a/packages/iframe-stamper/src/__tests__/iframe-test.ts +++ b/packages/iframe-stamper/src/__tests__/iframe-test.ts @@ -5,7 +5,7 @@ test("throws when instantiated outside of a browser environment", async function expect(() => { new IframeStamper({ iframeUrl: "https://recovery.tkhqlabs.xyz", - iframeContainerId: "my-container-id", + iframeContainer: null, iframeElementId: "my-iframe-id", }); }).toThrow("Cannot initialize iframe in non-browser environment"); diff --git a/packages/iframe-stamper/src/index.ts b/packages/iframe-stamper/src/index.ts index e1770f4ee..1f4f1dbef 100644 --- a/packages/iframe-stamper/src/index.ts +++ b/packages/iframe-stamper/src/index.ts @@ -39,7 +39,7 @@ type TStamp = { export type TIframeStamperConfig = { iframeUrl: string; iframeElementId: string; - iframeContainer: HTMLElement; + iframeContainer: HTMLElement | null | undefined; }; /** @@ -61,14 +61,17 @@ export class IframeStamper { throw new Error("Cannot initialize iframe in non-browser environment"); } - if (document.getElementById(config.iframeElementId)) { + if (!config.iframeContainer) { + throw new Error("Iframe container cannot be found"); + } + this.container = config.iframeContainer; + + if (this.container.querySelector(`#${config.iframeElementId}`)) { throw new Error( `Iframe element with ID ${config.iframeElementId} already exists` ); } - this.container = config.iframeContainer; - let iframe = window.document.createElement("iframe"); iframe.id = config.iframeElementId; iframe.src = config.iframeUrl; From a71d6ed5053e5e3f5213533182282372e44a0b50 Mon Sep 17 00:00:00 2001 From: Olivia Thet Date: Tue, 12 Dec 2023 23:34:45 -0500 Subject: [PATCH 5/5] run prettier. remove try catch --- examples/email-auth/src/components/Auth.tsx | 38 ++++++++---------- .../src/components/Recovery.tsx | 38 ++++++++---------- .../wallet-export/src/components/Export.tsx | 39 ++++++++----------- examples/wallet-export/src/pages/index.tsx | 33 ++++++++++++---- 4 files changed, 77 insertions(+), 71 deletions(-) diff --git a/examples/email-auth/src/components/Auth.tsx b/examples/email-auth/src/components/Auth.tsx index 844a5179e..51e50d2b9 100644 --- a/examples/email-auth/src/components/Auth.tsx +++ b/examples/email-auth/src/components/Auth.tsx @@ -18,28 +18,24 @@ export function Auth(props: AuthProps) { ); useEffect(() => { - try { - if (!iframeStamper) { - const iframeStamper = new IframeStamper({ - iframeUrl: props.iframeUrl, - iframeContainer: document.getElementById(TurnkeyIframeContainerId), - iframeElementId: TurnkeyIframeElementId, - }); - iframeStamper.init().then(() => { - setIframeStamper(iframeStamper); - props.setIframeStamper(iframeStamper); - }); - } - - return () => { - if (iframeStamper) { - iframeStamper.clear(); - setIframeStamper(null); - } - }; - } catch (error) { - console.error('Error initializing iframe stamper:', error); + if (!iframeStamper) { + const iframeStamper = new IframeStamper({ + iframeUrl: props.iframeUrl, + iframeContainer: document.getElementById(TurnkeyIframeContainerId), + iframeElementId: TurnkeyIframeElementId, + }); + iframeStamper.init().then(() => { + setIframeStamper(iframeStamper); + props.setIframeStamper(iframeStamper); + }); } + + return () => { + if (iframeStamper) { + iframeStamper.clear(); + setIframeStamper(null); + } + }; }, [props, iframeStamper, setIframeStamper]); return
; diff --git a/examples/email-recovery/src/components/Recovery.tsx b/examples/email-recovery/src/components/Recovery.tsx index 995e5b47e..4b298efba 100644 --- a/examples/email-recovery/src/components/Recovery.tsx +++ b/examples/email-recovery/src/components/Recovery.tsx @@ -18,28 +18,24 @@ export function Recovery(props: RecoveryProps) { ); useEffect(() => { - try { - if (!iframeStamper) { - const iframeStamper = new IframeStamper({ - iframeUrl: props.iframeUrl, - iframeContainer: document.getElementById(TurnkeyIframeContainerId), - iframeElementId: TurnkeyIframeElementId, - }); - iframeStamper.init().then(() => { - setIframeStamper(iframeStamper); - props.setIframeStamper(iframeStamper); - }); - } - - return () => { - if (iframeStamper) { - iframeStamper.clear(); - setIframeStamper(null); - } - }; - } catch (error) { - console.error('Error initializing iframe stamper:', error); + if (!iframeStamper) { + const iframeStamper = new IframeStamper({ + iframeUrl: props.iframeUrl, + iframeContainer: document.getElementById(TurnkeyIframeContainerId), + iframeElementId: TurnkeyIframeElementId, + }); + iframeStamper.init().then(() => { + setIframeStamper(iframeStamper); + props.setIframeStamper(iframeStamper); + }); } + + return () => { + if (iframeStamper) { + iframeStamper.clear(); + setIframeStamper(null); + } + }; }, [props, iframeStamper, setIframeStamper]); return
; diff --git a/examples/wallet-export/src/components/Export.tsx b/examples/wallet-export/src/components/Export.tsx index d29206549..97f61b15e 100644 --- a/examples/wallet-export/src/components/Export.tsx +++ b/examples/wallet-export/src/components/Export.tsx @@ -26,32 +26,27 @@ export function Export(props: ExportProps) { setIframeDisplay("none"); } }; - }, [props.iframeDisplay]); useEffect(() => { - try { - if (!iframeStamper) { - const iframeStamper = new IframeStamper({ - iframeUrl: props.iframeUrl, - iframeContainer: document.getElementById(TurnkeyIframeContainerId), - iframeElementId: TurnkeyIframeElementId, - }); - iframeStamper.init().then(() => { - setIframeStamper(iframeStamper); - props.setIframeStamper(iframeStamper); - }); - } - - return () => { - if (iframeStamper) { - iframeStamper.clear(); - setIframeStamper(null); - } - }; - } catch (error) { - console.error('Error initializing iframe stamper:', error); + if (!iframeStamper) { + const iframeStamper = new IframeStamper({ + iframeUrl: props.iframeUrl, + iframeContainer: document.getElementById(TurnkeyIframeContainerId), + iframeElementId: TurnkeyIframeElementId, + }); + iframeStamper.init().then(() => { + setIframeStamper(iframeStamper); + props.setIframeStamper(iframeStamper); + }); } + + return () => { + if (iframeStamper) { + iframeStamper.clear(); + setIframeStamper(null); + } + }; }, [props.setIframeStamper, iframeStamper, setIframeStamper]); const iframeCss = ` diff --git a/examples/wallet-export/src/pages/index.tsx b/examples/wallet-export/src/pages/index.tsx index 0486d9946..92794d41b 100644 --- a/examples/wallet-export/src/pages/index.tsx +++ b/examples/wallet-export/src/pages/index.tsx @@ -76,21 +76,40 @@ export default function ExportPage() { {selectedWallet && (

Before you continue

-

- By revealing the private key, you understand and agree that: -

+

By revealing the private key, you understand and agree that:

  • -

    You should never share your private key with anyone, including the Turnkey team. Turnkey will never ask you for your private key.

    +

    + You should never share your private key with anyone, including + the Turnkey team. Turnkey will never ask you for your private + key. +

  • -

    You are responsible for the security of this private key and any assets associated with it, and Turnkey cannot help recover it on your behalf. Failure to properly secure your private key may result in total loss of the associated assets.

    +

    + You are responsible for the security of this private key and any + assets associated with it, and Turnkey cannot help recover it on + your behalf. Failure to properly secure your private key may + result in total loss of the associated assets. +

  • -

    Turnkey is not responsible for any other wallet you may use with this private key, and Turnkey does not represent that any other software or hardware will be compatible with or protect your private key.

    +

    + Turnkey is not responsible for any other wallet you may use with + this private key, and Turnkey does not represent that any other + software or hardware will be compatible with or protect your + private key. +

  • -

    You have read and agree to Turnkey{"\'"}s Terms of Service, including the risks related to exporting your private key disclosed therein.

    +

    + You have read and agree to{" "} + + Turnkey{"'"}s Terms of Service + + , including the risks related to exporting your private key + disclosed therein. +