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.

``bash
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

`bash
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

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

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

Here is another example of the config file

`javascript
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

`bash
npm run dev

or

bun dev
`

To Start the Rollup , run it with this command

`bash
bun run src/index.ts
``

Screenshots

Appendix

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

Contact: contact.dhruvagarwal@gmail.com

Tech Stack

Explorer: React, Next, ShadCN UI, sqlite3

CLI: bun , git

How we built it ??

Looking forward for more such experience

Authors

- @0xdhruv
- @kushagrasarathe