GithubHelp home page GithubHelp logo

lucasdemoreno / allo-sdk-workshop-1 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from allo-protocol/allo-sdk-workshop-1

0.0 0.0 0.0 743 KB

Allo / Arbitrum Hackathon workshop material and codebase

JavaScript 0.13% TypeScript 99.48% CSS 0.40%

allo-sdk-workshop-1's Introduction

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

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

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

Screenshot 2023-12-16 at 11 44 06 AM

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. Screenshot 2023-12-16 at 11 52 34 AM

🤚 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

allo-sdk-workshop-1's People

Contributors

codenamejason avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.