@opexa/portal-components 0.0.41 → 0.0.43

package/dist/components/DepositWithdrawal/Withdrawal/MayaAppWithdrawal/MayaAppWithdrawal.js

@@ -1,36 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateMayaAppWithdrawalMutation, useGlobalStore, useIsMayaSessionValidQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { toaster } from '../../../../client/utils/index.js';
-import { ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons/index.js';
-import { Button, Field, NumberInput, PasswordInput } from '../../../../ui/index.js';
+import { useCreateMayaAppWithdrawalMutation, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
+import { AlertDialog, Button, Field, NumberInput, PasswordInput, } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
 import { AmountChoices } from '../../AmountChoices.js';
-import { MayaSessionExpired } from '../../MayaSessionExpired.js';
 export function MayaAppWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
+    const [status, setStatus] = useState('waiting');
     const createWithdrawalMutation = useCreateMayaAppWithdrawalMutation({
+        onMutate() {
+            setStatus('processing');
+        },
         onSuccess() {
             form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
+            setStatus('success');
         },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
+        onError() {
+            setStatus('failed');
         },
     });
-    const isMayaSessionValidQuery = useIsMayaSessionValidQuery();
-    const isMayaSessionValid = isMayaSessionValidQuery.data ?? true;
     const paymentSettingsQuery = usePaymentSettingsQuery();
     const paymentSettings = paymentSettingsQuery.data;
     const gatewaySettings = paymentSettings?.mayaAppWithdrawalGatewaySettings;
@@ -85,9 +77,6 @@ export function MayaAppWithdrawal() {
             transactionPassword: data.password,
         });
     });
-    if (!isMayaSessionValid) {
-        return _jsx(MayaSessionExpired, {});
-    }
     return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [_jsx(Controller, { control: form.control, name: "amount", render: (o) => (_jsxs(Field.Root, { invalid: !!form.formState.errors.amount, children: [_jsxs(NumberInput.Root, { min: 0, step: 1, value: o.field.value, onValueChange: (details) => {
                                 o.field.onChange(details.value);
                             }, formatOptions: {
@@ -99,5 +88,14 @@ export function MayaAppWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", 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("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: createWithdrawalMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(SpinnerIcon, {}), "Processing..."] })) : ('Withdraw') })] }));
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", 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("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                    if (!details.open) {
+                        setStatus('waiting');
+                    }
+                }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
+                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
+                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                    api.setOpen(false);
+                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/MayaWithdrawal/MayaWithdrawal.js

@@ -1,33 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateMayaWithdrawalMutation, useGlobalStore, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { toaster } from '../../../../client/utils/index.js';
-import { ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons/index.js';
-import { Button, Field, NumberInput, PasswordInput } from '../../../../ui/index.js';
+import { useCreateMayaWithdrawalMutation, useLocaleInfo, useMobileNumberParser, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
+import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, XIcon, } from '../../../../icons/index.js';
+import { AlertDialog, Button, Field, NumberInput, PasswordInput, } from '../../../../ui/index.js';
 import { parseDecimal } from '../../../../utils/index.js';
 import { AmountChoices } from '../../AmountChoices.js';
 export function MayaWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
+    const [status, setStatus] = useState('waiting');
     const localeInfo = useLocaleInfo();
     const mobileNumberParser = useMobileNumberParser();
     const createWithdrawalMutation = useCreateMayaWithdrawalMutation({
+        onMutate() {
+            setStatus('processing');
+        },
         onSuccess() {
             form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
+            setStatus('success');
         },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
+        onError() {
+            setStatus('failed');
         },
     });
     const paymentSettingsQuery = usePaymentSettingsQuery();
@@ -101,5 +96,14 @@ export function MayaWithdrawal() {
                         shouldDirty: true,
                         shouldValidate: true,
                     });
