Fix: misc

package.json

@@ -5,14 +5,12 @@
     "yieldxyz"
   ],
   "scripts": {
-    "dev": "turbo dev --filter=@yieldxyz/perps-common --filter=@yieldxyz/perps-widget --filter=@yieldxyz/perps-dashboard",
+    "dev": "turbo dev",
     "dev:widget": "turbo dev --filter=@yieldxyz/perps-common --filter=@yieldxyz/perps-widget",
     "dev:dashboard": "turbo dev --filter=@yieldxyz/perps-common --filter=@yieldxyz/perps-dashboard",
-
+    "build": "turbo build",
     "build:widget": "turbo build --filter=@yieldxyz/perps-widget",
     "build:dashboard": "turbo build --filter=@yieldxyz/perps-dashboard",
-
-    "build": "turbo build",
     "test": "turbo test",
     "lint": "turbo lint",
     "format": "turbo format",

packages/common/package.json

@@ -56,11 +56,12 @@
   "dependencies": {
     "@base-ui/react": "catalog:",
     "@effect-atom/atom-react": "catalog:",
-    "@effect/experimental": "^0.58.0",
+    "@effect/experimental": "catalog:",
     "@effect/platform": "catalog:",
     "@effect/platform-node": "catalog:",
     "@ledgerhq/wallet-api-client": "catalog:",
     "@lucas-barake/effect-form-react": "catalog:",
+    "@nktkas/hyperliquid": "catalog:",
     "@reown/appkit": "catalog:",
     "@reown/appkit-adapter-wagmi": "catalog:",
     "@stakekit/common": "catalog:",
@@ -86,8 +87,6 @@
   "devDependencies": {
     "@tanstack/devtools-vite": "catalog:",
     "@tanstack/router-cli": "catalog:",
-    "@testing-library/dom": "catalog:",
-    "@testing-library/react": "catalog:",
     "@tim-smart/openapi-gen": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",

packages/common/src/atoms/candle-atoms.ts

@@ -0,0 +1,30 @@
+import { Atom } from "@effect-atom/atom-react";
+import { Effect, Schema, Stream } from "effect";
+import {
+  CandleIntervalSchema,
+  CoinSchema,
+  HyperliquidService,
+} from "../services/hyperliquid";
+import { runtimeAtom } from "../services/runtime";
+
+export const CandleSubscriptionParams = Schema.Data(
+  Schema.Struct({
+    coin: CoinSchema,
+    interval: CandleIntervalSchema,
+  }),
+);
+
+export const candleStreamAtom = Atom.family(
+  (params: typeof CandleSubscriptionParams.Type) =>
+    runtimeAtom.atom(
+      HyperliquidService.pipe(
+        Effect.andThen((service) =>
+          service.subscribeCandle({
+            coin: params.coin,
+            interval: params.interval,
+          }),
+        ),
+        Stream.unwrap,
+      ),
+    ),
+);

packages/common/src/atoms/hyperliquid-atoms.ts

@@ -0,0 +1,9 @@
+import { Effect, Stream } from "effect";
+import { HyperliquidService, runtimeAtom } from "../services";
+
+export const midPriceAtom = runtimeAtom.atom(
+  HyperliquidService.pipe(
+    Effect.andThen((service) => service.subscribeMidPrice),
+    Stream.unwrap,
+  ),
+);

packages/common/src/atoms/index.ts

@@ -1,7 +1,9 @@
 export * from "./actions-atoms";
+export * from "./candle-atoms";
 export * from "./close-position-atoms";
 export * from "./config-atom";
 export * from "./edit-position-atoms";
+export * from "./hyperliquid-atoms";
 export * from "./markets-atoms";
 export * from "./order-form-atoms";
 export * from "./orders-pending-actions-atom";

packages/common/src/atoms/markets-atoms.ts

@@ -1,8 +1,18 @@
 import { Atom, AtomRef } from "@effect-atom/atom-react";
-import { Data, Duration, Effect, Record, Schedule, Stream } from "effect";
+import {
+  Array as _Array,
+  Data,
+  Duration,
+  Effect,
+  pipe,
+  Record,
+  Schedule,
+  Stream,
+} from "effect";
 import { ApiClientService } from "../services/api-client";
 import type { ProviderDto } from "../services/api-client/api-schemas";
 import { runtimeAtom } from "../services/runtime";
+import { midPriceAtom } from "./hyperliquid-atoms";
 import { selectedProviderAtom } from "./providers-atoms";
 
 const DEFAULT_LIMIT = 50;
@@ -50,6 +60,20 @@ export const marketsAtom = runtimeAtom.atom(
   }),
 );
 
+export const marketsBySymbolAtom = runtimeAtom.atom(
+  Effect.fn(function* (ctx) {
+    const markets = yield* ctx.result(marketsAtom);
+
+    return pipe(
+      Record.values(markets),
+      _Array.map(
+        (marketRef) => [marketRef.value.baseAsset.symbol, marketRef] as const,
+      ),
+      Record.fromEntries,
+    );
+  }),
+);
+
 export class MarketNotFoundError extends Data.TaggedError(
   "MarketNotFoundError",
 ) {}
@@ -74,7 +98,7 @@ export const refreshMarketsAtom = runtimeAtom.atom(
     const selectedProvider = yield* ctx.result(selectedProviderAtom);
 
     yield* Stream.fromSchedule(
-      Schedule.forever.pipe(Schedule.addDelay(() => Duration.seconds(10))),
+      Schedule.forever.pipe(Schedule.addDelay(() => Duration.minutes(1))),
     ).pipe(
       Stream.mapEffect(() => getAllMarkets(selectedProvider)),
       Stream.tap((markets) =>
@@ -96,3 +120,24 @@ export const refreshMarketsAtom = runtimeAtom.atom(
     );
   }),
 );
+
+export const updateMarketsMidPriceAtom = runtimeAtom.atom((ctx) =>
+  Effect.gen(function* () {
+    const { mids } = yield* ctx.result(midPriceAtom);
+
+    const markets = yield* ctx.result(marketsBySymbolAtom);
+
+    Record.toEntries(mids).forEach(([symbol, price]) => {
+      const marketRef = Record.get(markets, symbol);
+
+      if (marketRef._tag === "None") {
+        return;
+      }
+
+      marketRef.value.update((market) => ({
+        ...market,
+        markPrice: Number(price),
+      }));
+    });
+  }),
+);

packages/common/src/atoms/order-form-atoms.ts

@@ -191,8 +191,8 @@ export const orderFormAtom = Atom.family(
         }),
     });
 
