New liquidity hub and twap sdk's + liquidity hub on eth

.env

@@ -14,6 +14,8 @@ REACT_APP_COINGECKO_IMMUTABLE_URL="https://tokens.coingecko.com/immutable/all.js
 REACT_APP_COINGECKO_DOGE_URL="https://tokens.coingecko.com/dogechain/all.json"
 REACT_APP_COINGECKO_ASTAR_URL="https://tokens.coingecko.com/astar/all.json"
 REACT_APP_COINGECKO_KAVA_URL="https://tokens.coingecko.com/kava/all.json"
+REACT_APP_COINGECKO_ETHEREUM_URL="https://tokens.coingecko.com/ethereum/all.json"
+
 REACT_APP_STAKING_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-staking-list-address@latest/build/quickswap-default.lpfarms.json"
 REACT_APP_DUAL_STAKING_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-staking-list-address@latest/build/quickswap-default.dualfarms.json"
 REACT_APP_SYRUP_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-staking-list-address@latest/build/quickswap-default.syrups.json"

package.json

@@ -97,8 +97,9 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.5",
-    "@orbs-network/twap-ui": "^0.10.23",
-    "@orbs-network/twap-ui-quickswap": "^0.10.23",
+    "@orbs-network/liquidity-hub-sdk": "^1.0.40",
+    "@orbs-network/swap-ui": "^0.0.14",
+    "@orbs-network/twap-sdk": "^2.0.33",
     "@orderly.network/hooks": "^1.4.3",
     "@orderly.network/react": "^1.4.3",
     "@orderly.network/types": "^1.4.3",

public/locales/en.json

@@ -700,6 +700,7 @@
   "wrapMATIC": "Wrap {{ symbol }}",
   "wrappingMATIC": "Wrapping {{ symbol }}",
   "unwrapMATIC": "Unwrap {{ symbol }}",
+  "successfullyUnwrappedMATIC": "Successfully unwrapped {{ symbol }}",
   "unwrappingMATIC": "Unwrapping {{ symbol }}",
   "fetchingBestRoute": "Fetching Best Route",
   "contest": "Contest",
@@ -720,6 +721,7 @@
   "bestTradeBanned": "Best trade is unavailable in your location. Please use v2 or v3.",
   "priceImpactReached": "Price impact is more than {{maxImpact}}%. Please use v2 or v3.",
   "priceImpactReachedV2": "Price impact is more than {{maxImpact}}%. Please use best trade or v3.",
+  "priceImpactReachedLiquidityHubEthereumTrade": "Price impact is more than {{maxImpact}}%. Please use v3.",
   "disclaimer": "Disclaimer",
   "disclaimerText1": "Please check the boxes below to confirm your agreement to the <alink>QuickSwap Terms and Conditions</alink>",
   "disclaimerText2": "I have read and understood, and do hereby agree to be legally bound as a ‘User’ under, the Terms, including all future amendments thereto. Such agreement is irrevocable and will apply to all of my uses of the Site without me providing confirmation in each specific instance.",
@@ -986,5 +988,48 @@
   "poolManager": "Pool Manager",
   "notEnoughBalance": "Not Enough Balance",
   "subNewsletter": "Subscribe to Newsletter",
-  "allRights": "All rights reserved."
+  "allRights": "All rights reserved.",
+  "hours": "hours",
+  "orders": "orders",
+  "dca-market": "DCA Market",
+  "dca-limit": "DCA Limit",
+  "allocate": "Allocate",
+  "numOfTrades": "No. of trades",
+  "individualTradeSize": "Individual trade size",
+  "amountOut": "Amount out",
+  "createdAt": "Created at",
+  "expiry": "Expiry",
+  "limitPrice": "Limit Price",
+  "progress": "Progress",
+  "excecutionPrice": "Avg. execution price",
+  "status": "Status",
+  "amountReceived": "Amount received",
+  "amountSent": "Amount sent",
+  "excecutionSummary": "Execution summary",
+  "orderInfo": "Order info",
+  "every": "Every",
+  "expiryTooltip": "This is the date and time marking the end of the period which you have selected for your order to be executed.",
+  "individualTradeSizeTooltip": "The number of input tokens that will be removed from your balance and swapped for the output token in each individual trade.",
+  "numOfTradesTooltip": "The total number of individual trades that will be scheduled as part of your order.",
+  "fillDelayTooltip": "The estimated minimum amount of time that will elapse between each trade in your order.",
+  "minimumReceivedTooltip": "This is the minimum number of tokens that may be received. NOTE: This minimum only refers to executed trades. Some trades may not be executed if the limit price is higher than the available market prices and your order may only be partially filled.",
+  "orbs": "Orbs",
+  "approveToken": "Approve {{ symbol }} spending",
+  "tradeSizeWarning": "Trade size must be at least ${{ usd }}",
+  "minExpiryWarning": "Min. expiry is {{ value }} minutes",
+  "maxExpiryWarning": "Max. expiry is 30 days",
+  "minFillDelayWarning": "Min. trade interval is {{ value }} minutes",
+  "maxFillDelayWarning": "Max. trade interval is {{ value }} days",
+  "open": "open",
+  "limitPriceWarning": "Limit orders may not execute when the token's price is equal or close to the limit price, due to gas and standard swap fees.",
+  "marketPriceWarning": "Each individual trade in this order will be filled at the current market price at the time of execution.",
+  "toBuy": "To Buy",
+  "confirmOrder": "Confirm Order",
+  "allocated": "Allocated",
+  "twapMarketOrder": "TWAP Market Order",
+  "twapLimitOrder": "TWAP Limit Order",
+  "limitOrder": "Limit Order",
+  "created": "Created",
+  "create": "Create",
+  "networkFeeHelper": "Network fees are paid for transaction"
 }

