feat(buy-sell): align quote card with the DFX web widget

e2e/visual-coverage.json

@@ -134,14 +134,12 @@
       "reason": "Asset-management screen; needs onboarded state plus the asset-list fixture."
     },
     "(auth)/buy/index.tsx": {
-      "status": "pending",
-      "tracking": "DFXswiss/dfx-wallet#186",
-      "reason": "DFX buy flow; needs onboarded state and a mocked DFX backend response before a deterministic baseline."
+      "status": "baselined",
+      "baselines": ["buy-amount"]
     },
     "(auth)/sell/index.tsx": {
-      "status": "pending",
-      "tracking": "DFXswiss/dfx-wallet#186",
-      "reason": "DFX sell flow; needs onboarded state and a mocked DFX backend response before a deterministic baseline."
+      "status": "baselined",
+      "baselines": ["sell-no-balance"]
     },
     "(auth)/kyc/index.tsx": {
       "status": "pending",

e2e/visual/authenticated.test.ts

@@ -188,5 +188,41 @@ describe('Visual Regression (full variant)', () => {
       await pause();
       await expectScreenToMatchBaseline('hardware-connect');
     });
+
+    // Buy and sell are backend-driven, but their amount entry states are
+    // still deterministic once the route is open. Exercise both routes so a
+    // visual-only refactor cannot land without a real-device smoke test.
+    it('shows the buy amount screen', () =>
+      device
+        .openURL({ url: 'dfxwallet://buy' })
+        .then(() =>
+          waitFor(element(by.id('buy-screen')))
+            .toBeVisible()
+            .withTimeout(60_000),
+        )
+        .then(() => element(by.text('BTC')).tap())
+        .then(() =>
+          waitFor(element(by.id('buy-amount-input')))
+            .toBeVisible()
+            .withTimeout(30_000),
+        )
+        .then(() => pause())
+        .then(() => expectScreenToMatchBaseline('buy-amount')));
+
+    it('shows the sell amount entry state', () =>
+      device
+        .openURL({ url: 'dfxwallet://sell' })
+        .then(() =>
+          waitFor(element(by.id('sell-screen')))
+            .toBeVisible()
+            .withTimeout(60_000),
+        )
+        .then(() =>
+          waitFor(element(by.id('sell-no-balance')))
+            .toBeVisible()
+            .withTimeout(60_000),
+        )
+        .then(() => pause())
+        .then(() => expectScreenToMatchBaseline('sell-no-balance')));
   });
 });

src/components/Icon.tsx

@@ -14,6 +14,7 @@ type IconName =
   | 'close'
   | 'lightning'
   | 'arrow-left'
+  | 'arrow-right'
   | 'user'
   | 'shield'
   | 'globe'
@@ -270,6 +271,18 @@ export function Icon({ name, size = 24, color, strokeWidth = 2 }: Props) {
           />
         </Svg>
       );
