feat: initial version rewards

apps/trading/.env

@@ -3,16 +3,17 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
-NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
-NX_VEGA_ENV=STAGNET1
-NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
+NX_VEGA_ENV=TESTNET
+NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
-NX_VEGA_TOKEN_URL=https://governance.stagnet1.vega.rocks
+NX_VEGA_TOKEN_URL=https://governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
+NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-fairground
 NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
@@ -25,3 +26,6 @@ NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
+
+NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket

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

@@ -36,6 +36,26 @@ query RewardsPage($partyId: ID!) {
   }
 }
 
+query ActivityStreak($partyId: ID!) {
+  partiesConnection(id: $partyId) {
+    edges {
+      node {
+        id
+        activityStreak {
+          activeFor
+          isActive
+          inactiveFor
+          rewardDistributionMultiplier
+          rewardVestingMultiplier
+          epoch
+          tradedVolume
+          openVolume
+        }
+      }
+    }
+  }
+}
+
 query RewardsHistory(
   $partyId: ID!
   $epochRewardSummariesPagination: Pagination

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

@@ -10,6 +10,13 @@ export type RewardsPageQueryVariables = Types.Exact<{
 
 export type RewardsPageQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, vestingStats?: { __typename?: 'PartyVestingStats', rewardBonusMultiplier: string } | null, activityStreak?: { __typename?: 'PartyActivityStreak', rewardVestingMultiplier: string, rewardDistributionMultiplier: 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 ActivityStreakQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type ActivityStreakQuery = { __typename?: 'Query', partiesConnection?: { __typename?: 'PartyConnection', edges: Array<{ __typename?: 'PartyEdge', node: { __typename?: 'Party', id: string, activityStreak?: { __typename?: 'PartyActivityStreak', activeFor: number, isActive: boolean, inactiveFor: number, rewardDistributionMultiplier: string, rewardVestingMultiplier: string, epoch: number, tradedVolume: string, openVolume: string } | null } }> } | null };
+
 export type RewardsHistoryQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
   epochRewardSummariesPagination?: Types.InputMaybe<Types.Pagination>;
@@ -91,6 +98,55 @@ export function useRewardsPageLazyQuery(baseOptions?: Apollo.LazyQueryHookOption
 export type RewardsPageQueryHookResult = ReturnType<typeof useRewardsPageQuery>;
 export type RewardsPageLazyQueryHookResult = ReturnType<typeof useRewardsPageLazyQuery>;
 export type RewardsPageQueryResult = Apollo.QueryResult<RewardsPageQuery, RewardsPageQueryVariables>;
+export const ActivityStreakDocument = gql`
+    query ActivityStreak($partyId: ID!) {
+  partiesConnection(id: $partyId) {
+    edges {
+      node {
+        id
+        activityStreak {
+          activeFor
+          isActive
+          inactiveFor
+          rewardDistributionMultiplier
+          rewardVestingMultiplier
+          epoch
+          tradedVolume
+          openVolume
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useActivityStreakQuery__
+ *
+ * To run a query within a React component, call `useActivityStreakQuery` and pass it any options that fit your needs.
+ * When your component renders, `useActivityStreakQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useActivityStreakQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useActivityStreakQuery(baseOptions: Apollo.QueryHookOptions<ActivityStreakQuery, ActivityStreakQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ActivityStreakQuery, ActivityStreakQueryVariables>(ActivityStreakDocument, options);
+      }
+export function useActivityStreakLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ActivityStreakQuery, ActivityStreakQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ActivityStreakQuery, ActivityStreakQueryVariables>(ActivityStreakDocument, options);
+        }
+export type ActivityStreakQueryHookResult = ReturnType<typeof useActivityStreakQuery>;
+export type ActivityStreakLazyQueryHookResult = ReturnType<typeof useActivityStreakLazyQuery>;
+export type ActivityStreakQueryResult = Apollo.QueryResult<ActivityStreakQuery, ActivityStreakQueryVariables>;
 export const RewardsHistoryDocument = gql`
     query RewardsHistory($partyId: ID!, $epochRewardSummariesPagination: Pagination, $partyRewardsPagination: Pagination, $fromEpoch: Int, $toEpoch: Int) {
   epochRewardSummaries(

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

@@ -0,0 +1,347 @@
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { useRewardsHistoryQuery } from './__generated__/Rewards';
+import { useReferralProgram } from '../../client-pages/referrals/hooks/use-referral-program';
+import { useState, useEffect } from 'react';
+import { useT } from '../../lib/use-t';
+import { useRewardsRowData } from './use-reward-row-data';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import classNames from 'classnames';
+import {
+  Icon,
+  type IconName,
+  Intent,
+  Tooltip,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import { IconNames } from '@blueprintjs/icons';
+
+export const ActiveRewards = ({
+  epoch,
+  pubKey,
+  assets,
+}: {
+  pubKey: string | null;
+  epoch: number;
+  assets: Record<string, AssetFieldsFragment>;
+}) => {
+  const [epochVariables] = useState(() => ({
+    from: epoch - 1,
+    to: epoch,
+  }));
+
+  // No need to specify the fromEpoch as it will by default give you the last
+  const { refetch, data } = useRewardsHistoryQuery({
+    variables: {
+      partyId: pubKey || '',
+      fromEpoch: epochVariables.from,
+      toEpoch: epochVariables.to,
+    },
+  });
+
+  useEffect(() => {
+    const interval = setInterval(refetch, 30000);
+    return () => clearInterval(interval);
+  }, [refetch]);
+
+  const rowData = useRewardsRowData({
+    epochRewardSummaries: data?.epochRewardSummaries,
+    partyRewards: data?.party?.rewardsConnection,
+    assets,
+    partyId: pubKey,
+  });
+
+  const t = useT();
+  if (!pubKey) {
+    return (
+      <div className="pt-4">
+        <p className="text-muted text-sm">{t('Not connected')}</p>
+      </div>
+    );
+  }
+
+  // TODO: extract card component - call it reward tiles
+  return (
+    <div className="grid gap-x-8 gap-y-10 h-fit grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] md:grid-cols-[repeat(auto-fill,_minmax(230px,_1fr))] lg:grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] xl:grid-cols-[repeat(auto-fill,_minmax(343px,_1fr))]">
+      {rowData.map((row, i) => {
+        // TODO: filter out 0 values
+        // const entries = Object.entries(row).filter(([key, value]) => {
+        //   value !== 0;
+        // });
+        return (
+          <div key={i}>
+            <div
+              className={classNames(
+                'bg-gradient-to-r col-span-full p-0.5 lg:col-auto h-full',
+                'rounded-lg',
+                'from-vega-blue-500 to-vega-green-400'
+              )}
+            >
+              <div className="bg-gradient-to-b from-vega-blue-400 dark:from-vega-blue-600 to-20% bg-vega-clight-800 dark:bg-vega-cdark-800 h-full w-full rounded p-4 flex flex-col gap-4">
+                <div className="flex justify-between gap-4">
+                  <div className="flex flex-col gap-2 items-center text-center">
+                    <span className="flex items-center p-2 rounded-full border border-gray-600">
+                      <VegaIcon name={VegaIconNames.MAN} size={18} />
+                    </span>
+                    <span className="text-muted text-xs">
+                      {t('Individual')}
+                    </span>
+                  </div>
+
+                  <div className="flex flex-col gap-2 items-center text-center">
+                    <span className="flex flex-col gap-1 font-alpha calt text-2xl shrink-1 text-center">
+                      <span>
+                        {`${addDecimalsFormatNumber(
+                          row.total,
+                          row.asset?.decimals || 0
+                        )}`}
+                      </span>
+
+                      <span>{`${row.asset?.symbol}`}</span>
+                    </span>
+
+                    <Tooltip description={'pro rata'} underline={true}>
+                      <span className="text-xs">{t('Pro rata')}</span>
+                    </Tooltip>
+                  </div>
+
+                  <div className="flex flex-col gap-2 items-center text-center">
+                    <span className="flex items-center p-2 rounded-full border border-gray-600">
+                      <VegaIcon name={VegaIconNames.LOCK} size={18} />
+                    </span>
+                    <span className="text-muted text-xs whitespace-nowrap">
+                      {t('11 epochs')}
+                    </span>
+                  </div>
+                </div>
+
+                <span className="border-[0.5px] border-gray-700" />
+
+                <span>
+                  {t('Price taking')} • {row.asset?.symbol} • {row.asset?.name}
+                </span>
+
+                <div className="flex items-center gap-8 flex-wrap">
+                  <span className="flex flex-col">
+                    <span className="text-muted text-xs">{t('Ends in')}</span>
+                    <span>{t('5 epochs')}</span>
+                  </span>
+
+                  <span className="flex flex-col">
+                    <span className="text-muted text-xs">
+                      {t('Assessed over')}
+                    </span>
+                    <span>{t('5 epochs')}</span>
+                  </span>
+                </div>
+
+                <span className="text-muted text-sm">
+                  {t(
+                    'Get rewards for taking prices on the order book and paying fees.'
+                  )}
+                </span>
+
+                <span className="border-[0.5px] border-gray-700" />
+
+                {/* <div className="grid grid-cols-3 items-center gap-3"> */}
+                <div className="flex justify-between flex-wrap items-center gap-3">
+                  <span className="flex flex-col gap-1">
+                    <span className="flex items-center gap-1 text-muted text-xs">
+                      {t('Entity scope')}{' '}
+                    </span>
+
+                    <span className="flex items-center gap-1">
+                      <span className="flex items-center p-1 rounded-full border border-gray-600">
+                        <VegaIcon name={VegaIconNames.MAN} size={16} />
+                      </span>
+                      <StatusIndicator
+                        intent={Intent.Success}
+                        icon={IconNames.TICK_CIRCLE}
+                      />
+                    </span>
+                  </span>
+
+                  <span className="flex flex-col gap-1">
+                    <span className="flex items-center gap-1 text-muted text-xs">
+                      {t('Amount staked')}{' '}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      {t('200 VEGA')}
+                      <StatusIndicator
+                        intent={Intent.Success}
+                        icon={IconNames.TICK_CIRCLE}
+                      />
+                    </span>
+                  </span>
+
+                  <span className="flex flex-col gap-1">
+                    <span className="flex items-center gap-1 text-muted text-xs">
+                      {t('Average position')}{' '}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      {t('100 USDT')}
+                      <StatusIndicator
+                        intent={Intent.Success}
+                        icon={IconNames.TICK_CIRCLE}
+                      />
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+// const getIconIntent = (status: string) => {
+//   switch (status) {
+//     case 'GOOD':
+//       return { icon: IconNames.TICK_CIRCLE, intent: Intent.Success };
+//     case 'RETIRED':
+//       return { icon: IconNames.MOON, intent: Intent.None };
+//     case 'UNKNOWN':
+//       return { icon: IconNames.HELP, intent: Intent.Primary };
+//     case 'MALICIOUS':
+//       return { icon: IconNames.ERROR, intent: Intent.Danger };
+//     case 'SUSPICIOUS':
+//       return { icon: IconNames.ERROR, intent: Intent.Danger };
+//     case 'COMPROMISED':
+//       return { icon: IconNames.ERROR, intent: Intent.Danger };
+//     default:
+//       return { icon: IconNames.HELP, intent: Intent.Primary };
+//   }
+// };
+
+const StatusIndicator = ({
+  intent,
+  icon,
+}: {
+  intent: Intent;
+  icon: string;
+}) => {
+  return (
+    <span
+      className={classNames(
+        {
+          'text-gray-700 dark:text-gray-300': intent === Intent.None,
+          'text-vega-blue': intent === Intent.Primary,
+          'text-vega-green dark:text-vega-green': intent === Intent.Success,
+          'dark:text-yellow text-yellow-600': intent === Intent.Warning,
+          'text-vega-red': intent === Intent.Danger,
+        },
+        'flex items-start p-1 align-text-bottom'
+      )}
+    >
+      <Icon size={3} name={icon as IconName} />
+    </span>
+  );
+};
+
+export const ActivityStreak = ({
+  epoch,
+  pubKey,
+  assets,
+}: {
+  pubKey: string | null;
+  epoch: number;
+  assets: Record<string, AssetFieldsFragment>;
+}) => {
+  // const { data } = useActivityStreakQuery({
+  //   variables: {
+  //     partyId: pubKey || '',
+  //   },
+  // });
+
+  const { benefitTiers } = useReferralProgram();
+
+  // const streaks = data?.partiesConnection?.edges?.map(
+  //   (edge) => edge?.node?.activityStreak
+  // );
+
+  // @Input()
+  const progress = 30;
+  const total = 100;
+
+  const safeProgress = () => {
+    return (progress / total) * 100;
+  };
+
+  const progressBarHeight = 'h-6';
+
+  return (
+    <>
+      <div className="flex flex-col gap-1 w-full">
+        <div className="flex flex-col gap-1">
+          <div
+            className="grid"
+            style={{
+              gridTemplateColumns:
+                'repeat(' + benefitTiers.length + ', minmax(0, 1fr))',
+            }}
+          >
+            {benefitTiers.map((tier, index) => {
+              return (
+                <div key={index} className="flex justify-end -mr-10">
+                  <span className="flex flex-col items-center gap-1">
+                    <span className="flex flex-col items-center font-medium">
+                      <span className="text-sm">Tier {tier.tier}</span>
+                      <span className="text-muted text-xs">7 days</span>
+                    </span>
+
+                    <span className="text-xs flex flex-col items-center justify-center px-2 py-1 rounded-lg text-white border border-pink-600 bg-pink-900">
+                      <span>Reward 1x</span>
+                      <span>Vesting 1.5x</span>
+                    </span>
+
+                    <span className="text-pink-500 text-xl">•</span>
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {benefitTiers.map((tier, index) => {
+            return (
+              <div
+                key={index}
+                className="bg-white dark:bg-gray-800 shadow-card rounded-[100px] grow"
+              >
+                <div
+                  className={classNames(
+                    'relative w-full rounded-[100px] bg-gray-200 dark:bg-gray-800',
+                    progressBarHeight
+                  )}
+                >
+                  <div
+                    className="absolute left-0 top-0 h-full rounded-[100px] bg-gradient-to-r from-vega-pink-600 to-vega-pink-500"
+                    style={{ width: safeProgress() + '%' }}
+                  ></div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="flex items-center gap-1">
+          <VegaIcon name={VegaIconNames.STREAK} />
+
+          <span className="flex flex-col text-xs">
+            <span>4 days streak</span>
+            <span>
+              <span className="text-vega-pink-500">3 days</span> &nbsp;to Tier 1
+            </span>
+          </span>
+        </div>
+      </div>
+      {/* <div>{JSON.stringify(stakingTiers)}</div> */}
+      {/* <div>{JSON.stringify(details)}</div> */}
+      {/* <div>{JSON.stringify(benefitTiers)}</div> */}
+      {/* <div>{JSON.stringify(streaks)}</div> */}
+    </>
+  );
+};

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

@@ -33,6 +33,7 @@ import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { RewardsHistoryContainer } from './rewards-history';
 import { useT } from '../../lib/use-t';
 import { useAssetsMapProvider } from '@vegaprotocol/assets';
+import { ActiveRewards, ActivityStreak } from './activity-rewards';
 
 const ASSETS_WITH_INCORRECT_VESTING_REWARD_DATA = [
   'bf1e88d19db4b3ca0d1d5bdb73718a01686b18cf731ca26adedf3c8b83802bba', // USDT mainnet
@@ -56,6 +57,7 @@ export const RewardsContainer = () => {
 
   // No need to specify the fromEpoch as it will by default give you the last
   // Note activityStreak in query will fail
+
   const { data: rewardsData, loading: rewardsLoading } = useRewardsPageQuery({
     variables: {
       partyId: pubKey || '',
@@ -223,6 +225,30 @@ export const RewardsContainer = () => {
             </Card>
           );
         })}
+      <Card
+        title={t('Activity streak')}
+        className="lg:col-span-full"
+        loading={rewardsLoading}
+      >
+        <span className="flex flex-col mx-8">
+          <ActivityStreak
+            epoch={Number(epochData?.epoch.id)}
+            pubKey={pubKey}
+            assets={assetMap}
+          />
+        </span>
+      </Card>
+      <Card
+        title={t('Active rewards')}
+        className="lg:col-span-full"
+        loading={rewardsLoading}
+      >
+        <ActiveRewards
+          epoch={Number(epochData?.epoch.id)}
+          pubKey={pubKey}
+          assets={assetMap}
+        />
+      </Card>
       <Card
         title={t('Rewards history')}
         className="lg:col-span-full"

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

@@ -255,6 +255,14 @@ export const RewardHistoryTable = ({
     return colDefs;
   }, []);
 
+  if (!pubKey) {
+    return (
+      <div className="pt-4">
+        <p className="text-muted text-sm">{t('Not connected')}</p>
+      </div>
+    );
+  }
+
   return (
     <div>
       <div className="mb-2 flex items-center justify-between gap-2">
@@ -342,7 +350,7 @@ export const RewardHistoryTable = ({
   );
 };
 
-const EpochInput = ({
+export const EpochInput = ({
   id,
   value,
   max,

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

@@ -563,7 +563,7 @@ const WarningCell = ({
     <div className="flex items-center justify-end">
       {showIcon && (
         <span className="mr-2 text-black dark:text-white">
-          <VegaIcon name={VegaIconNames.EXCLAIMATION_MARK} size={12} />
+          <VegaIcon name={VegaIconNames.EXCLAMATION_MARK} size={12} />
         </span>
       )}
       <span className="overflow-hidden text-ellipsis whitespace-nowrap">

libs/proposals/src/components/protocol-upgrade-countdown.tsx

@@ -94,7 +94,7 @@ export const ProtocolUpgradeCountdown = ({
           }
         )}
       >
-        <VegaIcon name={VegaIconNames.EXCLAIMATION_MARK} size={12} />{' '}
+        <VegaIcon name={VegaIconNames.EXCLAMATION_MARK} size={12} />{' '}
         <span className="flex flex-nowrap gap-1 whitespace-nowrap">
           <span>{t('Network upgrade in {{countdown}}', { countdown })} </span>
         </span>

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

@@ -1,4 +1,4 @@
-export const IconExclaimationMark = ({ size = 16 }: { size: number }) => {
+export const IconExclamationMark = ({ size = 16 }: { size: number }) => {
   return (
     <svg width={size} height={size} viewBox="0 0 16 16">
       <path d="M8 0.879997L7.57 1.63L0.130005 14.5H15.87L8 0.879997ZM8.75 12H7.25V10.5H8.75V12ZM7.25 9.5V6H8.75V9.5H7.25Z" />

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

@@ -0,0 +1,28 @@
+export const IconMan = ({ size = 14 }: { size: number }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      className="stroke-current"
+      fill="none"
+    >
+      <path
+        d="M8.00016 7.99996C9.47292 7.99996 10.6668 6.80605 10.6668 5.33329C10.6668 3.86053 9.47292 2.66663 8.00016 2.66663C6.5274 2.66663 5.3335 3.86053 5.3335 5.33329C5.3335 6.80605 6.5274 7.99996 8.00016 7.99996Z"
+        stroke="#DCDEE3"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className="stroke-current"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.00033 9.33333C5.79119 9.33333 4.00033 11.1242 4.00033 13.3333V13.8667C4.00033 13.9403 3.94063 14 3.86699 14H2.80033C2.72669 14 2.66699 13.9403 2.66699 13.8667V13.3333C2.66699 10.3878 5.05481 8 8.00033 8C10.9458 8 13.3337 10.3878 13.3337 13.3333V13.8667C13.3337 13.9403 13.274 14 13.2003 14H12.1337C12.06 14 12.0003 13.9403 12.0003 13.8667V13.3333C12.0003 11.1242 10.2095 9.33333 8.00033 9.33333Z"
+        fill="#DCDEE3"
+        className="stroke-current"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,32 @@
+export const IconStreak = ({ size = 14 }: { size: number }) => {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="fillCurrent"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M5.999 4H3.99902V5.99997H5.999V4Z" fill="fillCurrent" />
+      <path
+        d="M7.999 2.0001V0.00012207H5.99902V2.0001V4.00007H7.999V2.0001Z"
+        fill="fillCurrent"
+      />
+      <path d="M3.99897 6H-0.000976562V7.99997H3.99897V6Z" fill="fillCurrent" />
+      <path
+        d="M5.999 7.99988H3.99902V9.99985H5.999V7.99988Z"
+        fill="fillCurrent"
+      />
+      <path
+        d="M7.999 9.99994H5.99902V13.9999H7.999V9.99994Z"
+        fill="fillCurrent"
+      />
+      <path
+        d="M9.999 7.99988H7.99902V9.99985H9.999V7.99988Z"
+        fill="fillCurrent"
+      />
+      <path d="M13.999 6H9.99902V7.99997H13.999V6Z" fill="fillCurrent" />
+      <path d="M9.999 4H7.99902V5.99997H9.999V4Z" fill="fillCurrent" />
+    </svg>
+  );
+};

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

@@ -0,0 +1,19 @@
+export const IconTeam = ({ size = 14 }: { size: number }) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="Icon">
+        <path
+          id="Vector"
+          d="M13.1282 11.1863C12.7371 10.7949 12.2801 10.4754 11.7782 10.2426C12.486 9.66912 12.9375 8.79412 12.9375 7.81287C12.9375 6.08162 11.4938 4.6613 9.76254 4.68787C8.05785 4.71443 6.68441 6.10349 6.68441 7.81287C6.68441 8.79412 7.13754 9.66912 7.84379 10.2426C7.34177 10.4753 6.88476 10.7947 6.49379 11.1863C5.64066 12.041 5.15629 13.1691 5.12504 14.3722C5.12462 14.3889 5.12755 14.4055 5.13364 14.421C5.13974 14.4366 5.14888 14.4507 5.16053 14.4627C5.17218 14.4746 5.1861 14.4841 5.20147 14.4906C5.21684 14.497 5.23336 14.5004 5.25004 14.5004H6.12504C6.19223 14.5004 6.24848 14.4472 6.25004 14.3801C6.27973 13.4738 6.64691 12.6254 7.29223 11.9816C7.62245 11.6496 8.01523 11.3865 8.44784 11.2073C8.88045 11.0281 9.3443 10.9366 9.81254 10.9379C10.7641 10.9379 11.6594 11.3082 12.3329 11.9816C12.9766 12.6254 13.3438 13.4738 13.375 14.3801C13.3766 14.4472 13.4329 14.5004 13.5 14.5004H14.375C14.3917 14.5004 14.4082 14.497 14.4236 14.4906C14.439 14.4841 14.4529 14.4746 14.4646 14.4627C14.4762 14.4507 14.4853 14.4366 14.4914 14.421C14.4975 14.4055 14.5005 14.3889 14.5 14.3722C14.4688 13.1691 13.9844 12.041 13.1282 11.1863ZM9.81254 9.81287C9.27816 9.81287 8.77504 9.60505 8.39848 9.22693C8.2095 9.03944 8.06022 8.8158 7.95955 8.56937C7.85888 8.32293 7.80888 8.05874 7.81254 7.79255C7.81723 7.28005 8.02191 6.78474 8.37973 6.41755C8.75473 6.03318 9.25629 5.81912 9.79223 5.81287C10.3219 5.80818 10.836 6.01443 11.2141 6.38474C11.6016 6.76443 11.8141 7.27224 11.8141 7.81287C11.8141 8.34724 11.6063 8.8488 11.2282 9.22693C11.0427 9.41333 10.822 9.56109 10.579 9.66167C10.336 9.76224 10.0755 9.81363 9.81254 9.81287ZM5.89848 8.22537C5.88441 8.08943 5.8766 7.95193 5.8766 7.81287C5.8766 7.56443 5.90004 7.32224 5.94379 7.0863C5.95473 7.03005 5.92504 6.97224 5.87348 6.9488C5.66098 6.85349 5.46566 6.72224 5.29691 6.55662C5.09807 6.36382 4.9416 6.13168 4.83748 5.87503C4.73337 5.61837 4.6839 5.34283 4.69223 5.06599C4.70629 4.56443 4.90785 4.08787 5.25941 3.72849C5.64535 3.33318 6.1641 3.11755 6.71566 3.1238C7.2141 3.12849 7.69535 3.32068 8.05941 3.6613C8.18285 3.77693 8.2891 3.90505 8.37817 4.04255C8.40942 4.09099 8.47035 4.1113 8.52348 4.09255C8.79848 3.99724 9.0891 3.93005 9.38754 3.8988C9.47504 3.88943 9.52504 3.79568 9.48598 3.71755C8.97816 2.71287 7.94066 2.01912 6.74066 2.00037C5.00785 1.9738 3.5641 3.39412 3.5641 5.1238C3.5641 6.10505 4.01566 6.98005 4.72348 7.55349C4.2266 7.78318 3.76879 8.10037 3.37191 8.49724C2.51566 9.35193 2.03129 10.4801 2.00004 11.6847C1.99962 11.7014 2.00255 11.718 2.00864 11.7335C2.01474 11.7491 2.02388 11.7632 2.03553 11.7752C2.04718 11.7871 2.0611 11.7966 2.07647 11.8031C2.09184 11.8095 2.10836 11.8129 2.12504 11.8129H3.0016C3.06879 11.8129 3.12504 11.7597 3.1266 11.6926C3.15629 10.7863 3.52348 9.93787 4.16879 9.29412C4.62816 8.83474 5.19066 8.51599 5.80473 8.3613C5.86566 8.34568 5.90629 8.28787 5.89848 8.22537Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -14,7 +14,7 @@ import { IconCopy } from './svg-icons/icon-copy';
 import { IconCross } from './svg-icons/icon-cross';
 import { IconDeposit } from './svg-icons/icon-deposit';
 import { IconEdit } from './svg-icons/icon-edit';
-import { IconExclaimationMark } from './svg-icons/icon-exclaimation-mark';
+import { IconExclamationMark } from './svg-icons/icon-exclamation-mark';
 import { IconEye } from './svg-icons/icon-eye';
 import { IconEyeOff } from './svg-icons/icon-eye-off';
 import { IconForum } from './svg-icons/icon-forum';
@@ -41,6 +41,9 @@ import { IconTwitter } from './svg-icons/icon-twitter';
 import { IconVote } from './svg-icons/icon-vote';
 import { IconWarning } from './svg-icons/icon-warning';
 import { IconWithdraw } from './svg-icons/icon-withdraw';
+import { IconMan } from './svg-icons/icon-man';
+import { IconTeam } from './svg-icons/icon-team';
+import { IconStreak } from './svg-icons/icon-streak';
 
 export enum VegaIconNames {
   ARROW_DOWN = 'arrow-down',
@@ -59,7 +62,7 @@ export enum VegaIconNames {
   CROSS = 'cross',
   DEPOSIT = 'deposit',
   EDIT = 'edit',
-  EXCLAIMATION_MARK = 'exclaimation-mark',
+  EXCLAMATION_MARK = 'exclamation-mark',
   EYE = 'eye',
   EYE_OFF = 'eye-off',
   FORUM = 'forum',
@@ -76,6 +79,7 @@ export enum VegaIconNames {
   QUESTION_MARK = 'question-mark',
   SEARCH = 'search',
   STAR = 'star',
+  STREAK = 'streak',
   SUN = 'sun',
   TICK = 'tick',
   TICKET = 'ticket',
@@ -86,6 +90,8 @@ export enum VegaIconNames {
   VOTE = 'vote',
   WITHDRAW = 'withdraw',
   WARNING = 'warning',
+  MAN = 'man',
+  TEAM = 'team',
 }
 
 export const VegaIconNameMap: Record<
@@ -102,7 +108,7 @@ export const VegaIconNameMap: Record<
   'chevron-right': IconChevronRight,
   'chevron-up': IconChevronUp,
   'eye-off': IconEyeOff,
-  'exclaimation-mark': IconExclaimationMark,
+  'exclamation-mark': IconExclamationMark,
   'open-external': IconOpenExternal,
   'question-mark': IconQuestionMark,
   'trend-down': IconTrendDown,
@@ -135,4 +141,7 @@ export const VegaIconNameMap: Record<
   vote: IconVote,
   withdraw: IconWithdraw,
   warning: IconWarning,
+  man: IconMan,
+  team: IconTeam,
+  streak: IconStreak,
 };