[2079] Trading view advance

.github/workflows/deploy-to-cf-pages.yaml

@@ -19,8 +19,11 @@ jobs:
       contents: read
       deployments: write
       pull-requests: write
+      packages: read
     runs-on: ubuntu-latest
     timeout-minutes: 5
+    env:
+      NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
     steps:
       - name: "Checkout Github Action"
         uses: actions/checkout@v4
@@ -32,14 +35,19 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: "pnpm"
-      - name: Install Dependencies
-        run: |
-          pnpm install
       - name: create env file
         run: |
           touch .env
           echo VITE_FEATURE_TOGGLE_CLIENT_KEY=${{ vars.VITE_FEATURE_TOGGLE_CLIENT_KEY }} >> .env
+      - name: Configure npm authentication for GitHub Registry
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+        run: |
+          echo "@compolabs:registry=https://npm.pkg.github.com/" > .npmrc
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> .npmrc
+      - name: Install Dependencies
+        run: |
+          pnpm install
       - name: Build Project
         run: |
           npm run build

.github/workflows/vault-docker-helm.yaml

@@ -27,6 +27,11 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Configure npm authentication for GitHub Registry
+        run: |
+          echo "@compolabs:registry=https://npm.pkg.github.com/" > .npmrc
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> .npmrc
+
       - name: Login to Docker Registry
         uses: docker/login-action@v3
         with:

.gitignore

@@ -24,8 +24,9 @@ yarn-error.log*
 .idea
 .env
 
-public/charting_library/
 public/datafeeds/
+public/charting_library/
 src/charting_library/
 
 package-lock.json
+.npmrc

README.md

