Test temp v2

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { UnsupportedNetwork } from 'pages/UnsupportedNetwork';
 import { LayoutHeader } from 'elements/layoutHeader/LayoutHeader';
@@ -8,14 +8,17 @@ import {
   setDarkMode,
   setDarkModeCss,
   setSlippageTolerance,
+  setUsdToggle,
 } from 'store/user/user';
 import { setNotifications } from 'store/notification/notification';
 import { store, useAppSelector } from 'store';
 import { googleTagManager } from 'services/api/googleTagManager';
 import {
   getDarkModeLS,
+  getMigrationDisabledLS,
   getNotificationsLS,
   getSlippageToleranceLS,
+  getUsdToggleLS,
   setNotificationsLS,
 } from 'utils/localStorage';
 import { subscribeToObservables } from 'services/observables/triggers';
@@ -27,14 +30,23 @@ import { setUser } from 'services/observables/user';
 import { BancorRouter } from 'router/BancorRouter';
 import { handleRestrictedWalletCheck } from 'services/restrictedWallets';
 import { RestrictedWallet } from 'pages/RestrictedWallet';
+import { WarningModal } from 'components/WarningModal';
+import { useProtectedPositions } from 'elements/earn/portfolio/liquidityProtection/protectedPositions/useProtectedPositions';
 
 const handleModeChange = (_: MediaQueryListEvent) => {
   const darkMode = store.getState().user.darkMode;
   setDarkModeCss(darkMode);
 };
 
 export const App = () => {
+  const [migrationDisabled, setMigrationDisabled] = useState(false);
+  const { data } = useProtectedPositions();
+  const [accountSawModal, setAccountSawModal] = useState<
+    string | null | undefined
+  >('');
+
   const user = useAppSelector((state) => state.user.account);
+  const migrationDisabledLS = getMigrationDisabledLS(user);
   const dispatch = useDispatch();
   const { chainId, account } = useWeb3React();
   useAutoConnect();
@@ -43,6 +55,13 @@ export const App = () => {
     (state) => state.notification.notifications
   );
 
+  useEffect(() => {
+    if (data.length !== 0 && user && user !== accountSawModal) {
+      setMigrationDisabled(true);
+      setAccountSawModal(user);
+    }
+  }, [data, accountSawModal, user]);
+
   // handle dark mode system change
   useEffect(() => {
     window
@@ -64,6 +83,9 @@ export const App = () => {
   }, []);
 
   useEffect(() => {
+    const usd = getUsdToggleLS();
+    if (usd) dispatch(setUsdToggle(usd));
+
     const notify = getNotificationsLS();
     if (notify) dispatch(setNotifications(notify));
 
@@ -101,6 +123,14 @@ export const App = () => {
         </main>
       )}
 
+      <WarningModal
+        title="Important! Please read."
+        description="Phase 3: Move v2.1 POL Surplus of Proposal: Migrate V2.1 Surplus and Open Withdrawals has begun. Immediately following the migration of protocol owned liquidity from v2.1 to v3, Phase 4: Reopen v2.1 withdrawals will begin."
+        learnMore="https://vote.bancor.network/#/proposal/0x9f80570a9133c733e81cb6578980a571be242904c9dc2dc61c2a12f8546fdd2d"
+        isOpen={migrationDisabled && !migrationDisabledLS}
+        setIsOpen={setMigrationDisabled}
+      />
+
       <MobileBottomNav />
       <NotificationAlerts />
     </BrowserRouter>

src/components/WarningModal.tsx

@@ -0,0 +1,56 @@
+import { Button, ButtonSize, ButtonVariant } from 'components/button/Button';
+import { useAppSelector } from 'store';
+import { setMigrationDisabledLS } from 'utils/localStorage';
+import { openNewTab } from 'utils/pureFunctions';
+import { Modal } from './modal/Modal';
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  title: string;
+  description: string;
+  learnMore?: string;
+  buttonText?: string;
+};
+
+export const WarningModal = ({
+  isOpen,
+  setIsOpen,
+  title,
+  description,
+  learnMore,
+  buttonText = 'I understand',
+}: Props) => {
+  const account = useAppSelector((state) => state.user.account);
+
+  return (
+    <Modal isOpen={isOpen} setIsOpen={setIsOpen} title={title} large>
+      <div className="flex justify-center items-center">
+        <div className="content-block rounded-40 p-30 pt-0 flex flex-col items-center gap-20">
+          <p className="text-black-medium dark:text-white-medium">
+            {description}
+          </p>
+          <Button
+            onClick={() => {
+              setIsOpen(false);
+              setMigrationDisabledLS(account);
+            }}
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.Full}
+          >
+            {buttonText}
+          </Button>
+          <Button
+            onClick={() => {
+              openNewTab(learnMore);
+            }}
+            variant={ButtonVariant.Tertiary}
+            size={ButtonSize.Full}
+          >
+            Learn more
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};

src/components/table/TableCellExpander.tsx

@@ -7,7 +7,7 @@ import { PopoverV3 } from 'components/popover/PopoverV3';
 
 interface Props {
   singleContent: JSX.Element;
-  groupContent: JSX.Element;
+  groupContent?: JSX.Element;
   cellData: PropsWithChildren<CellProps<any>>;
   canExpandMultiple?: boolean;
   subMenu?: Function;
@@ -29,7 +29,7 @@ export const TableCellExpander = ({
   subMenu,
 }: Props) => {
   const {
-    row: { canExpand, isExpanded, toggleRowExpanded, original },
+    row: { canExpand, isExpanded, toggleRowExpanded },
     toggleAllRowsExpanded,
   } = cellData;
 
@@ -41,11 +41,11 @@ export const TableCellExpander = ({
 
   return (
     <div className="flex items-center justify-end w-full">
-      {canExpand ? groupContent : original.groupId && singleContent}
+      {canExpand ? groupContent : singleContent}
       <div>
         {canExpand && (
           <button
-            className="w-[35px] h-[35px] border border-primary rounded-[12px]"
+            className="w-[35px] h-[35px] border rounded-[12px]"
             onClick={() => handleClick()}
           >
             {Expander(isExpanded)}

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 = ({
         <span className={'uppercase'}>{prettifiedAmount}</span>
       )}
     >
-      {prettifyNumber(amount, { ...options, abbreviate: false, usd: isUSD })}{' '}
-      {!isUSD && !isToken && ' ETH'}
+      {prettifyNumber(amount, { ...options, abbreviate: false })}{' '}
       {symbol && symbol}
     </PopoverV3>
   );
@@ -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<TokenMinimal[]>(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 (
     <div className="flex">
@@ -94,11 +61,11 @@ export const TokenBalance = ({
       />
       <div className="flex flex-col items-start">
         <div className="flex items-center gap-5 text-justify text-16">
-          {isToken && symbol}{' '}
+          {symbol}{' '}
           <AmountWithPopover
-            amount={isToken ? amount : currencyAmount}
+            amount={amount}
             symbol={symbol}
-            options={{ abbreviate, usd: !isToken }}
+            options={{ abbreviate }}
           />
           {deficitAmount && (
             <PopoverV3
@@ -112,11 +79,7 @@ export const TokenBalance = ({
           )}
         </div>
         <span className="text-secondary">
-          <CurrencyPrettifier
-            amount={isToken ? currencyAmount : amount}
-            isCurrency={isToken}
-          />{' '}
-          {!isToken && symbol}
+          {prettifyNumber(usdAmount, true)}
         </span>
       </div>
     </div>