Minor UI fixes (wormhole-foundation#2639)

* fix: Claim button UI * fix(review): handle user rejection * fix: min amount handling fix * fix(amount input): inconsistent decimals
wormholelabs-xyz · Sep 23, 2024 · 906d189 · 906d189
1 parent 1accdb3
commit 906d189
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 22 deletions.
diff --git a/wormhole-connect/src/hooks/useAmountValidation.ts b/wormhole-connect/src/hooks/useAmountValidation.ts
@@ -82,9 +82,11 @@ export const useAmountValidation = (props: Props): HookReturn => {
   // All quotes fail.
   if (allRoutesFailed) {
     if (minAmount) {
-      const amountDisplay = sdkAmount.display(minAmount);
+      const formattedAmount = sdkAmount.whole(minAmount).toLocaleString('en', {
+        maximumFractionDigits: 4,
+      });
       return {
-        error: `Amount too small (min ~${amountDisplay} ${props.tokenSymbol})`,
+        error: `Amount too small (min ~${formattedAmount} ${props.tokenSymbol})`,
       };
     } else {
       return {
@@ -95,9 +97,11 @@ export const useAmountValidation = (props: Props): HookReturn => {
 
   // MinQuote warnings information
   if (minAmount) {
-    const amountDisplay = sdkAmount.display(minAmount);
+    const formattedAmount = sdkAmount.whole(minAmount).toLocaleString('en', {
+      maximumFractionDigits: 4,
+    });
     return {
-      warning: `More routes available for amounts exceeding ${amountDisplay} ${props.tokenSymbol}`,
+      warning: `More routes available for amounts exceeding ${formattedAmount} ${props.tokenSymbol}`,
     };
   }
 

diff --git a/wormhole-connect/src/utils/sdkv2.ts b/wormhole-connect/src/utils/sdkv2.ts
@@ -445,5 +445,5 @@ export const isMinAmountError = (
   error?: Error,
 ): error is routes.MinAmountError => {
   const unsafeCastError = error as routes.MinAmountError;
-  return isAmount(unsafeCastError?.min?.amount);
+  return isAmount(unsafeCastError?.min);
 };
diff --git a/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx b/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx
@@ -210,19 +210,12 @@ const AmountInput = (props: Props) => {
                 e.currentTarget.blur();
               },
               step: '0.1',
+              pattern: '[0-9]+([.|,][0-9]{1,2})?',
             }}
             placeholder="0"
             variant="standard"
             value={amount}
             onChange={handleChange}
-            onWheel={(e) => {
-              // IMPORTANT: We need to prevent the scroll behavior on number inputs.
-              // Otherwise it'll increase/decrease the value when user scrolls on the input control.
-              // See for details: https://github.com/mui/material-ui/issues/7960
-              if (e.target instanceof HTMLElement) {
-                e.target.blur();
-              }
-            }}
             InputProps={{
               disableUnderline: true,
               endAdornment: (

diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx
@@ -387,12 +387,14 @@ const ReviewTransaction = (props: Props) => {
         destinationGasDrop={receiveNativeAmount}
         quote={quote}
       />
-      <Collapse in={showGasSlider}>
-        <GasSlider
-          destinationGasDrop={receiveNativeAmount || 0}
-          disabled={isGasSliderDisabled}
-        />
-      </Collapse>
+      {showGasSlider && (
+        <Collapse in={showGasSlider}>
+          <GasSlider
+            destinationGasDrop={receiveNativeAmount || 0}
+            disabled={isGasSliderDisabled}
+          />
+        </Collapse>
+      )}
       <SendError humanError={sendError} internalError={sendErrorInternal} />
       {confirmTransactionButton}
     </Stack>

diff --git a/wormhole-connect/src/views/v2/Redeem/index.tsx b/wormhole-connect/src/views/v2/Redeem/index.tsx
@@ -67,13 +67,20 @@ const useStyles = makeStyles()((theme) => ({
     width: '100%',
   },
   actionButton: {
-    padding: '8px 16px',
+    padding: '12px 16px',
     backgroundColor: theme.palette.primary.main,
     borderRadius: '8px',
     margin: 'auto',
     maxWidth: '420px',
     width: '100%',
   },
+  claimButton: {
+    backgroundColor: theme.palette.warning.light,
+    color: theme.palette.background.default,
+    '&:hover': {
+      backgroundColor: theme.palette.warning.main,
+    },
+  },
   errorBox: {
     maxWidth: '420px',
   },
@@ -543,7 +550,7 @@ const Redeem = () => {
 
       return (
         <Button
-          className={classes.actionButton}
+          className={joinClass([classes.actionButton, classes.claimButton])}
           disabled={isClaimInProgress || !isTxAttested}
           variant={claimError ? 'error' : 'primary'}
           onClick={handleManualClaim}
@@ -556,7 +563,9 @@ const Redeem = () => {
               </Typography>
             </Stack>
           ) : (
-            <Typography textTransform="none">Claim</Typography>
+            <Typography textTransform="none">
+              Claim tokens to complete transfer
+            </Typography>
           )}
         </Button>
       );