From cf2f2f0752fa3f88b5a93bb0a063c8c0c27c4e34 Mon Sep 17 00:00:00 2001
From: Hrik Bhowal <hrik.bhowal@gmail.com>
Date: Tue, 16 May 2023 20:48:49 -0400
Subject: [PATCH 1/3] swap routes section in the swap route

---
 dapp-oeth/src/components/MissionControl.js    |   2 +-
 dapp-oeth/src/components/Nav.js               |  15 +-
 .../src/components/buySell/BalanceHeader.js   |   2 +-
 .../src/components/buySell/ContractsTable.js  | 260 ++++++++++--------
 .../components/buySell/SwapCurrencyPill.js    |   3 +-
 dapp-oeth/src/components/layout.js            |  12 +-
 dapp-oeth/src/components/wrap/WrapOETHPill.js |   2 +-
 7 files changed, 165 insertions(+), 131 deletions(-)

diff --git a/dapp-oeth/src/components/MissionControl.js b/dapp-oeth/src/components/MissionControl.js
index 498dd6dfb0..55a11b8a3b 100644
--- a/dapp-oeth/src/components/MissionControl.js
+++ b/dapp-oeth/src/components/MissionControl.js
@@ -12,7 +12,7 @@ const MissionControl = ({}) => {
       <style jsx>{`
         @media (max-width: 767px) {
           .swap-contain {
-            padding: 0 20px;
+            padding: 0 8px;
           }
         }
       `}</style>
diff --git a/dapp-oeth/src/components/Nav.js b/dapp-oeth/src/components/Nav.js
index 941c230992..121593e229 100644
--- a/dapp-oeth/src/components/Nav.js
+++ b/dapp-oeth/src/components/Nav.js
@@ -606,7 +606,6 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
           justify-content: space-between;
           width: 100%;
           max-width: 100%;
-          padding: 0 80px;
         }
 
         .navbar .container {
@@ -683,10 +682,6 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
         }
 
         @media (max-width: 992px) {
-          .nav-container {
-            padding: 0 30px;
-          }
-
           .dapplinks-contain {
             width: 100%;
           }
@@ -787,8 +782,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
           }
 
           .navbar .nav-container {
-            padding-left: 20px !important;
-            padding-right: 20px !important;
+            padding: 0 20px;
           }
 
           .ousd-experimental-notice {
@@ -876,7 +870,6 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
 
           .navbar .nav-container {
             margin: 1.5rem 0;
-            padding: 0 30px;
           }
 
           .lang-opts {
@@ -890,6 +883,12 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
             transform: translate(-50%, 0);
           }
         }
