[Trade] History Chart

src/components/activity/utils.ts

@@ -23,6 +23,9 @@ export interface ActivitySearchParams extends Partial<PaginationParams> {
   actions?: ActivityAction[];
   start?: Date;
   end?: Date;
+  // This is only for StrategyPageParams, but if I don't implement it here the build breaks
+  priceStart?: string;
+  priceEnd?: string;
 }
 export const activityActionName: Record<ActivityAction, string> = {
   create: 'Create',

src/components/common/CarbonLogoLoading.tsx

@@ -13,6 +13,7 @@ export const CarbonLogoLoading = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
+      aria-label="Loading"
     >
       <path
         style={{

src/components/simulator/input/d3Chart/D3ChartCandlesticks.tsx

@@ -10,10 +10,11 @@ import {
   scaleBand,
   D3ChartSettings,
 } from 'libs/d3';
-import { SimulatorType } from 'libs/routing/routes/sim';
 import { useMemo } from 'react';
 import { prettifyNumber } from 'utils/helpers';
 import { Candlesticks } from 'components/simulator/input/d3Chart/Candlesticks';
+import { D3ChartDisposable } from './recurring/D3ChartDisposable';
+import { TradeTypes } from 'libs/routing/routes/trade';
 
 export type ChartPrices<T = string> = {
   buy: { min: T; max: T };
@@ -32,8 +33,10 @@ export interface D3ChartCandlesticksProps {
   onDragEnd?: OnPriceUpdates;
   isLimit?: { buy: boolean; sell: boolean };
   dms: D3ChartSettings;
-  type: SimulatorType;
+  type: TradeTypes;
   overlappingSpread?: string;
+  overlappingMarketPrice?: number;
+  readonly?: boolean;
 }
 
 export const D3ChartCandlesticks = (props: D3ChartCandlesticksProps) => {
@@ -48,6 +51,8 @@ export const D3ChartCandlesticks = (props: D3ChartCandlesticksProps) => {
     dms,
     type,
     overlappingSpread,
+    overlappingMarketPrice,
+    readonly,
   } = props;
 
   const xScale = useMemo(
@@ -72,7 +77,9 @@ export const D3ChartCandlesticks = (props: D3ChartCandlesticksProps) => {
       <D3YAxisRight
         ticks={y.ticks}
         dms={dms}
-        formatter={(value) => prettifyNumber(value)}
+        formatter={(value) => {
+          return prettifyNumber(value, { decimals: 100, abbreviate: true });
+        }}
       />
       <XAxis xScale={xScale} dms={dms} />
       {marketPrice && (
@@ -81,11 +88,23 @@ export const D3ChartCandlesticks = (props: D3ChartCandlesticksProps) => {
           color="white"
           y={y.scale(marketPrice)}
           lineProps={{ strokeDasharray: 2 }}
-          label={prettifyNumber(marketPrice ?? '')}
+          label={prettifyNumber(marketPrice ?? '', { decimals: 4 })}
+        />
+      )}
+      {type === 'disposable' && isLimit && (
+        <D3ChartDisposable
+          readonly={readonly}
+          yScale={y.scale}
+          isLimit={isLimit}
+          dms={dms}
+          prices={prices}
+          onDragEnd={onDragEnd}
+          onPriceUpdates={onPriceUpdates}
         />
       )}
       {type === 'recurring' && isLimit && (
         <D3ChartRecurring
+          readonly={readonly}
           yScale={y.scale}
           isLimit={isLimit}
           dms={dms}
@@ -96,12 +115,13 @@ export const D3ChartCandlesticks = (props: D3ChartCandlesticksProps) => {
       )}
       {type === 'overlapping' && overlappingSpread !== undefined && (
         <D3ChartOverlapping
+          readonly={readonly}
           yScale={y.scale}
           dms={dms}
           prices={prices}
           onDragEnd={onDragEnd}
           onPriceUpdates={onPriceUpdates}
-          marketPrice={data[0].open ?? 0}
+          marketPrice={overlappingMarketPrice ?? data[0].open ?? 0}
           spread={Number(overlappingSpread)}
         />
       )}

src/components/simulator/input/d3Chart/D3ChartHandleLine.tsx

@@ -15,6 +15,7 @@ interface Props {
   label?: string;
   lineProps?: SVGProps<SVGLineElement>;
   handleClassName?: string;
+  readonly?: boolean;
   isDraggable?: boolean;
 }
 
@@ -25,6 +26,7 @@ export const D3ChartHandleLine = ({ lineProps, ...props }: Props) => {
     color,
     y = 0,
     label,
+    readonly,
     isDraggable,
     handleClassName,
   } = props;
@@ -43,7 +45,10 @@ export const D3ChartHandleLine = ({ lineProps, ...props }: Props) => {
       />
       <g
         transform={`translate(${lineWidth},-${handleDms.height / 2})`}
-        className={cn(isDraggable && 'cursor-ns-resize', handleClassName)}
+        className={cn(
+          isDraggable && !readonly && 'cursor-ns-resize',
+          handleClassName
+        )}
       >
         <rect y={y} {...handleDms} fill={color} rx={4} />
         {label && (
@@ -52,6 +57,30 @@ export const D3ChartHandleLine = ({ lineProps, ...props }: Props) => {
           </text>
         )}
       </g>
+      {readonly && (
+        <g
+          className="readonly"
+          transform={`translate(${lineWidth - 20}, ${y - 8})`}
+        >
+          <circle cx="8.41406" cy="8.28931" r="8" fill="#404040" />
+          <rect
+            x="5.49805"
+            y="7.87268"
+            width="5.83333"
+            height="4.16667"
+            rx="1"
+            stroke="white"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M6.33008 6.62264C6.33008 5.47205 7.26282 4.53931 8.41341 4.53931V4.53931C9.564 4.53931 10.4967 5.47205 10.4967 6.62264V7.87264H6.33008V6.62264Z"
+            stroke="white"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      )}
     </g>
   );
 };

src/components/simulator/input/d3Chart/D3ChartRect.tsx

@@ -4,16 +4,19 @@ import { cn } from 'utils/helpers';
 interface RectProps extends SVGProps<SVGRectElement> {
   selector: string;
   isDragging: boolean;
+  readonly?: boolean;
 }
-export const D3ChartRect = ({ selector, isDragging, ...props }: RectProps) => {
+export const D3ChartRect = (props: RectProps) => {
+  const { selector, isDragging, readonly, ...attr } = props;
   return (
     <rect
       className={cn(selector, {
         'cursor-grab': !isDragging,
         'cursor-grabbing': isDragging,
+        'cursor-auto': readonly,
       })}
       fillOpacity={0.15}
-      {...props}
+      {...attr}
     />
   );
 };

src/components/simulator/input/d3Chart/overlapping/D3ChartOverlapping.tsx

@@ -29,6 +29,7 @@ type Props = Pick<
   yScale: ScaleLinear<number, number>;
   marketPrice?: number;
   spread: number;
+  readonly?: boolean;
 };
 
 export const D3ChartOverlapping = (props: Props) => {
@@ -37,6 +38,7 @@ export const D3ChartOverlapping = (props: Props) => {
     yScale,
     prices,
     marketPrice,
+    readonly,
     onPriceUpdates,
     onDragEnd,
     spread,
@@ -208,36 +210,41 @@ export const D3ChartOverlapping = (props: Props) => {
         dms={dms}
         color="var(--sell)"
         lineProps={{ strokeDasharray: 2 }}
-        label={prettifyNumber(prices.sell.min ?? '')}
+        label={prettifyNumber(prices.sell.min ?? '', { decimals: 4 })}
+        readonly={readonly}
       />
       <D3ChartHandleLine
         selector={selectorHandleBuyMax}
         handleClassName="opacity-40"
         dms={dms}
         color="var(--buy)"
         lineProps={{ strokeDasharray: 2 }}
-        label={prettifyNumber(prices.buy.max ?? '')}
+        label={prettifyNumber(prices.buy.max ?? '', { decimals: 4 })}
+        readonly={readonly}
       />
       <D3ChartOverlappingHandle
         selector={selectorHandleBuyMin}
         dms={dms}
         onDrag={onDragBuy}
         onDragEnd={onDragEndBuy}
         color="var(--buy)"
-        label={prettifyNumber(prices.buy.min ?? '')}
+        label={prettifyNumber(prices.buy.min ?? '', { decimals: 4 })}
+        readonly={readonly}
       />
       <D3ChartOverlappingHandle
         selector={selectorHandleSellMax}
         dms={dms}
         onDrag={onDragSell}
         onDragEnd={onDragEndSell}
         color="var(--sell)"
-        label={prettifyNumber(prices.sell.max ?? '')}
+        label={prettifyNumber(prices.sell.max ?? '', { decimals: 4 })}
+        readonly={readonly}
       />
       <D3ChartOverlappingRangeGroup
         dms={dms}
         onDrag={onDragRect}
         onDragEnd={onDragEndRect}
+        readonly={readonly}
       />
       <D3ChartPriceOutOfScale
         type="buy"

src/components/simulator/input/d3Chart/overlapping/D3ChartOverlappingHandle.tsx

@@ -14,6 +14,7 @@ interface Props {
   onDragEnd?: (y: number) => void;
   color: string;
   label?: string;
+  readonly?: boolean;
 }
 
 export const D3ChartOverlappingHandle = ({
@@ -22,21 +23,30 @@ export const D3ChartOverlappingHandle = ({
   onDragEnd,
   ...props
 }: Props) => {
-  const selection = getSelector(props.selector);
   const isSelectable = useSelectable(props.selector);
 
-  const handleDrag = drag()
-    .subject(() => ({
-      y: Number(selection.select('line').attr('y1')),
-    }))
-    .on('start', ({ y }) => onDragStart?.(y))
-    .on('drag', ({ y }) => onDrag?.(y))
-    .on('end', ({ y }) => onDragEnd?.(y));
-
   useEffect(() => {
+    if (props.readonly) return;
+    const selection = getSelector(props.selector);
+    const handleDrag = drag()
+      .subject(() => ({
+        y: Number(selection.select('line').attr('y1')),
+      }))
+      .on('start', ({ y }) => onDragStart?.(y))
+      .on('drag', ({ y }) => onDrag?.(y))
+      .on('end', ({ y }) => onDragEnd?.(y));
+
     if (!isSelectable) return;
+
     handleDrag(selection as Selection<Element, unknown, any, any>);
-  }, [isSelectable, handleDrag, selection]);
+  }, [
+    isSelectable,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    props.readonly,
+    props.selector,
+  ]);
 
-  return <D3ChartHandleLine {...props} isDraggable />;
+  return <D3ChartHandleLine {...props} isDraggable={!props.readonly} />;
 };

src/components/simulator/input/d3Chart/overlapping/D3ChartOverlappingRangeGroup.tsx

@@ -9,13 +9,15 @@ import { D3ChartSettings } from 'libs/d3/types';
 import { useEffect, useState } from 'react';
 
 interface Props {
+  readonly?: boolean;
   dms: D3ChartSettings;
   onDragStart?: (y: number, y2: number) => void;
   onDrag?: (y: number, y2: number) => void;
   onDragEnd?: (y: number, y2: number) => void;
 }
 
 export const D3ChartOverlappingRangeGroup = ({
+  readonly,
   dms,
   onDragStart,
   onDrag,
@@ -52,19 +54,21 @@ export const D3ChartOverlappingRangeGroup = ({
     });
 
   useEffect(() => {
-    if (!isSelectable || !onDrag) return;
+    if (readonly || !isSelectable || !onDrag) return;
     handleDrag(selection as Selection<Element, unknown, any, any>);
-  }, [isSelectable, handleDrag, onDrag, selection]);
+  }, [isSelectable, handleDrag, onDrag, selection, readonly]);
 
   return (
     <g className={selector}>
       <D3ChartRect
+        readonly={readonly}
         selector={selectorRectBuy}
         isDragging={isDragging}
         width={dms.boundedWidth}
         fill="var(--buy)"
       />
       <D3ChartRect
+        readonly={readonly}
         selector={selectorRectSell}
         isDragging={isDragging}
         width={dms.boundedWidth}