Frontend Integration Using AlgoKit and AlgoKit Utils

This section focuses on how to use the official AlgoKit TypeScript utilities to connect a frontend application to the Algorand blockchain. You can find the same explanation provided here for TypeScript, but tailored for Python, in detail in Algorand’s official documentation.

Installation

Before installing, you’ll need to decide on the version you want to target. Version 7 and 8 have the same feature set, however v7 leverages algosdk@>=2.9.0<3.0, whereas v8 leverages algosdk@>=3.0.0. Your project and it’s dependencies will help you decide which version to target.

Once you’ve decided on the target version, this library can be installed from NPM using your favourite npm client, e.g.:

To target algosdk@2 and use version 7 of AlgoKit Utils, run the below:

npm install algosdk@^2.9.0 @algorandfoundation/algokit-utils@^7.0.0

To target algosdk@3 and use the latest version of AlgoKit Utils, run the below:

npm install algosdk@^3.0.0 @algorandfoundation/algokit-utils

Usage

To use this library simply include the following at the top of your file:

import { AlgorandClient, Config } from'@algorandfoundation/algokit-utils';

As well as AlgorandClient and Config, you can use intellisense to auto-complete the various types that you can import within the {} in your favourite Integrated Development Environment (IDE), or you can refer to the reference documentation.

[!WARNING] Previous versions of AlgoKit Utils encouraged you to include an import that looks like this (note the subtle difference of the extra * as algokit):

import * as algokit from '@algorandfoundation/algokit-utils';

This version will still work until at least v9, but it exposes an older, function-based interface to the functionality that is deprecated. The new way to use AlgoKit Utils is via the AlgorandClient class, which is easier, simpler and more convenient to use and has powerful new features.

AlgorandClient

The main entrypoint to the bulk of the functionality is the AlgorandClient class. Most of the time you can get started by typing AlgorandClient. and choosing one of the static initialisation methods to create an Algorand client, e.g.:

// Point to the network configured through environment variables or
// if no environment variables it will point to the default LocalNet configuration
const algorand = AlgorandClient.fromEnvironment();

// Point to default LocalNet configuration
const algorand = AlgorandClient.defaultLocalNet();

// Point to TestNet using AlgoNode free tier
const algorand = AlgorandClient.testNet();

// Point to MainNet using AlgoNode free tier
const algorand = AlgorandClient.mainNet();

// Point to a pre-created algod client
const algorand = AlgorandClient.fromClients({ algod });

// Point to pre-created algod, indexer and kmd clients
const algorand = AlgorandClient.fromClients({ algod, indexer, kmd });

// Point to custom configuration for algod
const algorand = AlgorandClient.fromConfig({ algodConfig });

// Point to custom configuration for algod, indexer and kmd
const algorand = AlgorandClient.fromConfig({ algodConfig, indexerConfig, kmdConfig });

Config and Logging

To configure the AlgoKit Utils library you can make use of the Config object, which has a configure method that lets you configure some or all of the configuration options.

Logging

AlgoKit has an in-built logging abstraction that allows the library to issue log messages without coupling the library to a particular logging library. This means you can access the AlgoKit Utils logs within your existing logging library if you have one.

To do this you need to create a logging translator that exposes the following interface (Logger):

export type Logger = {
 error(message: string, ...optionalParams: unknown[]): void;
 warn(message: string, ...optionalParams: unknown[]): void;
 info(message: string, ...optionalParams: unknown[]): void;
 verbose(message: string, ...optionalParams: unknown[]): void;
 debug(message: string, ...optionalParams: unknown[]): void;
};

Note: this interface type is directly compatible with Winston so you should be able to pass AlgoKit a Winston logger.

By default, the consoleLogger is set as the logger, which will send log messages to the various console.* methods for all logs apart from verbose logs. There is also a nullLogger if you want to disable logging, or various leveled console loggers: verboseConsoleLogger (also outputs verbose logs), infoConsoleLogger (only outputs info, warning and error logs), warningConsoleLogger (only outputs warning and error logs).

To override the logger:

Config.configure({ logger: myLogger });

To retrieve the current debug state:

Config.debug

To turn on debug mode:

Config.configure({ debug: true });

To temporarily enable debug mode:

Config.withDebug(() => {
 // Do stuff with Config.debug set to true
});

You can find more detailed information in the Algorand Documentation.