From 740de3df682a77268f02aa5f30fb591931135ef0 Mon Sep 17 00:00:00 2001
From: Kristie Huang <kristiehuang01@gmail.com>
Date: Wed, 3 Aug 2022 11:54:50 -0400
Subject: [PATCH 1/3] feat: refactor header and wallet connection

---
 src/components/Header.tsx     | 37 +++++++++++++++++++++++++++++------
 src/components/Swap/index.tsx | 26 ++----------------------
 src/index.tsx                 |  4 +++-
 3 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d87d6c0b0..c931287fc 100644
--- a/src/components/Header.tsx
+++ b/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,33 @@ const HeaderRow = styled(Row)`
 `
 
 export interface HeaderProps {
-  title?: ReactElement
-  children: ReactNode
+  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}>
+        <ThemedText.Subhead1>
+          <Trans>Swap</Trans>
+        </ThemedText.Subhead1>
+      </Row>
+      <Row gap={1}>
+        <Wallet disabled={props.hideConnectionUI} />
+        <Settings disabled={isDisabled} />
+      </Row>
     </HeaderRow>
   )
 }
diff --git a/src/components/Swap/index.tsx b/src/components/Swap/index.tsx
index aeed9a97b..8b477e255 100644
--- a/src/components/Swap/index.tsx
+++ b/src/components/Swap/index.tsx
@@ -1,8 +1,4 @@
-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'
@@ -10,17 +6,15 @@ 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}>
diff --git a/src/index.tsx b/src/index.tsx
index 6d7acc495..1b06dc8ad 100644
--- a/src/index.tsx
+++ b/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 {...props} />
       <Swap {...props} />
     </Widget>
   )

From d55db529b4b37f4667262f45369e46df2a03bdef Mon Sep 17 00:00:00 2001
From: Kristie Huang <kristiehuang01@gmail.com>
Date: Wed, 3 Aug 2022 12:00:01 -0400
Subject: [PATCH 2/3] use title for header title

---
 src/components/Header.tsx | 9 ++++++---
 src/index.tsx             | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c931287fc..a3e0bffcc 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -20,6 +20,7 @@ const HeaderRow = styled(Row)`
 `
 
 export interface HeaderProps {
+  title?: string
   hideConnectionUI?: boolean
   onConnectWalletClick?: () => void | Promise<boolean>
 }
@@ -39,9 +40,11 @@ export default function Header(props: HeaderProps) {
   return (
     <HeaderRow iconSize={1.2}>
       <Row gap={0.5}>
-        <ThemedText.Subhead1>
-          <Trans>Swap</Trans>
-        </ThemedText.Subhead1>
+        {props.title && (
+          <ThemedText.Subhead1>
+            <Trans>{props.title}</Trans>
+          </ThemedText.Subhead1>
+        )}
       </Row>
       <Row gap={1}>
         <Wallet disabled={props.hideConnectionUI} />
diff --git a/src/index.tsx b/src/index.tsx
index 1b06dc8ad..87bfd5e56 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -20,7 +20,7 @@ export type SwapWidgetProps = HeaderProps & SwapProps & WidgetProps
 export function SwapWidget(props: SwapWidgetProps) {
   return (
     <Widget {...props}>
-      <Header {...props} />
+      <Header title="Swap" {...props} />
       <Swap {...props} />
     </Widget>
   )

From 02dfaa8c00e8b187e283b12a1f1aa544d6679ce5 Mon Sep 17 00:00:00 2001
From: Kristie Huang <kristiehuang01@gmail.com>
Date: Wed, 3 Aug 2022 12:12:01 -0400
Subject: [PATCH 3/3] don't use title prop

---
 src/components/Header.tsx | 9 +++------
 src/index.tsx             | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a3e0bffcc..c931287fc 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -20,7 +20,6 @@ const HeaderRow = styled(Row)`
 `
 
 export interface HeaderProps {
-  title?: string
   hideConnectionUI?: boolean
   onConnectWalletClick?: () => void | Promise<boolean>
 }
@@ -40,11 +39,9 @@ export default function Header(props: HeaderProps) {
   return (
     <HeaderRow iconSize={1.2}>
       <Row gap={0.5}>
-        {props.title && (
-          <ThemedText.Subhead1>
-            <Trans>{props.title}</Trans>
-          </ThemedText.Subhead1>
-        )}
+        <ThemedText.Subhead1>
+          <Trans>Swap</Trans>
+        </ThemedText.Subhead1>
       </Row>
       <Row gap={1}>
         <Wallet disabled={props.hideConnectionUI} />
diff --git a/src/index.tsx b/src/index.tsx
index 87bfd5e56..1b06dc8ad 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -20,7 +20,7 @@ export type SwapWidgetProps = HeaderProps & SwapProps & WidgetProps
 export function SwapWidget(props: SwapWidgetProps) {
   return (
     <Widget {...props}>
-      <Header title="Swap" {...props} />
+      <Header {...props} />
       <Swap {...props} />
     </Widget>
   )