Skip to content

Commit

Permalink
Merge branch 'main' into rob/redirect-params-post
Browse files Browse the repository at this point in the history
  • Loading branch information
RobChangCA authored Jan 30, 2025
2 parents d5faed1 + 4c3956c commit 314133e
Show file tree
Hide file tree
Showing 25 changed files with 193 additions and 216 deletions.
132 changes: 18 additions & 114 deletions examples/ui-demo/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,14 @@
"use client";

import { Authentication } from "@/components/configuration/Authentication";
import { Styling } from "@/components/configuration/Styling";
import { MobileSplashPage } from "@/components/preview/MobileSplashPage";
import {
EOAPostLoginActions,
EOAPostLoginContents,
} from "@/components/shared/eoa-post-login/EOAPostLoginContents";
import ExternalLink from "@/components/shared/ExternalLink";
import { MintCard } from "@/components/shared/mint-card/MintCard";
import { RenderUserConnectionAvatar } from "@/components/shared/user-connection-avatar/RenderUserConnectionAvatar";
import { cn } from "@/lib/utils";
import { Metrics } from "@/metrics";
import { useTheme } from "@/state/useTheme";
import { useUser } from "@account-kit/react";
import { ConfigurationSidebarWrapper } from "@/components/configuration/ConfigurationSidebarWrapper";
import { Inter, Public_Sans } from "next/font/google";
import { useState } from "react";
import { AuthCardWrapper } from "../components/preview/AuthCardWrapper";
import { CodePreview } from "../components/preview/CodePreview";
import { CodePreviewSwitch } from "../components/shared/CodePreviewSwitch";
import { TopNav } from "../components/topnav/TopNav";
import { PreviewNav } from "@/components/preview/PreviewNav";
import { PreviewWrapper } from "@/components/preview/PreviewWrapper";
import { cn } from "@/lib/utils";
import { useTheme } from "@/state/useTheme";
import { useUser } from "@account-kit/react";

