feat(wallet): add typed Stellar signing pipeline (#758)

package.json

@@ -29,12 +29,16 @@
 		]
 	},
 	"dependencies": {
+		"@ledgerhq/hw-app-str": "7.7.7",
+		"@ledgerhq/hw-transport-webhid": "6.36.0",
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-hover-card": "^1.1.15",
 		"@radix-ui/react-popover": "^1.1.15",
 		"@radix-ui/react-scroll-area": "^1.2.10",
 		"@radix-ui/react-slot": "^1.2.4",
+		"@stellar/freighter-api": "6.0.1",
+		"@stellar/stellar-sdk": "17.0.1",
 		"@tailwindcss/vite": "^4.1.11",
 		"@tanstack/react-query": "^5.90.12",
 		"axios": "^1.13.2",

src/components/common/SigningProgress.tsx

@@ -0,0 +1,84 @@
+import type { SigningError, SigningStage } from '@/lib/signing';
+
+const STEPS: Array<{ stage: SigningStage; label: string }> = [
+	{ stage: 'preparing', label: 'Preparing transaction' },
+	{ stage: 'waiting-for-signature', label: 'Waiting for signature' },
+	{ stage: 'submitting', label: 'Submitting to Stellar' },
+];
+
+const STAGE_INDEX: Partial<Record<SigningStage, number>> = {
+	idle: -1,
+	preparing: 0,
+	'waiting-for-signature': 1,
+	submitting: 2,
+	complete: 3,
+};
+
+interface SigningProgressProps {
+	stage: SigningStage;
+	failedAt?: 'preparing' | 'waiting-for-signature' | 'submitting';
+	error?: SigningError;
+	onCheckLedger?: () => void;
+}
+
+export function SigningProgress({
+	stage,
+	failedAt,
+	error,
+	onCheckLedger,
+}: SigningProgressProps) {
+	const activeIndex = STAGE_INDEX[stage] ?? -1;
+	const failedIndex =
+		stage === 'failed' ? (STAGE_INDEX[failedAt ?? 'preparing'] ?? 0) : -1;
+	const showCheckLedger =
+		error?.type === 'LedgerLocked' || error?.type === 'LedgerAppNotOpen';
+
+	return (
+		<div
+			aria-live="polite"
+			aria-busy={!['idle', 'complete', 'failed'].includes(stage)}
+		>
+			<ol className="space-y-2" aria-label="Transaction signing progress">
+				{STEPS.map((step, index) => {
+					const complete = stage === 'complete' || index < activeIndex;
+					const active = index === activeIndex;
+					const failed = index === failedIndex;
+					return (
+						<li
+							key={step.stage}
+							className={
+								failed
+									? 'text-red-600'
+									: complete
+										? 'text-emerald-600'
+										: active
+											? 'text-foreground'
+											: 'text-muted-foreground'
+							}
+							aria-current={active ? 'step' : undefined}
+						>
+							<span aria-hidden="true">
+								{failed ? '×' : complete ? '✓' : active ? '●' : '○'}
+							</span>{' '}
+							{step.label}
+						</li>
+					);
+				})}
+			</ol>
+			{error && (
+				<div role="alert" className="mt-3 text-sm text-red-600">
+					<p>{error.hint}</p>
+					{showCheckLedger && onCheckLedger && (
+						<button
+							type="button"
+							className="mt-2 underline"
+							onClick={onCheckLedger}
+						>
+							Check Ledger
+						</button>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}