Full lesson
rango-client
Rango Exchange Widget & Wallets Library
- Original
- rango-exchange/rango-client
- SuperStack fork
- Blockchains/rango-client @
e55d865 - Stars
- 1,124
- Last push (original)
- 2026-11-02
- Languages
- TypeScript, JavaScript, HTML, CSS, Shell
- Detected stack
- Next.jsweb3.js
- Categories
- DeFiWallets & Identity
- Licence
- Apache-2.0
- Homepage
- https://rango.exchange/widget
Architecture
1438 source files. By extension: .ts ×1027, .tsx ×401, .js ×10.
| Top-level directory | Source files |
|---|---|
widget | 904 |
wallets | 377 |
queue-manager | 85 |
signers | 25 |
examples | 21 |
logging | 13 |
blockchains | 5 |
(root) | 4 |
Dapp: deploying
This fork is queued for its own live dapp on Sol.College, with a Devnet/Mainnet switch. It appears here, at /dapps/rango-client/, once it is deployed and checked on devnet. Until then, run it locally with the commands below.
Key code, explained
Excerpts chosen automatically where the code uses the most Solana concepts, pinned to the fork's commit.
wallets/provider-walletconnect-2/src/signers/evm.ts L25–48 @ e55d865 · Apache-2.0 · original}; class EVMSigner implements GenericSigner<EvmTransaction> { private client: ISignClient; private getSession: SessionGetter; constructor(client: ISignClient, getSession: SessionGetter) { this.client = client; this.getSession = getSession; } private get session(): SessionTypes.Struct { const session = this.getSession(); if (!session) { throw new Error('EVM WalletConnect session is not available.'); } return session; } /** * Map Rango's EvmTransaction to WalletConnect eth_sendTransaction params. * * Unlike DefaultEvmSigner.buildTx (ethers TransactionRequest with gasLimit + * decimal fee strings), WC sends params raw over the relay. Wallets like- Line 27
class EVMSigner implements GenericSigner<EvmTransaction> {: Requires this account to have signed the transaction. - Line 45
* Map Rango's EvmTransaction to WalletConnect eth_sendTransaction params.: Submits the signed transaction to the cluster.
wallets/provider-ledger-wallet/src/signers/evm.ts L73–96 @ e55d865 · Apache-2.0 · original * Legacy path: Ledger still requires maxFee* to skip re-estimation, so it * will overwrite gas/fees with its own EIP-1559 estimate. We only forward * gasPrice for wallets that honor it; do not expect Rango's gasLimit to * stick on this path. */ params.gasPrice = toHexQuantity(tx.gasPrice); } return params;}; /* * Implement GenericSigner so signAndSendTx can return only `{ hash }` — * Ledger's eth_sendTransaction never yields an ethers TransactionResponse. * Delegate personal_sign / eth_signTypedData_v4 to DefaultEvmSigner (supported * by Ledger). Do not use its signAndSendTx: ethers then polls * eth_getTransactionByHash, which Ledger does not support. */export class CustomEvmSigner implements GenericSigner<EvmTransaction> { private defaultEvmSigner: DefaultEvmSigner; constructor() { /* * Provider comes from the EIP-6963 announce stashed in ledgerProvider * (getSigners runs after connect, so it should already be set).- Line 85
* Ledger's eth_sendTransaction never yields an ethers TransactionResponse.: Submits the signed transaction to the cluster. - Line 90
export class CustomEvmSigner implements GenericSigner<EvmTransaction> {: Requires this account to have signed the transaction.
wallets/provider-tonconnect/src/signers/ton.ts L13–36 @ e55d865 · Apache-2.0 · original export class CustomTonSigner implements GenericSigner<TonTransaction> { private provider: TonConnectUI; constructor(provider: TonConnectUI) { this.provider = provider; } async signMessage(): Promise<string> { throw SignerError.UnimplementedError('signMessage'); } async signAndSendTx(tx: TonTransaction): Promise<{ hash: string }> { const transaction = DefaultTonSigner.buildTx(tx); const { valid_until, network, ...restTransactionFields } = transaction; const result = await this.provider.sendTransaction({ ...restTransactionFields, validUntil: valid_until, network: NETWORKS[network], }); const hash = Cell.fromBase64(result.boc).hash().toString('hex'); return { hash };- Line 14
export class CustomTonSigner implements GenericSigner<TonTransaction> {: Requires this account to have signed the transaction. - Line 29
const result = await this.provider.sendTransaction({: Submits the signed transaction to the cluster.
How to run, build and test
These commands come from the repo's own manifests (package.json scripts, Anchor.toml, Cargo, go.mod, Makefile). Check the README for prerequisites and environment variables.
| Directory | Command | Runs |
|---|---|---|
. | npm run build | nx affected --target=build --parallel=5 |
. | npm run test | vitest |
. | npm run lint | nx run-many --target=lint |
. | npm run deploy | node ./scripts/deploy/command.mjs |
logging/core | npm run build | yarn run rangutopia library build |
logging/core | npm run lint | eslint "**/*.{ts,tsx}" |
logging/sentry | npm run build | yarn run rangutopia library build |
logging/sentry | npm run lint | eslint "**/*.{ts,tsx}" |
logging/console | npm run build | yarn run rangutopia library build |
logging/console | npm run lint | eslint "**/*.{ts,tsx}" |
logging/subscriber | npm run build | yarn run rangutopia library build |
logging/subscriber | npm run lint | eslint "**/*.{ts,tsx}" |
logging/types | npm run build | yarn run rangutopia library build |
logging/types | npm run lint | eslint "**/*.{ts,tsx}" |
examples/react-app-rewired-ts | npm run start | export NODE_OPTIONS='--max_old_space_size=8192'; react-app-rewired start |
examples/react-app-rewired-ts | npm run build | react-app-rewired build |
What you could build from it
- Fork the SuperStack copy and extend it within the DeFi gaps listed on the idea page.
- Learn the pattern first: Program Derived Addresses (PDAs)
- Learn the pattern first: Cross-Program Invocations (CPIs)
- Learn the pattern first: SPL Tokens: mints, accounts and transfers