@opexa/portal-components 0.0.396 → 0.0.398
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { isString } from 'lodash-es';
|
|
3
4
|
import Image from 'next/image';
|
|
4
5
|
import Link from 'next/link';
|
|
5
6
|
import { useRouter } from 'next/navigation';
|
|
@@ -54,26 +55,34 @@ export function Account(props) {
|
|
|
54
55
|
const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
|
|
55
56
|
? props.offsetTop
|
|
56
57
|
: [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
|
|
57
|
-
|
|
58
|
+
const classNames = isString(props.className)
|
|
59
|
+
? { root: props.className }
|
|
60
|
+
: (props.className ?? {});
|
|
61
|
+
const contextValue = {
|
|
62
|
+
...defaultAccountProps,
|
|
63
|
+
...props,
|
|
64
|
+
className: props.className ?? undefined,
|
|
65
|
+
};
|
|
66
|
+
return (_jsxs(AccountPropsContext, { value: contextValue, children: [_jsx(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
|
|
58
67
|
globalStore.account__mobile.setOpen(details.open);
|
|
59
|
-
}, lazyMount: true, unmountOnExit: true, children: _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))]', 'overflow-auto'), style: {
|
|
68
|
+
}, lazyMount: true, unmountOnExit: true, children: _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))]', 'overflow-auto', classNames.root), style: {
|
|
60
69
|
['--offset-top-mobile']: mobileOffsetTop,
|
|
61
70
|
['--offset-top-desktop']: desktopOffsetTop,
|
|
62
|
-
}, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { router: router })] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
|
|
71
|
+
}, children: [_jsx(Profile, {}), _jsx(Wallet, { classNames: classNames }), _jsx(Links, { router: router })] }) }) }) }), _jsx(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
|
|
63
72
|
globalStore.account.setOpen(details.open);
|
|
64
73
|
}, lazyMount: true, unmountOnExit: true, positioning: {
|
|
65
74
|
placement: 'bottom',
|
|
66
75
|
strategy: 'fixed',
|
|
67
76
|
}, ids: {
|
|
68
77
|
trigger: 'opexa-portal-components:account-trigger',
|
|
69
|
-
}, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "relative z-popover w-[23.438rem] ui-closed:animate-fade-out ui-open:animate-fade-in overflow-hidden rounded-xl border border-border-primary bg-bg-primary p-xl", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { router: router })] }) }) }) })] }));
|
|
78
|
+
}, children: _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "relative z-popover w-[23.438rem] ui-closed:animate-fade-out ui-open:animate-fade-in overflow-hidden rounded-xl border border-border-primary bg-bg-primary p-xl", children: [_jsx(Profile, {}), _jsx(Wallet, { classNames: classNames }), _jsx(Links, { router: router })] }) }) }) })] }));
|
|
70
79
|
}
|
|
71
80
|
function Profile() {
|
|
72
81
|
const accountQuery = useAccountQuery();
|
|
73
82
|
const account = accountQuery.data;
|
|
74
83
|
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: "font-semibold text-text-secondary-700 leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsxs("p", { className: "grow items-center text-text-tertiary-600 leading-tight", children: ["ID: ", 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' })] })] })] })] }));
|
|
75
84
|
}
|
|
76
|
-
function Wallet() {
|
|
85
|
+
function Wallet({ classNames }) {
|
|
77
86
|
const localeInfo = useLocaleInfo();
|
|
78
87
|
const walletQuery = useWalletQuery({
|
|
79
88
|
refetchInterval: 1000,
|
|
@@ -95,12 +104,12 @@ function Wallet() {
|
|
|
95
104
|
}) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xs text-text-secondary-700", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
|
|
96
105
|
currency: localeInfo?.currency.code,
|
|
97
106
|
minDecimalPlaces: 2,
|
|
98
|
-
}) })] })] })] }), ' ', _jsxs("div", { className:
|
|
107
|
+
}) })] })] })] }), ' ', _jsxs("div", { className: twMerge('mt-3 flex gap-lg', classNames.walletActions), children: [_jsx(Button, { size: "xs", variant: "outline", className: classNames.withdrawButton, onClick: () => {
|
|
99
108
|
globalStore.depositWithdrawal.setOpen(true);
|
|
100
109
|
globalStore.depositWithdrawal.setTab('WITHDRAWAL');
|
|
101
110
|
globalStore.profile.setOpen(false);
|
|
102
111
|
globalStore.mobileProfile.setOpen(false);
|
|
103
|
-
}, children: "Withdraw" }), _jsx(Button, { size: "xs", onClick: () => {
|
|
112
|
+
}, children: "Withdraw" }), _jsx(Button, { size: "xs", className: classNames.depositButton, onClick: () => {
|
|
104
113
|
globalStore.depositWithdrawal.setOpen(true);
|
|
105
114
|
globalStore.depositWithdrawal.setTab('DEPOSIT');
|
|
106
115
|
globalStore.profile.setOpen(false);
|
|
@@ -3,5 +3,5 @@ import Image from 'next/image';
|
|
|
3
3
|
import Link from 'next/link';
|
|
4
4
|
import { Button } from '../../ui/Button/index.js';
|
|
5
5
|
export function CustomPromo({ data, viewDetailsUrl }) {
|
|
6
|
-
return (_jsxs("div", { className: "relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt", children: [_jsx(Image, { src: data.banner, alt: data.name, width: 400, height: 202, loading: "lazy",
|
|
6
|
+
return (_jsxs("div", { className: "relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt", children: [_jsx(Image, { src: data.banner, alt: data.name, width: 400, height: 202, loading: "lazy", placeholder: "blur", className: "block aspect-[365/180] w-full object-cover" }), _jsxs("div", { className: "flex flex-grow flex-col px-4 pt-2xl pb-3xl", children: [_jsx("div", { className: "w-full grow text-center font-semibold text-xl", children: data.name }), _jsx("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsxs(Link, { href: `${viewDetailsUrl}/${data.id}`, children: ["Read more", _jsxs("span", { className: "sr-only", children: [" about ", data.name] })] }) }) })] })] }));
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ export function Promo({ data, viewDetailsUrl }) {
|
|
|
11
11
|
})));
|
|
12
12
|
const claimablePromos = useAvailablePromosQuery().data ?? [];
|
|
13
13
|
const claimable = claimablePromos.find((availablePromo) => availablePromo.id === data.id);
|
|
14
|
-
return (_jsxs("div", { className: "relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt", children: [data.banner?.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 400, height: 202, loading: "lazy",
|
|
14
|
+
return (_jsxs("div", { className: "relative flex h-full flex-col overflow-hidden rounded-2xl border border-border-secondary bg-accent-50 bg-bg-primary-alt", children: [data.banner?.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 400, height: 202, loading: "lazy", placeholder: "blur", className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pt-2xl pb-3xl", children: [_jsx("div", { className: "w-full grow text-center font-semibold text-xl", children: data.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimable && (_jsx(Button, { size: "sm", onClick: () => {
|
|
15
15
|
globalStore.depositWithdrawal.setOpen(true);
|
|
16
16
|
globalStore.depositWithdrawal.setPromo(data.id);
|
|
17
17
|
}, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsxs(Link, { href: `${viewDetailsUrl}/${data.id}`, children: ["Read more", _jsxs("span", { className: "sr-only", children: [" about ", data.name] })] }) })] })] })] }));
|