-    const setAmountFieldAtom = OrderForm.setValue(OrderForm.fields.Amount);
-    const amountFieldAtom = OrderForm.getFieldValue(OrderForm.fields.Amount);
+    const { value: amountFieldAtom, setValue: setAmountFieldAtom } =
+      OrderForm.getFieldAtoms(OrderForm.fields.Amount);
 
     return Atom.readable(() => ({
       form: OrderForm,

packages/common/src/atoms/portfolio-atoms.ts

@@ -1,8 +1,10 @@
-import { Atom } from "@effect-atom/atom-react";
-import { Duration, Effect } from "effect";
+import { Atom, AtomRef } from "@effect-atom/atom-react";
+import { Duration, Effect, Record } from "effect";
 import type { WalletAccount } from "../domain/wallet";
 import { ApiClientService } from "../services/api-client";
 import { runtimeAtom, withReactivity } from "../services/runtime";
+import { midPriceAtom } from "./hyperliquid-atoms";
+import { marketsBySymbolAtom } from "./markets-atoms";
 import { providersAtom, selectedProviderAtom } from "./providers-atoms";
 import { withRefreshAfter } from "./utils";
 
@@ -25,10 +27,15 @@ export const positionsAtom = Atom.family(
           const client = yield* ApiClientService;
           const selectedProvider = yield* ctx.result(selectedProviderAtom);
 
-          return yield* client.PortfolioControllerGetPositions({
+          const positions = yield* client.PortfolioControllerGetPositions({
             address: walletAddress,
             providerId: selectedProvider.id,
           });
+
+          return Record.fromIterableBy(
+            positions.map((position) => AtomRef.make(position)),
+            (ref) => ref.value.marketId,
+          );
         }),
       )
       .pipe(
@@ -105,3 +112,27 @@ export const selectedProviderBalancesAtom = Atom.family(
         Atom.keepAlive,
       ),
 );
+
+export const updatePositionsMidPriceAtom = Atom.family(
+  (walletAddress: WalletAccount["address"]) =>
+    runtimeAtom.atom((ctx) =>
+      Effect.gen(function* () {
+        const { mids } = yield* ctx.result(midPriceAtom);
+        const markets = yield* ctx.result(marketsBySymbolAtom);
+        const positions = yield* ctx.result(positionsAtom(walletAddress));
+
+        Record.toEntries(mids).forEach(([symbol, price]) => {
+          const marketRef = Record.get(markets, symbol);
+          if (marketRef._tag === "None") return;
+
+          const positionRef = Record.get(positions, marketRef.value.value.id);
+          if (positionRef._tag === "None") return;
+
+          positionRef.value.update((position) => ({
+            ...position,
+            markPrice: Number(price),
+          }));
+        });
+      }),
+    ),
+);

packages/common/src/components/index.ts

@@ -5,6 +5,7 @@ export * from "./molecules/leverage-dialog";
 export * from "./molecules/limit-price-dialog";
 export * from "./molecules/order-type-dialog";
 export * from "./molecules/percentage-slider";
+export * from "./molecules/price-flash";
 export * from "./molecules/sign-transactions";
 export * from "./molecules/toggle-group";
 export * from "./molecules/token-icon";

packages/common/src/components/molecules/limit-price-dialog.tsx

@@ -63,9 +63,7 @@ function LimitPriceDialogContent({
   onLimitPriceChange,
   currentPrice,
 }: LimitPriceDialogContentProps) {
-  const setAmount = useAtomSet(
-    LimitPriceForm.setValue(LimitPriceForm.fields.Amount),
-  );
+  const setAmount = useAtomSet(setAmountFieldAtom);
   const submit = useAtomSet(LimitPriceForm.submit);
 
   const handleQuickAdjust = (percent: number) => {
@@ -192,3 +190,7 @@ const LimitPriceForm = FormReact.make(limitPriceFormBuilder, {
     { decoded },
   ) => args.onSubmit(decoded.Amount),
 });
+
+const { setValue: setAmountFieldAtom } = LimitPriceForm.getFieldAtoms(
+  LimitPriceForm.fields.Amount,
+);

packages/common/src/components/molecules/price-flash.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+
+export const PriceFlash = ({
+  price,
+  children,
+}: {
+  price: number;
+  children: React.ReactNode;
+}) => {
+  const prevPrice = useRef(price);
+  const ref = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+
+    if (!el || price === prevPrice.current) {
+      prevPrice.current = price;
+      return;
+    }
+
+    const cls =
+      price > prevPrice.current ? "price-flash-up" : "price-flash-down";
+    prevPrice.current = price;
+
+    el.classList.remove("price-flash-up", "price-flash-down");
+    // Force reflow to restart animation when direction is the same
+    void el.offsetWidth;
+    el.classList.add(cls);
+  }, [price]);
+
+  return <span ref={ref}>{children}</span>;
+};

packages/common/src/hooks/use-deposit-form.ts

@@ -166,8 +166,8 @@ export const createDepositForm = (
 
 export const DepositForm = createDepositForm(AmountField);
 
-const amountAtom = DepositForm.getFieldValue(DepositForm.fields.Amount);
-const setAmountFieldAtom = DepositForm.setValue(DepositForm.fields.Amount);
+const { value: amountAtom, setValue: setAmountFieldAtom } =
+  DepositForm.getFieldAtoms(DepositForm.fields.Amount);
 
 export const useDepositForm = () => {
   const submit = useAtomSet(DepositForm.submit);

packages/common/src/hooks/use-order-form.ts

@@ -1,5 +1,5 @@
 import { Result, useAtomSet, useAtomValue } from "@effect-atom/atom-react";
-import { Option, Schema } from "effect";
+import { Option, Record, Schema } from "effect";
 import {
   calculateOrderPercentage,
   calculateOrderPositionSize,
@@ -87,14 +87,15 @@ export const useCurrentPosition = (
 ) => {
   const positions = useAtomValue(
     positionsAtom(wallet.currentAccount.address),
-  ).pipe(Result.getOrElse(() => []));
+  ).pipe(Result.getOrElse(Record.empty));
 
-  const currentPosition = positions.find(
-    (position) => position.marketId === marketId,
+  const currentPosition = Record.get(positions, marketId).pipe(
+    Option.map((ref) => ref.value),
+    Option.getOrNull,
   );
 
   return {
-    currentPosition: currentPosition ?? null,
+    currentPosition,
   };
 };
 

packages/common/src/hooks/use-withdraw-form.ts

@@ -117,8 +117,8 @@ export const createWithdrawForm = (
 
 export const WithdrawForm = createWithdrawForm(AmountField);
 
-const setAmountFieldAtom = WithdrawForm.setValue(WithdrawForm.fields.Amount);
-const amountFieldAtom = WithdrawForm.getFieldValue(WithdrawForm.fields.Amount);
+const { value: amountFieldAtom, setValue: setAmountFieldAtom } =
+  WithdrawForm.getFieldAtoms(WithdrawForm.fields.Amount);
 
 export const useWithdrawForm = () => {
   const submit = useAtomSet(WithdrawForm.submit);

packages/common/src/lib/formatting.ts

@@ -139,25 +139,21 @@ export function formatCompactUsdAmount(volume: number): string {
  * - Long: "TP +10%, SL -5%" or "TP Off, SL Off"
  * - Short: "TP -10%, SL +5%" or "TP Off, SL Off"
  */
-export function formatTPOrSLSettings(
-  settings: TPOrSLSettings,
-  side: "long" | "short" = "long",
-): string {
+export function formatTPOrSLSettings(settings: TPOrSLSettings) {
   const tp = Option.fromNullable(settings.takeProfit.percentage).pipe(
     Option.filter((percentage) => percentage !== 0),
-    Option.map((percentage) =>
-      side === "short" ? `TP -${percentage}%` : `TP +${percentage}%`,
-    ),
+    Option.map((percentage) => `TP ${formatPercentage(percentage)}`),
     Option.getOrElse(() => "TP Off"),
   );
 
   const sl = Option.fromNullable(settings.stopLoss.percentage).pipe(
     Option.filter((percentage) => percentage !== 0),
-    Option.map((percentage) =>
-      side === "short" ? `SL +${percentage}%` : `SL -${percentage}%`,
-    ),
+    Option.map((percentage) => `SL ${formatPercentage(percentage)}`),
     Option.getOrElse(() => "SL Off"),
   );
 
-  return `${tp}, ${sl}`;
+  return {
+    tp,
+    sl,
+  };
 }