chore: adjust the get started checkboxes slightly

apps/explorer/src/app/routes/oracles/Oracles.graphql

@@ -1,34 +1,4 @@
-fragment ExplorerOracleDataConnection on OracleSpec {
-  dataConnection {
-    edges {
-      node {
-        externalData {
-          data {
-            signers {
-              signer {
-                ... on ETHAddress {
-                  address
-                }
-                ... on PubKey {
-                  key
-                }
-              }
-            }
-            data {
-              name
-              value
-            }
-            matchedSpecIds
-            broadcastAt
-          }
-        }
-      }
-    }
-  }
-}
-
 fragment ExplorerOracleDataSource on OracleSpec {
-  ...ExplorerOracleDataConnection
   dataSourceSpec {
     spec {
       id
@@ -64,7 +34,6 @@ fragment ExplorerOracleDataSource on OracleSpec {
                   key {
                     name
                     type
-                    numberDecimalPlaces
                   }
                   conditions {
                     value
@@ -80,6 +49,38 @@ fragment ExplorerOracleDataSource on OracleSpec {
   }
 }
 
+fragment ExplorerOracleDataConnection on OracleSpec {
+  dataConnection {
+    pageInfo {
+      hasNextPage
+    }
+    edges {
+      node {
+        externalData {
+          data {
+            signers {
+              signer {
+                ... on ETHAddress {
+                  address
+                }
+                ... on PubKey {
+                  key
+                }
+              }
+            }
+            data {
+              name
+              value
+            }
+            matchedSpecIds
+            broadcastAt
+          }
+        }
+      }
+    }
+  }
+}
+
 query ExplorerOracleSpecs {
   oracleSpecsConnection(pagination: { first: 50 }) {
     pageInfo {
@@ -96,5 +97,6 @@ query ExplorerOracleSpecs {
 query ExplorerOracleSpecById($id: ID!) {
   oracleSpec(oracleSpecId: $id) {
     ...ExplorerOracleDataSource
+    ...ExplorerOracleDataConnection
   }
 }

apps/explorer/src/app/routes/oracles/__generated__/Oracles.ts

@@ -3,55 +3,24 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type ExplorerOracleDataConnectionFragment = { __typename?: 'OracleSpec', dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } };
+export type ExplorerOracleDataSourceFragment = { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } } } } } };
 
-export type ExplorerOracleDataSourceFragment = { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } };
+export type ExplorerOracleDataConnectionFragment = { __typename?: 'OracleSpec', dataConnection: { __typename?: 'OracleDataConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } };
 
 export type ExplorerOracleSpecsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type ExplorerOracleSpecsQuery = { __typename?: 'Query', oracleSpecsConnection?: { __typename?: 'OracleSpecsConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'OracleSpecEdge', node: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } } | null> | null } | null };
+export type ExplorerOracleSpecsQuery = { __typename?: 'Query', oracleSpecsConnection?: { __typename?: 'OracleSpecsConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'OracleSpecEdge', node: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } } } } } } } | null> | null } | null };
 
 export type ExplorerOracleSpecByIdQueryVariables = Types.Exact<{
   id: Types.Scalars['ID'];
 }>;
 
 
-export type ExplorerOracleSpecByIdQuery = { __typename?: 'Query', oracleSpec?: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } | null };
+export type ExplorerOracleSpecByIdQuery = { __typename?: 'Query', oracleSpec?: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } | null };
 
-export const ExplorerOracleDataConnectionFragmentDoc = gql`
-    fragment ExplorerOracleDataConnection on OracleSpec {
-  dataConnection {
-    edges {
-      node {
-        externalData {
-          data {
-            signers {
-              signer {
-                ... on ETHAddress {
-                  address
-                }
-                ... on PubKey {
-                  key
-                }
-              }
-            }
-            data {
-              name
-              value
-            }
-            matchedSpecIds
-            broadcastAt
-          }
-        }
-      }
-    }
-  }
-}
-    `;
 export const ExplorerOracleDataSourceFragmentDoc = gql`
     fragment ExplorerOracleDataSource on OracleSpec {
-  ...ExplorerOracleDataConnection
   dataSourceSpec {
     spec {
       id
@@ -87,7 +56,6 @@ export const ExplorerOracleDataSourceFragmentDoc = gql`
                   key {
                     name
                     type
-                    numberDecimalPlaces
                   }
                   conditions {
                     value
@@ -102,7 +70,40 @@ export const ExplorerOracleDataSourceFragmentDoc = gql`
     }
   }
 }
-    ${ExplorerOracleDataConnectionFragmentDoc}`;
+    `;
+export const ExplorerOracleDataConnectionFragmentDoc = gql`
+    fragment ExplorerOracleDataConnection on OracleSpec {
+  dataConnection {
+    pageInfo {
+      hasNextPage
+    }
+    edges {
+      node {
+        externalData {
+          data {
+            signers {
+              signer {
+                ... on ETHAddress {
+                  address
+                }
+                ... on PubKey {
+                  key
+                }
+              }
+            }
+            data {
+              name
+              value
+            }
+            matchedSpecIds
+            broadcastAt
+          }
+        }
+      }
+    }
+  }
+}
+    `;
 export const ExplorerOracleSpecsDocument = gql`
     query ExplorerOracleSpecs {
   oracleSpecsConnection(pagination: {first: 50}) {
@@ -148,9 +149,11 @@ export const ExplorerOracleSpecByIdDocument = gql`
     query ExplorerOracleSpecById($id: ID!) {
   oracleSpec(oracleSpecId: $id) {
     ...ExplorerOracleDataSource
+    ...ExplorerOracleDataConnection
   }
 }
-    ${ExplorerOracleDataSourceFragmentDoc}`;
+    ${ExplorerOracleDataSourceFragmentDoc}
+${ExplorerOracleDataConnectionFragmentDoc}`;
 
 /**
  * __useExplorerOracleSpecByIdQuery__

apps/explorer/src/app/routes/oracles/components/oracle-data.spec.tsx

@@ -1,23 +1,23 @@
 import { render } from '@testing-library/react';
 import { OracleData } from './oracle-data';
-import { type ExplorerOracleDataConnectionFragment } from '../__generated__/Oracles';
+import type { ExplorerOracleDataConnectionFragment } from '../__generated__/Oracles';
 
-type DataConnection = ExplorerOracleDataConnectionFragment['dataConnection'];
-
-function renderComponent(
-  data: ExplorerOracleDataConnectionFragment['dataConnection']
-) {
+function renderComponent(data: ExplorerOracleDataConnectionFragment) {
   return <OracleData data={data} />;
 }
 
 describe('Oracle Data view', () => {
   it('Renders nothing when data is null', () => {
-    const res = render(renderComponent(null as unknown as DataConnection));
+    const res = render(
+      renderComponent(null as unknown as ExplorerOracleDataConnectionFragment)
+    );
     expect(res.container).toBeEmptyDOMElement();
   });
 
   it('Renders nothing when dataConnection is empty', () => {
-    const res = render(renderComponent({} as DataConnection));
+    const res = render(
+      renderComponent({} as ExplorerOracleDataConnectionFragment)
+    );
     expect(res.container).toBeEmptyDOMElement();
   });
   it('Renders nothing when dataConnection has no edges', () => {
@@ -26,7 +26,7 @@ describe('Oracle Data view', () => {
         dataConnection: {
           edges: null,
         },
-      } as DataConnection)
+      } as ExplorerOracleDataConnectionFragment)
     );
     expect(res.container).toBeEmptyDOMElement();
   });
@@ -37,7 +37,7 @@ describe('Oracle Data view', () => {
         dataConnection: {
           edges: [],
         },
-      } as unknown as DataConnection)
+      } as unknown as ExplorerOracleDataConnectionFragment)
     );
     expect(res.container).toBeEmptyDOMElement();
   });
@@ -47,18 +47,20 @@ describe('Oracle Data view', () => {
   it('Renders details component when there is data', () => {
     const res = render(
       renderComponent({
-        edges: [
-          {
-            node: {
-              externalData: {
-                data: {
-                  broadcastAt: '2022-01-01',
+        dataConnection: {
+          edges: [
+            {
+              node: {
+                externalData: {
+                  data: {
+                    broadcastAt: '2022-01-01',
+                  },
                 },
               },
             },
-          },
-        ],
-      } as DataConnection)
+          ],
+        },
+      } as ExplorerOracleDataConnectionFragment)
     );
     expect(res.getByText('Broadcast data')).toBeInTheDocument();
   });

apps/explorer/src/app/routes/oracles/components/oracle-data.tsx

@@ -4,7 +4,7 @@ import filter from 'recursive-key-filter';
 import type { ExplorerOracleDataConnectionFragment } from '../__generated__/Oracles';
 
 interface OracleDataTypeProps {
-  data: ExplorerOracleDataConnectionFragment['dataConnection'];
+  data: ExplorerOracleDataConnectionFragment;
 }
 
 /**
@@ -14,7 +14,12 @@ interface OracleDataTypeProps {
  * that Does The Job, rather than because it's good.
  */
 export function OracleData({ data }: OracleDataTypeProps) {
-  if (!data || !data.edges?.length || data.edges.length > 1) {
+  if (
+    !data ||
+    !data.dataConnection ||
+    !data.dataConnection.edges?.length ||
+    data.dataConnection.edges.length > 1
+  ) {
     return null;
   }
 
@@ -22,7 +27,7 @@ export function OracleData({ data }: OracleDataTypeProps) {
     <details data-testid="oracle-data">
       <summary>{t('Broadcast data')}</summary>
       <ul>
-        {data.edges.map((d) => {
+        {data.dataConnection.edges.map((d) => {
           if (!d) {
             return null;
           }

apps/explorer/src/app/routes/oracles/components/oracle-markets.tsx

@@ -27,8 +27,8 @@ export function OracleMarkets({ id }: OracleMarketsProps) {
     const m = markets.find((m) => {
       const p = m.tradableInstrument.instrument.product;
       if (
-        p?.dataSourceSpecForSettlementData?.id === id ||
-        p?.dataSourceSpecForTradingTermination?.id === id
+        p.dataSourceSpecForSettlementData.id === id ||
+        p.dataSourceSpecForTradingTermination.id === id
       ) {
         return true;
       }
@@ -36,9 +36,15 @@ export function OracleMarkets({ id }: OracleMarketsProps) {
     });
 
     if (m && m.id) {
+      const type =
+        id ===
+        m.tradableInstrument.instrument.product.dataSourceSpecForSettlementData
+          .id
+          ? 'Settlement for'
+          : 'Termination for';
       return (
         <TableRow modifier="bordered">
-          <TableHeader scope="row">{getLabel(id, m)}</TableHeader>
+          <TableHeader scope="row">{type}</TableHeader>
           <TableCell modifier="bordered" data-testid={`m-${m.id}`}>
             <MarketLink id={m.id} />
           </TableCell>
@@ -55,14 +61,3 @@ export function OracleMarkets({ id }: OracleMarketsProps) {
     </TableRow>
   );
 }
-
-export function getLabel(
-  id: string,
-  m: ExplorerOracleForMarketsMarketFragment | null
-): string {
-  const settlementId =
-    m?.tradableInstrument?.instrument?.product?.dataSourceSpecForSettlementData
-      ?.id || null;
-
-  return id === settlementId ? 'Settlement for' : 'Termination for';
-}

apps/explorer/src/app/routes/oracles/components/oracle.tsx

@@ -22,7 +22,7 @@ export type SourceType =
 interface OracleDetailsProps {
   id: string;
   dataSource: ExplorerOracleDataSourceFragment;
-  dataConnection: ExplorerOracleDataConnectionFragment['dataConnection'];
+  dataConnection?: ExplorerOracleDataConnectionFragment;
   // Defaults to false. Hides the count of 'broadcasts' this oracle has seen
   showBroadcasts?: boolean;
 }
@@ -41,7 +41,8 @@ export const OracleDetails = ({
   showBroadcasts = false,
 }: OracleDetailsProps) => {
   const sourceType = dataSource.dataSourceSpec.spec.data.sourceType;
-  const reportsCount: number = dataConnection.edges?.length || 0;
+  const reportsCount: number =
+    dataConnection?.dataConnection.edges?.length || 0;
 
   return (
     <div>

apps/explorer/src/app/routes/oracles/home/index.tsx

@@ -34,15 +34,11 @@ const Oracles = () => {
               if (!id) {
                 return null;
               }
-
-              const dataConnection = o?.node.dataConnection;
-
               return (
                 <div id={id} key={id} className="mb-10">
                   <OracleDetails
                     id={id}
                     dataSource={o?.node}
-                    dataConnection={dataConnection}
                     showBroadcasts={false}
                   />
                   <details>

apps/explorer/src/app/routes/oracles/id/index.tsx

@@ -39,7 +39,7 @@ export const Oracle = () => {
             <OracleDetails
               id={id || ''}
               dataSource={data?.oracleSpec}
-              dataConnection={data?.oracleSpec.dataConnection}
+              dataConnection={data?.oracleSpec}
               showBroadcasts={true}
             />
             <details>

apps/trading/components/welcome-dialog/get-started.tsx

@@ -105,38 +105,29 @@ export const GetStarted = ({ lead }: Props) => {
         {lead && <h2>{lead}</h2>}
         <h3 className="text-lg">{t('Get started')}</h3>
         <div>
-          <ul className="list-inside -ml-5" role="list">
-            <li className="flex">
-              <div className="w-5">
-                {currentStep > OnboardingStep.ONBOARDING_WALLET_STEP && (
-                  <VegaIcon name={VegaIconNames.TICK} size={20} />
-                )}
-              </div>
-              <div className="ml-1">1. {t('Get a Vega wallet')}</div>
-            </li>
-            <li className="flex">
-              <div className="w-5">
-                {(currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP ||
-                  pubKey) && <VegaIcon name={VegaIconNames.TICK} size={20} />}
-              </div>
-              <div className="ml-1">2. {t('Connect')}</div>
-            </li>
-            <li className="flex">
-              <div className="w-5">
-                {currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP && (
-                  <VegaIcon name={VegaIconNames.TICK} size={20} />
-                )}
-              </div>
-              <div className="ml-1">3. {t('Deposit funds')}</div>
-            </li>
-            <li className="flex">
-              <div className="w-5">
-                {currentStep > OnboardingStep.ONBOARDING_ORDER_STEP && (
-                  <VegaIcon name={VegaIconNames.TICK} size={20} />
-                )}
-              </div>
-              <div className="ml-1">4. {t('Open a position')}</div>
-            </li>
+          <ul className="list-none">
+            <Step
+              step={1}
+              text={t('Get a Vega wallet')}
+              complete={currentStep > OnboardingStep.ONBOARDING_WALLET_STEP}
+            />
+            <Step
+              step={2}
+              text={t('Connect')}
+              complete={Boolean(
+                currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
+              )}
+            />
+            <Step
+              step={3}
+              text={t('Deposit funds')}
+              complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
+            />
+            <Step
+              step={4}
+              text={t('Open a position')}
+              complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
+            />
           </ul>
         </div>
         <div>
@@ -165,7 +156,7 @@ export const GetStarted = ({ lead }: Props) => {
   if (!pubKey) {
     return (
       <div className={wrapperClasses}>
-        <p className="text-sm mb-1">
+        <p className="mb-1 text-sm">
           You need a{' '}
           <ExternalLink href="https://vega.xyz/wallet">
             Vega wallet
@@ -186,3 +177,34 @@ export const GetStarted = ({ lead }: Props) => {
 
   return null;
 };
+
+const Step = ({
+  step,
+  text,
+  complete,
+}: {
+  step: number;
+  text: string;
+  complete: boolean;
+}) => {
+  return (
+    <li
+      className={classNames('flex', {
+        'text-vega-clight-200 dark:text-vega-cdark-200': complete,
+      })}
+    >
+      <div className="flex justify-center w-5">
+        {complete ? <Tick /> : <span>{step}.</span>}
+      </div>
+      <div className="ml-1">{text}</div>
+    </li>
+  );
+};
+
+const Tick = () => {
+  return (
+    <span className="relative right-[2px]">
+      <VegaIcon name={VegaIconNames.TICK} size={18} />
+    </span>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.tsx

@@ -5,7 +5,7 @@ import { VegaIconNameMap } from './vega-icon-record';
 
 export interface VegaIconProps {
   name: VegaIconNames;
-  size?: 8 | 10 | 12 | 13 | 14 | 16 | 20 | 24 | 32;
+  size?: 8 | 10 | 12 | 13 | 14 | 16 | 18 | 20 | 24 | 32;
 }
 
 export const VegaIcon = ({ size = 16, name }: VegaIconProps) => {