From 8d5ec5618de90b4d4a94e0a34845932fd82d80b0 Mon Sep 17 00:00:00 2001 From: Jan Langheimer <7262066+pingustar@users.noreply.github.com> Date: Tue, 25 Oct 2022 18:17:18 +0200 Subject: [PATCH 1/9] Revert "Currency selection" --- src/App.tsx | 5 + src/assets/icons/eth.svg | 11 -- src/assets/icons/usd.svg | 3 - .../currencyPrettifier/CurrencyPrettifier.tsx | 36 ----- src/components/tokenBalance/TokenBalance.tsx | 51 +------- .../tokenInputField/TokenInputField.tsx | 22 ++-- src/components/widgets/Widget.tsx | 4 +- src/elements/earn/pools/Statistics.tsx | 29 +---- .../single/AddLiquiditySingle.tsx | 8 +- .../earn/pools/poolsTable/PoolsTable.tsx | 28 +--- .../pools/poolsTable/v3/DepositV3Modal.tsx | 14 +- .../portfolio/v3/holdings/V3HoldingPage.tsx | 16 +-- .../v3/initWithdraw/V3WithdrawModal.tsx | 16 +-- .../v3/initWithdraw/useV3WithdrawModal.ts | 6 +- .../layoutHeader/CurrencySelection.tsx | 123 ------------------ src/elements/layoutHeader/LayoutHeader.tsx | 3 - src/elements/modalVbnt/ModalVbnt.tsx | 10 +- src/elements/swapHeader/SwapHeader.tsx | 18 ++- src/elements/swapLimit/SwapLimit.tsx | 6 +- src/elements/swapSwitch/SwapSwitch.css | 7 + src/elements/swapSwitch/SwapSwitch.tsx | 29 +++++ src/elements/trade/TradeWidgetInput.tsx | 18 ++- src/elements/trade/useTknFiatInput.ts | 12 +- src/elements/trade/useTrade.ts | 7 +- src/elements/trade/useTradeWidget.ts | 8 +- src/store/user/user.ts | 36 ++--- src/utils/localStorage.ts | 24 ---- 27 files changed, 135 insertions(+), 415 deletions(-) delete mode 100644 src/assets/icons/eth.svg delete mode 100644 src/assets/icons/usd.svg delete mode 100644 src/components/currencyPrettifier/CurrencyPrettifier.tsx delete mode 100644 src/elements/layoutHeader/CurrencySelection.tsx create mode 100644 src/elements/swapSwitch/SwapSwitch.css create mode 100644 src/elements/swapSwitch/SwapSwitch.tsx diff --git a/src/App.tsx b/src/App.tsx index e40cd0bf0..0a46acda5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import { setDarkMode, setDarkModeCss, setSlippageTolerance, + setUsdToggle, } from 'store/user/user'; import { setNotifications } from 'store/notification/notification'; import { store, useAppSelector } from 'store'; @@ -16,6 +17,7 @@ import { getDarkModeLS, getNotificationsLS, getSlippageToleranceLS, + getUsdToggleLS, setNotificationsLS, } from 'utils/localStorage'; import { subscribeToObservables } from 'services/observables/triggers'; @@ -64,6 +66,9 @@ export const App = () => { }, []); useEffect(() => { + const usd = getUsdToggleLS(); + if (usd) dispatch(setUsdToggle(usd)); + const notify = getNotificationsLS(); if (notify) dispatch(setNotifications(notify)); diff --git a/src/assets/icons/eth.svg b/src/assets/icons/eth.svg deleted file mode 100644 index 709498cf1..000000000 --- a/src/assets/icons/eth.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/assets/icons/usd.svg b/src/assets/icons/usd.svg deleted file mode 100644 index 339ff359a..000000000 --- a/src/assets/icons/usd.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/currencyPrettifier/CurrencyPrettifier.tsx b/src/components/currencyPrettifier/CurrencyPrettifier.tsx deleted file mode 100644 index 12615e9e5..000000000 --- a/src/components/currencyPrettifier/CurrencyPrettifier.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import BigNumber from 'bignumber.js'; -import { useMemo } from 'react'; -import { TokenMinimal } from 'services/observables/tokens'; -import { ethToken } from 'services/web3/config'; -import { useAppSelector } from 'store'; -import { getTradeTokensWithExternal } from 'store/bancor/bancor'; -import { BaseCurrency } from 'store/user/user'; -import { prettifyNumber } from 'utils/helperFunctions'; - -export const CurrencyPrettifier = ({ - isCurrency, - amount, -}: { - isCurrency: boolean; - amount: string; -}) => { - const tokens = useAppSelector(getTradeTokensWithExternal); - const baseCurrency = useAppSelector((state) => state.user.baseCurrency); - const tokensMap = useMemo( - () => new Map(tokens.map((token) => [token.address, token])), - [tokens] - ); - const isUSD = baseCurrency === BaseCurrency.USD; - const ethUsdPrice = tokensMap.get(ethToken)?.usdPrice ?? '0'; - const currencyAmount = isUSD - ? amount - : new BigNumber(amount).times(new BigNumber(1).div(ethUsdPrice)); - - return isCurrency ? ( - <> - {prettifyNumber(currencyAmount, isUSD)} {!isUSD && 'ETH'} - - ) : ( - <>{prettifyNumber(amount, false)} - ); -}; diff --git a/src/components/tokenBalance/TokenBalance.tsx b/src/components/tokenBalance/TokenBalance.tsx index bda69d51d..ff9de81dd 100644 --- a/src/components/tokenBalance/TokenBalance.tsx +++ b/src/components/tokenBalance/TokenBalance.tsx @@ -3,13 +3,6 @@ import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; import { Image } from 'components/image/Image'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { ReactComponent as IconWarning } from 'assets/icons/warning.svg'; -import { useAppSelector } from 'store'; -import { BaseCurrency, TokenCurrency } from 'store/user/user'; -import { CurrencyPrettifier } from 'components/currencyPrettifier/CurrencyPrettifier'; -import { getTradeTokensWithExternal } from 'store/bancor/bancor'; -import { useMemo } from 'react'; -import { TokenMinimal } from 'services/observables/tokens'; -import { ethToken } from 'services/web3/config'; interface Props { symbol: string; amount: string; @@ -31,19 +24,10 @@ const AmountWithPopover = ({ abbreviate?: boolean; }; }) => { - const baseCurrency = useAppSelector((state) => state.user.baseCurrency); - const tokenCurrency = useAppSelector((state) => state.user.tokenCurrency); - const isToken = tokenCurrency === TokenCurrency.Token; - const isUSD = baseCurrency === BaseCurrency.USD; - const prettifiedAmount = prettifyNumber(amount, { ...options, usd: isUSD }); + const prettifiedAmount = prettifyNumber(amount, options); if (!options?.abbreviate || toBigNumber(amount).lte(999999)) { - return ( - <> - {prettifiedAmount} - {!isUSD && !isToken && ' ETH'} - - ); + return <>{prettifiedAmount}; } return ( @@ -52,8 +36,7 @@ const AmountWithPopover = ({ {prettifiedAmount} )} > - {prettifyNumber(amount, { ...options, abbreviate: false, usd: isUSD })}{' '} - {!isUSD && !isToken && ' ETH'} + {prettifyNumber(amount, { ...options, abbreviate: false })}{' '} {symbol && symbol} ); @@ -68,22 +51,6 @@ export const TokenBalance = ({ abbreviate, }: Props) => { const usdAmount = new BigNumber(amount).times(usdPrice).toString(); - const tokenCurrency = useAppSelector((state) => state.user.tokenCurrency); - const isToken = tokenCurrency === TokenCurrency.Token; - - const tokens = useAppSelector(getTradeTokensWithExternal); - const baseCurrency = useAppSelector((state) => state.user.baseCurrency); - const tokensMap = useMemo( - () => new Map(tokens.map((token) => [token.address, token])), - [tokens] - ); - const isUSD = baseCurrency === BaseCurrency.USD; - const ethUsdPrice = tokensMap.get(ethToken)?.usdPrice ?? '0'; - const currencyAmount = isUSD - ? usdAmount - : new BigNumber(usdAmount) - .times(new BigNumber(1).div(ethUsdPrice)) - .toString(); return (
@@ -94,11 +61,11 @@ export const TokenBalance = ({ />
- {isToken && symbol}{' '} + {symbol}{' '} {deficitAmount && ( - {' '} - {!isToken && symbol} + {prettifyNumber(usdAmount, true)}
diff --git a/src/components/tokenInputField/TokenInputField.tsx b/src/components/tokenInputField/TokenInputField.tsx index 5cf25e781..0f768960c 100644 --- a/src/components/tokenInputField/TokenInputField.tsx +++ b/src/components/tokenInputField/TokenInputField.tsx @@ -10,7 +10,6 @@ import BigNumber from 'bignumber.js'; import { useAppSelector } from 'store'; import { Image } from 'components/image/Image'; import { getV2AndV3Tokens } from 'store/bancor/bancor'; -import { TokenCurrency } from 'store/user/user'; interface TokenInputFieldProps { label?: string; @@ -69,8 +68,7 @@ export const TokenInputField = ({ ? new BigNumber(balance).times(token.usdPrice ?? 0).toString() : null; - const tokenCurrency = useAppSelector((state) => state.user.tokenCurrency); - const isCurrency = tokenCurrency === TokenCurrency.Currency; + const toggle = useAppSelector((state) => state.user.usdToggle); const loadingBalances = useAppSelector( (state) => state.user.loadingBalances ); @@ -84,7 +82,7 @@ export const TokenInputField = ({ const onInputChange = (text: string, token?: TokenMinimal) => { text = sanitizeNumberInput(text); - if (isCurrency) { + if (toggle) { const tokenAmount = sanitizeNumberInput( new BigNumber(text).div(token?.usdPrice!).toString(), token?.decimals @@ -109,8 +107,8 @@ export const TokenInputField = ({ }; const inputValue = () => { - if (!isCurrency && !disabled) return input; - if (!isCurrency && disabled) return `${sanitizeNumberInput(input, 6)}`; + if (!toggle && !disabled) return input; + if (!toggle && disabled) return `${sanitizeNumberInput(input, 6)}`; if (!amountUsd) return ''; return `$${sanitizeNumberInput(amountUsd, 6)}`; }; @@ -118,10 +116,10 @@ export const TokenInputField = ({ const convertedAmount = () => { const tokenAmount = prettifyNumber(input); const usdAmount = prettifyNumber(amountUsd ?? 0, true); - const amount = isCurrency ? tokenAmount : usdAmount; + const amount = toggle ? tokenAmount : usdAmount; if ((input || amountUsd) && token) return amount; - else return `${isCurrency ? '' : '$'}0`; + else return `${toggle ? '' : '$'}0`; }; const setMaxAmount = () => { @@ -131,8 +129,8 @@ export const TokenInputField = ({ const reducedUsdBalance = new BigNumber(reducedBalance) .times(token.usdPrice!) .toString(); - onInputChange(isCurrency ? reducedUsdBalance : reducedBalance, token); - } else onInputChange(isCurrency ? balanceUsd : balance, token); + onInputChange(toggle ? reducedUsdBalance : reducedBalance, token); + } else onInputChange(toggle ? balanceUsd : balance, token); } }; @@ -216,7 +214,7 @@ export const TokenInputField = ({
) : (
- {convertedAmount()} {isCurrency && token?.symbol} + {convertedAmount()} {toggle && token?.symbol} {!usdSlippage || (usdSlippage !== 0 && ( @@ -231,7 +229,7 @@ export const TokenInputField = ({ inputMode="decimal" value={inputValue()} disabled={disabled} - placeholder={isCurrency ? '$0.00' : '0.00'} + placeholder={toggle ? '$0.00' : '0.00'} className={inputFieldStyles} onChange={(event) => onInputChange(event.target.value, token)} /> diff --git a/src/components/widgets/Widget.tsx b/src/components/widgets/Widget.tsx index deed2eba0..217c6f6d1 100644 --- a/src/components/widgets/Widget.tsx +++ b/src/components/widgets/Widget.tsx @@ -1,6 +1,6 @@ +import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { ReactComponent as IconTimes } from 'assets/icons/times.svg'; import { useNavigation } from 'hooks/useNavigation'; -import { CurrencySelection } from 'elements/layoutHeader/CurrencySelection'; interface Props { title: string; @@ -18,7 +18,7 @@ export const Widget = ({ title, subtitle, children, goBack }: Props) => { return (
- +

{title}

{subtitle &&

{subtitle}

} diff --git a/src/elements/earn/pools/Statistics.tsx b/src/elements/earn/pools/Statistics.tsx index ba3344634..5853a44db 100644 --- a/src/elements/earn/pools/Statistics.tsx +++ b/src/elements/earn/pools/Statistics.tsx @@ -5,11 +5,6 @@ import { ReactComponent as IconInfo } from 'assets/icons/info.svg'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { Statistic } from 'services/observables/statistics'; import { SnapshotLink } from 'elements/earn/pools/SnapshotLink'; -import { TokenMinimal } from 'services/observables/tokens'; -import { ethToken } from 'services/web3/config'; -import { getTradeTokensWithExternal } from 'store/bancor/bancor'; -import { BaseCurrency } from 'store/user/user'; -import { BigNumber } from 'bignumber.js'; const averageFormat = { average: true, @@ -21,18 +16,6 @@ const averageFormat = { export const Statistics = () => { const stats = useAppSelector((state) => state.bancor.statistics); - const tokens = useAppSelector(getTradeTokensWithExternal); - const eth = tokens.find((x) => x.address === ethToken); - const baseCurrency = useAppSelector((state) => state.user.baseCurrency); - const isETH = baseCurrency === BaseCurrency.ETH; - - const convertToETH = (usd: string) => { - return eth && isETH - ? new BigNumber(usd) - .times(new BigNumber(1).div(eth.usdPrice ?? '')) - .toString() - : usd; - }; return (
@@ -49,9 +32,7 @@ export const Statistics = () => {
Total Liquidity
- {`${isETH ? 'ETH' : '$'} ${numbro( - convertToETH(stats.totalLiquidity) - ).format(averageFormat)}`} + {`$${numbro(stats.totalLiquidity).format(averageFormat)}`}
@@ -62,9 +43,7 @@ export const Statistics = () => {
Volume
- {`${isETH ? 'ETH' : '$'} ${numbro( - convertToETH(stats.totalVolume) - ).format(averageFormat)}`} + {`$${numbro(stats.totalVolume).format(averageFormat)}`}
@@ -77,9 +56,7 @@ export const Statistics = () => { {toolTip(stats)}
- {`${isETH ? 'ETH' : '$'} ${numbro( - convertToETH(stats.totalFees) - ).format(averageFormat)}`} + {`$${numbro(stats.totalFees).format(averageFormat)}`}
diff --git a/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx b/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx index 2e051086d..a79ff405c 100644 --- a/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx +++ b/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx @@ -31,7 +31,6 @@ import { useNavigation } from 'hooks/useNavigation'; import { fetchProtectedPositions } from 'services/web3/protection/positions'; import { setProtectedPositions } from 'store/liquidity/liquidity'; import { Events } from 'services/api/googleTagManager'; -import { TokenCurrency } from 'store/user/user'; interface Props { pool: Pool; @@ -53,8 +52,7 @@ export const AddLiquiditySingle = ({ pool }: Props) => { const [errorMsg, setErrorMsg] = useState(''); const [spaceAvailableBnt, setSpaceAvailableBnt] = useState(''); const [spaceAvailableTkn, setSpaceAvailableTkn] = useState(''); - const tokenCurrency = useAppSelector((state) => state.user.tokenCurrency); - const isCurrency = tokenCurrency === TokenCurrency.Currency; + const fiatToggle = useAppSelector((state) => state.user.usdToggle); const pools = useAppSelector((state) => state.pool.v2Pools); const account = useAppSelector((state) => state.user.account); @@ -164,11 +162,11 @@ export const AddLiquiditySingle = ({ pool }: Props) => { amountUsd, undefined, undefined, - isCurrency + fiatToggle ); sendLiquidityEvent(Events.click); onStart(); - }, [amount, amountUsd, isCurrency, onStart, pool.name, selectedToken.symbol]); + }, [amount, amountUsd, fiatToggle, onStart, pool.name, selectedToken.symbol]); if (!tkn) { goToPage.notFound(); diff --git a/src/elements/earn/pools/poolsTable/PoolsTable.tsx b/src/elements/earn/pools/poolsTable/PoolsTable.tsx index ba029f1c3..d8f9e0e33 100644 --- a/src/elements/earn/pools/poolsTable/PoolsTable.tsx +++ b/src/elements/earn/pools/poolsTable/PoolsTable.tsx @@ -18,7 +18,6 @@ import { Image } from 'components/image/Image'; import { DepositV3Modal } from './v3/DepositV3Modal'; import { SnapshotLink } from 'elements/earn/pools/SnapshotLink'; import { config } from 'config'; -import { BaseCurrency } from 'store/user/user'; export const PoolsTable = ({ rewards, @@ -40,8 +39,6 @@ export const PoolsTable = ({ setLowEarnRate: Function; }) => { const pools = useAppSelector((state) => state.pool.v3Pools); - const baseCurrency = useAppSelector((state) => state.user.baseCurrency); - const isUSD = baseCurrency === BaseCurrency.USD; const [search, setSearch] = useState(''); @@ -65,10 +62,7 @@ export const PoolsTable = ({
{toBigNumber(row.stakedBalance.usd).isZero() ? 'New' - : prettifyNumber( - isUSD ? row.stakedBalance.usd : row.stakedBalance.eth, - isUSD - ).slice(0, 6) + (isUSD ? '' : ' ETH')} + : prettifyNumber(row.stakedBalance.usd, true)}
@@ -76,10 +70,7 @@ export const PoolsTable = ({
{toBigNumber(row.volume7d.usd).isZero() ? 'New' - : prettifyNumber( - isUSD ? row.volume7d.usd : row.volume7d.eth, - isUSD - ).slice(0, 6) + (isUSD ? '' : ' ETH')} + : prettifyNumber(row.volume7d.usd, true)}
@@ -87,10 +78,7 @@ export const PoolsTable = ({
{toBigNumber(row.fees7d.usd).isZero() ? 'New' - : prettifyNumber( - isUSD ? row.fees7d.usd : row.fees7d.eth, - isUSD - ).slice(0, 4) + (isUSD ? '' : ' ETH')} + : prettifyNumber(row.fees7d.usd, true)}
@@ -102,16 +90,14 @@ export const PoolsTable = ({ {toBigNumber(row.fees7d.usd).minus(row.networkFees7d.usd).isZero() ? 'New' : prettifyNumber( - isUSD - ? toBigNumber(row.fees7d.usd).minus(row.networkFees7d.usd) - : toBigNumber(row.fees7d.eth).minus(row.networkFees7d.eth), - isUSD - ).slice(0, 4) + (isUSD ? '' : ' ETH')} + toBigNumber(row.fees7d.usd).minus(row.networkFees7d.usd), + true + )}
), - [isUSD] + [] ); const columns = useMemo[]>( diff --git a/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx b/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx index 6b95882bb..3adcde267 100644 --- a/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx +++ b/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx @@ -7,6 +7,7 @@ import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; import { useAppSelector } from 'store'; import { useApproveModal } from 'hooks/useApproveModal'; import { ModalV3 } from 'components/modal/ModalV3'; +import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { bntToken, ethToken } from 'services/web3/config'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; import { expandToken } from 'utils/formulas'; @@ -41,8 +42,6 @@ import dayjs from 'dayjs'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { ReactComponent as IconInfo } from 'assets/icons/info.svg'; import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; -import { CurrencySelection } from 'elements/layoutHeader/CurrencySelection'; -import { TokenCurrency } from 'store/user/user'; interface Props { pool: PoolV3; @@ -57,8 +56,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { const [tosAgreed, setTosAgreed] = useState(false); const [amount, setAmount] = useState(''); const [inputFiat, setInputFiat] = useState(''); - const tokenCurrency = useAppSelector((state) => state.user.tokenCurrency); - const isCurrency = tokenCurrency === TokenCurrency.Currency; + const isFiat = useAppSelector((state) => state.user.usdToggle); const [accessFullEarnings, setAccessFullEarnings] = useState(true); const { handleWalletButtonClick } = useWalletConnect(); @@ -197,7 +195,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { deposit_pool: pool.name, deposit_blockchain: getBlockchain(), deposit_blockchain_network: getBlockchainNetwork(), - deposit_input_type: getFiat(isCurrency), + deposit_input_type: getFiat(isFiat), deposit_token: pool.name, deposit_token_amount: amount, deposit_token_amount_usd: inputFiat, @@ -218,7 +216,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { accessFullEarnings, amount, inputFiat, - isCurrency, + isFiat, pool.name, pool.reserveToken.balance, ]); @@ -235,7 +233,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { deposit_pool: pool.name, deposit_blockchain: getBlockchain(), deposit_blockchain_network: getBlockchainNetwork(), - deposit_input_type: getFiat(isCurrency), + deposit_input_type: getFiat(isFiat), deposit_token: pool.name, deposit_token_amount: undefined, deposit_token_amount_usd: undefined, @@ -257,7 +255,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { title={'Deposit'} setIsOpen={onClose} isOpen={isOpen} - titleElement={} + titleElement={} large > <> diff --git a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx index d1f21e3dd..1629953ed 100644 --- a/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx +++ b/src/elements/earn/portfolio/v3/holdings/V3HoldingPage.tsx @@ -24,7 +24,6 @@ import { getTokensByIdV2V3 } from 'store/bancor/bancor'; import { getV3byID } from 'store/bancor/pool'; import { WalletConnectRequest } from 'elements/walletConnect/WalletConnectRequest'; import { V3ManageProgramsModal } from './V3ManageProgramsModal'; -import { TokenCurrency } from 'store/user/user'; export const V3HoldingPage = () => { const { id } = useParams(); @@ -37,8 +36,6 @@ export const V3HoldingPage = () => { const holding = holdings.find((x) => x.pool.poolDltId === id); const token = useAppSelector((state) => getTokensByIdV2V3(state, id || '')); const pool = useAppSelector((state) => getV3byID(state, id || '')); - const currencyToken = useAppSelector((state) => state.user.tokenCurrency); - const isToken = currencyToken === TokenCurrency.Token; const isBNT = holding?.pool.poolDltId === bntToken; const isDisabled = toBigNumber(holding ? holding.tokenBalance : 0).isZero(); @@ -97,12 +94,6 @@ export const V3HoldingPage = () => { return null; } - const usdAmount = holding - ? new BigNumber(holding.combinedTokenBalance).times( - holding.pool.reserveToken.usdPrice - ) - : '0'; - return (
- ); -}; diff --git a/src/elements/layoutHeader/LayoutHeader.tsx b/src/elements/layoutHeader/LayoutHeader.tsx index 775270f39..3a1a107a7 100644 --- a/src/elements/layoutHeader/LayoutHeader.tsx +++ b/src/elements/layoutHeader/LayoutHeader.tsx @@ -13,7 +13,6 @@ import { getIsAppBusy } from 'store/bancor/bancor'; import { BancorURL } from 'router/bancorURL.service'; import { Navigate } from 'components/navigate/Navigate'; import { PopoverV3 } from 'components/popover/PopoverV3'; -import { CurrencySelection } from './CurrencySelection'; export const LayoutHeader = () => { const wallet = useWalletConnect(); @@ -82,8 +81,6 @@ export const LayoutHeader = () => {
)} - - {wallet.account && } diff --git a/src/elements/modalVbnt/ModalVbnt.tsx b/src/elements/modalVbnt/ModalVbnt.tsx index 0683b542b..1c4e5f969 100644 --- a/src/elements/modalVbnt/ModalVbnt.tsx +++ b/src/elements/modalVbnt/ModalVbnt.tsx @@ -1,4 +1,5 @@ import { Modal } from 'components/modal/Modal'; +import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { useMemo, useState } from 'react'; import { Token, updateUserBalances } from 'services/observables/tokens'; import { wait } from 'utils/pureFunctions'; @@ -26,8 +27,6 @@ import { sendGovEvent, } from 'services/api/googleTagManager/gov'; import { getFiat } from 'services/api/googleTagManager'; -import { CurrencySelection } from 'elements/layoutHeader/CurrencySelection'; -import { TokenCurrency } from 'store/user/user'; interface ModalVbntProps { setIsOpen: Function; @@ -47,8 +46,7 @@ export const ModalVbnt = ({ onCompleted, }: ModalVbntProps) => { const account = useAppSelector((state) => state.user.account); - const tokenCurrency = useAppSelector((state) => state.user.tokenCurrency); - const isCurrency = tokenCurrency === TokenCurrency.Currency; + const isFiat = useAppSelector((state) => state.user.usdToggle); const [amount, setAmount] = useState(''); const percentages = useMemo(() => [25, 50, 75, 100], []); const [selPercentage, setSelPercentage] = useState(-1); @@ -63,7 +61,7 @@ export const ModalVbnt = ({ : stakeBalance; const govProperties: GovProperties = { - stake_input_type: getFiat(isCurrency), + stake_input_type: getFiat(isFiat), stake_token_amount_usd: amount, stake_token_portion_percent: selPercentage !== -1 ? percentages[selPercentage].toFixed(0) : 'N/A', @@ -151,7 +149,7 @@ export const ModalVbnt = ({ <> } + titleElement={} setIsOpen={setIsOpen} isOpen={isOpen} separator diff --git a/src/elements/swapHeader/SwapHeader.tsx b/src/elements/swapHeader/SwapHeader.tsx index 4e2e95eda..a26fe4de0 100644 --- a/src/elements/swapHeader/SwapHeader.tsx +++ b/src/elements/swapHeader/SwapHeader.tsx @@ -1,5 +1,6 @@ import { classNameGenerator } from 'utils/pureFunctions'; import 'elements/swapHeader/SwapHeader.css'; +import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { ReactComponent as IconSettings } from 'assets/icons/settings.svg'; import { SlippageSettings } from 'elements/settings/SlippageSettings'; @@ -34,13 +35,16 @@ export const SwapHeader = ({ isLimit, setIsLimit }: SwapHeaderProps) => { - ( - - )} - > - - +
+ ( + + )} + > + + + +
); diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index c3fcfcd3b..04d16b153 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -36,7 +36,6 @@ import { import useAsyncEffect from 'use-async-effect'; import { useWalletConnect } from 'elements/walletConnect/useWalletConnect'; import { Events, getLimitMarket } from 'services/api/googleTagManager'; -import { TokenCurrency } from 'store/user/user'; enum Field { from, @@ -86,8 +85,7 @@ export const SwapLimit = ({ const keeperDaoTokens = useAppSelector( (state) => state.bancor.keeperDaoTokens ); - const tokenCurrency = useAppSelector((state) => state.user.tokenCurrency); - const isCurrency = tokenCurrency === TokenCurrency.Currency; + const fiatToggle = useAppSelector((state) => state.user.usdToggle); const percentages = useMemo(() => [1, 3, 5], []); const calculatePercentageByRate = useCallback( @@ -350,7 +348,7 @@ export const SwapLimit = ({ fromAmountUsd, toAmount, toAmountUsd, - isCurrency, + fiatToggle, rate, percentage, duration.asSeconds().toString() diff --git a/src/elements/swapSwitch/SwapSwitch.css b/src/elements/swapSwitch/SwapSwitch.css new file mode 100644 index 000000000..aad095864 --- /dev/null +++ b/src/elements/swapSwitch/SwapSwitch.css @@ -0,0 +1,7 @@ +.swap-switch { + @apply relative inline-flex flex-shrink-0 h-24 w-[45px] md:h-16 md:w-30 items-center border-[3px] border-primary rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75; +} + +.swap-switch-toggle { + @apply pointer-events-none inline-block h-18 w-18 md:h-12 md:w-12 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200; +} diff --git a/src/elements/swapSwitch/SwapSwitch.tsx b/src/elements/swapSwitch/SwapSwitch.tsx new file mode 100644 index 000000000..070293bde --- /dev/null +++ b/src/elements/swapSwitch/SwapSwitch.tsx @@ -0,0 +1,29 @@ +import { ReactComponent as IconCoins } from 'assets/icons/coins.svg'; +import { ReactComponent as IconDollar } from 'assets/icons/dollar.svg'; +import 'elements/swapSwitch/SwapSwitch.css'; +import { useAppSelector } from 'store'; +import { useDispatch } from 'react-redux'; +import { setUsdToggle } from 'store/user/user'; +import { ButtonToggle } from 'components/button/Button'; + +export const SwapSwitch = () => { + const dispatch = useDispatch(); + const isEnabled = useAppSelector((state) => state.user.usdToggle); + const setIsEnabled = (state: boolean) => { + dispatch(setUsdToggle(state)); + }; + + return ( +
+ , + , + ]} + onClass="bg-white text-black dark:bg-charcoal dark:text-white" + toggle={isEnabled} + setToggle={() => setIsEnabled(!isEnabled)} + /> +
+ ); +}; diff --git a/src/elements/trade/TradeWidgetInput.tsx b/src/elements/trade/TradeWidgetInput.tsx index a01b69d6c..03a56047b 100644 --- a/src/elements/trade/TradeWidgetInput.tsx +++ b/src/elements/trade/TradeWidgetInput.tsx @@ -7,7 +7,6 @@ import { TokenMinimal } from 'services/observables/tokens'; import { SearchableTokenList } from 'components/searchableTokenList/SearchableTokenList'; import { ReactComponent as IconChevron } from 'assets/icons/chevronDown.svg'; import { classNameGenerator } from 'utils/pureFunctions'; -import { TokenCurrency } from 'store/user/user'; interface Props { input?: useTokenInputV3Return; @@ -36,16 +35,15 @@ export const TradeWidgetInput = ({ includedTokens, disableSelection, }: Props) => { - const tokenCurrency = useAppSelector((state) => state.user.tokenCurrency); - const isCurrency = tokenCurrency === TokenCurrency.Currency; + const isFiat = useAppSelector((state) => state.user.usdToggle); const inputRef = useRef(null); const [isOpen, setIsOpen] = useState(false); const [isFocused, setIsFocused] = useState(false); const value = useMemo(() => { if (!input) return ''; - return isCurrency ? input.inputFiat : input.inputTkn; - }, [input, isCurrency]); + return isFiat ? input.inputFiat : input.inputTkn; + }, [input, isFiat]); const handleFocusChange = (state: boolean) => { if (state) { @@ -68,9 +66,9 @@ export const TradeWidgetInput = ({ + + + +
+ ); +}; diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts index 3a5310211..50d3f315a 100644 --- a/src/utils/localStorage.ts +++ b/src/utils/localStorage.ts @@ -1,6 +1,7 @@ import { DarkMode, initialState as UserState } from 'store/user/user'; import { Notification } from 'store/notification/notification'; import { isProduction } from 'utils/constants'; +import { uniq } from 'lodash'; const selected_lists = 'userSelectedTokenLists'; const autoLogin = 'loginAuto'; @@ -14,6 +15,7 @@ const v2ApiUrl = 'v2ApiUrl'; const forceV3 = 'forceV3'; const enableDeposit = 'enableDeposit'; const pageRows = 'pageRows'; +const migrationDisabled = 'migrationDisabled'; const deprecated_cleanup = ['userTokenLists']; @@ -125,13 +127,22 @@ export const setV2ApiUrlLS = (url?: string) => { } }; -export const getForceV3LS = (): boolean => { - const force = localStorage.getItem(forceV3); - return force && JSON.parse(force); +export const getMigrationDisabledLS = (user?: string | null): boolean => { + const migration = localStorage.getItem(migrationDisabled); + const list = migration ? JSON.parse(migration) : []; + return list.includes(user); }; -export const setForceV3LS = (flag: boolean) => { - localStorage.setItem(forceV3, JSON.stringify(flag)); +export const setMigrationDisabledLS = (user?: string | null) => { + if (!user) return; + + const migration = localStorage.getItem(migrationDisabled); + const list = migration ? JSON.parse(migration) : []; + + localStorage.setItem( + migrationDisabled, + JSON.stringify(uniq([...list, user])) + ); }; export const resetTenderly = () => { @@ -150,3 +161,12 @@ export const getPageRowsLS = (): number => { export const setpageRowsLS = (rows: number) => { localStorage.setItem(pageRows, JSON.stringify(rows)); }; + +export const getForceV3LS = (): boolean => { + const force = localStorage.getItem(forceV3); + return force && JSON.parse(force); +}; + +export const setForceV3LS = (flag: boolean) => { + localStorage.setItem(forceV3, JSON.stringify(flag)); +}; diff --git a/src/utils/pureFunctions.ts b/src/utils/pureFunctions.ts index 1a0bdb753..e5db53459 100644 --- a/src/utils/pureFunctions.ts +++ b/src/utils/pureFunctions.ts @@ -75,5 +75,5 @@ export const sorAlphaByKey = (a: T, b: T, key: string[]) => { .localeCompare((_get(b, key) as unknown as string).toUpperCase()); }; -export const openNewTab = (url: string) => +export const openNewTab = (url?: string) => window.open(url, '_blank', 'noopener'); From 61223ac8b649ffe38f2e145cb5f16dbb06156057 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Wed, 9 Nov 2022 11:37:03 +0200 Subject: [PATCH 4/9] changed the modal design --- src/components/WarningModal.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/WarningModal.tsx b/src/components/WarningModal.tsx index bde1d54c1..9b42fdbfc 100644 --- a/src/components/WarningModal.tsx +++ b/src/components/WarningModal.tsx @@ -24,10 +24,12 @@ export const WarningModal = ({ const account = useAppSelector((state) => state.user.account); return ( - +
-
-

{description}

+
+

+ {description} +

); - return isPoolExistV3 ? ( - disabled ? ( - button}> - Hold tight, migration will be available again shortly - - ) : ( - button - ) - ) : ( - <> - ); - }, [position, migrate, isPoolExistV3, isMigrateDisabled]); + }, []); - const groupContent = useMemo(() => { - const disabled = isMigrateDisabled(position.subRows); - const button = ( - - ); - return isPoolExistV3 ? ( - disabled ? ( - button}> - Hold tight, migration will be available again shortly - - ) : ( - button - ) - ) : ( - <> - ); - }, [position, migrate, isPoolExistV3, isMigrateDisabled]); return (
{TableCellExpander({ cellData, singleContent, - groupContent, - subMenu: () => setIsOpenWithdraw(true), })} - - -
); }; diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts index 50d3f315a..5097f3020 100644 --- a/src/utils/localStorage.ts +++ b/src/utils/localStorage.ts @@ -15,9 +15,9 @@ const v2ApiUrl = 'v2ApiUrl'; const forceV3 = 'forceV3'; const enableDeposit = 'enableDeposit'; const pageRows = 'pageRows'; -const migrationDisabled = 'migrationDisabled'; +const migrationIntermediate = 'migrationIntermediate'; -const deprecated_cleanup = ['userTokenLists']; +const deprecated_cleanup = ['userTokenLists', 'migrationDisabled']; deprecated_cleanup.forEach((k) => localStorage.removeItem(k)); @@ -128,7 +128,7 @@ export const setV2ApiUrlLS = (url?: string) => { }; export const getMigrationDisabledLS = (user?: string | null): boolean => { - const migration = localStorage.getItem(migrationDisabled); + const migration = localStorage.getItem(migrationIntermediate); const list = migration ? JSON.parse(migration) : []; return list.includes(user); }; @@ -136,11 +136,11 @@ export const getMigrationDisabledLS = (user?: string | null): boolean => { export const setMigrationDisabledLS = (user?: string | null) => { if (!user) return; - const migration = localStorage.getItem(migrationDisabled); + const migration = localStorage.getItem(migrationIntermediate); const list = migration ? JSON.parse(migration) : []; localStorage.setItem( - migrationDisabled, + migrationIntermediate, JSON.stringify(uniq([...list, user])) ); }; From 188246659bad1d5090d165485a2986b60b5473c5 Mon Sep 17 00:00:00 2001 From: Doron Zavelevsky Date: Wed, 16 Nov 2022 18:23:07 +0200 Subject: [PATCH 7/9] updated text --- src/App.tsx | 4 ++-- src/utils/localStorage.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8a2a24689..dd49ff2af 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -125,8 +125,8 @@ export const App = () => { diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts index 50d3f315a..3223e3914 100644 --- a/src/utils/localStorage.ts +++ b/src/utils/localStorage.ts @@ -15,9 +15,9 @@ const v2ApiUrl = 'v2ApiUrl'; const forceV3 = 'forceV3'; const enableDeposit = 'enableDeposit'; const pageRows = 'pageRows'; -const migrationDisabled = 'migrationDisabled'; +const migrationDisabled = 'migrationDisabledV2'; -const deprecated_cleanup = ['userTokenLists']; +const deprecated_cleanup = ['userTokenLists', 'migrationDisabled']; deprecated_cleanup.forEach((k) => localStorage.removeItem(k)); From 10638df9925c1b05e001bd326dda80b5c3f26314 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Mon, 21 Nov 2022 13:11:12 +0200 Subject: [PATCH 8/9] added force v2 --- src/elements/admin/AdminControls.tsx | 19 +++++++++++++++++-- src/elements/trade/useTradeWidget.ts | 6 ++++-- src/services/web3/swap/market.ts | 6 ++++-- src/store/user/user.ts | 11 ++++++++++- src/utils/localStorage.ts | 11 +++++++++++ 5 files changed, 46 insertions(+), 7 deletions(-) diff --git a/src/elements/admin/AdminControls.tsx b/src/elements/admin/AdminControls.tsx index 56ee3b30e..2980a97f5 100644 --- a/src/elements/admin/AdminControls.tsx +++ b/src/elements/admin/AdminControls.tsx @@ -2,20 +2,35 @@ import { Switch } from 'components/switch/Switch'; import { useDispatch } from 'react-redux'; import { useAppSelector } from 'store'; import { setForceV3Routing } from 'store/user/user'; +import { setForceV2Routing } from 'store/user/user'; export const AdminControls = () => { const dispatch = useDispatch(); const forceV3Routing = useAppSelector((state) => state.user.forceV3Routing); + const forceV2Routing = useAppSelector((state) => state.user.forceV2Routing); return ( -
+

Admin Controls

Force V3 dispatch(setForceV3Routing(!forceV3Routing))} + onChange={() => { + dispatch(setForceV3Routing(!forceV3Routing)); + dispatch(setForceV2Routing(false)); + }} + /> +
+
+ Force V2 + { + dispatch(setForceV2Routing(!forceV2Routing)); + dispatch(setForceV3Routing(false)); + }} />
diff --git a/src/elements/trade/useTradeWidget.ts b/src/elements/trade/useTradeWidget.ts index 3e8d28916..58bf54d90 100644 --- a/src/elements/trade/useTradeWidget.ts +++ b/src/elements/trade/useTradeWidget.ts @@ -42,6 +42,7 @@ export const useTradeWidget = ({ const account = useAppSelector((state) => state.user.account); const isFiat = useAppSelector((state) => state.user.usdToggle); const forceV3Routing = useAppSelector((state) => state.user.forceV3Routing); + const forceV2Routing = useAppSelector((state) => state.user.forceV2Routing); const [fromInputTkn, setFromInputTkn] = useState(''); const [fromInputFiat, setFromInputFiat] = useState(''); @@ -141,13 +142,14 @@ export const useTradeWidget = ({ fromToken, toToken, val, - forceV3Routing + forceV3Routing, + forceV2Routing ); } return { rate: '', priceImpact: '', isV3: true }; }, - [forceV3Routing, isExternal] + [forceV3Routing, forceV2Routing, isExternal] ); const onFromDebounce = useCallback( diff --git a/src/services/web3/swap/market.ts b/src/services/web3/swap/market.ts index 7212e9fe4..db38e3386 100644 --- a/src/services/web3/swap/market.ts +++ b/src/services/web3/swap/market.ts @@ -27,7 +27,8 @@ export const getRateAndPriceImapct = async ( fromToken: TokenMinimal, toToken: TokenMinimal, amount: string, - forceV3Routing: boolean + forceV3Routing: boolean, + forceV2Routing: boolean ) => { try { const networkContractAddress = await bancorNetwork$ @@ -82,7 +83,8 @@ export const getRateAndPriceImapct = async ( : new BigNumber(0); const v3PriceImpact = isNaN(v3PI.toNumber()) ? '0.0000' : v3PI.toFixed(4); - const isV3 = forceV3Routing || Number(v3Rate) >= Number(v2Rate); + const isV3 = + (forceV3Routing || Number(v3Rate) >= Number(v2Rate)) && !forceV2Routing; console.log('V2 Rate', v2Rate); console.log('V3 Rate', v3Rate); diff --git a/src/store/user/user.ts b/src/store/user/user.ts index f8955ba5b..b1449b0f3 100644 --- a/src/store/user/user.ts +++ b/src/store/user/user.ts @@ -2,8 +2,10 @@ import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { RootState } from 'store'; import { getForceV3LS, - setDarkModeLS, setForceV3LS, + getForceV2LS, + setForceV2LS, + setDarkModeLS, setSlippageToleranceLS, setUsdToggleLS, } from 'utils/localStorage'; @@ -24,6 +26,7 @@ export interface UserState { locale: LocaleType; loadingBalances: boolean; forceV3Routing: boolean; + forceV2Routing: boolean; } export const initialState: UserState = { @@ -35,6 +38,7 @@ export const initialState: UserState = { locale: 'en', loadingBalances: false, forceV3Routing: getForceV3LS(), + forceV2Routing: getForceV2LS(), }; const userSlice = createSlice({ @@ -70,6 +74,10 @@ const userSlice = createSlice({ state.forceV3Routing = action.payload; setForceV3LS(action.payload); }, + setForceV2Routing: (state, action) => { + state.forceV2Routing = action.payload; + setForceV2LS(action.payload); + }, }, }); @@ -104,6 +112,7 @@ export const { setUsdToggle, setLoadingBalances, setForceV3Routing, + setForceV2Routing, } = userSlice.actions; export const user = userSlice.reducer; diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts index 3223e3914..019c78a1a 100644 --- a/src/utils/localStorage.ts +++ b/src/utils/localStorage.ts @@ -13,6 +13,7 @@ const tenderlyRpcUrl = 'tenderlyRpcUrl'; const v3ApiUrl = 'v3ApiUrl'; const v2ApiUrl = 'v2ApiUrl'; const forceV3 = 'forceV3'; +const forceV2 = 'forceV2'; const enableDeposit = 'enableDeposit'; const pageRows = 'pageRows'; const migrationDisabled = 'migrationDisabledV2'; @@ -148,6 +149,7 @@ export const setMigrationDisabledLS = (user?: string | null) => { export const resetTenderly = () => { localStorage.removeItem(tenderlyRpcUrl); localStorage.removeItem(forceV3); + localStorage.removeItem(forceV2); localStorage.removeItem(enableDeposit); }; @@ -170,3 +172,12 @@ export const getForceV3LS = (): boolean => { export const setForceV3LS = (flag: boolean) => { localStorage.setItem(forceV3, JSON.stringify(flag)); }; + +export const getForceV2LS = (): boolean => { + const force = localStorage.getItem(forceV2); + return force && JSON.parse(force); +}; + +export const setForceV2LS = (flag: boolean) => { + localStorage.setItem(forceV2, JSON.stringify(flag)); +}; From 8d657b283dd8f02817c0b91c23b7a0023d28a474 Mon Sep 17 00:00:00 2001 From: Ran Cohen Date: Tue, 22 Nov 2022 14:52:51 +0200 Subject: [PATCH 9/9] updated text --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 4c31e6978..8e2f67803 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -125,7 +125,7 @@ export const App = () => {