From 3851918f30f4216b843c3ea7eec61c1cb20cc379 Mon Sep 17 00:00:00 2001 From: Jan Langheimer Date: Mon, 20 Nov 2023 14:21:03 +0000 Subject: [PATCH] remove fiat toggle option --- src/App.tsx | 5 ---- .../tokenInputField/TokenInputField.tsx | 2 +- src/components/widgets/Widget.tsx | 2 -- .../single/AddLiquiditySingle.tsx | 6 ++-- .../pools/poolsTable/v3/DepositV3Modal.tsx | 12 ++------ .../v3/initWithdraw/V3WithdrawModal.tsx | 2 -- .../v3/initWithdraw/useV3WithdrawModal.ts | 2 +- .../WithdrawLiquidityWidget.tsx | 2 +- src/elements/modalVbnt/ModalVbnt.tsx | 4 +-- src/elements/swapHeader/SwapHeader.tsx | 2 -- src/elements/swapLimit/SwapLimit.tsx | 2 +- src/elements/swapSwitch/SwapSwitch.css | 7 ----- src/elements/swapSwitch/SwapSwitch.tsx | 29 ------------------- src/elements/trade/TradeWidgetInput.tsx | 3 +- src/elements/trade/useTknFiatInput.ts | 3 +- src/elements/trade/useTrade.ts | 2 +- src/elements/trade/useTradeWidget.ts | 2 +- src/store/user/user.ts | 8 ----- src/utils/localStorage.ts | 10 ------- 19 files changed, 14 insertions(+), 91 deletions(-) delete mode 100644 src/elements/swapSwitch/SwapSwitch.css delete mode 100644 src/elements/swapSwitch/SwapSwitch.tsx 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/modalVbnt/ModalVbnt.tsx b/src/elements/modalVbnt/ModalVbnt.tsx index 64382534d..7c867d7ac 100644 --- a/src/elements/modalVbnt/ModalVbnt.tsx +++ b/src/elements/modalVbnt/ModalVbnt.tsx @@ -1,5 +1,4 @@ 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'; @@ -46,7 +45,7 @@ export const ModalVbnt = ({ onCompleted, }: ModalVbntProps) => { 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/swapHeader/SwapHeader.tsx b/src/elements/swapHeader/SwapHeader.tsx index a26fe4de0..21861cdd4 100644 --- a/src/elements/swapHeader/SwapHeader.tsx +++ b/src/elements/swapHeader/SwapHeader.tsx @@ -1,6 +1,5 @@ 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'; @@ -43,7 +42,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/trade/TradeWidgetInput.tsx b/src/elements/trade/TradeWidgetInput.tsx index b9caa8bd0..b69a2460c 100644 --- a/src/elements/trade/TradeWidgetInput.tsx +++ b/src/elements/trade/TradeWidgetInput.tsx @@ -1,4 +1,3 @@ -import { useAppSelector } from 'store/index'; import { useTokenInputV3Return } from 'elements/trade/useTknFiatInput'; import { Image } from 'components/image/Image'; import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; @@ -37,7 +36,7 @@ export const TradeWidgetInput = ({ disableSelection, readOnly, }: Props) => { - 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/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 a5c403c26..cc04a2d03 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) : [];