+
+        @media (max-width: 799px) {
+          .navbar .nav-container {
+            padding: 0 8px;
+          }
+        }
       `}</style>
     </>
   )
diff --git a/dapp-oeth/src/components/buySell/BalanceHeader.js b/dapp-oeth/src/components/buySell/BalanceHeader.js
index 49347a096f..5d985ec63f 100644
--- a/dapp-oeth/src/components/buySell/BalanceHeader.js
+++ b/dapp-oeth/src/components/buySell/BalanceHeader.js
@@ -621,7 +621,7 @@ const BalanceHeader = ({
           .balance-header {
             align-items: center;
             text-align: center;
-            padding: 0px 20px;
+            padding: 0px 8px;
             min-height: 80px;
           }
 
diff --git a/dapp-oeth/src/components/buySell/ContractsTable.js b/dapp-oeth/src/components/buySell/ContractsTable.js
index f9971b2b18..1f2437cbb9 100644
--- a/dapp-oeth/src/components/buySell/ContractsTable.js
+++ b/dapp-oeth/src/components/buySell/ContractsTable.js
@@ -112,18 +112,15 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
           {isLoading ? (
             <div className="estimates-loading">Loading...</div>
           ) : isEmpty(sortedEstimates) ? (
-            <div className="estimate-item invalid">
-              <img
-                className="mr-2"
-                src={assetRootPath('/images/warn.png')}
-                alt="Warning icon"
-              />
-              <span>
-                {fbt(
-                  'Enter an amount to view swap route estimates.',
-                  'Invalid amount'
-                )}
-              </span>
+            <div className="estimate-item invalid d-block">
+              <div>
+                <span className="big">0 OETH</span>
+                <span className="small">(estimate)</span>
+              </div>
+              <div className="dash d-flex">
+                <div className="dash-child">-</div>
+                <span className="">-</span>
+              </div>
             </div>
           ) : (
             <>
@@ -167,7 +164,7 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
                 return (
                   <button
                     key={name}
-                    className={classnames('estimate-item box-highlight', {
+                    className={classnames('box-highlight', {
                       'd-none': !isBest && !isShowingMore,
                       'has-error': errorDisplay,
                       selected: isSelected,
@@ -176,19 +173,19 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
                       if (canDoSwap && !error && !isSelected) {
                         onSelect(estimate)
                         event({
-                          'event': 'change_swap_route',
-                          'change_route_to': name
+                          event: 'change_swap_route',
+                          change_route_to: name,
                         })
                       }
                     }}
                     disabled={errorDisplay || isSelected || !isActive}
                   >
-                    <div className="estimate">
+                    <div className="d-flex top">
                       <div className="d-inline-flex align-items-center">
                         {amountReceived ? (
                           <>
                             <span className="estimate-value">
-                              {amountReceived}{' '}
+                              {parseFloat(amountReceived).toFixed(5)}{' '}
                               {coinToSwap === 'mix'
                                 ? 'LSD Mix'
                                 : coinToSwap?.toUpperCase()}
@@ -198,56 +195,9 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
                             </span>
                           </>
                         ) : (
-                          <span className="estimate-value">-</span>
+                          <span className="estimate-value">0</span>
                         )}
                       </div>
-                      {amountReceived ? (
-                        <div className="fees-value">
-                          <div
-                            className="d-inline-block mr-2"
-                            title={
-                              approveAllowanceNeeded
-                                ? `${fbt(
-                                    `Includes 2 transactions Approve($${fbt.param(
-                                      'Approve Cost',
-                                      formatCurrency(gasEstimateApprove, 2)
-                                    )}) + Swap($${fbt.param(
-                                      'Swap Cost',
-                                      formatCurrency(gasEstimateSwap, 2)
-                                    )})`,
-                                    'Swap & approve transaction gas estimation'
-                                  )}`
-                                : ''
-                            }
-                          >
-                            {fbt(
-                              `${fbt.param(
-                                'afterFeeDisplay',
-                                `≈ $${formatCurrency(amountReceivedUsd, 2)}`
-                              )}`,
-                              'After Fee Price'
-                            )}
-                            <br className="d-block d-sm-none" />
-                            <span className="ml-1">after fees</span>
-                            <span className="asterisk">
-                              {approveAllowanceNeeded ? '*' : ''}
-                            </span>
-                          </div>
-                          <span className="d-none d-md-inline">
-                            {fbt(
-                              `Effective Price: ${fbt.param(
-                                'effectivePriceDisplay',
-                                `$${formatCurrency(effectivePrice, 2)}`
-                              )}`,
-                              'Effective Price'
-                            )}
-                          </span>
-                        </div>
-                      ) : (
-                        <span className="fees-value">-</span>
-                      )}
-                    </div>
-                    <div className="additional">
                       <span
                         className={classnames('status', {
                           best: isBest,
@@ -275,37 +225,88 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
                           ''
                         )}
                       </span>
-                      <span className="d-block d-md-none effective">
-                        {fbt(
-                          `Effective Price: ${fbt.param(
-                            'effectivePriceDisplay',
-                            `$${formatCurrency(effectivePrice, 2)}`
-                          )}`,
-                          'Effective Price'
+                    </div>
+                    <div className="estimate-item">
+                      <div className="estimate">
+                        {amountReceived ? (
+                          <div className="fees-value">
+                            <div
+                              className="d-inline-block mr-2"
+                              title={
+                                approveAllowanceNeeded
+                                  ? `${fbt(
+                                      `Includes 2 transactions Approve($${fbt.param(
+                                        'Approve Cost',
+                                        formatCurrency(gasEstimateApprove, 2)
+                                      )}) + Swap($${fbt.param(
+                                        'Swap Cost',
+                                        formatCurrency(gasEstimateSwap, 2)
+                                      )})`,
+                                      'Swap & approve transaction gas estimation'
+                                    )}`
+                                  : ''
+                              }
+                            >
+                              {fbt(
+                                `${fbt.param(
+                                  'afterFeeDisplay',
+                                  `≈ $${formatCurrency(amountReceivedUsd, 2)}`
+                                )}`,
+                                'After Fee Price'
+                              )}
+                              <br className="d-block d-sm-none" />
+                              <span className="ml-1">after fees</span>
+                              <span className="asterisk">
+                                {approveAllowanceNeeded ? '*' : ''}
+                              </span>
+                            </div>
+                            <span className="d-none d-md-inline">
+                              {fbt(
+                                `Effective Price: ${fbt.param(
+                                  'effectivePriceDisplay',
+                                  `$${formatCurrency(effectivePrice, 2)}`
+                                )}`,
+                                'Effective Price'
+                              )}
+                            </span>
+                          </div>
+                        ) : (
+                          <span className="fees-value">-</span>
                         )}
-                      </span>
-                      <span className="info-value">
-                        {error === 'unsupported'
-                          ? unsupportedDisplay(name, swapMode)
-                          : errorDisplay || (
-                              <>
-                                {gasEstimateEth && (
-                                  <span className="mr-2">
-                                    <img
-                                      className="mr-2"
-                                      src={assetRootPath('/images/gas.png')}
-                                      alt="gas price icon"
-                                    />
-                                    <span>
-                                      {parseFloat(gasEstimateEth)?.toFixed(4)}{' '}
-                                      ETH{' '}
+                      </div>
+                      <div className="additional">
+                        <span className="d-block d-md-none effective">
+                          {fbt(
+                            `Effective Price: ${fbt.param(
+                              'effectivePriceDisplay',
+                              `$${formatCurrency(effectivePrice, 2)}`
+                            )}`,
+                            'Effective Price'
+                          )}
+                        </span>
+                        <span className="info-value">
+                          {error === 'unsupported'
+                            ? unsupportedDisplay(name, swapMode)
+                            : errorDisplay || (
+                                <>
+                                  {gasEstimateEth && (
+                                    <span className="mr-2">
+                                      <img
+                                        className="mr-2"
+                                        src={assetRootPath('/images/gas.png')}
+                                        alt="gas price icon"
+                                      />
+                                      <span>
+                                        {parseFloat(gasEstimateEth)?.toFixed(4)}{' '}
+                                        ETH{' '}
+                                      </span>
                                     </span>
-                                  </span>
-                                )}
-                                <span>{capitalize(name)}</span>
-                              </>
-                            )}
-                      </span>
+                                  )}
+                                  <span>{capitalize(name)}</span>
+                                </>
+                              )}
+                        </span>
+                      </div>
                     </div>
                   </button>
                 )
@@ -315,10 +316,9 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
                 onClick={() => {
                   setIsShowingMore((prev) => !prev)
                   if (!isShowingMore) {
-                    event({'event': 'show_swap_routes'})
+                    event({ event: 'show_swap_routes' })
                   }
-                }
-              }
+                }}
               >
                 {isShowingMore ? (
                   <>
@@ -347,7 +347,40 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
       </div>
       <style jsx>
         {`
