WalletConnect URI: {walletConnectUri}
);
}
```
For a full QR example, see `packages/connector/README.md` (WalletConnect section).
### Remote Signer (Server-backed Signing)
Remote signing is a two-part setup:
1) **Browser**: create a Wallet Standard wallet that delegates signing to your API.
```ts
import { createRemoteSignerWallet } from '@solana/connector/remote';
import { getDefaultConfig } from '@solana/connector/headless';
const remoteWallet = createRemoteSignerWallet({
endpoint: '/api/connector-signer',
name: 'Treasury',
// getAuthHeaders: () => ({ Authorization: `Bearer ${token}` }),
});
const config = getDefaultConfig({
appName: 'My App',
additionalWallets: [remoteWallet],
});
```
2) **Server**: implement the Next.js route handler to actually sign.
```ts
// app/api/connector-signer/route.ts
import { createRemoteSignerRouteHandlers } from '@solana/connector/server';
const { GET, POST } = createRemoteSignerRouteHandlers({
provider: { type: 'custom', signer: myRemoteSigner }, // implements RemoteSigner (see references/remote-signer.md)
authorize: async request => true,
policy: {
validateTransaction: async bytes => true,
validateMessage: async bytes => true,
},
rpc: { endpoint: process.env.RPC_URL },
chains: ['solana:mainnet'],
name: 'Treasury',
});
export { GET, POST };
```
Details (provider configs + protocol types + security) live in `references/remote-signer.md`.
### Devtools (Development Only)
ConnectorKit also ships devtools (`@solana/connector-debugger`) that can be dynamically mounted in development.
```tsx
'use client';
import { useEffect } from 'react';
export function DevtoolsLoader() {
useEffect(() => {
if (process.env.NODE_ENV !== 'development') return;
let devtools: { mount: (el: HTMLElement) => void; unmount: () => void } | undefined;
let container: HTMLDivElement | undefined;
import('@solana/connector-debugger').then(({ ConnectorDevtools }) => {
container = document.createElement('div');
document.body.appendChild(container);
devtools = new ConnectorDevtools({ config: { position: 'bottom-right', theme: 'dark' } });
devtools.mount(container);
});
return () => {
devtools?.unmount();
container?.remove();
};
}, []);
return null;
}
```
## Security & Production Checklist
- **RPC API keys**: don’t expose paid RPC URLs as `NEXT_PUBLIC_*`; use a Next.js RPC proxy route and point your cluster URL at the proxy (see `packages/connector/README.md`).
- **Token logo privacy**: set `imageProxy` if you render token images to avoid leaking user IPs to arbitrary token metadata hosts (see `packages/connector/README.md`).
- **CoinGecko rate limits**: if you use token prices heavily, configure `coingecko.apiKey`.
- **Remote signer**: always implement `authorize` + `policy.validateTransaction`, use HTTPS, and rate limit the signer endpoint.
### Headless (Non-React)
```ts
import { ConnectorClient } from '@solana/connector/headless';
const client = new ConnectorClient({
autoConnect: true,
cluster: { initialCluster: 'devnet' },
});
client.subscribe(state => {
/* react to changes */
});
await client.connectWallet('wallet-standard:phantom');
const snapshot = client.getSnapshot();
```
### Wallet Adapter Compat Bridge
```ts
import { useWalletAdapterCompat } from '@solana/connector/compat';
const compat = useWalletAdapterCompat(signer, disconnect);
compat.publicKey; // string | null
compat.connected; // boolean
compat.signTransaction(tx);
compat.sendTransaction(tx, connection);
```
## Key Concepts
### Connector IDs
Wallets use stable branded `WalletConnectorId` strings:
- `'wallet-standard:phantom'`, `'wallet-standard:solflare'`, etc.
- `'walletconnect'`
- `'mwa:phantom'` (Mobile Wallet Adapter on iOS/Android)
### Wallet Status State Machine
`useWallet()` returns a discriminated union:
```ts
status: 'disconnected' | 'connecting' | 'connected' | 'error';
```
When `status === 'connected'`, `session` contains `accounts`, `selectedAccount`, `selectAccount()`.
Type guards: `isDisconnected()`, `isConnecting()`, `isConnected()`, `isStatusError()`
### Providers
- **`