Sorin/yoext 1213/swap UI fixes

packages/yoroi-extension/app/components/common/assets/AssetPair.js

@@ -1,9 +1,9 @@
 //@flow
 import { Box } from '@mui/material';
-import type { AssetAmount } from '../../swap/types';
 import adaTokenImage from '../../../assets/images/ada.inline.svg';
-import { urlResolveForIpfsAndCorsproxy } from '../../../coreUtils';
 import defaultTokenImage from '../../../assets/images/revamp/token-default.inline.svg';
+import { urlResolveForIpfsAndCorsproxy } from '../../../coreUtils';
+import type { AssetAmount } from '../../swap/types';
 import type { RemoteTokenInfo } from '../../../api/ada/lib/state-fetch/types';
 
 type Props = {|
@@ -14,16 +14,21 @@ type Props = {|
 |};
 
 function tokenImgSrc(token, defaultTokenInfo): string {
-  return token.ticker === defaultTokenInfo.ticker ? adaTokenImage
-    : (urlResolveForIpfsAndCorsproxy(token.image) ?? defaultTokenImage);
+  return token.ticker === defaultTokenInfo.ticker
+    ? adaTokenImage
+    : urlResolveForIpfsAndCorsproxy(token.image) ?? defaultTokenImage;
 }
 
 function tokenImg(token, defaultTokenInfo): React$Node {
   return (
     <Box
       width="24px"
       height="24px"
-      sx={{ overflowY: 'hidden', '& > svg': { width: '100%', height: '100%' } }}
+      sx={{
+        overflowY: 'hidden',
+        '& > svg': { width: '100%', height: '100%' },
+        borderRadius: '4px',
+      }}
     >
       <img
         width="100%"
@@ -34,7 +39,7 @@ function tokenImg(token, defaultTokenInfo): React$Node {
         }}
       />
     </Box>
-  )
+  );
 }
 
 export default function AssetPair({ from, to, defaultTokenInfo, sx = {} }: Props): React$Node {

packages/yoroi-extension/app/components/swap/PriceImpact.js

@@ -1,15 +1,15 @@
 // @flow
-import type { Node } from 'react';
 import { Box, Button, Typography } from '@mui/material';
-import Dialog from '../widgets/Dialog';
+import { useSwap } from '@yoroi/swap';
+import type { Node } from 'react';
 import { ReactComponent as ErrorTriangleIcon } from '../../assets/images/revamp/error.triangle.svg';
 import { ReactComponent as ExclamationCircleIcon } from '../../assets/images/revamp/exclamation.circle.svg';
-import type { PriceImpact } from './types';
-import { useSwap } from '@yoroi/swap';
-import Percent from '../common/Percent';
+import { useSwapForm } from '../../containers/swap/context/swap-form';
 import { Quantities } from '../../utils/quantities';
+import Percent from '../common/Percent';
+import Dialog from '../widgets/Dialog';
 import { PRICE_PRECISION } from './common';
-import { useSwapForm } from '../../containers/swap/context/swap-form';
+import type { PriceImpact } from './types';
 
 function colorsBySeverity(isSevere: boolean) {
   return isSevere ? { fg: '#FF1351', bg: '#FFF1F5' } : { fg: '#ED8600', bg: '#FDF7E2' };
@@ -38,7 +38,7 @@ export function PriceImpactIcon({
   small?: boolean,
 |}): Node {
   const sz = `${small ? 16 : 24}px`;
-  const marginTop = `${small ? -2 : 0}px`;
+  const marginTop = `${small ? -1 : 0}px`;
   const marginRight = `6px`;
   const svgProp = small
     ? {
@@ -52,6 +52,7 @@ export function PriceImpactIcon({
         height: sz,
         marginTop,
         marginRight,
+        marginLeft: '-3px',
       }}
     >
       {isSevere ? <ErrorTriangleIcon {...svgProp} /> : <ExclamationCircleIcon {...svgProp} />}

packages/yoroi-extension/app/components/swap/SelectAssetDialog.js

@@ -1,20 +1,20 @@
 // @flow
-import type { AssetAmount, PriceImpact } from './types';
-import { useEffect, useState } from 'react';
 import { Box, Typography } from '@mui/material';
-import { ReactComponent as NoAssetsFound } from '../../assets/images/revamp/no-assets-found.inline.svg';
+import { useEffect, useState } from 'react';
+import type { RemoteTokenInfo } from '../../api/ada/lib/state-fetch/types';
+import adaTokenImage from '../../assets/images/ada.inline.svg';
+import defaultTokenImage from '../../assets/images/revamp/asset-default.inline.svg';
+import { ReactComponent as ArrowBottomIcon } from '../../assets/images/revamp/icons/arrow-bottom.inline.svg';
+import { ReactComponent as ArrowTopIcon } from '../../assets/images/revamp/icons/arrow-top.inline.svg';
 import { ReactComponent as SearchIcon } from '../../assets/images/revamp/icons/search.inline.svg';
 import { ReactComponent as WalletIcon } from '../../assets/images/revamp/icons/wallet.inline.svg';
-import { ReactComponent as ArrowTopIcon } from '../../assets/images/revamp/icons/arrow-top.inline.svg';
-import { ReactComponent as ArrowBottomIcon } from '../../assets/images/revamp/icons/arrow-bottom.inline.svg';
+import { ReactComponent as NoAssetsFound } from '../../assets/images/revamp/no-assets-found.inline.svg';
 import { truncateAddressShort } from '../../utils/formatters';
-import adaTokenImage from '../../assets/images/ada.inline.svg';
-import defaultTokenImage from '../../assets/images/revamp/asset-default.inline.svg';
-import Dialog from '../widgets/Dialog';
 import Table from '../common/table/Table';
-import type { RemoteTokenInfo } from '../../api/ada/lib/state-fetch/types';
-import { PriceImpactColored, PriceImpactIcon } from './PriceImpact';
+import Dialog from '../widgets/Dialog';
 import { InfoTooltip } from '../widgets/InfoTooltip';
+import { PriceImpactColored, PriceImpactIcon } from './PriceImpact';
+import type { AssetAmount, PriceImpact } from './types';
 
 const fromTemplateColumns = '1fr minmax(auto, 136px)';
 const toTemplateColumns = '1fr minmax(auto, 152px) minmax(auto, 136px)';
@@ -27,7 +27,7 @@ type Props = {|
   onAssetSelected: any => void,
   onClose: void => void,
   defaultTokenInfo: RemoteTokenInfo,
-  getTokenInfoBatch: Array<string> => { [string]: Promise<RemoteTokenInfo> },
+  getTokenInfoBatch: (Array<string>) => { [string]: Promise<RemoteTokenInfo> },
 |};
 
 export default function SelectAssetDialog({
@@ -54,8 +54,9 @@ export default function SelectAssetDialog({
         .includes(searchTerm.toLowerCase());
     }) || [];
 
-  const metadataPromiseMap: { [string]: Promise<RemoteTokenInfo> } =
-    getTokenInfoBatch(filteredAssets.map(a => a.id))
+  const metadataPromiseMap: { [string]: Promise<RemoteTokenInfo> } = getTokenInfoBatch(
+    filteredAssets.map(a => a.id)
+  );
 
   return (
     <Dialog
@@ -107,7 +108,7 @@ export default function SelectAssetDialog({
               }}
             />
           </Box>
-          <Box>
+          <Box sx={{ marginBottom: '16px' }}>
             <Typography component="div" variant="body2" color="grayscale.700">
               {filteredAssets.length} assets {searchTerm ? 'found' : 'available'}
             </Typography>
@@ -184,7 +185,6 @@ export const AssetAndAmountRow = ({
   displayAmount?: ?string,
   priceImpactState?: ?PriceImpact,
 |}): React$Node => {
-
   const [remoteTokenLogo, setRemoteTokenLogo] = useState<?string>(null);
 
   const isFrom = type === 'from';
@@ -196,21 +196,21 @@ export const AssetAndAmountRow = ({
 
   useEffect(() => {
     if (id != null) {
-      getTokenInfo(id).then(tokenInfo => {
-        if (tokenInfo.logo != null) {
-          setRemoteTokenLogo(`data:image/png;base64,${tokenInfo.logo}`);
-        }
-        return null;
-      }).catch(e => {
-        console.warn('Failed to resolve remote info for token: ' + id, e);
-      });
+      getTokenInfo(id)
+        .then(tokenInfo => {
+          if (tokenInfo.logo != null) {
+            setRemoteTokenLogo(`data:image/png;base64,${tokenInfo.logo}`);
+          }
+          return null;
+        })
+        .catch(e => {
+          console.warn('Failed to resolve remote info for token: ' + id, e);
+        });
     }
-  }, [id])
+  }, [id]);
 
   const imgSrc =
-    ticker === defaultTokenInfo.ticker
-      ? adaTokenImage
-      : remoteTokenLogo ?? defaultTokenImage;
+    ticker === defaultTokenInfo.ticker ? adaTokenImage : remoteTokenLogo ?? defaultTokenImage;
 
   const amount = displayAmount ?? assetAmount;
 

packages/yoroi-extension/app/components/swap/SwapInput.js

@@ -1,13 +1,13 @@
 // @flow
-import type { Node } from 'react';
-import type { AssetAmount } from './types';
 import { Box, Typography } from '@mui/material';
-import { ReactComponent as ChevronDownIcon } from '../../assets/images/revamp/icons/chevron-down.inline.svg';
+import type { Node } from 'react';
+import { useEffect, useState } from 'react';
 import adaTokenImage from '../../assets/images/ada.inline.svg';
+import { ReactComponent as ChevronDownIcon } from '../../assets/images/revamp/icons/chevron-down.inline.svg';
 import defaultTokenImage from '../../assets/images/revamp/token-default.inline.svg';
+import type { AssetAmount } from './types';
 import type { RemoteTokenInfo } from '../../api/ada/lib/state-fetch/types';
 import type { State } from '../../containers/swap/context/swap-form/types';
-import { useEffect, useState } from 'react';
 
 type Props = {|
   label: string,
@@ -63,9 +63,7 @@ export default function SwapInput({
   }, [id]);
 
   const imgSrc =
-    ticker === defaultTokenInfo.ticker
-      ? adaTokenImage
-      : remoteTokenLogo ?? defaultTokenImage;
+    ticker === defaultTokenInfo.ticker ? adaTokenImage : remoteTokenLogo ?? defaultTokenImage;
 
   return (
     <Box>
@@ -128,7 +126,11 @@ export default function SwapInput({
             <Box
               width="24px"
               height="24px"
-              sx={{ overflowY: 'hidden', '& > svg': { width: '100%', height: '100%' } }}
+              sx={{
+                overflowY: 'hidden',
+                '& > svg': { width: '100%', height: '100%' },
+                borderRadius: '4px',
+              }}
             >
               <img
                 width="100%"

packages/yoroi-extension/app/components/widgets/InfoTooltip.js

@@ -11,7 +11,7 @@ const STooltip = styled(({ className, ...props }: any) => (
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.palette.grayscale[900],
     opacity: 0.8,
-    lineHeight: 22,
+    lineHeight: 18,
     fontSize: 14,
     maxWidth: width,
   },
@@ -24,13 +24,12 @@ type Props = {|
 |};
 
 export const InfoTooltip = ({ content, width, children }: Props): React$Node => {
-  const contentNode = typeof content === 'string' ? (
-    <Typography color="inherit">{content}</Typography>
-  ) : content;
+  const contentNode =
+    typeof content === 'string' ? <Typography color="inherit">{content}</Typography> : content;
   return (
     <STooltip title={contentNode} placement="top" arrow width={width}>
-      <Box component="span" color="grayscale.900">
-        {children ?? (<Info />)}
+      <Box component="span" color="grayscale.900" sx={{ p: 0, m: 0, height: '24px' }}>
+        {children ?? <Info />}
       </Box>
     </STooltip>
   );

packages/yoroi-extension/app/containers/swap/asset-swap/ConfirmSwapTransaction.js

@@ -1,27 +1,27 @@
 //@flow
 import { Box, Typography } from '@mui/material';
-import TextField from '../../../components/common/TextField';
-import { useSwapForm } from '../context/swap-form';
-import { AssetAndAmountRow } from '../../../components/swap/SelectAssetDialog';
 import { makeLimitOrder, makePossibleMarketOrder, useSwap, useSwapCreateOrder } from '@yoroi/swap';
-import { SwapPoolLabel } from '../../../components/swap/SwapPoolComponents';
-import SwapPoolFullInfo from './edit-pool/PoolFullInfo';
-import { useSwapFeeDisplay } from '../hooks';
-import type { PriceImpact } from '../../../components/swap/types';
-import type { RemoteTokenInfo } from '../../../api/ada/lib/state-fetch/types';
+import { useEffect } from 'react';
+import { IncorrectWalletPasswordError } from '../../../api/common/errors';
+import TextField from '../../../components/common/TextField';
 import {
   FormattedActualPrice,
-  FormattedMarketPrice,
   FormattedLimitPrice,
+  FormattedMarketPrice,
   PriceImpactBanner,
   PriceImpactColored,
   PriceImpactIcon,
   PriceImpactPercent,
 } from '../../../components/swap/PriceImpact';
-import type { State } from '../context/swap-form/types';
-import { useEffect } from 'react';
-import { IncorrectWalletPasswordError } from '../../../api/common/errors';
+import { AssetAndAmountRow } from '../../../components/swap/SelectAssetDialog';
+import { SwapPoolLabel } from '../../../components/swap/SwapPoolComponents';
 import { InfoTooltip } from '../../../components/widgets/InfoTooltip';
+import { useSwapForm } from '../context/swap-form';
+import { useSwapFeeDisplay } from '../hooks';
+import SwapPoolFullInfo from './edit-pool/PoolFullInfo';
+import type { RemoteTokenInfo } from '../../../api/ada/lib/state-fetch/types';
+import type { PriceImpact } from '../../../components/swap/types';
+import type { State } from '../context/swap-form/types';
 
 type Props = {|
   slippageValue: string,
@@ -226,7 +226,7 @@ const SummaryRow = ({ col1, children, withInfo = false, infoText = '' }) => (
         {col1}
       </Typography>
       {withInfo ? (
-        <Box ml="8px">
+        <Box ml="8px" sx={{ height: '24px' }}>
           <InfoTooltip width={500} content={<Typography color="inherit">{infoText}</Typography>} />
         </Box>
       ) : null}

packages/yoroi-extension/app/containers/swap/asset-swap/TxSubmittedStep.js

@@ -1,7 +1,7 @@
 //@flow
 import { Box, Button, Typography } from '@mui/material';
-import { ReactComponent as TxSuccessfulImage } from '../../../assets/images/revamp/tx-successful.inline.svg';
 import { ReactComponent as TxFailureImage } from '../../../assets/images/revamp/tx-failure.inline.svg';
+import { ReactComponent as TxSuccessfulImage } from '../../../assets/images/revamp/tx-submitted.inline.svg';
 import type { State } from '../context/swap-form/types';
 
 type Props = {|
@@ -22,9 +22,9 @@ export default function TxSubmittedStep({
       flexDirection="column"
       gap="16px"
       alignItems="center"
-      width="400px"
+      width="404px"
       mx="auto"
-      mt="80px"
+      mt="131px"
     >
       <Box>{isSuccessful ? <TxSuccessfulImage /> : <TxFailureImage />}</Box>
       <Box textAlign="center">
@@ -33,13 +33,13 @@ export default function TxSubmittedStep({
         </Typography>
         <Typography component="div" variant="body1" color="grayscale.600">
           {isSuccessful
-            ? 'Your transactions will be displayed both in the list of transaction and Open swap orders'
+            ? 'Check this transaction in the list of wallet transactions'
             : 'Your transaction has not been processed properly due to technical issues'}
         </Typography>
       </Box>
       <Box>
         <Button onClick={isSuccessful ? onSuccess : onTryAgain} variant="primary">
-          {isSuccessful ? 'Go to orders' : 'Try again'}
+          {isSuccessful ? 'Go to transactions' : 'Try again'}
         </Button>
       </Box>
       {!isSuccessful && (