Skip to content

Commit 732090f

Browse files
EthellaEthella
authored
Merge pull request #2 from magiclabs/demo
2 parents f80f2d0 + 4713f56 commit 732090f

26 files changed

+5632
-88
lines changed

‎eslint.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ const eslintConfig = [
2020
"next-env.d.ts",
2121
],
2222
},
23+
{
24+
rules: {
25+
"@typescript-eslint/no-explicit-any": "off",
26+
},
27+
},
2328
];
2429

2530
export default eslintConfig;

‎package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,23 @@
99
"lint": "eslint"
1010
},
1111
"dependencies": {
12+
"@magic-ext/evm": "1.0.0-canary.915.17279636506.0",
13+
"@magic-ext/hedera": "^1.0.4",
14+
"@magic-ext/oauth2": "^12.0.0",
15+
"@magic-ext/solana": "^27.0.0",
1216
"@metamask/eth-sig-util": "^8.2.0",
1317
"@radix-ui/react-tabs": "^1.1.13",
18+
"@types/prismjs": "^1.26.5",
19+
"@types/react-syntax-highlighter": "^15.5.13",
1420
"clsx": "^2.1.1",
1521
"ethers": "^6.15.0",
22+
"magic-sdk": "^30.0.0",
1623
"next": "15.5.2",
1724
"next-auth": "^4.24.11",
25+
"prismjs": "^1.30.0",
1826
"react": "19.1.0",
1927
"react-dom": "19.1.0",
28+
"react-syntax-highlighter": "^15.6.6",
2029
"tailwind-merge": "^3.3.1"
2130
},
2231
"devDependencies": {

‎pnpm-lock.yaml‎

Lines changed: 3683 additions & 43 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import "../globals.css";
2-
import SessionProviderComponent from "../../providers/SessionProvider";
1+
import "../../globals.css";
2+
import SessionProviderComponent from "../../../providers/SessionProvider";
33

44
export default function Layout({
55
children,

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

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
"use client";
22

33
import { useSession } from "next-auth/react";
4-
import { SignInButton, SignOutButton } from "../../components/AuthButtons";
5-
import { UserInfo } from "../../components/UserInfo";
6-
import { SignMethods } from "../../components/SignMethods";
4+
import { SignInButton, SignOutButton } from "../../../components/api-wallet/AuthButtons";
5+
import { SignMethods } from "@/components/api-wallet/SignMethods";
76
import { useEffect, useState } from "react";
8-
import { teeService } from "../../lib/tee-service";
7+
import { teeService } from "../../../lib/tee-service";
8+
import { UserInfo } from "@/components/api-wallet/UserInfo";
99

1010
export default function Home() {
1111
const { status } = useSession();
@@ -28,29 +28,10 @@ export default function Home() {
2828
}
2929

3030
return (
31-
<div className="relative min-h-screen overflow-hidden">
32-
{/* Animated Background Orbs */}
33-
<div className="absolute inset-0 overflow-hidden pointer-events-none">
34-
<div className="floating-orb absolute top-20 left-10 w-32 h-32 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-full blur-xl"></div>
35-
<div
36-
className="floating-orb absolute top-40 right-20 w-48 h-48 bg-gradient-to-r from-accent/15 to-primary/15 rounded-full blur-2xl"
37-
style={{ animationDelay: "2s" }}
38-
></div>
39-
<div
40-
className="floating-orb absolute bottom-32 left-1/4 w-40 h-40 bg-gradient-to-r from-secondary/20 to-accent/20 rounded-full blur-xl"
41-
style={{ animationDelay: "4s" }}
42-
></div>
43-
</div>
44-
31+
<div className="relative min-h-screen">
4532
<div className="relative z-10 flex flex-col items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
46-
{/* Header */}
47-
<div className="flex flex-col items-center gap-6 text-center">
48-
<div className="relative">
49-
<h1 className="text-6xl font-bold gradient-text mb-4">
50-
Magic API Wallets
51-
</h1>
52-
<div className="absolute -inset-1 bg-gradient-to-r from-primary via-secondary to-accent rounded-lg blur opacity-20"></div>
53-
</div>
33+
{/* Top Right Docs Button */}
34+
<div className="absolute top-8 right-8 z-20">
5435
<a
5536
href="https://tee.express.magiclabs.com/docs"
5637
target="_blank"
@@ -73,6 +54,16 @@ export default function Home() {
7354
</a>
7455
</div>
7556

57+
{/* Header */}
58+
<div className="flex flex-col items-center gap-6 text-center">
59+
<div className="relative">
60+
<h1 className="text-6xl font-bold gradient-text mb-4">
61+
Magic API Wallets
62+
</h1>
63+
<div className="absolute -inset-1 bg-gradient-to-r from-primary via-secondary to-accent rounded-lg blur opacity-20"></div>
64+
</div>
65+
</div>
66+
7667
{/* Main Content */}
7768
{status === "authenticated" && (
7869
<div className="flex flex-col items-center gap-12 w-full max-w-4xl">

‎src/app/(demo)/embedded-wallet/layout.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
"use client";
2+
3+
import { MagicService } from "@/lib/get-magic";
4+
import { WalletProvider } from "@/contexts/WalletContext";
5+
import "../../globals.css";
6+
import { useEffect } from "react";
7+
8+
export default function Layout({
9+
children,
10+
}: Readonly<{
11+
children: React.ReactNode;
12+
}>) {
13+
14+
useEffect(() => {
15+
// initialize Magic
16+
void MagicService.magic;
17+
}, [])
18+
19+
return (
20+
<WalletProvider>
21+
<div className="relative">
22+
{/* Top Right Buttons */}
23+
<div className="absolute top-8 right-8 z-20 flex gap-3">
24+
<a
25+
href="https://github.com/magiclabs/nextauth-api-wallets-express-demo"
26+
target="_blank"
27+
className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-gray-700 to-gray-800 text-white rounded-xl hover:from-gray-600 hover:to-gray-700 transition-all duration-300"
28+
>
29+
<svg
30+
className="w-4 h-4"
31+
fill="currentColor"
32+
viewBox="0 0 24 24"
33+
>
34+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
35+
</svg>
36+
View GitHub
37+
</a>
38+
<a
39+
href="https://magic.link/docs"
40+
target="_blank"
41+
className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-xl hover:from-primary-dark hover:to-primary transition-all duration-300 glow-primary"
42+
>
43+
<svg
44+
className="w-4 h-4"
45+
fill="none"
46+
stroke="currentColor"
47+
viewBox="0 0 24 24"
48+
>
49+
<path
50+
strokeLinecap="round"
51+
strokeLinejoin="round"
52+
strokeWidth={2}
53+
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
54+
/>
55+
</svg>
56+
View Magic Docs
57+
</a>
58+
</div>
59+
{children}
60+
</div>
61+
</WalletProvider>
62+
);
63+
}

‎src/app/(demo)/embedded-wallet/page.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
"use client";
2+
import { EmailOTPAuth } from "../../../components/embedded-wallet/EmailOTPAuth";
3+
import { OAuthAuth } from "../../../components/embedded-wallet/OAuthAuth";
4+
5+
export default function Home() {
6+
7+
return (
8+
<div className="relative min-h-screen">
9+
<div className="relative z-10 flex flex-col items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
10+
{/* Header */}
11+
<div className="flex flex-col items-center gap-6 text-center">
12+
<div className="relative">
13+
<h1 className="text-6xl font-bold gradient-text mb-4">
14+
Magic Embedded Wallets
15+
</h1>
16+
<div className="absolute -inset-1 bg-gradient-to-r from-primary via-secondary to-accent rounded-lg blur opacity-20"></div>
17+
</div>
18+
</div>
19+
20+
{/* Main Content */}
21+
<div className="flex flex-col items-center gap-8 w-full max-w-2xl">
22+
<div className="text-center">
23+
<h2 className="text-2xl font-semibold mb-4 text-foreground">Get Started</h2>
24+
<p className="text-muted-foreground mb-8">
25+
Connect your account using Magic&apos;s embedded wallet authentication
26+
</p>
27+
</div>
28+
29+
{/* Email OTP Authentication */}
30+
<EmailOTPAuth />
31+
32+
{/* OAuth Authentication */}
33+
<OAuthAuth />
34+
</div>
35+
</div>
36+
</div>
37+
);
38+
}

‎src/app/(demo)/embedded-wallet/wallet/page.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
"use client";
2+
3+
import { Button } from "../../../../components/Primitives";
4+
import { UserInfo } from "../../../../components/embedded-wallet/UserInfo";
5+
import { SignMethods } from "../../../../components/embedded-wallet/SignMethods";
6+
import { HederaSignMethods } from "../../../../components/embedded-wallet/HederaSignMethods";
7+
import { useWallet } from "../../../../contexts/WalletContext";
8+
9+
export default function WalletPage() {
10+
const {
11+
publicAddress,
12+
selectedNetwork,
13+
handleLogout,
14+
} = useWallet();
15+
16+
return (
17+
<div className="relative min-h-screen">
18+
<div className="relative z-10 flex flex-col items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
19+
{/* Header */}
20+
<div className="flex flex-col items-center gap-6 text-center">
21+
<div className="relative">
22+
<h1 className="text-6xl font-bold gradient-text mb-4">
23+
Magic Wallet
24+
</h1>
25+
<div className="absolute -inset-1 bg-gradient-to-r from-primary via-secondary to-accent rounded-lg blur opacity-20"></div>
26+
</div>
27+
</div>
28+
29+
{/* Main Content */}
30+
<div className="flex flex-col lg:flex-row items-start gap-8 w-full max-w-7xl">
31+
{/* Left Side - Wallet Profile */}
32+
<div className="flex flex-col gap-8 w-full lg:w-1/3">
33+
<UserInfo />
34+
<Button variant="danger" onClick={handleLogout} className="w-full">
35+
<svg
36+
className="w-5 h-5"
37+
fill="none"
38+
stroke="currentColor"
39+
viewBox="0 0 24 24"
40+
>
41+
<path
42+
strokeLinecap="round"
43+
strokeLinejoin="round"
44+
strokeWidth={2}
45+
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
46+
/>
47+
</svg>
48+
Logout
49+
</Button>
50+
</div>
51+
52+
{/* Right Side - Signing Methods */}
53+
<div className="w-full lg:w-2/3">
54+
{selectedNetwork === "hedera" ? (
55+
<HederaSignMethods />
56+
) : (
57+
<SignMethods publicAddress={publicAddress} />
58+
)}
59+
</div>
60+
</div>
61+
62+
</div>
63+
</div>
64+
);
65+
}

0 commit comments

Comments
 (0)