tItem

diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 000000000..6b0bf3c6f
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run dev
+
+
diff --git a/package.json b/package.json
index 6fc5402e0..f217644c6 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@loopring-web/loopring-sdk": "2.0.19-io-pro",
+    "@loopring-web/loopring-sdk": "2.0.21-io-1",
     "@loopring-web/recharts": "^2.0.10",
     "@loopring-web/web3-provider": "^1.1.0",
     "@mui/lab": "^5.0.0-alpha.45",
@@ -37,7 +37,7 @@
     "query-string": "^7.0.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
-    "react-data-grid": "^7.0.0-canary.49",
+    "react-data-grid": "^7.0.0-beta.13",
     "react-dom": "^17.0.2",
     "react-dropzone": "^12.0.4",
     "react-grid-layout": "^1.3.0",
diff --git a/packages/common-resources/static-resources/src/constant/router.ts b/packages/common-resources/static-resources/src/constant/router.ts
index 3f0ffefb4..5c83f0d29 100644
--- a/packages/common-resources/static-resources/src/constant/router.ts
+++ b/packages/common-resources/static-resources/src/constant/router.ts
@@ -5,7 +5,6 @@ import {
   MintIcon,
   ProfileIcon,
   RecordIcon,
-  // NFTIcon,
   SecurityIcon,
   VipIcon,
   WaitApproveIcon,
@@ -14,7 +13,9 @@ import * as sdk from "@loopring-web/loopring-sdk";
 import {
   HeaderMenuItemInterface,
   HeaderMenuTabStatus,
+  InvestAdvice,
 } from "../loopring-interface";
+import { InvestMapType } from "./trade";
 
 export const FEED_BACK_LINK = "https://desk.zoho.com/portal/loopring/en/home";
 export const headerRoot = "Landing-page";
@@ -195,6 +196,15 @@ export const subMenuLayer2 = {
 };
 
 export const subMenuInvest = [
+  {
+    icon: L2MyLiquidityIcon,
+    router: { path: "/invest" },
+    label: {
+      id: "overview",
+      i18nKey: "labelInvestOverview",
+      description: "labelInvestOverviewDes",
+    },
+  },
   {
     icon: L2MyLiquidityIcon,
     router: { path: "/invest/ammpool" },
@@ -204,15 +214,15 @@ export const subMenuInvest = [
       description: "labelInvestAmmDes",
     },
   },
-  // {
-  //   icon: L2MyLiquidityIcon,
-  //   router: { path: "/invest/defi" },
-  //   label: {
-  //     id: "defi",
-  //     i18nKey: "labelInvestDefi",
-  //     description: "labelInvestDefiDes",
-  //   },
-  // },
+  {
+    icon: L2MyLiquidityIcon,
+    router: { path: "/invest/defi" },
+    label: {
+      id: "defi",
+      i18nKey: "labelInvestDefi",
+      description: "labelInvestDefiDes",
+    },
+  },
 ];
 
 export const subMenuNFT = {
@@ -414,3 +424,22 @@ export const headerMenuData: Array<HeaderMenuItemInterface> = [
     child: subMenuNFT,
   },
 ];
+
+export const ammAdvice: InvestAdvice = {
+  type: InvestMapType.AMM,
+  router: "/invest/ammpool",
+  banner: SoursURL + "images/icon-default.png",
+  titleI18n: "labelInvestAmm",
+  desI18n: "labelInvestAmmDes",
+  notification: "",
+  enable: true,
+};
+export const defiAdvice: InvestAdvice = {
+  type: InvestMapType.DEFI,
+  router: "/invest/defi",
+  notification: "",
+  banner: SoursURL + "images/icon-default.png",
+  titleI18n: "labelInvestDefi",
+  desI18n: "labelInvestDefiDes",
+  enable: true,
+};
diff --git a/packages/common-resources/static-resources/src/constant/setting.ts b/packages/common-resources/static-resources/src/constant/setting.ts
index d8fda4e25..0eba309b4 100644
--- a/packages/common-resources/static-resources/src/constant/setting.ts
+++ b/packages/common-resources/static-resources/src/constant/setting.ts
@@ -11,6 +11,10 @@ export const RowConfig = {
   rowHeight: IsMobile.any() ? 48 : 44,
   rowHeaderHeight: IsMobile.any() ? 48 : 44,
 };
+export const RowInvestConfig = {
+  rowHeight: IsMobile.any() ? 48 : 56,
+  rowHeaderHeight: IsMobile.any() ? 48 : 56,
+};
 export const DirectionTag = "\u2192";
 export const FeeChargeOrderDefault = ["ETH", "USDT", "LRC", "DAI", "USDC"];
 
diff --git a/packages/common-resources/static-resources/src/constant/trade.ts b/packages/common-resources/static-resources/src/constant/trade.ts
index 0aa0e0fdd..57cb7708c 100644
--- a/packages/common-resources/static-resources/src/constant/trade.ts
+++ b/packages/common-resources/static-resources/src/constant/trade.ts
@@ -1,6 +1,7 @@
 import {
   ChainId,
   NFTTokenInfo,
+  TokenInfo,
   UserNFTBalanceInfo,
 } from "@loopring-web/loopring-sdk";
 import { FeeInfo, IBData } from "../loopring-interface";
@@ -329,3 +330,28 @@ export const useAddressTypeLists = <
 
 export const defalutSlipage = 0.1;
 export type ForexMap<C> = { [k in keyof C]?: number };
+
+export const enum InvestMapType {
+  Token = "Token",
+  AMM = "AMM",
+  DEFI = "DEFI",
+}
+export const InvestOpenType = [InvestMapType.AMM, InvestMapType.DEFI];
+export const enum InvestDuration {
+  Flexible = "Flexible",
+  Duration = "Duration",
+  All = "All",
+}
+export type InvestItem = {
+  type: InvestMapType;
+  i18nKey: `labelInvestType_${InvestMapType}` | "";
+  apr: [start: number, end: number];
+  durationType: InvestDuration;
+  duration: string;
+};
+export type InvestDetail = {
+  token: TokenInfo;
+  apr: [start: number, end: number];
+  durationType: InvestDuration;
+  duration: string;
+};
diff --git a/packages/common-resources/static-resources/src/error/index.ts b/packages/common-resources/static-resources/src/error/index.ts
index 6d9bef224..64fbe7a7f 100644
--- a/packages/common-resources/static-resources/src/error/index.ts
+++ b/packages/common-resources/static-resources/src/error/index.ts
@@ -1,46 +1,98 @@
-export * from './errorMap'
+export * from "./errorMap";
 
 export type ErrorType = {
-    id: string,
-    messageKey: string,
-    options?: any
-}
+  id: string;
+  messageKey: string;
+  options?: any;
+};
+export type ErrorWithCodeType = {
+  id: string;
+  code: number;
+  message: string;
+  messageKey?: string;
+  options?: any;
+};
 
 export class CustomError extends Error {
-    constructor(error: ErrorType) {
-        // Pass remaining arguments (including vendor specific ones) to parent constructor
-        super(error.id)
-
-        // Maintains proper stack trace for where our error was thrown (only available on V8)
-        if (Error.captureStackTrace) {
-            Error.captureStackTrace(this, CustomError)
-        }
-
-        this.name = error.id;
-        this.message = error.id;
-        this._date = Date.now();
-        this._messageKey = error.messageKey;
-        this._options = error.options
-        // Custom debugging information
-        // this.foo = foo
-        // this.date = new Date()
+  constructor(error: ErrorType) {
+    // Pass remaining arguments (including vendor specific ones) to parent constructor
+    super(error.id);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
     }
 
-    private _options: any;
+    this.name = error.id;
+    this.message = error.id;
+    this._date = Date.now();
+    this._messageKey = error.messageKey;
+    this._options = error.options;
+    // Custom debugging information
+    // this.foo = foo
+    // this.date = new Date()
+  }
 
-    get options(): any {
-        return this._options;
-    }
+  private _options: any;
 
-    private _date: number;
+  get options(): any {
+    return this._options;
+  }
 
-    get date(): number {
-        return this._date;
-    }
+  private _date: number;
+
+  get date(): number {
+    return this._date;
+  }
+
+  private _messageKey: string;
+
+  get messageKey(): string {
+    return this._messageKey;
+  }
+}
 
