feat: WalletConnect support via Reown AppKit + wagmi

The previous Connect Wallet flow used raw EIP-6963 discovery, which only
sees browser-extension wallets (MetaMask, Rabby). Mobile wallets like
MetaMask Mobile, Trust, Rainbow, Coinbase Wallet were invisible to the
tool — blocking signers whose authorised keys live only on a phone.

Adopt the same wallet stack tradingstrategy-ai/frontend already uses
(@reown/appkit + @reown/appkit-adapter-wagmi + @wagmi/core + @wagmi/connectors)
on top of the existing viem dependency. AppKit's modal handles browser
extensions and WalletConnect-bridged mobile wallets in one UI.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Ubuntu

.env.example

@@ -0,0 +1,7 @@
+# WalletConnect (Reown Cloud) project ID. Required for the AppKit modal to
+# pair desktop browsers with mobile wallets via QR. Get a free project ID at
+# https://cloud.reown.com.
+#
+# In CI/Pages deploys this is provided via the WALLET_CONNECT_PROJECT_ID
+# repository secret — see .github/workflows/deploy.yml.
+TS_PUBLIC_WALLET_CONNECT_PROJECT_ID=

.github/workflows/deploy.yml

@@ -47,6 +47,10 @@ jobs:
           # so SvelteKit needs this as its base path. svelte.config.js
           # reads it via process.env.BASE_PATH.
           BASE_PATH: /open-multisig-hl
+          # WalletConnect (Reown Cloud) project ID — baked into the static
+          # bundle at build time so AppKit's mobile-wallet QR flow works.
+          # Set as a repo secret: Settings → Secrets and variables → Actions.
+          TS_PUBLIC_WALLET_CONNECT_PROJECT_ID: ${{ secrets.WALLET_CONNECT_PROJECT_ID }}
         run: pnpm run build
 
       - name: Disable Jekyll

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## Unreleased
+
+- Add WalletConnect support so signers can pair mobile wallets via QR (2026-04-27).

README.md

@@ -24,9 +24,12 @@ This application a web user interface for Hyperliquid native multisignature wall
 
 # Run
 
-To launch Open Hyperliquid Multisigner:
+Copy `.env.example` to `.env` and set `TS_PUBLIC_WALLET_CONNECT_PROJECT_ID` to a free project ID from [cloud.reown.com](https://cloud.reown.com). Without it the WalletConnect (mobile wallet) flow is disabled — desktop browser extensions still work.
 
 ```shell
+cp .env.example .env
+# edit .env
+pnpm install
 pnpm run dev
 ```
 

package.json

@@ -31,7 +31,11 @@
 	"dependencies": {
 		"@lucide/svelte": "^1.8.0",
 		"@msgpack/msgpack": "^3.1.3",
+		"@reown/appkit": "^1.8.18",
+		"@reown/appkit-adapter-wagmi": "^1.8.18",
 		"@sveltejs/adapter-static": "^3.0.10",
+		"@wagmi/connectors": "^5.11.2",
+		"@wagmi/core": "^2.22.1",
 		"viem": "^2.47.12"
 	}
 }

src/lib/components/ConnectWallet.svelte

@@ -1,3 +1,11 @@
+<!--
+@component
+Connect button + connected-account chip.
+
+Opens AppKit's wallet picker modal on click. AppKit handles wallet discovery
+(browser extensions via EIP-6963 + WalletConnect-bridged mobile wallets via
+QR), so this component is intentionally tiny — the picker UI lives in AppKit.
+-->
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { getWallet } from '$lib/wallet.svelte.js';
@@ -19,44 +27,9 @@
 			Disconnect
 		</Button>
 	{:else}
-		<Button onclick={() => wallet.connect()} disabled={wallet.connecting}>
-			{wallet.connecting ? 'Connecting...' : 'Connect Wallet'}
-		</Button>
+		<Button onclick={() => wallet.connect()}>Connect wallet</Button>
 	{/if}
 	{#if wallet.error}
 		<span class="text-destructive text-xs">{wallet.error}</span>
 	{/if}
 </div>
-
-<!-- Wallet picker modal -->
-{#if wallet.showPicker}
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div
-		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-		onclick={() => (wallet.showPicker = false)}
-	>
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div
-			class="bg-background w-80 rounded-xl border p-6 shadow-xl"
-			onclick={(e) => e.stopPropagation()}
-		>
-			<h2 class="mb-4 text-base font-semibold">Select a wallet</h2>
-			<ul class="space-y-2">
-				{#each wallet.discoveredWallets as w}
-					<li>
-						<button
-							class="hover:bg-muted flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors"
-							onclick={() => wallet.connectProvider(w)}
-						>
-							<img src={w.info.icon} alt={w.info.name} class="size-8 rounded-md" />
-							<span class="text-sm font-medium">{w.info.name}</span>
-						</button>
-					</li>
-				{/each}
-			</ul>
-			<Button variant="ghost" size="sm" class="mt-4 w-full" onclick={() => (wallet.showPicker = false)}>
-				Cancel
-			</Button>
-		</div>
-	</div>
-{/if}

src/lib/config.ts

@@ -0,0 +1,33 @@
+/**
+ * Public runtime configuration.
+ *
+ * Values are read from SvelteKit's `$env/static/public`, which means they are
+ * baked into the static bundle at build time. Set them via `.env` for local
+ * development or as repository secrets in the deploy workflow.
+ *
+ * Per project convention (see CLAUDE.md), client-accessible env vars use the
+ * `TS_PUBLIC_` prefix — configured in `svelte.config.js` via `kit.env.publicPrefix`.
+ */
+
+import { env } from '$env/dynamic/public'
+
+/**
+ * WalletConnect (Reown Cloud) project credentials.
+ *
+ * The project ID identifies this dapp to the WalletConnect relay network so
+ * mobile wallets can pair with the desktop UI via QR code. Get a free project
+ * ID at https://cloud.reown.com.
+ *
+ * If unset, AppKit still loads but mobile-wallet pairing will be disabled —
+ * a console warning is emitted to surface the misconfiguration.
+ */
+export const walletConnectConfig = (() => {
+	const projectId = env.TS_PUBLIC_WALLET_CONNECT_PROJECT_ID ?? ''
+	if (!projectId && typeof window !== 'undefined') {
+		console.warn(
+			'TS_PUBLIC_WALLET_CONNECT_PROJECT_ID is not set — WalletConnect (mobile wallet support) will be disabled. ' +
+				'Set it in .env (local) or as a repo secret (deploy workflow).',
+		)
+	}
+	return { projectId }
+})()