Headless Embedded Wallet Export

Introduction

This functionality is only available on V2.1.0-alpha.11 of the SDK and above.

You can use the SDK to headlessly reveal the private key or recovery phrase of an embedded wallet.

We will use the revealWalletKey method from the useEmbeddedWallet hook, which has the following signature:

revealWalletKey: (options?: {
        type: "recoveryPhrase" | "privateKey";
        htmlContainerId?: string | undefined;
    } | undefined) => Promise<boolean>;

As you can see, the method takes an object with two properties:

• type: The type of key you want to reveal. It can be either recoveryPhrase or privateKey.
• htmlContainerId: The id of the HTML element where the key will be displayed. You must have a div present in your component with this id.

Full code example

import { FC, useState } from 'react';

import { useEmbeddedWallet, useIsLoggedIn } from '@dynamic-labs/sdk-react-core';

export const Reveal: FC = () => {
  const isLoggedIn = useIsLoggedIn();
  const { revealWalletKey } = useEmbeddedWallet();
  const [result, setResult] = useState<string | undefined>(undefined);

  const onSubmitHandler = async (
    selectedKey: 'recoveryPhrase' | 'privateKey',
  ) => {
    try {
      await revealWalletKey({
        htmlContainerId: 'reveal-example-container-id',
        type: selectedKey,
      });
    } catch (error) {
      setResult(JSON.stringify(error, null, 2));
    }
  };

  return (
    <div>
      {isLoggedIn ? 
        <div className='reveal-method'>
          <p>
            Choose which type of key you want to reveal from the embedded wallet
          </p>

          <button onClick={() => onSubmitHandler('privateKey')}>
            Reveal private key
          </button>
          <button onClick={() => onSubmitHandler('recoveryPhrase')}>
            Reveal recovery phrase
          </button>
          {result}
          <div id='reveal-example-container-id'></div>
        </div>
      : 
        <p>Please log in to continue.</p>
      }
    <div>
  );
};