From f3f5d8dc2fdf0a53aed0a97ebc016c03cdde3857 Mon Sep 17 00:00:00 2001 From: Petar Todorovic Date: Tue, 3 Jun 2025 16:14:45 +0200 Subject: [PATCH] feat: new meta info added --- .changeset/spicy-gifts-strive.md | 5 ++++ packages/widget/package.json | 2 +- ...d-meta-info.ts => use-yield-meta-info.tsx} | 25 +++++++++++++++++-- .../src/pages/components/meta-info/index.tsx | 17 ++++++++++--- .../src/translation/English/translations.json | 5 +++- pnpm-lock.yaml | 10 ++++---- 6 files changed, 51 insertions(+), 13 deletions(-) create mode 100644 .changeset/spicy-gifts-strive.md rename packages/widget/src/hooks/{use-yield-meta-info.ts => use-yield-meta-info.tsx} (90%) diff --git a/.changeset/spicy-gifts-strive.md b/.changeset/spicy-gifts-strive.md new file mode 100644 index 00000000..2cc1dc52 --- /dev/null +++ b/.changeset/spicy-gifts-strive.md @@ -0,0 +1,5 @@ +--- +"@stakekit/widget": patch +--- + +feat: new meta info added diff --git a/packages/widget/package.json b/packages/widget/package.json index f3efab1a..013b7470 100644 --- a/packages/widget/package.json +++ b/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", diff --git a/packages/widget/src/hooks/use-yield-meta-info.ts b/packages/widget/src/hooks/use-yield-meta-info.tsx similarity index 90% rename from packages/widget/src/hooks/use-yield-meta-info.ts rename to packages/widget/src/hooks/use-yield-meta-info.tsx index 5076e0c1..8ed8a4bf 100644 --- a/packages/widget/src/hooks/use-yield-meta-info.ts +++ b/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" ? ( + + {t("shared.learn_more")} + + ), + }} + /> + ) : 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, }; diff --git a/packages/widget/src/pages/components/meta-info/index.tsx b/packages/widget/src/pages/components/meta-info/index.tsx index 0fb2a6c6..64820239 100644 --- a/packages/widget/src/pages/components/meta-info/index.tsx +++ b/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,14 +50,21 @@ export const MetaInfo = ({ { text: withdrawnNotAvailable, icon: }, { text: withdrawnTime, icon: }, { text: extra, icon: }, - ].filter((val): val is { text: string; icon: JSX.Element } => !!val.text), + { text: campaign, icon: }, + { text: lockupPeriod, icon: }, + ].filter( + (val): val is { text: string | ReactNode; icon: JSX.Element } => + !!val.text + ), [ + campaign, description, earnPeriod, earnRewards, withdrawnNotAvailable, withdrawnTime, extra, + lockupPeriod, ] ); @@ -63,8 +72,8 @@ export const MetaInfo = ({ ) : ( - {items.map((item) => ( - + {items.map((item, i) => ( + {item.icon ? ( item.icon diff --git a/packages/widget/src/translation/English/translations.json b/packages/widget/src/translation/English/translations.json index 0a4761eb..2356c9c0 100644 --- a/packages/widget/src/translation/English/translations.json +++ b/packages/widget/src/translation/English/translations.json @@ -20,7 +20,8 @@ "unsupported_network": "Unsupported network", "points": "Points", "continue": "Continue", - "powered_by": "Powered by {{name}}" + "powered_by": "Powered by {{name}}", + "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. Learn more", + "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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3eb0a615..27256c5b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -185,8 +185,8 @@ importers: specifier: ^9.1.0 version: 9.1.0(bufferutil@4.0.9)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.20) '@stakekit/api-hooks': - specifier: 0.0.102 - version: 0.0.102(@faker-js/faker@9.8.0)(@tanstack/react-query@5.76.1(react@19.1.0))(msw@2.8.4(@types/node@22.15.21)(typescript@5.8.3))(react@19.1.0) + specifier: 0.0.103 + version: 0.0.103(@faker-js/faker@9.8.0)(@tanstack/react-query@5.76.1(react@19.1.0))(msw@2.8.4(@types/node@22.15.21)(typescript@5.8.3))(react@19.1.0) '@stakekit/common': specifier: ^0.0.49 version: 0.0.49 @@ -2543,8 +2543,8 @@ packages: '@stacks/transactions@6.17.0': resolution: {integrity: sha512-FUah2BRgV66ApLcEXGNGhwyFTRXqX5Zco3LpiM3essw8PF0NQlHwwdPgtDko5RfrJl3LhGXXe/30nwsfNnB3+g==} - '@stakekit/api-hooks@0.0.102': - resolution: {integrity: sha512-TUtO94bF/0KMMFXC1nC7rAJmUpN8TDBRlRYthX9XeVScVaiE+U+hLIhLtZLbPHixPZwETd2S2B19Y86zzJnrAQ==} + '@stakekit/api-hooks@0.0.103': + resolution: {integrity: sha512-9Ki8Hpr9vARouYOtzm8KRLOdMz4veIvSGU0fmMwMcAxK5Bsd1wavQYuw1v/qc/vjt91f/dcV46uOV+erSM226Q==} peerDependencies: '@faker-js/faker': ^9 '@tanstack/react-query': '>=5' @@ -9554,7 +9554,7 @@ snapshots: transitivePeerDependencies: - encoding - '@stakekit/api-hooks@0.0.102(@faker-js/faker@9.8.0)(@tanstack/react-query@5.76.1(react@19.1.0))(msw@2.8.4(@types/node@22.15.21)(typescript@5.8.3))(react@19.1.0)': + '@stakekit/api-hooks@0.0.103(@faker-js/faker@9.8.0)(@tanstack/react-query@5.76.1(react@19.1.0))(msw@2.8.4(@types/node@22.15.21)(typescript@5.8.3))(react@19.1.0)': dependencies: react: 19.1.0 optionalDependencies: