#758 - Remove the option to toggle to USD inputs

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));
 

src/components/tokenInputField/TokenInputField.tsx

@@ -68,7 +68,7 @@ export const TokenInputField = ({
       ? new BigNumber(balance).times(token.usdPrice ?? 0).toString()
       : null;
 
-  const toggle = useAppSelector<boolean>((state) => state.user.usdToggle);
+  const toggle = false;
   const loadingBalances = useAppSelector<boolean>(
     (state) => state.user.loadingBalances
   );

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 (
     <section className="widget mx-auto">
       <div className="flex justify-between py-16 px-20">
-        <SwapSwitch />
         <div className="flex items-center justify-center flex-col">
           <h1 className="text-20 font-semibold">{title}</h1>
           {subtitle && <h2 className="font-normal">{subtitle}</h2>}

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<boolean>((state) => state.user.usdToggle);
   const pools = useAppSelector<Pool[]>((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();

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);
       })}
-      <ModalV3
-        title={'Deposit'}
-        setIsOpen={onClose}
-        isOpen={isOpen}
-        titleElement={<SwapSwitch />}
-        large
-      >
+      <ModalV3 title={'Deposit'} setIsOpen={onClose} isOpen={isOpen} large>
         <>
           <div className="p-30 pb-14">
             <TradeWidgetInput

src/elements/earn/portfolio/v3/initWithdraw/V3WithdrawModal.tsx

@@ -4,7 +4,6 @@ import V3WithdrawStep1 from 'elements/earn/portfolio/v3/initWithdraw/step1/V3Wit
 import V3WithdrawStep3 from 'elements/earn/portfolio/v3/initWithdraw/step3/V3WithdrawStep3';
 import V3WithdrawStep4 from 'elements/earn/portfolio/v3/initWithdraw/step4/V3WithdrawStep4';
 import V3WithdrawStep2 from 'elements/earn/portfolio/v3/initWithdraw/step2/V3WithdrawStep2';
-import { SwapSwitch } from 'elements/swapSwitch/SwapSwitch';
 import { useV3WithdrawModal } from 'elements/earn/portfolio/v3/initWithdraw/useV3WithdrawModal';
 import { Holding } from 'store/portfolio/v3Portfolio.types';
 import {
@@ -63,7 +62,6 @@ const V3WithdrawModal = ({ isOpen, setIsOpen, holding }: Props) => {
       title={step === 4 ? 'Complete Withdraw' : 'Begin instant cooldown'}
       isOpen={isOpen}
       setIsOpen={onClose}
-      titleElement={step !== 4 && <SwapSwitch />}
     >
       {step === 1 && (
         <V3WithdrawStep1

src/elements/earn/portfolio/v3/initWithdraw/useV3WithdrawModal.ts

@@ -16,7 +16,7 @@ export const useV3WithdrawModal = ({ setIsOpen }: Props) => {
   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('');

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<boolean>((state) => state.user.usdToggle);
+  const fiatToggle = false;
 
   const bntToVBNTRatio = useMemo(() => {
     if (token && token.address !== bntToken) {

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<number>(-1);
@@ -151,7 +150,6 @@ export const ModalVbnt = ({
     <>
       <Modal
         title={`${stake ? 'Stake' : 'Unstake'} ${token.symbol}`}
-        titleElement={<SwapSwitch />}
         setIsOpen={setIsOpen}
         isOpen={isOpen}
         separator

src/elements/swapHeader/SwapHeader.tsx

@@ -1,5 +1,4 @@
 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';
@@ -20,7 +19,6 @@ export const SwapHeader = () => {
           >
             <SlippageSettings />
           </PopoverV3>
-          <SwapSwitch />
         </div>
       </div>
     </div>

src/elements/swapLimit/SwapLimit.tsx

@@ -85,7 +85,7 @@ export const SwapLimit = ({
   const keeperDaoTokens = useAppSelector<KeeprDaoToken[]>(
     (state) => state.bancor.keeperDaoTokens
   );
-  const fiatToggle = useAppSelector<boolean>((state) => state.user.usdToggle);
+  const fiatToggle = false;
   const percentages = useMemo(() => [1, 3, 5], []);
 
   const calculatePercentageByRate = useCallback(

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<HTMLInputElement>(null);
   const [isOpen, setIsOpen] = useState(false);
   const [isFocused, setIsFocused] = useState(false);

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';

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<boolean>((state) => state.user.usdToggle);
+  const fiatToggle = false;
 
   const [isBusy, setIsBusy] = useState(false);
 

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);
 

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<boolean>) => {
-      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,

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) : [];