From 7cd72a706d965340f97b6e1fd7bf49373ac8716e Mon Sep 17 00:00:00 2001
From: eddie <66155195+just-toby@users.noreply.github.com>
Date: Fri, 22 Sep 2023 10:31:23 -0700
Subject: [PATCH] feat: show usd price with no input amount (#7328)

* feat: show usd price with no input amount

* fix: snapshots

* fix: make tokens undefined only - no null

* fix: readability

* fix: syntax improvements
---
 src/hooks/Tokens.ts                           |   2 +-
 src/lib/hooks/useCurrency.ts                  |   6 +-
 .../Landing/__snapshots__/index.test.tsx.snap | 998 ++++++++++--------
 src/pages/Swap/index.tsx                      |  21 +-
 src/state/swap/hooks.tsx                      |   4 +-
 5 files changed, 579 insertions(+), 452 deletions(-)

diff --git a/src/hooks/Tokens.ts b/src/hooks/Tokens.ts
index cc9dd2b65e..4d7687b07c 100644
--- a/src/hooks/Tokens.ts
+++ b/src/hooks/Tokens.ts
@@ -190,7 +190,7 @@ export function useToken(tokenAddress?: string | null): Token | null | undefined
   return useTokenFromMapOrNetwork(tokens, tokenAddress)
 }
 
