@radixdlt/connect-button
Advanced tools
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. When used with Radix dApp Toolkit it is 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.
Using NPM
npm install @radixdlt/connect-button
Using Yarn
yarn add @radixdlt/connect-button
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" />
</head>
<body>
<radix-connect-button />
</body>
</html>
const radixConnectButton = document.querySelector('radix-connect-button')!
const handleConnect = () => {
radixConnectButton.status = 'pending'
}
radixConnectButton.addEventListener('onConnect', handleConnect)
type ConnectButtonProperties = {
theme: RadixButtonTheme
dAppName: string
personaLabel: string
connected: boolean
status: RadixButtonStatus
loggedInTimestamp: string
showPopover: boolean
requestItems: RequestItem[]
accounts: Account[]
personaData: PersonaData[]
isMobile: boolean
isWalletLinked: boolean
isExtensionAvailable: boolean
fullWidth: boolean
activeTab: 'sharing' | 'requests'
mode: RadixButtonMode
avatarUrl: string
}
radix-blue, other values are black, white and white-with-outlinedefault, error, pending, successtype ConnectButtonEvents = {
onConnect: () => void
onDisconnect: () => void
onCancelRequestItem: (event: CustomEvent<{ id: string }>) => void
onDestroy: () => void
onShowPopover: () => void
onUpdateSharedData: () => void
}
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.