fix: forwardRef to fix console errors (#1299)

dydxprotocol · Nov 21, 2024 · 7b41838 · 7b41838
1 parent 4b81289
commit 7b41838
Show file tree

Hide file tree

Showing 5 changed files with 341 additions and 329 deletions.
diff --git a/src/components/visx/SparklineChart.tsx b/src/components/visx/SparklineChart.tsx
@@ -25,51 +25,53 @@ export const SparklineChart = <Datum extends {}>(props: SparklineChartProps<Datu
   return (
     <$ParentSize>
       {/* eslint-disable-next-line react/no-unused-prop-types */}
-      {({ height, width }: { width: number; height: number }) => (
-        <XYChart
-          width={width}
-          height={height}
-          margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
-          xScale={{
-            type: 'linear',
-            clamp: false,
-            nice: false,
-            zero: false,
-          }}
-          yScale={{
-            type: 'linear',
-            clamp: true,
-            nice: true,
-            zero: false,
-          }}
-          theme={theme}
-        >
-          <Axis orientation="bottom" hideAxisLine numTicks={0} hideTicks hideZero />
-          <Axis orientation="left" hideAxisLine numTicks={0} hideTicks hideZero />
-          <LinearGradient
-            id="sparkline-gradient-positive"
-            from="var(--color-positive)"
-            to="var(--color-positive)"
-            toOpacity={0.4}
-          />
-          <LinearGradient
-            id="sparkline-gradient-negative"
-            from="var(--color-negative)"
-            to="var(--color-negative)"
-            toOpacity={0.4}
-          />
-          <LineSeries
-            dataKey="Sparkline"
-            data={data}
-            xAccessor={xAccessor}
-            yAccessor={yAccessor}
-            curve={curveNatural}
-            stroke={
-              positive ? 'url(#sparkline-gradient-positive)' : 'url(#sparkline-gradient-negative)'
-            }
-          />
-        </XYChart>
-      )}
+      {({ height, width }: { width: number; height: number }) =>
+        height > 0 && width > 0 ? (
+          <XYChart
+            width={width}
+            height={height}
+            margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+            xScale={{
+              type: 'linear',
+              clamp: false,
+              nice: false,
+              zero: false,
+            }}
+            yScale={{
+              type: 'linear',
+              clamp: true,
+              nice: true,
+              zero: false,
+            }}
+            theme={theme}
+          >
+            <Axis orientation="bottom" hideAxisLine numTicks={0} hideTicks hideZero />
+            <Axis orientation="left" hideAxisLine numTicks={0} hideTicks hideZero />
+            <LinearGradient
+              id="sparkline-gradient-positive"
+              from="var(--color-positive)"
+              to="var(--color-positive)"
+              toOpacity={0.4}
+            />
+            <LinearGradient
+              id="sparkline-gradient-negative"
+              from="var(--color-negative)"
+              to="var(--color-negative)"
+              toOpacity={0.4}
+            />
+            <LineSeries
+              dataKey="Sparkline"
+              data={data}
+              xAccessor={xAccessor}
+              yAccessor={yAccessor}
+              curve={curveNatural}
+              stroke={
+                positive ? 'url(#sparkline-gradient-positive)' : 'url(#sparkline-gradient-negative)'
+              }
+            />
+          </XYChart>
+        ) : null
+      }
     </$ParentSize>
   );
 };

diff --git a/src/components/visx/TimeSeriesChart.tsx b/src/components/visx/TimeSeriesChart.tsx
@@ -318,6 +318,10 @@ export const TimeSeriesChart = <Datum extends {}>({
                 const numTicksY =
                   (height - (margin?.top ?? 0) - (margin?.bottom ?? 0)) / tickSpacingY;
 
+                if (width === 0 || height === 0) {
+                  return null;
+                }
+
                 return (
                   <XYChart margin={margin} width={width} height={height}>
                     <Grid

diff --git a/src/views/tables/FillsTable.tsx b/src/views/tables/FillsTable.tsx
@@ -1,4 +1,4 @@
-import { Key, useEffect, useMemo } from 'react';
+import { forwardRef, Key, useEffect, useMemo } from 'react';
 
 import { Nullable } from '@dydxprotocol/v4-abacus';
 import { OrderSide } from '@dydxprotocol/v4-client-js';
@@ -348,85 +348,87 @@ type StyleProps = {
   withInnerBorders?: boolean;
 };
 
-export const FillsTable = ({
-  columnKeys,
-  columnWidths,
-  currentMarket,
-  initialPageSize,
-  withGradientCardRows,
-  withOuterBorder,
-  withInnerBorders = true,
-}: ElementProps & StyleProps) => {
-  const stringGetter = useStringGetter();
-  const dispatch = useAppDispatch();
-  const { isMobile } = useBreakpoints();
+export const FillsTable = forwardRef(
+  ({
+    columnKeys,
+    columnWidths,
+    currentMarket,
+    initialPageSize,
+    withGradientCardRows,
+    withOuterBorder,
+    withInnerBorders = true,
+  }: ElementProps & StyleProps) => {
+    const stringGetter = useStringGetter();
+    const dispatch = useAppDispatch();
+    const { isMobile } = useBreakpoints();
 
-  const marketFills = useAppSelector(getCurrentMarketFills, shallowEqual) ?? EMPTY_ARR;
-  const allFills = useAppSelector(getSubaccountFills, shallowEqual) ?? EMPTY_ARR;
-  const fills = currentMarket ? marketFills : allFills;
+    const marketFills = useAppSelector(getCurrentMarketFills, shallowEqual) ?? EMPTY_ARR;
+    const allFills = useAppSelector(getSubaccountFills, shallowEqual) ?? EMPTY_ARR;
+    const fills = currentMarket ? marketFills : allFills;
 
-  const allPerpetualMarkets = orEmptyRecord(useAppSelector(getPerpetualMarkets, shallowEqual));
-  const allAssets = orEmptyRecord(useAppSelector(getAssets, shallowEqual));
+    const allPerpetualMarkets = orEmptyRecord(useAppSelector(getPerpetualMarkets, shallowEqual));
+    const allAssets = orEmptyRecord(useAppSelector(getAssets, shallowEqual));
 
-  useEffect(() => {
-    // marked fills as seen both on mount and dismount (i.e. new fill came in while fills table is being shown)
-    dispatch(viewedFills(currentMarket));
-    return () => {
+    useEffect(() => {
+      // marked fills as seen both on mount and dismount (i.e. new fill came in while fills table is being shown)
       dispatch(viewedFills(currentMarket));
-    };
-  }, [currentMarket, dispatch]);
+      return () => {
+        dispatch(viewedFills(currentMarket));
+      };
+    }, [currentMarket, dispatch]);
 
-  const symbol = mapIfPresent(currentMarket, (market) =>
-    mapIfPresent(allPerpetualMarkets[market]?.assetId, (assetId) => allAssets[assetId]?.id)
-  );
+    const symbol = mapIfPresent(currentMarket, (market) =>
+      mapIfPresent(allPerpetualMarkets[market]?.assetId, (assetId) => allAssets[assetId]?.id)
+    );
 
-  const fillsData = useMemo(
-    () =>
-      fills.map(
-        (fill: SubaccountFill): FillTableRow =>
-          getHydratedTradingData({
-            data: fill,
-            assets: allAssets,
-            perpetualMarkets: allPerpetualMarkets,
-          })
-      ),
-    [fills, allPerpetualMarkets, allAssets]
-  );
+    const fillsData = useMemo(
+      () =>
+        fills.map(
+          (fill: SubaccountFill): FillTableRow =>
+            getHydratedTradingData({
+              data: fill,
+              assets: allAssets,
+              perpetualMarkets: allPerpetualMarkets,
+            })
+        ),
+      [fills, allPerpetualMarkets, allAssets]
+    );
 
-  return (
-    <$Table
-      key={currentMarket ?? 'all-fills'}
-      label="Fills"
-      data={
-        isMobile && withGradientCardRows ? fillsData.slice(0, MOBILE_FILLS_PER_PAGE) : fillsData
-      }
-      getRowKey={(row: FillTableRow) => row.id}
-      onRowAction={(key: Key) =>
-        dispatch(openDialog(DialogTypes.FillDetails({ fillId: `${key}` })))
-      }
-      columns={columnKeys.map((key: FillsTableColumnKey) =>
-        getFillsTableColumnDef({
-          key,
-          stringGetter,
-          symbol,
-          width: columnWidths?.[key],
-        })
-      )}
-      slotEmpty={
-        <>
-          <Icon iconName={IconName.History} tw="text-[3em]" />
-          <h4>{stringGetter({ key: STRING_KEYS.TRADES_EMPTY_STATE })}</h4>
-        </>
-      }
-      initialPageSize={initialPageSize}
-      withOuterBorder={withOuterBorder}
-      withInnerBorders={withInnerBorders}
-      withScrollSnapColumns
-      withScrollSnapRows
-      withFocusStickyRows
-    />
-  );
-};
+    return (
+      <$Table
+        key={currentMarket ?? 'all-fills'}
+        label="Fills"
+        data={
+          isMobile && withGradientCardRows ? fillsData.slice(0, MOBILE_FILLS_PER_PAGE) : fillsData
+        }
+        getRowKey={(row: FillTableRow) => row.id}
+        onRowAction={(key: Key) =>
+          dispatch(openDialog(DialogTypes.FillDetails({ fillId: `${key}` })))
+        }
+        columns={columnKeys.map((key: FillsTableColumnKey) =>
+          getFillsTableColumnDef({
+            key,
+            stringGetter,
+            symbol,
+            width: columnWidths?.[key],
+          })
+        )}
+        slotEmpty={
+          <>
+            <Icon iconName={IconName.History} tw="text-[3em]" />
+            <h4>{stringGetter({ key: STRING_KEYS.TRADES_EMPTY_STATE })}</h4>
+          </>
+        }
+        initialPageSize={initialPageSize}
+        withOuterBorder={withOuterBorder}
+        withInnerBorders={withInnerBorders}
+        withScrollSnapColumns
+        withScrollSnapRows
+        withFocusStickyRows
+      />
+    );
+  }
+);
 const $Table = styled(Table)`
   ${tradeViewMixins.horizontalTable}
 ` as typeof Table;