feat: update fields network params and add tooltip

apps/trading/client-pages/referrals/referral-statistics.tsx

@@ -27,7 +27,6 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
 import { t } from '@vegaprotocol/i18n';
-import maxBy from 'lodash/maxBy';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
@@ -103,9 +102,9 @@ export const Statistics = ({
       !isNaN(t.discountFactor) &&
       t.discountFactor === discountFactorValue
   );
-  const nextBenefitTierValue = currentBenefitTierValue
-    ? benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1)
-    : maxBy(benefitTiers, (bt) => bt.tier); // max tier number is lowest tier
+  const nextBenefitTierValue =
+    currentBenefitTierValue &&
+    benefitTiers.find((t) => t.tier === currentBenefitTierValue.tier - 1);
   const epochsValue =
     !isNaN(currentEpoch) && refereeInfo?.atEpoch
       ? currentEpoch - refereeInfo?.atEpoch
@@ -190,7 +189,7 @@ export const Statistics = ({
 
   const currentBenefitTierTile = (
     <StatTile title={t('Current tier')}>
-      {currentBenefitTierValue?.tier || 'None'}
+      {currentBenefitTierValue?.tier || '-'}
     </StatTile>
   );
   const discountFactorTile = (
@@ -205,24 +204,14 @@ export const Statistics = ({
     <StatTile title={t('Epochs in set')}>{epochsValue}</StatTile>
   );
   const nextTierVolumeTile = (
-    <StatTile
-      title={t(
-        'Volume to next tier %s',
-        nextBenefitTierValue?.tier ? `(${nextBenefitTierValue.tier})` : ''
-      )}
-    >
+    <StatTile title={t('Volume to next tier')}>
       {nextBenefitTierVolumeValue <= 0
         ? '0'
         : compactNumFormat.format(nextBenefitTierVolumeValue)}
     </StatTile>
   );
   const nextTierEpochsTile = (
-    <StatTile
-      title={t(
-        'Epochs to next tier %s',
-        nextBenefitTierValue?.tier ? `(${nextBenefitTierValue.tier})` : ''
-      )}
-    >
+    <StatTile title={t('Epochs to next tier')}>
       {nextBenefitTierEpochsValue <= 0 ? '0' : nextBenefitTierEpochsValue}
     </StatTile>
   );

apps/trading/components/fees-container/market-fees.tsx

@@ -5,8 +5,6 @@ import { t } from '@vegaprotocol/i18n';
 import { formatPercentage, getAdjustedFee } from './utils';
 import { MarketCodeCell } from '../../client-pages/markets/market-code-cell';
 import BigNumber from 'bignumber.js';
-import { useNavigateWithMeta } from '../../lib/hooks/use-market-click-handler';
-import { Links } from '../../lib/links';
 
 const feesTableColumnDefs = [
   { field: 'code', cellRenderer: 'MarketCodeCell' },
@@ -53,8 +51,6 @@ export const MarketFees = ({
   referralDiscount: number;
   volumeDiscount: number;
 }) => {
-  const navigateWithMeta = useNavigateWithMeta();
-
   const rows = compact(markets || []).map((m) => {
     const infraFee = new BigNumber(m.fees.factors.infrastructureFee);
     const makerFee = new BigNumber(m.fees.factors.makerFee);
@@ -67,7 +63,6 @@ export const MarketFees = ({
     );
 
     return {
-      id: m.id,
       code: m.tradableInstrument.instrument.code,
       productType: m.tradableInstrument.instrument.product.__typename,
       infraFee: formatPercentage(infraFee.toNumber()),
@@ -85,19 +80,10 @@ export const MarketFees = ({
       <AgGrid
         columnDefs={feesTableColumnDefs}
         rowData={rows}
-        getRowId={({ data }) => data.id}
         defaultColDef={feesTableDefaultColDef}
         domLayout="autoHeight"
         components={components}
         rowHeight={45}
-        rowClass="cursor-pointer"
-        onRowClicked={({ data, event }) => {
-          navigateWithMeta(
-            Links.MARKET(data.id),
-            // @ts-ignore metaKey and ctrlKey exist
-            event.metaKey || event.ctrlKey
-          );
-        }}
       />
     </div>
   );

apps/trading/pages/toasts-manager.tsx

@@ -1,5 +1,5 @@
 import { ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
-import { useProposalToasts } from '@vegaprotocol/proposals';
+import { useUpdateNetworkParametersToasts } from '@vegaprotocol/proposals';
 import { useVegaTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3';
@@ -7,7 +7,7 @@ import { useReadyToWithdrawalToasts } from '@vegaprotocol/withdraws';
 import { Links } from '../lib/links';
 
 export const ToastsManager = () => {
-  useProposalToasts();
+  useUpdateNetworkParametersToasts();
   useVegaTransactionToasts();
   useEthereumTransactionToasts();
   useEthereumWithdrawApprovalsToasts();

libs/proposals/src/lib/proposals-hooks/Proposal.graphql

@@ -12,15 +12,10 @@ subscription ProposalEvent($partyId: ID!) {
   }
 }
 
-fragment OnProposalFragment on Proposal {
+fragment UpdateNetworkParameterProposal on Proposal {
   id
   state
   datetime
-  rationale {
-    title
-    description
-  }
-  rejectionReason
   terms {
     enactmentDatetime
     change {
@@ -31,9 +26,9 @@ fragment OnProposalFragment on Proposal {
   }
 }
 
-subscription OnProposal {
+subscription OnUpdateNetworkParameters {
   proposals {
-    ...OnProposalFragment
+    ...UpdateNetworkParameterProposal
   }
 }
 

libs/proposals/src/lib/proposals-hooks/__generated__/Proposal.ts

@@ -13,12 +13,12 @@ export type ProposalEventSubscriptionVariables = Types.Exact<{
 
 export type ProposalEventSubscription = { __typename?: 'Subscription', proposals: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null } };
 
-export type OnProposalFragmentFragment = { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, terms: { __typename?: 'ProposalTerms', enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
+export type UpdateNetworkParameterProposalFragment = { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, datetime: any, terms: { __typename?: 'ProposalTerms', enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } };
 
-export type OnProposalSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
+export type OnUpdateNetworkParametersSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type OnProposalSubscription = { __typename?: 'Subscription', proposals: { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, terms: { __typename?: 'ProposalTerms', enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } } };
+export type OnUpdateNetworkParametersSubscription = { __typename?: 'Subscription', proposals: { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, datetime: any, terms: { __typename?: 'ProposalTerms', enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } } } };
 
 export type ProposalOfMarketQueryVariables = Types.Exact<{
   marketId: Types.Scalars['ID'];
@@ -64,16 +64,11 @@ export const ProposalEventFieldsFragmentDoc = gql`
   errorDetails
 }
     `;
-export const OnProposalFragmentFragmentDoc = gql`
-    fragment OnProposalFragment on Proposal {
+export const UpdateNetworkParameterProposalFragmentDoc = gql`
+    fragment UpdateNetworkParameterProposal on Proposal {
   id
   state
   datetime
-  rationale {
-    title
-    description
-  }
-  rejectionReason
   terms {
     enactmentDatetime
     change {
@@ -114,35 +109,35 @@ export function useProposalEventSubscription(baseOptions: Apollo.SubscriptionHoo
       }
 export type ProposalEventSubscriptionHookResult = ReturnType<typeof useProposalEventSubscription>;
 export type ProposalEventSubscriptionResult = Apollo.SubscriptionResult<ProposalEventSubscription>;
-export const OnProposalDocument = gql`
-    subscription OnProposal {
+export const OnUpdateNetworkParametersDocument = gql`
+    subscription OnUpdateNetworkParameters {
   proposals {
-    ...OnProposalFragment
+    ...UpdateNetworkParameterProposal
   }
 }
-    ${OnProposalFragmentFragmentDoc}`;
+    ${UpdateNetworkParameterProposalFragmentDoc}`;
 
 /**
- * __useOnProposalSubscription__
+ * __useOnUpdateNetworkParametersSubscription__
  *
- * To run a query within a React component, call `useOnProposalSubscription` and pass it any options that fit your needs.
- * When your component renders, `useOnProposalSubscription` returns an object from Apollo Client that contains loading, error, and data properties
+ * To run a query within a React component, call `useOnUpdateNetworkParametersSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useOnUpdateNetworkParametersSubscription` returns an object from Apollo Client that contains loading, error, and data properties
  * you can use to render your UI.
  *
  * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
  *
  * @example
- * const { data, loading, error } = useOnProposalSubscription({
+ * const { data, loading, error } = useOnUpdateNetworkParametersSubscription({
  *   variables: {
  *   },
  * });
  */
-export function useOnProposalSubscription(baseOptions?: Apollo.SubscriptionHookOptions<OnProposalSubscription, OnProposalSubscriptionVariables>) {
+export function useOnUpdateNetworkParametersSubscription(baseOptions?: Apollo.SubscriptionHookOptions<OnUpdateNetworkParametersSubscription, OnUpdateNetworkParametersSubscriptionVariables>) {
         const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useSubscription<OnProposalSubscription, OnProposalSubscriptionVariables>(OnProposalDocument, options);
+        return Apollo.useSubscription<OnUpdateNetworkParametersSubscription, OnUpdateNetworkParametersSubscriptionVariables>(OnUpdateNetworkParametersDocument, options);
       }
-export type OnProposalSubscriptionHookResult = ReturnType<typeof useOnProposalSubscription>;
-export type OnProposalSubscriptionResult = Apollo.SubscriptionResult<OnProposalSubscription>;
+export type OnUpdateNetworkParametersSubscriptionHookResult = ReturnType<typeof useOnUpdateNetworkParametersSubscription>;
+export type OnUpdateNetworkParametersSubscriptionResult = Apollo.SubscriptionResult<OnUpdateNetworkParametersSubscription>;
 export const ProposalOfMarketDocument = gql`
     query ProposalOfMarket($marketId: ID!) {
   proposal(id: $marketId) {

libs/proposals/src/lib/proposals-hooks/index.ts

@@ -3,7 +3,7 @@ export * from './use-proposal-event';
 export * from './use-vega-transaction';
 export * from './use-proposal-submit';
 export * from './use-update-proposal';
-export * from './use-proposal-toasts';
+export * from './use-update-network-paramaters-toasts';
 export * from './use-successor-market-proposal-details';
 export * from './use-new-transfer-proposal-details';
 export * from './use-cancel-transfer-proposal-details';

libs/proposals/src/lib/proposals-hooks/use-proposal-toasts.spec.tsx

@@ -1,273 +0,0 @@
-import type { MockedResponse } from '@apollo/client/testing';
-import { MockedProvider } from '@apollo/client/testing';
-import type { ProposalRejectionReason } from '@vegaprotocol/types';
-import {
-  ProposalChangeMapping,
-  ProposalState,
-  ProposalStateMapping,
-} from '@vegaprotocol/types';
-import type { ReactNode } from 'react';
-import {
-  PROPOSAL_STATES_TO_TOAST,
-  ProposalToastContent,
-  useProposalToasts,
-} from './use-proposal-toasts';
-import { useToasts } from '@vegaprotocol/ui-toolkit';
-import { waitFor, renderHook, render } from '@testing-library/react';
-import {
-  OnProposalDocument,
-  type OnProposalFragmentFragment,
-  type OnProposalSubscription,
-} from './__generated__/Proposal';
-import sample from 'lodash/sample';
-
-const renderUseProposalToasts = (mocks?: MockedResponse[]) => {
-  const wrapper = ({ children }: { children: ReactNode }) => (
-    <MockedProvider mocks={mocks}>{children}</MockedProvider>
-  );
-  return renderHook(() => useProposalToasts(), { wrapper });
-};
-
-type ProposalChange = OnProposalFragmentFragment['terms']['change'];
-
-const NEW_MARKET_CHANGE: ProposalChange = { __typename: 'NewMarket' };
-const UPDATE_MARKET_CHANGE: ProposalChange = { __typename: 'UpdateMarket' };
-const UPDATE_NETWORK_PARAMETER_CHANGE: ProposalChange = {
-  __typename: 'UpdateNetworkParameter',
-  networkParameter: {
-    __typename: 'NetworkParameter',
-    key: 'abc.def',
-    value: '123',
-  },
-};
-const NEW_ASSET_CHANGE: ProposalChange = { __typename: 'NewAsset' };
-const UPDATE_ASSET_CHANGE: ProposalChange = { __typename: 'UpdateAsset' };
-const NEW_FREEFORM_CHANGE: ProposalChange = { __typename: 'NewFreeform' };
-const NEW_TRANSFER_CHANGE: ProposalChange = { __typename: 'NewTransfer' };
-const CANCEL_TRANSFER_CHANGE: ProposalChange = { __typename: 'CancelTransfer' };
-const UPDATE_MARKET_STATE_CHANGE: ProposalChange = {
-  __typename: 'UpdateMarketState',
-};
-const NEW_SPOT_MARKET_CHANGE: ProposalChange = { __typename: 'NewSpotMarket' };
-const UPDATE_SPOT_MARKET_CHANGE: ProposalChange = {
-  __typename: 'UpdateSpotMarket',
-};
-const UPDATE_VOLUME_DISCOUNT_PROGRAM_CHANGE: ProposalChange = {
-  __typename: 'UpdateVolumeDiscountProgram',
-};
-const UPDATE_REFERRAL_PROGRAM_CHANGE: ProposalChange = {
-  __typename: 'UpdateReferralProgram',
-};
-
-const GenericToastProposals = [
-  NEW_MARKET_CHANGE,
-  UPDATE_MARKET_CHANGE,
-  NEW_ASSET_CHANGE,
-  UPDATE_ASSET_CHANGE,
-  NEW_FREEFORM_CHANGE,
-  NEW_TRANSFER_CHANGE,
-  CANCEL_TRANSFER_CHANGE,
-  UPDATE_MARKET_STATE_CHANGE,
-  NEW_SPOT_MARKET_CHANGE,
-  UPDATE_SPOT_MARKET_CHANGE,
-  UPDATE_VOLUME_DISCOUNT_PROGRAM_CHANGE,
-  UPDATE_REFERRAL_PROGRAM_CHANGE,
-];
-
-const generateProposal = (
-  title: string,
-  state: ProposalState = ProposalState.STATE_OPEN,
-  change: ProposalChange = { __typename: undefined },
-  rejectionReason: ProposalRejectionReason | null = null
-): OnProposalFragmentFragment => ({
-  __typename: 'Proposal',
-  id: Math.random().toString(),
-  datetime: Math.random().toString(),
-  rationale: {
-    title,
-    description: '',
-  },
-  rejectionReason,
-  state,
-  terms: {
-    __typename: 'ProposalTerms',
-    enactmentDatetime: '2022-12-09T14:40:38Z',
-    change,
-  },
-});
-
-const INITIAL = useToasts.getState();
-
-const clear = () => {
-  useToasts.setState(INITIAL);
-};
-
-describe('useProposalToasts', () => {
-  beforeEach(clear);
-  afterAll(clear);
-
-  it.each(PROPOSAL_STATES_TO_TOAST)(
-    'renders toast for %s proposal',
-    async (state) => {
-      const mockProposal: MockedResponse<OnProposalSubscription> = {
-        request: {
-          query: OnProposalDocument,
-        },
-        result: {
-          data: {
-            proposals: generateProposal(
-              'Things to change',
-              state,
-              NEW_MARKET_CHANGE
-            ),
-          },
-        },
-      };
-      const { result } = renderUseProposalToasts([mockProposal]);
-      expect(result.current.loading).toBe(true);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-        expect(useToasts.getState().count).toBe(1);
-      });
-    }
-  );
-
-  const IGNORE_STATES = Object.keys(ProposalState).filter((state) => {
-    return !PROPOSAL_STATES_TO_TOAST.includes(state as ProposalState);
-  }) as ProposalState[];
-  it.each(IGNORE_STATES)(
-    'does not render toast for %s proposal',
-    async (state) => {
-      const mockFailedProposal: MockedResponse<OnProposalSubscription> = {
-        request: {
-          query: OnProposalDocument,
-        },
-        result: {
-          data: {
-            proposals: generateProposal('Things to change but ignored', state),
-          },
-        },
-      };
-      const { result } = renderUseProposalToasts([mockFailedProposal]);
-      expect(result.current.loading).toBe(true);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-        expect(useToasts.getState().count).toBe(0);
-      });
-    }
-  );
-
-  it('does not render toast for empty proposal', async () => {
-    const error = console.error;
-    console.error = () => {
-      /* no op */
-    };
-    const mockEmptyProposal: MockedResponse<OnProposalSubscription> = {
-      request: {
-        query: OnProposalDocument,
-      },
-      result: {
-        data: {
-          proposals: undefined as unknown as OnProposalFragmentFragment,
-        },
-      },
-    };
-
-    const { result } = renderUseProposalToasts([mockEmptyProposal]);
-    expect(result.current.loading).toBe(true);
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-      expect(useToasts.getState().count).toBe(0);
-    });
-    console.error = error;
-  });
-
-  const allTypes: [
-    ProposalChange['__typename'],
-    ProposalChange,
-    ProposalState?
-  ][] = [...GenericToastProposals, UPDATE_NETWORK_PARAMETER_CHANGE].map(
-    (ch) => [ch.__typename, ch, sample(PROPOSAL_STATES_TO_TOAST)]
-  );
-  it.each(allTypes)(
-    'renders toast for %s proposal',
-    async (_, change, state) => {
-      const proposalData = generateProposal('Things to change', state, change);
-      const mockProposal: MockedResponse<OnProposalSubscription> = {
-        request: {
-          query: OnProposalDocument,
-        },
-        result: {
-          data: {
-            proposals: proposalData,
-          },
-        },
-      };
-      const { result } = renderUseProposalToasts([mockProposal]);
-      expect(result.current.loading).toBe(true);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-        expect(useToasts.getState().count).toBe(1);
-      });
-    }
-  );
-});
-
-describe('ProposalToastContent', () => {
-  const genericTypes: [
-    ProposalChange['__typename'],
-    ProposalChange,
-    ProposalState?
-  ][] = GenericToastProposals.map((ch) => [
-    ch.__typename,
-    ch,
-    sample(PROPOSAL_STATES_TO_TOAST),
-  ]);
-  it.each(genericTypes)(
-    'renders generic toast content for %s',
-    async (_, change, state) => {
-      const proposalData = generateProposal('Things to change', state, change);
-      const { container } = render(
-        <ProposalToastContent proposal={proposalData} />
-      );
-      const title = container.querySelector(
-        '[data-testid="proposal-toast-title"]'
-      );
-      const rationale = container.querySelector(
-        '[data-testid="proposal-toast-rationale-title"]'
-      );
-      const expectedChangeName = change.__typename
-        ? ProposalChangeMapping[change.__typename]
-        : '';
-      const expectedState =
-        ProposalStateMapping[proposalData.state].toLocaleLowerCase();
-      expect(title).toHaveTextContent(
-        `${expectedChangeName} proposal ${expectedState}`
-      );
-      expect(rationale).toHaveTextContent('Things to change');
-    }
-  );
-
-  it('renders specific content for UpdateNetworkParameter proposal', () => {
-    const proposalData = generateProposal(
-      'Things to change',
-      ProposalState.STATE_OPEN,
-      UPDATE_NETWORK_PARAMETER_CHANGE
-    );
-    const { container } = render(
-      <ProposalToastContent proposal={proposalData} />
-    );
-    const title = container.querySelector(
-      '[data-testid="proposal-toast-title"]'
-    );
-    const rationale = container.querySelector(
-      '[data-testid="proposal-toast-rationale-title"]'
-    );
-    const param = container.querySelector(
-      '[data-testid="proposal-toast-network-param"]'
-    );
-    expect(title).toHaveTextContent('Update network parameter proposal open');
-    expect(rationale).toBe(null);
-    expect(param).toHaveTextContent('Update abc.def to 123');
-  });
-});

libs/proposals/src/lib/proposals-hooks/use-proposal-toasts.tsx

@@ -1,136 +0,0 @@
-import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
-import { getDateTimeFormat } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import {
-  ProposalChangeMapping,
-  ProposalRejectionReasonMapping,
-  ProposalStateMapping,
-} from '@vegaprotocol/types';
-import { ProposalState } from '@vegaprotocol/types';
-import type { Toast } from '@vegaprotocol/ui-toolkit';
-import { ToastHeading } from '@vegaprotocol/ui-toolkit';
-import { useToasts } from '@vegaprotocol/ui-toolkit';
-import { ExternalLink, Intent } from '@vegaprotocol/ui-toolkit';
-import { useCallback } from 'react';
-import {
-  useOnProposalSubscription,
-  type OnProposalFragmentFragment,
-} from './__generated__/Proposal';
-
-export const PROPOSAL_STATES_TO_TOAST = [
-  ProposalState.STATE_DECLINED,
-  ProposalState.STATE_ENACTED,
-  ProposalState.STATE_OPEN,
-  ProposalState.STATE_PASSED,
-];
-const CLOSE_AFTER = 0;
-type Proposal = OnProposalFragmentFragment;
-
-const ProposalDetails = ({ proposal }: { proposal: Proposal }) => {
-  const change = proposal.terms.change;
-  switch (change.__typename) {
-    case 'UpdateNetworkParameter':
-      return <UpdateNetworkParameterDetails proposal={proposal} />;
-    default:
-      // generic details: rationale title and rejection reason if rejected
-      return (
-        <>
-          {proposal.rationale.title ? (
-            <p data-testid="proposal-toast-rationale-title" className="italic">
-              {proposal.rationale.title}
-            </p>
-          ) : null}
-          {proposal.state === ProposalState.STATE_REJECTED &&
-          proposal.rejectionReason ? (
-            <p data-testid="proposal-toast-rejection-reason">
-              {t('Rejection reason:')}{' '}
-              {ProposalRejectionReasonMapping[proposal.rejectionReason]}
-            </p>
-          ) : null}
-        </>
-      );
-  }
-};
-
-const UpdateNetworkParameterDetails = ({
-  proposal,
-}: {
-  proposal: Proposal;
-}) => {
-  const change = proposal.terms.change;
-  if (change.__typename !== 'UpdateNetworkParameter') return null;
-  return (
-    <p data-testid="proposal-toast-network-param" className="italic">
-      '{t('Update ')}
-      <span className="break-all">{change.networkParameter.key}</span>
-      {t(' to ')}
-      <span>{change.networkParameter.value}</span>'
-    </p>
-  );
-};
-
-export const ProposalToastContent = ({ proposal }: { proposal: Proposal }) => {
-  const tokenLink = useLinks(DApp.Governance);
-  const change = proposal.terms.change;
-
-  // Generates toast's title,
-  // e.g. Update market proposal enacted, New transfer proposal open, ...
-  const title = t('%s proposal %s', [
-    change.__typename ? ProposalChangeMapping[change.__typename] : 'Unknown',
-    ProposalStateMapping[proposal.state].toLowerCase(),
-  ]);
-
-  const enactment = Date.parse(proposal.terms.enactmentDatetime);
-
-  return (
-    <div>
-      <ToastHeading data-testid="proposal-toast-title">{title}</ToastHeading>
-      <ProposalDetails proposal={proposal} />
-      {!isNaN(enactment) && (
-        <p>
-          {t('Enactment date:')} {getDateTimeFormat().format(enactment)}
-        </p>
-      )}
-      <p>
-        <ExternalLink
-          href={tokenLink(TOKEN_PROPOSAL).replace(':id', proposal?.id || '')}
-        >
-          {t('View proposal details')}
-        </ExternalLink>
-      </p>
-    </div>
-  );
-};
-
-export const useProposalToasts = () => {
-  const { setToast, remove } = useToasts((store) => ({
-    setToast: store.setToast,
-    remove: store.remove,
-  }));
-
-  const fromProposal = useCallback(
-    (proposal: Proposal): Toast => {
-      const id = `proposal-toast-${proposal.id}`;
-      return {
-        id,
-        intent: Intent.Warning,
-        content: <ProposalToastContent proposal={proposal} />,
-        onClose: () => {
-          remove(id);
-        },
-        closeAfter: CLOSE_AFTER,
-      };
-    },
-    [remove]
-  );
-
-  return useOnProposalSubscription({
-    onData: ({ data }) => {
-      const proposal = data.data?.proposals;
-      if (!proposal || !proposal.terms.change.__typename) return;
-      if (PROPOSAL_STATES_TO_TOAST.includes(proposal.state)) {
-        setToast(fromProposal(proposal));
-      }
-    },
-  });
-};

libs/proposals/src/lib/proposals-hooks/use-update-network-paramaters-toasts.tsx

@@ -0,0 +1,96 @@
+import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import type { UpdateNetworkParameter } from '@vegaprotocol/types';
+import { ProposalStateMapping } from '@vegaprotocol/types';
+import { ProposalState } from '@vegaprotocol/types';
+import type { Toast } from '@vegaprotocol/ui-toolkit';
+import { ToastHeading } from '@vegaprotocol/ui-toolkit';
+import { useToasts } from '@vegaprotocol/ui-toolkit';
+import { ExternalLink, Intent } from '@vegaprotocol/ui-toolkit';
+import { useCallback } from 'react';
+import type { UpdateNetworkParameterProposalFragment } from './__generated__/Proposal';
+import { useOnUpdateNetworkParametersSubscription } from './__generated__/Proposal';
+
+export const PROPOSAL_STATES_TO_TOAST = [
+  ProposalState.STATE_DECLINED,
+  ProposalState.STATE_ENACTED,
+  ProposalState.STATE_OPEN,
+  ProposalState.STATE_PASSED,
+];
+const CLOSE_AFTER = 0;
+type Proposal = UpdateNetworkParameterProposalFragment;
+
+const UpdateNetworkParameterToastContent = ({
+  proposal,
+}: {
+  proposal: Proposal;
+}) => {
+  const tokenLink = useLinks(DApp.Governance);
+  const change = proposal.terms.change as UpdateNetworkParameter;
+  const title = t('Network change proposal %s').replace(
+    '%s',
+    ProposalStateMapping[proposal.state].toLowerCase()
+  );
+  const enactment = Date.parse(proposal.terms.enactmentDatetime);
+  return (
+    <div>
+      <ToastHeading>{title}</ToastHeading>
+      <p className="italic">
+        '{t('Update ')}
+        <span className="break-all">{change.networkParameter.key}</span>
+        {t(' to ')}
+        <span>{change.networkParameter.value}</span>'
+      </p>
+      {!isNaN(enactment) && (
+        <p>
+          {t('Enactment date:')} {getDateTimeFormat().format(enactment)}
+        </p>
+      )}
+      <p>
+        <ExternalLink
+          href={tokenLink(TOKEN_PROPOSAL).replace(':id', proposal?.id || '')}
+        >
+          {t('View proposal details')}
+        </ExternalLink>
+      </p>
+    </div>
+  );
+};
+
+export const useUpdateNetworkParametersToasts = () => {
+  const { setToast, remove } = useToasts((store) => ({
+    setToast: store.setToast,
+    remove: store.remove,
+  }));
+
+  const fromProposal = useCallback(
+    (proposal: Proposal): Toast => {
+      const id = `update-network-param-proposal-${proposal.id}`;
+      return {
+        id: `update-network-param-proposal-${proposal.id}`,
+        intent: Intent.Warning,
+        content: <UpdateNetworkParameterToastContent proposal={proposal} />,
+        onClose: () => {
+          remove(id);
+        },
+        closeAfter: CLOSE_AFTER,
+      };
+    },
+    [remove]
+  );
+
+  return useOnUpdateNetworkParametersSubscription({
+    onData: ({ data }) => {
+      // note proposals is poorly named, it is actually a single proposal
+      const proposal = data.data?.proposals;
+      if (!proposal) return;
+      if (proposal.terms.change.__typename !== 'UpdateNetworkParameter') return;
+
+      // if one of the following states show a toast
+      if (PROPOSAL_STATES_TO_TOAST.includes(proposal.state)) {
+        setToast(fromProposal(proposal));
+      }
+    },
+  });
+};

libs/proposals/src/lib/proposals-hooks/use-update-network-parameters-toasts.spec.tsx

@@ -0,0 +1,168 @@
+import merge from 'lodash/merge';
+import type { MockedResponse } from '@apollo/client/testing';
+import { MockedProvider } from '@apollo/client/testing';
+import { ProposalState } from '@vegaprotocol/types';
+import type { ReactNode } from 'react';
+import {
+  PROPOSAL_STATES_TO_TOAST,
+  useUpdateNetworkParametersToasts,
+} from './use-update-network-paramaters-toasts';
+import type {
+  UpdateNetworkParameterProposalFragment,
+  OnUpdateNetworkParametersSubscription,
+} from './__generated__/Proposal';
+import { OnUpdateNetworkParametersDocument } from './__generated__/Proposal';
+import { useToasts } from '@vegaprotocol/ui-toolkit';
+import { waitFor, renderHook } from '@testing-library/react';
+
+const render = (mocks?: MockedResponse[]) => {
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <MockedProvider mocks={mocks}>{children}</MockedProvider>
+  );
+  return renderHook(() => useUpdateNetworkParametersToasts(), { wrapper });
+};
+
+const generateUpdateNetworkParametersProposal = (
+  key: string,
+  value: string,
+  state: ProposalState = ProposalState.STATE_OPEN
+): UpdateNetworkParameterProposalFragment => ({
+  __typename: 'Proposal',
+  id: Math.random().toString(),
+  datetime: Math.random().toString(),
+  state,
+  terms: {
+    __typename: 'ProposalTerms',
+    enactmentDatetime: '2022-12-09T14:40:38Z',
+    change: {
+      __typename: 'UpdateNetworkParameter',
+      networkParameter: {
+        __typename: 'NetworkParameter',
+        key,
+        value,
+      },
+    },
+  },
+});
+
+const INITIAL = useToasts.getState();
+
+const clear = () => {
+  useToasts.setState(INITIAL);
+};
+
+describe('useUpdateNetworkParametersToasts', () => {
+  beforeEach(clear);
+  afterAll(clear);
+
+  it.each(PROPOSAL_STATES_TO_TOAST)(
+    'toasts for %s network param proposals',
+    async (state) => {
+      const mockOpenProposal: MockedResponse<OnUpdateNetworkParametersSubscription> =
+        {
+          request: {
+            query: OnUpdateNetworkParametersDocument,
+          },
+          result: {
+            data: {
+              proposals: generateUpdateNetworkParametersProposal(
+                'abc.def',
+                '123.456',
+                state
+              ),
+            },
+          },
+        };
+      const { result } = render([mockOpenProposal]);
+      expect(result.current.loading).toBe(true);
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+        expect(useToasts.getState().count).toBe(1);
+      });
+    }
+  );
+
+  const IGNORE_STATES = Object.keys(ProposalState).filter((state) => {
+    return !PROPOSAL_STATES_TO_TOAST.includes(state as ProposalState);
+  }) as ProposalState[];
+  it.each(IGNORE_STATES)('does not toast for %s proposals', async (state) => {
+    const mockFailedProposal: MockedResponse<OnUpdateNetworkParametersSubscription> =
+      {
+        request: {
+          query: OnUpdateNetworkParametersDocument,
+        },
+        result: {
+          data: {
+            proposals: generateUpdateNetworkParametersProposal(
+              'abc.def',
+              '123.456',
+              state
+            ),
+          },
+        },
+      };
+    const { result } = render([mockFailedProposal]);
+    expect(result.current.loading).toBe(true);
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(useToasts.getState().count).toBe(0);
+    });
+  });
+
+  it('does not return toast for empty propsal', async () => {
+    const error = console.error;
+    console.error = () => {
+      /* no op */
+    };
+    const mockEmptyProposal: MockedResponse<OnUpdateNetworkParametersSubscription> =
+      {
+        request: {
+          query: OnUpdateNetworkParametersDocument,
+        },
+        result: {
+          data: {
+            proposals:
+              undefined as unknown as UpdateNetworkParameterProposalFragment,
+          },
+        },
+      };
+
+    const { result } = render([mockEmptyProposal]);
+    expect(result.current.loading).toBe(true);
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(useToasts.getState().count).toBe(0);
+    });
+    console.error = error;
+  });
+
+  it('does not return toast for wrong proposal type', async () => {
+    const wrongProposalType = merge(
+      generateUpdateNetworkParametersProposal('a', 'b'),
+      {
+        terms: {
+          change: {
+            __typename: 'NewMarket',
+          },
+        },
+      }
+    );
+    const mockWrongProposalType: MockedResponse<OnUpdateNetworkParametersSubscription> =
+      {
+        request: {
+          query: OnUpdateNetworkParametersDocument,
+        },
+        result: {
+          data: {
+            proposals: wrongProposalType,
+          },
+        },
+      };
+    const { result } = render([mockWrongProposalType]);
+    expect(result.current.loading).toBe(true);
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+      expect(useToasts.getState().count).toBe(0);
+    });
+  });
+});

libs/types/src/__generated__/types.ts

@@ -3387,8 +3387,6 @@ export type Party = {
   transfersConnection?: Maybe<TransferConnection>;
   /** The current reward vesting summary of the party for the last epoch */
   vestingBalancesSummary: PartyVestingBalancesSummary;
-  /** The current statistics about a party's vesting rewards for the last epoch */
-  vestingStats?: Maybe<PartyVestingStats>;
   /** All votes on proposals in the Vega network by the given party */
   votesConnection?: Maybe<ProposalVoteConnection>;
   /** The list of all withdrawals initiated by the party */
@@ -3504,7 +3502,6 @@ export type PartytradesConnectionArgs = {
 /** Represents a party on Vega, could be an ethereum wallet address in the future */
 export type PartytransfersConnectionArgs = {
   direction?: InputMaybe<TransferDirection>;
-  isReward?: InputMaybe<Scalars['Boolean']>;
   pagination?: InputMaybe<Pagination>;
 };
 
@@ -3619,15 +3616,6 @@ export type PartyVestingBalancesSummary = {
   vestingBalances?: Maybe<Array<PartyVestingBalance>>;
 };
 
-/** Statistics about a party's vesting rewards */
-export type PartyVestingStats = {
-  __typename?: 'PartyVestingStats';
-  /** Epoch for which the statistics are valid */
-  epochSeq: Scalars['Int'];
-  /** The reward bonus multiplier */
-  rewardBonusMultiplier: Scalars['String'];
-};
-
 /** Create an order linked to an index rather than a price */
 export type PeggedOrder = {
   __typename?: 'PeggedOrder';
@@ -4917,7 +4905,6 @@ export type QuerytransferArgs = {
 /** Queries allow a caller to read data and filter data via GraphQL. */
 export type QuerytransfersConnectionArgs = {
   direction?: InputMaybe<TransferDirection>;
-  isReward?: InputMaybe<Scalars['Boolean']>;
   pagination?: InputMaybe<Pagination>;
   partyId?: InputMaybe<Scalars['ID']>;
 };
@@ -5094,8 +5081,6 @@ export type ReferralSetStats = {
   rewardsFactorMultiplier: Scalars['String'];
   /** The multiplier applied to the referral reward factor when calculating referral rewards due to the referrer. */
   rewardsMultiplier: Scalars['String'];
-  /** Indicates if the referral set was eligible to be part of the referral program. */
-  wasEligible: Scalars['Boolean'];
 };
 
 /** Connection type for retrieving cursor-based paginated referral set statistics information */
@@ -6117,31 +6102,11 @@ export enum TransferDirection {
 export type TransferEdge = {
   __typename?: 'TransferEdge';
   cursor: Scalars['String'];
-  node: TransferNode;
-};
-
-/** A transfer fee record */
-export type TransferFee = {
-  __typename?: 'TransferFee';
-  /** The fee amount */
-  amount: Scalars['String'];
-  /** The epoch when this fee was paid */
-  epoch: Scalars['Int'];
-  /** Transfer ID of the transfer for which the fee was paid */
-  transferId: Scalars['ID'];
+  node: Transfer;
 };
 
 export type TransferKind = OneOffGovernanceTransfer | OneOffTransfer | RecurringGovernanceTransfer | RecurringTransfer;
 
-/** A transfer record with the fee payments associated with the transfer */
-export type TransferNode = {
-  __typename?: 'TransferNode';
-  /** The list of fee payments made */
-  fees?: Maybe<Array<Maybe<TransferFee>>>;
-  /** The transfer record */
-  transfer: Transfer;
-};
-
 export type TransferResponse = {
   __typename?: 'TransferResponse';
   /** The balances of accounts involved in the transfer */

libs/types/src/global-types-mappings.ts

@@ -3,7 +3,6 @@ import type {
   GovernanceTransferKind,
   GovernanceTransferType,
   PeggedReference,
-  ProposalChange,
 } from './__generated__/types';
 import type { AccountType } from './__generated__/types';
 import type {
@@ -300,29 +299,6 @@ export const OrderTypeMapping: {
   TYPE_NETWORK: 'Network',
 };
 
-/**
- * Proposal change type mapping
- */
-export const ProposalChangeMapping: Record<
-  NonNullable<ProposalChange['__typename']>,
-  string
-> = {
-  NewMarket: 'New market',
-  UpdateMarket: 'Update market',
-  UpdateNetworkParameter: 'Update network parameter',
-  NewAsset: 'New asset',
-  UpdateAsset: 'Update asset',
-  /* cspell:disable-next-line */
-  NewFreeform: 'New free-form',
-  NewTransfer: 'New transfer',
-  CancelTransfer: 'Cancel transfer',
-  UpdateMarketState: 'Update market state',
-  NewSpotMarket: 'New spot market',
-  UpdateSpotMarket: 'Update spot market',
-  UpdateVolumeDiscountProgram: 'Update volume discount program',
-  UpdateReferralProgram: 'Update referral program',
-};
-
 /**
  * Reason for the proposal being rejected by the core node
  */

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';
-  } else if (a > b) {
-    return '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>
   );
 };