chore: small adjustments to make layouts more responsive

Co-authored-by: maciek <maciek@vegaprotocol.io>
Co-authored-by: Madalina Raicu <madalina@raygroup.uk>

.github/workflows/console-test-run.yml

@@ -1,5 +1,8 @@
 name: (CI) Console tests
 
+env:
+  VEGA_VERSION: v0.72.14
+
 on:
   workflow_call:
     inputs:
@@ -11,7 +14,7 @@ jobs:
   run-tests:
     name: run-tests
     runs-on: console-test
-    timeout-minutes: 20
+    timeout-minutes: 40
     steps:
       #----------------------------------------------
       #       check-out frontend-monorepo
@@ -67,23 +70,39 @@ jobs:
           repository: vegaprotocol/console-test
           path: './console-test'
       #----------------------------------------------
-      # install dependencies if cache does not exist
+      #       install dependencies
       #----------------------------------------------
       - name: Install dependencies
         working-directory: ./console-test
-        if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true'
         run: poetry install --no-interaction --no-root
       #----------------------------------------------
-      # install vega binaries
+      #       find vega binaries path
+      #----------------------------------------------
+      - name: Find vega binaries path
+        id: vega_bin_path
+        working-directory: ./console-test
+        run: echo path=$(poetry run python -c "import vega_sim; print(vega_sim.vega_bin_path)") >> $GITHUB_OUTPUT
+      #----------------------------------------------
+      #       vega binaries cache
+      #----------------------------------------------
+      - name: Vega binaries cache
+        uses: actions/cache@v3
+        id: vega_binaries_cache
+        with:
+          path: ${{ steps.vega_bin_path.outputs.path }}
+          key: ${{ runner.os }}-vega-binaries-${{ env.VEGA_VERSION }}
+      #----------------------------------------------
+      #       install vega binaries
       #----------------------------------------------
       - name: Install vega binaries
         working-directory: ./console-test
-        run: poetry run python -m vega_sim.tools.load_binaries --force
+        if: steps.vega_binaries_cache.outputs.cache-hit != 'true'
+        run: poetry run python -m vega_sim.tools.load_binaries --force --version $VEGA_VERSION
       #----------------------------------------------
       # install playwright
       #----------------------------------------------
       - name: install playwright
-        run: poetry run playwright install
+        run: poetry run playwright install --with-deps chromium
         working-directory: ./console-test
       #----------------------------------------------
       # run tests

.github/workflows/publish-dist.yml

@@ -155,10 +155,10 @@ jobs:
       - name: Sanity check docker image
         run: |
           echo "Check ipfs-hash"
-          docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local cat /ipfs-hash
-          docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local cat /ipfs-hash > ${{ matrix.app }}-ipfs-hash
+          docker run --rm --entrypoint /bin/sh ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local -c 'cat /ipfs-hash'
+          docker run --rm --entrypoint /bin/sh ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local -c 'cat /ipfs-hash' > ${{ matrix.app }}-ipfs-hash
           echo "List html directory"
-          docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local sh -c 'apk add --update tree; tree /usr/share/nginx/html'
+          docker run --rm --entrypoint /bin/sh ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local -c 'apk add --update tree; tree /usr/share/nginx/html'
 
       - name: Publish dist as docker image (ghcr)
         uses: docker/build-push-action@v3

README.md

@@ -113,6 +113,20 @@ In order to run a container on port 3000:
 docker run -p 3000:80 [TAG]
 ```
 
+On top of that there are two possible scenarios for running docker image - using nginx server (default) of ipfs daemon.
+
+to run ipfs on port 3000:
+
+```bash
+docker run -p 3000:80 [TAG] ipfs
+```
+
+to run nginx on port 3000:
+
+```bash
+docker run -p 3000:80 [TAG]
+```
+
 ## Build instructions
 
 The [`docker`](./docker) subfolder has some docker configurations for easily setting up your own hosted version of Console either for the web, or ready for pinning on IPFS.
@@ -150,7 +164,7 @@ As a prerequisite you need to perform build of `dist` directory and move its con
 You can build any of the containers locally with the following command:
 
 ```bash
