Shows tee wallet address

app/api/wallet/route.ts

@@ -0,0 +1,22 @@
+import { getWalletUUIDandAccessKey } from "@/utils/tee";
+import { Magic } from "@magic-sdk/admin";
+import { NextRequest, NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+const magic = await Magic.init(process.env.MAGIC_SECRET_KEY);
+
+export async function GET(req: NextRequest) {
+  try {
+    console.log(req.nextUrl.searchParams.get("didToken"));
+    const didToken = req.nextUrl.searchParams.get("didToken") ?? "";
+
+    const userMetadata = await magic.users.getMetadataByToken(didToken);
+    const publicAddress = userMetadata.publicAddress ?? "";
+
+    const result = await getWalletUUIDandAccessKey(publicAddress);
+
+    return NextResponse.json({ wallet_address: result.wallet_address });
+  } catch (e: any) {
+    return NextResponse.json({ error: e.message }, { status: e.status ?? 500 });
+  }
+}

app/page.tsx

@@ -16,8 +16,14 @@ export default function Page() {
   const { contracts } = useContracts();
   const [editContractKey, setEditContractKey] = useState<number | null>(null);
   const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
-  const { magic, isLoggedIn, handleLogin, handleLogout, isLoading } =
-    useMagic();
+  const {
+    magic,
+    teeWalletAddress,
+    isLoggedIn,
+    handleLogin,
+    handleLogout,
+    isLoading,
+  } = useMagic();
 
   return (
     <div className="flex flex-1">
@@ -58,7 +64,12 @@ export default function Page() {
             <div className="flex flex-1 flex-col">
               <ChatWindow titleText="Magic Chat Prototype" />
 
-              <div className="flex gap-4 justify-end px-6">
+              <div className="flex gap-4 justify-end items-center px-6 mr-56">
+                {teeWalletAddress && (
+                  <p className="opacity-50 hidden md:block text-sm">
+                    TEE Wallet: {teeWalletAddress}
+                  </p>
+                )}
                 <Button onClick={() => magic?.wallet.showUI()}>
                   Show Wallet
                 </Button>

components/MagicProvider.tsx

@@ -12,6 +12,7 @@ export const MagicContext = createContext<{
   handleLogin: () => void;
   isLoggedIn: boolean;
   isLoading: boolean;
+  teeWalletAddress: string | null;
   address: string | null;
   didToken: string | null;
 }>({
@@ -20,6 +21,7 @@ export const MagicContext = createContext<{
   handleLogout: () => {},
   handleLogin: () => {},
   isLoggedIn: false,
+  teeWalletAddress: null,
   isLoading: false,
   address: null,
   didToken: null,
@@ -32,6 +34,7 @@ const MagicProvider = ({ children }: any) => {
   const [web3, setWeb3] = useState<Web3 | null>(null);
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [teeWalletAddress, setTEEWalletAddress] = useState<string | null>(null);
 
   const [address, setAddress] = useState<string | null>(null);
   const [didToken, setDidToken] = useState<string | null>(null);
@@ -65,6 +68,10 @@ const MagicProvider = ({ children }: any) => {
         setAddress(address);
         let didToken = await magic.user.getIdToken();
         setDidToken(didToken);
+
+        const response = await fetch(`/api/wallet?didToken=${didToken}`);
+        const json = await response.json();
+        setTEEWalletAddress(json.wallet_address);
       }
       setIsLoading(false);
     };
@@ -107,6 +114,7 @@ const MagicProvider = ({ children }: any) => {
     <MagicContext.Provider
       value={{
         ...value,
+        teeWalletAddress,
         isLoading,
         handleLogout,
         handleLogin,

utils/tee.ts

@@ -97,7 +97,7 @@ async function signTransaction({
   }
 }
 
-async function getWalletUUIDandAccessKey(
+export async function getWalletUUIDandAccessKey(
   publicAddress: string,
 ): Promise<IWallet> {
   try {