@opexa/portal-components 0.0.65 → 0.0.67

package/dist/components/Account/Account.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export interface AccountProps {
+    children?: ReactNode;
+    /**
+     * @default '0px'
+     * @example
+     * ```tsx
+     * offsetTop="1em"
+     * offsetTop="1rem"
+     * offsetTop="16px"
+     * ```
+     */
+    offsetTop?: string;
+    /** @default '/rewards' */
+    rewardsUrl?: string;
+    /** @default '/bet-records' */
+    betRecordsUrl?: string;
+    /** @default '/transactions' */
+    transactionsUrl?: string;
+    /** @default '/account' */
+    accountSettingsUrl?: string;
+}
+export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/Account.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useAccountQuery, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
+import { AlertCircleIcon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, XIcon, } from '../../icons/index.js';
+import avatarPlaceholder from '../../images/placeholder-avatar.png';
+import { Badge, Button, Drawer, IconButton, Popover } from '../../ui/index.js';
+import { formatNumber, parseDecimal } from '../../utils/index.js';
+import { accountRecipe } from './account.recipe.js';
+const recipe = accountRecipe();
+export function Account(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+    })));
+    const rewardsUrl = props.rewardsUrl ?? '/rewards';
+    const betRecordsUrl = props.betRecordsUrl ?? '/bet-records';
+    const transactionsUrl = props.transactionsUrl ?? '/transactions';
+    const accountSettingsUrl = props.accountSettingsUrl ?? '/account';
+    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
+        ? props.offsetTop
+        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
+    return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
+                    globalStore.account__mobile.setOpen(details.open);
+                }, lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, className: "lg:hidden", children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: globalStore.account__mobile.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 100, height: 100, className: "size-10" })) })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
+                                    ['--offset-top-mobile']: mobileOffsetTop,
+                                    ['--offset-top-desktop']: desktopOffsetTop,
+                                }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl })] }) }) })] }), _jsxs(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
+                    globalStore.account.setOpen(details.open);
+                }, lazyMount: true, unmountOnExit: true, positioning: {
+                    placement: 'bottom',
+                    strategy: 'fixed',
+                }, children: [_jsx(Popover.Trigger, { className: "hidden lg:flex", asChild: true, children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: _jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-10" }) })) }), _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl })] }) }) })] })] }));
+}
+function Profile() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-text-secondary-700 font-semibold leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsx("p", { className: "text-text-tertiary-600 grow items-center leading-tight", children: account?.id }), _jsxs(Badge.Root, { colorScheme: account?.verified ? 'success' : 'danger', className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: account?.verified ? 'Verified' : 'Unverified' })] })] })] })] }));
+}
+function Wallet() {
+    const localeInfo = useLocaleInfo();
+    const walletQuery = useWalletQuery({
+        refetchInterval: 1000,
+    });
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        profile: ctx.account,
+        mobileProfile: ctx.account__mobile,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
+    const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
+    const totalBalance = depositBalance + bonusBalance;
+    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [_jsx("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }), _jsx("div", { className: "text-3xl font-bold", children: formatNumber(totalBalance, {
+                    currency: localeInfo?.currency.code,
+                    minDecimalPlaces: 2,
+                }) }), _jsxs("div", { className: "mt-1.5 flex gap-7xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(depositBalance, {
+                                    currency: localeInfo?.currency.code,
+                                    minDecimalPlaces: 2,
+                                }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
+                                    currency: localeInfo?.currency.code,
+                                    minDecimalPlaces: 2,
+                                }) })] })] }), _jsxs("div", { className: "mt-3 flex gap-lg", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: () => {
+                            globalStore.depositWithdrawal.setOpen(true);
+                            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
+                            globalStore.profile.setOpen(false);
+                            globalStore.mobileProfile.setOpen(false);
+                        }, children: "Withdraw" }), _jsx(Button, { size: "xs", onClick: () => {
+                            globalStore.depositWithdrawal.setOpen(true);
+                            globalStore.depositWithdrawal.setTab('DEPOSIT');
+                            globalStore.profile.setOpen(false);
+                            globalStore.mobileProfile.setOpen(false);
+                        }, children: "Deposit" })] })] }));
+}
+function Links(props) {
+    const signOutMutation = useSignOutMutation();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        account: ctx.account,
+        account__mobile: ctx.account__mobile,
+        messages: ctx.messages,
+    })));
+    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
+    return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                                globalStore.messages.setOpen(true);
+                            }, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Notifications" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: unreadMessagesCountQuery.data ?? 0 }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.rewardsUrl, className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(Gift01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Rewards" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: "0" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountSettingsUrl, className: recipe.navItemLink(), onClick: () => {
+                            globalStore.account.setOpen(false);
+                            globalStore.account__mobile.setOpen(false);
+                        }, children: [_jsx(Settings02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Settings" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "error", children: _jsx(AlertCircleIcon, {}) }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) }), _jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.betRecordsUrl, className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(CoinsStacked02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.transactionsUrl, className: recipe.navItemLink(), onClick: () => {
+                                globalStore.account.setOpen(false);
+                                globalStore.account__mobile.setOpen(false);
+                            }, children: [_jsx(CoinsSwap02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Transactions" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), disabled: signOutMutation.isPending, onClick: () => {
+                            signOutMutation.mutate();
+                            globalStore.account.setOpen(false);
+                            globalStore.account__mobile.setOpen(false);
+                        }, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Log Out" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) })] }));
+}

package/dist/components/Account/AccountTrigger.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface AccountTriggerProps extends ComponentPropsWithRef<'button'> {
+    mobile?: boolean;
+    asChild?: boolean;
+}
+export declare function AccountTrigger(props: AccountTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/AccountTrigger.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ark } from '@ark-ui/react';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../client/hooks/index.js';
+export function AccountTrigger(props) {
+    const { mobile, ...rest } = props;
+    const { open, setOpen } = useGlobalStore(useShallow((ctx) => (mobile ? ctx.account__mobile : ctx.account)));
+    return (_jsx(ark.button, { type: "button", "aria-label": "Toggle account menu", "data-open": open ? 'open' : 'closed', ...rest, onClick: (e) => {
+            setOpen(!open);
+            return props.onClick?.(e);
+        } }));
+}

package/dist/components/Account/account.recipe.d.ts

@@ -0,0 +1,61 @@
+export declare const accountRecipe: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            nav?: import("tailwind-variants").ClassValue;
+            navItemRoot?: import("tailwind-variants").ClassValue;
+            navItemLink?: import("tailwind-variants").ClassValue;
+            navItemIcon?: import("tailwind-variants").ClassValue;
+            navItemLabel?: import("tailwind-variants").ClassValue;
+            navItemIndicator?: import("tailwind-variants").ClassValue;
+            navItemBadge?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            nav?: import("tailwind-variants").ClassValue;
+            navItemRoot?: import("tailwind-variants").ClassValue;
+            navItemLink?: import("tailwind-variants").ClassValue;
+            navItemIcon?: import("tailwind-variants").ClassValue;
+            navItemLabel?: import("tailwind-variants").ClassValue;
+            navItemIndicator?: import("tailwind-variants").ClassValue;
+            navItemBadge?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    nav: string;
+    navItemRoot: string;
+    navItemLink: string;
+    navItemIcon: string;
+    navItemLabel: string;
+    navItemIndicator: string;
+    navItemBadge: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            nav?: import("tailwind-variants").ClassValue;
+            navItemRoot?: import("tailwind-variants").ClassValue;
+            navItemLink?: import("tailwind-variants").ClassValue;
+            navItemIcon?: import("tailwind-variants").ClassValue;
+            navItemLabel?: import("tailwind-variants").ClassValue;
+            navItemIndicator?: import("tailwind-variants").ClassValue;
+            navItemBadge?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    nav: string;
+    navItemRoot: string;
+    navItemLink: string;
+    navItemIcon: string;
+    navItemLabel: string;
+    navItemIndicator: string;
+    navItemBadge: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    nav: string;
+    navItemRoot: string;
+    navItemLink: string;
+    navItemIcon: string;
+    navItemLabel: string;
+    navItemIndicator: string;
+    navItemBadge: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/Account/account.recipe.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const accountRecipe = tv({
+    slots: {
+        nav: 'space-y-xl',
+        navItemRoot: 'bg-bg-primary-alt block first:rounded-t-xl last:rounded-b-xl',
+        navItemLink: 'flex w-full items-center px-xl py-xl text-left text-sm font-semibold',
+        navItemIcon: 'text-text-nav-item-button-icon size-5',
+        navItemLabel: 'ml-lg grow',
+        navItemIndicator: 'text-gray-400 text-text-quarterary-500 size-5',
+        navItemBadge: [
+            'mr-md',
+            'flex',
+            'items-center',
+            'justify-center',
+            'border',
+            'rounded-full',
+            'h-5.5',
+            'ui-type-[warning]:min-w-6',
+            'ui-type-[warning]:text-xs',
+            'ui-type-[warning]:font-medium',
+            'ui-type-[warning]:leading-tight',
+            'ui-type-[warning]:border-utility-brand-200',
+            'ui-type-[warning]:bg-utility-brand-50',
+            'ui-type-[warning]:text-utility-brand-700',
+            'ui-type-[error]:w-5.5',
+            'ui-type-[error]:icon:size-3',
+            'ui-type-[error]:border-utility-warning-200',
+            'ui-type-[error]:bg-utility-warning-50',
+            'ui-type-[error]:text-utility-warning-500',
+        ],
+    },
+});

package/dist/components/Account/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Account';
+export * from './AccountTrigger';

package/dist/components/Account/index.js

@@ -0,0 +1,2 @@
+export * from './Account.js';
+export * from './AccountTrigger.js';

package/dist/components/AccountInfo/AccountInfo.d.ts

@@ -0,0 +1,4 @@
+export interface AccountInfoProps {
+    className?: string;
+}
+export declare function AccountInfo(props: AccountInfoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AccountInfo/AccountInfo.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { differenceInYears, format } from 'date-fns';
+import Image from 'next/image';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useAccountQuery, useLocaleInfo, useMobileNumberParser, useUpdateAccountMutation, } from '../../client/hooks/index.js';
+import { toaster } from '../../client/utils/index.js';
+import { FacebookIcon, GoogleIcon } from '../../icons/index.js';
+import avatar from '../../images/placeholder-avatar.png';
+import { Button, Field, IconButton } from '../../ui/index.js';
+export function AccountInfo(props) {
+    return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, {}), _jsx(ContactInfo, {}), _jsx(PersonalInfo, {}), _jsx(SSO, {})] }));
+}
+function ProfileInfo() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Profile Info" }), _jsxs("div", { className: "bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", children: [_jsx("div", { className: "border-border-secondary border-b px-4 py-5", children: _jsxs("div", { className: "flex items-center gap-xl", children: [_jsx(Image, { src: avatar, alt: "", width: 80, height: 80, className: "size-14 shrink-0 rounded-md object-cover" }), _jsxs("div", { children: [_jsx("h3", { className: "text-text-secondary-700 text-lg font-semibold leading-tight", children: account?.name }), _jsx("p", { className: "text-text-tertiary-600 leading-tight", children: account?.id })] })] }) }), _jsx("div", { className: "flex justify-end px-xl py-lg", children: _jsx(Button, { size: "sm", variant: "outline", fullWidth: false, children: "Upload New Avatar" }) })] })] }));
+}
+function PersonalInfo() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z.object({
+        realName: z.string().min(4).max(50).optional().or(z.literal('')),
+        birthDay: z
+            .string()
+            .optional()
+            .or(z.literal(''))
+            .superRefine((val, ctx) => {
+            if (!val)
+                return;
+            const date = new Date(val);
+            const age = differenceInYears(new Date(), date);
+            if (age < 21) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: 'You must be at least 21 years old',
+                });
+            }
+        }),
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            birthDay: '',
+            realName: '',
+        },
+    });
+    useEffect(() => {
+        if (account) {
+            form.reset({
+                realName: account.realName ?? '',
+                birthDay: account.birthDay
+                    ? format(account.birthDay, 'yyyy-MM-dd')
+                    : '',
+            });
+        }
+    }, [account, form]);
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Personal Data" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                    updateAccountMutation.mutate({
+                        realName: data.realName && account?.realName !== data.realName
+                            ? data.realName
+                            : undefined,
+                        birthDay: data.birthDay && account?.birthDay !== data.birthDay
+                            ? data.birthDay
+                            : undefined,
+                    });
+                }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, children: [_jsx(Field.Label, { children: "Real name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
+}
+function ContactInfo() {
+    const localeInfo = useLocaleInfo();
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const { parse, format, equals } = useMobileNumberParser();
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z.object({
+        emailAddress: z.string().email().optional().or(z.literal('')),
+        mobileNumber: z
+            .string()
+            .regex(localeInfo.mobileNumber.pattern, 'Invalid mobile number')
+            .optional()
+            .or(z.literal('')),
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            mobileNumber: '',
+            emailAddress: '',
+        },
+    });
+    useEffect(() => {
+        if (account) {
+            form.reset({
+                emailAddress: account.emailAddress ?? '',
+                mobileNumber: account.mobileNumber
+                    ? parse(account.mobileNumber).mobileNumber
+                    : '',
+            });
+        }
+    }, [account, form, parse]);
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Contact Info" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                    updateAccountMutation.mutate({
+                        emailAddress: data.emailAddress && account?.emailAddress !== data.emailAddress
+                            ? data.emailAddress
+                            : undefined,
+                        mobileNumber: data.mobileNumber &&
+                            !equals(account?.mobileNumber, data.mobileNumber)
+                            ? format(data.mobileNumber)
+                            : undefined,
+                    });
+                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-10.5", readOnly: account?.mobileNumber != null, ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.emailAddress, children: [_jsx(Field.Label, { children: "Email address" }), _jsx(Field.Input, { ...form.register('emailAddress') }), _jsx(Field.ErrorText, { children: form.formState.errors.emailAddress?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
+}
+function SSO() {
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Account Connections" }), _jsxs("div", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(GoogleIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Google" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-xs leading-tight", children: "Not Connected" })] })] }), _jsx(Button, { fullWidth: false, children: "Connect" })] }), _jsxs("div", { className: "mt-6 flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(FacebookIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Facebook" }), _jsx("p", { className: "text-text-success-primary-600 mt-xs text-xs leading-tight", children: "Connected" })] })] }), _jsx("button", { className: "text-button-tertiary-error-fg text-sm font-semibold", children: "Disconnect" })] })] })] }));
+}

package/dist/components/AccountInfo/index.d.ts

@@ -0,0 +1 @@
+export * from './AccountInfo';

package/dist/components/AccountInfo/index.js

@@ -0,0 +1 @@
+export * from './AccountInfo.js';

package/dist/components/AccountSecurity/AccountSecurity.d.ts

@@ -0,0 +1,4 @@
+export interface AccountSecurityProps {
+    className?: string;
+}
+export declare function AccountSecurity(props: AccountSecurityProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AccountSecurity/AccountSecurity.js

@@ -0,0 +1,171 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ark, createListCollection, Portal } from '@ark-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useProfileCompletionQuery, useUpdateAccountMutation, } from '../../client/hooks/index.js';
+import { toaster } from '../../client/utils/index.js';
+import { AlertCircleIcon, CheckIcon, CheckVerified02Icon, ChevronDownIcon, EyeIcon, EyeOffIcon, } from '../../icons/index.js';
+import { Button, Field, PasswordInput, Select } from '../../ui/index.js';
+export function AccountSecurity(props) {
+    return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(LoginPassword, {}), _jsx(TransactionPassword, {})] }));
+}
+function LoginPassword() {
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            form.reset();
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z
+        .object({
+        password: z.string().min(8).max(150).optional().or(z.literal('')),
+        confirmPassword: z.string().optional(),
+        secretQuestion: z.enum(SECRET_QUESTIONS).nullable().optional(),
+        secretAnswer: z
+            .string()
+            .min(2, 'Answer is too short')
+            .optional()
+            .or(z.literal('')),
+    })
+        .superRefine((data, ctx) => {
+        if (data.password && data.password !== data.confirmPassword) {
+            ctx.addIssue({
+                path: ['confirmPassword'],
+                code: z.ZodIssueCode.custom,
+                message: 'Passwords do not match',
+            });
+        }
+        if (data.secretAnswer && !data.secretQuestion) {
+            ctx.addIssue({
+                path: ['secretQuestion'],
+                code: z.ZodIssueCode.custom,
+                message: 'Please select a security question',
+            });
+        }
+        if (data.secretQuestion && !data.secretAnswer) {
+            ctx.addIssue({
+                path: ['secretAnswer'],
+                code: z.ZodIssueCode.custom,
+                message: 'Please provide an answer to the security question',
+            });
+        }
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            password: '',
+            confirmPassword: '',
+            secretAnswer: '',
+            secretQuestion: null,
+        },
+    });
+    const secretQuestion = form.watch('secretQuestion');
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Log in password" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "Access your account by logging in with your name and password." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
+                            ? 'text-text-success-primary'
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                    updateAccountMutation.mutate({
+                        password: data.password ? data.password : undefined,
+                        secretAnswer: data.secretAnswer ? data.secretAnswer : undefined,
+                        secretQuestion: data.secretQuestion
+                            ? data.secretQuestion
+                            : undefined,
+                    });
+                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.confirmPassword, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.confirmPassword?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretQuestion, children: [_jsxs(Select.Root, { deselectable: true, collection: secretQuestionCollection, lazyMount: true, positioning: {
+                                            sameWidth: true,
+                                        }, value: secretQuestion ? [secretQuestion] : [], onValueChange: (details) => {
+                                            form.setValue('secretQuestion', z.enum(SECRET_QUESTIONS).safeParse(details.value.at(0))
+                                                .data ?? null, {
+                                                shouldDirty: true,
+                                                shouldTouch: true,
+                                                shouldValidate: true,
+                                            });
+                                        }, children: [_jsx(Select.Label, { children: "Security Question" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: secretQuestionCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: secretQuestionCollection.stringifyItem(provider) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.secretQuestion?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretAnswer, children: [_jsx(Field.Label, { children: "Answer" }), _jsx(Field.Input, { ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
+}
+function TransactionPassword() {
+    const profileCompletionQuery = useProfileCompletionQuery();
+    const profileCompletion = profileCompletionQuery.data;
+    const updateAccountMutation = useUpdateAccountMutation({
+        onSuccess() {
+            form.reset();
+            toaster.success({
+                description: 'Changes saved!',
+            });
+        },
+        onError(error) {
+            toaster.error({
+                description: error.message,
+            });
+        },
+    });
+    const schema = z
+        .object({
+        password: z.string().min(8).max(150).optional().or(z.literal('')),
+        confirmPassword: z.string().optional(),
+    })
+        .superRefine((data, ctx) => {
+        if (data.password && data.password !== data.confirmPassword) {
+            ctx.addIssue({
+                path: ['confirmPassword'],
+                code: z.ZodIssueCode.custom,
+                message: 'Passwords do not match',
+            });
+        }
+    });
+    const form = useForm({
+        mode: 'all',
+        resolver: zodResolver(schema),
+        defaultValues: {
+            password: '',
+            confirmPassword: '',
+        },
+    });
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "grow", children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Transaction password" }), _jsx("p", { className: "text-text-tertiary-600 text-sm", children: "The transaction password secures and confirms your wallet withdrawals." })] }), _jsx(ark.svg, { asChild: true, className: twMerge('size-6', profileCompletion?.accountPassword
+                            ? 'text-text-success-primary'
+                            : 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
+                    updateAccountMutation.mutate({
+                        password: data.password ? data.password : undefined,
+                    });
+                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.confirmPassword, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.confirmPassword?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
+}
+const SECRET_QUESTIONS = [
+    'BEST_CHILDHOOD_FRIEND',
+    'BIRTH_PLACE',
+    'FAVORITE_BOOK',
+    'FAVORITE_MOVIE',
+    'FAVORITE_TEACHER',
+    'FIRST_CAR',
+    'FIRST_PET',
+    'FIRST_SCHOOL',
+    'MOTHERS_MAIDEN_NAME',
+    'PARENTS_MET_CITY',
+];
+const SECRET_QUESIONS_MAP = {
+    BEST_CHILDHOOD_FRIEND: 'Who is your best childhood friend?',
+    BIRTH_PLACE: 'Where were you born?',
+    FAVORITE_BOOK: 'What is your favorite book?',
+    FAVORITE_MOVIE: 'What is your favorite movie?',
+    FAVORITE_TEACHER: 'Who was your favorite teacher?',
+    FIRST_CAR: 'What was your first car?',
+    FIRST_PET: 'What was your first pet?',
+    FIRST_SCHOOL: 'What was the name of your first school?',
+    MOTHERS_MAIDEN_NAME: "What is your mother's maiden name?",
+    PARENTS_MET_CITY: 'In which city did your parents meet?',
+};
+const secretQuestionCollection = createListCollection({
+    items: SECRET_QUESTIONS,
+    itemToValue: (item) => item,
+    itemToString: (item) => SECRET_QUESIONS_MAP[item],
+});

package/dist/components/AccountSecurity/index.d.ts

@@ -0,0 +1 @@
+export * from './AccountSecurity';

package/dist/components/AccountSecurity/index.js

@@ -0,0 +1 @@
+export * from './AccountSecurity.js';

package/dist/components/AccountVerification/AccountVerification.d.ts

@@ -0,0 +1,4 @@
+export interface AccountVerificationProps {
+    className?: string;
+}
+export declare function AccountVerification(props: AccountVerificationProps): import("react/jsx-runtime").JSX.Element;