-docker build --dockerfile docker/node-outside-docker.Dockerfile . --tag=[TAG]
+docker build -f docker/node-outside-docker.Dockerfile . --tag=[TAG]
 ```
 
 ### Verifying ipfs-hash of existing current application version

apps/explorer/src/app/components/proposals/proposals-table.tsx

@@ -33,7 +33,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
   const { params } = useNetworkParams([
     NetworkParams.governance_proposal_market_requiredMajority,
   ]);
-  const tokenLink = useLinks(DApp.Token);
+  const tokenLink = useLinks(DApp.Governance);
   const requiredMajorityPercentage = useMemo(() => {
     const requiredMajority =
       params?.governance_proposal_market_requiredMajority ?? 1;

apps/explorer/src/app/components/txs/details/proposal/signature-bundle/bundle-signers.tsx

@@ -35,7 +35,7 @@ export const BundleSigners = ({
   tx,
   id,
 }: BundleSignersProps) => {
-  const tokenLink = useLinks(DApp.Token);
+  const tokenLink = useLinks(DApp.Governance);
 
   const bridgeFunction: BridgeFunction =
     tx?.changes?.erc20 && 'contractAddress' in tx.changes.erc20

apps/explorer/src/app/routes/validators/validators-page.tsx

@@ -139,7 +139,7 @@ export const ValidatorsPage = () => {
   const [vegaDialog, setVegaDialog] = useState<boolean>(false);
   const [tmDialog, setTmDialog] = useState<boolean>(false);
 
-  const tokenLink = useLinks(DApp.Token);
+  const tokenLink = useLinks(DApp.Governance);
 
   return (
     <>

apps/governance-e2e/src/integration/flow/staking-flow.cy.ts

@@ -212,7 +212,7 @@ context(
         closeStakingDialog();
         navigateTo(navigation.validators);
         cy.get(`[row-id="${0}"]`)
-          .eq(1)
+          .first()
           .within(() => {
             cy.getByTestId(stakeValidatorListTotalStake)
               .should('have.text', '3,002.00')
@@ -222,7 +222,7 @@ context(
               .and('be.visible');
           });
         cy.get(`[row-id="${1}"]`)
-          .eq(1)
+          .first()
           .within(() => {
             cy.getByTestId(stakeValidatorListTotalStake)
               .scrollIntoView()

apps/trading-e2e/src/integration/deposit.cy.ts

@@ -104,7 +104,7 @@ describe('deposit actions', { tags: '@smoke' }, () => {
     cy.visit('/#/markets/market-1');
   });
 
-  it('Deposit to trade is visible', () => {
+  it.skip('Deposit to trade is visible', () => {
     cy.getByTestId('Collateral').click();
     cy.get('[row-id="asset-id"]').contains('tEURO').should('be.visible');
     cy.contains('[data-testid="deposit"]', 'Deposit').should('be.visible');

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -1,256 +0,0 @@
-import { MarketTradingModeMapping } from '@vegaprotocol/types';
-import { MarketState } from '@vegaprotocol/types';
-import compact from 'lodash/compact';
-
-const accordionContent = 'accordion-content';
-const blockExplorerLink = 'block-explorer-link';
-const dialogClose = 'dialog-close';
-const dialogContent = 'dialog-content';
-const externalLink = 'external-link';
-const githubLink = 'github-link';
-const liquidityLink = 'view-liquidity-link';
-const marketInfoBtn = 'Info';
-const marketTitle = 'accordion-title';
-const providerName = 'provider-name';
-const row = 'key-value-table-row';
-const verifiedProofs = 'verified-proofs';
-
-describe('market info is displayed', { tags: '@smoke' }, () => {
-  beforeEach(() => {
-    cy.mockTradingPage();
-  });
-
-  before(() => {
-    cy.setOnBoardingViewed();
-    cy.mockTradingPage(MarketState.STATE_ACTIVE);
-    cy.mockSubscription();
-    cy.visit('/#/markets/market-0');
-    cy.wait('@Markets');
-    cy.getByTestId(marketInfoBtn).click();
-    cy.wait('@MarketInfo');
-  });
-
-  it('current fees displayed', () => {
-    // 6002-MDET-101
-    cy.getByTestId(marketTitle).contains('Current fees').click();
-    validateMarketDataRow(0, 'Maker Fee', '0.02%');
-    validateMarketDataRow(1, 'Infrastructure Fee', '0.05%');
-    validateMarketDataRow(2, 'Liquidity Fee', '1.00%');
-    validateMarketDataRow(3, 'Total Fees', '1.07%');
-  });
-
-  it('market price', () => {
-    // 6002-MDET-102
-    cy.getByTestId(marketTitle).contains('Market price').click();
-    validateMarketDataRow(0, 'Mark Price', '46,126.90058');
-    validateMarketDataRow(1, 'Best Bid Price', '44,126.90058 ');
-    validateMarketDataRow(2, 'Best Offer Price', '48,126.90058 ');
-    validateMarketDataRow(3, 'Quote Unit', 'BTC');
-  });
-
-  it('market volume displayed', () => {
-    // 6002-MDET-103
-    cy.getByTestId(marketTitle).contains('Market volume').click();
-    validateMarketDataRow(1, 'Open Interest', '-');
-    validateMarketDataRow(2, 'Best Bid Volume', '1');
-    validateMarketDataRow(3, 'Best Offer Volume', '3');
-    validateMarketDataRow(4, 'Best Static Bid Volume', '2');
-    validateMarketDataRow(5, 'Best Static Offer Volume', '4');
-  });
-
-  it('insurance pool displayed', () => {
-    // 6002-MDET-104
-    cy.getByTestId(marketTitle).contains('Insurance pool').click();
-    validateMarketDataRow(0, 'Balance', '0');
-  });
-
-  it('key details displayed', () => {
-    // 6002-MDET-201
-    cy.getByTestId(marketTitle).contains('Key details').click();
-
-    const rows: [string, string][] = compact([
-      ['Name', 'BTCUSD Monthly (30 Jun 2022)'],
-      ['Market ID', 'market-0'],
-      Cypress.env('NX_SUCCESSOR_MARKETS') && ['Parent Market ID', 'PARENT-A'],
-      Cypress.env('NX_SUCCESSOR_MARKETS') && [
-        'Insurance Pool Fraction',
-        '0.75',
-      ],
-      ['Trading Mode', MarketTradingModeMapping.TRADING_MODE_CONTINUOUS],
-      ['Market Decimal Places', '5'],
-      ['Position Decimal Places', '0'],
-      ['Settlement Asset Decimal Places', '5'],
-    ]);
-
-    for (const rowNumber in rows) {
-      const [name, value] = rows[rowNumber];
-      validateMarketDataRow(Number(rowNumber), name, value);
-    }
-  });
-
-  it('instrument displayed', () => {
-    // 6002-MDET-202
-    cy.getByTestId(marketTitle).contains('Instrument').click();
-
-    validateMarketDataRow(0, 'Market Name', 'BTCUSD Monthly (30 Jun 2022)');
-    validateMarketDataRow(1, 'Code', 'BTCUSD.MF21');
-    validateMarketDataRow(2, 'Product Type', 'Future');
-    validateMarketDataRow(3, 'Quote Name', 'BTC');
-  });
-
-  it('oracle displayed', () => {
-    // 6002-MDET-203
-    cy.getByTestId(marketTitle).contains('Oracle').click();
-
-    cy.getByTestId(accordionContent)
-      .getByTestId(providerName)
-      .and('contain', 'Another oracle');
-
-    cy.getByTestId(providerName).should('be.visible').click();
-    cy.getByTestId(dialogContent)
-      .eq(1)
-      .within(() => {
-        cy.getByTestId(blockExplorerLink).contains('Block explorer');
-        cy.getByTestId(githubLink).contains('Oracle repository');
-      });
-    cy.getByTestId(dialogClose).click();
-
-    cy.getByTestId(accordionContent)
-      .getByTestId(verifiedProofs)
-      .and('contain', '1');
-  });
-
-  it('settlement asset displayed', () => {
-    // 6002-MDET-206
-    cy.getByTestId(marketTitle).contains('Settlement asset').click();
-    cy.window().then((win) => {
-      cy.stub(win, 'prompt').returns('DISABLED WINDOW PROMPT');
-    });
-    validateMarketDataRow(0, 'ID', 'asset-id');
-    validateMarketDataRow(1, 'Type', 'ERC20');
-    validateMarketDataRow(2, 'Name', 'Euro');
-    validateMarketDataRow(3, 'Symbol', 'tEURO');
-    validateMarketDataRow(4, 'Decimals', '5');
-    validateMarketDataRow(5, 'Quantum', '1');
-    validateMarketDataRow(6, 'Status', 'Enabled');
-    validateMarketDataRow(7, 'Contract address', '0x0158…78a4');
-    validateMarketDataRow(8, 'Withdrawal threshold', '0.0005');
-    validateMarketDataRow(9, 'Lifetime limit', '1,230');
-    validateMarketDataRow(10, 'Infrastructure fee account balance', '0.00001');
-    validateMarketDataRow(11, 'Global reward pool account balance', '0.00002');
-  });
-
-  it('metadata displayed', () => {
-    // 6002-MDET-207
-    cy.getByTestId(marketTitle).contains('Metadata').click();
-
-    validateMarketDataRow(0, 'Formerly', '076BB86A5AA41E3E');
-    validateMarketDataRow(1, 'Base', 'BTC');
-    validateMarketDataRow(2, 'Quote', 'USD');
-    validateMarketDataRow(3, 'Class', 'fx/crypto');
-    validateMarketDataRow(4, 'Sector', 'crypto');
-  });
-
-  it('risk model displayed', () => {
-    // 6002-MDET-208
-    cy.getByTestId(marketTitle).contains('Risk model').click();
-    validateMarketDataRow(0, 'Tau', '0.0001140771161');
-    validateMarketDataRow(1, 'Risk Aversion Parameter', '0.01');
-  });
-
-  it('risk parameters displayed', () => {
-    // 6002-MDET-209
-    cy.getByTestId(marketTitle).contains('Risk parameters').click();
-    validateMarketDataRow(0, 'R', '0.016');
-    validateMarketDataRow(1, 'Sigma', '0.3');
-  });
-
-  it('risk factors displayed', () => {
-    // 6002-MDET-210
-    cy.getByTestId(marketTitle).contains('Risk factors').click();
-
-    validateMarketDataRow(0, 'Short', '0.008571790367285281');
-    validateMarketDataRow(1, 'Long', '0.008508132993273576');
-  });
-
-  it('price monitoring bounds displayed', () => {
-    // 6002-MDET-211
-    cy.getByTestId(marketTitle).contains('Price monitoring bounds 1').click();
-    cy.get('p.col-span-1').contains('99.99999% probability price bounds');
-    cy.get('p.col-span-1').contains('Within 43,200 seconds');
-    validateMarketDataRow(0, 'Highest Price', '7.97323 ');
-    validateMarketDataRow(1, 'Lowest Price', '6.54701 ');
-  });
-
-  it('liquidity monitoring parameters displayed', () => {
-    // 6002-MDET-212
-    cy.getByTestId(marketTitle)
-      .contains('Liquidity monitoring parameters')
-      .click();
-
-    validateMarketDataRow(0, 'Triggering Ratio', '0.7');
-    validateMarketDataRow(1, 'Time Window', '3,600');
-    validateMarketDataRow(2, 'Scaling Factor', '10');
-  });
-
-  it('liquidity displayed', () => {
-    // 6002-MDET-213
-    cy.getByTestId(marketTitle)
-      .contains(/Liquidity(?! m)/)
-      .click();
-
-    validateMarketDataRow(0, 'Target Stake', '10.00 tBTC');
-    validateMarketDataRow(1, 'Supplied Stake', '0.01 tBTC');
-    validateMarketDataRow(2, 'Market Value Proxy', '20.00 tBTC');
-    cy.getByTestId(liquidityLink).should(
-      'have.text',
-      'View liquidity provision table'
-    );
-  });
-
-  it('liquidity price range displayed', () => {
-    // 6002-MDET-214
-    cy.getByTestId(marketTitle).contains('Liquidity price range').click();
-
-    validateMarketDataRow(0, 'Liquidity Price Range', '2.00% of mid price');
-    validateMarketDataRow(1, 'Lowest Price', '45,204.362 BTC');
-    validateMarketDataRow(2, 'Highest Price', '47,049.438 BTC');
-  });
-
-  it('proposal displayed', () => {
-    // 6002-MDET-301
-    cy.getByTestId(marketTitle).contains('Proposal').click();
-
-    cy.getByTestId(accordionContent)
-      .find(`[data-testid="${externalLink}"]`)
-      .first()
-      .should('have.text', 'View governance proposal')
-      .and('have.attr', 'href')
-      .and('contain', '/proposals/market-0');
-    cy.getByTestId(accordionContent)
-      .find(`[data-testid="${externalLink}"]`)
-      .eq(1)
-      .should('have.text', 'Propose a change to market')
-      .and('have.attr', 'href')
-      .and('contain', '/proposals/propose/update-market');
-  });
-
-  afterEach('close toggle', () => {
-    cy.get('[data-state="open"]').then((tab) => {
-      if (tab) tab.find('button').trigger('click');
-    });
-  });
-
-  function validateMarketDataRow(
-    rowNumber: number,
-    name: string,
-    value: string
-  ) {
-    cy.getByTestId(row)
-      .eq(rowNumber)
-      .within(() => {
-        cy.get('dt').should('contain.text', name);
-        cy.get('dd').should('contain.text', value);
-      });
-  }
-});

apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts

@@ -24,9 +24,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
 
   beforeEach(() => {
     cy.mockTradingPage();
-    cy.getByTestId('deal-ticket-fee-margin-required').within(() => {
-      cy.get('button').click();
-    });
+    cy.getByTestId('deal-ticket-fee-margin-required').click();
   });
 
   describe('limit order', () => {
@@ -111,6 +109,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
           'Total margin available100.01 tDAI'
         );
       });
+      cy.getByTestId('deal-ticket-fee-margin-required').click();
     });
 
     it('must have current margin allocation', () => {
@@ -120,6 +119,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
           'Current margin allocation'
         );
       });
+      cy.getByTestId('deal-ticket-fee-margin-required').click();
     });
 
     it('should open usage breakdown dialog when clicked on current margin allocation', () => {
@@ -128,6 +128,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       });
       cy.getByTestId('usage-breakdown').should('exist');
       cy.getByTestId('dialog-close').click();
+      cy.getByTestId('deal-ticket-fee-margin-required').click();
     });
   });
 });

apps/trading-e2e/src/integration/trading-trades.cy.ts

@@ -86,8 +86,8 @@ describe('trades', { tags: '@smoke' }, () => {
   });
 
   it('copy price to deal ticket form', () => {
-    cy.getByTestId('Order').click();
     // 6005-THIS-007
+    cy.getByTestId('order-type-Limit').click();
     cy.get(colIdPrice).last().should('be.visible').click();
     cy.getByTestId('order-price').should('have.value', '171.16898');
   });

apps/trading-e2e/src/integration/wallet-vega.cy.ts

@@ -10,10 +10,10 @@ const dialogContent = 'dialog-content';
 describe('connect vega wallet', { tags: '@smoke', testIsolation: true }, () => {
   beforeEach(() => {
     // Using portfolio page as it requires vega wallet connection
-    cy.visit('/#/portfolio');
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.setOnBoardingViewed();
+    cy.visit('/#/portfolio');
     cy.get('[data-testid="pathname-/portfolio"]').should('exist');
   });
 

apps/trading/.env

@@ -16,6 +16,7 @@ NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-fairground
+NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true

apps/trading/.env.mainnet

@@ -19,7 +19,7 @@ NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/m
 
 
 # TAG name of the current app version - TODO: bump to the latest upon release
-NX_APP_VERSION=v0.21.1-core-0.72.14
+NX_APP_VERSION=v0.21.2-core-0.72.14
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true

apps/trading/client-pages/deposit/deposit.tsx

@@ -1,18 +1,58 @@
 import { DepositContainer } from '@vegaprotocol/deposits';
-import { GetStarted } from '../../components/welcome-dialog';
 import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
+import { GetStartedCheckList } from '../../components/welcome-dialog';
+import {
+  useGetOnboardingStep,
+  useOnboardingStore,
+  OnboardingStep,
+} from '../../components/welcome-dialog/use-get-onboarding-step';
+import { Links, Routes } from '../../pages/client-router';
+import classNames from 'classnames';
 
 export const Deposit = () => {
   return (
-    <div className="py-16 px-8 flex w-full justify-center">
-      <div className="lg:min-w-[700px] min-w-[300px] max-w-[700px]">
-        <h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
-          {t('Deposit')}
-        </h1>
-        <div className="mt-10">
-          <DepositContainer />
-          <GetStarted />
-        </div>
+    <div className="max-w-[600px] px-4 py-8 mx-auto lg:px-8">
+      <h1 className="mb-6 text-4xl uppercase xl:text-5xl font-alpha calt">
+        {t('Deposit')}
+      </h1>
+      <div className="flex flex-col gap-6">
+        <DepositContainer />
+        <DepositGetStarted />
+      </div>
+    </div>
+  );
+};
+
+const DepositGetStarted = () => {
+  const onboardingDismissed = useOnboardingStore((store) => store.dismissed);
+  const dismiss = useOnboardingStore((store) => store.dismiss);
+  const step = useGetOnboardingStep();
+  const wrapperClasses = classNames(
+    'flex flex-col py-4 px-6 gap-4 rounded',
+    'bg-vega-blue-300 dark:bg-vega-blue-700',
+    'border border-vega-blue-350 dark:border-vega-blue-650'
+  );
+
+  // Dont show unless still onboarding
+  if (onboardingDismissed) {
+    return null;
+  }
+
+  return (
+    <div className="pt-6 border-t border-default">
+      <div className={wrapperClasses}>
+        <h3 className="text-lg">{t('Get started')}</h3>
+        <GetStartedCheckList />
+        {step > OnboardingStep.ONBOARDING_DEPOSIT_STEP && (
+          <TradingAnchorButton
+            href={Links[Routes.HOME]()}
+            onClick={() => dismiss()}
+            intent={Intent.Info}
+          >
+            {t('Start trading')}
+          </TradingAnchorButton>
+        )}
       </div>
     </div>
   );

apps/trading/client-pages/home/home.tsx

@@ -1,20 +1,16 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { marketsWithDataProvider } from '@vegaprotocol/markets';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
+import { useTopTradedMarkets } from '../../lib/hooks/use-top-traded-markets';
 
+// The home pages only purpose is to redirect to the users last market,
+// the top traded if they are new, or fall back to the list of markets.
+// Thats why we just render a loader here
 export const Home = () => {
   const navigate = useNavigate();
-  // The default market selected in the platform behind the overlay
-  // should be the oldest market that is currently trading in continuous mode(i.e. not in auction).
-  const { data, error, loading } = useDataProvider({
-    dataProvider: marketsWithDataProvider,
-    variables: undefined,
-  });
-  const update = useGlobalStore((store) => store.update);
+  const { data } = useTopTradedMarkets();
   const marketId = useGlobalStore((store) => store.marketId);
 
   useEffect(() => {
@@ -32,12 +28,11 @@ export const Home = () => {
         navigate(Links[Routes.MARKETS]());
       }
     }
-  }, [marketId, data, navigate, update]);
+  }, [marketId, data, navigate]);
 
   return (
-    <AsyncRenderer data={data} loading={loading} error={error}>
-      {/* Render a loading and error state but we will redirect if markets are found */}
-      {null}
-    </AsyncRenderer>
+    <Splash>
+      <Loader />
+    </Splash>
   );
 };

apps/trading/client-pages/market/market.tsx

@@ -11,6 +11,7 @@ import { TradePanels } from './trade-panels';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import { ViewType, useSidebar } from '../../components/sidebar';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
   return markPrice && decimalPlaces
@@ -58,7 +59,9 @@ const TitleUpdater = ({
 export const MarketPage = () => {
   const { marketId } = useParams();
   const navigate = useNavigate();
-  const { init, view, setView } = useSidebar();
+  const currentRouteId = useGetCurrentRouteId();
+  const { setViews, getView } = useSidebar();
+  const view = getView(currentRouteId);
   const { screenSize } = useScreenDimensions();
   const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
   const update = useGlobalStore((store) => store.update);
@@ -69,15 +72,14 @@ export const MarketPage = () => {
   useEffect(() => {
     if (data?.id && data.id !== lastMarketId) {
       update({ marketId: data.id });
-      // make sidebar open on market id change
-      setView({ type: ViewType.Order });
     }
+  }, [update, lastMarketId, data?.id]);
 
-    // make sidebar open on deal ticket by default
-    if (view === null) {
-      setView({ type: ViewType.Order });
+  useEffect(() => {
+    if (largeScreen && view === undefined) {
+      setViews({ type: ViewType.Order }, currentRouteId);
     }
-  }, [update, lastMarketId, data?.id, setView, init, view]);
+  }, [setViews, view, currentRouteId, largeScreen]);
 
   const tradeView = useMemo(() => {
     if (largeScreen) {

apps/trading/client-pages/market/trade-grid.tsx

@@ -56,6 +56,7 @@ const MainGrid = memo(
                 <Tabs storageKey="console-trade-grid-main-left">
                   <Tab
                     id="chart"
+                    overflowHidden
                     name={t('Chart')}
                     menu={<TradingViews.candles.menu />}
                   >
@@ -72,7 +73,7 @@ const MainGrid = memo(
             </ResizableGridPanel>
             <ResizableGridPanel
               minSize={200}
-              preferredSize={sizesMiddle[1] || 300}
+              preferredSize={sizesMiddle[1] || 275}
             >
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-right">
@@ -180,7 +181,7 @@ const TradeGridChild = ({ children }: TradeGridChildProps) => {
         {({ width, height }) => (
           <div
             style={{ width, height }}
-            className="border border-default rounded-sm"
+            className="border rounded-sm border-default"
           >
             {children}
           </div>

apps/trading/client-pages/markets/markets-page.tsx

@@ -21,8 +21,8 @@ export const MarketsPage = () => {
     updateTitle: store.updateTitle,
   }));
 
-  const tokenLink = useLinks(DApp.Token);
-  const externalLink = tokenLink(TOKEN_NEW_MARKET_PROPOSAL);
+  const governanceLink = useLinks(DApp.Governance);
+  const externalLink = governanceLink(TOKEN_NEW_MARKET_PROPOSAL);
 
   useEffect(() => {
     updateTitle(titlefy(['Markets']));

apps/trading/client-pages/portfolio/portfolio.tsx

@@ -23,6 +23,7 @@ import { ViewType, useSidebar } from '../../components/sidebar';
 import { AccountsMenu } from '../../components/accounts-menu';
 import { DepositsMenu } from '../../components/deposits-menu';
 import { WithdrawalsMenu } from '../../components/withdrawals-menu';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -37,7 +38,10 @@ const WithdrawalsIndicator = () => {
 };
 
 export const Portfolio = () => {
-  const { init, view, setView } = useSidebar();
+  const currentRouteId = useGetCurrentRouteId();
+  const { getView, setViews } = useSidebar();
+  const view = getView(currentRouteId);
+
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
   }));
@@ -48,10 +52,10 @@ export const Portfolio = () => {
 
   // Make transfer sidebar open by default
   useEffect(() => {
-    if (init && view === null) {
-      setView({ type: ViewType.Transfer });
+    if (view === undefined) {
+      setViews({ type: ViewType.Transfer }, currentRouteId);
     }
-  }, [init, view, setView]);
+  }, [view, setViews, currentRouteId]);
 
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
   const wrapperClasses = 'p-0.5 h-full max-h-full flex flex-col';

apps/trading/client-pages/referrals/apply-code-form.tsx

@@ -0,0 +1,83 @@
+import { Input, InputError } from '@vegaprotocol/ui-toolkit';
+import type { FieldValues } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import classNames from 'classnames';
+import { useSearchParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Button } from './buttons';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+
+export const ApplyCodeForm = () => {
+  const { isReadOnly, pubKey, sendTx } = useVegaWallet();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    setError,
+  } = useForm();
+
+  const [params] = useSearchParams();
+  useEffect(() => {
+    const code = params.get('code');
+    if (code) setValue('code', code);
+  }, [params, setValue]);
+
+  const onSubmit = ({ code }: FieldValues) => {
+    if (isReadOnly || !pubKey || !code || code.length === 0) {
+      return;
+    }
+
+    sendTx(pubKey, {
+      applyReferralCode: {
+        id: code as string,
+      },
+    })
+      .then((res) => {
+        // TODO: Do something with response
+      })
+      .catch((err) => {
+        setError('code', {
+          type: 'required',
+          message: 'Your code has been rejected',
+        });
+      });
+  };
+
+  return (
+    <div className="mx-auto lg:w-1/2">
+      <h3 className="mb-5 text-xl text-center uppercase calt">
+        Apply a referral code
+      </h3>
+      <p className="mb-6 text-center">Enter a referral code</p>
+      <form
+        className={classNames('w-full flex flex-col gap-3', {
+          'animate-shake': Boolean(errors.code),
+        })}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <label className="flex-grow">
+          <span className="block mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
+            Your referral code
+          </span>
+          <Input
+            hasError={Boolean(errors.code)}
+            {...register('code', {
+              required: 'You have to provide a code to apply it.',
+            })}
+          />
+        </label>
+        <Button
+          disabled={isReadOnly || !pubKey}
+          className="w-full"
+          type="submit"
+        >
+          Apply
+        </Button>
+      </form>
+      {errors.code && (
+        <InputError>{errors.code.message?.toString()}</InputError>
+      )}
+    </div>
+  );
+};

apps/trading/client-pages/referrals/buttons.tsx

@@ -0,0 +1,83 @@
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
+import type { ComponentProps, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { NavLink } from 'react-router-dom';
+
+type RainbowButtonProps = {
+  variant?: 'full' | 'border';
+};
+
+export const RainbowButton = ({
+  variant = 'full',
+  children,
+  className,
+  ...props
+}: RainbowButtonProps & HTMLAttributes<HTMLButtonElement>) => (
+  <button
+    className={classNames(
+      'bg-rainbow hover:bg-none hover:bg-vega-pink-500 rounded-lg overflow-hidden',
+      {
+        'px-5 py-3 text-white': variant === 'full',
+        'p-[0.125rem]': variant === 'border',
+      },
+      className
+    )}
+    {...props}
+  >
+    <div
+      className={classNames({
+        'bg-white dark:bg-vega-cdark-900 text-black dark:text-white px-5 py-3 rounded-[0.35rem] overflow-hidden':
+          variant === 'border',
+      })}
+    >
+      {children}
+    </div>
+  </button>
+);
+
+const RAINBOW_TAB_STYLE = classNames(
+  'inline-block',
+  'bg-vega-clight-500 dark:bg-vega-cdark-500 hover:bg-vega-clight-400 dark:hover:bg-vega-cdark-400',
+  'data-[state="active"]:text-white data-[state="active"]:bg-rainbow data-[state="active"]:hover:bg-none data-[state="active"]:hover:bg-vega-pink-500 dark:data-[state="active"]:hover:bg-vega-pink-500',
+  '[&.active]:text-white [&.active]:bg-rainbow [&.active]:hover:bg-none [&.active]:hover:bg-vega-pink-500 dark:[&.active]:hover:bg-vega-pink-500',
+  'px-5 py-3',
+  'first:rounded-tl-lg last:rounded-tr-lg'
+);
+
+export const RainbowTabButton = forwardRef<
+  HTMLButtonElement,
+  HTMLAttributes<HTMLButtonElement>
+>(({ children, ...props }, ref) => (
+  <button ref={ref} className={RAINBOW_TAB_STYLE} {...props}>
+    {children}
+  </button>
+));
+RainbowTabButton.displayName = 'RainbowTabButton';
+
+export const RainbowTabLink = ({
+  to,
+  children,
+  ...props
+}: ComponentProps<typeof NavLink>) => (
+  <NavLink to={to} className={RAINBOW_TAB_STYLE} {...props}>
+    {children}
+  </NavLink>
+);
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ComponentProps<typeof TradingButton>
+>(({ children, intent, type, ...props }, ref) => {
+  return (
+    <TradingButton
+      ref={ref}
+      intent={intent || type === 'submit' ? Intent.Primary : Intent.None}
+      type={type}
+      {...props}
+    >
+      {children}
+    </TradingButton>
+  );
+});
+Button.displayName = 'TradingButton';

apps/trading/client-pages/referrals/constants.ts

@@ -0,0 +1,6 @@
+export const BORDER_COLOR = 'border-vega-clight-500 dark:border-vega-cdark-500';
+export const GRADIENT =
+  'bg-gradient-to-b from-vega-clight-800 dark:from-vega-cdark-800 to-transparent';
+
+export const SKY_BACKGROUND =
+  'bg-[url(/assets/sky-light.png)] dark:bg-[url(/assets/sky-dark.png)] bg-[40%_0px] bg-[length:1440px] bg-no-repeat';

apps/trading/client-pages/referrals/create-code-form.tsx

@@ -0,0 +1,61 @@
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import { RainbowButton } from './buttons';
+import { useState } from 'react';
+import classNames from 'classnames';
+
+export const CreateCodeForm = () => {
+  const [err, setErr] = useState<boolean | null>(null);
+  const openWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
+  const { isReadOnly, pubKey, sendTx } = useVegaWallet();
+  const onSubmit = () => {
+    if (isReadOnly || !pubKey) {
+      setErr(true);
+    } else {
+      setErr(false);
+      sendTx(pubKey, {
+        createReferralSet: {
+          isTeam: false,
+        },
+      })
+        .then((res) => {
+          // TODO: Do something with response
+        })
+        .catch((err) => {
+          // TODO: Do something with rejection
+        });
+    }
+  };
+
+  return (
+    <div className="mx-auto lg:w-1/2">
+      <h3 className="mb-5 text-xl text-center uppercase calt">
+        Create a referral code
+      </h3>
+      <p className="mb-6 text-center">
+        Generate a referral code to share with your friends and start earning
+        commission.
+      </p>
+      {pubKey ? (
+        <div className="text-center">
+          <RainbowButton
+            className={classNames({
+              'animate-shake': err,
+            })}
+            variant="border"
+            onClick={() => onSubmit()}
+          >
+            Create a referral code
+          </RainbowButton>
+        </div>
+      ) : (
+        <div className="text-center">
+          <RainbowButton variant="border" onClick={() => openWalletDialog()}>
+            Connect wallet
+          </RainbowButton>
+        </div>
+      )}
+    </div>
+  );
+};

apps/trading/client-pages/referrals/error-boundary.tsx

@@ -0,0 +1,46 @@
+import { isRouteErrorResponse, useNavigate, useRouteError } from 'react-router';
+import { RainbowButton } from './buttons';
+import { AnimatedDudeWithWire } from './graphics/dude';
+import { LayoutWithSky } from './layout';
+
+export const ErrorBoundary = () => {
+  const error = useRouteError();
+  const navigate = useNavigate();
+
+  const title = isRouteErrorResponse(error)
+    ? `${error.status} ${error.statusText}`
+    : 'Something went wrong';
+
+  const code = isRouteErrorResponse(error) ? error.status : 0;
+
+  const messages: Record<number, string> = {
+    0: 'An unknown error occurred.',
+    404: "The page you're looking for doesn't exists.",
+  };
+
+  return (
+    <LayoutWithSky className="pt-32">
+      <div
+        aria-hidden
+        className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
+      >
+        <AnimatedDudeWithWire className="animate-spin" />
+      </div>
+      <h1 className="text-6xl font-alpha calt mb-10">{title}</h1>
+
+      {Object.keys(messages).includes(code.toString()) ? (
+        <p className="text-lg mb-10">{messages[code]}</p>
+      ) : null}
+
+      <p className="text-lg mb-10">
+        <RainbowButton
+          onClick={() => navigate('..')}
+          variant="border"
+          className="text-xs"
+        >
+          Go back and try again
+        </RainbowButton>
+      </p>
+    </LayoutWithSky>
+  );
+};

apps/trading/client-pages/referrals/graphics/dude.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+export const Dude = ({ className }: HTMLAttributes<SVGElement>) => {
+  return (
+    <svg
+      width="41"
+      height="47"
+      viewBox="0 0 41 47"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M21.1895 0.298767L5.08827 27.4101L8.96133 29.7103L4.36099 37.4564L8.23404 39.7566L12.8344 32.0105L16.7074 34.3107L12.1071 42.0568L15.9801 44.3569L20.5805 36.6108L24.4535 38.911L40.5547 11.7996L21.1895 0.298767Z"
+        className="fill-black dark:fill-white"
+      />
+      <path
+        d="M35.9346 15.1683L20.4424 5.96765L14.3086 16.2958L29.8008 25.4965L35.9346 15.1683Z"
+        className="fill-white dark:fill-black"
+      />
+      <path
+        d="M25.646 17.7895L23.064 16.2561L21.5305 18.8381L24.1126 20.3716L25.646 17.7895Z"
+        className="fill-black dark:fill-white"
+      />
+      <path
+        d="M29.7612 16.7412L27.1792 15.2077L25.6458 17.7898L28.2278 19.3232L29.7612 16.7412Z"
+        className="fill-black dark:fill-white"
+      />
+      <path
+        d="M33.877 15.6925L31.2949 14.159L29.7615 16.7411L32.3435 18.2745L33.877 15.6925Z"
+        className="fill-black dark:fill-white"
+      />
+      <path
+        d="M29.0342 26.7874L26.4521 25.2539L24.9187 27.836L27.5007 29.3694L29.0342 26.7874Z"
+        fill="#FF077F"
+      />
+    </svg>
+  );
+};
+
+export const Wire = ({ className }: HTMLAttributes<SVGElement>) => {
+  return (
+    <svg
+      width="157"
+      height="88"
+      viewBox="0 0 157 88"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M109.398 6.12235C127.37 -3.81898 146.791 1.45045 153.465 14.307C160.138 27.1636 154.195 43.9948 140.438 52.1164C126.68 60.238 105.767 54.9998 84.9212 43.464C64.0752 31.9281 32.2412 6.42016 18.8175 24.185C6.90871 40.719 41.9332 68.4495 29.2664 82.7049C23.187 88.4974 11.1379 88.2645 0.968295 80.3398"
+        className="stroke-black dark:stroke-white"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+};
+
+export const AnimatedDudeWithWire = ({ className }: { className?: string }) => (
+  <div className="relative">
+    <Wire className="absolute top-[25px]" />
+    <Dude
+      className={classNames(
+        'absolute left-[96px] animate-[wave_20s_ease-in-out_infinite]',
+        className
+      )}
+    />
+  </div>
+);

apps/trading/client-pages/referrals/how-it-works-table.tsx

@@ -0,0 +1,52 @@
+import { Table } from './table';
+
+export const HowItWorksTable = () => (
+  <Table
+    className="bg-none bg-vega-clight-800 dark:bg-vega-cdark-800"
+    noHeader
+    noCollapse
+    columns={[{ name: 'number', className: 'px-0 pl-5' }, { name: 'step' }]}
+    data={[
+      {
+        number: (
+          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+            1
+          </span>
+        ),
+        step: 'Referrers generate a code assigned to their key via an on chain transaction',
+      },
+      {
+        number: (
+          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+            2
+          </span>
+        ),
+        step: 'Anyone with the referral link can apply it to their key(s) of choice via an on chain transaction',
+      },
+      {
+        number: (
+          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+            3
+          </span>
+        ),
+        step: 'Discounts are applied automatically during trading based on the key(s) used',
+      },
+      {
+        number: (
+          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+            4
+          </span>
+        ),
+        step: 'Referrers earn commission based on a percentage of the taker fees their referees pay',
+      },
+      {
+        number: (
+          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+            5
+          </span>
+        ),
+        step: 'The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee',
+      },
+    ]}
+  ></Table>
+);

apps/trading/client-pages/referrals/landing-banner.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { AnimatedDudeWithWire } from './graphics/dude';
+
+export const LandingBanner = () => {
+  return (
+    <div className={classNames('relative mb-20')}>
+      <div className="">
+        <div
+          aria-hidden
+          className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
+        >
+          <AnimatedDudeWithWire />
+        </div>
+        <div className="pt-32 sm:w-[50%]">
+          <h1 className="text-6xl font-alpha calt mb-10">
+            Earn commission & stake rewards
+          </h1>
+          <p className="text-lg mb-10">
+            Invite friends and earn commission in the form of Vega rewards from
+            the trading fees they pay. Stake those rewards to earn multipliers
+            on future rewards.
+          </p>
+          <p className="text-lg">
+            Any friends that join using the code will receive discounts off
+            trading fees.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/trading/client-pages/referrals/layout.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+import { SKY_BACKGROUND } from './constants';
+import { Outlet } from 'react-router-dom';
+
+export const Layout = ({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={classNames(
+        'max-w-[1440px]',
+        'mx-auto px-4 md:px-32 lg:px-16 pb-32',
+        'relative z-0',
+        'h-full overflow-auto',
+        className
+      )}
+      {...props}
+    >
+      {children || <Outlet />}
+    </div>
+  );
+};
+
+export const LayoutWithSky = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div className={classNames('h-full', SKY_BACKGROUND)}>
+      <Layout className={className} {...props} />
+    </div>
+  );
+};

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

@@ -0,0 +1,79 @@
+import { Tile } from './tile';
+import {
+  CopyWithTooltip,
+  Input,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import { Button } from './buttons';
+import { Tag } from './tag';
+
+export const ReferralStatistics = () => {
+  return (
+    <div className="grid grid-cols-1 grid-rows-1 gap-5">
+      <div className="grid lg:grid-cols-3 grid-rows-3 lg:grid-rows-1 gap-5">
+        <Tile>
+          <h3 className="mb-1 text-4xl text-center">3</h3>
+          <p className="mb-3 text-sm text-center text-vega-clight-100 dark:text-vega-cdark-100">
+            Your referral tier
+          </p>
+          <Tag className="mx-auto" color="purple">
+            10,000 until Tier 2
+          </Tag>
+        </Tile>
+        <Tile>
+          <h3 className="mb-1 text-4xl text-center">0.1%</h3>
+          <p className="mb-3 text-sm text-center text-vega-clight-100 dark:text-vega-cdark-100">
+            Your commission
+          </p>
+          <Tag className="mx-auto" color="purple">
+            10,000 until 0.5%x
+          </Tag>
+        </Tile>
+        <Tile variant="rainbow">
+          <h3 className="mb-1 text-lg calt">Your referral code</h3>
+          <p className="mb-3 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
+            Share this code with friends
+          </p>
+          <div className="flex gap-2">
+            <Input size={1} readOnly value="1234567890" />
+            <CopyWithTooltip text="1234567890">
+              <Button
+                className="text-sm no-underline"
+                icon={<VegaIcon name={VegaIconNames.COPY} />}
+              >
+                <span>Copy</span>
+              </Button>
+            </CopyWithTooltip>
+          </div>
+        </Tile>
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-4 grid-rows-1 gap-5">
+        <Tile className="py-3">
+          <h3 className="mb-1 text-2xl text-center">10,000</h3>
+          <p className="text-sm text-center text-vega-clight-100 dark:text-vega-cdark-100">
+            Your total trading volume
+          </p>
+        </Tile>
+        <Tile className="py-3">
+          <h3 className="mb-1 text-2xl text-center">7</h3>
+          <p className="text-sm text-center text-vega-clight-100 dark:text-vega-cdark-100">
+            Total traders referred
+          </p>
+        </Tile>
+        <Tile className="py-3">
+          <h3 className="mb-1 text-2xl text-center">0.1%</h3>
+          <p className="text-sm text-center text-vega-clight-100 dark:text-vega-cdark-100">
+            Maximum trader discount
+          </p>
+        </Tile>
+        <Tile className="py-3">
+          <h3 className="mb-1 text-2xl text-center">10,000</h3>
+          <p className="text-sm text-center text-vega-clight-100 dark:text-vega-cdark-100">
+            Your commission (last 30d)
+          </p>
+        </Tile>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,148 @@
+import {
+  TradingAnchorButton,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
+import { HowItWorksTable } from './how-it-works-table';
+import { LandingBanner } from './landing-banner';
+import { TiersTable } from './tiers-table';
+import { BORDER_COLOR, GRADIENT } from './constants';
+
+import { RainbowTabLink } from './buttons';
+import { Outlet } from 'react-router-dom';
+import { Tag } from './tag';
+import { Routes } from '../../pages/client-router';
+
+export const Referrals = () => {
+  return (
+    <>
+      <LandingBanner />
+      <div>
+        <div className="flex justify-center">
+          <RainbowTabLink end to={Routes.REFERRALS}>
+            Your referrals
+          </RainbowTabLink>
+          <RainbowTabLink to={Routes.REFERRALS_CREATE_CODE}>
+            Your referrals
+          </RainbowTabLink>
+          <RainbowTabLink to={Routes.REFERRALS_APPLY_CODE}>
+            Apply a code
+          </RainbowTabLink>
+        </div>
+        <div className="py-16 border-t border-b border-vega-cdark-500">
+          <Outlet />
+        </div>
+      </div>
+      <div className="flex flex-row items-baseline justify-between mt-10 mb-5">
+        <h2 className="text-2xl">Referral tiers</h2>
+        <span className="text-base">
+          <span className="text-vega-clight-200 dark:text-vega-cdark-200">
+            Program ends:
+          </span>{' '}
+          16 epochs
+        </span>
+      </div>
+      <div className="mb-20">
+        <TiersTable />
+      </div>
+
+      <div className="flex flex-row items-baseline justify-between mb-5">
+        <h2 className="text-2xl">Staking multipliers</h2>
+      </div>
+      <div className="flex flex-col mb-20 jjustify-items-stretch md:flex-row gap-5">
+        <div
+          className={classNames(
+            'overflow-hidden',
+            'border rounded-md w-full',
+            BORDER_COLOR
+          )}
+        >
+          <div aria-hidden>
+            <img
+              src="/1x.png"
+              alt="1x multiplier"
+              width={768}
+              height={400}
+              className="w-full"
+            />
+          </div>
+          <div className={classNames('p-3', GRADIENT)}>
+            <h3 className="mb-3 text-xl">Tradestarter</h3>
+            <p className="text-base text-vega-clight-100 dark:text-vega-cdark-100">
+              Stake a minimum of 100 $VEGA tokens
+            </p>
+            <Tag color="green">Reward multiplier 1x</Tag>
+          </div>
+        </div>
+
+        <div
+          className={classNames(
+            'overflow-hidden',
+            'border rounded-md w-full',
+            BORDER_COLOR
+          )}
+        >
+          <div aria-hidden>
+            <img
+              src="/2x.png"
+              alt="2x multiplier"
+              width={768}
+              height={400}
+              className="w-full"
+            />
+          </div>
+          <div className={classNames('p-3', GRADIENT)}>
+            <h3 className="mb-3 text-xl">Mid level degen</h3>
+            <p className="text-base text-vega-clight-100 dark:text-vega-cdark-100">
+              Stake a minimum of 1000 $VEGA tokens
+            </p>
+            <Tag color="blue">Reward multiplier 2x</Tag>
+          </div>
+        </div>
+        <div
+          className={classNames(
+            'overflow-hidden',
+            'border rounded-md w-full',
+            BORDER_COLOR
+          )}
+        >
+          <div aria-hidden>
+            <img
+              src="/3x.png"
+              alt="3x multiplier"
+              width={768}
+              height={400}
+              className="w-full"
+            />
+          </div>
+          <div className={classNames('p-3', GRADIENT)}>
+            <h3 className="mb-3 text-xl">Reward hoarder</h3>
+            <p className="text-base text-vega-clight-100 dark:text-vega-cdark-100">
+              Stake a minimum of 10,000 $VEGA tokens
+            </p>
+            <Tag color="pink">Reward multiplier 3x</Tag>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-10 mb-5 text-center">
+        <h2 className="text-2xl">How it works</h2>
+      </div>
+      <div className="md:w-[60%] mx-auto">
+        <HowItWorksTable />
+        <div className="mt-5">
+          <TradingAnchorButton
+            className="mx-auto w-max"
+            href="https://docs.vega.xyz/"
+            target="_blank"
+          >
+            Read the terms <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+          </TradingAnchorButton>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Referrals;

apps/trading/client-pages/referrals/table.tsx

@@ -0,0 +1,116 @@
+import { Tooltip, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+import { BORDER_COLOR, GRADIENT } from './constants';
+
+type TableColumnDefinition = {
+  displayName?: string;
+  name: string;
+  tooltip?: string;
+  className?: string;
+};
+
+type TableProps = {
+  columns: TableColumnDefinition[];
+  data: Record<TableColumnDefinition['name'] | 'className', React.ReactNode>[];
+  noHeader?: boolean;
+  noCollapse?: boolean;
+};
+
+const INNER_BORDER_STYLE = `border-b ${BORDER_COLOR}`;
+
+export const Table = ({
+  columns,
+  data,
+  noHeader = false,
+  noCollapse = false,
+  className,
+  ...props
+}: TableProps & HTMLAttributes<HTMLTableElement>) => {
+  const header = (
+    <thead className={classNames({ 'max-md:hidden': !noCollapse })}>
+      <tr>
+        {columns.map(({ displayName, name, tooltip }) => (
+          <th
+            key={name}
+            col-id={name}
+            className={classNames(
+              'px-5 py-3 text-sm  text-vega-clight-100 dark:text-vega-cdark-100',
+              INNER_BORDER_STYLE
+            )}
+          >
+            <span className="flex flex-row gap-2 items-center">
+              <span>{displayName}</span>
+              {tooltip ? (
+                <Tooltip description={tooltip}>
+                  <button className="text-vega-clight-400 dark:text-vega-cdark-400 no-underline decoration-transparent w-[12px] h-[12px] inline-flex">
+                    <VegaIcon size={12} name={VegaIconNames.INFO} />
+                  </button>
+                </Tooltip>
+              ) : null}
+            </span>
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+  return (
+    <table
+      className={classNames(
+        'w-full',
+        'border-separate border rounded-md border-spacing-0',
+        BORDER_COLOR,
+        GRADIENT,
+        className
+      )}
+      {...props}
+    >
+      {!noHeader && header}
+      <tbody>
+        {data.map((d, i) => (
+          <tr
+            key={i}
+            className={classNames(d['className'] as string, {
+              'max-md:flex flex-col w-full': !noCollapse,
+            })}
+          >
+            {columns.map(({ name, displayName, className }, j) => (
+              <td
+                className={classNames(
+                  'px-5 py-3 text-base',
+                  {
+                    'max-md:flex max-md:flex-col max-md:justify-between':
+                      !noCollapse,
+                  },
+                  INNER_BORDER_STYLE,
+                  {
+                    'border-none': i === data.length - 1 && noCollapse,
+                    'md:border-none': i === data.length - 1,
+                    'max-md:border-none':
+                      i === data.length - 1 && j === columns.length - 1,
+                  },
+                  className
+                )}
+                key={`${i}-${name}`}
+              >
+                {/** display column name in mobile view */}
+                {!noCollapse &&
+                  !noHeader &&
+                  displayName &&
+                  displayName.length > 0 && (
+                    <span
+                      aria-hidden
+                      className="md:hidden  font-mono text-xs px-0 text-vega-clight-100 dark:text-vega-cdark-100"
+                    >
+                      {displayName}
+                    </span>
+                  )}
+                <span>{d[name]}</span>
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

apps/trading/client-pages/referrals/tag.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+type TagProps = {
+  color?: 'yellow' | 'green' | 'blue' | 'purple' | 'pink' | 'orange' | 'none';
+};
+export const Tag = ({
+  color = 'none',
+  children,
+  className,
+  ...props
+}: TagProps & HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={classNames(
+      'mt-3 w-max border rounded-[1rem] py-[0.125rem] px-2 text-xs',
+      {
+        'border-vega-yellow-500  text-vega-yellow-500': color === 'yellow',
+        'border-vega-green-500  text-vega-green-500': color === 'green',
+        'border-vega-blue-500  text-vega-blue-500': color === 'blue',
+        'border-vega-purple-500  text-vega-purple-500': color === 'purple',
+        'border-vega-pink-500  text-vega-pink-500': color === 'pink',
+        'border-vega-orange-500  text-vega-orange-500': color === 'orange',
+        'border-vega-clight-100  text-vega-clight-100 dark:border-vega-cdark-100  dark:text-vega-cdark-100':
+          color === 'none',
+      },
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);

apps/trading/client-pages/referrals/tiers-table.tsx

@@ -0,0 +1,42 @@
+import { Table } from './table';
+
+export const TiersTable = () => (
+  <Table
+    columns={[
+      { name: 'tier', displayName: 'Tier' },
+      {
+        name: 'commission',
+        displayName: 'Referrer commission',
+        tooltip: 'A percentage of commission earned by the referrer',
+      },
+      { name: 'discount', displayName: 'Referrer trading discount' },
+      { name: 'volume', displayName: 'Min. trading volume' },
+    ]}
+    data={[
+      {
+        tier: '1',
+        commission: '1.0%',
+        discount: '1.0%',
+        volume: '€30,000',
+        className:
+          'from-vega-pink-400 dark:from-vega-pink-600 to-20%  bg-highlight',
+      },
+      {
+        tier: '2',
+        commission: '0.5%',
+        discount: '0.5%',
+        volume: '€20,000',
+        className:
+          'from-vega-purple-400 dark:from-vega-purple-600 to-20%  bg-highlight',
+      },
+      {
+        tier: '3',
+        commission: '0.1%',
+        discount: '0.1%',
+        volume: '€10,000',
+        className:
+          'from-vega-blue-400 dark:from-vega-blue-600 to-20%  bg-highlight',
+      },
+    ]}
+  ></Table>
+);

apps/trading/client-pages/referrals/tile.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+import { BORDER_COLOR, GRADIENT } from './constants';
+
+type TileProps = {
+  variant?: 'rainbow' | 'default';
+};
+
+export const Tile = ({
+  variant = 'default',
+  className,
+  children,
+}: TileProps & HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={classNames(
+        {
+          'bg-rainbow p-[0.125rem]': variant === 'rainbow',
+          [`border-2 ${BORDER_COLOR} p-0`]: variant === 'default',
+        },
+        'rounded-lg overflow-hidden'
+      )}
+    >
+      <div
+        className={classNames(
+          {
+            'bg-white dark:bg-vega-cdark-900 text-black dark:text-white rounded-[0.35rem] overflow-hidden':
+              variant === 'rainbow',
+          },
+          'p-6',
+          GRADIENT,
+          className
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

apps/trading/components/accounts-container/accounts-container.tsx

@@ -12,6 +12,7 @@ import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { ViewType, useSidebar } from '../sidebar';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 export const AccountsContainer = ({
   pinnedAsset,
@@ -21,7 +22,8 @@ export const AccountsContainer = ({
   const onMarketClick = useMarketClickHandler(true);
   const { pubKey, isReadOnly } = useVegaWallet();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
-  const setView = useSidebar((store) => store.setView);
+  const currentRouteId = useGetCurrentRouteId();
+  const setViews = useSidebar((store) => store.setViews);
 
   const gridStore = useAccountStore((store) => store.gridStore);
   const updateGridStore = useAccountStore((store) => store.updateGridStore);
@@ -49,13 +51,13 @@ export const AccountsContainer = ({
       partyId={pubKey}
       onClickAsset={onClickAsset}
       onClickWithdraw={(assetId) => {
-        setView({ type: ViewType.Withdraw, assetId });
+        setViews({ type: ViewType.Withdraw, assetId }, currentRouteId);
       }}
       onClickDeposit={(assetId) => {
-        setView({ type: ViewType.Deposit, assetId });
+        setViews({ type: ViewType.Deposit, assetId }, currentRouteId);
       }}
       onClickTransfer={(assetId) => {
-        setView({ type: ViewType.Transfer, assetId });
+        setViews({ type: ViewType.Transfer, assetId }, currentRouteId);
       }}
       onMarketClick={onMarketClick}
       isReadOnly={isReadOnly}

apps/trading/components/accounts-menu/accounts-menu.tsx

@@ -1,22 +1,24 @@
 import { t } from '@vegaprotocol/i18n';
 import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 export const AccountsMenu = () => {
-  const setView = useSidebar((store) => store.setView);
+  const currentRouteId = useGetCurrentRouteId();
+  const setViews = useSidebar((store) => store.setViews);
 
   return (
     <>
       <TradingButton
         size="extra-small"
         data-testid="open-transfer"
-        onClick={() => setView({ type: ViewType.Transfer })}
+        onClick={() => setViews({ type: ViewType.Transfer }, currentRouteId)}
       >
         {t('Transfer')}
       </TradingButton>
       <TradingButton
         size="extra-small"
-        onClick={() => setView({ type: ViewType.Deposit })}
+        onClick={() => setViews({ type: ViewType.Deposit }, currentRouteId)}
       >
         {t('Deposit')}
       </TradingButton>

apps/trading/components/constants.ts

@@ -1,2 +1 @@
 export const THROTTLE_UPDATE_TIME = 500;
-export const ONBOARDING_VIEWED_KEY = 'vega_onboarding_viewed';

apps/trading/components/deposits-menu/deposits-menu.tsx

@@ -1,14 +1,16 @@
 import { t } from '@vegaprotocol/i18n';
 import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 export const DepositsMenu = () => {
-  const setView = useSidebar((store) => store.setView);
+  const currentRouteId = useGetCurrentRouteId();
+  const setViews = useSidebar((store) => store.setViews);
 
   return (
     <TradingButton
       size="extra-small"
-      onClick={() => setView({ type: ViewType.Deposit })}
+      onClick={() => setViews({ type: ViewType.Deposit }, currentRouteId)}
       data-testid="deposit-button"
     >
       {t('Deposit')}

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -4,16 +4,19 @@ import classNames from 'classnames';
 import { Routes as AppRoutes } from '../../pages/client-router';
 import { MarketHeader } from '../market-header';
 import { LiquidityHeader } from '../liquidity-header';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 export const LayoutWithSidebar = () => {
-  const sidebarView = useSidebar((store) => store.view);
+  const currentRouteId = useGetCurrentRouteId();
+  const views = useSidebar((store) => store.views);
+  const sidebarView = views[currentRouteId] || null;
   const sidebarOpen = sidebarView !== null;
-
   const gridClasses = classNames(
     'h-full relative z-0 grid',
     'grid-rows-[min-content_1fr_40px]',
     'lg:grid-rows-[min-content_1fr]',
-    'lg:grid-cols-[1fr_350px_40px]'
+    'lg:grid-cols-[1fr_280px_40px]',
+    'xxxl:grid-cols-[1fr_320px_40px]'
   );
 
   return (

apps/trading/components/market-banner/market-successor-proposal-banner.tsx

@@ -29,7 +29,7 @@ export const MarketSuccessorProposalBanner = ({
             ?.successorConfiguration?.parentMarketId === marketId
       ) ?? [];
   const [visible, setVisible] = useState(true);
-  const tokenLink = useLinks(DApp.Token);
+  const tokenLink = useLinks(DApp.Governance);
   if (visible && successors.length) {
     return (
       <NotificationBanner

apps/trading/components/navbar/navbar.tsx

@@ -180,13 +180,18 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
             {t('Trading')}
           </NavbarLink>
         </NavbarItem>
+        <NavbarItem>
+          <NavbarLink to={Links[Routes.REFERRALS]()} onClick={onClick}>
+            {t('Referrals')}
+          </NavbarLink>
+        </NavbarItem>
         <NavbarItem>
           <NavbarLink to={Links[Routes.PORTFOLIO]()} onClick={onClick}>
             {t('Portfolio')}
           </NavbarLink>
         </NavbarItem>
         <NavbarItem>
-          <NavbarLinkExternal to={useLinks(DApp.Token)()}>
+          <NavbarLinkExternal to={useLinks(DApp.Governance)()}>
             {t('Governance')}
           </NavbarLinkExternal>
         </NavbarItem>

apps/trading/components/orderbook-container/orderbook-container.tsx

@@ -1,16 +1,18 @@
 import { OrderbookManager } from '@vegaprotocol/market-depth';
 import { ViewType, useSidebar } from '../sidebar';
 import { useDealTicketFormValues } from '@vegaprotocol/deal-ticket';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 export const OrderbookContainer = ({ marketId }: { marketId: string }) => {
+  const currentRouteId = useGetCurrentRouteId();
   const update = useDealTicketFormValues((state) => state.updateAll);
-  const setView = useSidebar((store) => store.setView);
+  const setViews = useSidebar((store) => store.setViews);
   return (
     <OrderbookManager
       marketId={marketId}
       onClick={(values) => {
         update(marketId, values);
-        setView({ type: ViewType.Order });
+        setViews({ type: ViewType.Order }, currentRouteId);
       }}
     />
   );

apps/trading/components/sidebar/sidebar.spec.tsx

@@ -11,6 +11,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { Routes as AppRoutes } from '../../pages/client-router';
 
 jest.mock('../node-health', () => ({
   NodeHealthContainer: () => <span data-testid="node-health" />,
@@ -115,7 +116,11 @@ describe('SidebarContent', () => {
       <VegaWalletContext.Provider value={walletContext}>
         <MemoryRouter initialEntries={['/markets/ABC']}>
           <Routes>
-            <Route path="/markets/:marketId" element={<SidebarContent />} />
+            <Route
+              path="/markets/:marketId"
+              id={AppRoutes.MARKET}
+              element={<SidebarContent />}
+            />
           </Routes>
         </MemoryRouter>
       </VegaWalletContext.Provider>
@@ -124,13 +129,17 @@ describe('SidebarContent', () => {
     expect(container).toBeEmptyDOMElement();
 
     act(() => {
-      useSidebar.setState({ view: { type: ViewType.Transfer } });
+      useSidebar.setState({
+        views: { [AppRoutes.MARKET]: { type: ViewType.Transfer } },
+      });
     });
 
     expect(screen.getByTestId('transfer')).toBeInTheDocument();
 
     act(() => {
-      useSidebar.setState({ view: { type: ViewType.Deposit } });
+      useSidebar.setState({
+        views: { [AppRoutes.MARKET]: { type: ViewType.Deposit } },
+      });
     });
 
     expect(screen.getByTestId('deposit')).toBeInTheDocument();
@@ -141,26 +150,36 @@ describe('SidebarContent', () => {
       <VegaWalletContext.Provider value={walletContext}>
         <MemoryRouter initialEntries={['/portfolio']}>
           <Routes>
-            <Route path="/portfolio" element={<SidebarContent />} />
+            <Route
+              path="/portfolio"
+              id={AppRoutes.PORTFOLIO}
+              element={<SidebarContent />}
+            />
           </Routes>
         </MemoryRouter>
       </VegaWalletContext.Provider>
     );
 
     act(() => {
-      useSidebar.setState({ view: { type: ViewType.Order } });
+      useSidebar.setState({
+        views: { [AppRoutes.PORTFOLIO]: { type: ViewType.Order } },
+      });
     });
 
     expect(container).toBeEmptyDOMElement();
 
     act(() => {
-      useSidebar.setState({ view: { type: ViewType.Settings } });
+      useSidebar.setState({
+        views: { [AppRoutes.PORTFOLIO]: { type: ViewType.Settings } },
+      });
     });
 
     expect(screen.getByTestId('settings')).toBeInTheDocument();
 
     act(() => {
-      useSidebar.setState({ view: { type: ViewType.Info } });
+      useSidebar.setState({
+        views: { [AppRoutes.PORTFOLIO]: { type: ViewType.Info } },
+      });
     });
 
     expect(container).toBeEmptyDOMElement();
@@ -178,6 +197,7 @@ describe('SidebarButton', () => {
           tooltip="INFO"
           onClick={onClick}
           view={view}
+          routeId="current-route-id"
         />
       );
 

apps/trading/components/sidebar/sidebar.tsx

@@ -14,8 +14,9 @@ import { Settings } from '../settings';
 import { Tooltip } from '../../components/tooltip';
 import { WithdrawContainer } from '../withdraw-container';
 import { Routes as AppRoutes } from '../../pages/client-router';
-import { GetStarted } from '../welcome-dialog';
 import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { GetStarted } from '../welcome-dialog';
 
 export enum ViewType {
   Order = 'Order',
@@ -51,27 +52,31 @@ type SidebarView =
     };
 
 export const Sidebar = () => {
+  const currentRouteId = useGetCurrentRouteId();
   const navClasses = 'flex lg:flex-col items-center gap-2 lg:gap-4 p-1';
   const setViewAsDialogOpen = useViewAsDialog((state) => state.setOpen);
   const { pubKeys } = useVegaWallet();
   return (
-    <div className="flex lg:flex-col gap-2 h-full p-1" data-testid="sidebar">
+    <div className="flex h-full p-1 lg:flex-col gap-2" data-testid="sidebar">
       <nav className={navClasses}>
         {/* sidebar options that always show */}
         <SidebarButton
           view={ViewType.Deposit}
           icon={VegaIconNames.DEPOSIT}
           tooltip={t('Deposit')}
+          routeId={currentRouteId}
         />
         <SidebarButton
           view={ViewType.Withdraw}
           icon={VegaIconNames.WITHDRAW}
           tooltip={t('Withdraw')}
+          routeId={currentRouteId}
         />
         <SidebarButton
           view={ViewType.Transfer}
           icon={VegaIconNames.TRANSFER}
           tooltip={t('Transfer')}
+          routeId={currentRouteId}
         />
         {/* buttons for specific routes */}
         <Routes>
@@ -94,11 +99,13 @@ export const Sidebar = () => {
                   view={ViewType.Order}
                   icon={VegaIconNames.TICKET}
                   tooltip={t('Order')}
+                  routeId={currentRouteId}
                 />
                 <SidebarButton
                   view={ViewType.Info}
                   icon={VegaIconNames.BREAKDOWN}
                   tooltip={t('Market specification')}
+                  routeId={currentRouteId}
                 />
               </>
             }
@@ -114,12 +121,13 @@ export const Sidebar = () => {
           icon={VegaIconNames.EYE}
           tooltip={t('View as party')}
           disabled={Boolean(pubKeys)}
+          routeId={currentRouteId}
         />
-
         <SidebarButton
           view={ViewType.Settings}
           icon={VegaIconNames.COG}
           tooltip={t('Settings')}
+          routeId={currentRouteId}
         />
         <NodeHealthContainer />
       </nav>
@@ -133,23 +141,25 @@ export const SidebarButton = ({
   tooltip,
   disabled = false,
   onClick,
+  routeId,
 }: {
   view?: ViewType;
   icon: VegaIconNames;
   tooltip: string;
   disabled?: boolean;
   onClick?: () => void;
+  routeId: string;
 }) => {
-  const { currView, setView } = useSidebar((store) => ({
-    currView: store.view,
-    setView: store.setView,
+  const { setViews, getView } = useSidebar((store) => ({
+    setViews: store.setViews,
+    getView: store.getView,
   }));
-
+  const currView = getView(routeId);
   const onSelect = (view: SidebarView['type']) => {
     if (view === currView?.type) {
-      setView(null);
+      setViews(null, routeId);
     } else {
-      setView({ type: view });
+      setViews({ type: view }, routeId);
     }
   };
 
@@ -187,7 +197,7 @@ export const SidebarButton = ({
 const SidebarDivider = () => {
   return (
     <div
-      className="bg-vega-clight-600 dark:bg-vega-cdark-600 w-px h-4 lg:w-4 lg:h-px"
+      className="w-px h-4 bg-vega-clight-600 dark:bg-vega-cdark-600 lg:w-4 lg:h-px"
       role="separator"
     />
   );
@@ -195,8 +205,10 @@ const SidebarDivider = () => {
 
 export const SidebarContent = () => {
   const params = useParams();
-  const { view, setView } = useSidebar();
+  const currentRouteId = useGetCurrentRouteId();
 
+  const { setViews, getView } = useSidebar();
+  const view = getView(currentRouteId);
   if (!view) return null;
 
   if (view.type === ViewType.Order) {
@@ -206,7 +218,7 @@ export const SidebarContent = () => {
           <DealTicketContainer
             marketId={params.marketId}
             onDeposit={(assetId) =>
-              setView({ type: ViewType.Deposit, assetId })
+              setViews({ type: ViewType.Deposit, assetId }, currentRouteId)
             }
           />
           <GetStarted />
@@ -233,7 +245,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Deposit')}>
         <DepositContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -242,7 +253,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Withdraw')}>
         <WithdrawContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -251,7 +261,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Transfer')}>
         <TransferContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -276,7 +285,7 @@ const ContentWrapper = ({
 }) => {
   return (
     <TinyScroll
-      className="h-full overflow-auto py-4 pl-3 pr-4"
+      className="h-full py-4 pl-3 pr-4 overflow-auto"
       // panes have p-1, since sidebar is on the right make pl less to account for additional pane space
       data-testid="sidebar-content"
     >
@@ -288,25 +297,21 @@ const ContentWrapper = ({
 
 /** If rendered will close sidebar */
 const CloseSidebar = () => {
-  const setView = useSidebar((store) => store.setView);
+  const currentRouteId = useGetCurrentRouteId();
+  const setViews = useSidebar((store) => store.setViews);
   useEffect(() => {
-    setView(null);
-  }, [setView]);
+    setViews(null, currentRouteId);
+  }, [setViews, currentRouteId]);
   return null;
 };
 
 export const useSidebar = create<{
-  init: boolean;
-  view: SidebarView | null;
-  setView: (view: SidebarView | null) => void;
-}>()((set) => ({
-  init: true,
-  view: null,
-  setView: (x) =>
-    set(() => {
-      if (x == null) {
-        return { view: null, init: false };
-      }
-      return { view: x, init: false };
-    }),
+  views: { [key: string]: SidebarView | null };
+  setViews: (view: SidebarView | null, routeId: string) => void;
+  getView: (routeId: string) => SidebarView | null | undefined;
+}>()((set, get) => ({
+  views: {},
+  setViews: (x, routeId) =>
+    set(({ views }) => ({ views: { ...views, [routeId]: x } })),
+  getView: (routeId) => get().views[routeId],
 }));

apps/trading/components/telemetry/index.ts

@@ -0,0 +1 @@
+export { Telemetry } from './telemetry';

apps/trading/components/telemetry/telemetry.tsx

@@ -0,0 +1,69 @@
+import type { Toast } from '@vegaprotocol/ui-toolkit';
+import { Intent, useToasts } from '@vegaprotocol/ui-toolkit';
+import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
+import { useCallback, useEffect } from 'react';
+import { TelemetryApproval } from './telemetry-approval';
+import { t } from '@vegaprotocol/i18n';
+import { useOnboardingStore } from '../welcome-dialog/use-get-onboarding-step';
+
+const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_tost_id';
+
+export const Telemetry = () => {
+  const onboardingDissmissed = useOnboardingStore((store) => store.dismissed);
+  const [telemetryValue, setTelemetryValue, isTelemetryNeeded, closeTelemetry] =
+    useTelemetryApproval();
+
+  const [setToast, hasToast, removeToast] = useToasts((store) => [
+    store.setToast,
+    store.hasToast,
+    store.remove,
+  ]);
+
+  const onApprovalClose = useCallback(() => {
+    closeTelemetry();
+    removeToast(TELEMETRY_APPROVAL_TOAST_ID);
+  }, [closeTelemetry, removeToast]);
+
+  const setTelemetryApprovalAndClose = useCallback(
+    (value: string) => {
+      setTelemetryValue(value);
+      onApprovalClose();
+    },
+    [onApprovalClose, setTelemetryValue]
+  );
+
+  useEffect(() => {
+    if (isTelemetryNeeded && onboardingDissmissed) {
+      const toast: Toast = {
+        id: TELEMETRY_APPROVAL_TOAST_ID,
+        intent: Intent.Primary,
+        content: (
+          <>
+            <h3 className="mb-1 text-sm uppercase">
+              {t('Improve vega console')}
+            </h3>
+            <TelemetryApproval
+              telemetryValue={telemetryValue}
+              setTelemetryValue={setTelemetryApprovalAndClose}
+            />
+          </>
+        ),
+        onClose: onApprovalClose,
+      };
+      if (!hasToast(TELEMETRY_APPROVAL_TOAST_ID)) {
+        setToast(toast);
+      }
+      return;
+    }
+  }, [
+    telemetryValue,
+    isTelemetryNeeded,
+    onboardingDissmissed,
+    setToast,
+    hasToast,
+    onApprovalClose,
+    setTelemetryApprovalAndClose,
+  ]);
+
+  return null;
+};

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx

@@ -11,6 +11,10 @@ jest.mock('@vegaprotocol/wallet', () => ({
   useVegaWalletDialogStore: () => mockUpdateDialogOpen,
 }));
 
+jest.mock('../../lib/hooks/use-get-current-route-id', () => ({
+  useGetCurrentRouteId: jest.fn().mockReturnValue('current-route-id'),
+}));
+
 beforeEach(() => {
   jest.clearAllMocks();
 });

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -22,13 +22,15 @@ import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { useCopyTimeout } from '@vegaprotocol/react-helpers';
 import { ViewType, useSidebar } from '../sidebar';
 import classNames from 'classnames';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 export const VegaWalletConnectButton = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const openVegaWalletDialog = useVegaWalletDialogStore(
     (store) => store.openVegaWalletDialog
   );
-  const setView = useSidebar((store) => store.setView);
+  const currentRouteId = useGetCurrentRouteId();
+  const setViews = useSidebar((store) => store.setViews);
   const {
     pubKey,
     pubKeys,
@@ -95,7 +97,7 @@ export const VegaWalletConnectButton = () => {
               <TradingDropdownItem
                 data-testid="wallet-transfer"
                 onClick={() => {
-                  setView({ type: ViewType.Transfer });
+                  setViews({ type: ViewType.Transfer }, currentRouteId);
                   setDropdownOpen(false);
                 }}
               >

apps/trading/components/vega-wallet/vega-wallet-menu.tsx

@@ -10,6 +10,7 @@ import { useVegaWallet, type PubKey } from '@vegaprotocol/wallet';
 import { useCallback, useMemo } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { ViewType, useSidebar } from '../sidebar';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 export const VegaWalletMenu = ({
   setMenu,
@@ -17,7 +18,8 @@ export const VegaWalletMenu = ({
   setMenu: (open: 'nav' | 'wallet' | null) => void;
 }) => {
   const { pubKey, pubKeys, selectPubKey, disconnect } = useVegaWallet();
-  const setView = useSidebar((store) => store.setView);
+  const currentRouteId = useGetCurrentRouteId();
+  const setViews = useSidebar((store) => store.setViews);
 
   const activeKey = useMemo(() => {
     return pubKeys?.find((pk) => pk.publicKey === pubKey);
@@ -46,7 +48,7 @@ export const VegaWalletMenu = ({
       <div className="flex flex-col gap-2 m-4">
         <Button
           onClick={() => {
-            setView({ type: ViewType.Transfer });
+            setViews({ type: ViewType.Transfer }, currentRouteId);
             setMenu(null);
           }}
         >

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

@@ -2,7 +2,8 @@ import { MemoryRouter } from 'react-router-dom';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { GetStarted } from './get-started';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { useOnboardingStore } from './use-get-onboarding-step';
 
 let mockStep = 1;
 jest.mock('./use-get-onboarding-step', () => ({
@@ -44,13 +45,15 @@ describe('GetStarted', () => {
     globalThis.window.vega = undefined as unknown as Vega;
   });
 
-  it('renders nothing if connected', () => {
+  it('renders nothing if dismissed', () => {
+    useOnboardingStore.setState({ dismissed: true });
     mockStep = 0;
     const { container } = renderComponent({ pubKey: 'my-pubkey' });
     expect(container).toBeEmptyDOMElement();
   });
 
   it('steps should be ticked', () => {
+    useOnboardingStore.setState({ dismissed: false });
     const navigatorGetter: jest.SpyInstance = jest.spyOn(
       window.navigator,
       'userAgent',
@@ -72,7 +75,7 @@ describe('GetStarted', () => {
       </MemoryRouter>
     );
     checkTicks(screen.getAllByRole('listitem'));
-    expect(screen.getByRole('button', { name: 'Deposit' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Deposit' })).toBeInTheDocument();
 
     mockStep = 4;
     rerender(
@@ -84,9 +87,11 @@ describe('GetStarted', () => {
     );
     checkTicks(screen.getAllByRole('listitem'));
     expect(
-      screen.getByRole('button', { name: 'Ready to trade' })
+      screen.getByRole('link', { name: 'Ready to trade' })
     ).toBeInTheDocument();
 
+    fireEvent.click(screen.getByRole('link', { name: 'Ready to trade' }));
+
     mockStep = 5;
     rerender(
       <MemoryRouter>

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

@@ -3,89 +3,113 @@ import { t } from '@vegaprotocol/i18n';
 import {
   ExternalLink,
   Intent,
+  TradingAnchorButton,
   TradingButton,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import { useNavigate } from 'react-router-dom';
 import {
   OnboardingStep,
   useGetOnboardingStep,
+  useOnboardingStore,
 } from './use-get-onboarding-step';
 import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
 import { useSidebar, ViewType } from '../sidebar';
-import * as constants from '../constants';
-import { useOnboardingStore } from './welcome-dialog';
 
 interface Props {
   lead?: string;
 }
 
 const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
-  const navigate = useNavigate();
-  const [, setOnboardingViewed] = useLocalStorage(
-    constants.ONBOARDING_VIEWED_KEY
-  );
-
   const dismiss = useOnboardingStore((store) => store.dismiss);
+  const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
   const marketId = useGlobalStore((store) => store.marketId);
-  const link = marketId ? Links[Routes.MARKET](marketId) : Links[Routes.HOME]();
   const openVegaWalletDialog = useVegaWalletDialogStore(
     (store) => store.openVegaWalletDialog
   );
-  const setView = useSidebar((store) => store.setView);
-  let buttonText = t('Get started');
-  let onClickHandle = () => {
-    openVegaWalletDialog();
+  const setViews = useSidebar((store) => store.setViews);
+
+  const buttonProps = {
+    size: 'small' as const,
+    'data-testid': 'get-started-button',
+    intent: Intent.Info,
   };
+
   if (step <= OnboardingStep.ONBOARDING_CONNECT_STEP) {
-    buttonText = t('Connect');
+    return (
+      <TradingButton {...buttonProps} onClick={() => openVegaWalletDialog()}>
+        {t('Connect')}
+      </TradingButton>
+    );
   } else if (step === OnboardingStep.ONBOARDING_DEPOSIT_STEP) {
-    buttonText = t('Deposit');
-    onClickHandle = () => {
-      navigate(link);
-      setView({ type: ViewType.Deposit });
-      dismiss();
-    };
-  } else if (step === OnboardingStep.ONBOARDING_ORDER_STEP) {
-    buttonText = t('Ready to trade');
-    onClickHandle = () => {
-      navigate(link);
-      setView({ type: ViewType.Order });
-      setOnboardingViewed('true');
-    };
+    return (
+      <TradingAnchorButton
+        {...buttonProps}
+        href={Links[Routes.DEPOSIT]()}
+        onClick={() => setDialogOpen(false)}
+      >
+        {t('Deposit')}
+      </TradingAnchorButton>
+    );
+  } else if (step >= OnboardingStep.ONBOARDING_ORDER_STEP) {
+    return (
+      <TradingAnchorButton
+        {...buttonProps}
+        href={marketId ? Links[Routes.MARKET](marketId) : Links[Routes.HOME]()}
+        onClick={() => {
+          setViews({ type: ViewType.Order }, Routes.MARKET);
+          dismiss();
+        }}
+      >
+        {t('Ready to trade')}
+      </TradingAnchorButton>
+    );
   }
 
   return (
-    <TradingButton
-      onClick={onClickHandle}
-      size="small"
-      data-testid="get-started-button"
-      intent={Intent.Info}
-    >
-      {buttonText}
+    <TradingButton {...buttonProps} onClick={() => openVegaWalletDialog()}>
+      {t('Get started')}
     </TradingButton>
   );
 };
 
+export const GetStartedCheckList = () => {
+  const { pubKey } = useVegaWallet();
+  const currentStep = useGetOnboardingStep();
+  return (
+    <ul className="list-none">
+      <Step
+        step={1}
+        text={t('Connect')}
+        complete={Boolean(
+          currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
+        )}
+      />
+      <Step
+        step={2}
+        text={t('Deposit funds')}
+        complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
+      />
+      <Step
+        step={3}
+        text={t('Open a position')}
+        complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
+      />
+    </ul>
+  );
+};
+
 export const GetStarted = ({ lead }: Props) => {
   const { pubKey } = useVegaWallet();
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
-  const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
-  const [onBoardingViewed] = useLocalStorage(constants.ONBOARDING_VIEWED_KEY);
-  const currentStep = useGetOnboardingStep();
   const openVegaWalletDialog = useVegaWalletDialogStore(
     (store) => store.openVegaWalletDialog
   );
-
-  const getStartedNeeded =
-    onBoardingViewed !== 'true' &&
-    currentStep &&
-    currentStep < OnboardingStep.ONBOARDING_COMPLETE_STEP;
+  const currentStep = useGetOnboardingStep();
+  const dismissed = useOnboardingStore((store) => store.dismissed);
 
   const wrapperClasses = classNames(
     'flex flex-col py-4 px-6 gap-4 rounded',
@@ -94,31 +118,13 @@ export const GetStarted = ({ lead }: Props) => {
     { 'mt-8': !lead }
   );
 
-  if (getStartedNeeded) {
+  if (!dismissed) {
     return (
       <div className={wrapperClasses} data-testid="get-started-banner">
         {lead && <h2>{lead}</h2>}
         <h3 className="text-lg">{t('Get started')}</h3>
         <div>
-          <ul className="list-none">
-            <Step
-              step={1}
-              text={t('Connect')}
-              complete={Boolean(
-                currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
-              )}
-            />
-            <Step
-              step={2}
-              text={t('Deposit funds')}
-              complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
-            />
-            <Step
-              step={3}
-              text={t('Open a position')}
-              complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
-            />
-          </ul>
+          <GetStartedCheckList />
         </div>
         <div>
           <GetStartedButton step={currentStep} />
@@ -126,7 +132,7 @@ export const GetStarted = ({ lead }: Props) => {
         {VEGA_ENV === Networks.MAINNET && (
           <p className="text-sm">
             {t('Experiment for free with virtual assets on')}{' '}
-            <ExternalLink href={CANONICAL_URL}>
+            <ExternalLink href={VEGA_NETWORKS.TESTNET}>
               {t('Fairground Testnet')}
             </ExternalLink>
           </p>
@@ -134,7 +140,7 @@ export const GetStarted = ({ lead }: Props) => {
         {VEGA_ENV === Networks.TESTNET && (
           <p className="text-sm">
             {t('Ready to trade with real funds?')}{' '}
-            <ExternalLink href={CANONICAL_URL}>
+            <ExternalLink href={VEGA_NETWORKS.MAINNET}>
               {t('Switch to Mainnet')}
             </ExternalLink>
           </p>

apps/trading/components/welcome-dialog/proposed-markets.tsx

@@ -41,7 +41,7 @@ export const ProposedMarkets = () => {
       proposal.terms.change.instrument.code,
   }));
 
-  const tokenLink = useLinks(DApp.Token);
+  const tokenLink = useLinks(DApp.Governance);
   return useMemo(
     () => (
       <div className="mt-7 pt-8 border-t border-default">

apps/trading/components/welcome-dialog/use-get-onboarding-step.ts

@@ -1,3 +1,5 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { useDataProvider } from '@vegaprotocol/data-provider';
@@ -7,6 +9,29 @@ import { aggregatedAccountsDataProvider } from '@vegaprotocol/accounts';
 import { positionsDataProvider } from '@vegaprotocol/positions';
 import { useGlobalStore } from '../../stores';
 
+const ONBOARDING_STORAGE_KEY = 'vega_onboarding';
+export const useOnboardingStore = create<{
+  dialogOpen: boolean;
+  dismissed: boolean;
+  dismiss: () => void;
+  setDialogOpen: (isOpen: boolean) => void;
+}>()(
+  persist(
+    (set) => ({
+      dialogOpen: true,
+      dismissed: false,
+      dismiss: () => set({ dismissed: true }),
+      setDialogOpen: (isOpen) => set({ dialogOpen: isOpen }),
+    }),
+    {
+      name: ONBOARDING_STORAGE_KEY,
+      partialize: (state) => ({
+        dismissed: state.dismissed,
+      }),
+    }
+  )
+);
+
 export enum OnboardingStep {
   ONBOARDING_UNKNOWN_STEP,
   ONBOARDING_WALLET_STEP,

apps/trading/components/welcome-dialog/welcome-dialog-content.tsx

@@ -1,40 +1,24 @@
 import { t } from '@vegaprotocol/i18n';
 import { GetStarted } from './get-started';
-import { TradingButton } from '@vegaprotocol/ui-toolkit';
-import { useNavigate } from 'react-router-dom';
+import { TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
 import { Links, Routes } from '../../pages/client-router';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
-import { useOnboardingStore } from './welcome-dialog';
-import { useMarketList } from '@vegaprotocol/markets';
-import { isMarketActive } from '../../lib/utils';
-import orderBy from 'lodash/orderBy';
-import { priceChangePercentage } from '@vegaprotocol/utils';
+import { useTopTradedMarkets } from '../../lib/hooks/use-top-traded-markets';
+import { useOnboardingStore } from './use-get-onboarding-step';
 
 export const WelcomeDialogContent = () => {
   const { VEGA_ENV } = useEnvironment();
-
-  const dismiss = useOnboardingStore((store) => store.dismiss);
-  const navigate = useNavigate();
-  const { data } = useMarketList();
-  const markets = orderBy(
-    data?.filter((m) => isMarketActive(m.state)) || [],
-    [
-      (m) => {
-        if (!m.candles?.length) return 0;
-        return Number(priceChangePercentage(m.candles.map((c) => c.close)));
-      },
-    ],
-    ['desc']
+  const setOnboardingDialog = useOnboardingStore(
+    (store) => store.setDialogOpen
   );
-  const explore = () => {
-    const marketId = markets?.[0].id ?? '';
-    const link = marketId
-      ? Links[Routes.MARKET](marketId)
-      : Links[Routes.MARKETS]();
-    navigate(link);
-    dismiss();
-  };
+
+  const { data } = useTopTradedMarkets();
+  const marketId = data && data[0]?.id;
+  const link = marketId
+    ? Links[Routes.MARKET](marketId)
+    : Links[Routes.MARKETS]();
+
   const lead =
     VEGA_ENV === Networks.MAINNET
       ? t('Start trading on the worlds most advanced decentralised exchange.')
@@ -43,7 +27,7 @@ export const WelcomeDialogContent = () => {
         );
   return (
     <div className="flex flex-col sm:flex-row gap-8">
-      <div className="sm:w-1/2 flex flex-col justify-between pt-3">
+      <div className="flex flex-col justify-between pt-3 sm:w-1/2">
         <ul className="ml-0">
           <ListItemContent
             icon={<NonCustodialIcon />}
@@ -65,15 +49,16 @@ export const WelcomeDialogContent = () => {
             )}
           />
         </ul>
-        <TradingButton
-          onClick={explore}
+        <TradingAnchorButton
+          href={link}
+          onClick={() => setOnboardingDialog(false)}
           className="block w-full"
           data-testid="browse-markets-button"
         >
           {t('Explore')}
-        </TradingButton>
+        </TradingAnchorButton>
       </div>
-      <div className="sm:w-1/2 flex grow">
+      <div className="flex sm:w-1/2 grow">
         <GetStarted lead={lead} />
       </div>
     </div>
@@ -90,10 +75,10 @@ const ListItemContent = ({
   text: string;
 }) => {
   return (
-    <li className="my-4 flex gap-3">
-      <div className="shrink-0 pt-1">{icon}</div>
+    <li className="flex my-4 gap-3">
+      <div className="pt-1 shrink-0">{icon}</div>
       <div>
-        <h3 className="text-lg leading-snug mb-2">{title}</h3>
+        <h3 className="mb-2 text-lg leading-snug">{title}</h3>
         <p className="text-sm text-secondary">{text}</p>
       </div>
     </li>

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

@@ -1,133 +1,32 @@
-import { useNavigate } from 'react-router-dom';
-import type { Toast } from '@vegaprotocol/ui-toolkit';
-import { Dialog, Intent, useToasts } from '@vegaprotocol/ui-toolkit';
+import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
 import { useEnvironment } from '@vegaprotocol/environment';
-import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { WelcomeDialogContent } from './welcome-dialog-content';
-import { Links, Routes } from '../../pages/client-router';
-import { useGlobalStore } from '../../stores';
-import {
-  useGetOnboardingStep,
-  OnboardingStep,
-} from './use-get-onboarding-step';
-import * as constants from '../constants';
-import { TelemetryApproval } from './telemetry-approval';
-import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
-import { useCallback } from 'react';
+import { useOnboardingStore } from './use-get-onboarding-step';
 
-const ONBOARDING_STORAGE_KEY = 'vega_onboarding_dismiss_store';
-export const useOnboardingStore = create<{
-  dismissed: boolean;
-  dismiss: () => void;
-}>()(
-  persist(
-    (set) => ({
-      dismissed: false,
-      dismiss: () => set(() => ({ dismissed: true })),
-    }),
-    {
-      name: ONBOARDING_STORAGE_KEY,
-    }
-  )
-);
-
-const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_tost_id';
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
-  const navigate = useNavigate();
-  const [telemetryValue, setTelemetryValue, isTelemetryNeeded, closeTelemetry] =
-    useTelemetryApproval();
-  const [onBoardingViewed] = useLocalStorage(constants.ONBOARDING_VIEWED_KEY);
-  const dismiss = useOnboardingStore((store) => store.dismiss);
   const dismissed = useOnboardingStore((store) => store.dismissed);
-  const currentStep = useGetOnboardingStep();
-  const isTelemetryPopupNeeded =
-    isTelemetryNeeded &&
-    (onBoardingViewed === 'true' ||
-      currentStep > OnboardingStep.ONBOARDING_ORDER_STEP);
+  const dialogOpen = useOnboardingStore((store) => store.dialogOpen);
+  const dismiss = useOnboardingStore((store) => store.dismiss);
 
-  const isOnboardingDialogNeeded =
-    onBoardingViewed !== 'true' &&
-    currentStep &&
-    currentStep < OnboardingStep.ONBOARDING_COMPLETE_STEP &&
-    !dismissed;
-  const marketId = useGlobalStore((store) => store.marketId);
-
-  const onClose = () => {
-    if (isTelemetryPopupNeeded) {
-      closeTelemetry();
-    } else {
-      const link = marketId
-        ? Links[Routes.MARKET](marketId)
-        : Links[Routes.HOME]();
-      navigate(link);
-      dismiss();
-    }
-  };
-
-  const [setToast, hasToast, removeToast] = useToasts((store) => [
-    store.setToast,
-    store.hasToast,
-    store.remove,
-  ]);
-  const onApprovalClose = useCallback(() => {
-    closeTelemetry();
-    removeToast(TELEMETRY_APPROVAL_TOAST_ID);
-  }, [removeToast, closeTelemetry]);
-
-  const setTelemetryApprovalAndClose = useCallback(
-    (value: string) => {
-      setTelemetryValue(value);
-      onApprovalClose();
-    },
-    [setTelemetryValue, onApprovalClose]
-  );
-
-  if (isTelemetryPopupNeeded) {
-    const toast: Toast = {
-      id: TELEMETRY_APPROVAL_TOAST_ID,
-      intent: Intent.Primary,
-      content: (
-        <>
-          <h3 className="mb-1 text-sm uppercase">
-            {t('Improve vega console')}
-          </h3>
-          <TelemetryApproval
-            telemetryValue={telemetryValue}
-            setTelemetryValue={setTelemetryApprovalAndClose}
-          />
-        </>
-      ),
-      onClose: onApprovalClose,
-    };
-    if (!hasToast(TELEMETRY_APPROVAL_TOAST_ID)) {
-      setToast(toast);
-    }
-    return;
-  }
-
-  const title = (
-    <span className="font-alpha calt" data-testid="welcome-title">
-      {t('Console')}{' '}
-      <span className="text-vega-clight-100 dark:text-vega-cdark-100">
-        {VEGA_ENV}
-      </span>
-    </span>
-  );
-
-  return isOnboardingDialogNeeded ? (
+  return (
     <Dialog
-      open
-      title={title}
+      open={dismissed ? false : dialogOpen}
+      title={
+        <span className="font-alpha calt" data-testid="welcome-title">
+          {t('Console')}{' '}
+          <span className="text-vega-clight-100 dark:text-vega-cdark-100">
+            {VEGA_ENV}
+          </span>
+        </span>
+      }
       size="medium"
-      onChange={onClose}
+      onChange={() => dismiss()}
       intent={Intent.None}
       dataTestId="welcome-dialog"
     >
       <WelcomeDialogContent />
     </Dialog>
-  ) : null;
+  );
 };

apps/trading/components/withdrawals-menu/withdrawals-menu.tsx

@@ -1,14 +1,15 @@
 import { t } from '@vegaprotocol/i18n';
 import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
+import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 
 export const WithdrawalsMenu = () => {
-  const setView = useSidebar((store) => store.setView);
-
+  const setViews = useSidebar((store) => store.setViews);
+  const currentRouteId = useGetCurrentRouteId();
   return (
     <TradingButton
       size="extra-small"
-      onClick={() => setView({ type: ViewType.Withdraw })}
+      onClick={() => setViews({ type: ViewType.Withdraw }, currentRouteId)}
       data-testid="withdraw-dialog-button"
     >
       {t('Make withdrawal')}

apps/trading/lib/hooks/use-get-current-route-id.ts

@@ -0,0 +1,15 @@
+import { routerConfig } from '../../pages/client-router';
+import { matchRoutes, useLocation } from 'react-router-dom';
+
+export const useGetCurrentRouteId = () => {
+  const location = useLocation();
+  const currentRoute = matchRoutes(routerConfig, location);
+  const lastRoute = currentRoute?.pop();
+  if (lastRoute) {
+    const {
+      route: { id },
+    } = lastRoute;
+    return id || '';
+  }
+  return '';
+};

apps/trading/lib/hooks/use-top-traded-markets.tsx

@@ -0,0 +1,13 @@
+import orderBy from 'lodash/orderBy';
+import { calcTradedFactor, useMarketList } from '@vegaprotocol/markets';
+import { isMarketActive } from '../utils';
+
+export const useTopTradedMarkets = () => {
+  const { data, loading, error } = useMarketList();
+
+  const activeMarkets = data?.filter((m) => isMarketActive(m.state));
+  const marketsByTopTraded = data
+    ? orderBy(activeMarkets, (m) => calcTradedFactor(m), 'desc')
+    : undefined;
+  return { data: marketsByTopTraded, loading, error };
+};

apps/trading/pages/_app.page.tsx

@@ -49,6 +49,7 @@ import {
 import { ViewingBanner } from '../components/viewing-banner';
 import { NavHeader } from '../components/navbar/nav-header';
 import { Routes as AppRoutes } from './client-router';
+import { Telemetry } from '../components/telemetry';
 
 const DEFAULT_TITLE = t('Welcome to Vega trading!');
 
@@ -125,6 +126,7 @@ function AppBody({ Component }: AppProps) {
       <InitializeHandlers />
       <MaybeConnectEagerly />
       <PartyData />
+      <Telemetry />
     </div>
   );
 }

apps/trading/pages/client-router.tsx

@@ -6,6 +6,10 @@ import { t } from '@vegaprotocol/i18n';
 import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import trimEnd from 'lodash/trimEnd';
 import { LayoutWithSidebar } from '../components/layouts';
+import { LayoutWithSky } from '../client-pages/referrals/layout';
+import { ReferralStatistics } from '../client-pages/referrals/referral-statistics';
+import { ApplyCodeForm } from '../client-pages/referrals/apply-code-form';
+import { CreateCodeForm } from '../client-pages/referrals/create-code-form';
 
 const LazyHome = dynamic(() => import('../client-pages/home'), {
   ssr: false,
@@ -35,6 +39,13 @@ const LazyDeposit = dynamic(() => import('../client-pages/deposit'), {
   ssr: false,
 });
 
+const LazyReferrals = dynamic(
+  () => import('../client-pages/referrals/referrals'),
+  {
+    ssr: false,
+  }
+);
+
 export enum Routes {
   HOME = '/',
   MARKET = '/markets/:marketId',
@@ -43,6 +54,10 @@ export enum Routes {
   LIQUIDITY = '/liquidity/:marketId',
   DISCLAIMER = '/disclaimer',
   DEPOSIT = '/deposit',
+  REFERRALS = '/referrals',
+  REFERRALS_APPLY_CODE = '/referrals/apply-code',
+  REFERRALS_CREATE_CODE = '/referrals/create-code',
+  TEAMS = '/teams',
 }
 
 type ConsoleLinks = { [r in Routes]: (...args: string[]) => string };
@@ -57,9 +72,13 @@ export const Links: ConsoleLinks = {
     trimEnd(Routes.LIQUIDITY.replace(':marketId', marketId)),
   [Routes.DISCLAIMER]: () => Routes.DISCLAIMER,
   [Routes.DEPOSIT]: () => Routes.DEPOSIT,
+  [Routes.REFERRALS]: () => Routes.REFERRALS,
+  [Routes.REFERRALS_APPLY_CODE]: () => Routes.REFERRALS_APPLY_CODE,
+  [Routes.REFERRALS_CREATE_CODE]: () => Routes.REFERRALS_CREATE_CODE,
+  [Routes.TEAMS]: () => Routes.TEAMS,
 };
 
-const routerConfig: RouteObject[] = [
+export const routerConfig: RouteObject[] = [
   {
     path: '/*',
     element: <LayoutWithSidebar />,
@@ -68,6 +87,7 @@ const routerConfig: RouteObject[] = [
       {
         index: true,
         element: <LazyHome />,
+        id: Routes.HOME,
       },
       {
         path: 'markets',
@@ -76,16 +96,19 @@ const routerConfig: RouteObject[] = [
           {
             path: 'all',
             element: <LazyMarkets />,
+            id: Routes.MARKETS,
           },
           {
             path: ':marketId',
             element: <LazyMarket />,
+            id: Routes.MARKET,
           },
         ],
       },
       {
         path: 'portfolio',
         element: <LazyPortfolio />,
+        id: Routes.PORTFOLIO,
       },
       {
         path: 'liquidity',
@@ -94,6 +117,7 @@ const routerConfig: RouteObject[] = [
           {
             path: ':marketId',
             element: <LazyLiquidity />,
+            id: Routes.LIQUIDITY,
           },
         ],
       },
@@ -104,6 +128,30 @@ const routerConfig: RouteObject[] = [
     element: <LazyDisclaimer />,
   },
   { path: Routes.DEPOSIT, element: <LazyDeposit /> },
+  // Referrals routing:
+  {
+    path: Routes.REFERRALS,
+    element: <LayoutWithSky />,
+    children: [
+      {
+        element: <LazyReferrals />,
+        children: [
+          {
+            index: true,
+            element: <ReferralStatistics />,
+          },
+          {
+            path: Routes.REFERRALS_APPLY_CODE,
+            element: <ApplyCodeForm />,
+          },
+          {
+            path: Routes.REFERRALS_CREATE_CODE,
+            element: <CreateCodeForm />,
+          },
+        ],
+      },
+    ],
+  },
   {
     path: '*',
     element: (

apps/trading/pages/styles.css

@@ -83,8 +83,7 @@ html [data-theme='light'] {
   --pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
 
   /* reduce space between candles */
-  --pennant-candlestick-inner-padding: 0.175;
-  --pennant-candlestick-stroke-width: 0.5;
+  --pennant-candlestick-inner-padding: 0.25;
 }
 
 html [data-theme='light'] {
@@ -162,11 +161,22 @@ html [data-theme='dark'] {
   @apply font-normal font-alpha;
 }
 
-/* Light variables */
-.ag-theme-balham {
+.ag-theme-balham,
+.ag-theme-balham-dark {
   --ag-grid-size: 2px; /* Used for compactness */
   --ag-row-height: 36px;
-  --ag-header-height: 36px;
+  --ag-header-height: 28px;
+}
+
+@media (min-width: theme(screens.xxl)) {
+  .ag-theme-balham,
+  .ag-theme-balham-dark {
+    --ag-header-height: 36px;
+  }
+}
+
+/* Light variables */
+.ag-theme-balham {
   --ag-background-color: theme(colors.white);
   --ag-border-color: theme(colors.vega.clight.600);
   --ag-header-background-color: theme(colors.vega.clight.700);
@@ -179,9 +189,6 @@ html [data-theme='dark'] {
 
 /* Dark variables */
 .ag-theme-balham-dark {
-  --ag-grid-size: 2px; /* Used for compactness */
-  --ag-row-height: 36px;
-  --ag-header-height: 36px;
   --ag-background-color: theme(colors.vega.cdark.900);
   --ag-border-color: theme(colors.vega.cdark.600);
   --ag-header-background-color: theme(colors.vega.cdark.700);
@@ -191,6 +198,7 @@ html [data-theme='dark'] {
   --ag-row-hover-color: theme(colors.vega.cdark.800);
   --ag-modal-overlay-background-color: rgb(9 11 16 / 50%);
 }
+
 .ag-theme-balham-dark .ag-row.no-hover,
 .ag-theme-balham-dark .ag-row.no-hover:hover,
 .ag-theme-balham .ag-row.no-hover,

apps/trading/tailwind.config.js

@@ -13,7 +13,37 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
-    extend: theme,
+    extend: {
+      ...theme,
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        ...theme.colors,
+      },
+      backgroundImage: {
+        ...theme.backgroundImage,
+        rainbow:
+          'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
+        'rainbow-shifted':
+          'linear-gradient(103.47deg, #0075FF 1.68%, #8028FF 47.49%, #FF077F 100%)',
+        highlight:
+          'linear-gradient(170deg, var(--tw-gradient-from), transparent var(--tw-gradient-to-position))',
+      },
+      keyframes: {
+        ...theme.keyframes,
+        shake: {
+          '0%': { transform: 'translateX(0)' },
+          '25%': { transform: 'translateX(5px)' },
+          '50%': { transform: 'translateX(-5px)' },
+          '75%': { transform: 'translateX(5px)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+      },
+      animation: {
+        ...theme.animation,
+        shake: 'shake 200ms linear',
+      },
+    },
   },
   plugins: [vegaCustomClasses],
 };

docker/entrypoint.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+entrypoint="${1:-nginx}"
+
+if [[ "$entrypoint" = "nginx" ]]; then
+  nginx -g 'daemon off;'
+elif [[ "$entrypoint" = "ipfs" ]]; then
+  ipfs config profile apply server
+  ipfs config --json Addresses.Gateway '"/ip4/127.0.0.1/tcp/80"'
+  ipfs daemon
+elif [[ "-c" ]]; then
+  shift
+  /bin/sh -c "$@"
+fi

docker/node-inside-docker.Dockerfile

@@ -20,6 +20,8 @@ RUN sh docker/docker-build.sh
 FROM --platform=amd64 nginx:1.23-alpine@sha256:6318314189b40e73145a48060bff4783a116c34cc7241532d0d94198fb2c9629
 # configuration of system
 EXPOSE 80
+COPY docker/entrypoint.sh /entrypoint.sh
+ENTRYPOINT [ "/entrypoint.sh" ]
 # Copy dist
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
 RUN rm -rf /usr/share/nginx/html/*

docker/node-outside-docker.Dockerfile

@@ -1,5 +1,7 @@
 FROM --platform=amd64 nginx:1.23-alpine@sha256:6318314189b40e73145a48060bff4783a116c34cc7241532d0d94198fb2c9629
 EXPOSE 80
+COPY docker/entrypoint.sh /entrypoint.sh
+ENTRYPOINT [ "/entrypoint.sh" ]
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
 RUN rm -rf /usr/share/nginx/html/*
 COPY ./dist-result/ /usr/share/nginx/html/

libs/candles-chart/src/lib/candles-chart.tsx

@@ -8,13 +8,16 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
-import { useCandlesChartSettings } from './use-candles-chart-settings';
+import {
+  STUDY_SIZE,
+  useCandlesChartSettings,
+} from './use-candles-chart-settings';
 
 export type CandlesChartContainerProps = {
   marketId: string;
 };
 
-const CANDLES_TO_WIDTH_FACTOR = 0.15;
+const CANDLES_TO_WIDTH_FACTOR = 0.2;
 
 export const CandlesChartContainer = ({
   marketId,
@@ -49,33 +52,34 @@ export const CandlesChartContainer = ({
 
   return (
     <AutoSizer>
-      {({ width, height }) => (
-        <div style={{ width, height }}>
-          <CandlestickChart
-            dataSource={dataSource}
-            options={{
-              chartType,
-              overlays,
-              studies,
-              notEnoughDataText: (
-                <span className="text-xs text-center">{t('No data')}</span>
-              ),
-              initialNumCandlesToDisplay: Math.floor(
-                width * CANDLES_TO_WIDTH_FACTOR
-              ),
-              studySize: 150, // default size
-              studySizes,
-            }}
-            interval={interval}
-            theme={theme}
-            onOptionsChanged={(options) => {
-              setStudies(options.studies);
-              setOverlays(options.overlays);
-            }}
-            onPaneChanged={handlePaneChange}
-          />
-        </div>
-      )}
+      {({ width, height }) => {
+        const candlesCount = Math.floor(width * CANDLES_TO_WIDTH_FACTOR);
+        return (
+          <div style={{ width, height }}>
+            <CandlestickChart
+              dataSource={dataSource}
+              options={{
+                chartType,
+                overlays,
+                studies,
+                notEnoughDataText: (
+                  <span className="text-xs text-center">{t('No data')}</span>
+                ),
+                initialNumCandlesToDisplay: candlesCount,
+                studySize: STUDY_SIZE,
+                studySizes,
+              }}
+              interval={interval}
+              theme={theme}
+              onOptionsChanged={(options) => {
+                setStudies(options.studies);
+                setOverlays(options.overlays);
+              }}
+              onPaneChanged={handlePaneChange}
+            />
+          </div>
+        );
+      }}
     </AutoSizer>
   );
 };

libs/candles-chart/src/lib/use-candles-chart-settings.ts

@@ -15,7 +15,7 @@ interface StoredSettings {
   studySizes: StudySizes;
 }
 
-export const STUDY_SIZE = 100;
+export const STUDY_SIZE = 90;
 const STUDY_ORDER: Study[] = [
   Study.FORCE_INDEX,
   Study.RELATIVE_STRENGTH_INDEX,

libs/cypress/src/lib/commands/vega-wallet-connect.ts

@@ -61,10 +61,15 @@ export function addVegaWalletConnect() {
   });
 }
 
+const onboardingViewedState = { state: { dismissed: true }, version: 0 };
+
 export function addSetVegaWallet() {
   Cypress.Commands.add('setVegaWallet', () => {
     cy.window().then((win) => {
-      win.localStorage.setItem('vega_onboarding_viewed', 'true');
+      win.localStorage.setItem(
+        'vega_onboarding',
+        JSON.stringify(onboardingViewedState)
+      );
       win.localStorage.setItem('vega_telemetry_approval', 'false');
       win.localStorage.setItem('vega_telemetry_viewed', 'true');
       win.localStorage.setItem(
@@ -82,7 +87,10 @@ export function addSetVegaWallet() {
 export function addSetOnBoardingViewed() {
   Cypress.Commands.add('setOnBoardingViewed', () => {
     cy.window().then((win) => {
-      win.localStorage.setItem('vega_onboarding_viewed', 'true');
+      win.localStorage.setItem(
+        'vega_onboarding',
+        JSON.stringify(onboardingViewedState)
+      );
       win.localStorage.setItem('vega_telemetry_approval', 'false');
       win.localStorage.setItem('vega_telemetry_viewed', 'true');
     });

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -26,10 +26,7 @@ import {
   Pill,
 } from '@vegaprotocol/ui-toolkit';
 
-import {
-  useEstimatePositionQuery,
-  useOpenVolume,
-} from '@vegaprotocol/positions';
+import { useOpenVolume } from '@vegaprotocol/positions';
 import {
   toBigNum,
   removeDecimal,
@@ -63,13 +60,14 @@ import {
   useAccountBalance,
 } from '@vegaprotocol/accounts';
 import { useDataProvider } from '@vegaprotocol/data-provider';
+import type { OrderFormValues } from '../../hooks';
 import {
   DealTicketType,
   dealTicketTypeToOrderType,
   isStopOrderType,
-} from '../../hooks/use-form-values';
-import type { OrderFormValues } from '../../hooks/use-form-values';
-import { useDealTicketFormValues } from '../../hooks/use-form-values';
+  useDealTicketFormValues,
+  usePositionEstimate,
+} from '../../hooks';
 import { DealTicketSizeIceberg } from './deal-ticket-size-iceberg';
 import noop from 'lodash/noop';
 import { isNonPersistentOrder } from '../../utils/time-in-force-persistance';
@@ -253,16 +251,14 @@ export const DealTicket = ({
       side: normalizedOrder.side,
     });
   }
-  const { data: positionEstimate } = useEstimatePositionQuery({
-    variables: {
-      marketId: market.id,
-      openVolume,
-      orders,
-      collateralAvailable:
-        marginAccountBalance || generalAccountBalance ? balance : undefined,
-    },
+
+  const positionEstimate = usePositionEstimate({
+    marketId: market.id,
+    openVolume,
+    orders,
+    collateralAvailable:
+      marginAccountBalance || generalAccountBalance ? balance : undefined,
     skip: !normalizedOrder,
-    fetchPolicy: 'no-cache',
   });
 
   const assetSymbol =

libs/deal-ticket/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './__generated__/EstimateOrder';
 export * from './use-estimate-fees';
 export * from './use-form-values';
+export * from './use-position-estimate';

libs/deal-ticket/src/hooks/use-position-estimate.spec.ts

@@ -0,0 +1,33 @@
+import { renderHook } from '@testing-library/react';
+import { usePositionEstimate } from './use-position-estimate';
+import * as positionsModule from '@vegaprotocol/positions';
+import type {
+  EstimatePositionQuery,
+  EstimatePositionQueryVariables,
+} from '@vegaprotocol/positions';
+import type { QueryResult } from '@apollo/client';
+
+let mockData: object | undefined = {};
+
+describe('usePositionEstimate', () => {
+  const args = {
+    marketId: 'marketId',
+    openVolume: '10',
+    orders: [],
+    collateralAvailable: '200',
+    skip: false,
+  };
+  it('should return proper data', () => {
+    jest
+      .spyOn(positionsModule, 'useEstimatePositionQuery')
+      .mockReturnValue({ data: mockData } as unknown as QueryResult<
+        EstimatePositionQuery,
+        EstimatePositionQueryVariables
+      >);
+    const { result, rerender } = renderHook(() => usePositionEstimate(args));
+    expect(result.current).toEqual(mockData);
+    mockData = undefined;
+    rerender(true);
+    expect(result.current).toEqual({});
+  });
+});

libs/deal-ticket/src/hooks/use-position-estimate.ts

@@ -0,0 +1,38 @@
+import type {
+  EstimatePositionQueryVariables,
+  EstimatePositionQuery,
+} from '@vegaprotocol/positions';
+import { useEstimatePositionQuery } from '@vegaprotocol/positions';
+import { useEffect, useState } from 'react';
+
+interface PositionEstimateProps extends EstimatePositionQueryVariables {
+  skip: boolean;
+}
+
+export const usePositionEstimate = ({
+  marketId,
+  openVolume,
+  orders,
+  collateralAvailable,
+  skip,
+}: PositionEstimateProps) => {
+  const [estimates, setEstimates] = useState<EstimatePositionQuery | undefined>(
+    undefined
+  );
+  const { data } = useEstimatePositionQuery({
+    variables: {
+      marketId,
+      openVolume,
+      orders,
+      collateralAvailable,
+    },
+    skip,
+    fetchPolicy: 'no-cache',
+  });
+  useEffect(() => {
+    if (data) {
+      setEstimates(data);
+    }
+  }, [data]);
+  return estimates;
+};

libs/environment/src/components/network-switcher/network-switcher.tsx

@@ -87,7 +87,7 @@ export const NetworkSwitcher = ({
   className,
 }: NetworkSwitcherProps) => {
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
-  const tokenLink = useLinks(DApp.Token);
+  const tokenLink = useLinks(DApp.Governance);
   const [isOpen, setOpen] = useState(false);
   const [isAdvancedView, setAdvancedView] = useState(false);
 

libs/environment/src/hooks/use-links.ts

@@ -11,7 +11,7 @@ type Net = Exclude<Networks, 'CUSTOM'>;
 export enum DApp {
   Explorer = 'Explorer',
   Console = 'Console',
-  Token = 'Token',
+  Governance = 'Governance',
 }
 
 type DAppLinks = {
@@ -45,7 +45,7 @@ const ConsoleLinks = {
   [Networks.MAINNET_MIRROR]: 'https://console.mainnet-mirror.vega.rocks',
 };
 
-const TokenLinks = {
+const GovernanceLinks = {
   ...EmptyLinks,
   [Networks.DEVNET]: 'https://dev.governance.vega.xyz',
   [Networks.STAGNET1]: 'https://governance.stagnet1.vega.rocks',
@@ -59,7 +59,7 @@ const TokenLinks = {
 const Links: { [k in DApp]: DAppLinks } = {
   [DApp.Explorer]: ExplorerLinks,
   [DApp.Console]: ConsoleLinks,
-  [DApp.Token]: TokenLinks,
+  [DApp.Governance]: GovernanceLinks,
 };
 
 export const DocsLinks = VEGA_DOCS_URL
@@ -88,7 +88,7 @@ export const useLinks = (dapp: DApp, network?: Net) => {
     useEnvironment();
   const fallback = {
     [DApp.Explorer]: VEGA_EXPLORER_URL,
-    [DApp.Token]: VEGA_TOKEN_URL,
+    [DApp.Governance]: VEGA_TOKEN_URL,
     [DApp.Console]: VEGA_CONSOLE_URL,
   };
 
@@ -99,7 +99,10 @@ export const useLinks = (dapp: DApp, network?: Net) => {
 
   let baseUrl = trim(Links[dapp][net], '/');
   if (baseUrl.length === 0 && Object.keys(fallback).includes(dapp)) {
-    baseUrl = trim(fallback[dapp as DApp.Explorer | DApp.Token] || '', '/');
+    baseUrl = trim(
+      fallback[dapp as DApp.Explorer | DApp.Governance] || '',
+      '/'
+    );
   }
 
   const link = useCallback(
@@ -134,7 +137,7 @@ export const TOKEN_VALIDATOR = '/validators/:id';
  * Generates link to the protocol upgrade proposal details on Governance
  */
 export const useProtocolUpgradeProposalLink = () => {
-  const governance = useLinks(DApp.Token);
+  const governance = useLinks(DApp.Governance);
   return (releaseTag: string, blockHeight: string) =>
     governance(
       TOKEN_PROTOCOL_UPGRADE_PROPOSAL.replace(

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -277,7 +277,7 @@ const SuccessionLineItem = ({
   });
 
   const marketData = data?.market;
-  const governanceLink = useLinks(DApp.Token);
+  const governanceLink = useLinks(DApp.Governance);
   const proposalLink = marketData?.proposal?.id
     ? governanceLink(TOKEN_PROPOSAL.replace(':id', marketData?.proposal?.id))
     : undefined;
@@ -658,7 +658,7 @@ export const LiquidityMonitoringParametersInfoPanel = ({
           parentMarket.liquidityMonitoringParameters.targetStakeParameters
             .scalingFactor,
       }
-    : {};
+    : undefined;
 
   return <MarketInfoTable data={marketData} parentData={parentMarketData} />;
 };

libs/markets/src/lib/market-utils.ts

@@ -96,11 +96,15 @@ export const calcTradedFactor = (m: MarketMaybeWithDataAndCandles) => {
   const volume = Number(calcCandleVolume(m.candles || []) || 0);
   const price = m.data?.markPrice ? Number(m.data.markPrice) : 0;
   const quantum = Number(
-    m.tradableInstrument.instrument.product.settlementAsset.quantum
+    m.tradableInstrument.instrument.product.settlementAsset?.quantum
   );
   const decimals = Number(
-    m.tradableInstrument.instrument.product.settlementAsset.decimals
+    m.tradableInstrument.instrument.product.settlementAsset?.decimals
   );
+
+  // `settlementAsset` can be undefined hence there's no quantum or decimals
+  if (isNaN(quantum) || isNaN(decimals)) return 0;
+
   const fp = toBigNum(price, decimals);
   const fq = toBigNum(quantum, decimals);
   const factor = fq.multipliedBy(fp).multipliedBy(volume);

libs/positions/src/lib/positions-table.tsx

@@ -368,7 +368,7 @@ export const PositionsTable = ({
                 DocsLinks?.LOSS_SOCIALIZATION ?? '';
 
               if (!args.data) {
-                return <>-</>;
+                return null;
               }
 
               const losses = parseInt(
@@ -377,7 +377,9 @@ export const PositionsTable = ({
 
               if (losses <= 0) {
                 // eslint-disable-next-line react/jsx-no-useless-fragment
-                return <>{args.valueFormatted}</>;
+                return (
+                  <TooltipCellComponent {...args} value={args.valueFormatted} />
+                );
               }
 
               const lossesFormatted = addDecimalsFormatNumber(

libs/proposals/src/components/asset-proposal-notification.tsx

@@ -10,7 +10,7 @@ type AssetProposalNotificationProps = {
 export const AssetProposalNotification = ({
   assetId,
 }: AssetProposalNotificationProps) => {
-  const tokenLink = useLinks(DApp.Token);
+  const tokenLink = useLinks(DApp.Governance);
   const { data: proposal } = useUpdateProposal({
     id: assetId,
     proposalType: Schema.ProposalType.TYPE_UPDATE_ASSET,

libs/proposals/src/components/market-proposal-notification.tsx

@@ -10,7 +10,7 @@ type MarketProposalNotificationProps = {
 export const MarketProposalNotification = ({
   marketId,
 }: MarketProposalNotificationProps) => {
-  const tokenLink = useLinks(DApp.Token);
+  const tokenLink = useLinks(DApp.Governance);
   const { data: proposal } = useUpdateProposal({
     id: marketId,
     proposalType: Schema.ProposalType.TYPE_UPDATE_MARKET,

libs/proposals/src/components/proposal-actions-dropdown.tsx

@@ -9,7 +9,7 @@ import { t } from '@vegaprotocol/i18n';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 
 export const ProposalActionsDropdown = ({ id }: { id: string }) => {
-  const linkCreator = useLinks(DApp.Token);
+  const linkCreator = useLinks(DApp.Governance);
 
   return (
     <ActionsDropdown data-testid="proposal-actions-content">

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

@@ -26,7 +26,7 @@ const UpdateNetworkParameterToastContent = ({
 }: {
   proposal: Proposal;
 }) => {
-  const tokenLink = useLinks(DApp.Token);
+  const tokenLink = useLinks(DApp.Governance);
   const change = proposal.terms.change as UpdateNetworkParameter;
   const title = t('Network change proposal %s').replace(
     '%s',

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

@@ -1,7 +1,8 @@
 export const IconEyeOff = ({ size = 16 }: { size: number }) => {
   return (
     <svg width={size} height={size} viewBox="0 0 16 16">
-      <path d="M16 7.97v-.02-.01-.02-.02a.672.672 0 00-.17-.36c-.49-.63-1.07-1.2-1.65-1.72l-3.16 2.26a2.978 2.978 0 01-2.98 2.9c-.31 0-.6-.06-.88-.15L5.09 12.3c.44.19.9.36 1.37.47.97.23 1.94.24 2.92.05.88-.17 1.74-.54 2.53-.98 1.25-.7 2.39-1.67 3.38-2.75.18-.2.37-.41.53-.62.09-.1.15-.22.17-.36v-.02-.02-.01-.02-.03c.01-.02.01-.03.01-.04zm-.43-4.17c.25-.18.43-.46.43-.8 0-.55-.45-1-1-1-.22 0-.41.08-.57.2l-.01-.01-2.67 1.91c-.69-.38-1.41-.69-2.17-.87a6.8 6.8 0 00-2.91-.05c-.88.18-1.74.54-2.53.99-1.25.7-2.39 1.67-3.38 2.75-.18.2-.37.41-.53.62-.23.29-.23.63-.01.92.51.66 1.11 1.25 1.73 1.79.18.16.38.29.56.44l-2.09 1.5.01.01c-.25.18-.43.46-.43.8 0 .55.45 1 1 1 .22 0 .41-.08.57-.2l.01.01 14-10-.01-.01zm-10.41 5a3.03 3.03 0 01-.11-.8 2.99 2.99 0 012.99-2.98c.62 0 1.19.21 1.66.53L5.16 8.8z" />
+      <path d="M13.5 13.9989C13.4343 13.999 13.3693 13.9861 13.3086 13.961C13.248 13.9358 13.1929 13.8989 13.1466 13.8524L2.14658 2.85237C2.05677 2.75784 2.00744 2.63197 2.00911 2.50159C2.01077 2.37121 2.06331 2.24664 2.15551 2.15443C2.24771 2.06223 2.37228 2.0097 2.50266 2.00803C2.63304 2.00636 2.75892 2.05569 2.85345 2.1455L13.8534 13.1455C13.9233 13.2154 13.9709 13.3045 13.9902 13.4015C14.0095 13.4984 13.9996 13.5989 13.9617 13.6902C13.9239 13.7816 13.8599 13.8597 13.7777 13.9146C13.6955 13.9695 13.5989 13.9989 13.5 13.9989ZM7.98939 11.9989C6.69282 11.9989 5.44251 11.6152 4.27314 10.8583C3.20845 10.1708 2.25001 9.18612 1.50126 8.01456V8.01206C2.12439 7.11925 2.80689 6.36425 3.54001 5.7555C3.54664 5.74995 3.55205 5.74309 3.5559 5.73535C3.55975 5.72761 3.56194 5.71916 3.56235 5.71052C3.56277 5.70189 3.56138 5.69326 3.55829 5.68519C3.5552 5.67712 3.55046 5.66977 3.54439 5.66362L2.92189 5.04206C2.91083 5.03091 2.89597 5.02433 2.88028 5.02363C2.86458 5.02294 2.8492 5.02818 2.8372 5.03831C2.05845 5.69456 1.33564 6.49956 0.67845 7.44206C0.565383 7.60434 0.503113 7.79658 0.499551 7.99433C0.49599 8.19209 0.551299 8.38644 0.65845 8.55269C1.48376 9.84425 2.54595 10.9321 3.7297 11.698C5.06251 12.5614 6.49689 12.9989 7.98939 12.9989C8.795 12.9964 9.59491 12.8637 10.3581 12.6058C10.3682 12.6024 10.3772 12.5965 10.3844 12.5886C10.3915 12.5807 10.3965 12.5711 10.3989 12.5608C10.4013 12.5504 10.4011 12.5396 10.3981 12.5294C10.3952 12.5192 10.3897 12.5099 10.3822 12.5024L9.70782 11.828C9.6923 11.8129 9.6731 11.802 9.65212 11.7965C9.63113 11.7911 9.60909 11.7911 9.58814 11.7967C9.06587 11.9312 8.52869 11.9992 7.98939 11.9989ZM15.3388 7.45519C14.5119 6.17644 13.4391 5.09019 12.2366 4.31362C10.9063 3.45362 9.43751 2.99894 7.98939 2.99894C7.19232 3.00035 6.40116 3.13589 5.64908 3.39987C5.63905 3.40336 5.63009 3.40934 5.62302 3.41725C5.61595 3.42516 5.61101 3.43474 5.60866 3.44509C5.60632 3.45544 5.60664 3.46621 5.60961 3.4764C5.61258 3.48658 5.6181 3.49585 5.62564 3.50331L6.29908 4.17675C6.31475 4.19216 6.33422 4.20316 6.3555 4.20865C6.37679 4.21414 6.39915 4.21391 6.42032 4.208C6.93188 4.06962 7.45945 3.99932 7.98939 3.99894C9.26095 3.99894 10.5075 4.38737 11.6941 5.15519C12.7788 5.85519 13.7485 6.83894 14.4991 7.99894C14.4996 7.99965 14.4999 8.00053 14.4999 8.00144C14.4999 8.00234 14.4996 8.00322 14.4991 8.00394C13.9542 8.86173 13.2781 9.62867 12.4953 10.2767C12.4886 10.2823 12.4831 10.2891 12.4792 10.2969C12.4753 10.3046 12.4731 10.3131 12.4727 10.3218C12.4722 10.3305 12.4736 10.3392 12.4767 10.3473C12.4798 10.3554 12.4845 10.3628 12.4906 10.3689L13.1125 10.9905C13.1235 11.0016 13.1383 11.0082 13.1539 11.0089C13.1695 11.0097 13.1849 11.0046 13.1969 10.9946C14.0325 10.291 14.7558 9.46395 15.3419 8.54206C15.4455 8.37961 15.5002 8.19083 15.4997 7.99817C15.4991 7.8055 15.4433 7.61704 15.3388 7.45519Z" />
+      <path d="M8.00002 4.99777C7.77531 4.99765 7.5513 5.02281 7.33221 5.07277C7.32114 5.07507 7.31091 5.08033 7.30259 5.08798C7.29428 5.09563 7.28819 5.1054 7.28498 5.11624C7.28178 5.12707 7.28157 5.13858 7.28438 5.14952C7.2872 5.16047 7.29293 5.17045 7.30096 5.1784L10.8194 8.6959C10.8273 8.70393 10.8373 8.70966 10.8483 8.71247C10.8592 8.71529 10.8707 8.71508 10.8816 8.71187C10.8924 8.70867 10.9022 8.70258 10.9098 8.69427C10.9175 8.68595 10.9227 8.67571 10.925 8.66465C11.0252 8.22529 11.0251 7.769 10.9247 7.32968C10.8244 6.89036 10.6263 6.47929 10.3453 6.127C10.0643 5.77472 9.70756 5.49026 9.30153 5.29477C8.89551 5.09928 8.45066 4.99776 8.00002 4.99777ZM5.18065 7.29965C5.1727 7.29161 5.16272 7.28588 5.15177 7.28307C5.14083 7.28026 5.12932 7.28047 5.11849 7.28367C5.10765 7.28688 5.09788 7.29296 5.09023 7.30128C5.08257 7.3096 5.07732 7.31983 5.07502 7.3309C4.96169 7.82601 4.97592 8.34178 5.11638 8.82989C5.25684 9.318 5.51892 9.76245 5.87807 10.1216C6.23722 10.4807 6.68167 10.7428 7.16978 10.8833C7.65789 11.0237 8.17366 11.038 8.66877 10.9246C8.67984 10.9223 8.69007 10.9171 8.69839 10.9094C8.70671 10.9018 8.71279 10.892 8.716 10.8812C8.7192 10.8703 8.71941 10.8588 8.7166 10.8479C8.71379 10.8369 8.70806 10.827 8.70002 10.819L5.18065 7.29965Z" />
     </svg>
   );
 };

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

@@ -113,7 +113,9 @@ export const Tabs = ({
           return (
             <TabsPrimitive.Content
               value={child.props.id}
-              className="h-full"
+              className={classNames('h-full', {
+                'overflow-hidden': child.props.overflowHidden,
+              })}
               data-testid={`tab-${child.props.id}`}
             >
               {child.props.children}
@@ -131,6 +133,7 @@ interface TabProps {
   name: string;
   indicator?: ReactNode;
   hidden?: boolean;
+  overflowHidden?: boolean;
   menu?: ReactNode;
 }
 

libs/ui-toolkit/src/components/trading-button/trading-button.tsx

@@ -6,6 +6,7 @@ import type {
   ReactNode,
 } from 'react';
 import { Intent } from '../../utils/intent';
+import { Link } from 'react-router-dom';
 
 type TradingButtonProps = {
   size?: 'large' | 'medium' | 'small' | 'extra-small';
@@ -119,30 +120,22 @@ export const TradingButton = forwardRef<
   )
 );
 
-export const TradingAnchorButton = forwardRef<
-  HTMLAnchorElement,
-  AnchorHTMLAttributes<HTMLAnchorElement> & TradingButtonProps
->(
-  (
-    {
-      size = 'medium',
-      intent = Intent.None,
-      icon,
-      href,
-      children,
-      className,
-      subLabel,
-      ...props
-    },
-    ref
-  ) => (
-    <a
-      ref={ref}
-      href={href}
-      className={getClassName({ size, subLabel, intent }, className)}
-      {...props}
-    >
-      <Content icon={icon} subLabel={subLabel} children={children} />
-    </a>
-  )
+export const TradingAnchorButton = ({
+  size = 'medium',
+  intent = Intent.None,
+  icon,
+  href,
+  children,
+  className,
+  subLabel,
+  ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement> &
+  TradingButtonProps & { href: string }) => (
+  <Link
+    to={href}
+    className={getClassName({ size, subLabel, intent }, className)}
+    {...props}
+  >
+    <Content icon={icon} subLabel={subLabel} children={children} />
+  </Link>
 );

libs/wallet/src/connectors/vega-connector.ts

@@ -388,6 +388,24 @@ export interface TransferBody {
   transfer: Transfer;
 }
 
+export type ApplyReferralCode = {
+  applyReferralCode: {
+    id: string;
+  };
+};
+
+export type CreateReferralSet = {
+  createReferralSet: {
+    isTeam: boolean;
+    team?: {
+      name: string;
+      teamUrl?: string;
+      avatarUrl?: string;
+      closed: boolean;
+    };
+  };
+};
+
 export type Transaction =
   | StopOrdersSubmissionBody
   | StopOrdersCancellationBody
@@ -401,7 +419,9 @@ export type Transaction =
   | ProposalSubmissionBody
   | BatchMarketInstructionSubmissionBody
   | TransferBody
-  | LiquidityProvisionSubmission;
+  | LiquidityProvisionSubmission
+  | ApplyReferralCode
+  | CreateReferralSet;
 
 export const isWithdrawTransaction = (
   transaction: Transaction

libs/web3/src/lib/use-ethereum-transaction-manager.spec.tsx

@@ -15,6 +15,7 @@ const requestedTransactionUpdate = {
   status: EthTxStatus.Requested,
   error: null,
   confirmations: 0,
+  notify: true,
 };
 
 const mockDepositAsset = jest.fn();
@@ -57,6 +58,7 @@ const createTransaction = (
   dialogOpen: false,
   txHash: null,
   receipt: null,
+  notify: true,
   ...transaction,
 });
 
@@ -158,6 +160,7 @@ describe('useVegaTransactionManager', () => {
     expect(update.mock.calls[1][1]).toEqual({
       status: EthTxStatus.Pending,
       txHash,
+      notify: true,
     });
   });
 
@@ -197,6 +200,7 @@ describe('useVegaTransactionManager', () => {
     expect(update.mock.calls[3][1]).toEqual({
       status: EthTxStatus.Confirmed,
       receipt,
+      notify: true,
     });
   });
 

libs/web3/src/lib/use-ethereum-transaction-manager.tsx

@@ -25,6 +25,7 @@ export const useEthTransactionManager = () => {
       status: EthTxStatus.Requested,
       error: null,
       confirmations: 0,
+      notify: true,
     });
     const {
       contract,
@@ -48,6 +49,7 @@ export const useEthTransactionManager = () => {
         update(transaction.id, {
           status: EthTxStatus.Error,
           error: err as EthereumError,
+          notify: true,
         });
         return;
       }
@@ -61,6 +63,7 @@ export const useEthTransactionManager = () => {
         update(transaction.id, {
           status: EthTxStatus.Pending,
           txHash: tx.hash,
+          notify: true,
         });
 
         for (let i = 1; i <= requiredConfirmations; i++) {
@@ -77,19 +80,31 @@ export const useEthTransactionManager = () => {
         }
 
         if (requiresConfirmation) {
-          update(transaction.id, { status: EthTxStatus.Complete, receipt });
+          update(transaction.id, {
+            status: EthTxStatus.Complete,
+            receipt,
+          });
         } else {
-          update(transaction.id, { status: EthTxStatus.Confirmed, receipt });
+          update(transaction.id, {
+            status: EthTxStatus.Confirmed,
+            receipt,
+            notify: true,
+          });
         }
       } catch (err) {
         if (err instanceof Error || isEthereumError(err)) {
           if (!isExpectedEthereumError(err)) {
-            update(transaction.id, { status: EthTxStatus.Error, error: err });
+            update(transaction.id, {
+              status: EthTxStatus.Error,
+              error: err,
+              notify: true,
+            });
           }
         } else {
           update(transaction.id, {
             status: EthTxStatus.Error,
             error: new Error('Something went wrong'),
+            notify: true,
           });
         }
         return;

libs/web3/src/lib/use-ethereum-transaction-store.tsx

@@ -27,7 +27,13 @@ export interface EthStoredTxState extends EthTxState {
   methodName: ContractMethod;
   args: string[];
   requiredConfirmations: number;
-  requiresConfirmation: boolean; // whether or not the tx needs external confirmation (IE from a subscription even)
+  // whether or not the tx needs external confirmation (IE from a subscription even)
+  requiresConfirmation: boolean;
+  // whether or not to notify via toast
+  // true = force open toast
+  // false = force close toast
+  // undefined = leave alone
+  notify: boolean | undefined;
   assetId?: string;
   deposit?: DepositBusEventFieldsFragment;
   withdrawal?: WithdrawalBusEventFieldsFragment;
@@ -49,7 +55,7 @@ export interface EthTransactionStore {
     update?: Partial<
       Pick<
         EthStoredTxState,
-        'status' | 'error' | 'receipt' | 'confirmations' | 'txHash'
+        'status' | 'error' | 'receipt' | 'confirmations' | 'txHash' | 'notify'
       >
     >
   ) => void;
@@ -89,6 +95,7 @@ export const useEthTransactionStore = create<EthTransactionStore>()(
         requiresConfirmation,
         assetId,
         withdrawal,
+        notify: true,
       };
       set({ transactions: transactions.concat(transaction) });
       return transaction.id;
@@ -135,6 +142,7 @@ export const useEthTransactionStore = create<EthTransactionStore>()(
           transaction.deposit = deposit;
           transaction.dialogOpen = true;
           transaction.updatedAt = new Date();
+          transaction.notify = true;
         })
       );
     },

libs/web3/src/lib/use-ethereum-transaction-toasts.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { useEffect } from 'react';
 import { useAssetsDataProvider } from '@vegaprotocol/assets';
 import { EtherscanLink } from '@vegaprotocol/environment';
 import { formatNumber, toBigNum } from '@vegaprotocol/utils';
@@ -169,11 +170,13 @@ export const useEthereumTransactionToasts = () => {
   ]);
 
   const dismissTx = useEthTransactionStore((state) => state.dismiss);
+  const updateTx = useEthTransactionStore((state) => state.update);
 
   const onClose = useCallback(
     (tx: EthStoredTxState) => () => {
       dismissTx(tx.id);
       removeToast(`eth-${tx.id}`);
+      updateTx(tx.id, { notify: false });
       // closes related "Funds released" toast after successful withdrawal
       if (
         isWithdrawTransaction(tx) &&
@@ -183,7 +186,7 @@ export const useEthereumTransactionToasts = () => {
         closeToastBy({ withdrawalId: tx.withdrawal.id });
       }
     },
-    [closeToastBy, dismissTx, removeToast]
+    [closeToastBy, dismissTx, removeToast, updateTx]
   );
 
   const fromEthTransaction = useCallback(
@@ -213,17 +216,25 @@ export const useEthereumTransactionToasts = () => {
         loader: [EthTxStatus.Pending, EthTxStatus.Complete].includes(tx.status),
         content,
         closeAfter,
+        hidden: !tx.notify,
       };
     },
     [onClose]
   );
 
-  useEthTransactionStore.subscribe(
-    (state) => compact(state.transactions.filter((tx) => tx?.dialogOpen)),
-    (txs) => {
-      txs.forEach((tx) => {
-        setToast(fromEthTransaction(tx));
-      });
-    }
-  );
+  // Only register a subscription once
+  useEffect(() => {
+    const unsubscribe = useEthTransactionStore.subscribe(
+      (state) => compact(state.transactions.filter((tx) => tx?.dialogOpen)),
+      (txs) => {
+        txs.forEach((tx) => {
+          setToast(fromEthTransaction(tx));
+        });
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [fromEthTransaction, setToast]);
 };

package.json

@@ -212,7 +212,7 @@
     "style-loader": "^3.3.0",
     "stylus": "^0.55.0",
     "stylus-loader": "^7.1.0",
-    "tailwindcss": "3.2.7",
+    "tailwindcss": "3.3.3",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
     "tslib": "^2.3.0",

yarn.lock

@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.0.1.tgz#b38b444ad3aa5fedbb15f2f746dcd934226a12dd"
   integrity sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@^2.1.0", "@ampproject/remapping@^2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -9629,16 +9634,7 @@ acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-node@^1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^7.0.0, acorn-walk@^7.2.0:
+acorn-walk@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
@@ -9648,7 +9644,7 @@ acorn-walk@^8.0.2, acorn-walk@^8.1.1, acorn-walk@^8.2.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^7.0.0, acorn@^7.4.1:
+acorn@^7.4.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -9899,6 +9895,11 @@ any-observable@^0.3.0:
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
   integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -12972,11 +12973,6 @@ define-properties@^1.2.0:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defined@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
-  integrity sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==
-
 defu@^6.1.2:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.2.tgz#1217cba167410a1765ba93893c6dbac9ed9d9e5c"
@@ -13088,15 +13084,6 @@ detect-port@^1.3.0, detect-port@^1.5.1:
     address "^1.0.1"
     debug "4"
 
-detective@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
-  integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
-  dependencies:
-    acorn-node "^1.8.2"
-    defined "^1.0.0"
-    minimist "^1.2.6"
-
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -15330,6 +15317,18 @@ glob@7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@7.1.7, glob@~7.1.1:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
@@ -16401,6 +16400,13 @@ is-core-module@^2.11.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
+  integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
+  dependencies:
+    has "^1.0.3"
+
 is-core-module@^2.5.0, is-core-module@^2.8.1:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
@@ -17443,6 +17449,11 @@ jest@29.4.3:
     import-local "^3.0.2"
     jest-cli "^29.4.3"
 
+jiti@^1.18.2:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42"
+  integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==
+
 js-sha3@0.8.0, js-sha3@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
@@ -17888,7 +17899,7 @@ lilconfig@^2.0.3, lilconfig@^2.1.0:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
 
-lilconfig@^2.0.5, lilconfig@^2.0.6:
+lilconfig@^2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
@@ -19278,6 +19289,15 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nanoid@3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
@@ -19630,7 +19650,7 @@ nx@16.4.0:
     "@nx/nx-win32-arm64-msvc" "16.4.0"
     "@nx/nx-win32-x64-msvc" "16.4.0"
 
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -20370,6 +20390,11 @@ pino@7.11.0:
     sonic-boom "^2.2.1"
     thread-stream "^0.15.1"
 
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
 pirates@^4.0.4, pirates@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
@@ -20519,7 +20544,16 @@ postcss-discard-overridden@^6.0.0:
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-6.0.0.tgz#49c5262db14e975e349692d9024442de7cd8e234"
   integrity sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==
 
-postcss-import@^14.1.0, postcss-import@~14.1.0:
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-import@~14.1.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
   integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
@@ -20528,14 +20562,14 @@ postcss-import@^14.1.0, postcss-import@~14.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
-  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^3.0.0, postcss-load-config@^3.1.4:
+postcss-load-config@^3.0.0:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
   integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
@@ -20543,6 +20577,14 @@ postcss-load-config@^3.0.0, postcss-load-config@^3.1.4:
     lilconfig "^2.0.5"
     yaml "^1.10.2"
 
+postcss-load-config@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
+  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
+  dependencies:
+    lilconfig "^2.0.5"
+    yaml "^2.1.1"
+
 postcss-loader@^6.1.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
@@ -20703,12 +20745,12 @@ postcss-modules@^4.0.0:
     postcss-modules-values "^4.0.0"
     string-hash "^1.1.1"
 
-postcss-nested@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
-  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
   dependencies:
-    postcss-selector-parser "^6.0.10"
+    postcss-selector-parser "^6.0.11"
 
 postcss-normalize-charset@^5.1.0:
   version "5.1.0"
@@ -20881,14 +20923,6 @@ postcss-reduce-transforms@^6.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
-  version "6.0.10"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
-  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
 postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
@@ -20897,6 +20931,14 @@ postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.5, postcss-selecto
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-svgo@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
@@ -20955,7 +20997,7 @@ postcss@8.4.21:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.0.9, postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.24:
+postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.24:
   version "8.4.24"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
   integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
@@ -20964,6 +21006,15 @@ postcss@^8.0.9, postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.24:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.23:
+  version "8.4.29"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
+  integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 preact@10.4.1:
   version "10.4.1"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"
@@ -22133,6 +22184,15 @@ resolve@^1.17.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.2:
+  version "1.22.6"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.6.tgz#dd209739eca3aef739c626fea1b4f3c506195362"
+  integrity sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
@@ -23475,6 +23535,19 @@ stylus@^0.59.0:
     sax "~1.2.4"
     source-map "^0.7.3"
 
+sucrase@^3.32.0:
+  version "3.34.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
+  integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 superstruct@^0.14.2:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.14.2.tgz#0dbcdf3d83676588828f1cf5ed35cda02f59025b"
@@ -23600,34 +23673,33 @@ table@6.8.0:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwindcss@3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.7.tgz#5936dd08c250b05180f0944500c01dce19188c07"
-  integrity sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==
+tailwindcss@3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
+  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
   dependencies:
+    "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
-    color-name "^1.1.4"
-    detective "^5.2.1"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
     fast-glob "^3.2.12"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    lilconfig "^2.0.6"
+    jiti "^1.18.2"
+    lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.0.9"
-    postcss-import "^14.1.0"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.4"
-    postcss-nested "6.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
     postcss-selector-parser "^6.0.11"
-    postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.1"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
 
 tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
   version "2.2.1"
@@ -23790,6 +23862,20 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 thread-stream@^0.15.1:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-0.15.2.tgz#fb95ad87d2f1e28f07116eb23d85aba3bc0425f4"
@@ -23954,6 +24040,11 @@ ts-dedent@^2.0.0, ts-dedent@^2.2.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 ts-invariant@^0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
@@ -25172,7 +25263,7 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
@@ -25212,6 +25303,11 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.1.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
+  integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
+
 yargs-parser@20.2.4:
   version "20.2.4"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"