feat(KEEP-1217): warn about differences in amounts

Author: smelnikov

src/i18n/locales/en/extension.en.json

@@ -590,6 +590,7 @@
   },
   "swap": {
     "amountToSendError": "Could not perform swap due to SwopFi dApp state. Please try again or slightly increase slippage tolerance if possible",
+    "amountDifferenceTooltip": "Some vendors cache their results, so Keeper has adjusted them to give you the most up-to-date value",
     "closeBtnText": "Close",
     "exchangeChannelConnectionError": "Could not connect to swap service. Please try again later",
     "exchangeChannelInvalidAssetPairError": "Asset pair is not available",

src/i18n/locales/ru/extension.ru.json

@@ -570,6 +570,7 @@
   },
   "swap": {
     "amountToSendError": "Не удалось выполнить обмен из-за состояния SwopFi dApp. Пожалуйста, попробуйте еще раз или немного увеличьте допуск проскальзывания, если это возможно",
+    "amountDifferenceTooltip": "Некоторые вендоры кешируют свои результаты, поэтому Keeper скорректировал их, чтобы предоставить вам самое актуальное значение",
     "closeBtnText": "Закрыть",
     "exchangeChannelConnectionError": "Не удалось подключиться к сервису обмена. Пожалуйста, повторите попытку позже",
     "exchangeChannelInvalidAssetPairError": "Валютная пара недоступна",

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

@@ -122,13 +122,25 @@
   align-items: flex-end;
 }
 
+.toAmountCardValueRow {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
 .toAmountCardFormattedValue {
   overflow: hidden;
   font-size: 14px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.toAmountInfoIcon {
+  width: 16px;
+  height: 16px;
+  fill: var(--color-black);
+}
+
 .toAmountCardUsdAmount {
   color: var(--color-basic500);
   font-size: 11px;

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

@@ -72,6 +72,7 @@ type SwapInfoVendorState =
   | {
       type: 'data';
       minimumReceivedTokens: BigNumber;
+      originalMinimumReceivedTokens: BigNumber;
       priceImpact: number;
       toAmountTokens: BigNumber;
       tx: SwapClientInvokeTransaction;
@@ -322,6 +323,10 @@ export function SwapForm({
               response.minimumReceivedCoins,
               toAsset
             ).getTokens(),
+            originalMinimumReceivedTokens: new Money(
+              response.originalMinimumReceivedCoins,
+              toAsset
+            ).getTokens(),
             priceImpact: response.priceImpact,
             toAmountTokens: new Money(
               response.amountCoins,
@@ -620,6 +625,22 @@ export function SwapForm({
                         : info.toAmountTokens
                       ).toFixed()
                 );
+                const minimumReceivedTokens = new BigNumber(
+                  info.type !== 'data'
+                    ? '0'
+                    : (fromAmountTokens.eq(0)
+                        ? new BigNumber(0)
+                        : info.minimumReceivedTokens
+                      ).toFixed()
+                );
+                const originalMinimumReceviedTokens = new BigNumber(
+                  info.type !== 'data'
+                    ? '0'
+                    : (fromAmountTokens.eq(0)
+                        ? new BigNumber(0)
+                        : info.originalMinimumReceivedTokens
+                      ).toFixed()
+                );
 
                 const formattedValue = amountTokens.toFormat(
                   toAssetBalance.asset.precision,
@@ -675,13 +696,32 @@ export function SwapForm({
                       <Loader />
                     ) : info.type === 'data' ? (
                       <div className={styles.toAmountCardValue}>
-                        <div
-                          className={styles.toAmountCardFormattedValue}
-                          title={formattedValue}
-                        >
-                          {formattedValue}
+                        <div className={styles.toAmountCardValueRow}>
+                          <div
+                            className={styles.toAmountCardFormattedValue}
+                            title={formattedValue}
+                          >
+                            {formattedValue}
+                          </div>
+                          {minimumReceivedTokens.lt(
+                            originalMinimumReceviedTokens
+                          ) ? (
+                            <Tooltip
+                              className={styles.tooltipContent}
+                              content={t('swap.amountDifferenceTooltip')}
+                              placement="top"
+                            >
+                              {props => (
+                                <div
+                                  {...props}
+                                  className={styles.toAmountInfoIcon}
+                                >
+                                  <InfoIcon />
+                                </div>
+                              )}
+                            </Tooltip>
+                          ) : null}
                         </div>
-
                         <UsdAmount
                           id={toAssetId}
                           className={styles.toAmountCardUsdAmount}