Merge pull request #65 from blockworks-foundation/swap-min-received

fix swap minimum received

components/TokenList.tsx

@@ -190,7 +190,7 @@ const TokenList = () => {
                           <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
                         )}
                       </div>
-                      <p className="font-body tracking-wider">{bank.name}</p>
+                      <p className="font-body">{bank.name}</p>
                     </div>
                   </Td>
                   <Td className="text-right">
@@ -565,9 +565,7 @@ const ActionsMenu = ({
             <div className="mr-2 flex flex-shrink-0 items-center">
               <Image alt="" width="20" height="20" src={logoURI || ''} />
             </div>
-            <p className="font-body tracking-wider">
-              {formatTokenSymbol(bank.name)}
-            </p>
+            <p className="font-body">{formatTokenSymbol(bank.name)}</p>
           </div>
           <ActionsLinkButton
             mangoAccount={mangoAccount!}

components/account/ActivityFeed.tsx

@@ -429,7 +429,7 @@ const ActivityDetails = ({
           <p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
           <p className="font-mono text-th-fgd-1">
             {formatDecimal(asset_amount)}{' '}
-            <span className="font-body tracking-wider">{asset_symbol}</span>
+            <span className="font-body">{asset_symbol}</span>
             <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
             {formatFixedDecimals(asset_price, true)}
           </p>
@@ -441,7 +441,7 @@ const ActivityDetails = ({
           <p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
           <p className="font-mono text-th-fgd-1">
             {formatDecimal(liab_amount)}{' '}
-            <span className="font-body tracking-wider">{liab_symbol}</span>
+            <span className="font-body">{liab_symbol}</span>
             <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
             {formatFixedDecimals(liab_price, true)}
           </p>

components/account/ActivityFeedTable.tsx

@@ -218,7 +218,7 @@ const ActivityFeedTable = ({
                   }
                 >
                   <Td>
-                    <p className="font-body tracking-wider">
+                    <p className="font-body">
                       {dayjs(block_datetime).format('ddd D MMM')}
                     </p>
                     <p className="text-xs text-th-fgd-3">
@@ -468,7 +468,7 @@ const MobileActivityFeedItem = ({
             <p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
             <p className="font-mono text-sm text-th-fgd-1">
               {formatDecimal(activity.activity_details.asset_amount)}{' '}
-              <span className="font-body tracking-wider">
+              <span className="font-body">
                 {activity.activity_details.asset_symbol}
               </span>
               <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}
@@ -486,7 +486,7 @@ const MobileActivityFeedItem = ({
             <p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
             <p className="font-mono text-sm text-th-fgd-1">
               {formatDecimal(activity.activity_details.liab_amount)}{' '}
-              <span className="font-body tracking-wider">
+              <span className="font-body">
                 {activity.activity_details.liab_symbol}
               </span>
               <span className="ml-2 font-body text-th-fgd-3">at</span>{' '}

components/stats/PerpMarketsTable.tsx

@@ -85,7 +85,7 @@ const PerpMarketsTable = ({
                   <Td>
                     <div className="flex items-center">
                       <MarketLogos market={market} />
-                      <p className="font-body tracking-wider">{market.name}</p>
+                      <p className="font-body">{market.name}</p>
                     </div>
                   </Td>
                   <Td>

components/stats/SpotMarketsTable.tsx

@@ -67,7 +67,7 @@ const SpotMarketsTable = () => {
                   <Td>
                     <div className="flex items-center">
                       <MarketLogos market={market} />
-                      <p className="font-body tracking-wider">{market.name}</p>
+                      <p className="font-body">{market.name}</p>
                     </div>
                   </Td>
                   <Td>

components/stats/TokenStats.tsx

@@ -125,7 +125,7 @@ const TokenStats = () => {
                           <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
                         )}
                       </div>
-                      <p className="font-body tracking-wider">{bank.name}</p>
+                      <p className="font-body">{bank.name}</p>
                     </div>
                   </Td>
                   <Td>

components/swap/SwapHistoryTable.tsx

@@ -117,7 +117,7 @@ const SwapHistoryTable = () => {
             return (
               <TrBody key={signature}>
                 <Td>
-                  <p className="font-body tracking-wider">
+                  <p className="font-body">
                     {dayjs(block_datetime).format('ddd D MMM')}
                   </p>
                   <p className="font-body text-xs text-th-fgd-3">

components/swap/SwapReviewRouteInfo.tsx

@@ -346,22 +346,22 @@ const SwapReviewRouteInfo = ({
                   {swapRate ? (
                     <>
                       1{' '}
-                      <span className="font-body tracking-wider">
-                        {inputTokenInfo?.name} ≈{' '}
+                      <span className="font-body text-th-fgd-3">
+                        {inputTokenInfo?.symbol} ≈{' '}
                       </span>
                       {formatFixedDecimals(amountOut.div(amountIn).toNumber())}{' '}
-                      <span className="font-body tracking-wider">
+                      <span className="font-body text-th-fgd-3">
                         {outputTokenInfo?.symbol}
                       </span>
                     </>
                   ) : (
                     <>
                       1{' '}
-                      <span className="font-body tracking-wider">
+                      <span className="font-body text-th-fgd-3">
                         {outputTokenInfo?.symbol} ≈{' '}
                       </span>
                       {formatFixedDecimals(amountIn.div(amountOut).toNumber())}{' '}
-                      <span className="font-body tracking-wider">
+                      <span className="font-body text-th-fgd-3">
                         {inputTokenInfo?.symbol}
                       </span>
                     </>
@@ -397,20 +397,42 @@ const SwapReviewRouteInfo = ({
             <p className="text-sm text-th-fgd-3">
               {t('swap:minimum-received')}
             </p>
-            {outputTokenInfo?.decimals &&
-            selectedRoute?.otherAmountThreshold ? (
+            {outputTokenInfo?.decimals && selectedRoute ? (
               <p className="text-right font-mono text-sm text-th-fgd-2">
-                {formatDecimal(
-                  selectedRoute.otherAmountThreshold /
-                    10 ** outputTokenInfo.decimals || 1,
-                  outputTokenInfo.decimals
-                )}{' '}
-                <span className="font-body tracking-wider">
+                {selectedRoute.swapMode === 'ExactIn'
+                  ? formatDecimal(
+                      selectedRoute.otherAmountThreshold /
+                        10 ** outputTokenInfo.decimals || 1,
+                      outputTokenInfo.decimals
+                    )
+                  : formatDecimal(
+                      selectedRoute.outAmount /
+                        10 ** outputTokenInfo.decimals || 1,
+                      outputTokenInfo.decimals
+                    )}{' '}
+                <span className="font-body text-th-fgd-3">
                   {outputTokenInfo?.symbol}
                 </span>
               </p>
             ) : null}
           </div>
+          {selectedRoute?.swapMode === 'ExactOut' ? (
+            <div className="flex justify-between">
+              <p className="text-sm text-th-fgd-3">{t('swap:maximum-cost')}</p>
+              {inputTokenInfo?.decimals && selectedRoute ? (
+                <p className="text-right font-mono text-sm text-th-fgd-2">
+                  {formatDecimal(
+                    selectedRoute.otherAmountThreshold /
+                      10 ** inputTokenInfo.decimals || 1,
+                    inputTokenInfo.decimals
+                  )}{' '}
+                  <span className="font-body text-th-fgd-3">
+                    {inputTokenInfo?.symbol}
+                  </span>
+                </p>
+              ) : null}
+            </div>
+          ) : null}
           <div className="flex justify-between">
             <p className="text-sm text-th-fgd-3">{t('swap:price-impact')}</p>
             <p className="text-right font-mono text-sm text-th-fgd-2">
@@ -448,9 +470,7 @@ const SwapReviewRouteInfo = ({
               </Tooltip>
               <p className="text-right font-mono text-sm text-th-fgd-2">
                 ~{formatFixedDecimals(borrowAmount)}{' '}
-                <span className="font-body tracking-wider">
-                  {inputTokenInfo?.symbol}
-                </span>
+                <span className="font-body">{inputTokenInfo?.symbol}</span>
               </p>
             </div>
           ) : null}
@@ -533,10 +553,7 @@ const SwapReviewRouteInfo = ({
                             .mul(inputBank!.loanOriginationFeeRate.toFixed())
                             .toNumber()
                         )}{' '}
-                        <span className="font-body tracking-wider">
-                          {inputBank!.name}
-                        </span>{' '}
-                        (
+                        <span className="font-body">{inputBank!.name}</span> (
                         {formatFixedDecimals(
                           inputBank!.loanOriginationFeeRate.toNumber() * 100
                         )}
@@ -571,7 +588,7 @@ const SwapReviewRouteInfo = ({
                                 info.lpFee?.amount /
                                 Math.pow(10, feeToken.decimals)
                               ).toFixed(6)}{' '}
-                              <span className="font-body tracking-wider">
+                              <span className="font-body">
                                 {feeToken?.symbol}
                               </span>{' '}
                               (

public/locales/en/swap.json

@@ -8,6 +8,7 @@
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "max-slippage": "Max Slippage",
+    "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
     "pay": "You Pay",

public/locales/es/swap.json

@@ -8,6 +8,7 @@
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "max-slippage": "Max Slippage",
+    "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
     "pay": "You Pay",

public/locales/ru/swap.json

@@ -8,6 +8,7 @@
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "max-slippage": "Max Slippage",
+    "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
     "pay": "You Pay",

public/locales/zh/swap.json

@@ -8,6 +8,7 @@
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "max-slippage": "Max Slippage",
+    "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
     "pay": "You Pay",

public/locales/zh_tw/swap.json

@@ -8,6 +8,7 @@
     "insufficient-balance": "Insufficient {{symbol}} Balance",
     "insufficient-collateral": "Insufficient Collateral",
     "max-slippage": "Max Slippage",
+    "maximum-cost": "Maximum Cost",
     "minimum-received": "Minimum Received",
     "no-history": "No swap history",
     "pay": "You Pay",