New export example

[oliviathet]

Summary & Motivation

This PR demonstrates export functionality for Wallet resources.

• wallet-export: get a list of your organization's wallets and export a wallet as a mnemonic.

This also adds iframeStyle as a configuration option for the iframe-stamper since we display the iframe if the export bundle is successfully injected.

Important Note on Security:

Turnkey's key export service will allow end-users to export their raw private key or wallet mnemonic by leveraging a secure channel directly between a Turnkey secure enclave and the user's device. This is achieved by the parent page embedding the Turnkey export page as an iframe using the @turnkey/iframe-stamper package introduced in #129. In the iframe, the end-user's keypair is generated and only the public key is ever shared with the parent page or Turnkey. A Turnkey secure enclave receives the public key, generates its own keypair, computes the shared secret, and encrypts the private key material to the shared secret. The resulting encrypted "export bundle" and public key from the Turnkey enclave are returned to the parent page. The parent page injects the "export bundle" in the Turnkey iframe stamper, which decrypts the bundle in the iframe. More information will be available soon in the official Turnkey docs.

[socket-security]

No top level dependency changes detected. Learn more about Socket for GitHub ↗︎

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[r-n-o]

Nice work overall! My main concern is 1 vs 2 examples for export: I think we can get away with a single one? I don't have a super strong opinion about that though, so if you want to stick with 2 I'm definitely fine with it!

[r-n-o]

I'm wondering if this styling can be achieved by targeting the iframe element ID (instead of having a new iframeStyle property):

#turnkey-iframe-element-id {
  border: none;
  width: 600px;
  height: 200px;
}

[oliviathet]

i tried this a few different ways before having a new iframeStyle property and i might be missing something, but it didn't work :(

[oliviathet]

wait a second... somehow i got something ELSE to work lol.... will push it in a second! but alas iframeStyle can be removed after all

[oliviathet]

.walletIframe iframe {
  border: none;
  width: 600px;
  height: 600px;
}

and

<div
  style={{ display: showWallet ? "block" : "none" }}
  id={TurnkeyIframeContainerId}
  className={styles.walletIframe}
/>

[r-n-o]

Awesome!

[r-n-o]

Just a note: it'd be nice to have some validation at this level (synchronous) to make sure the bundle has the right length / looks like a good bundle. Doesn't have to be part of this PR because this also affects injectRecoveryBundle :)

[oliviathet]

thanks for pointing that out! will add a reminder to self to add validation across the 3 injection functions