diff --git a/account-kit/react/src/components/auth/hooks/useTransaction.ts b/account-kit/react/src/components/auth/hooks/useTransaction.ts deleted file mode 100644 index f180fcaf7f..0000000000 --- a/account-kit/react/src/components/auth/hooks/useTransaction.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { useState } from "react"; - -export enum TransactionStatus { - none = "none", - pending = "pending", - success = "success", - error = "error", -} - -export interface Transaction { - title: string; - status: TransactionStatus; -} - -export interface TransactionConfig { - stepsNumber?: number; -} - -export interface UseTransaction { - makeRequest: () => void; - result: Transaction[]; - reset: () => void; -} - -const randomDelay = (min = 2, max = 6) => { - const delay = Math.floor(Math.random() * (max - min + 1)) + min; - return delay * 1000; -}; - -export const useTransaction = ( - { stepsNumber = 3 }: TransactionConfig = { stepsNumber: 3 } -): UseTransaction => { - const baseRequest = Array.from({ length: stepsNumber }).map( - (_item, index) => ({ - title: `Transaction ${index + 1}`, - status: TransactionStatus.none, - }) - ); - - const [result, setResult] = useState(baseRequest); - - const reset = () => { - setResult(baseRequest); - }; - - const simulateApiCall = async ( - transaction: Transaction - ): Promise => { - return new Promise((resolve) => { - setTimeout(() => { - resolve({ ...transaction, status: TransactionStatus.success }); - }, randomDelay()); - }); - }; - - const makeRequest = async () => { - for (let i = 0; i < result.length; i++) { - const response = await simulateApiCall(result[i]); - - setResult((prevState) => { - const newState = [...prevState]; - newState[i] = response; - return newState; - }); - } - }; - - const startRequest = () => { - setResult((prevState) => { - return [...prevState].map((item) => ({ - ...item, - status: TransactionStatus.pending, - })); - }); - - makeRequest(); - }; - - return { - makeRequest: startRequest, - result, - reset, - }; -}; diff --git a/examples/ui-demo/src/app/config.tsx b/examples/ui-demo/src/app/config.tsx index d827762cf8..176447f23e 100644 --- a/examples/ui-demo/src/app/config.tsx +++ b/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(); diff --git a/examples/ui-demo/src/components/configuration/Configuration.tsx b/examples/ui-demo/src/components/configuration/Configuration.tsx index d5e8dff5da..3a590a3c36 100644 --- a/examples/ui-demo/src/components/configuration/Configuration.tsx +++ b/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 }) => {

- Embedded Wallet Type{" "} + Embedded Wallet Type

{/* */}

- 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? Learn more. diff --git a/examples/ui-demo/src/components/preview/AuthCardWrapper.tsx b/examples/ui-demo/src/components/preview/AuthCardWrapper.tsx index cfa7e00ef5..38d6962f23 100644 --- a/examples/ui-demo/src/components/preview/AuthCardWrapper.tsx +++ b/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 = () => { ); } - return ; - // return ; + + return walletType === WalletTypes.smart ? : ; }; diff --git a/examples/ui-demo/src/components/shared/WalletTypeSwitch.tsx b/examples/ui-demo/src/components/shared/WalletTypeSwitch.tsx index 6535332a83..1dc0416401 100644 --- a/examples/ui-demo/src/components/shared/WalletTypeSwitch.tsx +++ b/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)

diff --git a/examples/ui-demo/src/state/store.tsx b/examples/ui-demo/src/state/store.tsx index 6e588ed3cc..e99db24681 100644 --- a/examples/ui-demo/src/state/store.tsx +++ b/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, + })); + }, }); }