diff --git a/src/lib/components/BrandedFooter.tsx b/src/lib/components/BrandedFooter.tsx
new file mode 100644
index 0000000000..0b95770c40
--- /dev/null
+++ b/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 (
+
+
+
+
+ Powered by the Uniswap protocol
+
+
+
+ )
+}
diff --git a/src/lib/components/ExternalLink.tsx b/src/lib/components/ExternalLink.tsx
new file mode 100644
index 0000000000..f7171c49b6
--- /dev/null
+++ b/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, 'as' | 'ref' | 'onClick'> & { href: string }) {
+ return (
+
+ {rest.children}
+
+ )
+}
diff --git a/src/lib/components/Header.tsx b/src/lib/components/Header.tsx
index 089696ef42..9b267a5746 100644
--- a/src/lib/components/Header.tsx
+++ b/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 (
-
- {logo && (
-
-
-
- )}
- {title && {title}}
-
+ {title && {title}}
{children}
)
diff --git a/src/lib/components/Swap/Output.tsx b/src/lib/components/Swap/Output.tsx
index f22763eebc..8e2196055e 100644
--- a/src/lib/components/Swap/Output.tsx
+++ b/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) {
{children}
+
)
diff --git a/src/lib/components/Swap/index.tsx b/src/lib/components/Swap/index.tsx
index 82c5c95152..325b139012 100644
--- a/src/lib/components/Swap/index.tsx
+++ b/src/lib/components/Swap/index.tsx
@@ -59,7 +59,7 @@ export default function Swap(props: SwapProps) {
return (
- Swap}>
+
diff --git a/src/lib/components/Widget.tsx b/src/lib/components/Widget.tsx
index ca8fef263b..c604eb9df5 100644
--- a/src/lib/components/Widget.tsx
+++ b/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;