@@ -47,3 +47,4 @@ This project is licensed under the Business Source License 1.1. Please see the L
 
 For more information on Spark and how to get involved, please visit our [official website](https://docs.sprk.fi/).
 
+

index.html

@@ -4,7 +4,6 @@
     <!-- HTML Meta Tags -->
     <title>Spark</title>
     <meta charset="utf-8" />
-    <script src="/datafeeds/udf/dist/bundle.js"></script>
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
     <meta content="A Decentralized Order Book on Fuel.Network" name="description" />
 

package.json

@@ -4,8 +4,9 @@
   "private": true,
   "homepage": "https://app.sprk.fi",
   "scripts": {
-    "start": "vite --open",
-    "build": "tsc && vite build",
+    "copy-tradingview-files": "copyfiles -u 3 node_modules/@compolabs/tradingview-chart/public/**/**/** ./",
+    "start": "pnpm run copy-tradingview-files && vite --open",
+    "build": "pnpm run copy-tradingview-files && tsc && vite build",
     "lint": "eslint --ext .tsx,.ts . --fix",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
@@ -16,7 +17,8 @@
     "pnpm": ">=9.7.0"
   },
   "dependencies": {
-    "@compolabs/spark-orderbook-ts-sdk": "^1.14.2",
+    "@compolabs/spark-orderbook-ts-sdk": "https://registry.npmjs.org/@compolabs/spark-orderbook-ts-sdk/-/spark-orderbook-ts-sdk-1.14.2.tgz",
+    "@compolabs/tradingview-chart": "^1.0.21",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fuels/connectors": "^0.36.1",
@@ -72,6 +74,7 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
@@ -92,6 +95,7 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2"
   },
+  "type": "module",
   "browserslist": {
     "production": [
       ">0.2%",

src/components/AccordionItem.tsx

@@ -5,12 +5,11 @@ import { AccordionItemProps } from "@szhsin/react-accordion/types/components/Acc
 
 import { media } from "@themes/breakpoints";
 
-import ArrowIcon from "@assets/icons/arrowUp.svg?react";
-
 type Props = {
   hideBottomBorder?: boolean;
 } & AccordionItemProps;
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const AccordionItem: React.FC<Props> = ({ header, ...rest }) => (
   <AccordionItemRoot
     {...rest}
@@ -19,19 +18,13 @@ const AccordionItem: React.FC<Props> = ({ header, ...rest }) => (
     }}
     className="item"
     contentProps={{ className: "itemContent" }}
-    header={
-      <>
-        {header}
-        <ArrowIcon className="arrow" />
-      </>
-    }
     panelProps={{ className: "itemPanel" }}
   />
 );
 
 export default AccordionItem;
 
-const AccordionItemRoot = styled(RawAccordionItem)<{ hideBottomBorder?: boolean }>`
+const AccordionItemRoot = styled(RawAccordionItem)<{ hideBottomBorder?: boolean; header?: React.JSX.Element }>`
   ${({ hideBottomBorder, theme }) =>
     hideBottomBorder ? "" : `border-bottom: 1px solid ${theme.colors.borderSecondary}`};
   padding: 12px 0;

src/components/Header/MenuNav.tsx

@@ -246,15 +246,7 @@ export const MenuNav: React.FC<Props> = observer(({ isMobile, onMenuClick }) =>
           </Element>
           <AnimatePresence mode="wait">
             {isDropdownOpen && (
-              <Dropdown
-                key="dropdown"
-                ref={dropdownRef}
-                animate="open"
-                exit="closed"
-                initial="closed"
-                variants={DROPDOWN_VARIANTS}
-                onClick={handleDropdownToggle}
-              >
+              <Dropdown key="dropdown" animate="open" exit="closed" initial="closed" variants={DROPDOWN_VARIANTS}>
                 {children.map((item) => renderChildMenuItem(item, isGradient))}
               </Dropdown>
             )}
@@ -343,6 +335,7 @@ const DropdownContainer = styled.div`
   position: relative;
 `;
 
+// @ts-ignore
 const Dropdown = styled(motion(SmartFlex))`
   position: absolute;
   top: 120%;

src/global-types.ts

@@ -0,0 +1,9 @@
+// tradingview.d.ts
+declare global {
+  interface Window {
+    TradingView: any;
+    Datafeeds: any;
+  }
+}
+
+export {};

src/screens/Dashboard/AssetsDashboard.tsx

@@ -173,7 +173,7 @@ const AssetsDashboard = observer(() => {
   return (
     <>
       <TitleText type={TEXT_TYPES.H} primary>
-        Assets
+        Assets in my wallet
       </TitleText>
       <StyledTables>
         {media.desktop ? (

src/screens/Dashboard/DashboardFilter.tsx

@@ -27,7 +27,7 @@ export const DashboardFilter = observer(() => {
     <DashboardTitleContainer>
       <DashboardFilterContainer>
         <TitleText type={TEXT_TYPES.H} primary>
-          Balance
+          Your Assets in Spark
         </TitleText>
         <SmartFlex gap="5px">
           {filters.map((filter, index) => (

src/screens/SpotScreen/Chart/Chart.tsx

@@ -1,21 +1,67 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "@emotion/styled";
+import { observer } from "mobx-react";
 
+import { Row } from "@components/Flex.tsx";
+import { SmartFlex } from "@components/SmartFlex.tsx";
+import Tab from "@components/Tab.tsx";
+import { TEXT_TYPES } from "@components/Text.tsx";
 import { media } from "@themes/breakpoints";
 
-import TradingViewWidget from "./TradingViewWidget";
+import { useStores } from "@stores";
 
-const Chart: React.FC = () => {
+import TradingViewChartAdvance from "@screens/SpotScreen/Chart/TradingViewAdvanceWidget.tsx";
+import TradingViewWidget from "@screens/SpotScreen/Chart/TradingViewWidget.tsx";
+
+const TABS = [
+  { title: "SIMPLE CHART", disabled: false },
+  { title: "ADVANCED CHART", disabled: false },
+];
+
+const Chart: React.FC = observer(() => {
+  const [activeChart, setActiveChart] = useState(1);
+  const handleSelect = (active: number) => {
+    setActiveChart(active);
+  };
+
+  const { tradeStore } = useStores();
+  const market = tradeStore.market?.symbol.replace("-", "");
   return (
     <Root>
-      <TradingViewWidget />
+      <HeaderTradingView>
+        <TabContainer>
+          {TABS.map(({ title, disabled }, index) => (
+            <Tab
+              key={title + index}
+              active={activeChart === index}
+              disabled={disabled}
+              type={TEXT_TYPES.BUTTON_SECONDARY}
+              onClick={() => !disabled && handleSelect(index)}
+            >
+              {title}
+            </Tab>
+          ))}
+        </TabContainer>
+      </HeaderTradingView>
+      {activeChart === 1 ? (
+        market === "USDCUSDT" ? (
+          <CenterContainer>Not data</CenterContainer>
+        ) : (
+          <TradingViewChartAdvance />
+        )
+      ) : (
+        <TradingViewWidget />
+      )}
     </Root>
   );
-};
+});
 
 export default Chart;
 
 const Root = styled.div`
+  background: #141414;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.colors.borderSecondary};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -33,3 +79,24 @@ const Root = styled.div`
     height: 100%;
   }
 `;
+
+const CenterContainer = styled(SmartFlex)`
+  justify-content: center;
+  align-items: center;
+`;
+
+const HeaderTradingView = styled(SmartFlex)`
+  height: auto;
+  gap: 5px;
+  padding: 8px 8px 0px 8px;
+`;
+
+const TabContainer = styled(Row)`
+  align-items: center;
+  padding-left: 4px;
+  position: relative;
+
+  ${Tab} {
+    margin: 0 16px;
+  }
+`;