Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Andrew/import export upgrade #413

Closed
wants to merge 9 commits into from
Closed

Andrew/import export upgrade #413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a8b8938
add new sdk-react clients
andrewkmin Nov 2, 2024
eb501a4
add new sdk-react clients
andrewkmin Nov 2, 2024
2b18a76
update sdk packages
andrewkmin Nov 2, 2024
24d8499
wip: components -- iframes not displayed
andrewkmin Nov 2, 2024
471554b
wip: fix import export
andrewkmin Nov 3, 2024
763319e
lint sdk libraries
andrewkmin Nov 4, 2024
250ebac
update example
andrewkmin Nov 4, 2024
6113c29
maintain iframe display state
andrewkmin Nov 4, 2024
c3b01a8
more ideation
andrewkmin Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions examples/wallet-import-export/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
"@turnkey/api-key-stamper": "workspace:*",
"@turnkey/http": "workspace:*",
"@turnkey/iframe-stamper": "workspace:*",
"@types/node": "20.3.1",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
"@turnkey/sdk-react": "workspace:*",
"@turnkey/sdk-browser": "workspace:*",
"@turnkey/sdk-server": "workspace:*",
"axios": "^1.7.4",
"classnames": "^2.3.2",
"encoding": "^0.1.13",
Expand All @@ -30,5 +30,10 @@
"react-dom": "18.2.0",
"react-hook-form": "^7.45.1",
"typescript": "5.1.3"
},
"devDependencies": {
"@types/node": "20.3.1",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6"
}
}
124 changes: 55 additions & 69 deletions examples/wallet-import-export/src/components/Export.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,52 @@
"use client";

import { IframeStamper } from "@turnkey/iframe-stamper";
import { useTurnkey } from "@turnkey/sdk-react";
import { Dispatch, SetStateAction, useEffect, useState } from "react";

const TurnkeyIframeContainerId = "turnkey-export-iframe-container-id";

interface ExportProps {
iframeUrl: string;
turnkeyBaseUrl: string;
iframeDisplay: string;
setIframeStamper: Dispatch<SetStateAction<IframeStamper | null>>;
}

const TurnkeyIframeContainerId = "turnkey-export-iframe-container-id";
const TurnkeyIframeElementId = "turnkey-export-iframe-element-id";
const styles = {
padding: "20px",
borderRadius: "8px",
borderWidth: "2px",
borderStyle: "solid",
borderColor: "#ff6961",
fontFamily: "monospace",
color: "#333",
width: "340px",
height: "100px",
backgroundColor: "#ffd966",
boxShadow: "0px 0px 10px #aaa",
overflowWrap: "break-word",
wordWrap: "break-word",
resize: "none",
};

const iframeCss = `
iframe {
box-sizing: border-box;
width: 400px;
height: 120px;
border-radius: 8px;
border-width: 1px;
border-style: solid;
border-color: rgba(216, 219, 227, 1);
padding: 20px;
}
`;

