improvement(routing): use WBTC pairs for routing swaps, style updates (#1269)

* 'Added WBTC to default option for routing in main UI"

* update settings button
Co-authored-by: Gismar <thegismar@gmail.com>

src/components/Header/index.tsx

@@ -254,7 +254,7 @@ const StyledExternalLink = styled(ExternalLink).attrs({
 `}
 `
 
-const StyledMenuButton = styled.button`
+export const StyledMenuButton = styled.button`
   position: relative;
   width: 100%;
   height: 100%;

src/components/Settings/index.tsx

@@ -12,7 +12,7 @@ import {
   useUserSingleHopOnly
 } from '../../state/user/hooks'
 import { TYPE } from '../../theme'
-import { ButtonError } from '../Button'
+import { ButtonError, ButtonGray } from '../Button'
 import { AutoColumn } from '../Column'
 import Modal from '../Modal'
 import QuestionHelper from '../QuestionHelper'
@@ -25,7 +25,7 @@ const StyledMenuIcon = styled(Settings)`
   width: 20px;
 
   > * {
-    stroke: ${({ theme }) => theme.text3};
+    stroke: ${({ theme }) => theme.text2};
   }
 `
 
@@ -50,7 +50,6 @@ const StyledMenuButton = styled.button`
   margin: 0;
   padding: 0;
   height: 35px;
-  /* background-color: ${({ theme }) => theme.bg3}; */
 
   padding: 0.15rem 0.5rem;
   border-radius: 0.5rem;
@@ -59,7 +58,6 @@ const StyledMenuButton = styled.button`
   :focus {
     cursor: pointer;
     outline: none;
-    /* background-color: ${({ theme }) => theme.bg4}; */
   }
 
   svg {
@@ -93,7 +91,7 @@ const MenuFlyout = styled.span`
   flex-direction: column;
   font-size: 1rem;
   position: absolute;
-  top: 2rem;
+  top: 3rem;
   right: 0rem;
   z-index: 100;
 
@@ -117,6 +115,11 @@ const ModalContentWrapper = styled.div`
   border-radius: 20px;
 `
 
+const ButtonWrapper = styled(ButtonGray)`
+  padding: 6px;
+  border-radius: 8px;
+`
+
 export default function SettingsTab() {
   const node = useRef<HTMLDivElement>()
   const open = useModalOpen(ApplicationModal.SETTINGS)
@@ -177,14 +180,16 @@ export default function SettingsTab() {
         </ModalContentWrapper>
       </Modal>
       <StyledMenuButton onClick={toggle} id="open-settings-dialog-button">
-        <StyledMenuIcon />
-        {expertMode ? (
-          <EmojiWrapper>
-            <span role="img" aria-label="wizard-icon">
-              🧙
-            </span>
-          </EmojiWrapper>
-        ) : null}
+        <ButtonWrapper width="fit-content">
+          <StyledMenuIcon />
+          {expertMode ? (
+            <EmojiWrapper>
+              <span role="img" aria-label="wizard-icon">
+                🧙
+              </span>
+            </EmojiWrapper>
+          ) : null}
+        </ButtonWrapper>
       </StyledMenuButton>
       {open && (
         <MenuFlyout>

src/constants/index.ts

@@ -62,7 +62,7 @@ const WETH_ONLY: ChainTokenList = {
 // used to construct intermediary pairs for trading
 export const BASES_TO_CHECK_TRADES_AGAINST: ChainTokenList = {
   ...WETH_ONLY,
-  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT, COMP, MKR]
+  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT, COMP, MKR, WBTC]
 }
 
 /**
@@ -78,13 +78,13 @@ export const CUSTOM_BASES: { [chainId in ChainId]?: { [tokenAddress: string]: To
 // used for display in the default list when adding liquidity
 export const SUGGESTED_BASES: ChainTokenList = {
   ...WETH_ONLY,
-  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT]
+  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT, WBTC]
 }
 
 // used to construct the list of all pairs we consider by default in the frontend
 export const BASES_TO_TRACK_LIQUIDITY_FOR: ChainTokenList = {
   ...WETH_ONLY,
-  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT]
+  [ChainId.MAINNET]: [...WETH_ONLY[ChainId.MAINNET], DAI, USDC, USDT, WBTC]
 }
 
 export const PINNED_PAIRS: { readonly [chainId in ChainId]?: [Token, Token][] } = {