@opexa/portal-components 0.0.28 → 0.0.30

package/dist/ui/Tabs/tabs.recipe.js

@@ -1,6 +1,6 @@
 import { tabsAnatomy } from '@ark-ui/react';
 import { tv } from 'tailwind-variants';
-import { anatomyToRecipeSlots } from '../../utils';
+import { anatomyToRecipeSlots } from '../../utils/index.js';
 export const tabsRecipe = tv({
     slots: anatomyToRecipeSlots(tabsAnatomy),
     variants: {

package/dist/ui/Tooltip/index.js

@@ -1 +1 @@
-export * as Tooltip from './Tooltip';
+export * as Tooltip from './Tooltip.js';

package/dist/ui/index.js

@@ -1,26 +1,26 @@
-export * from './AlertDialog';
-export * from './Avatar';
-export * from './Badge';
-export * from './Button';
-export * from './Checkbox';
-export * from './Clipboard';
-export * from './Collapsible';
-export * from './Combobox';
-export * from './DatePicker';
-export * from './Dialog';
-export * from './Drawer';
-export * from './Field';
-export * from './IconButton';
-export * from './Menu';
-export * from './NumberInput';
-export * from './PasswordInput';
-export * from './PinInput';
-export * from './Popover';
-export * from './Presence';
-export * from './Progress';
-export * from './Prose';
-export * from './SegmentGroup';
-export * from './Select';
-export * from './Table';
-export * from './Tabs';
-export * from './Tooltip';
+export * from './AlertDialog/index.js';
+export * from './Avatar/index.js';
+export * from './Badge/index.js';
+export * from './Button/index.js';
+export * from './Checkbox/index.js';
+export * from './Clipboard/index.js';
+export * from './Collapsible/index.js';
+export * from './Combobox/index.js';
+export * from './DatePicker/index.js';
+export * from './Dialog/index.js';
+export * from './Drawer/index.js';
+export * from './Field/index.js';
+export * from './IconButton/index.js';
+export * from './Menu/index.js';
+export * from './NumberInput/index.js';
+export * from './PasswordInput/index.js';
+export * from './PinInput/index.js';
+export * from './Popover/index.js';
+export * from './Presence.js';
+export * from './Progress/index.js';
+export * from './Prose.js';
+export * from './SegmentGroup/index.js';
+export * from './Select/index.js';
+export * from './Table/index.js';
+export * from './Tabs/index.js';
+export * from './Tooltip/index.js';

package/dist/utils/formatNumber.js

@@ -1,4 +1,4 @@
-import { parseDecimal } from './parseDecimal';
+import { parseDecimal } from './parseDecimal.js';
 const defaultConfig = {
     locale: 'en-US',
     compact: false,

package/dist/utils/getGameImageUrl.js

@@ -1,4 +1,4 @@
-import { ENVIRONMENT } from '../constants';
+import { ENVIRONMENT } from '../constants/index.js';
 const VERSION = '1';
 const ORIGIN = ENVIRONMENT === 'development'
     ? 'https://static.development.opexa.io/images'

package/dist/utils/getLocaleInfo.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cache, } from 'react';
+export const getLocaleInfo = cache((timezone) => {
+    switch (timezone.toLowerCase()) {
+        case 'asia/jakarta':
+            return {
+                locale: 'id-ID',
+                timezone: 'Asia/Jakarta',
+                country: {
+                    name: 'Indonesia',
+                    code: 'IDN',
+                    flag: IndonesianFlag,
+                },
+                currency: {
+                    code: 'IDR',
+                    name: 'Indonesian Rupiah',
+                    symbol: 'Rp',
+                    externalCode: 'IDR',
+                },
+                mobileNumber: {
+                    areaCode: '+62',
+                    numOfDigits: 10,
+                    example: '81' + ''.padStart(8, '0'),
+                    pattern: /^(\+?62|0)?8\d{9}$/,
+                },
+            };
+        case 'asia/jayapura':
+            return {
+                locale: 'id-ID',
+                timezone: 'Asia/Jayapura',
+                country: {
+                    code: 'IDN',
+                    name: 'Indonesia',
+                    flag: IndonesianFlag,
+                },
+                currency: {
+                    code: 'IDR',
+                    name: 'Indonesian Rupiah',
+                    symbol: 'Rp',
+                    externalCode: 'IDR',
+                },
+                mobileNumber: {
+                    areaCode: '+62',
+                    numOfDigits: 10,
+                    example: '81' + ''.padStart(8, '0'),
+                    pattern: /^(\+?62|0)?8\d{9}$/,
+                },
+            };
+        case 'asia/makassar':
+            return {
+                locale: 'id-ID',
+                timezone: 'Asia/Makassar',
+                country: {
+                    code: 'IDN',
+                    name: 'Indonesia',
+                    flag: IndonesianFlag,
+                },
+                currency: {
+                    code: 'IDR',
+                    name: 'Indonesian Rupiah',
+                    symbol: 'Rp',
+                    externalCode: 'IDR',
+                },
+                mobileNumber: {
+                    areaCode: '+62',
+                    numOfDigits: 10,
+                    example: '81' + ''.padStart(8, '0'),
+                    pattern: /^(\+?62|0)?8\d{9}$/,
+                },
+            };
+        case 'asia/kuala_lumpur':
+            return {
+                locale: 'ms-MY',
+                timezone: 'Asia/Kuala_Lumpur',
+                country: {
+                    name: 'Malaysia',
+                    code: 'MYS',
+                    flag: MalaysianFlag,
+                },
+                currency: {
+                    code: 'MYR',
+                    name: 'Malaysian Ringgit',
+                    symbol: 'RM',
+                    externalCode: 'MYR',
+                },
+                mobileNumber: {
+                    areaCode: '+60',
+                    numOfDigits: 9,
+                    example: '12' + ''.padStart(7, '0'),
+                    pattern: /^(\+?60|0)?1[0-9]{1}\d{7}$/,
+                },
+            };
+        case 'asia/kolkata':
+            return {
+                locale: 'en-IN',
+                timezone: 'Asia/Kolkata',
+                country: {
+                    code: 'IND',
+                    name: 'India',
+                    flag: IndianFlag,
+                },
+                currency: {
+                    code: 'INR',
+                    name: 'Indian Rupee',
+                    symbol: '₹',
+                    externalCode: 'INR',
+                },
+                mobileNumber: {
+                    areaCode: '+91',
+                    numOfDigits: 10,
+                    example: '919' + ''.padStart(7, '0'),
+                    pattern: /^(\+?91|0)?[789]\d{9}$/,
+                },
+            };
+        case 'asia/ho_chi_minh':
+            return {
+                locale: 'vi-VN',
+                timezone: 'Asia/Ho_Chi_Minh',
+                country: {
+                    code: 'VNM',
+                    name: 'Vietnam',
+                    flag: VietnameseFlag,
+                },
+                currency: {
+                    code: 'VND',
+                    name: 'Vietnamese Dong',
+                    symbol: '₫',
+                    externalCode: 'VIRTUAL',
+                },
+                mobileNumber: {
+                    areaCode: '+84',
+                    numOfDigits: 9,
+                    example: '849' + ''.padStart(7, '0'),
+                    pattern: /^(\+?84|0)?(3[2-9]|5[6|8|9]|7[0|6-9]|8[1-6|8|9]|9[0-9])\d{7}$/,
+                },
+            };
+        default:
+            return {
+                locale: 'en-PH',
+                timezone: 'Asia/Manila',
+                country: {
+                    code: 'PHL',
+                    name: 'Philippines',
+                    flag: PhilippineFlag,
+                },
+                currency: {
+                    code: 'PHP',
+                    name: 'Philippine Peso',
+                    symbol: '₱',
+                    externalCode: 'PHP',
+                },
+                mobileNumber: {
+                    areaCode: '+63',
+                    numOfDigits: 10,
+                    example: '919' + ''.padStart(7, '0'),
+                    pattern: /^(\+?63|0)?9\d{9}$/,
+                },
+            };
+    }
+});
+const PhilippineFlag = (props) => {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_4392_27540)", children: [_jsx("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#F0F0F0" }), _jsx("path", { d: "M12.0004 0V12L3.51514 20.4853C5.68671 22.6568 8.68671 24 12.0004 24C18.6278 24 24.0004 18.6274 24.0004 12C24.0004 5.37262 12.0004 0 12.0004 0Z", fill: "#D80027" }), _jsx("path", { d: "M12.0004 0C8.68671 0 5.68671 1.34316 3.51514 3.51469C6.45936 6.45891 7.50453 7.50412 12.0004 12H24.0004C24.0004 5.37262 18.6278 0 12.0004 0Z", fill: "#0052B4" }), _jsx("path", { d: "M8.21723 11.9998L6.75173 11.3104L7.53215 9.89111L5.94074 10.1956L5.73909 8.58789L4.63059 9.77027L3.52213 8.58789L3.32043 10.1956L1.72907 9.89106L2.50949 11.3104L1.04395 11.9998L2.50949 12.6891L1.72907 14.1085L3.32057 13.8041L3.52209 15.4117L4.63059 14.2293L5.73909 15.4117L5.94074 13.8041L7.53205 14.1085L6.75168 12.6892L8.21723 11.9998Z", fill: "#FFDA44" }), _jsx("path", { d: "M3.20082 4.69519L3.68851 5.37689L4.48749 5.12382L3.98977 5.79825L4.47746 6.47996L3.68218 6.21507L3.18451 6.88946L3.19074 6.05133L2.39551 5.78639L3.19463 5.53332L3.20082 4.69519Z", fill: "#FFDA44" }), _jsx("path", { d: "M3.20082 17.1095L3.68851 17.7912L4.48749 17.5381L3.98977 18.2126L4.47746 18.8943L3.68218 18.6294L3.18451 19.3038L3.19074 18.4656L2.39551 18.2007L3.19463 17.9476L3.20082 17.1095Z", fill: "#FFDA44" }), _jsx("path", { d: "M10.1563 10.9032L9.66866 11.5849L8.86963 11.3317L9.36735 12.0062L8.87966 12.688L9.67494 12.423L10.1727 13.0974L10.1664 12.2593L10.9616 11.9944L10.1625 11.7413L10.1563 10.9032Z", fill: "#FFDA44" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_4392_27540", children: _jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+};
+const MalaysianFlag = (props) => {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_4392_27547)", children: [_jsx("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#F0F0F0" }), _jsx("path", { d: "M11.4783 12.0002H24C24 10.9171 23.8556 9.86791 23.5866 8.86975H11.4783V12.0002Z", fill: "#D80027" }), _jsx("path", { d: "M11.4783 5.73873H22.2387C21.5041 4.54004 20.565 3.48053 19.4698 2.60828H11.4783V5.73873Z", fill: "#D80027" }), _jsx("path", { d: "M12.0001 24.0002C14.8243 24.0002 17.4201 23.024 19.47 21.3915H4.53027C6.58016 23.024 9.17596 24.0002 12.0001 24.0002Z", fill: "#D80027" }), _jsx("path", { d: "M1.76146 18.2601H22.2389C22.8286 17.2978 23.2859 16.2459 23.5868 15.1296H0.413574C0.714371 16.2459 1.17173 17.2978 1.76146 18.2601Z", fill: "#D80027" }), _jsx("path", { d: "M12 12C12 5.37262 12 4.59131 12 0C5.37262 0 0 5.37262 0 12H12Z", fill: "#0052B4" }), _jsx("path", { d: "M7.98001 10.2709C6.34117 10.2709 5.01263 8.94229 5.01263 7.30349C5.01263 5.6647 6.34121 4.33612 7.98001 4.33612C8.491 4.33612 8.97179 4.46535 9.39156 4.69279C8.73306 4.04887 7.8325 3.65137 6.8387 3.65137C4.82171 3.65137 3.18652 5.28651 3.18652 7.30354C3.18652 9.32057 4.82171 10.9557 6.8387 10.9557C7.8325 10.9557 8.73306 10.5582 9.39156 9.91429C8.97179 10.1416 8.49104 10.2709 7.98001 10.2709Z", fill: "#FFDA44" }), _jsx("path", { d: "M8.81671 5.21729L9.34354 6.31894L10.5333 6.04407L10.0005 7.14277L10.9573 7.90153L9.76602 8.17008L9.76935 9.39122L8.81671 8.62725L7.86402 9.39122L7.86731 8.17008L6.67603 7.90153L7.63284 7.14277L7.10001 6.04407L8.28984 6.31894L8.81671 5.21729Z", fill: "#FFDA44" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_4392_27547", children: _jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+};
+const IndianFlag = (props) => {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_4392_27553)", children: [_jsx("path", { d: "M1.19023 6.78213C0.427387 8.35976 -0.000488281 10.1296 -0.000488281 11.9995C-0.000488281 13.8694 0.427387 15.6393 1.19023 17.2169L11.9995 18.2604L22.8088 17.2169C23.5716 15.6393 23.9995 13.8694 23.9995 11.9995C23.9995 10.1296 23.5716 8.35976 22.8088 6.78213L11.9995 5.73865L1.19023 6.78213Z", fill: "#F0F0F0" }), _jsx("path", { d: "M1.19092 17.2183C3.13182 21.2322 7.24225 24.0009 11.9998 24.0009C16.7573 24.0009 20.8677 21.2322 22.8086 17.2183H1.19092Z", fill: "#6DA544" }), _jsx("path", { d: "M1.19092 6.78238H22.8086C20.8677 2.76843 16.7573 -0.000244141 11.9998 -0.000244141C7.24229 -0.000244141 3.13182 2.76843 1.19092 6.78238Z", fill: "#FF9811" }), _jsx("path", { d: "M12.0001 16.1742C14.3052 16.1742 16.174 14.3055 16.174 12.0003C16.174 9.69513 14.3052 7.82642 12.0001 7.82642C9.69489 7.82642 7.82617 9.69513 7.82617 12.0003C7.82617 14.3055 9.69489 16.1742 12.0001 16.1742Z", fill: "#FF9811" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_4392_27553", children: _jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+};
+const IndonesianFlag = (props) => {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_4392_27559)", children: [_jsx("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#F0F0F0" }), _jsx("path", { d: "M0 12C0 5.37262 5.37262 0 12 0C18.6274 0 24 5.37262 24 12", fill: "#A2001D" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_4392_27559", children: _jsx("rect", { width: "24", height: "24", fill: "white" }) }) })] }));
+};
+const VietnameseFlag = (props) => {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_10544_106556)", children: [_jsx("path", { d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z", fill: "#D80027" }), _jsx("path", { d: "M10.0003 5.2168L11.0795 8.53825H14.5719L11.7464 10.591L12.8257 13.9125L10.0003 11.8597L7.17488 13.9125L8.2541 10.591L5.42871 8.53825H8.92105L10.0003 5.2168Z", fill: "#FFDA44" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_10544_106556", children: _jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
+};

package/dist/utils/index.js

@@ -1,12 +1,12 @@
-export * from './anatomyToRecipeSlots';
-export * from './capitalize';
-export * from './createPoll';
-export * from './createSplitProps';
-export * from './dataAttr';
-export * from './formatNumber';
-export * from './getGameImageUrl';
-export * from './getLocaleInfo';
-export * from './getQueryClient';
-export * from './isMobile';
-export * from './parseDecimal';
-export * from './queryKeys';
+export * from './anatomyToRecipeSlots.js';
+export * from './capitalize.js';
+export * from './createPoll.js';
+export * from './createSplitProps.js';
+export * from './dataAttr.js';
+export * from './formatNumber.js';
+export * from './getGameImageUrl.js';
+export * from './getLocaleInfo.js';
+export * from './getQueryClient.js';
+export * from './isMobile.js';
+export * from './parseDecimal.js';
+export * from './queryKeys.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "exports": {
     ".": {
       "types": "./dist/components/index.d.ts",
@@ -149,10 +149,5 @@
       "to": "dist/",
       "toFlat": false
     }
-  ],
-  "tsc-alias": {
-    "fileExtensions": {
-      "inputGlob": "{js,jsx,mjs,png,jpg,jpeg,gif,svg,css,json}"
-    }
-  }
+  ]
 }

