Allo Protocol Workshop 1

Why am I learning this?

The Allo Protocol is a new way to build applications for funding and allocating resources. It is a new way to build applications that are more fair, more transparent, and more open.

Slides

• Table of Contents
  • Prerequisites
  • Objectives
  • Resources

Introduction [3 mins]

The Allo Protocol is a new way to build applications for funding and allocating resources. It is a new way to build applications that are more fair, more transparent, and more open.

• [3 mins] Slides: What is the Allo Protocol?

Objectives

By the end of this, developers should be able to:

• Understand the essential parts of the Allo Protocol and how they work together with the Allo SDK
• Implement the Allo SDK to read and create a new Strategy(Pool) and Profile
• Start building a new application using the Allo SDK

Prerequisites

General knowlege of NEXT.js, React, and TypeScript is required. We use NEXT.js v14.0.1, React v18 and TypeScript v5.

Outline of project:

- /allo-sdk-workshop-1
  - /src
    - /abi
    - /app
    - /components
      - /Home.tsx
    - /sdk
      - allo.ts
      - microgrants.ts
      - registry.ts
    - /services
    - /utils

• Node.js
• Git
• Yarn, NPM, PNPM, or Bun
• Pináta - create a free Pináta account

We use pináta to pin our metadata to IPFS. You can use any IPFS pinning service you like.

Demo [7 mins]

• Demo SeaGrants to show how we set up a grant strategy and application using the Allo SDK

What we'll build

Preparation [10 mins]

• You can fork first before you clone the repository here

• [1 min] Clone & Checkout start branch of this repository.

  # Clone the repository
  git clone https://github.com/allo-protocol/allo-sdk-workshop-1

  # Change into the directory
  cd allo-sdk-workshop-1

  # Checkout the main branch
  git checkout main

  cd starter
  # You should now be in the /starter directory

• [3 mins] Install dependencies with bun/yarn install.

  # Install dependencies
  bun install

  # or
  yarn install

  # or
  pnpm install

  # For NPM specifically you need to use this command
  npm install --legacy-peer-deps

And to add the Allo SDK we run:

  bun install @allo-team/allo-v2-sdk

  # or
  yarn install @allo-team/allo-v2-sdk

  # or
  pnpm install @allo-team/allo-v2-sdk

  # For NPM specifically you need to use this command
  npm install @allo-team/allo-v2-sdk --legacy-peer-deps

• [5 mins] Setup .env values

Code Along [30 mins]

1. [15-20 mins] Create a new Strategy(Pool), Create a new Pool & Profile (A profile is required to create a pool on Allo)

• Code-along: allo.ts, registry.ts & microgrants.ts

To create a new Allo instance, you need to provide the chain information. In this example, we're using the 5 (Goerli) chain information (see supported chains here).

In allo.ts:

// Importy Allo from SDK
import { Allo } from "@allo-team/allo-v2-sdk/";

// Create a new Allo instance
export const allo = new Allo({
  chain: 421614,
  rpc: "https://arbitrum-sepolia.blockpi.network/v1/rpc/public",
});

To create a new Registry instance, you need to provide the chain information. In this example, we're using the 5 (Goerli) chain information (see supported chains here).

In registry.ts:

// Importy Registry from SDK
import { Registry } from "@allo-team/allo-v2-sdk/";

// Create a new Registry instance
export const registry = new Registry({
  chain: 421614,
  rpc: "https://arbitrum-sepolia.blockpi.network/v1/rpc/public",
});

To create a new profile using the createProfile function:

import { CreateProfileArgs } from "@allo-team/allo-v2-sdk/dist/Registry/types";
import { TransactionData } from "@allo-team/allo-v2-sdk/dist/Common/types";

// Prepare the transaction arguments
const createProfileArgs: CreateProfileArgs = {
  // random number to prevent nonce reuse, this is required.
  // NOTE: The profile ID id based on the provided nonce and the caller's address.
  nonce: Math.floor(Math.random() * 10000),
  name: "Allo Workshop",
  metadata: {
    protocol: BigInt(1),
    pointer: "bafybeia4khbew3r2mkflyn7nzlvfzcb3qpfeftz5ivpzfwn77ollj47gqi",
  },
  members: [
    "0x add your wallet address here along with any other managers you want to add",
  ],
  owner: "0x add your wallet address here",
};

