feat: wire up vesting information

apps/trading/components/rewards-container/Rewards.graphql

@@ -1,6 +1,11 @@
 query RewardsPage($partyId: ID!) {
   party(id: $partyId) {
     id
+    vestingStats {
+      epochSeq
+      rewardBonusMultiplier
+      quantumBalance
+    }
     vestingBalancesSummary {
       epoch
       vestingBalances {

apps/trading/components/rewards-container/__generated__/Rewards.ts

@@ -8,7 +8,7 @@ export type RewardsPageQueryVariables = Types.Exact<{
 }>;
 
 
-export type RewardsPageQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, vestingBalancesSummary: { __typename?: 'PartyVestingBalancesSummary', epoch?: number | null, vestingBalances?: Array<{ __typename?: 'PartyVestingBalance', balance: string, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number, quantum: string } }> | null, lockedBalances?: Array<{ __typename?: 'PartyLockedBalance', balance: string, untilEpoch: number, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number, quantum: string } }> | null } } | null };
+export type RewardsPageQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, vestingStats?: { __typename?: 'PartyVestingStats', epochSeq: number, rewardBonusMultiplier: string, quantumBalance: string } | null, vestingBalancesSummary: { __typename?: 'PartyVestingBalancesSummary', epoch?: number | null, vestingBalances?: Array<{ __typename?: 'PartyVestingBalance', balance: string, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number, quantum: string } }> | null, lockedBalances?: Array<{ __typename?: 'PartyLockedBalance', balance: string, untilEpoch: number, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number, quantum: string } }> | null } } | null };
 
 export type RewardsHistoryQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
@@ -31,6 +31,11 @@ export const RewardsPageDocument = gql`
     query RewardsPage($partyId: ID!) {
   party(id: $partyId) {
     id
+    vestingStats {
+      epochSeq
+      rewardBonusMultiplier
+      quantumBalance
+    }
     vestingBalancesSummary {
       epoch
       vestingBalances {

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

@@ -31,6 +31,7 @@ import { addDecimalsFormatNumberQuantum } from '@vegaprotocol/utils';
 import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { RewardsHistoryContainer } from './rewards-history';
+import { useAssetDataProvider } from '@vegaprotocol/assets';
 
 export const RewardsContainer = () => {
   const { pubKey } = useVegaWallet();
@@ -109,7 +110,14 @@ export const RewardsContainer = () => {
         );
       })}
       <Card title={t('Vesting')} className="lg:col-span-2" loading={loading}>
-        <Vesting pubKey={pubKey} baseRate={params.rewards_vesting_baseRate} />
+        <Vesting
+          pubKey={pubKey}
+          assetId={params.reward_asset}
+          baseRate={params.rewards_vesting_baseRate}
+          multiplier={rewardsData?.party?.vestingStats?.rewardBonusMultiplier}
+          vestingBalancesSummary={rewardsData?.party?.vestingBalancesSummary}
+          epoch={Number(epochData.epoch.id)}
+        />
       </Card>
       <Card
         title={t('Rewards multipliers')}
@@ -203,7 +211,7 @@ export const RewardPot = ({
   if (!pubKey) {
     return (
       <div className="pt-4">
-        <p className="text-sm text-muted">{t('Not connected')}</p>
+        <p className="text-muted text-sm">{t('Not connected')}</p>
       </div>
     );
   }
@@ -276,20 +284,47 @@ export const RewardPot = ({
           </div>
         </>
       ) : (
-        <p className="text-sm text-muted">{t('No rewards')}</p>
+        <p className="text-muted text-sm">{t('No rewards')}</p>
       )}
     </div>
   );
 };
 
 export const Vesting = ({
+  assetId,
   pubKey,
   baseRate,
+  multiplier,
+  vestingBalancesSummary,
+  epoch,
 }: {
+  assetId: string;
   pubKey: string | null;
   baseRate: string;
+  multiplier: string | undefined;
+  vestingBalancesSummary: VestingBalances | undefined;
+  epoch: number;
 }) => {
+  const { data: asset } = useAssetDataProvider(assetId);
+
+  if (!asset) return null;
+
   const baseRateFormatted = formatPercentage(Number(baseRate));
+
+  const lockedEntries = vestingBalancesSummary?.lockedBalances?.filter(
+    (b) => b.asset.id === assetId
+  );
+
+  const unlockingNextEpoch = lockedEntries?.filter(
+    (e) => e.untilEpoch === epoch + 1
+  );
+
+  const nextEpochBalances = unlockingNextEpoch?.length
+    ? unlockingNextEpoch.map((e) => e.balance)
+    : [0];
+
+  const totalUnlockingNextEpoch = BigNumber.sum.apply(null, nextEpochBalances);
+
   return (
     <div className="pt-4">
       <CardStat value={baseRateFormatted + '%'} />
@@ -302,11 +337,17 @@ export const Vesting = ({
           <>
             <tr>
               <CardTableTH>{t('Vesting multiplier')}</CardTableTH>
-              <CardTableTD>0%</CardTableTD>
+              <CardTableTD>{multiplier}</CardTableTD>
             </tr>
             <tr>
               <CardTableTH>{t('Available to withdraw next epoch')}</CardTableTH>
-              <CardTableTD>0</CardTableTD>
+              <CardTableTD>
+                {addDecimalsFormatNumberQuantum(
+                  totalUnlockingNextEpoch.toString(),
+                  asset.decimals,
+                  asset.quantum
+                )}
+              </CardTableTD>
             </tr>
           </>
         )}
@@ -318,7 +359,7 @@ export const Vesting = ({
 const Multipliers = () => {
   return (
     <div className="pt-4">
-      <p className="text-sm text-muted">{t('No active reward bonuses')}</p>
+      <p className="text-muted text-sm">{t('No active reward bonuses')}</p>
     </div>
   );
 };

libs/markets/src/lib/__generated__/markets-candles.ts

@@ -1,9 +1,10 @@
 import * as Types from '@vegaprotocol/types';
 
 import { gql } from '@apollo/client';
-import { MarketCandlesFieldsFragmentDoc } from './market-candles';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
+export type MarketCandlesFieldsFragment = { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, periodStart: any };
+
 export type MarketsCandlesQueryVariables = Types.Exact<{
   interval: Types.Interval;
   since: Types.Scalars['String'];
@@ -12,7 +13,16 @@ export type MarketsCandlesQueryVariables = Types.Exact<{
 
 export type MarketsCandlesQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, candlesConnection?: { __typename?: 'CandleDataConnection', edges?: Array<{ __typename?: 'CandleEdge', node: { __typename?: 'Candle', high: string, low: string, open: string, close: string, volume: string, periodStart: any } } | null> | null } | null } }> } | null };
 
-
+export const MarketCandlesFieldsFragmentDoc = gql`
+    fragment MarketCandlesFields on Candle {
+  high
+  low
+  open
+  close
+  volume
+  periodStart
+}
+    `;
 export const MarketsCandlesDocument = gql`
     query MarketsCandles($interval: Interval!, $since: String!) {
   marketsConnection {