Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add sessions to wallet stamper demo #338

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add sessions to wallet stamper demo #338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions examples/with-wallet-stamper/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
"@turnkey/api-key-stamper": "workspace:*",
"@turnkey/encoding": "workspace:*",
"@turnkey/http": "workspace:*",
"@turnkey/iframe-stamper": "workspace:^",
"@turnkey/sdk-browser": "workspace:^",
"@turnkey/sdk-react": "workspace:^",
"@turnkey/solana": "workspace:*",
"@turnkey/viem": "workspace:*",
"@turnkey/wallet-stamper": "workspace:*",
Expand Down
6 changes: 6 additions & 0 deletions examples/with-wallet-stamper/src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
"use client";

import User from "@/components/user";

import Image from "next/image";

import { useTurnkey as useReactTurnkey } from "@turnkey/sdk-react";

export default function Dashboard() {
const { turnkey, authIframeClient } = useReactTurnkey();

return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
Expand Down
19 changes: 15 additions & 4 deletions examples/with-wallet-stamper/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,36 @@
"use client";

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "@/components/providers";

import { TurnkeyProvider as TurnkeyReactProvider } from "@turnkey/sdk-react";

const inter = Inter({ subsets: ["latin"] });

interface RootLayoutProps {
children: React.ReactNode;
}

export const metadata: Metadata = {
const metadata: Metadata = {
title: "Turnkey Wallet Stamper Demo",
description: "Demonstrates the usage of the @turnkey/wallet-stamper package",
};

const turnkeyConfig = {
apiBaseUrl: process.env.NEXT_PUBLIC_BASE_URL!,
defaultOrganizationId: process.env.NEXT_PUBLIC_ORGANIZATION_ID!,
};

export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en" suppressHydrationWarning className="dark">
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
<TurnkeyReactProvider config={turnkeyConfig}>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We essentially have two wrappers here: TurnkeyReactProvider from @turnkey/sdk-react, and another one that's created within this project. I included TurnkeyReactProvider in this demo because it abstracts away some iframe-related logic, so if it's confusing as to why where are two separate providers, I hope that offers some clarity.

<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</TurnkeyReactProvider>
</html>
);
}
36 changes: 32 additions & 4 deletions examples/with-wallet-stamper/src/components/auth/auth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Loader } from "lucide-react";
import {
Card,
CardContent,
Expand All @@ -16,22 +17,32 @@ import { AuthOptions } from "./auth.options";
import { Tabs, TabsContent } from "../ui/tabs";
import { ConnectWallet } from "../connect-wallet";
import { useTurnkey } from "../turnkey-provider";
import { Loader } from "lucide-react";
import { Email } from "@/lib/turnkey";

import { useTurnkey as useReactTurnkey } from "@turnkey/sdk-react";

export function AuthForm({ isSignUp = false }) {
const [authOption, setAuthOption] = useState("wallet");
const [email, setEmail] = useState("");
const { walletClient, createSubOrg, authenticating, signInWithWallet } =
useTurnkey();

const { turnkey, authIframeClient } = useReactTurnkey();

const handleSignUp = async () => {
if (walletClient) {
if (isSignUp) {
await createSubOrg();
await createSubOrg(email as Email);
} else {
await signInWithWallet();
await signInWithWallet(email as Email);
}
}
};

const handleEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(event.target.value);
};

return (
<Card className="">
<CardHeader className="text-center">
Expand All @@ -56,6 +67,16 @@ export function AuthForm({ isSignUp = false }) {
className=""
>
<TabsContent value="wallet">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
placeholder="[email protected]"
onChange={handleEmail}
// required
/>
</div>
<Card className="border-none bg-gray-900">
<CardHeader className="gap-1">
<CardTitle>Connect Wallet</CardTitle>
Expand Down Expand Up @@ -85,7 +106,13 @@ export function AuthForm({ isSignUp = false }) {
<TabsContent value="passkey">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="[email protected]" />
<Input
id="email"
type="email"
placeholder="[email protected]"
onChange={handleEmail}
required
/>
</div>
</TabsContent>
<TabsContent value="email">
Expand All @@ -95,6 +122,7 @@ export function AuthForm({ isSignUp = false }) {
id="email"
type="email"
placeholder="[email protected]"
onChange={handleEmail}
required
/>
</div>
Expand Down
Loading
Loading