-          .effective {
+          .dash {
+            color: #8293a4;
+          }
+
+          .dash-child {
+            margin-right: 133px;
+          }
+
+          .invalid {
+            padding: 16px 24px !important;
+            border-radius: 4px;
+            min-height: 95px;
+          }
+
+          .invalid .big {
+            font-size: 14px;
+            color: #fafafb;
+            margin-right: 6px;
+          }
+
+          .invalid .small {
+            font-size: 12px;
+            color: #8293a4;
+          }
+
+          .top {
+            background-color: #18191c;
+            color: #fafbfb;
+            padding: 16px 12px 0 12px;
+            display: flex;
+            justify-content: space-between;
+          }
+
+          .box-highlight {
             font-size: 12px;
             color: #8293a4;
             margin-top: 8px;
@@ -384,7 +417,6 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
             justify-content: space-between;
             width: 100%;
             background: #18191c;
-            border-radius: 4px;
             color: #fafbfb;
             padding: 16px 24px;
             border: none;
@@ -407,9 +439,8 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
             font-size: 14px;
           }
 
-          .estimate-item.has-error {
-            opacity: 0.5;
-            pointer: cursor-not-allowed;
+          .box-highlight.has-error {
+            display: none;
           }
 
           .estimate-item .estimate {
@@ -432,7 +463,7 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
             font-family: 'Sailec';
             font-style: normal;
             font-weight: 400;
-            font-size: 14px;
+            font-size: 14px !important;
             line-height: 17px;
             whitespace: nowrap;
           }
@@ -457,7 +488,7 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
             margin-top: 4px;
           }
 
-          .additional .status {
+          .status {
             font-family: 'Sailec';
             font-style: normal;
             font-weight: 400;
@@ -466,7 +497,7 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
             text-align: right;
           }
 
-          .additional .status.best {
+          .status.best {
             background: linear-gradient(
                 97.67deg,
                 #66fe90 -10.09%,
@@ -479,8 +510,8 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
             text-fill-color: transparent;
           }
 
-          .additional .status.diff,
-          .additional .status.error {
+          .status.diff,
+          .status.error {
             color: #ff4e4e;
           }
 
@@ -498,6 +529,11 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
 
           .box-highlight {
             position: relative;
+            width: 100%;
+            background: #18191c;
+            border-radius: 4px;
+            border: none;
+            padding: 0;
           }
 
           .box-highlight.selected::before,
@@ -539,13 +575,17 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
 
           @media (max-width: 799px) {
             .estimates-container {
-              padding: 0 16px;
+              padding: 0 12px;
             }
 
             .estimate-item,
             .estimates-empty,
             .estimates-loading {
-              padding: 12px 16px;
+              padding: 0 12px 16px 12px;
+            }
+
+            .estimate-value {
+              font-size: 14px;
             }
           }
         `}
@@ -719,7 +759,7 @@ const ContractsTable = () => {
 
         @media (max-width: 799px) {
           .contracts-header {
-            padding: 16px;
+            padding: 16px 12px 8px 12px;
           }
 
           .contracts-main {
diff --git a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js
index 410374b51f..667c1e5be1 100644
--- a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js
+++ b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js
@@ -584,6 +584,7 @@ const SwapCurrencyPill = ({
       : null
 
   const coinSplits = bottomItem && selectedSwap && selectedSwap.coinSplits
+  console.log(bottomItem, selectedSwap)
 
   const maxBalanceSet =
     topItem &&
@@ -644,7 +645,7 @@ const SwapCurrencyPill = ({
                     {fbt('Loading...', 'Swaps Loading...')}
                   </span>
                 ) : (
-                  <span>{expectedAmount || '-'}</span>
+                  <span>{expectedAmount || '0.00'}</span>
                 )}
               </div>
             )}
diff --git a/dapp-oeth/src/components/layout.js b/dapp-oeth/src/components/layout.js
index 883b9cdc26..edb0bbdba5 100644
--- a/dapp-oeth/src/components/layout.js
+++ b/dapp-oeth/src/components/layout.js
@@ -1,20 +1,14 @@
 import React from 'react'
 import classnames from 'classnames'
 import Head from 'next/head'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import AccountStore from 'stores/AccountStore'
+import ContractStore from 'stores/ContractStore'
+import withRpcProvider from 'hoc/withRpcProvider'
 import { useStoreState } from 'pullstate'
 import { fbt } from 'fbt-runtime'
 import { useWeb3React } from '@web3-react/core'
 import { get } from 'lodash'
-import AccountStore from 'stores/AccountStore'
-import ContractStore from 'stores/ContractStore'
-import StakeStore from 'stores/StakeStore'
-import withRpcProvider from 'hoc/withRpcProvider'
-import AppFooter from './AppFooter'
-import { adjustLinkHref } from 'utils/utils'
 import { assetRootPath } from 'utils/image'
-import { burnTimer } from 'utils/constants'
 
 const UNISWAP_URL =
   'https://app.uniswap.org/#/swap?inputCurrency=0xdac17f958d2ee523a2206206994597c13d831ec7&outputCurrency=0x2A8e1E676Ec238d8A992307B495b45B3fEAa5e86'
diff --git a/dapp-oeth/src/components/wrap/WrapOETHPill.js b/dapp-oeth/src/components/wrap/WrapOETHPill.js
index 3dd7f87b7e..ef3f10b239 100644
--- a/dapp-oeth/src/components/wrap/WrapOETHPill.js
+++ b/dapp-oeth/src/components/wrap/WrapOETHPill.js
@@ -256,7 +256,7 @@ const WrapOETHPill = ({
                     {fbt('Loading...', 'Swaps Loading...')}
                   </span>
                 ) : (
-                  <span>{expectedAmount || '-'}</span>
+                  <span>{expectedAmount || '0.00'}</span>
                 )}
               </div>
             )}

From ca35192ec44471c5954ec1a429774c658dae1426 Mon Sep 17 00:00:00 2001
From: Hrik Bhowal <hrik.bhowal@gmail.com>
Date: Tue, 16 May 2023 20:58:32 -0400
Subject: [PATCH 2/3] padding

---
 dapp-oeth/src/components/Nav.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/dapp-oeth/src/components/Nav.js b/dapp-oeth/src/components/Nav.js
index 121593e229..5cb361fabf 100644
--- a/dapp-oeth/src/components/Nav.js
+++ b/dapp-oeth/src/components/Nav.js
@@ -606,6 +606,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
           justify-content: space-between;
           width: 100%;
           max-width: 100%;
+          padding: 0 80px;
         }
 
         .navbar .container {

From 732d4bd24fbb9cfb6a8ff047425742b078361490 Mon Sep 17 00:00:00 2001
From: Hrik Bhowal <hrik.bhowal@gmail.com>
Date: Wed, 17 May 2023 15:51:04 -0400
Subject: [PATCH 3/3] desktop fixes

---
 .../src/components/buySell/ContractsTable.js  | 397 ++++++++++--------
 1 file changed, 212 insertions(+), 185 deletions(-)

diff --git a/dapp-oeth/src/components/buySell/ContractsTable.js b/dapp-oeth/src/components/buySell/ContractsTable.js
index 1f2437cbb9..d26af21e69 100644
--- a/dapp-oeth/src/components/buySell/ContractsTable.js
+++ b/dapp-oeth/src/components/buySell/ContractsTable.js
@@ -162,193 +162,225 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
                 const isSelected = selected?.name === name
                 const errorDisplay = errorMap?.[error]
                 return (
-                  <button
-                    key={name}
-                    className={classnames('box-highlight', {
+                  <div
+                    className={classnames('box-highlight-container', {
                       'd-none': !isBest && !isShowingMore,
                       'has-error': errorDisplay,
                       selected: isSelected,
                     })}
-                    onClick={() => {
-                      if (canDoSwap && !error && !isSelected) {
-                        onSelect(estimate)
-                        event({
-                          event: 'change_swap_route',
-                          change_route_to: name,
-                        })
-                      }
-                    }}
-                    disabled={errorDisplay || isSelected || !isActive}
                   >
-                    <div className="d-flex top">
-                      <div className="d-inline-flex align-items-center">
-                        {amountReceived ? (
-                          <>
-                            <span className="estimate-value">
-                              {parseFloat(amountReceived).toFixed(5)}{' '}
-                              {coinToSwap === 'mix'
-                                ? 'LSD Mix'
-                                : coinToSwap?.toUpperCase()}
-                            </span>
-                            <span className="estimate-help">
-                              {fbt('(estimate)', 'estimate help')}
-                            </span>
-                          </>
-                        ) : (
-                          <span className="estimate-value">0</span>
-                        )}
+                    <button
+                      key={name}
+                      className={classnames('box-highlight', {
+                        'd-none': !isBest && !isShowingMore,
+                        'has-error': errorDisplay,
+                        selected: isSelected,
+                      })}
+                      onClick={() => {
+                        if (canDoSwap && !error && !isSelected) {
+                          onSelect(estimate)
+                          event({
+                            event: 'change_swap_route',
+                            change_route_to: name,
+                          })
+                        }
+                      }}
+                      disabled={errorDisplay || isSelected || !isActive}
+                    >
+                      <div className="d-flex top">
+                        <div className="d-inline-flex align-items-center">
+                          {amountReceived ? (
+                            <>
+                              <span className="estimate-value">
+                                {parseFloat(amountReceived).toFixed(5)}{' '}
+                                {coinToSwap === 'mix'
+                                  ? 'LSD Mix'
+                                  : coinToSwap?.toUpperCase()}
+                              </span>
+                              <span className="estimate-help">
+                                {fbt('(estimate)', 'estimate help')}
+                              </span>
+                            </>
+                          ) : (
+                            <span className="estimate-value">0</span>
+                          )}
+                        </div>
+                        <span
+                          className={classnames('status', {
+                            best: isBest,
+                            error: !!error,
+                            diff: hasDiff,
+                          })}
+                        >
+                          {isBest ? (
+                            fbt('Best', 'Swap estimations best one')
+                          ) : error === 'unsupported' ? (
+                            <>
+                              <span className="mr-1">{capitalize(name)}</span>
+                              <span>
+                                {fbt(
+                                  'Unsupported',
+                                  'Swap estimate unsupported'
+                                )}
+                              </span>
+                            </>
+                          ) : errorDisplay ? (
+                            <>
+                              <span className="mr-1">{capitalize(name)}</span>
+                              <span>{fbt('Error', 'Swap estimate error')}</span>
+                            </>
+                          ) : hasDiff ? (
+                            `- ${formatCurrency(diffPercentage * -1, 2)}%`
+                          ) : (
+                            ''
+                          )}
+                        </span>
                       </div>
-                      <span
-                        className={classnames('status', {
-                          best: isBest,
-                          error: !!error,
-                          diff: hasDiff,
-                        })}
-                      >
-                        {isBest ? (
-                          fbt('Best', 'Swap estimations best one')
-                        ) : error === 'unsupported' ? (
-                          <>
-                            <span className="mr-1">{capitalize(name)}</span>
-                            <span>
-                              {fbt('Unsupported', 'Swap estimate unsupported')}
-                            </span>
-                          </>
-                        ) : errorDisplay ? (
-                          <>
-                            <span className="mr-1">{capitalize(name)}</span>
-                            <span>{fbt('Error', 'Swap estimate error')}</span>
-                          </>
-                        ) : hasDiff ? (
-                          `- ${formatCurrency(diffPercentage * -1, 2)}%`
-                        ) : (
-                          ''
-                        )}
-                      </span>
-                    </div>
-                    <div className="estimate-item">
-                      <div className="estimate">
-                        {amountReceived ? (
-                          <div className="fees-value">
-                            <div
-                              className="d-inline-block mr-2"
-                              title={
-                                approveAllowanceNeeded
-                                  ? `${fbt(
-                                      `Includes 2 transactions Approve($${fbt.param(
-                                        'Approve Cost',
-                                        formatCurrency(gasEstimateApprove, 2)
-                                      )}) + Swap($${fbt.param(
-                                        'Swap Cost',
-                                        formatCurrency(gasEstimateSwap, 2)
-                                      )})`,
-                                      'Swap & approve transaction gas estimation'
-                                    )}`
-                                  : ''
-                              }
-                            >
-                              {fbt(
-                                `${fbt.param(
-                                  'afterFeeDisplay',
-                                  `≈ $${formatCurrency(amountReceivedUsd, 2)}`
-                                )}`,
-                                'After Fee Price'
-                              )}
-                              <br className="d-block d-sm-none" />
-                              <span className="ml-1">after fees</span>
-                              <span className="asterisk">
-                                {approveAllowanceNeeded ? '*' : ''}
+                      <div className="estimate-item">
+                        <div className="estimate">
+                          {amountReceived ? (
+                            <div className="fees-value">
+                              <div
+                                className="d-inline-block mr-2"
+                                title={
+                                  approveAllowanceNeeded
+                                    ? `${fbt(
+                                        `Includes 2 transactions Approve($${fbt.param(
+                                          'Approve Cost',
+                                          formatCurrency(gasEstimateApprove, 2)
+                                        )}) + Swap($${fbt.param(
+                                          'Swap Cost',
+                                          formatCurrency(gasEstimateSwap, 2)
+                                        )})`,
+                                        'Swap & approve transaction gas estimation'
+                                      )}`
+                                    : ''
+                                }
+                              >
+                                {fbt(
+                                  `${fbt.param(
+                                    'afterFeeDisplay',
+                                    `≈ $${formatCurrency(amountReceivedUsd, 2)}`
+                                  )}`,
+                                  'After Fee Price'
+                                )}
+                                <br className="d-block d-sm-none" />
+                                <span className="ml-1">after fees</span>
+                                <span className="asterisk">
+                                  {approveAllowanceNeeded ? '*' : ''}
+                                </span>
+                              </div>
+                              <span className="d-none d-md-inline">
+                                {fbt(
+                                  `Effective Price: ${fbt.param(
+                                    'effectivePriceDisplay',
+                                    `$${formatCurrency(effectivePrice, 2)}`
+                                  )}`,
+                                  'Effective Price'
+                                )}
                               </span>
                             </div>
-                            <span className="d-none d-md-inline">
-                              {fbt(
-                                `Effective Price: ${fbt.param(
-                                  'effectivePriceDisplay',
-                                  `$${formatCurrency(effectivePrice, 2)}`
-                                )}`,
-                                'Effective Price'
-                              )}
-                            </span>
-                          </div>
-                        ) : (
-                          <span className="fees-value">-</span>
-                        )}
-                      </div>
-                      <div className="additional">
-                        <span className="d-block d-md-none effective">
-                          {fbt(
-                            `Effective Price: ${fbt.param(
-                              'effectivePriceDisplay',
-                              `$${formatCurrency(effectivePrice, 2)}`
-                            )}`,
-                            'Effective Price'
+                          ) : (
+                            <span className="fees-value">-</span>
                           )}
-                        </span>
-                        <span className="info-value">
-                          {error === 'unsupported'
-                            ? unsupportedDisplay(name, swapMode)
-                            : errorDisplay || (
-                                <>
-                                  {gasEstimateEth && (
-                                    <span className="mr-2">
-                                      <img
-                                        className="mr-2"
-                                        src={assetRootPath('/images/gas.png')}
-                                        alt="gas price icon"
-                                      />
-                                      <span>
-                                        {parseFloat(gasEstimateEth)?.toFixed(4)}{' '}
-                                        ETH{' '}
+                        </div>
+                        <div className="additional">
+                          <span className="d-block d-md-none effective">
+                            {fbt(
+                              `Effective Price: ${fbt.param(
+                                'effectivePriceDisplay',
+                                `$${formatCurrency(effectivePrice, 2)}`
+                              )}`,
+                              'Effective Price'
+                            )}
+                          </span>
+                          <span className="info-value">
+                            {error === 'unsupported'
+                              ? unsupportedDisplay(name, swapMode)
+                              : errorDisplay || (
+                                  <>
+                                    {gasEstimateEth && (
+                                      <span className="mr-2">
+                                        <img
+                                          className="mr-2"
+                                          src={assetRootPath('/images/gas.png')}
+                                          alt="gas price icon"
+                                        />
+                                        <span>
+                                          {parseFloat(gasEstimateEth)?.toFixed(
+                                            4
+                                          )}{' '}
+                                          ETH{' '}
+                                        </span>
                                       </span>
-                                    </span>
-                                  )}
-                                  <span>{capitalize(name)}</span>
-                                </>
-                              )}
-                        </span>
+                                    )}
+                                    <span>{capitalize(name)}</span>
+                                  </>
+                                )}
+                          </span>
+                        </div>
                       </div>
-                    </div>
-                  </button>
+                    </button>
+                  </div>
                 )
               })}
-              <button
-                className="show-hide"
-                onClick={() => {
-                  setIsShowingMore((prev) => !prev)
-                  if (!isShowingMore) {
-                    event({ event: 'show_swap_routes' })
-                  }
-                }}
-              >
-                {isShowingMore ? (
-                  <>
-                    <span>{fbt('show less', 'hide')}</span>
-                    <img
-                      className="ml-2"
-                      src={assetRootPath('/images/uparrow.png')}
-                      alt="up arrow icon"
-                    />
-                  </>
-                ) : (
-                  <>
-                    <span>{fbt('show more', 'show more')}</span>
-                    <img
-                      className="ml-2"
-                      style={{ transform: 'rotate(180deg)' }}
-                      src={assetRootPath('/images/uparrow.png')}
-                      alt="up arrow icon"
-                    />
-                  </>
-                )}
-              </button>
+              {sortedEstimates.reduce(
+                (acc, el) => (el.canDoSwap ? ++acc : acc),
+                0
+              ) > 1 && (
+                <button
+                  className="show-hide"
+                  onClick={() => {
+                    setIsShowingMore((prev) => !prev)
+                    if (!isShowingMore) {
+                      event({ event: 'show_swap_routes' })
+                    }
+                  }}
+                >
+                  {isShowingMore ? (
+                    <>
+                      <span>{fbt('show less', 'hide')}</span>
+                      <img
+                        className="ml-2"
+                        src={assetRootPath('/images/uparrow.png')}
+                        alt="up arrow icon"
+                      />
+                    </>
+                  ) : (
+                    <>
+                      <span>{fbt('show more', 'show more')}</span>
+                      <img
+                        className="ml-2"
+                        style={{ transform: 'rotate(180deg)' }}
+                        src={assetRootPath('/images/uparrow.png')}
+                        alt="up arrow icon"
+                      />
+                    </>
+                  )}
+                </button>
+              )}
             </>
           )}
         </div>
       </div>
       <style jsx>
         {`
+          .box-highlight-container {
+            width: 100%;
+            border-radius: 4px;
+            margin-top: 8px;
+            padding: 1px;
+            cursor: pointer;
+          }
+
+          .box-highlight-container.selected,
+          .box-highlight-container:hover .box-highlight-container:hover {
+            background: linear-gradient(90deg, #b361e6 20.29%, #6a36fc 79.06%);
+          }
+
           .dash {
             color: #8293a4;
+            padding-top: 5px;
           }
 
           .dash-child {
@@ -375,7 +407,9 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
           .top {
             background-color: #18191c;
             color: #fafbfb;
-            padding: 16px 12px 0 12px;
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+            padding: 16px 24px 0 24px;
             display: flex;
             justify-content: space-between;
           }
@@ -383,7 +417,6 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
           .box-highlight {
             font-size: 12px;
             color: #8293a4;
-            margin-top: 8px;
           }
 
           .estimates-container {
@@ -418,8 +451,8 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
             width: 100%;
             background: #18191c;
             color: #fafbfb;
-            padding: 16px 24px;
-            border: none;
+            padding: 5px 24px 16px 24px;
+            border-radius: 0 0 4px 4px;
           }
 
           .estimates-loading {
@@ -457,7 +490,7 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
             justify-content: center;
           }
 
-          .estimate .estimate-value {
+          .estimate-value {
             display: flex;
             align-items: center;
             font-family: 'Sailec';
@@ -530,24 +563,14 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
           .box-highlight {
             position: relative;
             width: 100%;
-            background: #18191c;
+            background: #18191c !important;
             border-radius: 4px;
             border: none;
             padding: 0;
           }
 
-          .box-highlight.selected::before,
-          .box-highlight:not(.has-error):hover::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: 4px;
-            border: 1px solid transparent;
-            background: linear-gradient(90deg, #b361e6 20.29%, #6a36fc 79.06%);
-            -webkit-mask: linear-gradient(#fff 0 0) content-box,
-              linear-gradient(#fff 0 0);
-            -webkit-mask-composite: xor;
-            mask-composite: exclude;
+          .box-highlight.selected:hover {
+            opacity: 1;
           }
 
           .show-hide {
@@ -587,6 +610,10 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => {
             .estimate-value {
               font-size: 14px;
             }
+
+            .top {
+              padding: 16px 12px 0 12px;
+            }
           }
         `}
       </style>
@@ -759,7 +786,7 @@ const ContractsTable = () => {
 
         @media (max-width: 799px) {
           .contracts-header {
-            padding: 16px 12px 8px 12px;
+            padding: 16px 12px;
           }
 
           .contracts-main {