Merge pull request #407 from Chia-Network/testnet_toggle

Add a toggle on WalletConnection screen for testnet or mainnet

Author: bramcohen

CONNECTIVITY.md

@@ -372,12 +372,18 @@ The hub does not create a session. It can only advise and relay:
    it **ignores** the advisory (no `session_reject`).
 4. If the target consents, it marks itself busy, generates a random hex
    `game_session_id`, sends a bencodex `session_proposal` app message (including
-   the `game_session_id`) to the challenger through the addressed relay, starts
+   the `game_session_id` and its selected `network`) to the challenger through
+   the addressed relay, starts
    WASM as initiator, and sends binary handshake frames. Persist of that start
    is async; `session_reject` / local cancel must abort any in-flight start so
    it cannot resurrect an orphan handshake.
 5. The challenger app checks local availability before showing the proposal
-   prompt. While the prompt is open it reserves that peer id so early
+   prompt. The hub is network-blind, so cross-network challenges can reach this
+   point; the challenger rejects a proposal whose `network` is missing,
+   malformed, or not equal to its own network preference with `session_reject`
+   and no consent UI (a mainnet and a testnet client bind different genesis
+   challenges, so a session between them could never verify signatures). While
+   the prompt is open it reserves that peer id so early
    `HandshakeA` bytes can buffer. If unavailable or declined, it sends
    `session_reject` and discards buffered handshake bytes. Receiving
    `session_reject` during pre-active matchmaking cancels the attempt
@@ -428,7 +434,10 @@ The hub does not create a session. It can only advise and relay:
   (`shouldReportHubBusy(phase, false)` forces busy regardless of phase) and
   cancels any pending pre-Active matchmaking attempt; wallet reconnect
   recomputes presence from the session phase and any in-progress non-terminal
-  restore cradle (phase alone is often still `none` mid-resume). (`Shell.tsx`)
+  restore cradle (phase alone is often still `none` mid-resume). The Choose
+  Connection network toggle is locked while a session binds a genesis
+  challenge (`sessionLocksNetwork`) so reconnect cannot pair a different
+  chain id than the existing WASM cradle. (`Shell.tsx`)
 
 - **Session state surfaced to Shell**: `GameSession` reports coarse session
   phase (`off-chain | on-chain | resolved`) and an error flag to Shell via

FRONTEND_ARCHITECTURE.md

@@ -202,17 +202,23 @@ while WASM protocol frames remain raw bytes with the existing reliability tags.
    `session_reject`).
 6. If the accepter consents, that app becomes the channel initiator. It marks
    itself busy, generates a random hex `game_session_id`, sends a bencodex
-   `session_proposal` app message (including the `game_session_id`) to the peer,
+   `session_proposal` app message (including the `game_session_id` and its
+   selected `network`) to the peer,
    starts the WASM session as initiator, and then sends the binary handshake
    frames through the same addressed pipe. Starting persists session state
    asynchronously; a later `session_reject` (or local cancel) must abort that
    in-flight start so it cannot resurrect an orphan handshake.
 7. The peer receives the `session_proposal`, checks local availability and
-   validates amounts/timeouts at the trust boundary, stores the
+   validates amounts/timeouts and `network` at the trust boundary, stores the
    `game_session_id` in its PeerSession, reserves that peer id so early
    handshake bytes can buffer, and shows its own consent prompt. Invalid
-   amounts or out-of-range timeouts are rejected with `session_reject` only —
-   they must not clear a finished freeze or IndexedDB checkpoint. If unavailable
+   amounts, out-of-range timeouts, or a `network` that is missing, malformed, or
+   not equal to the local network preference are rejected with `session_reject`
+   only —
+   they must not clear a finished freeze or IndexedDB checkpoint. The hub is
+   network-blind, so a cross-network match reaches this check and is rejected
+   here before any consent UI (differing genesis challenges would break every
+   signature). If unavailable
    or declined, it sends `session_reject` and discards any buffered handshake
    bytes. Receiving `session_reject` or `delivery_failure` during an Accept
    transition aborts that attempt with the same freeze-safe disposition as

