💳External Wallets

Connecting to External Wallets

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: https://widget.rango.exchange/wallets.

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;
}