Skip to content

Commit f9fa5df

Browse files
committed
[TOOl-3587] Dashboard: Add in-app-wallet login mode (#6400)
<!-- start pr-codex --> ## PR-Codex overview This PR introduces enhancements to the `LoginAndOnboardingPage` by adding support for an in-app wallet login option and refactoring the login handling logic. ### Detailed summary - Added `loginWithInAppWallet` prop to `LoginAndOnboardingPage` and `LoginAndOnboardingPageContent`. - Updated `Page` component to handle `in-app-wallet` search parameter. - Introduced `inAppWalletLoginOptions` for in-app wallet authentication. - Modified wallet selection logic based on `loginWithInAppWallet` prop. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 0d82fc0 commit f9fa5df

File tree

3 files changed

+44
-6
lines changed

3 files changed

+44
-6
lines changed

apps/dashboard/src/app/login/LoginPage.tsx

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const LazyOnboardingUI = lazy(
2424
() => import("./onboarding/on-boarding-ui.client"),
2525
);
2626

27-
const wallets = [
27+
const loginOptions = [
2828
inAppWallet({
2929
auth: {
3030
options: [
@@ -45,9 +45,27 @@ const wallets = [
4545
createWallet("io.zerion.wallet"),
4646
];
4747

48+
const inAppWalletLoginOptions = [
49+
inAppWallet({
50+
auth: {
51+
options: [
52+
"google",
53+
"apple",
54+
"facebook",
55+
"github",
56+
"email",
57+
"phone",
58+
"passkey",
59+
"wallet",
60+
],
61+
},
62+
}),
63+
];
64+
4865
export function LoginAndOnboardingPage(props: {
4966
account: Account | undefined;
5067
redirectPath: string;
68+
loginWithInAppWallet: boolean;
5169
}) {
5270
return (
5371
<div className="relative flex min-h-dvh flex-col overflow-hidden bg-background">
@@ -91,6 +109,7 @@ export function LoginAndOnboardingPage(props: {
91109
<LoginAndOnboardingPageContent
92110
account={props.account}
93111
redirectPath={props.redirectPath}
112+
loginWithInAppWallet={props.loginWithInAppWallet}
94113
/>
95114
</div>
96115
);
@@ -99,6 +118,7 @@ export function LoginAndOnboardingPage(props: {
99118
export function LoginAndOnboardingPageContent(props: {
100119
account: Account | undefined;
101120
redirectPath: string;
121+
loginWithInAppWallet: boolean;
102122
}) {
103123
return (
104124
<div className="relative flex grow flex-col">
@@ -114,6 +134,7 @@ export function LoginAndOnboardingPageContent(props: {
114134
<PageContent
115135
redirectPath={props.redirectPath}
116136
account={props.account}
137+
loginWithInAppWallet={props.loginWithInAppWallet}
117138
/>
118139
</ClientOnly>
119140
</main>
@@ -139,6 +160,7 @@ function LoadingCard() {
139160
function PageContent(props: {
140161
redirectPath: string;
141162
account: Account | undefined;
163+
loginWithInAppWallet: boolean;
142164
}) {
143165
const [screen, setScreen] = useState<
144166
| { id: "login" }
@@ -190,7 +212,12 @@ function PageContent(props: {
190212
}
191213

192214
if (connectionStatus !== "connected" || screen.id === "login") {
193-
return <CustomConnectEmbed onLogin={onLogin} />;
215+
return (
216+
<CustomConnectEmbed
217+
onLogin={onLogin}
218+
loginWithInAppWallet={props.loginWithInAppWallet}
219+
/>
220+
);
194221
}
195222

196223
if (screen.id === "onboarding") {
@@ -215,6 +242,7 @@ function PageContent(props: {
215242

216243
function CustomConnectEmbed(props: {
217244
onLogin: () => void;
245+
loginWithInAppWallet: boolean;
218246
}) {
219247
const { theme } = useTheme();
220248
const client = useThirdwebClient();
@@ -257,7 +285,9 @@ function CustomConnectEmbed(props: {
257285
return isLoggedInResult;
258286
},
259287
}}
260-
wallets={wallets}
288+
wallets={
289+
props.loginWithInAppWallet ? inAppWalletLoginOptions : loginOptions
290+
}
261291
client={client}
262292
modalSize="wide"
263293
theme={getSDKTheme(theme === "light" ? "light" : "dark")}

apps/dashboard/src/app/login/page.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@ import { isValidEncodedRedirectPath } from "./isValidEncodedRedirectPath";
44

55
export default async function Page(props: {
66
searchParams: Promise<{
7-
next?: string;
7+
next: string | string[] | undefined;
8+
"in-app-wallet": string | string[] | undefined;
89
}>;
910
}) {
10-
const nextPath = (await props.searchParams).next;
11+
const searchParams = await props.searchParams;
12+
const nextPath =
13+
typeof searchParams.next === "string" ? searchParams.next : undefined;
1114
const account = await getRawAccount();
1215

1316
// don't redirect away from login page if authToken is already present and onboarding is done
@@ -20,6 +23,10 @@ export default async function Page(props: {
2023
nextPath && isValidEncodedRedirectPath(nextPath) ? nextPath : "/team";
2124

2225
return (
23-
<LoginAndOnboardingPage account={account} redirectPath={redirectPath} />
26+
<LoginAndOnboardingPage
27+
account={account}
28+
redirectPath={redirectPath}
29+
loginWithInAppWallet={searchParams["in-app-wallet"] === "true"}
30+
/>
2431
);
2532
}

apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export function NebulaLoginPage(props: {
5353

5454
{showPage === "connect" && (
5555
<LoginAndOnboardingPageContent
56+
loginWithInAppWallet={false}
5657
account={props.account}
5758
redirectPath={
5859
message ? `/?prompt=${encodeURIComponent(message)}` : "/"

0 commit comments

Comments
 (0)