CU-86a5xwkrj-NEON3 - Swap Request - Implement a Clear Form button

src/renderer/src/components/GreyAccountSelect.tsx

@@ -57,7 +57,7 @@ export const GreyAccountSelect = ({
   }
 
   return (
-    <Select.Root open={open} onOpenChange={setOpen} value={selectedAccount?.id} onValueChange={handleChangeValue}>
+    <Select.Root open={open} onOpenChange={setOpen} value={selectedAccount?.id ?? ''} onValueChange={handleChangeValue}>
       {children ? (
         <Select.RawTrigger asChild disabled={isDisabled}>
           {children}

src/renderer/src/components/GreyAmountInput.tsx

@@ -19,7 +19,7 @@ export const GreyAmountInput = ({ onChange, value, disabled, loading, className,
   return (
     <div
       className={StyleHelper.mergeStyles(
-        'h-8.5 bg-gray-300/15 rounded w-28 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed items-center justify-center flex text-sm',
+        'h-8.5 bg-gray-300/15 rounded w-32 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed items-center justify-center flex text-sm',
         className
       )}
       aria-disabled={isDisabled}

src/renderer/src/locales/en/pages.json

@@ -397,6 +397,7 @@
     },
     "form": {
       "title": "What tokens do you want to swap?",
+      "restart": "Restart",
       "swapFromTitle": "Swap this...",
       "swapToTitle": "For this...",
       "balanceLabel": "Balance",
@@ -437,4 +438,4 @@
       }
     }
   }
-}
+}

src/renderer/src/routes/pages/Swap/SwapPageContent.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, Fragment, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MdArrowForward, MdInfoOutline } from 'react-icons/md'
+import { MdArrowForward, MdInfoOutline, MdRestartAlt } from 'react-icons/md'
 import { TbArrowDown, TbStepInto, TbStepOut, TbUsers, TbWallet } from 'react-icons/tb'
 import { VscCircleFilled } from 'react-icons/vsc'
 import {
@@ -39,8 +39,11 @@ import { authReducerActions } from '@renderer/store/reducers/AuthReducer'
 import { TBlockchainServiceKey } from '@shared/@types/blockchain'
 import { IAccountState, TContactAddress, TSwapRecord } from '@shared/@types/store'
 
-type TActionsData = {
+type TStaticActionsData = {
   availableTokensToUse: SwapServiceLoadableValue<SwapServiceToken<TBlockchainServiceKey>[]>
+}
+
+type TActionsData = {
   selectedTokenToUse: SwapServiceLoadableValue<SwapServiceToken<TBlockchainServiceKey>>
   selectedAccountToUse: SwapServiceValidateValue<IAccountState>
   selectedAmountToUse: SwapServiceLoadableValue<string>
@@ -88,9 +91,12 @@ export const SwapPageContent = ({ account }: TProps) => {
     })
   )
 
+  const { actionData: staticActionData, setData: setStaticData } = useActions<TStaticActionsData>({
+    availableTokensToUse: { loading: true, value: [] },
+  })
+
   const { actionData, actionState, setData, setError, clearErrors, reset, handleAct } = useActions<TActionsData>(
     {
-      availableTokensToUse: { loading: true, value: null },
       selectedTokenToUse: { loading: false, value: null },
       selectedAccountToUse: { loading: false, value: null, valid: null },
       selectedAmountToUse: { loading: false, value: null },
@@ -177,6 +183,16 @@ export const SwapPageContent = ({ account }: TProps) => {
     swapServiceRef.current.setAmountToUse(amount)
   }
 
+  const handleResetForm = () => {
+    swapServiceRef.current.setTokenToUse(null)
+    swapServiceRef.current.setAccountToUse(null)
+    swapServiceRef.current.setAmountToUse(null)
+    swapServiceRef.current.setTokenToReceive(null)
+    swapServiceRef.current.setAddressToReceive(null)
+
+    reset()
+  }
+
   const handleSubmit = async () => {
     if (
       !swapServiceRef.current ||
@@ -234,7 +250,7 @@ export const SwapPageContent = ({ account }: TProps) => {
     const swapService = swapServiceRef.current
 
     swapService.eventEmitter.on('availableTokensToUse', availableTokensToUse => {
-      setData({ availableTokensToUse })
+      setStaticData({ availableTokensToUse })
     })
 
     swapService.eventEmitter.on('tokenToUse', tokenToUse => {
@@ -278,7 +294,7 @@ export const SwapPageContent = ({ account }: TProps) => {
     return () => {
       swapService.eventEmitter.removeAllListeners()
     }
-  }, [accountsRef, setData])
+  }, [accountsRef, setData, setStaticData])
 
   useEffect(() => {
     if (balanceQuery.isLoading) return
@@ -437,7 +453,17 @@ export const SwapPageContent = ({ account }: TProps) => {
       </div>
 
       <div className="min-h-0 flex-grow flex flex-col px-4  text-sm items-center">
-        <h2 className="text-white w-full my-3 text-sm">{t('form.title')}</h2>
+        <div className="w-full flex items-center justify-between gap-2">
+          <h2 className="text-white w-full my-3 text-sm">{t('form.title')}</h2>
+
+          <Button
+            label={t('form.restart')}
+            variant="text-slim"
+            colorSchema="neon"
+            leftIcon={<MdRestartAlt aria-hidden={true} className="w-5 h-5 min-w-5 min-h-5" />}
+            onClick={handleResetForm}
+          />
+        </div>
 
         <Separator />
 
@@ -452,8 +478,8 @@ export const SwapPageContent = ({ account }: TProps) => {
               leftIcon={<VscCircleFilled className="text-gray-300 w-2 h-2" />}
             >
               <GreyTokenSelect
-                tokens={actionData.availableTokensToUse.value ?? []}
-                loading={actionData.availableTokensToUse.loading}
+                tokens={staticActionData.availableTokensToUse.value}
+                loading={staticActionData.availableTokensToUse.loading}
                 onSelect={handleSelectTokenToUse}
                 selectedToken={actionData.selectedTokenToUse.value ?? undefined}
                 balance={balanceQuery.data}
@@ -475,7 +501,7 @@ export const SwapPageContent = ({ account }: TProps) => {
                     ? [actionData.selectedTokenToUse.value.blockchain]
                     : (Object.keys(swapChainsByServiceName) as TBlockchainServiceKey[])
                 }
-                loading={actionData.availableTokensToUse.loading}
+                loading={staticActionData.availableTokensToUse.loading}
               />
             </ActionStep>
 

src/shared/@types/i18next-resources.d.ts

@@ -1217,6 +1217,7 @@ interface Resources {
       }
       form: {
         title: 'What tokens do you want to swap?'
+        restart: 'Restart'
         swapFromTitle: 'Swap this...'
         swapToTitle: 'For this...'
         balanceLabel: 'Balance'