KEEP-1182: fix profit block on swap screen

Author: domnikov-timofei

src/ui/components/pages/swap/form.module.css

@@ -143,7 +143,7 @@
   position: absolute;
   top: -8px;
   left: -1px;
-  padding: 1px 8px;
+  padding: 1px 22px 1px 8px;
   border-radius: 4px;
   border-bottom-left-radius: 0;
   background: #0155ff;
@@ -152,6 +152,15 @@
   font-weight: bold;
 }
 
+.profitInfoIcon {
+  position: absolute;
+  top: 1px;
+  right: 4px;
+  display: flex;
+  width: 14px;
+  fill: currentColor;
+}
+
 .slippageToleranceBtn {
   margin-right: 8px;
   vertical-align: bottom;

src/ui/components/pages/swap/form.tsx

@@ -27,6 +27,7 @@ import { Select } from 'ui/components/ui/select/Select';
 import { Tooltip } from 'ui/components/ui/tooltip';
 import { UsdAmount } from 'ui/components/ui/UsdAmount';
 
+import { InfoIcon } from '../../../../icons/info';
 import * as styles from './form.module.css';
 import { SwapLayout } from './layout';
 
@@ -702,22 +703,32 @@ export function SwapForm({
                       <div className={styles.toAmountCardBadge}>
                         {profitTokens != null && !profitTokens.eq(0) ? (
                           <>
-                            {t('swap.profitLabel')}: +
-                            {profitTokens.toFixed(
-                              toAsset.precision,
-                              BigNumber.ROUND_MODE.ROUND_FLOOR
-                            )}{' '}
-                            {toAsset.displayName}
+                            {t('swap.profitLabel')}:
                             {usdPrice && usdPrice !== '1' && (
                               <>
                                 {' '}
-                                (≈ $
+                                $
                                 {new BigNumber(usdPrice)
                                   .mul(profitTokens)
                                   .toFixed(2)}
-                                )
                               </>
-                            )}
+                            )}{' '}
+                            <Tooltip
+                              content={`${profitTokens.toFixed(
+                                toAsset.precision,
+                                BigNumber.ROUND_MODE.ROUND_FLOOR
+                              )} ${toAsset.displayName}`}
+                              placement="top"
+                            >
+                              {props => (
+                                <span
+                                  {...props}
+                                  className={styles.profitInfoIcon}
+                                >
+                                  <InfoIcon />
+                                </span>
+                              )}
+                            </Tooltip>
                           </>
                         ) : (
                           t('swap.primaryLabel')

src/ui/components/ui/tooltip/index.tsx

@@ -14,7 +14,7 @@ interface Props {
     ref: React.MutableRefObject<any>;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
-  }) => React.ReactChild;
+  }) => React.ReactNode;
   content: React.ReactNode;
   placement?: Placement;
 }