From 731e5041fb75e74d84e1b51725b4aefeda49d9e8 Mon Sep 17 00:00:00 2001
From: Leandro <leandro.boscariol@gnosis.io>
Date: Wed, 9 Mar 2022 17:32:08 -0800
Subject: [PATCH] Reviewed a ton of Mod files

---
 src/components/SearchModal/CommonBases.tsx    |   2 +-
 .../AccountDetails/AccountDetailsMod.tsx      | 100 +++------
 .../AccountDetails/TransactionMod.tsx         |   8 +-
 .../components/AccountDetails/index.tsx       |   2 +
 src/custom/components/Button/ButtonMod.tsx    |  60 +----
 src/custom/components/Button/index.tsx        |  18 --
 src/custom/components/Copy/CopyMod.tsx        |  11 +-
 .../CurrencyInputPanelMod.tsx                 |  33 +--
 .../FiatValue/FiatValueMod.tsx                |  25 ++-
 .../components/CurrencyInputPanel/index.tsx   |   2 -
 .../ErrorBoundary/ErrorBoundaryMod.tsx        |   4 +-
 src/custom/components/Header/HeaderMod.tsx    |  58 ++++-
 .../NetworkSelector/NetworkSelectorMod.tsx    |   1 +
 .../Header/URLWarning/URLWarningMod.tsx       |   2 +
 src/custom/components/Menu/MenuMod.tsx        | 180 ++++++++-------
 src/custom/components/Menu/index.tsx          |   1 -
 .../components/Popups/ListUpdatePopupMod.tsx  |   3 +
 src/custom/components/Popups/PopupItemMod.tsx |   9 +-
 src/custom/components/Popups/PopupsMod.tsx    |  11 +-
 .../components/Popups/TransactionPopupMod.tsx |  20 +-
 .../QuestionHelper/QuestionHelperMod.tsx      |   2 +
 .../components/QuestionHelper/index.tsx       |   1 -
 .../CommonBases/CommonBasesMod.tsx            |  23 +-
 .../CurrencyList/CurrencyListMod.tsx          |  16 +-
 .../SearchModal/CurrencyList/index.tsx        |   2 +-
 .../CurrencySearch/CurrencySearchMod.tsx      |   7 +-
 .../SearchModal/ImportList/ImportListMod.tsx  |   4 +-
 .../ImportToken/ImportTokenMod.tsx            |   6 +-
 .../SearchModal/Manage/ManageMod.tsx          |  13 +-
 .../ManageTokens/ManageTokensMod.tsx          |   7 +-
 .../components/Settings/SettingsMod.tsx       |  10 +-
 src/custom/components/Settings/index.tsx      |   2 -
 .../TransactionConfirmationModalMod.tsx       |   7 +-
 .../TransactionConfirmationModal/index.tsx    |   6 +-
 .../TransactionSettingsMod.tsx                |  17 +-
 .../components/TransactionSettings/index.tsx  |  22 --
 .../WalletModal/Option/OptionMod.tsx          |   2 +
 .../components/WalletModal/WalletModalMod.tsx | 135 ++++++++----
 .../components/Web3Status/Web3StatusMod.tsx   |   7 +-
 .../AdvancedSwapDetailsMod.tsx                | 208 +++++++++---------
 .../AdvancedSwapDetailsDropdownMod.tsx        |   3 +
 .../ConfirmSwapModal/ConfirmSwapModalMod.tsx  |  26 +--
 .../SwapModalFooter/SwapModalFooterMod.tsx    |  13 +-
 .../SwapModalHeader/SwapModalHeaderMod.tsx    |  58 +++--
 .../swap/TradePrice/TradePriceMod.tsx         |  16 +-
 .../UnsupportedCurrencyFooterMod.tsx          |  23 +-
 src/custom/constants/chains/chainsMod.ts      |   5 +
 src/custom/constants/routing/routingMod.ts    |  44 ++--
 .../hooks/TransactionHooksMod.tsx             | 115 ++++++----
 src/custom/state/global/actions/actionsMod.ts |   2 +
 src/custom/state/hooks/hooksMod.ts            |   9 +-
 src/custom/state/lists/actions/actionsMod.ts  |   3 +
 src/custom/state/lists/hooks/hooksMod.ts      |  22 +-
 src/custom/state/lists/reducer/reducerMod.ts  |   8 +-
 src/custom/state/lists/updater/updaterMod.ts  |   1 -
 src/custom/utils/prices/index.ts              |  33 ++-
 src/custom/utils/prices/pricesMod.ts          | 116 ----------
 57 files changed, 779 insertions(+), 765 deletions(-)
 delete mode 100644 src/custom/utils/prices/pricesMod.ts

diff --git a/src/components/SearchModal/CommonBases.tsx b/src/components/SearchModal/CommonBases.tsx
index c7d7324edc..208f321595 100644
--- a/src/components/SearchModal/CommonBases.tsx
+++ b/src/components/SearchModal/CommonBases.tsx
@@ -66,7 +66,7 @@ export default function CommonBases({
 }
 
 /** helper component to retrieve a base currency from the active token lists */
-function CurrencyLogoFromList({ currency }: { currency: Currency }) {
+export function CurrencyLogoFromList({ currency }: { currency: Currency }) {
   const token = useTokenInfoFromActiveList(currency)
 
   return <CurrencyLogo currency={token} style={{ marginRight: 8 }} />
diff --git a/src/custom/components/AccountDetails/AccountDetailsMod.tsx b/src/custom/components/AccountDetails/AccountDetailsMod.tsx
index 1bb23b9152..efc075ec3a 100644
--- a/src/custom/components/AccountDetails/AccountDetailsMod.tsx
+++ b/src/custom/components/AccountDetails/AccountDetailsMod.tsx
@@ -1,26 +1,27 @@
 // import { Trans } from '@lingui/macro'
-import Activity from 'components/AccountDetails/Transaction'
-// import { fortmatic, injected, portis, walletconnect, walletlink } from 'connectors'
+// import { Connector } from '@web3-react/types'
+// import useActiveWeb3React from 'hooks/useActiveWeb3React'
+// import Transaction from '@src/components/AccountDetails/Transaction'
+// import { injected, portis, walletlink } from 'connectors'
 // import { SUPPORTED_WALLETS } from 'constants/wallet'
 // import { useCallback, useContext } from 'react'
 // import { ExternalLink as LinkIcon } from 'react-feather'
 // import { useAppDispatch } from 'state/hooks'
 import styled /* , { ThemeContext } */ from 'styled-components/macro'
+// import { AbstractConnector } from 'web3-react-abstract-connector'
 // import { shortenAddress } from 'utils'
 // import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
-// import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
-// import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
-// import PortisIcon from '../../assets/images/portisIcon.png'
-// import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
 import { ReactComponent as Close } from 'assets/images/x.svg'
-// import { useActiveWeb3React } from '../../hooks/web3'
 // import { clearAllTransactions } from '../../state/transactions/actions'
 import { ExternalLink /* , LinkStyledButton, ThemedText */ } from 'theme'
 import { ButtonSecondary } from 'components/Button'
-// import Identicon from '../Identicon'
+// import StatusIcon from '../Identicon/StatusIcon'
 // import { AutoRow } from '../Row'
 // import Copy from './Copy'
+
+// MOD imports
+import Activity from 'components/AccountDetails/Transaction'
 import { ActivityDescriptors } from 'hooks/useRecentActivity'
 
 export const HeaderRow = styled.div`
@@ -186,6 +187,23 @@ export const IconWrapper = styled.div<{ size?: number }>`
   `};
 `
 
+/* function WrappedStatusIcon({ connector }: { connector: AbstractConnector | Connector }) {
+  return (
+    <IconWrapper size={16}>
+      <StatusIcon connector={connector} />
+      {connector === portis && (
+        <MainWalletAction
+          onClick={() => {
+            portis.portis.showPortis()
+          }}
+        >
+          <Trans>Show Portis</Trans>
+        </MainWalletAction>
+      )}
+    </IconWrapper>
+  )
+} */
+
 export const TransactionListWrapper = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap};
 `
@@ -216,15 +234,14 @@ export function renderActivities(activities: ActivityDescriptors[]) {
   )
 }
 
-// interface AccountDetailsProps {
-//   toggleWalletModal: () => void
-//   pendingTransactions: string[]
-//   confirmedTransactions: string[]
-//   ENSName?: string
-//   openOptions: () => void
-// }
+/* interface AccountDetailsProps {
+  toggleWalletModal: () => void
+  pendingTransactions: string[]
+  confirmedTransactions: string[]
+  ENSName?: string
+  openOptions: () => void
+}
 
-/*
 export default function AccountDetails({
   toggleWalletModal,
   pendingTransactions,
@@ -252,50 +269,6 @@ export default function AccountDetails({
     )
   }
 
-  function getStatusIcon() {
-    if (connector === injected) {
-      return (
-        <IconWrapper size={16}>
-          <Identicon />
-        </IconWrapper>
-      )
-    } else if (connector === walletconnect) {
-      return (
-        <IconWrapper size={16}>
-          <img src={WalletConnectIcon} alt={'WalletConnect logo'} />
-        </IconWrapper>
-      )
-    } else if (connector === walletlink) {
-      return (
-        <IconWrapper size={16}>
-          <img src={CoinbaseWalletIcon} alt={'Coinbase Wallet logo'} />
-        </IconWrapper>
-      )
-    } else if (connector === fortmatic) {
-      return (
-        <IconWrapper size={16}>
-          <img src={FortmaticIcon} alt={'Fortmatic logo'} />
-        </IconWrapper>
-      )
-    } else if (connector === portis) {
-      return (
-        <>
-          <IconWrapper size={16}>
-            <img src={PortisIcon} alt={'Portis logo'} />
-            <MainWalletAction
-              onClick={() => {
-                portis.portis.showPortis()
-              }}
-            >
-              <Trans>Show Portis</Trans>
-            </MainWalletAction>
-          </IconWrapper>
-        </>
-      )
-    }
-    return null
-  }
-
   const clearAllTransactionsCallback = useCallback(() => {
     if (chainId) dispatch(clearAllTransactions({ chainId }))
   }, [dispatch, chainId])
@@ -340,14 +313,14 @@ export default function AccountDetails({
                   {ENSName ? (
                     <>
                       <div>
-                        {getStatusIcon()}
+                        {connector && <WrappedStatusIcon connector={connector} />}
                         <p> {ENSName}</p>
                       </div>
                     </>
                   ) : (
                     <>
                       <div>
-                        {getStatusIcon()}
+                        {connector && <WrappedStatusIcon connector={connector} />}
                         <p> {account && shortenAddress(account)}</p>
                       </div>
                     </>
@@ -435,5 +408,4 @@ export default function AccountDetails({
       )}
     </>
   )
-}
-*/
+} */
diff --git a/src/custom/components/AccountDetails/TransactionMod.tsx b/src/custom/components/AccountDetails/TransactionMod.tsx
index e7a32cd96a..4d48959e33 100644
--- a/src/custom/components/AccountDetails/TransactionMod.tsx
+++ b/src/custom/components/AccountDetails/TransactionMod.tsx
@@ -1,12 +1,16 @@
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { CheckCircle, Triangle } from 'react-feather'
 import styled from 'styled-components/macro'
 
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useAllTransactions } from 'state/enhancedTransactions/hooks'
 import { ExternalLink } from 'theme'
-import { getEtherscanLink } from 'utils'
+// import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import Loader from 'components/Loader'
 import { RowFixed } from 'components/Row'
+// import { TransactionSummary } from './TransactionSummary'
+
+// MOD imports
+import { getEtherscanLink } from 'utils'
 
 export const TransactionStatusText = styled.div`
   margin-right: 0.5rem;
diff --git a/src/custom/components/AccountDetails/index.tsx b/src/custom/components/AccountDetails/index.tsx
index d6c89aa467..3480890489 100644
--- a/src/custom/components/AccountDetails/index.tsx
+++ b/src/custom/components/AccountDetails/index.tsx
@@ -76,6 +76,8 @@ export function formatConnectorName(connector?: AbstractConnector, walletInfo?:
   )
 }
 
+// TODO: look into StatusIcon.tsx, could be re-used here
+
 export function getStatusIcon(connector?: AbstractConnector, walletInfo?: ConnectedWalletInfo, size?: number) {
   if (walletInfo && !walletInfo.isSupportedWallet) {
     /* eslint-disable jsx-a11y/accessible-emoji */
diff --git a/src/custom/components/Button/ButtonMod.tsx b/src/custom/components/Button/ButtonMod.tsx
index 8018560f21..8db51ac5d5 100644
--- a/src/custom/components/Button/ButtonMod.tsx
+++ b/src/custom/components/Button/ButtonMod.tsx
@@ -5,6 +5,8 @@ import { Button as RebassButton, ButtonProps as ButtonPropsOriginal } from 'reba
 import styled from 'styled-components/macro'
 
 import { RowBetween } from 'components/Row'
+
+// MOD imports
 import { ButtonSize } from 'theme'
 
 type ButtonProps = Omit<ButtonPropsOriginal, 'css'>
@@ -15,7 +17,7 @@ export const BaseButton = styled(RebassButton)<
     width?: string
     $borderRadius?: string
     altDisabledStyle?: boolean
-    buttonSize?: ButtonSize
+    buttonSize?: ButtonSize // mod
   } & ButtonProps
 >`
   padding: ${({ padding }) => padding ?? '16px'};
@@ -36,6 +38,7 @@ export const BaseButton = styled(RebassButton)<
   position: relative;
   z-index: 1;
   &:disabled {
+    opacity: 50%;
     cursor: auto;
     pointer-events: none;
   }
@@ -44,6 +47,7 @@ export const BaseButton = styled(RebassButton)<
   transition: transform 450ms ease;
   transform: perspective(1px) translateZ(0);
 
+  // mod
   &:hover {
     transform: scale(0.99);
   }
@@ -81,7 +85,7 @@ export const ButtonLight = styled(BaseButton)`
   background-color: ${({ theme }) => theme.primary5};
   color: ${({ theme }) => theme.primaryText1};
   font-size: 16px;
-
+  // font-weight: 500;
   &:focus {
     box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
     background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
@@ -109,6 +113,7 @@ export const ButtonGray = styled(BaseButton)`
   background-color: ${({ theme }) => theme.bg3};
   color: ${({ theme }) => theme.text2};
   font-size: 16px;
+  // font-weight: 500;
 
   &:focus {
     box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.bg2)};
@@ -191,28 +196,6 @@ export const ButtonYellow = styled(BaseButton)`
   }
 `
 
-export const ButtonPink = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.primary1};
-  color: white;
-
-  &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.primary1)};
-    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
-  }
-  &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
-  }
-  &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary1)};
-    background-color: ${({ theme }) => darken(0.1, theme.primary1)};
-  }
-  &:disabled {
-    background-color: ${({ theme }) => theme.primary1};
-    opacity: 50%;
-    cursor: auto;
-  }
-`
-
 export const ButtonEmpty = styled(BaseButton)`
   background-color: transparent;
   color: ${({ theme }) => theme.primary1};
@@ -270,27 +253,6 @@ export const ButtonConfirmedStyle = styled(BaseButton)`
   }
 `
 
-export const ButtonWhite = styled(BaseButton)`
-  border: 1px solid #edeef2;
-  background-color: ${({ theme }) => theme.bg1};
-  color: black;
-
-  &:focus {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    box-shadow: 0 0 0 1pt ${darken(0.05, '#edeef2')};
-  }
-  &:hover {
-    box-shadow: 0 0 0 1pt ${darken(0.1, '#edeef2')};
-  }
-  &:active {
-    box-shadow: 0 0 0 1pt ${darken(0.1, '#edeef2')};
-  }
-  &:disabled {
-    opacity: 50%;
-    cursor: auto;
-  }
-`
-
 export const ButtonErrorStyle = styled(BaseButton)`
   background-color: ${({ theme }) => theme.red1};
   border: 1px solid ${({ theme }) => theme.red1};
@@ -357,14 +319,6 @@ export function ButtonDropdownLight({ disabled = false, children, ...rest }: { d
   )
 }
 
-export function ButtonRadio({ active, ...rest }: { active?: boolean } & ButtonProps) {
-  if (!active) {
-    return <ButtonWhite {...rest} />
-  } else {
-    return <ButtonPrimary {...rest} />
-  }
-}
-
 const ActiveOutlined = styled(ButtonOutlined)`
   border: 1px solid;
   border-color: ${({ theme }) => theme.primary1};
diff --git a/src/custom/components/Button/index.tsx b/src/custom/components/Button/index.tsx
index d4d69b424c..c6fcbeec09 100644
--- a/src/custom/components/Button/index.tsx
+++ b/src/custom/components/Button/index.tsx
@@ -10,10 +10,8 @@ import {
   ButtonLight as ButtonLightMod,
   ButtonGray as ButtonGrayMod,
   ButtonSecondary as ButtonSecondaryMod,
-  ButtonPink as ButtonPinkMod,
   ButtonOutlined as ButtonOutlinedMod,
   ButtonEmpty as ButtonEmptyMod,
-  ButtonWhite as ButtonWhiteMod,
   ButtonConfirmedStyle as ButtonConfirmedStyleMod,
   // ButtonErrorStyle as ButtonErrorStyleMod
   // We don't import the "composite" buttons, they are just redefined (c&p actually)
@@ -123,10 +121,6 @@ export const ButtonSecondary = styled(ButtonSecondaryMod)`
   }
 `
 
-export const ButtonPink = styled(ButtonPinkMod)`
-  // CSS overrides
-`
-
 export const ButtonOutlined = styled(ButtonOutlinedMod)`
   // CSS overrides
   ${({ theme }) => theme.buttonOutlined.background}
@@ -162,10 +156,6 @@ export const ButtonOutlined = styled(ButtonOutlinedMod)`
   }
 `
 
-export const ButtonWhite = styled(ButtonWhiteMod)`
-  // CSS overrides
-`
-
 export const ButtonConfirmedStyle = styled(ButtonConfirmedStyleMod)`
   // CSS overrides
   background-color: ${({ theme }) => theme.disabled};
@@ -245,11 +235,3 @@ export function ButtonDropdownLight({
     </ButtonOutlined>
   )
 }
-
-export function ButtonRadio({ active, ...rest }: { active?: boolean } & ButtonCustomProps) {
-  if (!active) {
-    return <ButtonWhite {...rest} />
-  } else {
-    return <ButtonPrimary {...rest} />
-  }
-}
diff --git a/src/custom/components/Copy/CopyMod.tsx b/src/custom/components/Copy/CopyMod.tsx
index 1d4ace101e..56f2b93094 100644
--- a/src/custom/components/Copy/CopyMod.tsx
+++ b/src/custom/components/Copy/CopyMod.tsx
@@ -1,10 +1,13 @@
+import { Trans } from '@lingui/macro'
+import React from 'react'
+import { CheckCircle, Copy } from 'react-feather'
 import styled from 'styled-components/macro'
-import useCopyClipboard from 'hooks/useCopyClipboard'
 
+import useCopyClipboard from 'hooks/useCopyClipboard'
 import { LinkStyledButton } from 'theme'
-import { CheckCircle, Copy } from 'react-feather'
-import { Trans } from '@lingui/macro'
-import { TransactionStatusText } from 'components/Copy' // mod
+
+// MOD imports
+import { TransactionStatusText } from 'components/Copy'
 
 export const CopyIcon = styled(LinkStyledButton)`
   color: ${({ theme }) => theme.text3};
diff --git a/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx b/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx
index 1d65fd1ca8..bfed9aa17e 100644
--- a/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx
+++ b/src/custom/components/CurrencyInputPanel/CurrencyInputPanelMod.tsx
@@ -3,6 +3,7 @@ import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
@@ -11,7 +12,6 @@ import styled from 'styled-components/macro'
 
 import { ReactComponent as DropDown } from 'assets/images/dropdown.svg'
 import useTheme from 'hooks/useTheme'
-import { useActiveWeb3React } from 'hooks/web3'
 import { useCurrencyBalance } from 'state/wallet/hooks'
 import { ThemedText } from 'theme'
 import { ButtonGray } from 'components/Button'
@@ -19,14 +19,15 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { Input as NumericalInput } from 'components/NumericalInput'
 import { RowBetween, RowFixed } from 'components/Row'
-import { CurrencySearchModal } from '.' // mod
-// import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
+// import CurrencySearchModal from 'components/SearchModal/CurrencySearchModal'
 import { FiatValue } from 'components/CurrencyInputPanel/FiatValue'
 
+// MOD imports
 import { WithClassName } from 'types'
 import { formatMax, formatSmart } from 'utils/format'
 import { AMOUNT_PRECISION } from 'constants/index'
 import { AuxInformationContainer } from '.' // mod
+import { CurrencySearchModal } from '.' // mod
 
 export const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${({ theme }) => theme.flexColumnNoWrap}
@@ -35,6 +36,8 @@ export const InputPanel = styled.div<{ hideInput?: boolean }>`
   background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.bg2)};
   z-index: 1;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
+  transition: height 1s ease;
+  will-change: height;
 `
 
 const FixedContainer = styled.div`
@@ -62,18 +65,17 @@ export const Container = styled.div<{ hideInput: boolean; showAux?: boolean }>`
 `
 
 export const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: boolean; hideInput?: boolean }>`
-  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
   align-items: center;
-  font-size: 24px;
-  font-weight: 500;
   background-color: ${({ selected, theme }) => (selected ? theme.bg1 : theme.primary1)};
+  box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
   color: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
+  cursor: pointer;
   border-radius: 16px;
-  box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
   outline: none;
-  cursor: pointer;
   user-select: none;
   border: none;
+  font-size: 24px;
+  font-weight: 500;
   height: ${({ hideInput }) => (hideInput ? '2.8rem' : '2.4rem')};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   padding: 0 8px;
@@ -83,6 +85,7 @@ export const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: b
   :hover {
     background-color: ${({ selected, theme }) => (selected ? theme.bg2 : darken(0.05, theme.primary1))};
   }
+  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
 
 export const InputRow = styled.div<{ selected: boolean }>`
@@ -135,13 +138,17 @@ export const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
   border: none;
   border-radius: 12px;
+  color: ${({ theme }) => theme.primary5};
+  cursor: pointer;
   font-size: 14px;
   font-weight: 500;
-  cursor: pointer;
-  color: ${({ theme }) => theme.primary5};
+  margin-left: 0.25rem;
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
-  margin-left: 0.25rem;
+
+  :hover {
+    opacity: ${({ disabled }) => (!disabled ? 0.8 : 0.4)};
+  }
 
   :focus {
     outline: none;
@@ -276,7 +283,7 @@ export default function CurrencyInputPanel({
               />
             )}
           </InputRow>
-          {!hideInput && !hideBalance && (
+          {!hideInput && !hideBalance && currency && (
             <FiatRow>
               <RowBetween>
                 {account ? (
@@ -285,13 +292,11 @@ export default function CurrencyInputPanel({
                   >
                     <ThemedText.Body
                       onClick={onMax}
-                      // color={theme.text2}
                       color={theme.text1}
                       fontWeight={400}
                       fontSize={14}
                       style={{
                         display: 'inline',
-                        // cursor: 'pointer'
                         cursor: showMaxButton ? 'pointer' : 'initial', // mod
                       }}
                       title={`${formatMax(selectedCurrencyBalance, currency?.decimals) || '-'} ${
diff --git a/src/custom/components/CurrencyInputPanel/FiatValue/FiatValueMod.tsx b/src/custom/components/CurrencyInputPanel/FiatValue/FiatValueMod.tsx
index 74c7ef83e4..b25c550681 100644
--- a/src/custom/components/CurrencyInputPanel/FiatValue/FiatValueMod.tsx
+++ b/src/custom/components/CurrencyInputPanel/FiatValue/FiatValueMod.tsx
@@ -1,4 +1,6 @@
 import { Trans } from '@lingui/macro'
+// eslint-disable-next-line no-restricted-imports
+import { t } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import HoverInlineText from 'components/HoverInlineText'
 import { useMemo } from 'react'
@@ -6,7 +8,9 @@ import { useMemo } from 'react'
 import useTheme from 'hooks/useTheme'
 import { ThemedText } from 'theme'
 import { warningSeverity } from 'utils/prices'
+import { MouseoverTooltip } from 'components/Tooltip'
 
+// MOD imports
 import { FIAT_PRECISION, PERCENTAGE_PRECISION } from 'constants/index' // mod
 import { formatSmart } from 'utils/format'
 import Loader from 'components/Loader'
@@ -33,21 +37,15 @@ export function FiatValue({
   }, [priceImpact, theme.green1, theme.red1, theme.text3, theme.yellow1])
 
   return (
-    <ThemedText.Body
-      className={className}
-      fontSize={14}
-      color={fiatValue ? theme.text1 /* theme.text2 */ : theme.text4}
-    >
+    <ThemedText.Body className={className} fontSize={14} color={fiatValue ? theme.text1 : theme.text4}>
       {fiatValue ? (
         <Trans>
           ≈ $
           <HoverInlineText
-            text={
-              formatSmart(fiatValue, FIAT_PRECISION, {
-                thousandSeparator: true,
-                isLocaleAware: true,
-              }) /* fiatValue?.toSignificant(6, { groupSeparator: ',' }) */
-            }
+            text={formatSmart(fiatValue, FIAT_PRECISION, {
+              thousandSeparator: true,
+              isLocaleAware: true,
+            })}
           />
         </Trans>
       ) : (
@@ -55,7 +53,10 @@ export function FiatValue({
       )}
       {priceImpact ? (
         <span style={{ color: priceImpactColor }}>
-          &nbsp;({formatSmart(priceImpact.multiply(-1), PERCENTAGE_PRECISION)}%)
+          {' '}
+          <MouseoverTooltip text={t`The estimated difference between the USD values of input and output amounts.`}>
+            (<Trans>{formatSmart(priceImpact.multiply(-1), PERCENTAGE_PRECISION)}%</Trans>)
+          </MouseoverTooltip>
         </span>
       ) : null}
       {priceImpactLoading && <Loader size="14px" style={{ margin: '0 0 -2px 7px' }} />}
diff --git a/src/custom/components/CurrencyInputPanel/index.tsx b/src/custom/components/CurrencyInputPanel/index.tsx
index df798c30d5..53a059110f 100644
--- a/src/custom/components/CurrencyInputPanel/index.tsx
+++ b/src/custom/components/CurrencyInputPanel/index.tsx
@@ -1,5 +1,3 @@
-// import { darken } from 'polished'
-
 import styled, { css } from 'styled-components/macro'
 import { darken } from 'polished'
 import useLoadingWithTimeout from 'hooks/useLoadingWithTimeout'
diff --git a/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx b/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx
index ce055390d6..507c4159b3 100644
--- a/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx
+++ b/src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx
@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import React, { ErrorInfo, Component } from 'react'
+import React, { ErrorInfo } from 'react'
 import ReactGA from 'react-ga'
 import styled from 'styled-components/macro'
 
@@ -142,7 +142,7 @@ function truncate(value?: string): string | undefined {
   return value ? value.slice(0, 1000) : undefined
 }
 
-export default class ErrorBoundary extends Component<unknown, ErrorBoundaryState> {
+export default class ErrorBoundary extends React.Component<unknown, ErrorBoundaryState> {
   constructor(props: unknown) {
     super(props)
     this.state = { error: null }
diff --git a/src/custom/components/Header/HeaderMod.tsx b/src/custom/components/Header/HeaderMod.tsx
index 0162be5fe2..6915cc28bb 100644
--- a/src/custom/components/Header/HeaderMod.tsx
+++ b/src/custom/components/Header/HeaderMod.tsx
@@ -31,7 +31,7 @@ import { PropsWithChildren } from 'react'
 export const HeaderFrame = styled.div<{ showBackground: boolean }>`
   display: grid;
   grid-template-columns: 1fr 120px;
-  align-items: center;
+  //align-items: center;
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
@@ -41,14 +41,29 @@ export const HeaderFrame = styled.div<{ showBackground: boolean }>`
   border-bottom: ${({ theme }) => theme.header.border};
   padding: 1rem;
   z-index: 2;
+  /*position: relative;
+  /!* Background slide effect on scroll. *!/
+  background-image: ${({ theme }) => `linear-gradient(to bottom, transparent 50%, ${theme.bg0} 50% )}}`};
+  background-position: ${({ showBackground }) => (showBackground ? '0 -100%' : '0 0')};
+  background-size: 100% 200%;
+  box-shadow: 0px 0px 0px 1px ${({ theme, showBackground }) => (showBackground ? theme.bg2 : 'transparent;')};
+  transition: background-position 0.1s, box-shadow 0.1s;
+  background-blend-mode: hard-light;*/
+
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    grid-template-columns: 48px 1fr 1fr;
+  `};
+
   ${({ theme }) => theme.mediaWidth.upToMedium`
+    /*padding:  1rem;*/
     grid-template-columns: 1fr 1fr;
     position: relative;
   `};
 
   ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-        padding: 0.5rem 1rem;
-  `}
+    padding: 0.5rem 1rem;
+    /*grid-template-columns: 36px 1fr;*/
+  `};
 `
 
 export const HeaderControls = styled.div`
@@ -83,7 +98,7 @@ export const HeaderElement = styled.div`
   }
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-   flex-direction: row-reverse;
+    flex-direction: row-reverse;
     align-items: center;
   `};
 
@@ -111,6 +126,35 @@ export const HeaderLinks = styled(Row)`
   ${({ theme }) => theme.mediaWidth.upToMedium`
     display: none;
   `};
+  /* justify-self: center;
+  background-color: ${({ theme }) => theme.bg0};
+  width: fit-content;
+  padding: 2px;
+  border-radius: 16px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 10px;
+  overflow: auto;
+  align-items: center;
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    justify-self: start;  
+    `};
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    justify-self: center;
+  `};
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    flex-direction: row;
+    justify-content: space-between;
+    justify-self: center;
+    z-index: 99;
+    position: fixed;
+    bottom: 0; right: 50%;
+    transform: translate(50%,-50%);
+    margin: 0 auto;
+    background-color: ${({ theme }) => theme.bg0};
+    border: 1px solid ${({ theme }) => theme.bg2};
+    box-shadow: 0px 6px 10px rgb(0 0 0 / 2%);
+  `}; */
 `
 
 export const AccountElement = styled.div<{ active: boolean }>`
@@ -151,12 +195,6 @@ export const UNIWrapper = styled.span`
   }
 `
 
-export const HideSmall = styled.span`
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    display: none;
-  `};
-`
-
 export const BalanceText = styled(Text)`
   ${({ theme }) => theme.mediaWidth.upToExtraSmall`
     display: none;
diff --git a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
index 2ce342797a..10c9022549 100644
--- a/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
+++ b/src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx
@@ -256,6 +256,7 @@ const getChainNameFromId = (id: string | number) => {
 }
 
 export default function NetworkSelector() {
+  // TODO: re-think about `useChangeNetworks` extracted hook
   // const { account, chainId, library } = useActiveWeb3React()
   // const {
   //   callback: networkCallback,
diff --git a/src/custom/components/Header/URLWarning/URLWarningMod.tsx b/src/custom/components/Header/URLWarning/URLWarningMod.tsx
index 65092d1c6d..cab5267407 100644
--- a/src/custom/components/Header/URLWarning/URLWarningMod.tsx
+++ b/src/custom/components/Header/URLWarning/URLWarningMod.tsx
@@ -64,3 +64,5 @@ export default function URLWarning({ url, announcement }: { url: string; announc
     </PhishAlert>
   ) : null
 }
+// TODO: file delete from original
+// TODO: decide whether to keep it as is or not
diff --git a/src/custom/components/Menu/MenuMod.tsx b/src/custom/components/Menu/MenuMod.tsx
index 212aa3426c..a53f262bce 100644
--- a/src/custom/components/Menu/MenuMod.tsx
+++ b/src/custom/components/Menu/MenuMod.tsx
@@ -1,22 +1,23 @@
 // eslint-disable-next-line no-restricted-imports
-import { t } from '@lingui/macro'
+import { t /*, Trans*/ } from '@lingui/macro'
 // import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
-// import { L2_CHAIN_IDS, CHAIN_INFO, SupportedChainId } from 'constants/chains'
-// import { LOCALE_LABEL, SupportedLocale, SUPPORTED_LOCALES } from 'constants/locales'
-// import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
+// import { L2_CHAIN_IDS } from 'constants/chains'
+// import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales'
 // import { useActiveLocale } from 'hooks/useActiveLocale'
-import { useRef } from 'react'
+// import useActiveWeb3React from 'hooks/useActiveWeb3React'
+// import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
+import React, { /*useEffect,*/ useRef /*, useState*/ } from 'react'
 // import {
 //   BookOpen,
 //   Check,
 //   ChevronLeft,
-//   Code,
+//   Coffee,
 //   FileText,
 //   Globe,
+//   HelpCircle,
 //   Info,
 //   MessageCircle,
 //   Moon,
-//   PieChart,
 //   Sun,
 // } from 'react-feather'
 import { Link } from 'react-router-dom'
@@ -25,17 +26,12 @@ import styled, { css } from 'styled-components/macro'
 
 import { ReactComponent as MenuIcon } from 'assets/images/menu.svg'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
-// import { useActiveWeb3React } from 'hooks/web3'
 import { useModalOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import { ExternalLink } from 'theme'
 import { ButtonPrimary } from 'components/Button'
-/* import { useDarkModeManager } from 'state/user/hooks'
 
-import { L2_CHAIN_IDS, CHAIN_INFO, SupportedChainId } from 'constants/chains'
-import { LOCALE_LABEL, SupportedLocale, SUPPORTED_LOCALES } from 'constants/locales'
-import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
-import { useActiveLocale } from 'hooks/useActiveLocale' */
+// MOD imports
 import { WithClassName } from 'types'
 
 export enum FlyoutAlignment {
@@ -51,14 +47,14 @@ const StyledMenuIcon = styled(MenuIcon)`
 
 export const StyledMenuButton = styled.button`
   width: 100%;
-  height: 100%;
+  //height: 100%;
   border: none;
-  background-color: transparent;
+  //background-color: transparent;
   margin: 0;
-  padding: 0;
+  //padding: 0;
   height: 35px;
   background-color: ${({ theme }) => theme.bg3};
-
+  //border: 1px solid ${({ theme }) => theme.bg0};
   padding: 0.15rem 0.5rem;
   border-radius: 0.5rem;
 
@@ -81,7 +77,7 @@ export const UNIbutton = styled(ButtonPrimary)`
 `
 
 export const StyledMenu = styled.div`
-  margin-left: 0.5rem;
+  margin-left: 0.5rem; // mod
   display: flex;
   justify-content: center;
   align-items: center;
@@ -104,6 +100,7 @@ export const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
   top: 3rem;
   right: 0rem;
   z-index: 100;
+
   ${({ flyoutAlignment = FlyoutAlignment.RIGHT }) =>
     flyoutAlignment === FlyoutAlignment.RIGHT
       ? css`
@@ -123,6 +120,7 @@ export const MenuItemBase = css`
   flex-direction: row;
   align-items: center;
   padding: 0.5rem 0.5rem;
+  //justify-content: space-between;
   color: ${({ theme }) => theme.text2};
   :hover {
     color: ${({ theme }) => theme.text1};
@@ -142,7 +140,7 @@ export const InternalMenuItem = styled(Link)`
   flex: 1;
   padding: 0.5rem 0.5rem;
   color: ${({ theme }) => theme.text2};
-  font-weight: 500;
+  font-weight: 500; // mod
   :hover {
     color: ${({ theme }) => theme.text1};
     cursor: pointer;
@@ -186,11 +184,9 @@ const ToggleMenuItem = styled.button`
     cursor: pointer;
     text-decoration: none;
   }
-` */
-
-// const CODE_LINK = 'https://github.com/Uniswap/uniswap-interface'
+`
 
-/* function LanguageMenuItem({ locale, active, key }: { locale: SupportedLocale; active: boolean; key: string }) {
+function LanguageMenuItem({ locale, active, key }: { locale: SupportedLocale; active: boolean; key: string }) {
   const { to, onClick } = useLocationLinkProps(locale)
 
   if (!to) return null
@@ -201,9 +197,9 @@ const ToggleMenuItem = styled.button`
       {active && <Check opacity={0.6} size={16} />}
     </InternalLinkMenuItem>
   )
-} */
+}
 
-/* function LanguageMenu({ close }: { close: () => void }) {
+function LanguageMenu({ close }: { close: () => void }) {
   const activeLocale = useActiveLocale()
 
   return (
@@ -248,74 +244,74 @@ export default function Menu(props: { children?: React.ReactNode } & WithClassNa
 
         {open &&
           /* (() => {
-          switch (menu) {
-            case 'lang':
-              return <LanguageMenu close={() => setMenu('main')} />
-            case 'main':
-            default:
-              return (
-                <MenuFlyout>
-                  <MenuItem href="https://uniswap.org/">
-                    <div>
-                      <Trans>About</Trans>
-                    </div>
-                    <Info opacity={0.6} size={16} />
-                  </MenuItem>
-                  <MenuItem href="https://docs.uniswap.org/">
-                    <div>
-                      <Trans>Docs</Trans>
-                    </div>
-                    <BookOpen opacity={0.6} size={16} />
-                  </MenuItem>
-                  <MenuItem href={CODE_LINK}>
-                    <div>
-                      <Trans>Code</Trans>
-                    </div>
-                    <Code opacity={0.6} size={16} />
-                  </MenuItem>
-                  <MenuItem href="https://discord.gg/FCfyBSbCU5">
-                    <div>
-                      <Trans>Discord</Trans>
-                    </div>
-                    <MessageCircle opacity={0.6} size={16} />
-                  </MenuItem>
-                  <MenuItem href={infoLink}>
-                    <div>
-                      <Trans>Analytics</Trans>
-                    </div>
-                    <PieChart opacity={0.6} size={16} />
-                  </MenuItem>
-                  <ToggleMenuItem onClick={() => setMenu('lang')}>
-                    <div>
-                      <Trans>Language</Trans>
-                    </div>
-                    <Globe opacity={0.6} size={16} />
-                  </ToggleMenuItem>
-                  <ToggleMenuItem onClick={() => toggleDarkMode()}>
-                    <div>{darkMode ? <Trans>Light Theme</Trans> : <Trans>Dark Theme</Trans>}</div>
-                    {darkMode ? <Moon opacity={0.6} size={16} /> : <Sun opacity={0.6} size={16} />}
-                  </ToggleMenuItem>
-                  <ToggleMenuItem onClick={() => togglePrivacyPolicy()}>
-                    <div>
-                      <Trans>Legal & Privacy</Trans>
-                    </div>
-                    <FileText opacity={0.6} size={16} />
-                  </ToggleMenuItem>
-                  {showUNIClaimOption && (
-                    <UNIbutton
-                      onClick={openClaimModal}
-                      padding="8px 16px"
-                      width="100%"
-                      $borderRadius="12px"
-                      mt="0.5rem"
-                    >
-                      <Trans>Claim UNI</Trans>
-                    </UNIbutton>
-                  )}
-                </MenuFlyout>
+            switch (menu) {
+              case 'lang':
+                return <LanguageMenu close={() => setMenu('main')} />
+              case 'main':
+              default:
+                return (
+                  <MenuFlyout>
+                    <MenuItem href="https://uniswap.org/">
+                      <div>
+                        <Trans>About</Trans>
+                      </div>
+                      <Info opacity={0.6} size={16} />
+                    </MenuItem>
+                    <MenuItem href="https://help.uniswap.org/">
+                      <div>
+                        <Trans>Help Center</Trans>
+                      </div>
+                      <HelpCircle opacity={0.6} size={16} />
+                    </MenuItem>
+                    <MenuItem href="https://uniswap.canny.io/feature-requests">
+                      <div>
+                        <Trans>Request Features</Trans>
+                      </div>
+                      <Coffee opacity={0.6} size={16} />
+                    </MenuItem>
+                    <MenuItem href="https://discord.gg/FCfyBSbCU5">
+                      <div>
+                        <Trans>Discord</Trans>
+                      </div>
+                      <MessageCircle opacity={0.6} size={16} />
+                    </MenuItem>
+                    <ToggleMenuItem onClick={() => setMenu('lang')}>
+                      <div>
+                        <Trans>Language</Trans>
+                      </div>
+                      <Globe opacity={0.6} size={16} />
+                    </ToggleMenuItem>
+                    <ToggleMenuItem onClick={() => toggleDarkMode()}>
+                      <div>{darkMode ? <Trans>Light Theme</Trans> : <Trans>Dark Theme</Trans>}</div>
+                      {darkMode ? <Moon opacity={0.6} size={16} /> : <Sun opacity={0.6} size={16} />}
+                    </ToggleMenuItem>
+                    <MenuItem href="https://docs.uniswap.org/">
+                      <div>
+                        <Trans>Docs</Trans>
+                      </div>
+                      <BookOpen opacity={0.6} size={16} />
+                    </MenuItem>
+                    <ToggleMenuItem onClick={() => togglePrivacyPolicy()}>
+                      <div>
+                        <Trans>Legal & Privacy</Trans>
+                      </div>
+                      <FileText opacity={0.6} size={16} />
+                    </ToggleMenuItem>
+                    {showUNIClaimOption && (
+                      <UNIbutton
+                        onClick={openClaimModal}
+                        padding="8px 16px"
+                        width="100%"
+                        $borderRadius="12px"
+                        mt="0.5rem"
+                      >
+                        <Trans>Claim UNI</Trans>
+                      </UNIbutton>
+                    )}
+                  </MenuFlyout>
                 )
-          }
-        })()} */
+            }
+          })()} */
           props?.children}
       </StyledMenu>
       {/* <PrivacyPolicyModal />  */}
diff --git a/src/custom/components/Menu/index.tsx b/src/custom/components/Menu/index.tsx
index d0e9bf20e7..8cbe869942 100644
--- a/src/custom/components/Menu/index.tsx
+++ b/src/custom/components/Menu/index.tsx
@@ -233,7 +233,6 @@ export const Separator = styled(SeparatorBase)`
 
 export const CloseMenu = styled.button`
   display: grid;
-  justify-content: space-between;
   align-items: center;
   background: ${({ theme }) => theme.header.menuFlyout.closeButtonBg};
   border: 0;
diff --git a/src/custom/components/Popups/ListUpdatePopupMod.tsx b/src/custom/components/Popups/ListUpdatePopupMod.tsx
index 1de685f260..20ad95e429 100644
--- a/src/custom/components/Popups/ListUpdatePopupMod.tsx
+++ b/src/custom/components/Popups/ListUpdatePopupMod.tsx
@@ -113,3 +113,6 @@ export default function ListUpdatePopup({
     </AutoRow>
   )
 }
+
+// TODO: file no longer exists on original code base
+// TODO: decide whether to remove or make it no longer a MOD
diff --git a/src/custom/components/Popups/PopupItemMod.tsx b/src/custom/components/Popups/PopupItemMod.tsx
index 728f5fbbf0..b11e2a0dc4 100644
--- a/src/custom/components/Popups/PopupItemMod.tsx
+++ b/src/custom/components/Popups/PopupItemMod.tsx
@@ -6,7 +6,10 @@ import styled, { ThemeContext } from 'styled-components/macro'
 
 import { useRemovePopup } from 'state/application/hooks'
 import { PopupContent } from 'state/application/reducer'
+import FailedNetworkSwitchPopup from 'components/Popups/FailedNetworkSwitchPopup'
 import TransactionPopup from './TransactionPopupMod'
+
+// MOD imports
 import ListUpdatePopup from 'components/Popups/ListUpdatePopup'
 
 export const StyledClose = styled(X)`
@@ -21,7 +24,7 @@ export const StyledClose = styled(X)`
 export const Popup = styled.div`
   display: inline-block;
   width: 100%;
-  padding: 1em;
+  //padding: 1em;
   background-color: ${({ theme }) => theme.bg1};
   position: relative;
   border-radius: 10px;
@@ -51,7 +54,7 @@ export default function PopupItem({
   removeAfterMs,
   content,
   popKey,
-  className,
+  className, // mod
 }: {
   removeAfterMs: number | null
   content: PopupContent
@@ -90,6 +93,8 @@ export default function PopupItem({
       metatxn: { id, success, summary },
     } = content
     popupContent = <TransactionPopup hash={id} success={success} summary={summary} />
+  } else if ('failedSwitchNetwork' in content) {
+    popupContent = <FailedNetworkSwitchPopup chainId={content.failedSwitchNetwork} />
   }
 
   const faderStyle = useSpring({
diff --git a/src/custom/components/Popups/PopupsMod.tsx b/src/custom/components/Popups/PopupsMod.tsx
index 496dcce661..fa48f7eb5a 100644
--- a/src/custom/components/Popups/PopupsMod.tsx
+++ b/src/custom/components/Popups/PopupsMod.tsx
@@ -1,12 +1,15 @@
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import styled from 'styled-components/macro'
+import { MEDIA_WIDTHS } from 'theme'
+
 import { useActivePopups } from 'state/application/hooks'
+import { useURLWarningVisible } from 'state/user/hooks'
 import { AutoColumn } from 'components/Column'
-import PopupItem from 'components/Popups/PopupItem'
 // import ClaimPopup from './ClaimPopup'
-import { useURLWarningVisible } from 'state/user/hooks'
-import { useActiveWeb3React } from 'hooks/web3'
+import PopupItem from 'components/Popups/PopupItem'
+
+// MOD imports
 import { SupportedChainId } from 'constants/chains'
-import { MEDIA_WIDTHS } from '@src/theme'
 import { MobilePopupWrapper } from '.'
 
 /* const MobilePopupWrapper = styled.div<{ height: string | number }>`
diff --git a/src/custom/components/Popups/TransactionPopupMod.tsx b/src/custom/components/Popups/TransactionPopupMod.tsx
index 51c1d2b9ee..e26353b3d9 100644
--- a/src/custom/components/Popups/TransactionPopupMod.tsx
+++ b/src/custom/components/Popups/TransactionPopupMod.tsx
@@ -1,14 +1,17 @@
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
 import styled, { ThemeContext } from 'styled-components/macro'
 
-import { useActiveWeb3React } from 'hooks/web3'
 // import { useTransaction } from 'state/transactions/hooks'
 import { ThemedText } from 'theme'
 // import { ExternalLink } from 'theme'
-// import { getEtherscanLink } from 'utils'
+// import { ExplorerDataType, getEtherscanLink } from 'utils'
+// import { TransactionSummary } from '../AccountDetails/TransactionSummary'
 import { AutoColumn } from 'components/Column'
 import { AutoRow } from 'components/Row'
+
+// MOD imports
 import { ExplorerLink } from 'components/ExplorerLink'
 
 const RowNoFlex = styled(AutoRow)`
@@ -26,14 +29,21 @@ export default function TransactionPopup({
 }) {
   const { chainId } = useActiveWeb3React()
 
+  // const tx = useTransaction(hash)
   const theme = useContext(ThemeContext)
 
+  // if (!tx) return null
+  // const success = Boolean(tx.receipt && tx.receipt.status === 1)
+
   return (
     <RowNoFlex>
       <div style={{ paddingRight: 16 }}>
         {success ? <CheckCircle color={theme.green1} size={24} /> : <AlertCircle color={theme.red1} size={24} />}
       </div>
       <AutoColumn gap="8px">
+        {/* <ThemedText.Body fontWeight={500}>
+          <TransactionSummary info={tx.info} />
+        </ThemedText.Body> */}
         {!summary || typeof summary === 'string' ? (
           <ThemedText.Body fontWeight={500} style={{ whiteSpace: 'pre-wrap' }}>
             {summary ?? 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)}
@@ -42,9 +52,9 @@ export default function TransactionPopup({
           summary
         )}
         {chainId && (
-          /*   <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
-          View on Explorer
-        </ExternalLink> */
+          /* <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
+            View on Explorer
+          </ExternalLink> */
           <ExplorerLink id={hash} />
         )}
       </AutoColumn>
diff --git a/src/custom/components/QuestionHelper/QuestionHelperMod.tsx b/src/custom/components/QuestionHelper/QuestionHelperMod.tsx
index f891edc4b7..aa3d7bc96a 100644
--- a/src/custom/components/QuestionHelper/QuestionHelperMod.tsx
+++ b/src/custom/components/QuestionHelper/QuestionHelperMod.tsx
@@ -1,6 +1,8 @@
 import { /* ReactNode, */ useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 import Tooltip from 'components/Tooltip'
+
+// MOD imports
 import { TooltipProps } from '../Tooltip/TooltipMod'
 import { QuestionWrapper } from './index'
 
diff --git a/src/custom/components/QuestionHelper/index.tsx b/src/custom/components/QuestionHelper/index.tsx
index eae6ba94d1..827e2bda2f 100644
--- a/src/custom/components/QuestionHelper/index.tsx
+++ b/src/custom/components/QuestionHelper/index.tsx
@@ -13,7 +13,6 @@ export const QuestionWrapper = styled.div`
   width: 16px;
   height: 16px;
   border: none;
-  background: none;
   outline: none;
   cursor: default;
   border-radius: 16px;
diff --git a/src/custom/components/SearchModal/CommonBases/CommonBasesMod.tsx b/src/custom/components/SearchModal/CommonBases/CommonBasesMod.tsx
index b228c27c4b..89ac8d3904 100644
--- a/src/custom/components/SearchModal/CommonBases/CommonBasesMod.tsx
+++ b/src/custom/components/SearchModal/CommonBases/CommonBasesMod.tsx
@@ -1,14 +1,24 @@
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
+// import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
-import QuestionHelper from 'components/QuestionHelper'
 import { AutoRow } from 'components/Row'
 import { COMMON_BASES } from 'constants/routing'
-import { BaseWrapper, CommonBasesRow, CommonBasesProps, MobileWrapper } from '.' // mod
+import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { currencyId } from 'utils/currencyId'
 
+// MOD imports
+import QuestionHelper from 'components/QuestionHelper'
+import { BaseWrapper, CommonBasesRow, CommonBasesProps, MobileWrapper } from '.' // mod
+
+/* const MobileWrapper = styled(AutoColumn)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
+` */
+
 export const BaseWrapperMod = styled.div<{ disable?: boolean }>`
   // mod
   border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
@@ -53,7 +63,7 @@ export default function CommonBases({ chainId, onSelect, selectedCurrency }: Com
               disable={isSelected}
               key={currencyId(currency)}
             >
-              <CurrencyLogo currency={currency} style={{ marginRight: 8 }} />
+              <CurrencyLogoFromList currency={currency} />
               <Text fontWeight={500} fontSize={16}>
                 {currency.symbol}
               </Text>
@@ -64,3 +74,10 @@ export default function CommonBases({ chainId, onSelect, selectedCurrency }: Com
     </MobileWrapper>
   ) : null
 }
+
+/** helper component to retrieve a base currency from the active token lists */
+function CurrencyLogoFromList({ currency }: { currency: Currency }) {
+  const token = useTokenInfoFromActiveList(currency)
+
+  return <CurrencyLogo currency={token} style={{ marginRight: 8 }} />
+}
diff --git a/src/custom/components/SearchModal/CurrencyList/CurrencyListMod.tsx b/src/custom/components/SearchModal/CurrencyList/CurrencyListMod.tsx
index 6cb9928cfb..eba9c54e8c 100644
--- a/src/custom/components/SearchModal/CurrencyList/CurrencyListMod.tsx
+++ b/src/custom/components/SearchModal/CurrencyList/CurrencyListMod.tsx
@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { LightGreyCard } from 'components/Card'
 import QuestionHelper from 'components/QuestionHelper'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import useTheme from 'hooks/useTheme'
 import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
@@ -10,7 +11,6 @@ import styled from 'styled-components/macro'
 
 import TokenListLogo from 'assets/svg/tokenlist.svg'
 import { useIsUserAddedToken } from 'hooks/Tokens'
-import { useActiveWeb3React } from 'hooks/web3'
 import { useCombinedActiveList } from 'state/lists/hooks'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { useCurrencyBalance } from 'state/wallet/hooks'
@@ -21,8 +21,10 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import Loader from 'components/Loader'
 import { RowBetween, RowFixed } from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
-// import { MenuItem } from 'components/SearchModal/styleds'
 import ImportRow from 'components/SearchModal/ImportRow'
+// import { MenuItem } from './styleds'
+
+// MOD imports
 import { MenuItem } from '.' // mod
 import { useIsUnsupportedToken } from 'state/lists/hooks/hooksMod'
 import { formatSmart } from 'utils/format'
@@ -62,11 +64,7 @@ export const FixedContentRow = styled.div`
 `
 
 function Balance({ balance }: { balance: CurrencyAmount<Currency> }) {
-  return (
-    <StyledBalanceText title={balance.toExact()}>
-      {formatSmart(balance, AMOUNT_PRECISION) /* balance.toSignificant(4) */}
-    </StyledBalanceText>
-  )
+  return <StyledBalanceText title={balance.toExact()}>{formatSmart(balance, AMOUNT_PRECISION)}</StyledBalanceText>
 }
 
 export const TagContainer = styled.div`
@@ -132,7 +130,7 @@ function CurrencyRow({
   otherSelected,
   style,
   showCurrencyAmount,
-  isUnsupported,
+  isUnsupported, // gp-swap added
   TokenTagsComponent = TokenTags, // gp-swap added
   BalanceComponent = Balance, // gp-swap added
 }: {
@@ -142,9 +140,9 @@ function CurrencyRow({
   otherSelected: boolean
   style: CSSProperties
   showCurrencyAmount?: boolean
+  isUnsupported: boolean // gp-added
   BalanceComponent?: (params: { balance: CurrencyAmount<Currency> }) => JSX.Element // gp-swap added
   TokenTagsComponent?: (params: { currency: Currency; isUnsupported: boolean }) => JSX.Element // gp-swap added
-  isUnsupported: boolean // gp-added
 }) {
   const { account } = useActiveWeb3React()
   const key = currencyKey(currency)
diff --git a/src/custom/components/SearchModal/CurrencyList/index.tsx b/src/custom/components/SearchModal/CurrencyList/index.tsx
index d4032832e8..dab0eb2c60 100644
--- a/src/custom/components/SearchModal/CurrencyList/index.tsx
+++ b/src/custom/components/SearchModal/CurrencyList/index.tsx
@@ -9,7 +9,7 @@ import { LightGreyCard } from 'components/Card'
 import { HashLink } from 'react-router-hash-link'
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
-import { TagInfo /* , WrappedTokenInfo */ } from 'state/lists/wrappedTokenInfo'
+import { TagInfo } from 'state/lists/wrappedTokenInfo'
 import { formatSmart } from 'utils/format'
 import Column from 'components/Column'
 import { MenuItem as MenuItemMod } from '@src/components/SearchModal/styleds'
diff --git a/src/custom/components/SearchModal/CurrencySearch/CurrencySearchMod.tsx b/src/custom/components/SearchModal/CurrencySearch/CurrencySearchMod.tsx
index 962bf4d5b0..21ea1e8d89 100644
--- a/src/custom/components/SearchModal/CurrencySearch/CurrencySearchMod.tsx
+++ b/src/custom/components/SearchModal/CurrencySearch/CurrencySearchMod.tsx
@@ -32,6 +32,12 @@ import { PaddedColumn, SearchInput, Separator } from 'components/SearchModal/sty
 import useNetworkName from 'hooks/useNetworkName'
 import { ContentWrapper } from '.'
 
+/* const ContentWrapper = styled(Column)`
+  width: 100%;
+  flex: 1 1;
+  position: relative;
+` */
+
 export const Footer = styled.div`
   width: 100%;
   border-radius: 20px;
@@ -39,7 +45,6 @@ export const Footer = styled.div`
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   background-color: ${({ theme }) => theme.bg1};
-  /* border-top: 1px solid ${({ theme }) => theme.bg2}; */
 `
 
 export interface CurrencySearchProps {
diff --git a/src/custom/components/SearchModal/ImportList/ImportListMod.tsx b/src/custom/components/SearchModal/ImportList/ImportListMod.tsx
index 56e85d190a..b9ec5dfd24 100644
--- a/src/custom/components/SearchModal/ImportList/ImportListMod.tsx
+++ b/src/custom/components/SearchModal/ImportList/ImportListMod.tsx
@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 // import { TokenList } from '@uniswap/token-lists'
 import { ButtonPrimary } from 'components/Button'
-import { Card } from 'components/SearchModal/ManageLists' // mod
+// import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
 import ListLogo from 'components/ListLogo'
 import { AutoRow, RowBetween, RowFixed } from 'components/Row'
@@ -22,6 +22,8 @@ import { ExternalLink } from 'theme'
 import { CurrencyModalView } from 'components/SearchModal/CurrencySearchModal'
 import { Checkbox, PaddedColumn, TextDot } from 'components/SearchModal/styleds'
 
+// MOD imports
+import { Card } from 'components/SearchModal/ManageLists' // mod
 import { ImportProps } from '.'
 
 const Wrapper = styled.div`
diff --git a/src/custom/components/SearchModal/ImportToken/ImportTokenMod.tsx b/src/custom/components/SearchModal/ImportToken/ImportTokenMod.tsx
index 48cf026ea2..33ee222a24 100644
--- a/src/custom/components/SearchModal/ImportToken/ImportTokenMod.tsx
+++ b/src/custom/components/SearchModal/ImportToken/ImportTokenMod.tsx
@@ -11,11 +11,13 @@ import { AlertCircle, ArrowLeft } from 'react-feather'
 import { useAddUserToken } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 import { CloseIcon, ThemedText } from 'theme'
-import { transparentize } from 'polished'
 
 // import BlockedToken from 'components/SearchModal/BlockedToken'
 import { PaddedColumn } from 'components/SearchModal/styleds'
 import TokenImportCard from 'components/SearchModal/TokenImportCard'
+
+// MOD imports
+import { transparentize } from 'polished'
 import Card from 'components/Card'
 import { CardComponentProps } from '.'
 
@@ -66,7 +68,7 @@ export function ImportToken(props: ImportProps) {
         <RowBetween>
           {onBack ? <ArrowLeft style={{ cursor: 'pointer' }} onClick={onBack} /> : <div />}
           <ThemedText.MediumHeader>
-            <Plural value={tokens.length} one="Import token" other="Import tokens" />
+            <Plural value={tokens.length} _1="Import token" other="Import tokens" />
           </ThemedText.MediumHeader>
           {onDismiss ? <CloseIcon onClick={onDismiss} /> : <div />}
         </RowBetween>
diff --git a/src/custom/components/SearchModal/Manage/ManageMod.tsx b/src/custom/components/SearchModal/Manage/ManageMod.tsx
index 184aabd7d8..8f1af42751 100644
--- a/src/custom/components/SearchModal/Manage/ManageMod.tsx
+++ b/src/custom/components/SearchModal/Manage/ManageMod.tsx
@@ -12,21 +12,24 @@ import { CurrencyModalView } from '@src/components/SearchModal/CurrencySearchMod
 import { ManageLists } from 'components/SearchModal/ManageLists'
 import ManageTokens from 'components/SearchModal/ManageTokens'
 import { PaddedColumn, Separator } from '@src/components/SearchModal/styleds'
+
+// MOD imports
 import { ManageProps, Wrapper } from './index' // mod
 
 /* const Wrapper = styled.div`
   width: 100%;
   position: relative;
-  padding-bottom: 80px;
-` */
+  display: flex;
+  flex-flow: column;
+`
 
-/* const ToggleWrapper = styled(RowBetween)`
+const ToggleWrapper = styled(RowBetween)`
   background-color: ${({ theme }) => theme.bg3};
   border-radius: 12px;
   padding: 6px;
-` */
+`
 
-/* const ToggleOption = styled.div<{ active?: boolean }>`
+const ToggleOption = styled.div<{ active?: boolean }>`
   width: 48%;
   padding: 10px;
   display: flex;
diff --git a/src/custom/components/SearchModal/ManageTokens/ManageTokensMod.tsx b/src/custom/components/SearchModal/ManageTokens/ManageTokensMod.tsx
index 9d9965e090..48b7ed475b 100644
--- a/src/custom/components/SearchModal/ManageTokens/ManageTokensMod.tsx
+++ b/src/custom/components/SearchModal/ManageTokens/ManageTokensMod.tsx
@@ -5,19 +5,20 @@ import Column from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import Row, { RowBetween, RowFixed } from 'components/Row'
 import { useToken } from 'hooks/Tokens'
-import { useActiveWeb3React } from 'hooks/web3'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { RefObject, useCallback, useMemo, useRef, useState } from 'react'
 import { useRemoveUserAddedToken, useUserAddedTokens } from 'state/user/hooks'
 import styled from 'styled-components/macro'
-import { ButtonText, ExternalLink, ExternalLinkIcon, TrashIcon, ThemedText } from 'theme'
+import { ButtonText, ExternalLink, ExternalLinkIcon, ThemedText, TrashIcon } from 'theme'
 import { isAddress } from 'utils'
 
 import useTheme from 'hooks/useTheme'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 import { CurrencyModalView } from 'components/SearchModal/CurrencySearchModal'
 // import ImportRow from 'components/SearchModal/ImportRow'
-import { PaddedColumn, Separator, SearchInput } from 'components/SearchModal/styleds'
+import { PaddedColumn, SearchInput, Separator } from 'components/SearchModal/styleds'
 
+// MOD imports
 import { ImportTokensRowProps } from '.' // mod
 import useNetworkName from 'hooks/useNetworkName'
 
diff --git a/src/custom/components/Settings/SettingsMod.tsx b/src/custom/components/Settings/SettingsMod.tsx
index 5960a2b4ce..8e088c044d 100644
--- a/src/custom/components/Settings/SettingsMod.tsx
+++ b/src/custom/components/Settings/SettingsMod.tsx
@@ -1,8 +1,8 @@
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 // import { Percent } from '@uniswap/sdk-core'
-// import { SupportedChainId } from 'constants/chains'
-// import { useActiveWeb3React } from 'hooks/web3'
+// import useActiveWeb3React from 'hooks/useActiveWeb3React'
+// import { AUTO_ROUTER_SUPPORTED_CHAINS } from 'lib/hooks/routing/clientSideSmartOrderRouter'
 import { useContext, useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
 // import ReactGA from 'react-ga'
@@ -10,8 +10,8 @@ import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components/macro'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { useModalOpen, useToggleSettingsMenu } from 'state/application/hooks'
-import { useExpertModeManager, useRecipientToggleManager } from 'state/user/hooks'
 import { ApplicationModal } from 'state/application/reducer'
+import { useExpertModeManager, useRecipientToggleManager } from 'state/user/hooks'
 import { ThemedText } from 'theme'
 import { ButtonError } from 'components/Button'
 import { AutoColumn } from 'components/Column'
@@ -20,6 +20,8 @@ import QuestionHelper from 'components/QuestionHelper'
 import { RowBetween, RowFixed } from 'components/Row'
 import Toggle from 'components/Toggle'
 import TransactionSettings from 'components/TransactionSettings'
+
+// MOD imports
 import { SettingsTabProp } from '.'
 
 export const StyledMenuIcon = styled(Settings)`
@@ -50,7 +52,6 @@ const StyledCloseIcon = styled(X)`
 export const StyledMenuButton = styled.button`
   position: relative;
   width: 100%;
-  height: 100%;
   border: none;
   background-color: transparent;
   margin: 0;
@@ -127,6 +128,7 @@ export default function SettingsTab({ className, placeholderSlippage, SettingsBu
   const theme = useContext(ThemeContext)
 
   const [expertMode, toggleExpertMode] = useExpertModeManager()
+  //mod
   const [recipientToggleVisible, toggleRecipientVisibility] = useRecipientToggleManager()
 
   // const [clientSideRouter, setClientSideRouter] = useClientSideRouter()
diff --git a/src/custom/components/Settings/index.tsx b/src/custom/components/Settings/index.tsx
index d007daace8..6cb0788189 100644
--- a/src/custom/components/Settings/index.tsx
+++ b/src/custom/components/Settings/index.tsx
@@ -25,11 +25,9 @@ const Settings = styled(SettingsMod)`
     align-items: center;
     position: relative;
     width: 100%;
-    height: 100%;
     border: none;
     background-color: transparent;
     margin: 0;
-    padding: 0;
     height: 35px;
     padding: 0;
     border-radius: 35px;
diff --git a/src/custom/components/TransactionConfirmationModal/TransactionConfirmationModalMod.tsx b/src/custom/components/TransactionConfirmationModal/TransactionConfirmationModalMod.tsx
index 46f15874a3..4e5410d750 100644
--- a/src/custom/components/TransactionConfirmationModal/TransactionConfirmationModalMod.tsx
+++ b/src/custom/components/TransactionConfirmationModal/TransactionConfirmationModalMod.tsx
@@ -23,7 +23,7 @@ import { AutoColumn, ColumnCenter } from 'components/Column'
 import { RowBetween, RowFixed } from 'components/Row'
 import AnimatedConfirmation from 'components/TransactionConfirmationModal/AnimatedConfirmation'
 
-// MOD
+// MOD imports
 import { GpModal } from 'components/Modal'
 import {
   ConfirmationPendingContent,
@@ -120,9 +120,8 @@ const StyledLogo = styled.img`
       </AutoColumn>
     </Wrapper>
   )
-} */
-
-/* export function TransactionSubmittedContent({
+}
+export function TransactionSubmittedContent({
   onDismiss,
   chainId,
   hash,
diff --git a/src/custom/components/TransactionConfirmationModal/index.tsx b/src/custom/components/TransactionConfirmationModal/index.tsx
index ae6c4a4491..1b81c10802 100644
--- a/src/custom/components/TransactionConfirmationModal/index.tsx
+++ b/src/custom/components/TransactionConfirmationModal/index.tsx
@@ -4,10 +4,7 @@ import { useWalletInfo } from 'hooks/useWalletInfo'
 import { SupportedChainId as ChainId } from 'constants/chains'
 import React, { ReactNode, useContext, useMemo } from 'react'
 import styled, { ThemeContext } from 'styled-components/macro'
-import {
-  CloseIcon,
-  // CustomLightSpinner
-} from 'theme'
+import { CloseIcon } from 'theme'
 // eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { ExternalLink } from 'theme'
@@ -21,7 +18,6 @@ import GameIcon from 'assets/cow-swap/game.gif'
 import { Link } from 'react-router-dom'
 import { ConfirmationModalContent as ConfirmationModalContentMod } from './TransactionConfirmationModalMod'
 import { ColumnCenter } from 'components/Column'
-// import { lighten } from 'polished'
 import { getStatusIcon } from 'components/AccountDetails'
 import { shortenAddress } from 'utils'
 import { getChainCurrencySymbols } from 'utils/xdai/hack'
diff --git a/src/custom/components/TransactionSettings/TransactionSettingsMod.tsx b/src/custom/components/TransactionSettings/TransactionSettingsMod.tsx
index 1ad3fe4831..e90ebe87aa 100644
--- a/src/custom/components/TransactionSettings/TransactionSettingsMod.tsx
+++ b/src/custom/components/TransactionSettings/TransactionSettingsMod.tsx
@@ -1,17 +1,20 @@
 import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
+import { L2_CHAIN_IDS } from '@src/constants/chains'
+import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
+// import ms from 'ms.macro'
+import { darken } from 'polished'
 import { useContext, useState } from 'react'
+import { useSetUserSlippageTolerance, useUserSlippageTolerance, useUserTransactionTTL } from 'state/user/hooks'
 import styled, { ThemeContext } from 'styled-components/macro'
 
 import { ThemedText } from 'theme'
 import { AutoColumn } from 'components/Column'
 import QuestionHelper from '../QuestionHelper'
 import { RowBetween, RowFixed } from 'components/Row'
-import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
-import { darken } from 'polished'
-import { useSetUserSlippageTolerance, useUserSlippageTolerance, useUserTransactionTTL } from 'state/user/hooks'
-import { L2_CHAIN_IDS } from '@src/constants/chains'
-import { useActiveWeb3React } from 'hooks/web3'
+
+// MOD imports
 import { INPUT_OUTPUT_EXPLANATION, MINIMUM_ORDER_VALID_TO_TIME_SECONDS } from 'constants/index'
 
 enum SlippageError {
@@ -85,7 +88,7 @@ export const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: bo
 const SlippageEmojiContainer = styled.span`
   color: #f3841e;
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    display: none;  
+    display: none;
   `}
 `
 
@@ -93,6 +96,8 @@ export interface TransactionSettingsProps {
   placeholderSlippage: Percent // varies according to the context in which the settings dialog is placed
 }
 
+// const THREE_DAYS_IN_SECONDS = ms`3 days` / 1000
+
 export default function TransactionSettings({ placeholderSlippage }: TransactionSettingsProps) {
   const { chainId } = useActiveWeb3React()
   const theme = useContext(ThemeContext)
diff --git a/src/custom/components/TransactionSettings/index.tsx b/src/custom/components/TransactionSettings/index.tsx
index 1ae13f9f59..baeee00632 100644
--- a/src/custom/components/TransactionSettings/index.tsx
+++ b/src/custom/components/TransactionSettings/index.tsx
@@ -54,28 +54,6 @@ const Wrapper = styled.div`
   }
 `
 
-// type SetRawSlippage = (rawSlippage: number) => void
-// type SetSlippageInput = (value: React.SetStateAction<string>) => void
-
-/* function parseCustomSlippage(value: string, setRawSlippage: SetRawSlippage, setSlippageInput: SetSlippageInput): void {
-  // we don't allow negative slippage to be input
-  if (isNaN(Number(value)) || Number(value) < 0) {
-    return batchedUpdates(() => {
-      setSlippageInput('0')
-      setRawSlippage(0)
-    })
-  }
-
-  setSlippageInput(value)
-
-  try {
-    const valueAsIntFromRoundedFloat = Number.parseInt((Number.parseFloat(value) * 100).toString())
-    if (!Number.isNaN(valueAsIntFromRoundedFloat) && valueAsIntFromRoundedFloat < 5000) {
-      setRawSlippage(valueAsIntFromRoundedFloat)
-    }
-  } catch {}
-} */
-
 export type TransactionSettingsProps = Omit<TransactionSettingsPropsMod, 'Option'>
 
 export default function SlippageTabs(params: TransactionSettingsProps) {
diff --git a/src/custom/components/WalletModal/Option/OptionMod.tsx b/src/custom/components/WalletModal/Option/OptionMod.tsx
index e538016a7a..42c3a72fa1 100644
--- a/src/custom/components/WalletModal/Option/OptionMod.tsx
+++ b/src/custom/components/WalletModal/Option/OptionMod.tsx
@@ -1,4 +1,6 @@
+import React from 'react'
 import styled from 'styled-components/macro'
+
 import { ExternalLink } from 'theme'
 
 const InfoCard = styled.button<{ active?: boolean }>`
diff --git a/src/custom/components/WalletModal/WalletModalMod.tsx b/src/custom/components/WalletModal/WalletModalMod.tsx
index c0b36e2ade..7275676ee4 100644
--- a/src/custom/components/WalletModal/WalletModalMod.tsx
+++ b/src/custom/components/WalletModal/WalletModalMod.tsx
@@ -1,12 +1,15 @@
 import { Trans } from '@lingui/macro'
-import { AbstractConnector } from '@web3-react/abstract-connector'
-import { UnsupportedChainIdError, useWeb3React } from 'web3-react-core'
-import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
-import { AutoRow } from 'components/Row'
+import { AutoColumn } from 'components/Column'
+// import { PrivacyPolicy } from 'components/PrivacyPolicy'
+import { /*Row,*/ AutoRow /*, RowBetween*/ } from 'components/Row'
 // import { useWalletConnectMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
 import { useEffect, useState } from 'react'
+// import { ArrowLeft, ArrowRight, Info } from 'react-feather'
 import ReactGA from 'react-ga'
 import styled from 'styled-components/macro'
+import { AbstractConnector } from 'web3-react-abstract-connector'
+import { UnsupportedChainIdError, useWeb3React } from 'web3-react-core'
+import { WalletConnectConnector } from 'web3-react-walletconnect-connector'
 
 import MetamaskIcon from 'assets/images/metamask.png'
 import { ReactComponent as Close } from 'assets/images/x.svg'
@@ -16,16 +19,16 @@ import { SUPPORTED_WALLETS } from 'constants/index'
 import usePrevious from 'hooks/usePrevious'
 import { useModalOpen, useWalletModalToggle } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
-import {
-  // ExternalLink,
-  ThemedText,
-} from 'theme'
+import { /*ExternalLink,*/ ThemedText } from 'theme'
 import { isMobile } from 'react-device-detect'
 // import AccountDetails from 'components/AccountDetails'
-import ModalMod from '@src/components/Modal'
+import { /*Card,*/ LightCard } from 'components/Card'
+// import Modal from '../Modal'
 import Option from 'components/WalletModal/Option'
 import PendingView from 'components/WalletModal/PendingView'
-import { LightCard } from 'components/Card'
+
+// MOD imports
+import ModalMod from '@src/components/Modal'
 
 export const CloseIcon = styled.div`
   position: absolute;
@@ -111,11 +114,22 @@ export const HoverText = styled.div`
   }
 `
 
+/* const LinkCard = styled(Card)`
+  background-color: ${({ theme }) => theme.bg1};
+  color: ${({ theme }) => theme.text3};
+
+  :hover {
+    cursor: pointer;
+    filter: brightness(0.9);
+  }
+` */
+
 const WALLET_VIEWS = {
   OPTIONS: 'options',
   OPTIONS_SECONDARY: 'options_secondary',
   ACCOUNT: 'account',
   PENDING: 'pending',
+  LEGAL: 'legal',
 }
 
 // MOD
@@ -145,6 +159,7 @@ export default function WalletModal({
   const { active, account, connector, activate, error } = useWeb3React()
 
   const [walletView, setWalletView] = useState(WALLET_VIEWS.ACCOUNT)
+  // const previousWalletView = usePrevious(walletView)
 
   const [pendingWallet, setPendingWallet] = useState<AbstractConnector | undefined>()
 
@@ -334,7 +349,7 @@ export default function WalletModal({
           <ContentWrapper>
             {error instanceof UnsupportedChainIdError ? (
               <h5>
-                <Trans>Please connect to the appropriate network.</Trans>
+                <Trans>Please connect to a supported network in the dropdown menu or in your wallet.</Trans>
               </h5>
             ) : (
               <Trans>Error connecting. Try refreshing the page.</Trans>
@@ -343,17 +358,41 @@ export default function WalletModal({
         </UpperSection>
       )
     }
-    // if (account && walletView === WALLET_VIEWS.ACCOUNT) {
-    //   return (
-    //     <AccountDetails
-    //       toggleWalletModal={toggleWalletModal}
-    //       pendingTransactions={pendingTransactions}
-    //       confirmedTransactions={confirmedTransactions}
-    //       ENSName={ENSName}
-    //       openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
-    //     />
-    //   )
-    // }
+    /* if (walletView === WALLET_VIEWS.LEGAL) {
+      return (
+        <UpperSection>
+          <HeaderRow>
+            <HoverText
+              onClick={() => {
+                setWalletView(
+                  (previousWalletView === WALLET_VIEWS.LEGAL ? WALLET_VIEWS.ACCOUNT : previousWalletView) ??
+                    WALLET_VIEWS.ACCOUNT
+                )
+              }}
+            >
+              <ArrowLeft />
+            </HoverText>
+            <Row justify="center">
+              <ThemedText.MediumHeader>
+                <Trans>Legal & Privacy</Trans>
+              </ThemedText.MediumHeader>
+            </Row>
+          </HeaderRow>
+          <PrivacyPolicy />
+        </UpperSection>
+      )
+    }
+    if (account && walletView === WALLET_VIEWS.ACCOUNT) {
+      return (
+        <AccountDetails
+          toggleWalletModal={toggleWalletModal}
+          pendingTransactions={pendingTransactions}
+          confirmedTransactions={confirmedTransactions}
+          ENSName={ENSName}
+          openOptions={() => setWalletView(WALLET_VIEWS.OPTIONS)}
+        />
+      )
+    } */
     return (
       <UpperSection>
         <CloseIcon onClick={toggleWalletModal}>
@@ -379,31 +418,43 @@ export default function WalletModal({
         )}
 
         <ContentWrapper>
-          <LightCard style={{ marginBottom: '16px' }}>
-            <AutoRow style={{ flexWrap: 'nowrap' }}>
-              <ThemedText.Main fontSize={14}>
-                {/* <Trans>
+          <AutoColumn gap="16px">
+            <LightCard style={{ marginBottom: '16px' }}>
+              <AutoRow style={{ flexWrap: 'nowrap' }}>
+                <ThemedText.Main fontSize={14}>
+                  {/* <Trans>
                   By connecting a wallet, you agree to Uniswap Labs’{' '}
                   <ExternalLink href="https://uniswap.org/terms-of-service/">Terms of Service</ExternalLink> and
                   acknowledge that you have read and understand the{' '}
                   <ExternalLink href="https://uniswap.org/disclaimer/">Uniswap protocol disclaimer</ExternalLink>.
                 </Trans> */}
-                <CustomTerms />
-              </ThemedText.Main>
-            </AutoRow>
-          </LightCard>
-
-          {walletView === WALLET_VIEWS.PENDING ? (
-            <PendingView
-              connector={pendingWallet}
-              error={pendingError}
-              setPendingError={setPendingError}
-              tryActivation={tryActivation}
-            />
-          ) : (
-            <OptionGrid>{getOptions()}</OptionGrid>
-          )}
-          {walletView !== WALLET_VIEWS.PENDING && <NewToEthereum />}
+                  <CustomTerms />
+                </ThemedText.Main>
+              </AutoRow>
+            </LightCard>
+            {walletView === WALLET_VIEWS.PENDING ? (
+              <PendingView
+                connector={pendingWallet}
+                error={pendingError}
+                setPendingError={setPendingError}
+                tryActivation={tryActivation}
+              />
+            ) : (
+              <OptionGrid>{getOptions()}</OptionGrid>
+            )}
+            {/* <LinkCard padding=".5rem" $borderRadius=".75rem" onClick={() => setWalletView(WALLET_VIEWS.LEGAL)}>
+              <RowBetween>
+                <AutoRow gap="4px">
+                  <Info size={20} />
+                  <ThemedText.Label fontSize={14}>
+                    <Trans>How this app uses APIs</Trans>
+                  </ThemedText.Label>
+                </AutoRow>
+                <ArrowRight size={16} />
+              </RowBetween>
+            </LinkCard> */}
+            {walletView !== WALLET_VIEWS.PENDING && <NewToEthereum />}
+          </AutoColumn>
         </ContentWrapper>
       </UpperSection>
     )
diff --git a/src/custom/components/Web3Status/Web3StatusMod.tsx b/src/custom/components/Web3Status/Web3StatusMod.tsx
index 64c477144b..be04b2d01a 100644
--- a/src/custom/components/Web3Status/Web3StatusMod.tsx
+++ b/src/custom/components/Web3Status/Web3StatusMod.tsx
@@ -90,8 +90,8 @@ const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
 ` */
 
 export const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
-  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg2 /*bg1*/)};
-  border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg3 /*bg1*/)};
+  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg2)};
+  border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg3)};
   color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
   font-weight: 500;
   :hover,
@@ -99,8 +99,7 @@ export const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean
     background-color: ${({ pending, theme }) => (pending ? darken(0.05, theme.primary1) : lighten(0.05, theme.bg2))};
 
     :focus {
-      border: 1px solid
-        ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg3 /*bg2*/))};
+      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg3))};
     }
   }
 `
diff --git a/src/custom/components/swap/AdvancedSwapDetails/AdvancedSwapDetailsMod.tsx b/src/custom/components/swap/AdvancedSwapDetails/AdvancedSwapDetailsMod.tsx
index 248e1f47d1..9af9caf180 100644
--- a/src/custom/components/swap/AdvancedSwapDetails/AdvancedSwapDetailsMod.tsx
+++ b/src/custom/components/swap/AdvancedSwapDetails/AdvancedSwapDetailsMod.tsx
@@ -1,46 +1,54 @@
 // import { Trans } from '@lingui/macro'
-import { Percent /*, Currency, TradeType */ } from '@uniswap/sdk-core'
-// import { Trade as V2Trade } from '@uniswap/v2-sdk'
-// import { Trade as V3Trade } from '@uniswap/v3-sdk'
+import { /*Currency,*/ Percent /*, TradeType*/ } from '@uniswap/sdk-core'
+// import Card from 'components/Card'
 // import { LoadingRows } from 'components/Loader/styled'
+// import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
+// import useActiveWeb3React from 'hooks/useActiveWeb3React'
 // import { useContext, useMemo } from 'react'
-// import { ThemeContext } from 'styled-components/macro'
+// import { InterfaceTrade } from 'state/routing/types'
+// import styled, { ThemeContext } from 'styled-components/macro'
 
-// import { ThemedText } from 'theme'
-// import { computeRealizedLPFeePercent } from 'utils/prices'
-// import { AutoColumn } from 'components/Column'
-// import { RowBetween, RowFixed } from 'components/Row'
-// import FormattedPriceImpact from 'components/swap/FormattedPriceImpact'
-// import { TransactionDetailsLabel } from './styleds'
+// import { Separator, ThemedText } from '../../theme'
+// import { computeRealizedLPFeePercent } from '../../utils/prices'
+// import { AutoColumn } from '../Column'
+// import { RowBetween, RowFixed } from '../Row'
+// import FormattedPriceImpact from './FormattedPriceImpact'
 
+// MOD imports
 import TradeGp from 'state/swap/TradeGp'
 import TradeSummary from '../TradeSummary'
 
+/* const StyledCard = styled(Card)`
+  padding: 0;
+` */
+
 export interface AdvancedSwapDetailsProps {
-  // trade?: V2Trade<Currency, Currency, TradeType> | V3Trade<Currency, Currency, TradeType>
+  // trade?: InterfaceTrade<Currency, Currency, TradeType>
   trade?: TradeGp
   allowedSlippage: Percent
+  // syncing?: boolean
+  // hideRouteDiagram?: boolean
   showHelpers?: boolean
   showFee?: boolean
 }
 
-// function TextWithLoadingPlaceholder({
-//   syncing,
-//   width,
-//   children,
-// }: {
-//   syncing: boolean
-//   width: number
-//   children: JSX.Element
-// }) {
-//   return syncing ? (
-//     <LoadingRows>
-//       <div style={{ height: '15px', width: `${width}px` }} />
-//     </LoadingRows>
-//   ) : (
-//     children
-//   )
-// }
+/* function TextWithLoadingPlaceholder({
+  syncing,
+  width,
+  children,
+}: {
+  syncing: boolean
+  width: number
+  children: JSX.Element
+}) {
+  return syncing ? (
+    <LoadingRows>
+      <div style={{ height: '15px', width: `${width}px` }} />
+    </LoadingRows>
+  ) : (
+    children
+  )
+} */
 
 export function AdvancedSwapDetails({
   trade,
@@ -48,80 +56,80 @@ export function AdvancedSwapDetails({
   showHelpers = true,
   showFee = true,
 }: AdvancedSwapDetailsProps) {
-  // const theme = useContext(ThemeContext)
-
-  /* 
-  const { realizedLPFee, priceImpact } = useMemo(() => {
-    if (!trade) return { realizedLPFee: undefined, priceImpact: undefined }
+  /* const theme = useContext(ThemeContext)
+  const { chainId } = useActiveWeb3React()
 
+  const { expectedOutputAmount, priceImpact } = useMemo(() => {
+    if (!trade) return { expectedOutputAmount: undefined, priceImpact: undefined }
+    const expectedOutputAmount = trade.outputAmount
     const realizedLpFeePercent = computeRealizedLPFeePercent(trade)
-    const realizedLPFee = trade.inputAmount.multiply(realizedLpFeePercent)
     const priceImpact = trade.priceImpact.subtract(realizedLpFeePercent)
-    return { priceImpact, realizedLPFee }
-  }, [trade]) 
-  */
-
-  if (!trade) return null
-
-  return <TradeSummary trade={trade} allowedSlippage={allowedSlippage} showHelpers={showHelpers} showFee={showFee} />
-  /* 
-    <AutoColumn gap="8px">
-      <TransactionDetailsLabel fontWeight={500} fontSize={14}>
-        <Trans>Transaction Details</Trans>
-      </TransactionDetailsLabel>
-      <RowBetween>
-        <RowFixed>
-          <ThemedText.SubHeader color={theme.text1}>
-            <Trans>Liquidity Provider Fee</Trans>
-          </ThemedText.SubHeader>
-        </RowFixed>
-        <TextWithLoadingPlaceholder syncing={syncing} width={65}>
-          <ThemedText.Black textAlign="right" fontSize={14}>
-            {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${realizedLPFee.currency.symbol}` : '-'}
-          </ThemedText.Black>
-        </TextWithLoadingPlaceholder>
-      </RowBetween>
-
-      <RowBetween>
-        <RowFixed>
-          <ThemedText.SubHeader color={theme.text1}>
-            <Trans>Price Impact</Trans>
-          </ThemedText.SubHeader>
-        </RowFixed>
-        <TextWithLoadingPlaceholder syncing={syncing} width={50}>
-          <ThemedText.Black textAlign="right" fontSize={14}>
-            <FormattedPriceImpact priceImpact={priceImpact} />
-          </ThemedText.Black>
-        </TextWithLoadingPlaceholder>
-      </RowBetween>
-
-      <RowBetween>
-        <RowFixed>
-          <ThemedText.SubHeader color={theme.text1}>
-            <Trans>Allowed Slippage</Trans>
-          </ThemedText.SubHeader>
-        </RowFixed>
-        <TextWithLoadingPlaceholder syncing={syncing} width={45}>
-          <ThemedText.Black textAlign="right" fontSize={14}>
-            {allowedSlippage.toFixed(2)}%
-          </ThemedText.Black>
-        </TextWithLoadingPlaceholder>
-      </RowBetween>
+    return { expectedOutputAmount, priceImpact }
+  }, [trade]) */
 
-      <RowBetween>
-        <RowFixed>
-          <ThemedText.SubHeader color={theme.text1}>
-            {trade.tradeType === TradeType.EXACT_INPUT ? <Trans>Minimum received</Trans> : <Trans>Maximum sent</Trans>}
-          </ThemedText.SubHeader>
-        </RowFixed>
-        <TextWithLoadingPlaceholder syncing={syncing} width={70}>
-          <ThemedText.Black textAlign="right" fontSize={14}>
-            {trade.tradeType === TradeType.EXACT_INPUT
-              ? `${trade.minimumAmountOut(allowedSlippage).toSignificant(6)} ${trade.outputAmount.currency.symbol}`
-              : `${trade.maximumAmountIn(allowedSlippage).toSignificant(6)} ${trade.inputAmount.currency.symbol}`}
-          </ThemedText.Black>
-        </TextWithLoadingPlaceholder>
-      </RowBetween>
-    </AutoColumn>
-  */
+  return !trade ? null : (
+    <TradeSummary trade={trade} allowedSlippage={allowedSlippage} showHelpers={showHelpers} showFee={showFee} />
+    /* <StyledCard>
+      <AutoColumn gap="8px">
+        <RowBetween>
+          <RowFixed>
+            <ThemedText.SubHeader color={theme.text1}>
+              <Trans>Expected Output</Trans>
+            </ThemedText.SubHeader>
+          </RowFixed>
+          <TextWithLoadingPlaceholder syncing={syncing} width={65}>
+            <ThemedText.Black textAlign="right" fontSize={14}>
+              {expectedOutputAmount
+                ? `${expectedOutputAmount.toSignificant(6)}  ${expectedOutputAmount.currency.symbol}`
+                : '-'}
+            </ThemedText.Black>
+          </TextWithLoadingPlaceholder>
+        </RowBetween>
+        <RowBetween>
+          <RowFixed>
+            <ThemedText.SubHeader color={theme.text1}>
+              <Trans>Price Impact</Trans>
+            </ThemedText.SubHeader>
+          </RowFixed>
+          <TextWithLoadingPlaceholder syncing={syncing} width={50}>
+            <ThemedText.Black textAlign="right" fontSize={14}>
+              <FormattedPriceImpact priceImpact={priceImpact} />
+            </ThemedText.Black>
+          </TextWithLoadingPlaceholder>
+        </RowBetween>
+        <Separator />
+        <RowBetween>
+          <RowFixed style={{ marginRight: '20px' }}>
+            <ThemedText.SubHeader color={theme.text3}>
+              {trade.tradeType === TradeType.EXACT_INPUT ? (
+                <Trans>Minimum received</Trans>
+              ) : (
+                <Trans>Maximum sent</Trans>
+              )}{' '}
+              <Trans>after slippage</Trans> ({allowedSlippage.toFixed(2)}%)
+            </ThemedText.SubHeader>
+          </RowFixed>
+          <TextWithLoadingPlaceholder syncing={syncing} width={70}>
+            <ThemedText.Black textAlign="right" fontSize={14} color={theme.text3}>
+              {trade.tradeType === TradeType.EXACT_INPUT
+                ? `${trade.minimumAmountOut(allowedSlippage).toSignificant(6)} ${trade.outputAmount.currency.symbol}`
+                : `${trade.maximumAmountIn(allowedSlippage).toSignificant(6)} ${trade.inputAmount.currency.symbol}`}
+            </ThemedText.Black>
+          </TextWithLoadingPlaceholder>
+        </RowBetween>
+        {!trade?.gasUseEstimateUSD || !chainId || !SUPPORTED_GAS_ESTIMATE_CHAIN_IDS.includes(chainId) ? null : (
+          <RowBetween>
+            <ThemedText.SubHeader color={theme.text3}>
+              <Trans>Network Fee</Trans>
+            </ThemedText.SubHeader>
+            <TextWithLoadingPlaceholder syncing={syncing} width={50}>
+              <ThemedText.Black textAlign="right" fontSize={14} color={theme.text3}>
+                ~${trade.gasUseEstimateUSD.toFixed(2)}
+              </ThemedText.Black>
+            </TextWithLoadingPlaceholder>
+          </RowBetween>
+        )}
+      </AutoColumn>
+    </StyledCard>*/
+  )
 }
diff --git a/src/custom/components/swap/AdvancedSwapDetailsDropdown/AdvancedSwapDetailsDropdownMod.tsx b/src/custom/components/swap/AdvancedSwapDetailsDropdown/AdvancedSwapDetailsDropdownMod.tsx
index 791eb54f54..f14167ab07 100644
--- a/src/custom/components/swap/AdvancedSwapDetailsDropdown/AdvancedSwapDetailsDropdownMod.tsx
+++ b/src/custom/components/swap/AdvancedSwapDetailsDropdown/AdvancedSwapDetailsDropdownMod.tsx
@@ -25,3 +25,6 @@ export default function AdvancedSwapDetailsDropdown({ trade, ...rest }: Advanced
     </AdvancedDetailsFooter>
   )
 }
+
+// TODO: file no longer exists at origin.
+// TODO: decide if we want to adapt to new code or make it a no longer "mod" file
diff --git a/src/custom/components/swap/ConfirmSwapModal/ConfirmSwapModalMod.tsx b/src/custom/components/swap/ConfirmSwapModal/ConfirmSwapModalMod.tsx
index 2d82218068..d35bf37bc7 100644
--- a/src/custom/components/swap/ConfirmSwapModal/ConfirmSwapModalMod.tsx
+++ b/src/custom/components/swap/ConfirmSwapModal/ConfirmSwapModalMod.tsx
@@ -1,8 +1,10 @@
 import { Trans } from '@lingui/macro'
+// import { Trade } from '@uniswap/router-sdk'
 import { /* Currency,  */ Percent /* , TradeType */ } from '@uniswap/sdk-core'
-// import { Trade as V2Trade } from '@uniswap/v2-sdk'
-// import { Trade as V3Trade } from '@uniswap/v3-sdk'
 import { ReactNode, useCallback, useMemo } from 'react'
+// import { InterfaceTrade } from 'state/routing/types'
+// import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
+
 import TransactionConfirmationModal, {
   ConfirmationModalContent,
   OperationType,
@@ -10,7 +12,8 @@ import TransactionConfirmationModal, {
 } from 'components/TransactionConfirmationModal'
 import SwapModalFooter from 'components/swap/SwapModalFooter'
 import SwapModalHeader from 'components/swap/SwapModalHeader'
-// MOD
+
+// MOD imports
 import TradeGp from 'state/swap/TradeGp'
 import { useWalletInfo } from 'hooks/useWalletInfo'
 
@@ -45,7 +48,7 @@ export default function ConfirmSwapModal({
   onConfirm,
   onDismiss,
   recipient,
-  priceImpact,
+  priceImpact, // mod
   swapErrorMessage,
   isOpen,
   attemptingTxn,
@@ -53,8 +56,8 @@ export default function ConfirmSwapModal({
   PendingTextComponent, // mod
 }: {
   isOpen: boolean
-  //   trade: V2Trade<Currency, Currency, TradeType> | V3Trade<Currency, Currency, TradeType> | undefined
-  // originalTrade: V2Trade<Currency, Currency, TradeType> | V3Trade<Currency, Currency, TradeType> | undefined
+  // trade: InterfaceTrade<Currency, Currency, TradeType> | undefined
+  // originalTrade: Trade<Currency, Currency, TradeType> | undefined
   trade: TradeGp | undefined
   originalTrade: TradeGp | undefined
   attemptingTxn: boolean
@@ -70,17 +73,6 @@ export default function ConfirmSwapModal({
 }) {
   const { allowsOffchainSigning } = useWalletInfo()
   const showAcceptChanges = useMemo(
-    /* 
-    () =>
-      Boolean(
-        (trade instanceof V2Trade &&
-          originalTrade instanceof V2Trade &&
-          tradeMeaningfullyDiffers(trade, originalTrade)) ||
-          (trade instanceof V3Trade &&
-            originalTrade instanceof V3Trade &&
-            tradeMeaningfullyDiffers(trade, originalTrade))
-      ),
-    */
     () => Boolean(trade && originalTrade && tradeMeaningfullyDiffers(trade, originalTrade)),
     [originalTrade, trade]
   )
diff --git a/src/custom/components/swap/SwapModalFooter/SwapModalFooterMod.tsx b/src/custom/components/swap/SwapModalFooter/SwapModalFooterMod.tsx
index 50cc968d88..ebe9a6c4bc 100644
--- a/src/custom/components/swap/SwapModalFooter/SwapModalFooterMod.tsx
+++ b/src/custom/components/swap/SwapModalFooter/SwapModalFooterMod.tsx
@@ -1,18 +1,19 @@
 import { Trans } from '@lingui/macro'
+// import { Trade } from '@uniswap/router-sdk'
 // import { Currency, TradeType } from '@uniswap/sdk-core'
-// import { Trade as V2Trade } from '@uniswap/v2-sdk'
-// import { Trade as V3Trade } from '@uniswap/v3-sdk'
-
-// import { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import { Text } from 'rebass'
+
 import { ButtonError } from 'components/Button'
 import { AutoRow } from 'components/Row'
 import { SwapCallbackError } from 'components/swap/styleds'
+
+// MOD imports
 import { ButtonSize } from 'theme'
 
 export interface SwapModalFooterProps {
   onConfirm: () => void
-  swapErrorMessage: React.ReactNode | undefined
+  swapErrorMessage: ReactNode | undefined
   disabledConfirm: boolean
 }
 
@@ -22,7 +23,7 @@ export default function SwapModalFooter({
   disabledConfirm,
 }: /* 
   {
-  trade: V2Trade<Currency, Currency, TradeType> | V3Trade<Currency, Currency, TradeType>
+  trade: Trade<Currency, Currency, TradeType>
   onConfirm: () => void
   swapErrorMessage: ReactNode | undefined
   disabledConfirm: boolean
diff --git a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx
index b76aa2ee03..0845bb87f1 100644
--- a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx
+++ b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx
@@ -1,28 +1,26 @@
 import { Trans } from '@lingui/macro'
 import { /* Currency, */ Percent, TradeType } from '@uniswap/sdk-core'
-// import { Trade as V2Trade } from '@uniswap/v2-sdk'
-// import { Trade as V3Trade } from '@uniswap/v3-sdk'
 import { useContext, useState, useMemo } from 'react'
-import { ArrowDown, AlertTriangle } from 'react-feather'
+import { AlertTriangle, ArrowDown } from 'react-feather'
 import { Text } from 'rebass'
+// import { InterfaceTrade } from 'state/routing/types'
 import styled, { ThemeContext } from 'styled-components/macro'
+
 import { useHigherUSDValue /* , useUSDCValue */ } from 'hooks/useUSDCPrice'
 import { ThemedText } from 'theme'
 import { isAddress, shortenAddress } from 'utils'
-import { ButtonPrimary } from 'components/Button'
 // import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
+import { ButtonPrimary } from 'components/Button'
+// import { LightCard } from '../Card'
 import { AutoColumn } from 'components/Column'
 import { FiatValue } from 'components/CurrencyInputPanel/FiatValue'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { RowBetween, RowFixed } from 'components/Row'
-import { TruncatedText, SwapShowAcceptChanges } from 'components/swap/styleds'
-
-import { AdvancedSwapDetails } from 'components/swap/AdvancedSwapDetails'
-// import { LightCard } from '../Card'
-
 // import TradePrice from 'components/swap/TradePrice'
+import { AdvancedSwapDetails } from 'components/swap/AdvancedSwapDetails'
+import { SwapShowAcceptChanges, TruncatedText } from 'components/swap/styleds'
 
-// MOD
+// MOD imports
 import TradeGp from 'state/swap/TradeGp'
 import { AMOUNT_PRECISION, INPUT_OUTPUT_EXPLANATION } from 'constants/index'
 import { computeSlippageAdjustedAmounts } from 'utils/prices'
@@ -73,15 +71,16 @@ export default function SwapModalHeader({
   allowedSlippage,
   recipient,
   showAcceptChanges,
-  priceImpact,
   onAcceptChanges,
+  // mod
+  priceImpact,
   LightCard,
   HighFeeWarning,
   NoImpactWarning,
   allowsOffchainSigning,
 }: /* 
 {
-  trade: V2Trade<Currency, Currency, TradeType> | V3Trade<Currency, Currency, TradeType>
+  trade: InterfaceTrade<Currency, Currency, TradeType>
   allowedSlippage: Percent
   recipient: string | null
   showAcceptChanges: boolean
@@ -98,9 +97,9 @@ SwapModalHeaderProps) {
 
   const [showInverted, setShowInverted] = useState<boolean>(false)
 
+  // const fiatValueInput = useUSDCValue(trade.inputAmount)
+  // const fiatValueOutput = useUSDCValue(trade.outputAmount)
   // show fiatValue for unadjusted trade amounts!
-  // const fiatValueInput = useUSDCValue(trade.inputAmountWithoutFee)
-  // const fiatValueOutput = useUSDCValue(trade.outputAmountWithoutFee)
   const fiatValueInput = useHigherUSDValue(trade.inputAmountWithoutFee)
   const fiatValueOutput = useHigherUSDValue(trade.outputAmountWithoutFee)
 
@@ -146,6 +145,15 @@ SwapModalHeaderProps) {
                 {formatSmart(trade.inputAmountWithoutFee, AMOUNT_PRECISION)}
               </TruncatedText>
             </RowFixed>
+            {/*<RowFixed gap={'0px'}>
+              <CurrencyLogo currency={trade.inputAmount.currency} size={'20px'} style={{ marginRight: '12px' }} />
+              <Text fontSize={20} fontWeight={500}>
+                {trade.inputAmount.currency.symbol}
+              </Text>
+            </RowFixed>
+          </RowBetween>
+          <RowBetween>
+            <FiatValue fiatValue={fiatValueInput} />*/}
           </RowBetween>
         </AutoColumn>
       </LightCard>
@@ -182,6 +190,11 @@ SwapModalHeaderProps) {
             </ThemedText.Body>
           </RowBetween>
           <RowBetween align="flex-end">
+            {/*<RowFixed gap={'0px'}>
+              <TruncatedText fontSize={24} fontWeight={500}>
+                {trade.outputAmount.toSignificant(6)}
+              </TruncatedText>
+            </RowFixed>*/}
             <RowFixed gap={'0px'}>
               <CurrencyLogo currency={trade.outputAmount.currency} size={'20px'} style={{ marginRight: '12px' }} />
               <Text fontSize={20} fontWeight={500}>
@@ -198,6 +211,14 @@ SwapModalHeaderProps) {
               </TruncatedText>
             </RowFixed>
           </RowBetween>
+          {/*<RowBetween>
+            <ThemedText.Body fontSize={14} color={theme.text3}>
+              <FiatValue
+                fiatValue={fiatValueOutput}
+                priceImpact={computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)}
+              />
+            </ThemedText.Body>
+          </RowBetween>*/}
         </AutoColumn>
       </LightCard>
       {!!exactOutLabel && (
@@ -223,17 +244,12 @@ SwapModalHeaderProps) {
         width="90%"
         margin="auto"
       />
-      {/* <RowBetween style={{ marginTop: '0.25rem', padding: '0 1rem' }}>
-        <ThemedText.Body color={theme.text2} fontWeight={500} fontSize={14}>
-          <Trans>Price</Trans>
-        </ThemedText.Body>
+      {/*<RowBetween style={{ marginTop: '0.25rem', padding: '0 1rem' }}>
         <TradePrice price={trade.executionPrice} showInverted={showInverted} setShowInverted={setShowInverted} />
-      </RowBetween> */}
-
+      </RowBetween>*/}
       <LightCard style={{ padding: '.75rem', marginTop: '0.5rem' }}>
         <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} />
       </LightCard>
-
       {showAcceptChanges ? (
         <SwapShowAcceptChanges justify="flex-start" gap={'0px'}>
           <RowBetween>
diff --git a/src/custom/components/swap/TradePrice/TradePriceMod.tsx b/src/custom/components/swap/TradePrice/TradePriceMod.tsx
index 59684c16b9..3becdd13b5 100644
--- a/src/custom/components/swap/TradePrice/TradePriceMod.tsx
+++ b/src/custom/components/swap/TradePrice/TradePriceMod.tsx
@@ -5,6 +5,8 @@ import { useCallback, useContext } from 'react'
 import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components/macro'
 // import { ThemedText } from 'theme'
+
+// MOD imports
 import { formatMax, formatSmart } from 'utils/format' // mod
 import { LightGreyText } from 'pages/Swap'
 
@@ -26,6 +28,12 @@ const StyledPriceContainer = styled.button`
   padding: 0;
   grid-template-columns: 1fr auto;
   grid-gap: 0.25rem;
+  /* display: flex;
+  flex-direction: row;
+  text-align: left;
+  flex-wrap: wrap;
+  padding: 8px 0;
+  user-select: text; */
 `
 
 export default function TradePrice({ price, showInverted, fiatValue, setShowInverted }: TradePriceProps) {
@@ -53,7 +61,13 @@ export default function TradePrice({ price, showInverted, fiatValue, setShowInve
   const fiatText = ` (≈$${fiatValue})`
 
   return (
-    <StyledPriceContainer onClick={flipPrice}>
+    <StyledPriceContainer
+      onClick={(e) => {
+        e.stopPropagation() // dont want this click to affect dropdowns / hovers
+        flipPrice()
+      }}
+      // title={text}
+    >
       <Text fontWeight={500} fontSize={14} color={theme.text1}>
         {/* {text} */}
         <LightGreyText>{baseText}</LightGreyText>
diff --git a/src/custom/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx b/src/custom/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx
index fdaa5dff55..17a6e4744b 100644
--- a/src/custom/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx
+++ b/src/custom/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx
@@ -6,14 +6,15 @@ import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import Modal from 'components/Modal'
 import { AutoRow, RowBetween } from 'components/Row'
-import { useActiveWeb3React } from 'hooks/web3'
-import { ReactNode, useState } from 'react'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useState } from 'react'
 import styled from 'styled-components/macro'
 import { CloseIcon, ExternalLink, ThemedText, Z_INDEX } from 'theme'
+
 import { useIsUnsupportedToken } from 'state/lists/hooks'
 // import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 
-// MOD
+// MOD imports
 import { getEtherscanLink } from 'utils'
 
 export const DetailsFooter = styled.div<{ show: boolean }>`
@@ -41,7 +42,7 @@ const StyledButtonEmpty = styled(ButtonEmpty)`
 
 export const AddressText = styled(ThemedText.Blue)`
   font-size: 12px;
-  word-break: break-all;
+  word-break: break-all; // mod
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     font-size: 10px;
@@ -52,9 +53,9 @@ export const AddressText = styled(ThemedText.Blue)`
 export interface UnsupportedCurrencyFooterParams {
   show: boolean
   currencies: (Currency | null | undefined)[]
-  detailsTitle?: ReactNode
-  detailsText?: ReactNode
-  showDetailsText?: ReactNode
+  detailsTitle?: React.ReactNode
+  detailsText?: React.ReactNode
+  showDetailsText?: React.ReactNode
 }
 
 export default function UnsupportedCurrencyFooter({
@@ -65,7 +66,7 @@ export default function UnsupportedCurrencyFooter({
   showDetailsText,
 }: /* {
   show: boolean
-  currencies: (Currency | undefined)[]
+  currencies: (Currency | undefined | null)[]
 } */
 UnsupportedCurrencyFooterParams) {
   const { chainId } = useActiveWeb3React()
@@ -78,7 +79,7 @@ UnsupportedCurrencyFooterParams) {
         })
       : []
 
-  // const unsupportedTokens: { [address: string]: Token } = useUnsupportedTokens()
+  // const unsupportedTokens = useUnsupportedTokens()
 
   const isUnsupportedToken = useIsUnsupportedToken()
 
@@ -88,8 +89,8 @@ UnsupportedCurrencyFooterParams) {
         <Card padding="2rem">
           <AutoColumn gap="lg">
             <RowBetween>
-              {/* <ThemedText.MediumHeader><Trans>Unsupported Assets</Trans> Assets</ThemedText.MediumHeader> */}
               <ThemedText.MediumHeader>
+                {/* <Trans>Unsupported Assets</Trans> */}
                 <Trans>{detailsTitle}</Trans>
               </ThemedText.MediumHeader>
               <CloseIcon onClick={() => setShowDetails(false)} />
@@ -107,7 +108,6 @@ UnsupportedCurrencyFooterParams) {
                         <ThemedText.Body fontWeight={500}>{token.symbol}</ThemedText.Body>
                       </AutoRow>
                       {chainId && (
-                        // <Row flex="1 1 228px">
                         <ExternalLink
                           href={
                             getEtherscanLink(
@@ -119,7 +119,6 @@ UnsupportedCurrencyFooterParams) {
                         >
                           <AddressText>{token.address}</AddressText>
                         </ExternalLink>
-                        // </Row>
                       )}
                     </AutoColumn>
                   </OutlineCard>
diff --git a/src/custom/constants/chains/chainsMod.ts b/src/custom/constants/chains/chainsMod.ts
index 506b5a8dda..d0d5ac393e 100644
--- a/src/custom/constants/chains/chainsMod.ts
+++ b/src/custom/constants/chains/chainsMod.ts
@@ -48,6 +48,11 @@ export const ALL_SUPPORTED_CHAIN_IDS: SupportedChainId[] = Object.values(Support
   (id) => typeof id === 'number'
 ) as SupportedChainId[]
 
+export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [SupportedChainId.MAINNET /*, SupportedChainId.POLYGON*/]
+
+/**
+ * All the chain IDs that are running the Ethereum protocol.
+ */
 export const L1_CHAIN_IDS = [
   SupportedChainId.MAINNET,
   // SupportedChainId.ROPSTEN,
diff --git a/src/custom/constants/routing/routingMod.ts b/src/custom/constants/routing/routingMod.ts
index 9f9fd171c9..6a0ff33ab7 100644
--- a/src/custom/constants/routing/routingMod.ts
+++ b/src/custom/constants/routing/routingMod.ts
@@ -5,33 +5,33 @@ import { SupportedChainId } from 'constants/chains'
 import {
   // AMPL,
   DAI,
-  // DAI_ARBITRUM_ONE,
-  // DAI_OPTIMISM,
-  // DAI_POLYGON,
-  // ETH2X_FLI,
-  // FEI,
-  // FRAX,
-  // FXS,
-  // nativeOnChain,
-  // renBTC,
-  // rETH2,
-  // sETH2,
-  // SWISE,
-  // TRIBE,
-  // USDC_ARBITRUM,
+  /* DAI_ARBITRUM_ONE,
+  DAI_OPTIMISM,
+  DAI_POLYGON,
+  ETH2X_FLI,
+  FEI,
+  FRAX,
+  FXS,
+  nativeOnChain,
+  renBTC,
+  rETH2,
+  sETH2,
+  SWISE,
+  TRIBE,
+  USDC_ARBITRUM, */
   USDC_MAINNET,
   // USDC_OPTIMISM,
   // USDC_POLYGON,
   USDT,
-  // USDT_ARBITRUM_ONE,
-  // USDT_OPTIMISM,
-  // USDT_POLYGON,
+  /* USDT_ARBITRUM_ONE,
+  USDT_OPTIMISM,
+  USDT_POLYGON, */
   WBTC,
-  // WBTC_ARBITRUM_ONE,
-  // WBTC_OPTIMISM,
-  // WBTC_POLYGON,
-  // WETH_POLYGON,
-  // WETH_POLYGON_MUMBAI,
+  /* WBTC_ARBITRUM_ONE,
+  WBTC_OPTIMISM,
+  WBTC_POLYGON,
+  WETH_POLYGON,
+  WETH_POLYGON_MUMBAI, */
   WRAPPED_NATIVE_CURRENCY,
 } from 'constants/tokens'
 
diff --git a/src/custom/state/enhancedTransactions/hooks/TransactionHooksMod.tsx b/src/custom/state/enhancedTransactions/hooks/TransactionHooksMod.tsx
index 2afc57e86b..df5529354a 100644
--- a/src/custom/state/enhancedTransactions/hooks/TransactionHooksMod.tsx
+++ b/src/custom/state/enhancedTransactions/hooks/TransactionHooksMod.tsx
@@ -1,40 +1,41 @@
 // import { TransactionResponse } from '@ethersproject/providers'
+// import { Token } from '@uniswap/sdk-core'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
+// import { useTransactionMonitoringEventCallback } from 'hooks/useMonitoringEventCallback'
 import { /* useCallback,*/ useMemo } from 'react'
 import { /* useAppDispatch,*/ useAppSelector } from 'state/hooks'
 
-import { useActiveWeb3React } from 'hooks/web3'
-// import { addTransaction } from '../actions'
+// import { addTransaction, TransactionInfo, TransactionType } from './actions'
+// import { TransactionDetails } from './reducer'
+
+// MOD imports
 import { EnhancedTransactionDetails } from '../reducer'
+// import { TransactionDetails } from '@src/state/transactions/reducer'
+// import { TransactionType } from '@src/state/transactions/actions'
+
+// helper that can take a ethers library transaction response and add it to the list of transactions
+/* export function useTransactionAdder(): (response: TransactionResponse, info: TransactionInfo) => void {
+  const { chainId, account } = useActiveWeb3React()
+  const dispatch = useAppDispatch()
+
+  const logMonitoringEvent = useTransactionMonitoringEventCallback()
 
-// // helper that can take a ethers library transaction response and add it to the list of transactions
-// export function useTransactionAdder(): (
-//   response: TransactionResponse,
-//   customData?: { summary?: string; approval?: { tokenAddress: string; spender: string }; claim?: { recipient: string } }
-// ) => void {
-//   const { chainId, account } = useActiveWeb3React()
-//   const dispatch = useAppDispatch()
-
-//   return useCallback(
-//     (
-//       response: TransactionResponse,
-//       {
-//         summary,
-//         approval,
-//         claim,
-//       }: { summary?: string; claim?: { recipient: string }; approval?: { tokenAddress: string; spender: string } } = {}
-//     ) => {
-//       if (!account) return
-//       if (!chainId) return
-
-//       const { hash } = response
-//       if (!hash) {
-//         throw Error('No transaction hash found.')
-//       }
-//       dispatch(addTransaction({ hash, from: account, chainId, approval, summary, claim }))
-//     },
-//     [dispatch, chainId, account]
-//   )
-// }
+  return useCallback(
+    (response: TransactionResponse, info: TransactionInfo) => {
+      if (!account) return
+      if (!chainId) return
+
+      const { hash } = response
+      if (!hash) {
+        throw Error('No transaction hash found.')
+      }
+      dispatch(addTransaction({ hash, from: account, info, chainId }))
+
+      logMonitoringEvent(info, response)
+    },
+    [account, chainId, dispatch, logMonitoringEvent]
+  )
+} */
 
 // returns all the transactions for the current chain
 export function useAllTransactions(): { [txHash: string]: EnhancedTransactionDetails } {
@@ -45,6 +46,16 @@ export function useAllTransactions(): { [txHash: string]: EnhancedTransactionDet
   return chainId ? state[chainId] ?? {} : {}
 }
 
+/* export function useTransaction(transactionHash?: string): TransactionDetails | undefined {
+  const allTransactions = useAllTransactions()
+
+  if (!transactionHash) {
+    return undefined
+  }
+
+  return allTransactions[transactionHash]
+} */
+
 export function useIsTransactionPending(transactionHash?: string): boolean {
   const transactions = useAllTransactions()
 
@@ -53,6 +64,14 @@ export function useIsTransactionPending(transactionHash?: string): boolean {
   return !transactions[transactionHash].receipt
 }
 
+/* export function useIsTransactionConfirmed(transactionHash?: string): boolean {
+  const transactions = useAllTransactions()
+
+  if (!transactionHash || !transactions[transactionHash]) return false
+
+  return Boolean(transactions[transactionHash].receipt)
+} */
+
 /**
  * Returns whether a transaction happened in the last day (86400 seconds * 1000 milliseconds / second)
  * @param tx to check for recency
@@ -85,20 +104,20 @@ export function useHasPendingApproval(tokenAddress: string | undefined, spender:
 
 // watch for submissions to claim
 // return null if not done loading, return undefined if not found
-// export function useUserHasSubmittedClaim(account?: string): {
-//   claimSubmitted: boolean
-//   claimTxn: EnhancedTransactionDetails | undefined
-// } {
-//   const allTransactions = useAllTransactions()
-
-//   // get the txn if it has been submitted
-//   const claimTxn = useMemo(() => {
-//     const txnIndex = Object.keys(allTransactions).find((hash) => {
-//       const tx = allTransactions[hash]
-//       return tx.claim && tx.claim.recipient === account
-//     })
-//     return txnIndex && allTransactions[txnIndex] ? allTransactions[txnIndex] : undefined
-//   }, [account, allTransactions])
-
-//   return { claimSubmitted: Boolean(claimTxn), claimTxn }
-// }
+/* export function useUserHasSubmittedClaim(account?: string): {
+  claimSubmitted: boolean
+  claimTxn: TransactionDetails | undefined
+} {
+  const allTransactions = useAllTransactions()
+
+  // get the txn if it has been submitted
+  const claimTxn = useMemo(() => {
+    const txnIndex = Object.keys(allTransactions).find((hash) => {
+      const tx = allTransactions[hash]
+      return tx.info.type === TransactionType.CLAIM && tx.info.recipient === account
+    })
+    return txnIndex && allTransactions[txnIndex] ? allTransactions[txnIndex] : undefined
+  }, [account, allTransactions])
+
+  return { claimSubmitted: Boolean(claimTxn), claimTxn }
+} */
diff --git a/src/custom/state/global/actions/actionsMod.ts b/src/custom/state/global/actions/actionsMod.ts
index a99860e2df..d6550de9af 100644
--- a/src/custom/state/global/actions/actionsMod.ts
+++ b/src/custom/state/global/actions/actionsMod.ts
@@ -1,4 +1,6 @@
 import { createAction } from '@reduxjs/toolkit'
+
+// MOD imports
 import { WithChainId } from 'state/lists/actions'
 
 // fired once when the app reloads but before the app renders
diff --git a/src/custom/state/hooks/hooksMod.ts b/src/custom/state/hooks/hooksMod.ts
index 05ae99d3a5..cc39a50354 100644
--- a/src/custom/state/hooks/hooksMod.ts
+++ b/src/custom/state/hooks/hooksMod.ts
@@ -1,6 +1,7 @@
-import { TypedUseSelectorHook, useSelector } from 'react-redux'
-import { AppState } from 'state'
-
-export * from '@src/state/hooks'
+import { TypedUseSelectorHook /*, useDispatch*/, useSelector } from 'react-redux'
+import { /*AppDispatch,*/ AppState } from 'state'
 
+// export const useAppDispatch = () => useDispatch<AppDispatch>()
 export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector
+
+export * from '@src/state/hooks'
diff --git a/src/custom/state/lists/actions/actionsMod.ts b/src/custom/state/lists/actions/actionsMod.ts
index 8adb658f26..5bfcbdd520 100644
--- a/src/custom/state/lists/actions/actionsMod.ts
+++ b/src/custom/state/lists/actions/actionsMod.ts
@@ -1,6 +1,9 @@
 import { ActionCreatorWithPayload, createAction } from '@reduxjs/toolkit'
 import { TokenList, Version } from '@uniswap/token-lists'
+
+// MOD imports
 import { SupportedChainId as ChainId } from 'constants/chains'
+
 export { SupportedChainId as ChainId } from 'constants/chains'
 
 export interface WithChainId {
diff --git a/src/custom/state/lists/hooks/hooksMod.ts b/src/custom/state/lists/hooks/hooksMod.ts
index 779feec4df..2c07817d7f 100644
--- a/src/custom/state/lists/hooks/hooksMod.ts
+++ b/src/custom/state/lists/hooks/hooksMod.ts
@@ -1,15 +1,18 @@
-import DEFAULT_TOKEN_LIST from '@uniswap/default-token-list'
-import { TokenList } from '@uniswap/token-lists'
+// import { ChainTokenMap, tokensToChainTokenMap } from 'lib/hooks/useTokenList/utils'
 import { useMemo, useCallback } from 'react'
 import { useAppSelector, useAppDispatch } from 'state/hooks'
+
 import sortByListPriority from 'utils/listSort'
 
 import BROKEN_LIST from 'constants/tokenLists/broken.tokenlist.json'
 import UNSUPPORTED_TOKEN_LIST from 'constants/tokenLists/unsupported.tokenlist.json'
 import { AppState } from 'state'
-import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { UNSUPPORTED_LIST_URLS, DEFAULT_NETWORK_FOR_LISTS } from 'constants/lists'
-// MOD
+
+// MOD imports
+import { TokenList } from '@uniswap/token-lists'
+import DEFAULT_TOKEN_LIST from '@uniswap/default-token-list'
+import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { useActiveWeb3React } from 'hooks/web3'
 import {
   addGpUnsupportedToken,
@@ -23,10 +26,7 @@ import { SupportedChainId as ChainId } from 'constants/chains'
 import { supportedChainId } from 'utils/supportedChainId'
 import { TokenAddressMap, combineMaps } from '@src/state/lists/hooks'
 
-/* 
-export type TokenAddressMap = Readonly<{
-  [chainId: number]: Readonly<{ [tokenAddress: string]: { token: WrappedTokenInfo; list: TokenList } }>
-}>
+/* export type TokenAddressMap = ChainTokenMap
 
 type Mutable<T> = {
   -readonly [P in keyof T]: Mutable<T[P]>
@@ -104,8 +104,7 @@ export function useAllLists(): AppState['lists'][ChainId]['byUrl'] {
  * @param map1 the base token map
  * @param map2 the map of additioanl tokens to add to the base map
  */
-/*
-export function combineMaps(map1: TokenAddressMap, map2: TokenAddressMap): TokenAddressMap {
+/* export function combineMaps(map1: TokenAddressMap, map2: TokenAddressMap): TokenAddressMap {
   const chainIds = Object.keys(
     Object.keys(map1)
       .concat(Object.keys(map2))
@@ -123,8 +122,7 @@ export function combineMaps(map1: TokenAddressMap, map2: TokenAddressMap): Token
     }
     return memo
   }, {}) as TokenAddressMap
-} 
-*/
+} */
 
 // merge tokens contained within lists from urls
 export function useCombinedTokenMapFromUrls(urls: string[] | undefined): TokenAddressMap {
diff --git a/src/custom/state/lists/reducer/reducerMod.ts b/src/custom/state/lists/reducer/reducerMod.ts
index 4f67b9d4c7..859f25c167 100644
--- a/src/custom/state/lists/reducer/reducerMod.ts
+++ b/src/custom/state/lists/reducer/reducerMod.ts
@@ -1,3 +1,5 @@
+import { createReducer } from '@reduxjs/toolkit'
+import { getVersionUpgrade, VersionUpgrade } from '@uniswap/token-lists'
 import {
   // DEFAULT_ACTIVE_LIST_URLS,
   DEFAULT_LIST_OF_LISTS_BY_NETWORK,
@@ -5,10 +7,10 @@ import {
   DEFAULT_NETWORK_FOR_LISTS,
   UNSUPPORTED_LIST_URLS,
 } from 'constants/lists'
-import { createReducer } from '@reduxjs/toolkit'
-import { getVersionUpgrade, VersionUpgrade } from '@uniswap/token-lists'
-import { TokenList } from '@uniswap/token-lists'
 // import { DEFAULT_LIST_OF_LISTS } from '@src/constants/lists'
+
+// MOD imports
+import { TokenList } from '@uniswap/token-lists'
 import { updateVersion } from 'state/global/actions'
 import {
   acceptListUpdate,
diff --git a/src/custom/state/lists/updater/updaterMod.ts b/src/custom/state/lists/updater/updaterMod.ts
index b58d2a37b1..c91dd58a65 100644
--- a/src/custom/state/lists/updater/updaterMod.ts
+++ b/src/custom/state/lists/updater/updaterMod.ts
@@ -13,7 +13,6 @@ import { acceptListUpdate /* , enableList  */ } from 'state/lists/actions'
 import { useActiveListUrls } from 'state/lists/hooks'
 
 // MOD imports
-
 // MOD: add updateVersion for chainId change init
 import { updateVersion } from 'state/global/actions'
 
diff --git a/src/custom/utils/prices/index.ts b/src/custom/utils/prices/index.ts
index 1917e4a035..06caa1176c 100644
--- a/src/custom/utils/prices/index.ts
+++ b/src/custom/utils/prices/index.ts
@@ -1,2 +1,33 @@
+import { Currency, CurrencyAmount, Percent /* , Fraction, TradeType */ } from '@uniswap/sdk-core'
+
+import TradeGp from 'state/swap/TradeGp'
+import { Field } from 'state/swap/actions'
+
+// There's no MOD file as originals aren't touched, only new functions added
 export * from '@src/utils/prices'
-export { computeSlippageAdjustedAmounts, formatExecutionPrice } from './pricesMod'
+
+// computes the minimum amount out and maximum amount in for a trade given a user specified allowed slippage in bips
+export function computeSlippageAdjustedAmounts(
+  //   trade: Trade | undefined,
+  trade: TradeGp | undefined,
+  allowedSlippage: Percent
+): { [field in Field]?: CurrencyAmount<Currency> } {
+  return {
+    [Field.INPUT]: trade?.maximumAmountIn(allowedSlippage),
+    [Field.OUTPUT]: trade?.minimumAmountOut(allowedSlippage),
+  }
+}
+
+// export function formatExecutionPrice(trade?: Trade, inverted?: boolean): string {
+export function formatExecutionPrice(trade?: TradeGp, inverted?: boolean): string {
+  if (!trade) {
+    return ''
+  }
+  return inverted
+    ? `${trade.executionPrice.invert().toSignificant(6)} ${trade.inputAmount.currency.symbol} / ${
+        trade.outputAmount.currency.symbol
+      }`
+    : `${trade.executionPrice.toSignificant(6)} ${trade.outputAmount.currency.symbol} / ${
+        trade.inputAmount.currency.symbol
+      }`
+}
diff --git a/src/custom/utils/prices/pricesMod.ts b/src/custom/utils/prices/pricesMod.ts
deleted file mode 100644
index 53e81fb359..0000000000
--- a/src/custom/utils/prices/pricesMod.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Currency, CurrencyAmount, Percent /* , Fraction, TradeType */ } from '@uniswap/sdk-core'
-// import { Trade as V2Trade } from '@uniswap/v2-sdk'
-// import { Trade as V3Trade } from '@uniswap/v3-sdk'
-// import JSBI from 'jsbi'
-
-/* import {
-  ALLOWED_PRICE_IMPACT_HIGH,
-  ALLOWED_PRICE_IMPACT_LOW,
-  ALLOWED_PRICE_IMPACT_MEDIUM,
-  BLOCKED_PRICE_IMPACT_NON_EXPERT,
-} from 'constants/misc' */
-
-import { Field } from 'state/swap/actions'
-import TradeGp from 'state/swap/TradeGp'
-
-/* const THIRTY_BIPS_FEE = new Percent(JSBI.BigInt(30), JSBI.BigInt(10000))
-const ONE_HUNDRED_PERCENT = new Percent(JSBI.BigInt(10000), JSBI.BigInt(10000))
-const INPUT_FRACTION_AFTER_FEE = ONE_HUNDRED_PERCENT.subtract(THIRTY_BIPS_FEE) */
-
-/* 
-// computes realized lp fee as a percent
-export function computeRealizedLPFeePercent(
-  trade: V2Trade<Currency, Currency, TradeType> | V3Trade<Currency, Currency, TradeType>
-): Percent {
-  let percent: Percent
-  if (trade instanceof V2Trade) {
-    // for each hop in our trade, take away the x*y=k price impact from 0.3% fees
-    // e.g. for 3 tokens/2 hops: 1 - ((1 - .03) * (1-.03))
-    percent = ONE_HUNDRED_PERCENT.subtract(
-      trade.route.pairs.reduce<Percent>(
-        (currentFee: Percent): Percent => currentFee.multiply(INPUT_FRACTION_AFTER_FEE),
-        ONE_HUNDRED_PERCENT
-      )
-    )
-  } else {
-    //TODO(judo): validate this
-    percent = ZERO_PERCENT
-    for (const swap of trade.swaps) {
-      const { numerator, denominator } = swap.inputAmount.divide(trade.inputAmount)
-      const overallPercent = new Percent(numerator, denominator)
-
-      const routeRealizedLPFeePercent = overallPercent.multiply(
-        ONE_HUNDRED_PERCENT.subtract(
-          swap.route.pools.reduce<Percent>(
-            (currentFee: Percent, pool): Percent =>
-              currentFee.multiply(ONE_HUNDRED_PERCENT.subtract(new Fraction(pool.fee, 1_000_000))),
-            ONE_HUNDRED_PERCENT
-          )
-        )
-      )
-
-      percent = percent.add(routeRealizedLPFeePercent)
-    }
-  }
-
-  return new Percent(percent.numerator, percent.denominator)
-}
-*/
-
-// computes price breakdown for the trade
-/* export function computeRealizedLPFeeAmount(
-  trade?: V2Trade<Currency, Currency, TradeType> | V3Trade<Currency, Currency, TradeType> | null
-): CurrencyAmount<Currency> | undefined {
-  if (trade) {
-    const realizedLPFee = computeRealizedLPFeePercent(trade)
-
-    // the amount of the input that accrues to LPs
-    return CurrencyAmount.fromRawAmount(trade.inputAmount.currency, trade.inputAmount.multiply(realizedLPFee).quotient)
-  }
-
-  return undefined
-}
-
-const IMPACT_TIERS = [
-  BLOCKED_PRICE_IMPACT_NON_EXPERT,
-  ALLOWED_PRICE_IMPACT_HIGH,
-  ALLOWED_PRICE_IMPACT_MEDIUM,
-  ALLOWED_PRICE_IMPACT_LOW,
-]
-
-type WarningSeverity = 0 | 1 | 2 | 3 | 4
-export function warningSeverity(priceImpact: Percent | undefined): WarningSeverity {
-  if (!priceImpact) return 4
-  let impact: WarningSeverity = IMPACT_TIERS.length as WarningSeverity
-  for (const impactLevel of IMPACT_TIERS) {
-    if (impactLevel.lessThan(priceImpact)) return impact
-    impact--
-  }
-  return 0
-} */
-
-// computes the minimum amount out and maximum amount in for a trade given a user specified allowed slippage in bips
-export function computeSlippageAdjustedAmounts(
-  //   trade: Trade | undefined,
-  trade: TradeGp | undefined,
-  allowedSlippage: Percent
-): { [field in Field]?: CurrencyAmount<Currency> } {
-  return {
-    [Field.INPUT]: trade?.maximumAmountIn(allowedSlippage),
-    [Field.OUTPUT]: trade?.minimumAmountOut(allowedSlippage),
-  }
-}
-
-// export function formatExecutionPrice(trade?: Trade, inverted?: boolean): string {
-export function formatExecutionPrice(trade?: TradeGp, inverted?: boolean): string {
-  if (!trade) {
-    return ''
-  }
-  return inverted
-    ? `${trade.executionPrice.invert().toSignificant(6)} ${trade.inputAmount.currency.symbol} / ${
-        trade.outputAmount.currency.symbol
-      }`
-    : `${trade.executionPrice.toSignificant(6)} ${trade.outputAmount.currency.symbol} / ${
-        trade.inputAmount.currency.symbol
-      }`
-}