Reviewed a ton of Mod files

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 }} />

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({
       )}
     </>
   )
-}
-*/
+} */

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;

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 */

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};

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} />
-  }
-}

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};