-                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", 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("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: createWithdrawalMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(SpinnerIcon, {}), "Processing..."] })) : ('Deposit') })] }));
+                }, min: minimumAmount, max: maximumAmount, className: "mt-xl" }), _jsxs(Field.Root, { className: "mt-3xl", 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("p", { className: "mt-4xl text-xs", children: ["Upon clicking the deposit button, you agree to the", ' ', _jsx("button", { type: "button", className: "underline underline-offset-2", children: "Terms of Use and Privacy Policy" }), "."] }), _jsx(Button, { type: "submit", className: "mt-4.5", disabled: createWithdrawalMutation.isPending, children: "Withdraw" }), _jsx(AlertDialog.Root, { open: status !== 'waiting', onOpenChange: (details) => {
+                    if (!details.open) {
+                        setStatus('waiting');
+                    }
+                }, lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+2)]" }), _jsx(AlertDialog.Positioner, { className: "!z-[calc(var(--z-dialog)+3)]", children: _jsxs(AlertDialog.Content, { children: [_jsx(AlertDialog.CloseTrigger, { disabled: status === 'processing', children: _jsx(XIcon, {}) }), _jsxs(AlertDialog.Header, { children: [status === 'processing' && (_jsx(SpinnerIcon, { className: "text-text-brand-primary-600 size-12" })), status === 'success' && (_jsx("div", { className: "bg-bg-success-secondary text-text-featured-icon-light-success flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) })), status === 'failed' && (_jsx("div", { className: "bg-bg-error-secondary text-text-featured-icon-light-error flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }))] }), _jsxs(AlertDialog.Body, { children: [_jsxs(AlertDialog.Title, { children: [status === 'processing' && 'Processing Withdraw', status === 'success' && 'Withdrawal Submitted', status === 'failed' && 'Withdraw Failed'] }), _jsxs(AlertDialog.Description, { children: [status === 'processing' &&
+                                                        "We're verifying your account and amount. Please hold a moment.", status === 'success' &&
+                                                        'Your withdrawal request has been submitted successfully and is awaiting confirmation. You won’t have to wait long — once approved, the funds will be credited to your account.', status === 'failed' &&
+                                                        'Something went wrong while processing your withdrawal. Please try again or contact support.'] })] }), (status === 'failed' || status === 'success') && (_jsx(AlertDialog.Footer, { children: _jsx(AlertDialog.Context, { children: (api) => (_jsx(Button, { onClick: () => {
+                                                    api.setOpen(false);
+                                                }, children: status === 'failed' ? 'Try Again' : 'Ok' })) }) }))] }) })] }) })] }));
 }

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
-import { useAccountQuery, useGlobalStore, useOnMMA, usePaymentSettingsQuery, useWalletQuery, } from '../../../client/hooks/index.js';
+import { useAccountQuery, useGlobalStore, useIsMayaSessionValidQuery, useOnMMA, usePaymentSettingsQuery, useWalletQuery, } from '../../../client/hooks/index.js';
 import { AlertCircleIcon, SpinnerIcon } from '../../../icons/index.js';
 import { Button } from '../../../ui/index.js';
 import { onMobileDevice, parseDecimal } from '../../../utils/index.js';
@@ -18,6 +18,8 @@ export function Withdrawal() {
     const account = accountQuery.data;
     const paymentSettingsQuery = usePaymentSettingsQuery();
     const paymentSettings = paymentSettingsQuery.data;
+    const isMayaSessionValidQuery = useIsMayaSessionValidQuery();
+    const isMayaSessionValid = isMayaSessionValidQuery.data ?? true;
     const enabledPaymentMethods = (() => {
         const l = [];
         if (onMMA) {
@@ -55,9 +57,13 @@ export function Withdrawal() {
     }, [enabledPaymentMethods, paymentMethod]);
     if (accountQuery.isLoading ||
         walletQuery.isLoading ||
-        paymentSettingsQuery.isLoading) {
+        paymentSettingsQuery.isLoading ||
+        isMayaSessionValidQuery.isLoading) {
         return _jsx(SpinnerIcon, { className: "mx-auto size-6" });
     }
+    if (!isMayaSessionValid) {
+        return _jsx(MayaSessionSessionExpired, {});
+    }
     if (parseDecimal(wallet?.balance, 0) < 1) {
         return _jsx(InsufficientBalance, {});
     }
@@ -80,3 +86,6 @@ function InsufficientBalance() {
 function NoAvailablePaymentMethods() {
     return (_jsxs("div", { className: "py-xl", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "text-text-featured-icon-light-warning size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold", children: "Not Available" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: "Withdrawal is not available at this time. Please try again later or contact support for assistance." })] }));
 }
+function MayaSessionSessionExpired() {
+    return (_jsxs("div", { className: "py-xl", children: [_jsx("div", { className: "bg-bg-warning-secondary mx-auto flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, { className: "text-text-featured-icon-light-warning size-6" }) }), _jsx("h2", { className: "mt-lg text-center text-lg font-semibold", children: "Session Expired" }), _jsx("p", { className: "text-text-tertiary-600 mx-auto mt-xs max-w-[25rem] text-center text-sm", children: "Your session has timed out. To continue with deposits or withdrawals, Please try reloading the app." })] }));
+}

package/dist/icons/SpinnerIcon.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SpinnerIcon(props) {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { fill: "currentColor", d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25" }), _jsx("path", { fill: "currentColor", d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", children: _jsx("animateTransform", { attributeName: "transform", dur: "0.75s", repeatCount: "indefinite", type: "rotate", values: "0 12 12;360 12 12" }) })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", className: "fill-bg-tertiary" }), _jsx("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "fill-text-brand-primary-600", children: _jsx("animateTransform", { attributeName: "transform", dur: "0.75s", repeatCount: "indefinite", type: "rotate", values: "0 12 12;360 12 12" }) })] }));
 }

