feat(client): add WalletConnect integration for mobile wallet support

[winsznx]

Implements WalletConnect support to enable mobile wallet connections, specifically Xverse mobile, alongside existing browser extension support.

Features:

• WalletConnect provider with Stacks blockchain support (CAIP-2)
• Auto-detect connection method (extension first, WalletConnect fallback)
• Explicit provider selection (extension or walletconnect)
• Session management and persistence
• Transaction, message, and structured data signing

Closes #180

Pull Request: Add WalletConnect Integration for Mobile Wallet Support

Description

This PR implements WalletConnect support for micro-stacks, enabling mobile wallet connections (specifically Xverse mobile) as requested in issue #180. The implementation maintains full backward compatibility with existing browser extension wallet support.

Changes

New Files

• packages/client/src/walletconnect-provider.ts - Core WalletConnect provider implementation

Modified Files

• packages/client/src/common/types.ts - Added WalletConnectConfig interface
• packages/client/src/micro-stacks-client.ts - Integrated WalletConnect provider
• packages/client/src/index.ts - Exported WalletConnectProvider
• packages/client/package.json - Added WalletConnect dependencies

Dependencies Added

• @walletconnect/sign-client@2.16.1
• @walletconnect/types@2.16.1
• @walletconnect/utils@2.16.1

Features

Connection Methods

• Auto-detect: Tries browser extension first, falls back to WalletConnect
• Explicit WalletConnect: Force connection via WalletConnect
• Explicit Extension: Force connection via browser extension

Stacks Blockchain Support

• Mainnet: stacks:1
• Testnet: stacks:2147483648

Supported Operations

• Transaction signing
• Message signing
• Structured data signing
• Session management and persistence

Usage Example

import { createClient } from '@micro-stacks/client';

const client = createClient({
  appName: 'My Stacks App',
  appIconUrl: 'https://myapp.com/icon.png',
  walletConnect: {
    projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
    onDisplayUri: (uri) => {
      // Display QR code to user
      showQRCode(uri);
    },
  },
});

// Auto-detect connection method
await client.authenticate();

// Or explicitly use WalletConnect
await client.authenticate({
  preferredMethod: 'walletconnect',
  onFinish: (session) => console.log('Connected!'),
});

Testing

• ✅ Build passes: pnpm build
• ✅ TypeScript compilation successful
• ✅ No new linting errors introduced
• ⚠️ Pre-existing linting errors in siwms module (not related to this PR)

Backward Compatibility

This implementation is fully backward compatible. Existing applications using browser extension wallets will continue to work without any changes. WalletConnect is an opt-in feature requiring explicit configuration.

Related Issues

Closes #180

Next Steps

Future enhancements could include:

• React hooks (useWalletConnect)
• QR code modal component
• Vue, Svelte, and Solid.js framework bindings
• Comprehensive integration tests with Xverse mobile

Checklist

• Code follows project style guidelines
• Build passes successfully
• TypeScript types are properly defined
• Backward compatibility maintained
• Documentation included in code comments
• No breaking changes introduced

[vercel]

@winsznx is attempting to deploy a commit to the Fungible Systems Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5075e4d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR