refactor: back button for approval pages (#439)

ArdentHQ · Jul 16, 2024 · 728045e · 728045e
1 parent 39292aa
commit 728045e
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 15 deletions.
diff --git a/src/components/approve/ApproveFooter.tsx b/src/components/approve/ApproveFooter.tsx
@@ -5,9 +5,10 @@ type Props = {
     disabled?: boolean;
     onSubmit: () => Promise<void>;
     onCancel: () => Promise<void>;
+    isNative?: boolean;
 };
 
-const ApproveFooter = ({ disabled, onSubmit, onCancel }: Props) => {
+const ApproveFooter = ({ disabled, onSubmit, onCancel, isNative }: Props) => {
     const { t } = useTranslation();
     const onApprove = async () => {
         if (disabled) return;
@@ -18,7 +19,7 @@ const ApproveFooter = ({ disabled, onSubmit, onCancel }: Props) => {
     return (
         <div className='grid h-full w-full grid-cols-2 items-center gap-2 bg-white px-4 py-4 shadow-button-container dark:bg-subtle-black dark:shadow-button-container-dark'>
             <Button variant='secondaryBlack' onClick={onCancel}>
-                {t('ACTION.REFUSE')}
+                {isNative ? t('ACTION.BACK') : t('ACTION.REFUSE')}
             </Button>
             <Button variant='primary' disabled={disabled} onClick={onApprove}>
                 {t('ACTION.APPROVE')}

diff --git a/src/components/approve/ApproveTransaction.tsx b/src/components/approve/ApproveTransaction.tsx
@@ -24,6 +24,7 @@ import { useWaitForConnectedDevice } from '@/lib/Ledger';
 import { getNetworkCurrency } from '@/lib/utils/getActiveCoin';
 import { OneTimeEvents } from '@/OneTimeEventHandlers';
 import { ProfileData, ScreenName } from '@/lib/background/contracts';
+import constants from '@/constants';
 
 type Props = {
     abortReference: AbortController;
@@ -53,6 +54,7 @@ const ApproveTransaction = ({
         receiverAddress,
         fee: customFee,
         memo,
+        feeClass,
     } = location.state;
     const { profile } = useProfileContext();
     const { env } = useEnvironmentContext();
@@ -68,6 +70,7 @@ const ApproveTransaction = ({
     const exchangeCurrency = wallet.exchangeCurrency() ?? 'USD';
     const coin = getNetworkCurrency(wallet.network());
     const withFiat = wallet.network().isLive();
+    const isNative = session.domain === constants.APP_NAME;
 
     const {
         formValuesLoaded,
@@ -202,7 +205,15 @@ const ApproveTransaction = ({
             await removeWindowInstance(location.state?.windowId, 100);
         }
         loadingModal.close();
-        navigate('/');
+
+        const params = new URLSearchParams({
+            receiverAddress,
+            memo,
+            amount,
+            fee: customFee,
+            feeClass,
+        });
+        isNative ? navigate(`/transaction/send?${params.toString()}`) : navigate('/');
     };
 
     return (
@@ -214,6 +225,7 @@ const ApproveTransaction = ({
                     disabled={!!error || !formValuesLoaded}
                     onSubmit={onSubmit}
                     onCancel={onCancel}
+                    isNative={isNative}
                 />
             }
             className='pt-6'

diff --git a/src/components/approve/ApproveVote.tsx b/src/components/approve/ApproveVote.tsx
@@ -23,6 +23,7 @@ import { useWaitForConnectedDevice } from '@/lib/Ledger';
 import { ActionBody } from '@/components/approve/ActionBody';
 import { getNetworkCurrency } from '@/lib/utils/getActiveCoin';
 import { ProfileData, ScreenName } from '@/lib/background/contracts';
+import constants from '@/constants';
 
 type Props = {
     abortReference: AbortController;
@@ -49,8 +50,9 @@ const ApproveVote = ({ abortReference, approveWithLedger, wallet, closeLedgerScr
         ticker: wallet.currency(),
     });
     const { waitUntilLedgerIsConnected } = useWaitForConnectedDevice();
-    const { fee: customFee } = location.state;
+    const { fee: customFee, feeClass, session } = location.state;
     const [showHigherCustomFeeBanner, setShowHigherCustomFeeBanner] = useState(true);
+    const isNative = session.domain === constants.APP_NAME;
 
     const {
         resetForm,
@@ -196,8 +198,17 @@ const ApproveVote = ({ abortReference, approveWithLedger, wallet, closeLedgerScr
         if (location.state.windowId) {
             await removeWindowInstance(location.state?.windowId, 100);
         }
+        loadingModal.close();
 
-        navigate('/');
+        const params = new URLSearchParams({ fee: customFee, feeClass });
+        params.append('vote', vote?.wallet?.address() ?? '');
+        params.append('unvote', unvote?.wallet?.address() ?? '');
+        if (isNative) {
+            profile.settings().forget('LAST_VISITED_PAGE');
+            navigate(`/vote?${params.toString()}`);
+        } else {
+            navigate('/');
+        }
     };
 
     return (
@@ -206,7 +217,12 @@ const ApproveVote = ({ abortReference, approveWithLedger, wallet, closeLedgerScr
                 appDomain={state.session.domain}
                 appLogo={state.session.logo}
                 footer={
-                    <ApproveFooter disabled={!!error} onSubmit={onSubmit} onCancel={onCancel} />
+                    <ApproveFooter
+                        disabled={!!error}
+                        onSubmit={onSubmit}
+                        onCancel={onCancel}
+                        isNative={isNative}
+                    />
                 }
                 className='pt-6'
                 showHigherCustomFeeBanner={showHigherCustomFeeBanner}

diff --git a/src/components/fees/FeeOption.tsx b/src/components/fees/FeeOption.tsx
@@ -16,15 +16,17 @@ export const FeeOption = ({
     value,
     onClick,
     isSelected = false,
+    feeClass,
 }: {
     name: string;
     value: string;
-    onClick: (value: string) => void;
+    onClick: (value: string, feeClass: string) => void;
     isSelected: boolean;
+    feeClass: string;
 }) => {
     const network = useActiveNetwork();
     const handleClick = () => {
-        onClick(value);
+        onClick(value, feeClass);
     };
 
     return (

diff --git a/src/components/fees/FeeOptionsList.tsx b/src/components/fees/FeeOptionsList.tsx
@@ -1,22 +1,26 @@
 import { useTranslation } from 'react-i18next';
 import { FeeOption, FeeOptionSkeleton } from './FeeOption';
 import { TransactionFees } from '@/lib/hooks/useNetworkFees';
+import constants from '@/constants';
 
 export const FeeOptionsList = ({
     fee,
     setFee,
     fees,
     isLoading = false,
+    setFeeClass,
 }: {
     fee: string;
     setFee: (fee: string) => void;
     fees?: TransactionFees;
     isLoading?: boolean;
+    setFeeClass?: (feeClass: string) => void;
 }) => {
     const { t } = useTranslation();
 
-    const handleClick = (fee: string) => {
+    const handleClick = (fee: string, feeClass: string) => {
         setFee(fee);
+        setFeeClass?.(feeClass);
     };
 
     if (!fees || isLoading) {
@@ -36,18 +40,21 @@ export const FeeOptionsList = ({
                 value={fees.min}
                 isSelected={fee == fees.min}
                 onClick={handleClick}
+                feeClass={constants.FEE_SLOW}
             />
             <FeeOption
                 name={t('COMMON.AVERAGE')}
                 value={fees.avg}
                 isSelected={fee == fees.avg}
                 onClick={handleClick}
+                feeClass={constants.FEE_DEFAULT}
             />
             <FeeOption
                 name={t('COMMON.FAST')}
                 value={fees.max}
                 isSelected={fee == fees.max}
                 onClick={handleClick}
+                feeClass={constants.FEE_FAST}
             />
         </div>
     );

diff --git a/src/components/fees/FeeSection.tsx b/src/components/fees/FeeSection.tsx
@@ -6,6 +6,7 @@ import { useNetworkFees } from '@/lib/hooks/useNetworkFees';
 import useActiveNetwork from '@/lib/hooks/useActiveNetwork';
 import { NumericInput } from '@/shared/components/input/NumericInput';
 import { useProfileContext } from '@/lib/context/Profile';
+import constants from '@/constants';
 
 type AddressDropdownProps = ComponentPropsWithRef<'input'> & {
     variant?: 'primary' | 'destructive';
@@ -14,6 +15,8 @@ type AddressDropdownProps = ComponentPropsWithRef<'input'> & {
     setValue: (value: string) => void;
     feeType?: string;
     step?: number;
+    feeClass?: string;
+    handleFeeClassChange?: (feeClass: string) => void;
 };
 
 export const FeeSection = ({
@@ -23,10 +26,14 @@ export const FeeSection = ({
     setValue,
     step = 0.01,
     feeType = 'transfer',
+    feeClass = constants.FEE_DEFAULT,
+    handleFeeClassChange,
     ...rest
 }: AddressDropdownProps) => {
     const { t } = useTranslation();
-    const [advancedFeeView, setAdvancedFeeView] = useState<boolean>(false);
+    const [advancedFeeView, setAdvancedFeeView] = useState<boolean>(
+        feeClass === constants.FEE_CUSTOM,
+    );
     const activeNetwork = useActiveNetwork();
     const { profile } = useProfileContext();
 
@@ -42,6 +49,7 @@ export const FeeSection = ({
             onFeeChange(fees.avg);
         }
         setAdvancedFeeView(!advancedFeeView);
+        handleFeeClassChange?.(!advancedFeeView ? constants.FEE_CUSTOM : constants.FEE_DEFAULT);
     };
 
     const onFeeChange = (value: string) => {
@@ -54,6 +62,22 @@ export const FeeSection = ({
         }
     }, [fees, advancedFeeView]);
 
+    useEffect(() => {
+        if (feeClass !== constants.FEE_CUSTOM && fees) {
+            switch (feeClass) {
+                case constants.FEE_SLOW:
+                    onFeeChange(fees.min);
+                    break;
+                case constants.FEE_DEFAULT:
+                    onFeeChange(fees.avg);
+                    break;
+                case constants.FEE_FAST:
+                    onFeeChange(fees.max);
+                    break;
+            }
+        }
+    }, []);
+
     return (
         <div className='flex flex-col gap-2'>
             <div className='flex w-full flex-row items-center justify-between'>
@@ -85,6 +109,7 @@ export const FeeSection = ({
                     isLoading={isLoadingFee}
                     setFee={onFeeChange}
                     fee={value}
+                    setFeeClass={(feeClass: string) => handleFeeClassChange?.(feeClass)}
                 />
             )}
         </div>

diff --git a/src/components/send/SendForm.tsx b/src/components/send/SendForm.tsx
@@ -119,6 +119,8 @@ export const SendForm = ({ formik }: { formik: FormikProps<SendFormik> }) => {
                 helperText={formik.values.fee ? formik.errors.fee : undefined}
                 value={formik.values.fee}
                 setValue={(value: string) => formik.setFieldValue('fee', value)}
+                feeClass={formik.values.feeClass}
+                handleFeeClassChange={(value: string) => formik.setFieldValue('feeClass', value)}
             />
         </div>
     );

diff --git a/src/components/vote/VoteFee.tsx b/src/components/vote/VoteFee.tsx
@@ -12,13 +12,17 @@ export const VoteFee = ({
     onSelectedFee,
     onBlur,
     handleFeeInputChange,
+    feeClass,
+    handleFeeClassChange,
 }: {
     delegateAddress?: string;
     fee: string;
     feeError?: string;
     onSelectedFee: (fee: string) => void;
     onBlur: FocusEventHandler<HTMLInputElement>;
     handleFeeInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    feeClass?: string;
+    handleFeeClassChange?: (feeClass: string) => void;
 }) => {
     const { t } = useTranslation();
     const [isEditing, setIsEditing] = useState<boolean>(false);
@@ -56,6 +60,8 @@ export const VoteFee = ({
                     value={fee}
                     setValue={onSelectedFee}
                     feeType='vote'
+                    feeClass={feeClass}
+                    handleFeeClassChange={handleFeeClassChange}
                 />
             </div>
         );

diff --git a/src/constants.ts b/src/constants.ts
@@ -39,6 +39,12 @@ const MAX_FEES = {
 const MAC_OS = 'mac';
 const DEFAULT_OS = 'default'; // For Windows and Linux
 
+// Fee classes
+const FEE_SLOW = 'slow';
+const FEE_FAST = 'fast';
+const FEE_DEFAULT = 'default';
+const FEE_CUSTOM = 'custom';
+
 const constants = {
     APP_NAME,
     SUPPORT_EMAIL,
@@ -65,6 +71,10 @@ const constants = {
     GITHUB_RELEASES_URL,
     MAC_OS,
     DEFAULT_OS,
+    FEE_SLOW,
+    FEE_FAST,
+    FEE_DEFAULT,
+    FEE_CUSTOM,
 };
 
 export default constants;
diff --git a/src/i18n/ns/action.ts b/src/i18n/ns/action.ts
@@ -1,5 +1,6 @@
 export default {
     APPROVE: 'Approve',
+    BACK: 'Back',
     CANCEL: 'Cancel',
     CLOSE: 'Close',
     CONFIRM_IMPORT: 'Confirm & Import',

diff --git a/src/pages/Send.tsx b/src/pages/Send.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { BigNumber } from '@ardenthq/sdk-helpers';
 import { runtime } from 'webextension-polyfill';
 import { useFormik } from 'formik';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { validateAddress } from './CreateContact';
@@ -23,6 +23,7 @@ export type SendFormik = {
     memo?: string;
     fee: string;
     receiverAddress: string;
+    feeClass?: string;
 };
 
 interface PageData extends SendFormik {
@@ -40,6 +41,7 @@ const Send = () => {
     const { t } = useTranslation();
     const { profile } = useProfileContext();
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+    const [searchParams] = useSearchParams();
 
     const lastVisitedPage = profile.settings().get('LAST_VISITED_PAGE') as { data: PageData };
 
@@ -99,6 +101,12 @@ const Send = () => {
                 return Number(value) <= constants.MAX_FEES.transfer;
             })
             .trim(),
+        feeClass: string().oneOf([
+            constants.FEE_CUSTOM,
+            constants.FEE_DEFAULT,
+            constants.FEE_FAST,
+            constants.FEE_SLOW,
+        ]),
         receiverAddress: string()
             .required(t('ERROR.IS_REQUIRED', { name: 'Address' }))
             .min(
@@ -134,6 +142,10 @@ const Send = () => {
             amount: lastVisitedPage?.data?.amount || '',
             memo: lastVisitedPage?.data?.memo || '',
             fee: lastVisitedPage?.data?.fee || '',
+            feeClass:
+                searchParams.get('feeClass') ||
+                lastVisitedPage?.data?.feeClass ||
+                constants.FEE_DEFAULT,
             receiverAddress: lastVisitedPage?.data?.receiverAddress || '',
         },
         validationSchema: validationSchema,
@@ -155,6 +167,7 @@ const Send = () => {
                         logo: 'icon/128.png',
                         domain: constants.APP_NAME,
                     },
+                    feeClass: formik.values.feeClass,
                 },
             });
         },