arn-if-connected

The ARN If Connected component is specifically designed to check the wallet connection status and conditionally display HTML slots based on the connection state. Here's how you can use it:

<arn-if-connected>
  <div slot="if-false">
    You're not wallet-connected.
  </div>
  <div slot="if-true">
    Hello connected!
  </div>
</arn-if-connected>

Inside the <arn-if-connected> component, you can define HTML content within slots. The slots are labeled as "if-false" and "if-true", corresponding to the wallet connection being false or true, respectively. You can include any HTML content within these slots.

The ARN If Connected component simplifies the process of checking the wallet connection status by handling it internally. It automatically detects changes in the connection state and updates the displayed content accordingly.

⚠️

Note that the ARN If Connected component assumes you have already set up the necessary dependencies and configurations for the ARN Client and other required packages in your application. Make sure to follow the setup instructions provided in the documentation for a seamless integration.

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.