The ARN Connect component allows you to add a wallet connection widget to a web page. It provides a convenient way to display different HTML content based on the wallet connection status. Here's how you can use it:
<arn-connect> <div slot="if-false"> Click here to connect your Wallet </div> <div slot="if-true"> You're connected! Click to disconnect </div> </arn-connect>
<arn-connect> component, you can define HTML content within slots labeled as "if-false" and "if-true". These slots correspond to the wallet connection being false or true, respectively. The content you provide in these slots will be displayed based on the current connection status.
You can also choose to leave a slot empty if you don't want to display anything in that particular case.
The ARN Connect component automatically keeps in sync with the wallet connection status. If the connection status changes through any means, such as using
ArnClient.auth.disconnect(), or through other
<arn-connect>components, all instances of
<arn-connect>will be updated accordingly.
It's important to note that the
<arn-connect> component should not be used to display content dependent on the connection status, as the displayed content will become a clickable area to disconnect. Instead, use the
<arn-if-connected> component for that purpose.
<arn-connect> component triggers events during its lifecycle. You can listen to these events by adding an event listener to the element using the corresponding event names:
connecting: Triggered when the connection process starts. This event will emit an
connected: Triggered when the connection process succeeds. This event will emit an
disconnected: Triggered when the connection process ends. This event will emit an
error: Triggered when an error occurs during the connection process. This event will emit an
ArnErrorEventcontaining the error object.
Note that these events are specific to the
<arn-connect>component and may not reflect the global connection status. To obtain the global connection status, use the relevant ARN Client API provided by the ARN Client package.
Since 2.3, you can display more detailed status about the ongoing authenticated process:
<arn-connect> <button slot="if-disconnected">Please connect</p> <p slot="if-connecting">Connecting</p> <p slot="if-connected">Wallet is connected. Now please sign.</p> <p slot="if-signing">Signing</p> <button slot="if-authenticated">Click to disconnect</p> </arn-connect>
if-trueis synonym of
if-falseis synonym of any status but authenticated.
- Slots of interim status
if-signingare not clickable.
Updated about 2 months ago