// Create the transaction with the arguments
const txData: TransactionData = await registry.createProfile(createProfileArgs);

// Client could be from ethers, viem, etc..
const hash = await client.sendTransaction({
  data: txData.data,
  account,
  value: BigInt(txData.value),
});

console.log(`Transaction hash: ${hash}`);

Let's run the app here and create a new profile. You can see the transaction result in the console and alert.

🤚 We need to update the Home.tsx file with the new profile ID you just created.

22  const profileId =
23    "0x add your profile ID here";

and in allo.ts uncomment the profileId variable and comment out the createProfile function.

11  const profileId =
12    "0x your new profile ID here";
13  // const profileId = await createProfile();

To start interacting with the MicroGrants contract, create a new instance of MicroGrantsStrategy in microgrants.ts:

import { MicroGrantsStrategy } from "@allo-team/allo-v2-sdk/";

export const strategy = new MicroGrantsStrategy({
  chain: 421614,
  rpc: "https://arbitrum-sepolia.blockpi.network/v1/rpc/public",
});

📝 If you are aware of the poolId, you can load that while creating the instance

import { MicroGrantsStrategy } from "@allo-team/allo-v2-sdk/";

export const strategy = new MicroGrantsStrategy({
  chain: 421614,
  rpc: "https://arbitrum-sepolia.blockpi.network/v1/rpc/public",
  poolId: 1, // a valid pool ID
});

Get the strategy deploy parameters

In microgrants.ts:

import { StrategyType } from "@allo-team/allo-v2-sdk/dist/strategies/MicroGrantsStrategy/types";

// Specify the strategy type - MicroGrants for default/demo purposes
const strategyType = StrategyType.MicroGrants; 
const deployParams = strategy.getDeployParams(strategyType);

// Client could be from ethers, viem, etc.
const hash = await walletClient!.deployContract({
  abi: deployParams.abi,
  bytecode: deployParams.bytecode as `0x${string}`,
  args: [],
});

Get the initialize data

initStrategyData = await strategy.getInitializeData(initParams);

Create the pool transaction

In microgrants.ts create a new pool:

import { CreatePoolArgs } from "@allo-team/allo-v2-sdk/dist/Allo/types";
import { TransactionData } from "@allo-team/allo-v2-sdk/dist/Common/types";

const poolCreationData: CreatePoolArgs = {
  profileId: profileId, // sender must be a profile member
  strategy: strategyAddress, // approved strategy contract
  initStrategyData: initStrategyData, // unique to the strategy
  token: NATIVE, // you need to change this to your token address
  amount: BigInt(1e14),
  metadata: {
    protocol: BigInt(1),
    pointer: pointer.IpfsHash,
  },
  managers: ["0x your wallet address here"],
};

const txData: TransactionData = allo.createPool(createPoolArgs);

// Client could be from ethers, viem, etc.
const hash = await client.sendTransaction({
  data: txData.data,
  to: txData.to,
  value: BigInt(txData.value),
});

console.log(`Transaction hash: ${hash}`);

1. [10 mins] Create a new application

Register a recipient

• Code-along: microgrants.ts

const registerRecipientData = strategy.getRegisterRecipientData({
  registryAnchor: anchorAddress as `0x${string}`,
  recipientAddress: "0x your wallet address", // data.recipientAddress as `0x${string}`,
  requestedAmount: BigInt(1e13), // data.requestedAmount,
  metadata: {
    protocol: BigInt(1),
    pointer: pointer.IpfsHash,
  },
});

1. [5 mins] Run the application locally

Wrap up [5 mins]

• [5 mins] Q&A

Resources

• Allo Protocol - This is the main repository for the Allo Protocol smart contracts.

• Allo SDK - This is the main repository for the Allo SDK.

• Allo Scan - Our first application built on the Allo Protocol, a block explorer showing all the transactions on the Allo Protocol with some basic features.

• Sea Grants - Our second application built on the Allo Protocol, a micro-grant style application and funding platform using user defined strategies.

• Spec - Our indexing service for the Allo Protocol that allows us to query the blockchain for data using GraphQL.

• GraphQL Playground - A GraphQL playground for the Allo Protocol built on top of Spec.

• Allo Governance Test Token Goerli