From f7e83cd337315adb5264c94922e6bb818489d776 Mon Sep 17 00:00:00 2001 From: hei-mao-tx <251878547+hei-mao-tx@users.noreply.github.com> Date: Tue, 19 May 2026 14:09:06 -0300 Subject: [PATCH] chore: add TrustConnect SDK --- README.md | 8 + SUMMARY.md | 7 + trustconnect/bitcoin.md | 142 ++++++++++++++++++ trustconnect/evm.md | 201 ++++++++++++++++++++++++++ trustconnect/modal-and-connections.md | 95 ++++++++++++ trustconnect/quickstart.md | 113 +++++++++++++++ trustconnect/solana.md | 119 +++++++++++++++ trustconnect/theming.md | 74 ++++++++++ trustconnect/trustconnect.md | 58 ++++++++ 9 files changed, 817 insertions(+) create mode 100644 trustconnect/bitcoin.md create mode 100644 trustconnect/evm.md create mode 100644 trustconnect/modal-and-connections.md create mode 100644 trustconnect/quickstart.md create mode 100644 trustconnect/solana.md create mode 100644 trustconnect/theming.md create mode 100644 trustconnect/trustconnect.md diff --git a/README.md b/README.md index 687d8f6..47dd6e5 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,14 @@ Programmatic access to Trust Wallet's multichain infrastructure — balance quer ## Build on Trust Wallet +### [TrustConnect SDK](trustconnect/trustconnect.md) +The free, open-source wallet connection SDK for every chain. Connect dApps to Trust Wallet across EVM, Solana, and Bitcoin with a modular React hooks API and fully customizable UI. + +- [Quickstart](trustconnect/quickstart.md) +- [EVM (EIP-155)](trustconnect/evm.md) +- [Solana](trustconnect/solana.md) +- [Bitcoin (BIP-122)](trustconnect/bitcoin.md) + ### [Developing for Trust Wallet](develop-for-trust/develop-for-trust.md) An introduction to web3 development with Trust Wallet. Covers the Provider API, WalletConnect, deep linking, and the browser extension. diff --git a/SUMMARY.md b/SUMMARY.md index 13153a8..af89447 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -6,6 +6,13 @@ - [CLI Reference](agent-sdk/cli-reference.md) - [Authentication](agent-sdk/authentication.md) - [Key Management](agent-sdk/key-management.md) +- [TrustConnect SDK](trustconnect/trustconnect.md) + - [Quickstart](trustconnect/quickstart.md) + - [Modal & Connection Management](trustconnect/modal-and-connections.md) + - [EVM (EIP-155)](trustconnect/evm.md) + - [Solana](trustconnect/solana.md) + - [Bitcoin (BIP-122)](trustconnect/bitcoin.md) + - [Theming & Customization](trustconnect/theming.md) - [MCP Servers](mcp/mcp.md) - [Docs MCP](mcp/docs-mcp.md) - [API Gateway MCP](mcp/api-gateway.md) diff --git a/trustconnect/bitcoin.md b/trustconnect/bitcoin.md new file mode 100644 index 0000000..a02fe82 --- /dev/null +++ b/trustconnect/bitcoin.md @@ -0,0 +1,142 @@ +# Bitcoin (BIP-122) + +TrustConnect provides React hooks for Bitcoin wallet interactions using the BIP-122 CAIP namespace. + +## Installation + +```bash +pnpm add @trustwallet/connect-bip122-react +``` + +## Setup + +Configure Bitcoin using `createBIP122`: + +```tsx +import { createBIP122, mainnet as bip122Mainnet } from '@trustwallet/connect-bip122-react' + +const bip122 = createBIP122({ + chain: bip122Mainnet, +}) +``` + +Then add it to the `namespaces` array in your `TrustConnectProvider` configuration. See [Quickstart](quickstart.md) for the full setup. + +## Sign messages + +### useSignMessage + +Sign a message with the connected Bitcoin wallet. Supports both ECDSA and BIP-322 signing protocols: + +```tsx +import { useSignMessage } from '@trustwallet/connect-bip122-react' +import { useConnection } from '@trustwallet/connect-react' + +function BitcoinSignMessage() { + const { isConnected } = useConnection({ namespaceId: 'bip122' }) + + const { + mutate: sign, + data: signature, + isPending, + isSuccess, + error, + } = useSignMessage() + + const handleSign = () => { + if (!isConnected) return + sign({ + message: 'Hello from TrustConnect SDK!', + protocol: 'ecdsa', // or 'bip322' + }) + } + + return ( +
+ + {isSuccess && signature && ( +
+

Message signed!

+ {signature.signature} +
+ )} + {error &&

Error: {error.message}

} +
+ ) +} +``` + +## Sign PSBTs + +### useSignPsbt + +Sign a Partially Signed Bitcoin Transaction (PSBT): + +```tsx +import { useSignPsbt } from '@trustwallet/connect-bip122-react' + +function BitcoinSignPsbt() { + const { mutate: signPsbt, isPending } = useSignPsbt({}) + + const handleSignPsbt = () => { + signPsbt({ + psbt: 'cHNidP8BA...', // Base64 encoded PSBT + signInputs: [ + { index: 0, sighashType: 1 }, + ], + finalize: false, + }) + } + + return ( + + ) +} +``` + +| Parameter | Type | Description | +|-----------|------|-------------| +| `psbt` | `string` | Base64-encoded PSBT | +| `signInputs` | `array` | Array of input objects with `index`, optional `address`, `publicKey`, and `sighashType` | +| `finalize` | `boolean` | Whether the wallet should finalize and broadcast the PSBT | + +## Send transfers + +### useSendTransfer + +Send a simple BTC transfer: + +```tsx +import { useSendTransfer } from '@trustwallet/connect-bip122-react' + +function BitcoinTransfer() { + const { mutateAsync: sendTransfer, isPending } = useSendTransfer({}) + + const handleTransfer = async () => { + try { + const result = await sendTransfer({ + toAddress: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh', + satoshis: 10000, + }) + console.log('Transaction ID:', result.txid) + } catch (error) { + console.error('Transfer failed:', error) + } + } + + return ( + + ) +} +``` + +| Parameter | Type | Description | +|-----------|------|-------------| +| `toAddress` | `string` | Destination Bitcoin address | +| `satoshis` | `number` | Amount in satoshis | diff --git a/trustconnect/evm.md b/trustconnect/evm.md new file mode 100644 index 0000000..0433485 --- /dev/null +++ b/trustconnect/evm.md @@ -0,0 +1,201 @@ +# EVM (EIP-155) + +TrustConnect provides React hooks for interacting with Ethereum and EVM-compatible chains. The EIP-155 package is built on top of [Viem](https://viem.sh) and uses Viem actions for read and write operations. + +## Installation + +```bash +pnpm add @trustwallet/connect-eip155-react +``` + +Peer dependencies: + +```bash +pnpm add @tanstack/react-query viem +``` + +## Setup + +Configure EVM chains using `createEIP155`: + +```tsx +import { mainnet, polygon } from 'viem/chains' +import { createEIP155 } from '@trustwallet/connect-eip155-react' + +const eip155 = createEIP155({ + chains: [mainnet, polygon], +}) +``` + +### Custom RPC URLs + +You can configure custom RPC endpoints per chain. Since Viem doesn't follow CAIP-2, use `formatChainId` to convert chain IDs: + +```tsx +import { mainnet } from 'viem/chains' +import { formatChainId, createEIP155 } from '@trustwallet/connect-eip155-react' + +const caipMainnetId = formatChainId(mainnet.id) + +const eip155 = createEIP155({ + chains: [mainnet], + rpcUrls: { + [caipMainnetId]: ['https://rpc-node.com'], + }, +}) +``` + +## Read operations + +### useEIP155Query + +Use `useEIP155Query` for read-only operations with any Viem public action: + +```tsx +import { useEIP155Query } from '@trustwallet/connect-eip155-react' +import { getBalance } from 'viem/actions' +import { mainnet } from 'viem/chains' +import { useConnection } from '@trustwallet/connect-react' + +function Balance() { + const { address, isConnected } = useConnection({ namespaceId: 'eip155' }) + + const { data } = useEIP155Query({ + chain: mainnet, + action: getBalance, + request: { address }, + queryOptions: { + enabled: isConnected, + queryKey: [address], + }, + }) + + return

Balance: {data?.toString()}

+} +``` + +> **Important:** Always pass `queryOptions.enabled: isConnected` to prevent the query from running before a wallet is connected. Without this, the query will fail with a "Transport is undefined" error because no RPC client exists yet. + +## Write operations + +### useSignMessage + +Sign messages with the connected EVM wallet: + +```tsx +import { useSignMessage } from '@trustwallet/connect-eip155-react' +import { useConnection } from '@trustwallet/connect-react' + +function SignMessage() { + const { isConnected } = useConnection({ namespaceId: 'eip155' }) + const { mutate: sign, data, isPending, isSuccess, isError, error } = useSignMessage() + + return ( +
+ + {isPending &&

Signing...

} + {isSuccess &&

Signature: {data}

} + {isError &&

Error: {error?.message}

} +
+ ) +} +``` + +### useWriteContract + +Call smart contract functions that modify state. This hook handles chain switching automatically and waits for transaction confirmation via [`waitForTransactionReceipt`](https://viem.sh/docs/actions/public/waitForTransactionReceipt). + +> **Note:** You can disable automatic chain switching by setting `autoSwitchChain` to `false`. + +```tsx +import { useWriteContract } from '@trustwallet/connect-eip155-react' +import { mainnet } from 'viem/chains' +import { parseEther } from 'viem' + +function WriteContract() { + const { mutate, hash, receipt, isLoading, isConfirming, isConfirmed } = useWriteContract() + + const handleWrite = () => { + mutate({ + chain: mainnet, + address: '0x...', + abi: [...], + functionName: 'transfer', + args: ['0x...', parseEther('0.01')], + }) + } + + return ( +
+ + {hash &&

Hash: {hash}

} + {isConfirming &&

Waiting for confirmation...

} + {isConfirmed && receipt &&

Confirmed in block {receipt.blockNumber}

} +
+ ) +} +``` + +### useSendTransaction + +Send native token transfers. Like `useWriteContract`, this hook handles chain switching and waits for confirmation automatically. + +```tsx +import { useSendTransaction } from '@trustwallet/connect-eip155-react' +import { mainnet } from 'viem/chains' +import { parseEther } from 'viem' + +function SendTransaction() { + const { mutateAsync, isPending, hash, receipt, isConfirming, isConfirmed } = useSendTransaction() + + const handleSend = async () => { + try { + await mutateAsync({ + chain: mainnet, + to: '0x...', + value: parseEther('0.01'), + }) + } catch (error) { + console.error('Failed:', error) + } + } + + return ( +
+ + {hash &&

Hash: {hash}

} + {isConfirming &&

Waiting for confirmation...

} + {isConfirmed && receipt &&

Confirmed in block {receipt.blockNumber}

} +
+ ) +} +``` + +### useEIP155Mutation + +Use `useEIP155Mutation` for any Viem wallet action not covered by the higher-level hooks: + +```tsx +import { useEIP155Mutation } from '@trustwallet/connect-eip155-react' +import { switchChain } from 'viem/actions' +import { mainnet } from 'viem/chains' + +function CustomAction() { + const { mutateAsync, isPending } = useEIP155Mutation({ + chain: mainnet, + action: switchChain, + }) + + return ( + + ) +} +``` diff --git a/trustconnect/modal-and-connections.md b/trustconnect/modal-and-connections.md new file mode 100644 index 0000000..13f8293 --- /dev/null +++ b/trustconnect/modal-and-connections.md @@ -0,0 +1,95 @@ +# Modal & Connection Management + +TrustConnect provides React hooks for controlling the wallet connection modal and reading connection state across all supported chains. + +## Modal control + +### useTrustModal + +Use `useTrustModal` to open and control the connection modal: + +```tsx +import { useTrustModal } from '@trustwallet/connect-react' + +function ConnectButton() { + const { open } = useTrustModal() + + return ( + <> + {/* Open wallet selection */} + + + {/* Prompt the user to connect to a specific namespace */} + + + ) +} +``` + +The `open` function accepts an optional parameter to target a specific namespace: + +| Parameter | Type | Description | +|-----------|------|-------------| +| `type` | `'namespace'` | Specifies that the modal should filter by namespace | +| `namespaceId` | `string` | The CAIP-2 namespace to filter wallets by (`'eip155'`, `'solana'`, `'bip122'`) | + +## Connection state + +### useConnections + +Use `useConnections` to read all active connections across every namespace: + +```tsx +import { useConnections } from '@trustwallet/connect-react' + +function AllConnections() { + const { connections } = useConnections() + + return ( + + ) +} +``` + +### useConnection + +Use `useConnection` to read the connection for a single namespace: + +```tsx +import { useConnection } from '@trustwallet/connect-react' + +function WalletInfo() { + const { isConnected, address, wallet, chain, status } = useConnection({ + namespaceId: 'eip155', + }) + + if (!isConnected) return

Not connected

+ + return ( +
+

Wallet: {wallet?.name}

+

Address: {address}

+

Chain: {chain?.reference}

+

Status: {status}

+
+ ) +} +``` + +**Returned properties:** + +| Property | Type | Description | +|----------|------|-------------| +| `isConnected` | `boolean` | Whether a wallet is connected for this namespace | +| `address` | `string \| undefined` | The connected wallet address | +| `wallet` | `object \| undefined` | Wallet metadata (name, icon, etc.) | +| `chain` | `object \| undefined` | The active chain for this connection | +| `status` | `string` | Connection status | diff --git a/trustconnect/quickstart.md b/trustconnect/quickstart.md new file mode 100644 index 0000000..a9197d5 --- /dev/null +++ b/trustconnect/quickstart.md @@ -0,0 +1,113 @@ +# Quickstart + +Get from zero to a working wallet connection in your React app. + +## Step 1 — Install packages + +Install the core package, at least one network package, and WalletConnect: + +```bash +pnpm add @trustwallet/connect-react \ + @trustwallet/connect-eip155-react \ + @trustwallet/connect-walletconnect +``` + +EIP-155 requires these peer dependencies: + +```bash +pnpm add @tanstack/react-query viem +``` + +> **Other chains?** Add `@trustwallet/connect-solana-react` for Solana or `@trustwallet/connect-bip122-react` for Bitcoin. See [Solana](solana.md) and [Bitcoin](bitcoin.md) for details. + +## Step 2 — Configure the provider + +Wrap your app with `TrustConnectProvider` and configure the namespaces and services: + +```tsx +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { mainnet, polygon } from 'viem/chains' +import { createEIP155 } from '@trustwallet/connect-eip155-react' +import { createWalletConnect } from '@trustwallet/connect-walletconnect' +import { TrustConnectProvider } from '@trustwallet/connect-react' + +const queryClient = new QueryClient() +const projectId = import.meta.env.VITE_WALLETCONNECT_ID + +const eip155 = createEIP155({ + chains: [mainnet, polygon], +}) + +const walletConnect = createWalletConnect({ + projectId, + metadata: { + name: 'My dApp', + url: 'https://example.com', + description: 'My awesome dApp', + icons: ['https://example.com/icon.png'], + }, +}) + +function App() { + return ( + + + + + + ) +} +``` + +> **WalletConnect project ID** — get yours at [cloud.walletconnect.com](https://cloud.walletconnect.com/). + +## Step 3 — Open the connection modal + +Use the `useTrustModal` hook to open the wallet selection modal: + +```tsx +import { useTrustModal } from '@trustwallet/connect-react' + +function ConnectButton() { + const { open } = useTrustModal() + + return +} +``` + +## Step 4 — Read connection state + +Use `useConnection` to check if a wallet is connected and read its details: + +```tsx +import { useConnection } from '@trustwallet/connect-react' + +function WalletInfo() { + const { isConnected, address, wallet, chain } = useConnection({ + namespaceId: 'eip155', + }) + + if (!isConnected) return

Not connected

+ + return ( +
+

Wallet: {wallet?.name}

+

Address: {address}

+

Chain: {chain?.reference}

+
+ ) +} +``` + +## Next steps + +- [Modal & Connection Management](modal-and-connections.md) — fine-grained modal and connection control +- [EVM (EIP-155)](evm.md) — sign messages, write contracts, and send transactions +- [Solana](solana.md) — Solana wallet interactions +- [Bitcoin (BIP-122)](bitcoin.md) — Bitcoin wallet interactions +- [Theming & Customization](theming.md) — match the modal to your brand diff --git a/trustconnect/solana.md b/trustconnect/solana.md new file mode 100644 index 0000000..0117591 --- /dev/null +++ b/trustconnect/solana.md @@ -0,0 +1,119 @@ +# Solana + +TrustConnect provides React hooks for Solana wallet interactions. + +## Installation + +```bash +pnpm add @trustwallet/connect-solana-react +``` + +## Setup + +Configure Solana using `createSolana`: + +```tsx +import { createSolana, mainnet as solanaMainnet } from '@trustwallet/connect-solana-react' + +const solana = createSolana({ + chain: solanaMainnet, +}) +``` + +Then add it to the `namespaces` array in your `TrustConnectProvider` configuration. See [Quickstart](quickstart.md) for the full setup. + +## Sign messages + +### useSignMessage + +Sign an arbitrary message with the connected Solana wallet: + +```tsx +import { useSignMessage } from '@trustwallet/connect-solana-react' +import { useConnection } from '@trustwallet/connect-react' +import bs58 from 'bs58' + +function SolanaSignMessage() { + const { isConnected } = useConnection({ namespaceId: 'solana' }) + const { mutate, data, isPending, isSuccess, error } = useSignMessage() + + const handleSign = () => { + if (!isConnected) return + mutate({ message: 'Hello Solana!' }) + } + + // Signature is returned as Uint8Array + const signatureBase58 = data ? bs58.encode(data.signature) : null + + return ( +
+ + {isSuccess && signatureBase58 && ( +
+

Message signed successfully!

+ {signatureBase58} +
+ )} + {error &&

Error: {error.message}

} +
+ ) +} +``` + +## Send transactions + +### useSignSendTransaction + +Sign and broadcast a Solana transaction: + +```tsx +import { useSignSendTransaction } from '@trustwallet/connect-solana-react' +import { Transaction, SystemProgram, PublicKey } from '@solana/web3.js' + +function SolanaSendTransaction() { + const { mutateAsync, isPending } = useSignSendTransaction() + + const handleSend = async () => { + try { + const tx = new Transaction().add( + SystemProgram.transfer({ + fromPubkey: new PublicKey('...'), + toPubkey: new PublicKey('...'), + lamports: 1000000, // 0.001 SOL + }) + ) + + const serialized = tx.serialize({ requireAllSignatures: false }) + const result = await mutateAsync({ + transaction: serialized, + options: { + skipPreflight: false, + preflightCommitment: 'confirmed', + }, + }) + + console.log('Transaction signature:', result.signature) + } catch (error) { + console.error('Transaction failed:', error) + } + } + + return ( + + ) +} +``` + +#### Transaction options + +| Option | Type | Description | +|--------|------|-------------| +| `skipPreflight` | `boolean` | Disable transaction verification at the RPC | +| `preflightCommitment` | `'processed' \| 'confirmed' \| 'finalized'` | Commitment level for preflight | +| `commitment` | `'processed' \| 'confirmed' \| 'finalized'` | If provided, confirm the transaction after sending | +| `maxRetries` | `number` | Maximum number of times to retry sending the transaction | +| `minContextSlot` | `number` | Minimum slot to include the transaction | diff --git a/trustconnect/theming.md b/trustconnect/theming.md new file mode 100644 index 0000000..e2cc13f --- /dev/null +++ b/trustconnect/theming.md @@ -0,0 +1,74 @@ +# Theming & Customization + +TrustConnect's modal UI can be customized at two levels: theme configuration for quick color scheme changes, or full component ejection for complete control over every element. + +## Theme configuration + +Set the theme via the `theme` prop on `TrustConnectProvider`: + +```tsx + + {children} + +``` + +| Value | Description | +|-------|-------------| +| `'auto'` | Follows the user's system preference (default) | +| `'light'` | Light theme | +| `'dark'` | Dark theme | + +### Programmatic theme control + +Use the `useTheme` hook to read and change the theme at runtime: + +```tsx +import { useTheme } from '@trustwallet/connect-react' + +function ThemeToggle() { + const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme() + + return ( +
+

Current: {resolvedTheme}

+ + + + +
+ ) +} +``` + +| Property | Type | Description | +|----------|------|-------------| +| `theme` | `string` | The configured theme value (`'auto'`, `'light'`, or `'dark'`) | +| `resolvedTheme` | `string` | The actual active theme after resolving `'auto'` (`'light'` or `'dark'`) | +| `setTheme` | `function` | Set the theme to `'auto'`, `'light'`, or `'dark'` | +| `toggleTheme` | `function` | Toggle between light and dark themes | + +## Full UI customization + +For complete control over every UI element, eject the TrustConnect components into your project: + +```bash +npx @trustwallet/connect-react add +``` + +You can specify a custom output path: + +```bash +npx @trustwallet/connect-react add --path ./src/components/trust +``` + +This copies the React components and their styles into your project so you can customize everything locally. The CLI also installs two additional dependencies automatically: + +- `@trustwallet/connect-ui-logic` — headless state logic used by the UI components +- `cuer` — QR code rendering + +After ejecting, import `TrustConnectProvider` and other hooks directly from your local TrustConnect components folder instead of `@trustwallet/connect-react`. + +> **Note:** After ejecting, you are responsible for maintaining the components. Updates to the SDK's built-in UI will not automatically apply to ejected components. diff --git a/trustconnect/trustconnect.md b/trustconnect/trustconnect.md new file mode 100644 index 0000000..fa19007 --- /dev/null +++ b/trustconnect/trustconnect.md @@ -0,0 +1,58 @@ +# TrustConnect SDK + +The free, open-source wallet connection SDK for every chain, built by Trust Wallet. TrustConnect is a [CAIP](https://chainagnostic.org/)-compliant, multi-chain SDK that connects your dApp to Trust Wallet and other wallets across EVM, Solana, and Bitcoin — with a React hooks API and fully customizable UI. + +## Install + +Install the core React package: + +```bash +pnpm add @trustwallet/connect-react +``` + +Then add the network-specific packages for the chains you need: + +```bash +# EVM chains (Ethereum, Polygon, etc.) +pnpm add @trustwallet/connect-eip155-react + +# Solana +pnpm add @trustwallet/connect-solana-react + +# Bitcoin +pnpm add @trustwallet/connect-bip122-react +``` + +For WalletConnect support (mobile and QR code connections): + +```bash +pnpm add @trustwallet/connect-walletconnect +``` + +EIP-155 peer dependencies (if not already installed): + +```bash +pnpm add @tanstack/react-query viem +``` + +## Get started + +- [Quickstart](quickstart.md) — install, configure, and connect your first wallet +- [Modal & Connection Management](modal-and-connections.md) — control the connection modal and read wallet state +- [EVM (EIP-155)](evm.md) — sign messages, send transactions, and call contracts on Ethereum and EVM chains +- [Solana](solana.md) — sign messages and send transactions on Solana +- [Bitcoin (BIP-122)](bitcoin.md) — sign messages, PSBTs, and send transfers on Bitcoin +- [Theming & Customization](theming.md) — customize the UI theme or eject the full component set + +## Key features + +- **100% free, always** — no usage fees, no freemium tiers, no paywalls +- **Native multi-chain support** — EVM, Solana, and Bitcoin in a single, modular SDK +- **Fully customizable UI** — override any style to match your design system, or eject the entire component set for full control +- **Apache 2.0 licensed** — fork it, extend it, own it. No vendor lock-in +- **Lightweight by design** — minimal dependencies, small bundle size, internally audited +- **CAIP-compliant** — built on [Chain Agnostic](https://chainagnostic.org/) standards for consistent multi-chain addressing + +## License + +TrustConnect SDK is available under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0).