front-end/src/components/AmountInput.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
+import { getCurrencyLabels } from '../constants/currency';
 
 function mojosToXchStr(mojos: bigint): string {
   const s = mojos.toString().padStart(13, '0');
@@ -57,6 +58,7 @@ export function AmountInput({
   exceedsLabel = 'Exceeds available balance.',
   onKeyDown,
 }: AmountInputProps) {
+  const labels = getCurrencyLabels();
   const [unit, setUnit] = useState<AmountUnit>('mojo');
   const [rawInput, setRawInput] = useState(() => valueMojos.toString());
   const lastExternalMojos = useRef(valueMojos);
@@ -119,14 +121,14 @@ export function AmountInput({
             onClick={() => handleUnitChange('mojo')}
             className={`px-2 py-0.5 transition-colors ${unit === 'mojo' ? 'bg-canvas-bg-active font-semibold' : 'hover:bg-canvas-bg-hover'}`}
           >
-            mojo
+            {labels.mojo}
           </button>
           <button
             type="button"
             onClick={() => handleUnitChange('xch')}
             className={`px-2 py-0.5 transition-colors border-l border-canvas-border ${unit === 'xch' ? 'bg-canvas-bg-active font-semibold' : 'hover:bg-canvas-bg-hover'}`}
           >
-            XCH
+            {labels.xch}
           </button>
         </div>
       </div>
@@ -151,7 +153,9 @@ export function AmountInput({
               className="underline font-medium hover:text-alert-text-contrast transition-colors"
             >
               Use max (
-              {unit === 'xch' ? `${mojosToXchStr(maxMojos!)} XCH` : `${maxMojos!.toString()} mojos`}
+              {unit === 'xch'
+                ? `${mojosToXchStr(maxMojos!)} ${labels.xch}`
+                : `${maxMojos!.toString()} ${labels.mojos}`}
               )
             </button>
           )}

front-end/src/components/GameProposalDialogs.tsx

@@ -3,6 +3,7 @@ import { isValidKrunkStake } from '../features/krunk/adapter';
 import { gameDisplayName, REGISTERED_GAMES } from '../lib/gameRegistry';
 import { composeDraftCanSubmit, composeDraftTerms } from '../lib/session/model';
 import { formatMojos } from '../util';
+import { getCurrencyLabels } from '../constants/currency';
 import { AmountInput } from './AmountInput';
 import { Button } from './button';
 
@@ -118,7 +119,9 @@ export function ComposeProposalDialog({
           />
         )}
         {isKrunk && perHandAmount > 0n && !krunkStakeValid && (
-          <p className="text-xs text-alert-text">Krunk stakes must be multiples of 100 mojos.</p>
+          <p className="text-xs text-alert-text">
+            Krunk stakes must be multiples of 100 {getCurrencyLabels().mojos}.
+          </p>
         )}
         <div className="flex w-full flex-col items-center gap-1">
           <label className="text-xs font-medium text-canvas-text">Timeout (blocks)</label>

front-end/src/components/Shell.tsx

@@ -62,6 +62,8 @@ import {
   setDefaultFee as saveDefaultFee,
   getFeeUnit,
   setFeeUnit as saveFeeUnit,
+  getNetwork,
+  setNetwork as saveNetwork,
   getActiveTab as getSavedTab,
   setActiveTab as saveActiveTab,
   getUnreadGame as getSavedUnreadGame,
@@ -79,6 +81,8 @@ import {
   peekAlias,
   setAlias,
 } from '../hooks/save';
+import type { ChiaNetwork } from '../lib/session/saveEnvelope';
+import { getCurrencyLabels } from '../constants/currency';
 import {
   sessionController,
   destroySessionController,
@@ -100,6 +104,7 @@ import {
   isAvailableForNewSessionPrompt as checkAvailableForNewSessionPrompt,
   isRestoreBlocked,
   restoreGateAfterTerminalFinalization,
+  sessionLocksNetwork,
   shouldCancelAttemptOnDisconnect,
   shouldCancelOnPeerUnreachable,
   shouldMountGameSession,
@@ -132,6 +137,7 @@ import {
   isValidTimeoutString,
   parseOptionalBigInt,
   parseSessionAmount,
+  sessionProposalNetworkMatches,
 } from '../lib/session/peerSessionParams';
 import { sessionModelForReactProps } from '../lib/session/finishedSessionDisplay';
 import { finalizeTerminalSession } from '../lib/session/terminalFinalization';
@@ -245,6 +251,7 @@ function SessionBuyIn({
   channelTimeout?: string;
   unrollTimeout?: string;
 }) {
+  const labels = getCurrencyLabels();
   const effectiveChannelTimeout =
     parseOptionalBigInt(channelTimeout) ?? DEFAULT_CHANNEL_TIMEOUT_BLOCKS;
   const effectiveUnrollTimeout =
@@ -253,7 +260,7 @@ function SessionBuyIn({
     return (
       <>
         <br />
-        Buy-in: <strong>{myAmount}</strong> mojos
+        Buy-in: <strong>{myAmount}</strong> {labels.mojos}
         <br />
         Channel timeout: <strong>{effectiveChannelTimeout.toString()}</strong> blocks
         <br />
@@ -265,9 +272,9 @@ function SessionBuyIn({
   return (
     <>
       <br />
-      Your buy-in: <strong>{myAmount}</strong> mojos
+      Your buy-in: <strong>{myAmount}</strong> {labels.mojos}
       <br />
-      Their buy-in: <strong>{theirAmount}</strong> mojos
+      Their buy-in: <strong>{theirAmount}</strong> {labels.mojos}
       <br />
       Channel timeout: <strong>{effectiveChannelTimeout.toString()}</strong> blocks
       <br />
@@ -1055,6 +1062,7 @@ const Shell = () => {
   const wcAbortRef = useRef(false);
   const [defaultFee, setDefaultFee] = useState<bigint>(() => getDefaultFee());
   const [feeUnit, setFeeUnit] = useState<'mojo' | 'xch'>(() => getFeeUnit());
+  const [network, setNetwork] = useState<ChiaNetwork>(() => getNetwork());
   const [feeEditing, setFeeEditing] = useState(false);
   const [feeInput, setFeeInput] = useState('');
   const feeInputRef = useRef<HTMLInputElement>(null);
@@ -1133,6 +1141,8 @@ const Shell = () => {
     [feeEditing, feeInput, parseFeeInput],
   );
 
+  const currency = getCurrencyLabels();
+
   // Theme state
   const [isDark, setIsDark] = useState<boolean>(() => {
     const stored = getTheme();
@@ -1166,6 +1176,26 @@ const Shell = () => {
   const sessionPhaseRef = useRef<SessionPhase>('none');
   sessionPhaseRef.current = sessionPhase;
 
+  const networkLocked = sessionLocksNetwork(
+    sessionPhase,
+    sessionSaveRef.current?.phase,
+    sessionConfig?.pairingToken,
+  );
+
+  const handleNetworkChange = useCallback((next: ChiaNetwork) => {
+    if (
+      sessionLocksNetwork(
+        sessionPhaseRef.current,
+        sessionSaveRef.current?.phase,
+        sessionConfigRef.current?.pairingToken,
+      )
+    ) {
+      return;
+    }
+    setNetwork(next);
+    saveNetwork(next);
+  }, []);
+
   const deferStateUpdate = useCallback((fn: () => void) => {
     if (typeof queueMicrotask === 'function') {
       queueMicrotask(fn);
@@ -1576,6 +1606,7 @@ const Shell = () => {
             channel_timeout: advisory.channel_timeout,
             unroll_timeout: advisory.unroll_timeout,
             game_session_id: gameSessionId,
+            network: getNetwork(),
           });
           await startFreshSessionWithPeer({
             peerId: advisory.peer_id,
@@ -1881,6 +1912,13 @@ const Shell = () => {
                 sendSessionReject(fromId);
                 return;
               }
+              if (!sessionProposalNetworkMatches(msg.network, getNetwork())) {
+                log(
+                  `[Shell] session_reject to=${fromId}: proposal network mismatch theirs=${msg.network ?? 'none'} mine=${getNetwork()}`,
+                );
+                sendSessionReject(fromId);
+                return;
+              }
               const proposalSessionId = msg.game_session_id ?? generateSessionId();
               peerSessionRef.current?.destroy();
               peerSessionRef.current = new PeerSession(fromId, proposalSessionId, conn);
@@ -3720,7 +3758,7 @@ const Shell = () => {
                 </div>
                 {balance !== undefined && (
                   <p className="text-2xl font-bold text-canvas-text-contrast">
-                    {balance.toLocaleString()} mojos
+                    {balance.toLocaleString()} {currency.mojos}
                   </p>
                 )}
                 <div className="w-full max-w-xs text-sm text-canvas-text">
@@ -3731,13 +3769,13 @@ const Shell = () => {
                         onClick={() => handleFeeUnitChange('mojo')}
                         className={`px-2 py-0.5 transition-colors ${feeUnit === 'mojo' ? 'bg-canvas-bg-active font-semibold' : 'hover:bg-canvas-bg-hover'}`}
                       >
-                        mojo
+                        {currency.mojo}
                       </button>
                       <button
                         onClick={() => handleFeeUnitChange('xch')}
                         className={`px-2 py-0.5 transition-colors border-l border-canvas-border ${feeUnit === 'xch' ? 'bg-canvas-bg-active font-semibold' : 'hover:bg-canvas-bg-hover'}`}
                       >
-                        XCH
+                        {currency.xch}
                       </button>
                     </div>
                   </div>
@@ -3774,7 +3812,7 @@ const Shell = () => {
                       onClick={startEditingFee}
                       className="w-full text-left px-3 py-2 rounded-md bg-canvas-bg-subtle text-canvas-text border border-canvas-border hover:bg-canvas-bg-hover transition-colors cursor-pointer"
                     >
-                      {feeDisplayText()} {feeUnit === 'xch' ? 'XCH' : 'mojos'}
+                      {feeDisplayText()} {feeUnit === 'xch' ? currency.xch : currency.mojos}
                     </button>
                   )}
                 </div>
@@ -3851,13 +3889,13 @@ const Shell = () => {
                         onClick={() => handleFeeUnitChange('mojo')}
                         className={`px-2 py-0.5 transition-colors ${feeUnit === 'mojo' ? 'bg-canvas-bg-active font-semibold' : 'hover:bg-canvas-bg-hover'}`}
                       >
-                        mojo
+                        {currency.mojo}
                       </button>
                       <button
                         onClick={() => handleFeeUnitChange('xch')}
                         className={`px-2 py-0.5 transition-colors border-l border-canvas-border ${feeUnit === 'xch' ? 'bg-canvas-bg-active font-semibold' : 'hover:bg-canvas-bg-hover'}`}
                       >
-                        XCH
+                        {currency.xch}
                       </button>
                     </div>
                   </div>
@@ -3894,7 +3932,7 @@ const Shell = () => {
                       onClick={startEditingFee}
                       className="w-full text-left px-3 py-2 rounded-md bg-canvas-bg-subtle text-canvas-text border border-canvas-border hover:bg-canvas-bg-hover transition-colors cursor-pointer"
                     >
-                      {feeDisplayText()} {feeUnit === 'xch' ? 'XCH' : 'mojos'}
+                      {feeDisplayText()} {feeUnit === 'xch' ? currency.xch : currency.mojos}
                     </button>
                   )}
                 </div>
@@ -3932,6 +3970,32 @@ const Shell = () => {
             ) : (
               <div className="flex flex-col justify-center items-center w-full px-4 py-6 gap-4">
                 <p className="text-lg font-semibold text-canvas-text-contrast">Choose Connection</p>
+                <div className="w-full max-w-sm flex flex-col items-center gap-1">
+                  <span className="text-sm text-canvas-text">Network</span>
+                  <div className="flex rounded-md border border-canvas-border overflow-hidden text-xs">
+                    <button
+                      type="button"
+                      disabled={networkLocked}
+                      onClick={() => handleNetworkChange('mainnet')}
+                      className={`px-3 py-1 transition-colors ${network === 'mainnet' ? 'bg-canvas-bg-active font-semibold' : networkLocked ? '' : 'hover:bg-canvas-bg-hover'} ${networkLocked ? 'opacity-40 cursor-default' : ''}`}
+                    >
+                      Mainnet
+                    </button>
+                    <button
+                      type="button"
+                      disabled={networkLocked}
+                      onClick={() => handleNetworkChange('testnet')}
+                      className={`px-3 py-1 transition-colors border-l border-canvas-border ${network === 'testnet' ? 'bg-canvas-bg-active font-semibold' : networkLocked ? '' : 'hover:bg-canvas-bg-hover'} ${networkLocked ? 'opacity-40 cursor-default' : ''}`}
+                    >
+                      Testnet
+                    </button>
+                  </div>
+                  {networkLocked && (
+                    <p className="text-xs text-canvas-text text-center">
+                      Network is locked for this session
+                    </p>
+                  )}
+                </div>
                 <div className="w-full max-w-sm flex flex-col gap-3">
                   <Button
                     variant="solid"

front-end/src/constants/currency.ts

@@ -0,0 +1,48 @@
+import { PREFERENCES_KEY } from '../hooks/savePreferences';
+
+/**
+ * User-visible currency labels for the selected Chia network. Testnet uses the
+ * T-prefixed nomenclature (TXCH / TMojo); mainnet keeps the standard names.
+ *
+ * The network preference is read from the persisted `appPreferences` blob so
+ * this stays a side-effect-free leaf module (no dependency on the save graph,
+ * which imports `util` and would otherwise form an import cycle).
+ */
+export interface CurrencyLabels {
+  /** Uppercase ticker: XCH / TXCH. */
+  xch: string;
+  /** Lowercase word for the coin: chia / TXCH. */
+  chia: string;
+  /** Singular sub-unit, lowercase: mojo / TMojo. */
+  mojo: string;
+  /** Plural sub-unit, lowercase: mojos / TMojos. */
+  mojos: string;
+  /** Uppercase sub-unit: MOJO / TMOJO. */
+  MOJO: string;
+}
+
+function readNetworkIsTestnet(): boolean {
+  try {
+    const raw = localStorage.getItem(PREFERENCES_KEY);
+    if (!raw) return false;
+    const parsed = JSON.parse(raw) as { network?: unknown };
+    return parsed.network === 'testnet';
+  } catch {
+    return false;
+  }
+}
+
+export function isTestnet(): boolean {
+  return readNetworkIsTestnet();
+}
+
+export function getCurrencyLabels(): CurrencyLabels {
+  const t = readNetworkIsTestnet();
+  return {
+    xch: t ? 'TXCH' : 'XCH',
+    chia: t ? 'TXCH' : 'chia',
+    mojo: t ? 'TMojo' : 'mojo',
+    mojos: t ? 'TMojos' : 'mojos',
+    MOJO: t ? 'TMOJO' : 'MOJO',
+  };
+}