Wallet private key export (#153)

Author: nikgraf

apps/events/src/components/export-wallet.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button';
+import { usePrivy } from '@privy-io/react-auth';
+
+export const ExportWallet = () => {
+  const { ready, authenticated, user, exportWallet } = usePrivy();
+  const isAuthenticated = ready && authenticated;
+  // check that your user has an embedded wallet
+  const hasEmbeddedWallet = !!user?.linkedAccounts.find(
+    (account) => account.type === 'wallet' && account.walletClientType === 'privy' && account.chainType === 'ethereum',
+  );
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold">Export Wallet</h1>
+      <Button onClick={exportWallet} disabled={!isAuthenticated || !hasEmbeddedWallet}>
+        Export my wallet
+      </Button>
+    </>
+  );
+};

apps/events/src/lib/create-ethereum-account.ts

@@ -0,0 +1,11 @@
+import { bytesToHex, randomBytes } from '@noble/hashes/utils';
+import { privateKeyToAccount } from 'viem/accounts';
+
+export const createEthereumAccount = () => {
+  const privateKey = `0x${bytesToHex(randomBytes(32))}` as `0x${string}`;
+  const account = privateKeyToAccount(privateKey);
+  return {
+    privateKey,
+    address: account.address,
+  };
+};

apps/events/src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
 import { Route as SpaceSpaceIdImport } from './routes/space/$spaceId'
+import { Route as SettingsExportWalletImport } from './routes/settings/export-wallet'
 
 // Create Virtual Routes
 
@@ -40,6 +41,12 @@ const SpaceSpaceIdRoute = SpaceSpaceIdImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const SettingsExportWalletRoute = SettingsExportWalletImport.update({
+  id: '/settings/export-wallet',
+  path: '/settings/export-wallet',
+  getParentRoute: () => rootRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -58,6 +65,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginLazyImport
       parentRoute: typeof rootRoute
     }
+    '/settings/export-wallet': {
+      id: '/settings/export-wallet'
+      path: '/settings/export-wallet'
+      fullPath: '/settings/export-wallet'
+      preLoaderRoute: typeof SettingsExportWalletImport
+      parentRoute: typeof rootRoute
+    }
     '/space/$spaceId': {
       id: '/space/$spaceId'
       path: '/space/$spaceId'
@@ -73,40 +87,50 @@ declare module '@tanstack/react-router' {
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/login': typeof LoginLazyRoute
+  '/settings/export-wallet': typeof SettingsExportWalletRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/login': typeof LoginLazyRoute
+  '/settings/export-wallet': typeof SettingsExportWalletRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/login': typeof LoginLazyRoute
+  '/settings/export-wallet': typeof SettingsExportWalletRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/login' | '/space/$spaceId'
+  fullPaths: '/' | '/login' | '/settings/export-wallet' | '/space/$spaceId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/login' | '/space/$spaceId'
-  id: '__root__' | '/' | '/login' | '/space/$spaceId'
+  to: '/' | '/login' | '/settings/export-wallet' | '/space/$spaceId'
+  id:
+    | '__root__'
+    | '/'
+    | '/login'
+    | '/settings/export-wallet'
+    | '/space/$spaceId'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   LoginLazyRoute: typeof LoginLazyRoute
+  SettingsExportWalletRoute: typeof SettingsExportWalletRoute
   SpaceSpaceIdRoute: typeof SpaceSpaceIdRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   LoginLazyRoute: LoginLazyRoute,
+  SettingsExportWalletRoute: SettingsExportWalletRoute,
   SpaceSpaceIdRoute: SpaceSpaceIdRoute,
 }
 
@@ -122,6 +146,7 @@ export const routeTree = rootRoute
       "children": [
         "/",
         "/login",
+        "/settings/export-wallet",
         "/space/$spaceId"
       ]
     },
@@ -131,6 +156,9 @@ export const routeTree = rootRoute
     "/login": {
       "filePath": "login.lazy.tsx"
     },
+    "/settings/export-wallet": {
+      "filePath": "settings/export-wallet.tsx"
+    },
     "/space/$spaceId": {
       "filePath": "space/$spaceId.tsx"
     }

apps/events/src/routes/__root.tsx

@@ -30,7 +30,10 @@ export const Route = createRootRoute({
             </Link>
             <nav className="ml-auto flex gap-4 sm:gap-6">
               {authenticated ? (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-4">
+                  <Link className="text-xs" to="/settings/export-wallet">
+                    Export Wallet
+                  </Link>
                   <span className="text-xs text-gray-500 dark:text-gray-400">
                     {identity?.accountId.substring(0, 6)}
                   </span>

apps/events/src/routes/settings/export-wallet.tsx

@@ -0,0 +1,14 @@
+import { ExportWallet } from '@/components/export-wallet';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/settings/export-wallet')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <div className="flex flex-col gap-4 max-w-screen-sm mx-auto py-8">
+      <ExportWallet />
+    </div>
+  );
+}