+    case 'arrow-right':
+      return (
+        <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+          <Path
+            d="M4 12h15m0 0l-6-6m6 6l-6 6"
+            stroke={stroke}
+            strokeWidth={sw}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </Svg>
+      );
     case 'user':
       return (
         <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">

src/components/PrimaryButton.tsx

@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
-import { ActivityIndicator, Pressable, StyleSheet, Text } from 'react-native';
+import { useMemo, type ReactNode } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
 import { Typography, useColors, type ThemeColors } from '@/theme';
 
 type Props = {
@@ -9,6 +9,7 @@ type Props = {
   loading?: boolean;
   variant?: 'filled' | 'outlined';
   testID?: string;
+  icon?: ReactNode;
 };
 
 export function PrimaryButton({
@@ -18,6 +19,7 @@ export function PrimaryButton({
   loading,
   variant = 'filled',
   testID,
+  icon,
 }: Props) {
   const isFilled = variant === 'filled';
   const colors = useColors();
@@ -39,7 +41,10 @@ export function PrimaryButton({
       {loading ? (
         <ActivityIndicator color={isFilled ? colors.white : colors.primary} />
       ) : (
-        <Text style={[styles.text, !isFilled && styles.outlinedText]}>{title}</Text>
+        <View style={styles.content}>
+          <Text style={[styles.text, !isFilled && styles.outlinedText]}>{title}</Text>
+          {icon}
+        </View>
       )}
     </Pressable>
   );
@@ -54,6 +59,11 @@ const makeStyles = (colors: ThemeColors) =>
       justifyContent: 'center',
       paddingHorizontal: 24,
     },
+    content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
     filled: {
       backgroundColor: colors.primary,
       shadowColor: colors.primaryDark,

src/features/buy-sell/BuyScreenImpl.tsx

@@ -27,6 +27,7 @@ import type { ChainId } from '@/config/chains';
 import {
   formatFiat as fmtFiat,
   formatCryptoAmount as fmtCrypto,
+  SYMBOL_GLYPH,
 } from '@/config/portfolio-presentation';
 import { useLdsWallet } from '@/hooks';
 import { useLinkedWalletReauth } from '@/features/linked-wallets/useLinkedWalletReauth';
@@ -261,6 +262,7 @@ export default function BuyScreen() {
   const [amount, setAmount] = useState('');
   const [selectedCurrency, setSelectedCurrency] = useState<(typeof CURRENCIES)[number]>('CHF');
   const [copiedField, setCopiedField] = useState<string | null>(null);
+  const [collapsed, setCollapsed] = useState(true);
 
   // After the user goes through the DFX login flow we land back on this
   // screen; replay the failed call so they don't have to retap "Continue".
@@ -450,6 +452,21 @@ export default function BuyScreen() {
   const numAmount = parseFloat(amount);
   const belowMin = minVolume != null && numAmount > 0 && numAmount < minVolume;
   const aboveMax = maxVolume != null && numAmount > maxVolume;
+  const quoteHeader = unsupportedChain
+    ? t('buy.chainUnsupported')
+    : quoteError
+      ? t([`buy.quoteError.${quoteError}`, 'buy.quoteError.generic'], { code: quoteError })
+      : needsContinue
+        ? t('buy.continueHint')
+        : isLoading
+          ? t('buy.fetchingQuote')
+          : hasQuote && paymentInfo
+            ? t('buy.rateInclFees', {
+                asset: targetAsset,
+                amount: fmtFiat(paymentInfo.exchangeRate),
+                currency: selectedCurrency,
+              })
+            : t('buy.summary');
 
   const renderAmountStep = () => (
     <View style={styles.stepContent}>
@@ -542,7 +559,22 @@ export default function BuyScreen() {
           ) : null}
 
           <View style={styles.amountCard}>
+            <View style={styles.quickRow}>
+              {['50', '100', '250', '500'].map((val) => (
+                <Pressable
+                  key={val}
+                  testID={`buy-preset-${val}`}
+                  style={styles.quickAmount}
+                  onPress={() => setAmount(val)}
+                >
+                  <Text style={styles.quickAmountText}>
+                    {`${SYMBOL_GLYPH.get(selectedCurrency) ?? selectedCurrency}${val}`}
+                  </Text>
+                </Pressable>
+              ))}
+            </View>
             <TextInput
+              testID="buy-amount-input"
               style={styles.amountInput}
               value={amount}
               onChangeText={setAmount}
@@ -571,24 +603,32 @@ export default function BuyScreen() {
                 </Pressable>
               ))}
             </View>
-            <View style={styles.quickRow}>
-              {['100', '500', '1000', '5000'].map((val) => (
-                <Pressable key={val} style={styles.quickAmount} onPress={() => setAmount(val)}>
-                  <Text style={styles.quickAmountText}>{val}</Text>
-                </Pressable>
-              ))}
-            </View>
           </View>
 
           {showQuoteCard ? (
             <View style={styles.quoteCard}>
-              <View style={styles.quoteHeader}>
-                <Text style={styles.quoteTitle}>{t('buy.summary')}</Text>
+              <Pressable
+                style={({ pressed }) => [styles.quoteToggle, pressed && styles.pressed]}
+                onPress={() => setCollapsed((value) => !value)}
+                accessibilityRole="button"
+              >
+                <Icon name="shield" size={18} color={colors.primary} />
+                <Text style={styles.quoteToggleText} numberOfLines={2}>
+                  {quoteHeader}
+                </Text>
+                {hasQuote && fees ? (
+                  <View style={styles.quoteFeeBadge}>
+                    <Text style={styles.quoteFeeBadgeText}>{fmtFiat(fees.total)}</Text>
+                  </View>
+                ) : null}
                 {isLoading && !unsupportedChain ? (
                   <ActivityIndicator size="small" color={colors.primary} />
                 ) : null}
-              </View>
-              {unsupportedChain ? (
+                <View style={collapsed ? undefined : styles.quoteChevronOpen}>
+                  <Icon name="chevron-right" size={16} color={colors.textTertiary} />
+                </View>
+              </Pressable>
+              {collapsed ? null : unsupportedChain ? (
                 <Text style={styles.quoteError}>{t('buy.chainUnsupported')}</Text>
               ) : hasQuote && fees ? (
                 <>
@@ -613,6 +653,12 @@ export default function BuyScreen() {
                       value={`${fmtFiat(fees.fixed)} ${selectedCurrency}`}
                     />
                   ) : null}
+                  {fees.bank > 0 ? (
+                    <QuoteRow
+                      label={t('buy.feeBank')}
+                      value={`${fmtFiat(fees.bank)} ${selectedCurrency}`}
+                    />
+                  ) : null}
                   <QuoteRow
                     label={t('buy.feeTotal')}
                     value={`${fmtFiat(fees.total)} ${selectedCurrency}`}
@@ -623,6 +669,7 @@ export default function BuyScreen() {
                     label={t('buy.youReceive')}
                     value={`${fmtCrypto(paymentInfo!.estimatedAmount)} ${targetAsset}`}
                     emphasis
+                    accent
                   />
                 </>
               ) : quoteError ? (
@@ -665,10 +712,21 @@ export default function BuyScreen() {
 
           {error ? <Text style={styles.errorText}>{error}</Text> : null}
 
+          <View testID="buy-payment-method-row" style={styles.paymentMethodRow}>
+            <View style={styles.paymentMethodIcon}>
+              <Icon name="wallet" size={18} color={colors.primary} />
+            </View>
+            <View style={styles.paymentMethodBody}>
+              <Text style={styles.paymentMethodTitle}>{t('buy.paymentMethodSepa')}</Text>
+              <Text style={styles.paymentMethodHint}>{t('buy.paymentMethodSepaHint')}</Text>
+            </View>
+          </View>
+
           <View style={styles.spacer} />
 
           <PrimaryButton
-            title={t('common.continue')}
+            title={`${t('buy.title')} ${targetAsset}`}
+            icon={<Icon name="arrow-right" size={18} color={colors.white} />}
             onPress={async () => {
               if (!selectedChainSpec) return;
               if (hasTargetWallet) {
@@ -904,19 +962,29 @@ function QuoteRow({
   value,
   sub,
   emphasis,
+  accent,
 }: {
   label: string;
   value: string;
   sub?: string;
   emphasis?: boolean;
+  accent?: boolean;
 }) {
   const colors = useColors();
   const styles = useMemo(() => makeStyles(colors), [colors]);
   return (
     <View style={styles.quoteRow}>
       <Text style={styles.quoteLabel}>{label}</Text>
       <View style={{ alignItems: 'flex-end' }}>
-        <Text style={[styles.quoteValue, emphasis && styles.quoteValueEmphasis]}>{value}</Text>
+        <Text
+          style={[
+            styles.quoteValue,
+            emphasis && styles.quoteValueEmphasis,
+            accent && styles.quoteValueAccent,
+          ]}
+        >
+          {value}
+        </Text>
         {sub ? <Text style={styles.quoteSub}>{sub}</Text> : null}
       </View>
     </View>
@@ -1151,11 +1219,6 @@ const makeStyles = (colors: ThemeColors) =>
       padding: 18,
       gap: 14,
     },
-    quoteHeader: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
     quoteTitle: {
       ...Typography.bodySmall,
       fontWeight: '600',
@@ -1197,6 +1260,66 @@ const makeStyles = (colors: ThemeColors) =>
     quoteValueEmphasis: {
       fontWeight: '700',
     },
+    quoteValueAccent: {
+      color: colors.primary,
+    },
+    quoteToggle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    quoteToggleText: {
+      ...Typography.bodyMedium,
+      color: colors.text,
+      fontWeight: '500',
+      flex: 1,
+    },
+    quoteFeeBadge: {
+      backgroundColor: colors.primaryLight,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 999,
+    },
+    quoteFeeBadgeText: {
+      ...Typography.bodySmall,
+      color: colors.primary,
+      fontWeight: '600',
+    },
+    quoteChevronOpen: {
+      transform: [{ rotate: '90deg' }],
+    },
+    paymentMethodRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      backgroundColor: colors.cardOverlay,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: colors.border,
+      paddingVertical: 14,
+      paddingHorizontal: 16,
+    },
+    paymentMethodIcon: {
+      width: 34,
+      height: 34,
+      borderRadius: 17,
+      backgroundColor: colors.primaryLight,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    paymentMethodBody: {
+      flex: 1,
+      gap: 2,
+    },
+    paymentMethodTitle: {
+      ...Typography.bodyMedium,
+      fontWeight: '600',
+      color: colors.text,
+    },
+    paymentMethodHint: {
+      ...Typography.bodySmall,
+      color: colors.textSecondary,
+    },
     quoteSub: {
       ...Typography.bodySmall,
       color: colors.textTertiary,