From 52e976a7312b5fd8c64cdf8487af863bdb327872 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, 22 Oct 2024 11:29:13 +0400 Subject: [PATCH 1/2] feat: update test code --- src/App.tsx | 51 +------------ src/Test.tsx | 210 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 214 insertions(+), 47 deletions(-) create mode 100644 src/Test.tsx diff --git a/src/App.tsx b/src/App.tsx index 65d3f782..0839da22 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,65 +1,22 @@ import React from "react"; -import { Navigate, Route, Routes } from "react-router-dom"; import styled from "@emotion/styled"; import { observer } from "mobx-react"; -import { Column } from "@components/Flex"; -import Header from "@components/Header"; -import { PWAModal } from "@components/PWAModal"; -import { SplashScreen } from "@components/Splashscreen"; +import { SmartFlex } from "@components/SmartFlex"; -import { useClearUrlParam } from "@hooks/useClearUrlParam"; -import { usePrivateKeyAsAuth } from "@hooks/usePrivateKeyAsAuth"; -import { useStores } from "@stores"; -import { MODAL_TYPE } from "@stores/ModalStore"; - -import SideManageAssets from "@screens/Assets/SideManageAssets/SideManageAssets"; -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 { DEFAULT_MARKET, ROUTES } from "@constants"; - -const isUnderConstruction = false; - -const DEFAULT_SPOT_ROUTE = `/spot/${DEFAULT_MARKET}`; +import { Test } from "./Test"; const App: React.FC = observer(() => { - const { modalStore } = useStores(); - - // This hooks is used to clear unnecessary URL parameters, - // specifically "tx_id", after returning from the faucet - useClearUrlParam("tx_id"); - - usePrivateKeyAsAuth(); - - if (isUnderConstruction) { - return ; - } - return ( -
- - } path={`${ROUTES.SPOT}/:marketId`} /> - } path={ROUTES.SWAP} /> - } path={ROUTES.FAUCET} /> - } path="*" /> - } path={ROUTES.ROOT} /> - - - - - modalStore.close()} /> + ); }); export default App; -const Root = styled(Column)` +const Root = styled(SmartFlex)` width: 100%; align-items: center; background: ${({ theme }) => theme.colors.bgPrimary}; diff --git a/src/Test.tsx b/src/Test.tsx new file mode 100644 index 00000000..f67e3344 --- /dev/null +++ b/src/Test.tsx @@ -0,0 +1,210 @@ +import React, { useEffect } from "react"; +import { Provider, Wallet } from "fuels"; +import { observer } from "mobx-react-lite"; + +import SparkOrderbook, { OrderType } from "@compolabs/spark-orderbook-ts-sdk"; + +import { SmartFlex } from "./components/SmartFlex"; + +const TESTNET_NETWORK = "https://testnet.fuel.network/v1/graphql"; + +const provider = await Provider.create(TESTNET_NETWORK); + +const TEST_PRIVATE_KEY = Wallet.generate({ provider }).privateKey; + +const CONTRACT_ADDRESSES = { + registry: "0xd76662328e464549b6f619401992127bed9b5cff3b46a3516e6b509d810b7035", + multiAsset: "0xdc527289bdef8ec452f350c9b2d36d464a9ebed88eb389615e512a78e26e3509", +}; + +const MARKET = "0x81acb82a64ff799836c19f4e7f9871cf6d13a1e5d286e815f91c26a1b92a8195"; + +const INDEXER = { + httpUrl: "https://indexer.bigdevenergy.link/67b693c/v1/graphql", + wsUrl: "wss://indexer.bigdevenergy.link/67b693c/v1/graphql", +}; + +export const Test: React.FC = observer(() => { + async function main() { + const spark = await initializeSparkOrderbook(); + + // Subscriptions + subscribeActiveOrders(spark, OrderType.Buy, [MARKET], 10); + subscribeActiveOrders(spark, OrderType.Sell, [MARKET], 10); + subscribeAllOrders(spark, 10); + subscribeTradeEvents(spark, [MARKET], 10); + + // Fetch requests + await fetchAllOrders(spark, 10); + await fetchActiveOrders(spark, OrderType.Buy, [MARKET], 10); + await fetchActiveOrders(spark, OrderType.Sell, [MARKET], 10); + await fetchTradeVolume(spark); + } + + useEffect(() => { + main().catch(console.error); + }, []); + + return ( + +

Tip: Open the developer tools to view logs

+
+ ); +}); + +async function initializeSparkOrderbook() { + const provider = await Provider.create(TESTNET_NETWORK); + const wallet = Wallet.fromPrivateKey(TEST_PRIVATE_KEY, provider); + + const spark = new SparkOrderbook({ + networkUrl: TESTNET_NETWORK, + contractAddresses: CONTRACT_ADDRESSES, + wallet, + }); + + spark.setActiveMarket(MARKET, INDEXER); + return spark; +} + +// Subscription for active orders by type +function subscribeActiveOrders(spark: SparkOrderbook, orderType: OrderType, market: string[], limit: number) { + // queryObject - ActiveBuyOrder | ActiveSellOrder + // + // subscription ${queryObject}Query( + // $limit: Int! + // $offset: Int! + // $where: ${queryObject}_bool_exp + // $priceOrder: order_by! + // ) { + // ${queryObject}(limit: $limit, offset: $offset, where: $where, order_by: { price: $priceOrder }) { + // id + // asset + // amount + // initialAmount + // orderType + // price + // status + // user + // timestamp + // } + // } + const subscription = spark.subscribeActiveOrders({ limit, orderType, market }); + subscription.subscribe((data: any) => + console.log( + `subscribeActiveOrders - ${orderType}`, + orderType === OrderType.Buy ? data.data?.ActiveBuyOrder : data.data?.ActiveSellOrder, + ), + ); +} + +// Subscription to all orders +function subscribeAllOrders(spark: SparkOrderbook, limit: number) { + // subscription OrderQuery( + // $limit: Int! + // $offset: Int! + // $where: Order_bool_exp + // $priceOrder: order_by! + // ) { + // Order(limit: $limit, offset: $offset, where: $where, order_by: { price: $priceOrder }) { + // id + // asset + // amount + // initialAmount + // orderType + // price + // status + // user + // timestamp + // } + // } + const allOrdersSubscription = spark.subscribeOrders({ limit }); + allOrdersSubscription.subscribe((data) => console.log(`subscribeAllOrders`, data.data?.Order)); +} + +// Subscription to trade events +function subscribeTradeEvents(spark: SparkOrderbook, market: string[], limit: number) { + // subscription ($limit: Int!, $orderBy: order_by!) { + // TradeOrderEvent(limit: $limit, order_by: { timestamp: $orderBy }) { + // id + // tradePrice + // tradeSize + // timestamp + // } + // } + const tradeEventsSubscription = spark.subscribeTradeOrderEvents({ limit, market }); + tradeEventsSubscription.subscribe((data) => console.log(`subscribeTradeEvents`, data.data?.TradeOrderEvent)); +} + +// Fetch all orders +async function fetchAllOrders(spark: SparkOrderbook, limit: number) { + // query OrderQuery( + // $limit: Int! + // $offset: Int! + // $where: Order_bool_exp + // $priceOrder: order_by! + // ) { + // Order(limit: $limit, offset: $offset, where: $where, order_by: { price: $priceOrder }) { + // id + // asset + // amount + // initialAmount + // orderType + // price + // status + // user + // timestamp + // } + // } + const orders = await spark.fetchOrders({ limit }); + console.log(`fetchAllOrders`, orders.data?.Order); +} + +// Fetch active orders by type +async function fetchActiveOrders(spark: SparkOrderbook, orderType: OrderType, market: string[], limit: number) { + // queryObject - ActiveBuyOrder | ActiveSellOrder + // + // query ${queryObject}Query( + // $limit: Int! + // $offset: Int! + // $where: ${queryObject}_bool_exp + // $priceOrder: order_by! + // ) { + // ${queryObject}(limit: $limit, offset: $offset, where: $where, order_by: { price: $priceOrder }) { + // id + // asset + // amount + // initialAmount + // orderType + // price + // status + // user + // timestamp + // } + // } + const activeOrders: any = await spark.fetchActiveOrders({ + limit, + market, + orderType, + }); + console.log( + `fetchActiveOrders - ${orderType}`, + orderType === OrderType.Buy ? activeOrders.data?.ActiveBuyOrder : activeOrders.data?.ActiveSellOrder, + ); +} + +// Fetch trade volume +async function fetchTradeVolume(spark: SparkOrderbook) { + // query ($limit: Int!, $orderBy: order_by!) { + // TradeOrderEvent(limit: $limit, order_by: { timestamp: $orderBy }) { + // id + // tradePrice + // tradeSize + // timestamp + // } + // } + const volume = await spark.fetchVolume({ + limit: 100, + market: [MARKET], + }); + console.log(`volume`, volume); +} From 06e58d3178045ea6a8dd026d9457d7b9abf7d1ef 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, 22 Oct 2024 11:32:31 +0400 Subject: [PATCH 2/2] chore: update query data --- src/Test.tsx | 94 +++++++++++++++++++++++++++++++--------------------- 1 file changed, 56 insertions(+), 38 deletions(-) diff --git a/src/Test.tsx b/src/Test.tsx index f67e3344..132c01d0 100644 --- a/src/Test.tsx +++ b/src/Test.tsx @@ -77,15 +77,20 @@ function subscribeActiveOrders(spark: SparkOrderbook, orderType: OrderType, mark // $priceOrder: order_by! // ) { // ${queryObject}(limit: $limit, offset: $offset, where: $where, order_by: { price: $priceOrder }) { - // id - // asset - // amount - // initialAmount - // orderType - // price - // status - // user - // timestamp + // id + // market + // tradeSize + // tradePrice + // buyer + // buyOrderId + // buyerBaseAmount + // buyerQuoteAmount + // seller + // sellOrderId + // sellerBaseAmount + // sellerQuoteAmount + // sellerIsMaker + // timestamp // } // } const subscription = spark.subscribeActiveOrders({ limit, orderType, market }); @@ -106,15 +111,20 @@ function subscribeAllOrders(spark: SparkOrderbook, limit: number) { // $priceOrder: order_by! // ) { // Order(limit: $limit, offset: $offset, where: $where, order_by: { price: $priceOrder }) { - // id - // asset - // amount - // initialAmount - // orderType - // price - // status - // user - // timestamp + // id + // market + // tradeSize + // tradePrice + // buyer + // buyOrderId + // buyerBaseAmount + // buyerQuoteAmount + // seller + // sellOrderId + // sellerBaseAmount + // sellerQuoteAmount + // sellerIsMaker + // timestamp // } // } const allOrdersSubscription = spark.subscribeOrders({ limit }); @@ -144,15 +154,20 @@ async function fetchAllOrders(spark: SparkOrderbook, limit: number) { // $priceOrder: order_by! // ) { // Order(limit: $limit, offset: $offset, where: $where, order_by: { price: $priceOrder }) { - // id - // asset - // amount - // initialAmount - // orderType - // price - // status - // user - // timestamp + // id + // market + // tradeSize + // tradePrice + // buyer + // buyOrderId + // buyerBaseAmount + // buyerQuoteAmount + // seller + // sellOrderId + // sellerBaseAmount + // sellerQuoteAmount + // sellerIsMaker + // timestamp // } // } const orders = await spark.fetchOrders({ limit }); @@ -170,15 +185,20 @@ async function fetchActiveOrders(spark: SparkOrderbook, orderType: OrderType, ma // $priceOrder: order_by! // ) { // ${queryObject}(limit: $limit, offset: $offset, where: $where, order_by: { price: $priceOrder }) { - // id - // asset - // amount - // initialAmount - // orderType - // price - // status - // user - // timestamp + // id + // market + // tradeSize + // tradePrice + // buyer + // buyOrderId + // buyerBaseAmount + // buyerQuoteAmount + // seller + // sellOrderId + // sellerBaseAmount + // sellerQuoteAmount + // sellerIsMaker + // timestamp // } // } const activeOrders: any = await spark.fetchActiveOrders({ @@ -196,10 +216,8 @@ async function fetchActiveOrders(spark: SparkOrderbook, orderType: OrderType, ma async function fetchTradeVolume(spark: SparkOrderbook) { // query ($limit: Int!, $orderBy: order_by!) { // TradeOrderEvent(limit: $limit, order_by: { timestamp: $orderBy }) { - // id // tradePrice // tradeSize - // timestamp // } // } const volume = await spark.fetchVolume({