delegation experiment

Author: nikgraf

apps/events/src/components/delegate.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@/components/ui/button';
+import { createEthereumAccount } from '@/lib/create-ethereum-account';
+import { useDelegatedActions, usePrivy, useWallets } from '@privy-io/react-auth';
+
+export const Delegate = () => {
+  const { user } = usePrivy();
+  const { ready, wallets } = useWallets();
+  const { delegateWallet, revokeWallets } = useDelegatedActions();
+
+  // find the embedded wallet to delegate from the array of the user's wallets
+  const walletToDelegate = wallets.find((wallet) => wallet.walletClientType === 'privy');
+
+  // // check if the wallet to delegate by inspecting the user's linked accounts
+  // const isAlreadyDelegated = !!user?.linkedAccounts.find(
+  //   (account): account is WalletWithMetadata => account.type === 'wallet' && account.delegated,
+  // );
+
+  const onDelegate = async () => {
+    const { address, privateKey } = createEthereumAccount();
+    if (!walletToDelegate || !ready) return;
+    await delegateWallet({ address: walletToDelegate.address, chainType: 'ethereum' });
+    alert(`Delegated to ${address} with private key ${privateKey}`);
+  };
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold">Delegate Access</h1>
+      <h2 className="text-lg font-bold">Accounts</h2>
+      <ul>
+        {user?.linkedAccounts.map((account) => {
+          if (account.type === 'wallet') {
+            return <li key={account.address}>{account.address}</li>;
+          }
+        })}
+      </ul>
+      <Button disabled={!ready || !walletToDelegate} onClick={onDelegate} type="button">
+        Delegate access
+      </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 SettingsDelegateImport } from './routes/settings/delegate'
 
 // Create Virtual Routes
 
@@ -40,6 +41,12 @@ const SpaceSpaceIdRoute = SpaceSpaceIdImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const SettingsDelegateRoute = SettingsDelegateImport.update({
+  id: '/settings/delegate',
+  path: '/settings/delegate',
+  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/delegate': {
+      id: '/settings/delegate'
+      path: '/settings/delegate'
+      fullPath: '/settings/delegate'
+      preLoaderRoute: typeof SettingsDelegateImport
+      parentRoute: typeof rootRoute
+    }
     '/space/$spaceId': {
       id: '/space/$spaceId'
       path: '/space/$spaceId'
@@ -73,40 +87,45 @@ declare module '@tanstack/react-router' {
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/login': typeof LoginLazyRoute
+  '/settings/delegate': typeof SettingsDelegateRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/login': typeof LoginLazyRoute
+  '/settings/delegate': typeof SettingsDelegateRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/login': typeof LoginLazyRoute
+  '/settings/delegate': typeof SettingsDelegateRoute
   '/space/$spaceId': typeof SpaceSpaceIdRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/login' | '/space/$spaceId'
+  fullPaths: '/' | '/login' | '/settings/delegate' | '/space/$spaceId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/login' | '/space/$spaceId'
-  id: '__root__' | '/' | '/login' | '/space/$spaceId'
+  to: '/' | '/login' | '/settings/delegate' | '/space/$spaceId'
+  id: '__root__' | '/' | '/login' | '/settings/delegate' | '/space/$spaceId'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   LoginLazyRoute: typeof LoginLazyRoute
+  SettingsDelegateRoute: typeof SettingsDelegateRoute
   SpaceSpaceIdRoute: typeof SpaceSpaceIdRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   LoginLazyRoute: LoginLazyRoute,
+  SettingsDelegateRoute: SettingsDelegateRoute,
   SpaceSpaceIdRoute: SpaceSpaceIdRoute,
 }
 
@@ -122,6 +141,7 @@ export const routeTree = rootRoute
       "children": [
         "/",
         "/login",
+        "/settings/delegate",
         "/space/$spaceId"
       ]
     },
@@ -131,6 +151,9 @@ export const routeTree = rootRoute
     "/login": {
       "filePath": "login.lazy.tsx"
     },
+    "/settings/delegate": {
+      "filePath": "settings/delegate.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/delegate">
+                    Delegate
+                  </Link>
                   <span className="text-xs text-gray-500 dark:text-gray-400">
                     {identity?.accountId.substring(0, 6)}
                   </span>

apps/events/src/routes/settings/delegate.tsx

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