Rango Docs
API SwaggerWidget PlaygroundAppWebsite
  • 👋Welcome to Rango
  • 🏠Introduction
  • 💁How It Works
  • ✅Integrations
  • ⚖️Rango vs. Competitors
  • 🔐Security
  • 🛣️Roadmap
  • 🦎Tokenomics
  • 💰Airdrop
  • ❓FAQ
  • 🐞Bug Bounty
  • API Integration
    • 🔡Terminology
    • 🚄API Key & Rate Limits
    • 🤝Choosing the Right API
    • 🦄Basic API - Single Step
      • 🛝API Flow
      • ⚙️API Reference
        • Get Blockchains & Tokens
        • Get Quote
        • Create Transaction (Swap)
        • Check Transaction Status
        • Check Approve Transaction Status
        • Get Address Assets & Balances
        • Get Token Balance
        • Report Transaction Failure
        • Get Direct Tokens
        • Get Custom Token
        • Message Passing
      • 🎓Tutorial
        • 🍰SDK Example
      • 💰Monetization
      • 🎹Sample Transactions
      • ✅Integration Checklist
    • 🦎Main API - Multi Step
      • 🛝API Flow
      • ⚙️API Reference
        • Get Blockchains & Tokens
        • Get Best Route
        • Get All Possible Routes
        • Confirm Route
        • Create Transaction
        • Check Transaction Status
        • Check Approve Transaction Status
        • Report Transaction Failure
        • Get Custom Token
        • Get Address Token Balance
      • 🎓Tutorial
        • 🍰SDK Example
      • 💰Monetization
      • 🎹Sample Transactions
  • ℹ️API Troubleshooting
  • Technical Docs
    • 🍔Swap Aggregation
    • 💰Monetization
    • ⛽Fee Structure
    • ⛽Network Fees and Gas Estimates
    • ⌛Stuck Transactions
  • Widget Integration
    • 🧩Overview
    • 🎇Quick Start
    • ⚙️Customization
    • 💰Monetization
    • 🛣️React Router
    • 🎵Events
    • 💳External Wallets
  • Smart Contracts
    • 👩‍💼Architecture
    • 🔎Audit Reports
    • 🏗️Deployment Addresses
    • 📩Message Passing
  • Ask for Integration
    • 🙋‍♂️DEXs & DEX Aggregators
    • 📱Rango Mobile SDK
  • Useful Links
    • Twitter
    • Discord Server
    • TG Announcements
    • TG Group
  • Terms of Use
  • Privacy policy
Powered by GitBook
On this page

Was this helpful?

  1. Widget Integration

External Wallets

Connecting to External Wallets

PreviousEventsNextArchitecture

Last updated 6 months ago

Was this helpful?

Rango Widget comes with built-in integration for multiple wallet providers, and you can find a list of the latest supported wallets at this link: .

Furthermore, it is also possible to connect Rango Widget to the wallets used in your dApp, enhancing the user experience. With this feature, when a user connects their wallet, such as Metamask, in your dApp, the corresponding wallet in the Rango Widget will be automatically connected as well, ensuring a seamless experience for the user.

There is a field named wallets in widget config that you could pass if you want to enable external wallets.

type WidgetConfig = {
    // ... other props
    wallets?: (WalletType | ProviderInterface)[]
}

If the wallets supported by your dApp are a subset of the wallets supported by Rango Widget, you can provide a list of wallet names as strings that specifically denote the wallets supported by your dApp. This enables Rango Widget to present only the relevant wallets to your users, ensuring a focused selection. Additionally, this allows for seamless connectivity between the widget wallets and the wallets used in your dApp, eliminating the need for any additional configuration or setup.

export enum WalletTypes {
  META_MASK = 'metamask',
  WALLET_CONNECT = 'wallet-connect',
  TRUST_WALLET = 'trust-wallet',
  KEPLR = 'keplr',
  PHANTOM = 'phantom',
  BINANCE_CHAIN = 'binance-chain',
  TRON_LINK = 'tron-link',
  COINBASE = 'coinbase',
  XDEFI = 'xdefi',
  CLOVER = 'clover',
  ARGENTX = 'argentx',
  FRONTIER = 'frontier',
  COSMOSTATION = 'cosmostation',
  COIN98 = 'coin98',
  SAFEPAL = 'safepal',
  TOKEN_POCKET = 'token-pocket',
  BRAVE = 'brave',
  MATH = 'math',
  EXODUS = 'exodus',
  OKX = 'okx',
  KUCOIN = 'kucoin',
  LEAP = 'leap',
  LEAP_COSMOS = 'leap-cosmos',
  STATION = 'station',
  ENKRYPT = 'enkrypt',
  TAHO = 'taho',
}

On the other hand, you have the option to implement the ProviderInterface and pass it to the wallets array. This interface allows you to customize and integrate additional wallet providers into Rango Widget. We will soon provide a sample implementation of the ProviderInterface to assist you in this process. Stay tuned for further updates and information on how to utilize this feature effectively.

export type ProviderInterface {
  type: WalletType;
  defaultNetwork?: Network;
  checkInstallation?: boolean;
  isAsyncInstance?: boolean;
  connect: Connect;
  getInstance: any;
  disconnect?: Disconnect;
  subscribe?: Subscribe;
  switchNetwork?: SwitchNetwork;
  getSigners: (provider: any) => SignerFactory;
  canSwitchNetworkTo?: CanSwitchNetwork;
  getWalletInfo(allBlockChains: BlockchainMeta[]): WalletInfo;
}
💳
https://widget.rango.exchange/wallets