Installation

Welcome to the documentation for ARN Components! This guide will help you set up and use ARN Components in your web app.

Setup

To get started, follow these steps to add the ARN Components package to your project:

1. Open your package.json file.
2. Add the following dependencies to the "dependencies" section:

{
  "dependencies": {
    "@arianee/arn-client": "^2.2.15",
    "@arianee/arn-components": "^2.2.15",
    "@arianee/arn-types": "^2.2.15",
    "@wagmi/core": "1.0.6"
  }
}

3. Run your package manager's install command (e.g., npm install or yarn install) to install the dependencies.

💡

Make sure to install the required ARN Client package as well, as ARN Components relies on it.

Usage

Once you have installed the ARN Components package, you can start using it in your web app. Here's how:

1. Import the ARN Components package to ensure its code is included in your app:

import '@arianee/arn-components';

2. You can now use ARN Components tags in your HTML markup. Depending on the framework you are using, you may need to configure additional settings:

• Angular:

  • Angular requires adding CUSTOM_ELEMENTS_SCHEMA to the schemas array of the relevant @NgModule or @Component to allow non-Angular custom tags.
  • If you need to provide attributes to ARN Components, use the [attr.someattribute] syntax to set non-Angular attributes.

• Vue.js:

  • Avoid defining Vue components with the same names as ARN web components (e.g., ArnConnect.vue). This can cause the Vue.js runtime to enter an infinite loop.
  • To avoid warnings, ensure that your app's compiler options declare that it contains custom elements starting with arn-.

Example

Here is an example combining ARN custom tags to display different HTML depending and the connection state. If not connected, a connection widget is displayed.

The Angular version of the example shows that Angular elements, expressions and pipes can be used inside ARN slots:

<arn-if-connected>
  <div slot="if-false" class="display-center">
    <div class="section-rewards--title">
      <h2><span [innerHTML]="'rewards.yourRewards' | translate"></span></h2>
    </div>
    <p [innerHTML]="'rewards.pleaseConnectYour' | translate"></p>
    <arn-connect slot="if-false">
      <button class="btn btn--inverted" slot="if-false" >
        {{'rewards.connectWallet' | translate}}
      </button>
    </arn-connect>
  </div>
  <section class="section-rewards" slot="if-true">
    <div class="section-rewards--title">
      <h2><span [innerHTML]="'rewards.yourRewards' | translate"></span></h2>
    </div>
    <div *ngIf="collections">
      <div *ngIf="collections.length > 0">
        <ysl-rewards-collection
          *ngFor="let collection of collections"
          [collection]="collection"
        ></ysl-rewards-collection>
      </div>
      <div *ngIf="collections.length <= 0" class="display-center">
        <p>{{'rewardsVideo.noCorrespondingNft.title' | translate}}</p>
        <a class="btn btn--inverted" routerLink="/"
          [innerHTML]="'rewardsVideo.noCorrespondingNft.btn' | translate"></a>
      </div>
    </div>
  </section>
</arn-if-connected>

For detailed examples using various tech stacks, you can refer to the ARN example repository.

📌

The provided examples and configuration guidelines are specific to Angular and Vue.js. If you are using a different framework, make sure to consult its documentation for any additional configuration requirements.

🚀

You are now ready to use ARN Components in your web app. Enjoy building with ARN!