Add a new EVM wallet adapter end-to-end. Use when: user asks to add/create a new EVM wallet adapter (e.g. OKXWallet, Phantom, Coinbase, TokenPocket, Rabby, etc.). Covers the full workflow: requirements doc, plan, implementation, tests, docs, registration, and demo integration.
This skill automates the entire process of adding a new EVM-compatible wallet adapter to the tronwallet-adapter monorepo. It follows a proven 7-phase workflow.
require.md)Create requires/<version>/require.md following the requirements template.
Gather from the user or research:
window.okxwallet, window.phantom.ethereum)isOkxWallet, isPhantom)com.okex.wallet, app.phantom)okx://wallet/dapp/url?dappUrl=...)plan.md)Create requires/<version>/plan.md following the plan template.
Key contents:
Create the adapter package at packages/adapters/evm/<wallet-name>/ following these code templates:
| File | Template |
|---|---|
package.json | package.json template |
src/metadata.ts | metadata template |
src/adapter.ts | adapter template |
src/utils.ts | utils template |
src/index.ts | export * from './metadata.js'; export * from './adapter.js'; |
tsconfig.*.json | tsconfig templates |
vitest.config.ts | vitest config template |
LICENSE | MIT License |
Variable substitution table — replace these placeholders in ALL templates:
| Placeholder | Example (OKXWallet) | Description |
|---|---|---|
{{WALLET_NAME}} | OKX Wallet | Display name |
{{WALLET_CLASS}} | OkxWallet | PascalCase class prefix |
{{WALLET_DIR}} | okxwallet | Directory/package suffix |
{{WALLET_URL}} | https://www.okx.com/web3 | Official wallet URL |
{{WALLET_RDNS}} | com.okex.wallet | EIP-6963 rdns identifier |
{{WALLET_INJECTION}} | window.okxwallet | Global injection object |
{{WALLET_IS_FIELD}} | isOkxWallet | Boolean identifier on provider |
{{WALLET_DEEPLINK}} | okx://wallet/dapp/url?dappUrl= | Mobile deeplink prefix |
{{WALLET_ICON}} | data:image/png;base64,... | Base64-encoded icon |
{{NPM_PACKAGE}} | @tronweb3/tronwallet-adapter-okxwallet-evm | Full npm package name |
Create test files at packages/adapters/evm/<wallet-name>/tests/units/:
| File | Template |
|---|---|
adapter.test.ts | test template |
<wallet-name>-provider.ts | mock provider template |
Required test cases:
signTypedData() with JSON.stringifyconnect() successconnect() WalletNotFoundErrorconnect() error propagationRegister the new adapter in 3 places:
packages/adapters/adapters/src/index.ts — Add re-export line:
export * from '{{NPM_PACKAGE}}';
packages/adapters/adapters/package.json — Add dependency:
"{{NPM_PACKAGE}}": "workspace:^"
tsconfig.all.json (root) — Add reference:
{ "path": "./packages/adapters/evm/{{WALLET_DIR}}/tsconfig.all.json" }
Create packages/adapters/evm/<wallet-name>/README.md following the docs template.
Must include:
Add the adapter to all 4 demo apps. See demo integration guide.
| Demo | What to update |
|---|---|
demos/cdn-demo/evm/ | index.html (script tag), App.js (adapter instance), package.json |
demos/dev-demo/ | AdapterBasicTest.tsx, EvmAdapterDemo.tsx, package.json |
demos/react-ui/vite-app/ | EvmDemo.tsx (adapter list), package.json |
demos/vue-ui/vite-app/ | EvmDemo.vue (adapter list), package.json |
After all phases:
# Install dependencies
pnpm install
# Build the new adapter + UMD
cd packages/adapters/evm/<wallet-name>
pnpm run build
pnpm run build:umd
# Run tests
pnpm run test
# Build entire project
cd /path/to/tronwallet-adapter
pnpm run build
# Start dev-demo to verify
cd demos/dev-demo
pnpm run dev
requires/<version>/require.md createdrequires/<version>/plan.md createdpackages/adapters/evm/<wallet>/ package created with all source filesvitest run)pnpm build succeeds (ESM + CJS + types + UMD)