const publicSans = Public_Sans({
subsets: ["latin"],
Expand All @@ -33,115 +22,30 @@ const inter = Inter({

export default function Home() {
const [showCode, setShowCode] = useState(false);
const user = useUser();
const theme = useTheme();
const isEOAUser = user?.type === "eoa";

const user = useUser();
return (
<main
className={`flex flex-col h-auto lg:bg-bg-main min-h-screen lg:min-h-0 lg:h-screen ${publicSans.className} bg-cover bg-center overflow-hidden`}
>
<TopNav />
<div
className={`flex flex-col flex-1 xl:px-6 lg:px-10 lg:py-6 w-full max-w-screen-2xl mx-auto overflow-hidden overflow-x-hidden ${inter.className} lg:overflow-hidden`}
className={`flex flex-col flex-1 xl:px-6 lg:px-10 lg:py-6 w-full max-w-screen-2xl mx-auto overflow-hidden overflow-x-hidden ${inter.className} lg:overflow-hidden mt-[74px] lg:mt-0`}
>
<div className="hidden lg:flex flex-1 gap-6 overflow-hidden">
<div className=" flex-col w-[272px] lg:w-[392px] bg-white border border-border rounded-lg p-6 overflow-y-auto scrollbar-none gap-10">
<Authentication />
<Styling />
</div>

<div className="flex flex-1 justify-center gap-6 overflow-hidden">
<ConfigurationSidebarWrapper />
<div
className={
"flex flex-col flex-[2] basis-0 relative bg-white border border-border rounded-lg overflow-hidden overflow-y-auto scrollbar-none"
}
className={cn(
"flex flex-col lg:flex-1 relative border border-border rounded-lg overflow-hidden overflow-y-auto scrollbar-none mb-6 lg:mb-0 w-full lg:w-auto m-6 lg:m-0",
theme === "dark" ? "bg-demo-bg-darkmode" : "bg-white",
showCode && "bg-white",
!user && "border-none lg:border-solid"
)}
>
{/* Code toggle header */}
<div
className={cn(
"absolute top-6 right-6 z-10",
showCode && "hidden",
user && "hidden"
)}
>
<CodePreviewSwitch
checked={showCode}
onCheckedChange={setShowCode}
/>
</div>
<div
className={cn(
` w-full p-6 top-0 left-0 border-b border-border z-10`,
!user && !showCode && "hidden",
showCode ? "sticky" : "absolute",
theme === "dark"
? showCode
? "bg-white"
: "bg-demo-bg-darkmode"
: "bg-white"
)}
>
<div
className={cn(
"flex justify-between items-start",

!showCode && !user && "justify-end"
)}
>
{!showCode && user && <RenderUserConnectionAvatar />}
{showCode && (
<div className="font-semibold text-foreground text-xl">
Export configuration
</div>
)}

<CodePreviewSwitch
checked={showCode}
onCheckedChange={setShowCode}
/>
</div>
{showCode && (
<p className="text-sm text-demo-fg-secondary max-w-[85%]">
To get started, simply paste the below code into your
environment. You&apos;ll need to add your Alchemy API key and
Gas Policy ID.{" "}
<ExternalLink
onClick={() =>
Metrics.trackEvent({
name: "codepreview_theme_customization_clicked",
})
}
href="https://accountkit.alchemy.com/react/customization/theme"
className="font-semibold text-blue-600"
>
Fully customize styling here.
</ExternalLink>
</p>
)}
</div>

{/* Don't unmount when showing code preview so that the auth card retains its state */}
<AuthCardWrapper
className={cn(showCode && "hidden", !user ? "mt-0" : "mt-24")}
/>
{showCode && <CodePreview />}
<PreviewNav showCode={showCode} setShowCode={setShowCode} />
<PreviewWrapper showCode={showCode} />
</div>
</div>
<div className="flex flex-1 flex-col gap-6 p-6 pt-24 overflow-auto scrollbar-none lg:hidden">
{!user && <MobileSplashPage />}
{isEOAUser && (
<div className="flex flex-1 flex-col">
<div className="border-border border radius-2 px-6 py-6 bg-bg-surface-default">
<RenderUserConnectionAvatar />
<div className="pt-6 max-w-96 mx-auto">
<EOAPostLoginContents />
<EOAPostLoginActions />
</div>
</div>
</div>
)}
{user && !isEOAUser && <MintCard />}
</div>
</div>
</main>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";
import { Authentication } from "./Authentication";
import { Styling } from "./Styling";

export function ConfigurationSidebarWrapper() {
return (
<div className="hidden lg:block w-[272px] lg:w-[392px] bg-white border border-border rounded-lg p-6 overflow-y-auto scrollbar-none">
<Authentication />
<Styling />
</div>
);
}
4 changes: 2 additions & 2 deletions examples/ui-demo/src/components/configuration/Styling.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import { ColorPicker } from "./ColorPicker";
import { PhotoUploads } from "./PhotoUpload";

import { Metrics } from "@/metrics";
import { CornerRadiusOptions } from "./components/CornerRadiusOptions";
import { IllustrationStyleOptions } from "./components/IllustrationStyleOptions";
import { CornerRadiusOptions } from "./CornerRadiusOptions";
import { IllustrationStyleOptions } from "./IllustrationStyleOptions";

export function Styling({ className }: { className?: string }) {
const { logo, setSupportUrl, setTheme, supportUrl, theme } = useConfigStore(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import {

export function EOAPostLogin() {
return (
<div className="flex flex-col">
<div className="border-border border radius-2 px-6 lg:px-10 py-11 max-w-[486px] w-full bg-bg-surface-default">
<div className="px-10 py-11 flex flex-col border-none lg:border-solid border border-border rounded-lg overflow-hidden overflow-y-auto scrollbar-none">
<div className="max-w-[486px] w-full bg-bg-surface-default">
<EOAPostLoginContents />
<div className="hidden lg:block">
<EOAPostLoginActions />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { useLogout } from "@account-kit/react";
import { CheckIcon } from "../../icons/check";
import { GasIcon } from "../../icons/gas";
import { UserIcon } from "../../icons/user";
import { WalletIcon } from "../../icons/wallet";
import { CheckIcon } from "../icons/check";
import { GasIcon } from "../icons/gas";
import { UserIcon } from "../icons/user";
import { WalletIcon } from "../icons/wallet";

export const EOAPostLoginActions = () => {
const { logout } = useLogout();
return (
<div className="flex flex-col items-center justify-center">
<div className="flex flex-col items-center justify-center px-6 lg:px-0">
<p className="text-demo-fg-secondary lg:text-fg-secondary text-sm text-center mt-4 lg:mt-0">
<span>
Want to experience{" "}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
useSmartAccountClient,
} from "@account-kit/react";
import { encodeFunctionData } from "viem";
import { RenderUserConnectionAvatar } from "../user-connection-avatar/RenderUserConnectionAvatar";
import { MintCardActionButtons } from "./MintCardActionButtons";
import { NFT } from "./NFT";
import { ValueProps } from "./ValueProps";
Expand Down Expand Up @@ -116,10 +115,9 @@ export const MintCard = () => {
Object.values(status).some((x) => x === "loading") || isLoadingClient;

return (
<div className="flex mt-0 lg:mt-7 pb-10 lg:pb-0 lg:justify-center flex-col lg:h-full">
<div className="flex mt-0 lg:justify-center flex-col lg:h-full mb-6">
<div className="lg:self-center">
<div className="flex items-center flex-col justify-center mb-12 lg:mb-0 lg:flex-row lg:justify-center lg:items-start bg-bg-surface-default radius-1 border-btn-secondary border md:mx-6 lg:mx-0 overflow-hidden lg:h-[470px]">
<RenderUserConnectionAvatar className="lg:hidden w-full p-6 mb-0 pb-6 relative after:absolute after:bottom-0 after:left-6 after:right-6 after:h-[1px] after:bg-border" />
<div className="flex items-center flex-col justify-center mb-12 lg:mb-0 lg:flex-row lg:justify-center lg:items-start bg-bg-surface-default radius-1 border-btn-secondary border md:mx-6 lg:mx-0 overflow-hidden lg:h-[470px] border-none lg:border-solid">
<div className="hidden lg:block max-w-[410px] overflow-auto p-8 h-full">
<h1 className="text-3xl lg:text-2xl font-semibold text-center leading-10 mb-8 text-fg-primary">
{!nftTransfered
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { MintStatus } from "./MintCard";
import { LoadingIcon } from "../../icons/loading";
import { CheckIcon } from "../../icons/check";
import { GasIcon } from "../../icons/gas";
import { DrawIcon } from "../../icons/draw";
import { ReceiptIcon } from "../../icons/receipt";
import { LoadingIcon } from "../icons/loading";
import { CheckIcon } from "../icons/check";
import { GasIcon } from "../icons/gas";
import { DrawIcon } from "../icons/draw";
import { ReceiptIcon } from "../icons/receipt";

type Props = {
status: MintStatus;
Expand Down
71 changes: 0 additions & 71 deletions examples/ui-demo/src/components/preview/AuthCardWrapper.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function MobileSplashPage() {
}, [breakpoint, isAuthenticating, openAuthModal]);

return (
<div className="flex flex-col flex-1 h-auto max-h-[calc(100svh-100px)] box-content px-4 pt-0 justify-between">
<div className="flex lg:hidden flex-col flex-1 h-auto max-h-[calc(100svh-100px)] box-content px-4 pt-0 justify-between h-full">
{/* Header Text */}
<div>
<h3 className="min-[320px]:text-3xl min-[390px]:text-5xl min-[640px]:text-6xl min-[640px]:mt-12 text-center font-semibold tracking-tight mb-4 leading-none">
Expand Down
58 changes: 58 additions & 0 deletions examples/ui-demo/src/components/preview/PreviewNav.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { cn } from "@/lib/utils";
import { RenderUserConnectionAvatar } from "../user-connection-avatar/RenderUserConnectionAvatar";
import { useUser } from "@account-kit/react";
import ExternalLink from "@/components/shared/ExternalLink";
import { Metrics } from "@/metrics";
import { CodePreviewSwitch } from "@/components/shared/CodePreviewSwitch";

export function PreviewNav({
showCode,
setShowCode,
}: {
showCode: boolean;
setShowCode: (showCode: boolean) => void;
}) {
const user = useUser();
return (
<div
className={cn(
`w-full p-6 top-0 left-0 border-border z-10 relative lg:sticky lg:after:hidden after:content-[''] after:absolute after:bottom-0 after:left-6 after:right-6 after:h-[1px] after:bg-border`,
!user && !showCode && "hidden lg:block lg:absolute",
(user || showCode) && "lg:border-b"
)}
>
<div
className={cn(
"flex justify-between items-start",
!showCode && !user && "justify-end"
)}
>
{!showCode && user && <RenderUserConnectionAvatar />}
{showCode && (
<div className="font-semibold text-foreground text-xl">
Export configuration
</div>
)}

<CodePreviewSwitch checked={showCode} onCheckedChange={setShowCode} />
</div>
{showCode && (
<p className="text-sm text-demo-fg-secondary max-w-[85%]">
To get started, simply paste the below code into your environment.
You&apos;ll need to add your Alchemy API key and Gas Policy ID.{" "}
<ExternalLink
onClick={() =>
Metrics.trackEvent({
name: "codepreview_theme_customization_clicked",
})
}
href="https://accountkit.alchemy.com/react/customization/theme"
className="font-semibold text-blue-600"
>
Fully customize styling here.
</ExternalLink>
</p>
)}
</div>
);
}
Loading

0 comments on commit 314133e

Please sign in to comment.