New export example

examples/wallet-export/.env.local.example

@@ -0,0 +1,7 @@
+API_PUBLIC_KEY="<Turnkey API Public Key (that starts with 02 or 03)>"
+API_PRIVATE_KEY="<Turnkey API Private Key>"
+NEXT_PUBLIC_ORGANIZATION_ID="<Turnkey organization ID>"
+NEXT_PUBLIC_BASE_URL="https://api.turnkey.com"
+# Can be changed to a localhost iframe if you're modifying the export flow
+# For production, the URL should not be changed and point to the primary Turnkey domain.
+NEXT_PUBLIC_EXPORT_IFRAME_URL="https://export.turnkey.com"

examples/wallet-export/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/wallet-export/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/wallet-export/README.md

@@ -0,0 +1,52 @@
+# Example: `wallet-export`
+
+This example shows a wallet export flow. It contains a NextJS app with:
+
+- a frontend application
+- a backend application
+
+This example includes API stubs to get your wallets and export your wallet as a mnemonic. The creation of the iframe is abstracted by our `@turnkey/iframe-stamper` package.
+
+## Getting started
+
+### 1/ Cloning the example
+
+Make sure you have `node` installed locally; we recommend using Node v16+.
+
+```bash
+$ git clone https://github.com/tkhq/sdk
+$ cd sdk/
+$ corepack enable  # Install `pnpm`
+$ pnpm install -r  # Install dependencies
+$ pnpm run build-all  # Compile source code
+$ cd examples/wallet-export/
+```
+
+### 2/ Setting up Turnkey
+
+The first step is to set up your Turnkey organization and account. By following the [Quickstart](https://docs.turnkey.com/getting-started/quickstart) guide, you should have:
+
+- A public/private API key pair for Turnkey
+- An organization ID
+
+Once you've gathered these values, add them to a new `.env.local` file. Notice that your API private key should be securely managed and **_never_** be committed to git.
+
+```bash
+$ cp .env.local.example .env.local
+```
+
+Now open `.env.local` and add the missing environment variables:
+
+- `API_PUBLIC_KEY`
+- `API_PRIVATE_KEY`
+- `NEXT_PUBLIC_ORGANIZATION_ID`
+- `NEXT_PUBLIC_BASE_URL` (the `NEXT_PUBLIC` prefix makes the env variable accessible to the frontend app)
+- `NEXT_PUBLIC_EXPORT_IFRAME_URL`
+
+### 3/ Running the app
+
+```bash
+$ pnpm run dev
+```
+
+This command will run a NextJS app on port 3000. If you navigate to http://localhost:3000 in your browser, you can follow the prompts to export a private key.

examples/wallet-export/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;

examples/wallet-export/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@turnkey/example-wallet-export",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@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",
+    "axios": "^1.4.0",
+    "classnames": "^2.3.2",
+    "encoding": "^0.1.13",
+    "eslint": "8.43.0",
+    "eslint-config-next": "13.4.7",
+    "esm": "^3.2.25",
+    "install": "^0.13.0",
+    "next": "13.4.7",
+    "npm": "^9.7.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.1",
+    "typescript": "5.1.3"
+  }
+}

examples/wallet-export/src/components/WalletsTable.tsx

@@ -0,0 +1,71 @@
+import Image from "next/image";
+import styles from "../pages/index.module.css";
+import { TurnkeyApiTypes } from "@turnkey/http";
+import * as React from "react";
+import { Dispatch, SetStateAction } from "react";
+import cx from "classnames";
+
+type TWallet = TurnkeyApiTypes["v1Wallet"];
+
+type WalletsTableProps = {
+  wallets: TWallet[];
+  setSelectedWallet: Dispatch<SetStateAction<string | null>>;
+};
+
+export function WalletsTable(props: WalletsTableProps) {
+  return (
+    <div>
+      <table className={styles.table}>
+        <thead className={styles.tableHeader}>
+          <tr>
+            <th className={cx(styles.tableHeaderCell, styles.exportCol)}></th>
+            <th className={cx(styles.tableHeaderCell, styles.walletNameCol)}>
+              Wallet name
+            </th>
+            <th className={cx(styles.tableHeaderCell, styles.walletIdCol)}>
+              Wallet ID
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.wallets.length > 0 ? (
+            props.wallets.map((val, key) => {
+              return (
+                <tr className={styles.tableRow} key={key}>
+                  <td className={styles.cell}>
+                    <button
+                      className={styles.exportButton}
+                      onClick={() => {
+                        props.setSelectedWallet(val.walletId);
+                      }}
+                    >
+                      <Image
+                        src="/export.svg"
+                        alt="Export"
+                        width={12}
+                        height={12}
+                        priority
+                      />
+                    </button>
+                  </td>
+                  <td className={styles.cell}>
+                    <p>{val.walletName}</p>
+                  </td>
+                  <td className={styles.cell}>
+                    <p className={styles.idCell}>{val.walletId}</p>
+                  </td>
+                </tr>
+              );
+            })
+          ) : (
+            <tr className={cx(styles.tableRow, styles.noWallets)}>
+              <td colSpan={3}>
+                <p>You have not created any wallets.</p>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

examples/wallet-export/src/pages/_document.tsx

@@ -0,0 +1,19 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class Example extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default Example;

examples/wallet-export/src/pages/api/exportWallet.ts

@@ -0,0 +1,70 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { TurnkeyClient, createActivityPoller } from "@turnkey/http";
+import { ApiKeyStamper } from "@turnkey/api-key-stamper";
+
+type ExportWalletRequest = {
+  walletId: string;
+  targetPublicKey: string;
+};
+
+type ExportWalletResponse = {
+  walletId: string;
+  exportBundle: string;
+};
+
+type ErrorMessage = {
+  message: string;
+};
+
+export default async function exportWallet(
+  req: NextApiRequest,
+  res: NextApiResponse<ExportWalletResponse | ErrorMessage>
+) {
+  try {
+    const request = req.body as ExportWalletRequest;
+    const turnkeyClient = new TurnkeyClient(
+      { baseUrl: process.env.NEXT_PUBLIC_BASE_URL! },
+      new ApiKeyStamper({
+        apiPublicKey: process.env.API_PUBLIC_KEY!,
+        apiPrivateKey: process.env.API_PRIVATE_KEY!,
+      })
+    );
+
+    const activityPoller = createActivityPoller({
+      client: turnkeyClient,
+      requestFn: turnkeyClient.exportWallet,
+    });
+
+    const completedActivity = await activityPoller({
+      type: "ACTIVITY_TYPE_EXPORT_WALLET",
+      timestampMs: String(Date.now()),
+      organizationId: process.env.NEXT_PUBLIC_ORGANIZATION_ID!,
+      parameters: {
+        walletId: request.walletId,
+        targetPublicKey: request.targetPublicKey,
+      },
+    });
+
+    const walletId = completedActivity.result.exportWalletResult?.walletId;
+    if (!walletId) {
+      throw new Error("Expected a non-null wallet ID!");
+    }
+
+    const exportBundle =
+      completedActivity.result.exportWalletResult?.exportBundle;
+    if (!exportBundle) {
+      throw new Error("Expected a non-null export bundle!");
+    }
+
+    res.status(200).json({
+      walletId,
+      exportBundle,
+    });
+  } catch (e) {
+    console.error(e);
+
+    res.status(500).json({
+      message: "Something went wrong.",
+    });
+  }
+}