-    private _messageKey: string;
+export class CustomErrorWithCode extends Error {
+  constructor(error: ErrorWithCodeType) {
+    // Pass remaining arguments (including vendor specific ones) to parent constructor
+    super(error.id);
 
-    get messageKey(): string {
-        return this._messageKey;
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
     }
+
+    this.name = error.id;
+    this._code = error.code;
+    this.message = error.message;
+    this._date = Date.now();
+    this._messageKey = error.messageKey ?? error.message;
+    // this._options = error.options;
+    // Custom debugging information          '
+    // this.foo = foo
+    // this.date = new Date()
+  }
+  private _code: number;
+
+  get code(): number {
+    return this._code;
+  }
+
+  private _options: any;
+
+  get options(): any {
+    return this._options;
+  }
+
+  private _date: number;
+
+  get date(): number {
+    return this._date;
+  }
+
+  private _messageKey: string;
+
+  get messageKey(): string {
+    return this._messageKey;
+  }
 }
diff --git a/packages/common-resources/static-resources/src/i18n/en_US/common.ts b/packages/common-resources/static-resources/src/i18n/en_US/common.ts
index 03651ac40..23ce14973 100644
--- a/packages/common-resources/static-resources/src/i18n/en_US/common.ts
+++ b/packages/common-resources/static-resources/src/i18n/en_US/common.ts
@@ -108,7 +108,7 @@ export default {
   labelAssetsTitle: "Assets",
   labelVolume: "volume",
   labelAmount: "Amount",
-  labelLiquidityDeposit: "Invest",
+  labelLiquidityDeposit: "Subscribe",
   labelLiquidityWithdraw: "Redeem",
   labelAvailable: "Available:",
   labelTokenAmount: "Amount",
@@ -146,7 +146,7 @@ export default {
   labelMyAmmRecord: "My AMM Records",
   labelCurrentActivities: "Current Activities",
   labelPastActivities: "Past Activities",
-  labelTotalPositionValue: "Total Invest",
+  labelTotalPositionValue: "Total Investment",
   labelFeeRewards: "Fee Rewards",
   labelMiningRewards: "Mining Rewards",
   labelLiquidityValue: "Liquidity Value",
@@ -314,6 +314,7 @@ export default {
   labelCreateAccountDepositDenied: "Signature request was rejected",
   labelSlippageAlert:
     "Your slippage tolerance is rather high which could result in less tokens received.",
+  labelOrderGroup: "Order Records",
   labelOrderTableOpenOrder: "Open Order",
   labelOrderTableOrderHistory: "Order History",
   labelResetLayout: "Reset Layout",
@@ -490,7 +491,7 @@ export default {
   labelVendor: "Buy with Card",
   labelLock: "Lock",
   labelWalletToWallet:
-    "The connected wallet is a contract address which cannot be used. If you are connecting a mobile Loopring Smart Wallet, you can protect it and manage guardians within the app.",
+    "The connected wallet is a contract address which cannot be used (Except Recover Wallet). If you are connecting a mobile Loopring Smart Wallet, you can protect it and manage guardians within the app.",
   labelWalletAddAsGuardian: "Add a guardian",
   labelWalletInputGuardianCode: "Input 6 digital Code and Approve",
   labelWalletScanQRCode: "Please use your Loopring wallet to scan the QR code",
@@ -792,7 +793,7 @@ export default {
   labelLayerSwapUnderstandDes:
     "LayerSwap is a 3rd party App service provider to help move tokens from exchange to Loopring L2 directly. If you have any concerns regarding their service, please check out their <1>TOS</1>.",
   labelInvestAmmTitle: "AMM Pools",
-  labelInvestBalanceTitle: "My Investment",
+  labelInvestBalanceTitle: "My Investments",
   labelTransactionsLink: "Transactions",
   labelAMMTransactionsLink: "View Pool Transactions",
   labelNFTMintWrongCIDBtn: "Wrong MetaData format",
@@ -825,20 +826,47 @@ export default {
   labelForceWithdrawNoToken:
     "No token is detected from this address to operate",
   labelForceWithdrawBtn: "Force Withdraw",
-  labelInvestDefiTitle: "Defi Invest",
-  labelInvestDefDeposit: "Invest",
+  labelInvestDefiTitle: "ETH Staking",
+  labelInvestDefDeposit: "Subscribe",
   labelInvestDefWithdraw: "Redeem",
   labelNFTDepositLabel: "Receive NFT",
   labelDefiFee: "Fee",
   labelDefiMin: "Minimum of {{arg}}",
   labelDefiNoEnough: "Not enough {{arg}}",
   labelDefiMaxBalance:
-    "Your Redeem order is too large and cannot be withdrawn immediately, you can only redeem {{ maxValue }}",
+    "Loopring rebalance pool can't satisfy your complete request. You can only redeem {{maxValue}} now. For the remaining investment, you can choose one of the approaches",
   labelDefiMaxBalance1:
-    "or you can<1><2>Withdraw to L1 and redeem through crv or lido</2><3>Wait some time and wait for pool liquidity</3></1>",
-  labelInvestBtn: "Invest",
+    "<0><1>Withdraw wSTETH to L1 and trade through CRV or LIDO directly</1><2>Wait some time for Loopring to setup the rebalance pool again, then revist the page for redeem</2></0>",
+  labelDefiNoBalance:
+  "<0>Loopring rebalance pool can't satisfy your complete request now.</0>"+
+  "<1>For the remaining investment, you can choose one of the approaches</1>"+  
+  "<2><3>Withdraw wSTETH to L1 and trade through CRV or LIDO directly</3>"+
+  "<4>Wait some time for Loopring to setup the rebalance pool again, then revist the page for redeem</4></2>",
+  labelDefiMaxBalanceJoin:"The quota is almost sold out and can't fulfil your complete order. You can only subscribe {{ maxValue }} now. Loopring will setup the pool soon, please revisit for subscription later.",
+  labelDefiNoBalanceJoin:"No quota available. Loopring will setup the pool soon, please revisit for subscription later.",
+  labelInvestBtn: "Subscribe",
   labelRedeemBtn: "Redeem",
   labelVipTitle: "VIP",
   labelSecurity: "Security",
   labelFeeTitleList: "Fee",
-};
+  labelInvestOverviewTitle: "Overview",
+  labelTitleOverviewToken: "Total Investment Tokens",
+  labelInvestType_AMM: "AMM Pool",
+  labelInvestType_DEFI: "ETH Staking",
+  labelInvestFlexible: "Flexible",
+  labelInvestDuration: "Duration",
+  labelDefiOrderTable: "ETH Staking",
+  labelTitleMyInvestAvaiable: "My Holding Tokens",
+  labelViewMore: "View more",
+  labelInvestSuccess: "Successfully {{type}} {{symbol}}",
+  labelInvestFailed: "Subscribe Failed",
+  labelDefiRiskTitle: "What is ETH Staking via Lido?",
+  labelDefiRisk:
+    "<0>Lido is a liquid staking solution for ETH 2.0 backed by industry-leading staking providers. Lido lets users stake their ETH - without locking assets or maintaining infrastructure.</0>\n" +
+    "<1>When using Lido to stake your ETH on the Ethereum beacon chain, users will receive a token (stETH), which represents their ETH on the Ethereum beacon chain on a 1:1 basis. It effectively acts as a bridge bringing ETH 2.0’s staking rewards to ETH 1.0.</1>\n" +
+    "<2>wstETH is the wrapped version of stETH. The total amount of wstETH doesn’t change after users receive the token. Instead, the token’s value increase over time to reflect ETH staking rewards earned.</2>\n",
+  labelDefiRisk2:
+    "<0>It is important to note that users can't redeem wstETH for ETH until phase 2 of Ethereum 2.0. However, users are able to trade wstETH for ETH on various exchanges at market prices.</0>"+
+    "<1>Loopring will provide a pool to allow users to trade wstETH for ETH directly on Layer 2. The pool will rebalance periodically when it reaches a specific threshold. If there is not enough inventory on Layer 2, user can always withdraw their wstETH tokens to Layer 1 and swap for ETH in Lido, Curve, or 1inch.</1>", 
+  labelDefiAgree:"I have read risk warning",
+  };
diff --git a/packages/common-resources/static-resources/src/i18n/en_US/layout.ts b/packages/common-resources/static-resources/src/i18n/en_US/layout.ts
index b48f47b3b..f6423f864 100644
--- a/packages/common-resources/static-resources/src/i18n/en_US/layout.ts
+++ b/packages/common-resources/static-resources/src/i18n/en_US/layout.ts
@@ -97,9 +97,11 @@ export default {
   labelInvestBalance: "My Investment",
   labelInvestBalanceDes: "The deposition you hold",
   labelInvestAmm: "AMM Pool",
+  labelInvestOverview: "Overview",
+  labelInvestOverviewDes: "A variety of financial investments",
   labelInvestAmmDes: "Add liquidity and earn rewards",
-  labelInvestDefi: "Defi Invest",
-  labelInvestDefiDes: "More investments, higher returns",
+  labelInvestDefi: "ETH Staking",
+  labelInvestDefiDes: "Easy stake, stable returns",
   labelDepositNFT: "Receive NFT",
   // labelDepositNFTDes:"Receive NFT"
 };
diff --git a/packages/common-resources/static-resources/src/i18n/en_US/tables.ts b/packages/common-resources/static-resources/src/i18n/en_US/tables.ts
index f10f473c5..0d7c65e15 100644
--- a/packages/common-resources/static-resources/src/i18n/en_US/tables.ts
+++ b/packages/common-resources/static-resources/src/i18n/en_US/tables.ts
@@ -87,7 +87,7 @@ export default {
   label24TradeVolume: "24h Volume",
   label24Reward: "24h Reward",
   labelAPR: "APR",
-  labelTradePool: "Invest",
+  labelTradePool: "Subscribe",
   labelAction: "Action",
   labelFilter: "Filter",
   labelFilterAllPairs: "All pairs",
@@ -100,17 +100,17 @@ export default {
   labelFeeEarned: "Fees Earned",
   labelBuy: "Buy",
   labelSell: "Sell",
-  labelAmmSide: "Invest/Redeem",
+  labelAmmSide: "Subscribe/Redeem",
   labelAmmAmount: "Amount",
   labelAmmLpTokenAmount: "LP Token Amount",
   labelAmmFee: "Fee",
   labelAmmRecordTime: "Time",
   labelAmmExit: "Redeem",
-  labelAmmJoin: "Invest",
+  labelAmmJoin: "Subscribe",
   labelAmmFilterTypes: "All Types",
-  labelAmmFilterJoin: "Invest",
+  labelAmmFilterJoin: "Subscribe",
   labelAmmFilterExit: "Redeem",
-  labelPoolTableAddLiqudity: "Invest",
+  labelPoolTableAddLiqudity: "Subscribe",
   labelPoolTableRemoveLiqudity: "Redeem",
   labelEmptyDefault: "No data to display",
   labelAmmTableType: "Type",
@@ -196,6 +196,12 @@ export default {
   labelForceWithdrawTotalDes: "All {{symbol}}",
   labelForceWithdrawDes:
     "{{address}} (Address that the token is withdrawn from L2 to L1)",
-  labelDefiInvest: "Invest",
+  labelDefiInvest: "Subscribe",
   labelDefiRedeem: "Redeem",
+  labelSelect: "Select",
+  labelDuration: "Duration",
+
+  labelInvestAll: "Both",
+  labelDefiExit: "Redeem",
+  labelDefiJoin: "Subscribe",
 };
diff --git a/packages/common-resources/static-resources/src/i18n/zh_CN/common.ts b/packages/common-resources/static-resources/src/i18n/zh_CN/common.ts
index 7ad3212d9..ad1b5ab7f 100644
--- a/packages/common-resources/static-resources/src/i18n/zh_CN/common.ts
+++ b/packages/common-resources/static-resources/src/i18n/zh_CN/common.ts
@@ -302,6 +302,7 @@ export default {
   labelCreateAccountDepositDenied:
     "您以拒绝充值 {{value}} {{symbol}}, 账户未激活",
   labelSlippageAlert: "滑点过大将会影响您出金后收到的token数量",
+  labelOrderGroup: "Order Records",
   labelOrderTableOpenOrder: "当前委托",
   labelOrderTableOrderHistory: "历史委托",
   labelResetLayout: "重置布局",
@@ -813,8 +814,8 @@ export default {
   labelForceWithdrawNoToken:
     "No token is detected from this address to operate",
   labelForceWithdrawBtn: "Force Withdraw",
-  labelInvestDefiTitle: "Defi Invest",
-  labelInvestDefDeposit: "Invest",
+  labelInvestDefiTitle: "ETH Staking",
+  labelInvestDefDeposit: "Subscribe",
   labelInvestDefWithdraw: "Redeem",
   labelNFTDepositLabel: "Receive NFT",
   labelDefiFee: "Fee",
@@ -824,9 +825,31 @@ export default {
     "Your Redeem order is too large a