src/components/ConfirmSwapModal/ConfirmSwapModal.tsx

@@ -10,7 +10,6 @@ import { formatTokenAmount } from 'utils';
 import 'components/styles/ConfirmSwapModal.scss';
 import { useTranslation } from 'react-i18next';
 import { OptimalRate } from '@paraswap/sdk';
-import { useLiquidityHubState } from 'state/swap/liquidity-hub/hooks';
 
 /**
  * Returns true if the trade requires a confirmation of details before we can submit it
@@ -100,7 +99,6 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
     outputCurrency,
   ]);
 
-  const liquidityHubState = useLiquidityHubState();
   // text to show while loading
   const pendingText = t('swappingFor', {
     amount1: optimalRate
@@ -110,8 +108,7 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
       ? trade?.inputAmount?.currency?.symbol
       : inputCurrency?.symbol,
     amount2: optimalRate
-      ? Number(liquidityHubState.outAmount || optimalRate.destAmount) /
-        10 ** optimalRate.destDecimals
+      ? Number(optimalRate.destAmount) / 10 ** optimalRate.destDecimals
       : formatTokenAmount(trade?.outputAmount),
     symbol2: trade
       ? trade?.outputAmount?.currency?.symbol

src/components/CurrencyInput/CurrencyInput.tsx

@@ -38,6 +38,7 @@ interface CurrencyInputProps {
   classNames?: string;
   balancePrev?: string;
   balanceAfter?: string;
+  disabled?: boolean;
 }
 
 const CurrencyInput: React.FC<CurrencyInputProps> = ({
@@ -58,6 +59,7 @@ const CurrencyInput: React.FC<CurrencyInputProps> = ({
   classNames,
   balancePrev,
   balanceAfter,
+  disabled,
 }) => {
   const { t } = useTranslation();
   const { account, chainId } = useActiveWeb3React();
@@ -157,7 +159,12 @@ const CurrencyInput: React.FC<CurrencyInputProps> = ({
         sx={{ borderRadius: '10px', padding: '8px 16px' }}
         className='bg-input1'
       >
-        <Box className='inputWrapper'>
+        <Box
+          className='inputWrapper'
+          style={{
+            pointerEvents: disabled ? 'none' : 'auto',
+          }}
+        >
           <NumericalInput
             value={amount}
             align='left'

src/components/Header/HeaderListItem.tsx

@@ -1,12 +1,7 @@
 import React from 'react';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import { List } from '@material-ui/core';
+import { Collapse, List, ListItem, ListItemText } from '@material-ui/core';
 import { useLocation, useHistory } from 'react-router-dom';
-import Collapse from '@mui/material/Collapse';
 import NewTag from 'assets/images/NewTag.png';
-
 import { KeyboardArrowDown, KeyboardArrowUp } from '@material-ui/icons';
 import { NewSparkleTag } from './NewSparkleTag';
 
@@ -58,35 +53,34 @@ export const HeaderListItem: React.FC<{
   return (
     <>
       <ListItem
-        disablePadding
+        button
+        onClick={handleClick}
         className={`menu-list-item ${
           pathname !== '/' && item.link.includes(pathname) ? 'active' : ''
         } ${classNames}`}
       >
-        <ListItemButton onClick={handleClick} className='menu-list-item'>
-          <ListItemText
-            className={`mobile-btn-text menu-list-item ${
-              pathname !== '/' && item.link.includes(pathname) ? 'active' : ''
-            }`}
-          >
-            <div className='flex menu-list-item'>
-              <div className='my-auto'>{item.text}</div>
-              <div className='mobile-new-tag'>
-                {item.isNew && <NewSparkleTag />}
-              </div>
+        <ListItemText
+          className={`mobile-btn-text menu-list-item ${
+            pathname !== '/' && item.link.includes(pathname) ? 'active' : ''
+          }`}
+        >
+          <div className='flex menu-list-item'>
+            <div className='my-auto'>{item.text}</div>
+            <div className='mobile-new-tag'>
+              {item.isNew && <NewSparkleTag />}
             </div>
-          </ListItemText>
+          </div>
+        </ListItemText>
 
-          {hasSubMenu ? (
-            open ? (
-              <KeyboardArrowUp />
-            ) : (
-              <KeyboardArrowDown />
-            )
+        {hasSubMenu ? (
+          open ? (
+            <KeyboardArrowUp />
           ) : (
-            <></>
-          )}
-        </ListItemButton>
+            <KeyboardArrowDown />
+          )
+        ) : (
+          <></>
+        )}
       </ListItem>
       {hasSubMenu && (
         <Collapse

src/components/Header/MobileHeader.tsx

@@ -38,6 +38,8 @@ const MobileHeader: React.FC<MobileHeaderProps> = ({
 
   const config = getConfig(chainId);
   const showPerps = config['perps']['available'];
+  const showPools = config['pools']['available'];
+
   const showHydra = config['hydra']['available'];
   const showPerpsV2 = config['perpsV2']['available'];
 
@@ -375,9 +377,11 @@ const MobileHeader: React.FC<MobileHeaderProps> = ({
                   }}
                 />
               </Box>
-              <Box>
-                <Link to='/pools'>{t('pool')}</Link>
-              </Box>
+              {showPools && (
+                <Box>
+                  <Link to='/pools'>{t('pool')}</Link>
+                </Box>
+              )}
               <ButtonBase
                 style={{
                   display: 'flex',

src/components/Header/MobileMenuDrawer.tsx

@@ -1,10 +1,5 @@
 import React from 'react';
-import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import { List } from '@material-ui/core';
+import { List, Box, ListItemText, ListItem, Drawer } from '@material-ui/core';
 import { ReactComponent as ThreeDashIcon } from 'assets/images/ThreeDashIcon.svg';
 import { ReactComponent as CloseIcon } from 'assets/images/close_v3.svg';
 import { HeaderListItem, HeaderMenuItem } from './HeaderListItem';
@@ -51,21 +46,21 @@ export const MobileMenuDrawer: React.FC<{ menuItems: HeaderMenuItem[] }> = ({
                   onClick={() => setOpen(false)}
                 />
               ))}
-              <ListItem disablePadding className='close-item'>
-                <ListItemButton
-                  onClick={() => {
-                    setOpen(false);
-                  }}
-                >
-                  <ListItemText className='mobile-btn-text'>
-                    <Box className='flex' mt={1}>
-                      <Box className='my-auto ml-auto'>Close</Box>
-                      <Box ml={1} pt={1}>
-                        <CloseIcon />
-                      </Box>
+              <ListItem
+                button
+                className='close-item'
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                <ListItemText className='mobile-btn-text'>
+                  <Box className='flex' mt={1}>
+                    <Box className='my-auto ml-auto'>Close</Box>
+                    <Box ml={1} pt={1}>
+                      <CloseIcon />
                     </Box>
-                  </ListItemText>
-                </ListItemButton>
+                  </Box>
+                </ListItemText>
               </ListItem>
             </List>
           </Box>

src/components/Header/StyledMenu.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
-import Menu, { MenuProps } from '@mui/material/Menu';
+import { MenuProps, styled, Menu } from '@material-ui/core';
 
 export const StyledMenu = styled((props: MenuProps) => (
   <Menu

src/components/SettingsModal/SettingsModal.tsx

@@ -21,9 +21,9 @@ import {
 import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
 import 'components/styles/SettingsModal.scss';
 import { useTranslation } from 'react-i18next';
-import { LiquidityHubTxSettings } from 'components/Swap/LiquidityHub';
 import { SLIPPAGE_AUTO } from 'state/user/reducer';
 import { isMobile } from 'react-device-detect';
+import { LiquidityHubSettings } from 'components/Swap/orbs/LiquidityHub/Components';
 
 enum SlippageError {
   InvalidInput = 'InvalidInput',
@@ -385,7 +385,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
           />
         </Box>
         <Divider />
-        <LiquidityHubTxSettings />
+        <LiquidityHubSettings />
         <Box mt={2.5} className='flex items-center justify-between'>
           <p>{t('language')}</p>
           <Box className='flex items-center'>