Installation

Setup

The ARN Client is a JavaScript library that requires a Node.js runtime to be used. To get started with the ARN Client in your project, follow the steps below:

Step 1: Install Node.js

Make sure you have Node.js installed on your machine. If you don't have it already, you can download and install it from the official Node.js website. Node.js includes npm, which is the package manager we will use to install the ARN Client library.

Step 2: Create a package.json file

Navigate to your project directory using the command line interface and create a package.json file if you don't already have one. You can create a package.json file by running the following command:

npm init

This command will guide you through creating a package.json file by asking you a series of questions. You can press enter to accept the default values or provide your values.

Step 3: Install ARN Client Dependencies

Open the package.json file and add the following dependencies to the dependencies section:

{
  "name": "myproject",
  "version": "0.1.0",
  "dependencies": {
    "@arianee/arn-client": "^2.2.18",
    "@arianee/arn-types": "^2.2.18",
    "@wagmi/core": "1.0.6"
  }
}

Save the package.json file, and in the command line interface, run the following command to install the ARN Client dependencies:

npm install

This command will install the required packages (@arianee/arn-client and @arianee/arn-types) into your project.

📌

The versions specified in the dependencies section may vary based on your requirements. Make sure to use the appropriate version numbers for your project.

Step 4: Import and Initialize the ARN Client

To use the ARN Client in your project, you need to import the ArnClient class and create an instance of it. Here's an example of how you can import and initialize the ARN Client:

import { ArnClient } from "@arianee/arn-client";

const arnClient = new ArnClient();

You can now use the arnClient instance to interact with the ARN Client API and leverage its features in your project.

📌

Depending on your specific use case, you may need to provide additional configuration options when initializing the ArnClient. Refer to the ARN Client documentation for more details on advanced configuration options.

Fetching a Configuration from the ARN Server

To retrieve the client configuration for the ARN Client, it is recommended to fetch it from the ARN Server side. This allows for centralized administration and flexibility in managing the configuration without redeploying the front end.

To fetch the configuration from the ARN Server, you can use the ArnHttpClientFactory and the server URL. Here's an example:

import { ArnHttpClientFactory } from "@arianee/arn-client";

const clientFactory = new ArnHttpClientFactory();
const arnClient = await clientFactory.createFromUrl("https://myarnserver/myproject");

By calling createFromUrl with the ARN Server URL, the arnClient will be created with the configuration fetched from the server.

Full Example

Here's a complete example that demonstrates how to initialize the ARN Client and connect the wallet using an Angular Material UI:

import { ArnClient } from "@arianee/arn-client";

const clientFactory = new ArnHttpClientFactory();
const arnClient = await clientFactory

 

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => {
        const config: ArnClientConfig = { /* ... */ }
        const arnClient = **new ArnClient**(config);
        **(**window **as any).**arnClient = arnClient;
        return arnClient;
      },
      multi: true,
    },
  ]
})
export class AppModule {}

Should you fetch the ARN Client configuration from a back end, the relevant url would typically be set from the Angular app environment. For instance, here is a main module that initializes its arnClient with a MaterialUI connector factory:

function arnClientFactory(): Promise<any> {
  return new Promise(async (resolve) => {
    const config = await ArnClient.configService.fromUrl(environment.arnConfigUrl);
    const arnClient = new ArnClient(config);
    (window as any).arnClient = arnClient;
    resolve(arnClient);
  });
}

@NgModule({
  imports: [
    MatSnackBarModule,
    MatDialogModule,
    // ...
  ],
  declarations: [
    DialogConnectedUserComponent,
    NotificationComponent,
    // ...
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => arnClientFactory,
      multi: true,
    },
  ],
})
export class AppModule {}