-export function useCurrency(currencyId: Maybe<string>, chainId?: ChainId): Currency | null | undefined {
+export function useCurrency(currencyId: Maybe<string>, chainId?: ChainId): Currency | undefined {
   const { chainId: connectedChainId } = useWeb3React()
   const tokens = useDefaultActiveTokens(chainId ?? connectedChainId)
   return useCurrencyFromMap(tokens, chainId ?? connectedChainId, currencyId)
diff --git a/src/lib/hooks/useCurrency.ts b/src/lib/hooks/useCurrency.ts
index 6226cca379..acdb9480d7 100644
--- a/src/lib/hooks/useCurrency.ts
+++ b/src/lib/hooks/useCurrency.ts
@@ -80,7 +80,7 @@ type TokenMap = { [address: string]: Token }
  * Returns null if token is loading or null was passed.
  * Returns undefined if tokenAddress is invalid or token does not exist.
  */
-export function useTokenFromMapOrNetwork(tokens: TokenMap, tokenAddress?: string | null): Token | null | undefined {
+export function useTokenFromMapOrNetwork(tokens: TokenMap, tokenAddress?: string | null): Token | undefined {
   const address = isAddress(tokenAddress)
   const token: Token | undefined = address ? tokens[address] : undefined
   const tokenFromNetwork = useTokenFromActiveNetwork(token ? undefined : address ? address : undefined)
@@ -106,7 +106,7 @@ export function useCurrencyFromMap(
   tokens: TokenMap,
   chainId: ChainId | undefined,
   currencyId?: string | null
-): Currency | null | undefined {
+): Currency | undefined {
   const nativeCurrency = useNativeCurrency(chainId)
   const isNative = Boolean(nativeCurrency && currencyId?.toUpperCase() === 'ETH')
   const shorthandMatchAddress = useMemo(() => {
@@ -116,7 +116,7 @@ export function useCurrencyFromMap(
 
   const token = useTokenFromMapOrNetwork(tokens, isNative ? undefined : shorthandMatchAddress ?? currencyId)
 
-  if (currencyId === null || currencyId === undefined || !isSupportedChain(chainId)) return null
+  if (currencyId === null || currencyId === undefined || !isSupportedChain(chainId)) return
 
   // this case so we use our builtin wrapped token instead of wrapped tokens on token lists
   const wrappedNative = nativeCurrency?.wrapped
diff --git a/src/pages/Landing/__snapshots__/index.test.tsx.snap b/src/pages/Landing/__snapshots__/index.test.tsx.snap
index 7ceccd72bc..5fe60f069e 100644
--- a/src/pages/Landing/__snapshots__/index.test.tsx.snap
+++ b/src/pages/Landing/__snapshots__/index.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   border-radius: 4px;
 }
 
-.c47 {
+.c50 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -71,6 +71,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
   justify-content: flex-start;
 }
 
+.c49 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 8px;
+}
+
 .c9 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -92,7 +110,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   color: #7D7D7D;
 }
 
-.c99 {
+.c102 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -103,15 +121,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
   font-weight: 500;
 }
 
-.c99:hover {
+.c102:hover {
   opacity: 0.6;
 }
 
-.c99:active {
+.c102:active {
   opacity: 0.4;
 }
 
-.c97 {
+.c100 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -122,36 +140,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
   font-weight: 500;
 }
 
-.c97:hover {
+.c100:hover {
   opacity: 0.6;
 }
 
-.c97:active {
+.c100:active {
   opacity: 0.4;
 }
 
-.c90 {
+.c93 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c91 {
+.c94 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c92 {
+.c95 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c84 {
+.c87 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -164,7 +182,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   max-width: 1440px;
 }
 
-.c85 {
+.c88 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -174,24 +192,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
   flex-direction: column;
 }
 
-.c86 {
+.c89 {
   display: none;
 }
 
-.c101 {
+.c104 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c87 {
+.c90 {
   width: 72px;
   height: 72px;
   display: none;
 }
 
-.c88 {
+.c91 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -204,20 +222,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
   margin: 20px 0 0 0;
 }
 
-.c89 {
+.c92 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c94 {
+.c97 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
-.c95 {
+.c98 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -230,32 +248,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
   margin: 20px 0 0 0;
 }
 
-.c96 {
+.c99 {
   font-size: 16px;
   line-height: 20px;
   font-weight: 535;
 }
 
-.c100 {
+.c103 {
   font-size: 16px;
   line-height: 20px;
   color: #7D7D7D;
 }
 
-.c98 {
+.c101 {
   font-size: 16px;
   line-height: 20px;
   color: #7D7D7D;
 }
 
-.c93 {
+.c96 {
   font-size: 16px;
   line-height: 20px;
   margin: 1rem 0 0 0;
   color: #CECECE;
 }
 
-.c67 {
+.c70 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -283,11 +301,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease border;
 }
 
-.c67:hover {
+.c70:hover {
   border: 1px solid #CECECE;
 }
 
-.c73 {
+.c76 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -315,11 +333,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease border;
 }
 
-.c73:hover {
+.c76:hover {
   border: 1px solid #CECECE;
 }
 
-.c68 {
+.c71 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -334,13 +352,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
   justify-content: space-between;
 }
 
-.c69 {
+.c72 {
   font-size: 20px;
   line-height: 28px;
   font-weight: 535;
 }
 
-.c70 {
+.c73 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -355,7 +373,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   max-width: 480px;
 }
 
-.c74 {
+.c77 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -370,7 +388,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   max-width: 480px;
 }
 
-.c71 {
+.c74 {
   color: #FC72FF;
   font-weight: 535;
   margin: 24px 0 0;
@@ -379,18 +397,18 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease opacity;
 }
 
-.c71:hover {
+.c74:hover {
   opacity: 0.6;
 }
 
-.c75 {
+.c78 {
   min-width: 20px;
   min-height: 20px;
   max-height: 48px;
   max-width: 48px;
 }
 
-.c50 {
+.c53 {
   background-color: transparent;
   bottom: 0;
   border-radius: inherit;
@@ -461,7 +479,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   text-decoration: none;
 }
 
-.c81 {
+.c84 {
   padding: 16px;
   width: 200px;
   line-height: 24px;
@@ -500,58 +518,58 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transform: perspective(1px) translateZ(0);
 }
 
-.c81:disabled {
+.c84:disabled {
   opacity: 50%;
   cursor: auto;
   pointer-events: none;
 }
 
-.c81 > * {
+.c84 > * {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c81 > a {
+.c84 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c48 {
+.c51 {
   background-color: #FFEFFF;
   color: #FC72FF;
   font-size: 20px;
   font-weight: 535;
 }
 
-.c48:focus {
+.c51:focus {
   box-shadow: 0 0 0 1pt #FFEFFF;
   background-color: #FFEFFF;
 }
 
-.c48:hover {
+.c51:hover {
   background-color: #FFEFFF;
 }
 
-.c48:active {
+.c51:active {
   box-shadow: 0 0 0 1pt #FFEFFF;
   background-color: #FFEFFF;
 }
 
-.c48:hover .c49 {
+.c51:hover .c52 {
   background-color: #98A1C014;
 }
 
-.c48:active .c49 {
+.c51:active .c52 {
   background-color: #B8C0DC3d;
 }
 
-.c48:disabled {
+.c51:disabled {
   opacity: 0.4;
 }
 
-.c48:disabled:hover {
+.c51:disabled:hover {
   cursor: auto;
   background-color: transparent;
   box-shadow: none;
@@ -575,7 +593,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   background-color: #e0e0e0;
 }
 
-.c82 {
+.c85 {
   background-color: transparent;
   color: #FC72FF;
   display: -webkit-box;
@@ -592,22 +610,22 @@ exports[`disable nft on landing page does not render nft information and card 1`
   align-items: center;
 }
 
-.c82:focus {
+.c85:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c82:hover {
+.c85:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c82:active {
+.c85:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c82:disabled {
+.c85:disabled {
   opacity: 50%;
   cursor: auto;
 }
@@ -641,7 +659,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   cursor: auto;
 }
 
-.c76 {
+.c79 {
   height: 340px;
   width: 100%;
   border-radius: 32px;
@@ -667,7 +685,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
 }
 
-.c77 {
+.c80 {
   color: white;
   display: -webkit-box;
   display: -webkit-flex;
@@ -681,20 +699,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
   flex-direction: column;
 }
 
-.c78 {
+.c81 {
   font-weight: 535;
   font-size: 28px;
   line-height: 36px;
 }
 
-.c79 {
+.c82 {
   margin: 10px 10px 0 0;
   font-weight: 535;
   font-size: 16px;
   line-height: 20px;
 }
 
-.c80 {
+.c83 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -708,16 +726,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease opacity;
 }
 
-.c80:hover {
+.c83:hover {
   opacity: 0.6;
 }
 
-.c83 {
+.c86 {
   color: white;
   border: 1px solid white;
 }
 
-.c43 {
+.c45 {
   display: grid;
   grid-auto-rows: auto;
   grid-row-gap: 4px;
@@ -731,6 +749,21 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: opacity 250ms ease-in-out;
 }
 
+.c41 {
+  border-radius: 12px;
+  border-radius: 12px;
+  height: 24px;
+  width: 50%;
+  width: 50%;
+  -webkit-animation: fAQEyV 1.5s infinite;
+  animation: fAQEyV 1.5s infinite;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  background: linear-gradient( to left, #22222212 25%, rgba(53,53,53,0.07) 50%, #22222212 75% );
+  will-change: background-position;
+  background-size: 400%;
+}
+
 .c14 {
   display: inline-block;
   height: inherit;
@@ -813,6 +846,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
   color: #CECECE;
 }
 
+.c42 {
+  border-radius: 4px;
+  width: 4rem;
+  height: 1rem;
+}
+
 .c24 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -893,7 +932,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   background-color: #B8C0DC3d;
 }
 
-.c45 {
+.c47 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -926,12 +965,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
   animation: none;
 }
 
-.c45:hover,
-.c45:active {
+.c47:hover,
+.c47:active {
   background-color: #FC72FF;
 }
 
-.c45:before {
+.c47:before {
   background-size: 100%;
   border-radius: inherit;
   position: absolute;
@@ -942,11 +981,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
   content: '';
 }
 
-.c45:hover:before {
+.c47:hover:before {
   background-color: #98A1C014;
 }
 
-.c45:active:before {
+.c47:active:before {
   background-color: #B8C0DC3d;
 }
 
@@ -1026,13 +1065,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
   stroke-width: 2px;
 }
 
-.c46 {
+.c48 {
   margin: 0 0.25rem 0 0.35rem;
   height: 35%;
   margin-left: 8px;
 }
 
-.c46 path {
+.c48 path {
   stroke: #FFFFFF;
   stroke-width: 2px;
 }
@@ -1100,7 +1139,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   padding-top: 12px;
 }
 
-.c41 {
+.c43 {
   border-radius: 12px;
   height: 40px;
   width: 40px;
@@ -1115,7 +1154,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   z-index: 2;
 }
 
-.c41:hover {
+.c43:hover {
   cursor: pointer;
   opacity: 0.8;
 }
@@ -1177,7 +1216,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   gap: 16px;
 }
 
-.c42 {
+.c44 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1228,7 +1267,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   border-color: #B8C0DC3d;
 }
 
-.c44 {
+.c46 {
   border-bottom: 1px solid #FFFFFF;
 }
 
@@ -1255,7 +1294,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   overflow-x: hidden;
 }
 
-.c51 {
+.c54 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1279,7 +1318,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   height: calc(100vh - 48px);
 }
 
-.c52 {
+.c55 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1300,7 +1339,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   height: calc(100vh - 48px);
 }
 
-.c53 {
+.c56 {
   position: absolute;
   top: 68px;
   bottom: 0;
@@ -1313,7 +1352,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   height: 100%;
 }
 
-.c54 {
+.c57 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1341,11 +1380,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
   pointer-events: none;
 }
 
-.c54 * {
+.c57 * {
   pointer-events: auto;
 }
 
-.c55 {
+.c58 {
   color: transparent;
   font-size: 36px;
   line-height: 44px;
@@ -1357,7 +1396,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   -webkit-background-clip: text;
 }
 
-.c57 {
+.c60 {
   color: #7D7D7D;
   font-size: 16px;
   line-height: 24px;
@@ -1367,7 +1406,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   margin: 0 0 32px;
 }
 
-.c56 {
+.c59 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1378,12 +1417,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
   justify-content: center;
 }
 
-.c59 {
+.c62 {
   padding: 16px 0px;
   border-radius: 24px;
 }
 
-.c60 {
+.c63 {
   background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
   border: none;
   color: #FFFFFF;
@@ -1391,24 +1430,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: all 250ms ease;
 }
 
-.c60:hover {
+.c63:hover {
   box-shadow: 0px 0px 16px 0px #ff00c7;
 }
 
-.c61 {
+.c64 {
   margin: 0px;
   font-size: 16px;
   font-weight: 535;
   white-space: nowrap;
 }
 
-.c58 {
+.c61 {
   max-width: 300px;
   width: 100%;
   pointer-events: auto;
 }
 
-.c62 {
+.c65 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1428,16 +1467,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease opacity;
 }
 
-.c62:hover {
+.c65:hover {
   opacity: 0.6;
 }
 
-.c63 {
+.c66 {
   margin-left: 14px;
   size: 20px;
 }
 
-.c65 {
+.c68 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1454,7 +1493,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
 }
 
-.c66 {
+.c69 {
   display: grid;
   gap: 12px;
   width: 100%;
@@ -1467,7 +1506,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   grid-template-columns: 1fr;
 }
 
-.c72 {
+.c75 {
   display: grid;
   gap: 12px;
   width: 100%;
@@ -1521,7 +1560,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   width: 100%;
 }
 
-.c64 {
+.c67 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1537,12 +1576,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
   text-align: center;
 }
 
-.c64:hover {
+.c67:hover {
   color: #CECECE;
 }
 
 @media screen and (min-width:1024px) {
-  .c84 {
+  .c87 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -1554,7 +1593,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1024px) {
-  .c86 {
+  .c89 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -1563,63 +1602,63 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1024px) {
-  .c101 {
+  .c104 {
     display: none;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c87 {
+  .c90 {
     display: block;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c94 {
+  .c97 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 24px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c95 {
+  .c98 {
     margin: 0;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c67 {
+  .c70 {
     height: 360px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c67 {
+  .c70 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c73 {
+  .c76 {
     height: 260px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c73 {
+  .c76 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c69 {
+  .c72 {
     font-size: 28px;
     line-height: 36px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c70 {
+  .c73 {
     font-size: 20px;
     line-height: 28px;
     max-width: 480px;
@@ -1627,7 +1666,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1280px) {
-  .c74 {
+  .c77 {
     font-size: 20px;
     line-height: 28px;
     max-width: 480px;
@@ -1635,7 +1674,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1024px) {
-  .c76 {
+  .c79 {
     height: 140px;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -1644,21 +1683,21 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1280px) {
-  .c78 {
+  .c81 {
     font-size: 28px;
     line-height: 36px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c79 {
+  .c82 {
     font-size: 20px;
     line-height: 28px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c80 {
+  .c83 {
     width: auto;
   }
 }
@@ -1676,79 +1715,79 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:768px) {
-  .c51 {
+  .c54 {
     height: 100vh;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c52 {
+  .c55 {
     height: 100vh;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c55 {
+  .c58 {
     font-size: 48px;
     line-height: 56px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c55 {
+  .c58 {
     font-size: 64px;
     line-height: 72px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c57 {
+  .c60 {
     font-size: 20px;
     line-height: 28px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c61 {
+  .c64 {
     font-size: 20px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c62 {
+  .c65 {
     visibility: visible;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c65 {
+  .c68 {
     padding: 0 96px 5rem;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c66 {
+  .c69 {
     grid-template-columns: 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c66 {
+  .c69 {
     grid-template-columns: 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c72 {
+  .c75 {
     grid-template-columns: 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c72 {
+  .c75 {
     grid-template-columns: 1fr 1fr 1fr;
     gap: 32px;
   }
@@ -1924,7 +1963,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
                         >
                           <div
                             class="c40"
-                          />
+                          >
+                            <div
+                              class="c41 c42"
+                            />
+                          </div>
                           <span />
                         </div>
                       </div>
@@ -1932,10 +1975,10 @@ exports[`disable nft on landing page does not render nft information and card 1`
                   </div>
                 </div>
                 <div
-                  class="c41"
+                  class="c43"
                 >
                   <div
-                    class="c42"
+                    class="c44"
                     color="#222222"
                     data-testid="swap-currency-button"
                   >
@@ -1964,11 +2007,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
                 </div>
               </div>
               <div
-                class="c43"
+                class="c45"
               >
                 <div>
                   <div
-                    class="c23 c44"
+                    class="c23 c46"
                   >
                     <div
                       class="c24"
@@ -2009,7 +2052,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
                               class="c14"
                             >
                               <button
-                                class="c15 c16 c30 c45 open-currency-select-button"
+                                class="c15 c16 c30 c47 open-currency-select-button"
                               >
                                 <span
                                   class="c32"
@@ -2024,7 +2067,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
                                     </span>
                                   </div>
                                   <svg
-                                    class="c46"
+                                    class="c48"
                                   >
                                     dropdown.svg
                                   </svg>
@@ -2041,7 +2084,23 @@ exports[`disable nft on landing page does not render nft information and card 1`
                           >
                             <div
                               class="c40"
-                            />
+                            >
+                              <div
+                                class="c7 c49"
+                              >
+                                <div
+                                  class="c26 css-142zc9n"
+                                >
+                                  <div
+                                    class="c14"
+                                  >
+                                    <div>
+                                      -
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
                             <span />
                           </div>
                         </div>
@@ -2051,11 +2110,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
                 </div>
                 <div>
                   <button
-                    class="c47 c16 c48"
+                    class="c50 c16 c51"
                     font-weight="535"
                   >
                     <div
-                      class="c49 c50"
+                      class="c52 c53"
                     />
                     Connect Wallet
                   </button>
@@ -2067,52 +2126,52 @@ exports[`disable nft on landing page does not render nft information and card 1`
       </a>
     </div>
     <div
-      class="c51"
+      class="c54"
     />
     <div
-      class="c52"
+      class="c55"
     >
       <div
-        class="c53"
+        class="c56"
       />
     </div>
     <div
-      class="c54"
+      class="c57"
     >
       <h1
-        class="c55"
+        class="c58"
       >
         Trade crypto with confidence
       </h1>
       <div
-        class="c56"
+        class="c59"
       >
         <div
-          class="c57"
+          class="c60"
         >
           Buy, sell, and explore tokens
         </div>
       </div>
       <span
-        class="c58"
+        class="c61"
       >
         <a
-          class="c2 c16 c59 c60"
+          class="c2 c16 c62 c63"
           href="/swap"
         >
           <p
-            class="c61"
+            class="c64"
           >
             Get started
           </p>
         </a>
       </span>
       <div
-        class="c62"
+        class="c65"
       >
         Learn more
         <svg
-          class="c63"
+          class="c66"
           fill="none"
           height="24"
           stroke="currentColor"
@@ -2140,7 +2199,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
         </svg>
       </div>
       <a
-        class="c64"
+        class="c67"
         href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1"
       >
         <svg
@@ -2157,32 +2216,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
       </a>
     </div>
     <div
-      class="c65"
+      class="c68"
     >
       <div
-        class="c66"
+        class="c69"
         cols="1"
       >
         <a
-          class="c67"
+          class="c70"
           href="/swap"
         >
           <div
-            class="c68"
+            class="c71"
           >
             <div
-              class="c69"
+              class="c72"
             >
               Swap tokens
             </div>
           </div>
           <div
-            class="c70"
+            class="c73"
             type="Primary"
           >
             Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
             <div
-              class="c70 c71"
+              class="c73 c74"
               type="Primary"
             >
               Trade Tokens
@@ -2191,20 +2250,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
         </a>
       </div>
       <div
-        class="c72"
+        class="c75"
         cols="3"
       >
         <a
-          class="c73"
+          class="c76"
           href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
           rel="noopenener noreferrer"
           target="_blank"
         >
           <div
-            class="c68"
+            class="c71"
           >
             <div
-              class="c69"
+              class="c72"
             >
               Buy crypto
             </div>
@@ -2231,12 +2290,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </svg>
           </div>
           <div
-            class="c74"
+            class="c77"
             type="Secondary"
           >
             Buy crypto with your credit card or bank account at the best rates.
             <div
-              class="c74 c71"
+              class="c77 c74"
               type="Secondary"
             >
               Buy now
@@ -2244,30 +2303,30 @@ exports[`disable nft on landing page does not render nft information and card 1`
           </div>
         </a>
         <a
-          class="c73"
+          class="c76"
           href="/pools"
         >
           <div
-            class="c68"
+            class="c71"
           >
             <div
-              class="c69"
+              class="c72"
             >
               Earn
             </div>
             <img
               alt="Analytics"
-              class="c75"
+              class="c78"
               src="aboutArrowLight.png"
             />
           </div>
           <div
-            class="c74"
+            class="c77"
             type="Secondary"
           >
             Provide liquidity to pools on Uniswap and earn fees on swaps.
             <div
-              class="c74 c71"
+              class="c77 c74"
               type="Secondary"
             >
               Provide liquidity
@@ -2275,16 +2334,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
           </div>
         </a>
         <a
-          class="c73"
+          class="c76"
           href="https://docs.uniswap.org"
           rel="noopenener noreferrer"
           target="_blank"
         >
           <div
-            class="c68"
+            class="c71"
           >
             <div
-              class="c69"
+              class="c72"
             >
               Build dApps
             </div>
@@ -2311,12 +2370,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </svg>
           </div>
           <div
-            class="c74"
+            class="c77"
             type="Secondary"
           >
             Build apps and tools on the largest DeFi protocol on Ethereum.
             <div
-              class="c74 c71"
+              class="c77 c74"
               type="Secondary"
             >
               Developer docs
@@ -2325,27 +2384,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
         </a>
       </div>
       <div
-        class="c76"
+        class="c79"
       >
         <div
-          class="c77"
+          class="c80"
         >
           <div
-            class="c78"
+            class="c81"
           >
             Powered by the Uniswap Protocol
           </div>
           <div
-            class="c79"
+            class="c82"
           >
             The leading decentralized crypto trading protocol, governed by a global community.
           </div>
         </div>
         <div
-          class="c80"
+          class="c83"
         >
           <a
-            class="c81 c82 c83"
+            class="c84 c85 c86"
             href="https://uniswap.org"
             rel="noopener noreferrer"
             target="_blank"
@@ -2356,53 +2415,53 @@ exports[`disable nft on landing page does not render nft information and card 1`
         </div>
       </div>
       <div
-        class="c84"
+        class="c87"
       >
         <div
-          class="c85 c86"
+          class="c88 c89"
         >
           <img
             alt="Uniswap Logo"
-            class="c87"
+            class="c90"
             src="unicornEmbossLight.png"
           />
           <div
-            class="c88"
+            class="c91"
           >
             <a
-              class="c89"
+              class="c92"
               href="https://discord.gg/FCfyBSbCU5"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c90"
+                class="c93"
                 size="32"
               >
                 discord.svg
               </svg>
             </a>
             <a
-              class="c89"
+              class="c92"
               href="https://twitter.com/uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c91"
+                class="c94"
                 size="32"
               >
                 twitter-safe.svg
               </svg>
             </a>
             <a
-              class="c89"
+              class="c92"
               href="https://github.com/Uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c92"
+                class="c95"
                 size="32"
               >
                 github.svg
@@ -2410,7 +2469,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </a>
           </div>
           <span
-            class="c93"
+            class="c96"
           >
             © 
             2023
@@ -2418,45 +2477,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
           </span>
         </div>
         <div
-          class="c94"
+          class="c97"
         >
           <div
-            class="c95"
+            class="c98"
           >
             <span
-              class="c96"
+              class="c99"
             >
               App
             </span>
             <a
-              class="c97 c98"
+              class="c100 c101"
               href="/swap"
             >
               Swap
             </a>
             <a
-              class="c97 c98"
+              class="c100 c101"
               href="/tokens"
             >
               Tokens
             </a>
             <a
-              class="c97 c98"
+              class="c100 c101"
               href="/pools"
             >
               Pools
             </a>
           </div>
           <div
-            class="c95"
+            class="c98"
           >
             <span
-              class="c96"
+              class="c99"
             >
               Protocol
             </span>
             <a
-              class="c99 c100"
+              class="c102 c103"
               href="https://uniswap.org/community"
               rel="noopener noreferrer"
               target="_blank"
@@ -2464,7 +2523,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
               Community
             </a>
             <a
-              class="c99 c100"
+              class="c102 c103"
               href="https://uniswap.org/governance"
               rel="noopener noreferrer"
               target="_blank"
@@ -2472,7 +2531,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
               Governance
             </a>
             <a
-              class="c99 c100"
+              class="c102 c103"
               href="https://uniswap.org/developers"
               rel="noopener noreferrer"
               target="_blank"
@@ -2481,15 +2540,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </a>
           </div>
           <div
-            class="c95"
+            class="c98"
           >
             <span
-              class="c96"
+              class="c99"
             >
               Company
             </span>
             <a
-              class="c99 c100"
+              class="c102 c103"
               href="https://boards.greenhouse.io/uniswaplabs"
               rel="noopener noreferrer"
               target="_blank"
@@ -2497,7 +2556,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
               Careers
             </a>
             <a
-              class="c99 c100"
+              class="c102 c103"
               href="https://uniswap.org/blog"
               rel="noopener noreferrer"
               target="_blank"
@@ -2506,15 +2565,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </a>
           </div>
           <div
-            class="c95"
+            class="c98"
           >
             <span
-              class="c96"
+              class="c99"
             >
               Get Help
             </span>
             <a
-              class="c99 c100"
+              class="c102 c103"
               href="https://support.uniswap.org/hc/en-us/requests/new"
               rel="noopener noreferrer"
               target="_blank"
@@ -2522,7 +2581,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
               Contact Us
             </a>
             <a
-              class="c99 c100"
+              class="c102 c103"
               href="https://support.uniswap.org/hc/en-us"
               rel="noopener noreferrer"
               target="_blank"
@@ -2532,50 +2591,50 @@ exports[`disable nft on landing page does not render nft information and card 1`
           </div>
         </div>
         <div
-          class="c85 c101"
+          class="c88 c104"
         >
           <img
             alt="Uniswap Logo"
-            class="c87"
+            class="c90"
             src="unicornEmbossLight.png"
           />
           <div
-            class="c88"
+            class="c91"
           >
             <a
-              class="c89"
+              class="c92"
               href="https://discord.gg/FCfyBSbCU5"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c90"
+                class="c93"
                 size="32"
               >
                 discord.svg
               </svg>
             </a>
             <a
-              class="c89"
+              class="c92"
               href="https://twitter.com/uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c91"
+                class="c94"
                 size="32"
               >
                 twitter-safe.svg
               </svg>
             </a>
             <a
-              class="c89"
+              class="c92"
               href="https://github.com/Uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c92"
+                class="c95"
                 size="32"
               >
                 github.svg
@@ -2583,7 +2642,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </a>
           </div>
           <span
-            class="c93"
+            class="c96"
           >
             © 
             2023
@@ -2626,7 +2685,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   border-radius: 4px;
 }
 
-.c47 {
+.c50 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2667,6 +2726,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   justify-content: flex-start;
 }
 
+.c49 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  gap: 8px;
+}
+
 .c9 {
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
@@ -2688,7 +2765,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   color: #7D7D7D;
 }
 
-.c100 {
+.c103 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -2699,15 +2776,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   font-weight: 500;
 }
 
-.c100:hover {
+.c103:hover {
   opacity: 0.6;
 }
 
-.c100:active {
+.c103:active {
   opacity: 0.4;
 }
 
-.c98 {
+.c101 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -2718,36 +2795,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   font-weight: 500;
 }
 
-.c98:hover {
+.c101:hover {
   opacity: 0.6;
 }
 
-.c98:active {
+.c101:active {
   opacity: 0.4;
 }
 
-.c91 {
+.c94 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c92 {
+.c95 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c93 {
+.c96 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c85 {
+.c88 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2760,7 +2837,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   max-width: 1440px;
 }
 
-.c86 {
+.c89 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2770,24 +2847,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   flex-direction: column;
 }
 
-.c87 {
+.c90 {
   display: none;
 }
 
-.c102 {
+.c105 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c88 {
+.c91 {
   width: 72px;
   height: 72px;
   display: none;
 }
 
-.c89 {
+.c92 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2800,20 +2877,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   margin: 20px 0 0 0;
 }
 
-.c90 {
+.c93 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c95 {
+.c98 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
-.c96 {
+.c99 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2826,32 +2903,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   margin: 20px 0 0 0;
 }
 
-.c97 {
+.c100 {
   font-size: 16px;
   line-height: 20px;
   font-weight: 535;
 }
 
-.c101 {
+.c104 {
   font-size: 16px;
   line-height: 20px;
   color: #7D7D7D;
 }
 
-.c99 {
+.c102 {
   font-size: 16px;
   line-height: 20px;
   color: #7D7D7D;
 }
 
-.c94 {
+.c97 {
   font-size: 16px;
   line-height: 20px;
   margin: 1rem 0 0 0;
   color: #CECECE;
 }
 
-.c67 {
+.c70 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2879,11 +2956,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease border;
 }
 
-.c67:hover {
+.c70:hover {
   border: 1px solid #CECECE;
 }
 
-.c72 {
+.c75 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2911,11 +2988,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease border;
 }
 
-.c72:hover {
+.c75:hover {
   border: 1px solid #CECECE;
 }
 
-.c74 {
+.c77 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2943,11 +3020,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease border;
 }
 
-.c74:hover {
+.c77:hover {
   border: 1px solid #CECECE;
 }
 
-.c68 {
+.c71 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2962,13 +3039,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   justify-content: space-between;
 }
 
-.c69 {
+.c72 {
   font-size: 20px;
   line-height: 28px;
   font-weight: 535;
 }
 
-.c70 {
+.c73 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2983,7 +3060,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   max-width: 480px;
 }
 
-.c75 {
+.c78 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2998,7 +3075,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   max-width: 480px;
 }
 
-.c71 {
+.c74 {
   color: #FC72FF;
   font-weight: 535;
   margin: 24px 0 0;
@@ -3007,18 +3084,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease opacity;
 }
 
-.c71:hover {
+.c74:hover {
   opacity: 0.6;
 }
 
-.c76 {
+.c79 {
   min-width: 20px;
   min-height: 20px;
   max-height: 48px;
   max-width: 48px;
 }
 
-.c50 {
+.c53 {
   background-color: transparent;
   bottom: 0;
   border-radius: inherit;
@@ -3089,7 +3166,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   text-decoration: none;
 }
 
-.c82 {
+.c85 {
   padding: 16px;
   width: 200px;
   line-height: 24px;
@@ -3128,58 +3205,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transform: perspective(1px) translateZ(0);
 }
 
-.c82:disabled {
+.c85:disabled {
   opacity: 50%;
   cursor: auto;
   pointer-events: none;
 }
 
-.c82 > * {
+.c85 > * {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c82 > a {
+.c85 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c48 {
+.c51 {
   background-color: #FFEFFF;
   color: #FC72FF;
   font-size: 20px;
   font-weight: 535;
 }
 
-.c48:focus {
+.c51:focus {
   box-shadow: 0 0 0 1pt #FFEFFF;
   background-color: #FFEFFF;
 }
 
-.c48:hover {
+.c51:hover {
   background-color: #FFEFFF;
 }
 
-.c48:active {
+.c51:active {
   box-shadow: 0 0 0 1pt #FFEFFF;
   background-color: #FFEFFF;
 }
 
-.c48:hover .c49 {
+.c51:hover .c52 {
   background-color: #98A1C014;
 }
 
-.c48:active .c49 {
+.c51:active .c52 {
   background-color: #B8C0DC3d;
 }
 
-.c48:disabled {
+.c51:disabled {
   opacity: 0.4;
 }
 
-.c48:disabled:hover {
+.c51:disabled:hover {
   cursor: auto;
   background-color: transparent;
   box-shadow: none;
@@ -3203,7 +3280,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   background-color: #e0e0e0;
 }
 
-.c83 {
+.c86 {
   background-color: transparent;
   color: #FC72FF;
   display: -webkit-box;
@@ -3220,22 +3297,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   align-items: center;
 }
 
-.c83:focus {
+.c86:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c83:hover {
+.c86:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c83:active {
+.c86:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c83:disabled {
+.c86:disabled {
   opacity: 50%;
   cursor: auto;
 }
@@ -3269,7 +3346,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   cursor: auto;
 }
 
-.c77 {
+.c80 {
   height: 340px;
   width: 100%;
   border-radius: 32px;
@@ -3295,7 +3372,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
 }
 
-.c78 {
+.c81 {
   color: white;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3309,20 +3386,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   flex-direction: column;
 }
 
-.c79 {
+.c82 {
   font-weight: 535;
   font-size: 28px;
   line-height: 36px;
 }
 
-.c80 {
+.c83 {
   margin: 10px 10px 0 0;
   font-weight: 535;
   font-size: 16px;
   line-height: 20px;
 }
 
-.c81 {
+.c84 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3336,16 +3413,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease opacity;
 }
 
-.c81:hover {
+.c84:hover {
   opacity: 0.6;
 }
 
-.c84 {
+.c87 {
   color: white;
   border: 1px solid white;
 }
 
-.c43 {
+.c45 {
   display: grid;
   grid-auto-rows: auto;
   grid-row-gap: 4px;
@@ -3359,6 +3436,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: opacity 250ms ease-in-out;
 }
 
+.c41 {
+  border-radius: 12px;
+  border-radius: 12px;
+  height: 24px;
+  width: 50%;
+  width: 50%;
+  -webkit-animation: fAQEyV 1.5s infinite;
+  animation: fAQEyV 1.5s infinite;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  background: linear-gradient( to left, #22222212 25%, rgba(53,53,53,0.07) 50%, #22222212 75% );
+  will-change: background-position;
+  background-size: 400%;
+}
+
 .c14 {
   display: inline-block;
   height: inherit;
@@ -3441,6 +3533,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   color: #CECECE;
 }
 
+.c42 {
+  border-radius: 4px;
+  width: 4rem;
+  height: 1rem;
+}
+
 .c24 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3521,7 +3619,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   background-color: #B8C0DC3d;
 }
 
-.c45 {
+.c47 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3554,12 +3652,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   animation: none;
 }
 
-.c45:hover,
-.c45:active {
+.c47:hover,
+.c47:active {
   background-color: #FC72FF;
 }
 
-.c45:before {
+.c47:before {
   background-size: 100%;
   border-radius: inherit;
   position: absolute;
@@ -3570,11 +3668,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   content: '';
 }
 
-.c45:hover:before {
+.c47:hover:before {
   background-color: #98A1C014;
 }
 
-.c45:active:before {
+.c47:active:before {
   background-color: #B8C0DC3d;
 }
 
@@ -3654,13 +3752,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   stroke-width: 2px;
 }
 
-.c46 {
+.c48 {
   margin: 0 0.25rem 0 0.35rem;
   height: 35%;
   margin-left: 8px;
 }
 
-.c46 path {
+.c48 path {
   stroke: #FFFFFF;
   stroke-width: 2px;
 }
@@ -3728,7 +3826,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   padding-top: 12px;
 }
 
-.c41 {
+.c43 {
   border-radius: 12px;
   height: 40px;
   width: 40px;
@@ -3743,7 +3841,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   z-index: 2;
 }
 
-.c41:hover {
+.c43:hover {
   cursor: pointer;
   opacity: 0.8;
 }
@@ -3805,7 +3903,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   gap: 16px;
 }
 
-.c42 {
+.c44 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3856,7 +3954,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   border-color: #B8C0DC3d;
 }
 
-.c44 {
+.c46 {
   border-bottom: 1px solid #FFFFFF;
 }
 
@@ -3883,7 +3981,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   overflow-x: hidden;
 }
 
-.c51 {
+.c54 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3907,7 +4005,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   height: calc(100vh - 48px);
 }
 
-.c52 {
+.c55 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3928,7 +4026,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   height: calc(100vh - 48px);
 }
 
-.c53 {
+.c56 {
   position: absolute;
   top: 68px;
   bottom: 0;
@@ -3941,7 +4039,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   height: 100%;
 }
 
-.c54 {
+.c57 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3969,11 +4067,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   pointer-events: none;
 }
 
-.c54 * {
+.c57 * {
   pointer-events: auto;
 }
 
-.c55 {
+.c58 {
   color: transparent;
   font-size: 36px;
   line-height: 44px;
@@ -3985,7 +4083,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   -webkit-background-clip: text;
 }
 
-.c57 {
+.c60 {
   color: #7D7D7D;
   font-size: 16px;
   line-height: 24px;
@@ -3995,7 +4093,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   margin: 0 0 32px;
 }
 
-.c56 {
+.c59 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4006,12 +4104,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   justify-content: center;
 }
 
-.c59 {
+.c62 {
   padding: 16px 0px;
   border-radius: 24px;
 }
 
-.c60 {
+.c63 {
   background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
   border: none;
   color: #FFFFFF;
@@ -4019,24 +4117,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: all 250ms ease;
 }
 
-.c60:hover {
+.c63:hover {
   box-shadow: 0px 0px 16px 0px #ff00c7;
 }
 
-.c61 {
+.c64 {
   margin: 0px;
   font-size: 16px;
   font-weight: 535;
   white-space: nowrap;
 }
 
-.c58 {
+.c61 {
   max-width: 300px;
   width: 100%;
   pointer-events: auto;
 }
 
-.c62 {
+.c65 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -4056,16 +4154,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease opacity;
 }
 
-.c62:hover {
+.c65:hover {
   opacity: 0.6;
 }
 
-.c63 {
+.c66 {
   margin-left: 14px;
   size: 20px;
 }
 
-.c65 {
+.c68 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4082,7 +4180,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
 }
 
-.c66 {
+.c69 {
   display: grid;
   gap: 12px;
   width: 100%;
@@ -4095,7 +4193,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   grid-template-columns: 1fr;
 }
 
-.c73 {
+.c76 {
   display: grid;
   gap: 12px;
   width: 100%;
@@ -4149,7 +4247,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   width: 100%;
 }
 
-.c64 {
+.c67 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4165,12 +4263,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   text-align: center;
 }
 
-.c64:hover {
+.c67:hover {
   color: #CECECE;
 }
 
 @media screen and (min-width:1024px) {
-  .c85 {
+  .c88 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -4182,7 +4280,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c87 {
+  .c90 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -4191,75 +4289,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c102 {
+  .c105 {
     display: none;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c88 {
+  .c91 {
     display: block;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c95 {
+  .c98 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 24px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c96 {
+  .c99 {
     margin: 0;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c67 {
+  .c70 {
     height: 360px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c67 {
+  .c70 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c72 {
+  .c75 {
     height: 360px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c72 {
+  .c75 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c74 {
+  .c77 {
     height: 260px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c74 {
+  .c77 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c69 {
+  .c72 {
     font-size: 28px;
     line-height: 36px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c70 {
+  .c73 {
     font-size: 20px;
     line-height: 28px;
     max-width: 480px;
@@ -4267,7 +4365,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1280px) {
-  .c75 {
+  .c78 {
     font-size: 20px;
     line-height: 28px;
     max-width: 480px;
@@ -4275,7 +4373,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c77 {
+  .c80 {
     height: 140px;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -4284,21 +4382,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1280px) {
-  .c79 {
+  .c82 {
     font-size: 28px;
     line-height: 36px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c80 {
+  .c83 {
     font-size: 20px;
     line-height: 28px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c81 {
+  .c84 {
     width: auto;
   }
 }
@@ -4316,79 +4414,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c51 {
+  .c54 {
     height: 100vh;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c52 {
+  .c55 {
     height: 100vh;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c55 {
+  .c58 {
     font-size: 48px;
     line-height: 56px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c55 {
+  .c58 {
     font-size: 64px;
     line-height: 72px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c57 {
+  .c60 {
     font-size: 20px;
     line-height: 28px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c61 {
+  .c64 {
     font-size: 20px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c62 {
+  .c65 {
     visibility: visible;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c65 {
+  .c68 {
     padding: 0 96px 5rem;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c66 {
+  .c69 {
     grid-template-columns: 1fr 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c66 {
+  .c69 {
     grid-template-columns: 1fr 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c73 {
+  .c76 {
     grid-template-columns: 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c73 {
+  .c76 {
     grid-template-columns: 1fr 1fr 1fr;
     gap: 32px;
   }
@@ -4564,7 +4662,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                         >
                           <div
                             class="c40"
-                          />
+                          >
+                            <div
+                              class="c41 c42"
+                            />
+                          </div>
                           <span />
                         </div>
                       </div>
@@ -4572,10 +4674,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c41"
+                  class="c43"
                 >
                   <div
-                    class="c42"
+                    class="c44"
                     color="#222222"
                     data-testid="swap-currency-button"
                   >
@@ -4604,11 +4706,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                 </div>
               </div>
               <div
-                class="c43"
+                class="c45"
               >
                 <div>
                   <div
-                    class="c23 c44"
+                    class="c23 c46"
                   >
                     <div
                       class="c24"
@@ -4649,7 +4751,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                               class="c14"
                             >
                               <button
-                                class="c15 c16 c30 c45 open-currency-select-button"
+                                class="c15 c16 c30 c47 open-currency-select-button"
                               >
                                 <span
                                   class="c32"
@@ -4664,7 +4766,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                                     </span>
                                   </div>
                                   <svg
-                                    class="c46"
+                                    class="c48"
                                   >
                                     dropdown.svg
                                   </svg>
@@ -4681,7 +4783,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                           >
                             <div
                               class="c40"
-                            />
+                            >
+                              <div
+                                class="c7 c49"
+                              >
+                                <div
+                                  class="c26 css-142zc9n"
+                                >
+                                  <div
+                                    class="c14"
+                                  >
+                                    <div>
+                                      -
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
                             <span />
                           </div>
                         </div>
@@ -4691,11 +4809,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                 </div>
                 <div>
                   <button
-                    class="c47 c16 c48"
+                    class="c50 c16 c51"
                     font-weight="535"
                   >
                     <div
-                      class="c49 c50"
+                      class="c52 c53"
                     />
                     Connect Wallet
                   </button>
@@ -4707,52 +4825,52 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
       </a>
     </div>
     <div
-      class="c51"
+      class="c54"
     />
     <div
-      class="c52"
+      class="c55"
     >
       <div
-        class="c53"
+        class="c56"
       />
     </div>
     <div
-      class="c54"
+      class="c57"
     >
       <h1
-        class="c55"
+        class="c58"
       >
         Trade crypto and NFTs with confidence
       </h1>
       <div
-        class="c56"
+        class="c59"
       >
         <div
-          class="c57"
+          class="c60"
         >
           Buy, sell, and explore tokens and NFTs
         </div>
       </div>
       <span
-        class="c58"
+        class="c61"
       >
         <a
-          class="c2 c16 c59 c60"
+          class="c2 c16 c62 c63"
           href="/swap"
         >
           <p
-            class="c61"
+            class="c64"
           >
             Get started
           </p>
         </a>
       </span>
       <div
-        class="c62"
+        class="c65"
       >
         Learn more
         <svg
-          class="c63"
+          class="c66"
           fill="none"
           height="24"
           stroke="currentColor"
@@ -4780,7 +4898,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
         </svg>
       </div>
       <a
-        class="c64"
+        class="c67"
         href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1"
       >
         <svg
@@ -4797,32 +4915,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
       </a>
     </div>
     <div
-      class="c65"
+      class="c68"
     >
       <div
-        class="c66"
+        class="c69"
         cols="2"
       >
         <a
-          class="c67"
+          class="c70"
           href="/swap"
         >
           <div
-            class="c68"
+            class="c71"
           >
             <div
-              class="c69"
+              class="c72"
             >
               Swap tokens
             </div>
           </div>
           <div
-            class="c70"
+            class="c73"
             type="Primary"
           >
             Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
             <div
-              class="c70 c71"
+              class="c73 c74"
               type="Primary"
             >
               Trade Tokens
@@ -4830,25 +4948,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </div>
         </a>
         <a
-          class="c72"
+          class="c75"
           href="/nfts"
         >
           <div
-            class="c68"
+            class="c71"
           >
             <div
-              class="c69"
+              class="c72"
             >
               Trade NFTs
             </div>
           </div>
           <div
-            class="c70"
+            class="c73"
             type="Primary"
           >
             Buy and sell NFTs across marketplaces to find more listings at better prices.
             <div
-              class="c70 c71"
+              class="c73 c74"
               type="Primary"
             >
               Explore NFTs
@@ -4857,20 +4975,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
         </a>
       </div>
       <div
-        class="c73"
+        class="c76"
         cols="3"
       >
         <a
-          class="c74"
+          class="c77"
           href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
           rel="noopenener noreferrer"
           target="_blank"
         >
           <div
-            class="c68"
+            class="c71"
           >
             <div
-              class="c69"
+              class="c72"
             >
               Buy crypto
             </div>
@@ -4897,12 +5015,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </svg>
           </div>
           <div
-            class="c75"
+            class="c78"
             type="Secondary"
           >
             Buy crypto with your credit card or bank account at the best rates.
             <div
-              class="c75 c71"
+              class="c78 c74"
               type="Secondary"
             >
               Buy now
@@ -4910,30 +5028,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </div>
         </a>
         <a
-          class="c74"
+          class="c77"
           href="/pools"
         >
           <div
-            class="c68"
+            class="c71"
           >
             <div
-              class="c69"
+              class="c72"
             >
               Earn
             </div>
             <img
               alt="Analytics"
-              class="c76"
+              class="c79"
               src="aboutArrowLight.png"
             />
           </div>
           <div
-            class="c75"
+            class="c78"
             type="Secondary"
           >
             Provide liquidity to pools on Uniswap and earn fees on swaps.
             <div
-              class="c75 c71"
+              class="c78 c74"
               type="Secondary"
             >
               Provide liquidity
@@ -4941,16 +5059,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </div>
         </a>
         <a
-          class="c74"
+          class="c77"
           href="https://docs.uniswap.org"
           rel="noopenener noreferrer"
           target="_blank"
         >
           <div
-            class="c68"
+            class="c71"
           >
             <div
-              class="c69"
+              class="c72"
             >
               Build dApps
             </div>
@@ -4977,12 +5095,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </svg>
           </div>
           <div
-            class="c75"
+            class="c78"
             type="Secondary"
           >
             Build apps and tools on the largest DeFi protocol on Ethereum.
             <div
-              class="c75 c71"
+              class="c78 c74"
               type="Secondary"
             >
               Developer docs
@@ -4991,27 +5109,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
         </a>
       </div>
       <div
-        class="c77"
+        class="c80"
       >
         <div
-          class="c78"
+          class="c81"
         >
           <div
-            class="c79"
+            class="c82"
           >
             Powered by the Uniswap Protocol
           </div>
           <div
-            class="c80"
+            class="c83"
           >
             The leading decentralized crypto trading protocol, governed by a global community.
           </div>
         </div>
         <div
-          class="c81"
+          class="c84"
         >
           <a
-            class="c82 c83 c84"
+            class="c85 c86 c87"
             href="https://uniswap.org"
             rel="noopener noreferrer"
             target="_blank"
@@ -5022,53 +5140,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
         </div>
       </div>
       <div
-        class="c85"
+        class="c88"
       >
         <div
-          class="c86 c87"
+          class="c89 c90"
         >
           <img
             alt="Uniswap Logo"
-            class="c88"
+            class="c91"
             src="unicornEmbossLight.png"
           />
           <div
-            class="c89"
+            class="c92"
           >
             <a
-              class="c90"
+              class="c93"
               href="https://discord.gg/FCfyBSbCU5"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c91"
+                class="c94"
                 size="32"
               >
                 discord.svg
               </svg>
             </a>
             <a
-              class="c90"
+              class="c93"
               href="https://twitter.com/uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c92"
+                class="c95"
                 size="32"
               >
                 twitter-safe.svg
               </svg>
             </a>
             <a
-              class="c90"
+              class="c93"
               href="https://github.com/Uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c93"
+                class="c96"
                 size="32"
               >
                 github.svg
@@ -5076,7 +5194,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </a>
           </div>
           <span
-            class="c94"
+            class="c97"
           >
             © 
             2023
@@ -5084,51 +5202,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </span>
         </div>
         <div
-          class="c95"
+          class="c98"
         >
           <div
-            class="c96"
+            class="c99"
           >
             <span
-              class="c97"
+              class="c100"
             >
               App
             </span>
             <a
-              class="c98 c99"
+              class="c101 c102"
               href="/swap"
             >
               Swap
             </a>
             <a
-              class="c98 c99"
+              class="c101 c102"
               href="/tokens"
             >
               Tokens
             </a>
             <a
-              class="c98 c99"
+              class="c101 c102"
               href="/nfts"
             >
               NFTs
             </a>
             <a
-              class="c98 c99"
+              class="c101 c102"
               href="/pools"
             >
               Pools
             </a>
           </div>
           <div
-            class="c96"
+            class="c99"
           >
             <span
-              class="c97"
+              class="c100"
             >
               Protocol
             </span>
             <a
-              class="c100 c101"
+              class="c103 c104"
               href="https://uniswap.org/community"
               rel="noopener noreferrer"
               target="_blank"
@@ -5136,7 +5254,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
               Community
             </a>
             <a
-              class="c100 c101"
+              class="c103 c104"
               href="https://uniswap.org/governance"
               rel="noopener noreferrer"
               target="_blank"
@@ -5144,7 +5262,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
               Governance
             </a>
             <a
-              class="c100 c101"
+              class="c103 c104"
               href="https://uniswap.org/developers"
               rel="noopener noreferrer"
               target="_blank"
@@ -5153,15 +5271,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </a>
           </div>
           <div
-            class="c96"
+            class="c99"
           >
             <span
-              class="c97"
+              class="c100"
             >
               Company
             </span>
             <a
-              class="c100 c101"
+              class="c103 c104"
               href="https://boards.greenhouse.io/uniswaplabs"
               rel="noopener noreferrer"
               target="_blank"
@@ -5169,7 +5287,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
               Careers
             </a>
             <a
-              class="c100 c101"
+              class="c103 c104"
               href="https://uniswap.org/blog"
               rel="noopener noreferrer"
               target="_blank"
@@ -5178,15 +5296,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </a>
           </div>
           <div
-            class="c96"
+            class="c99"
           >
             <span
-              class="c97"
+              class="c100"
             >
               Get Help
             </span>
             <a
-              class="c100 c101"
+              class="c103 c104"
               href="https://support.uniswap.org/hc/en-us/requests/new"
               rel="noopener noreferrer"
               target="_blank"
@@ -5194,7 +5312,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
               Contact Us
             </a>
             <a
-              class="c100 c101"
+              class="c103 c104"
               href="https://support.uniswap.org/hc/en-us"
               rel="noopener noreferrer"
               target="_blank"
@@ -5204,50 +5322,50 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </div>
         </div>
         <div
-          class="c86 c102"
+          class="c89 c105"
         >
           <img
             alt="Uniswap Logo"
-            class="c88"
+            class="c91"
             src="unicornEmbossLight.png"
           />
           <div
-            class="c89"
+            class="c92"
           >
             <a
-              class="c90"
+              class="c93"
               href="https://discord.gg/FCfyBSbCU5"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c91"
+                class="c94"
                 size="32"
               >
                 discord.svg
               </svg>
             </a>
             <a
-              class="c90"
+              class="c93"
               href="https://twitter.com/uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c92"
+                class="c95"
                 size="32"
               >
                 twitter-safe.svg
               </svg>
             </a>
             <a
-              class="c90"
+              class="c93"
               href="https://github.com/Uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c93"
+                class="c96"
                 size="32"
               >
                 github.svg
@@ -5255,7 +5373,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </a>
           </div>
           <span
-            class="c94"
+            class="c97"
           >
             © 
             2023
diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx
index e342d135ea..736b389544 100644
--- a/src/pages/Swap/index.tsx
+++ b/src/pages/Swap/index.tsx
@@ -323,10 +323,19 @@ export function Swap({
     [independentField, parsedAmount, showWrap, trade]
   )
 
-  const fiatValueInput = useUSDPrice(parsedAmounts[Field.INPUT], currencies[Field.INPUT] ?? undefined)
-  const fiatValueOutput = useUSDPrice(parsedAmounts[Field.OUTPUT], currencies[Field.OUTPUT] ?? undefined)
-  const showFiatValueInput = Boolean(parsedAmounts[Field.INPUT])
-  const showFiatValueOutput = Boolean(parsedAmounts[Field.OUTPUT])
+  const getSingleUnitAmount = (currency?: Currency) => {
+    if (!currency) return
+    return CurrencyAmount.fromRawAmount(currency, JSBI.BigInt(10 ** currency.decimals))
+  }
+
+  const fiatValueInput = useUSDPrice(
+    parsedAmounts[Field.INPUT] ?? getSingleUnitAmount(currencies[Field.INPUT]),
+    currencies[Field.INPUT]
+  )
+  const fiatValueOutput = useUSDPrice(
+    parsedAmounts[Field.OUTPUT] ?? getSingleUnitAmount(currencies[Field.OUTPUT]),
+    currencies[Field.OUTPUT]
+  )
 
   const [routeNotFound, routeIsLoading, routeIsSyncing] = useMemo(
     () => [
@@ -632,7 +641,7 @@ export function Swap({
               currency={currencies[Field.INPUT] ?? null}
               onUserInput={handleTypeInput}
               onMax={handleMaxInput}
-              fiatValue={showFiatValueInput ? fiatValueInput : undefined}
+              fiatValue={fiatValueInput}
               onCurrencySelect={handleInputSelect}
               otherCurrency={currencies[Field.OUTPUT]}
               showCommonBases
@@ -673,7 +682,7 @@ export function Swap({
                 label={<Trans>You receive</Trans>}
                 showMaxButton={false}
                 hideBalance={false}
-                fiatValue={showFiatValueOutput ? fiatValueOutput : undefined}
+                fiatValue={fiatValueOutput}
                 priceImpact={stablecoinPriceImpact}
                 currency={currencies[Field.OUTPUT] ?? null}
                 onCurrencySelect={handleOutputSelect}
diff --git a/src/state/swap/hooks.tsx b/src/state/swap/hooks.tsx
index 7ca5c89987..df5b46db6a 100644
--- a/src/state/swap/hooks.tsx
+++ b/src/state/swap/hooks.tsx
@@ -78,7 +78,7 @@ const BAD_RECIPIENT_ADDRESSES: { [address: string]: true } = {
 }
 
 export type SwapInfo = {
-  currencies: { [field in Field]?: Currency | null }
+  currencies: { [field in Field]?: Currency }
   currencyBalances: { [field in Field]?: CurrencyAmount<Currency> }
   inputTax: Percent
   outputTax: Percent
@@ -148,7 +148,7 @@ export function useDerivedSwapInfo(state: SwapState, chainId: ChainId | undefine
     [relevantTokenBalances]
   )
 
-  const currencies: { [field in Field]?: Currency | null } = useMemo(
+  const currencies: { [field in Field]?: Currency } = useMemo(
     () => ({
       [Field.INPUT]: inputCurrency,
       [Field.OUTPUT]: outputCurrency,