Debug UI deployment (#144)

* use env var for feed url

* remove antipattern build step

* do not export FillFeed in index as it is not compatible with client now

* update fillFeed to use new import path

* bump published version

* move FillLogResult to types file to allow usage in client

* fix broken type changes

* version bump

client/ts/src/fillFeed.ts

@@ -8,6 +8,7 @@ import { genAccDiscriminator } from './utils/discriminator';
 import * as promClient from 'prom-client';
 import express from 'express';
 import promBundle from 'express-prom-bundle';
+import { FillLogResult } from './types';
 
 // For live monitoring of the fill feed. For a more complete look at fill
 // history stats, need to index all trades.
@@ -170,33 +171,6 @@ export async function runFillFeed() {
 
 const fillDiscriminant = genAccDiscriminator('manifest::logs::FillLog');
 
-/**
- * FillLogResult is the message sent to subscribers of the FillFeed
- */
-export type FillLogResult = {
-  /** Public key for the market as base58. */
-  market: string;
-  /** Public key for the maker as base58. */
-  maker: string;
-  /** Public key for the taker as base58. */
-  taker: string;
-  /** Number of base atoms traded. */
-  baseAtoms: string;
-  /** Number of quote atoms traded. */
-  quoteAtoms: string;
-  /** Price as float. Quote atoms per base atom. */
-  price: number;
-  /** Boolean to indicate which side the trade was. */
-  takerIsBuy: boolean;
-  /** Boolean to indicate whether the maker side is global. */
-  isMakerGlobal: boolean;
-  /** Sequential number for every order placed / matched wraps around at u64::MAX */
-  makerSequenceNumber: string;
-  /** Sequential number for every order placed / matched wraps around at u64::MAX */
-  takerSequenceNumber: string;
-  /** Slot number of the fill. */
-  slot: number;
-};
 function toFillLogResult(fillLog: FillLog, slot: number): FillLogResult {
   return {
     market: fillLog.market.toBase58(),

client/ts/src/index.ts

@@ -1,6 +1,6 @@
 export * from './client';
-export * from './fillFeed';
 export * from './market';
+export * from './types';
 // Do not export all of manifest because names collide with wrapper. Force users
 // to use the client.
 export * from './manifest/errors';

client/ts/src/types.ts

@@ -0,0 +1,27 @@
+/**
+ * FillLogResult is the message sent to subscribers of the FillFeed
+ */
+export type FillLogResult = {
+  /** Public key for the market as base58. */
+  market: string;
+  /** Public key for the maker as base58. */
+  maker: string;
+  /** Public key for the taker as base58. */
+  taker: string;
+  /** Number of base atoms traded. */
+  baseAtoms: string;
+  /** Number of quote atoms traded. */
+  quoteAtoms: string;
+  /** Price as float. Quote atoms per base atom. */
+  price: number;
+  /** Boolean to indicate which side the trade was. */
+  takerIsBuy: boolean;
+  /** Boolean to indicate whether the maker side is global. */
+  isMakerGlobal: boolean;
+  /** Sequential number for every order placed / matched wraps around at u64::MAX */
+  makerSequenceNumber: string;
+  /** Sequential number for every order placed / matched wraps around at u64::MAX */
+  takerSequenceNumber: string;
+  /** Slot number of the fill. */
+  slot: number;
+};

client/ts/tests/fillFeed.ts

@@ -4,7 +4,7 @@ import { createMarket } from './createMarket';
 import { deposit } from './deposit';
 import { Market } from '../src/market';
 import { assert } from 'chai';
-import { FillFeed } from '../src';
+import { FillFeed } from '../src/fillFeed';
 import { placeOrder } from './placeOrder';
 import WebSocket from 'ws';
 

debug-ui/README.md

@@ -8,7 +8,7 @@ If you intend to run `rando-bot`, make sure to set the env vars in `.env`. use `
 
 **IMPORTANT NOTE** `.env` and `.env.local` are two different files with different environment variables.
 
-You must set `NEXT_PUBLIC_RPC_URL` and `NEXT_PUBLIC_READ_ONLY` in `.env.local` before running. You can choose between different clusters by supplying different values for this environment variable.
+You must set `NEXT_PUBLIC_RPC_URL`, `NEXT_PUBLIC_READ_ONLY`, and `NEXT_PUBLIC_FEED_URL` in `.env.local` before running. You can choose between different clusters by supplying different values for this environment variable.
 
 - `.env` is only used with scripts.
 - `.env.local` is used for running the ui

debug-ui/app/components/Chart.tsx

@@ -12,6 +12,7 @@ import {
 import { FillLogResult, Market } from '@cks-systems/manifest-sdk';
 import { useConnection } from '@solana/wallet-adapter-react';
 import { PublicKey } from '@solana/web3.js';
+import { toast } from 'react-toastify';
 
 const Chart = ({ marketAddress }: { marketAddress: string }): ReactElement => {
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
@@ -34,7 +35,12 @@ const Chart = ({ marketAddress }: { marketAddress: string }): ReactElement => {
   }, [conn, marketAddress]);
 
   useEffect(() => {
-    const ws = new WebSocket('ws://localhost:1234');
+    const feedUrl = process.env.NEXT_PUBLIC_FEED_URL;
+    if (!feedUrl) {
+      toast.error('NEXT_PUBLIC_FEED_URL not set');
+      throw new Error('NEXT_PUBLIC_FEED_URL not set');
+    }
+    const ws = new WebSocket(feedUrl);
     let fillsInCurrentInterval: CandlestickData | null = null;
 
     ws.onmessage = async (message): Promise<void> => {
@@ -50,10 +56,11 @@ const Chart = ({ marketAddress }: { marketAddress: string }): ReactElement => {
         const timestamp = Math.floor(time / 60) * 60; // Group by minute
 
         const quoteTokens =
-          fill.quoteAtoms /
+          Number(fill.quoteAtoms) /
           10 ** Number(marketRef.current?.quoteDecimals() || 0);
         const baseTokens =
-          fill.baseAtoms / 10 ** Number(marketRef.current?.baseDecimals() || 0);
+          Number(fill.baseAtoms) /
+          10 ** Number(marketRef.current?.baseDecimals() || 0);
 
         const price = Number((quoteTokens / baseTokens).toFixed(4));
 

debug-ui/app/components/Fills.tsx

@@ -6,6 +6,7 @@ import { FillLogResult, Market } from '@cks-systems/manifest-sdk';
 import { useConnection } from '@solana/wallet-adapter-react';
 import { PublicKey } from '@solana/web3.js';
 import { ReactElement, useEffect, useState, useRef } from 'react';
+import { toast } from 'react-toastify';
 
 const Fills = ({ marketAddress }: { marketAddress: string }): ReactElement => {
   const { connection: conn } = useConnection();
@@ -27,7 +28,12 @@ const Fills = ({ marketAddress }: { marketAddress: string }): ReactElement => {
 
   useEffect(() => {
     if (!wsRef.current) {
-      const ws = new WebSocket('ws://localhost:1234');
+      const feedUrl = process.env.NEXT_PUBLIC_FEED_URL;
+      if (!feedUrl) {
+        toast.error('NEXT_PUBLIC_FEED_URL not set');
+        throw new Error('NEXT_PUBLIC_FEED_URL not set');
+      }
+      const ws = new WebSocket(feedUrl);
       wsRef.current = ws;
 
       ws.onopen = (message): void => {
@@ -37,10 +43,11 @@ const Fills = ({ marketAddress }: { marketAddress: string }): ReactElement => {
       ws.onmessage = (message): void => {
         const fill: FillLogResult = JSON.parse(message.data);
         const quoteTokens =
-          fill.quoteAtoms /
+          Number(fill.quoteAtoms) /
           10 ** Number(marketRef.current?.quoteDecimals() || 0);
         const baseTokens =
-          fill.baseAtoms / 10 ** Number(marketRef.current?.baseDecimals() || 0);
+          Number(fill.baseAtoms) /
+          10 ** Number(marketRef.current?.baseDecimals() || 0);
 
         const priceTokens = Number((quoteTokens / baseTokens).toFixed(4));
         const fillUi: FillResultUi = {

debug-ui/app/components/PlaceOrder.tsx

@@ -70,7 +70,6 @@ const PlaceOrder = ({
       isBid: side == 'buy',
       lastValidSlot: 0,
       orderType: OrderType.Limit,
-      minOutTokens: 0,
       clientOrderId: Number(clientOrderId),
     };
 

debug-ui/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "preinstall": "cd ../ && yarn build",
     "dev": "next dev",
-    "build": "cd ../ && yarn build && cd ./debug-ui && next build",
+    "build": "next build",
     "start": "next start",
     "start:feed": "tsx scripts/start-fill-feed.ts",
     "run:pk-solflare-to-phantom": "tsx scripts/pk-solflare-to-phantom.ts",

debug-ui/scripts/start-fill-feed.ts

@@ -1,6 +1,6 @@
 import 'dotenv/config';
 
-import { FillFeed } from '@cks-systems/manifest-sdk';
+import { FillFeed } from '@cks-systems/manifest-sdk/fillFeed';
 import { Connection } from '@solana/web3.js';
 
 const { RPC_URL } = process.env;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cks-systems/manifest-sdk",
-    "version": "0.1.5",
+    "version": "0.1.52",
     "files": [
         "dist/",
         "README.md",