From 384e904dcc2bf31bea5e2dc97cb617636f0aac42 Mon Sep 17 00:00:00 2001 From: divhead Date: Wed, 9 Nov 2022 16:14:01 +0400 Subject: [PATCH 001/668] (pools-page): in progress --- README.md | 2 +- src/App/App.js | 6 + src/components/Footer/Footer.js | 3 +- src/components/GDSwap/GDMarketInfo.tsx | 136 ++++++++++ src/components/GDSwap/GDSwap.tsx | 61 +++++ src/components/GDSwap/GlpSwap.css | 325 +++++++++++++++++++++++ src/components/GDSwap/SwapErrorModal.tsx | 96 +++++++ src/components/Glp/GlpSwap.css | 2 +- src/pages/PoolsPage/PoolsPage.tsx | 25 ++ 9 files changed, 653 insertions(+), 3 deletions(-) create mode 100644 src/components/GDSwap/GDMarketInfo.tsx create mode 100644 src/components/GDSwap/GDSwap.tsx create mode 100644 src/components/GDSwap/GlpSwap.css create mode 100644 src/components/GDSwap/SwapErrorModal.tsx create mode 100644 src/pages/PoolsPage/PoolsPage.tsx diff --git a/README.md b/README.md index 177ddb1cc5..06f3596116 100644 --- a/README.md +++ b/README.md @@ -233,4 +233,4 @@ Use the following syntax to import scss modules: } ``` ---- +--- \ No newline at end of file diff --git a/src/App/App.js b/src/App/App.js index beea5f2c61..9d4c98eb59 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -97,6 +97,7 @@ import { } from "lib/wallets"; import { useChainId } from "lib/chains"; import ExternalLink from "components/ExternalLink/ExternalLink"; +import { PoolsPage } from "pages/PoolsPage/PoolsPage"; if ("ethereum" in window) { window.ethereum.autoRefreshOnNetworkChange = false; @@ -489,6 +490,11 @@ function FullApp() { connectWallet={connectWallet} /> + + + +
+
+
+ glp40Icon + {chainId === ARBITRUM ? ( + arbitrum16Icon + ) : ( + avalanche16Icon + )} +
+
+
GD
+
GD
+
+
+ +
+
+
+
+
+
+
+ Perp +
+
ETH/USD
+
+ +
+
+ Long Collateral +
+
ETH
+
+ +
+
+ Short Collateral +
+
USDC
+
+ +
+ +
+
+ Price +
+
${formatAmount(bigNumberify(100000), USD_DECIMALS, 3, true)}
+
+ +
+
+ Wallet +
+
+ {formatAmount(bigNumberify(100000), GLP_DECIMALS, 4, true)} GLP ($ + {formatAmount(bigNumberify(100000), USD_DECIMALS, 2, true)}) +
+
+ +
+
+ Market worth +
+
+ {formatAmount(bigNumberify(100000), GLP_DECIMALS, 4, true)} GLP ($ + {formatAmount(bigNumberify(100000), USD_DECIMALS, 2, true)}) +
+
+
+
+
+
+
+ APR +
+
+ { + return ( + <> + {/* + */} + + ); + }} + /> +
+
+
+
+ Total Supply +
+
+ + {formatAmount(bigNumberify(1000000), GLP_DECIMALS, 4, true)} GD ($ + {formatAmount(bigNumberify(1000000), USD_DECIMALS, 2, true)}) + +
+
+
+
+ ); +} diff --git a/src/components/GDSwap/GDSwap.tsx b/src/components/GDSwap/GDSwap.tsx new file mode 100644 index 0000000000..9e7381a53f --- /dev/null +++ b/src/components/GDSwap/GDSwap.tsx @@ -0,0 +1,61 @@ +import React, { useState, useEffect } from "react"; +import { useHistory } from "react-router-dom"; +import { Trans, t } from "@lingui/macro"; +import { useWeb3React } from "@web3-react/core"; +import useSWR from "swr"; +import { ethers } from "ethers"; +import Tab from "../Tab/Tab"; +import cx from "classnames"; +import { getContract } from "config/contracts"; +import { + getBuyGlpToAmount, + getBuyGlpFromAmount, + getSellGlpFromAmount, + getSellGlpToAmount, + adjustForDecimals, + GLP_DECIMALS, + USD_DECIMALS, + BASIS_POINTS_DIVISOR, + GLP_COOLDOWN_DURATION, + SECONDS_PER_YEAR, + USDG_DECIMALS, + PLACEHOLDER_ACCOUNT, + importImage, +} from "lib/legacy"; + +import { useGmxPrice } from "domain/legacy"; + +import TokenSelector from "../Exchange/TokenSelector"; +import BuyInputSection from "../BuyInputSection/BuyInputSection"; +import Tooltip from "../Tooltip/Tooltip"; + +import ReaderV2 from "abis/ReaderV2.json"; +import RewardReader from "abis/RewardReader.json"; +import VaultV2 from "abis/VaultV2.json"; +import GlpManager from "abis/GlpManager.json"; +import RewardTracker from "abis/RewardTracker.json"; +import Vester from "abis/Vester.json"; +import RewardRouter from "abis/RewardRouter.json"; +import Token from "abis/Token.json"; + +import glp24Icon from "img/ic_glp_24.svg"; +import glp40Icon from "img/ic_glp_40.svg"; +import arrowIcon from "img/ic_convert_down.svg"; + +import avalanche16Icon from "img/ic_avalanche_16.svg"; +import arbitrum16Icon from "img/ic_arbitrum_16.svg"; + +import "./GlpSwap.css"; +import { useChainId } from "lib/chains"; + +import { GDMarketInfo } from "./GDMarketInfo"; + +export function GDSwap() { + return ( +
+
+ +
+
+ ); +} diff --git a/src/components/GDSwap/GlpSwap.css b/src/components/GDSwap/GlpSwap.css new file mode 100644 index 0000000000..d9c07dd0dc --- /dev/null +++ b/src/components/GDSwap/GlpSwap.css @@ -0,0 +1,325 @@ +.GlpSwap-content { + display: flex; + justify-content: space-between; + border-bottom-left-radius: 0.8rem; + border-bottom-right-radius: 0.8rem; +} + +.Tab-title { + letter-spacing: 0px; + color: #ffffff; + font-size: 3.41rem; + font-weight: 500; +} + +.Tab-description { + letter-spacing: 0px; + color: #a9a9b0; + margin-top: 0.8rem; +} + +.Tab-description span { + color: #f89191; +} + +.GlpSwap-from-token .Modal { + align-items: flex-start; + justify-content: flex-end; +} + +.GlpSwap-from-token .Modal .Modal-content { + width: 41.85rem; +} + +.GlpSwap-from-token .Modal-content { + position: absolute; + width: 38.75rem; + max-height: 100vh; + overflow: hidden; + border: none; + top: 0; + bottom: 0; +} +.GlpSwap-from-token .Modal-content .Modal-body { + padding-right: 0.5rem; + max-height: calc(100vh - 7.75rem); + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -webkit-overflow-scrolling: auto; +} + +.GlpSwap-content .GlpSwap-stats-card, +.GlpSwap-content .GlpSwap-box { + width: 100%; +} + +.GlpSwap-content .GlpSwap-stats-card { + max-width: 71.2rem; + margin-right: 1.5rem; +} + +.GlpSwap-stats-card .App-card-row .label { + color: #a9a9b0; + opacity: 1; +} + +.GlpSwap-content .GlpSwap-box { + max-width: 47.95rem; + border-radius: 0.4rem; + padding: 1.5rem; + padding-top: 0; +} + +.GlpSwap-box .Exchange-swap-option-tabs { + margin: 1.5rem 0; +} + +.App-card-title-mark-icon { + position: relative; + margin-right: 0.8rem; + display: flex; +} + +.App-card-title-mark-icon .selected-network-symbol { + position: absolute; + bottom: 0; + right: 0; + border: 1px solid #1e1f37; + border-radius: 50%; +} + +.App-card-title-mark { + display: flex; +} + +.App-card-title-mark .App-card-title-mark-title { + font-size: 1.6rem; + line-height: 2.1rem; + letter-spacing: 0px; + color: #ffffff; +} + +.App-card-title-mark .App-card-title-mark-subtitle { + font-size: 1.2rem; + line-height: 1.5rem; + letter-spacing: 0px; + color: #a9a9b0; +} + +.GlpSwap-token-list { + border: 1px solid #1e2136; + border-radius: 4px; + background: #16182e; + padding: 1.5rem; + padding-top: 0; + text-align: left; +} + +.GlpSwap-token-list-content { + display: grid; + padding: 1.5rem; + padding-top: 0; + text-align: left; +} + +.GlpSwap-box .App-card-title { + margin-bottom: 0.8rem; +} + +.GlpSwap-box .Exchange-info-row { + height: 1.5rem; + margin-bottom: 0.8rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.GlpSwap-box .Exchange-info-row .Exchange-info-label { + margin-right: 0.8rem; + color: #a9a9b0; + opacity: 1; +} + +.GlpSwap-cta { + margin: 0 auto; + text-align: center; + padding-top: 0; +} + +.GlpSwap-cta .Exchange-swap-button { + margin: 0 auto; + justify-content: center; + min-height: 4.8rem; + font-size: 1.5rem; +} + +.token-table { + margin-left: -1.5rem; + margin-right: -1.5rem; + width: calc(100% + 3.1rem); + border-spacing: 0; + white-space: nowrap; + font-size: 1.5rem; +} + +.token-grid { + display: none; +} + +.token-table td, +.token-table th { + padding: 1.1625rem; +} + +.token-table td:nth-child(2), +.token-table th:nth-child(2) { + width: 11rem; +} + +.token-table td:nth-child(3), +.token-table th:nth-child(3) { + width: 32rem; +} + +.token-table td:nth-child(4), +.token-table th:nth-child(4) { + width: 20rem; +} + +.token-table td:nth-child(5), +.token-table th:nth-child(5) { + width: 13rem; +} + +.token-table td { + letter-spacing: 0.25px; + color: #ffffffde; +} + +.token-table th:first-child, +.token-table td:first-child { + padding-left: 1.5rem; + width: 26.35rem; +} + +.token-table th:last-child, +.token-table td:last-child { + padding-right: 1.5rem; + text-align: right; + width: 17rem; +} + +.token-table th { + font-weight: normal; + letter-spacing: 0.25px; + color: #a9a9b0; + text-transform: uppercase; +} + +.token-table .action-btn { + width: 100%; + justify-content: center; +} +.cap-reached { + margin-left: 0.8rem; +} + +.AppOrder-ball-container { + position: relative; + z-index: 2; +} + +.AppOrder-ball-icon { + text-align: center; + display: block; + font-size: 2.325rem; + opacity: 0.7; +} + +.AppOrder-ball { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + width: 3.565rem; + height: 3.565rem; + left: 50%; + margin-left: -1.7825rem; + top: -2.2rem; + border-radius: 3.1rem; + user-select: none; + background: linear-gradient(90deg, rgba(45,66,252,1) 0%, rgba(46,61,205,1) 100%); + cursor: pointer; + opacity: 0.85; +} +.AppOrder-ball:hover { + opacity: 1; +} + +@media (max-width: 900px) { + .GlpSwap-content { + flex-wrap: wrap; + } + + .GlpSwap-content .GlpSwap-stats-card { + margin: 0; + margin-bottom: 3.1rem; + max-width: 100%; + } + + .GlpSwap-content .GlpSwap-box { + margin: 0; + max-width: 100%; + } +} + +@media (max-width: 1100px) { + .GlpSwap-from-token .Modal { + align-items: center; + justify-content: center; + } + .GlpSwap-from-token .Modal .Modal-content { + width: 41.85rem; + position: absolute; + max-height: 80vh; + overflow: hidden; + border: none; + top: auto; + bottom: auto; + } + .GlpSwap-from-token .Modal .Modal-content .Modal-body { + overflow-y: auto; + max-height: calc(80vh - 8.525rem); + padding-right: 5px; + margin: 1.5rem calc(1rem - 0.5rem) 1.5rem 1.5rem; + } + + .GlpSwap-token-list { + border: none; + background-color: transparent; + padding: 0; + } + + .GlpSwap-token-list-content { + padding: 0; + } + + .token-table { + display: none; + } + + .token-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 1.5rem; + margin-top: 0.8rem; + } +} +@media (max-width: 510px) { + .token-grid { + display: grid; + grid-template-columns: 1fr; + grid-gap: 1.5rem; + margin-top: 0.8rem; + } +} diff --git a/src/components/GDSwap/SwapErrorModal.tsx b/src/components/GDSwap/SwapErrorModal.tsx new file mode 100644 index 0000000000..c04bc87524 --- /dev/null +++ b/src/components/GDSwap/SwapErrorModal.tsx @@ -0,0 +1,96 @@ +import { useEffect, useState } from "react"; +import { BigNumber } from "ethers"; +import { ethers } from "ethers"; +import Modal from "../Modal/Modal"; +import { get1InchSwapUrl } from "domain/common"; +import { getLowestFeeTokenForBuyGlp, InfoTokens, Token } from "domain/tokens"; +import { getNativeToken } from "config/tokens"; +import { t, Trans } from "@lingui/macro"; +import ExternalLink from "components/ExternalLink/ExternalLink"; + +const { AddressZero } = ethers.constants; + +type Props = { + swapToken: Token; + isVisible: boolean; + setIsVisible: () => void; + chainId: number; + glpAmount: BigNumber; + usdgSupply: BigNumber; + totalTokenWeights: BigNumber; + glpPrice: BigNumber; + swapUsdMin: BigNumber; + infoTokens: InfoTokens; +}; + +export default function SwapErrorModal({ + swapToken, + isVisible, + setIsVisible, + chainId, + glpAmount, + usdgSupply, + totalTokenWeights, + glpPrice, + infoTokens, + swapUsdMin, +}: Props) { + const [lowestFeeToken, setLowestFeeToken] = useState< + { token: Token; fees: number; amountLeftToDeposit: BigNumber } | undefined + >(); + useEffect(() => { + const lowestFeeTokenInfo = getLowestFeeTokenForBuyGlp( + chainId, + glpAmount, + glpPrice, + usdgSupply, + totalTokenWeights, + infoTokens, + swapToken.address, + swapUsdMin + ); + setLowestFeeToken(lowestFeeTokenInfo); + }, [chainId, glpAmount, glpPrice, usdgSupply, totalTokenWeights, infoTokens, swapUsdMin, swapToken.address]); + + const label = t`${swapToken?.symbol} Capacity Reached`; + + if (lowestFeeToken && swapUsdMin && swapUsdMin.gt(lowestFeeToken.amountLeftToDeposit)) { + return ( + +

+ + There is not enough liquidity in a single token for your size. Please check the Save on Fees section and + consider splitting your order into several different ones + +

+

+ + Swap on 1inch + +

+ + ); + } + + const nativeToken = getNativeToken(chainId); + const inputCurrency = swapToken.address === AddressZero ? nativeToken.symbol : swapToken.address; + const outputCurrency = + lowestFeeToken?.token.address === AddressZero ? nativeToken.symbol : lowestFeeToken?.token.address; + const oneInchUrl = get1InchSwapUrl(chainId, inputCurrency, outputCurrency); + + return ( + + +

The pool's capacity has been reached for {swapToken.symbol}. Please use another token to buy GLP.

+

Check the "Save on Fees" section for tokens with the lowest fees.

+ +

+ + + Swap {swapToken.symbol} to {lowestFeeToken?.token.symbol} on 1inch + + +

+ + ); +} diff --git a/src/components/Glp/GlpSwap.css b/src/components/Glp/GlpSwap.css index d9c07dd0dc..f0cc6746ab 100644 --- a/src/components/Glp/GlpSwap.css +++ b/src/components/Glp/GlpSwap.css @@ -248,7 +248,7 @@ top: -2.2rem; border-radius: 3.1rem; user-select: none; - background: linear-gradient(90deg, rgba(45,66,252,1) 0%, rgba(46,61,205,1) 100%); + background: linear-gradient(90deg, rgba(45, 66, 252, 1) 0%, rgba(46, 61, 205, 1) 100%); cursor: pointer; opacity: 0.85; } diff --git a/src/pages/PoolsPage/PoolsPage.tsx b/src/pages/PoolsPage/PoolsPage.tsx new file mode 100644 index 0000000000..7058aed4e2 --- /dev/null +++ b/src/pages/PoolsPage/PoolsPage.tsx @@ -0,0 +1,25 @@ +import { Trans } from "@lingui/macro"; +import SEO from "components/Common/SEO"; +import Footer from "components/Footer/Footer"; +import { GDSwap } from "components/GDSwap/GDSwap"; +import { getPageTitle } from "lib/legacy"; + +export function PoolsPage() { + return ( + +
+
+
+
+
+ Pools +
+
+
+
+ +
+
+ + ); +} From cc0625780b05579ac2567f1474d5679442a38eed Mon Sep 17 00:00:00 2001 From: divhead Date: Thu, 10 Nov 2022 14:54:40 +0400 Subject: [PATCH 002/668] (synthetics-pools): base structure --- ...BuyInputSection.js => BuyInputSection.tsx} | 27 +- src/components/GDSwap/GDSwap.tsx | 2 + src/components/GDSwap/GDSwapBox/BuyGD.tsx | 52 +++ src/components/GDSwap/GDSwapBox/GDSwapBox.tsx | 82 +++++ src/components/GDSwap/GDSwapBox/GlpSwap.css | 325 ++++++++++++++++++ src/components/Glp/GlpSwap.js | 4 - src/lib/legacy.js | 1 + src/pages/PoolsPage/PoolsPage.tsx | 3 +- 8 files changed, 484 insertions(+), 12 deletions(-) rename src/components/BuyInputSection/{BuyInputSection.js => BuyInputSection.tsx} (69%) create mode 100644 src/components/GDSwap/GDSwapBox/BuyGD.tsx create mode 100644 src/components/GDSwap/GDSwapBox/GDSwapBox.tsx create mode 100644 src/components/GDSwap/GDSwapBox/GlpSwap.css diff --git a/src/components/BuyInputSection/BuyInputSection.js b/src/components/BuyInputSection/BuyInputSection.tsx similarity index 69% rename from src/components/BuyInputSection/BuyInputSection.js rename to src/components/BuyInputSection/BuyInputSection.tsx index b56ab125e9..ad648c528b 100644 --- a/src/components/BuyInputSection/BuyInputSection.js +++ b/src/components/BuyInputSection/BuyInputSection.tsx @@ -1,9 +1,23 @@ -import React from "react"; +import { Trans } from "@lingui/macro"; import cx from "classnames"; +import { ChangeEvent, ReactNode } from "react"; import "./BuyInputSection.css"; -import { Trans } from "@lingui/macro"; -export default function BuyInputSection(props) { +type Props = { + topLeftLabel: string; + topRightLabel: string; + onClickTopRightLabel?: () => void; + inputValue?: number | string; + onInputValueChange?: (e: ChangeEvent) => void; + onClickMax?: () => void; + showMaxButton?: boolean; + staticInput?: boolean; + balance: string; + tokenBalance: string; + children?: ReactNode; +}; + +export default function BuyInputSection(props: Props) { const { topLeftLabel, topRightLabel, @@ -15,6 +29,7 @@ export default function BuyInputSection(props) { staticInput, balance, tokenBalance, + children, } = props; return ( @@ -25,9 +40,7 @@ export default function BuyInputSection(props) {
{topRightLabel}  - - {tokenBalance} {/*(selectedToken && selectedToken.symbol) || defaultTokenName*/} - + {tokenBalance}
@@ -49,7 +62,7 @@ export default function BuyInputSection(props) {
)} -
{props.children}
+
{children}
); diff --git a/src/components/GDSwap/GDSwap.tsx b/src/components/GDSwap/GDSwap.tsx index 9e7381a53f..ca004f7369 100644 --- a/src/components/GDSwap/GDSwap.tsx +++ b/src/components/GDSwap/GDSwap.tsx @@ -49,12 +49,14 @@ import "./GlpSwap.css"; import { useChainId } from "lib/chains"; import { GDMarketInfo } from "./GDMarketInfo"; +import { GDSwapBox } from "./GDSwapBox/GDSwapBox"; export function GDSwap() { return (
+
); diff --git a/src/components/GDSwap/GDSwapBox/BuyGD.tsx b/src/components/GDSwap/GDSwapBox/BuyGD.tsx new file mode 100644 index 0000000000..4ab72be9cb --- /dev/null +++ b/src/components/GDSwap/GDSwapBox/BuyGD.tsx @@ -0,0 +1,52 @@ +import { t } from "@lingui/macro"; + +import arrowIcon from "img/ic_convert_down.svg"; +import BuyInputSection from "components/BuyInputSection/BuyInputSection"; +import glp24Icon from "img/ic_glp_24.svg"; +import { GD_DECIMALS } from "lib/legacy"; +import { bigNumberify, formatAmount } from "lib/numbers"; + +type Props = {}; + +export function BuyGD(p: Props) { + return ( + <> + null} + showMaxButton={false} + onClickTopRightLabel={() => null} + onClickMax={() => null} + balance={"0.0$"} + /> + +
+
+ arrowIcon { + console.log("switch option"); + }} + /> +
+
+ + null} + balance={"0.0$"} + > +
+ GD glp24Icon +
+ + + ); +} diff --git a/src/components/GDSwap/GDSwapBox/GDSwapBox.tsx b/src/components/GDSwap/GDSwapBox/GDSwapBox.tsx new file mode 100644 index 0000000000..aab345173f --- /dev/null +++ b/src/components/GDSwap/GDSwapBox/GDSwapBox.tsx @@ -0,0 +1,82 @@ +import { t } from "@lingui/macro"; +import { useState } from "react"; + +import "./GlpSwap.css"; + +import Tab from "components/Tab/Tab"; +import { BuyGD } from "./BuyGD"; + +const tabs = { + deposit: t`Deposit`, + withdraw: t`Withdraw`, +}; + +export function GDSwapBox() { + const [currentTab, setCurrentTab] = useState(tabs.deposit); + + return ( +
+ + {currentTab === tabs.deposit ? : null} + {/*
+
+
{feeBasisPoints > 50 ? t`WARNING: High Fees` : t`Fees`}
+
+ {isBuying && ( + { + if (!feeBasisPoints) { + return ( +
+ Fees will be shown once you have entered an amount in the order form. +
+ ); + } + return ( +
+ {feeBasisPoints > 50 && To reduce fees, select a different asset to pay with.} + Check the "Save on Fees" section below to get the lowest fee percentages. +
+ ); + }} + /> + )} + {!isBuying && ( + { + if (!feeBasisPoints) { + return ( +
+ Fees will be shown once you have entered an amount in the order form. +
+ ); + } + return ( +
+ {feeBasisPoints > 50 && To reduce fees, select a different asset to receive.} + Check the "Save on Fees" section below to get the lowest fee percentages. +
+ ); + }} + /> + )} +
+
+
*/} +
+ +
+
+ ); +} diff --git a/src/components/GDSwap/GDSwapBox/GlpSwap.css b/src/components/GDSwap/GDSwapBox/GlpSwap.css new file mode 100644 index 0000000000..f0cc6746ab --- /dev/null +++ b/src/components/GDSwap/GDSwapBox/GlpSwap.css @@ -0,0 +1,325 @@ +.GlpSwap-content { + display: flex; + justify-content: space-between; + border-bottom-left-radius: 0.8rem; + border-bottom-right-radius: 0.8rem; +} + +.Tab-title { + letter-spacing: 0px; + color: #ffffff; + font-size: 3.41rem; + font-weight: 500; +} + +.Tab-description { + letter-spacing: 0px; + color: #a9a9b0; + margin-top: 0.8rem; +} + +.Tab-description span { + color: #f89191; +} + +.GlpSwap-from-token .Modal { + align-items: flex-start; + justify-content: flex-end; +} + +.GlpSwap-from-token .Modal .Modal-content { + width: 41.85rem; +} + +.GlpSwap-from-token .Modal-content { + position: absolute; + width: 38.75rem; + max-height: 100vh; + overflow: hidden; + border: none; + top: 0; + bottom: 0; +} +.GlpSwap-from-token .Modal-content .Modal-body { + padding-right: 0.5rem; + max-height: calc(100vh - 7.75rem); + overflow-y: auto; + -webkit-overflow-scrolling: touch; + -webkit-overflow-scrolling: auto; +} + +.GlpSwap-content .GlpSwap-stats-card, +.GlpSwap-content .GlpSwap-box { + width: 100%; +} + +.GlpSwap-content .GlpSwap-stats-card { + max-width: 71.2rem; + margin-right: 1.5rem; +} + +.GlpSwap-stats-card .App-card-row .label { + color: #a9a9b0; + opacity: 1; +} + +.GlpSwap-content .GlpSwap-box { + max-width: 47.95rem; + border-radius: 0.4rem; + padding: 1.5rem; + padding-top: 0; +} + +.GlpSwap-box .Exchange-swap-option-tabs { + margin: 1.5rem 0; +} + +.App-card-title-mark-icon { + position: relative; + margin-right: 0.8rem; + display: flex; +} + +.App-card-title-mark-icon .selected-network-symbol { + position: absolute; + bottom: 0; + right: 0; + border: 1px solid #1e1f37; + border-radius: 50%; +} + +.App-card-title-mark { + display: flex; +} + +.App-card-title-mark .App-card-title-mark-title { + font-size: 1.6rem; + line-height: 2.1rem; + letter-spacing: 0px; + color: #ffffff; +} + +.App-card-title-mark .App-card-title-mark-subtitle { + font-size: 1.2rem; + line-height: 1.5rem; + letter-spacing: 0px; + color: #a9a9b0; +} + +.GlpSwap-token-list { + border: 1px solid #1e2136; + border-radius: 4px; + background: #16182e; + padding: 1.5rem; + padding-top: 0; + text-align: left; +} + +.GlpSwap-token-list-content { + display: grid; + padding: 1.5rem; + padding-top: 0; + text-align: left; +} + +.GlpSwap-box .App-card-title { + margin-bottom: 0.8rem; +} + +.GlpSwap-box .Exchange-info-row { + height: 1.5rem; + margin-bottom: 0.8rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.GlpSwap-box .Exchange-info-row .Exchange-info-label { + margin-right: 0.8rem; + color: #a9a9b0; + opacity: 1; +} + +.GlpSwap-cta { + margin: 0 auto; + text-align: center; + padding-top: 0; +} + +.GlpSwap-cta .Exchange-swap-button { + margin: 0 auto; + justify-content: center; + min-height: 4.8rem; + font-size: 1.5rem; +} + +.token-table { + margin-left: -1.5rem; + margin-right: -1.5rem; + width: calc(100% + 3.1rem); + border-spacing: 0; + white-space: nowrap; + font-size: 1.5rem; +} + +.token-grid { + display: none; +} + +.token-table td, +.token-table th { + padding: 1.1625rem; +} + +.token-table td:nth-child(2), +.token-table th:nth-child(2) { + width: 11rem; +} + +.token-table td:nth-child(3), +.token-table th:nth-child(3) { + width: 32rem; +} + +.token-table td:nth-child(4), +.token-table th:nth-child(4) { + width: 20rem; +} + +.token-table td:nth-child(5), +.token-table th:nth-child(5) { + width: 13rem; +} + +.token-table td { + letter-spacing: 0.25px; + color: #ffffffde; +} + +.token-table th:first-child, +.token-table td:first-child { + padding-left: 1.5rem; + width: 26.35rem; +} + +.token-table th:last-child, +.token-table td:last-child { + padding-right: 1.5rem; + text-align: right; + width: 17rem; +} + +.token-table th { + font-weight: normal; + letter-spacing: 0.25px; + color: #a9a9b0; + text-transform: uppercase; +} + +.token-table .action-btn { + width: 100%; + justify-content: center; +} +.cap-reached { + margin-left: 0.8rem; +} + +.AppOrder-ball-container { + position: relative; + z-index: 2; +} + +.AppOrder-ball-icon { + text-align: center; + display: block; + font-size: 2.325rem; + opacity: 0.7; +} + +.AppOrder-ball { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + width: 3.565rem; + height: 3.565rem; + left: 50%; + margin-left: -1.7825rem; + top: -2.2rem; + border-radius: 3.1rem; + user-select: none; + background: linear-gradient(90deg, rgba(45, 66, 252, 1) 0%, rgba(46, 61, 205, 1) 100%); + cursor: pointer; + opacity: 0.85; +} +.AppOrder-ball:hover { + opacity: 1; +} + +@media (max-width: 900px) { + .GlpSwap-content { + flex-wrap: wrap; + } + + .GlpSwap-content .GlpSwap-stats-card { + margin: 0; + margin-bottom: 3.1rem; + max-width: 100%; + } + + .GlpSwap-content .GlpSwap-box { + margin: 0; + max-width: 100%; + } +} + +@media (max-width: 1100px) { + .GlpSwap-from-token .Modal { + align-items: center; + justify-content: center; + } + .GlpSwap-from-token .Modal .Modal-content { + width: 41.85rem; + position: absolute; + max-height: 80vh; + overflow: hidden; + border: none; + top: auto; + bottom: auto; + } + .GlpSwap-from-token .Modal .Modal-content .Modal-body { + overflow-y: auto; + max-height: calc(80vh - 8.525rem); + padding-right: 5px; + margin: 1.5rem calc(1rem - 0.5rem) 1.5rem 1.5rem; + } + + .GlpSwap-token-list { + border: none; + background-color: transparent; + padding: 0; + } + + .GlpSwap-token-list-content { + padding: 0; + } + + .token-table { + display: none; + } + + .token-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 1.5rem; + margin-top: 0.8rem; + } +} +@media (max-width: 510px) { + .token-grid { + display: grid; + grid-template-columns: 1fr; + grid-gap: 1.5rem; + margin-top: 0.8rem; + } +} diff --git a/src/components/Glp/GlpSwap.js b/src/components/Glp/GlpSwap.js index a4a71ef327..bd2aee7ed0 100644 --- a/src/components/Glp/GlpSwap.js +++ b/src/components/Glp/GlpSwap.js @@ -839,7 +839,6 @@ export default function GlpSwap(props) { showMaxButton={swapValue !== formatAmountFree(swapTokenBalance, swapToken.decimals, swapToken.decimals)} onClickTopRightLabel={fillMaxAmount} onClickMax={fillMaxAmount} - selectedToken={swapToken} balance={payBalance} >
GLP glp24Icon @@ -896,7 +894,6 @@ export default function GlpSwap(props) { inputValue={glpValue} onInputValueChange={onGlpValueChange} balance={receiveBalance} - defaultTokenName={"GLP"} >
GLP glp24Icon @@ -912,7 +909,6 @@ export default function GlpSwap(props) { inputValue={swapValue} onInputValueChange={onSwapValueChange} balance={receiveBalance} - selectedToken={swapToken} >
+ + -