diff --git a/app/components/UI/Rewards/Views/BenefitFullView.test.tsx b/app/components/UI/Rewards/Views/BenefitFullView.test.tsx
index 0e05ab67fe21..21c88e6ae9f2 100644
--- a/app/components/UI/Rewards/Views/BenefitFullView.test.tsx
+++ b/app/components/UI/Rewards/Views/BenefitFullView.test.tsx
@@ -30,6 +30,7 @@ const mockBenefit = {
validTo: '2026-12-31T23:59:59Z',
url: 'https://benefits.example.com/claim',
actionDate: '2026-12-30T00:00:00Z',
+ companyName: 'Pudgy Penguins',
chain: 'ethereum',
type: { id: 7, name: 'Partner' },
};
@@ -119,6 +120,7 @@ describe('BenefitFullView', () => {
expect(getByText('Claim benefit')).toBeOnTheScreen();
expect(getByText('Premium Benefit')).toBeOnTheScreen();
expect(getByText('Long description')).toBeOnTheScreen();
+ expect(getByText('By Pudgy Penguins')).toBeOnTheScreen();
expect(
getByTestId(REWARDS_VIEW_SELECTORS.DETAIL_BENEFIT_ACTION),
).toBeOnTheScreen();
@@ -207,6 +209,17 @@ describe('BenefitFullView', () => {
expect(queryByText('1mo 3d')).toBeNull();
});
+ it('does not render company label when companyName is null', () => {
+ mockRouteBenefit = {
+ ...mockBenefit,
+ companyName: null,
+ };
+
+ const { queryByText } = render();
+
+ expect(queryByText('By Pudgy Penguins')).toBeNull();
+ });
+
it('renders benefit image from thumbnail', () => {
mockRouteBenefit = {
...mockBenefit,
diff --git a/app/components/UI/Rewards/Views/BenefitFullView.tsx b/app/components/UI/Rewards/Views/BenefitFullView.tsx
index 7c753028ed4b..72eddde5be2e 100644
--- a/app/components/UI/Rewards/Views/BenefitFullView.tsx
+++ b/app/components/UI/Rewards/Views/BenefitFullView.tsx
@@ -7,6 +7,7 @@ import {
Box,
BoxAlignItems,
BoxFlexDirection,
+ BoxJustifyContent,
Button,
ButtonSize,
ButtonVariant,
@@ -72,6 +73,7 @@ const BenefitFullView = () => {
: formatDateRemaining(benefit.actionDate, Date.now()),
[benefit.actionDate],
);
+ const companyName = benefit.companyName?.trim();
return (
@@ -107,25 +109,48 @@ const BenefitFullView = () => {
>
{benefit.longTitle}
- {remainingTime != null && (
+ {(remainingTime != null || companyName) && (
-
-
- {remainingTime}
-
+ {remainingTime != null ? (
+
+
+
+ {remainingTime}
+
+
+ ) : (
+
+ )}
+ {companyName ? (
+
+ {`By ${companyName}`}
+
+ ) : null}
)}
{
});
const createBenefit = (
- overrides: Partial = {},
+ overrides: Partial & {
+ companyName?: string | null;
+ } = {},
): SubscriptionBenefitDto => ({
id: 1,
longTitle: strings('rewards.benefits.test_title'),
@@ -81,6 +83,20 @@ describe('BenefitCard', () => {
).toBeOnTheScreen();
});
+ it('renders company name when provided', () => {
+ const benefit = createBenefit({ companyName: 'Pudgy Penguins' });
+ const { getByText } = render();
+
+ expect(getByText('Pudgy Penguins')).toBeOnTheScreen();
+ });
+
+ it('does not render an empty company label when companyName is null', () => {
+ const benefit = createBenefit({ companyName: null });
+ const { queryByText } = render();
+
+ expect(queryByText('Pudgy Penguins')).toBeNull();
+ });
+
it('applies text truncation limits for title and description', () => {
const benefit = createBenefit();
const { getByText } = render();
diff --git a/app/components/UI/Rewards/components/Benefits/BenefitCard.tsx b/app/components/UI/Rewards/components/Benefits/BenefitCard.tsx
index c61936731637..520fba6e44cc 100644
--- a/app/components/UI/Rewards/components/Benefits/BenefitCard.tsx
+++ b/app/components/UI/Rewards/components/Benefits/BenefitCard.tsx
@@ -4,6 +4,7 @@ import {
Box,
BoxAlignItems,
BoxFlexDirection,
+ BoxJustifyContent,
Icon,
IconColor,
IconName,
@@ -31,6 +32,7 @@ const BenefitCard = ({ benefit }: Props) => {
benefit.actionDate == null
? null
: formatDateRemaining(benefit.actionDate, Date.now());
+ const companyName = benefit.companyName?.trim();
return (
{
-
- {benefit.longTitle}
-
+
+ {benefit.longTitle}
+
+ {companyName ? (
+
+ {companyName}
+
+ ) : null}
+