fix(trading): fix formatting on price bounds

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

apps/explorer-e2e/src/integration/asset.cy.js

@@ -8,7 +8,7 @@ context('Asset page', { tags: '@regression' }, () => {
 
     it('should be able to see full assets list', () => {
       cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
+        assets.forEach((asset) => {
           cy.get(`[row-id="${asset.id}"]`).should('be.visible');
         });
       });
@@ -25,7 +25,7 @@ context('Asset page', { tags: '@regression' }, () => {
       });
 
       cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
+        assets.forEach((asset) => {
           cy.get(`[row-id="${asset.id}"]`).should('be.visible');
         });
       });
@@ -33,7 +33,7 @@ context('Asset page', { tags: '@regression' }, () => {
 
     it('should open details page when clicked on "View details"', () => {
       cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
+        assets.forEach((asset) => {
           cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
             .eq(0)
             .should('contain.text', 'View details');

apps/explorer-e2e/src/integration/validator.cy.js

@@ -1,303 +1,15 @@
 context('Validator page', { tags: '@smoke' }, function () {
-  const validatorMenuHeading = 'a[href="/validators"]';
-  const tendermintDataHeader = '[data-testid="tendermint-header"]';
-  const vegaDataHeader = '[data-testid="vega-header"]';
-  const jsonSection = '.language-json';
-
   before('Visit validators page and obtain data', function () {
-    cy.visit('/');
-    cy.get(validatorMenuHeading).click();
-    cy.get_validators().as('validators');
-    cy.get_nodes().as('nodes');
+    cy.visit('/validators');
   });
 
   describe('Verify elements on page', function () {
-    before('Ensure at least two validators are present', function () {
-      assert.isAtLeast(
-        this.validators.length,
-        2,
-        'Ensuring at least two validators exist'
-      );
-    });
-
-    it('should be able to see validator page sections', function () {
-      cy.get(vegaDataHeader)
-        .contains('Vega data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-    });
-
-    it('should be able to see relevant validator information in tendermint section', function () {
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .next()
-        .within(() => {
-          cy.get(jsonSection)
-            .invoke('text')
-            .convert_string_json_to_js_object()
-            .then((validatorsInJson) => {
-              this.validators.forEach((validator, index) => {
-                const validatorInJson =
-                  validatorsInJson.result.validators[index];
-
-                assert.equal(
-                  validatorInJson.address,
-                  validator.address,
-                  `Checking that validator address shown in json matches system data`
-                );
-                cy.contains(validator.address).should('be.visible');
-
-                assert.equal(
-                  validatorInJson.pub_key.type,
-                  validator.pub_key.type,
-                  `Checking that validator public key type shown in json matches system data`
-                );
-                cy.contains(validator.pub_key.type).should('be.visible');
-
-                assert.equal(
-                  validatorInJson.pub_key.value,
-                  validator.pub_key.value,
-                  `Checking that validator public key value shown in json matches system data`
-                );
-                cy.contains(validator.pub_key.value).should('be.visible');
-
-                assert.equal(
-                  validatorInJson.voting_power,
-                  validator.voting_power,
-                  `Checking that validator voting power in json matches system data`
-                );
-                cy.contains(validator.voting_power).should('be.visible');
-
-                // Proposer priority can change frequently mid test
-                // Therefore only checking the field name is present.
-                cy.contains('proposer_priority').should('be.visible');
-              });
-            });
-        });
-    });
-
-    // Test disabled 2022/11/15 during the 0.62.1 upgrade. The JSON structure changed, and
-    // this test failed. Rather than fix it, it will be replaced when the validator view displays
-    // something useful rather than just dumping out the JSON.
-    xit('should be able to see relevant node information in vega data section', function () {
-      cy.get(vegaDataHeader)
-        .contains('Vega data')
-        .next()
-        .within(() => {
-          cy.get(jsonSection)
-            .invoke('text')
-            .convert_string_json_to_js_object()
-            .then((nodesInJson) => {
-              this.nodes.forEach((node, index) => {
-                const nodeInJson = nodesInJson.edges[index].node;
-
-                // Vegacapsule shows no info or null for following fields:
-                // name, infoURL, avatarUrl, location, epoch data
-                // Therefore, these values remain unchecked.
-
-                assert.equal(
-                  nodeInJson.__typename,
-                  node.__typename,
-                  `Checking that node __typename shown in json matches system data`
-                );
-                cy.contains(node.__typename).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.id,
-                  node.id,
-                  `Checking that node id shown in json matches system data`
-                );
-                cy.contains(node.id).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.pubkey,
-                  node.pubkey,
-                  `Checking that node pubkey shown in json matches system data`
-                );
-                cy.contains(node.pubkey).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.tmPubkey,
-                  node.tmPubkey,
-                  `Checking that node tmPubkey shown in json matches system data`
-                );
-                cy.contains(node.tmPubkey).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.ethereumAddress,
-                  node.ethereumAddress,
-                  `Checking that node ethereumAddress shown in json matches system data`
-                );
-                cy.contains(node.ethereumAddress).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.stakedByOperator,
-                  node.stakedByOperator,
-                  `Checking that node stakedByOperator value shown in json matches system data`
-                );
-                cy.contains(node.stakedByOperator).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.stakedByDelegates,
-                  node.stakedByDelegates,
-                  `Checking that node stakedByDelegates value shown in json matches system data`
-                );
-                cy.contains(node.stakedByDelegates).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.stakedTotal,
-                  node.stakedTotal,
-                  `Checking that node stakedTotal shown in json matches system data`
-                );
-                cy.contains(node.stakedTotal).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.pendingStake,
-                  node.pendingStake,
-                  `Checking that node pendingStake shown in json matches system data`
-                );
-                cy.contains(node.pendingStake).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.status,
-                  node.status,
-                  `Checking that node status shown in json matches system data`
-                );
-                cy.contains(node.status).should('be.visible');
-              });
-            });
-        });
-    });
-
-    it('should be able to see validator page displayed on mobile', function () {
-      cy.common_switch_to_mobile_and_click_toggle();
-      cy.get(validatorMenuHeading).click();
-      cy.get(vegaDataHeader)
-        .contains('Vega data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .next()
-        .within(() => {
-          this.validators.forEach((validator) => {
-            cy.contains(validator.address).should('be.visible');
-            cy.contains(validator.pub_key.type).should('be.visible');
-            cy.contains(validator.pub_key.value).should('be.visible');
-            cy.contains(validator.voting_power).should('be.visible');
-            // Proposer priority can change frequently mid test
-            // Therefore only checking the field name is present.
-            cy.contains('proposer_priority').should('be.visible');
-          });
-        });
-    });
-
-    it('should be able to switch validator page between light and dark mode', function () {
-      const whiteThemeSelectedMenuOptionColor = 'rgb(255, 7, 127)';
-      const whiteThemeJsonFieldBackColor = 'rgb(255, 255, 255)';
-      const whiteThemeSideMenuBackgroundColor = 'rgb(255, 255, 255)';
-      const darkThemeSelectedMenuOptionColor = 'rgb(215, 251, 80)';
-      const darkThemeJsonFieldBackColor = 'rgb(38, 38, 38)';
-      const darkThemeSideMenuBackgroundColor = 'rgb(0, 0, 0)';
-      const themeSwitcher = '[data-testid="theme-switcher"]';
-      const jsonFields = '.hljs';
-      const sideMenuBackground = '.absolute';
-
-      // Engage dark mode if not allready set
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .then((background_color) => {
-          if (background_color.includes(whiteThemeSideMenuBackgroundColor))
-            cy.get(themeSwitcher).click();
-        });
-
-      // Engage white mode
-      cy.get(themeSwitcher).click();
-
-      // White Mode
-      cy.get(validatorMenuHeading)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSideMenuBackgroundColor);
-
-      // Dark Mode
-      cy.get(themeSwitcher).click();
-      cy.get(validatorMenuHeading)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSideMenuBackgroundColor);
-    });
-
-    Cypress.Commands.add('get_validators', () => {
-      cy.request({
-        method: 'GET',
-        url: `http://localhost:26617/validators`,
-        headers: { 'content-type': 'application/json' },
-      })
-        .its(`body.result.validators`)
-        .then(function (response) {
-          let validators = [];
-          response.forEach((account, index) => {
-            validators[index] = account;
-          });
-          return validators;
-        });
-    });
-
-    Cypress.Commands.add('get_nodes', () => {
-      const mutation =
-        '{nodesConnection { edges { node { id name infoUrl avatarUrl pubkey tmPubkey ethereumAddress \
-          location stakedByOperator stakedByDelegates stakedTotal pendingStake \
-          epochData { total offline online __typename } status name __typename}}}}';
-      cy.request({
-        method: 'POST',
-        url: `http://localhost:3028/query`,
-        body: {
-          query: mutation,
-        },
-        headers: { 'content-type': 'application/json' },
-      })
-        .its(`body.data.nodesConnection.edges`)
-        .then(function (response) {
-          let nodes = [];
-          response.forEach((node) => {
-            nodes.push(node);
-          });
-          return nodes;
+    it('should be able to see validator tiles', function () {
+      cy.getNodes().then((nodes) => {
+        nodes.forEach((node) => {
+          cy.get(`[validator-id="${node.id}"]`).should('be.visible');
         });
+      });
     });
   });
 });

apps/explorer/src/app/app.tsx

@@ -40,9 +40,9 @@ function App() {
       <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
         <AnnouncementBanner>
           <div className="font-alpha calt uppercase text-center text-lg text-white">
-            <span className="pr-4">Mainnet sim 2 coming in March!</span>
+            <span className="pr-4">Mainnet sim 2 is live!</span>
             <ExternalLink href="https://fairground.wtf/">
-              Learn more
+              Come help stress test the network
             </ExternalLink>
           </div>
         </AnnouncementBanner>

apps/explorer/src/app/components/empty-list/empty-list.tsx

@@ -19,12 +19,12 @@ const EmptyList = ({ heading, label }: EmptyListProps) => {
 
       <div className="mt-4">
         {heading ? (
-          <h1 className="font-alpha text-xl uppercase text-center leading-relaxed">
+          <h1 className="font-alpha calt text-xl uppercase text-center leading-relaxed">
             {heading}
           </h1>
         ) : null}
         {label ? (
-          <p className="font-alpha text-gray-500 text-center">{label}</p>
+          <p className="font-alpha calt text-gray-500 text-center">{label}</p>
         ) : null}
       </div>
     </div>

apps/explorer/src/app/components/markets/market-details.tsx

@@ -184,9 +184,8 @@ export const MarketDetails = ({
       content: (
         <>
           <p className="text-xs mb-4">
-            {`For liquidity orders count towards a commitment they have to be
-        within either the liquidity or price monitoring bounds (whichever is
-        tighter).`}
+            {`For liquidity orders to count towards a commitment, they must be
+            within the liquidity monitoring bounds.`}
           </p>
           <p className="text-xs mb-4">
             {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
@@ -249,7 +248,7 @@ export const MarketDetails = ({
     <>
       {panels.map((p) => (
         <div className="mb-3">
-          <h2 className="font-alpha text-xl">{p.title}</h2>
+          <h2 className="font-alpha calt text-xl">{p.title}</h2>
           {p.content}
         </div>
       ))}

apps/explorer/src/app/components/nested-data-list/nested-data-list.tsx

@@ -83,7 +83,7 @@ const NestedDataListItem = ({
   });
 
   const titleClasses = classNames({
-    'text-xl pl-4 border-l-4 font-alpha': hasChildren,
+    'text-xl pl-4 border-l-4 font-alpha calt': hasChildren,
     'text-base font-medium whitespace-nowrap': !hasChildren,
   });
 

apps/explorer/src/app/components/page-header/page-header.tsx

@@ -20,7 +20,7 @@ export const PageHeader = ({
   copy = false,
   className,
 }: PageHeaderProps) => {
-  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha';
+  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha calt';
   return (
     <header className={className}>
       <span className={`${titleClasses} block`}>{prefix}</span>

apps/explorer/src/app/components/page-helpers/index.ts

@@ -0,0 +1 @@
+export * from './page-actions';

apps/explorer/src/app/components/page-helpers/page-actions.tsx

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+export const PageActions = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className="flex flex-row items-start gap-1" {...props}>
+    {children}
+  </div>
+);

apps/explorer/src/app/components/page-helpers/page-title.tsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import { RouteTitle } from '../route-title';
+import { PageActions } from './page-actions';
+
+type PageTitleProps = {
+  /**
+   * The page title
+   * (also sets the document title unless overwritten by
+   * `documentTitle` property)
+   */
+  title: string;
+  /**
+   * The react node that consists of CTA buttons, links, etc.
+   */
+  actions?: ReactNode;
+  /**
+   * Overwrites the document title
+   */
+  documentTitle?: Parameters<typeof useDocumentTitle>[0];
+} & Omit<HTMLAttributes<HTMLHeadingElement>, 'children'>;
+
+export const PageTitle = ({
+  title,
+  actions,
+  documentTitle,
+  className,
+  ...props
+}: PageTitleProps) => {
+  useDocumentTitle(
+    documentTitle && documentTitle.length > 0 ? documentTitle : [title]
+  );
+  return (
+    <div
+      className="flex flex-col md:flex-row gap-1 justify-between content-start mb-8"
+      data-testid="page-title"
+    >
+      <RouteTitle className={classNames('mb-1', className)} {...props}>
+        {title}
+      </RouteTitle>
+      {actions && <PageActions>{actions}</PageActions>}
+    </div>
+  );
+};

apps/explorer/src/app/components/route-title/index.tsx

@@ -13,7 +13,7 @@ export const RouteTitle = ({
   ...props
 }: RouteTitleProps) => {
   const classes = classnames(
-    'font-alpha',
+    'font-alpha calt',
     'text-4xl',
     'uppercase',
     'mb-8',

apps/explorer/src/app/components/status-message/index.tsx

@@ -11,7 +11,7 @@ export const StatusMessage = ({
   className,
   ...props
 }: StatusMessageProps) => {
-  const classes = classnames('font-alpha text-2xl mb-28', className);
+  const classes = classnames('font-alpha calt text-2xl mb-28', className);
   return (
     <h3 className={classes} {...props}>
       {children}

apps/explorer/src/app/components/sub-heading/index.tsx

@@ -12,7 +12,7 @@ export const SubHeading = ({
   ...props
 }: SubHeadingProps) => {
   const classes = classnames(
-    'font-alpha',
+    'font-alpha calt',
     'text-2xl',
     'uppercase',
     'mt-8 mb-2',

apps/explorer/src/app/components/txs/details/transfer/transfer-details.tsx

@@ -9,7 +9,7 @@ export type Metric = components['schemas']['vegaDispatchMetric'];
 export const wrapperClasses =
   'border border-vega-light-150 dark:border-vega-dark-200 rounded-md pv-2 mb-5 w-full sm:w-1/4 min-w-[200px] ';
 export const headerClasses =
-  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha';
+  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha calt';
 
 export type Transfer = components['schemas']['commandsv1Transfer'];
 

apps/explorer/src/app/hooks/use-tendermint-validators.ts

@@ -0,0 +1,55 @@
+import { useFetch } from '@vegaprotocol/react-helpers';
+import { useEffect, useRef } from 'react';
+import { DATA_SOURCES } from '../config';
+
+type PubKey = {
+  type: string;
+  value: string;
+};
+
+type Validator = {
+  address: string;
+  pub_key: PubKey;
+  voting_power: string;
+  proposer_priority: string;
+};
+
+type Result = {
+  block_height: string;
+  validators: Validator[];
+  count: string;
+  total: string;
+};
+
+type TendermintValidatorsResponse = {
+  jsonrpc: string;
+  id: number;
+  result: Result;
+};
+
+export const useTendermintValidators = (pollInterval?: number) => {
+  const {
+    state: { data, loading, error },
+    refetch,
+  } = useFetch<TendermintValidatorsResponse>(
+    `${DATA_SOURCES.tendermintUrl}/validators`
+  );
+
+  const ref = useRef<TendermintValidatorsResponse | undefined>(undefined);
+  useEffect(() => {
+    if (data) ref.current = data;
+  }, [data]);
+
+  useEffect(() => {
+    const interval =
+      pollInterval &&
+      setInterval(() => {
+        refetch();
+      }, pollInterval);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [pollInterval, refetch]);
+
+  return { data: ref.current, loading, error, refetch };
+};

apps/explorer/src/app/routes/assets/asset-page.tsx

@@ -1,5 +1,4 @@
 import { t } from '@vegaprotocol/react-helpers';
-import { RouteTitle } from '../../components/route-title';
 import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { useScrollToLocation } from '../../hooks/scroll-to-location';
 import { useDocumentTitle } from '../../hooks/use-document-title';
@@ -8,6 +7,7 @@ import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
 import { useParams } from 'react-router-dom';
 import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { useState } from 'react';
+import { PageTitle } from '../../components/page-helpers/page-title';
 
 export const AssetPage = () => {
   useDocumentTitle(['Assets']);
@@ -22,18 +22,25 @@ export const AssetPage = () => {
   return (
     <>
       <section className="relative">
-        <RouteTitle data-testid="asset-header">{title}</RouteTitle>
+        <PageTitle
+          data-testid="asset-header"
+          title={title}
+          actions={
+            <Button
+              disabled={!data}
+              size="xs"
+              onClick={() => setDialogOpen(true)}
+            >
+              {t('View JSON')}
+            </Button>
+          }
+        />
         <AsyncRenderer
           noDataMessage={t('Asset not found')}
           data={data}
           loading={loading}
           error={error}
         >
-          <div className="absolute top-0 right-0">
-            <Button size="xs" onClick={() => setDialogOpen(true)}>
-              {t('View JSON')}
-            </Button>
-          </div>
           <div className="h-full relative">
             <AssetDetailsTable asset={data as AssetFieldsFragment} />
           </div>

apps/explorer/src/app/routes/markets/market-page.tsx

@@ -3,12 +3,12 @@ import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { MarketDetails } from '../../components/markets/market-details';
-import { RouteTitle } from '../../components/route-title';
 import { useScrollToLocation } from '../../hooks/scroll-to-location';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import compact from 'lodash/compact';
 import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { marketInfoNoCandlesDataProvider } from '@vegaprotocol/market-info';
+import { PageTitle } from '../../components/page-helpers/page-title';
 
 export const MarketPage = () => {
   useScrollToLocation();
@@ -40,20 +40,25 @@ export const MarketPage = () => {
   return (
     <>
       <section className="relative">
-        <RouteTitle data-testid="markets-heading">
-          {data?.market?.tradableInstrument.instrument.name}
-        </RouteTitle>
+        <PageTitle
+          data-testid="markets-heading"
+          title={data?.market?.tradableInstrument.instrument.name || ''}
+          actions={
+            <Button
+              disabled={!data?.market}
+              size="xs"
+              onClick={() => setDialogOpen(true)}
+            >
+              {t('View JSON')}
+            </Button>
+          }
+        />
         <AsyncRenderer
           noDataMessage={t('This chain has no markets')}
           data={data}
           loading={loading}
           error={error}
         >
-          <div className="absolute top-0 right-0">
-            <Button size="xs" onClick={() => setDialogOpen(true)}>
-              {t('View JSON')}
-            </Button>
-          </div>
           <MarketDetails market={data?.market} />
         </AsyncRenderer>
       </section>

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

@@ -68,7 +68,7 @@ const Party = () => {
   return (
     <section>
       <h1
-        className="font-alpha uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
+        className="font-alpha calt uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
         data-testid="parties-header"
       >
         {t('Public key')}

apps/explorer/src/app/routes/router-config.tsx

@@ -9,7 +9,7 @@ import Party from './parties';
 import { Parties } from './parties/home';
 import { Party as PartySingle } from './parties/id';
 import Txs from './txs';
-import Validators from './validators';
+import { ValidatorsPage } from './validators';
 import Genesis from './genesis';
 import { Block } from './blocks/id';
 import { Blocks } from './blocks/home';
@@ -125,7 +125,7 @@ const validators: Route[] = flags.validators
         path: Routes.VALIDATORS,
         name: 'Validators',
         text: t('Validators'),
-        element: <Validators />,
+        element: <ValidatorsPage />,
       },
     ]
   : [];

apps/explorer/src/app/routes/validators/index.tsx

@@ -1,47 +1 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { RouteTitle } from '../../components/route-title';
-import { SubHeading } from '../../components/sub-heading';
-import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
-import { DATA_SOURCES } from '../../config';
-import { useFetch } from '@vegaprotocol/react-helpers';
-import type { TendermintValidatorsResponse } from './tendermint-validator-response';
-import { useExplorerNodesQuery } from './__generated__/Nodes';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-
-const Validators = () => {
-  const {
-    state: { data: validators },
-  } = useFetch<TendermintValidatorsResponse>(
-    `${DATA_SOURCES.tendermintUrl}/validators`
-  );
-
-  useDocumentTitle(['Validators']);
-
-  const { data } = useExplorerNodesQuery();
-
-  return (
-    <section>
-      <RouteTitle data-testid="validators-header">{t('Validators')}</RouteTitle>
-      {data ? (
-        <>
-          <SubHeading data-testid="vega-header">{t('Vega data')}</SubHeading>
-          <SyntaxHighlighter data-testid="vega-data" data={data} />
-        </>
-      ) : (
-        <Loader />
-      )}
-      {validators ? (
-        <>
-          <SubHeading data-testid="tendermint-header">
-            {t('Tendermint data')}
-          </SubHeading>
-          <SyntaxHighlighter data-testid="tendermint-data" data={validators} />
-        </>
-      ) : (
-        <Loader />
-      )}
-    </section>
-  );
-};
-
-export default Validators;
+export * from './validators-page';

apps/explorer/src/app/routes/validators/tendermint-validator-response.tsx

@@ -1,24 +0,0 @@
-export interface PubKey {
-  type: string;
-  value: string;
-}
-
-export interface Validator {
-  address: string;
-  pub_key: PubKey;
-  voting_power: string;
-  proposer_priority: string;
-}
-
-export interface Result {
-  block_height: string;
-  validators: Validator[];
-  count: string;
-  total: string;
-}
-
-export interface TendermintValidatorsResponse {
-  jsonrpc: string;
-  id: number;
-  result: Result;
-}

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

@@ -0,0 +1,340 @@
+import { countryCodeToFlagEmoji, t } from '@vegaprotocol/react-helpers';
+import {
+  AsyncRenderer,
+  Button,
+  CopyWithTooltip,
+  ExternalLink,
+  Icon,
+  KeyValueTable,
+  KeyValueTableRow,
+  Tooltip,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
+
+import { useExplorerNodesQuery } from './__generated__/Nodes';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import compact from 'lodash/compact';
+import { useTendermintValidators } from '../../hooks/use-tendermint-validators';
+import { useMemo, useState } from 'react';
+import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
+import { PageTitle } from '../../components/page-helpers/page-title';
+import BigNumber from 'bignumber.js';
+import {
+  ContractAddressLink,
+  DApp,
+  TOKEN_VALIDATOR,
+  useLinks,
+} from '@vegaprotocol/environment';
+import classNames from 'classnames';
+import { NodeStatus, NodeStatusMapping } from '@vegaprotocol/types';
+
+type RateProps = {
+  value: BigNumber | number | undefined;
+  className?: string;
+  colour?: 'green' | 'blue' | 'pink' | 'orange';
+  asPoint?: boolean;
+  zero?: boolean;
+};
+const Rate = ({
+  value,
+  className,
+  colour = 'blue',
+  asPoint = false,
+}: RateProps) => {
+  const val =
+    typeof value === 'undefined'
+      ? new BigNumber(0)
+      : typeof value === 'number'
+      ? new BigNumber(value)
+      : value;
+  const bar = asPoint
+    ? {
+        right: `${val.times(100).toFixed(2)}%`,
+      }
+    : { width: `${val.times(100).toFixed(2)}%` };
+  return (
+    <div
+      className={classNames(
+        'overflow-hidden rounded h-[9px] flex w-full bg-vega-light-100 dark:bg-vega-dark-150',
+        { 'pl-[9px]': asPoint },
+        {
+          'bg-gradient-to-l to-vega-orange-500 dark:to-vega-orange-550 from-vega-light-100 dark:from-vega-dark-150':
+            asPoint && colour === 'orange',
+        }
+      )}
+    >
+      <div className="relative w-full">
+        <div
+          className={classNames(
+            'w-[9px] h-[9px] absolute top-0 right-0 transition-all rounded',
+            {
+              'bg-vega-green-550 dark:bg-vega-green-500': colour === 'green',
+              'bg-vega-blue-550 dark:bg-vega-blue-500': colour === 'blue',
+              'bg-vega-pink-550 dark:bg-vega-pink-500': colour === 'pink',
+              'bg-vega-orange-550 dark:bg-vega-orange-500': colour === 'orange',
+            },
+            'bg-vega',
+            className
+          )}
+          style={bar}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export const ValidatorsPage = () => {
+  useDocumentTitle(['Validators']);
+
+  const { data: tmData } = useTendermintValidators(5000);
+  const { data, loading, error, refetch } = useExplorerNodesQuery();
+
+  const validators = compact(data?.nodesConnection.edges?.map((e) => e?.node));
+
+  // voting power
+  const powers = compact(tmData?.result.validators).map(
+    (v) => new BigNumber(v.voting_power)
+  );
+  const totalVotingPower = BigNumber.sum(...powers);
+
+  // proposer priority
+  const priorities = compact(tmData?.result.validators).map(
+    (v) => new BigNumber(v.proposer_priority)
+  );
+  const absoluteProposerPriority = BigNumber.max(
+    ...priorities.map((p) => p.abs())
+  );
+
+  const tmValidators = useMemo(() => {
+    return tmData?.result.validators.map((v) => {
+      const data = {
+        key: v.pub_key.value,
+        votingPower: new BigNumber(v.voting_power),
+        proposerPriority: new BigNumber(v.proposer_priority),
+      };
+      return {
+        ...data,
+        votingPowerRatio: data.votingPower.dividedBy(totalVotingPower),
+        proposerPriorityRatio: absoluteProposerPriority
+          .plus(data.proposerPriority)
+          .dividedBy(absoluteProposerPriority.times(2)),
+      };
+    });
+  }, [tmData?.result.validators, totalVotingPower, absoluteProposerPriority]);
+
+  const totalStaked = BigNumber.sum(
+    ...validators.map((v) => new BigNumber(v.stakedTotal))
+  );
+
+  const [vegaDialog, setVegaDialog] = useState<boolean>(false);
+  const [tmDialog, setTmDialog] = useState<boolean>(false);
+
+  const tokenLink = useLinks(DApp.Token);
+
+  return (
+    <>
+      <section>
+        <PageTitle
+          title={t('Validators')}
+          actions={
+            <>
+              <Button
+                disabled={Boolean(!data)}
+                size="xs"
+                onClick={() => setVegaDialog(true)}
+              >
+                {t('View JSON')}
+              </Button>
+              {
+                <Button
+                  disabled={Boolean(!tmData)}
+                  size="xs"
+                  onClick={() => setTmDialog(true)}
+                >
+                  {t('View tendermint as JSON')}
+                </Button>
+              }
+            </>
+          }
+        />
+        <AsyncRenderer
+          data={validators}
+          loading={loading}
+          error={error}
+          reload={refetch}
+        >
+          <ul className="md:columns-2">
+            {validators.map((v) => {
+              const tm = tmValidators?.find((tmv) => tmv.key === v.tmPubkey);
+              const stakedRatio = new BigNumber(v.stakedTotal).dividedBy(
+                totalStaked
+              );
+              const validatorPage = tokenLink(
+                TOKEN_VALIDATOR.replace(':id', v.id)
+              );
+              const validatorName =
+                v.name && v.name.length > 0 ? v.name : truncateMiddle(v.id);
+              return (
+                <li className="mb-5" key={v.id}>
+                  <div
+                    data-testid="validator-tile"
+                    validator-id={v.id}
+                    className="border border-vega-light-200 dark:border-vega-dark-200 rounded p-2 overflow-hidden relative flex gap-2 items-start justify-between"
+                  >
+                    {v.avatarUrl && (
+                      <div className="w-20">
+                        <ExternalLink href={validatorPage}>
+                          <img
+                            className="w-full"
+                            src={v.avatarUrl}
+                            alt={validatorName}
+                          />
+                        </ExternalLink>
+                      </div>
+                    )}
+                    <div className="w-full">
+                      <h2 className="font-alpha text-2xl">
+                        <ExternalLink href={validatorPage}>
+                          {validatorName}
+                        </ExternalLink>
+                      </h2>
+                      <KeyValueTable>
+                        <KeyValueTableRow>
+                          <div>{t('ID')}</div>
+                          <div className="break-all text-xs">{v.id}</div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Status')}</div>
+                          <div className="break-all text-xs">
+                            <span
+                              className={classNames('mr-1', {
+                                'text-vega-green-550 dark:vega-green-500':
+                                  v.status === NodeStatus.NODE_STATUS_VALIDATOR,
+                                'text-vega-pink-550 dark:vega-pink-500':
+                                  v.status ===
+                                  NodeStatus.NODE_STATUS_NON_VALIDATOR,
+                              })}
+                            >
+                              <Icon name="tick-circle" size={3} />
+                            </span>
+                            {NodeStatusMapping[v.status]}
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Location')}</div>
+                          <div>
+                            {countryCodeToFlagEmoji(v.location)}{' '}
+                            <span className="text-[10px]">{v.location}</span>
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Public key')}</div>
+                          <div className="break-all text-xs">{v.pubkey}</div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Ethereum address')}</div>
+                          <div className="break-all text-xs">
+                            <ContractAddressLink address={v.ethereumAddress} />{' '}
+                            <CopyWithTooltip text={v.ethereumAddress}>
+                              <button title={t('Copy address to clipboard')}>
+                                <Icon size={3} name="duplicate" />
+                              </button>
+                            </CopyWithTooltip>
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Tendermint public key')}</div>
+                          <div className="break-all text-xs">{v.tmPubkey}</div>
+                        </KeyValueTableRow>
+
+                        <KeyValueTableRow>
+                          <div>{t('Voting power')}</div>
+                          <div className="w-44 text-right">
+                            <Rate value={tm?.votingPowerRatio} />
+                            <div className="text-[10px] leading-3">
+                              {tm?.votingPowerRatio.times(100).toFixed(2)}
+                              {'% '}({tm?.votingPower.toString()})
+                            </div>
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Proposer priority')}</div>
+                          <div className="w-44 text-right">
+                            <Rate
+                              value={tm?.proposerPriorityRatio}
+                              colour="orange"
+                              asPoint={true}
+                              zero={true}
+                            />
+                            <div className="text-[10px] leading-3">
+                              {tm?.proposerPriority.toString()}
+                            </div>
+                          </div>
+                        </KeyValueTableRow>
+
+                        <KeyValueTableRow>
+                          <div>{t('Stake share')}</div>
+                          <div className="w-44 text-right">
+                            <Rate value={stakedRatio} colour="green" />
+                            <div className="text-[10px] leading-3">
+                              <Tooltip
+                                description={
+                                  <KeyValueTable
+                                    numerical={true}
+                                    className="mb-1"
+                                  >
+                                    <KeyValueTableRow
+                                      className="text-xs"
+                                      noBorder={true}
+                                    >
+                                      <div>{t('Staked by operator')}</div>
+                                      <div>{v.stakedByOperator}</div>
+                                    </KeyValueTableRow>
+                                    <KeyValueTableRow
+                                      className="text-xs"
+                                      noBorder={true}
+                                    >
+                                      <div>{t('Staked by delegates')}</div>
+                                      <div>{v.stakedByDelegates}</div>
+                                    </KeyValueTableRow>
+                                    <KeyValueTableRow
+                                      className="text-xs"
+                                      noBorder={true}
+                                    >
+                                      <div>{t('Staked (total)')}</div>
+                                      <div>{v.stakedTotal}</div>
+                                    </KeyValueTableRow>
+                                  </KeyValueTable>
+                                }
+                              >
+                                <span>
+                                  {stakedRatio.times(100).toFixed(2)}%
+                                </span>
+                              </Tooltip>
+                            </div>
+                          </div>
+                        </KeyValueTableRow>
+                      </KeyValueTable>
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </AsyncRenderer>
+      </section>
+      <JsonViewerDialog
+        open={vegaDialog}
+        onChange={(isOpen) => setVegaDialog(isOpen)}
+        title={t('Vega Validators')}
+        content={data}
+      />
+      <JsonViewerDialog
+        open={tmDialog}
+        onChange={(isOpen) => setTmDialog(isOpen)}
+        title={t('Tendermint Validators')}
+        content={tmData}
+      />
+    </>
+  );
+};

apps/liquidity-provision-dashboard/src/app/components/dashboard/dashboard.tsx

@@ -8,7 +8,7 @@ export function Dashboard() {
     <>
       <div className="px-16 pt-20 pb-12 bg-greys-light-100">
         <div className="max-w-screen-xl mx-auto">
-          <h1 className="font-alpha uppercase text-5xl mb-8">
+          <h1 className="font-alpha calt uppercase text-5xl mb-8">
             {t('Top liquidity opportunities')}
           </h1>
 

apps/liquidity-provision-dashboard/src/app/components/dashboard/intro/intro.tsx

@@ -30,7 +30,7 @@ type Network = 'testnet' | 'mainnet';
 export const Intro = ({ network = 'testnet' }: { network?: Network }) => {
   return (
     <div>
-      <p className="font-alpha text-2xl font-medium mb-2">
+      <p className="font-alpha calt text-2xl font-medium mb-2">
         {t(
           'Become a liquidity provider and earn a cut of the fees paid during trading.'
         )}

apps/liquidity-provision-dashboard/src/app/components/detail/detail.tsx

@@ -92,7 +92,7 @@ export const Detail = () => {
             )}
           </div>
           <div>
-            <h2 className="font-alpha text-2xl mb-4">
+            <h2 className="font-alpha calt text-2xl mb-4">
               {t('Current Liquidity Provision')}
             </h2>
             <LPProvidersGrid

apps/liquidity-provision-dashboard/src/app/components/detail/header/header.tsx

@@ -14,13 +14,13 @@ export const Header = ({
       <div className="mb-6">
         <Link to="/">
           <Icon name="chevron-left" className="mr-2" />
-          <span className="underline font-alpha text-lg font-medium">
+          <span className="underline font-alpha calt text-lg font-medium">
             {t('Liquidity opportunities')}
           </span>
         </Link>
       </div>
-      <h1 className="font-alpha text-5xl mb-6">{name}</h1>
-      <p className="font-alpha text-4xl">{symbol}</p>
+      <h1 className="font-alpha calt text-5xl mb-6">{name}</h1>
+      <p className="font-alpha calt text-4xl">{symbol}</p>
     </div>
   );
 };

apps/liquidity-provision-dashboard/src/app/components/detail/market/market.tsx

@@ -44,7 +44,7 @@ export const Market = ({
         <table className="w-full">
           <thead>
             <tr
-              className="text-sm text-greys-light-400 text-left font-alpha"
+              className="text-sm text-greys-light-400 text-left font-alpha calt"
               style={{ fontFeatureSettings: "'liga' off, 'calt' off" }}
             >
               <th className="font-medium px-4">{t('Volume (24h)')}</th>

apps/liquidity-provision-dashboard/src/app/components/grid/grid.tsx

@@ -36,7 +36,7 @@ export const Grid = ({ isRowClickable, children, ...props }: Props) => {
 
   return (
     <AgGridReact
-      className={classNames('ag-theme-alpine h-full font-alpha', {
+      className={classNames('ag-theme-alpine h-full font-alpha calt', {
         'row-hover': isRowClickable,
       })}
       rowHeight={92}

apps/liquidity-provision-dashboard/src/app/components/health-bar/health-bar.tsx

@@ -13,7 +13,7 @@ const Remainder = () => (
 );
 
 const COPY_CLASS =
-  'text-sm font-medium whitespace-nowrap text-white font-alpha';
+  'text-sm font-medium whitespace-nowrap text-white font-alpha calt';
 
 const Tooltip = ({
   children,

apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx

@@ -59,10 +59,10 @@ const ROWS = [
 export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
   return (
     <Dialog size="medium" open={isOpen} onChange={onChange}>
-      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase liga-0-calt-0">
+      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase">
         {t('Health')}
       </h1>
-      <p className="text-lg font-medium font-alpha mb-8 liga-0-calt-0">
+      <p className="text-lg font-medium font-alpha mb-8">
         {t(
           'Market health is a representation of market and liquidity status and how close that market is to moving from one fee level to another.'
         )}
@@ -70,10 +70,10 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
 
       <table className="table-fixed">
         <thead className="border-b border-greys-light-300">
-          <th className="w-1/2 text-left font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
+          <th className="w-1/2 text-left font-medium font-alpha text-base pb-4 uppercase">
             {t('Market status')}
           </th>
-          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
+          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase">
             {t('Liquidity status')}
           </th>
         </thead>
@@ -85,12 +85,10 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
                 <td
                   className={classNames('pr-4 pb-10', { 'pt-8': isFirstRow })}
                 >
-                  <h2 className="font-medium font-alpha uppercase text-base liga-0-calt-0">
+                  <h2 className="font-medium font-alpha uppercase text-base">
                     {t(r.title)}
                   </h2>
-                  <p className="font-medium font-alpha text-lg liga-0-calt-0">
-                    {t(r.copy)}
-                  </p>
+                  <p className="font-medium font-alpha text-lg">{t(r.copy)}</p>
                 </td>
                 <td
                   className={classNames('pl-4 pb-10', { 'pt-8': isFirstRow })}

apps/static/src/assets/devnet-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/mainnet-tranches.json

@@ -2761,7 +2761,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "67313.4210242194613729161",
+    "locked_amount": "66363.3098645820638555771",
     "deposits": [
       {
         "amount": "86666.297",
@@ -2827,7 +2827,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "1325.47075320512825",
+    "locked_amount": "1270.50582519332525",
     "deposits": [
       {
         "amount": "2500",
@@ -3214,8 +3214,8 @@
     "tranche_start": "2023-02-01T00:00:00.000Z",
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
-    "total_removed": "3143.644010625",
-    "locked_amount": "32630.02848756906",
+    "total_removed": "3376.096819125",
+    "locked_amount": "31800.99946286065125",
     "deposits": [
       {
         "amount": "7500",
@@ -3229,6 +3229,16 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "151.8473757",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0xe69c28fbcb90092d264d098874523f580e45052a36a71b3f423431e84d4ca074"
+      },
+      {
+        "amount": "80.6054328",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x1a73c48a20c37eb5f8214ecb3c1986d0b6a24ae6472533c556ec6c264814abb6"
+      },
       {
         "amount": "142.173112275",
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -3277,6 +3287,18 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "151.8473757",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 34,
+            "tx": "0xe69c28fbcb90092d264d098874523f580e45052a36a71b3f423431e84d4ca074"
+          },
+          {
+            "amount": "80.6054328",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 34,
+            "tx": "0x1a73c48a20c37eb5f8214ecb3c1986d0b6a24ae6472533c556ec6c264814abb6"
+          },
           {
             "amount": "142.173112275",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -3315,8 +3337,8 @@
           }
         ],
         "total_tokens": "7500",
-        "withdrawn_tokens": "868.530827925",
-        "remaining_tokens": "6631.469172075"
+        "withdrawn_tokens": "1100.983636425",
+        "remaining_tokens": "6399.016363575"
       },
       {
         "address": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
@@ -3348,7 +3370,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "67252.005997234252187385",
+    "locked_amount": "66302.761694482463735865",
     "deposits": [
       {
         "amount": "129999.45",
@@ -3414,7 +3436,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "32671.07220319634586",
+    "locked_amount": "31984.79667681380592",
     "deposits": [
       {
         "amount": "10000",
@@ -3607,7 +3629,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "2801.291381278539",
+    "locked_amount": "2746.477042110604",
     "deposits": [
       {
         "amount": "5000",
@@ -3818,7 +3840,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "97499.58",
     "total_removed": "0",
-    "locked_amount": "9190.1546984636010231624",
+    "locked_amount": "8259.0344635706695729506",
     "deposits": [
       {
         "amount": "97499.58",
@@ -3851,7 +3873,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "135173.4239508",
     "total_removed": "98230.390980249184455396",
-    "locked_amount": "12561.354858780891426180859056",
+    "locked_amount": "11288.674248884641168728801336",
     "deposits": [
       {
         "amount": "135173.4239508",
@@ -3897,7 +3919,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "32499.86",
     "total_removed": "0",
-    "locked_amount": "3866.1393761608950805156",
+    "locked_amount": "3474.433172927820788048",
     "deposits": [
       {
         "amount": "32499.86",
@@ -3930,7 +3952,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "10833.29",
     "total_removed": "0",
-    "locked_amount": "1258.3908508118877349654",
+    "locked_amount": "1130.8942826865467812457",
     "deposits": [
       {
         "amount": "10833.29",
@@ -3963,7 +3985,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "22749.93",
     "total_removed": "4720.860935375",
-    "locked_amount": "4704.1460568553675339584",
+    "locked_amount": "4227.535409358637757934",
     "deposits": [
       {
         "amount": "6500",
@@ -4114,8 +4136,8 @@
     "tranche_start": "2022-11-01T00:00:00.000Z",
     "tranche_end": "2023-05-01T00:00:00.000Z",
     "total_added": "22500",
-    "total_removed": "4680.6740139",
-    "locked_amount": "8141.5530041436459",
+    "total_removed": "4913.13257745",
+    "locked_amount": "7644.13558931859975",
     "deposits": [
       {
         "amount": "7500",
@@ -4129,6 +4151,16 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "151.858885875",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0xe098f85d049dae2f5ab1d8057e7ca1d1a02bc6c95602a8db87e2d78013e236a3"
+      },
+      {
+        "amount": "80.599677675",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0xe5b0236fdb114d861139db0bdec5bdc26b4e107ff73eb66bc4ba262a003fd872"
+      },
       {
         "amount": "142.17311235",
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -4232,6 +4264,18 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "151.858885875",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 33,
+            "tx": "0xe098f85d049dae2f5ab1d8057e7ca1d1a02bc6c95602a8db87e2d78013e236a3"
+          },
+          {
+            "amount": "80.599677675",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 33,
+            "tx": "0xe5b0236fdb114d861139db0bdec5bdc26b4e107ff73eb66bc4ba262a003fd872"
+          },
           {
             "amount": "142.17311235",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -4342,8 +4386,8 @@
           }
         ],
         "total_tokens": "7500",
-        "withdrawn_tokens": "4680.6740139",
-        "remaining_tokens": "2819.3259861"
+        "withdrawn_tokens": "4913.13257745",
+        "remaining_tokens": "2586.86742255"
       },
       {
         "address": "0x2539b51EbDE65a75672aBcfE9439a706a99D18D1",
@@ -4368,7 +4412,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "928642.9598472029154",
-    "locked_amount": "518169.596923259106731542",
+    "locked_amount": "496902.418486694568232482",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -9777,10 +9821,35 @@
     "tranche_id": 11,
     "tranche_start": "2021-09-03T00:00:00.000Z",
     "tranche_end": "2022-09-03T00:00:00.000Z",
-    "total_added": "54621.000000000000000003",
-    "total_removed": "43553.21518131551",
+    "total_added": "54766.000000000000000003",
+    "total_removed": "43683.21518131551",
     "locked_amount": "0",
     "deposits": [
+      {
+        "amount": "15",
+        "user": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
+        "tx": "0x842269dc960af54f5f20e903f8cc2dae77d68b6c051b238a1467fa93e0ec34c3"
+      },
+      {
+        "amount": "80",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0xde7e3f48359ad1473d4b6f05582e2bee121458b1103687037fca29ab95c9f50a"
+      },
+      {
+        "amount": "20",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0xfeb720f64f2951e185db6e872e022575d3fd8477f85b2698890f70d8820fd596"
+      },
+      {
+        "amount": "15",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0x8d55eb2b5f4091eaa0dee96242f8eb6bac12312415c202007695da4b9df96ac6"
+      },
+      {
+        "amount": "15",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0xf7e1cb4b03d0f7664b4d7688029ed8ad4c468bf4b2e6ef941c59de4dce680496"
+      },
       {
         "amount": "30",
         "user": "0xf83aaA5786516F7016DF9ead2CD9F14616dA0A13",
@@ -19893,6 +19962,11 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "130",
+        "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "tx": "0xc39eefed84fded9118b3e8a84f7fdb79789725ce078421c07e4b9f0b14bb78f2"
+      },
       {
         "amount": "12",
         "user": "0x1D92cb812FdeDF1a5aFE3c5080B2D3Ec102694c6",
@@ -20895,6 +20969,151 @@
       }
     ],
     "users": [
+      {
+        "address": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
+        "deposits": [
+          {
+            "amount": "15",
+            "user": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
+            "tranche_id": 11,
+            "tx": "0x842269dc960af54f5f20e903f8cc2dae77d68b6c051b238a1467fa93e0ec34c3"
+          },
+          {
+            "amount": "30",
+            "user": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
+            "tranche_id": 11,
+            "tx": "0x407d9a64209bd8f656d969ee2dde00c24347cbdb9c3f53d9026278390c80e325"
+          }
+        ],
+        "withdrawals": [],
+        "total_tokens": "45",
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "45"
+      },
+      {
+        "address": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+        "deposits": [
+          {
+            "amount": "80",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xde7e3f48359ad1473d4b6f05582e2bee121458b1103687037fca29ab95c9f50a"
+          },
+          {
+            "amount": "20",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xfeb720f64f2951e185db6e872e022575d3fd8477f85b2698890f70d8820fd596"
+          },
+          {
+            "amount": "15",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x8d55eb2b5f4091eaa0dee96242f8eb6bac12312415c202007695da4b9df96ac6"
+          },
+          {
+            "amount": "15",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xf7e1cb4b03d0f7664b4d7688029ed8ad4c468bf4b2e6ef941c59de4dce680496"
+          },
+          {
+            "amount": "25",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x3a6f6a47608e017b8d8a1495821514beed5fbb265176665aba6213987a4e0bde"
+          },
+          {
+            "amount": "20",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x1656fec2cd5d9bf5aeb907e64b222843e13ac0921f4dc9451e6db7d02611c742"
+          },
+          {
+            "amount": "30",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x20652e7dddc270c76be42c7496a968f5a0831dae46c12d1866c8b720c1070cb4"
+          },
+          {
+            "amount": "60",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x89b232cab8db6ae361d824c55ec20b0e59c0bc14fadb71d902bba3a801338258"
+          },
+          {
+            "amount": "15",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x5032a6328b99e190e893bd7feca96d465fca1996939c71fda986bdddc89897d8"
+          },
+          {
+            "amount": "20",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x9217321eb5e9b64157da6b8ab97a1ce927e64671095da3086be0edd7cd0ef709"
+          },
+          {
+            "amount": "200",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xf88b8ed5ce899f00f466830936599112ea678a4e5911801fb3e445c22eb0295f"
+          },
+          {
+            "amount": "100",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x0c0ea0139cc752d22c0f8a6b3ffa5c4bcdca1c5604089ebd0f34898f1049db61"
+          },
+          {
+            "amount": "90",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x29371816157718f7d5136d0ed8a0f1e09045ee3cfcd67199d45e3f4157f7e011"
+          },
+          {
+            "amount": "35",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x6a081b2c5dfa2d5c916a598569519605322721c5511d26cf4aed8e08e49cf700"
+          },
+          {
+            "amount": "30",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xc37be614ef14bbbedc808ffc7651fbb7a3c04e4d1612f00f19299da7916003e6"
+          }
+        ],
+        "withdrawals": [
+          {
+            "amount": "130",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0xc39eefed84fded9118b3e8a84f7fdb79789725ce078421c07e4b9f0b14bb78f2"
+          },
+          {
+            "amount": "58.26122352505",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x249318d3c808f6ec92369ae9008fb479b35a0791fab00cc9d1a1b88a2fdd4ce8"
+          },
+          {
+            "amount": "170",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x7e67e8f61e2da7b26a4b08053f9ec3f63fa03c7d1c1907b440fc1d63317370b7"
+          },
+          {
+            "amount": "396.73877647495",
+            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
+            "tranche_id": 11,
+            "tx": "0x01702228af643636ceb22064a23b1b22b66a992f3ec9be8f6d1788e6a996312b"
+          }
+        ],
+        "total_tokens": "755",
+        "withdrawn_tokens": "755",
+        "remaining_tokens": "0"
+      },
       {
         "address": "0xf83aaA5786516F7016DF9ead2CD9F14616dA0A13",
         "deposits": [
@@ -29046,21 +29265,6 @@
         "withdrawn_tokens": "0",
         "remaining_tokens": "12"
       },
-      {
-        "address": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
-        "deposits": [
-          {
-            "amount": "30",
-            "user": "0x4043fD11285B4f98A0f7b383D973a17F03e23EC5",
-            "tranche_id": 11,
-            "tx": "0x407d9a64209bd8f656d969ee2dde00c24347cbdb9c3f53d9026278390c80e325"
-          }
-        ],
-        "withdrawals": [],
-        "total_tokens": "30",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "30"
-      },
       {
         "address": "0x17bDc5F0D55c81754c4378Ea99C1888cb38DED72",
         "deposits": [
@@ -31417,100 +31621,6 @@
         "withdrawn_tokens": "2",
         "remaining_tokens": "0"
       },
-      {
-        "address": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-        "deposits": [
-          {
-            "amount": "25",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x3a6f6a47608e017b8d8a1495821514beed5fbb265176665aba6213987a4e0bde"
-          },
-          {
-            "amount": "20",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x1656fec2cd5d9bf5aeb907e64b222843e13ac0921f4dc9451e6db7d02611c742"
-          },
-          {
-            "amount": "30",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x20652e7dddc270c76be42c7496a968f5a0831dae46c12d1866c8b720c1070cb4"
-          },
-          {
-            "amount": "60",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x89b232cab8db6ae361d824c55ec20b0e59c0bc14fadb71d902bba3a801338258"
-          },
-          {
-            "amount": "15",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x5032a6328b99e190e893bd7feca96d465fca1996939c71fda986bdddc89897d8"
-          },
-          {
-            "amount": "20",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x9217321eb5e9b64157da6b8ab97a1ce927e64671095da3086be0edd7cd0ef709"
-          },
-          {
-            "amount": "200",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0xf88b8ed5ce899f00f466830936599112ea678a4e5911801fb3e445c22eb0295f"
-          },
-          {
-            "amount": "100",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x0c0ea0139cc752d22c0f8a6b3ffa5c4bcdca1c5604089ebd0f34898f1049db61"
-          },
-          {
-            "amount": "90",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x29371816157718f7d5136d0ed8a0f1e09045ee3cfcd67199d45e3f4157f7e011"
-          },
-          {
-            "amount": "35",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x6a081b2c5dfa2d5c916a598569519605322721c5511d26cf4aed8e08e49cf700"
-          },
-          {
-            "amount": "30",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0xc37be614ef14bbbedc808ffc7651fbb7a3c04e4d1612f00f19299da7916003e6"
-          }
-        ],
-        "withdrawals": [
-          {
-            "amount": "58.26122352505",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x249318d3c808f6ec92369ae9008fb479b35a0791fab00cc9d1a1b88a2fdd4ce8"
-          },
-          {
-            "amount": "170",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x7e67e8f61e2da7b26a4b08053f9ec3f63fa03c7d1c1907b440fc1d63317370b7"
-          },
-          {
-            "amount": "396.73877647495",
-            "user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
-            "tranche_id": 11,
-            "tx": "0x01702228af643636ceb22064a23b1b22b66a992f3ec9be8f6d1788e6a996312b"
-          }
-        ],
-        "total_tokens": "625",
-        "withdrawn_tokens": "625",
-        "remaining_tokens": "0"
-      },
       {
         "address": "0xc6A53Dbb3423555C990Fc842A28CF58edC35DC73",
         "deposits": [
@@ -36682,7 +36792,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
     "total_removed": "615950.831401702010493",
-    "locked_amount": "820747.587707966380784630672",
+    "locked_amount": "788067.33889606523904645906",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -38030,8 +38140,8 @@
     "tranche_start": "2022-06-05T00:00:00.000Z",
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
-    "total_removed": "578564.32540623060826952",
-    "locked_amount": "8210005.8346214484967367860257275217396593",
+    "total_removed": "582201.49676312452960452",
+    "locked_amount": "8094123.7706069735612090126362156915950257",
     "deposits": [
       {
         "amount": "16249.93",
@@ -38535,6 +38645,31 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "827.191309560501875",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0xf1829033f07f9492807a2ca3684d491d7f6986b4c28c795be46873dcebc31e46"
+      },
+      {
+        "amount": "549.637752174555",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x2d99d4051c6ac81037db1eebf0f86b335ed9d1957f281134d07da192644a6a8c"
+      },
+      {
+        "amount": "1468.73477394015521",
+        "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+        "tx": "0x525f9427c131bc2fdea7f556d16b7781faaa41e09c7735d1c02d1f7585cc49ab"
+      },
+      {
+        "amount": "373.300310898565875",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x9e97de704d81fdca889591198e04f05367514f11f4a1eddcbd6363aadb861955"
+      },
+      {
+        "amount": "418.307210320143375",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x1438fbbc780cb382033855d295fa2511deed15cd64506a62ae4e3cfe82b3678e"
+      },
       {
         "amount": "535.4042378778335",
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -40298,6 +40433,30 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "827.191309560501875",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0xf1829033f07f9492807a2ca3684d491d7f6986b4c28c795be46873dcebc31e46"
+          },
+          {
+            "amount": "549.637752174555",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0x2d99d4051c6ac81037db1eebf0f86b335ed9d1957f281134d07da192644a6a8c"
+          },
+          {
+            "amount": "373.300310898565875",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0x9e97de704d81fdca889591198e04f05367514f11f4a1eddcbd6363aadb861955"
+          },
+          {
+            "amount": "418.307210320143375",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0x1438fbbc780cb382033855d295fa2511deed15cd64506a62ae4e3cfe82b3678e"
+          },
           {
             "amount": "535.4042378778335",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -41512,8 +41671,8 @@
           }
         ],
         "total_tokens": "259998.8875",
-        "withdrawn_tokens": "125198.723804229970125",
-        "remaining_tokens": "134800.163695770029875"
+        "withdrawn_tokens": "127367.16038718373625",
+        "remaining_tokens": "132631.72711281626375"
       },
       {
         "address": "0x89051CAb67Bc7F8CC44F7e270c6EDaf1EC57676c",
@@ -41734,6 +41893,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "1468.73477394015521",
+            "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+            "tranche_id": 2,
+            "tx": "0x525f9427c131bc2fdea7f556d16b7781faaa41e09c7735d1c02d1f7585cc49ab"
+          },
           {
             "amount": "1640.93679110232897",
             "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
@@ -41976,8 +42141,8 @@
           }
         ],
         "total_tokens": "150551.801",
-        "withdrawn_tokens": "71968.00074341356817",
-        "remaining_tokens": "78583.80025658643183"
+        "withdrawn_tokens": "73436.73551735372338",
+        "remaining_tokens": "77115.06548264627662"
       },
       {
         "address": "0x4d982Ab0823fD2f48e934a7be2bb0a5374a26148",
@@ -43750,8 +43915,8 @@
     "tranche_start": "2021-11-05T00:00:00.000Z",
     "tranche_end": "2023-05-05T00:00:00.000Z",
     "total_added": "14597706.0446472999",
-    "total_removed": "5403407.934903042012675906",
-    "locked_amount": "1857979.738850012434556012487268566",
+    "total_removed": "5577113.077460725181649906",
+    "locked_amount": "1750998.157265811220227145011388614",
     "deposits": [
       {
         "amount": "129284.449",
@@ -43960,6 +44125,26 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "1147.2913244855584015",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0xabe4091d256d6a561d5629b7e74395716317fd5c1e705b696e054328ffc7e3b6"
+      },
+      {
+        "amount": "762.6075292623334365",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0xb4d9a135d2cfa85e52b9bb68a09ffaecde4ae4d1fab95e6f44d4dd902e2a45c9"
+      },
+      {
+        "amount": "517.32707939510889525",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0x07f42fed87b386a135f1b3be72112768a812687d6751cfd74e287ed3af3c16b7"
+      },
+      {
+        "amount": "579.53787283279014075",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0x904f971f68cc70ba987688b8b26bcbd4e16ab1964b095de013e364f3ae7530c6"
+      },
       {
         "amount": "800.792718381487871",
         "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -44030,6 +44215,11 @@
         "user": "0x39fEc2e2beaB6a63c1E763D0dc4120AF60BEe39F",
         "tx": "0xa91210c18bbbb96be0a03cc722bd55849e52b0a3be2e16bbcb9d4315699ad9ec"
       },
+      {
+        "amount": "170698.3787517073781",
+        "user": "0x01a8055A97b461b58ba8e37cd349721FeAe77A8D",
+        "tx": "0xae40853fda1f0e1e9a1cb5433049e4f9d14dc06783bc0514a9f0a890043f684f"
+      },
       {
         "amount": "1333.9237119810715295",
         "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -46859,10 +47049,17 @@
             "tx": "0xf650c3599b24d01dfa1f3e19b22f870ff8ac8dfac529893f0b22d548c3535eda"
           }
         ],
-        "withdrawals": [],
+        "withdrawals": [
+          {
+            "amount": "170698.3787517073781",
+            "user": "0x01a8055A97b461b58ba8e37cd349721FeAe77A8D",
+            "tranche_id": 3,
+            "tx": "0xae40853fda1f0e1e9a1cb5433049e4f9d14dc06783bc0514a9f0a890043f684f"
+          }
+        ],
         "total_tokens": "195584.17",
-        "withdrawn_tokens": "0",
-        "remaining_tokens": "195584.17"
+        "withdrawn_tokens": "170698.3787517073781",
+        "remaining_tokens": "24885.7912482926219"
       },
       {
         "address": "0x7043Da7e9437b01075AdEd8ceaEC8595427895eB",
@@ -46903,6 +47100,30 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "1147.2913244855584015",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0xabe4091d256d6a561d5629b7e74395716317fd5c1e705b696e054328ffc7e3b6"
+          },
+          {
+            "amount": "762.6075292623334365",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0xb4d9a135d2cfa85e52b9bb68a09ffaecde4ae4d1fab95e6f44d4dd902e2a45c9"
+          },
+          {
+            "amount": "517.32707939510889525",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0x07f42fed87b386a135f1b3be72112768a812687d6751cfd74e287ed3af3c16b7"
+          },
+          {
+            "amount": "579.53787283279014075",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0x904f971f68cc70ba987688b8b26bcbd4e16ab1964b095de013e364f3ae7530c6"
+          },
           {
             "amount": "800.792718381487871",
             "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -49419,8 +49640,8 @@
           }
         ],
         "total_tokens": "359123.469575",
-        "withdrawn_tokens": "313003.3373242425157625",
-        "remaining_tokens": "46120.1322507574842375"
+        "withdrawn_tokens": "316010.1011302183066365",
+        "remaining_tokens": "43113.3684447816933635"
       },
       {
         "address": "0xBdd412797c1B78535Afc5F71503b91fAbD0160fB",
@@ -50763,8 +50984,8 @@
     "tranche_start": "2021-10-05T00:00:00.000Z",
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "5778205.3912159303",
-    "total_removed": "3055768.040200763217391295",
-    "locked_amount": "417195.628247365230806168951204234",
+    "total_removed": "3063522.787392713967070295",
+    "locked_amount": "374926.558344229352055062527996886",
     "deposits": [
       {
         "amount": "552496.6455",
@@ -50908,6 +51129,11 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "7754.747191950749679",
+        "user": "0xafa64cCa337eFEE0AD827F6C2684e69275226e90",
+        "tx": "0xb1d21b6f9cce4bfaf8870592e4cbc7a40f1ca7c13cd7c8c8bb1defeb49bc31b8"
+      },
       {
         "amount": "990.74735267405816",
         "user": "0xBc934494675a6ceB639B9EfEe5b9C0f017D35a75",
@@ -52451,6 +52677,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "7754.747191950749679",
+            "user": "0xafa64cCa337eFEE0AD827F6C2684e69275226e90",
+            "tranche_id": 4,
+            "tx": "0xb1d21b6f9cce4bfaf8870592e4cbc7a40f1ca7c13cd7c8c8bb1defeb49bc31b8"
+          },
           {
             "amount": "4961.957448767374506",
             "user": "0xafa64cCa337eFEE0AD827F6C2684e69275226e90",
@@ -52699,8 +52931,8 @@
           }
         ],
         "total_tokens": "331498.5873",
-        "withdrawn_tokens": "301699.732563421740393",
-        "remaining_tokens": "29798.854736578259607"
+        "withdrawn_tokens": "309454.479755372490072",
+        "remaining_tokens": "22044.107544627509928"
       },
       {
         "address": "0x16da609341ed67750A8BCC5AAa2005471006Cd77",
@@ -52802,8 +53034,8 @@
     "tranche_start": "2022-06-05T00:00:00.000Z",
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
-    "total_removed": "34187.9039333162685",
-    "locked_amount": "130052.146865553531470597637442932",
+    "total_removed": "34799.2735287010685",
+    "locked_amount": "124873.77463304148219969237087774",
     "deposits": [
       {
         "amount": "3000",
@@ -59422,6 +59654,31 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "129.867928716",
+        "user": "0x09996E1a67c371400bD5f52DF841f77B1741eB9d",
+        "tx": "0x6384e0bc0ae55ff0d56b1ade7096a8b706b1f71f50ee5b6e2de23dc139295352"
+      },
+      {
+        "amount": "53.3902891928",
+        "user": "0xB168ce7397Dc52ed13B4eD8119f309ec30DDa2c9",
+        "tx": "0x2bb633b4c030fb357ab2c015702366a956459c3b68187b16718629a78ff0ac23"
+      },
+      {
+        "amount": "45.06605784",
+        "user": "0x7708B79e2bc3b7ab816E66aF33A8c9385f0FcA4b",
+        "tx": "0x1c5bff9afd9ddc3c385d5a089f9784606b0bac24e59dba9f16e1445e52a9c41b"
+      },
+      {
+        "amount": "191.524581432",
+        "user": "0x256274a216e0a349dC18cae08Ca45631176AF437",
+        "tx": "0xdc17c6673a771c209d6a3f8aaf89d12289034073da28c19047ff704b1fbf4fe2"
+      },
+      {
+        "amount": "191.520738204",
+        "user": "0xB3ae40b11af91BbD456022Bd42B4f36A8C0AEA9D",
+        "tx": "0x7d1caeef005902492763cabe888b5dc76fd9f224520323ac30c1927ae91a1778"
+      },
       {
         "amount": "57.900076104",
         "user": "0x96d882E908C06cD697Ea07266Fb8D14ae129A50b",
@@ -69082,6 +69339,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "53.3902891928",
+            "user": "0xB168ce7397Dc52ed13B4eD8119f309ec30DDa2c9",
+            "tranche_id": 5,
+            "tx": "0x2bb633b4c030fb357ab2c015702366a956459c3b68187b16718629a78ff0ac23"
+          },
           {
             "amount": "48.7169590306",
             "user": "0xB168ce7397Dc52ed13B4eD8119f309ec30DDa2c9",
@@ -69090,8 +69353,8 @@
           }
         ],
         "total_tokens": "140",
-        "withdrawn_tokens": "48.7169590306",
-        "remaining_tokens": "91.2830409694"
+        "withdrawn_tokens": "102.1072482234",
+        "remaining_tokens": "37.8927517766"
       },
       {
         "address": "0xdD37b0ff9aE7e2EDbABdc291e8d44431084dA4c2",
@@ -75127,6 +75390,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "129.867928716",
+            "user": "0x09996E1a67c371400bD5f52DF841f77B1741eB9d",
+            "tranche_id": 5,
+            "tx": "0x6384e0bc0ae55ff0d56b1ade7096a8b706b1f71f50ee5b6e2de23dc139295352"
+          },
           {
             "amount": "15.684119736",
             "user": "0x09996E1a67c371400bD5f52DF841f77B1741eB9d",
@@ -75135,8 +75404,8 @@
           }
         ],
         "total_tokens": "200",
-        "withdrawn_tokens": "15.684119736",
-        "remaining_tokens": "184.315880264"
+        "withdrawn_tokens": "145.552048452",
+        "remaining_tokens": "54.447951548"
       },
       {
         "address": "0xb2495ea94f7f329Ca3d91342e0c7422d97ac5a9F",
@@ -77927,6 +78196,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "45.06605784",
+            "user": "0x7708B79e2bc3b7ab816E66aF33A8c9385f0FcA4b",
+            "tranche_id": 5,
+            "tx": "0x1c5bff9afd9ddc3c385d5a089f9784606b0bac24e59dba9f16e1445e52a9c41b"
+          },
           {
             "amount": "39.25738204",
             "user": "0x7708B79e2bc3b7ab816E66aF33A8c9385f0FcA4b",
@@ -77953,8 +78228,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "247.514294772",
-        "remaining_tokens": "152.485705228"
+        "withdrawn_tokens": "292.580352612",
+        "remaining_tokens": "107.419647388"
       },
       {
         "address": "0x32836171Ef226Dbb40bc9463993deC054e72a2E5",
@@ -81313,6 +81588,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "191.520738204",
+            "user": "0xB3ae40b11af91BbD456022Bd42B4f36A8C0AEA9D",
+            "tranche_id": 5,
+            "tx": "0x7d1caeef005902492763cabe888b5dc76fd9f224520323ac30c1927ae91a1778"
+          },
           {
             "amount": "102.196144088",
             "user": "0xB3ae40b11af91BbD456022Bd42B4f36A8C0AEA9D",
@@ -81321,8 +81602,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "102.196144088",
-        "remaining_tokens": "297.803855912"
+        "withdrawn_tokens": "293.716882292",
+        "remaining_tokens": "106.283117708"
       },
       {
         "address": "0x256274a216e0a349dC18cae08Ca45631176AF437",
@@ -81335,6 +81616,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "191.524581432",
+            "user": "0x256274a216e0a349dC18cae08Ca45631176AF437",
+            "tranche_id": 5,
+            "tx": "0xdc17c6673a771c209d6a3f8aaf89d12289034073da28c19047ff704b1fbf4fe2"
+          },
           {
             "amount": "102.190930996",
             "user": "0x256274a216e0a349dC18cae08Ca45631176AF437",
@@ -81343,8 +81630,8 @@
           }
         ],
         "total_tokens": "400",
-        "withdrawn_tokens": "102.190930996",
-        "remaining_tokens": "297.809069004"
+        "withdrawn_tokens": "293.715512428",
+        "remaining_tokens": "106.284487572"
       },
       {
         "address": "0xB0473C4FeBd722a6d7eE561329d3134030318132",

apps/static/src/assets/mirror-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/preloader.css

@@ -0,0 +1,111 @@
+.pre-loader {
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+.pre-loader .loader-item {
+  width: 10px;
+  height: 10px;
+  background: #000;
+}
+.pre-loader .pre-loader-center {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+.pre-loader .pre-loader-wrapper {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.pre-loader .loader-item:nth-child(0) {
+  animation-delay: 0ms;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:first-child {
+  animation-delay: -50ms;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(2) {
+  animation-delay: 0.2s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(3) {
+  animation-delay: -0.6s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(4) {
+  animation-delay: 0.4s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(5) {
+  animation-delay: -0.5s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(6) {
+  animation-delay: 0.3s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(7) {
+  animation-delay: -1.4s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(8) {
+  animation-delay: 2s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(9) {
+  animation-delay: -0.9s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(10) {
+  animation-delay: 1.5s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(11) {
+  animation-delay: -0.55s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(12) {
+  animation-delay: 1.2s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(13) {
+  animation-delay: -0.65s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(14) {
+  animation-delay: 0.7s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(15) {
+  animation-delay: -3.75s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(16) {
+  animation-delay: 1.6s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item {
+  animation: flickering 0.4s linear infinite alternate;
+}
+@keyframes flickering {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 1;
+  }
+  26% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+  }
+}
+html.dark .pre-loader .loader-item {
+  background: #fff;
+}

apps/static/src/assets/sandbox-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/stagnet1-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/stagnet3-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/testnet-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/theme-setter.js

@@ -0,0 +1,9 @@
+(function () {
+  var storedTheme = window.localStorage.getItem('theme');
+  if (
+    storedTheme === 'dark' ||
+    (!storedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    document.documentElement.classList.add('dark');
+  }
+})();

apps/token-e2e/.env

@@ -12,6 +12,7 @@ NX_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit suppl
 NX_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/token-e2e/src/integration/view/vesting.cy.js

@@ -1,4 +1,3 @@
-const connectPrompt = '[data-testid="eth-connect-prompt"]';
 const connectButton = '[data-testid="connect-to-eth-btn"]';
 
 context(
@@ -18,7 +17,7 @@ context(
       });
 
       it('should have connect Eth wallet info', function () {
-        cy.get(connectPrompt).should('be.visible');
+        cy.get(connectButton).should('be.visible');
       });
 
       it('should have connect Eth wallet button', function () {

apps/token/.browserslistrc

@@ -13,4 +13,4 @@ last 2 Edge major versions
 last 2 Safari major version
 last 2 iOS major versions
 Firefox ESR
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.

apps/token/.env

@@ -12,6 +12,7 @@ NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/token/.env.capsule

@@ -15,6 +15,7 @@ NX_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/token/.env.devnet

@@ -9,3 +9,4 @@ NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-devnet1-k8s.ops.vega.xyz

apps/token/.env.mainnet

@@ -10,3 +10,4 @@ NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40:87edc2605e544f888305d7fc4a9141bd@o286262.ingest.sentry.io/5882996
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-k8s.ops.vega.xyz

apps/token/.env.stagnet1

@@ -6,3 +6,4 @@ NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet1-network.json
 NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz

apps/token/.env.stagnet3

@@ -7,3 +7,4 @@ NX_VEGA_EXPLORER_URL=https://stagnet3.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz

apps/token/.env.testnet

@@ -10,3 +10,4 @@ NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_DELEGATIONS_PAGINATION=50
+NX_TRANCHES_SERVICE_URL=https://tranches-testnet-k8s.ops.vega.xyz

apps/token/src/components/balance-manager/balance-manager.tsx

@@ -1,17 +1,17 @@
-import * as Sentry from '@sentry/react';
-import { toBigNum } from '@vegaprotocol/react-helpers';
-import { useEthereumConfig } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
 import { useEffect } from 'react';
 
 import { useAppState } from '../../contexts/app-state/app-state-context';
 import { useContracts } from '../../contexts/contracts/contracts-context';
 import { useGetAssociationBreakdown } from '../../hooks/use-get-association-breakdown';
-import { useGetUserTrancheBalances } from '../../hooks/use-get-user-tranche-balances';
+import { useGetUserBalances } from '../../hooks/use-get-user-balances';
 import { useBalances } from '../../lib/balances/balances-store';
 import type { ReactElement } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useListenForStakingEvents as useListenForAssociationEvents } from '../../hooks/use-listen-for-staking-events';
+import { useTranches } from '../../lib/tranches/tranches-store';
+import { useUserTrancheBalances } from '../../routes/redemption/hooks';
+import { useEthereumConfig } from '@vegaprotocol/web3';
 
 interface BalanceManagerProps {
   children: ReactElement;
@@ -24,7 +24,13 @@ export const BalanceManager = ({ children }: BalanceManagerProps) => {
   const {
     appState: { decimals },
   } = useAppState();
-  const { updateBalances: updateStoreBalances } = useBalances();
+  const updateStoreBalances = useBalances((state) => state.updateBalances);
+  const setTranchesBalances = useBalances((state) => state.setTranchesBalances);
+  const getUserBalances = useGetUserBalances(account);
+  const userTrancheBalances = useUserTrancheBalances(account);
+  useEffect(() => {
+    setTranchesBalances(userTrancheBalances);
+  }, [setTranchesBalances, userTrancheBalances]);
   const { config } = useEthereumConfig();
 
   const numberOfConfirmations = config?.confirmations || 0;
@@ -41,10 +47,10 @@ export const BalanceManager = ({ children }: BalanceManagerProps) => {
     numberOfConfirmations
   );
 
-  const getUserTrancheBalances = useGetUserTrancheBalances(
-    account || '',
-    contracts?.vesting
-  );
+  const getTranches = useTranches((state) => state.getTranches);
+  useEffect(() => {
+    getTranches(decimals);
+  }, [decimals, getTranches]);
   const getAssociationBreakdown = useGetAssociationBreakdown(
     account || '',
     contracts?.staking,
@@ -54,50 +60,14 @@ export const BalanceManager = ({ children }: BalanceManagerProps) => {
   // update balances on connect to Ethereum
   useEffect(() => {
     const updateBalances = async () => {
-      if (!account || !config) return;
-      try {
-        const [b, w, stats, a] = await Promise.all([
-          contracts.vesting.user_total_all_tranches(account),
-          contracts.token.balanceOf(account),
-          contracts.vesting.user_stats(account),
-          contracts.token.allowance(
-            account,
-            config.staking_bridge_contract.address
-          ),
-        ]);
-
-        const balance = toBigNum(b, decimals);
-        const walletBalance = toBigNum(w, decimals);
-        const lien = toBigNum(stats.lien, decimals);
-        const allowance = toBigNum(a, decimals);
-
-        updateStoreBalances({
-          balanceFormatted: balance,
-          walletBalance,
-          lien,
-          allowance,
-        });
-      } catch (err) {
-        Sentry.captureException(err);
+      const balances = await getUserBalances();
+      if (balances) {
+        updateStoreBalances(balances);
       }
     };
 
     updateBalances();
-  }, [
-    decimals,
-    contracts.token,
-    contracts.vesting,
-    account,
-    config,
-    updateStoreBalances,
-  ]);
-
-  // This use effect hook is very expensive and is kept separate to prevent expensive reloading of data.
-  useEffect(() => {
-    if (account) {
-      getUserTrancheBalances();
-    }
-  }, [account, getUserTrancheBalances]);
+  }, [getUserBalances, updateStoreBalances]);
 
   useEffect(() => {
     if (account) {

apps/token/src/components/eth-connect-prompt/eth-connect-promp.tsx

@@ -6,27 +6,22 @@ import {
   useAppState,
 } from '../../contexts/app-state/app-state-context';
 
-interface EthConnectPrompProps {
-  children?: React.ReactNode;
-}
-
-export const EthConnectPrompt = ({ children }: EthConnectPrompProps) => {
+export const EthConnectPrompt = () => {
   const { t } = useTranslation();
   const { appDispatch } = useAppState();
   return (
-    <>
-      {children}
-      <Button
-        onClick={() =>
-          appDispatch({
-            type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
-            isOpen: true,
-          })
-        }
-        data-testid="connect-to-eth-btn"
-      >
-        {t('connectEthWallet')}
-      </Button>
-    </>
+    <Button
+      variant="primary"
+      onClick={() =>
+        appDispatch({
+          type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
+          isOpen: true,
+        })
+      }
+      fill={true}
+      data-testid="connect-to-eth-btn"
+    >
+      {t('connectEthWallet')}
+    </Button>
   );
 };

apps/token/src/components/page-templates/template-sidebar.tsx

@@ -21,8 +21,10 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
     <>
       <AnnouncementBanner>
         <div className="font-alpha calt uppercase text-center text-lg text-white">
-          <span className="pr-4">Mainnet sim 2 coming in March!</span>
-          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
+          <span className="pr-4">Mainnet sim 2 is live!</span>
+          <ExternalLink href="https://fairground.wtf/">
+            Come help stress test the network
+          </ExternalLink>
         </div>
       </AnnouncementBanner>
       <Nav navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />

apps/token/src/config/env.ts

@@ -58,6 +58,7 @@ const envName = windowOrDefault('NX_VEGA_ENV') ?? 'local';
 
 export const ENV = {
   // Environment
+  tranchesServiceUrl: windowOrDefault('NX_TRANCHES_SERVICE_URL'),
   dsn: windowOrDefault('NX_SENTRY_DSN'),
   urlConnect: TRUTHY.includes(windowOrDefault('NX_ETH_URL_CONNECT')),
   explorerUrl: windowOrDefault('NX_VEGA_EXPLORER'),

apps/token/src/contexts/app-state/app-state-context.ts

@@ -1,4 +1,3 @@
-import type { Tranche } from '@vegaprotocol/smart-contracts';
 import React from 'react';
 
 import type { BigNumber } from '../../lib/bignumber';
@@ -19,21 +18,7 @@ export interface VegaKey {
   meta: Array<{ key: string; value: string }> | null;
 }
 
-export interface UserTrancheBalance {
-  /** ID of tranche */
-  id: number;
-
-  /** Users vesting tokens on tranche */
-  locked: BigNumber;
-
-  /** Users vested tokens on tranche */
-  vested: BigNumber;
-}
-
 export interface AppState {
-  /** Array of tranche objects */
-  tranches: Tranche[] | null;
-
   /** Number of decimal places of the VEGA token (18 on Mainnet, 5 on Testnet) */
   decimals: number;
 
@@ -52,9 +37,6 @@ export interface AppState {
   /** Whether or not the connect to Ethereum wallet overlay is open */
   ethConnectOverlay: boolean;
 
-  /** The error if one was thrown during retrieval of tranche data */
-  trancheError: Error | null;
-
   /** Whether or not the mobile drawer is open. Only relevant on screens smaller than 960 */
   drawerOpen: boolean;
 
@@ -71,12 +53,10 @@ export enum AppStateActionType {
   SET_TOKEN,
   SET_ALLOWANCE,
   REFRESH_BALANCES,
-  SET_TRANCHE_DATA,
   SET_VEGA_WALLET_OVERLAY,
   SET_VEGA_WALLET_MANAGE_OVERLAY,
   SET_ETH_WALLET_OVERLAY,
   SET_DRAWER,
-  SET_TRANCHE_ERROR,
   REFRESH_ASSOCIATED_BALANCES,
   SET_ASSOCIATION_BREAKDOWN,
   SET_TRANSACTION_OVERLAY,
@@ -90,14 +70,6 @@ export type AppStateAction =
       totalSupply: BigNumber;
       totalAssociated: BigNumber;
     }
-  | {
-      type: AppStateActionType.SET_TRANCHE_DATA;
-      tranches: Tranche[];
-    }
-  | {
-      type: AppStateActionType.SET_TRANCHE_ERROR;
-      error: Error | null;
-    }
   | {
       type: AppStateActionType.SET_VEGA_WALLET_OVERLAY;
       isOpen: boolean;

apps/token/src/contexts/app-state/app-state-provider.tsx

@@ -14,11 +14,9 @@ const initialAppState: AppState = {
   totalAssociated: new BigNumber(0),
   decimals: 0,
   totalSupply: new BigNumber(0),
-  tranches: null,
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
   ethConnectOverlay: false,
-  trancheError: null,
   drawerOpen: false,
   transactionOverlay: false,
   bannerMessage: '',
@@ -34,17 +32,6 @@ function appStateReducer(state: AppState, action: AppStateAction): AppState {
         totalAssociated: action.totalAssociated,
       };
     }
-    case AppStateActionType.SET_TRANCHE_DATA:
-      return {
-        ...state,
-        tranches: action.tranches,
-      };
-    case AppStateActionType.SET_TRANCHE_ERROR: {
-      return {
-        ...state,
-        trancheError: action.error,
-      };
-    }
     case AppStateActionType.SET_VEGA_WALLET_OVERLAY: {
       return {
         ...state,

apps/token/src/hooks/__mocks__/tranches-mock.ts

@@ -1,666 +0,0 @@
-import parseJSON from 'date-fns/parseJSON';
-import { BigNumber } from '../../lib/bignumber';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
-
-const json: Tranche[] = [
-  {
-    tranche_id: 1,
-    tranche_start: parseJSON('2022-03-05T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-06-05T00:00:00.000Z'),
-    total_added: new BigNumber('3505372.53445'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('3505372.53445'),
-    deposits: [
-      {
-        amount: new BigNumber('187637.95'),
-        user: '0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0',
-        tx: '0xc4491908e3347b05f2394ac7e1006f573fe8cbc490a57cd1dadad70785e95024',
-      },
-      {
-        amount: new BigNumber('200000'),
-        user: '0x93b478148FF792B00076B7EdC89Db1FdE7772079',
-        tx: '0xcc8fba855a0d965044d4cc587701fe9ee9f5863852cede017382ffe02963d9b8',
-      },
-      {
-        amount: new BigNumber('21666.5743'),
-        user: '0xB523235B6c7C74DDB26b10E78bFb2d0Cb63Ae289',
-        tx: '0x8cc5159f3d665dd33a2bdac6e990cf1b65dc18b6b5e37a07b37dd54495a8d33c',
-      },
-      {
-        amount: new BigNumber('200000'),
-        user: '0x7227e17101E6C70F4dAfC7DDB77BB7D83DdfC1C8',
-        tx: '0x0cdef6868bd6b977362396fd06525e1e757e827659c5d75cd512db121947e6f7',
-      },
-      {
-        amount: new BigNumber('137998.56'),
-        user: '0x69eFc5642CfcCB1777bc663433640531F044D1F5',
-        tx: '0xaa9b3b39836a69f760f5d1d2fdba44ad348b27c8f31eb094ad6f779b39d7949c',
-      },
-      {
-        amount: new BigNumber('16249.93'),
-        user: '0x006B59DD3bC838A74476c0F4a33C1565831dA0DD',
-        tx: '0xda9bdc846300600c0d360edcaf4a5ed40fa2586ba7872f2bf68251a669adff0e',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0',
-        deposits: [
-          {
-            amount: new BigNumber('187637.95'),
-            user: '0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0',
-            tranche_id: 1,
-            tx: '0xc4491908e3347b05f2394ac7e1006f573fe8cbc490a57cd1dadad70785e95024',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('187637.95'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('187637.95'),
-      },
-      {
-        address: '0x1A71e3ED1996CAbB91bB043f880CE963D601707e',
-        deposits: [
-          {
-            amount: new BigNumber('112323.67'),
-            user: '0x1A71e3ED1996CAbB91bB043f880CE963D601707e',
-            tranche_id: 1,
-            tx: '0xaa378d2d0d4d7b964a675bb19f19c4f7401deec6ce66b1bd98ad5b812026e53e',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('112323.67'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('112323.67'),
-      },
-    ],
-  },
-  {
-    tranche_id: 2,
-    tranche_start: parseJSON('2022-06-05T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-12-05T00:00:00.000Z'),
-    total_added: new BigNumber('15464357.550320999700000001'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('15464357.550320999700000001'),
-    deposits: [
-      {
-        amount: new BigNumber('1'),
-        user: '0x7fff551249D223f723557a96a0e1a469C79cC934',
-        tx: '0x55fa59d71aac37428a5804442c48da677a4426a4e92447919a8199520ce20f53',
-      },
-      {
-        amount: new BigNumber('100000'),
-        user: '0xe20D4d4fFb165e4b9926467d82d03c0e9ab66D89',
-        tx: '0xabf2cc96c41c8b4f0cff8d8ff7448e241ff83e296a7b7dea79d9d9868f33b7ad',
-      },
-      {
-        amount: new BigNumber('500000'),
-        user: '0x5f01A497e4033E4812ba5D494bCBc2220cd510Ed',
-        tx: '0xe3a1a74378a42eace12c21c24889d8b0da6a3736ca7987720e70f59886caa5a3',
-      },
-      {
-        amount: new BigNumber('59228.95'),
-        user: '0x1d20f66eF3889aa48Bb4Badbbf993dE965BDb029',
-        tx: '0xf31eab593b86aac54f5fa9fe24bb26105ff52386be60bc24617dd362df7c6f15',
-      },
-      {
-        amount: new BigNumber('206374.1211'),
-        user: '0x1b979e8AE3BbbaF96Dd1bbbC0060b360A23f2EBE',
-        tx: '0x2983daa9acf6da5fba0debc2aaaaf47389b92aea0de0c27b20809fb69a63ce69',
-      },
-      {
-        amount: new BigNumber('200000'),
-        user: '0xe45993F39183E148bC35BA02ba8C289111181c0f',
-        tx: '0xbda7b70ab8ac629617e74daaaa5451b04d7830bc0da516e10d533efc2eef1530',
-      },
-    ],
-    withdrawals: [
-      {
-        amount: new BigNumber('0'),
-        user: '0x4527F5A12bbbbb7c88c5863F8AB9a708928Fe702',
-        tx: '0xbaa8632cd162265ca46baaaad746ec3d283a474e344727854d962e057380a51',
-      },
-    ],
-    users: [
-      {
-        address: '0x7fff551249D223f723557a96a0e1aCCCC79cC934',
-        deposits: [
-          {
-            amount: new BigNumber('1'),
-            user: '0x7fff551249D223f723557a96a0e1aCCCC79cC934',
-            tranche_id: 2,
-            tx: '0x55fa59d71aac37428a0000042c48da677a4426a4e92447919a8199520ce20f53',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('1'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('1'),
-      },
-      {
-        address: '0xCc5CAFD3daA3bb2c1168521F35d1eBEB6cf7c051',
-        deposits: [
-          {
-            amount: new BigNumber('200000'),
-            user: '0xCc5CAFD3daA3bb2c1168521F35d1eBEB6cf7c051',
-            tranche_id: 2,
-            tx: '0x8168230eb08320a7a874ebeeea20f0def842b8059a2b05a036870e00ca624c88',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('200000'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('200000'),
-      },
-      {
-        address: '0x9cd59376F896a5F2084232E386A65c17EEA4Fe9f',
-        deposits: [
-          {
-            amount: new BigNumber('200000'),
-            user: '0x9cd59376F896a5F2084232E386A65c17EEA4Fe9f',
-            tranche_id: 2,
-            tx: '0x2eb27449e08a245314faaaaf0d93fafc70733586495f18cf2fb69ef979459efd',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('200000'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('200000'),
-      },
-      {
-        address: '0xe45993F39183E148bC35BA02ba8aaaa807981caa',
-        deposits: [
-          {
-            amount: new BigNumber('200000'),
-            user: '0xe45993F39183E148bC35BA02ba8aaaa07981caa',
-            tranche_id: 2,
-            tx: '0xbda7b70ab8ac629617e74d33575451b04d7830bc0da516e10d533efc2eef1530',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('200000'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('200000'),
-      },
-    ],
-  },
-  {
-    tranche_id: 3,
-    tranche_start: parseJSON('2021-11-05T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-05-05T00:00:00.000Z'),
-    total_added: new BigNumber('14597706.0446472999'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('14445316.74229298796336861823365303'),
-    deposits: [
-      {
-        amount: new BigNumber('129284.449'),
-        user: '0x26100B2C8168Cb0A6c869a5698265086A3Dfeaaa',
-        tx: '0xcc67a776a2e3b48864470aaa9e0940c1814663b4fde6df60c1a099a636dcae79',
-      },
-      {
-        amount: new BigNumber('1151405.093'),
-        user: '0x777Ec2e2beaB6a63c1E763D0dc4120AF60BEe39F',
-        tx: '0x1237d45a40aacc5dff7f8f69e8a4c0536fd0460b915de576bd3f0fdf5892c0a4',
-      },
-      {
-        amount: new BigNumber('1151073.595'),
-        user: '0x5CD0Ec63687588817044794bF15d4e37991efAB3',
-        tx: '0xb4eaca7d8abeaf7e1d9d28b1f1fa09fc1933af0e11bff4b0120dcef7d2dfc64d',
-      },
-      {
-        amount: new BigNumber('54034.5'),
-        user: '0xc01F2E57554Bb392384feCA6a54c8E3A3Ca94E42',
-        tx: '0xf33289a2a73a65b132accdddd600a8d2c7556c2d80784d5f8d4eea1ecacf93cc',
-      },
-      {
-        amount: new BigNumber('115049.22'),
-        user: '0x01a8055A97b461b58ba8e37cd349721FeAe77A8D',
-        tx: '0xf650c3599b24d01dfa1f3e19b22f870ff8ac8dfac529893f0b22d548c3535eda',
-      },
-    ],
-    withdrawals: [
-      {
-        amount: new BigNumber('0'),
-        user: '0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b',
-        tx: '0x1af894d1f9ce5ea79aa52d180fbff5f30b8b456e43b76ca5d7d73366e422ea37',
-      },
-    ],
-    users: [
-      {
-        address: '0x26100B2C8168Cb0A6c869a5698265086A3DfeF98',
-        deposits: [
-          {
-            amount: new BigNumber('129284.449'),
-            user: '0x26100B2C8168Cb0A6c869a5698265086A3DfeF98',
-            tranche_id: 3,
-            tx: '0xcc67a776a2e3b48864470eff9e0940c1814663b4fde6df60c1a099a636dcae79',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('129284.449'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('129284.449'),
-      },
-      {
-        address: '0xd4632B682228Db5f38E2283869AEe8c29ee6Eec8',
-        deposits: [
-          {
-            amount: new BigNumber('44499.2'),
-            user: '0xd4632B682228Db5f38E2283869AEe8c29ee6Eec8',
-            tranche_id: 3,
-            tx: '0x57019840d1ce05e0ef65c45801d6699e5eb1032bd8ad56493594d4866996ea82',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('44499.2'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('44499.2'),
-      },
-      {
-        address: '0xe2E6F37cb1f1980418012BF69f43910d6Bc73e73',
-        deposits: [
-          {
-            amount: new BigNumber('66748.8'),
-            user: '0xe2E6F37cb1f1980418012BF69f43910d6Bc73e73',
-            tranche_id: 3,
-            tx: '0xd257a3aacd5bdf86cbea0ed3db3697f55dff9092129db6baedacaf00b50af936',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('66748.8'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('66748.8'),
-      },
-      {
-        address: '0xc01F2E57554Bb392384feCA6a54c8E3A3Ca94E42',
-        deposits: [
-          {
-            amount: new BigNumber('54034.5'),
-            user: '0xc01F2E57554Bb392384feCA6a54c8E3A3Ca94E42',
-            tranche_id: 3,
-            tx: '0xf33289a2a73a65b132accdddd600a8d2c7556c2d80784d5f8d4eea1ecacf93cc',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('54034.5'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('54034.5'),
-      },
-    ],
-  },
-  {
-    tranche_id: 4,
-    tranche_start: parseJSON('2021-10-05T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('5198082.8647159303'),
-    total_removed: new BigNumber('12706.1452878164044708'),
-    locked_amount: new BigNumber('4849328.20502099651595959714823613'),
-    deposits: [
-      {
-        amount: new BigNumber('110499.5291'),
-        user: '0xa8679b60612Fb2e19d68964326CA02dCe6a08D08',
-        tx: '0x9d3432b818054796489848c415af5c523acb16c1540e5865010baf71964c03a7',
-      },
-      {
-        amount: new BigNumber('331498.5873'),
-        user: '0x39fEc2e2beaB6a63c1E763D0dc4120AF60BEe39F',
-        tx: '0xdf5c6e44ef0763e785721802704e5fd186fa3964302a566899027447d0dda57b',
-      },
-      {
-        amount: new BigNumber('27624.032275'),
-        user: '0xF5Fb27b912D987B5b6e02A1B1BE0C1F0740E2c6f',
-        tx: '0x1860d39ae3e9ad710da9e2a9bf9606eedc1b176fca673473d6854ea91ed8beb5',
-      },
-      {
-        amount: new BigNumber('73666.3527333333'),
-        user: '0x2895059cB5a492BEd58D1fB22713006EfaD465eA',
-        tx: '0x260619e2129cc58ae03f6b4ecfc5a6eeab29b5998de69875accb3cb945beed04',
-      },
-    ],
-    withdrawals: [
-      {
-        amount: new BigNumber('1290.014571009862016'),
-        user: '0xBc934494675a6ceB639B9EfEe5b9C0f017D35a75',
-        tx: '0x637c3648ce941a77e08e741f981806a5d56275db6d280f041902386ae8567d06',
-      },
-      {
-        amount: new BigNumber('5197.621879605058623'),
-        user: '0xafa64cCa337eFEE0AD827F6C2684e69275226e90',
-        tx: '0xe8b8c1a38d3ae809dcaae54a11adeeba0f46be03924e91d8f251f3f2d48c3553',
-      },
-      {
-        amount: new BigNumber('376.2625308599198808'),
-        user: '0x1dD2718fd01d05C9F50Fce8Bb723A4C7483A1E15',
-        tx: '0x78af737235f1123bb1c6a607a0b4b7a3c5ed6859a4e8912f45bb7c812724b1de',
-      },
-      {
-        amount: new BigNumber('4162.301372742020875'),
-        user: '0xBc934494675a6ceB639B9EfEe5b9C0f017D35a75',
-        tx: '0x85c7d9979f0e3a3660dc5952732eaf9414f7c28a1c00a9a10f449843f91d85e0',
-      },
-      {
-        amount: new BigNumber('1679.944933599543076'),
-        user: '0x9058e12e2F32cB1cD4D3123359963D77786477FC',
-        tx: '0xd92083f2e90e84cb70ef27ac410ed1144200c41b1714fb54d29f5f23ca086ecb',
-      },
-    ],
-    users: [
-      {
-        address: '0xa8679b60612Fb2e19d68964326CA02dCe6a08D08',
-        deposits: [
-          {
-            amount: new BigNumber('110499.5291'),
-            user: '0xa8679b60612Fb2e19d68964326CA02dCe6a08D08',
-            tranche_id: 4,
-            tx: '0x9d3432b818054796489848c415af5c523acb16c1540e5865010baf71964c03a7',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('110499.5291'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('110499.5291'),
-      },
-      {
-        address: '0x8767d65677Cabaa2050b764AEf40610f2f9796F5',
-        deposits: [
-          {
-            amount: new BigNumber('1104995.291'),
-            user: '0x8767d65677Cabaa2050b764AEf40610f2f9796F5',
-            tranche_id: 4,
-            tx: '0xc6298f52c173a837abd051ed810b01eb5731be307376b73df6e31b4de39d0122',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('1104995.291'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('1104995.291'),
-      },
-      {
-        address: '0x91715128a71c9C734CDC20E5EdaaeA02E72e422E',
-        deposits: [
-          {
-            amount: new BigNumber('165749.29365'),
-            user: '0x91715128a71c9C734CDC20E5EdEEeA02E72e422E',
-            tranche_id: 4,
-            tx: '0xf828cea685a0689f27446f02d3376c3afa4398182d3b5bf1c81e949f5965d1c1',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('165749.29365'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('165749.29365'),
-      },
-      {
-        address: '0x2895059cB5a492BEd58D1fB22713006EfaD465eA',
-        deposits: [
-          {
-            amount: new BigNumber('73666.3527333333'),
-            user: '0x2895059cB5a492BEd58D1fB22713006EfaD465eA',
-            tranche_id: 4,
-            tx: '0x260619e2129cc58ae03f6b4ecfc5a6eeab29b5998de69875accb3cb945beed04',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('73666.3527333333'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('73666.3527333333'),
-      },
-    ],
-  },
-  {
-    tranche_id: 23,
-    tranche_start: parseJSON('2022-04-30T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-04-30T00:00:00.000Z'),
-    total_added: new BigNumber('10833.29'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('10833.29'),
-    deposits: [
-      {
-        amount: new BigNumber('10833.29'),
-        user: '0xF3359E5B89f7804c8c9283781Aaaa33BBd979c9D',
-        tx: '0x65f904ef34d6992b52f449a709d7a24411a501fd07f90aaa9255eacc994bc229',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0xF3359E5B89f7804c8c9283781Aaaa33BBd979c9D',
-        deposits: [
-          {
-            amount: new BigNumber('10833.29'),
-            user: '0xF3359E5B89f7804c8c9283781Aaaa33BBd979c9D',
-            tranche_id: 23,
-            tx: '0x65f904ef34d6992b52f449a709d7a24411a501fd07f90aaa9255eacc994bc229',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('10833.29'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('10833.29'),
-      },
-    ],
-  },
-  {
-    tranche_id: 24,
-    tranche_start: parseJSON('2022-09-26T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-09-26T00:00:00.000Z'),
-    total_added: new BigNumber('16249.93'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('16249.93'),
-    deposits: [
-      {
-        amount: new BigNumber('16249.93'),
-        user: '0xcE96670971ec2E1E79D0d96688adbA2FfD6F6C7f',
-        tx: '0x3dbd991b7914986505d89a7c1562278dffffa2f5f444bdbf5d6bbd838e3d8d5d',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0xcE96670971ec2E1E79D0d96688adbA2FfD6F6C7f',
-        deposits: [
-          {
-            amount: new BigNumber('16249.93'),
-            user: '0xcE96670971ec2E1E79D0d96688adbA2FfD6F6C7f',
-            tranche_id: 24,
-            tx: '0x3dbd991b7914986505d89a7c1562278dffffa2f5f444bdbf5d6bbd838e3d8d5d',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('16249.93'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('16249.93'),
-      },
-    ],
-  },
-  {
-    tranche_id: 25,
-    tranche_start: parseJSON('2022-02-10T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-  {
-    tranche_id: 26,
-    tranche_start: parseJSON('2022-02-04T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('135173.4239508'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('135173.4239508'),
-    deposits: [
-      {
-        amount: new BigNumber('135173.4239508'),
-        user: '0xc90eA4d8D214D548221EE3622a8BE1D61f7077A2',
-        tx: '0x123fb1e293a8246b92d85a47c8d33def9fb6468c7cbb70f1754d78914b12dbf8',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0x222eA4d8D214D548221EE3622a8BE1D61f7077A2',
-        deposits: [
-          {
-            amount: new BigNumber('135173.4239508'),
-            user: '0x222eA4d8D214D548221EE3622a8BE1D61f7077A2',
-            tranche_id: 26,
-            tx: '0x9fafb1e293a8246b92d85a47c8d33def9fb6468c7cbb70f1754d78914b12dbf8',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('135173.4239508'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('135173.4239508'),
-      },
-    ],
-  },
-  {
-    tranche_id: 27,
-    tranche_start: parseJSON('2022-05-09T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('32499.86'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('32499.86'),
-    deposits: [
-      {
-        amount: new BigNumber('32499.86'),
-        user: '0x1E7c4E57A1dc4dD4bBE81b833e3E437f69619DaB',
-        tx: '0x25a3dd4852ce8ac1c15fe42123cfab14e4bf8a5c1cb97167cb4d6fe20bd319ae',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0x3E7c4E57A1dc4dD4bBE81bbEFBe3Eaaaf69619Da9',
-        deposits: [
-          {
-            amount: new BigNumber('32499.86'),
-            user: '0x3E7c4E57A1dc4dD4bBE81bbEFBe3Eaaaf69619Da9',
-            tranche_id: 27,
-            tx: '0x75a3dd4852ce8ac1c15fe42ff6cfab1455bf8a5c1cb97167cb4d6fe20bd319ae',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('32499.86'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('32499.86'),
-      },
-    ],
-  },
-  {
-    tranche_id: 28,
-    tranche_start: parseJSON('2022-04-30T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('10833.29'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('10833.29'),
-    deposits: [
-      {
-        amount: new BigNumber('10833.29'),
-        user: '0xF3359E5B89f7804c8c9283781Aaa133BBd979c9D',
-        tx: '0x166d235eff44e7bcc63597c0d6e698552e4440fe90ec7cf07a1d510c275cf3e0',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0x12349E5B89f7804c8c9283781A23133BBd979c22',
-        deposits: [
-          {
-            amount: new BigNumber('10833.29'),
-            user: '0x12349E5B89f7804c8c9283781A23133BBd979c22',
-            tranche_id: 28,
-            tx: '0x166d235eff44e7baa6359712345698552e6150fe90ec7cf07a1d510c275cf3e0',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('10833.29'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('10833.29'),
-      },
-    ],
-  },
-  {
-    tranche_id: 29,
-    tranche_start: parseJSON('2022-09-26T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-04-05T00:00:00.000Z'),
-    total_added: new BigNumber('16249.93'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('16249.93'),
-    deposits: [
-      {
-        amount: new BigNumber('16249.93'),
-        user: '0xcE96670971ec2E1E79D0d12388adbA2FfD6F6C7f',
-        tx: '0xa770ab2d05e6c81be46b73ac2326e81a111da4ce55a2d8544bd95b48ad530674',
-      },
-    ],
-    withdrawals: [],
-    users: [
-      {
-        address: '0xcE96670971ec2E1E79D0d96688adbA2FfD6F6C7f',
-        deposits: [
-          {
-            amount: new BigNumber('16249.93'),
-            user: '0xcE96670971ec212379D0d12388adbA2Ffc6F6C7f',
-            tranche_id: 29,
-            tx: '0xa220ab2d05e6c81be12373ac2326e81a912da4ce55a2d8544bd95b48ad530674',
-          },
-        ],
-        withdrawals: [],
-        total_tokens: new BigNumber('16249.93'),
-        withdrawn_tokens: new BigNumber('0'),
-        remaining_tokens: new BigNumber('16249.93'),
-      },
-    ],
-  },
-  {
-    tranche_id: 30,
-    tranche_start: parseJSON('2021-11-01T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-05-01T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-  {
-    tranche_id: 31,
-    tranche_start: parseJSON('2022-02-01T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-08-01T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-  {
-    tranche_id: 32,
-    tranche_start: parseJSON('2022-05-01T00:00:00.000Z'),
-    tranche_end: parseJSON('2022-11-01T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-  {
-    tranche_id: 33,
-    tranche_start: parseJSON('2022-11-01T00:00:00.000Z'),
-    tranche_end: parseJSON('2023-05-01T00:00:00.000Z'),
-    total_added: new BigNumber('0'),
-    total_removed: new BigNumber('0'),
-    locked_amount: new BigNumber('0'),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  },
-];
-
-export default json;

apps/token/src/hooks/__mocks__/use-tranches.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import mock from './tranches-mock';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
-
-export function useTranches() {
-  const [tranches, setTranches] = React.useState<Tranche[] | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
-
-  React.useEffect(() => {
-    const run = async () => {
-      try {
-        setTranches(mock);
-      } catch (err) {
-        setError((err as Error).message);
-      }
-    };
-    run();
-  }, []);
-
-  return { tranches, error };
-}

apps/token/src/hooks/use-get-user-balances.ts

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import * as Sentry from '@sentry/react';
+import { toBigNum } from '@vegaprotocol/react-helpers';
+import { useContracts } from '../contexts/contracts/contracts-context';
+import { useAppState } from '../contexts/app-state/app-state-context';
+import { useEthereumConfig } from '@vegaprotocol/web3';
+
+export const useGetUserBalances = (account: string | undefined) => {
+  const { token, vesting } = useContracts();
+  const { config } = useEthereumConfig();
+  const {
+    appState: { decimals },
+  } = useAppState();
+  return useCallback(async () => {
+    if (!account || !config) return;
+    try {
+      const [b, w, stats, a] = await Promise.all([
+        vesting.user_total_all_tranches(account),
+        token.balanceOf(account),
+        vesting.user_stats(account),
+        token.allowance(account, config.staking_bridge_contract.address),
+      ]);
+
+      const balance = toBigNum(b, decimals);
+      const walletBalance = toBigNum(w, decimals);
+      const lien = toBigNum(stats.lien, decimals);
+      const allowance = toBigNum(a, decimals);
+
+      return {
+        balanceFormatted: balance,
+        walletBalance,
+        lien,
+        allowance,
+        balance,
+      };
+    } catch (err) {
+      Sentry.captureException(err);
+      return null;
+    }
+  }, [account, config, decimals, token, vesting]);
+};

apps/token/src/hooks/use-get-user-tranche-balances.ts

@@ -1,70 +0,0 @@
-import React from 'react';
-import * as Sentry from '@sentry/react';
-import type { TokenVesting } from '@vegaprotocol/smart-contracts';
-
-import {
-  AppStateActionType,
-  useAppState,
-} from '../contexts/app-state/app-state-context';
-import { BigNumber } from '../lib/bignumber';
-import { useTranches } from './use-tranches';
-import { toBigNum } from '@vegaprotocol/react-helpers';
-import { useBalances } from '../lib/balances/balances-store';
-
-export const useGetUserTrancheBalances = (
-  address: string,
-  vesting: TokenVesting
-) => {
-  const {
-    appState: { decimals },
-    appDispatch,
-  } = useAppState();
-  const { setTranchesBalances } = useBalances();
-  const { tranches } = useTranches();
-  return React.useCallback(async () => {
-    appDispatch({
-      type: AppStateActionType.SET_TRANCHE_ERROR,
-      error: null,
-    });
-    try {
-      if (!tranches) {
-        return;
-      }
-      const userTranches = tranches?.filter((t) =>
-        t.users.some(
-          ({ address: a }) =>
-            a && address && a.toLowerCase() === address.toLowerCase()
-        )
-      );
-      const trancheIds = [0, ...userTranches.map((t) => t.tranche_id)];
-      const promises = trancheIds.map(async (tId) => {
-        const [t, v] = await Promise.all([
-          vesting.get_tranche_balance(address, tId),
-          vesting.get_vested_for_tranche(address, tId),
-        ]);
-
-        const total = toBigNum(t, decimals);
-        const vested = toBigNum(v, decimals);
-
-        return {
-          id: tId,
-          locked: tId === 0 ? total : total.minus(vested),
-          vested: tId === 0 ? new BigNumber(0) : vested,
-        };
-      });
-
-      const trancheBalances = await Promise.all(promises);
-      setTranchesBalances(trancheBalances);
-      appDispatch({
-        type: AppStateActionType.SET_TRANCHE_DATA,
-        tranches,
-      });
-    } catch (e) {
-      Sentry.captureException(e);
-      appDispatch({
-        type: AppStateActionType.SET_TRANCHE_ERROR,
-        error: e as Error,
-      });
-    }
-  }, [appDispatch, tranches, setTranchesBalances, address, vesting, decimals]);
-};

apps/token/src/hooks/use-tranches.ts

@@ -1,70 +0,0 @@
-import { useFetch } from '@vegaprotocol/react-helpers';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
-import React, { useEffect } from 'react';
-import type { Networks } from '@vegaprotocol/environment';
-import { useEnvironment } from '@vegaprotocol/environment';
-
-import { BigNumber } from '../lib/bignumber';
-
-const TRANCHES_URLS: { [N in Networks]: string } = {
-  MAINNET: 'https://static.vega.xyz/assets/mainnet-tranches.json',
-  MIRROR: 'https://static.vega.xyz/assets/mirror-tranches.json',
-  TESTNET: 'https://static.vega.xyz/assets/testnet-tranches.json',
-  SANDBOX: 'https://static.vega.xyz/assets/sandbox-tranches.json',
-  STAGNET1: 'https://static.vega.xyz/assets/stagnet1-tranches.json',
-  STAGNET3: 'https://static.vega.xyz/assets/stagnet3-tranches.json',
-  DEVNET: 'https://static.vega.xyz/assets/devnet-tranches.json',
-  CUSTOM: 'https://static.vega.xyz/assets/testnet-tranches.json',
-};
-
-export function useTranches() {
-  const { VEGA_ENV } = useEnvironment();
-  const [tranches, setTranches] = React.useState<Tranche[] | null>(null);
-  const url = React.useMemo(() => TRANCHES_URLS[VEGA_ENV], [VEGA_ENV]);
-  const {
-    state: { data, loading, error },
-  } = useFetch<Tranche[] | null>(url);
-  useEffect(() => {
-    const processedTrances = data
-      ?.map((t) => ({
-        ...t,
-        tranche_start: new Date(t.tranche_start),
-        tranche_end: new Date(t.tranche_end),
-        total_added: new BigNumber(t.total_added),
-        total_removed: new BigNumber(t.total_removed),
-        locked_amount: new BigNumber(t.locked_amount),
-        deposits: t.deposits.map((d) => ({
-          ...d,
-          amount: new BigNumber(d.amount),
-        })),
-        withdrawals: t.withdrawals.map((w) => ({
-          ...w,
-          amount: new BigNumber(w.amount),
-        })),
-        users: t.users.map((u) => ({
-          ...u,
-          // @ts-ignore - types are incorrect in the SDK lib
-          deposits: u.deposits.map((d) => ({
-            ...d,
-            amount: new BigNumber(d.amount),
-          })),
-          // @ts-ignore - types are incorrect in the SDK lib
-          withdrawals: u.withdrawals.map((w) => ({
-            ...w,
-            amount: new BigNumber(w.amount),
-          })),
-          total_tokens: new BigNumber(u.total_tokens),
-          withdrawn_tokens: new BigNumber(u.withdrawn_tokens),
-          remaining_tokens: new BigNumber(u.remaining_tokens),
-        })),
-      }))
-      .sort((a: Tranche, b: Tranche) => a.tranche_id - b.tranche_id);
-    setTranches(processedTrances ? processedTrances : null);
-  }, [data]);
-
-  return {
-    tranches,
-    loading,
-    error,
-  };
-}

apps/token/src/lib/__mocks__/generate-tranche.ts

@@ -1,21 +0,0 @@
-import type { Tranche } from '@vegaprotocol/smart-contracts';
-
-import { BigNumber } from '../bignumber';
-
-export function generateTranche(id: number): Tranche {
-  return {
-    tranche_id: id,
-    tranche_start: new Date(),
-    tranche_end: new Date(),
-    total_added: new BigNumber(0),
-    total_removed: new BigNumber(0),
-    locked_amount: new BigNumber(0),
-    deposits: [],
-    withdrawals: [],
-    users: [],
-  };
-}
-
-export function generateTranches(count = 1) {
-  return new Array(count).fill(null).map((_, i) => generateTranche(i));
-}

apps/token/src/lib/balances/balances-store.ts

@@ -1,6 +1,11 @@
 import BigNumber from 'bignumber.js';
 import { create } from 'zustand';
-import type { UserTrancheBalance } from '../../contexts/app-state/app-state-context';
+
+interface UserTrancheBalance {
+  id: number;
+  locked: BigNumber;
+  vested: BigNumber;
+}
 
 export interface AssociationBreakdown {
   stakingAssociations: { [vegaKey: string]: BigNumber };
@@ -13,8 +18,8 @@ export type BalancesStore = {
   balanceFormatted: BigNumber;
   totalVestedBalance: BigNumber;
   totalLockedBalance: BigNumber;
-  walletBalance: BigNumber;
   trancheBalances: UserTrancheBalance[];
+  walletBalance: BigNumber;
   lien: BigNumber;
   walletAssociatedBalance: BigNumber;
   vestingAssociatedBalance: BigNumber;
@@ -38,8 +43,8 @@ export const useBalances = create<BalancesStore>((set) => ({
     stakingAssociations: {},
     vestingAssociations: {},
   },
-  trancheBalances: [],
   allowance: new BigNumber(0),
+  trancheBalances: [],
   totalVestedBalance: new BigNumber(0),
   totalLockedBalance: new BigNumber(0),
   balanceFormatted: new BigNumber(0),

apps/token/src/lib/tranches/tranches-store.tsx

@@ -0,0 +1,80 @@
+import { toBigNum } from '@vegaprotocol/react-helpers';
+import type { TrancheServiceResponse } from '@vegaprotocol/smart-contracts';
+import type BigNumber from 'bignumber.js';
+import create from 'zustand';
+import { ENV } from '../../config';
+
+export interface Tranche {
+  tranche_id: number;
+  tranche_start: Date;
+  tranche_end: Date;
+  total_added: BigNumber;
+  total_removed: BigNumber;
+  locked_amount: BigNumber;
+  users: string[];
+}
+
+const URL = `${ENV.tranchesServiceUrl}/tranches/stats`;
+
+export interface UserTrancheBalance {
+  /** ID of tranche */
+  id: number;
+
+  /** Users vesting tokens on tranche */
+  locked: BigNumber;
+
+  /** Users vested tokens on tranche */
+  vested: BigNumber;
+}
+
+export type TranchesStore = {
+  tranches: Tranche[] | null;
+  loading: boolean;
+  error: Error | null;
+  getTranches: (decimals: number) => void;
+};
+
+const secondsToDate = (seconds: number) => new Date(seconds * 1000);
+
+export const useTranches = create<TranchesStore>((set) => ({
+  tranches: null,
+  loading: false,
+  error: null,
+  getTranches: async (decimals: number) => {
+    set({ loading: true, error: null });
+    try {
+      const res = await fetch(URL);
+      const data = (await res.json()) as TrancheServiceResponse;
+      const now = Math.round(Date.now() / 1000);
+      const tranches = Object.values(data.tranches)
+        ?.map((t) => {
+          const tranche_progress =
+            t.duration !== 0 ? (now - t.cliff_start) / t.duration : 0;
+          const lockedDecimal = tranche_progress < 0 ? 1 : 1 - tranche_progress;
+          return {
+            tranche_id: t.tranche_id,
+            tranche_start: secondsToDate(t.cliff_start),
+            tranche_end: secondsToDate(t.cliff_start + t.duration),
+            total_added: toBigNum(t.initial_balance, decimals),
+            total_removed: toBigNum(t.initial_balance, decimals).minus(
+              toBigNum(t.current_balance, decimals)
+            ),
+            locked_amount: toBigNum(t.initial_balance, decimals).times(
+              lockedDecimal
+            ),
+            users: t.users,
+          };
+        })
+        .sort((a, b) => a.tranche_id - b.tranche_id);
+      set({
+        tranches,
+      });
+    } catch (e) {
+      set({ error: e as unknown as Error });
+    } finally {
+      set({
+        loading: false,
+      });
+    }
+  },
+}));

apps/token/src/routes/claim/claim-flow.tsx

@@ -4,7 +4,6 @@ import { format } from 'date-fns';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
 
 import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
 import { useContracts } from '../../contexts/contracts/contracts-context';
@@ -22,6 +21,7 @@ import { TrancheNotFound } from './tranche-not-found';
 import { UntargetedClaim } from './untargeted-claim';
 import { Verifying } from './verifying';
 import type { ClaimAction, ClaimState } from './claim-reducer';
+import type { Tranche } from '../../lib/tranches/tranches-store';
 
 interface ClaimFlowProps {
   state: ClaimState;

apps/token/src/routes/claim/claim-info.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
 
 import { DATE_FORMAT_LONG } from '../../lib/date-formats';
+import type { Tranche } from '../../lib/tranches/tranches-store';
 
 interface ClaimInfoProps {
   tranche: Tranche;

apps/token/src/routes/claim/claim.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { useAppState } from '../../contexts/app-state/app-state-context';
-import { useContracts } from '../../contexts/contracts/contracts-context';
-import { useGetUserTrancheBalances } from '../../hooks/use-get-user-tranche-balances';
 import { useRefreshBalances } from '../../hooks/use-refresh-balances';
 import { useSearchParams } from '../../hooks/use-search-params';
 import { ClaimError } from './claim-error';
@@ -13,7 +11,7 @@ import {
   initialClaimState,
 } from './claim-reducer';
 
-import type { Tranche } from '@vegaprotocol/smart-contracts';
+import type { Tranche } from '../../lib/tranches/tranches-store';
 
 const Claim = ({
   address,
@@ -23,10 +21,8 @@ const Claim = ({
   tranches: Tranche[];
 }) => {
   const params = useSearchParams();
-  const { vesting } = useContracts();
   const { appState } = useAppState();
   const [state, dispatch] = React.useReducer(claimReducer, initialClaimState);
-  const getUserTrancheBalances = useGetUserTrancheBalances(address, vesting);
   const refreshBalances = useRefreshBalances(address);
 
   React.useEffect(() => {
@@ -48,10 +44,9 @@ const Claim = ({
   // If the claim has been committed refetch the new VEGA balance
   React.useEffect(() => {
     if (state.claimStatus === ClaimStatus.Finished && address) {
-      getUserTrancheBalances();
       refreshBalances();
     }
-  }, [address, getUserTrancheBalances, refreshBalances, state.claimStatus]);
+  }, [address, refreshBalances, state.claimStatus]);
 
   if (state.error) {
     return <ClaimError />;

apps/token/src/routes/claim/index.tsx

@@ -5,7 +5,7 @@ import { EthConnectPrompt } from '../../components/eth-connect-prompt';
 import { Heading } from '../../components/heading';
 import { SplashLoader } from '../../components/splash-loader';
 import { useDocumentTitle } from '../../hooks/use-document-title';
-import { useTranches } from '../../hooks/use-tranches';
+import { useTranches } from '../../lib/tranches/tranches-store';
 import type { RouteChildProps } from '..';
 import Claim from './claim';
 import { ClaimRestricted } from './claim-restricted';
@@ -16,7 +16,11 @@ const ClaimIndex = ({ name }: RouteChildProps) => {
   useDocumentTitle(name);
   const { t } = useTranslation();
   const { account } = useWeb3React();
-  const { tranches, loading, error } = useTranches();
+  const { tranches, loading, error } = useTranches((state) => ({
+    loading: state.loading,
+    error: state.error,
+    tranches: state.tranches,
+  }));
 
   if (loading || !tranches) {
     return (
@@ -38,13 +42,14 @@ const ClaimIndex = ({ name }: RouteChildProps) => {
 
   if (!account) {
     content = (
-      <EthConnectPrompt>
+      <>
         <p data-testid="eth-connect-prompt">
           {t(
             "Use the Ethereum wallet you want to send your tokens to. You'll also need enough Ethereum to pay gas."
           )}
         </p>
-      </EthConnectPrompt>
+        <EthConnectPrompt />
+      </>
     );
   } else {
     content = isRestricted() ? (

apps/token/src/routes/proposals/components/list-asset/list-asset.spec.tsx

@@ -51,11 +51,9 @@ const mockAppState: AppState = {
   totalAssociated: new BigNumber('50063005'),
   decimals: 18,
   totalSupply: new BigNumber(65000000),
-  tranches: null,
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
   ethConnectOverlay: false,
-  trancheError: null,
   drawerOpen: false,
   transactionOverlay: false,
   bannerMessage: '',

apps/token/src/routes/proposals/components/vote-details/use-user-vote.tsx

@@ -5,6 +5,7 @@ import { VoteValue } from '@vegaprotocol/types';
 import { useEffect, useState } from 'react';
 import { useUserVoteQuery } from './__generated__/Vote';
 import { removePaginationWrapper } from '@vegaprotocol/react-helpers';
+import type { FinalizedVote } from '@vegaprotocol/governance';
 
 export enum VoteState {
   NotCast = 'NotCast',
@@ -21,25 +22,14 @@ export type Vote = {
   party: { id: string };
 };
 
-export type Votes = Array<Vote | null>;
-
-export function getUserVote(pubkey: string, yesVotes?: Votes, noVotes?: Votes) {
-  const yesVote = yesVotes?.find((v) => v && v.party.id === pubkey);
-  const noVote = noVotes?.find((v) => v && v.party.id === pubkey);
-  if (yesVote) {
-    return yesVote;
-  } else if (noVote) {
-    return noVote;
-  } else {
-    return null;
-  }
-}
-
 /**
  * Finds the status of a users given vote in a given proposal and provides
  * a function to send a vote transaction to your wallet
  */
-export function useUserVote(proposalId: string | null | undefined) {
+export function useUserVote(
+  proposalId: string | null | undefined,
+  finalizedVote?: FinalizedVote | null
+) {
   const { pubKey } = useVegaWallet();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [timeout, setTimeoutValue] = useState<any>(null);
@@ -50,10 +40,27 @@ export function useUserVote(proposalId: string | null | undefined) {
     variables: { partyId: pubKey || '' },
     skip: !pubKey || !proposalId,
   });
+  const [userVote, setUserVote] = useState<FinalizedVote | undefined>(
+    undefined
+  );
 
-  const userVote = removePaginationWrapper(
-    data?.party?.votesConnection?.edges
-  ).find(({ proposalId: pId }) => proposalId === pId);
+  useEffect(() => {
+    if (finalizedVote?.vote.value) {
+      setUserVote(finalizedVote);
+    } else if (data?.party?.votesConnection?.edges) {
+      // This sets the vote (if any) when the user first loads the page
+      setUserVote(
+        removePaginationWrapper(data?.party?.votesConnection?.edges).find(
+          ({ proposalId: pId }) => proposalId === pId
+        )
+      );
+    }
+  }, [
+    finalizedVote?.vote.value,
+    data?.party?.votesConnection?.edges,
+    finalizedVote,
+    proposalId,
+  ]);
 
   // If user vote changes update the vote state
   useEffect(() => {

apps/token/src/routes/proposals/components/vote-details/vote-buttons.spec.tsx

@@ -22,6 +22,8 @@ describe('Vote buttons', () => {
               minVoterBalance={null}
               spamProtectionMinTokens={null}
               currentStakeAvailable={new BigNumber(1)}
+              dialog={() => <div>Blah</div>}
+              submit={() => Promise.resolve()}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -43,6 +45,8 @@ describe('Vote buttons', () => {
               minVoterBalance={null}
               spamProtectionMinTokens={null}
               currentStakeAvailable={new BigNumber(1)}
+              dialog={() => <div>Blah</div>}
+              submit={() => Promise.resolve()}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -75,6 +79,8 @@ describe('Vote buttons', () => {
               minVoterBalance={null}
               spamProtectionMinTokens={null}
               currentStakeAvailable={new BigNumber(1)}
+              dialog={() => <div>Blah</div>}
+              submit={() => Promise.resolve()}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -97,6 +103,8 @@ describe('Vote buttons', () => {
               minVoterBalance={null}
               spamProtectionMinTokens={null}
               currentStakeAvailable={new BigNumber(0)}
+              dialog={() => <div>Blah</div>}
+              submit={() => Promise.resolve()}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -120,6 +128,8 @@ describe('Vote buttons', () => {
               minVoterBalance="2000000000000000000"
               spamProtectionMinTokens="1000000000000000000"
               currentStakeAvailable={new BigNumber(1)}
+              dialog={() => <div>Blah</div>}
+              submit={() => Promise.resolve()}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -145,6 +155,8 @@ describe('Vote buttons', () => {
               minVoterBalance="2000000000000000000"
               spamProtectionMinTokens="1000000000000000000"
               currentStakeAvailable={new BigNumber(10)}
+              dialog={() => <div>Blah</div>}
+              submit={() => Promise.resolve()}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -167,6 +179,8 @@ describe('Vote buttons', () => {
               minVoterBalance="2000000000000000000"
               spamProtectionMinTokens="1000000000000000000"
               currentStakeAvailable={new BigNumber(10)}
+              dialog={() => <div>Blah</div>}
+              submit={() => Promise.resolve()}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>

apps/token/src/routes/proposals/components/vote-details/vote-buttons.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { AsyncRenderer, Button, ButtonLink } from '@vegaprotocol/ui-toolkit';
 import { addDecimal, toBigNum } from '@vegaprotocol/react-helpers';
-import { useVoteSubmit } from '@vegaprotocol/governance';
 import { ProposalState, VoteValue } from '@vegaprotocol/types';
 import {
   AppStateActionType,
@@ -16,6 +15,7 @@ import { VoteState } from './use-user-vote';
 import { ProposalMinRequirements, ProposalUserAction } from '../shared';
 import { VoteTransactionDialog } from './vote-transaction-dialog';
 import { useVoteButtonsQuery } from './__generated__/Stake';
+import type { DialogProps } from '@vegaprotocol/wallet';
 
 interface VoteButtonsContainerProps {
   voteState: VoteState | null;
@@ -24,6 +24,8 @@ interface VoteButtonsContainerProps {
   proposalState: ProposalState;
   minVoterBalance: string | null;
   spamProtectionMinTokens: string | null;
+  submit: (voteValue: VoteValue, proposalId: string | null) => Promise<void>;
+  dialog: (props: DialogProps) => JSX.Element;
   className?: string;
 }
 
@@ -62,11 +64,12 @@ export const VoteButtons = ({
   currentStakeAvailable,
   minVoterBalance,
   spamProtectionMinTokens,
+  submit,
+  dialog: Dialog,
 }: VoteButtonsProps) => {
   const { t } = useTranslation();
   const { appDispatch } = useAppState();
   const { pubKey } = useVegaWallet();
-  const { submit, Dialog } = useVoteSubmit();
   const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
     openVegaWalletDialog: store.openVegaWalletDialog,
   }));

apps/token/src/routes/proposals/components/vote-details/vote-details.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { formatDistanceToNow } from 'date-fns';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { ProposalState } from '@vegaprotocol/types';
-import { VoteProgress } from '@vegaprotocol/governance';
+import { useVoteSubmit, VoteProgress } from '@vegaprotocol/governance';
 import { formatNumber } from '../../../../lib/format-number';
 import { ConnectToVega } from '../../../../components/connect-to-vega';
 import { useVoteInformation } from '../../hooks';
@@ -44,7 +44,8 @@ export const VoteDetails = ({
   } = useVoteInformation({ proposal });
 
   const { t } = useTranslation();
-  const { voteState, voteDatetime } = useUserVote(proposal?.id);
+  const { submit, Dialog, finalizedVote } = useVoteSubmit();
+  const { voteState, voteDatetime } = useUserVote(proposal?.id, finalizedVote);
   const defaultDecimals = 2;
   const daysLeft = t('daysLeft', {
     daysLeft: formatDistanceToNow(new Date(proposal?.terms.closingDatetime)),
@@ -188,6 +189,8 @@ export const VoteDetails = ({
                 minVoterBalance={minVoterBalance}
                 spamProtectionMinTokens={spamProtectionMinTokens}
                 className="flex"
+                submit={submit}
+                dialog={Dialog}
               />
             )}
           </section>

apps/token/src/routes/proposals/hooks/use-vote-information.spec.ts

@@ -14,11 +14,9 @@ const mockAppState: AppState = {
   totalAssociated: new BigNumber('50063005'),
   decimals: 18,
   totalSupply: mockTotalSupply,
-  tranches: null,
   vegaWalletOverlay: false,
   vegaWalletManageOverlay: false,
   ethConnectOverlay: false,
-  trancheError: null,
   drawerOpen: false,
   transactionOverlay: false,
   bannerMessage: '',

apps/token/src/routes/redemption/home/redemption-information.tsx

@@ -1,56 +1,81 @@
 import { Callout, Intent } from '@vegaprotocol/ui-toolkit';
-import { useBalances } from '../../../lib/balances/balances-store';
-import React from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Link, useNavigate, useOutletContext } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 
 import { AddLockedTokenAddress } from '../../../components/add-locked-token';
 import { formatNumber } from '../../../lib/format-number';
 import { truncateMiddle } from '../../../lib/truncate-middle';
 import Routes from '../../routes';
-import type { RedemptionState } from '../redemption-reducer';
 import { Tranche0Table, TrancheTable } from '../tranche-table';
 import { VestingTable } from './vesting-table';
+import { useTranches } from '../../../lib/tranches/tranches-store';
+import { useGetUserBalances } from '../../../hooks/use-get-user-balances';
+import BigNumber from 'bignumber.js';
+import { useUserTrancheBalances } from '../hooks';
+
+interface UserBalances {
+  balanceFormatted: BigNumber;
+  walletBalance: BigNumber;
+  lien: BigNumber;
+  allowance: BigNumber;
+  balance: BigNumber;
+}
 
 export const RedemptionInformation = () => {
-  const { state, account } = useOutletContext<{
-    state: RedemptionState;
-    account: string;
-  }>();
-  const navigate = useNavigate();
   const { t } = useTranslation();
-  const {
-    balanceFormatted,
-    lien,
-    totalVestedBalance,
-    totalLockedBalance,
-    trancheBalances,
-  } = useBalances();
-
-  const { userTranches } = state;
-
-  const filteredTranches = React.useMemo(
+  const navigate = useNavigate();
+  const tranches = useTranches((state) => state.tranches);
+  const { address } = useParams<{ address: string }>();
+  const [userBalances, setUserBalances] = useState<null | UserBalances>();
+  const getUsersBalances = useGetUserBalances(address);
+  useEffect(() => {
+    getUsersBalances().then(setUserBalances);
+  }, [getUsersBalances]);
+  const userTrancheBalances = useUserTrancheBalances(address);
+  const filteredTranches = useMemo(
     () =>
-      userTranches.filter((tr) => {
-        const balance = trancheBalances.find(
+      tranches?.filter((tr) => {
+        const balance = userTrancheBalances.find(
           ({ id }) => id.toString() === tr.tranche_id.toString()
         );
         return (
           balance?.locked.isGreaterThan(0) || balance?.vested.isGreaterThan(0)
         );
-      }),
-    [trancheBalances, userTranches]
+      }) || [],
+    [userTrancheBalances, tranches]
   );
+  const { totalLocked, totalVested } = useMemo(() => {
+    return {
+      totalLocked: BigNumber.sum.apply(null, [
+        new BigNumber(0),
+        ...userTrancheBalances.map(({ locked }) => locked),
+      ]),
+      totalVested: BigNumber.sum.apply(null, [
+        new BigNumber(0),
+        ...userTrancheBalances.map(({ vested }) => vested),
+      ]),
+    };
+  }, [userTrancheBalances]);
 
-  const zeroTranche = React.useMemo(() => {
-    const zeroTranche = trancheBalances.find((t) => t.id === 0);
+  const zeroTranche = useMemo(() => {
+    const zeroTranche = userTrancheBalances.find((t) => t.id === 0);
     if (zeroTranche && zeroTranche.locked.isGreaterThan(0)) {
       return zeroTranche;
     }
     return null;
-  }, [trancheBalances]);
+  }, [userTrancheBalances]);
 
-  if (!filteredTranches.length) {
+  const isAccountValid = useMemo(
+    () => address && address.length === 42 && address.startsWith('0x'),
+    [address]
+  );
+
+  if (!isAccountValid || !address) {
+    return <div>The address {address} is not a valid Ethereum address</div>;
+  }
+
+  if (!filteredTranches.length || !userBalances) {
     return (
       <section data-testid="redemption-page">
         <div className="mb-8">
@@ -79,17 +104,17 @@ export const RedemptionInformation = () => {
         {t(
           '{{address}} has {{balance}} VEGA tokens in {{tranches}} tranches of the vesting contract.',
           {
-            address: truncateMiddle(account),
-            balance: formatNumber(balanceFormatted),
+            address: truncateMiddle(address),
+            balance: formatNumber(userBalances.balanceFormatted),
             tranches: filteredTranches.length,
           }
         )}
       </p>
       <div className="mb-24">
         <VestingTable
-          associated={lien}
-          locked={totalLockedBalance}
-          vested={totalVestedBalance}
+          associated={userBalances.lien}
+          locked={totalLocked}
+          vested={totalVested}
         />
       </div>
       {filteredTranches.length ? <h2>{t('Tranche breakdown')}</h2> : null}
@@ -98,7 +123,7 @@ export const RedemptionInformation = () => {
           trancheId={0}
           total={
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            trancheBalances.find(
+            userTrancheBalances.find(
               ({ id }) => id.toString() === zeroTranche.id.toString()
             )!.locked
           }
@@ -108,22 +133,25 @@ export const RedemptionInformation = () => {
         <TrancheTable
           key={tr.tranche_id}
           tranche={tr}
-          lien={lien}
+          lien={userBalances.lien}
           locked={
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            trancheBalances.find(
+            userTrancheBalances.find(
               ({ id }) => id.toString() === tr.tranche_id.toString()
             )!.locked
           }
           vested={
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            trancheBalances.find(
+            userTrancheBalances.find(
               ({ id }) => id.toString() === tr.tranche_id.toString()
             )!.vested
           }
-          totalVested={totalVestedBalance}
-          totalLocked={totalLockedBalance}
-          onClick={() => navigate(`/vesting/${tr.tranche_id}`)}
+          totalVested={totalVested}
+          totalLocked={totalLocked}
+          onClick={() =>
+            navigate(`${Routes.REDEEM}/${address}/${tr.tranche_id}`)
+          }
+          address={address}
         />
       ))}
       <Callout
@@ -132,7 +160,7 @@ export const RedemptionInformation = () => {
         intent={Intent.Warning}
       >
         <p>{t('Find out more about Staking.')}</p>
-        <Link to="/staking" className="underline text-white">
+        <Link to={Routes.VALIDATORS} className="underline text-white">
           {t('Stake VEGA tokens')}
         </Link>
       </Callout>

apps/token/src/routes/redemption/home/vesting-table.tsx

@@ -12,7 +12,7 @@ export interface VestingTableProps {
 }
 
 const VestingTableIndicatorSquare = ({ colour }: { colour: string }) => (
-  <span className={`bg-${colour} inline-block h-12 w-12 mr-4`} />
+  <span className={`bg-${colour} inline-block h-4 w-4 mr-1`} />
 );
 
 export const VestingTable = ({
@@ -65,17 +65,17 @@ export const VestingTable = ({
       </KeyValueTable>
       <div className="flex border-white border">
         <div
-          className="bg-vega-pink h-16"
+          className="bg-vega-pink h-4"
           style={{ flex: lockedPercentage.toNumber() }}
         />
         <div
-          className="bg-vega-green h-16"
+          className="bg-vega-green h-4"
           style={{ flex: vestedPercentage.toNumber() }}
         />
       </div>
-      <div className="flex h-4 mt-4">
+      <div className="flex h-1 mt-1">
         <div
-          className="bg-vega-yellow h-4"
+          className="bg-vega-yellow h-1"
           style={{ flex: stakedPercentage.toNumber() }}
         />
         <div

apps/token/src/routes/redemption/hooks.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useTranches } from '../../lib/tranches/tranches-store';
+import { useContracts } from '../../contexts/contracts/contracts-context';
+import BigNumber from 'bignumber.js';
+import { toBigNum } from '@vegaprotocol/react-helpers';
+import { useAppState } from '../../contexts/app-state/app-state-context';
+
+export const useUserTrancheBalances = (address: string | undefined) => {
+  const [userTrancheBalances, setUserTrancheBalances] = useState<
+    {
+      id: number;
+      locked: BigNumber;
+      vested: BigNumber;
+    }[]
+  >([]);
+  const {
+    appState: { decimals },
+  } = useAppState();
+  const { vesting } = useContracts();
+  const tranches = useTranches((state) => state.tranches);
+  const loadUserTrancheBalances = useCallback(async () => {
+    if (!address) return;
+    const userTranches =
+      tranches?.filter((t) =>
+        t.users.some(
+          (a) => a && address && a.toLowerCase() === address.toLowerCase()
+        )
+      ) || [];
+    const trancheIds = [0, ...userTranches.map((t) => t.tranche_id)];
+    const promises = trancheIds.map(async (tId) => {
+      const [t, v] = await Promise.all([
+        vesting.get_tranche_balance(address, tId),
+        vesting.get_vested_for_tranche(address, tId),
+      ]);
+
+      const total = toBigNum(t, decimals);
+      const vested = toBigNum(v, decimals);
+
+      return {
+        id: tId,
+        locked: tId === 0 ? total : total.minus(vested),
+        vested: tId === 0 ? new BigNumber(0) : vested,
+      };
+    });
+
+    const trancheBalances = await Promise.all(promises);
+    setUserTrancheBalances(trancheBalances);
+  }, [address, decimals, tranches, vesting]);
+  useEffect(() => {
+    loadUserTrancheBalances();
+  }, [loadUserTrancheBalances]);
+  return userTrancheBalances;
+};

apps/token/src/routes/redemption/redemption-reducer.ts

@@ -1,38 +0,0 @@
-import type { Tranche } from '@vegaprotocol/smart-contracts';
-import type { BigNumber } from '../../lib/bignumber';
-
-export interface TrancheBalance {
-  id: number;
-  locked: BigNumber;
-  vested: BigNumber;
-}
-
-export interface RedemptionState {
-  userTranches: Tranche[];
-}
-
-export const initialRedemptionState: RedemptionState = {
-  userTranches: [],
-};
-
-export enum RedemptionActionType {
-  SET_USER_TRANCHES,
-}
-
-export type RedemptionAction = {
-  type: RedemptionActionType.SET_USER_TRANCHES;
-  userTranches: Tranche[];
-};
-
-export function redemptionReducer(
-  state: RedemptionState,
-  action: RedemptionAction
-): RedemptionState {
-  switch (action.type) {
-    case RedemptionActionType.SET_USER_TRANCHES:
-      return {
-        ...state,
-        userTranches: action.userTranches,
-      };
-  }
-}

apps/token/src/routes/redemption/redemption.tsx

@@ -1,51 +1,62 @@
-import { Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  Button,
+  Callout,
+  FormGroup,
+  Input,
+  InputError,
+  Intent,
+  Splash,
+} from '@vegaprotocol/ui-toolkit';
 import { useWeb3React } from '@web3-react/core';
-import React from 'react';
+import { useCallback } from 'react';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { Outlet } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+import { Outlet, useNavigate, useParams } from 'react-router-dom';
 
 import { EthConnectPrompt } from '../../components/eth-connect-prompt';
 import { SplashLoader } from '../../components/splash-loader';
-import { useTranches } from '../../hooks/use-tranches';
-import { useBalances } from '../../lib/balances/balances-store';
+import { useTranches } from '../../lib/tranches/tranches-store';
 import RoutesConfig from '../routes';
-import {
-  initialRedemptionState,
-  RedemptionActionType,
-  redemptionReducer,
-} from './redemption-reducer';
+
+interface FormFields {
+  address: string;
+}
 
 const RedemptionRouter = () => {
+  const { address } = useParams<{ address: string }>();
+  const navigate = useNavigate();
   const { t } = useTranslation();
-  const [state, dispatch] = React.useReducer(
-    redemptionReducer,
-    initialRedemptionState
-  );
-  const { trancheBalances } = useBalances();
-  const { account } = useWeb3React();
-  const { tranches, error, loading } = useTranches();
-
-  React.useEffect(() => {
-    const run = (address: string) => {
-      const userTranches = tranches?.filter((t) =>
-        t.users.some(
-          ({ address: a }) => a.toLowerCase() === address.toLowerCase()
-        )
-      );
-
-      if (userTranches) {
-        dispatch({
-          type: RedemptionActionType.SET_USER_TRANCHES,
-          userTranches,
-        });
+  const validatePubkey = useCallback(
+    (value: string) => {
+      if (!value.startsWith('0x')) {
+        return t('Address must begin with 0x');
+      } else if (value.length !== 42) {
+        return t('Pubkey must be 42 characters in length');
+      } else if (Number.isNaN(+value)) {
+        return t('Pubkey must be be valid hex');
       }
-    };
+      return true;
+    },
+    [t]
+  );
+  const { account } = useWeb3React();
+  const { tranches, error, loading } = useTranches((state) => ({
+    loading: state.loading,
+    error: state.error,
+    tranches: state.tranches,
+  }));
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormFields>();
 
-    if (account) {
-      run(account);
-    }
-  }, [account, tranches]);
+  const onSubmit = useCallback(
+    (fields: FormFields) => {
+      navigate(`${RoutesConfig.REDEEM}/${fields.address}`);
+    },
+    [navigate]
+  );
 
   if (error) {
     return (
@@ -63,30 +74,48 @@ const RedemptionRouter = () => {
     );
   }
 
-  if (!account) {
+  if (!address) {
     return (
-      <EthConnectPrompt>
-        <p data-testid="eth-connect-prompt">
-          {t(
-            "Use the Ethereum wallet you want to send your tokens to. You'll also need enough Ethereum to pay gas."
-          )}
-        </p>
-      </EthConnectPrompt>
+      <div className="max-w-md">
+        {!account ? (
+          <EthConnectPrompt />
+        ) : (
+          <Button
+            fill={true}
+            variant="primary"
+            onClick={() => navigate(`${RoutesConfig.REDEEM}/${account}`)}
+          >
+            {t('View connected Eth Wallet')}
+          </Button>
+        )}
+        <p className="py-4 flex justify-center">{t('OR')}</p>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          data-testid="view-connector-form"
+        >
+          <FormGroup label={'View Ethereum as user:'} labelFor="address">
+            <Input
+              {...register('address', {
+                required: t('Required'),
+                validate: validatePubkey,
+              })}
+              id="address"
+              data-testid="address"
+              type="text"
+            />
+            {errors.address?.message && (
+              <InputError intent="danger">{errors.address.message}</InputError>
+            )}
+          </FormGroup>
+          <Button data-testid="connect" type="submit" fill={true}>
+            {t('View Ethereum user')}
+          </Button>
+        </form>
+      </div>
     );
   }
 
-  if (!trancheBalances.length) {
-    return (
-      <>
-        <Callout>
-          <p>{t('You have no VEGA tokens currently vesting.')}</p>
-        </Callout>
-        <Link to={RoutesConfig.SUPPLY}>{t('viewAllTranches')}</Link>
-      </>
-    );
-  }
-
-  return <Outlet context={{ state, account }} />;
+  return <Outlet />;
 };
 
 export default RedemptionRouter;

apps/token/src/routes/redemption/tranche-item.tsx

@@ -33,10 +33,10 @@ export const TrancheItem = ({
 }: TrancheItemProps) => {
   const { t } = useTranslation();
   const labelClasses =
-    'inline-block uppercase bg-white text-black py-4 px-8 font-mono';
+    'inline-block uppercase bg-white text-black py-1 px-2 font-mono';
 
   return (
-    <section data-testid="tranche-item" className="mb-40">
+    <section data-testid="tranche-item" className="mb-8">
       <div className="flex border-b">
         {link ? (
           <Link to={link}>

apps/token/src/routes/redemption/tranche-table.tsx

@@ -8,6 +8,7 @@ import { formatNumber } from '../../lib/format-number';
 import Routes from '../routes';
 import { TrancheItem } from './tranche-item';
 import { Button } from '@vegaprotocol/ui-toolkit';
+import { useWeb3React } from '@web3-react/core';
 
 export interface TrancheTableProps {
   tranche: {
@@ -22,6 +23,7 @@ export interface TrancheTableProps {
   totalLocked: BigNumber;
   onClick: () => void;
   disabled?: boolean;
+  address: string | null;
 }
 
 export const Tranche0Table = ({
@@ -65,9 +67,11 @@ export const TrancheTable = ({
   totalVested,
   totalLocked,
   disabled = false,
+  address,
 }: TrancheTableProps) => {
   const { t } = useTranslation();
   const total = vested.plus(locked);
+  const { account: connectedAddress } = useWeb3React();
   const trancheFullyLocked =
     tranche.tranche_start.getTime() > new Date().getTime();
   const totalAllTranches = totalVested.plus(totalLocked);
@@ -93,13 +97,20 @@ export const TrancheTable = ({
             amount: reduceAmount,
           }}
           components={{
-            stakeLink: <Link to={`/staking`} />,
-            disassociateLink: <Link to={`/staking/disassociate`} />,
+            stakeLink: <Link className="underline" to={Routes.VALIDATORS} />,
+            disassociateLink: (
+              <Link className="underline" to={Routes.DISASSOCIATE} />
+            ),
           }}
         />
       </div>
     );
-  } else if (!trancheFullyLocked && redeemable) {
+  } else if (
+    !trancheFullyLocked &&
+    redeemable &&
+    connectedAddress &&
+    address === connectedAddress
+  ) {
     message = (
       <Button onClick={onClick} disabled={disabled}>
         {t('Redeem unlocked VEGA from tranche {{id}}', {

apps/token/src/routes/redemption/tranche/index.tsx

@@ -1,7 +1,7 @@
 import { useBalances } from '../../../lib/balances/balances-store';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Link, useParams, useOutletContext } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
 import { TransactionCallout } from '../../../components/transaction-callout';
 import { useContracts } from '../../../contexts/contracts/contracts-context';
@@ -9,32 +9,36 @@ import {
   TransactionActionType,
   TxState,
 } from '../../../hooks/transaction-reducer';
-import { useGetUserTrancheBalances } from '../../../hooks/use-get-user-tranche-balances';
 import { useRefreshBalances } from '../../../hooks/use-refresh-balances';
 import { useTransaction } from '../../../hooks/use-transaction';
 import { BigNumber } from '../../../lib/bignumber';
 import { formatNumber } from '../../../lib/format-number';
 import Routes from '../../routes';
-import type { RedemptionState } from '../redemption-reducer';
 import { TrancheTable } from '../tranche-table';
+import { useTranches } from '../../../lib/tranches/tranches-store';
+import { useWeb3React } from '@web3-react/core';
+import { EthConnectPrompt } from '../../../components/eth-connect-prompt';
+import { useUserTrancheBalances } from '../hooks';
+import { useAppState } from '../../../contexts/app-state/app-state-context';
 
 export const RedeemFromTranche = () => {
-  const { state, address } = useOutletContext<{
-    state: RedemptionState;
-    address: string;
-  }>();
+  const { account: address } = useWeb3React();
   const { vesting } = useContracts();
   const { t } = useTranslation();
-  const { lien, totalVestedBalance, trancheBalances, totalLockedBalance } =
-    useBalances();
-  const refreshBalances = useRefreshBalances(address);
-  const getUserTrancheBalances = useGetUserTrancheBalances(address, vesting);
+  const {
+    appState: { decimals },
+  } = useAppState();
+  const { lien, totalVestedBalance, totalLockedBalance } = useBalances();
+  const refreshBalances = useRefreshBalances(address || '');
+  const { tranches, getTranches } = useTranches((state) => ({
+    tranches: state.tranches,
+    getTranches: state.getTranches,
+  }));
   const { id } = useParams<{ id: string }>();
   const numberId = Number(id);
-  const { userTranches } = state;
   const tranche = React.useMemo(
-    () => userTranches.find(({ tranche_id }) => tranche_id === numberId),
-    [numberId, userTranches]
+    () => tranches?.find(({ tranche_id }) => tranche_id === numberId) || null,
+    [numberId, tranches]
   );
   const {
     state: txState,
@@ -42,7 +46,7 @@ export const RedeemFromTranche = () => {
     dispatch: txDispatch,
   } = useTransaction(() => vesting.withdraw_from_tranche(numberId));
   const { token } = useContracts();
-
+  const trancheBalances = useUserTrancheBalances(address || '');
   const redeemedAmount = React.useMemo(() => {
     return (
       trancheBalances.find(({ id: bId }) => bId.toString() === id?.toString())
@@ -55,10 +59,10 @@ export const RedeemFromTranche = () => {
   // If the claim has been committed refetch the new VEGA balance
   React.useEffect(() => {
     if (txState.txState === TxState.Complete && address) {
-      getUserTrancheBalances();
       refreshBalances();
+      getTranches(decimals);
     }
-  }, [address, getUserTrancheBalances, refreshBalances, txState.txState]);
+  }, [address, decimals, getTranches, refreshBalances, txState.txState]);
 
   const trancheBalance = React.useMemo(() => {
     return trancheBalances.find(
@@ -66,6 +70,10 @@ export const RedeemFromTranche = () => {
     );
   }, [id, trancheBalances]);
 
+  if (!address) {
+    return <EthConnectPrompt />;
+  }
+
   if (
     !tranche ||
     tranche.total_removed.isEqualTo(tranche.total_added) ||
@@ -147,6 +155,7 @@ export const RedeemFromTranche = () => {
           locked={trancheBalance.locked}
           vested={trancheBalance.vested}
           onClick={perform}
+          address={address || ''}
         />
       )}
     </section>

apps/token/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards-table.tsx

@@ -50,10 +50,11 @@ const DisplayReward = ({
     >
       <button>
         <div className="flex flex-col items-start">
-          <span>{formatNumber(toBigNum(reward, decimals))}</span>
+          <span>{formatNumber(toBigNum(reward, decimals), 4)}</span>
           {percentageOfTotal && (
             <span className="text-vega-dark-300">
-              ({formatNumber(toBigNum(percentageOfTotal, 4)).toString()}%)
+              ({formatNumber(percentageOfTotal, 4).toString()}
+              %)
             </span>
           )}
         </div>

apps/token/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.spec.ts

@@ -8,7 +8,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '100',
     percentageOfTotal: '0.1',
     receivedAt: new Date(),
-    asset: { id: 'usd', symbol: 'USD' },
+    asset: { id: 'usd', symbol: 'USD', name: 'USD' },
     party: { id: 'blah' },
     epoch: { id: '1' },
   };
@@ -18,7 +18,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '50',
     percentageOfTotal: '0.05',
     receivedAt: new Date(),
-    asset: { id: 'eur', symbol: 'EUR' },
+    asset: { id: 'eur', symbol: 'EUR', name: 'EUR' },
     party: { id: 'blah' },
     epoch: { id: '2' },
   };
@@ -28,7 +28,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '200',
     percentageOfTotal: '0.2',
     receivedAt: new Date(),
-    asset: { id: 'gbp', symbol: 'GBP' },
+    asset: { id: 'gbp', symbol: 'GBP', name: 'GBP' },
     party: { id: 'blah' },
     epoch: { id: '2' },
   };
@@ -38,7 +38,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '100',
     percentageOfTotal: '0.1',
     receivedAt: new Date(),
-    asset: { id: 'usd', symbol: 'USD' },
+    asset: { id: 'usd', symbol: 'USD', name: 'USD' },
     party: { id: 'blah' },
     epoch: { id: '1' },
   };
@@ -48,7 +48,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '50',
     percentageOfTotal: '0.05',
     receivedAt: new Date(),
-    asset: { id: 'eur', symbol: 'EUR' },
+    asset: { id: 'eur', symbol: 'EUR', name: 'EUR' },
     party: { id: 'blah' },
     epoch: { id: '2' },
   };
@@ -134,20 +134,20 @@ describe('generateEpochIndividualRewardsList', () => {
         epoch: '2',
         rewards: [
           {
-            asset: 'EUR',
-            totalAmount: '50',
+            asset: 'GBP',
+            totalAmount: '200',
             rewardTypes: {
               [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
                 amount: '0',
                 percentageOfTotal: '0',
               },
               [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
-                amount: '0',
-                percentageOfTotal: '0',
+                amount: '200',
+                percentageOfTotal: '0.2',
               },
               [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
-                amount: '50',
-                percentageOfTotal: '0.05',
+                amount: '0',
+                percentageOfTotal: '0',
               },
               [AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
                 amount: '0',
@@ -164,21 +164,21 @@ describe('generateEpochIndividualRewardsList', () => {
             },
           },
           {
-            asset: 'GBP',
-            totalAmount: '200',
+            asset: 'EUR',
+            totalAmount: '50',
             rewardTypes: {
               [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
                 amount: '0',
                 percentageOfTotal: '0',
               },
               [AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
-                amount: '200',
-                percentageOfTotal: '0.2',
-              },
-              [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
                 amount: '0',
                 percentageOfTotal: '0',
               },
+              [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
+                amount: '50',
+                percentageOfTotal: '0.05',
+              },
               [AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
                 amount: '0',
                 percentageOfTotal: '0',

apps/token/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.ts

@@ -33,7 +33,7 @@ export const generateEpochIndividualRewardsList = (
   // We take the rewards and aggregate them by epoch and asset.
   const epochIndividualRewards = rewards.reduce((map, reward) => {
     const epochId = reward.epoch.id;
-    const assetName = reward.asset.symbol;
+    const assetName = reward.asset.name;
     const rewardType = reward.rewardType;
     const amount = reward.amount;
     const percentageOfTotal = reward.percentageOfTotal;
@@ -70,6 +70,12 @@ export const generateEpochIndividualRewardsList = (
       '0'
     );
 
+    if (epoch) {
+      epoch.rewards = epoch.rewards.sort((a, b) => {
+        return new BigNumber(b.totalAmount).comparedTo(a.totalAmount);
+      });
+    }
+
     return map;
   }, new Map<string, EpochIndividualReward>());
 

apps/token/src/routes/rewards/epoch-total-rewards/generate-epoch-total-rewards-list.ts

@@ -5,6 +5,7 @@ import type {
 import { removePaginationWrapper } from '@vegaprotocol/react-helpers';
 import { RowAccountTypes } from '../shared-rewards-table-assets/shared-rewards-table-assets';
 import type { AccountType } from '@vegaprotocol/types';
+import { BigNumber } from '../../../lib/bignumber';
 
 interface EpochSummaryWithNamedReward extends EpochRewardSummaryFieldsFragment {
   name: string;
@@ -120,7 +121,9 @@ export const generateEpochTotalRewardsList = (
 
       return {
         epoch: epochSummaries[0].epoch,
-        assetRewards,
+        assetRewards: assetRewards.sort((a, b) => {
+          return new BigNumber(b.totalAmount).comparedTo(a.totalAmount);
+        }),
       };
     });
 

apps/token/src/routes/rewards/home/Rewards.graphql

@@ -3,6 +3,7 @@ fragment RewardFields on Reward {
   asset {
     id
     symbol
+    name
   }
   party {
     id

apps/token/src/routes/rewards/home/__generated__/Rewards.ts

@@ -3,7 +3,7 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type RewardFieldsFragment = { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } };
+export type RewardFieldsFragment = { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string, name: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } };
 
 export type DelegationFieldsFragment = { __typename?: 'Delegation', amount: string, epoch: number };
 
@@ -13,7 +13,7 @@ export type RewardsQueryVariables = Types.Exact<{
 }>;
 
 
-export type RewardsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, rewardsConnection?: { __typename?: 'RewardsConnection', edges?: Array<{ __typename?: 'RewardEdge', node: { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } } } | null> | null } | null, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number } } | null> | null } | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } } };
+export type RewardsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, rewardsConnection?: { __typename?: 'RewardsConnection', edges?: Array<{ __typename?: 'RewardEdge', node: { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string, name: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } } } | null> | null } | null, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number } } | null> | null } | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } } };
 
 export type EpochRewardSummaryFieldsFragment = { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType };
 
@@ -37,6 +37,7 @@ export const RewardFieldsFragmentDoc = gql`
   asset {
     id
     symbol
+    name
   }
   party {
     id

apps/token/src/routes/rewards/no-rewards.tsx

@@ -13,7 +13,7 @@ export const NoRewards = () => {
   return (
     <div className={classes}>
       <SubHeading title={t('noRewardsHaveBeenDistributedYet')} />
-      <p className="font-alpha text-xl">{t('checkBackSoon')}</p>
+      <p className="font-alpha calt text-xl">{t('checkBackSoon')}</p>
     </div>
   );
 };

apps/token/src/routes/router-config.tsx

@@ -300,12 +300,17 @@ const routerConfig = [
         element: <LazyRedemption name="Vesting" />,
         children: [
           {
-            index: true,
-            element: <LazyRedemptionIndex />,
-          },
-          {
-            path: ':id',
-            element: <LazyRedemptionTranche />,
+            path: ':address',
+            children: [
+              {
+                index: true,
+                element: <LazyRedemptionIndex />,
+              },
+              {
+                path: ':id',
+                element: <LazyRedemptionTranche />,
+              },
+            ],
           },
         ],
       },

apps/token/src/routes/staking/associate/components/staking-wallets-container/staking-wallets-container.tsx

@@ -16,10 +16,11 @@ export const StakingWalletsContainer = ({
 
   if (!account) {
     return (
-      <EthConnectPrompt>
+      <>
         <p>{t('associateInfo1')}</p>
         <p>{t('associateInfo2')}</p>
-      </EthConnectPrompt>
+        <EthConnectPrompt />
+      </>
     );
   }
 

apps/token/src/routes/token/token-details/token-details-circulating.test.ts

@@ -1,35 +1,34 @@
 import { BigNumber } from '../../../lib/bignumber';
 import { sumCirculatingTokens } from './token-details-circulating';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
 
 it('It sums some easy tranches correctly', () => {
-  const tranches: Partial<Tranche>[] = [
-    { total_added: new BigNumber('100'), locked_amount: new BigNumber(0) },
-    { total_added: new BigNumber('100'), locked_amount: new BigNumber(0) },
-    { total_added: new BigNumber('100'), locked_amount: new BigNumber(0) },
+  const tranches = [
+    { total_added: new BigNumber(100), locked_amount: new BigNumber(0) },
+    { total_added: new BigNumber(100), locked_amount: new BigNumber(0) },
+    { total_added: new BigNumber(100), locked_amount: new BigNumber(0) },
   ];
 
-  const result = sumCirculatingTokens(tranches as Tranche[]);
+  const result = sumCirculatingTokens(tranches);
   expect(result.toString()).toEqual('300');
 });
 
 it('It sums some longer tranches correctly', () => {
-  const tranches: Partial<Tranche>[] = [
+  const tranches = [
     {
-      total_added: new BigNumber('10000000000'),
+      total_added: new BigNumber(10000000000),
       locked_amount: new BigNumber(0),
     },
-    { total_added: new BigNumber('20'), locked_amount: new BigNumber(0) },
-    { total_added: new BigNumber('3000'), locked_amount: new BigNumber(3020) },
+    { total_added: new BigNumber(20), locked_amount: new BigNumber(0) },
+    { total_added: new BigNumber(3000), locked_amount: new BigNumber(3020) },
   ];
 
-  const result = sumCirculatingTokens(tranches as Tranche[]);
+  const result = sumCirculatingTokens(tranches);
   expect(result.toString()).toEqual('10000000000');
 });
 
 it('Handles null tranche array', () => {
   const tranches = null;
 
-  const result = sumCirculatingTokens(tranches as unknown as Tranche[]);
+  const result = sumCirculatingTokens(tranches);
   expect(result.toString()).toEqual('0');
 });

apps/token/src/routes/token/token-details/token-details-circulating.tsx

@@ -1,6 +1,6 @@
 import { BigNumber } from '../../../lib/bignumber';
 import { formatNumber } from '../../../lib/format-number';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
+import type { Tranche } from '../../../lib/tranches/tranches-store';
 
 /**
  * Add together the circulating tokens from all tranches
@@ -9,7 +9,9 @@ import type { Tranche } from '@vegaprotocol/smart-contracts';
  * @param decimals decimal places for the formatted result
  * @return The total circulating tokens from all tranches
  */
-export function sumCirculatingTokens(tranches: Tranche[] | null): BigNumber {
+export function sumCirculatingTokens(
+  tranches: { total_added: BigNumber; locked_amount: BigNumber }[] | null
+): BigNumber {
   let totalCirculating: BigNumber = new BigNumber(0);
 
   tranches?.forEach(

apps/token/src/routes/token/token-details/token-details.tsx

@@ -7,7 +7,7 @@ import {
   KeyValueTableRow,
   RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
-import { useTranches } from '../../../hooks/use-tranches';
+import { useTranches } from '../../../lib/tranches/tranches-store';
 import type { BigNumber } from '../../../lib/bignumber';
 import { formatNumber } from '../../../lib/format-number';
 import { TokenDetailsCirculating } from './token-details-circulating';
@@ -25,7 +25,11 @@ export const TokenDetails = ({
   const { ETHERSCAN_URL } = useEnvironment();
   const { t } = useTranslation();
 
-  const { tranches, loading, error } = useTranches();
+  const { tranches, loading, error } = useTranches((state) => ({
+    loading: state.loading,
+    error: state.error,
+    tranches: state.tranches,
+  }));
   const { config } = useEthereumConfig();
   const { token } = useContracts();
 

apps/token/src/routes/tranches/index.tsx

@@ -4,14 +4,18 @@ import { Outlet } from 'react-router-dom';
 import { Heading } from '../../components/heading';
 import { SplashLoader } from '../../components/splash-loader';
 import { useDocumentTitle } from '../../hooks/use-document-title';
-import { useTranches } from '../../hooks/use-tranches';
 import type { RouteChildProps } from '..';
 import { Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
+import { useTranches } from '../../lib/tranches/tranches-store';
 
 const TrancheRouter = ({ name }: RouteChildProps) => {
   useDocumentTitle(name);
   const { t } = useTranslation();
-  const { tranches, error, loading } = useTranches();
+  const { tranches, error, loading } = useTranches((state) => ({
+    loading: state.loading,
+    error: state.error,
+    tranches: state.tranches,
+  }));
 
   if (!tranches || loading) {
     return (

apps/token/src/routes/tranches/tranche.tsx

@@ -1,48 +1,32 @@
-import type { Tranche as ITranche } from '@vegaprotocol/smart-contracts';
-import { Link } from '@vegaprotocol/ui-toolkit';
+import {
+  KeyValueTable,
+  KeyValueTableRow,
+  Link,
+  RoundedWrapper,
+} from '@vegaprotocol/ui-toolkit';
+import { Link as RouterLink } from 'react-router-dom';
 import { useWeb3React } from '@web3-react/core';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 import { Navigate } from 'react-router-dom';
+import { formatNumber } from '@vegaprotocol/react-helpers';
 
-import { useOutletContext } from 'react-router-dom';
 import { useEnvironment } from '@vegaprotocol/environment';
-import { BigNumber } from '../../lib/bignumber';
-import { formatNumber } from '../../lib/format-number';
 import { TrancheItem } from '../redemption/tranche-item';
 import Routes from '../routes';
 import { TrancheLabel } from './tranche-label';
-
-const TrancheProgressContents = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => (
-  <div className="flex justify-between gap-4 font-mono py-2 px-4">
-    {children}
-  </div>
-);
+import { useTranches } from '../../lib/tranches/tranches-store';
 
 export const Tranche = () => {
-  const tranches = useOutletContext<ITranche[]>();
+  const tranches = useTranches((state) => state.tranches);
   const { ETHERSCAN_URL } = useEnvironment();
   const { t } = useTranslation();
-  const { trancheId } = useParams<{ trancheId: string }>();
+  const { trancheId } = useParams<{ trancheId: string; address: string }>();
   const { chainId } = useWeb3React();
-  const tranche = tranches.find(
+  const tranche = tranches?.find(
     (tranche) => trancheId && parseInt(trancheId) === tranche.tranche_id
   );
 
-  const lockedData = React.useMemo(() => {
-    if (!tranche) return null;
-    const locked = tranche.locked_amount.div(tranche.total_added);
-    return {
-      locked,
-      unlocked: new BigNumber(1).minus(locked),
-    };
-  }, [tranche]);
-
   if (!tranche) {
     return <Navigate to={Routes.NOT_FOUND} />;
   }
@@ -67,33 +51,36 @@ export const Tranche = () => {
       </div>
       <h2>{t('Holders')}</h2>
       {tranche.users.length ? (
-        <ul role="list">
-          {tranche.users.map((user, i) => {
-            const unlocked = user.remaining_tokens.times(
-              lockedData?.unlocked || 0
-            );
-            const locked = user.remaining_tokens.times(lockedData?.locked || 0);
-            return (
-              <li className="pb-4" key={i}>
-                <Link
-                  title={t('View on Etherscan (opens in a new tab)')}
-                  href={`${ETHERSCAN_URL}/tx/${user.address}`}
-                  target="_blank"
-                >
-                  {user.address}
-                </Link>
-                <TrancheProgressContents>
-                  <span>{t('Locked')}</span>
-                  <span>{t('Unlocked')}</span>
-                </TrancheProgressContents>
-                <TrancheProgressContents>
-                  <span>{formatNumber(locked)}</span>
-                  <span>{formatNumber(unlocked)}</span>
-                </TrancheProgressContents>
-              </li>
-            );
-          })}
-        </ul>
+        <RoundedWrapper>
+          <KeyValueTable>
+            <KeyValueTableRow>
+              <h1>{t('Ethereum Address')}</h1>
+              <h1>{t('View tranche data')}</h1>
+            </KeyValueTableRow>
+            {tranche.users.map((user) => (
+              <KeyValueTableRow key={user}>
+                {
+                  <Link
+                    title={t('View on Etherscan (opens in a new tab)')}
+                    href={`${ETHERSCAN_URL}/address/${user}`}
+                    target="_blank"
+                  >
+                    {user}
+                  </Link>
+                }
+                {
+                  <RouterLink
+                    className="underline"
+                    title={t('View vesting information')}
+                    to={`${Routes.REDEEM}/${user}`}
+                  >
+                    {t('View vesting information')}
+                  </RouterLink>
+                }
+              </KeyValueTableRow>
+            ))}
+          </KeyValueTable>
+        </RoundedWrapper>
       ) : (
         <p>{t('No users')}</p>
       )}

apps/token/src/routes/tranches/tranches.tsx

@@ -1,5 +1,3 @@
-import { useOutletContext } from 'react-router-dom';
-import type { Tranche } from '@vegaprotocol/smart-contracts';
 import { useWeb3React } from '@web3-react/core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,6 +8,8 @@ import { TrancheLabel } from './tranche-label';
 import { VestingChart } from './vesting-chart';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import { useEthereumConfig } from '@vegaprotocol/web3';
+import type { Tranche } from '../../lib/tranches/tranches-store';
+import { useTranches } from '../../lib/tranches/tranches-store';
 
 const trancheMinimum = 10;
 
@@ -17,7 +17,7 @@ const shouldShowTranche = (t: Tranche) =>
   !t.total_added.isLessThanOrEqualTo(trancheMinimum);
 
 export const Tranches = () => {
-  const tranches = useOutletContext<Tranche[]>();
+  const tranches = useTranches((state) => state.tranches);
   const [showAll, setShowAll] = React.useState<boolean>(false);
   const { t } = useTranslation();
   const { chainId } = useWeb3React();
@@ -38,25 +38,24 @@ export const Tranches = () => {
         <ul role="list">
           {(showAll ? tranches : filteredTranches).map((tranche) => {
             return (
-              <React.Fragment key={tranche.tranche_id}>
-                <TrancheItem
-                  link={`${tranche.tranche_id}`}
-                  tranche={tranche}
-                  locked={tranche.locked_amount}
-                  unlocked={tranche.total_added.minus(tranche.locked_amount)}
-                  total={tranche.total_added}
-                  secondaryHeader={
-                    <TrancheLabel chainId={chainId} id={tranche.tranche_id} />
-                  }
-                />
-              </React.Fragment>
+              <TrancheItem
+                key={tranche.tranche_id}
+                link={`${tranche.tranche_id}`}
+                tranche={tranche}
+                locked={tranche.locked_amount}
+                unlocked={tranche.total_added.minus(tranche.locked_amount)}
+                total={tranche.total_added}
+                secondaryHeader={
+                  <TrancheLabel chainId={chainId} id={tranche.tranche_id} />
+                }
+              />
             );
           })}
         </ul>
       ) : (
         <p>{t('No tranches')}</p>
       )}
-      <section className="text-center mt-32">
+      <section className="text-center mt-4">
         <ButtonLink onClick={() => setShowAll(!showAll)}>
           {showAll
             ? t(

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

@@ -190,6 +190,24 @@ describe('capsule', { tags: '@slow' }, () => {
     cy.setVegaWallet();
   });
 
+  it('shows node health', function () {
+    const market = this.market;
+    cy.visit(`/#/markets/${market.id}`);
+    cy.getByTestId('node-health')
+      .children()
+      .first()
+      .should('contain.text', 'Operational')
+      .next()
+      .should('contain.text', new URL(Cypress.env('VEGA_URL')).origin)
+      .next()
+      .then(($el) => {
+        const blockHeight = parseInt($el.text());
+        // block height will increase over the course of the test run so best
+        // we can do here is check that its showing something sensible
+        expect(blockHeight).to.be.greaterThan(0);
+      });
+  });
+
   it('can place and receive an order', function () {
     const market = this.market;
     cy.visit(`/#/markets/${market.id}`);

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

@@ -304,4 +304,18 @@ describe('home', { tags: '@regression' }, () => {
       });
     });
   });
+
+  describe('footer', () => {
+    it('shows current block height', () => {
+      cy.visit('/');
+      cy.getByTestId('node-health')
+        .children()
+        .first()
+        .should('contain.text', 'Operational')
+        .next()
+        .should('contain.text', new URL(Cypress.env('VEGA_URL')).origin)
+        .next()
+        .should('contain.text', '100'); // all mocked queries have x-block-height header set to 100
+    });
+  });
 });

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

@@ -125,19 +125,12 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     validateMarketDataRow(1, 'Long', '0.008508132993273576');
   });
 
-  it('price monitoring trigger displayed', () => {
-    cy.getByTestId(marketTitle).contains('Price monitoring trigger 1').click();
-
-    validateMarketDataRow(0, 'Horizon Secs', '43,200');
-    validateMarketDataRow(1, 'Probability', '1');
-    validateMarketDataRow(2, 'Auction Extension Secs', '600');
-  });
-
-  it('price monitoring bound displayed', () => {
-    cy.getByTestId(marketTitle).contains('Price monitoring bound 1').click();
-
-    validateMarketDataRow(0, 'Min Valid Price', '6.54701 ');
-    validateMarketDataRow(1, 'Max Valid Price', '7.97323 ');
+  it('price monitoring bounds displayed', () => {
+    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 ');
     validateMarketDataRow(2, 'Reference Price', '7.22625 ');
   });
 

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

@@ -84,7 +84,7 @@ export const TradeMarketHeader = ({
         heading={t('Volume (24h)')}
         testId="market-volume"
         description={t(
-          'The total amount of assets traded in the last 24 hours.'
+          'The total number of contracts traded in the last 24 hours.'
         )}
       >
         <Last24hVolume