Arianee Protocol DocumentationNMP Documentation

arn-connect

Suggest Edits

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>

Within the <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.connect() or 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.

Events

The <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 ArnConnectingEvent.
  • connected: Triggered when the connection process succeeds. This event will emit an ArnConnectedEvent containing the authContext object.
  • disconnected: Triggered when the connection process ends. This event will emit an ArnDisconnectedEvent.
  • error: Triggered when an error occurs during the connection process. This event will emit an ArnErrorEvent containing 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.

Detailed Authentication Process

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-true is synonym of if-authenticated.
  • if-false is synonym of any status but authenticated.
  • Slots of interim status if-connecting, if-connected and if-signing are not clickable.

Updated about 2 months ago