refactor: pull header & wallet components out of Swap component

src/components/Header.tsx

@@ -1,9 +1,16 @@
+import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
+import useOnSupportedNetwork from 'hooks/useOnSupportedNetwork'
 import { largeIconCss } from 'icons'
-import { ReactElement, ReactNode } from 'react'
+import { useAtom } from 'jotai'
+import { useEffect } from 'react'
+import { onConnectWalletClickAtom } from 'state/swap'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
+import Wallet from './ConnectWallet'
 import Row from './Row'
+import Settings from './Swap/Settings'
 
 const HeaderRow = styled(Row)`
   height: 1.75em;
@@ -13,15 +20,36 @@ const HeaderRow = styled(Row)`
 `
 
 export interface HeaderProps {
-  title?: ReactElement
-  children: ReactNode
+  title?: string
+  hideConnectionUI?: boolean
+  onConnectWalletClick?: () => void | Promise<boolean>
 }
 
-export default function Header({ title, children }: HeaderProps) {
+export default function Header(props: HeaderProps) {
+  const { isActive } = useWeb3React()
+  const onSupportedNetwork = useOnSupportedNetwork()
+  const isDisabled = !(isActive && onSupportedNetwork)
+
+  const [onConnectWalletClick, setOnConnectWalletClick] = useAtom(onConnectWalletClickAtom)
+  useEffect(() => {
+    if (props.onConnectWalletClick !== onConnectWalletClick) {
+      setOnConnectWalletClick((old: (() => void | Promise<boolean>) | undefined) => (old = props.onConnectWalletClick))
+    }
+  }, [props.onConnectWalletClick, onConnectWalletClick, setOnConnectWalletClick])
+
   return (
     <HeaderRow iconSize={1.2}>
-      <Row gap={0.5}>{title && <ThemedText.Subhead1>{title}</ThemedText.Subhead1>}</Row>
-      <Row gap={1}>{children}</Row>
+      <Row gap={0.5}>
+        {props.title && (
+          <ThemedText.Subhead1>
+            <Trans>{props.title}</Trans>
+          </ThemedText.Subhead1>
+        )}
+      </Row>
+      <Row gap={1}>
+        <Wallet disabled={props.hideConnectionUI} />
+        <Settings disabled={isDisabled} />
+      </Row>
     </HeaderRow>
   )
 }

src/components/Swap/index.tsx

@@ -1,26 +1,20 @@
-import { JsonRpcProvider } from '@ethersproject/providers'
-import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import { Provider as Eip1193Provider } from '@web3-react/types'
-import Wallet from 'components/ConnectWallet'
 import { SwapInfoProvider } from 'hooks/swap/useSwapInfo'
 import useSyncConvenienceFee, { FeeOptions } from 'hooks/swap/useSyncConvenienceFee'
 import useSyncTokenDefaults, { TokenDefaults } from 'hooks/swap/useSyncTokenDefaults'
 import { usePendingTransactions } from 'hooks/transactions'
 import useHasFocus from 'hooks/useHasFocus'
 import useOnSupportedNetwork from 'hooks/useOnSupportedNetwork'
 import { useAtom } from 'jotai'
-import { useEffect, useState } from 'react'
-import { displayTxHashAtom, onConnectWalletClickAtom } from 'state/swap'
+import { useState } from 'react'
+import { displayTxHashAtom } from 'state/swap'
 import { SwapTransactionInfo, Transaction, TransactionType, WrapTransactionInfo } from 'state/transactions'
 
 import Dialog from '../Dialog'
-import Header from '../Header'
 import { BoundaryProvider } from '../Popover'
 import Input from './Input'
 import Output from './Output'
 import ReverseButton from './ReverseButton'
-import Settings from './Settings'
 import { StatusDialog } from './Status'
 import SwapButton from './SwapButton'
 import Toolbar from './Toolbar'
@@ -42,13 +36,8 @@ function getTransactionFromMap(
   return
 }
 
-// SwapProps also currently includes props needed for wallet connection, since the wallet connection component exists within the Swap component
-// TODO(kristiehuang): refactor WalletConnection outside of Swap component
 export interface SwapProps extends TokenDefaults, FeeOptions {
-  hideConnectionUI?: boolean
-  provider?: Eip1193Provider | JsonRpcProvider
   routerUrl?: string
-  onConnectWalletClick?: () => void | Promise<boolean>
 }
 
 export default function Swap(props: SwapProps) {
@@ -68,19 +57,8 @@ export default function Swap(props: SwapProps) {
 
   const focused = useHasFocus(wrapper)
 
-  const [onConnectWalletClick, setOnConnectWalletClick] = useAtom(onConnectWalletClickAtom)
-  useEffect(() => {
-    if (props.onConnectWalletClick !== onConnectWalletClick) {
-      setOnConnectWalletClick((old: (() => void | Promise<boolean>) | undefined) => (old = props.onConnectWalletClick))
-    }
-  }, [props.onConnectWalletClick, onConnectWalletClick, setOnConnectWalletClick])
-
   return (
     <>
-      <Header title={<Trans>Swap</Trans>}>
-        <Wallet disabled={props.hideConnectionUI} />
-        <Settings disabled={isDisabled} />
-      </Header>
       <div ref={setWrapper}>
         <BoundaryProvider value={wrapper}>
           <SwapInfoProvider disabled={isDisabled} routerUrl={props.routerUrl}>

src/index.tsx

@@ -1,5 +1,6 @@
 import 'polyfills'
 
+import Header, { HeaderProps } from 'components/Header'
 import Swap, { SwapProps } from 'components/Swap'
 import Widget, { WidgetProps } from 'components/Widget'
 export type { Provider as EthersProvider } from '@ethersproject/abstract-provider'
@@ -14,11 +15,12 @@ export type { DefaultAddress, TokenDefaults } from 'hooks/swap/useSyncTokenDefau
 export type { Theme } from 'theme'
 export { darkTheme, defaultTheme, lightTheme } from 'theme'
 
-export type SwapWidgetProps = SwapProps & WidgetProps
+export type SwapWidgetProps = HeaderProps & SwapProps & WidgetProps
 
 export function SwapWidget(props: SwapWidgetProps) {
   return (
     <Widget {...props}>
+      <Header title="Swap" {...props} />
       <Swap {...props} />
     </Widget>
   )