package/dist/styles/theme.css

@@ -3,7 +3,7 @@
 
 @layer base {
   html {
-    @apply scheme-dark scroll-smooth;
+    @apply scheme-light dark:scheme-dark scroll-smooth;
   }
 
   body {
@@ -193,9 +193,11 @@
   --color-success-400: #47cd89;
   --color-success-700: #067647;
   --color-success-800: #085d3a;
+  --color-cyan-950: #0d2d3a;
 
   --color-button-primary-bg: #fac515;
   --color-button-primary-fg: #542c0d;
+  --color-button-primary-border: #fac515;
   --color-button-secondary-bg: #13161b;
   --color-button-secondary-fg: #fac515;
   --color-button-secondary-border: #fac515;
@@ -216,6 +218,8 @@
   --color-bg-disabled-subtle: #f9fafb;
   --color-bg-success-secondary: #079455;
   --color-bg-overlay: #22262f;
+  --color-bg-error-secondary: #d92d20;
+  --color-bg-warning-secondary: #dc6803;
 
   --color-text-brand: #feee95;
   --color-text-brand-primary-600: #eaaa08;
@@ -237,9 +241,11 @@
   --color-text-success-primary: #17b26a;
   --color-text-success-primary-600: #47cd89;
   --color-text-warning-primary: #f79009;
+  --color-text-warning-primary-600: #fdb022;
   --color-text-error-primary: #f04438;
   --color-text-featured-icon-light-success: #abefc6;
   --color-text-featured-icon-light-error: #fecdca;
+  --color-text-featured-icon-light-warning: #fedf89;
 
   --color-border-primary: #373a41;
   --color-border-secondary: #22262f;
@@ -351,6 +357,8 @@
   --animate-slide-in-right: slide-in-right 400ms cubic-bezier(0.05, 0.7, 0.1, 1);
   --animate-slide-out-right: slide-out-right 250ms
     cubic-bezier(0.3, 0, 0.8, 0.15);
+  --animate-slide-in-down: slide-in-down 400ms cubic-bezier(0.05, 0.7, 0.1, 1);
+  --animate-slide-out-down: slide-out-down 250ms cubic-bezier(0.3, 0, 0.8, 0.15);
   --animate-marquee: marquee 10s linear infinite forwards;
 
   @keyframes fade-in {
@@ -597,6 +605,24 @@
     }
   }
 
+  @keyframes slide-in-down {
+    from {
+      transform: translateY(-100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-down {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
   @keyframes marquee {
     to {
       transform: translateX(-100%);
@@ -624,3 +650,4 @@
 @custom-variant scrollbar (&::-webkit-scrollbar);
 @custom-variant scrollbar-thumb (&::-webkit-scrollbar-thumb);
 @custom-variant scrollbar-track (&::-webkit-scrollbar-track);
+@custom-variant dark (&:where(.dark, .dark *));