Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Middleware test 0.6.2 #162

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Middleware test 0.6.2 #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52e976a
feat: update test code
EchoDex Oct 22, 2024
06e58d3
chore: update query data
EchoDex Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 4 additions & 47 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <UnderConstruction />;
}

return (
<Root>
<Header />
<Routes>
<Route element={<SpotScreen />} path={`${ROUTES.SPOT}/:marketId`} />
<Route element={<SwapScreen />} path={ROUTES.SWAP} />
<Route element={<Faucet />} path={ROUTES.FAUCET} />
<Route element={<Navigate to={ROUTES.ROOT} />} path="*" />
<Route element={<Navigate to={DEFAULT_SPOT_ROUTE} />} path={ROUTES.ROOT} />
</Routes>
<SideManageAssets />
<PWAModal />
<SplashScreen />
<ConnectWalletDialog visible={modalStore.isOpen(MODAL_TYPE.CONNECT_MODAL)} onClose={() => modalStore.close()} />
<Test />
</Root>
);
});

export default App;

const Root = styled(Column)`
const Root = styled(SmartFlex)`
width: 100%;
align-items: center;
background: ${({ theme }) => theme.colors.bgPrimary};
Expand Down
228 changes: 228 additions & 0 deletions src/Test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<SmartFlex height="100vh" width="100vw" center column>
<p style={{ color: "white" }}>Tip: Open the developer tools to view logs</p>
</SmartFlex>
);
});

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<any>({ 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<any>({
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);
}
Loading