a

.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

@@ -61,7 +61,7 @@
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "react-app-rewired start --max-old-space-size=7168",
+    "start": "react-app-rewired start --max-old-space-size=7168 --force",
     "start-legacy": "react-app-rewired --openssl-legacy-provider start",
     "build": "GENERATE_SOURCEMAP=false CI=false react-app-rewired build --max-old-space-size=7168",
     "test": "react-app-rewired test --env=jsdom",
@@ -101,8 +101,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.22",
+    "@orbs-network/swap-ui": "^0.0.8",
+    "@orbs-network/twap-sdk": "^2.0.12",
     "@orderly.network/hooks": "^1.4.3",
     "@orderly.network/react": "^1.4.3",
     "@orderly.network/types": "^1.4.3",

public/locales/en.json

@@ -671,6 +671,7 @@
   "wrapMATIC": "Wrap {{ symbol }}",
   "wrappingMATIC": "Wrapping {{ symbol }}",
   "unwrapMATIC": "Unwrap {{ symbol }}",
+  "successfullyUnwrappedMATIC": "Successfully unwrapped {{ symbol }}",
   "unwrappingMATIC": "Unwrapping {{ symbol }}",
   "fetchingBestRoute": "Fetching Best Route",
   "contest": "Contest",
@@ -691,6 +692,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.",
@@ -934,5 +936,37 @@
   "trigger": "Trigger",
   "oldFarms": "Old Farms",
   "poolManager": "Pool Manager",
-  "notEnoughBalance": "Not Enough Balance"
+  "notEnoughBalance": "Not Enough Balance",
+  "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.",
+  "marketPriceWarning":"* Each individual trade in this order will be filled at the current market price at the time of execution.",
+  "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"
 }

src/components/ConfirmSwapModal/ConfirmSwapModal.tsx

@@ -4,13 +4,13 @@ import {
   TransactionConfirmationModal,
   TransactionErrorContent,
   ConfirmationModalContent,
+  CustomModal,
 } from 'components';
 import SwapModalHeader from './SwapModalHeader';
 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 +100,6 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
     outputCurrency,
   ]);
 
-  const liquidityHubState = useLiquidityHubState();
   // text to show while loading
   const pendingText = t('swappingFor', {
     amount1: optimalRate
@@ -110,8 +109,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

@@ -34,6 +34,7 @@ interface CurrencyInputProps {
   bgClass?: string;
   color?: string;
   id?: string;
+  disabled?: boolean;
 }
 
 const CurrencyInput: React.FC<CurrencyInputProps> = ({
@@ -51,6 +52,7 @@ const CurrencyInput: React.FC<CurrencyInputProps> = ({
   bgClass,
   color,
   id,
+  disabled,
 }) => {
   const { t } = useTranslation();
   const { account, chainId } = useActiveWeb3React();
@@ -137,7 +139,12 @@ const CurrencyInput: React.FC<CurrencyInputProps> = ({
           otherCurrency={otherCurrency}
           handleCurrencySelect={handleCurrencySelect}
         />
-        <Box className='inputWrapper'>
+        <Box
+          className='inputWrapper'
+          style={{
+            pointerEvents: disabled ? 'none' : 'auto',
+          }}
+        >
           <NumericalInput
             value={amount}
             align='right'

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';
 
 export interface HeaderMenuItem {
@@ -55,39 +50,38 @@ export const HeaderListItem: React.FC<{
   return (
     <>
       <ListItem
-        disablePadding
+        button
+        onClick={handleClick}
         className={`menu-list-item ${
           pathname !== '/' && item.link.includes(pathname) ? 'active' : ''
         }`}
       >
-        <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 ? (
-                  <img src={NewTag} alt='new menu' width={46} />
-                ) : (
-                  <></>
-                )}
-              </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 ? (
+                <img src={NewTag} alt='new menu' width={46} />
+              ) : (
+                <></>
+              )}
             </div>
-          </ListItemText>
+          </div>
+        </ListItemText>
 
-          {hasSubMenu ? (
-            open ? (
-              <KeyboardArrowUp />
-            ) : (
-              <KeyboardArrowDown />
-            )
+        {hasSubMenu ? (
+          open ? (
+            <KeyboardArrowUp />
           ) : (
-            <></>
-          )}
-        </ListItemButton>
+            <KeyboardArrowDown />
+          )
+        ) : (
+          <></>
+        )}
       </ListItem>
       {hasSubMenu && (
         <Collapse

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';
@@ -46,21 +41,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/LiquidityHubSettings';
 
 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'>