diff --git a/src/App.tsx b/src/App.tsx index d6c47e5a2..dd92a89ef 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,7 +8,6 @@ import { setDarkMode, setDarkModeCss, setSlippageTolerance, - setUsdToggle, } from 'store/user/user'; import { setNotifications } from 'store/notification/notification'; import { store, useAppSelector } from 'store'; @@ -18,7 +17,6 @@ import { getMigrationDisabledLS, getNotificationsLS, getSlippageToleranceLS, - getUsdToggleLS, setNotificationsLS, } from 'utils/localStorage'; import { subscribeToObservables } from 'services/observables/triggers'; @@ -83,9 +81,6 @@ export const App = () => { }, []); useEffect(() => { - const usd = getUsdToggleLS(); - if (usd) dispatch(setUsdToggle(usd)); - const notify = getNotificationsLS(); if (notify) dispatch(setNotifications(notify)); diff --git a/src/components/tokenInputField/TokenInputField.tsx b/src/components/tokenInputField/TokenInputField.tsx index 0f768960c..f772e060a 100644 --- a/src/components/tokenInputField/TokenInputField.tsx +++ b/src/components/tokenInputField/TokenInputField.tsx @@ -68,7 +68,7 @@ export const TokenInputField = ({ ? new BigNumber(balance).times(token.usdPrice ?? 0).toString() : null; - const toggle = useAppSelector((state) => state.user.usdToggle); + const toggle = false; const loadingBalances = useAppSelector( (state) => state.user.loadingBalances ); diff --git a/src/components/widgets/Widget.tsx b/src/components/widgets/Widget.tsx index 217c6f6d1..9d9fdc82e 100644 --- a/src/components/widgets/Widget.tsx +++ b/src/components/widgets/Widget.tsx @@ -1,4 +1,3 @@ -import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch'; import { ReactComponent as IconTimes } from 'assets/icons/times.svg'; import { useNavigation } from 'hooks/useNavigation'; @@ -18,7 +17,6 @@ export const Widget = ({ title, subtitle, children, goBack }: Props) => { return (
-

{title}

{subtitle &&

{subtitle}

} diff --git a/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx b/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx index a79ff405c..46d1c3162 100644 --- a/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx +++ b/src/elements/earn/pools/addLiquidity/single/AddLiquiditySingle.tsx @@ -52,7 +52,6 @@ export const AddLiquiditySingle = ({ pool }: Props) => { const [errorMsg, setErrorMsg] = useState(''); const [spaceAvailableBnt, setSpaceAvailableBnt] = useState(''); const [spaceAvailableTkn, setSpaceAvailableTkn] = useState(''); - const fiatToggle = useAppSelector((state) => state.user.usdToggle); const pools = useAppSelector((state) => state.pool.v2Pools); const account = useAppSelector((state) => state.user.account); @@ -161,12 +160,11 @@ export const AddLiquiditySingle = ({ pool }: Props) => { amount, amountUsd, undefined, - undefined, - fiatToggle + undefined ); sendLiquidityEvent(Events.click); onStart(); - }, [amount, amountUsd, fiatToggle, onStart, pool.name, selectedToken.symbol]); + }, [amount, amountUsd, onStart, pool.name, selectedToken.symbol]); if (!tkn) { goToPage.notFound(); diff --git a/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx b/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx index c98218e32..074dfaa8b 100644 --- a/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx +++ b/src/elements/earn/pools/poolsTable/v3/DepositV3Modal.tsx @@ -7,7 +7,6 @@ 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'; @@ -43,6 +42,8 @@ import { PopoverV3 } from 'components/popover/PopoverV3'; import { ReactComponent as IconInfo } from 'assets/icons/info.svg'; import { ReactComponent as IconGift } from 'assets/icons/gift.svg'; +const isFiat = false; + interface Props { pool: PoolV3; renderButton: (onClick: (pool_click_location?: string) => void) => ReactNode; @@ -56,7 +57,6 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { const [tosAgreed, setTosAgreed] = useState(false); const [amount, setAmount] = useState(''); const [inputFiat, setInputFiat] = useState(''); - const isFiat = useAppSelector((state) => state.user.usdToggle); const [accessFullEarnings, setAccessFullEarnings] = useState(true); const { handleWalletButtonClick } = useWalletConnect(); @@ -257,13 +257,7 @@ export const DepositV3Modal = ({ pool, renderButton }: Props) => { sendDepositEvent(DepositEvent.DepositAmountView); setIsOpen(true); })} - } - large - > + <>
{ title={step === 4 ? 'Complete Withdraw' : 'Begin instant cooldown'} isOpen={isOpen} setIsOpen={onClose} - titleElement={step !== 4 && } > {step === 1 && ( { const { withdrawalFee, lockDuration } = useAppSelector( (state) => state.v3Portfolio.withdrawalSettings ); - const isFiat = useAppSelector((state) => state.user.usdToggle); + const isFiat = false; const [step, setStep] = useState(1); const [requestId, setRequestId] = useState(''); const [inputTkn, setInputTkn] = useState(''); diff --git a/src/elements/earn/portfolio/withdrawLiquidity/WithdrawLiquidityWidget.tsx b/src/elements/earn/portfolio/withdrawLiquidity/WithdrawLiquidityWidget.tsx index 7d5db4ae8..00fd5ca24 100644 --- a/src/elements/earn/portfolio/withdrawLiquidity/WithdrawLiquidityWidget.tsx +++ b/src/elements/earn/portfolio/withdrawLiquidity/WithdrawLiquidityWidget.tsx @@ -82,7 +82,7 @@ export const WithdrawLiquidityWidget = ({ const withdrawingBNT = reserveToken.address === bntToken; const [agreed, setAgreed] = useState(false); - const fiatToggle = useAppSelector((state) => state.user.usdToggle); + const fiatToggle = false; const bntToVBNTRatio = useMemo(() => { if (token && token.address !== bntToken) { diff --git a/src/elements/layoutHeader/LayoutHeader.tsx b/src/elements/layoutHeader/LayoutHeader.tsx index 3a1a107a7..fd9e37bbf 100644 --- a/src/elements/layoutHeader/LayoutHeader.tsx +++ b/src/elements/layoutHeader/LayoutHeader.tsx @@ -43,13 +43,8 @@ export const LayoutHeader = () => { - + + Trade Pools { const account = useAppSelector((state) => state.user.account); - const isFiat = useAppSelector((state) => state.user.usdToggle); + const isFiat = false; const [amount, setAmount] = useState(''); const percentages = useMemo(() => [25, 50, 75, 100], []); const [selPercentage, setSelPercentage] = useState(-1); @@ -151,7 +150,6 @@ export const ModalVbnt = ({ <> } setIsOpen={setIsOpen} isOpen={isOpen} separator diff --git a/src/elements/settings/SettingsMenu.tsx b/src/elements/settings/SettingsMenu.tsx index 525ff593c..9bc91a27c 100644 --- a/src/elements/settings/SettingsMenu.tsx +++ b/src/elements/settings/SettingsMenu.tsx @@ -7,7 +7,6 @@ import { ReactComponent as IconReddit } from 'assets/icons/reddit.svg'; import { ReactComponent as IconTelegram } from 'assets/icons/telegram.svg'; import { ReactComponent as IconDiscord } from 'assets/icons/discord.svg'; import { ReactComponent as IconVote } from 'assets/icons/vote.svg'; -import { ReactComponent as IconCoins } from 'assets/icons/coins.svg'; import { ReactComponent as IconForum } from 'assets/icons/forum.svg'; import { DarkMode } from './DarkMode'; import { Navigate } from 'components/navigate/Navigate'; @@ -37,12 +36,6 @@ export const SettingsMenuContent = ({ mobile }: { mobile?: boolean }) => {
{mobile ? ( <> - -
- - Tokens -
-
diff --git a/src/elements/swapHeader/SwapHeader.tsx b/src/elements/swapHeader/SwapHeader.tsx index a26fe4de0..190e337bd 100644 --- a/src/elements/swapHeader/SwapHeader.tsx +++ b/src/elements/swapHeader/SwapHeader.tsx @@ -1,38 +1,14 @@ -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'; -interface SwapHeaderProps { - isLimit: boolean; - setIsLimit: Function; -} - -export const SwapHeader = ({ isLimit, setIsLimit }: SwapHeaderProps) => { - const marketActive = classNameGenerator({ - 'swap-header-active': !isLimit, - }); - - const limitActive = classNameGenerator({ - 'swap-header-active': isLimit, - }); - +export const SwapHeader = () => { return (
- - - + Market
@@ -43,7 +19,6 @@ export const SwapHeader = ({ isLimit, setIsLimit }: SwapHeaderProps) => { > -
diff --git a/src/elements/swapLimit/SwapLimit.tsx b/src/elements/swapLimit/SwapLimit.tsx index 04d16b153..2fbdcce3a 100644 --- a/src/elements/swapLimit/SwapLimit.tsx +++ b/src/elements/swapLimit/SwapLimit.tsx @@ -85,7 +85,7 @@ export const SwapLimit = ({ const keeperDaoTokens = useAppSelector( (state) => state.bancor.keeperDaoTokens ); - const fiatToggle = useAppSelector((state) => state.user.usdToggle); + const fiatToggle = false; const percentages = useMemo(() => [1, 3, 5], []); const calculatePercentageByRate = useCallback( diff --git a/src/elements/swapSwitch/SwapSwitch.css b/src/elements/swapSwitch/SwapSwitch.css deleted file mode 100644 index aad095864..000000000 --- a/src/elements/swapSwitch/SwapSwitch.css +++ /dev/null @@ -1,7 +0,0 @@ -.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 deleted file mode 100644 index 070293bde..000000000 --- a/src/elements/swapSwitch/SwapSwitch.tsx +++ /dev/null @@ -1,29 +0,0 @@ -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/swapWidget/SwapWidget.tsx b/src/elements/swapWidget/SwapWidget.tsx index ac493add1..e47febb45 100644 --- a/src/elements/swapWidget/SwapWidget.tsx +++ b/src/elements/swapWidget/SwapWidget.tsx @@ -1,34 +1,22 @@ import { useCallback, useEffect, useState } from 'react'; import { SwapHeader } from 'elements/swapHeader/SwapHeader'; -import { SwapLimit } from 'elements/swapLimit/SwapLimit'; import { TokenMinimal } from 'services/observables/tokens'; import { useAppSelector } from 'store'; import { ethToken } from 'services/web3/config'; import { Insight } from 'elements/swapInsights/Insight'; import { IntoTheBlock, intoTheBlockByToken } from 'services/api/intoTheBlock'; import { useAsyncEffect } from 'use-async-effect'; -import { useNavigation } from 'hooks/useNavigation'; import { TradeWidget } from 'elements/trade/TradeWidget'; -import { getTradeTokensWithExternal } from 'store/bancor/bancor'; +import { getV2AndV3Tokens } from 'store/bancor/bancor'; interface SwapWidgetProps { - isLimit: boolean; - setIsLimit: Function; from: string | null; to: string | null; limit: string | null; - refreshLimit: Function; } -export const SwapWidget = ({ - isLimit, - setIsLimit, - from, - to, - limit, - refreshLimit, -}: SwapWidgetProps) => { - const tokens = useAppSelector(getTradeTokensWithExternal); +export const SwapWidget = ({ from, to, limit }: SwapWidgetProps) => { + const tokens = useAppSelector(getV2AndV3Tokens); const ethOrFirst = useCallback(() => { const eth = tokens.find((x) => x.address === ethToken); @@ -54,10 +42,8 @@ export const SwapWidget = ({ if (toToken) setToToken(toToken); else setToToken(undefined); } else setToToken(undefined); - - setIsLimit(limit); } - }, [from, to, limit, tokens, setIsLimit, ethOrFirst]); + }, [from, to, limit, tokens, ethOrFirst]); useAsyncEffect( async (isMounted) => { @@ -83,66 +69,19 @@ export const SwapWidget = ({ [toToken] ); - const { goToPage } = useNavigation(); - return (
- - goToPage.trade({ - from: fromToken?.address, - to: toToken?.address, - limit, - }) - } - /> +
- {isLimit ? ( - - goToPage.trade({ - from: from.address, - to: toToken?.address, - limit: true, - }) - } - toToken={toToken} - setToToken={(to: TokenMinimal) => - goToPage.trade({ - from: fromToken?.address, - to: to.address, - limit: true, - }) - } - switchTokens={() => - goToPage.trade({ - from: toToken?.address, - to: fromToken?.address, - limit: true, - }) - } - refreshLimit={refreshLimit} - /> - ) : ( - - )} +
- {isLimit ? ( -
- Limit orders are powered by Rook -
- ) : ( - '' - )}
{ - const isFiat = useAppSelector((state) => state.user.usdToggle); + const isFiat = false; const inputRef = useRef(null); const [isOpen, setIsOpen] = useState(false); const [isFocused, setIsFocused] = useState(false); diff --git a/src/elements/trade/useTknFiatInput.ts b/src/elements/trade/useTknFiatInput.ts index 439af9d54..99d57b777 100644 --- a/src/elements/trade/useTknFiatInput.ts +++ b/src/elements/trade/useTknFiatInput.ts @@ -1,6 +1,5 @@ import { TokenMinimal } from 'services/observables/tokens'; import { useCallback, useState } from 'react'; -import { useAppSelector } from 'store/index'; import { debounce } from 'lodash'; import { sanitizeNumberInput } from 'utils/pureFunctions'; import { calcOppositeValue } from 'components/tokenInput/useTokenInputV3'; @@ -34,7 +33,7 @@ export const useTknFiatInput = ({ setInputFiat, onDebounce = () => {}, }: useTokenInputV3Props): useTokenInputV3Return | undefined => { - const isFiat = useAppSelector((state) => state.user.usdToggle); + const isFiat = false; const symbol = token?.symbol ?? 'N/A'; const decimals = token?.decimals ?? 18; const usdPrice = token?.usdPrice ?? '0'; diff --git a/src/elements/trade/useTrade.ts b/src/elements/trade/useTrade.ts index 41b2f0c02..949d55123 100644 --- a/src/elements/trade/useTrade.ts +++ b/src/elements/trade/useTrade.ts @@ -50,7 +50,7 @@ export const useTrade = ({ (state) => state.user.slippageTolerance ); const account = useAppSelector((state) => state.user.account); - const fiatToggle = useAppSelector((state) => state.user.usdToggle); + const fiatToggle = false; const [isBusy, setIsBusy] = useState(false); diff --git a/src/elements/trade/useTradeWidget.ts b/src/elements/trade/useTradeWidget.ts index 58bf54d90..ac51c5653 100644 --- a/src/elements/trade/useTradeWidget.ts +++ b/src/elements/trade/useTradeWidget.ts @@ -40,7 +40,7 @@ export const useTradeWidget = ({ tokens, }: UseTradeWidgetProps): UseTradeWidgetReturn => { const account = useAppSelector((state) => state.user.account); - const isFiat = useAppSelector((state) => state.user.usdToggle); + const isFiat = false; const forceV3Routing = useAppSelector((state) => state.user.forceV3Routing); const forceV2Routing = useAppSelector((state) => state.user.forceV2Routing); diff --git a/src/pages/Swap.tsx b/src/pages/Swap.tsx index 52b22dbeb..c0335db13 100644 --- a/src/pages/Swap.tsx +++ b/src/pages/Swap.tsx @@ -1,24 +1,16 @@ import { SwapWidget } from 'elements/swapWidget/SwapWidget'; -import { useState } from 'react'; -import { useSwapLimitTable } from 'elements/swapLimit/SwapLimitTable'; import { useQuery } from 'hooks/useQuery'; export const Swap = () => { - const [isLimit, setIsLimit] = useState(false); - const [SwapLimitTable, refreshLimit] = useSwapLimitTable(); const query = useQuery(); return (
- {isLimit && SwapLimitTable ? SwapLimitTable : ''}
); }; diff --git a/src/pages/Tokens.tsx b/src/pages/Tokens.tsx deleted file mode 100644 index 5568218b5..000000000 --- a/src/pages/Tokens.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { TopMovers } from 'elements/tokens/TopMovers'; -import { TokenTable } from 'elements/tokens/TokenTable'; -import { useState } from 'react'; -import { Page } from 'components/Page'; - -export const Tokens = () => { - const [searchInput, setSearchInput] = useState(''); - const title = 'Tokens'; - const subtitle = 'Explore all tokens supported by Bancor.'; - - return ( - -
- - -
- - ); -}; diff --git a/src/router/useRoutesMain.tsx b/src/router/useRoutesMain.tsx index 2dd1ccd1a..1d7fb5f16 100644 --- a/src/router/useRoutesMain.tsx +++ b/src/router/useRoutesMain.tsx @@ -1,5 +1,4 @@ import { Navigate, RouteObject } from 'react-router-dom'; -import { Tokens } from 'pages/Tokens'; import { Fiat } from 'pages/Fiat'; import { Vote } from 'pages/vote/Vote'; import { TermsOfUse } from 'pages/TermsOfUse'; @@ -24,10 +23,6 @@ export const useRoutesMain = (): RouteObject[] => { path: BancorURL.index, element: , }, - { - path: BancorURL.tokens, - element: , - }, { path: BancorURL.fiat, element: , diff --git a/src/store/bancor/bancor.ts b/src/store/bancor/bancor.ts index 0100b9460..91cf266fe 100644 --- a/src/store/bancor/bancor.ts +++ b/src/store/bancor/bancor.ts @@ -155,19 +155,6 @@ export const getV2AndV3Tokens = createSelector( } ); -export const getTradeTokensWithExternal = createSelector( - (state: RootState) => state.bancor.tokensV2, - (state: RootState) => state.bancor.tokensV3, - (state: RootState) => state.bancor.tokensForTradeWithExternal, - (tokensV2, tokensV3, tokensForTradeWithExternal): TokenMinimal[] => { - const tlTokens: TokenMinimal[] = tokensForTradeWithExternal.map((t) => ({ - ...t, - isExternal: true, - })); - return uniqBy([...tokensV3, ...tokensV2, ...tlTokens], (x) => x.address); - } -); - export const bancor = bancorSlice.reducer; export const getIsAppBusy = createSelector( diff --git a/src/store/user/user.ts b/src/store/user/user.ts index b1449b0f3..2ae30eb62 100644 --- a/src/store/user/user.ts +++ b/src/store/user/user.ts @@ -7,7 +7,6 @@ import { setForceV2LS, setDarkModeLS, setSlippageToleranceLS, - setUsdToggleLS, } from 'utils/localStorage'; import { LocaleType } from '../../i18n'; @@ -22,7 +21,6 @@ export interface UserState { darkMode: DarkMode; walletModal: boolean; slippageTolerance: number; - usdToggle: boolean; locale: LocaleType; loadingBalances: boolean; forceV3Routing: boolean; @@ -34,7 +32,6 @@ export const initialState: UserState = { darkMode: DarkMode.System, walletModal: false, slippageTolerance: 0.005, - usdToggle: false, locale: 'en', loadingBalances: false, forceV3Routing: getForceV3LS(), @@ -63,10 +60,6 @@ const userSlice = createSlice({ openWalletModal: (state, action) => { state.walletModal = action.payload; }, - setUsdToggle: (state, action: PayloadAction) => { - setUsdToggleLS(action.payload); - state.usdToggle = action.payload; - }, setLoadingBalances: (state, action) => { state.loadingBalances = action.payload; }, @@ -109,7 +102,6 @@ export const { setSlippageTolerance, setLocale, openWalletModal, - setUsdToggle, setLoadingBalances, setForceV3Routing, setForceV2Routing, diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts index 4c5c663b3..4bd3fdbd4 100644 --- a/src/utils/localStorage.ts +++ b/src/utils/localStorage.ts @@ -7,7 +7,6 @@ const selected_lists = 'userSelectedTokenLists'; const autoLogin = 'loginAuto'; const darkMode = 'userDarkMode'; const slippageTolerance = 'slippageTolerance'; -const usdToggle = 'usdToggle'; const notifications = 'notifications'; const tenderlyRpcUrl = 'tenderlyRpcUrl'; const v3ApiUrl = 'v3ApiUrl'; @@ -67,15 +66,6 @@ export const setSlippageToleranceLS = (flag: number) => { localStorage.setItem(slippageTolerance, JSON.stringify(flag)); }; -export const getUsdToggleLS = (): boolean => { - const usd = localStorage.getItem(usdToggle); - return usd && JSON.parse(usd); -}; - -export const setUsdToggleLS = (flag: boolean) => { - localStorage.setItem(usdToggle, JSON.stringify(flag)); -}; - export const getNotificationsLS = (): Notification[] => { const notify = localStorage.getItem(notifications); return notify ? JSON.parse(notify) : [];