ci(release): publish latest release

RELEASE

 IPFS hash of the deployment:
-- CIDv0: `QmUnNYjRF1siz1YhXyqh2UEoB5AJiTyiYihJCvPVm3FCdJ`
-- CIDv1: `bafybeic7xtznmrazhjjf2wlmdwzng2qfw3th6skmbj6bjc4i452fvjevsu`
+- CIDv0: `QmWjdKVdC9JtozeVwHk1mC1NqZQFVaE67FUbiimYKFKXga`
+- CIDv1: `bafybeid4ybefcxjobfsidxoodakcycwsqpigag7lo6nwiyshjqv3i3ai34`
 
 The latest release is always mirrored at [app.uniswap.org](https://app.uniswap.org).
 
@@ -10,47 +10,10 @@ You can also access the Uniswap Interface from an IPFS gateway.
 Your Uniswap settings are never remembered across different URLs.
 
 IPFS gateways:
-- https://bafybeic7xtznmrazhjjf2wlmdwzng2qfw3th6skmbj6bjc4i452fvjevsu.ipfs.dweb.link/
-- https://bafybeic7xtznmrazhjjf2wlmdwzng2qfw3th6skmbj6bjc4i452fvjevsu.ipfs.cf-ipfs.com/
-- [ipfs://QmUnNYjRF1siz1YhXyqh2UEoB5AJiTyiYihJCvPVm3FCdJ/](ipfs://QmUnNYjRF1siz1YhXyqh2UEoB5AJiTyiYihJCvPVm3FCdJ/)
+- https://bafybeid4ybefcxjobfsidxoodakcycwsqpigag7lo6nwiyshjqv3i3ai34.ipfs.dweb.link/
+- https://bafybeid4ybefcxjobfsidxoodakcycwsqpigag7lo6nwiyshjqv3i3ai34.ipfs.cf-ipfs.com/
+- [ipfs://QmWjdKVdC9JtozeVwHk1mC1NqZQFVaE67FUbiimYKFKXga/](ipfs://QmWjdKVdC9JtozeVwHk1mC1NqZQFVaE67FUbiimYKFKXga/)
 
-## 5.22.0 (2024-04-02)
-
-
-### Features
-
-* **web:** add orderType to uniswapX POST order (#7071) 296a280
-* **web:** add warning when pool is out of sync (#7074) 0b4142b
-* **web:** alerts for adding liquidity to blast (#7090) 4bb5949
-* **web:** blast (#6853) 2e14697
-* **web:** Condense SuggestionRow and Remove VE (#6961) ff0aea0
-* **web:** fix orderType to backend types (#7093) 516b4a9
-* **web:** only search for tokens on the connected chain (#7062) f21bd47
-* **web:** rm deprecated providers usage (#6891) c27e170
-* **web:** share gql types + query with mobile (#6898) 4f047c7
-* **web:** show user added tokens in currency list when using gql tokens (#7095) c21d5bd
-* **web:** support parsing X v2 encoded orders (#7157) bbc7791
-* **web:** unregister the service worker (#7155) 563c75b
-
-
-### Bug Fixes
-
-* **web:** auto bade not centered (#7166) 1b11359
-* **web:** avoid stacking nested AnimatedDropdowns (#7097) cdee8c0
-* **web:** bump redux version to 8 (#7121) b0c0e4e
-* **web:** clean up sentry integration (#6945) 7073673
-* **web:** fix failing type error on main (#7187) cec328f
-* **web:** fix platform checks for mweb breaking uniwallet deeplinking (#7076) a4c6b86
-* **web:** fix prepare not generating graphql breaking vercel build (#7049) d6b7e02
-* **web:** remove circular dependencies in unit test code (#7057) 769c0b4
-* **web:** responsive swap header (#7117) cce2323
-* **web:** universal search e2e test (#7153) f767f6b
-* **web:** update limit price signage (#7150) 2b303a9
-* **web:** use chainId when getting token list currency (#7184) 93e5c4c
-
-
-### Tests
-
-* **web:** update SwapEventTimestampTracker to not use mocks (#7056) b1c7c61
+### 5.22.1 (2024-04-02)
 
 

VERSION

-web/5.22.0
+web/5.22.1
\ No newline at end of file

apps/web/src/components/CurrencyInputPanel/LimitPriceInputPanel/LimitPriceInputLabel.tsx

@@ -5,6 +5,7 @@ import PrefetchBalancesWrapper from 'components/PrefetchBalancesWrapper/Prefetch
 import Row from 'components/Row'
 import styled from 'styled-components'
 import { ClickableStyle, ThemedText } from 'theme/components'
+import { Text } from 'ui/src'
 
 const CurrencySymbolContainer = styled.span`
   display: inline-block;
@@ -34,7 +35,7 @@ export function LimitPriceInputLabel({
     )
   }
   return (
-    <ThemedText.LabelSmall style={{ userSelect: 'none' }}>
+    <Text variant="body3" userSelect="none" color="$neutral2">
       <Row align="center">
         <Trans>When 1</Trans>{' '}
         <CurrencySymbolContainer>
@@ -47,6 +48,6 @@ export function LimitPriceInputLabel({
         </CurrencySymbolContainer>{' '}
         <Trans>is worth</Trans>
       </Row>
-    </ThemedText.LabelSmall>
+    </Text>
   )
 }

apps/web/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -147,6 +147,7 @@ const InputRow = styled.div`
   ${flexRowNoWrap};
   align-items: center;
   justify-content: space-between;
+  margin-top: 4px;
 `
 
 const LabelRow = styled.div`
@@ -304,7 +305,7 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
         )}
 
         <Container hideInput={hideInput}>
-          <Text variant="subheading2" userSelect="none" color="$neutral2">
+          <Text variant="body3" userSelect="none" color="$neutral2">
             {label}
           </Text>
           <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}>

apps/web/src/components/Pools/PoolDetails/__snapshots__/PoolDetailsStatsButtons.test.tsx.snap

@@ -647,6 +647,7 @@ exports[`PoolDetailsStatsButton renders both buttons correctly 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  margin-top: 4px;
 }
 
 .c42 {
@@ -1201,7 +1202,7 @@ exports[`PoolDetailsStatsButton renders both buttons correctly 1`] = `
                       class="c27"
                     >
                       <span
-                        class="font_subHeading _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontSize-16px _lineHeight-24px _fontWeight-400 _userSelect-none"
+                        class="font_body _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontSize-14px _lineHeight-20px _fontWeight-400 _userSelect-none"
                       >
                         You pay
                       </span>
@@ -1330,7 +1331,7 @@ exports[`PoolDetailsStatsButton renders both buttons correctly 1`] = `
                         class="c27"
                       >
                         <span
-                          class="font_subHeading _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontSize-16px _lineHeight-24px _fontWeight-400 _userSelect-none"
+                          class="font_body _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontSize-14px _lineHeight-20px _fontWeight-400 _userSelect-none"
                         >
                           You receive
                         </span>

apps/web/src/pages/Swap/Send/SendCurrencyInputForm.tsx

@@ -18,6 +18,7 @@ import { SendInputError } from 'state/send/hooks'
 import { useSendContext } from 'state/send/SendContext'
 import styled, { css } from 'styled-components'
 import { ClickableStyle, ThemedText } from 'theme/components'
+import { Text } from 'ui/src'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { maxAmountSpend } from 'utils/maxAmountSpend'
 
@@ -335,9 +336,9 @@ export default function SendCurrencyInputForm({
     <Wrapper $disabled={disabled}>
       <InputWrapper>
         <InputLabelContainer>
-          <ThemedText.SubHeaderSmall color="neutral2">
+          <Text variant="body3" userSelect="none" color="$neutral2">
             <Trans>You&apos;re sending</Trans>
-          </ThemedText.SubHeaderSmall>
+          </Text>
         </InputLabelContainer>
         <NumericalInputWrapper>
           {inputInFiat && (

apps/web/src/pages/Swap/Send/SendRecipientForm.tsx

@@ -16,7 +16,7 @@ import { useSendContext } from 'state/send/SendContext'
 import styled, { css, keyframes } from 'styled-components'
 import { ClickableStyle, ThemedText } from 'theme/components'
 import { AnimationType } from 'theme/components/FadePresence'
-import { Icons, UniconV2 } from 'ui/src'
+import { Icons, Text, UniconV2 } from 'ui/src'
 import { FeatureFlags } from 'uniswap/src/features/experiments/flags'
 import { useFeatureFlag } from 'uniswap/src/features/experiments/hooks'
 import {
@@ -309,9 +309,9 @@ export function SendRecipientForm({ disabled }: { disabled?: boolean }) {
     <RecipientWrapper $disabled={disabled}>
       {showInputField ? (
         <>
-          <ThemedText.SubHeaderSmall lineHeight="24px">
+          <Text variant="body3" userSelect="none" color="$neutral2">
             <Trans>To</Trans>
-          </ThemedText.SubHeaderSmall>
+          </Text>
           <StyledRecipientInputRow justify="space-between">
             <Row ref={inputWrapperNode}>
               <StyledRecipientInput

apps/web/src/pages/Swap/Send/__snapshots__/SendCurrencyInputForm.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
-.c5 {
+.c4 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.c20 {
+.c19 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   width: 100%;
 }
 
-.c6 {
+.c5 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -31,7 +31,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   justify-content: flex-start;
 }
 
-.c13 {
+.c12 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -49,7 +49,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   gap: 4px;
 }
 
-.c21 {
+.c20 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -67,7 +67,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   gap: 12px;
 }
 
-.c26 {
+.c25 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -85,22 +85,14 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   gap: 4px;
 }
 
-.c18 {
+.c17 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
-.c4 {
-  color: #7D7D7D;
-  -webkit-letter-spacing: -0.01em;
-  -moz-letter-spacing: -0.01em;
-  -ms-letter-spacing: -0.01em;
-  letter-spacing: -0.01em;
-}
-
-.c15 {
+.c14 {
   color: #CECECE;
   -webkit-letter-spacing: -0.01em;
   -moz-letter-spacing: -0.01em;
@@ -108,7 +100,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   letter-spacing: -0.01em;
 }
 
-.c25 {
+.c24 {
   color: #222222;
   -webkit-letter-spacing: -0.01em;
   -moz-letter-spacing: -0.01em;
@@ -116,7 +108,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   letter-spacing: -0.01em;
 }
 
-.c23 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -130,7 +122,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   left: 0;
 }
 
-.c24 {
+.c23 {
   width: 36px;
   height: 36px;
   border-radius: 50%;
@@ -150,7 +142,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   justify-content: flex-start;
 }
 
-.c12 {
+.c11 {
   -webkit-filter: none;
   filter: none;
   opacity: 1;
@@ -158,7 +150,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   transition: opacity 250ms ease-in-out;
 }
 
-.c9 {
+.c8 {
   color: #222222;
   pointer-events: auto;
   width: 0;
@@ -179,32 +171,32 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   text-align: right;
 }
 
-.c9::-webkit-search-decoration {
+.c8::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c9 [type='number'] {
+.c8 [type='number'] {
   -moz-appearance: textfield;
 }
 
-.c9::-webkit-outer-spin-button,
-.c9::-webkit-inner-spin-button {
+.c8::-webkit-outer-spin-button,
+.c8::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: #CECECE;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   color: #CECECE;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: #CECECE;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   color: #CECECE;
 }
 
@@ -214,7 +206,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   gap: 1px;
 }
 
-.c17 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -234,7 +226,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   position: relative;
 }
 
-.c19 {
+.c18 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -242,11 +234,11 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   transition-duration: 125ms;
 }
 
-.c19:hover {
+.c18:hover {
   opacity: 0.6;
 }
 
-.c19:active {
+.c18:active {
   opacity: 0.4;
 }
 
@@ -273,7 +265,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   left: 16px;
 }
 
-.c7 {
+.c6 {
   position: relative;
   max-width: 100%;
   width: -webkit-max-content;
@@ -281,7 +273,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   width: max-content;
 }
 
-.c10 {
+.c9 {
   max-height: 84px;
   max-width: 100%;
   width: 43px;
@@ -291,23 +283,23 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   line-height: 60px;
 }
 
-.c10::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   opacity: 1;
 }
 
-.c10::-moz-placeholder {
+.c9::-moz-placeholder {
   opacity: 1;
 }
 
-.c10:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   opacity: 1;
 }
 
-.c10::placeholder {
+.c9::placeholder {
   opacity: 1;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   visibility: hidden;
   bottom: 0px;
@@ -318,7 +310,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   line-height: 60px;
 }
 
-.c8 {
+.c7 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -329,7 +321,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   line-height: 60px;
 }
 
-.c16 {
+.c15 {
   width: 16px;
   height: 16px;
   fill: #CECECE;
@@ -338,7 +330,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   transform: rotate(90deg);
 }
 
-.c27 {
+.c26 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -348,20 +340,20 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   height: 8px;
 }
 
-.c27:hover {
+.c26:hover {
   opacity: 0.6;
 }
 
-.c27:active {
+.c26:active {
   opacity: 0.4;
 }
 
-.c27 path {
+.c26 path {
   stroke: #CECECE;
   stroke-width: 2px;
 }
 
-.c22 {
+.c21 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -369,15 +361,15 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   transition-duration: 125ms;
 }
 
-.c22:hover {
+.c21:hover {
   opacity: 0.6;
 }
 
-.c22:active {
+.c21:active {
   opacity: 0.4;
 }
 
-.c14 {
+.c13 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -385,11 +377,11 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
   transition-duration: 125ms;
 }
 
-.c14:hover {
+.c13:hover {
   opacity: 0.6;
 }
 
-.c14:active {
+.c13:active {
   opacity: 0.4;
 }
 
@@ -408,24 +400,24 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
         <div
           class="c3"
         >
-          <div
-            class="c4 css-142zc9n"
+          <span
+            class="font_body _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontSize-14px _lineHeight-20px _fontWeight-400 _userSelect-none"
           >
             You're sending
-          </div>
+          </span>
         </div>
         <div
-          class="c5 c6 c7"
+          class="c4 c5 c6"
         >
           <span
-            class="c8"
+            class="c7"
           >
             $
           </span>
           <input
             autocomplete="off"
             autocorrect="off"
-            class="c9 c10"
+            class="c8 c9"
             inputmode="decimal"
             maxlength="79"
             minlength="1"
@@ -436,24 +428,24 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
             value="1000"
           />
           <span
-            class="c11"
+            class="c10"
           >
             1000
           </span>
         </div>
         <div
-          class="c12"
+          class="c11"
         >
           <div
-            class="c5 c13 c14"
+            class="c4 c12 c13"
           >
             <div
-              class="c15 css-n8z49y"
+              class="c14 css-n8z49y"
             >
               100.00 DAI
             </div>
             <svg
-              class="c16"
+              class="c15"
               fill="none"
               height="20"
               viewBox="0 0 20 20"
@@ -468,41 +460,41 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
         </div>
       </div>
       <div
-        class="c17"
+        class="c16"
       >
         <div
-          class="c5 c6 c18 c19"
+          class="c4 c5 c17 c18"
         >
           <div
-            class="c20 c21"
+            class="c19 c20"
             width="100%"
           >
             <div
-              class="c20 c21 c22"
+              class="c19 c20 c21"
               width="100%"
             >
               <div
-                class="c23"
+                class="c22"
               >
                 <img
-                  class="c24"
+                  class="c23"
                   src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
                 />
               </div>
               <div
-                class="c20 c6"
+                class="c19 c5"
                 width="100%"
               >
                 <div
                   class="c0"
                 >
                   <div
-                    class="c25 css-n8z49y"
+                    class="c24 css-n8z49y"
                   >
                     DAI
                   </div>
                   <div
-                    class="c20 c26"
+                    class="c19 c25"
                     width="100%"
                   />
                 </div>
@@ -510,7 +502,7 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
             </div>
           </div>
           <svg
-            class="c27"
+            class="c26"
           >
             dropdown.svg
           </svg>
@@ -522,20 +514,20 @@ exports[`SendCurrencyInputform renders input in fiat correctly 1`] = `
 `;
 
 exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
-.c5 {
+.c4 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.c19 {
+.c18 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   width: 100%;
 }
 
-.c6 {
+.c5 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -552,7 +544,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   justify-content: flex-start;
 }
 
-.c12 {
+.c11 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -570,7 +562,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   gap: 4px;
 }
 
-.c20 {
+.c19 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -588,7 +580,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   gap: 12px;
 }
 
-.c25 {
+.c24 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -606,22 +598,14 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   gap: 4px;
 }
 
-.c17 {
+.c16 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
-.c4 {
-  color: #7D7D7D;
-  -webkit-letter-spacing: -0.01em;
-  -moz-letter-spacing: -0.01em;
-  -ms-letter-spacing: -0.01em;
-  letter-spacing: -0.01em;
-}
-
-.c14 {
+.c13 {
   color: #CECECE;
   -webkit-letter-spacing: -0.01em;
   -moz-letter-spacing: -0.01em;
@@ -629,7 +613,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   letter-spacing: -0.01em;
 }
 
-.c24 {
+.c23 {
   color: #222222;
   -webkit-letter-spacing: -0.01em;
   -moz-letter-spacing: -0.01em;
@@ -637,7 +621,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   letter-spacing: -0.01em;
 }
 
-.c22 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -651,7 +635,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   left: 0;
 }
 
-.c23 {
+.c22 {
   width: 36px;
   height: 36px;
   border-radius: 50%;
@@ -671,7 +655,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   justify-content: flex-start;
 }
 
-.c11 {
+.c10 {
   -webkit-filter: none;
   filter: none;
   opacity: 1;
@@ -679,7 +663,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   transition: opacity 250ms ease-in-out;
 }
 
-.c8 {
+.c7 {
   color: #222222;
   pointer-events: auto;
   width: 0;
@@ -700,32 +684,32 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   text-align: right;
 }
 
-.c8::-webkit-search-decoration {
+.c7::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c8 [type='number'] {
+.c7 [type='number'] {
   -moz-appearance: textfield;
 }
 
-.c8::-webkit-outer-spin-button,
-.c8::-webkit-inner-spin-button {
+.c7::-webkit-outer-spin-button,
+.c7::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.c8::-webkit-input-placeholder {
+.c7::-webkit-input-placeholder {
   color: #CECECE;
 }
 
-.c8::-moz-placeholder {
+.c7::-moz-placeholder {
   color: #CECECE;
 }
 
-.c8:-ms-input-placeholder {
+.c7:-ms-input-placeholder {
   color: #CECECE;
 }
 
-.c8::placeholder {
+.c7::placeholder {
   color: #CECECE;
 }
 
@@ -735,7 +719,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   gap: 1px;
 }
 
-.c16 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -755,7 +739,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   position: relative;
 }
 
-.c18 {
+.c17 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -763,11 +747,11 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   transition-duration: 125ms;
 }
 
-.c18:hover {
+.c17:hover {
   opacity: 0.6;
 }
 
-.c18:active {
+.c17:active {
   opacity: 0.4;
 }
 
@@ -794,7 +778,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   left: 16px;
 }
 
-.c7 {
+.c6 {
   position: relative;
   max-width: 100%;
   width: -webkit-max-content;
@@ -802,7 +786,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   width: max-content;
 }
 
-.c9 {
+.c8 {
   max-height: 84px;
   max-width: 100%;
   width: 43px;
@@ -812,23 +796,23 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   line-height: 60px;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   opacity: 1;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   opacity: 1;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   opacity: 1;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   opacity: 1;
 }
 
-.c10 {
+.c9 {
   position: absolute;
   visibility: hidden;
   bottom: 0px;
@@ -839,7 +823,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   line-height: 60px;
 }
 
-.c15 {
+.c14 {
   width: 16px;
   height: 16px;
   fill: #CECECE;
@@ -848,7 +832,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   transform: rotate(90deg);
 }
 
-.c26 {
+.c25 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -858,20 +842,20 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   height: 8px;
 }
 
-.c26:hover {
+.c25:hover {
   opacity: 0.6;
 }
 
-.c26:active {
+.c25:active {
   opacity: 0.4;
 }
 
-.c26 path {
+.c25 path {
   stroke: #CECECE;
   stroke-width: 2px;
 }
 
-.c21 {
+.c20 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -879,15 +863,15 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   transition-duration: 125ms;
 }
 
-.c21:hover {
+.c20:hover {
   opacity: 0.6;
 }
 
-.c21:active {
+.c20:active {
   opacity: 0.4;
 }
 
-.c13 {
+.c12 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -895,11 +879,11 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
   transition-duration: 125ms;
 }
 
-.c13:hover {
+.c12:hover {
   opacity: 0.6;
 }
 
-.c13:active {
+.c12:active {
   opacity: 0.4;
 }
 
@@ -918,19 +902,19 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
         <div
           class="c3"
         >
-          <div
-            class="c4 css-142zc9n"
+          <span
+            class="font_body _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontSize-14px _lineHeight-20px _fontWeight-400 _userSelect-none"
           >
             You're sending
-          </div>
+          </span>
         </div>
         <div
-          class="c5 c6 c7"
+          class="c4 c5 c6"
         >
           <input
             autocomplete="off"
             autocorrect="off"
-            class="c8 c9"
+            class="c7 c8"
             inputmode="decimal"
             maxlength="79"
             minlength="1"
@@ -941,24 +925,24 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
             value="1"
           />
           <span
-            class="c10"
+            class="c9"
           >
             1
           </span>
         </div>
         <div
-          class="c11"
+          class="c10"
         >
           <div
-            class="c5 c12 c13"
+            class="c4 c11 c12"
           >
             <div
-              class="c14 css-n8z49y"
+              class="c13 css-n8z49y"
             >
               $100.00 USD
             </div>
             <svg
-              class="c15"
+              class="c14"
               fill="none"
               height="20"
               viewBox="0 0 20 20"
@@ -973,41 +957,41 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
         </div>
       </div>
       <div
-        class="c16"
+        class="c15"
       >
         <div
-          class="c5 c6 c17 c18"
+          class="c4 c5 c16 c17"
         >
           <div
-            class="c19 c20"
+            class="c18 c19"
             width="100%"
           >
             <div
-              class="c19 c20 c21"
+              class="c18 c19 c20"
               width="100%"
             >
               <div
-                class="c22"
+                class="c21"
               >
                 <img
-                  class="c23"
+                  class="c22"
                   src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
                 />
               </div>
               <div
-                class="c19 c6"
+                class="c18 c5"
                 width="100%"
               >
                 <div
                   class="c0"
                 >
                   <div
-                    class="c24 css-n8z49y"
+                    class="c23 css-n8z49y"
                   >
                     DAI
                   </div>
                   <div
-                    class="c19 c25"
+                    class="c18 c24"
                     width="100%"
                   />
                 </div>
@@ -1015,7 +999,7 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
             </div>
           </div>
           <svg
-            class="c26"
+            class="c25"
           >
             dropdown.svg
           </svg>
@@ -1027,20 +1011,20 @@ exports[`SendCurrencyInputform renders input in token amount correctly 1`] = `
 `;
 
 exports[`SendCurrencyInputform should render placeholder values 1`] = `
-.c5 {
+.c4 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.c20 {
+.c19 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   width: 100%;
 }
 
-.c6 {
+.c5 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1057,7 +1041,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   justify-content: flex-start;
 }
 
-.c13 {
+.c12 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1075,7 +1059,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   gap: 4px;
 }
 
-.c21 {
+.c20 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1093,7 +1077,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   gap: 12px;
 }
 
-.c26 {
+.c25 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1111,22 +1095,14 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   gap: 4px;
 }
 
-.c18 {
+.c17 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
-.c4 {
-  color: #7D7D7D;
-  -webkit-letter-spacing: -0.01em;
-  -moz-letter-spacing: -0.01em;
-  -ms-letter-spacing: -0.01em;
-  letter-spacing: -0.01em;
-}
-
-.c15 {
+.c14 {
   color: #CECECE;
   -webkit-letter-spacing: -0.01em;
   -moz-letter-spacing: -0.01em;
@@ -1134,7 +1110,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   letter-spacing: -0.01em;
 }
 
-.c25 {
+.c24 {
   color: #222222;
   -webkit-letter-spacing: -0.01em;
   -moz-letter-spacing: -0.01em;
@@ -1142,7 +1118,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   letter-spacing: -0.01em;
 }
 
-.c23 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1156,7 +1132,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   left: 0;
 }
 
-.c24 {
+.c23 {
   width: 36px;
   height: 36px;
   border-radius: 50%;
@@ -1176,7 +1152,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   justify-content: flex-start;
 }
 
-.c12 {
+.c11 {
   -webkit-filter: none;
   filter: none;
   opacity: 1;
@@ -1184,7 +1160,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   transition: opacity 250ms ease-in-out;
 }
 
-.c9 {
+.c8 {
   color: #222222;
   pointer-events: auto;
   width: 0;
@@ -1205,32 +1181,32 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   text-align: right;
 }
 
-.c9::-webkit-search-decoration {
+.c8::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c9 [type='number'] {
+.c8 [type='number'] {
   -moz-appearance: textfield;
 }
 
-.c9::-webkit-outer-spin-button,
-.c9::-webkit-inner-spin-button {
+.c8::-webkit-outer-spin-button,
+.c8::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.c9::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: #CECECE;
 }
 
-.c9::-moz-placeholder {
+.c8::-moz-placeholder {
   color: #CECECE;
 }
 
-.c9:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: #CECECE;
 }
 
-.c9::placeholder {
+.c8::placeholder {
   color: #CECECE;
 }
 
@@ -1240,7 +1216,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   gap: 1px;
 }
 
-.c17 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1260,7 +1236,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   position: relative;
 }
 
-.c19 {
+.c18 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1268,11 +1244,11 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   transition-duration: 125ms;
 }
 
-.c19:hover {
+.c18:hover {
   opacity: 0.6;
 }
 
-.c19:active {
+.c18:active {
   opacity: 0.4;
 }
 
@@ -1299,7 +1275,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   left: 16px;
 }
 
-.c7 {
+.c6 {
   position: relative;
   max-width: 100%;
   width: -webkit-max-content;
@@ -1307,7 +1283,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   width: max-content;
 }
 
-.c10 {
+.c9 {
   max-height: 84px;
   max-width: 100%;
   width: 43px;
@@ -1317,23 +1293,23 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   line-height: 60px;
 }
 
-.c10::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   opacity: 1;
 }
 
-.c10::-moz-placeholder {
+.c9::-moz-placeholder {
   opacity: 1;
 }
 
-.c10:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   opacity: 1;
 }
 
-.c10::placeholder {
+.c9::placeholder {
   opacity: 1;
 }
 
-.c11 {
+.c10 {
   position: absolute;
   visibility: hidden;
   bottom: 0px;
@@ -1344,7 +1320,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   line-height: 60px;
 }
 
-.c8 {
+.c7 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1356,7 +1332,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   color: #CECECE;
 }
 
-.c16 {
+.c15 {
   width: 16px;
   height: 16px;
   fill: #CECECE;
@@ -1365,7 +1341,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   transform: rotate(90deg);
 }
 
-.c27 {
+.c26 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1375,20 +1351,20 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   height: 8px;
 }
 
-.c27:hover {
+.c26:hover {
   opacity: 0.6;
 }
 
-.c27:active {
+.c26:active {
   opacity: 0.4;
 }
 
-.c27 path {
+.c26 path {
   stroke: #CECECE;
   stroke-width: 2px;
 }
 
-.c22 {
+.c21 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1396,15 +1372,15 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   transition-duration: 125ms;
 }
 
-.c22:hover {
+.c21:hover {
   opacity: 0.6;
 }
 
-.c22:active {
+.c21:active {
   opacity: 0.4;
 }
 
-.c14 {
+.c13 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1412,11 +1388,11 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   transition-duration: 125ms;
 }
 
-.c14:hover {
+.c13:hover {
   opacity: 0.6;
 }
 
-.c14:active {
+.c13:active {
   opacity: 0.4;
 }
 
@@ -1435,24 +1411,24 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
         <div
           class="c3"
         >
-          <div
-            class="c4 css-142zc9n"
+          <span
+            class="font_body _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontSize-14px _lineHeight-20px _fontWeight-400 _userSelect-none"
           >
             You're sending
-          </div>
+          </span>
         </div>
         <div
-          class="c5 c6 c7"
+          class="c4 c5 c6"
         >
           <span
-            class="c8"
+            class="c7"
           >
             $
           </span>
           <input
             autocomplete="off"
             autocorrect="off"
-            class="c9 c10"
+            class="c8 c9"
             inputmode="decimal"
             maxlength="79"
             minlength="1"
@@ -1463,22 +1439,22 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
             value=""
           />
           <span
-            class="c11"
+            class="c10"
           />
         </div>
         <div
-          class="c12"
+          class="c11"
         >
           <div
-            class="c5 c13 c14"
+            class="c4 c12 c13"
           >
             <div
-              class="c15 css-n8z49y"
+              class="c14 css-n8z49y"
             >
               0 DAI
             </div>
             <svg
-              class="c16"
+              class="c15"
               fill="none"
               height="20"
               viewBox="0 0 20 20"
@@ -1493,41 +1469,41 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
         </div>
       </div>
       <div
-        class="c17"
+        class="c16"
       >
         <div
-          class="c5 c6 c18 c19"
+          class="c4 c5 c17 c18"
         >
           <div
-            class="c20 c21"
+            class="c19 c20"
             width="100%"
           >
             <div
-              class="c20 c21 c22"
+              class="c19 c20 c21"
               width="100%"
             >
               <div
-                class="c23"
+                class="c22"
               >
                 <img
-                  class="c24"
+                  class="c23"
                   src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
                 />
               </div>
               <div
-                class="c20 c6"
+                class="c19 c5"
                 width="100%"
               >
                 <div
                   class="c0"
                 >
                   <div
-                    class="c25 css-n8z49y"
+                    class="c24 css-n8z49y"
                   >
                     DAI
                   </div>
                   <div
-                    class="c20 c26"
+                    class="c19 c25"
                     width="100%"
                   />
                 </div>
@@ -1535,7 +1511,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
             </div>
           </div>
           <svg
-            class="c27"
+            class="c26"
           >
             dropdown.svg
           </svg>

apps/web/src/pages/Swap/Send/__snapshots__/SendRecipientForm.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SendCurrencyInputform should render correctly with no verified recipient 1`] = `
-.c3 {
+.c2 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -24,7 +24,7 @@ exports[`SendCurrencyInputform should render correctly with no verified recipien
   justify-content: space-between;
 }
 
-.c6 {
+.c5 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -41,14 +41,6 @@ exports[`SendCurrencyInputform should render correctly with no verified recipien
   justify-content: flex-start;
 }
 
-.c2 {
-  color: #7D7D7D;
-  -webkit-letter-spacing: -0.01em;
-  -moz-letter-spacing: -0.01em;
-  -ms-letter-spacing: -0.01em;
-  letter-spacing: -0.01em;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -73,11 +65,11 @@ exports[`SendCurrencyInputform should render correctly with no verified recipien
   pointer-events: initial;
 }
 
-.c5 {
+.c4 {
   color: #7D7D7D;
 }
 
-.c7 {
+.c6 {
   background: none;
   width: 100%;
   color: #222222;
@@ -88,19 +80,19 @@ exports[`SendCurrencyInputform should render correctly with no verified recipien
   line-height: 24px;
 }
 
-.c7::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: #CECECE;
 }
 
-.c7::-moz-placeholder {
+.c6::-moz-placeholder {
   color: #CECECE;
 }
 
-.c7:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: #CECECE;
 }
 
-.c7::placeholder {
+.c6::placeholder {
   color: #CECECE;
 }
 
@@ -113,22 +105,22 @@ exports[`SendCurrencyInputform should render correctly with no verified recipien
     <div
       class="c0 c1"
     >
-      <div
-        class="c2 css-fy6j1c"
+      <span
+        class="font_body _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontSize-14px _lineHeight-20px _fontWeight-400 _userSelect-none"
       >
         To
-      </div>
+      </span>
       <div
-        class="c3 c4 c5"
+        class="c2 c3 c4"
       >
         <div
-          class="c3 c6"
+          class="c2 c5"
         >
           <input
             autocapitalize="off"
             autocomplete="off"
             autocorrect="off"
-            class="c7"
+            class="c6"
             pattern="^(0x[a-fA-F0-9]{40})$"
             placeholder="Wallet address or ENS name"
             spellcheck="false"
@@ -672,13 +664,13 @@ exports[`SendCurrencyInputform should render correctly with verified recipient 1
 `;
 
 exports[`SendCurrencyInputform should render placeholder values 1`] = `
-.c3 {
+.c2 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -695,7 +687,7 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   justify-content: space-between;
 }
 
-.c6 {
+.c5 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -712,14 +704,6 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   justify-content: flex-start;
 }
 
-.c2 {
-  color: #7D7D7D;
-  -webkit-letter-spacing: -0.01em;
-  -moz-letter-spacing: -0.01em;
-  -ms-letter-spacing: -0.01em;
-  letter-spacing: -0.01em;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -744,11 +728,11 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   pointer-events: initial;
 }
 
-.c5 {
+.c4 {
   color: #7D7D7D;
 }
 
-.c7 {
+.c6 {
   background: none;
   width: 100%;
   color: #222222;
@@ -759,19 +743,19 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
   line-height: 24px;
 }
 
-.c7::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: #CECECE;
 }
 
-.c7::-moz-placeholder {
+.c6::-moz-placeholder {
   color: #CECECE;
 }
 
-.c7:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: #CECECE;
 }
 
-.c7::placeholder {
+.c6::placeholder {
   color: #CECECE;
 }
 
@@ -784,22 +768,22 @@ exports[`SendCurrencyInputform should render placeholder values 1`] = `
     <div
       class="c0 c1"
     >
-      <div
-        class="c2 css-fy6j1c"
+      <span
+        class="font_body _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontSize-14px _lineHeight-20px _fontWeight-400 _userSelect-none"
       >
         To
-      </div>
+      </span>
       <div
-        class="c3 c4 c5"
+        class="c2 c3 c4"
       >
         <div
-          class="c3 c6"
+          class="c2 c5"
         >
           <input
             autocapitalize="off"
             autocomplete="off"
             autocorrect="off"
-            class="c7"
+            class="c6"
             pattern="^(0x[a-fA-F0-9]{40})$"
             placeholder="Wallet address or ENS name"
             spellcheck="false"