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..132c01d0 --- /dev/null +++ b/src/Test.tsx @@ -0,0 +1,228 @@ +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 + // market + // tradeSize + // tradePrice + // buyer + // buyOrderId + // buyerBaseAmount + // buyerQuoteAmount + // seller + // sellOrderId + // sellerBaseAmount + // sellerQuoteAmount + // sellerIsMaker + // 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 + // market + // tradeSize + // tradePrice + // buyer + // buyOrderId + // buyerBaseAmount + // buyerQuoteAmount + // seller + // sellOrderId + // sellerBaseAmount + // sellerQuoteAmount + // sellerIsMaker + // 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 + // market + // tradeSize + // tradePrice + // buyer + // buyOrderId + // buyerBaseAmount + // buyerQuoteAmount + // seller + // sellOrderId + // sellerBaseAmount + // sellerQuoteAmount + // sellerIsMaker + // 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 + // market + // tradeSize + // tradePrice + // buyer + // buyOrderId + // buyerBaseAmount + // buyerQuoteAmount + // seller + // sellOrderId + // sellerBaseAmount + // sellerQuoteAmount + // sellerIsMaker + // 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 }) { + // tradePrice + // tradeSize + // } + // } + const volume = await spark.fetchVolume({ + limit: 100, + market: [MARKET], + }); + console.log(`volume`, volume); +}