feat: add wallet type store and toggle cards

examples/ui-demo/src/app/config.tsx

@@ -36,9 +36,15 @@ export type Config = {
         }
       | undefined;
   };
+  walletType: WalletTypes;
   supportUrl?: string;
 };
 
+export enum WalletTypes {
+  smart = "smart",
+  hybrid7702 = "7702",
+}
+
 export const DEFAULT_CONFIG: Config = {
   auth: {
     showEmail: true,
@@ -65,6 +71,7 @@ export const DEFAULT_CONFIG: Config = {
     logoLight: undefined,
     logoDark: undefined,
   },
+  walletType: WalletTypes.smart,
 };
 
 export const queryClient = new QueryClient();

examples/ui-demo/src/components/configuration/Configuration.tsx

@@ -1,22 +1,28 @@
-import { useState } from "react";
+// import { useState } from "react";
 import { cn } from "@/lib/utils";
 
 import { SettingsIcon } from "../icons/settings";
 // import { HelpTooltip } from "../shared/HelpTooltip";
 import { WalletTypeSwitch } from "../shared/WalletTypeSwitch";
 import ExternalLink from "../shared/ExternalLink";
+import { useConfigStore } from "@/state";
+import { WalletTypes } from "@/app/config";
 
-enum WalletTypes {
-  smart = "smart",
-  smart7702 = "7702",
-}
 export const Configuration = ({ className }: { className?: string }) => {
-  const [walletType, setWalletType] = useState(WalletTypes.smart);
+  const { setWalletType, walletType } = useConfigStore(
+    ({ walletType, setWalletType }) => {
+      return {
+        walletType,
+        setWalletType,
+      };
+    }
+  );
+  // const [walletType, setWalletType] = useState(WalletTypes.smart);
 
   const onSwitchWalletType = () => {
     setWalletType(
       walletType === WalletTypes.smart
-        ? WalletTypes.smart7702
+        ? WalletTypes.hybrid7702
         : WalletTypes.smart
     );
   };
@@ -29,18 +35,18 @@ export const Configuration = ({ className }: { className?: string }) => {
       </div>
       <div className="flex flex-row items-center gap-2 pb-2">
         <h4 className="font-normal text-sm text-secondary-foreground">
-          Embedded Wallet Type{" "}
+          Embedded Wallet Type
         </h4>
         {/* <HelpTooltip text="An account powered by a smart contract to enable more features. Not an EOA. Recommended for new wallets." /> */}
       </div>
       <WalletTypeSwitch
         id="theme-switch"
-        checked={walletType === WalletTypes.smart7702}
+        checked={walletType === WalletTypes.hybrid7702}
         onCheckedChange={onSwitchWalletType}
       />
       <p className="text-active text-xs font-medium pt-3">
-        On sign up, create a smart account or create an EOA that delegates to a
-        smart account.{" "}
+        Sentence describing all of the value props fo 7702 and educating the
+        user. Curious about what this means?
         <ExternalLink className="text-[#363FF9]" href="https://google.com">
           Learn more.
         </ExternalLink>

examples/ui-demo/src/components/preview/AuthCardWrapper.tsx

@@ -5,6 +5,9 @@ import { useTheme } from "@/state/useTheme";
 import { AuthCard, useUser } from "@account-kit/react";
 import { EOAPostLogin } from "../shared/eoa-post-login/EOAPostLogin";
 import { Wrapper7702 } from "../shared/7702/Wrapper";
+import { useConfigStore } from "@/state";
+import { WalletTypes } from "@/app/config";
+import { MintCard } from "../shared/mint-card/MintCard";
 
 export function AuthCardWrapper({ className }: { className?: string }) {
   const theme = useTheme();
@@ -25,6 +28,7 @@ export function AuthCardWrapper({ className }: { className?: string }) {
 }
 
 const RenderContent = () => {
+  const { walletType } = useConfigStore();
   const user = useUser();
   const hasUser = !!user;
 
@@ -53,6 +57,6 @@ const RenderContent = () => {
       </div>
     );
   }
-  return <Wrapper7702 />;
-  // return <MintCard />;
+
+  return walletType === WalletTypes.smart ? <MintCard /> : <Wrapper7702 />;
 };

examples/ui-demo/src/components/shared/WalletTypeSwitch.tsx

@@ -42,7 +42,7 @@ const WalletTypeSwitch = forwardRef<
             checked ? unselectedStyles : selectedStyles
           } font-semibold`}
         >
-          7702 Smart Account
+          Hybrid account (7702)
         </p>
       </div>
     </div>

examples/ui-demo/src/state/store.tsx

@@ -1,4 +1,4 @@
-import { Config, DEFAULT_CONFIG } from "@/app/config";
+import { Config, DEFAULT_CONFIG, WalletTypes } from "@/app/config";
 import { getSectionsForConfig } from "@/app/sections";
 import { AuthCardHeader } from "@/components/shared/AuthCardHeader";
 import { cookieStorage, parseCookie } from "@account-kit/core";
@@ -49,6 +49,7 @@ export type DemoState = Config & {
   ) => void;
   setTheme: (theme: Config["ui"]["theme"]) => void;
   setSupportUrl: (url: string) => void;
+  setWalletType: (walletType: WalletTypes) => void;
 };
 
 export const createDemoStore = (initialConfig: Config = DEFAULT_CONFIG) => {
@@ -68,6 +69,7 @@ export const createDemoStore = (initialConfig: Config = DEFAULT_CONFIG) => {
             setTheme,
             setNftTransferred,
             nftTransferred,
+            setWalletType,
             ...config
           }) => config,
           skipHydration: true,
@@ -141,6 +143,11 @@ function createInitialState(
         },
       }));
     },
+    setWalletType: (walletType: WalletTypes) => {
+      set(() => ({
+        walletType,
+      }));
+    },
   });
 }