feat(rewards): display benefit company name

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(<BenefitFullView />);
+
+    expect(queryByText('By Pudgy Penguins')).toBeNull();
+  });
+
   it('renders benefit image from thumbnail', () => {
     mockRouteBenefit = {
       ...mockBenefit,

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 (
     <ErrorBoundary navigation={navigation} view="BenefitFullView">
@@ -107,25 +109,48 @@ const BenefitFullView = () => {
             >
               {benefit.longTitle}
             </Text>
-            {remainingTime != null && (
+            {(remainingTime != null || companyName) && (
               <Box
                 marginTop={1}
                 marginBottom={2}
-                gap={1}
                 flexDirection={BoxFlexDirection.Row}
                 alignItems={BoxAlignItems.Center}
+                justifyContent={BoxJustifyContent.Between}
+                twClassName="gap-2"
               >
-                <Icon
-                  name={IconName.Clock}
-                  size={IconSize.Md}
-                  color={IconColor.IconAlternative}
-                />
-                <Text
-                  variant={TextVariant.BodyMd}
-                  color={TextColor.TextAlternative}
-                >
-                  {remainingTime}
-                </Text>
+                {remainingTime != null ? (
+                  <Box
+                    gap={1}
+                    flexDirection={BoxFlexDirection.Row}
+                    alignItems={BoxAlignItems.Center}
+                    twClassName="flex-1"
+                  >
+                    <Icon
+                      name={IconName.Clock}
+                      size={IconSize.Md}
+                      color={IconColor.IconAlternative}
+                    />
+                    <Text
+                      variant={TextVariant.BodyMd}
+                      color={TextColor.TextAlternative}
+                      numberOfLines={1}
+                    >
+                      {remainingTime}
+                    </Text>
+                  </Box>
+                ) : (
+                  <Box twClassName="flex-1" />
+                )}
+                {companyName ? (
+                  <Text
+                    variant={TextVariant.BodyMd}
+                    color={TextColor.TextAlternative}
+                    twClassName="max-w-[55%]"
+                    numberOfLines={1}
+                  >
+                    {`By ${companyName}`}
+                  </Text>
+                ) : null}
               </Box>
             )}
             <Text

app/components/UI/Rewards/components/Benefits/BenefitCard.test.tsx

@@ -46,7 +46,9 @@ jest.mock('@metamask/design-system-twrnc-preset', () => {
 });
 
 const createBenefit = (
-  overrides: Partial<SubscriptionBenefitDto> = {},
+  overrides: Partial<SubscriptionBenefitDto> & {
+    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(<BenefitCard benefit={benefit} />);
+
+      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(<BenefitCard benefit={benefit} />);
+
+      expect(queryByText('Pudgy Penguins')).toBeNull();
+    });
+
     it('applies text truncation limits for title and description', () => {
       const benefit = createBenefit();
       const { getByText } = render(<BenefitCard benefit={benefit} />);

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 (
     <TouchableOpacity
@@ -53,13 +55,30 @@ const BenefitCard = ({ benefit }: Props) => {
         </Box>
 
         <Box twClassName="flex-1 gap-1">
-          <Text
-            variant={TextVariant.HeadingSm}
-            twClassName="text-default"
-            numberOfLines={1}
+          <Box
+            flexDirection={BoxFlexDirection.Row}
+            alignItems={BoxAlignItems.Center}
+            justifyContent={BoxJustifyContent.Between}
+            twClassName="gap-2"
           >
-            {benefit.longTitle}
-          </Text>
+            <Text
+              variant={TextVariant.HeadingSm}
+              twClassName="text-default flex-1"
+              numberOfLines={1}
+            >
+              {benefit.longTitle}
+            </Text>
+            {companyName ? (
+              <Text
+                variant={TextVariant.BodySm}
+                color={TextColor.TextAlternative}
+                twClassName="max-w-[40%]"
+                numberOfLines={1}
+              >
+                {companyName}
+              </Text>
+            ) : null}
+          </Box>
           <Text
             variant={TextVariant.BodyMd}
             color={TextColor.TextAlternative}

app/core/Engine/controllers/rewards-controller/types.ts

@@ -1484,6 +1484,7 @@ export type SubscriptionBenefitDto = {
   actionDate: string | null;
   chain: string;
   type: { id: number; name: string };
+  companyName?: string | null;
 };
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions