From 67f950f01eb2a5c69d7999e69ed197c13e0f40d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B8b=C4=97rt=C3=B8?= <106074508+EchoDex@users.noreply.github.com> Date: Tue, 3 Sep 2024 13:44:03 +0400 Subject: [PATCH 1/5] feat: rename folder --- src/App.tsx | 4 ++-- src/constants/index.ts | 2 ++ src/screens/Assets/MainAssets/MainAssets.tsx | 4 ++-- .../Assets/WithdrawAssets/WithdrawAssets.tsx | 2 +- src/screens/Faucet/TokensFaucetTable.tsx | 3 +-- .../BottomTables/BaseTable.tsx | 0 .../BottomTables/BottomTables.tsx | 0 .../BottomTables/SpotTable/SpotTable.tsx | 0 .../BottomTables/SpotTable/SpotTableImpl.tsx | 0 .../BottomTables/SpotTable/SpotTableVM.tsx | 0 .../BottomTables/SpotTable/index.ts | 0 .../BottomTables/constants.ts | 0 .../BottomTables/index.ts | 0 .../Chart/Chart.tsx | 2 +- .../Chart/ChartVm.tsx | 0 .../Chart/TVChartContainer.tsx | 0 .../Chart/TradingViewWidget.tsx | 0 .../{TradeScreen => SpotScreen}/Chart/index.ts | 0 .../MarketStatistics.tsx | 0 .../MarketStatisticsBar.tsx | 0 .../OrderbookAndTradesInterface.tsx | 0 .../SpotOrderBook/SpotOrderBook.tsx | 0 .../SpotOrderBook/SpotOrderbookVM.tsx | 0 .../SpotTrades/SpotTrades.tsx | 2 +- .../SpotTrades/SpotTradesVM.tsx | 0 .../RightBlock/CreateOrder/CreateOrder.tsx | 6 ++---- .../RightBlock/CreateOrder/CreateOrderVM.tsx | 0 .../CreateOrder/OrderTypeTooltip.tsx | 0 .../RightBlock/CreateOrder/index.ts | 0 .../MarketSelection/MarketSelection.tsx | 2 +- .../RightBlock/MarketSelection/MarketTitle.tsx | 0 .../MarketSelection/SpotMarketRow.tsx | 0 .../RightBlock/MarketSelection/index.ts | 0 .../RightBlock/RightBlock.tsx | 0 .../RightBlock/index.ts | 0 .../SpotScreen.tsx} | 18 +++++++++--------- .../SpotScreenDesktop.tsx} | 12 ++++++------ .../SpotScreenMobile.tsx} | 12 ++++++------ .../StatusBar/StatusBar.tsx | 0 .../StatusBar/index.tsx | 0 .../StatusBar/tweets.ts | 0 src/screens/SpotScreen/index.ts | 2 ++ src/screens/SwapScreen/SwapScreen.tsx | 3 +-- src/screens/TradeScreen/index.ts | 2 -- src/stores/SettingsStore.ts | 2 +- 45 files changed, 38 insertions(+), 40 deletions(-) rename src/screens/{TradeScreen => SpotScreen}/BottomTables/BaseTable.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/BottomTables/BottomTables.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/BottomTables/SpotTable/SpotTable.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/BottomTables/SpotTable/SpotTableImpl.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/BottomTables/SpotTable/SpotTableVM.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/BottomTables/SpotTable/index.ts (100%) rename src/screens/{TradeScreen => SpotScreen}/BottomTables/constants.ts (100%) rename src/screens/{TradeScreen => SpotScreen}/BottomTables/index.ts (100%) rename src/screens/{TradeScreen => SpotScreen}/Chart/Chart.tsx (89%) rename src/screens/{TradeScreen => SpotScreen}/Chart/ChartVm.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/Chart/TVChartContainer.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/Chart/TradingViewWidget.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/Chart/index.ts (100%) rename src/screens/{TradeScreen => SpotScreen}/MarketStatistics.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/MarketStatisticsBar.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/OrderbookAndTradesInterface/OrderbookAndTradesInterface.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBook.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderbookVM.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx (95%) rename src/screens/{TradeScreen => SpotScreen}/OrderbookAndTradesInterface/SpotTrades/SpotTradesVM.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/CreateOrder/CreateOrder.tsx (98%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/CreateOrder/CreateOrderVM.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/CreateOrder/OrderTypeTooltip.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/CreateOrder/index.ts (100%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/MarketSelection/MarketSelection.tsx (97%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/MarketSelection/MarketTitle.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/MarketSelection/SpotMarketRow.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/MarketSelection/index.ts (100%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/RightBlock.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/RightBlock/index.ts (100%) rename src/screens/{TradeScreen/TradeScreen.tsx => SpotScreen/SpotScreen.tsx} (53%) rename src/screens/{TradeScreen/TradeScreenDesktop.tsx => SpotScreen/SpotScreenDesktop.tsx} (79%) rename src/screens/{TradeScreen/TradeScreenMobile.tsx => SpotScreen/SpotScreenMobile.tsx} (87%) rename src/screens/{TradeScreen => SpotScreen}/StatusBar/StatusBar.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/StatusBar/index.tsx (100%) rename src/screens/{TradeScreen => SpotScreen}/StatusBar/tweets.ts (100%) create mode 100644 src/screens/SpotScreen/index.ts delete mode 100644 src/screens/TradeScreen/index.ts diff --git a/src/App.tsx b/src/App.tsx index a68fc36c..99d874c9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,8 +12,8 @@ import { SplashScreen } from "./components/Splashscreen"; import { usePrivateKeyAsAuth } from "./hooks/usePrivateKeyAsAuth"; import UnderConstruction from "./screens/Errors/UnderConstruction"; import Faucet from "./screens/Faucet"; +import SpotScreen from "./screens/SpotScreen"; import { SwapScreen } from "./screens/SwapScreen"; -import TradeScreen from "./screens/TradeScreen"; import { DEFAULT_MARKET, ROUTES } from "./constants"; const isUnderConstruction = false; @@ -31,7 +31,7 @@ const App: React.FC = observer(() => {
- } path={`${ROUTES.SPOT}/:marketId`} /> + } path={`${ROUTES.SPOT}/:marketId`} /> } path={ROUTES.SWAP} /> } path={ROUTES.FAUCET} /> } path="*" /> diff --git a/src/constants/index.ts b/src/constants/index.ts index be5f90c1..ecc0ab06 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -31,6 +31,8 @@ export const EVENTS = { export const DEFAULT_MARKET = "BTC-USDC"; +export const MINIMAL_ETH_REQUIRED = 25000; // 0.000025 + const WC_PROJECT_ID = "cf4ad9eca02fdf75b8c6ef0b687ddd16"; const METADATA = { diff --git a/src/screens/Assets/MainAssets/MainAssets.tsx b/src/screens/Assets/MainAssets/MainAssets.tsx index 97376b7e..5e04e8e2 100644 --- a/src/screens/Assets/MainAssets/MainAssets.tsx +++ b/src/screens/Assets/MainAssets/MainAssets.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { useTheme } from "@emotion/react"; import styled from "@emotion/styled"; import { observer } from "mobx-react"; @@ -20,8 +20,8 @@ import { DEFAULT_DECIMALS } from "@src/constants"; import useFlag from "@src/hooks/useFlag"; import { useWallet } from "@src/hooks/useWallet"; import BN from "@src/utils/BN"; -import { useStores } from "@stores"; import { CONFIG } from "@src/utils/getConfig"; +import { useStores } from "@stores"; interface MainAssets { setStep: (value: number) => void; diff --git a/src/screens/Assets/WithdrawAssets/WithdrawAssets.tsx b/src/screens/Assets/WithdrawAssets/WithdrawAssets.tsx index adfc4dc8..8c3240ed 100644 --- a/src/screens/Assets/WithdrawAssets/WithdrawAssets.tsx +++ b/src/screens/Assets/WithdrawAssets/WithdrawAssets.tsx @@ -17,8 +17,8 @@ import WalletIcon from "@src/assets/icons/wallet.svg?react"; import { FuelNetwork } from "@src/blockchain"; import { DEFAULT_DECIMALS } from "@src/constants"; import BN from "@src/utils/BN"; -import { useStores } from "@stores"; import { CONFIG } from "@src/utils/getConfig"; +import { useStores } from "@stores"; interface WithdrawAssets { setStep: (value: number) => void; diff --git a/src/screens/Faucet/TokensFaucetTable.tsx b/src/screens/Faucet/TokensFaucetTable.tsx index 9e633d00..b4450c3c 100644 --- a/src/screens/Faucet/TokensFaucetTable.tsx +++ b/src/screens/Faucet/TokensFaucetTable.tsx @@ -7,11 +7,10 @@ import { TableText } from "@components/Table"; import Text, { TEXT_TYPES, TEXT_TYPES_MAP } from "@components/Text"; import { FuelNetwork } from "@src/blockchain"; import { SmartFlex } from "@src/components/SmartFlex"; +import { MINIMAL_ETH_REQUIRED } from "@src/constants"; import { useMedia } from "@src/hooks/useMedia"; import { useStores } from "@stores"; -import { MINIMAL_ETH_REQUIRED } from "../TradeScreen/RightBlock/CreateOrder/CreateOrder"; - import MintButtons from "./MintButtons"; const TokensFaucetTable: React.FC = observer(() => { diff --git a/src/screens/TradeScreen/BottomTables/BaseTable.tsx b/src/screens/SpotScreen/BottomTables/BaseTable.tsx similarity index 100% rename from src/screens/TradeScreen/BottomTables/BaseTable.tsx rename to src/screens/SpotScreen/BottomTables/BaseTable.tsx diff --git a/src/screens/TradeScreen/BottomTables/BottomTables.tsx b/src/screens/SpotScreen/BottomTables/BottomTables.tsx similarity index 100% rename from src/screens/TradeScreen/BottomTables/BottomTables.tsx rename to src/screens/SpotScreen/BottomTables/BottomTables.tsx diff --git a/src/screens/TradeScreen/BottomTables/SpotTable/SpotTable.tsx b/src/screens/SpotScreen/BottomTables/SpotTable/SpotTable.tsx similarity index 100% rename from src/screens/TradeScreen/BottomTables/SpotTable/SpotTable.tsx rename to src/screens/SpotScreen/BottomTables/SpotTable/SpotTable.tsx diff --git a/src/screens/TradeScreen/BottomTables/SpotTable/SpotTableImpl.tsx b/src/screens/SpotScreen/BottomTables/SpotTable/SpotTableImpl.tsx similarity index 100% rename from src/screens/TradeScreen/BottomTables/SpotTable/SpotTableImpl.tsx rename to src/screens/SpotScreen/BottomTables/SpotTable/SpotTableImpl.tsx diff --git a/src/screens/TradeScreen/BottomTables/SpotTable/SpotTableVM.tsx b/src/screens/SpotScreen/BottomTables/SpotTable/SpotTableVM.tsx similarity index 100% rename from src/screens/TradeScreen/BottomTables/SpotTable/SpotTableVM.tsx rename to src/screens/SpotScreen/BottomTables/SpotTable/SpotTableVM.tsx diff --git a/src/screens/TradeScreen/BottomTables/SpotTable/index.ts b/src/screens/SpotScreen/BottomTables/SpotTable/index.ts similarity index 100% rename from src/screens/TradeScreen/BottomTables/SpotTable/index.ts rename to src/screens/SpotScreen/BottomTables/SpotTable/index.ts diff --git a/src/screens/TradeScreen/BottomTables/constants.ts b/src/screens/SpotScreen/BottomTables/constants.ts similarity index 100% rename from src/screens/TradeScreen/BottomTables/constants.ts rename to src/screens/SpotScreen/BottomTables/constants.ts diff --git a/src/screens/TradeScreen/BottomTables/index.ts b/src/screens/SpotScreen/BottomTables/index.ts similarity index 100% rename from src/screens/TradeScreen/BottomTables/index.ts rename to src/screens/SpotScreen/BottomTables/index.ts diff --git a/src/screens/TradeScreen/Chart/Chart.tsx b/src/screens/SpotScreen/Chart/Chart.tsx similarity index 89% rename from src/screens/TradeScreen/Chart/Chart.tsx rename to src/screens/SpotScreen/Chart/Chart.tsx index 3c593b96..43db19a5 100644 --- a/src/screens/TradeScreen/Chart/Chart.tsx +++ b/src/screens/SpotScreen/Chart/Chart.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "@emotion/styled"; -import { ChartVMProvider } from "@screens/TradeScreen/Chart/ChartVm"; +import { ChartVMProvider } from "@src/screens/SpotScreen/Chart/ChartVm"; import { media } from "@src/themes/breakpoints"; import TradingViewWidget from "./TradingViewWidget"; diff --git a/src/screens/TradeScreen/Chart/ChartVm.tsx b/src/screens/SpotScreen/Chart/ChartVm.tsx similarity index 100% rename from src/screens/TradeScreen/Chart/ChartVm.tsx rename to src/screens/SpotScreen/Chart/ChartVm.tsx diff --git a/src/screens/TradeScreen/Chart/TVChartContainer.tsx b/src/screens/SpotScreen/Chart/TVChartContainer.tsx similarity index 100% rename from src/screens/TradeScreen/Chart/TVChartContainer.tsx rename to src/screens/SpotScreen/Chart/TVChartContainer.tsx diff --git a/src/screens/TradeScreen/Chart/TradingViewWidget.tsx b/src/screens/SpotScreen/Chart/TradingViewWidget.tsx similarity index 100% rename from src/screens/TradeScreen/Chart/TradingViewWidget.tsx rename to src/screens/SpotScreen/Chart/TradingViewWidget.tsx diff --git a/src/screens/TradeScreen/Chart/index.ts b/src/screens/SpotScreen/Chart/index.ts similarity index 100% rename from src/screens/TradeScreen/Chart/index.ts rename to src/screens/SpotScreen/Chart/index.ts diff --git a/src/screens/TradeScreen/MarketStatistics.tsx b/src/screens/SpotScreen/MarketStatistics.tsx similarity index 100% rename from src/screens/TradeScreen/MarketStatistics.tsx rename to src/screens/SpotScreen/MarketStatistics.tsx diff --git a/src/screens/TradeScreen/MarketStatisticsBar.tsx b/src/screens/SpotScreen/MarketStatisticsBar.tsx similarity index 100% rename from src/screens/TradeScreen/MarketStatisticsBar.tsx rename to src/screens/SpotScreen/MarketStatisticsBar.tsx diff --git a/src/screens/TradeScreen/OrderbookAndTradesInterface/OrderbookAndTradesInterface.tsx b/src/screens/SpotScreen/OrderbookAndTradesInterface/OrderbookAndTradesInterface.tsx similarity index 100% rename from src/screens/TradeScreen/OrderbookAndTradesInterface/OrderbookAndTradesInterface.tsx rename to src/screens/SpotScreen/OrderbookAndTradesInterface/OrderbookAndTradesInterface.tsx diff --git a/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBook.tsx b/src/screens/SpotScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBook.tsx similarity index 100% rename from src/screens/TradeScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBook.tsx rename to src/screens/SpotScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBook.tsx diff --git a/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderbookVM.tsx b/src/screens/SpotScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderbookVM.tsx similarity index 100% rename from src/screens/TradeScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderbookVM.tsx rename to src/screens/SpotScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderbookVM.tsx diff --git a/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx b/src/screens/SpotScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx similarity index 95% rename from src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx rename to src/screens/SpotScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx index a6f0aaf9..da32a350 100644 --- a/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx +++ b/src/screens/SpotScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx @@ -5,9 +5,9 @@ import { observer } from "mobx-react"; import { Column } from "@components/Flex"; import Text, { TEXT_TYPES } from "@components/Text"; -import { useSpotTradesVM } from "@screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTradesVM"; import Loader from "@src/components/Loader"; import { SmartFlex } from "@src/components/SmartFlex"; +import { useSpotTradesVM } from "@src/screens/SpotScreen/OrderbookAndTradesInterface/SpotTrades/SpotTradesVM"; import { media } from "@src/themes/breakpoints"; export const SpotTrades: React.FC = observer(() => { diff --git a/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTradesVM.tsx b/src/screens/SpotScreen/OrderbookAndTradesInterface/SpotTrades/SpotTradesVM.tsx similarity index 100% rename from src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTradesVM.tsx rename to src/screens/SpotScreen/OrderbookAndTradesInterface/SpotTrades/SpotTradesVM.tsx diff --git a/src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrder.tsx b/src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrder.tsx similarity index 98% rename from src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrder.tsx rename to src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrder.tsx index bc879214..d7b393d3 100644 --- a/src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrder.tsx +++ b/src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrder.tsx @@ -14,7 +14,7 @@ import TokenInput from "@components/TokenInput"; import Button, { ButtonGroup } from "@src/components/Button"; import SizedBox from "@src/components/SizedBox"; import { SmartFlex } from "@src/components/SmartFlex"; -import { DEFAULT_DECIMALS } from "@src/constants"; +import { DEFAULT_DECIMALS, MINIMAL_ETH_REQUIRED } from "@src/constants"; import useFlag from "@src/hooks/useFlag"; import { useMedia } from "@src/hooks/useMedia"; import { @@ -22,7 +22,7 @@ import { ORDER_MODE, ORDER_TYPE, useCreateOrderVM, -} from "@src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM"; +} from "@src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrderVM"; import { media } from "@src/themes/breakpoints"; import BN from "@src/utils/BN"; import { useStores } from "@stores"; @@ -36,8 +36,6 @@ const ORDER_OPTIONS = [ // { title: "Limit (FOK)", key: ORDER_TYPE.LimitFOK, timeInForce: LimitType.FOK }, ]; -export const MINIMAL_ETH_REQUIRED = 25000; // 0.000025 - const CreateOrder: React.FC = observer(() => { const { balanceStore, tradeStore, settingsStore } = useStores(); const vm = useCreateOrderVM(); diff --git a/src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM.tsx b/src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrderVM.tsx similarity index 100% rename from src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM.tsx rename to src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrderVM.tsx diff --git a/src/screens/TradeScreen/RightBlock/CreateOrder/OrderTypeTooltip.tsx b/src/screens/SpotScreen/RightBlock/CreateOrder/OrderTypeTooltip.tsx similarity index 100% rename from src/screens/TradeScreen/RightBlock/CreateOrder/OrderTypeTooltip.tsx rename to src/screens/SpotScreen/RightBlock/CreateOrder/OrderTypeTooltip.tsx diff --git a/src/screens/TradeScreen/RightBlock/CreateOrder/index.ts b/src/screens/SpotScreen/RightBlock/CreateOrder/index.ts similarity index 100% rename from src/screens/TradeScreen/RightBlock/CreateOrder/index.ts rename to src/screens/SpotScreen/RightBlock/CreateOrder/index.ts diff --git a/src/screens/TradeScreen/RightBlock/MarketSelection/MarketSelection.tsx b/src/screens/SpotScreen/RightBlock/MarketSelection/MarketSelection.tsx similarity index 97% rename from src/screens/TradeScreen/RightBlock/MarketSelection/MarketSelection.tsx rename to src/screens/SpotScreen/RightBlock/MarketSelection/MarketSelection.tsx index 6c2caff9..c71b71b4 100644 --- a/src/screens/TradeScreen/RightBlock/MarketSelection/MarketSelection.tsx +++ b/src/screens/SpotScreen/RightBlock/MarketSelection/MarketSelection.tsx @@ -11,7 +11,7 @@ import { SmartFlex } from "@src/components/SmartFlex"; import { PerpMarket, SpotMarket } from "@src/entity"; import { useMedia } from "@src/hooks/useMedia"; import { useOnClickOutside } from "@src/hooks/useOnClickOutside"; -import SpotMarketRow from "@src/screens/TradeScreen/RightBlock/MarketSelection/SpotMarketRow"; +import SpotMarketRow from "@src/screens/SpotScreen/RightBlock/MarketSelection/SpotMarketRow"; import { media } from "@src/themes/breakpoints"; import { useStores } from "@stores"; diff --git a/src/screens/TradeScreen/RightBlock/MarketSelection/MarketTitle.tsx b/src/screens/SpotScreen/RightBlock/MarketSelection/MarketTitle.tsx similarity index 100% rename from src/screens/TradeScreen/RightBlock/MarketSelection/MarketTitle.tsx rename to src/screens/SpotScreen/RightBlock/MarketSelection/MarketTitle.tsx diff --git a/src/screens/TradeScreen/RightBlock/MarketSelection/SpotMarketRow.tsx b/src/screens/SpotScreen/RightBlock/MarketSelection/SpotMarketRow.tsx similarity index 100% rename from src/screens/TradeScreen/RightBlock/MarketSelection/SpotMarketRow.tsx rename to src/screens/SpotScreen/RightBlock/MarketSelection/SpotMarketRow.tsx diff --git a/src/screens/TradeScreen/RightBlock/MarketSelection/index.ts b/src/screens/SpotScreen/RightBlock/MarketSelection/index.ts similarity index 100% rename from src/screens/TradeScreen/RightBlock/MarketSelection/index.ts rename to src/screens/SpotScreen/RightBlock/MarketSelection/index.ts diff --git a/src/screens/TradeScreen/RightBlock/RightBlock.tsx b/src/screens/SpotScreen/RightBlock/RightBlock.tsx similarity index 100% rename from src/screens/TradeScreen/RightBlock/RightBlock.tsx rename to src/screens/SpotScreen/RightBlock/RightBlock.tsx diff --git a/src/screens/TradeScreen/RightBlock/index.ts b/src/screens/SpotScreen/RightBlock/index.ts similarity index 100% rename from src/screens/TradeScreen/RightBlock/index.ts rename to src/screens/SpotScreen/RightBlock/index.ts diff --git a/src/screens/TradeScreen/TradeScreen.tsx b/src/screens/SpotScreen/SpotScreen.tsx similarity index 53% rename from src/screens/TradeScreen/TradeScreen.tsx rename to src/screens/SpotScreen/SpotScreen.tsx index a4dbc724..5da15b52 100644 --- a/src/screens/TradeScreen/TradeScreen.tsx +++ b/src/screens/SpotScreen/SpotScreen.tsx @@ -4,13 +4,13 @@ import { observer } from "mobx-react"; import Loader from "@src/components/Loader"; import { useMedia } from "@src/hooks/useMedia"; -import { CreateOrderVMProvider } from "@src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM"; +import { CreateOrderVMProvider } from "@src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrderVM"; import { useStores } from "@stores"; -import TradeScreenDesktop from "./TradeScreenDesktop"; -import TradeScreenMobile from "./TradeScreenMobile"; +import SpotScreenDesktop from "./SpotScreenDesktop"; +import SpotScreenMobile from "./SpotScreenMobile"; -const TradeScreenImpl: React.FC = observer(() => { +const SpotScreenImpl: React.FC = observer(() => { const { tradeStore } = useStores(); const media = useMedia(); @@ -18,10 +18,10 @@ const TradeScreenImpl: React.FC = observer(() => { document.title = `Spark | ${tradeStore.marketSymbol}`; }, [tradeStore.marketSymbol]); - return media.mobile ? : ; + return media.mobile ? : ; }); -const TradeScreen: React.FC = observer(() => { +const SpotScreen: React.FC = observer(() => { const { tradeStore } = useStores(); const { marketId } = useParams<{ marketId: string }>(); @@ -34,11 +34,11 @@ const TradeScreen: React.FC = observer(() => { } return ( - // TradeScreenImpl оборачивается в CreateOrderSpotVMProvider чтобы при нажатии на ордер в OrderbookAndTradesInterface устанавливать значение в RightBlock + // SpotScreenImpl оборачивается в CreateOrderSpotVMProvider чтобы при нажатии на ордер в OrderbookAndTradesInterface устанавливать значение в RightBlock - + ); }); -export default TradeScreen; +export default SpotScreen; diff --git a/src/screens/TradeScreen/TradeScreenDesktop.tsx b/src/screens/SpotScreen/SpotScreenDesktop.tsx similarity index 79% rename from src/screens/TradeScreen/TradeScreenDesktop.tsx rename to src/screens/SpotScreen/SpotScreenDesktop.tsx index 9628d0e5..f5525ffd 100644 --- a/src/screens/TradeScreen/TradeScreenDesktop.tsx +++ b/src/screens/SpotScreen/SpotScreenDesktop.tsx @@ -2,11 +2,11 @@ import React from "react"; import styled from "@emotion/styled"; import { observer } from "mobx-react"; -import BottomTables from "@screens/TradeScreen/BottomTables"; -import Chart from "@screens/TradeScreen/Chart"; -import MarketStatisticsBar from "@screens/TradeScreen/MarketStatisticsBar"; -import StatusBar from "@screens/TradeScreen/StatusBar/StatusBar"; import { Column } from "@src/components/Flex"; +import BottomTables from "@src/screens/SpotScreen/BottomTables"; +import Chart from "@src/screens/SpotScreen/Chart"; +import MarketStatisticsBar from "@src/screens/SpotScreen/MarketStatisticsBar"; +import StatusBar from "@src/screens/SpotScreen/StatusBar/StatusBar"; import { useStores } from "@src/stores"; import { media } from "@src/themes/breakpoints"; @@ -14,7 +14,7 @@ import OrderbookAndTradesInterface from "./OrderbookAndTradesInterface/Orderbook import MarketSelection from "./RightBlock/MarketSelection"; import RightBlock from "./RightBlock/RightBlock"; -const TradeScreenDesktop: React.FC = observer(() => { +const SpotScreenDesktop: React.FC = observer(() => { const { tradeStore } = useStores(); return ( @@ -34,7 +34,7 @@ const TradeScreenDesktop: React.FC = observer(() => { ); }); -export default TradeScreenDesktop; +export default SpotScreenDesktop; const Root = styled.div` display: flex; diff --git a/src/screens/TradeScreen/TradeScreenMobile.tsx b/src/screens/SpotScreen/SpotScreenMobile.tsx similarity index 87% rename from src/screens/TradeScreen/TradeScreenMobile.tsx rename to src/screens/SpotScreen/SpotScreenMobile.tsx index e12a80ed..02c6ad12 100644 --- a/src/screens/TradeScreen/TradeScreenMobile.tsx +++ b/src/screens/SpotScreen/SpotScreenMobile.tsx @@ -2,12 +2,12 @@ import React, { useState } from "react"; import styled from "@emotion/styled"; import { observer } from "mobx-react"; -import BottomTables from "@screens/TradeScreen/BottomTables"; -import Chart from "@screens/TradeScreen/Chart"; -import MarketStatisticsBar from "@screens/TradeScreen/MarketStatisticsBar"; -import StatusBar from "@screens/TradeScreen/StatusBar/StatusBar"; import MenuOverlay from "@src/components/MenuOverlay"; import { SmartFlex } from "@src/components/SmartFlex"; +import BottomTables from "@src/screens/SpotScreen/BottomTables"; +import Chart from "@src/screens/SpotScreen/Chart"; +import MarketStatisticsBar from "@src/screens/SpotScreen/MarketStatisticsBar"; +import StatusBar from "@src/screens/SpotScreen/StatusBar/StatusBar"; import { media } from "@src/themes/breakpoints"; import { useStores } from "@stores"; @@ -17,7 +17,7 @@ import CreateOrder from "./RightBlock/CreateOrder"; import MarketSelection from "./RightBlock/MarketSelection"; import MarketStatistics from "./MarketStatistics"; -const TradeScreenMobile: React.FC = observer(() => { +const SpotScreenMobile: React.FC = observer(() => { const { tradeStore } = useStores(); const [isChartOpen, setIsChartOpen] = useState(false); @@ -68,7 +68,7 @@ const TradeScreenMobile: React.FC = observer(() => { ); }); -export default TradeScreenMobile; +export default SpotScreenMobile; const Root = styled.div` display: flex; diff --git a/src/screens/TradeScreen/StatusBar/StatusBar.tsx b/src/screens/SpotScreen/StatusBar/StatusBar.tsx similarity index 100% rename from src/screens/TradeScreen/StatusBar/StatusBar.tsx rename to src/screens/SpotScreen/StatusBar/StatusBar.tsx diff --git a/src/screens/TradeScreen/StatusBar/index.tsx b/src/screens/SpotScreen/StatusBar/index.tsx similarity index 100% rename from src/screens/TradeScreen/StatusBar/index.tsx rename to src/screens/SpotScreen/StatusBar/index.tsx diff --git a/src/screens/TradeScreen/StatusBar/tweets.ts b/src/screens/SpotScreen/StatusBar/tweets.ts similarity index 100% rename from src/screens/TradeScreen/StatusBar/tweets.ts rename to src/screens/SpotScreen/StatusBar/tweets.ts diff --git a/src/screens/SpotScreen/index.ts b/src/screens/SpotScreen/index.ts new file mode 100644 index 00000000..3965283c --- /dev/null +++ b/src/screens/SpotScreen/index.ts @@ -0,0 +1,2 @@ +import SpotScreen from "./SpotScreen"; +export default SpotScreen; diff --git a/src/screens/SwapScreen/SwapScreen.tsx b/src/screens/SwapScreen/SwapScreen.tsx index 87104551..9ad106be 100644 --- a/src/screens/SwapScreen/SwapScreen.tsx +++ b/src/screens/SwapScreen/SwapScreen.tsx @@ -4,11 +4,10 @@ import styled from "@emotion/styled"; import { observer } from "mobx-react"; import { ModalEnums } from "@screens/SwapScreen/enums/modalEnums"; -import { MINIMAL_ETH_REQUIRED } from "@screens/TradeScreen/RightBlock/CreateOrder/CreateOrder"; import ArrowDownIcon from "@src/assets/icons/arrowDown.svg?react"; import { FuelNetwork } from "@src/blockchain"; import Text, { TEXT_TYPES, TEXT_TYPES_MAP } from "@src/components/Text"; -import { DEFAULT_DECIMALS } from "@src/constants"; +import { DEFAULT_DECIMALS, MINIMAL_ETH_REQUIRED } from "@src/constants"; import { useMedia } from "@src/hooks/useMedia"; import { useWallet } from "@src/hooks/useWallet"; import { useStores } from "@src/stores"; diff --git a/src/screens/TradeScreen/index.ts b/src/screens/TradeScreen/index.ts deleted file mode 100644 index 7edbdd29..00000000 --- a/src/screens/TradeScreen/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import TradeScreen from "./TradeScreen"; -export default TradeScreen; diff --git a/src/stores/SettingsStore.ts b/src/stores/SettingsStore.ts index 0eeabd60..bc2ef6fd 100644 --- a/src/stores/SettingsStore.ts +++ b/src/stores/SettingsStore.ts @@ -1,7 +1,7 @@ import { LimitType } from "@compolabs/spark-orderbook-ts-sdk"; import { makeAutoObservable } from "mobx"; -import { ORDER_TYPE } from "@src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM"; +import { ORDER_TYPE } from "@src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrderVM"; import { THEME_TYPE } from "@src/themes/ThemeProvider"; import RootStore from "@stores/RootStore"; From bc2e582f10b812ce2d1fcdfe45c9cd0c576a3117 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B8b=C4=97rt=C3=B8?= <106074508+EchoDex@users.noreply.github.com> Date: Tue, 3 Sep 2024 13:47:01 +0400 Subject: [PATCH 2/5] fix: correct text for splashscreen --- src/components/Splashscreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Splashscreen.tsx b/src/components/Splashscreen.tsx index e6f198ea..a8d2e786 100644 --- a/src/components/Splashscreen.tsx +++ b/src/components/Splashscreen.tsx @@ -31,7 +31,7 @@ interface SplashScreenInfo { const SPLASH_SCREEN_INFO: SplashScreenInfo[] = [ { name: "Swap", - desc: "Buy and Sell assets at market price", + desc: "Buy and sell assets at market price", icon: splashScreenSwap, type: SPLASH_SCREEN_TYPE.SWAP, }, From 930f55e602779f1ac44db5531258986be3413d8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B8b=C4=97rt=C3=B8?= <106074508+EchoDex@users.noreply.github.com> Date: Tue, 3 Sep 2024 15:06:51 +0400 Subject: [PATCH 3/5] feat: several fixes and improvements --- src/components/Splashscreen.tsx | 17 +++++++++++++---- src/components/TokenInput/TokenInput.tsx | 3 ++- .../RightBlock/CreateOrder/CreateOrder.tsx | 5 +++++ src/stores/OracleStore.ts | 2 +- 4 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/Splashscreen.tsx b/src/components/Splashscreen.tsx index a8d2e786..e95d4ba2 100644 --- a/src/components/Splashscreen.tsx +++ b/src/components/Splashscreen.tsx @@ -63,8 +63,12 @@ export const SplashScreen: React.FC = observer(() => { setMode(newMode); }; - const handleGoClick = () => { - navigate(TYPE_ROUTE_MAP[mode]); + const handleGoToMode = (newMode: SPLASH_SCREEN_TYPE) => { + handleGoClick(newMode); + }; + + const handleGoClick = (newMode?: SPLASH_SCREEN_TYPE) => { + navigate(TYPE_ROUTE_MAP[newMode ?? mode]); setSplashScreenVisible(false); setIsOnboardingVisible(true); }; @@ -78,7 +82,12 @@ export const SplashScreen: React.FC = observer(() => { const isSelected = mode === info.type; return ( - handleModeClick(info.type)}> + handleModeClick(info.type)} + onDoubleClick={() => handleGoToMode(info.type)} + > {info.name} {info.name} @@ -104,7 +113,7 @@ export const SplashScreen: React.FC = observer(() => { Select trading mode to begin {SPLASH_SCREEN_INFO.map(renderModeButton)} - + handleGoClick()}> Let's go! diff --git a/src/components/TokenInput/TokenInput.tsx b/src/components/TokenInput/TokenInput.tsx index c2cf3a27..78991da1 100644 --- a/src/components/TokenInput/TokenInput.tsx +++ b/src/components/TokenInput/TokenInput.tsx @@ -14,6 +14,7 @@ import { BigNumberInput } from "./BigNumberInput"; interface IProps { assetId?: string; decimals: number; + displayDecimals?: number; label?: string; max?: BN; amount: BN; @@ -62,7 +63,7 @@ const TokenInput: React.FC = observer((props) => { autofocus={focused} decimals={props.decimals} disabled={props.disabled} - displayDecimals={props.decimals} + displayDecimals={props.displayDecimals} max={props.max?.toString()} placeholder="0.00" renderInput={(inputProps, ref) => ( diff --git a/src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrder.tsx b/src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrder.tsx index d7b393d3..204f1cb3 100644 --- a/src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrder.tsx +++ b/src/screens/SpotScreen/RightBlock/CreateOrder/CreateOrder.tsx @@ -36,6 +36,8 @@ const ORDER_OPTIONS = [ // { title: "Limit (FOK)", key: ORDER_TYPE.LimitFOK, timeInForce: LimitType.FOK }, ]; +const VISIBLE_MARKET_DECIMALS = 2; + const CreateOrder: React.FC = observer(() => { const { balanceStore, tradeStore, settingsStore } = useStores(); const vm = useCreateOrderVM(); @@ -46,6 +48,8 @@ const CreateOrder: React.FC = observer(() => { const dataOnboardingTradingKey = `trade-${media.mobile ? "mobile" : "desktop"}`; const isButtonDisabled = vm.isLoading || !vm.canProceed; + const isMarketOrderType = settingsStore.orderType === ORDER_TYPE.Market; + const priceDisplayDecimals = isMarketOrderType ? VISIBLE_MARKET_DECIMALS : DEFAULT_DECIMALS; const [isOrderTooltipOpen, openOrderTooltip, closeOrderTooltip] = useFlag(); @@ -202,6 +206,7 @@ const CreateOrder: React.FC = observer(() => { Date: Wed, 4 Sep 2024 12:07:54 +0400 Subject: [PATCH 4/5] feat: new onboarding with several features --- src/assets/icons/onboardingArrow.svg | 2 +- src/components/MenuOverlay.tsx | 2 + src/components/Onboarding.tsx | 119 +++++++++++++++++++++------ src/components/Splashscreen.tsx | 27 +++--- 4 files changed, 110 insertions(+), 40 deletions(-) diff --git a/src/assets/icons/onboardingArrow.svg b/src/assets/icons/onboardingArrow.svg index 548004dc..37bc8956 100644 --- a/src/assets/icons/onboardingArrow.svg +++ b/src/assets/icons/onboardingArrow.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/MenuOverlay.tsx b/src/components/MenuOverlay.tsx index 7810161f..55b349cb 100644 --- a/src/components/MenuOverlay.tsx +++ b/src/components/MenuOverlay.tsx @@ -22,6 +22,8 @@ const MenuOverlay: React.FC = ({ isOpen, children, top = 0, offsetTop = }; }, [isOpen]); + console.log(zIndex); + return ( {children} diff --git a/src/components/Onboarding.tsx b/src/components/Onboarding.tsx index 7d810fd5..89f2c9fd 100644 --- a/src/components/Onboarding.tsx +++ b/src/components/Onboarding.tsx @@ -1,18 +1,20 @@ import React, { useLayoutEffect, useRef, useState } from "react"; import styled from "@emotion/styled"; +import CloseIcon from "@src/assets/icons/close.svg?react"; import arrowIcon from "@src/assets/icons/onboardingArrow.svg"; import { IMedia, useMedia } from "@src/hooks/useMedia"; import { media } from "@src/themes/breakpoints"; import Button from "./Button"; import { SmartFlex } from "./SmartFlex"; -import Text from "./Text"; +import Text, { TEXT_TYPES } from "./Text"; export interface Step { desktopKey: string; mobileKey: string; desc: string; + icon?: React.FC; beforeAction?: (media: IMedia) => void; } @@ -25,30 +27,57 @@ const ARROW_HEIGHT = 18; const ARROW_WIDTH = 50; const GAP = 16; +const createOverlayCopy = (element: HTMLElement): HTMLElement => { + const copyContainer = document.createElement("div"); + copyContainer.style.position = "absolute"; + copyContainer.style.zIndex = "10000"; + copyContainer.style.top = `${element.getBoundingClientRect().top}px`; + copyContainer.style.left = `${element.getBoundingClientRect().left}px`; + copyContainer.style.width = `${element.offsetWidth}px`; + copyContainer.style.height = `${element.offsetHeight}px`; + + const clone = element.cloneNode(true) as HTMLElement; + copyContainer.appendChild(clone); + + document.body.appendChild(copyContainer); + + return copyContainer; +}; + +const removeOverlayCopy = (copyContainer: HTMLElement) => { + document.body.removeChild(copyContainer); +}; + export const Onboarding: React.FC = ({ steps, onComplete }) => { const media = useMedia(); const [currentStepIndex, setCurrentStepIndex] = useState(0); const totalSteps = steps.length; - const nextButtonText = steps.length - 1 === currentStepIndex ? "Thats it!" : "Next"; + const isLastStep = steps.length - 1 === currentStepIndex; + const nextButtonText = isLastStep ? "Thats it!" : "Next"; const stepRef = useRef(null); const stepArrowRef = useRef(null); const targetRef = useRef(null); + const targetCopyRef = useRef(null); const calculatePosition = () => { if (steps.length === 0 || !stepRef.current) return; const currentStep = steps[currentStepIndex]; const key = media.mobile ? currentStep.mobileKey : currentStep.desktopKey; - targetRef.current = document.querySelector(`[data-onboarding="${key}"]`); currentStep.beforeAction?.(media); + targetRef.current = document.querySelector(`[data-onboarding="${key}"]`); + if (targetRef.current && stepRef.current && stepArrowRef.current) { const { top, left, width, height } = targetRef.current.getBoundingClientRect(); const { width: stepWidth, height: stepHeight } = stepRef.current.getBoundingClientRect(); + // Create a copy of the target element and place it at the top of the DOM + targetCopyRef.current = createOverlayCopy(targetRef.current); + const stepPossibleLeft = left + width - stepWidth; const maxLeft = window.innerWidth - GAP - stepWidth; const stepLeft = Math.max(GAP, Math.min(stepPossibleLeft, maxLeft)); @@ -73,7 +102,7 @@ export const Onboarding: React.FC = ({ steps, onComplete }) => { const arrowTop = isTargetBelow ? stepHeight : -ARROW_HEIGHT; const arrowRotation = isTargetBelow ? "rotate(180deg)" : "none"; - const arrowLeft = left + width / 2 - stepLeft - ARROW_WIDTH / 2; + const arrowLeft = Math.max(GAP, Math.min(left + width / 2 - stepLeft - ARROW_WIDTH / 2, stepWidth - ARROW_WIDTH)); stepArrowRef.current.style.top = `${arrowTop}px`; stepArrowRef.current.style.transform = arrowRotation; @@ -97,23 +126,41 @@ export const Onboarding: React.FC = ({ steps, onComplete }) => { }, [steps, currentStepIndex]); const handleNextStep = () => { + if (targetCopyRef.current) { + // Remove the copied element when no longer needed + removeOverlayCopy(targetCopyRef.current); + } + if (currentStepIndex < totalSteps - 1) { setCurrentStepIndex(currentStepIndex + 1); + return; } onComplete?.(); }; + const currentStep = steps[currentStepIndex]; + const Icon = currentStep.icon; + return ( - - {currentStepIndex + 1} / {totalSteps} - - {steps[currentStepIndex].desc} - {nextButtonText} + {Icon && ( + + + + )} + {currentStep.desc} + + {nextButtonText} + + {!isLastStep && ( + + + + )} ); @@ -125,24 +172,16 @@ const OverlayContainer = styled(SmartFlex)` width: 100%; height: 100%; - background-color: ${({ theme }) => theme.colors.overlayBackground}; + background-color: #00000080; z-index: 1000; `; -const StepText = styled(Text)` - font-family: Space Grotesk; - font-size: 14px; - font-weight: 500; - line-height: 14px; -`; - const TitleText = styled(Text)` - font-family: Space Grotesk; - font-size: 18px; - font-weight: 500; - line-height: 14px; - color: ${({ theme }) => theme.colors.textPrimary}; + background: linear-gradient(to right, #fff, #ff9b57, #54bb94); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; `; const StepContainer = styled(SmartFlex)` @@ -154,12 +193,12 @@ const StepContainer = styled(SmartFlex)` width: max-content; - padding: 22px 24px; + padding: 14px 16px; box-shadow: - 0px 32px 48px -8px #00000059, - 0px 0px 14px -4px #00000033; + 0px 24px 32px 0px #00000026, + 0px 0px 6px 0px #00000033; - background-color: ${({ theme }) => theme.colors.bgSecondary}; + background-color: #232323; transition: top 250ms ease, @@ -180,5 +219,31 @@ const ArrowIconStyled = styled.img` const ButtonStyled = styled(Button)` width: fit-content; - padding: 12px 26px !important; + height: fit-content !important; + padding: 0 !important; +`; + +const IconContainer = styled(SmartFlex)` + align-items: center; + justify-content: center; + height: 24px; + width: 24px; +`; + +const CloseIconContainer = styled(SmartFlex)` + align-items: center; + justify-content: center; + height: 16px; + width: 16px; + + path { + transition: fill 200ms ease; + } + + cursor: pointer; + &:hover { + path { + fill: ${({ theme }) => theme.colors.iconPrimary}; + } + } `; diff --git a/src/components/Splashscreen.tsx b/src/components/Splashscreen.tsx index e95d4ba2..2058cf31 100644 --- a/src/components/Splashscreen.tsx +++ b/src/components/Splashscreen.tsx @@ -4,10 +4,11 @@ import styled from "@emotion/styled"; import { observer } from "mobx-react-lite"; import CheckIcon from "@src/assets/icons/check.svg?react"; -import Logo from "@src/assets/icons/logo-small.svg?react"; +import LogoIcon from "@src/assets/icons/logo-small.svg?react"; +import WalletIcon from "@src/assets/icons/wallet.svg?react"; import spacemanImage from "@src/assets/images/spaceman.webp"; -import splashScreenOrderbook from "@src/assets/splash/splash-screen-orderbook.svg"; -import splashScreenSwap from "@src/assets/splash/splash-screen-swap.svg"; +import splashScreenOrderbookIcon from "@src/assets/splash/splash-screen-orderbook.svg"; +import splashScreenSwapIcon from "@src/assets/splash/splash-screen-swap.svg"; import { useMedia } from "@src/hooks/useMedia"; import { useStores } from "@src/stores"; @@ -32,13 +33,13 @@ const SPLASH_SCREEN_INFO: SplashScreenInfo[] = [ { name: "Swap", desc: "Buy and sell assets at market price", - icon: splashScreenSwap, + icon: splashScreenSwapIcon, type: SPLASH_SCREEN_TYPE.SWAP, }, { name: "Orderbook", desc: "More options for experienced traders", - icon: splashScreenOrderbook, + icon: splashScreenOrderbookIcon, type: SPLASH_SCREEN_TYPE.ORDERBOOK, }, ]; @@ -108,7 +109,7 @@ export const SplashScreen: React.FC = observer(() => { Hey, and welcome to - + Select trading mode to begin @@ -135,7 +136,8 @@ const ONBOARDING_TRADE_STEPS: Step[] = [ { desktopKey: "connect-desktop", mobileKey: "connect-mobile", - desc: "Connect your wallet", + desc: "Let's connect your wallet", + icon: WalletIcon, }, { desktopKey: "mint-desktop", @@ -147,12 +149,12 @@ const ONBOARDING_TRADE_STEPS: Step[] = [ const el = document.querySelector("[data-onboarding='menu-mobile']"); el?.click(); }, - desc: "Mint tokens", + desc: "Mint some test tokens in Faucet", }, { desktopKey: "assets-desktop", mobileKey: "assets-mobile", - desc: "Deposit assets", + desc: "Deposit assets to start trading", }, { desktopKey: "trade-desktop", @@ -172,7 +174,8 @@ const ONBOARDING_SWAP_STEPS: Step[] = [ { desktopKey: "connect-desktop", mobileKey: "connect-mobile", - desc: "Connect your wallet", + desc: "Let's connect your wallet", + icon: WalletIcon, }, { desktopKey: "mint-desktop", @@ -184,12 +187,12 @@ const ONBOARDING_SWAP_STEPS: Step[] = [ const el = document.querySelector("[data-onboarding='menu-mobile']"); el?.click(); }, - desc: "Mint tokens", + desc: "Mint some test tokens in Faucet", }, { desktopKey: "assets-desktop", mobileKey: "assets-mobile", - desc: "Deposit assets", + desc: "Deposit assets to start trading", }, { desktopKey: "swap-desktop", From 308c010da9f53dea1074f281894cd29a343419d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B8b=C4=97rt=C3=B8?= <106074508+EchoDex@users.noreply.github.com> Date: Wed, 4 Sep 2024 13:05:37 +0400 Subject: [PATCH 5/5] feat: refactoring related to wallet connection --- src/App.tsx | 6 +++ src/components/Button.tsx | 6 ++- src/components/ConnectWalletButton.tsx | 28 +++++++++++++ src/components/Header/Header.tsx | 39 ++++++------------- src/components/Header/MobileMenu.tsx | 29 +++----------- ...lletButton.tsx => WalletAddressButton.tsx} | 4 +- .../ConnectedWallet.tsx => WalletButton.tsx} | 8 ++-- src/hooks/useWallet.ts | 2 +- .../ConnectWallet/ConnectWalletDialog.tsx | 4 +- .../RightBlock/CreateOrder/CreateOrder.tsx | 5 ++- src/stores/ModalStore.ts | 1 + 11 files changed, 68 insertions(+), 64 deletions(-) create mode 100644 src/components/ConnectWalletButton.tsx rename src/components/Header/{ConnectedWalletButton.tsx => WalletAddressButton.tsx} (91%) rename src/components/{Header/ConnectedWallet.tsx => WalletButton.tsx} (93%) diff --git a/src/App.tsx b/src/App.tsx index 99d874c9..e987abeb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,17 +10,22 @@ import Header from "./components/Header"; import { PWAModal } from "./components/PWAModal"; import { SplashScreen } from "./components/Splashscreen"; import { usePrivateKeyAsAuth } from "./hooks/usePrivateKeyAsAuth"; +import ConnectWalletDialog from "./screens/ConnectWallet"; import UnderConstruction from "./screens/Errors/UnderConstruction"; import Faucet from "./screens/Faucet"; import SpotScreen from "./screens/SpotScreen"; import { SwapScreen } from "./screens/SwapScreen"; +import { MODAL_TYPE } from "./stores/ModalStore"; import { DEFAULT_MARKET, ROUTES } from "./constants"; +import { useStores } from "./stores"; const isUnderConstruction = false; const DEFAULT_SPOT_ROUTE = `/spot/${DEFAULT_MARKET}`; const App: React.FC = observer(() => { + const { modalStore } = useStores(); + usePrivateKeyAsAuth(); if (isUnderConstruction) { @@ -40,6 +45,7 @@ const App: React.FC = observer(() => { + modalStore.close()} /> ); }); diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 150f12c4..78d3432e 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -4,7 +4,7 @@ import styled from "@emotion/styled"; import { TEXT_TYPES, TEXT_TYPES_MAP } from "@components/Text"; import { media } from "@src/themes/breakpoints"; -const Button = styled.button<{ +export interface ButtonProps { green?: boolean; red?: boolean; text?: boolean; @@ -12,7 +12,9 @@ const Button = styled.button<{ grey?: boolean; fitContent?: boolean; active?: boolean; -}>` +} + +const Button = styled.button` text-decoration: none; white-space: nowrap; display: flex; diff --git a/src/components/ConnectWalletButton.tsx b/src/components/ConnectWalletButton.tsx new file mode 100644 index 00000000..edcfb291 --- /dev/null +++ b/src/components/ConnectWalletButton.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { observer } from "mobx-react-lite"; + +import { useStores } from "@src/stores"; +import { MODAL_TYPE } from "@src/stores/ModalStore"; + +import Button, { ButtonProps } from "./Button"; + +interface Props extends ButtonProps { + connectText?: string; + children: React.ReactNode; +} + +export const ConnectWalletButton: React.FC = observer( + ({ connectText = "Connect wallet", children, ...props }) => { + const { accountStore, modalStore } = useStores(); + + if (!accountStore.isConnected) { + return ( + + ); + } + + return <>{children}; + }, +); diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index fe713101..735c85f2 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -3,29 +3,29 @@ import styled from "@emotion/styled"; import { observer } from "mobx-react"; import Button from "@components/Button"; -import ConnectedWallet from "@components/Header/ConnectedWallet"; import DataBase from "@src/assets/icons/dataBase.svg?react"; import Logo from "@src/assets/icons/logo.svg?react"; import Menu from "@src/assets/icons/menu.svg?react"; import useFlag from "@src/hooks/useFlag"; import { useMedia } from "@src/hooks/useMedia"; -import ConnectWalletDialog from "@src/screens/ConnectWallet"; +import { MODAL_TYPE } from "@src/stores/ModalStore"; import { media } from "@src/themes/breakpoints"; import { useStores } from "@stores"; +import { ConnectWalletButton } from "../ConnectWalletButton"; import { AccountInfoSheet } from "../Modal"; import { SmartFlex } from "../SmartFlex"; +import WalletButton from "../WalletButton"; -import ConnectedWalletButton from "./ConnectedWalletButton"; import { MenuNav } from "./MenuNav"; import MobileMenu from "./MobileMenu"; +import WalletAddressButton from "./WalletAddressButton"; const Header: React.FC = observer(() => { - const { modalStore, accountStore, quickAssetsStore } = useStores(); + const { modalStore, quickAssetsStore } = useStores(); const media = useMedia(); const [isMobileMenuOpen, openMobileMenu, closeMobileMenu] = useFlag(); - const [isConnectDialogVisible, openConnectDialog, closeConnectDialog] = useFlag(); const [isAccountInfoSheetOpen, openAccountInfo, closeAccountInfo] = useFlag(); useEffect(() => { @@ -44,30 +44,16 @@ const Header: React.FC = observer(() => { } }; + const openConnectModal = () => modalStore.open(MODAL_TYPE.CONNECT_MODAL); + const renderWallet = () => { const dataOnboardingConnectKey = `connect-${media.mobile ? "mobile" : "desktop"}`; - if (!accountStore.address) { - return ( - - - - ); - } - - if (media.mobile) { - return ( - - - - ); - } + const walletButtonContent = media.mobile ? : ; return ( - - + + {walletButtonContent} ); }; @@ -123,11 +109,8 @@ const Header: React.FC = observer(() => { isOpen={isMobileMenuOpen} onAccountClick={openAccountInfo} onClose={closeMobileMenu} - onWalletConnect={openConnectDialog} + onWalletConnect={openConnectModal} /> - {isConnectDialogVisible ? ( - - ) : null} ); diff --git a/src/components/Header/MobileMenu.tsx b/src/components/Header/MobileMenu.tsx index 0715743e..a65376d8 100644 --- a/src/components/Header/MobileMenu.tsx +++ b/src/components/Header/MobileMenu.tsx @@ -1,19 +1,16 @@ import React from "react"; -import { useLocation } from "react-router-dom"; import styled from "@emotion/styled"; import { observer } from "mobx-react-lite"; -import Text from "@components/Text"; import { useStores } from "@src/stores"; -import { media } from "@src/themes/breakpoints"; import Button from "../Button"; import MenuOverlay from "../MenuOverlay"; import SizedBox from "../SizedBox"; import { SmartFlex } from "../SmartFlex"; -import ConnectedWalletButton from "./ConnectedWalletButton"; import { MenuNav } from "./MenuNav"; +import WalletAddressButton from "./WalletAddressButton"; interface IProps { isOpen: boolean; @@ -23,8 +20,7 @@ interface IProps { } const MobileMenu: React.FC = observer(({ isOpen, onAccountClick, onWalletConnect, onClose }) => { - const { accountStore, quickAssetsStore, mixPanelStore } = useStores(); - const location = useLocation(); + const { accountStore, quickAssetsStore } = useStores(); const handleAccountClick = () => { onAccountClick(); @@ -36,9 +32,9 @@ const MobileMenu: React.FC = observer(({ isOpen, onAccountClick, onWalle onClose(); }; - const renderWalletButton = () => { + const renderWalletAddressButton = () => { return accountStore.address ? ( - + ) : ( - {renderWalletButton()} + {renderWalletAddressButton()} @@ -74,19 +70,6 @@ const Body = styled.div` background: ${({ theme }) => theme.colors.bgPrimary}; `; -const MenuItem = styled.div<{ isSelected?: boolean }>` - cursor: pointer; - padding: 12px 32px; - - ${Text} { - width: fit-content; - color: ${({ theme, isSelected }) => (isSelected ? theme.colors.textPrimary : theme.colors.textSecondary)}; - ${media.mobile} { - font-size: 16px; - } - } -`; - const Container = styled(SmartFlex)` flex-direction: column; background: ${({ theme }) => `${theme.colors.bgSecondary}`}; @@ -103,7 +86,7 @@ const FooterContainer = styled(SmartFlex)` width: 100%; `; -const ConnectedWalletButtonStyled = styled(ConnectedWalletButton)` +const WalletAddressButtonStyled = styled(WalletAddressButton)` width: 100%; height: 40px; `; diff --git a/src/components/Header/ConnectedWalletButton.tsx b/src/components/Header/WalletAddressButton.tsx similarity index 91% rename from src/components/Header/ConnectedWalletButton.tsx rename to src/components/Header/WalletAddressButton.tsx index aebe98d2..852e29a1 100644 --- a/src/components/Header/ConnectedWalletButton.tsx +++ b/src/components/Header/WalletAddressButton.tsx @@ -15,7 +15,7 @@ interface Props { onClick?: () => void; } -const ConnectedWalletButton: React.FC = observer(({ isFocused, className, onClick }) => { +const WalletAddressButton: React.FC = observer(({ isFocused, className, onClick }) => { const { accountStore } = useStores(); return ( @@ -26,7 +26,7 @@ const ConnectedWalletButton: React.FC = observer(({ isFocused, className, ); }); -export default ConnectedWalletButton; +export default WalletAddressButton; const ArrowIconStyled = styled.img` transition: 0.4s; diff --git a/src/components/Header/ConnectedWallet.tsx b/src/components/WalletButton.tsx similarity index 93% rename from src/components/Header/ConnectedWallet.tsx rename to src/components/WalletButton.tsx index 1d8b8e05..06f2f5af 100644 --- a/src/components/Header/ConnectedWallet.tsx +++ b/src/components/WalletButton.tsx @@ -16,9 +16,9 @@ import BN from "@src/utils/BN"; import { getExplorerLinkByAddress } from "@src/utils/getExplorerLink"; import { useStores } from "@stores"; -import ConnectedWalletButton from "./ConnectedWalletButton"; +import WalletAddressButton from "./Header/WalletAddressButton"; -const ConnectedWallet: React.FC = observer(() => { +const WalletButton: React.FC = observer(() => { const { accountStore, notificationStore, balanceStore } = useStores(); const { disconnect: disconnectWallet } = useWallet(); @@ -89,12 +89,12 @@ const ConnectedWallet: React.FC = observer(() => { } > - + ); }); -export default ConnectedWallet; +export default WalletButton; const Icon = styled.img` width: 24px; diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts index 97c9956b..ffed57b9 100644 --- a/src/hooks/useWallet.ts +++ b/src/hooks/useWallet.ts @@ -7,7 +7,7 @@ import { useStores } from "@src/stores"; export const useWallet = () => { const { fuel } = useFuel(); const { accountStore } = useStores(); - const { connect, isConnecting } = useConnectUI(); + const { connect, isConnecting, dialog } = useConnectUI(); const [isConnected, setIsConnected] = useState(false); const [wallet, setWallet] = useState(null); diff --git a/src/screens/ConnectWallet/ConnectWalletDialog.tsx b/src/screens/ConnectWallet/ConnectWalletDialog.tsx index 439ed5c8..00f07639 100644 --- a/src/screens/ConnectWallet/ConnectWalletDialog.tsx +++ b/src/screens/ConnectWallet/ConnectWalletDialog.tsx @@ -16,8 +16,6 @@ type IProps = Omit & { visible: boolean; }; -// TODO: refactor account store, minting and save address in local storage - const ConnectWalletDialog: React.FC = observer(({ onClose, visible }) => { const { settingsStore, mixPanelStore } = useStores(); const theme = useTheme(); @@ -61,6 +59,8 @@ const ConnectWalletDialog: React.FC = observer(({ onClose, visible }) => } }; + if (!visible) return; + return ( { { {renderOrderDetails()} - {renderButton()} + {renderButton()} diff --git a/src/stores/ModalStore.ts b/src/stores/ModalStore.ts index 2b3f7194..a4f5437d 100644 --- a/src/stores/ModalStore.ts +++ b/src/stores/ModalStore.ts @@ -5,6 +5,7 @@ import RootStore from "./RootStore"; export enum MODAL_TYPE { DEPOSIT_WITHDRAW_MODAL, + CONNECT_MODAL, } export class ModalStore {