export function Export(props: ExportProps) {
const [iframeStamper, setIframeStamper] = useState<IframeStamper | null>(
null
);
const { exportIframeClient } = useTurnkey();
const [iframeDisplay, setIframeDisplay] = useState<string>("none");

useEffect(() => {
console.log("iframe display", iframeDisplay);
console.log("props iframe display", props.iframeDisplay);

setIframeDisplay(props.iframeDisplay);
return () => {
if (iframeDisplay === "block") {
Expand All @@ -28,69 +55,28 @@ export function Export(props: ExportProps) {
};
}, [props.iframeDisplay]);

useEffect(() => {
if (!iframeStamper) {
const iframeStamper = new IframeStamper({
iframeUrl: props.iframeUrl,
iframeContainer: document.getElementById(TurnkeyIframeContainerId),
iframeElementId: TurnkeyIframeElementId,
});
iframeStamper
.init()
.then(() => {
setIframeStamper(iframeStamper);
props.setIframeStamper(iframeStamper);
return iframeStamper;
})
.then((iframeStamper: IframeStamper) => {
const styles = {
padding: "20px",
borderRadius: "8px",
borderWidth: "2px",
borderStyle: "solid",
borderColor: "#ff6961",
fontFamily: "monospace",
color: "#333",
width: "340px",
height: "100px",
backgroundColor: "#ffd966",
boxShadow: "0px 0px 10px #aaa",
overflowWrap: "break-word",
wordWrap: "break-word",
resize: "none",
};
return iframeStamper.applySettings({ styles });
})
.then((settingsApplied: boolean) => {
if (settingsApplied !== true) {
alert("Unexpected error while applying settings.");
}
if (exportIframeClient) {
useEffect(() => {
(async () => {
const injected = await exportIframeClient!.init();
console.log("injected", injected);

const settingsApplied = await exportIframeClient!.applySettings({
styles,
});
}

return () => {
if (iframeStamper) {
iframeStamper.clear();
setIframeStamper(null);
}
};
}, [props.setIframeStamper, iframeStamper, setIframeStamper]);

const iframeCss = `
iframe {
box-sizing: border-box;
width: 400px;
height: 120px;
border-radius: 8px;
border-width: 1px;
border-style: solid;
border-color: rgba(216, 219, 227, 1);
padding: 20px;
}
`;
if (!settingsApplied) {
alert("Unexpected error while applying settings.");
return;
}
})();
}, []);
}

return (
<div style={{ display: iframeDisplay }} id={TurnkeyIframeContainerId}>
<div
id={TurnkeyIframeContainerId}
style={{ display: iframeDisplay }}
>
<style>{iframeCss}</style>
</div>
);
Expand Down
25 changes: 7 additions & 18 deletions examples/wallet-import-export/src/components/ExportWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

import axios from "axios";
import { useEffect, useState } from "react";
import { useTurnkey } from "@turnkey/sdk-react";

import styles from "../pages/index.module.css";
import { IframeStamper } from "@turnkey/iframe-stamper";
import { Export } from "@/components/Export";

type ExportWalletProps = {
Expand All @@ -13,29 +13,23 @@ type ExportWalletProps = {
};

export function ExportWallet(props: ExportWalletProps) {
const [iframeDisplay, setIframeDisplay] = useState("none");
const [iframeStamper, setIframeStamper] = useState<IframeStamper | null>(
null
);
const { exportIframeClient } = useTurnkey();
const [stage, setStage] = useState("export");
const [iframeDisplay, setIframeDisplay] = useState("none");

// TODO: check if this is necessary
useEffect(() => {
setIframeDisplay("none");
}, []);

// Export the selected wallet and set the iframe to be visible
const exportWallet = async () => {
if (iframeStamper === null) {
alert("Cannot export wallet without an iframe.");
return;
}

const response = await axios.post("/api/exportWallet", {
walletId: props.walletId,
targetPublicKey: iframeStamper.publicKey(),
targetPublicKey: exportIframeClient!.iframePublicKey,
});

let injected = await iframeStamper.injectWalletExportBundle(
let injected = await exportIframeClient!.injectWalletExportBundle(
response.data["exportBundle"],
props.organizationId
);
Expand Down Expand Up @@ -102,12 +96,7 @@ export function ExportWallet(props: ExportWalletProps) {
</div>
</div>
)}
<Export
setIframeStamper={setIframeStamper}
iframeDisplay={iframeDisplay}
iframeUrl={process.env.NEXT_PUBLIC_EXPORT_IFRAME_URL!}
turnkeyBaseUrl={process.env.NEXT_PUBLIC_BASE_URL!}
/>
<Export iframeDisplay={iframeDisplay} />
</div>
</div>
);
Expand Down
119 changes: 52 additions & 67 deletions examples/wallet-import-export/src/components/Import.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,48 @@
"use client";

import { IframeStamper } from "@turnkey/iframe-stamper";
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { useTurnkey } from "@turnkey/sdk-react";
import { useEffect, useState } from "react";

const TurnkeyIframeContainerId = "turnkey-import-iframe-container-id";

interface ImportProps {
iframeUrl: string;
turnkeyBaseUrl: string;
iframeDisplay: string;
setIframeStamper: Dispatch<SetStateAction<IframeStamper | null>>;
}

const TurnkeyIframeContainerId = "turnkey-import-iframe-container-id";
const TurnkeyIframeElementId = "turnkey-import-iframe-element-id";
const styles = {
padding: "20px",
borderRadius: "8px",
borderWidth: "2px",
borderStyle: "solid",
borderColor: "#ff6961",
fontFamily: "monospace",
color: "#333",
width: "340px",
height: "100px",
backgroundColor: "#fff3f3",
boxShadow: "0px 0px 10px #aaa",
overflowWrap: "break-word",
wordWrap: "break-word",
resize: "none",
};

const iframeCss = `
iframe {
box-sizing: border-box;
width: 400px;
height: 180px;
border: none;
}
`;

export function Import(props: ImportProps) {
const [iframeStamper, setIframeStamper] = useState<IframeStamper | null>(
null
);
const { importIframeClient } = useTurnkey();
const [iframeDisplay, setIframeDisplay] = useState<string>("none");

useEffect(() => {
console.log("iframe display", iframeDisplay);
console.log("props iframe display", props.iframeDisplay);

setIframeDisplay(props.iframeDisplay);
return () => {
if (iframeDisplay === "block") {
Expand All @@ -28,66 +51,28 @@ export function Import(props: ImportProps) {
};
}, [props.iframeDisplay]);

useEffect(() => {
if (!iframeStamper) {
const iframeStamper = new IframeStamper({
iframeUrl: props.iframeUrl,
iframeContainer: document.getElementById(TurnkeyIframeContainerId),
iframeElementId: TurnkeyIframeElementId,
});
iframeStamper
.init()
.then(() => {
setIframeStamper(iframeStamper);
props.setIframeStamper(iframeStamper);
return iframeStamper;
})
.then((iframeStamper: IframeStamper) => {
const styles = {
padding: "20px",
borderRadius: "8px",
borderWidth: "2px",
borderStyle: "solid",
borderColor: "#ff6961",
fontFamily: "monospace",
color: "#333",
width: "340px",
height: "100px",
backgroundColor: "#fff3f3",
boxShadow: "0px 0px 10px #aaa",
overflowWrap: "break-word",
wordWrap: "break-word",
resize: "none",
};
return iframeStamper.applySettings({ styles });
})
.then((settingsApplied: boolean) => {
if (settingsApplied !== true) {
alert("Unexpected error while applying settings.");
return;
}
});
}

return () => {
if (iframeStamper) {
iframeStamper.clear();
setIframeStamper(null);
}
};
}, [props.setIframeStamper, iframeStamper, setIframeStamper]);
if (importIframeClient) {
useEffect(() => {
(async () => {
const injected = await importIframeClient!.init();
console.log("injected", injected);

const iframeCss = `
iframe {
box-sizing: border-box;
width: 400px;
height: 180px;
border: none;
}
`;
const settingsApplied = await importIframeClient!.applySettings({
styles,
});
if (!settingsApplied) {
alert("Unexpected error while applying settings.");
return;
}
})();
}, []);
}

return (
<div style={{ display: iframeDisplay }} id={TurnkeyIframeContainerId}>
<div
id={TurnkeyIframeContainerId}
style={{ display: iframeDisplay }}
>
<style>{iframeCss}</style>
</div>
);
Expand Down
Loading
Loading