feat: new meta info added

.changeset/spicy-gifts-strive.md

@@ -0,0 +1,5 @@
+---
+"@stakekit/widget": patch
+---
+
+feat: new meta info added

packages/widget/package.json

@@ -71,7 +71,7 @@
     "@radix-ui/react-visually-hidden": "^1.2.3",
     "@safe-global/safe-apps-provider": "^0.18.6",
     "@safe-global/safe-apps-sdk": "^9.1.0",
-    "@stakekit/api-hooks": "0.0.102",
+    "@stakekit/api-hooks": "0.0.103",
     "@stakekit/common": "^0.0.49",
     "@stakekit/rainbowkit": "^2.2.5",
     "@tanstack/react-query": "^5.76.1",

packages/widget/src/hooks/use-yield-meta-info.ts → packages/widget/src/hooks/use-yield-meta-info.tsx

@@ -1,9 +1,10 @@
+import { SKAnchor } from "@sk-widget/components/atoms/anchor";
 import type { TokenDto, ValidatorDto, YieldDto } from "@stakekit/api-hooks";
 import { MiscNetworks } from "@stakekit/common";
 import { Maybe } from "purify-ts";
 import { List } from "purify-ts";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { type ReactNode, useMemo } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import { capitalizeFirstLowerRest } from "../utils/text";
 
 export const useYieldMetaInfo = ({
@@ -55,6 +56,22 @@ export const useYieldMetaInfo = ({
       const isCompound = providerName.includes("Compound");
 
       const def = {
+        campaign:
+          y.metadata.rewardSchedule === "campaign" ? (
+            <Trans
+              i18nKey="details.campaign"
+              components={{
+                link0: (
+                  <SKAnchor href="https://420.synthetix.io/?collateral=SNX">
+                    {t("shared.learn_more")}
+                  </SKAnchor>
+                ),
+              }}
+            />
+          ) : null,
+        lockupPeriod: y.metadata.lockupPeriod?.days
+          ? t("details.lockup_period", { days: y.metadata.lockupPeriod?.days })
+          : null,
         extra:
           y.rewardType === "variable"
             ? t("details.reward_type_varialbe", {
@@ -233,16 +250,20 @@ export const useYieldMetaInfo = ({
 };
 
 const ifNotFound: {
+  campaign: ReactNode | null;
   description: string | null;
   earnPeriod: string | null;
   earnRewards: string | null;
   withdrawnTime: string | null;
   withdrawnNotAvailable: string | null;
   extra?: string;
+  lockupPeriod: string | null;
 } = {
+  campaign: null,
   description: null,
   earnPeriod: null,
   earnRewards: null,
   withdrawnTime: null,
   withdrawnNotAvailable: null,
+  lockupPeriod: null,
 };

packages/widget/src/pages/components/meta-info/index.tsx

@@ -1,6 +1,6 @@
 import type { TokenDto, ValidatorDto, YieldDto } from "@stakekit/api-hooks";
 import type { Maybe } from "purify-ts";
-import { type JSX, useMemo } from "react";
+import { type JSX, type ReactNode, useMemo } from "react";
 import {
   ArrowsLeftRightIcon,
   Box,
@@ -33,6 +33,8 @@ export const MetaInfo = ({
     withdrawnNotAvailable,
     withdrawnTime,
     extra,
+    campaign,
+    lockupPeriod,
   } = useYieldMetaInfo({
     selectedStake,
     validators: [...selectedValidators.values()],
@@ -48,23 +50,30 @@ export const MetaInfo = ({
         { text: withdrawnNotAvailable, icon: <InfoIcon /> },
         { text: withdrawnTime, icon: <InfoIcon /> },
         { text: extra, icon: <InfoIcon /> },
-      ].filter((val): val is { text: string; icon: JSX.Element } => !!val.text),
+        { text: campaign, icon: <InfoIcon /> },
+        { text: lockupPeriod, icon: <InfoIcon /> },
+      ].filter(
+        (val): val is { text: string | ReactNode; icon: JSX.Element } =>
+          !!val.text
+      ),
     [
+      campaign,
       description,
       earnPeriod,
       earnRewards,
       withdrawnNotAvailable,
       withdrawnTime,
       extra,
+      lockupPeriod,
     ]
   );
 
   return isLoading ? (
     <ContentLoaderSquare heightPx={150} />
   ) : (
     <Box as="footer" gap="3" display="flex" flexDirection="column">
-      {items.map((item) => (
-        <Box key={item.text} display="flex" alignItems="center" gap="4">
+      {items.map((item, i) => (
+        <Box key={i} display="flex" alignItems="center" gap="4">
           <Box alignItems="center" justifyContent="center" display="flex">
             {item.icon ? (
               item.icon

packages/widget/src/translation/English/translations.json

@@ -20,7 +20,8 @@
     "unsupported_network": "Unsupported network",
     "points": "Points",
     "continue": "Continue",
-    "powered_by": "Powered by <span0>{{name}}</span0>"
+    "powered_by": "Powered by <span0>{{name}}</span0>",
+    "learn_more": "Learn more"
   },
   "chain_modal": {
     "disabled_chain_info": "Add account"
@@ -67,6 +68,8 @@
     "no_opportunities": "No yield opportunities for this token",
     "selected_validators_one": "{{providerName}}",
     "selected_validators_other": "{{providerName}} + {{count}} more",
+    "campaign": "Rewards are locked until 28 May 2026. Early withdrawals may incur penalties. <link0>Learn more</link0>",
+    "lockup_period": "Minimum lock up time is {{days}} days",
     "native_staking": {
       "earn_after_warmup_one": "You’ll start earning {{count}} day after you supply your assets",
       "earn_after_warmup_other": "You’ll start earning {{count}} days after you supply your assets",