chore: add asset deny list

libs/assets/src/lib/assets-data-provider.ts

@@ -4,9 +4,10 @@ import {
 } from '@vegaprotocol/data-provider';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { AssetsDocument } from './__generated__/Assets';
-import * as Schema from '@vegaprotocol/types';
+import { AssetStatus } from '@vegaprotocol/types';
 import type { AssetsQuery } from './__generated__/Assets';
 import type { Asset } from './asset-data-provider';
+import { DENY_LIST } from './constants';
 
 export interface BuiltinAssetSource {
   __typename: 'BuiltinAsset';
@@ -48,6 +49,7 @@ export const assetsMapProvider = makeDerivedDataProvider<
   }
 );
 
+/** Returns a record of assets by id */
 export const useAssetsMapProvider = () =>
   useDataProvider({
     dataProvider: assetsMapProvider,
@@ -58,13 +60,32 @@ export const enabledAssetsProvider = makeDerivedDataProvider<
   ReturnType<typeof getData>,
   never
 >([assetsProvider], ([assets]) =>
-  (assets as ReturnType<typeof getData>).filter(
-    (a) => a.status === Schema.AssetStatus.STATUS_ENABLED
-  )
+  (assets as ReturnType<typeof getData>)
+    .filter((a) => a.status === AssetStatus.STATUS_ENABLED)
+    .filter((a) => {
+      const env = process.env['NX_VEGA_ENV'];
+
+      if (!env || !DENY_LIST[env]) return true;
+
+      if (DENY_LIST[env].includes(a.id)) {
+        return false;
+      }
+
+      return true;
+    })
 );
 
+/** Returns all assets */
 export const useAssetsDataProvider = () =>
   useDataProvider({
     dataProvider: assetsProvider,
     variables: undefined,
   });
+
+/** Returns assets that are enabled and are not on the deny list */
+export const useEnabledAssets = () => {
+  return useDataProvider({
+    dataProvider: enabledAssetsProvider,
+    variables: undefined,
+  });
+};

libs/assets/src/lib/constants.ts

@@ -1,4 +1,67 @@
 import { t } from '@vegaprotocol/i18n';
+
 export const WITHDRAW_THRESHOLD_TOOLTIP_TEXT = t(
   "The maximum you can withdraw instantly. There's no limit on the size of a withdrawal, but all withdrawals over the threshold will have a delay time added to them"
 );
+
+// List of defunct and no longer used assets that were created for various testnets
+export const DENY_LIST: Record<string, string[]> = {
+  TESTNET: [
+    '07f8ce4e3df6c649f3fd794112f545ede9fbd9cfa76a9e380a7502a8d525e4db',
+    '0b87ac58d4af7fc11c8b417153fcb62631cfd9643835ef28db3f5a1caef0b379',
+    '169fd651dd1303fc6f3e1dee8349439140cf467a190bc9a04bff3e617509cfd4',
+    '16ae5dbb1fd7aa2ddef725703bfe66b3647a4da7b844bfdd04e985756f53d9d6',
+    '177e8f6c25a955bd18475084b99b2b1d37f28f3dec393fab7755a7e69c3d8c3b',
+    '20ffe5b1f70364a6b976007d96d306345bc7b880256ddffbbea2c590096ef375',
+    '2792b6ead78a812bd0169b2adbe9c2ea5b8c21510e40b93bf8d2cba6a0838e90',
+    '27c0229ab9edc6a3ba6a3e9716c1b324d6515a3168004256879e2de7c240f453',
+    '285923fed8c66ffb416b163e8ec72d3a87b9b8e2570e7ee7fe97d7092a918bc8',
+    '2af02165ef5ea1d1284b4251117eaae45faa961ec918e3f69b66903a18822387',
+    '2bf406160d06280d92412605eb397d08142736f4e17967e404dc892da278e9da',
+    '373d90d97bd3f97f0c13cf449926cfd7f1ed5f3746c3091e8dd894d60bf5eac8',
+    '3c7d6bd83dac3174923ba65f3af01f42858e267ca5b722fe2b0b3fec14e98ec2',
+    '434b502cabb7a9a36d3036a599d589537da293d8bbab224692629351a7926249',
+    '43bb50d6ba0a871088014cb204079ace4811970ce3d52b15896f6e7a88f900b7',
+    '46e9d23142762db57751b1b507e15747fe9478de504cbc4a0bffd828c39e3776',
+    '4b6957c6a184b002db80c7a4dd811d0e70866be4a4c8fffa4894e78aa132b407',
+    '4cbe1ad4cf232fb2232176e3f440f6e6fdc3ba7b1d95a99cb69116b9e379eae8',
+    '4e4e80abff30cab933b8c4ac6befc618372eb76b2cbddc337eff0b4a3a4d25b8',
+    '51eed0c17e3287996ba6006ce56de2591550ebfad46631f3a0129886967420e1',
+    '522e09779d984ae77b60036f4ecd80f0491f5f0c8cc386a0712b78a020ab62e6',
+    '5c950d4cfe1aaf9174c4358ee5df03f7e6bc556eac06a012cf6c07db154e20c4',
+    '5d8eb4e4e385b85c5c11f47111f315d5d201e04f4ef5e294763bf51036974b91',
+    '5dd5c226e944b4c3df3e8dbbbc473e72fb134f4c5b82a1968cc3cf7c1b40fe9e',
+    '638b4dbe4f3ce5b81546bef29108e8374a7293012c6189ca00f287f8c62a98a5',
+    '644c3a6e258382542a108c4dca16fae93657b6ff40238b2bb55854a125316052',
+    '71ea74ef1aa7582bcdd4ef843b3e79584ded4d16e692f3946cac4c9d61aed4f2',
+    '72f051ea66686ae004086f1ad086866f720f25896319abf3427cae101a58d985',
+    '827bbacde0dd5bfec857933dbbf642147f2afe6a9db0a543839b1b5239ca6786',
+    '83f4970aa1aeab85d01d8a976cbfd0fb3afedf391e18197e8c94c4021b3dffa1',
+    '84a20b554854c9af10ef84d308795dfae455834d1a207798292d66e19fd72c92',
+    '84fff099818dc4f5319477f0812b4341565cfb32ccf735beede734e386b8108f',
+    '85771250f0aa84727a1c01ba8926e59217ca13a7706ba03cf2ad95abbbc2e3bc',
+    '8a246b15bf185065d3f41a710f3eea0fbbe8754a8464501cf4a6d253d69c6423',
+    '8e5553ee4e95db51523640d1d03b00c8ab31dd69d787e169b0d958ef52e19a0a',
+    '92747340d922e9cda5bde17c46af8b409e47d6342f3b9c8fb058a34c6206d373',
+    '9b43c6791aebed5f7b38d91907539173aa278de88294b6422f3dd8282cd2c6e2',
+    '9e0bb9bd7ea2ec51efcdc98b432b6f0b055b2ed7973cfac9b44899d6e6c5deab',
+    'a0cf0835cb5af7bd03c56d12d846eed81c182eab36ea61c074961c115da9c8c4',
+    'a26dc4f6dea91e80d42e4736da7fe3c42f6275df9c4dca48be3ef96850192242',
+    'a4c945aea50ef321eabf8a3bcf0b8bb74288452c4638876ee4df5fb59be4a0ec',
+    'ae28c1043e79bdb95cae0e9919d4436157d14b183e24ab4572793812f3d89222',
+    'b0cf8be4e4d1d2ac5156c2298aa42edc7a74d25b7838d06e2279e94018a47f3f',
+    'b6d11705cb456768ff8271074dd8adcd78bd042a27fc205e9b52f9f945f42ea1',
+    'be478570584211521890fb65a41bded4d2bf29beb0b61ac3cc3b97f828a27b22',
+    'befde6d78ea1c996ae1d959342730220e274992097aeeae00c908a971314e6ae',
+    'bf5b9464d154ffeff57f05f90b223c1045f0754befd01a9a42c99382115e7833',
+    'd2239a7c92bc5c72a959a73ccee7727ba0966f4d88a33d71dbbc26e3f171555d',
+    'd3f9cf6e1711595b4588366a96b725fc039f72a8a28b2e4c1b630016dd2eed39',
+    'd9a9ab00bb79ce7dca7f6329ab627dcea2e53e5c16b85bf4aa8c3980b76fad57',
+    'dd73f7d1e721ef5cba95f454a3019521456c1b43b97084ad29e3e6509148d45d',
+    'eb30d55e90e1f9e5c4727d6fa2a5a8cd36ab9ae9738eb8f3faf53e2bee4861ee',
+    'ede4076aef07fd79502d14326c54ab3911558371baaf697a19d077f4f89de399',
+    'f481abe5700c6940ca996adfa9d07c9d9f07a486a7ce9cdb2e6ee0fa6450fe31',
+    'f7355ec52730c2e6ba02216da8501b4b6934cd363511e9d47ae5b97056d02703',
+    'fdf0ec118d98393a7702cf72e46fc87ad680b152f64b2aac59e093ac2d688fbb',
+  ],
+};

libs/deposits/src/lib/deposit-container.tsx

@@ -1,18 +1,14 @@
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { AsyncRendererInline } from '@vegaprotocol/ui-toolkit';
 import { DepositManager } from './deposit-manager';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { enabledAssetsProvider } from '@vegaprotocol/assets';
+import { useEnabledAssets } from '@vegaprotocol/assets';
 
 /**
  *  Fetches data required for the Deposit page
  */
 export const DepositContainer = ({ assetId }: { assetId?: string }) => {
   const { VEGA_ENV } = useEnvironment();
-  const { data, loading, error } = useDataProvider({
-    dataProvider: enabledAssetsProvider,
-    variables: undefined,
-  });
+  const { data, error, loading } = useEnabledAssets();
 
   return (
     <AsyncRendererInline data={data} loading={loading} error={error}>

libs/ui-toolkit/src/components/sparkline/sparkline.spec.tsx

@@ -1,68 +1,77 @@
 import { render, screen } from '@testing-library/react';
+
 import { Sparkline } from './sparkline';
-import type { SparklineProps } from './sparkline';
 
-describe('Sparkline', () => {
-  let props: SparklineProps = {
-    data: [],
-  };
+const props = {
+  data: [
+    1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
+    10, 11, 12,
+  ],
+  muted: true,
+};
 
-  beforeEach(() => {
-    props = {
-      data: [
-        1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8,
-        9, 10, 11, 12,
-      ],
-    };
-  });
+it('Renders an svg with a single path', () => {
+  render(<Sparkline {...props} />);
+  expect(screen.getByTestId('sparkline-svg')).toBeInTheDocument();
+  const paths = screen.getAllByTestId('sparkline-path');
+  const path = paths[0];
+  expect(path).toBeInTheDocument();
+  expect(path).toHaveAttribute('d', expect.any(String));
+  expect(path).toHaveAttribute('stroke', expect.any(String));
+  expect(path).toHaveAttribute('stroke-width', '1');
+  expect(path).toHaveAttribute('fill', 'transparent');
+});
 
-  it('Renders an svg with a single path', () => {
-    render(<Sparkline {...props} />);
-    expect(screen.getByTestId('sparkline-svg')).toBeInTheDocument();
-    const paths = screen.getAllByTestId('sparkline-path');
-    const path = paths[0];
-    expect(path).toBeInTheDocument();
-    expect(path).toHaveAttribute('d', expect.any(String));
-    expect(path).toHaveAttribute('stroke-width', '1');
-  });
+it('Requires a data prop but width and height are optional', () => {
+  render(<Sparkline {...props} />);
+  const svg = screen.getByTestId('sparkline-svg');
+  expect(svg).toHaveAttribute('width', '60');
+  expect(svg).toHaveAttribute('height', '15');
+});
 
-  it('Requires a data prop but width and height are optional', () => {
-    render(<Sparkline {...props} />);
-    const svg = screen.getByTestId('sparkline-svg');
-    expect(svg).toHaveAttribute('width', '60');
-    expect(svg).toHaveAttribute('height', '15');
-  });
+it('Renders a red line if the last value is less than the first', () => {
+  props.data[0] = 10;
+  props.data[props.data.length - 1] = 5;
+  render(<Sparkline {...props} />);
+  const paths = screen.getAllByTestId('sparkline-path');
+  const path = paths[0];
+  expect(path).toHaveClass(
+    '[vector-effect:non-scaling-stroke] stroke-market-red dark:stroke-market-red'
+  );
+});
 
-  it('Renders a red line if the last value is less than the first', () => {
-    props.data[0] = 10;
-    props.data[props.data.length - 1] = 5;
-    render(<Sparkline {...props} />);
-    const paths = screen.getAllByTestId('sparkline-path');
-    const path = paths[0];
-    expect(path).toHaveClass(
-      '[vector-effect:non-scaling-stroke] stroke-market-red dark:stroke-market-red'
-    );
-  });
+it('Renders a green line if the last value is greater than the first', () => {
+  props.data[0] = 5;
+  props.data[props.data.length - 1] = 10;
+  props.muted = true;
+  render(<Sparkline {...props} />);
+  const paths = screen.getAllByTestId('sparkline-path');
+  const path = paths[0];
+  expect(path).toHaveClass(
+    '[vector-effect:non-scaling-stroke] stroke-market-green-600 dark:stroke-market-green'
+  );
+});
 
-  it('Renders a green line if the last value is greater than the first', () => {
-    props.data[0] = 5;
-    props.data[props.data.length - 1] = 10;
-    render(<Sparkline {...props} />);
-    const paths = screen.getAllByTestId('sparkline-path');
-    const path = paths[0];
-    expect(path).toHaveClass(
-      '[vector-effect:non-scaling-stroke] stroke-market-green-600 dark:stroke-market-green'
-    );
-  });
+it('Renders a white line if the first and last values are equal', () => {
+  props.data[0] = 5;
+  props.data[props.data.length - 1] = 5;
+  render(<Sparkline {...props} />);
+  const paths = screen.getAllByTestId('sparkline-path');
+  const path = paths[0];
+  expect(path).toHaveClass(
+    '[vector-effect:non-scaling-stroke] stroke-black/40 dark:stroke-white/40'
+  );
+});
 
-  it('Renders a white line if the first and last values are equal', () => {
-    props.data[0] = 5;
-    props.data[props.data.length - 1] = 5;
-    render(<Sparkline {...props} />);
-    const paths = screen.getAllByTestId('sparkline-path');
-    const path = paths[0];
-    expect(path).toHaveClass(
-      '[vector-effect:non-scaling-stroke] stroke-black/40 dark:stroke-white/40'
-    );
-  });
+it('Renders a gray line if there are not 24 values', () => {
+  props.data = [
+    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
+    22, 23,
+  ];
+  render(<Sparkline {...props} />);
+  const paths = screen.queryAllByTestId('sparkline-path');
+  expect(paths).toHaveLength(2);
+  expect(paths[0]).toHaveClass(
+    '[vector-effect:non-scaling-stroke] stroke-black/40 dark:stroke-white/40'
+  );
 });

libs/ui-toolkit/src/components/sparkline/sparkline.stories.tsx

@@ -8,49 +8,39 @@ export default {
 
 const Template: Story = (args) => <Sparkline data={args['data']} {...args} />;
 
+export const Grey = Template.bind({});
+Grey.args = {
+  data: [
+    1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8,
+  ],
+  width: 60,
+  height: 30,
+  points: 25,
+  className: 'w-[113px]',
+};
+
 export const Equal = Template.bind({});
 Equal.args = {
   data: [
     12, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
     10, 11, 12,
   ],
-  width: 110,
+  width: 60,
   height: 30,
+  points: 25,
+  className: 'w-[113px]',
 };
 
 export const Increase = Template.bind({});
 Increase.args = {
   data: [
-    22,
-    22,
-    22, // extra values should be ignored, this should still render an increase
-    0,
-    2,
-    3,
-    4,
-    5,
-    13,
-    14,
-    15,
-    16,
-    17,
-    18,
-    19,
-    20,
-    21,
-    22,
-    23,
-    24,
-    6,
-    7,
-    8,
-    9,
-    10,
-    11,
-    12,
+    1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
+    10, 11, 12,
   ],
-  width: 110,
+  width: 60,
   height: 30,
+  points: 25,
+  className: 'w-[113px]',
 };
 
 export const Decrease = Template.bind({});
@@ -59,27 +49,8 @@ Decrease.args = {
     12, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
     10, 11, 1,
   ],
-  width: 110,
-  height: 30,
-};
-
-export const LessThan24HoursIncrease = Template.bind({});
-LessThan24HoursIncrease.args = {
-  data: [20, 21, 22, 25, 24, 24, 22, 19, 20, 22, 23, 27],
-  width: 110,
-  height: 30,
-};
-
-export const LessThan24HoursDecrease = Template.bind({});
-LessThan24HoursDecrease.args = {
-  data: [20, 21, 22, 23, 24, 6, 7, 9, 11, 13, 11, 9],
-  width: 110,
-  height: 30,
-};
-
-export const NoData = Template.bind({});
-NoData.args = {
-  data: [],
-  width: 110,
+  width: 60,
   height: 30,
+  points: 25,
+  className: 'w-[113px]',
 };

libs/ui-toolkit/src/components/sparkline/sparkline.tsx

@@ -1,25 +1,15 @@
 import { extent } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
-import { area, line } from 'd3-shape';
+import { line } from 'd3-shape';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
 
 function colorByChange(a: number, b: number) {
-  if (a < b) {
-    return 'stroke-market-green-600 dark:stroke-market-green';
-  } else if (a > b) {
-    return 'stroke-market-red dark:stroke-market-red';
-  }
-  return 'stroke-black/40 dark:stroke-white/40';
-}
-
-function shadedColor(a: number, b: number) {
-  if (a < b) {
-    return 'fill-market-green-600 dark:fill-market-green';
-  } else if (a > b) {
-    return 'fill-market-red-600 dark:fill-market-red';
-  }
-  return 'fill-black dark:fill-white';
+  return a === b
+    ? 'stroke-black/40 dark:stroke-white/40'
+    : a < b
+    ? 'stroke-market-green-600 dark:stroke-market-green'
+    : 'stroke-market-red dark:stroke-market-red';
 }
 
 export interface SparklineProps {
@@ -28,60 +18,75 @@ export interface SparklineProps {
   height?: number;
   points?: number;
   className?: string;
+  muted?: boolean;
 }
 
 export const SparklineView = ({
   data,
   width = 60,
   height = 15,
-  points = 24,
+  points = 25,
+  muted = false,
   className,
 }: SparklineProps) => {
+  // How many points are missing. If market is 12 hours old the 25 - 12
+  const preMarketLength = points - data.length;
+
+  // Create two dimensional array for sparkline points [x, y]
+  const marketData: [number, number][] = data.map((d, i) => [
+    preMarketLength + i,
+    d,
+  ]);
+  // Empty two dimensional array for gray, 'no data' line
+  let preMarketData: [number, number][] = [];
+
   // Get the extent for our y value
-  const [min, max] = extent(data, (d) => d);
+  const [min, max] = extent(marketData, (d) => d[1]);
 
   if (typeof min !== 'number' || typeof max !== 'number') {
     return null;
   }
 
-  const midValue = (min + max) / 2;
+  // Create a second set of data to render a gray line for any
+  // missing points if the market is less than 24 hours old
+  if (marketData.length < points) {
+    // Populate preMarketData with the average of our extents
+    // so that the line renders centered vertically
+    const fillValue = (min + max) / 2;
+    preMarketData = new Array(points - marketData.length)
+      .fill(fillValue)
+      .map((d: number, i) => [i, d] as [number, number]);
 
-  // Market may be less than 24hr old so padd the data array
-  // with values that is the mid value (avg of min and max).
-  // This will rendera  horizontal line until the real data shifts the line
-  const padCount = data.length < points ? points - data.length : 0;
-  const padArr = new Array(padCount).fill(midValue);
-  const trimmedData = data.slice(-points);
+    // Add the first point of or market data so that the two
+    // lines join up
+    preMarketData.push(marketData[0] as [number, number]);
+  }
 
-  // Get the last 24 values if data has more than needed
-  const lineData: [number, number][] = [...padArr, ...trimmedData].map(
-    (d, i) => {
-      return [i, d];
-    }
-  );
-
-  const xScale = scaleLinear().domain([0, points]).range([0, width]);
-  const yScale = scaleLinear().domain([min, max]).range([height, 0]);
+  const xScale = scaleLinear().domain([0, points]).range([0, 100]);
+  const yScale = scaleLinear().domain([min, max]).range([100, 0]);
 
   const lineSeries = line()
     .x((d) => xScale(d[0]))
     .y((d) => yScale(d[1]));
 
-  const areaSeries = area()
-    .x((d) => xScale(d[0]))
-    .y0(height)
-    .y1((d) => yScale(d[1]));
-
-  const firstVal = trimmedData[0];
-  const lastVal = trimmedData[trimmedData.length - 1];
-
-  // Get the color of the marketData line depending on market movement
-  const strokeClassName = colorByChange(firstVal, lastVal);
-  const areaClassName = shadedColor(firstVal, lastVal);
+  // Get the color of the marketData line
+  const [firstVal, lastVal] = [data[0], data[data.length - 1]];
+  const strokeClassName = muted
+    ? data.length >= 24
+      ? colorByChange(firstVal, lastVal)
+      : 'stroke-black/40 dark:stroke-white/40'
+    : colorByChange(firstVal, lastVal);
 
   // Create paths
-  const linePath = lineSeries(lineData);
-  const areaPath = areaSeries(lineData);
+  const preMarketCreationPath = lineSeries(preMarketData);
+  const mainPath = lineSeries(marketData);
+  const pathProps = {
+    'data-testid': 'sparkline-path',
+    className: `[vector-effect:non-scaling-stroke] ${strokeClassName}`,
+    stroke: 'strokeCurrent',
+    strokeWidth: 1,
+    fill: 'transparent',
+  };
 
   return (
     <svg
@@ -89,25 +94,13 @@ export const SparklineView = ({
       className={className}
       width={width}
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox="0 0 100 100"
       preserveAspectRatio="none"
     >
-      {linePath && (
-        <path
-          d={linePath}
-          data-testid="sparkline-path"
-          className={`[vector-effect:non-scaling-stroke] fill-transparent ${strokeClassName}`}
-          strokeWidth={1}
-        />
-      )}
-      {areaPath && (
-        <path
-          className={areaClassName}
-          fillOpacity={0.2}
-          stroke="none"
-          d={areaPath}
-        />
+      {preMarketCreationPath && (
+        <path {...pathProps} d={preMarketCreationPath} />
       )}
+      {mainPath && <path {...pathProps} d={mainPath} />}
     </svg>
   );
 };