feat: 🎸 toggle of displaying line graph of open positions, modify the string of toggle of displaying trading view

.gitignore

@@ -127,3 +127,5 @@ src/constants/walletconnect.js
 .DS_Store
 
 .vscode
+intergration-test/metamask-chrome-11.0.0/
+playwright-report/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "src",
-  "version": "0.8.0+58.1",
+  "version": "0.8.0+59.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/components/open_position_item/open_position_item.tsx

@@ -26,9 +26,10 @@ import SafeMath from '../../lib/safe_math';
 type TranslateFunction = (s: string) => string;
 interface IOpenPositionItemProps {
   openCfdDetails: IDisplayCFDOrder;
+  hideOpenLineGraph?: boolean;
 }
 
-const OpenPositionItem = ({openCfdDetails}: IOpenPositionItemProps) => {
+const OpenPositionItem = ({openCfdDetails, hideOpenLineGraph}: IOpenPositionItemProps) => {
   const {t}: {t: TranslateFunction} = useTranslation('common');
 
   const marketCtx = useContext(MarketContext);
@@ -263,8 +264,25 @@ const OpenPositionItem = ({openCfdDetails}: IOpenPositionItemProps) => {
     : numberFormatted(pnl?.value);
 
   const displayedCreateTime = timestampToString(createTimestamp ?? 0);
+
+  const displayedLineGraph = hideOpenLineGraph ? null : (
+    <div className="-mx-4 mb-0 mt-3 h-60px">
+      <PositionLineGraph
+        strokeColor={[
+          displayedColorHex,
+          displayedAnnotationColor.DASH_LINE,
+          displayedAnnotationColor.STRING,
+        ]}
+        dataArray={positionLineGraphWithSpread}
+        lineGraphWidth={OPEN_POSITION_LINE_GRAPH_WIDTH}
+        annotatedValue={displayedAnnotation.VALUE}
+        annotatedString={displayedAnnotation.STRING}
+      />
+    </div>
+  );
+
   return (
-    <div className="relative my-2 min-h-140px">
+    <div className={`relative my-2 ${hideOpenLineGraph ? `min-h-50px` : `min-h-140px`}`}>
       <div
         className="absolute z-10 h-160px w-280px bg-transparent hover:cursor-pointer"
         onClick={updatedModalClickHandler}
@@ -294,19 +312,7 @@ const OpenPositionItem = ({openCfdDetails}: IOpenPositionItemProps) => {
       </div>
 
       {/* Info: (20230411 - Julian) Line graph */}
-      <div className="-mx-4 mb-0 mt-3 h-60px">
-        <PositionLineGraph
-          strokeColor={[
-            displayedColorHex,
-            displayedAnnotationColor.DASH_LINE,
-            displayedAnnotationColor.STRING,
-          ]}
-          dataArray={positionLineGraphWithSpread}
-          lineGraphWidth={OPEN_POSITION_LINE_GRAPH_WIDTH}
-          annotatedValue={displayedAnnotation.VALUE}
-          annotatedString={displayedAnnotation.STRING}
-        />
-      </div>
+      {displayedLineGraph}
 
       <div className="mt-1 flex justify-between">
         <div className="">

src/components/open_sub_tab/open_sub_tab.tsx

@@ -9,7 +9,11 @@ import {SKELETON_DISPLAY_TIME} from '../../constants/display';
 import {useGlobal} from '../../contexts/global_context';
 import {LayoutAssertion} from '../../constants/layout_assertion';
 
-const OpenSubTab = () => {
+interface IOpenSubTab {
+  hideOpenLineGraph?: boolean;
+}
+
+const OpenSubTab = (props: IOpenSubTab) => {
   const userCtx = useContext(UserContext);
   const marketCtx = useContext(MarketContext);
   const globalCtx = useGlobal();
@@ -57,7 +61,7 @@ const OpenSubTab = () => {
     cfds.map(cfd => {
       return (
         <div key={cfd.id}>
-          {<OpenPositionItem openCfdDetails={cfd} />}
+          {<OpenPositionItem openCfdDetails={cfd} hideOpenLineGraph={props?.hideOpenLineGraph} />}
           <div className="my-auto h-px w-full rounded bg-white/50"></div>
         </div>
       );

src/components/order_section/order_section.tsx

@@ -23,7 +23,11 @@ export enum ORDER_SECTION_TAB {
   POSITION = 'POSITION',
 }
 
-const OrderSection = () => {
+interface IOrderSection {
+  hideOpenLineGraph?: boolean;
+}
+
+const OrderSection = (props: IOrderSection) => {
   const {t}: {t: TranslateFunction} = useTranslation('common');
 
   const globalCtx = useGlobal();
@@ -64,6 +68,7 @@ const OrderSection = () => {
           activePositionTabMobile={positionActiveTab}
           openTabClickHandler={openTabClickHandler}
           historyTabClickHandler={historyTabClickHandler}
+          hideOpenLineGraph={props?.hideOpenLineGraph}
         />
       ) : (
         <PositionVisitorTab />
@@ -156,6 +161,7 @@ const OrderSection = () => {
           activePositionTabMobile={positionActiveTab}
           openTabClickHandler={openTabClickHandler}
           historyTabClickHandler={historyTabClickHandler}
+          hideOpenLineGraph={props?.hideOpenLineGraph}
         />
       </div>
     </div>

src/components/position_tab/position_tab.tsx

@@ -13,6 +13,7 @@ interface PositionTabProps {
   activePositionTabMobile: string;
   openTabClickHandler: () => void;
   historyTabClickHandler: () => void;
+  hideOpenLineGraph?: boolean;
 }
 
 type TranslateFunction = (s: string) => string;
@@ -23,21 +24,16 @@ const PositionTab = ({
   activePositionTabMobile,
   openTabClickHandler,
   historyTabClickHandler,
+  hideOpenLineGraph,
 }: PositionTabProps) => {
   const {t}: {t: TranslateFunction} = useTranslation('common');
   const globalCtx = useGlobal();
 
   const tabBodyWidth = 'w-320px';
 
   const currentSubTab =
-    globalCtx.layoutAssertion === LayoutAssertion.MOBILE ? (
-      activePositionTabMobile === POSITION_TAB.OPEN ? (
-        <OpenSubTab />
-      ) : (
-        <HistorySubTab />
-      )
-    ) : activePositionTabMobile === POSITION_TAB.OPEN ? (
-      <OpenSubTab />
+    activePositionTabMobile === POSITION_TAB.OPEN ? (
+      <OpenSubTab hideOpenLineGraph={hideOpenLineGraph} />
     ) : (
       <HistorySubTab />
     );

src/components/trade_page_body/trade_page_body.tsx

@@ -5,17 +5,16 @@ import {IRecommendedNews} from '../../interfaces/tidebit_defi_background/news';
 interface ITradePageBodyProps {
   briefs: IRecommendedNews[];
   hideTradingView?: boolean;
+  hideOpenLineGraph?: boolean;
 }
 
 const TradePageBody = (props: ITradePageBodyProps) => {
-  const displayedOrdersection = <OrderSection />;
-
   return (
     <>
       <div className="flex min-h-screen flex-col overflow-hidden">
         <MarketSection briefs={props.briefs} hideTradingView={props?.hideTradingView} />
 
-        {displayedOrdersection}
+        <OrderSection hideOpenLineGraph={props?.hideOpenLineGraph} />
       </div>
     </>
   );

src/contexts/user_context.tsx

@@ -645,8 +645,6 @@ export const UserProvider = ({children}: IUserProvider) => {
         eip712signature = await lunar.signTypedData(serviceTermContract);
         resultCode = Code.FAILED_TO_VERIFY_SIGNATURE;
         const verifyR: boolean = lunar.verifyTypedData(serviceTermContract, eip712signature);
-        // eslint-disable-next-line no-console
-        console.log(`verifyR`, verifyR);
         if (verifyR) {
           const deWT = `${encodedData}.${eip712signature.replace('0x', '')}`;
           setDeWT(deWT);
@@ -672,8 +670,6 @@ export const UserProvider = ({children}: IUserProvider) => {
         }
       }
     } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(`signServiceTerm error`, error);
       result.code = resultCode;
       result.reason = Reason[resultCode];
       return result;
@@ -832,8 +828,6 @@ export const UserProvider = ({children}: IUserProvider) => {
           } else throw new CustomError(Code.BALANCE_NOT_FOUND);
         } else throw new CustomError(Code.BALANCE_NOT_FOUND);
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error('error in updateBalance in ctx', error);
         throw new CustomError(Code.FAILE_TO_UPDATE_BALANCE);
       }
     }

src/pages/trade/cfd/[instId].tsx

@@ -25,6 +25,8 @@ interface IPageProps {
   briefs: IRecommendedNews[];
 }
 
+const HIDDEN = 'hidden';
+
 const Trading = (props: IPageProps) => {
   const marketCtx = useContext(MarketContext);
   const appCtx = useContext(AppContext);
@@ -35,7 +37,8 @@ const Trading = (props: IPageProps) => {
   const instId = router.query?.instId as string;
   const ticker = instId?.toUpperCase();
 
-  const hideTradingView = router.query?.trading_view === 'hide';
+  const hideTradingView = router.query?.trading_view === HIDDEN;
+  const hideOpenLineGraph = router.query?.open_line_graph === HIDDEN;
 
   const redirectToTicker = async () => {
     if (hasValue(marketCtx.availableTickers) && ticker) {
@@ -65,7 +68,11 @@ const Trading = (props: IPageProps) => {
       {displayedNavBar}
 
       <main>
-        <TradePageBody briefs={props.briefs} hideTradingView={hideTradingView} />
+        <TradePageBody
+          briefs={props.briefs}
+          hideTradingView={hideTradingView}
+          hideOpenLineGraph={hideOpenLineGraph}
+        />
       </main>
     </>
   ) : (