Provide liquidity
@@ -4897,10 +2281,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
target="_blank"
>
Build dApps
@@ -4932,7 +2316,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
>
Build apps and tools on the largest DeFi protocol on Ethereum.
Developer docs
@@ -5056,12 +2440,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
>
Tokens
-
- NFTs
-
`;
+
+exports[`disable nft on landing page renders nft information and card 1`] = `
+.c7 {
+ box-sizing: border-box;
+ margin: 0;
+ min-width: 0;
+}
+
+.c15 {
+ box-sizing: border-box;
+ margin: 0;
+ min-width: 0;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ display: inline-block;
+ text-align: center;
+ line-height: inherit;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ font-size: inherit;
+ padding-left: 16px;
+ padding-right: 16px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ color: white;
+ background-color: primary;
+ border: 0;
+ border-radius: 4px;
+}
+
+.c47 {
+ box-sizing: border-box;
+ margin: 0;
+ min-width: 0;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ display: inline-block;
+ text-align: center;
+ line-height: inherit;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ font-size: inherit;
+ padding-left: 16px;
+ padding-right: 16px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ color: white;
+ background-color: primary;
+ border: 0;
+ border-radius: 4px;
+ font-weight: 535;
+}
+
+.c8 {
+ 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;
+}
+
+.c9 {
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+.c11 {
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+.c13 {
+ color: #222222;
+}
+
+.c26 {
+ color: #7D7D7D;
+}
+
+.c100 {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ cursor: pointer;
+ -webkit-transition-duration: 125ms;
+ transition-duration: 125ms;
+ color: #FC72FF;
+ stroke: #FC72FF;
+ font-weight: 500;
+}
+
+.c100:hover {
+ opacity: 0.6;
+}
+
+.c100:active {
+ opacity: 0.4;
+}
+
+.c98 {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ cursor: pointer;
+ -webkit-transition-duration: 125ms;
+ transition-duration: 125ms;
+ color: #FC72FF;
+ stroke: #FC72FF;
+ font-weight: 500;
+}
+
+.c98:hover {
+ opacity: 0.6;
+}
+
+.c98:active {
+ opacity: 0.4;
+}
+
+.c91 {
+ height: 32px;
+ width: 32px;
+ fill: #98A1C0;
+ opacity: 1;
+}
+
+.c92 {
+ height: 32px;
+ width: 32px;
+ fill: #98A1C0;
+ opacity: 1;
+}
+
+.c93 {
+ height: 32px;
+ width: 32px;
+ fill: #98A1C0;
+ opacity: 1;
+}
+
+.c85 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ width: 100%;
+ gap: 48px;
+ max-width: 1440px;
+}
+
+.c86 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.c87 {
+ display: none;
+}
+
+.c102 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.c88 {
+ width: 72px;
+ height: 72px;
+ display: none;
+}
+
+.c89 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 20px;
+ margin: 20px 0 0 0;
+}
+
+.c90 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.c95 {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
+}
+
+.c96 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ gap: 12px;
+ width: 200px;
+ margin: 20px 0 0 0;
+}
+
+.c97 {
+ font-size: 16px;
+ line-height: 20px;
+ font-weight: 535;
+}
+
+.c101 {
+ font-size: 16px;
+ line-height: 20px;
+ color: #7D7D7D;
+}
+
+.c99 {
+ font-size: 16px;
+ line-height: 20px;
+ color: #7D7D7D;
+}
+
+.c94 {
+ font-size: 16px;
+ line-height: 20px;
+ margin: 1rem 0 0 0;
+ color: #CECECE;
+}
+
+.c67 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: white url(swapCard.png);
+ background-size: auto 100%;
+ background-position: right;
+ background-repeat: no-repeat;
+ background-origin: border-box;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: #222222;
+ padding: 24px;
+ height: 212px;
+ border-radius: 24px;
+ border: 1px solid transparent;
+ -webkit-transition: 250ms ease border;
+ transition: 250ms ease border;
+}
+
+.c67:hover {
+ border: 1px solid #CECECE;
+}
+
+.c72 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: white url(nftCard.png);
+ background-size: auto 100%;
+ background-position: right;
+ background-repeat: no-repeat;
+ background-origin: border-box;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: #222222;
+ padding: 24px;
+ height: 212px;
+ border-radius: 24px;
+ border: 1px solid transparent;
+ -webkit-transition: 250ms ease border;
+ transition: 250ms ease border;
+}
+
+.c72:hover {
+ border: 1px solid #CECECE;
+}
+
+.c74 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ background: #F9F9F9 url(undefined);
+ background-size: auto 100%;
+ background-position: right;
+ background-repeat: no-repeat;
+ background-origin: border-box;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: #222222;
+ padding: 24px;
+ height: 212px;
+ border-radius: 24px;
+ border: 1px solid #22222212;
+ -webkit-transition: 250ms ease border;
+ transition: 250ms ease border;
+}
+
+.c74:hover {
+ border: 1px solid #CECECE;
+}
+
+.c68 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+.c69 {
+ font-size: 20px;
+ line-height: 28px;
+ font-weight: 535;
+}
+
+.c70 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ font-size: 16px;
+ line-height: 20px;
+ color: #222222;
+ padding: 0 40px 0 0;
+ max-width: 480px;
+}
+
+.c75 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ font-size: 16px;
+ line-height: 20px;
+ color: #7D7D7D;
+ padding: 0 40px 0 0;
+ max-width: 480px;
+}
+
+.c71 {
+ color: #FC72FF;
+ font-weight: 535;
+ margin: 24px 0 0;
+ cursor: pointer;
+ -webkit-transition: 250ms ease opacity;
+ transition: 250ms ease opacity;
+}
+
+.c71:hover {
+ opacity: 0.6;
+}
+
+.c76 {
+ min-width: 20px;
+ min-height: 20px;
+ max-height: 48px;
+ max-width: 48px;
+}
+
+.c50 {
+ background-color: transparent;
+ bottom: 0;
+ border-radius: inherit;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ -webkit-transition: 150ms ease background-color;
+ transition: 150ms ease background-color;
+ width: 100%;
+}
+
+.c16 {
+ padding: 16px;
+ width: 100%;
+ line-height: 24px;
+ font-weight: 535;
+ text-align: center;
+ border-radius: 16px;
+ outline: none;
+ border: 1px solid transparent;
+ color: #222222;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ cursor: pointer;
+ position: relative;
+ z-index: 1;
+ will-change: transform;
+ -webkit-transition: -webkit-transform 450ms ease;
+ -webkit-transition: transform 450ms ease;
+ transition: transform 450ms ease;
+ -webkit-transform: perspective(1px) translateZ(0);
+ -ms-transform: perspective(1px) translateZ(0);
+ transform: perspective(1px) translateZ(0);
+}
+
+.c16:disabled {
+ opacity: 50%;
+ cursor: auto;
+ pointer-events: none;
+}
+
+.c16 > * {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.c16 > a {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c82 {
+ padding: 16px;
+ width: 200px;
+ line-height: 24px;
+ font-weight: 535;
+ text-align: center;
+ border-radius: 16px;
+ outline: none;
+ border: 1px solid transparent;
+ color: #222222;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ cursor: pointer;
+ position: relative;
+ z-index: 1;
+ will-change: transform;
+ -webkit-transition: -webkit-transform 450ms ease;
+ -webkit-transition: transform 450ms ease;
+ transition: transform 450ms ease;
+ -webkit-transform: perspective(1px) translateZ(0);
+ -ms-transform: perspective(1px) translateZ(0);
+ transform: perspective(1px) translateZ(0);
+}
+
+.c82:disabled {
+ opacity: 50%;
+ cursor: auto;
+ pointer-events: none;
+}
+
+.c82 > * {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.c82 > a {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c48 {
+ background-color: #FFEFFF;
+ color: #FC72FF;
+ font-size: 20px;
+ font-weight: 535;
+}
+
+.c48:focus {
+ box-shadow: 0 0 0 1pt #FFEFFF;
+ background-color: #FFEFFF;
+}
+
+.c48:hover {
+ background-color: #FFEFFF;
+}
+
+.c48:active {
+ box-shadow: 0 0 0 1pt #FFEFFF;
+ background-color: #FFEFFF;
+}
+
+.c48:hover .c49 {
+ background-color: #98A1C014;
+}
+
+.c48:active .c49 {
+ background-color: #B8C0DC3d;
+}
+
+.c48:disabled {
+ opacity: 0.4;
+}
+
+.c48:disabled:hover {
+ cursor: auto;
+ background-color: transparent;
+ box-shadow: none;
+ border: 1px solid transparent;
+ outline: none;
+}
+
+.c30 {
+ background-color: #FFFFFF;
+ color: #7D7D7D;
+ border: 1px solid #22222212;
+ font-size: 16px;
+ font-weight: 535;
+}
+
+.c30:hover {
+ background-color: #ececec;
+}
+
+.c30:active {
+ background-color: #e0e0e0;
+}
+
+.c83 {
+ background-color: transparent;
+ color: #FC72FF;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.c83:focus {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+.c83:hover {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c83:active {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c83:disabled {
+ opacity: 50%;
+ cursor: auto;
+}
+
+.c17 {
+ padding: 0;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+ background: none;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c17:focus {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+.c17:hover {
+ opacity: 0.9;
+}
+
+.c17:active {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+.c17:disabled {
+ opacity: 50%;
+ cursor: auto;
+}
+
+.c77 {
+ height: 340px;
+ width: 100%;
+ border-radius: 32px;
+ max-width: 1440px;
+ margin: 80px 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ padding: 32px 48px;
+ box-shadow: 0px 10px 24px rgba(51,53,72,0.04);
+ background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
+}
+
+.c78 {
+ color: white;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.c79 {
+ font-weight: 535;
+ font-size: 28px;
+ line-height: 36px;
+}
+
+.c80 {
+ margin: 10px 10px 0 0;
+ font-weight: 535;
+ font-size: 16px;
+ line-height: 20px;
+}
+
+.c81 {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-transition: 250ms ease opacity;
+ transition: 250ms ease opacity;
+}
+
+.c81:hover {
+ opacity: 0.6;
+}
+
+.c84 {
+ color: white;
+ border: 1px solid white;
+}
+
+.c43 {
+ display: grid;
+ grid-auto-rows: auto;
+ grid-row-gap: 4px;
+}
+
+.c40 {
+ -webkit-filter: none;
+ filter: none;
+ opacity: 1;
+ -webkit-transition: opacity 250ms ease-in-out;
+ transition: opacity 250ms ease-in-out;
+}
+
+.c14 {
+ display: inline-block;
+ height: inherit;
+}
+
+.c35 {
+ opacity: 0;
+ -webkit-transition: opacity 250ms ease-in;
+ transition: opacity 250ms ease-in;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+}
+
+.c34 {
+ width: 24px;
+ height: 24px;
+ background: #22222212;
+ -webkit-transition: background-color 250ms ease-in;
+ transition: background-color 250ms ease-in;
+ box-shadow: 0 0 1px white;
+ border-radius: 50%;
+}
+
+.c33 {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.c28 {
+ color: #222222;
+ pointer-events: auto;
+ width: 0;
+ position: relative;
+ font-weight: 485;
+ outline: none;
+ border: none;
+ -webkit-flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ background-color: transparent;
+ font-size: 28px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding: 0px;
+ -webkit-appearance: textfield;
+ text-align: right;
+}
+
+.c28::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+.c28 [type='number'] {
+ -moz-appearance: textfield;
+}
+
+.c28::-webkit-outer-spin-button,
+.c28::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+}
+
+.c28::-webkit-input-placeholder {
+ color: #CECECE;
+}
+
+.c28::-moz-placeholder {
+ color: #CECECE;
+}
+
+.c28:-ms-input-placeholder {
+ color: #CECECE;
+}
+
+.c28::placeholder {
+ color: #CECECE;
+}
+
+.c24 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: column nowrap;
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap;
+ position: relative;
+ border-radius: 20px;
+ z-index: 1;
+ width: initial;
+ -webkit-transition: height 1s ease;
+ transition: height 1s ease;
+ will-change: height;
+}
+
+.c25 {
+ min-height: 44px;
+ border-radius: 20px;
+ width: initial;
+}
+
+.c31 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: #FFFFFF;
+ opacity: 1;
+ color: #222222;
+ cursor: pointer;
+ height: 36px;
+ border-radius: 18px;
+ outline: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ border: 1px solid #22222212;
+ font-size: 24px;
+ font-weight: 485;
+ width: initial;
+ padding: 4px 8px 4px 4px;
+ gap: 8px;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ margin-left: 12px;
+ box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04);
+ visibility: visible;
+ -webkit-animation: none;
+ animation: none;
+}
+
+.c31:hover,
+.c31:active {
+ background-color: #F9F9F9;
+}
+
+.c31:before {
+ background-size: 100%;
+ border-radius: inherit;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: '';
+}
+
+.c31:hover:before {
+ background-color: #98A1C014;
+}
+
+.c31:active:before {
+ background-color: #B8C0DC3d;
+}
+
+.c45 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: #FC72FF;
+ opacity: 1;
+ color: #FFFFFF;
+ cursor: pointer;
+ height: 36px;
+ border-radius: 18px;
+ outline: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ border: 1px solid #FC72FF;
+ font-size: 24px;
+ font-weight: 485;
+ width: initial;
+ padding: 6px 6px 6px 8px;
+ gap: 8px;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ margin-left: 12px;
+ box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04);
+ visibility: visible;
+ -webkit-animation: none;
+ animation: none;
+}
+
+.c45:hover,
+.c45:active {
+ background-color: #FC72FF;
+}
+
+.c45:before {
+ background-size: 100%;
+ border-radius: inherit;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: '';
+}
+
+.c45:hover:before {
+ background-color: #98A1C014;
+}
+
+.c45:active:before {
+ background-color: #B8C0DC3d;
+}
+
+.c27 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: row nowrap;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+.c38 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-flow: row nowrap;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #7D7D7D;
+ font-size: 0.75rem;
+ line-height: 1rem;
+}
+
+.c38 span:hover {
+ cursor: pointer;
+ color: #4a4a4a;
+}
+
+.c39 {
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ min-height: 24px;
+ padding: 8px 0px 0px 0px;
+}
+
+.c32 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ width: 100%;
+}
+
+.c37 {
+ margin: 0 0.25rem 0 0.35rem;
+ height: 35%;
+ margin-left: 8px;
+}
+
+.c37 path {
+ stroke: #222222;
+ stroke-width: 2px;
+}
+
+.c46 {
+ margin: 0 0.25rem 0 0.35rem;
+ height: 35%;
+ margin-left: 8px;
+}
+
+.c46 path {
+ stroke: #FFFFFF;
+ stroke-width: 2px;
+}
+
+.c36 {
+ margin: 0 0.25rem 0 0.25rem;
+ font-size: 20px;
+ font-weight: 535;
+}
+
+.c29 {
+ -webkit-filter: none;
+ filter: none;
+ opacity: 1;
+ -webkit-transition: opacity 250ms ease-in-out;
+ transition: opacity 250ms ease-in-out;
+ text-align: left;
+ font-size: 36px;
+ font-weight: 485;
+ max-height: 44px;
+}
+
+.c3 {
+ padding: 68px 8px 0px;
+ max-width: 480px;
+ width: 100%;
+}
+
+.c4 {
+ position: relative;
+ z-index: 1;
+ border: 1px solid #22222212;
+ -webkit-transition: -webkit-transform 250ms ease;
+ -webkit-transition: transform 250ms ease;
+ transition: transform 250ms ease;
+ border-radius: 24px;
+}
+
+.c4:before {
+ content: ' ';
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ position: absolute;
+ inset: 0;
+ -webkit-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+ -webkit-filter: blur(50px);
+ filter: blur(50px);
+ background-color: rgba(252,114,255,0.075);
+ z-index: -2;
+}
+
+.c4:hover {
+ border: 1px solid #22222212;
+}
+
+.c6 {
+ border-radius: 24px;
+ background: #FFFFFF;
+ z-index: -1;
+ padding: 8px;
+ padding-top: 12px;
+}
+
+.c41 {
+ border-radius: 12px;
+ height: 40px;
+ width: 40px;
+ position: relative;
+ margin-top: -18px;
+ margin-bottom: -18px;
+ margin-left: auto;
+ margin-right: auto;
+ background-color: #F9F9F9;
+ border: 4px solid;
+ border-color: #FFFFFF;
+ z-index: 2;
+}
+
+.c41:hover {
+ cursor: pointer;
+ opacity: 0.8;
+}
+
+.c22 {
+ height: 24px;
+ width: 24px;
+}
+
+.c22 > * {
+ fill: #7D7D7D;
+}
+
+.c20 {
+ border: none;
+ background-color: transparent;
+ margin: 0;
+ padding: 0;
+ cursor: pointer;
+ outline: none;
+}
+
+.c20:not([disabled]):hover {
+ opacity: 0.7;
+}
+
+.c21 {
+ padding: 6px 12px;
+ border-radius: 16px;
+}
+
+.c19 {
+ position: relative;
+}
+
+.c18 {
+ color: #7D7D7D;
+ gap: 4px;
+ font-weight: 485;
+}
+
+.c18:focus {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c18:active {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c10 {
+ margin-bottom: 10px;
+ color: #7D7D7D;
+}
+
+.c12 {
+ padding: 0 12px;
+ gap: 16px;
+}
+
+.c42 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+}
+
+.c23 {
+ background-color: #F9F9F9;
+ border-radius: 16px;
+ color: #7D7D7D;
+ font-size: 14px;
+ font-weight: 500;
+ height: 120px;
+ line-height: 20px;
+ padding: 16px;
+ position: relative;
+}
+
+.c23:before {
+ box-sizing: border-box;
+ background-size: 100%;
+ border-radius: inherit;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ content: '';
+ border: 1px solid #F9F9F9;
+}
+
+.c23:hover:before {
+ border-color: #98A1C014;
+}
+
+.c23:focus-within:before {
+ border-color: #B8C0DC3d;
+}
+
+.c44 {
+ border-bottom: 1px solid #FFFFFF;
+}
+
+.c0 {
+ position: absolute;
+ top: 0;
+ padding: 72px 0px 0px 0px;
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-scroll-behavior: smooth;
+ -moz-scroll-behavior: smooth;
+ -ms-scroll-behavior: smooth;
+ scroll-behavior: smooth;
+ overflow-x: hidden;
+}
+
+.c51 {
+ position: absolute;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ top: 0;
+ bottom: 0;
+ width: 100%;
+ min-height: 550px;
+ background: linear-gradient(rgba(255,255,255,0) 0%,rgb(255 255 255 /100%) 45%);
+ z-index: 990;
+ pointer-events: none;
+ height: calc(100vh - 48px);
+}
+
+.c52 {
+ position: absolute;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ top: 0;
+ bottom: 0;
+ width: 100%;
+ overflow-y: hidden;
+ height: calc(100vh - 48px);
+}
+
+.c53 {
+ position: absolute;
+ top: 68px;
+ bottom: 0;
+ background: radial-gradient(72.04% 72.04% at 50% 3.99%,#ff37eb 0%,rgba(166,151,255,0) 100%);
+ -webkit-filter: blur(72px);
+ filter: blur(72px);
+ border-radius: 24px;
+ max-width: 480px;
+ width: 100%;
+ height: 100%;
+}
+
+.c54 {
+ position: absolute;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ width: 100%;
+ padding: 0 0 40px;
+ max-width: min(720px,90%);
+ min-height: 535px;
+ z-index: 990;
+ -webkit-transition: 250ms ease opacity;
+ transition: 250ms ease opacity;
+ height: calc(100vh - 120px);
+ pointer-events: none;
+}
+
+.c54 * {
+ pointer-events: auto;
+}
+
+.c55 {
+ color: transparent;
+ font-size: 36px;
+ line-height: 44px;
+ font-weight: 535;
+ text-align: center;
+ margin: 0 0 24px;
+ background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+}
+
+.c57 {
+ color: #7D7D7D;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 535;
+ text-align: center;
+ max-width: 500px;
+ margin: 0 0 32px;
+}
+
+.c56 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+.c59 {
+ padding: 16px 0px;
+ border-radius: 24px;
+}
+
+.c60 {
+ background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
+ border: none;
+ color: #FFFFFF;
+ -webkit-transition: all 250ms ease;
+ transition: all 250ms ease;
+}
+
+.c60:hover {
+ box-shadow: 0px 0px 16px 0px #ff00c7;
+}
+
+.c61 {
+ margin: 0px;
+ font-size: 16px;
+ font-weight: 535;
+ white-space: nowrap;
+}
+
+.c58 {
+ max-width: 300px;
+ width: 100%;
+ pointer-events: auto;
+}
+
+.c62 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: #CECECE;
+ cursor: pointer;
+ font-size: 20px;
+ font-weight: 535;
+ margin: 36px 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ visibility: hidden;
+ pointer-events: auto;
+ -webkit-transition: 250ms ease opacity;
+ transition: 250ms ease opacity;
+}
+
+.c62:hover {
+ opacity: 0.6;
+}
+
+.c63 {
+ margin-left: 14px;
+ size: 20px;
+}
+
+.c65 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 24px 5rem;
+ width: 100%;
+ background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
+}
+
+.c66 {
+ display: grid;
+ gap: 12px;
+ width: 100%;
+ padding: 24px 0 0;
+ max-width: 1440px;
+ -webkit-scroll-margin: 72px 0 0;
+ -moz-scroll-margin: 72px 0 0;
+ -ms-scroll-margin: 72px 0 0;
+ scroll-margin: 72px 0 0;
+ grid-template-columns: 1fr;
+}
+
+.c73 {
+ display: grid;
+ gap: 12px;
+ width: 100%;
+ padding: 24px 0 0;
+ max-width: 1440px;
+ -webkit-scroll-margin: 72px 0 0;
+ -moz-scroll-margin: 72px 0 0;
+ -ms-scroll-margin: 72px 0 0;
+ scroll-margin: 72px 0 0;
+ grid-template-columns: 1fr;
+}
+
+.c1 {
+ height: calc(100vh - 48px);
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ z-index: 1;
+}
+
+.c5 * {
+ pointer-events: none;
+}
+
+.c5:hover {
+ -webkit-transform: translateY(-4px);
+ -ms-transform: translateY(-4px);
+ transform: translateY(-4px);
+ -webkit-transition: -webkit-transform 250ms ease;
+ -webkit-transition: transform 250ms ease;
+ transition: transform 250ms ease;
+}
+
+.c5:hover {
+ border: 1px solid #FC72FF;
+}
+
+.c2 {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ max-width: 480px;
+ width: 100%;
+}
+
+.c64 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ gap: 8px;
+ margin-top: 24px;
+ color: #7D7D7D;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 535;
+ text-align: center;
+}
+
+.c64:hover {
+ color: #CECECE;
+}
+
+@media screen and (min-width:1024px) {
+ .c85 {
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ }
+}
+
+@media screen and (min-width:1024px) {
+ .c87 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ }
+}
+
+@media screen and (min-width:1024px) {
+ .c102 {
+ display: none;
+ }
+}
+
+@media screen and (min-width:1024px) {
+ .c88 {
+ display: block;
+ }
+}
+
+@media screen and (min-width:1280px) {
+ .c95 {
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ gap: 24px;
+ }
+}
+
+@media screen and (min-width:1280px) {
+ .c96 {
+ margin: 0;
+ }
+}
+
+@media screen and (min-width:640px) {
+ .c67 {
+ height: 360px;
+ }
+}
+
+@media screen and (min-width:1280px) {
+ .c67 {
+ padding: 32px;
+ }
+}
+
+@media screen and (min-width:640px) {
+ .c72 {
+ height: 360px;
+ }
+}
+
+@media screen and (min-width:1280px) {
+ .c72 {
+ padding: 32px;
+ }
+}
+
+@media screen and (min-width:640px) {
+ .c74 {
+ height: 260px;
+ }
+}
+
+@media screen and (min-width:1280px) {
+ .c74 {
+ padding: 32px;
+ }
+}
+
+@media screen and (min-width:1024px) {
+ .c69 {
+ font-size: 28px;
+ line-height: 36px;
+ }
+}
+
+@media screen and (min-width:1280px) {
+ .c70 {
+ font-size: 20px;
+ line-height: 28px;
+ max-width: 480px;
+ }
+}
+
+@media screen and (min-width:1280px) {
+ .c75 {
+ font-size: 20px;
+ line-height: 28px;
+ max-width: 480px;
+ }
+}
+
+@media screen and (min-width:1024px) {
+ .c77 {
+ height: 140px;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
+}
+
+@media screen and (min-width:1280px) {
+ .c79 {
+ font-size: 28px;
+ line-height: 36px;
+ }
+}
+
+@media screen and (min-width:1280px) {
+ .c80 {
+ font-size: 20px;
+ line-height: 28px;
+ }
+}
+
+@media screen and (min-width:1024px) {
+ .c81 {
+ width: auto;
+ }
+}
+
+@media only screen and (max-width:768px) {
+ .c3 {
+ padding-top: 48px;
+ }
+}
+
+@media only screen and (max-width:640px) {
+ .c3 {
+ padding-top: 20px;
+ }
+}
+
+@media screen and (min-width:768px) {
+ .c51 {
+ height: 100vh;
+ }
+}
+
+@media screen and (min-width:768px) {
+ .c52 {
+ height: 100vh;
+ }
+}
+
+@media screen and (min-width:640px) {
+ .c55 {
+ font-size: 48px;
+ line-height: 56px;
+ }
+}
+
+@media screen and (min-width:768px) {
+ .c55 {
+ font-size: 64px;
+ line-height: 72px;
+ }
+}
+
+@media screen and (min-width:768px) {
+ .c57 {
+ font-size: 20px;
+ line-height: 28px;
+ }
+}
+
+@media screen and (min-width:640px) {
+ .c61 {
+ font-size: 20px;
+ }
+}
+
+@media screen and (min-width:640px) {
+ .c62 {
+ visibility: visible;
+ }
+}
+
+@media screen and (min-width:768px) {
+ .c65 {
+ padding: 0 96px 5rem;
+ }
+}
+
+@media screen and (min-width:640px) {
+ .c66 {
+ grid-template-columns: 1fr 1fr;
+ gap: 32px;
+ }
+}
+
+@media screen and (min-width:1024px) {
+ .c66 {
+ grid-template-columns: 1fr 1fr;
+ gap: 32px;
+ }
+}
+
+@media screen and (min-width:640px) {
+ .c73 {
+ grid-template-columns: 1fr;
+ gap: 32px;
+ }
+}
+
+@media screen and (min-width:1024px) {
+ .c73 {
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 32px;
+ }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Powered by the Uniswap Protocol
+
+
+ The leading decentralized crypto trading protocol, governed by a global community.
+
+
+
+
+
+
+
+
+
+ ©
+ 2023
+ Uniswap Labs
+
+
+
+
+
+
+
+ ©
+ 2023
+ Uniswap Labs
+
+
+
+
+
+
+`;
diff --git a/src/theme/components/ThemeToggle.tsx b/src/theme/components/ThemeToggle.tsx
index c7cd5f26d4..ac542763ac 100644
--- a/src/theme/components/ThemeToggle.tsx
+++ b/src/theme/components/ThemeToggle.tsx
@@ -45,6 +45,24 @@ export function SystemThemeUpdater() {
return null
}
+export function ThemeColorMetaUpdater() {
+ const isDark = useIsDarkMode()
+
+ useEffect(() => {
+ const meta = document.querySelector('meta[name=theme-color]')
+ if (!meta) return
+
+ if (isDark) {
+ // this color comes from #background-radial-gradient
+ meta.setAttribute('content', 'rgb(19, 19, 19)')
+ } else {
+ meta.setAttribute('content', '#fff')
+ }
+ }, [isDark])
+
+ return null
+}
+
export function useIsDarkMode(): boolean {
const mode = useAtomValue(themeModeAtom)
const systemTheme = useAtomValue(systemThemeAtom)
-