fix(mobile): readable speed units + a real upgrade page

- formatBytes rounded the sub-1KB case, so fractional bytes/sec speeds printed a
  long decimal tail (e.g. "523.7481 B/s"); round to whole bytes.
- UpgradeScreen was a one-line dead end. Rebuild it into a clear how-to: value +
  price (X FLUX / 30 days), numbered steps pointing to the web pay flow, and this
  device's prefilled, copyable reference to match the payment on the site. Still
  store-compliant (no pay-to-address/QR/Buy button in the app build).
- The free-tier line now reads "Go Premium for full speed ›" (it opens the
  in-app upgrade page, not an external site).

Author: TheTrunk

clients/mobile/src/screens/ConnectScreen.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react-native';
 import type { RouteStyle } from '@cumulusvpn/core';
 import type { Country } from '../lib/gateways';
-import type { PaymentIdentity, VpnActions, VpnModel } from '../state/useVpn';
+import type { VpnActions, VpnModel } from '../state/useVpn';
 import { Orb } from '../components/Orb';
 import { TierPill } from '../components/TierPill';
 import { Toggle } from '../components/Toggle';
@@ -216,7 +216,7 @@ export function ConnectScreen({
       />
 
       {/* Free-tier upsell line — store-compliant, no purchase UI (docs/05). */}
-      {vpn.tier === 'free' ? <UpgradeLine payment={vpn.payment} onPress={onOpenUpgrade} /> : null}
+      {vpn.tier === 'free' ? <UpgradeLine onPress={onOpenUpgrade} /> : null}
 
       <Pressable
         style={[
@@ -420,19 +420,12 @@ function KillSwitchRow({
   );
 }
 
-function UpgradeLine({
-  payment,
-  onPress,
-}: {
-  readonly payment: PaymentIdentity | null;
-  readonly onPress: () => void;
-}): React.JSX.Element {
+function UpgradeLine({ onPress }: { readonly onPress: () => void }): React.JSX.Element {
   return (
     <Pressable onPress={onPress} accessibilityRole="button" style={styles.upsell}>
       <Text style={styles.upsellText}>
-        Free · 100 KB/s — <Text style={styles.upsellAccent}>Upgrade at cumulusvpn.com</Text>
+        Free · 100 KB/s — <Text style={styles.upsellAccent}>Go Premium for full speed ›</Text>
       </Text>
-      {payment ? <Text style={styles.upsellMemo}>{payment.memo}</Text> : null}
     </Pressable>
   );
 }
@@ -448,7 +441,9 @@ function Stat({ k, v }: { readonly k: string; readonly v: string }): React.JSX.E
 
 function formatBytes(n: number): string {
   if (n < 1024) {
-    return `${n} B`;
+    // Round: speeds are fractional bytes/sec, so `${n}` would print a long tail
+    // of decimals (e.g. "523.7481 B/s").
+    return `${Math.round(n)} B`;
   }
   const units = ['KB', 'MB', 'GB', 'TB'];
   let v = n / 1024;
@@ -650,7 +645,6 @@ const styles = StyleSheet.create({
   upsell: { alignItems: 'center', marginBottom: space.md },
   upsellText: { color: color.inkMuted, fontSize: 13 },
   upsellAccent: { color: color.amber, fontWeight: '600' },
-  upsellMemo: { fontFamily: font.mono, fontSize: 10.5, color: color.inkFaint, marginTop: 2 },
   bigBtn: { borderRadius: radius.md, paddingVertical: 16, alignItems: 'center' },
   // Clearly-disabled look while connecting/disconnecting (was too subtle before).
   bigBtnBusy: { opacity: 0.45 },

clients/mobile/src/screens/UpgradeScreen.tsx

@@ -5,19 +5,15 @@
  *  - The FLUX payment unlocks *app functionality* (premium speed), so it falls
  *    under Apple 3.1.1(a) / Google Play Payments. A live "send FLUX to unlock"
  *    screen inside the store build would be rejected.
- *  - Therefore this screen is CONNECT-ONLY informational: it shows the current
- *    tier (a neutral fact from `/v1/status`) and, when free, a single plain
- *    line — "Upgrade at cumulusvpn.com".
- *  - On iOS there is NO tappable external link and NO purchase/"Buy" UI. The
- *    URL is shown as inert, selectable text. The user pays on the web/desktop;
- *    because entitlement is chain-based and keyed to the WG pubkey, the phone
- *    unlocks automatically within ~1 minute.
- *  - The payment CODE/MEMO is shown as a neutral reference so the user can find
- *    their key on the website. It is NOT a call to action here.
- *  - Never render this as a payment form in an iOS/Android store build. The
- *    beautiful pay-to-address screen lives on web + desktop only.
+ *  - So this screen is INFORMATIONAL: it explains exactly how to upgrade and
+ *    shows this device's reference so the user can match it on the web, but it
+ *    renders NO pay-to-address, NO QR, NO "Buy" button, and does NOT open an
+ *    external purchase link (the URL is inert, selectable text). The actual
+ *    prefilled pay-to-address flow lives on the web app (vpn.cumulusvpn.com).
+ *  - Entitlement is chain-based and keyed to the WG pubkey, so once paid on the
+ *    web the phone unlocks automatically within ~1 minute — nothing to enter.
  */
-import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 import type { Tier } from '@cumulusvpn/core';
 import type { PaymentIdentity } from '../state/useVpn';
 import { TierPill } from '../components/TierPill';
@@ -29,14 +25,15 @@ interface Props {
   readonly onClose: () => void;
 }
 
-const MANAGE_URL = 'cumulusvpn.com';
+/** Where the prefilled pay-to-address upgrade flow lives (the web app). */
+const UPGRADE_URL = 'vpn.cumulusvpn.com';
 
 export function UpgradeScreen({ tier, payment, onClose }: Props): React.JSX.Element {
   const premium = tier === 'premium';
   return (
     <View style={styles.root}>
       <View style={styles.header}>
-        <Text style={styles.title}>Your plan</Text>
+        <Text style={styles.title}>{premium ? 'Your plan' : 'Upgrade to Premium'}</Text>
         <Pressable onPress={onClose} accessibilityRole="button" hitSlop={12}>
           <Text style={styles.done}>Done</Text>
         </Pressable>
@@ -55,54 +52,77 @@ export function UpgradeScreen({ tier, payment, onClose }: Props): React.JSX.Elem
         ) : (
           <>
             <Text style={styles.body}>
-              You’re on the free tier (100 KB/s). To unlock full speed, upgrade on the web with FLUX
-              — no account needed. Your device unlocks automatically within about a minute.
+              Free is capped at 100 KB/s. Premium unlocks full speed on every gateway — no account,
+              paid once with FLUX for 30 days.
             </Text>
 
-            {/*
-              Inert, selectable URL — NOT a tappable link (iOS store compliance).
-              The user types it into a browser; we never call Linking.openURL on
-              iOS for a purchase destination.
-            */}
-            <View style={styles.field}>
-              <Text style={styles.fieldLabel}>Upgrade at</Text>
-              <Text style={styles.fieldValue} selectable>
-                {MANAGE_URL}
-              </Text>
-            </View>
-
             {payment ? (
-              <View style={styles.field}>
-                <Text style={styles.fieldLabel}>Your key reference (find it on the site)</Text>
-                <Text style={[styles.fieldValue, styles.mono]} selectable>
-                  {payment.memo}
+              <View style={styles.priceRow}>
+                <Text style={styles.priceLabel}>Premium</Text>
+                <Text style={styles.price}>
+                  {payment.priceFlux} FLUX <Text style={styles.priceUnit}>/ 30 days</Text>
                 </Text>
               </View>
             ) : null}
-
-            <Text style={styles.note}>
-              Payment is verified on the Flux blockchain and tied to your device key — we never see
-              who you are.
-            </Text>
           </>
         )}
       </View>
 
-      {/*
-        POC / fast-follow: Apple IAP + Google Play Billing (docs/05 option 2) as
-        an in-app fiat rail. Would gate behind Platform checks and StoreKit /
-        BillingClient bridges — deliberately absent at launch.
-      */}
-      {Platform.OS === 'android' ? (
-        <Text style={styles.androidHint}>
-          {/* Android allows an external-offer link under the External Offers
-              program, but commission still applies — kept inert for launch. */}
-        </Text>
+      {!premium ? (
+        <>
+          <Text style={styles.section}>How to upgrade</Text>
+          <View style={styles.steps}>
+            <Step
+              n={1}
+              text={`Open ${UPGRADE_URL} in any browser — on this phone or a computer.`}
+            />
+            <Step
+              n={2}
+              text="Open Upgrade. The gateway, exact FLUX amount and pay-to address are prefilled there (with a QR)."
+            />
+            <Step n={3} text="Pay with FLUX from any wallet — scan the QR or copy the address." />
+            <Step
+              n={4}
+              text="This device unlocks automatically within ~1 minute. Nothing to enter here."
+            />
+          </View>
+
+          {payment ? (
+            <View style={styles.field}>
+              <Text style={styles.fieldLabel}>
+                This device’s reference · press &amp; hold to copy
+              </Text>
+              <Text style={[styles.fieldValue, styles.mono]} selectable>
+                {payment.memo}
+              </Text>
+              <Text style={styles.fieldHint}>
+                Matches this phone to your payment on the site — no personal info.
+              </Text>
+            </View>
+          ) : null}
+
+          <Text style={styles.note}>
+            Payment is verified on the Flux blockchain and tied to this device’s key — we never see
+            who you are, and there’s no account to create.
+          </Text>
+        </>
       ) : null}
     </View>
   );
 }
 
+/** One numbered step in the how-to list. */
+function Step({ n, text }: { readonly n: number; readonly text: string }): React.JSX.Element {
+  return (
+    <View style={styles.step}>
+      <View style={styles.stepNum}>
+        <Text style={styles.stepNumText}>{n}</Text>
+      </View>
+      <Text style={styles.stepText}>{text}</Text>
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   root: { flex: 1, paddingHorizontal: space.xl, paddingTop: space.sm },
   header: {
@@ -125,11 +145,44 @@ const styles = StyleSheet.create({
   tierRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
   tierLabel: { color: color.inkDim, fontSize: 13 },
   body: { color: color.inkMuted, fontSize: 14, lineHeight: 20 },
+  priceRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderTopColor: color.hairline,
+    borderTopWidth: 1,
+    paddingTop: space.md,
+  },
+  priceLabel: { color: color.inkDim, fontSize: 13 },
+  price: { color: color.amber, fontSize: 18, fontWeight: '700' },
+  priceUnit: { color: color.inkFaint, fontSize: 12, fontWeight: '500' },
+  section: {
+    color: color.inkFaint,
+    fontSize: 11,
+    textTransform: 'uppercase',
+    letterSpacing: 0.7,
+    marginTop: space.xl,
+    marginBottom: space.sm,
+  },
+  steps: { gap: space.md },
+  step: { flexDirection: 'row', alignItems: 'flex-start', gap: space.md },
+  stepNum: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: color.glassStrong,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 1,
+  },
+  stepNumText: { color: color.cyan, fontSize: 12, fontWeight: '700' },
+  stepText: { flex: 1, color: color.inkMuted, fontSize: 14, lineHeight: 20 },
   field: {
     backgroundColor: color.orbCoreOn,
     borderRadius: radius.sm,
     padding: space.md,
     gap: 4,
+    marginTop: space.lg,
   },
   fieldLabel: {
     fontSize: 10.5,
@@ -138,7 +191,7 @@ const styles = StyleSheet.create({
     letterSpacing: 0.5,
   },
   fieldValue: { color: color.amber, fontSize: 15, fontWeight: '600' },
+  fieldHint: { color: color.inkFaint, fontSize: 11.5, lineHeight: 16 },
   mono: { fontFamily: font.mono, fontSize: 13 },
-  note: { color: color.inkFaint, fontSize: 12, lineHeight: 17 },
-  androidHint: { height: 0 },
+  note: { color: color.inkFaint, fontSize: 12, lineHeight: 17, marginTop: space.lg },
 });