perawallet · fmsouza · Jul 24, 2026 · Jul 24, 2026
@@ -80,6 +80,10 @@ export const PanelButton = (props: PanelButtonProps) => {
                             <PWText
                                 style={themeStyle.textStyle}
                                 variant={titleWeight}
+                                // Keep the title on one line when a badge sits
+                                // beside it — on higher-density devices the
+                                // scaled title + badge would otherwise wrap.
+                                truncate={!!badge}
                                 {...getTestProps(testID, 'text')}
                             >
                                 {title}
@@ -109,7 +113,14 @@ export const PanelButton = (props: PanelButtonProps) => {
                             }}
                             {...getTestProps(testID, 'learn_more')}
                         >
-                            <PWText variant='link'>{learnMore.label}</PWText>
+                            {/*
+                              linkPositive keeps the teal link tone in both
+                              themes (link's dark tone is the brand yellow),
+                              per the Quantum "Learn more" design.
+                            */}
+                            <PWText variant='linkPositive'>
+                                {learnMore.label}
+                            </PWText>
                         </PWTouchableOpacity>
                     )}
                 </PWView>

@@ -14,7 +14,7 @@ import { Badge, type BadgeProps } from '@rneui/themed'
 import { useStyles } from './styles'
 
 export type PWBadgeProps = {
-    variant?: 'primary' | 'testnet' | 'secondary' | 'positive' | 'alert'
+    variant?: 'primary' | 'testnet' | 'secondary' | 'positive' | 'alert' | 'new'
 } & BadgeProps
 
 export const PWBadge = ({

@@ -30,4 +30,14 @@ describe('PWBadge', () => {
         )
         expect(screen.getByText('3')).toBeTruthy()
     })
+
+    it('renders new variant value correctly', () => {
+        render(
+            <PWBadge
+                variant='new'
+                value='NEW'
+            />,
+        )
+        expect(screen.getByText('NEW')).toBeTruthy()
+    })
 })
@@ -26,6 +26,11 @@ export const useStyles = makeStyles((theme, props: PWBadgeProps) => {
     } else if (variant === 'positive') {
         textColor = theme.colors.positive
         backgroundColor = theme.colors.buttonSquareBg
+    } else if (variant === 'new') {
+        // Solid "NEW feature" highlight pill (e.g. Quantum accounts) — mint
+        // fill with dark text, per the Wallet/4 design tokens.
+        textColor = theme.colors.wallet4Icon
+        backgroundColor = theme.colors.wallet4
     } else if (variant === 'alert') {
         textColor = theme.colors.textWhite
         backgroundColor = theme.colors.alertNegative

@@ -237,7 +237,7 @@ export const useAddAccountScreen = () => {
                     badge: {
                         labelKey:
                             'onboarding.add_account.quantum_account_option_badge',
-                        variant: 'positive',
+                        variant: 'new',
                     },
                     learnMore: {
                         labelKey:

@@ -676,6 +676,15 @@ registerPreview({
                         />
                     ),
                 },
+                {
+                    label: 'new',
+                    node: (
+                        <PWBadge
+                            value='NEW'
+                            variant='new'
+                        />
+                    ),
+                },
             ]}
         />
     ),