feat: add useExportAccount hook

[avasisht23]

Pull Request Checklist

• Did you add new tests and confirm existing tests pass? (yarn test)
• Did you update relevant docs? (docs are found in the site folder, and guidelines for updating/adding docs can be found in the contribution guide)
• Do your commits follow the Conventional Commits standard?
• Does your PR title also follow the Conventional Commits standard?
• If you have a breaking change, is it correctly reflected in your commit message? (e.g. feat!: breaking change)
• Did you run lint (yarn lint:check) and fix any issues? (yarn lint:write)
• Did you follow the contribution guidelines?

---

PR-Codex overview

This PR introduces a new useExportAccount hook for exporting account recovery details in Alchemy.

Detailed summary

• Added useExportAccount hook with related types and components
• Updated multiple files to implement and use the new hook
• Added documentation for useExportAccount hook in Markdown format

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

[moldy530]

same comment here as in the other ones -- docs :)

[rthomare]

How or why this should be used is not clear, we should document this and put some comments around it.

[avasisht23]

this is documented on the account kit docs and in the example snippet, but agree, also put js docs on this

[rthomare]

Why do we want to create a <style> element inside of the iframe container div?

What is the expected escape hatch you are trying to do here? I'm a little confused by that. Can we add what this does in documentation somewhere? (Hence the push for jsdocs)

Also if you are trying to add style to the iframe itself, why not just add it in line 68?

Side note you can always make iframeCss be a React.CSSProperties and then just merge object that with whatever existing styles you want? It'll probably make downstream code more type safe.

[moldy530]

The why is mainly because this is what turnkey's docs show for styling the iframe. Maybe it should be just css props and the style component always is like

iframe { ${iframeCSS} }

Or h/e that works

[avasisht23]

it's a little different even doing iframe { ${iframeCSS} } because if iframeCSS is React.CSSProperties then it's still not a css string: it's an object which we can't just stringify (keys need to go from camel case to kebab case, and we need to separate key-vals with ";")

b/c it's more typesafe, i've added a parser to continue doing the iframe styling as turnkey recommends @moldy530 @rthomare. lmk what you think.

[avasisht23]

just commenting to flag

[denniswon]

the code here in this hook assumes web environment.
Can we make it generic so that the client can also be non-web react environment but also react native? (i.e. webview)

The API between webview <> iframe should be similar/compatible, but haven't looked deeply myself yet if having a shared react hook for this hook between web vs native env would work/be better.

[avasisht23]

probably something we'd fast follow with, separating this as a devex improvement vs. net-new functionality for react native.

The base branch was changed.