Merge pull request #3537 from Emurgo/sorin/YOEXT-1138/ui-fixes

fixes(swap) UI fixes
Emurgo · Jun 13, 2024 · 420a6bc · 420a6bc
2 parents c18d26a + 876cc83
commit 420a6bc
Show file tree

Hide file tree

Showing 11 changed files with 220 additions and 129 deletions.
diff --git a/packages/yoroi-extension/app/components/swap/CancelOrderDialog.js b/packages/yoroi-extension/app/components/swap/CancelOrderDialog.js
@@ -68,13 +68,21 @@ export default function CancelSwapOrderDialog({
           hwWalletError={hwWalletError}
         />
       </Dialog>
-    )
+    );
   }
   return (
-    <Dialog title="Cancel order" onClose={onDialogClose} withCloseButton closeOnOverlayClick>
-      <Box display="flex" mt="8px" mb="24px" flexDirection="column" gap="16px">
+    <Dialog
+      title="Cancel order"
+      onClose={onDialogClose}
+      withCloseButton
+      closeOnOverlayClick
+      styleOverride={{ maxWidth: '612px', height: '496px', minWidth: '612px' }}
+    >
+      <Box display="flex" flexDirection="column" gap="12px">
         <Box>
-          <Typography component="div" variant="body1">Are you sure you want to cancel this order?</Typography>
+          <Typography component="div" variant="body1">
+            Are you sure you want to cancel this order?
+          </Typography>
         </Box>
         <AssetPair
           from={order.from.token}
@@ -88,13 +96,22 @@ export default function CancelSwapOrderDialog({
           <SummaryRow col1="Asset amount">
             {order.amount} {order.to.token.ticker}
           </SummaryRow>
-          <SummaryRow col1="Total returned" info='The amount returned to your wallet after cancelling the order'>
-            {transactionParams ? transactionParams.returnValues.map(v => (
-              <Box>{v.formattedValue} {v.ticker}</Box>
-            )) : (<LoadingSpinner small />)}
+          <SummaryRow
+            col1="Total returned"
+            info="The amount returned to your wallet after cancelling the order"
+          >
+            {transactionParams ? (
+              transactionParams.returnValues.map((v, index) => (
+                <>
+                  {index > 0 && ' +'} {v.formattedValue} {v.ticker}
+                </>
+              ))
+            ) : (
+              <LoadingSpinner small />
+            )}
           </SummaryRow>
           <SummaryRow col1="Cancellation fee">
-            {transactionParams ? transactionParams.formattedFee : (<LoadingSpinner small />)}
+            {transactionParams ? transactionParams.formattedFee : <LoadingSpinner small />}
           </SummaryRow>
         </Box>
         <Box>
@@ -112,7 +129,7 @@ export default function CancelSwapOrderDialog({
           />
         </Box>
       </Box>
-      <Box display="flex" gap="24px" mt="24px">
+      <Box display="flex" gap="24px">
         <Button fullWidth variant="secondary" onClick={onDialogClose}>
           Back
         </Button>
@@ -133,9 +150,7 @@ export default function CancelSwapOrderDialog({
           }}
           disabled={isLoading || password.length === 0}
         >
-          {isLoading ? (
-            <LoadingSpinner small light />
-          ) : 'Cancel order'}
+          {isLoading ? <LoadingSpinner small light /> : 'Cancel order'}
         </Button>
       </Box>
     </Dialog>
@@ -155,7 +170,9 @@ const SummaryRow = ({ col1, children, info = '' }) => (
       ) : null}
     </Box>
     <Box>
-      <Typography component="div" variant="body1">{children}</Typography>
+      <Typography component="div" variant="body1">
+        {children}
+      </Typography>
     </Box>
   </Box>
 );
diff --git a/packages/yoroi-extension/app/components/swap/PriceImpact.js b/packages/yoroi-extension/app/components/swap/PriceImpact.js
@@ -171,19 +171,29 @@ export function PriceImpactAlert({
   onCancel: () => void,
 |}): Node {
   return (
-    <Dialog title="Warning" onClose={onCancel} withCloseButton closeOnOverlayClick>
-      <Box display="flex" maxWidth="648px" mt="-24px" flexDirection="column" gap="24px">
+    <Dialog
+      title="Warning"
+      onClose={onCancel}
+      withCloseButton
+      closeOnOverlayClick
+      styleOverride={{ width: '648px', height: '216px' }}
+      styleContentOverride={{ paddingTop: 0 }}
+    >
+      <Box display="flex" flexDirection="column">
         <PriceImpactWarningText isSevere />
       </Box>
-      <Box maxWidth="648px" display="flex" gap="24px" pt="24px">
+      <Box maxWidth="648px" display="flex" gap="24px" pt="23px">
         <Button fullWidth variant="secondary" onClick={onCancel}>
           Cancel
         </Button>
         <Button
           fullWidth
           variant="primary"
           onClick={onContinue}
-          sx={{ backgroundColor: 'magenta.500' }}
+          sx={{
+            backgroundColor: 'magenta.500',
+            '&:hover': { backgroundColor: 'magenta.600' },
+          }}
         >
           Continue
         </Button>

diff --git a/packages/yoroi-extension/app/components/swap/SlippageDialog.js b/packages/yoroi-extension/app/components/swap/SlippageDialog.js
@@ -18,6 +18,7 @@ export default function SlippageDialog({
   slippageValue,
 }: Props): React$Node {
   const [selectedSlippage, setSelectedSlippage] = useState(slippageValue);
+  const [inputFocused, setInputFocused] = useState(false);
   const [isManualSlippage, setIsManualSlippage] = useState(
     !defaultSlippages.includes(slippageValue)
   );
@@ -52,20 +53,21 @@ export default function SlippageDialog({
       withCloseButton
       closeOnOverlayClick
       styleContentOverride={{ paddingTop: '16px' }}
+      styleOverride={{ minWidth: '612px', height: '540px', maxWidth: '612px' }}
     >
-      <Box maxWidth="612px" sx={{ margin: '0 auto', flex: 1 }}>
+      <Box sx={{ margin: '0 auto', flex: 1 }}>
         <Box>
-          <Typography component="div" variant="body1" color="grayscale.800">
+          <Typography component="div" variant="body1" color="grayscale.900">
             Default Slippage Tolerance
           </Typography>
         </Box>
-        <Box py="8px">
+        <Box pb="16px" pt="8px">
           <Typography component="div" variant="body2" color="grayscale.700">
             Slippage tolerance is set as a percentage of the total swap value. Your transactions
             will not be executed if the price moves by more than this amount.
           </Typography>
         </Box>
-        <Box display="flex" justifyContent="flex-start">
+        <Box display="flex" justifyContent="flex-start" mb="32px">
           <Tabs
             tabs={defaultSlippages
               .map(val => ({
@@ -89,8 +91,8 @@ export default function SlippageDialog({
           <Box
             component="fieldset"
             sx={{
-              border: '1px solid',
-              borderColor: 'grayscale.400',
+              border: inputFocused && !readonly ? '2px solid' : '1px solid',
+              borderColor: inputFocused && !readonly ? 'common.black' : 'grayscale.400',
               borderRadius: '8px',
               p: '16px',
               display: 'grid',
@@ -100,12 +102,22 @@ export default function SlippageDialog({
               bgcolor: readonly ? 'grayscale.50' : 'common.white',
               columnGap: '6px',
               rowGap: '8px',
+              ...(!inputFocused &&
+                !readonly && {
+                  '&:hover': {
+                    border: '1px solid',
+                    borderColor: 'common.black',
+                  },
+                }),
+              maxHeight: '56px',
             }}
+            onFocus={() => setInputFocused(true)}
+            onBlur={() => setInputFocused(false)}
           >
             <Box
               component="legend"
               sx={{
-                top: '-9px',
+                top: '-7px',
                 left: '16px',
                 position: 'absolute',
                 px: '4px',
@@ -134,14 +146,14 @@ export default function SlippageDialog({
             />
           </Box>
         </Box>
-        <Box my="24px" p="16px" pb="12px" pt="12px" bgcolor="yellow.100" borderRadius="8px">
+        <Box my="24px" p="16px" pt="12px" bgcolor="yellow.100" borderRadius="8px">
           <Typography component="div" variant="body1" color="grayscale.max">
             When the slippage tolerance is set really high, it allows the transaction to still
             complete despite large price swings. This can open the door to front-running and
             sandwich attacks.
           </Typography>
         </Box>
-        <Box>
+        <Box pt="12px">
           <Button
             disabled={selectedSlippage.trim().length === 0}
             fullWidth

diff --git a/packages/yoroi-extension/app/components/swap/SwapDisclaimerDialog.js b/packages/yoroi-extension/app/components/swap/SwapDisclaimerDialog.js
@@ -10,26 +10,29 @@ type Props = {|
   onDialogRefuse: () => void,
 |};
 
-export default function SwapDisclaimerDialog({
-  onDialogConfirm,
-  onDialogRefuse,
-}: Props): Node {
+export default function SwapDisclaimerDialog({ onDialogConfirm, onDialogRefuse }: Props): Node {
   const [isCheckboxMarked, setCheckboxMarked] = useState(false);
   return (
-    <Dialog title="Swap Disclaimer" onClose={onDialogRefuse}>
+    <Dialog
+      title="Swap Disclaimer"
+      onClose={onDialogRefuse}
+      styleOverride={{ width: '648px', height: '504px' }}
+    >
       <Box display="flex" maxWidth="648px" mt="-24px" flexDirection="column" gap="24px">
         <Box>
           <Typography component="div" variant="body1" color="grayscale.900" align="justify">
-            Please be aware that by proceeding to use the SWAP functionality within Yoroi,
-            you acknowledge and understand that any actions taken are solely your responsibility.
-            <br /><br />
-            The assets available in this functionality are Cardano Native Assets and not subject
-            to a verification process. Additionally, the asset price indication is subject to rapid
+            Please be aware that by proceeding to use the SWAP functionality within Yoroi, you
+            acknowledge and understand that any actions taken are solely your responsibility.
+            <br />
+            <br />
+            The assets available in this functionality are Cardano Native Assets and not subject to
+            a verification process. Additionally, the asset price indication is subject to rapid
             fluctuations based on market conditions.
-            <br /><br />
-            We strongly advise conducting thorough research and exercising caution before engaging in any
-            SWAP transactions. Yoroi and EMURGO cannot be held liable for any potential risks, losses,
-            or damages that may arise from your use of the SWAP functionality.
+            <br />
+            <br />
+            We strongly advise conducting thorough research and exercising caution before engaging
+            in any SWAP transactions. Yoroi and EMURGO cannot be held liable for any potential
+            risks, losses, or damages that may arise from your use of the SWAP functionality.
           </Typography>
         </Box>
         <CheckboxLabel
@@ -40,12 +43,7 @@ export default function SwapDisclaimerDialog({
         />
       </Box>
       <Box maxWidth="648px" display="flex" gap="24px" pt="24px">
-        <Button
-          fullWidth
-          variant="primary"
-          onClick={onDialogConfirm}
-          disabled={!isCheckboxMarked}
-        >
+        <Button fullWidth variant="primary" onClick={onDialogConfirm} disabled={!isCheckboxMarked}>
           Confirm
         </Button>
       </Box>

diff --git a/packages/yoroi-extension/app/components/swap/SwapInput.js b/packages/yoroi-extension/app/components/swap/SwapInput.js
@@ -85,6 +85,9 @@ export default function SwapInput({
           bgcolor: 'common.white',
           columnGap: '6px',
           rowGap: '8px',
+          '&:hover': {
+            borderColor: !error && 'grayscale.max',
+          },
         }}
       >
         <Box

diff --git a/packages/yoroi-extension/app/components/swap/SwapPriceInput.js b/packages/yoroi-extension/app/components/swap/SwapPriceInput.js
@@ -59,7 +59,14 @@ function SwapPriceInput({ swapStore, priceImpactState }: Props): Node {
           bgcolor: isReadonly ? 'grayscale.50' : 'common.white',
           columnGap: '6px',
           rowGap: '8px',
+          ...(!isReadonly && {
+            '&:hover': {
+              border: '1px solid',
+              borderColor: 'grayscale.max',
+            },
+          }),
         }}
+        height="56px"
       >
         <Box
           component="legend"

diff --git a/packages/yoroi-extension/app/containers/swap/asset-swap/SwapPage.js b/packages/yoroi-extension/app/containers/swap/asset-swap/SwapPage.js
@@ -62,10 +62,13 @@ function SwapPage(props: StoresAndActionsProps): Node {
   const txSubmitErrorState = StateWrap(useState<?Error>(null));
   const isValidTickers = sellTokenInfo?.ticker && buyTokenInfo?.ticker;
 
-  useEffect(() => () => {
-    // UNMOUNT
-    setOrderStepValue(0);
-  }, []);
+  useEffect(
+    () => () => {
+      // UNMOUNT
+      setOrderStepValue(0);
+    },
+    []
+  );
 
   const swapFormCanContinue =
     selectedPoolCalculation != null &&
@@ -354,12 +357,13 @@ function SwapPage(props: StoresAndActionsProps): Node {
             display="flex"
             alignItems="center"
             justifyContent="center"
+            sx={{ height: '97px' }}
           >
             {orderStep === 1 && (
               <Button
                 onClick={processBackToStart}
                 sx={{ minWidth: '128px', minHeight: '48px' }}
-                variant="primary"
+                variant="secondary"
               >
                 Back
               </Button>

diff --git a/packages/yoroi-extension/app/containers/swap/asset-swap/edit-pool/EditPool.js b/packages/yoroi-extension/app/containers/swap/asset-swap/edit-pool/EditPool.js
@@ -94,7 +94,7 @@ export default function EditSwapPool({ handleEditPool, defaultTokenInfo }: Props
           onClick={handleShowFullInfo}
         >
           {pool.provider && (
-            <Typography component="div" variant="body1" color="grayscale.max" mb="8px">
+            <Typography component="div" variant="body1" color="grayscale.max">
               {titleTotalFeesFormatted}
             </Typography>
           )}
@@ -104,7 +104,6 @@ export default function EditSwapPool({ handleEditPool, defaultTokenInfo }: Props
               display: 'flex',
               gap: '4px',
               alignItems: 'center',
-              marginBottom: '8px',
             }}
           >
             <Box sx={{ transform: showFullInfo ? 'rotate(180deg)' : 'rotate(0deg)' }}>

diff --git a/packages/yoroi-extension/app/containers/swap/asset-swap/edit-pool/PoolFullInfo.js b/packages/yoroi-extension/app/containers/swap/asset-swap/edit-pool/PoolFullInfo.js
@@ -20,7 +20,7 @@ export default function SwapPoolFullInfo({
   showMinAda,
 }: Props): React$Node {
   const { orderData } = useSwap();
-  const { buyTokenInfo } = useSwapForm();
+  const { buyTokenInfo, sellTokenInfo } = useSwapForm();
   const { formattedFee } = useSwapFeeDisplay(defaultTokenInfo);
 
   const buyToken = orderData.tokens?.buyInfo;
@@ -103,7 +103,7 @@ export default function SwapPoolFullInfo({
           )}
         </Box>
         <Box>
-          {liqFeeQuantity} {buyTicker}
+          {liqFeeQuantity} {sellTokenInfo.ticker}
         </Box>
       </Box>
     </Box>