package/dist/components/Account/Account.jsx

@@ -1,313 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useShallow } from 'zustand/shallow';
-import { useAccountQuery, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks';
-import { AlertCircleIcon, ChevronLeftIcon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, CreditCard02Icon, FileCheck02Icon, Gift01Icon, Lock01Icon, Logout01Icon, Settings02Icon, User01Icon, XIcon, } from '../../icons';
-import avatarPlaceholder from '../../images/placeholder-avatar.png';
-import { Badge, Button, Drawer, IconButton, Popover, Presence } from '../../ui';
-import { formatNumber, parseDecimal } from '../../utils';
-import { accountRecipe } from './account.recipe';
-const recipe = accountRecipe();
-export function Account(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-        accountSettings: ctx.accountSettings,
-    })));
-    return (<>
-      <Drawer.Root open={globalStore.account__mobile.open} onOpenChange={(details) => {
-            globalStore.account__mobile.setOpen(details.open);
-            globalStore.accountSettings.setCollapsed(true);
-        }} lazyMount unmountOnExit>
-        <Drawer.Trigger asChild className="lg:hidden">
-          {props.children ?? (<IconButton size="sm" colorScheme="gray">
-              {globalStore.account__mobile.open ? (<XIcon />) : (<Image src={avatarPlaceholder} alt="" width={100} height={100} className="size-10"/>)}
-            </IconButton>)}
-        </Drawer.Trigger>
-        <Portal>
-          <Drawer.Positioner>
-            <Drawer.Content className="relative top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6" style={{
-            ['--top']: props.offsetTop ?? '0px',
-        }}>
-              <Profile />
-              <Wallet />
-              <Links rewardsUrl={props.rewardsUrl} betRecordsUrl={props.betRecordsUrl} transactionsUrl={props.transactionsUrl}/>
-              <AccountSettingsMenu accountInfoUrl={props.accountInfoUrl} accountSecurityUrl={props.accountSecurityUrl} accountVerificationUrl={props.accountVerificationUrl} accountPaymentMethodsUrl={props.accountPaymentMethodsUrl}/>
-            </Drawer.Content>
-          </Drawer.Positioner>
-        </Portal>
-      </Drawer.Root>
-
-      <Popover.Root open={globalStore.account.open} onOpenChange={(details) => {
-            globalStore.account.setOpen(details.open);
-            globalStore.accountSettings.setCollapsed(true);
-        }} lazyMount unmountOnExit positioning={{
-            placement: 'bottom',
-            strategy: 'fixed',
-        }}>
-        <Popover.Trigger className="hidden lg:flex" asChild>
-          {props.children ?? (<IconButton size="sm" colorScheme="gray">
-              <Image src={avatarPlaceholder} alt="" width={48} height={48} className="size-10"/>
-            </IconButton>)}
-        </Popover.Trigger>
-        <Portal>
-          <Popover.Positioner>
-            <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">
-              <Profile />
-              <Wallet />
-              <Links rewardsUrl={props.rewardsUrl} betRecordsUrl={props.betRecordsUrl} transactionsUrl={props.transactionsUrl}/>
-              <AccountSettingsMenu accountInfoUrl={props.accountInfoUrl} accountSecurityUrl={props.accountSecurityUrl} accountVerificationUrl={props.accountVerificationUrl} accountPaymentMethodsUrl={props.accountPaymentMethodsUrl}/>
-            </Popover.Content>
-          </Popover.Positioner>
-        </Portal>
-      </Popover.Root>
-    </>);
-}
-function Profile() {
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    return (<div className="flex shrink-0 items-center gap-lg">
-      <Image src={avatarPlaceholder} alt="" width={48} height={48} className="size-12"/>
-      <div className="grow">
-        <p className="text-text-secondary-700 font-semibold leading-tight">
-          {account?.name}
-        </p>
-        <p className="text-text-tertiary-600 leading-tight">
-          {account?.nickName ?? account?.emailAddress ?? account?.realName}
-        </p>
-      </div>
-
-      <Badge.Root colorScheme={account?.verified ? 'success' : 'danger'} className="self-start">
-        <Badge.Indicator />
-        <Badge.Label>
-          {account?.verified ? 'Verified' : 'Unverified'}
-        </Badge.Label>
-      </Badge.Root>
-    </div>);
-}
-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 (<div className="border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl">
-      <div className="text-text-secondary-700 text-sm">Total Balance</div>
-      <div className="text-3xl font-bold">
-        {formatNumber(totalBalance, {
-            currency: localeInfo?.currency.code,
-            minDecimalPlaces: 2,
-        })}
-      </div>
-      <div className="mt-1.5 flex gap-7xl">
-        <div>
-          <p className="text-text-secondary-700 text-2xs">Deposit Balance</p>
-          <p className="text-medium text-text-primary-brand">
-            {formatNumber(depositBalance, {
-            currency: localeInfo?.currency.code,
-            minDecimalPlaces: 2,
-        })}
-          </p>
-        </div>
-        <div>
-          <p className="text-text-secondary-700 text-2xs">Bonus Balance</p>
-          <p className="text-medium text-text-primary-brand">
-            {formatNumber(bonusBalance, {
-            currency: localeInfo?.currency.code,
-            minDecimalPlaces: 2,
-        })}
-          </p>
-        </div>
-      </div>
-
-      <div className="mt-3 flex gap-lg">
-        <Button size="xs" variant="outline" onClick={() => {
-            globalStore.depositWithdrawal.setOpen(true);
-            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
-            globalStore.profile.setOpen(false);
-            globalStore.mobileProfile.setOpen(false);
-        }}>
-          Withdraw
-        </Button>
-        <Button size="xs" onClick={() => {
-            globalStore.depositWithdrawal.setOpen(true);
-            globalStore.depositWithdrawal.setTab('DEPOSIT');
-            globalStore.profile.setOpen(false);
-            globalStore.mobileProfile.setOpen(false);
-        }}>
-          Deposit
-        </Button>
-      </div>
-    </div>);
-}
-function Links(props) {
-    const signOutMutation = useSignOutMutation();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-        accountSettings: ctx.accountSettings,
-        messages: ctx.messages,
-    })));
-    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
-    return (<nav className={recipe.nav({ className: 'mt-xl' })}>
-      <ul>
-        <li className={recipe.navItemRoot()}>
-          <button type="button" className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.messages.setOpen(true);
-        }}>
-            <Logout01Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Notifications</span>
-            <span className={recipe.navItemBadge()} data-type="warning">
-              {unreadMessagesCountQuery.data ?? 0}
-            </span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </button>
-        </li>
-        <li className={recipe.navItemRoot()}>
-          <Link href={props.rewardsUrl ?? '/rewards'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-        }}>
-            <Gift01Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Rewards</span>
-            <span className={recipe.navItemBadge()} data-type="warning">
-              0
-            </span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </Link>
-        </li>
-      </ul>
-
-      <ul>
-        <li className={recipe.navItemRoot()}>
-          <button type="button" className={recipe.navItemLink()} onClick={() => {
-            globalStore.accountSettings.setCollapsed(false);
-        }}>
-            <Settings02Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Settings</span>
-            <span className={recipe.navItemBadge()} data-type="error">
-              <AlertCircleIcon />
-            </span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </button>
-        </li>
-      </ul>
-
-      <ul>
-        <li className={recipe.navItemRoot()}>
-          <Link href={props.betRecordsUrl ?? '/bet-records'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-        }}>
-            <CoinsStacked02Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Bet Records</span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </Link>
-        </li>
-        <li className={recipe.navItemRoot()}>
-          <Link href={props.transactionsUrl ?? '/transactions'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-        }}>
-            <CoinsSwap02Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Transactions</span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </Link>
-        </li>
-      </ul>
-
-      <ul>
-        <li className={recipe.navItemRoot()}>
-          <button type="button" className={recipe.navItemLink()} disabled={signOutMutation.isPending} onClick={() => {
-            signOutMutation.mutate();
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-        }}>
-            <Logout01Icon className={recipe.navItemIcon()}/>
-            <span className={recipe.navItemLabel()}>Log Out</span>
-            <ChevronRightIcon className={recipe.navItemIndicator()}/>
-          </button>
-        </li>
-      </ul>
-    </nav>);
-}
-function AccountSettingsMenu(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-        accountSettings: ctx.accountSettings,
-    })));
-    return (<Presence present={!globalStore.accountSettings.collapsed} lazyMount className="bg-bg-primary ui-open:animate-slide-in-right ui-closed:animate-slide-out-right absolute left-0 top-0 size-full overflow-y-auto">
-      <div className="bg-bg-primary-alt flex items-center gap-xl px-xl py-md">
-        <IconButton size="2xs" variant="outline" colorScheme="gray" onClick={() => {
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-          <ChevronLeftIcon />
-        </IconButton>
-        <h2 className="text-text-primary-900 text-lg font-semibold">
-          Settings
-        </h2>
-      </div>
-      <nav className={recipe.nav({ className: 'p-4' })}>
-        <ul>
-          <li className={recipe.navItemRoot()}>
-            <Link href={props.accountInfoUrl ?? '/account'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-              <User01Icon className={recipe.navItemIcon()}/>
-              <span className={recipe.navItemLabel()}>Account Info</span>
-              <ChevronRightIcon className={recipe.navItemIndicator()}/>
-            </Link>
-          </li>
-          <li className={recipe.navItemRoot()}>
-            <Link href={props.accountSecurityUrl ?? '/account/security'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-              <Lock01Icon className={recipe.navItemIcon()}/>
-              <span className={recipe.navItemLabel()}>Security</span>
-              <ChevronRightIcon className={recipe.navItemIndicator()}/>
-            </Link>
-          </li>
-          <li className={recipe.navItemRoot()}>
-            <Link href={props.accountVerificationUrl ?? '/account/verification'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-              <FileCheck02Icon className={recipe.navItemIcon()}/>
-              <span className={recipe.navItemLabel()}>
-                Personal Verification
-              </span>
-              <ChevronRightIcon className={recipe.navItemIndicator()}/>
-            </Link>
-          </li>
-          <li className={recipe.navItemRoot()}>
-            <Link href={props.accountPaymentMethodsUrl ?? '/account/payment-methods'} className={recipe.navItemLink()} onClick={() => {
-            globalStore.account.setOpen(false);
-            globalStore.account__mobile.setOpen(false);
-            globalStore.accountSettings.setCollapsed(true);
-        }}>
-              <CreditCard02Icon className={recipe.navItemIcon()}/>
-              <span className={recipe.navItemLabel()}>Payment Methods</span>
-              <ChevronRightIcon className={recipe.navItemIndicator()}/>
-            </Link>
-          </li>
-        </ul>
-      </nav>
-    </Presence>);
-}