Merge pull request #33 from magiclabs/rename-to-server-wallets

Rename to server wallets

Author: joshuascan

README.md

@@ -8,11 +8,13 @@ Add the following environment variables to your `.env.local` file:
 GOOGLE_CLIENT_ID=your-google-client-id
 GOOGLE_CLIENT_SECRET=your-google-client-secret
 NEXT_PUBLIC_OIDC_PROVIDER_ID=your-magic-provider-id
-MAGIC_API_KEY=your-magic-secret-key
 NEXTAUTH_SECRET=your-next-auth-secret
+NEXT_PUBLIC_MAGIC_EMBEDDED_WALLET_KEY=your-embedded-wallet-publishable-api-key
+NEXT_PUBLIC_MAGIC_SERVER_WALLET_KEY=your-server-wallet-publishable-api-key
+SERVER_WALLET_SECRET_KEY=your-magic-server-wallet-secret-key
 ```
 
-Replace the values with your credentials from Google and GitHub developer consoles.
+Replace the values with your credentials from your Google and Magic developer dashboards.
 
 ## Getting Started
 

src/app/(demo)/api-wallet/layout.tsx src/app/(demo)/server-wallet/layout.tsxsrc/app/(demo)/api-wallet/layout.tsx renamed to src/app/(demo)/server-wallet/layout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import SessionProviderComponent from "../../../providers/SessionProvider";
-import { ApiWalletProvider } from "@/contexts/ApiWalletContext";
+import { ServerWalletProvider } from "@/contexts/ServerWalletContext";
 
 export default function Layout({
   children,
@@ -10,7 +10,7 @@ export default function Layout({
 }>) {
   return (
     <SessionProviderComponent>
-      <ApiWalletProvider>{children}</ApiWalletProvider>
+      <ServerWalletProvider>{children}</ServerWalletProvider>
     </SessionProviderComponent>
   );
 }

src/app/(demo)/api-wallet/page.tsx src/app/(demo)/server-wallet/page.tsxsrc/app/(demo)/api-wallet/page.tsx renamed to src/app/(demo)/server-wallet/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { useApiWallet } from "@/contexts/ApiWalletContext";
+import { useServerWallet } from "@/contexts/ServerWalletContext";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { Button } from "@/components/Button";
 import { signIn } from "next-auth/react";
@@ -12,11 +12,11 @@ import { PageHeader } from "@/components/PageHeader";
 
 export default function Home() {
   const router = useRouter();
-  const { isAuthenticated, isLoading } = useApiWallet();
+  const { isAuthenticated, isLoading } = useServerWallet();
 
   useEffect(() => {
     if (isAuthenticated) {
-      router.push("/api-wallet/wallet");
+      router.push("/server-wallet/wallet");
     }
   }, [isAuthenticated, router]);
 
@@ -33,9 +33,9 @@ export default function Home() {
   return (
     <div className="flex flex-col items-center gap-20 sm:pt-12">
       <PageHeader
-        product="Express API Wallet"
+        product="Server Wallet"
         title="Get Started"
-        description="Connect your account to access your secure TEE wallet."
+        description="Connect your account to access your secure TEE wallet via our Express API."
       />
 
       <Button onClick={() => signIn("google", { redirect: false })}>

src/app/(demo)/api-wallet/wallet/page.tsx …app/(demo)/server-wallet/wallet/page.tsxsrc/app/(demo)/api-wallet/wallet/page.tsx renamed to src/app/(demo)/server-wallet/wallet/page.tsx src/app/(demo)/api-wallet/wallet/page.tsx renamed to src/app/(demo)/server-wallet/wallet/page.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import { SolanaSignMethods } from "@/components/api-wallet/SolanaSignMethods";
-import { EVMSignMethods } from "@/components/api-wallet/EVMSignMethods";
-import { UserInfo } from "@/components/api-wallet/UserInfo";
-
-import { useApiWallet } from "@/contexts/ApiWalletContext";
+import { SolanaSignMethods } from "@/components/server-wallet/SolanaSignMethods";
+import { EVMSignMethods } from "@/components/server-wallet/EVMSignMethods";
+import { UserInfo } from "@/components/server-wallet/UserInfo";
+import { useServerWallet } from "@/contexts/ServerWalletContext";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
-import UserMethods from "@/components/api-wallet/UserMethods";
+import UserMethods from "@/components/server-wallet/UserMethods";
 
-export default function ApiWalletPage() {
-  const { selectedNetwork, isAuthenticated, isLoading } = useApiWallet();
+export default function ServerWalletPage() {
+  const { selectedNetwork, isAuthenticated, isLoading } = useServerWallet();
 
   if (isLoading) {
     return <LoadingScreen message="Checking authentication..." />;
@@ -24,7 +23,7 @@ export default function ApiWalletPage() {
   return (
     <div className="relative min-h-screen">
       <div className="relative z-10 flex flex-col items-center min-h-screen p-8 pt-0 sm:pt-12 pb-20 gap-2 sm:gap-16 sm:p-20">
-        <PageHeader product="Express API Wallet" title="Connected" />
+        <PageHeader product="Server Wallet" title="Connected" />
 
         {/* Main Content */}
         <div className="flex flex-col lg:flex-row items-start gap-8 w-full max-w-7xl mt-16 sm:mt-8">

src/app/api/tee/wallet/route.ts

@@ -2,7 +2,7 @@ import { getServerSession } from "next-auth";
 import { TeeEndpoint } from "@/types/tee-types";
 import { NextResponse } from "next/server";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
-import { express } from "@/lib/api-wallet/express";
+import { express } from "@/lib/server-wallet/express";
 
 export async function POST(req: Request) {
   const session = await getServerSession(authOptions);

src/app/api/tee/wallet/sign/data/route.ts

@@ -1,4 +1,4 @@
-import { express } from "@/lib/api-wallet/express";
+import { express } from "@/lib/server-wallet/express";
 import { TeeEndpoint } from "@/types/tee-types";
 import { NextResponse } from "next/server";
 import { getServerSession } from "next-auth";
@@ -20,7 +20,7 @@ export async function POST(req: Request) {
       method: "POST",
       body,
     });
-    
+
     return NextResponse.json(res);
   } catch (error) {
     console.error("POST sign data error:", error);

src/app/api/tee/wallet/sign/message/route.ts

@@ -1,4 +1,4 @@
-import { express } from "@/lib/api-wallet/express";
+import { express } from "@/lib/server-wallet/express";
 import { TeeEndpoint } from "@/types/tee-types";
 import { NextResponse } from "next/server";
 import { getServerSession } from "next-auth";

src/app/page.tsx

@@ -11,7 +11,7 @@ export default function Home() {
         <p className="text-muted-foreground text-xl max-w-2xl text-center">
           Over 7 years of proven reliability and performance. Spin up wallets,
           trigger onchain actions, and stay compliant—all with one powerful,
-          production-ready API or White-label Embedded Wallets.
+          production-ready Server Wallet or Embedded Wallet.
         </p>
       </div>
 

src/components/Header.tsx

@@ -21,7 +21,8 @@ export const Header = () => {
 
   const isEmbeddedWalletRoute =
     isHydrated && pathname?.startsWith("/embedded-wallet");
-  const isApiWalletRoute = isHydrated && pathname?.startsWith("/api-wallet");
+  const isServerWalletRoute =
+    isHydrated && pathname?.startsWith("/server-wallet");
 
   // Dynamic docs configuration based on pathname
   const getDocsConfig = () => {
@@ -31,10 +32,10 @@ export const Header = () => {
         url: "https://docs.magic.link/embedded-wallets/introduction",
       };
     }
-    if (isApiWalletRoute) {
+    if (isServerWalletRoute) {
       return {
-        text: "View Express Docs",
-        url: "https://docs.magic.link/api-wallets/express-api/overview",
+        text: "View Server Wallet Docs",
+        url: "https://docs.magic.link/server-wallets/express-api/overview",
       };
     }
     // Default Magic docs
@@ -66,7 +67,7 @@ export const Header = () => {
       </a>
 
       <div className="flex flex-col md:flex-row items-center gap-4 z-10">
-        {isApiWalletRoute && (
+        {isServerWalletRoute && (
           <Link
             href="/embedded-wallet"
             className="flex-shrink-0 w-full md:w-auto"
@@ -85,16 +86,19 @@ export const Header = () => {
           </Link>
         )}
         {isEmbeddedWalletRoute && (
-          <Link href="/api-wallet" className="flex-shrink-0 w-full md:w-auto">
+          <Link
+            href="/server-wallet"
+            className="flex-shrink-0 w-full md:w-auto"
+          >
             <Button variant="secondary" onClick={() => {}} fullWidth glow>
               <div className="flex items-center gap-2">
                 <Image
                   src={iconExpress}
-                  alt="Express API Wallet"
+                  alt="Server Wallet"
                   width={24}
                   height={24}
                 />
-                Try API Wallet
+                Try Server Wallet
               </div>
             </Button>
           </Link>

src/components/ProductButton.tsx

@@ -18,8 +18,8 @@ const productMap = {
     highlightColor: "#7D51FF",
   },
   express: {
-    href: "/api-wallet",
-    label: "Express API Wallet",
+    href: "/server-wallet",
+    label: "Server Wallet",
     icon: iconExpress,
     highlightColor: "#90F0D3",
   },