@radixdlt/connect-button NPM

The √ Connect Button is a framework agnostic web component to help developers connect users and their Radix Wallet to their dApps.

It appears as a consistent, Radix-branded UI element that helps users identify your dApp website as a Radix dApp and compatible with the Radix Wallet – and it automatically provides a consistent user experience for users to connect with their wallet and see the current status of the connection between dApp and Radix Wallet.

The √ Connect Button API acts as a wrapper to the Wallet SDK and exposes its methods while adding additional methods.

Installation

Using NPM

npm install @radixdlt/connect-button

Using Yarn

yarn add @radixdlt/connect-button

Usage

Getting started

Add the <radix-connect-button /> element in your HTML code and call the configuration function.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="/bundle.js"></script>
  </head>
  <body>
    <radix-connect-button />
  </body>
</html>

Configuration

The connect button needs to be configured before use.

configure(input: ConfigurationInput) => RadixConnectButtonApi

import {
  configure,
  requestBuilder,
  requestItem,
} from '@radixdlt/connect-button'

configure({
  dAppId: 'dashboard',
  networkId: 0x01,
  onConnect: ({ setState, getWalletData }) => {
    getWalletData(
      requestBuilder(requestItem.oneTimeAccounts.withoutProofOfOwnership(1))
    ).map(({ oneTimeAccounts }) => {
      setState({ connected: true })
    })
  },
  onDisconnect: ({ setState }) => {
    setState({ connected: false })
  },
})

type ConfigurationInput = {
  dAppId: string
  networkId?: number
  initialState?: Partial<ButtonState>
  onConnect: (api: RadixConnectButtonApi) => void
  onDisconnect: (api: RadixConnectButtonApi) => void
  onCancel?: () => void
  onDestroy?: () => void
}

requires dAppId - Specifies the dApp that is interacting with the wallet. Used in dApp verification process on the wallet side.
optional networkId - Specifies which network to use, defaults to mainnet (0x01)
optional initialState - Forces initial connected and / or loading state for button
requires onConnect - Callback that triggers when user clicks connect now button
requires onDisconnect - Callback that triggers when user clicks disconnect wallet button
optional onCancel - Callback that triggers when user cancels connect request
optional onDestroy - Callback that triggers when button is removed from the DOM. Useful for cleaning up registered event listeners and subscriptions.

API

type RadixConnectButtonApi = {
  getWalletData: WalletSdkType['request']
  sendTransaction: WalletSdkType['sendTransaction']
  setState: (
    input: Partial<{
      connected: boolean
      loading: boolean
    }>
  ) => void
  destroy: () => void
  onConnect$: Observable<void>
}