Stackr Explorer CLI

A Simple and Modern CLI that create an Out of the box Explorer for Stackr Micro Rollups.

Demo

A Full Demo Video can be looked up here :

https://www.loom.com/share/cfc13c1d6acc4ba4b0617794fbf97f0f?sid=3fe41756-949c-49cd-b098-22ce9bfbe0a8

The following GIT-REPO is also the Demo repo with this Stack Mirco rollup : Git-Repo

Introduction

Micro rollups also needs Explorer that providers user with a transparent and user-friendly interface to explore transactions, blocks & other data to gain valuable insights about the application and it’s activities.

It is Ready to use out of the Box , for all Rollups, with just simple configurations steps, can be followed in the tutorial below.

Features & Benefits

• Enhanced visibility into Micro Rollup transactions and specific states
• Increased Transparency for the Users about the Rollup activities
• Application specific insights in a user friendly interface
• Interaction with the rollup for the developers

Installation

Install createstackrexplorer-cli from CLI , in your project's root directory.

  npm install createstackrexplorer-cli

  or

  bun add createstackrexplorer-cli

  or

  yarn add createstackrexplorer-cli

Usage

1. Intialise the explorer app from your Rollup's directory

npx createstackrexplorer-cli

This should add the explorer folder inside your rollup and install the dependencies

2. Set Inputs in Config

Under explorer/config/index.ts

config

Update the action Schema Type as set in the src/index.ts & Action Input interface as set in the src/state.ts

export const actionSchemaType = {
  type: "String",
};

export interface ActionInput {
  type: "increment" | "decrement";
}

Here is another example of the config file

export const actionSchemaType = {
  type: "String",
  stealthAddress: "Address",
  ephemeralPublicKey: "Bytes",
  viewTag: "Uint",
  publicAddress: "Address",
  stelathMetaAddress: "Bytes",
  schemeId: "Uint",
};

export interface ActionInput {
  type: "announce" | "register";
  stealthAddress: string;
  ephemeralPublicKey: string;
  viewTag: number;
  publicAddress: string;
  stelathMetaAddress: string;
  schemeId: number;
}

| Parameter | Type | Description | | :----------------- | :----------------- | :--------------------------------- | | actionSchemaType | actionSchemaType | Required actionSchemaType Data | | ActionInput | ActionInput | Required ActionInput Data |

Andd !! BOOM ✨ , You just Token Gated your website

Run

NOTE : Start the Rollup first and ensure the db.sqlite is present in the rollup repo

To run the explorer , run local dev command

  npm run dev

  or

  bun dev

To Start the Rollup , run it with this command

   bun run src/index.ts

Screenshots

Appendix

The package is just live with an initial version , there might be some upcoming changes .

Contact: [email protected]

Tech Stack

Explorer: React, Next, ShadCN UI, sqlite3

CLI: bun , git

How we built it ??

Looking forward for more such experience

Authors

• @0xdhruv
• @kushagrasarathe