feat: update some demo app copy and UI for alpha testing (#830)

* feat: update some demo app copy and UI for alpha testing * feat: fix code snippets and provide more context in code preview
alchemyplatform · Aug 28, 2024 · fd48725 · fd48725
1 parent 53b4e95
commit fd48725
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 24 deletions.
diff --git a/examples/ui-demo/src/app/providers.tsx b/examples/ui-demo/src/app/providers.tsx
@@ -77,6 +77,7 @@ function AuthCardHeader({ logoDark, logoLight, theme }: Pick<Config['ui'], "them
   if (!logo) return null;
 
   return (
+    // eslint-disable-next-line @next/next/no-img-element
     <img
       style={{ height: "60px", objectFit: "cover", objectPosition: "center" }}
       src={logo.fileSrc}

diff --git a/examples/ui-demo/src/components/configuration/Authentication.tsx b/examples/ui-demo/src/components/configuration/Authentication.tsx
@@ -9,16 +9,6 @@ import { Switch } from "../ui/switch"
 export const Authentication = ({ className }: { className?: string }) => {
   const { config, setConfig } = useConfig()
 
-  const setWalletsActive = (active: boolean) => {
-    setConfig((prev) => ({
-      ...prev,
-      auth: {
-        ...prev.auth,
-        showExternalWallets: active
-      }
-    }))
-  }
-
   const setPasskeysActive = (active: boolean) => {
     setConfig((prev) => ({
       ...prev,
@@ -40,10 +30,9 @@ export const Authentication = ({ className }: { className?: string }) => {
           disabled
         />
         <AuthMethod
-          icon={<WalletIcon />}
+          icon={<WalletIcon className="opacity-50" />}
           name="External wallets"
-          active={config.auth.showExternalWallets}
-          setActive={setWalletsActive}
+          unavailable
         />
         <AuthMethod
           icon={<SocialIcon className="opacity-50" />}

diff --git a/examples/ui-demo/src/components/configuration/Styling.tsx b/examples/ui-demo/src/components/configuration/Styling.tsx
@@ -25,7 +25,10 @@ export function Styling({ className }: { className?: string }) {
   return (
     <div className={cn("flex flex-col", className)}>
       <div className="flex flex-col gap-4 border-b border-border pt-8 pb-5">
-        <p className="font-semibold text-secondary-foreground text-sm">Theme</p>
+        <div className="flex items-center gap-1">
+          <p className="font-semibold text-secondary-foreground text-sm">Appearance</p>
+          <HelpTooltip text="Preview how the UI will look in light and dark mode - once integrated, the components will automatically adapt to the OS setting or a .light/.dark class on the root element" />
+        </div>
 
         <ThemeSwitch
           checked={config.ui.theme === "dark"}

diff --git a/examples/ui-demo/src/components/preview/CodePreview.tsx b/examples/ui-demo/src/components/preview/CodePreview.tsx
@@ -24,12 +24,14 @@ export function CodePreview({ className }: { className?: string }) {
           </ExternalLink>
         </div>
       </div>
-      <div className="flex flex-col gap-4">
-        <div className="font-semibold text-secondary">Config</div>
+      <div className="flex flex-col">
+        <div className="mb-2 font-semibold text-secondary">Config</div>
+        <p className="mb-4 text-sm text-secondary-foreground">Pass this config object into the <span className="font-mono">AlchemyAccountProvider</span>.</p>
         <CodeBlock title="src/app/config.ts" code={getConfigCode(config)} />
       </div>
-      <div className="flex flex-col gap-4">
-        <div className="font-semibold text-secondary">Style</div>
+      <div className="flex flex-col">
+        <div className="mb-2 font-semibold text-secondary">Style</div>
+        <p className="mb-4 text-sm text-secondary-foreground">Not using tailwind? <ExternalLink href="https://tailwindcss.com/docs/installation" className="text-blue-600 font-semibold">Follow this guide to get started</ExternalLink>, then add the below code to your config file.</p>
         <CodeBlock title="tailwind.config.ts" code={getTailwindCode(config)} />
       </div>
     </div>
@@ -64,8 +66,7 @@ function CodeBlock({ title, code }: { title: string; code: string }) {
 function getTailwindCode(config: Config) {
   const { ui } = config
   return dedent`
-  import { withAccountKitUi, createColorSet } from "@alchemy/aa-alchemy/tailwind";
-  import type { Config } from "tailwindcss";
+  import { withAccountKitUi, createColorSet } from "@account-kit/react/tailwind";
 
   // wrap your existing tailwind config with 'withAccountKitUi'
   // docs on setting up tailwind here: https://tailwindcss.com/docs/installation
@@ -93,19 +94,21 @@ function getConfigCode(config: Config) {
   sections.push([{ type: "passkey" }])
 
   return dedent`
+  import { createConfig } from "@account-kit/react";
+  import { sepolia } from "@account-kit/infra";
+
   const uiConfig = {
     illustrationStyle: ${config.ui.illustrationStyle},
     auth: {
       sections: ${JSON.stringify(sections)},
-      addPasskeyOnSignup: ${config.auth.addPasskey},
+      addPasskeyOnSignup: ${config.auth.addPasskey},${config.ui.logoLight || config.ui.logoDark ? '\n      header: <img src="path/to/logo.svg" />,' : ''}
     },
   };
 
-  const config = createConfig({
-    // required
+  export const config = createConfig({
     rpcUrl: "/api/rpc",
     chain: sepolia,
-    ssr: true,
+    ssr: true, // set to false if you're not using server-side rendering
   }, uiConfig);
 `
 }