Hide estimated arrival if undefined and restrict rate to 10 decimal p…

…laces
WRadoslaw · Mar 20, 2024 · 0da386e · 0da386e
1 parent 77aee34
commit 0da386e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/packages/atlas/src/components/ChangeNowModal/steps/SummaryStep.tsx b/packages/atlas/src/components/ChangeNowModal/steps/SummaryStep.tsx
@@ -20,6 +20,7 @@ import { cVar, sizes } from '@/styles'
 import { changeNowService } from '@/utils/ChangeNowService'
 import { formatJoystreamAddress } from '@/utils/address'
 import { shortenString } from '@/utils/misc'
+import { formatSmallDecimal } from '@/utils/number'
 import { formatDurationShort, getTimeDiffInSeconds } from '@/utils/time'
 
 import { FormData } from './FormStep'
@@ -43,6 +44,7 @@ export const SummaryStep = ({
 }: SummaryStepProps) => {
   const [termsAccepted, setTermsAccepted] = useState(false)
   const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
   const [timeDiff, setTimeDiff] = useState<number | undefined>(undefined)
   const { activeMembership } = useUser()
   const { currentUser } = useAuth()
@@ -61,6 +63,7 @@ export const SummaryStep = ({
     }
     const isSellingJoy = type === 'sell'
     const refundAddress = isSellingJoy ? activeMembership.controllerAccount : undefined
+    setLoading(true)
     const txData = await changeNowService
       .createExchangeTransaction({
         refundAddress,
@@ -74,13 +77,15 @@ export const SummaryStep = ({
       })
       .then((res) => res.data)
       .catch(() => {
+        setLoading(false)
         displaySnackbar({
           title: 'Transaction creation failed',
           description: 'Please try again, if the problem persists contact support.',
         })
       })
 
     if (!txData) {
+      setLoading(false)
       return
     }
 
@@ -110,6 +115,9 @@ export const SummaryStep = ({
           })
           goToStep(ChangeNowModalStep.PROGRESS)
         },
+        onError: () => {
+          setLoading(false)
+        },
       })
     } else {
       goToStep(ChangeNowModalStep.PROGRESS)
@@ -136,7 +144,8 @@ export const SummaryStep = ({
 
   useEffect(() => {
     setPrimaryButtonProps({
-      text: 'Next',
+      text: loading ? 'Next' : 'Waiting...',
+      disabled: loading,
       onClick: async () => {
         if (termsAccepted && validUntil) {
           const timeDiff = getTimeDiffInSeconds(new Date(validUntil))
@@ -150,7 +159,7 @@ export const SummaryStep = ({
         }
       },
     })
-  }, [goToStep, onTransactionSubmit, setPrimaryButtonProps, termsAccepted, validUntil])
+  }, [goToStep, loading, onTransactionSubmit, setPrimaryButtonProps, termsAccepted, validUntil])
 
   useMountEffect(() => {
     if (!validUntil) {
@@ -204,14 +213,16 @@ export const SummaryStep = ({
         </Text>
       </FlexBox>
 
-      <FlexBox width="100%" justifyContent="space-between">
-        <Text variant="t200" as="p" color="colorText">
-          Estimated Arrival
-        </Text>
-        <Text variant="t200" as="p">
-          {estimatedArrival ? new Date(estimatedArrival).toDateString() : 'N/A'}
-        </Text>
-      </FlexBox>
+      {estimatedArrival ? (
+        <FlexBox width="100%" justifyContent="space-between">
+          <Text variant="t200" as="p" color="colorText">
+            Estimated Arrival
+          </Text>
+          <Text variant="t200" as="p">
+            {new Date(estimatedArrival).toDateString()}
+          </Text>
+        </FlexBox>
+      ) : null}
 
       <FlexBox width="100%" justifyContent="space-between">
         <Text variant="t200" as="p" color="colorText">
@@ -227,7 +238,7 @@ export const SummaryStep = ({
           Estimated Rate
         </Text>
         <Text variant="t200" as="p">
-          1 {fromTicker} ~ {to.amount / from.amount} {toTicker}
+          1 {fromTicker} ~ {formatSmallDecimal(to.amount / from.amount)} {toTicker}
         </Text>
       </FlexBox>
 

diff --git a/packages/atlas/src/utils/number.ts b/packages/atlas/src/utils/number.ts
@@ -6,7 +6,7 @@ export const getRandomIntInclusive = (min: number, max: number) => {
 }
 
 const numberFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 })
-const smallDecimalFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 6 })
+const smallDecimalFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 10 })
 
 export const formatNumber = (num: number): string => {
   return numberFormatter.format(num).replaceAll(',', ' ')