From b207571871eb6b9ab10e39c7b8757a3fa5e38985 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, 13 Aug 2024 13:51:49 +0400 Subject: [PATCH 01/20] feat: update sdk and change market logic --- .env.example | 2 +- package.json | 2 +- pnpm-lock.yaml | 10 +++--- src/blockchain/FuelNetwork.ts | 25 +++++++++++-- src/blockchain/constants.ts | 10 ++++-- src/blockchain/types/index.ts | 3 +- src/entity/PerpMarket.ts | 3 ++ src/entity/SpotMarket.ts | 5 ++- .../RightBlock/CreateOrder/CreateOrderVM.tsx | 3 -- src/screens/TradeScreen/TradeScreen.tsx | 20 ++--------- src/stores/SwapStore.ts | 2 -- src/stores/TradeStore.ts | 36 ++++++++++++++++--- 12 files changed, 80 insertions(+), 41 deletions(-) diff --git a/.env.example b/.env.example index 080fba48..df1e93f1 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,4 @@ -VITE_CONTRACT_ADDRESSES_MARKET=0x08ca18ed550d6229f001641d43aac58e00f9eb7e25c9bea6d33716af61e43b2a +VITE_CONTRACT_ADDRESS_ORDERBOOK=0x164eae2ba74d71f3efb2a9adea4be8803cd464b17be841d2355f9a60301e0ff1 VITE_CONTRACT_ADDRESSES_TOKEN_FACTORY=0x3141a3f11e3f784364d57860e3a4dcf9b73d42e23fd49038773cefb09c633348 VITE_CONTRACT_ADDRESSES_PYTH=0x3cd5005f23321c8ae0ccfa98fb07d9a5ff325c483f21d2d9540d6897007600c9 VITE_INDEXER_URL=indexer.bigdevenergy.link/67b693c diff --git a/package.json b/package.json index fad92e85..1a38baa0 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "deploy": "gh-pages -d build" }, "dependencies": { - "@compolabs/spark-orderbook-ts-sdk": "^1.4.7", + "@compolabs/spark-orderbook-ts-sdk": "^1.4.8", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fuels/connectors": "^0.9.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0d3bcf02..b7604c2b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@compolabs/spark-orderbook-ts-sdk': - specifier: ^1.4.7 - version: 1.4.7(@types/react@18.3.3)(fuels@0.93.0)(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.4.8 + version: 1.4.8(@types/react@18.3.3)(fuels@0.93.0)(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@emotion/react': specifier: ^11.11.3 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -1014,8 +1014,8 @@ packages: '@coinbase/wallet-sdk@4.0.4': resolution: {integrity: sha512-74c040CRnGhfRjr3ArnkAgud86erIqdkPHNt5HR1k9u97uTIZCJww9eGYT67Qf7gHPpGS/xW8Be1D4dvRm63FA==} - '@compolabs/spark-orderbook-ts-sdk@1.4.7': - resolution: {integrity: sha512-6cOptGEHMwM4VEPCYfr3cC7yASgm3s6q0DBzoOvkfroer2Cf0RJ7ck6F6SBnMVF0Rp3qPwFv2LU0Lf/UGq6KlQ==} + '@compolabs/spark-orderbook-ts-sdk@1.4.8': + resolution: {integrity: sha512-K6Ig1UEUxtDqQS2kBTnfPJ4bYDtPeyQGl2M72mxz5Ow25WNJ5ZbA9x0/T9JS5gDCAM6rzzKco1KbeEkJKct1Kw==} engines: {node: '>=18'} peerDependencies: fuels: '>=0.93.0' @@ -8219,7 +8219,7 @@ snapshots: preact: 10.22.0 sha.js: 2.4.11 - '@compolabs/spark-orderbook-ts-sdk@1.4.7(@types/react@18.3.3)(fuels@0.93.0)(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@compolabs/spark-orderbook-ts-sdk@1.4.8(@types/react@18.3.3)(fuels@0.93.0)(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@apollo/client': 3.11.4(@types/react@18.3.3)(graphql-ws@5.16.0(graphql@16.9.0))(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) bignumber.js: 9.1.2 diff --git a/src/blockchain/FuelNetwork.ts b/src/blockchain/FuelNetwork.ts index c57ecab7..a75187e0 100644 --- a/src/blockchain/FuelNetwork.ts +++ b/src/blockchain/FuelNetwork.ts @@ -29,7 +29,7 @@ import { } from "./constants"; import { FetchTradesParams, - MarketCreateEvent, + Market, PerpMaxAbsPositionSize, PerpPendingFundingPayment, SpotMarketVolume, @@ -65,6 +65,10 @@ export class FuelNetwork { return FuelNetwork.instance; } + setActiveMarket = (marketAddress: string) => { + this.orderbookSdk.setActiveMarketAddress(marketAddress); + }; + getAddress = (): Nullable => { return this.walletManager.address; }; @@ -188,8 +192,23 @@ export class FuelNetwork { // await this.sdk.fulfillPerpOrder(gasAsset, orderId, amount, tokenPriceFeed); }; - fetchSpotMarkets = async (limit: number): Promise => { - return this.orderbookSdk.fetchMarkets(limit); + fetchSpotMarkets = async (): Promise => { + const quoteToken = this.getTokenBySymbol("USDC"); + const assetIdList: [string, string][] = this.getTokenList().map((token) => [token.assetId, quoteToken.assetId]); + const markets = await this.orderbookSdk.fetchMarkets(assetIdList); + console.log(markets); + const marketIdList = assetIdList.map((pair) => markets[pair[0]]).filter(Boolean) as string[]; + + const marketConfigPromises = marketIdList.map((marketId) => this.orderbookSdk.fetchMarketConfig(marketId)); + + const marketConfigs = await Promise.all(marketConfigPromises); + + return marketConfigs.map((info, index) => ({ + id: String(index), + assetId: info.baseAssetId, + decimal: info.priceDecimals, + contractId: marketIdList[index], + })); }; fetchSpotMarketPrice = async (baseTokenAddress: string): Promise => { diff --git a/src/blockchain/constants.ts b/src/blockchain/constants.ts index 5cda4d5a..153aba85 100644 --- a/src/blockchain/constants.ts +++ b/src/blockchain/constants.ts @@ -1,18 +1,22 @@ +import { OrderbookContracts } from "@compolabs/spark-orderbook-ts-sdk"; + import TOKEN_LOGOS from "@src/constants/tokenLogos"; import { Token } from "@src/entity/Token"; import TOKENS_JSON from "./tokens.json"; -const CONTRACT_ADDRESSES_MARKET = import.meta.env.VITE_CONTRACT_ADDRESSES_MARKET; +const CONTRACT_ADDRESS_ORDERBOOK = import.meta.env.VITE_CONTRACT_ADDRESS_ORDERBOOK; const CONTRACT_ADDRESSES_TOKEN_FACTORY = import.meta.env.VITE_CONTRACT_ADDRESSES_TOKEN_FACTORY; const CONTRACT_ADDRESSES_PYTH = import.meta.env.VITE_CONTRACT_ADDRESSES_PYTH; const INDEXER_URL = import.meta.env.VITE_INDEXER_URL; -export const CONTRACT_ADDRESSES = { - market: CONTRACT_ADDRESSES_MARKET, +export const CONTRACT_ADDRESSES: OrderbookContracts = { + market: "", // Markets will be retrieved from the order book + orderbook: CONTRACT_ADDRESS_ORDERBOOK, tokenFactory: CONTRACT_ADDRESSES_TOKEN_FACTORY, pyth: CONTRACT_ADDRESSES_PYTH, }; + export interface Network { name: string; url: string; diff --git a/src/blockchain/types/index.ts b/src/blockchain/types/index.ts index 518680ed..e4106d88 100644 --- a/src/blockchain/types/index.ts +++ b/src/blockchain/types/index.ts @@ -17,10 +17,11 @@ export type FetchTradesParams = { user?: string; }; -export type MarketCreateEvent = { +export type Market = { id: string; assetId: string; decimal: number; + contractId: string; }; export type SpotMarketVolume = { diff --git a/src/entity/PerpMarket.ts b/src/entity/PerpMarket.ts index 57dfba50..483d6783 100644 --- a/src/entity/PerpMarket.ts +++ b/src/entity/PerpMarket.ts @@ -16,11 +16,13 @@ interface PerpMarketParams { pausedIndexPrice?: BN; pausedTimestamp?: number; closedPrice?: BN; + contractAddress: string; } export class PerpMarket { readonly baseToken: Token; readonly quoteToken: Token; + readonly contractAddress: string; readonly imRatio: BN; readonly mmRatio: BN; @@ -44,6 +46,7 @@ export class PerpMarket { this.pausedIndexPrice = params.pausedIndexPrice; this.pausedTimestamp = params.pausedTimestamp; this.closedPrice = params.closedPrice; + this.contractAddress = params.contractAddress; makeAutoObservable(this); } diff --git a/src/entity/SpotMarket.ts b/src/entity/SpotMarket.ts index b089a7ec..27649e7a 100644 --- a/src/entity/SpotMarket.ts +++ b/src/entity/SpotMarket.ts @@ -9,15 +9,18 @@ import { Token } from "./Token"; export class SpotMarket { readonly baseToken: Token; readonly quoteToken: Token; + readonly contractAddress: string; price: BN = BN.ZERO; setPrice = (price: BN) => (this.price = price); - constructor(baseToken: string, quoteToken: string) { + constructor(baseToken: string, quoteToken: string, contractAddress: string) { const bcNetwork = FuelNetwork.getInstance(); this.baseToken = bcNetwork.getTokenByAssetId(baseToken); this.quoteToken = bcNetwork.getTokenByAssetId(quoteToken); + this.contractAddress = contractAddress; + makeAutoObservable(this); } diff --git a/src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM.tsx b/src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM.tsx index 2717dd57..11837941 100644 --- a/src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM.tsx +++ b/src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM.tsx @@ -1,6 +1,5 @@ import React, { PropsWithChildren, useMemo } from "react"; import { - AssetType, CreateOrderParams, FulfillOrderManyParams, GetOrdersParams, @@ -310,7 +309,6 @@ class CreateOrderVM { const order: FulfillOrderManyParams = { amount: this.inputAmount.toString(), - assetType: AssetType.Base, orderType: type, limitType: LimitType.FOK, // TODO: Check is it correct price: sellOrders[sellOrders.length - 1].price.toString(), @@ -333,7 +331,6 @@ class CreateOrderVM { } else { const order: CreateOrderParams = { amount: this.inputAmount.toString(), - assetType: AssetType.Base, price: this.inputPrice.toString(), type, feeAssetId: bcNetwork.getTokenBySymbol("ETH").assetId, diff --git a/src/screens/TradeScreen/TradeScreen.tsx b/src/screens/TradeScreen/TradeScreen.tsx index 44f0f30f..11fa8347 100644 --- a/src/screens/TradeScreen/TradeScreen.tsx +++ b/src/screens/TradeScreen/TradeScreen.tsx @@ -3,7 +3,6 @@ import { useLocation, useParams } from "react-router-dom"; import { observer } from "mobx-react"; import Loader from "@src/components/Loader"; -import { PerpMarket, SpotMarket } from "@src/entity"; import { useMedia } from "@src/hooks/useMedia"; import { CreateOrderVMProvider } from "@src/screens/TradeScreen/RightBlock/CreateOrder/CreateOrderVM"; import { useStores } from "@stores"; @@ -28,27 +27,14 @@ const TradeScreen: React.FC = observer(() => { const { marketId } = useParams<{ marketId: string }>(); const isPerp = location.pathname.includes("PERP"); - - const isMarketExists = (markets: SpotMarket[] | PerpMarket[]) => markets.some((market) => market.symbol === marketId); - - const spotMarketExists = isMarketExists(tradeStore.spotMarkets); - const perpMarketExists = isMarketExists(tradeStore.perpMarkets); + useEffect(() => { + tradeStore.selectActiveMarket(isPerp, marketId); + }, [marketId, isPerp]); if (!tradeStore.initialized) { return ; } - const selectedMarket = !marketId - ? tradeStore.defaultMarketSymbol - : spotMarketExists - ? marketId - : perpMarketExists - ? marketId - : tradeStore.defaultMarketSymbol; - - tradeStore.setIsPerp(isPerp && tradeStore.isPerpAvailable); - tradeStore.setMarketSymbol(selectedMarket); - return ( // TradeScreenImpl оборачивается в CreateOrderSpotVMProvider чтобы при нажатии на ордер в OrderbookAndTradesInterface устанавливать значение в RightBlock diff --git a/src/stores/SwapStore.ts b/src/stores/SwapStore.ts index 1308897f..994b3bd5 100644 --- a/src/stores/SwapStore.ts +++ b/src/stores/SwapStore.ts @@ -1,5 +1,4 @@ import { - AssetType, FulfillOrderManyParams, GetOrdersParams, LimitType, @@ -111,7 +110,6 @@ class SwapStore { const order: FulfillOrderManyParams = { amount: isBuy ? formattedVolume : formattedAmount, - assetType: AssetType.Base, orderType: this.buyToken.symbol === "BTC" ? OrderType.Buy : OrderType.Sell, limitType: LimitType.FOK, // TODO: Check is it correct price: sellOrders[sellOrders.length - 1].price.toString(), diff --git a/src/stores/TradeStore.ts b/src/stores/TradeStore.ts index 9c587324..913b5bd2 100644 --- a/src/stores/TradeStore.ts +++ b/src/stores/TradeStore.ts @@ -25,8 +25,7 @@ class TradeStore { spotMarkets: SpotMarket[] = []; perpMarkets: PerpMarket[] = []; marketSelectionOpened = false; - marketSymbol: Nullable = null; - readonly defaultMarketSymbol = "BTC-USDC"; + marketSymbol: string = "BTC-USDC"; isPerp = false; setIsPerp = (value: boolean) => (this.isPerp = value); @@ -88,6 +87,28 @@ class TradeStore { setMarketSymbol = (v: string) => (this.marketSymbol = v); + selectActiveMarket = (isPerp: boolean, marketId?: string) => { + const bcNetwork = FuelNetwork.getInstance(); + + const getMarket = (markets: T[]) => + markets.find((market) => market.symbol === marketId); + + const spotMarket = getMarket(this.spotMarkets); + const perpMarket = getMarket(this.perpMarkets); + + if (spotMarket || perpMarket) { + this.setMarketSymbol(marketId!); + } + + if (spotMarket) { + bcNetwork.setActiveMarket(spotMarket.contractAddress); + } else if (perpMarket) { + bcNetwork.setActiveMarket(perpMarket.contractAddress); + } + + this.setIsPerp(isPerp && this.isPerpAvailable); + }; + addToFav = (marketId: string) => { if (!this.favMarkets.includes(marketId)) { this.setFavMarkets([...this.favMarkets, marketId]); @@ -158,10 +179,17 @@ class TradeStore { const bcNetwork = FuelNetwork.getInstance(); try { - const markets = await bcNetwork!.fetchSpotMarkets(100); + const markets = await bcNetwork!.fetchSpotMarkets(); + + console.log("wtf"); + const spotMarkets = markets .filter((market) => bcNetwork!.getTokenByAssetId(market.assetId) !== undefined) - .map((market) => new SpotMarket(market.assetId, bcNetwork!.getTokenBySymbol("USDC").assetId)); + .map( + (market) => new SpotMarket(market.assetId, bcNetwork!.getTokenBySymbol("USDC").assetId, market.contractId), + ); + + bcNetwork.setActiveMarket(markets[0].contractId); this.setSpotMarkets(spotMarkets); await this.updateMarketPrices(); From 35c26b81182ee2e75d03b6d796ef89783036feb3 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, 13 Aug 2024 13:53:08 +0400 Subject: [PATCH 02/20] chore: remove logs --- src/blockchain/FuelNetwork.ts | 1 - src/stores/SwapStore.ts | 1 - src/stores/TradeStore.ts | 2 -- 3 files changed, 4 deletions(-) diff --git a/src/blockchain/FuelNetwork.ts b/src/blockchain/FuelNetwork.ts index a75187e0..c270d546 100644 --- a/src/blockchain/FuelNetwork.ts +++ b/src/blockchain/FuelNetwork.ts @@ -196,7 +196,6 @@ export class FuelNetwork { const quoteToken = this.getTokenBySymbol("USDC"); const assetIdList: [string, string][] = this.getTokenList().map((token) => [token.assetId, quoteToken.assetId]); const markets = await this.orderbookSdk.fetchMarkets(assetIdList); - console.log(markets); const marketIdList = assetIdList.map((pair) => markets[pair[0]]).filter(Boolean) as string[]; const marketConfigPromises = marketIdList.map((marketId) => this.orderbookSdk.fetchMarketConfig(marketId)); diff --git a/src/stores/SwapStore.ts b/src/stores/SwapStore.ts index 994b3bd5..71c9104e 100644 --- a/src/stores/SwapStore.ts +++ b/src/stores/SwapStore.ts @@ -73,7 +73,6 @@ class SwapStore { .map((v) => { const balance = balanceStore.getContractBalanceInfo(v.assetId).amount; const formatBalance = BN.formatUnits(balance ?? BN.ZERO, v.decimals); - // console.log('formatBalance', vala) const token = bcNetwork!.getTokenByAssetId(v.assetId); return { diff --git a/src/stores/TradeStore.ts b/src/stores/TradeStore.ts index 913b5bd2..4b5a1f43 100644 --- a/src/stores/TradeStore.ts +++ b/src/stores/TradeStore.ts @@ -181,8 +181,6 @@ class TradeStore { try { const markets = await bcNetwork!.fetchSpotMarkets(); - console.log("wtf"); - const spotMarkets = markets .filter((market) => bcNetwork!.getTokenByAssetId(market.assetId) !== undefined) .map( From 46e94dcbc1a5ac2155af0c93a4c84451197c6967 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, 13 Aug 2024 15:19:04 +0400 Subject: [PATCH 03/20] feat: update sdk version --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 1a38baa0..4169a5ad 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "deploy": "gh-pages -d build" }, "dependencies": { - "@compolabs/spark-orderbook-ts-sdk": "^1.4.8", + "@compolabs/spark-orderbook-ts-sdk": "^1.5.0", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fuels/connectors": "^0.9.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b7604c2b..5dde2afc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@compolabs/spark-orderbook-ts-sdk': - specifier: ^1.4.8 - version: 1.4.8(@types/react@18.3.3)(fuels@0.93.0)(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.5.0 + version: 1.5.0(@types/react@18.3.3)(fuels@0.93.0)(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@emotion/react': specifier: ^11.11.3 version: 11.11.4(@types/react@18.3.3)(react@18.3.1) @@ -1014,8 +1014,8 @@ packages: '@coinbase/wallet-sdk@4.0.4': resolution: {integrity: sha512-74c040CRnGhfRjr3ArnkAgud86erIqdkPHNt5HR1k9u97uTIZCJww9eGYT67Qf7gHPpGS/xW8Be1D4dvRm63FA==} - '@compolabs/spark-orderbook-ts-sdk@1.4.8': - resolution: {integrity: sha512-K6Ig1UEUxtDqQS2kBTnfPJ4bYDtPeyQGl2M72mxz5Ow25WNJ5ZbA9x0/T9JS5gDCAM6rzzKco1KbeEkJKct1Kw==} + '@compolabs/spark-orderbook-ts-sdk@1.5.0': + resolution: {integrity: sha512-83clDWrz8IlgJesy6zAhyXt2yeidgbf2qhhxyq82X+6sv0BZDOoBUt/pG1VJ87EYpXbqNm1fuEKpi6TbUqJkcg==} engines: {node: '>=18'} peerDependencies: fuels: '>=0.93.0' @@ -8219,7 +8219,7 @@ snapshots: preact: 10.22.0 sha.js: 2.4.11 - '@compolabs/spark-orderbook-ts-sdk@1.4.8(@types/react@18.3.3)(fuels@0.93.0)(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@compolabs/spark-orderbook-ts-sdk@1.5.0(@types/react@18.3.3)(fuels@0.93.0)(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@apollo/client': 3.11.4(@types/react@18.3.3)(graphql-ws@5.16.0(graphql@16.9.0))(graphql@16.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) bignumber.js: 9.1.2 From a0265239ff29ef148f074472497b14d5ad1f560b 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, 13 Aug 2024 15:26:55 +0400 Subject: [PATCH 04/20] build: update deploy preview --- .github/workflows/deploy-to-cf-pages.yaml | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/.github/workflows/deploy-to-cf-pages.yaml b/.github/workflows/deploy-to-cf-pages.yaml index 26fef827..fe32869a 100644 --- a/.github/workflows/deploy-to-cf-pages.yaml +++ b/.github/workflows/deploy-to-cf-pages.yaml @@ -1,5 +1,5 @@ name: Cloudflare Pages Deploy - + on: push: branches: @@ -11,16 +11,18 @@ on: jobs: deploy: environment: - name: ${{ (github.ref == 'refs/heads/main' && 'production') || (github.ref == 'refs/heads/develop' && 'dev') || 'preview' }} + name: + ${{ (github.ref == 'refs/heads/main' && 'production') || (github.ref == 'refs/heads/develop' && 'dev') || + 'preview' }} permissions: actions: read # Only required for private GitHub Repo contents: read deployments: write pull-requests: write runs-on: ubuntu-latest - timeout-minutes: 5 + timeout-minutes: 5 steps: - - name: 'Checkout Github Action' + - name: "Checkout Github Action" uses: actions/checkout@v4 - name: Install pnpm uses: pnpm/action-setup@v4 @@ -40,12 +42,13 @@ jobs: echo VITE_CONTRACT_ADDRESSES_MARKET=${{ vars.VITE_CONTRACT_ADDRESSES_MARKET }} >> .env echo VITE_CONTRACT_ADDRESSES_PYTH=${{ vars.VITE_CONTRACT_ADDRESSES_PYTH }} >> .env echo VITE_CONTRACT_ADDRESSES_TOKEN_FACTORY=${{ vars.VITE_CONTRACT_ADDRESSES_TOKEN_FACTORY }} >> .env + echo VITE_CONTRACT_ADDRESS_ORDERBOOK=${{ vars.VITE_CONTRACT_ADDRESS_ORDERBOOK }} >> .env echo VITE_INDEXER_URL=${{ vars.VITE_INDEXER_URL }} >> .env cat .env - name: Build Project run: | npm run build - - name: 'Deploy to Cloudflare Pages' + - name: "Deploy to Cloudflare Pages" uses: andykenward/github-actions-cloudflare-pages@v2.3.1 with: cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }} From 3363789f3f73fc7a0fb59ee23663e49cb9a7997d 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, 20 Aug 2024 12:00:25 +0400 Subject: [PATCH 05/20] fix: working on bugs related to ui --- src/blockchain/FuelNetwork.ts | 6 +-- src/blockchain/WalletManager.ts | 5 ++- src/components/Header/ConnectedWallet.tsx | 7 +-- src/components/Header/Header.tsx | 14 ++---- src/components/Modal/AccountInfoSheet.tsx | 1 - src/components/Table.tsx | 2 + src/constants/index.ts | 7 +-- src/hooks/useWallet.ts | 43 +++++++++++++----- src/hooks/useWalletAsAuth.ts | 1 + .../SideManageAssets/SideManageAssets.tsx | 2 +- src/screens/Faucet/MintButtons.tsx | 5 ++- src/screens/Faucet/TokensFaucetTable.tsx | 18 ++++++-- src/screens/SwapScreen/InfoBlock.tsx | 2 +- src/screens/SwapScreen/SwapScreen.tsx | 4 +- .../BottomTables/PerpTable/PerpTableVM.tsx | 5 ++- .../BottomTables/SpotTable/SpotTableImpl.tsx | 45 ++----------------- .../SpotOrderBook/SpotOrderBook.tsx | 13 ++---- .../SpotTrades/SpotTrades.tsx | 33 ++++++++------ .../TradeScreen/StatusBar/StatusBar.tsx | 13 +++++- src/stores/AccountStore.ts | 4 +- src/stores/CollateralStore.ts | 9 ++-- src/stores/NotificationStore.ts | 11 ++++- 22 files changed, 128 insertions(+), 122 deletions(-) create mode 100644 src/hooks/useWalletAsAuth.ts diff --git a/src/blockchain/FuelNetwork.ts b/src/blockchain/FuelNetwork.ts index 381dd0c8..50f1d33a 100644 --- a/src/blockchain/FuelNetwork.ts +++ b/src/blockchain/FuelNetwork.ts @@ -108,9 +108,9 @@ export class FuelNetwork { this.orderbookSdk.setActiveWallet((this.walletManager.wallet as any) ?? undefined); }; - disconnectWallet = (): void => { - this.walletManager.disconnect(); - this.orderbookSdk.setActiveWallet((this.walletManager.wallet as any) ?? undefined); + disconnectWallet = async (): Promise => { + await this.walletManager.disconnect(); + this.orderbookSdk.setActiveWallet(undefined); }; addAssetToWallet = async (assetId: string): Promise => { diff --git a/src/blockchain/WalletManager.ts b/src/blockchain/WalletManager.ts index 0dcbb938..8675000a 100644 --- a/src/blockchain/WalletManager.ts +++ b/src/blockchain/WalletManager.ts @@ -81,10 +81,11 @@ export class WalletManager { }, {}); }; - disconnect = () => { + disconnect = async () => { this.address = null; this.privateKey = null; + this.wallet = null; - void this.fuel.disconnect(); + await this.fuel.disconnect(); }; } diff --git a/src/components/Header/ConnectedWallet.tsx b/src/components/Header/ConnectedWallet.tsx index c3691203..138f425e 100644 --- a/src/components/Header/ConnectedWallet.tsx +++ b/src/components/Header/ConnectedWallet.tsx @@ -38,11 +38,6 @@ const ConnectedWallet: React.FC = observer(() => { notificationStore.toast(createToast({ text: "Your address was copied" }), { type: "info" }); }; - const disconnectWallet = () => { - disconnect(); - accountStore.disconnect(); - }; - const actions = [ { icon: copyIcon, @@ -58,7 +53,7 @@ const ConnectedWallet: React.FC = observer(() => { }, { icon: logoutIcon, - action: () => disconnectWallet(), + action: () => disconnect(), title: "Disconnect", active: true, }, diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index d6fd0b3c..85182546 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React from "react"; import { Link, useLocation } from "react-router-dom"; import styled from "@emotion/styled"; import { observer } from "mobx-react"; @@ -12,7 +12,6 @@ import Menu from "@src/assets/icons/menu.svg?react"; import { EVENTS, MENU_ITEMS } from "@src/constants"; import useFlag from "@src/hooks/useFlag"; import { useMedia } from "@src/hooks/useMedia"; -import { useWallet } from "@src/hooks/useWallet"; import ConnectWalletDialog from "@src/screens/ConnectWallet"; import { MODAL_TYPE } from "@src/stores/ModalStore"; import { media } from "@src/themes/breakpoints"; @@ -27,8 +26,7 @@ import DepositWithdrawModal from "./DepositWithdrawModal"; import MobileMenu from "./MobileMenu"; const Header: React.FC = observer(() => { - const { tradeStore, modalStore, accountStore, mixPanelStore, quickAssetsStore } = useStores(); - const { isConnected, wallet } = useWallet(); + const { modalStore, accountStore, mixPanelStore, quickAssetsStore } = useStores(); const location = useLocation(); const media = useMedia(); @@ -36,12 +34,6 @@ const Header: React.FC = observer(() => { const [isConnectDialogVisible, openConnectDialog, closeConnectDialog] = useFlag(); const [isAccountInfoSheetOpen, openAccountInfo, closeAccountInfo] = useFlag(); - useEffect(() => { - if (!isConnected || !wallet) return; - - accountStore.connect(wallet); - }, [isConnected, wallet]); - const toggleMenu = () => { window.scrollTo({ top: 0, behavior: "smooth" }); @@ -187,7 +179,7 @@ const Root = styled(SmartFlex)` justify-content: space-between; width: 100%; height: 56px; - min-height: 48px; + min-height: 56px; padding: 0 12px; ${media.mobile} { diff --git a/src/components/Modal/AccountInfoSheet.tsx b/src/components/Modal/AccountInfoSheet.tsx index f1ea534c..90991873 100644 --- a/src/components/Modal/AccountInfoSheet.tsx +++ b/src/components/Modal/AccountInfoSheet.tsx @@ -40,7 +40,6 @@ const AccountInfoSheet: React.FC = ({ isOpen, onClose }) => { }; const handleDisconnect = () => { - accountStore.disconnect(); disconnect(); onClose(); }; diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 76c566e3..3c876dde 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -94,6 +94,7 @@ const Root = styled.div<{ hovered?: boolean; fitContent?: boolean }>` position: sticky; top: 0; background: ${({ theme }) => theme.colors.bgPrimary}; + z-index: 2; } tr { @@ -115,6 +116,7 @@ const Root = styled.div<{ hovered?: boolean; fitContent?: boolean }>` } td { + height: 42px; ${TEXT_TYPES_MAP[TEXT_TYPES.BODY]}; color: ${({ theme }) => `${theme.colors.textPrimary}`}; padding: 11px 12px; diff --git a/src/constants/index.ts b/src/constants/index.ts index 29769307..be329e95 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -23,6 +23,7 @@ export const USDC_DECIMALS = 6; export const TWITTER_LINK = "https://twitter.com/Sprkfi"; export const GITHUB_LINK = "https://github.com/compolabs"; export const DOCS_LINK = "https://docs.sprk.fi"; +export const FUEL_LINK = "https://fuel.network"; type TMenuItem = { title: string; @@ -40,9 +41,9 @@ export const MENU_ITEMS: Array = [ { title: "TRADE", route: ROUTES.ROOT }, { title: "FAUCET", route: ROUTES.FAUCET, dataOnboardingKey: "mint" }, { title: "SWAP", route: ROUTES.SWAP }, - { title: "DOCS", link: "https://docs.sprk.fi" }, - { title: "GITHUB", link: "https://github.com/compolabs/spark" }, - { title: "TWITTER", link: "https://twitter.com/Sprkfi" }, + { title: "DOCS", link: DOCS_LINK }, + { title: "GITHUB", link: GITHUB_LINK }, + { title: "TWITTER", link: TWITTER_LINK }, ]; const WC_PROJECT_ID = "cf4ad9eca02fdf75b8c6ef0b687ddd16"; diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts index 66077f68..97c9956b 100644 --- a/src/hooks/useWallet.ts +++ b/src/hooks/useWallet.ts @@ -1,24 +1,47 @@ -import { useEffect } from "react"; -import { useAccount, useConnectUI, useIsConnected, useWallet as useFuelWallet } from "@fuels/react"; -import { useDisconnect } from "@fuels/react"; +import { useCallback, useEffect, useState } from "react"; +import { useConnectUI, useFuel } from "@fuels/react"; +import { Account } from "fuels"; + +import { useStores } from "@src/stores"; export const useWallet = () => { + const { fuel } = useFuel(); + const { accountStore } = useStores(); const { connect, isConnecting } = useConnectUI(); - const { isConnected, refetch: refetchConnected } = useIsConnected(); - const { account: address } = useAccount(); - const { disconnect } = useDisconnect(); - const { wallet } = useFuelWallet(address); + const [isConnected, setIsConnected] = useState(false); + const [wallet, setWallet] = useState(null); + + const handleDisconnect = useCallback(async () => { + await fuel.disconnect(); + await accountStore.disconnect(); + }, []); + + useEffect(() => { + const checkConnection = async () => { + const connected = await fuel.isConnected(); + setIsConnected(connected); + if (connected) { + const accounts = await fuel.accounts(); + const wallet = await fuel.getWallet(accounts[0]); + setWallet(wallet); + } + }; + + checkConnection(); + }, [fuel, isConnecting]); useEffect(() => { - refetchConnected(); - }, [refetchConnected]); + if (!isConnected || !wallet) return; + + accountStore.connect(wallet); + }, [isConnected, wallet, accountStore]); return { isConnected, isConnecting, wallet, connect, - disconnect, + disconnect: handleDisconnect, }; }; diff --git a/src/hooks/useWalletAsAuth.ts b/src/hooks/useWalletAsAuth.ts new file mode 100644 index 00000000..099336a6 --- /dev/null +++ b/src/hooks/useWalletAsAuth.ts @@ -0,0 +1 @@ +export const useWalletAsAuth = () => {}; diff --git a/src/screens/Assets/SideManageAssets/SideManageAssets.tsx b/src/screens/Assets/SideManageAssets/SideManageAssets.tsx index 9ffe7a06..f4bec031 100644 --- a/src/screens/Assets/SideManageAssets/SideManageAssets.tsx +++ b/src/screens/Assets/SideManageAssets/SideManageAssets.tsx @@ -7,8 +7,8 @@ import SideBar from "@components/SideBar"; import DepositAssets from "@screens/Assets/DepositAssets/DepositAssets"; import MainAssets from "@screens/Assets/MainAssets/MainAssets"; import WithdrawAssets from "@screens/Assets/WithdrawAssets/WithdrawAssets"; -import { useStores } from "@stores"; import { useMedia } from "@src/hooks/useMedia"; +import { useStores } from "@stores"; interface ResolverDevice { children: React.ReactNode; diff --git a/src/screens/Faucet/MintButtons.tsx b/src/screens/Faucet/MintButtons.tsx index cbbe52a8..1d0d75c3 100644 --- a/src/screens/Faucet/MintButtons.tsx +++ b/src/screens/Faucet/MintButtons.tsx @@ -6,9 +6,10 @@ import { useStores } from "@stores"; interface IProps { assetId: string; + disabled?: boolean; } -const MintButtons: React.FC = observer(({ assetId }) => { +const MintButtons: React.FC = observer(({ assetId, disabled }) => { const { faucetStore, mixPanelStore } = useStores(); if (!faucetStore.initialized) { @@ -21,7 +22,7 @@ const MintButtons: React.FC = observer(({ assetId }) => { return (