feat(widgets): move uniswap protocol branding from header to bottom of output (#3194)

* move branding from header to bottom of output

* remove old prop

* BrandingFooter component

* pr feedback

src/lib/components/BrandedFooter.tsx

@@ -0,0 +1,38 @@
+import { Trans } from '@lingui/macro'
+import Row from 'lib/components/Row'
+import { Logo } from 'lib/icons'
+import styled, { ThemedText } from 'lib/theme'
+
+import ExternalLink from './ExternalLink'
+
+const UniswapA = styled(ExternalLink)`
+  color: ${({ theme }) => theme.secondary};
+  cursor: pointer;
+  text-decoration: none;
+
+  ${Logo} {
+    fill: ${({ theme }) => theme.secondary};
+    height: 1em;
+    transition: transform 0.25s ease;
+    width: 1em;
+    will-change: transform;
+
+    :hover {
+      fill: ${({ theme }) => theme.onHover(theme.secondary)};
+      transform: rotate(-5deg);
+    }
+  }
+`
+
+export default function BrandedFooter() {
+  return (
+    <UniswapA href={`https://app.uniswap.org/`}>
+      <Row gap={0.4} justify="center">
+        <Logo />
+        <ThemedText.Caption color="secondary">
+          <Trans>Powered by the Uniswap protocol</Trans>
+        </ThemedText.Caption>
+      </Row>
+    </UniswapA>
+  )
+}

src/lib/components/ExternalLink.tsx

@@ -0,0 +1,17 @@
+import { HTMLProps } from 'react'
+
+/**
+ * Outbound link
+ */
+export default function ExternalLink({
+  target = '_blank',
+  href,
+  rel = 'noopener noreferrer',
+  ...rest
+}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
+  return (
+    <a target={target} rel={rel} href={href} {...rest}>
+      {rest.children}
+    </a>
+  )
+}

src/lib/components/Header.tsx

@@ -1,26 +1,9 @@
-import { largeIconCss, Logo } from 'lib/icons'
+import { largeIconCss } from 'lib/icons'
 import styled, { ThemedText } from 'lib/theme'
 import { ReactElement, ReactNode } from 'react'
 
 import Row from './Row'
 
-const UniswapA = styled.a`
-  cursor: pointer;
-
-  ${Logo} {
-    fill: ${({ theme }) => theme.secondary};
-    height: 1.5em;
-    transition: transform 0.25s ease;
-    width: 1.5em;
-    will-change: transform;
-
-    :hover {
-      fill: ${({ theme }) => theme.onHover(theme.secondary)};
-      transform: rotate(-5deg);
-    }
-  }
-`
-
 const HeaderRow = styled(Row)`
   height: 1.75em;
   margin: 0 0.75em 0.75em;
@@ -30,21 +13,13 @@ const HeaderRow = styled(Row)`
 
 export interface HeaderProps {
   title?: ReactElement
-  logo?: boolean
   children: ReactNode
 }
 
-export default function Header({ title, logo, children }: HeaderProps) {
+export default function Header({ title, children }: HeaderProps) {
   return (
     <HeaderRow iconSize={1.2}>
-      <Row gap={0.5}>
+      <Row gap={0.5}>{title && <ThemedText.Subhead1>{title}</ThemedText.Subhead1>}</Row>
-        {logo && (
-          <UniswapA href={`https://app.uniswap.org/`}>
-            <Logo />
-          </UniswapA>
-        )}
-        {title && <ThemedText.Subhead1>{title}</ThemedText.Subhead1>}
-      </Row>
       <Row gap={1}>{children}</Row>
     </HeaderRow>
   )

src/lib/components/Swap/Output.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import { useUSDCValue } from 'hooks/useUSDCPrice'
 import { atom } from 'jotai'
 import { useAtomValue } from 'jotai/utils'
+import BrandedFooter from 'lib/components/BrandedFooter'
 import { useSwapAmount, useSwapCurrency, useSwapInfo } from 'lib/hooks/swap'
 import useCurrencyColor from 'lib/hooks/useCurrencyColor'
 import { Field } from 'lib/state/swap'
@@ -101,6 +102,7 @@ export default function Output({ disabled, children }: OutputProps) {
           </ThemedText.Body2>
         </TokenInput>
         {children}
+        <BrandedFooter />
       </OutputColumn>
     </DynamicThemeProvider>
   )

src/lib/components/Swap/index.tsx

@@ -59,7 +59,7 @@ export default function Swap(props: SwapProps) {
   return (
     <SwapPropValidator {...props}>
       <SwapInfoUpdater />
-      <Header logo title={<Trans>Swap</Trans>}>
+      <Header title={<Trans>Swap</Trans>}>
         {active && <Wallet disabled={!account} />}
         <Settings disabled={!active} />
       </Header>

src/lib/components/Widget.tsx

@@ -39,7 +39,7 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
   font-size: 16px;
   font-smooth: always;
   font-variant: none;
-  height: 348px;
+  height: 376px;
   min-width: 300px;
   overflow-y: hidden;
   padding: 0.25em;