feat: better error page (#5536)

* initial commit

* wrap up styling

* feat: add eventId

* chore: finialise design

* chore: simplify css

* feat: use grids from theme and font family

package.json

@@ -132,7 +132,7 @@
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
-    "@sentry/react": "^7.23.0",
+    "@sentry/react": "7.20.1",
     "@types/react-relay": "^13.0.2",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "1.2.0",

src/components/Column/index.tsx

-import styled from 'styled-components/macro'
+import styled, { DefaultTheme } from 'styled-components/macro'
 
-const Column = styled.div`
+type Gap = keyof DefaultTheme['grids']
+
+export const Column = styled.div<{
+  gap?: Gap
+}>`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  gap: ${({ gap, theme }) => gap && theme.grids[gap]};
 `
 export const ColumnCenter = styled(Column)`
   width: 100%;
@@ -11,12 +16,12 @@ export const ColumnCenter = styled(Column)`
 `
 
 export const AutoColumn = styled.div<{
-  gap?: 'sm' | 'md' | 'lg' | string
+  gap?: Gap | string
   justify?: 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'space-between'
 }>`
   display: grid;
   grid-auto-rows: auto;
-  grid-row-gap: ${({ gap }) => (gap === 'sm' && '8px') || (gap === 'md' && '12px') || (gap === 'lg' && '24px') || gap};
+  grid-row-gap: ${({ gap, theme }) => (gap && theme.grids[gap as Gap]) || gap};
   justify-items: ${({ justify }) => justify && justify};
 `
 

src/components/ErrorBoundary/index.tsx

 import { Trans } from '@lingui/macro'
 import * as Sentry from '@sentry/react'
-import React, { PropsWithChildren } from 'react'
+import { ButtonLight, ButtonPrimary } from 'components/Button'
+import { ChevronUpIcon } from 'nft/components/icons'
+import { useIsMobile } from 'nft/hooks'
+import React, { PropsWithChildren, useState } from 'react'
+import { Copy } from 'react-feather'
 import styled from 'styled-components/macro'
 
-import { ExternalLink, ThemedText } from '../../theme'
-import { AutoColumn } from '../Column'
-import { AutoRow } from '../Row'
+import { CopyToClipboard, ExternalLink, ThemedText } from '../../theme'
+import { Column } from '../Column'
 
 const FallbackWrapper = styled.div`
   display: flex;
-  flex-direction: column;
-  width: 100%;
-  align-items: center;
-  z-index: 1;
+  width: 100vw;
+  height: 100vh;
 `
 
 const BodyWrapper = styled.div<{ margin?: string }>`
+  width: 100%;
+  max-width: 500px;
+  margin: auto;
   padding: 1rem;
+`
+
+const SmallButtonPrimary = styled(ButtonPrimary)`
+  width: auto;
+  font-size: 16px;
+  padding: 10px 16px;
+  border-radius: 12px;
+`
+
+const SmallButtonLight = styled(ButtonLight)`
+  font-size: 16px;
+  padding: 10px 16px;
+  border-radius: 12px;
+`
+
+const StretchedRow = styled.div`
+  display: flex;
+  gap: 24px;
+
+  > * {
+    display: flex;
+    flex: 1;
+  }
+`
+
+const Code = styled.code`
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 16px;
+  word-wrap: break-word;
   width: 100%;
+  color: ${({ theme }) => theme.textPrimary};
+  font-family: ${({ theme }) => theme.fonts.code};
+  overflow: scroll;
+  max-height: calc(100vh - 450px);
+`
+
+const Separator = styled.div`
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
 `
 
 const CodeBlockWrapper = styled.div`
-  background: ${({ theme }) => theme.deprecated_bg0};
-  overflow: auto;
-  white-space: pre;
+  display: flex;
+  flex-direction: column;
+  background: ${({ theme }) => theme.backgroundModule};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 24px;
-  padding: 18px 24px;
-  color: ${({ theme }) => theme.deprecated_text1};
+  padding: 24px;
+  gap: 10px;
+  color: ${({ theme }) => theme.textPrimary};
+`
+
+const ShowMoreButton = styled.div`
+  display: flex;
+  cursor: pointer;
+  justify-content: space-between;
+`
+
+const CopyIcon = styled(Copy)`
+  stroke: ${({ theme }) => theme.textSecondary};
 `
 
-const Padding = styled.div`
-  padding: 6px 24px;
+const ShowMoreIcon = styled(ChevronUpIcon)<{ $isExpanded?: boolean }>`
+  transform: ${({ $isExpanded }) => ($isExpanded ? 'none' : 'rotate(180deg)')};
 `
 
-const Fallback = ({ error }: { error: Error }) => {
+const CodeTitle = styled.div`
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  word-break: break-word;
+`
+
+const Fallback = ({ error, eventId }: { error: Error; eventId: string | null }) => {
+  const [isExpanded, setExpanded] = useState(false)
+  const isMobile = useIsMobile()
+
+  const errorId = eventId || 'unknown-error'
+
+  // @todo: ThemedText components should be responsive by default
+  const [Title, Description] = isMobile
+    ? [ThemedText.HeadlineSmall, ThemedText.BodySmall]
+    : [ThemedText.HeadlineLarge, ThemedText.BodySecondary]
+
   return (
     <FallbackWrapper>
       <BodyWrapper>
-        <AutoColumn gap="md">
-          <Padding>
-            <ThemedText.DeprecatedLabel fontSize={24} fontWeight={600}>
+        <Column gap="xl">
+          <Column gap="sm">
+            <Title textAlign="center">
               <Trans>Something went wrong</Trans>
-            </ThemedText.DeprecatedLabel>
-          </Padding>
+            </Title>
+            <Description textAlign="center" color="textSecondary">
+              <Trans>
+                Sorry, an error occured while processing your request. If you request support, be sure to provide your
+                error ID.
+              </Trans>
+            </Description>
+          </Column>
           <CodeBlockWrapper>
-            <code>
-              <ThemedText.DeprecatedMain fontSize={10}>{error.stack}</ThemedText.DeprecatedMain>
-            </code>
+            <CodeTitle>
+              <ThemedText.SubHeader fontWeight={500}>Error ID: {errorId}</ThemedText.SubHeader>
+              <CopyToClipboard toCopy={errorId}>
+                <CopyIcon />
+              </CopyToClipboard>
+            </CodeTitle>
+            <Separator />
+            {isExpanded && (
+              <>
+                <Code>{error.stack}</Code>
+                <Separator />
+              </>
+            )}
+            <ShowMoreButton onClick={() => setExpanded((s) => !s)}>
+              <ThemedText.Link color="textSecondary">
+                <Trans>{isExpanded ? 'Show less' : 'Show more'}</Trans>
+              </ThemedText.Link>
+              <ShowMoreIcon $isExpanded={isExpanded} secondaryWidth="20" secondaryHeight="20" />
+            </ShowMoreButton>
           </CodeBlockWrapper>
-          <AutoRow>
-            <Padding>
-              <ExternalLink id="get-support-on-discord" href="https://discord.gg/FCfyBSbCU5" target="_blank">
-                <ThemedText.DeprecatedLink fontSize={16} color="deprecated_blue1">
-                  <Trans>Get support on Discord</Trans>
-                  <span>↗</span>
-                </ThemedText.DeprecatedLink>
-              </ExternalLink>
-            </Padding>
-          </AutoRow>
-        </AutoColumn>
+          <StretchedRow>
+            <SmallButtonPrimary onClick={() => window.location.reload()}>
+              <Trans>Reload the app</Trans>
+            </SmallButtonPrimary>
+            <ExternalLink id="get-support-on-discord" href="https://discord.gg/FCfyBSbCU5" target="_blank">
+              <SmallButtonLight>
+                <Trans>Get support</Trans>
+              </SmallButtonLight>
+            </ExternalLink>
+          </StretchedRow>
+        </Column>
       </BodyWrapper>
     </FallbackWrapper>
   )
@@ -73,7 +165,7 @@ async function updateServiceWorker(): Promise<ServiceWorkerRegistration> {
   return ready.update() as unknown as Promise<ServiceWorkerRegistration>
 }
 
-const reloadIfUpdateAvailable = async () => {
+const updateServiceWorkerInBackground = async () => {
   try {
     const registration = await updateServiceWorker()
 
@@ -85,8 +177,6 @@ const reloadIfUpdateAvailable = async () => {
       // Makes Workbox call skipWaiting().
       // For more info on skipWaiting see: https://web.dev/service-worker-lifecycle/#skip-the-waiting-phase
       registration.waiting.postMessage({ type: 'SKIP_WAITING' })
-
-      window.location.reload()
     }
   } catch (error) {
     console.error('Failed to update service worker', error)
@@ -96,11 +186,11 @@ const reloadIfUpdateAvailable = async () => {
 export default function ErrorBoundary({ children }: PropsWithChildren): JSX.Element {
   return (
     <Sentry.ErrorBoundary
-      fallback={Fallback}
+      fallback={({ error, eventId }) => <Fallback error={error} eventId={eventId} />}
       beforeCapture={(scope) => {
         scope.setLevel('fatal')
       }}
-      onError={reloadIfUpdateAvailable}
+      onError={updateServiceWorkerInBackground}
     >
       {children}
     </Sentry.ErrorBoundary>

src/components/Popups/FailedNetworkSwitchPopup.tsx

@@ -21,7 +21,7 @@ export default function FailedNetworkSwitchPopup({ chainId }: { chainId: Support
       <div style={{ paddingRight: 16 }}>
         <AlertCircle color={theme.deprecated_red1} size={24} />
       </div>
-      <AutoColumn gap="8px">
+      <AutoColumn gap="sm">
         <ThemedText.DeprecatedBody fontWeight={500}>
           <Trans>
             Failed to switch networks from the Uniswap Interface. In order to use Uniswap on {chainInfo.label}, you must

src/components/PositionCard/Sushi.tsx

@@ -41,7 +41,7 @@ export default function SushiPositionCard({ tokenA, tokenB, liquidityToken, bord
   return (
     <StyledPositionCard border={border} bgColor={backgroundColor}>
       <CardNoise />
-      <AutoColumn gap="12px">
+      <AutoColumn gap="md">
         <FixedHeightRow>
           <AutoRow gap="8px">
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />

src/components/PositionCard/V2.tsx

@@ -79,7 +79,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
   return (
     <StyledPositionCard border={border} bgColor={backgroundColor}>
       <CardNoise />
-      <AutoColumn gap="12px">
+      <AutoColumn gap="md">
         <FixedHeightRow>
           <AutoRow gap="8px">
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
@@ -116,7 +116,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
         </FixedHeightRow>
 
         {showMore && (
-          <AutoColumn gap="8px">
+          <AutoColumn gap="sm">
             <FixedHeightRow>
               <Text fontSize={16} fontWeight={500}>
                 <Trans>Your total pool tokens:</Trans>

src/components/PositionCard/index.tsx

@@ -79,7 +79,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
     <>
       {userPoolBalance && JSBI.greaterThan(userPoolBalance.quotient, JSBI.BigInt(0)) ? (
         <GrayCard border={border}>
-          <AutoColumn gap="12px">
+          <AutoColumn gap="md">
             <FixedHeightRow>
               <RowFixed>
                 <Text fontWeight={500} fontSize={16}>
@@ -195,7 +195,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
   return (
     <StyledPositionCard border={border} bgColor={backgroundColor}>
       <CardNoise />
-      <AutoColumn gap="12px">
+      <AutoColumn gap="md">
         <FixedHeightRow>
           <AutoRow gap="8px" style={{ marginLeft: '8px' }}>
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
@@ -227,7 +227,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
         </FixedHeightRow>
 
         {showMore && (
-          <AutoColumn gap="8px">
+          <AutoColumn gap="sm">
             <FixedHeightRow>
               <Text fontSize={16} fontWeight={500}>
                 <Trans>Your total pool tokens:</Trans>

src/components/PrivacyPolicy/index.tsx

@@ -95,7 +95,7 @@ export function PrivacyPolicyModal() {
 
   return (
     <Modal isOpen={open} onDismiss={() => toggle()}>
-      <AutoColumn gap="12px" ref={node as any}>
+      <AutoColumn gap="md" ref={node as any}>
         <RowBetween padding="1rem 1rem 0.5rem 1rem">
           <ThemedText.DeprecatedMediumHeader>
             <Trans>Legal & Privacy</Trans>
@@ -122,7 +122,7 @@ function PrivacyPolicy() {
       }}
     >
       <AutoColumn gap="16px">
-        <AutoColumn gap="8px" style={{ width: '100%' }}>
+        <AutoColumn gap="sm" style={{ width: '100%' }}>
           <StyledExternalCard>
             <ExternalLink href="https://uniswap.org/terms-of-service">
               <RowBetween>
@@ -153,10 +153,10 @@ function PrivacyPolicy() {
         <ThemedText.DeprecatedMain fontSize={14}>
           <Trans>This app uses the following third-party APIs:</Trans>
         </ThemedText.DeprecatedMain>
-        <AutoColumn gap="12px">
+        <AutoColumn gap="md">
           {EXTERNAL_APIS.map(({ name, description }, i) => (
             <DarkGrayCard key={i}>
-              <AutoColumn gap="8px">
+              <AutoColumn gap="sm">
                 <AutoRow gap="4px">
                   <Info size={18} />
                   <ThemedText.DeprecatedMain fontSize={14} color="deprecated_text1">

src/components/TransactionConfirmationModal/index.tsx

@@ -73,7 +73,7 @@ function ConfirmationPendingContent({
         <ConfirmedIcon inline={inline}>
           <CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
         </ConfirmedIcon>
-        <AutoColumn gap="12px" justify="center">
+        <AutoColumn gap="md" justify="center">
           <Text fontWeight={500} fontSize={20} color={theme.textPrimary} textAlign="center">
             <Trans>Waiting for confirmation</Trans>
           </Text>
@@ -135,7 +135,7 @@ function TransactionSubmittedContent({
         <ConfirmedIcon inline={inline}>
           <ArrowUpCircle strokeWidth={1} size={inline ? '40px' : '75px'} color={theme.accentActive} />
         </ConfirmedIcon>
-        <AutoColumn gap="12px" justify="center" style={{ paddingBottom: '12px' }}>
+        <AutoColumn gap="md" justify="center" style={{ paddingBottom: '12px' }}>
           <ThemedText.MediumHeader textAlign="center">
             <Trans>Transaction submitted</Trans>
           </ThemedText.MediumHeader>
@@ -276,7 +276,7 @@ function L2Content({
             <CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
           )}
         </ConfirmedIcon>
-        <AutoColumn gap="12px" justify="center">
+        <AutoColumn gap="md" justify="center">
           <Text fontWeight={500} fontSize={20} textAlign="center">
             {!hash ? (
               <Trans>Confirm transaction in wallet</Trans>

src/components/claim/AddressClaimModal.tsx

@@ -156,7 +156,7 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
             )}
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
-            <AutoColumn gap="12px" justify="center">
+            <AutoColumn gap="md" justify="center">
               <ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
                 {claimConfirmed ? <Trans>Claimed</Trans> : <Trans>Claiming</Trans>}
               </ThemedText.DeprecatedLargeHeader>

src/components/claim/ClaimModal.tsx

@@ -184,7 +184,7 @@ export default function ClaimModal() {
             )}
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
-            <AutoColumn gap="12px" justify="center">
+            <AutoColumn gap="md" justify="center">
               <ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
                 {claimConfirmed ? <Trans>Claimed!</Trans> : <Trans>Claiming</Trans>}
               </ThemedText.DeprecatedLargeHeader>

src/components/earn/ClaimRewardModal.tsx

@@ -88,9 +88,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
           </RowBetween>
           {stakingInfo?.earnedAmount && (
             <AutoColumn justify="center" gap="md">
-              <ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
-                {stakingInfo?.earnedAmount?.toSignificant(6)}
-              </ThemedText.DeprecatedBody>
+              <ThemedText.HeadlineLarge>{stakingInfo?.earnedAmount?.toSignificant(6)}</ThemedText.HeadlineLarge>
               <ThemedText.DeprecatedBody>
                 <Trans>Unclaimed UNI</Trans>
               </ThemedText.DeprecatedBody>
@@ -106,7 +104,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
       )}
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>Claiming {stakingInfo?.earnedAmount?.toSignificant(6)} UNI</Trans>
             </ThemedText.DeprecatedBody>
@@ -115,7 +113,7 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
       )}
       {hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <ThemedText.DeprecatedLargeHeader>
               <Trans>Transaction Submitted</Trans>
             </ThemedText.DeprecatedLargeHeader>

src/components/earn/StakingModal.tsx

@@ -222,7 +222,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
       )}
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <ThemedText.DeprecatedLargeHeader>
               <Trans>Depositing Liquidity</Trans>
             </ThemedText.DeprecatedLargeHeader>
@@ -234,7 +234,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
       )}
       {attempting && hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <ThemedText.DeprecatedLargeHeader>
               <Trans>Transaction Submitted</Trans>
             </ThemedText.DeprecatedLargeHeader>

src/components/earn/UnstakingModal.tsx

@@ -90,9 +90,9 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
           </RowBetween>
           {stakingInfo?.stakedAmount && (
             <AutoColumn justify="center" gap="md">
-              <ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
+              <ThemedText.HeadlineLarge>
                 <FormattedCurrencyAmount currencyAmount={stakingInfo.stakedAmount} />
-              </ThemedText.DeprecatedBody>
+              </ThemedText.HeadlineLarge>
               <ThemedText.DeprecatedBody>
                 <Trans>Deposited liquidity:</Trans>
               </ThemedText.DeprecatedBody>
@@ -100,9 +100,9 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
           )}
           {stakingInfo?.earnedAmount && (
             <AutoColumn justify="center" gap="md">
-              <ThemedText.DeprecatedBody fontWeight={600} fontSize={36}>
+              <ThemedText.HeadlineLarge>
                 <FormattedCurrencyAmount currencyAmount={stakingInfo?.earnedAmount} />
-              </ThemedText.DeprecatedBody>
+              </ThemedText.HeadlineLarge>
               <ThemedText.DeprecatedBody>
                 <Trans>Unclaimed UNI</Trans>
               </ThemedText.DeprecatedBody>
@@ -118,7 +118,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
       )}
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <ThemedText.DeprecatedBody fontSize={20}>
               <Trans>Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UNI-V2</Trans>
             </ThemedText.DeprecatedBody>
@@ -130,7 +130,7 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
       )}
       {hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <ThemedText.DeprecatedLargeHeader>
               <Trans>Transaction Submitted</Trans>
             </ThemedText.DeprecatedLargeHeader>

src/components/swap/AdvancedSwapDetails.tsx

@@ -64,7 +64,7 @@ export function AdvancedSwapDetails({
 
   return !trade ? null : (
     <StyledCard>
-      <AutoColumn gap="8px">
+      <AutoColumn gap="sm">
         <RowBetween>
           <RowFixed>
             <MouseoverTooltip

src/components/swap/PriceImpactWarning.tsx

@@ -24,7 +24,7 @@ export default function PriceImpactWarning({ priceImpact }: PriceImpactWarningPr
 
   return (
     <StyledCard>
-      <AutoColumn gap="8px">
+      <AutoColumn gap="sm">
         <MouseoverTooltip
           text={
             <Trans>

src/components/swap/SwapDetailsDropdown.tsx

@@ -129,7 +129,7 @@ export default function SwapDetailsDropdown({
 
   return (
     <Wrapper style={{ marginTop: '0' }}>
-      <AutoColumn gap="8px" style={{ width: '100%', marginBottom: '-8px' }}>
+      <AutoColumn gap="sm" style={{ width: '100%', marginBottom: '-8px' }}>
         <TraceEvent
           events={[BrowserEvent.onClick]}
           name={EventName.SWAP_DETAILS_EXPANDED}
@@ -201,7 +201,7 @@ export default function SwapDetailsDropdown({
           </StyledHeaderRow>
         </TraceEvent>
         <AnimatedDropdown open={showDetails}>
-          <AutoColumn gap="8px" style={{ padding: '0', paddingBottom: '8px' }}>
+          <AutoColumn gap="sm" style={{ padding: '0', paddingBottom: '8px' }}>
             {trade ? (
               <StyledCard>
                 <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />

src/components/swap/SwapModalHeader.tsx

@@ -101,7 +101,7 @@ export default function SwapModalHeader({
   return (
     <AutoColumn gap="4px" style={{ marginTop: '1rem' }}>
       <LightCard padding="0.75rem 1rem">
-        <AutoColumn gap="8px">
+        <AutoColumn gap="sm">
           <RowBetween align="center">
             <RowFixed gap="0px">
               <TruncatedText
@@ -128,7 +128,7 @@ export default function SwapModalHeader({
         <ArrowDown size="16" color={theme.textPrimary} />
       </ArrowWrapper>
       <LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
-        <AutoColumn gap="8px">
+        <AutoColumn gap="sm">
           <RowBetween align="flex-end">
             <RowFixed gap="0px">
               <TruncatedText fontSize={24} fontWeight={500}>

src/components/vote/DelegateModal.tsx

@@ -120,7 +120,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
       )}
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <ThemedText.DeprecatedLargeHeader>
               {usingDelegate ? <Trans>Delegating votes</Trans> : <Trans>Unlocking Votes</Trans>}
             </ThemedText.DeprecatedLargeHeader>
@@ -130,7 +130,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
       )}
       {hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <ThemedText.DeprecatedLargeHeader>
               <Trans>Transaction Submitted</Trans>
             </ThemedText.DeprecatedLargeHeader>

src/components/vote/ExecuteModal.tsx

@@ -109,7 +109,7 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
             <CustomLightSpinner src={Circle} alt="loader" size="90px" />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
-            <AutoColumn gap="12px" justify="center">
+            <AutoColumn gap="md" justify="center">
               <ThemedText.DeprecatedLargeHeader>
                 <Trans>Executing</Trans>
               </ThemedText.DeprecatedLargeHeader>
@@ -130,7 +130,7 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
             <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
-            <AutoColumn gap="12px" justify="center">
+            <AutoColumn gap="md" justify="center">
               <ThemedText.DeprecatedLargeHeader>
                 <Trans>Execution Submitted</Trans>
               </ThemedText.DeprecatedLargeHeader>

src/components/vote/QueueModal.tsx

@@ -109,7 +109,7 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
             <CustomLightSpinner src={Circle} alt="loader" size="90px" />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
-            <AutoColumn gap="12px" justify="center">
+            <AutoColumn gap="md" justify="center">
               <ThemedText.DeprecatedLargeHeader>
                 <Trans>Queueing</Trans>
               </ThemedText.DeprecatedLargeHeader>
@@ -130,7 +130,7 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
             <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
-            <AutoColumn gap="12px" justify="center">
+            <AutoColumn gap="md" justify="center">
               <ThemedText.DeprecatedLargeHeader>
                 <Trans>Transaction Submitted</Trans>
               </ThemedText.DeprecatedLargeHeader>

src/components/vote/VoteModal.tsx

@@ -123,7 +123,7 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
             <CustomLightSpinner src={Circle} alt="loader" size="90px" />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
-            <AutoColumn gap="12px" justify="center">
+            <AutoColumn gap="md" justify="center">
               <ThemedText.DeprecatedLargeHeader>
                 <Trans>Submitting Vote</Trans>
               </ThemedText.DeprecatedLargeHeader>
@@ -144,7 +144,7 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
             <ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify="center">
-            <AutoColumn gap="12px" justify="center">
+            <AutoColumn gap="md" justify="center">
               <ThemedText.DeprecatedLargeHeader>
                 <Trans>Transaction Submitted</Trans>
               </ThemedText.DeprecatedLargeHeader>

src/pages/AddLiquidity/index.tsx

@@ -849,7 +849,7 @@ export default function AddLiquidity() {
                                 border: '1px solid',
                               }}
                             >
-                              <AutoColumn gap="8px" style={{ height: '100%' }}>
+                              <AutoColumn gap="sm" style={{ height: '100%' }}>
                                 <RowFixed>
                                   <AlertTriangle stroke={theme.deprecated_yellow3} size="16px" />
                                   <ThemedText.DeprecatedYellow ml="12px" fontSize="15px">

src/pages/CreateProposal/ProposalSubmissionModal.tsx

@@ -24,7 +24,7 @@ export const ProposalSubmissionModal = ({
     <Modal isOpen={isOpen} onDismiss={onDismiss}>
       {!hash ? (
         <LoadingView onDismiss={onDismiss}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <ThemedText.DeprecatedLargeHeader>
               <Trans>Submitting Proposal</Trans>
             </ThemedText.DeprecatedLargeHeader>
@@ -32,7 +32,7 @@ export const ProposalSubmissionModal = ({
         </LoadingView>
       ) : (
         <SubmittedView onDismiss={onDismiss} hash={hash}>
-          <AutoColumn gap="12px" justify="center">
+          <AutoColumn gap="md" justify="center">
             <Text fontWeight={500} fontSize={20} textAlign="center">
               <Trans>Proposal Submitted</Trans>
             </Text>

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -76,7 +76,7 @@ function LiquidityInfo({
   const currency1 = unwrappedToken(token1Amount.currency)
 
   return (
-    <AutoColumn gap="8px">
+    <AutoColumn gap="sm">
       <RowBetween>
         <RowFixed>
           <CurrencyLogo size="20px" style={{ marginRight: '8px' }} currency={currency0} />
@@ -457,7 +457,7 @@ function V2PairMigration({
               </ThemedText.DeprecatedBody>
 
               {v2SpotPrice && (
-                <AutoColumn gap="8px" style={{ marginTop: '12px' }}>
+                <AutoColumn gap="sm" style={{ marginTop: '12px' }}>
                   <RowBetween>
                     <ThemedText.DeprecatedBody fontWeight={500} fontSize={14}>
                       <Trans>
@@ -475,7 +475,7 @@ function V2PairMigration({
 
           {largePriceDifference ? (
             <YellowCard>
-              <AutoColumn gap="8px">
+              <AutoColumn gap="sm">
                 <RowBetween>
                   <ThemedText.DeprecatedBody fontSize={14}>
                     <Trans>
@@ -603,9 +603,9 @@ function V2PairMigration({
             </DarkGrayCard>
           ) : null}
 
-          <AutoColumn gap="12px">
+          <AutoColumn gap="md">
             {!isSuccessfullyMigrated && !isMigrationPending ? (
-              <AutoColumn gap="12px" style={{ flex: '1' }}>
+              <AutoColumn gap="md" style={{ flex: '1' }}>
                 <ButtonConfirmed
                   confirmed={approval === ApprovalState.APPROVED || signatureData !== null}
                   disabled={
@@ -630,7 +630,7 @@ function V2PairMigration({
                 </ButtonConfirmed>
               </AutoColumn>
             ) : null}
-            <AutoColumn gap="12px" style={{ flex: '1' }}>
+            <AutoColumn gap="md" style={{ flex: '1' }}>
               <ButtonConfirmed
                 confirmed={isSuccessfullyMigrated}
                 disabled={

src/pages/Pool/PositionPage.tsx

@@ -173,7 +173,7 @@ function CurrentPriceCard({
 
   return (
     <LightCard padding="12px ">
-      <AutoColumn gap="8px" justify="center">
+      <AutoColumn gap="sm" justify="center">
         <ExtentsText>
           <Trans>Current price</Trans>
         </ExtentsText>
@@ -881,7 +881,7 @@ export function PositionPage() {
 
                 <RowBetween>
                   <LightCard padding="12px" width="100%">
-                    <AutoColumn gap="8px" justify="center">
+                    <AutoColumn gap="sm" justify="center">
                       <ExtentsText>
                         <Trans>Min price</Trans>
                       </ExtentsText>
@@ -905,7 +905,7 @@ export function PositionPage() {
 
                   <DoubleArrow>⟷</DoubleArrow>
                   <LightCard padding="12px" width="100%">
-                    <AutoColumn gap="8px" justify="center">
+                    <AutoColumn gap="sm" justify="center">
                       <ExtentsText>
                         <Trans>Max price</Trans>
                       </ExtentsText>

src/pages/RemoveLiquidity/V3.tsx

@@ -410,7 +410,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               )}
 
               <div style={{ display: 'flex' }}>
-                <AutoColumn gap="12px" style={{ flex: '1' }}>
+                <AutoColumn gap="md" style={{ flex: '1' }}>
                   <ButtonConfirmed
                     confirmed={false}
                     disabled={removed || percent === 0 || !liquidityValue0}

src/pages/Swap/index.tsx

@@ -189,7 +189,6 @@ export default function Swap() {
 
   // for expert mode
   const [isExpertMode] = useExpertModeManager()
-
   // swap state
   const { independentField, typedValue, recipient } = useSwapState()
   const {
@@ -496,7 +495,6 @@ export default function Swap() {
   const showDetailsDropdown = Boolean(
     !showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing)
   )
-
   return (
     <Trace page={PageName.SWAP_PAGE} shouldLogImpression>
       <>
@@ -578,7 +576,7 @@ export default function Swap() {
                 </TraceEvent>
               </ArrowWrapper>
             </div>
-            <AutoColumn gap="12px">
+            <AutoColumn gap="md">
               <div>
                 <OutputSwapSection showDetailsDropdown={showDetailsDropdown}>
                   <Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>

src/theme/components/index.tsx

@@ -2,7 +2,15 @@ import { Trans } from '@lingui/macro'
 import { outboundLink } from 'components/analytics'
 import { MOBILE_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
 import useCopyClipboard from 'hooks/useCopyClipboard'
-import React, { forwardRef, HTMLProps, ReactNode, useCallback, useImperativeHandle, useState } from 'react'
+import React, {
+  forwardRef,
+  HTMLProps,
+  PropsWithChildren,
+  ReactNode,
+  useCallback,
+  useImperativeHandle,
+  useState,
+} from 'react'
 import {
   ArrowLeft,
   CheckCircle,
@@ -250,19 +258,27 @@ const CopyIconWrapper = styled.div`
   display: flex;
 `
 
-export function CopyLinkIcon({ toCopy }: { toCopy: string }) {
+export function CopyToClipboard({ toCopy, children }: PropsWithChildren<{ toCopy: string }>) {
   const [isCopied, setCopied] = useCopyClipboard()
   const copy = useCallback(() => {
     setCopied(toCopy)
   }, [toCopy, setCopied])
   return (
     <CopyIconWrapper onClick={copy}>
-      <CopyIcon />
+      {children}
       {isCopied && <Tooltip isCopyContractTooltip={false} />}
     </CopyIconWrapper>
   )
 }
 
+export function CopyLinkIcon({ toCopy }: { toCopy: string }) {
+  return (
+    <CopyToClipboard toCopy={toCopy}>
+      <CopyIcon />
+    </CopyToClipboard>
+  )
+}
+
 const FullAddress = styled.span`
   @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
     display: none;

src/theme/components/text.tsx

@@ -31,6 +31,9 @@ export const ThemedText = {
   HeadlineSmall(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={20} lineHeight="28px" color="textPrimary" {...props} />
   },
+  HeadlineLarge(props: TextProps) {
+    return <TextWrapper fontWeight={600} fontSize={36} lineHeight="44px" color="textPrimary" {...props} />
+  },
   LargeHeader(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={36} color="textPrimary" {...props} />
   },
@@ -41,6 +44,7 @@ export const ThemedText = {
     return <TextWrapper fontWeight={400} fontSize={20} color="textPrimary" {...props} />
   },
   SubHeader(props: TextProps) {
+    // @todo designs use `fontWeight: 500` and we currently have a mix of 600 and 500
     return <TextWrapper fontWeight={600} fontSize={16} color="textPrimary" {...props} />
   },
   SubHeaderSmall(props: TextProps) {

src/theme/index.tsx

@@ -49,6 +49,10 @@ const opacities = {
   enabled: 1,
 }
 
+const fonts = {
+  code: 'courier, courier new, serif',
+}
+
 const deprecated_mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(
   MEDIA_WIDTHS
 ).reduce((accumulator, size) => {
@@ -63,10 +67,12 @@ const deprecated_mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: ty
 function getSettings(darkMode: boolean) {
   return {
     grids: {
-      sm: 8,
-      md: 12,
-      lg: 24,
+      sm: '8px',
+      md: '12px',
+      lg: '24px',
+      xl: '32px',
     },
+    fonts,
 
     // shadows
     shadow1: darkMode ? '#000' : '#2F80ED',

yarn.lock

@@ -2974,47 +2974,47 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@sentry/browser@7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.23.0.tgz#ca2a01ce2b00727036906158efaa1c7af1395cc0"
-  integrity sha512-2/dLGOSaM5AvlRdMgYxDyxPxkUUqYyxF7QZ0NicdIXkKXa0fM38IdibeXrE8XzC7rF2B7DQZ6U7uDb1Yry60ig==
-  dependencies:
-    "@sentry/core" "7.23.0"
-    "@sentry/types" "7.23.0"
-    "@sentry/utils" "7.23.0"
+"@sentry/browser@7.20.1":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.20.1.tgz#bce606db24fa02fb72e71187e510ff890f8be903"
+  integrity sha512-SE6mI4LkMzjEi5KB02Py24e2bKYZc/HZI/ZlTn36BuUQX/KYhzzKwzXucOJ5Qws9Ar9CViyKJDb07LxVQLYCGw==
+  dependencies:
+    "@sentry/core" "7.20.1"
+    "@sentry/types" "7.20.1"
+    "@sentry/utils" "7.20.1"
     tslib "^1.9.3"
 
-"@sentry/core@7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.23.0.tgz#d320b2b6e5620b41f345bc01d69b547cdf28f78d"
-  integrity sha512-oNLGsscSdMs1urCbpwe868NsoJWyeTOQXOm5w2e78yE7G6zm2Ra473NQio3lweaEvjQgSGpFyEfAn/3ubZbtPw==
+"@sentry/core@7.20.1":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.20.1.tgz#b06f36dddba96e2cc7dfa2d24cb72ff39ecd7a59"
+  integrity sha512-Sc7vtNgO4QcE683qrR+b+KFQkkhvQv7gizN46QQPOWeqLDrai7x0+NspTFDLJyvdDuDh2rjoLfRwNsgbwe7Erw==
   dependencies:
-    "@sentry/types" "7.23.0"
-    "@sentry/utils" "7.23.0"
+    "@sentry/types" "7.20.1"
+    "@sentry/utils" "7.20.1"
     tslib "^1.9.3"
 
-"@sentry/react@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.23.0.tgz#950487365a696d2506c3103f44be8a64f0e79cda"
-  integrity sha512-MY8WhhImMYEbF8YMPHxs/fhQ9DftmWz1KxT52jEcZUAYfbwmt8zVy4LfBUpMNA4rFy72E9k4DsFQtD0FwCcp3g==
+"@sentry/react@7.20.1":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.20.1.tgz#8daef21da5706f5ce68147c555aa19dc12f8b2cf"
+  integrity sha512-5oTRFVkfOe8t7dQtN6oi6WZVFE9iBZKgYcLTaPTCg/5yl5RehitHDxXQRCmv8h1XWF9t3AAopf6rMR/tSdOI1A==
   dependencies:
-    "@sentry/browser" "7.23.0"
-    "@sentry/types" "7.23.0"
-    "@sentry/utils" "7.23.0"
+    "@sentry/browser" "7.20.1"
+    "@sentry/types" "7.20.1"
+    "@sentry/utils" "7.20.1"
     hoist-non-react-statics "^3.3.2"
     tslib "^1.9.3"
 
-"@sentry/types@7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.23.0.tgz#5d2ce94d81d7c1fad702645306f3c0932708cad5"
-  integrity sha512-fZ5XfVRswVZhKoCutQ27UpIHP16tvyc6ws+xq+njHv8Jg8gFBCoOxlJxuFhegD2xxylAn1aiSHNAErFWdajbpA==
+"@sentry/types@7.20.1":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.20.1.tgz#26c6fc94dd25a66aeabbd795fa8985d768190970"
+  integrity sha512-bI4t5IXGLIQYH5MegKRl4x2LDSlPVbQJ5eE6NJCMrCm8PcFUo3WgkwP6toG9ThQwpTx/DhUo1sVNKrr0oW4cpA==
 
-"@sentry/utils@7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.23.0.tgz#5f38640fe49f5abac88f048b92d3e83375d7ddf7"
-  integrity sha512-ad/XXH03MfgDH/7N7FjKEOVaKrfQWdMaE0nCxZCr2RrvlitlmGQmPpms95epr1CpzSU3BDRImlILx6+TlrXOgg==
+"@sentry/utils@7.20.1":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.20.1.tgz#01b881b82598fca5c04af771ffe44663b66dee6f"
+  integrity sha512-wToW0710OijQLUZnbbOx1pxwJ4mXUZ5ZFl4/x7ubNftkOz5NwJ+F3ylRqHXpZJaR9pUfR5CNdInTFZn05h/KeQ==
   dependencies:
-    "@sentry/types" "7.23.0"
+    "@sentry/types" "7.20.1"
     tslib "^1.9.3"
 
 "@sinonjs/commons@^1.7.0":