Merge branch 'main' into externalTokens

bancorprotocol · Nov 22, 2023 · a5baaab · a5baaab
2 parents 24eb5d1 + 16dfc11
commit a5baaab
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 140 deletions.
diff --git a/src/elements/layoutHeader/LayoutHeader.tsx b/src/elements/layoutHeader/LayoutHeader.tsx
@@ -43,13 +43,8 @@ export const LayoutHeader = () => {
             <Navigate to={BancorURL.earn}>
               <IconBancor className="w-[18px]" />
             </Navigate>
-            <TopMenuDropdown
-              items={[
-                { title: 'Trade', link: BancorURL.trade() },
-                { title: 'Tokens', link: BancorURL.tokens },
-              ]}
-              className="w-[75px]"
-            />
+
+            <Navigate to={BancorURL.trade()}>Trade</Navigate>
 
             <Navigate to={BancorURL.earn}>Pools</Navigate>
             <TopMenuDropdown

diff --git 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 }) => {
       <div className="flex flex-col gap-[25px]">
         {mobile ? (
           <>
-            <Navigate to={BancorURL.tokens}>
-              <div className="flex items-center gap-10 text-black dark:text-white">
-                <IconCoins className="w-20 text-black dark:text-white" />
-                Tokens
-              </div>
-            </Navigate>
             <Navigate to={BancorURL.vote}>
               <div className="flex items-center gap-10 text-black dark:text-white">
                 <IconVote className="w-20 text-black dark:text-white" />

diff --git a/src/elements/swapHeader/SwapHeader.tsx b/src/elements/swapHeader/SwapHeader.tsx
@@ -1,38 +1,15 @@
-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 (
     <div>
       <div className="swap-header">
         <div>
-          <button
-            className={`${marketActive}`}
-            onClick={() => setIsLimit(false)}
-          >
-            Market
-          </button>
-          <span className="border-r b-silver mx-12" />
-          <button className={limitActive} onClick={() => setIsLimit(true)}>
-            Limit
-          </button>
+          <span className={'swap-header-active'}>Market</span>
         </div>
 
         <div className={'flex items-center space-x-20'}>

diff --git a/src/elements/swapWidget/SwapWidget.tsx b/src/elements/swapWidget/SwapWidget.tsx
@@ -1,33 +1,21 @@
 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 { 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) => {
+export const SwapWidget = ({ from, to, limit }: SwapWidgetProps) => {
   const tokens = useAppSelector<TokenMinimal[]>(getV2AndV3Tokens);
 
   const ethOrFirst = useCallback(() => {
@@ -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 (
     <div className="2xl:space-x-20 flex justify-center mx-auto">
       <div className="flex justify-center w-full md:w-auto mx-auto space-x-30">
         <div className="w-full md:w-auto">
           <div className="widget md:min-w-[485px] rounded-40">
-            <SwapHeader
-              isLimit={isLimit}
-              setIsLimit={(limit: boolean) =>
-                goToPage.trade({
-                  from: fromToken?.address,
-                  to: toToken?.address,
-                  limit,
-                })
-              }
-            />
+            <SwapHeader />
             <hr className="widget-separator" />
-            {isLimit ? (
-              <SwapLimit
-                fromToken={fromToken}
-                setFromToken={(from: TokenMinimal) =>
-                  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}
-              />
-            ) : (
-              <TradeWidget
-                tokens={tokens}
-                from={fromToken?.address}
-                to={toToken?.address}
-              />
-            )}
+            <TradeWidget
+              tokens={tokens}
+              from={fromToken?.address}
+              to={toToken?.address}
+            />
           </div>
-          {isLimit ? (
-            <div className="text-center text-10 text-grey mt-18">
-              Limit orders are powered by Rook
-            </div>
-          ) : (
-            ''
-          )}
         </div>
         <Insight
           fromToken={fromToken}

diff --git 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 (
     <div className="pt-[120px] px-10">
       <SwapWidget
-        isLimit={isLimit}
-        setIsLimit={setIsLimit}
         from={query.get('from')}
         to={query.get('to')}
         limit={query.get('limit')}
-        refreshLimit={refreshLimit}
       />
-      {isLimit && SwapLimitTable ? SwapLimitTable : ''}
     </div>
   );
 };
diff --git a/src/pages/Tokens.tsx b/src/pages/Tokens.tsx
diff --git 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: <Navigate to={BancorURL.earn} replace />,
     },
-    {
-      path: BancorURL.tokens,
-      element: <Tokens />,
-    },
     {
       path: BancorURL.fiat,
       element: <Fiat />,