[2039] Change sentio logic (#240)

compolabs · Dec 24, 2024 · f237433 · f237433
1 parent 2563655
commit f237433
Show file tree

Hide file tree

Showing 15 changed files with 147 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "pnpm": ">=9.7.0"
   },
   "dependencies": {
-    "@compolabs/spark-orderbook-ts-sdk": "https://registry.npmjs.org/@compolabs/spark-orderbook-ts-sdk/-/spark-orderbook-ts-sdk-1.14.7.tgz",
+    "@compolabs/spark-orderbook-ts-sdk": "https://registry.npmjs.org/@compolabs/spark-orderbook-ts-sdk/-/spark-orderbook-ts-sdk-1.14.9.tgz",
     "@compolabs/tradingview-chart": "^1.0.21",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Pagination/Pagination-entity.tsx b/src/components/Pagination/Pagination-entity.tsx
@@ -15,7 +15,7 @@ export const PaginationEntity = ({ selected, disabled, ...props }: PaginationBut
 const ButtonStyled = styled(Button)`
   border: none;
   height: 16px !important;
-  width: 16px !important;
+  min-width: 16px !important;
   padding: 0px !important;
   box-sizing: content-box;
 `;
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -93,7 +93,10 @@ export const Pagination = observer(({ currentPage, onChange, lengthData, limit =
             </PaginationEntity>
           );
         })}
-        <PaginationButton disabled={lengthData < 1} onClick={() => handleClick(currentPage + 1)}>
+        <PaginationButton
+          disabled={totalPages === 1 || totalPages === currentPage}
+          onClick={() => handleClick(currentPage + 1)}
+        >
           <ArrowIconStyledRight />
         </PaginationButton>
       </SmartFlex>
@@ -123,4 +126,5 @@ const PaginationContainer = styled.div`
   align-items: center;
   padding: 12px;
   border-radius: 0px 0px 10px 10px;
+  background: ${({ theme }) => theme.colors.bgSecondary};
 `;
diff --git a/src/components/SelectAssets/AssetBlock.tsx b/src/components/SelectAssets/AssetBlock.tsx
@@ -34,7 +34,6 @@ const AssetBlock: React.FC<IAssetBlock> = observer(
     const { oracleStore } = useStores();
     const price = BN.formatUnits(oracleStore.getTokenIndexPrice(token.asset.priceFeed), DEFAULT_DECIMALS);
     const theme = useTheme();
-
     if (!showNullBalance && new BN(token[showBalance]).isLessThanOrEqualTo(BN.ZERO)) return null;
 
     return (

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -28,7 +28,7 @@ const Backdrop = styled.div`
   right: 0;
   background-color: rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
-  z-index: 2;
+  z-index: 3;
 `;
 const ModalDialog = styled.div`
   position: fixed;

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -11,7 +11,7 @@ export const ROUTES = {
 
 export const BRIDGE_LINK = "https://app.fuel.network/bridge";
 export const SWAP_LINK = "https://layerswap.io/app";
-export const POINTS_LINK = "https://app.fuel.network/earn-points";
+export const POINTS_LINK = "https://app.fuel.network/earn-points/phase-2/";
 export const isProduction = window.location.host === "app.sprk.fi";
 
 export const ARBITRUM_SEPOLIA_FAUCET = "https://faucet.quicknode.com/arbitrum/sepolia";

diff --git a/src/screens/Assets/MainAssets/MainAssets.tsx b/src/screens/Assets/MainAssets/MainAssets.tsx
@@ -22,7 +22,7 @@ import { MIXPANEL_EVENTS } from "@stores/MixPanelStore";
 
 import ConnectWalletDialog from "@screens/ConnectWallet";
 
-import { ROUTES } from "@constants";
+import { BRIDGE_LINK } from "@constants";
 import BN from "@utils/BN";
 
 interface MainAssetsProps {
@@ -37,8 +37,7 @@ const MainAssets: React.FC<MainAssetsProps> = observer(({ setStep }) => {
   const theme = useTheme();
 
   const balancesInfoList = balanceStore.formattedBalanceInfoList;
-  const hasPositiveBalance = balancesInfoList.some((item) => !new BN(item.balance).isZero());
-
+  const hasPositiveBalance = balancesInfoList.some((item) => !new BN(item.contractBalance).isZero());
   const accumulateBalance = balancesInfoList.reduce(
     (acc, account) => {
       const balanceValue = new BN(account.balance).multipliedBy(account.price);
@@ -84,23 +83,24 @@ const MainAssets: React.FC<MainAssetsProps> = observer(({ setStep }) => {
             primary
             onClick={() => mixPanelStore.trackEvent(MIXPANEL_EVENTS.CLICK_ASSETS, { page_name: location.pathname })}
           >
-            Assets in my wallet: ${accumulateBalance?.walletBalance.toSignificant(2)}
+            Assets in Spark
           </TextTitle>
           <CloseButton alt="Close Assets" src={closeThin} onClick={closeAssets} />
         </HeaderBlock>
-        <TextTitle type={TEXT_TYPES.BUTTON} primary>
-          *These are assets in your wallet, not in Spark
-        </TextTitle>
         <WalletBlock gap="8px" column>
           {isConnected ? (
-            accumulateBalance.balance.isPositive() && (
+            accumulateBalance.contractBalance.isGreaterThan(BN.ZERO) && (
               <>
-                {balancesInfoList.map((el) => (
-                  <AssetItem key={el.assetId}>
-                    <AssetBlock options={{ showBalance: "balance" }} token={el} />
-                  </AssetItem>
-                ))}
-                {renderOverallContent({ isConnected, balance: accumulateBalance.balance })}
+                {balancesInfoList.map((el) => {
+                  const balance = new BN(el.contractBalance).isGreaterThan(BN.ZERO);
+                  if (!balance) return <></>;
+                  return (
+                    <AssetItem key={el.assetId}>
+                      <AssetBlock options={{ showBalance: "contractBalance" }} token={el} />
+                    </AssetItem>
+                  );
+                })}
+                {renderOverallContent({ isConnected, balance: accumulateBalance.contractBalance })}
               </>
             )
           ) : (
@@ -110,7 +110,7 @@ const MainAssets: React.FC<MainAssetsProps> = observer(({ setStep }) => {
                   <AssetBlock options={{ showBalance: "contractBalance" }} token={el} />
                 </AssetItem>
               ))}
-              {renderOverallContent({ isConnected, balance: accumulateBalance.balance })}
+              {renderOverallContent({ isConnected, balance: accumulateBalance.contractBalance })}
               <BoxShadow />
             </>
           )}
@@ -120,14 +120,15 @@ const MainAssets: React.FC<MainAssetsProps> = observer(({ setStep }) => {
         <DepositedAssets alignItems="center" gap="20px" justifyContent="center" column>
           <DepositAssets />
           <TextTitleDeposit type={TEXT_TYPES.TEXT_BIG}>
-            It looks like your wallet is empty. Tap the{" "}
+            It looks like you don’t have assets in Spark. Tap the{" "}
             <LinkStyled
-              to={ROUTES.FAUCET}
+              to="#"
               onClick={() => {
                 quickAssetsStore.setQuickAssets(false);
+                window.open(BRIDGE_LINK, "_blank");
               }}
             >
-              faucet
+              bridge
             </LinkStyled>{" "}
             to grab some tokens.
           </TextTitleDeposit>

diff --git a/src/screens/Dashboard/AssetsDashboard.tsx b/src/screens/Dashboard/AssetsDashboard.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import styled from "@emotion/styled";
 import { createColumnHelper } from "@tanstack/react-table";
 import { observer } from "mobx-react";
@@ -13,28 +14,35 @@ import { SmartFlex } from "@components/SmartFlex";
 import Table from "@components/Table";
 import Text, { TEXT_TYPES } from "@components/Text";
 
+import DepositAssets from "@assets/icons/depositAssets.svg?react";
+
 import { useMedia } from "@hooks/useMedia";
 import { useStores } from "@stores";
 import { TRADE_TABLE_SIZE } from "@stores/SettingsStore.ts";
 
 import { BaseTable } from "@screens/SpotScreen/BottomTables/BaseTable";
 
+import { BRIDGE_LINK } from "@constants";
+
 const orderColumnHelper = createColumnHelper<any>();
 
 const AssetsDashboard = observer(() => {
   const [isLoading, setLoading] = useState(false);
   const media = useMedia();
   const { balanceStore } = useStores();
   const balancesInfoList = balanceStore.formattedBalanceInfoList;
-  const data = balancesInfoList.map((el) => ({
-    asset: el.asset,
-    amount: el,
-    value: new BN(el.balance).multipliedBy(el.price).toSignificant(el.asset.decimals),
-    currentPrice: new BN(el.price).toSignificant(2),
-  }));
+  const data = balancesInfoList
+    .map((el) => ({
+      asset: el.asset,
+      amount: el,
+      value: new BN(el.contractBalance).multipliedBy(el.price),
+      currentPrice: new BN(el.price).toSignificant(2),
+    }))
+    .filter((item) => new BN(item.value).isGreaterThan(BN.ZERO));
   const allContractBalance = balancesInfoList.reduce((acc, el) => {
     return acc.plus(el.contractBalance);
   }, BN.ZERO);
+  const hasPositiveBalance = balancesInfoList.some((item) => !new BN(item.contractBalance).isZero());
   const columns = [
     orderColumnHelper.accessor("asset", {
       header: "Name",
@@ -53,7 +61,7 @@ const AssetsDashboard = observer(() => {
         const value = props.getValue();
         return (
           <ValueContainer>
-            <Text primary>{new BN(value.balance).toSignificant(value.asset.decimals)}</Text>
+            <Text primary>{new BN(value.contractBalance).toSignificant(value.asset.decimals)}</Text>
             <SymbolContainer>{value.asset.symbol}</SymbolContainer>
           </ValueContainer>
         );
@@ -138,9 +146,9 @@ const AssetsDashboard = observer(() => {
         <MobileTableRowColumn>
           <Column>
             <RightText primary>
-              {ord.amount.balance} {ord.asset.symbol}
+              {ord.amount.contractBalance} {ord.asset.symbol}
             </RightText>
-            <RightText>${new BN(ord.amount.balance).multipliedBy(ord.amount.price).toSignificant(2)}</RightText>
+            <RightText>${new BN(ord.amount.contractBalance).multipliedBy(ord.amount.price).toSignificant(2)}</RightText>
           </Column>
         </MobileTableRowColumn>
       </MobileTableOrderRow>
@@ -175,15 +183,37 @@ const AssetsDashboard = observer(() => {
   return (
     <>
       <TitleText type={TEXT_TYPES.H} primary>
-        Assets in my wallet
+        Assets in Spark
       </TitleText>
       <StyledTables>
-        {media.desktop ? (
-          <BaseTable activeTab={0} size={TRADE_TABLE_SIZE.AUTO} onTabClick={() => {}}>
-            {renderTable()}
-          </BaseTable>
+        {hasPositiveBalance ? (
+          <>
+            {media.desktop ? (
+              <BaseTable activeTab={0} size={TRADE_TABLE_SIZE.AUTO} onTabClick={() => {}}>
+                {renderTable()}
+              </BaseTable>
+            ) : (
+              renderMobileRows()
+            )}
+          </>
         ) : (
-          renderMobileRows()
+          <>
+            <ColumnContainer>
+              <DepositAssets />
+              <EmptyAsset type={TEXT_TYPES.TEXT_BIG}>
+                It looks like you don’t have assets in Spark. Tap the{" "}
+                <LinkStyled
+                  to="#"
+                  onClick={() => {
+                    window.open(BRIDGE_LINK, "_blank");
+                  }}
+                >
+                  bridge
+                </LinkStyled>{" "}
+                to grab some tokens.
+              </EmptyAsset>
+            </ColumnContainer>
+          </>
         )}
       </StyledTables>
     </>
@@ -192,6 +222,12 @@ const AssetsDashboard = observer(() => {
 
 export default AssetsDashboard;
 
+const ColumnContainer = styled(Column)`
+  width: 100%;
+  align-items: center;
+  padding: 20px 0px;
+`;
+
 const TitleText = styled(Text)`
   padding-top: 32px;
   padding-bottom: 8px;
@@ -274,3 +310,20 @@ const ButtonConfirm = styled(Button)`
   width: 100%;
   min-width: 90px;
 `;
+
+const TextTitle = styled(Text)`
+  width: 100%;
+  text-align: left;
+`;
+
+const EmptyAsset = styled(TextTitle)`
+  text-align: center;
+`;
+
+const LinkStyled = styled(Link)`
+  color: ${({ theme }) => theme.colors.greenLight};
+  text-decoration: underline;
+  &:hover {
+    cursor: pointer;
+  }
+`;
diff --git a/src/screens/Dashboard/InfoDataGraph/index.tsx b/src/screens/Dashboard/InfoDataGraph/index.tsx
@@ -13,7 +13,7 @@ import { useStores } from "@stores";
 
 import TradingViewScoreboardWidget from "@screens/Dashboard/TradingViewScoreboardWidget";
 
-interface TradeEvent {
+export interface TradeEvent {
   time: number;
   value: number;
 }
@@ -64,7 +64,7 @@ const InfoDataGraph: React.FC = observer(() => {
   const { dashboardStore } = useStores();
   const data = dashboardStore.activeUserStat
     ? generateTradingData(dashboardStore.getChartDataTrading())
-    : dashboardStore.getChartDataPortfolio();
+    : generateTradingData(dashboardStore.getChartDataPortfolio());
   return data.length > 0 ? <TradingViewScoreboardWidget data={data} /> : <NoDataTrading />;
 });
 

diff --git a/src/screens/Dashboard/MarketDataSection/index.tsx b/src/screens/Dashboard/MarketDataSection/index.tsx
@@ -43,14 +43,13 @@ export const MarketDataSection: React.FC = observer(() => {
     }
 
     const sumStatsUser = portfolioVolume[portfolioVolume.length - 1];
-    const sumStatsTrading = tradingVolume[tradingVolume.length - 1];
+    const sumStatsTrading = tradingVolume.reduce((sum, item) => sum + item.value, 0);
     const updatedStats = structuredClone(marketData);
-
     updatedStats[0].period = dashboardStore.activeFilter.description ?? dashboardStore.activeFilter.title;
     updatedStats[1].period = dashboardStore.activeFilter.description ?? dashboardStore.activeFilter.title;
 
-    updatedStats[0].value = `$${sumStatsUser.value.toFixed(4)}`;
-    updatedStats[1].value = `$${sumStatsTrading?.value?.toFixed(4) ?? "0.0000"}`;
+    updatedStats[0].value = `$${sumStatsUser?.value?.toFixed(4)}`;
+    updatedStats[1].value = `$${sumStatsTrading?.toFixed(4) ?? "0.0000"}`;
     const calculateChange = (data: DataPoint[]) => {
       if (data.length === 0) {
         return {

diff --git a/src/screens/Dashboard/TradingViewScoreboardWidget.tsx b/src/screens/Dashboard/TradingViewScoreboardWidget.tsx
@@ -39,11 +39,9 @@ const TradingViewScoreboardWidget: React.FC<TradingViewScoreboardWidgetProps> =
   useEffect(() => {
     if (!chartContainerRef.current || containerDimensions.width === 0 || containerDimensions.height === 0) return;
 
-    // Если график уже существует, обновляем его размеры
     if (chartRef.current) {
       chartRef.current.resize(containerDimensions.width, containerDimensions.height);
     } else {
-      // Создаем новый график
       const chart = createChart(chartContainerRef.current, {
         width: containerDimensions.width,
         height: containerDimensions.height,
@@ -78,7 +76,9 @@ const TradingViewScoreboardWidget: React.FC<TradingViewScoreboardWidgetProps> =
         lineColor: "#04E78C",
         lineWidth: 2,
       });
+
       areaSeries.setData(data);
+      chart.timeScale().fitContent();
     }
 
     return () => {