merge to main

.env.local.example

@@ -1,3 +1,3 @@
 NODE_ENV=development
-DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"
-API_SECRET_KEY="secret"
+DATABASE_URL="postgresql://user:pass@localhost:5432/stacks_blockchain_api?schema=stacks_blockchain_api"
+CRON_SECRET="secret"

.eslintrc

@@ -1,31 +1,32 @@
 {
   "env": {
     "browser": true,
-    "es2021": true
+    "es2021": true,
   },
   "extends": [
     "plugin:react/recommended",
     "standard",
     "eslint:recommended",
-    "next"
+    "next",
   ],
   "overrides": [],
   "parserOptions": {
     "ecmaVersion": "latest",
-    "sourceType": "module"
+    "sourceType": "module",
   },
   "plugins": ["react"],
   "settings": {
     "react": {
-      "version": "detect"
-    }
+      "version": "detect",
+    },
   },
   "rules": {
     "react/prop-types": 0,
     "no-extra-semi": 0,
     "semi": 0,
     "quotes": "off",
     "space-before-function-paren": "off",
-    "comma-dangle": "off"
-  }
+    "comma-dangle": "off",
+    "no-var": "off",
+  },
 }

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -4,90 +4,62 @@
 [![Pull Requests Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)](http://makeapullrequest.com)
 
 This repository contains the code for the [**Stacks Blockchain Status Page**](https://status.stacks.org/) code used by the [Stacks Foundation](https://www.stacks.org) to display blockchain metrics.
-This is a next.js react app that reads locally stored metric data from a postgres database, and periodically will fetch data from [https://stacksonchain.com/](https://stacksonchain.com/) to refresh the displayed data.
+This is a next.js react app that reads [Stacks Blockchain API](https://github.com/hirosystems/stacks-blockchain-api) data from a postgres database to display chainstate data.
 
 ## Getting Started
 
-- PostgreSQL is a required dependency
-  example with Docker:
+- PostgreSQL is a **required** dependency with a [Stacks Blockchain API](https://github.com/hirosystems/stacks-blockchain-api) instance writing chainstate data.
+  - https://github.com/hirosystems/stacks-blockchain-api?tab=readme-ov-file#quick-start
+- [Vercel cron](https://vercel.com/docs/cron-jobs) is used for updating mempool txs
 
-```bash
-$ docker run -d \
-    --rm \
-    --name postgres \
-    -p 5432:5432 \
-    -e POSTGRES_PASSWORD=postgres \
-    -v ./postgres_data:/var/lib/postgresql/data \
-postgres:15-alpine
-```
+### Clone this repo and enter its directory
 
 ```bash
 # Clone this repo and enter its directory
 git clone https://github.com/stacksfoundation/stacksstatus && cd stacksstatus
+```
 
+### Create .env file
 
-# Create .env file
+```bash
 cp .env.local.example .env
-
-# update .env file with DB connection options (HOST, USER, PASSWORD, etc) and apply migrations
-npx prisma migrate dev --name init
-
-# Install dependencies
-npm install
-
-# Run development server
-npm run dev
-# or
-yarn dev
-
-# Run production server
-npm run build && npm run start
-yarn build && yarn start
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-## Refreshing the data
+### Edit .env file,
 
-There are 2 paths via the `/api` route to refresh the data, and 1 standalone script with not authentication
+set `DATABASE_URL` to your Stacks Blockchain API database instance.
+ex:
 
-1. `/api/refresh` - this path is used with [upstash](upstash.com) [docs](https://docs.upstash.com/qstash/quickstarts/vercel-nextjs)
-2. `/api/refresh_local` - this path is used with a local key defined below `API_SECRET_KEY`
-3. `node lib/standalone_check.js` - [package.json](./package.json) will need to be set to `"type": "module"` to run this
+```
+DATABASE_URL="postgresql://user:pass@localhost:5432/stacks_blockchain_api?schema=stacks_blockchain_api"
+```
 
-To refresh the data, you can run a `curl` command like the following:
+### Install dependencies
 
 ```bash
-$ curl -sLw '\n' \
-    --request POST \
-    --url 'localhost:3000/api/refresh_local' \
-    --header 'Authorization: Bearer secret'
+npm install
 ```
 
-With upstash:
+### Run development server
 
 ```bash
-$ curl -sL \
-  --request POST \
-  --url "https://qstash.upstash.io/v1/publish/<url of app>/api/refresh" \
- --header "Authorization: Bearer <refer to upstash docs>"
+npm run dev
 ```
 
-## Adding more checks
+### Run production server
 
-In folder `./status_checks`, each json file defines an API request to [stacksonchain](https://stacksonchain.com).
-To add a new check, copy/paste an existing file and modify the query (be sure to set `"disabled": false` to enable the check).
-Refer to the json schemas:
+```bash
+npm run build && npm run prismamigrate && npm run start
+```
 
-- [status_checks_array.schema.json](./status_checks_array.schema.json)
-- [status_checks_string.schema.json](./status_checks_string.schema.json)
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 ## Configuration
 
 ### Environment Variables
 
-| Name             | Description                      | Default Value                                            |
-| ---------------- | -------------------------------- | -------------------------------------------------------- |
-| `NODE_ENV`       | Sets the node environment        | `development`                                            |
-| `DATABASE_URL`   | Postgresql connection URI        | `postgresql://postgres:postgres@localhost:5432/postgres` |
-| `API_SECRET_KEY` | Key to refresh the data via POST | `secret`                                                 |
+| Name           | Description                                                                           | Default Value                                                                              |
+| -------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `NODE_ENV`     | Sets the node environment                                                             | `development`                                                                              |
+| `DATABASE_URL` | Postgresql connection URI                                                             | `postgresql://user:pass@localhost:5432/stacks_blockchain_api?schema=stacks_blockchain_api` |
+| `CRON_SECRET`  | Auth key to refresh mempool data via [vercel cron](https://vercel.com/docs/cron-jobs) | `secret`                                                                                   |

app/api/cron/mempool-txs/route.ts

@@ -0,0 +1,38 @@
+// https://nextjs.org/docs/app/building-your-application/routing/route-handlers
+import { NextRequest, NextResponse } from 'next/server';
+import { MempoolTxTypeI, apiRoot, getData } from '../../../../lib/util';
+import { addMempoolSize } from '../../../datastore/nodeDB';
+
+export async function GET(req: NextRequest) {
+  try {
+    const authHeader = req.headers.get('authorization');
+    if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
+      return new NextResponse('Unauthorized', {
+        status: 401,
+      });
+    }
+    const size = await getMempoolSize();
+    await addMempoolSize(size);
+    return NextResponse.json({ size });
+  } catch (error) {
+    const msg = 'Failed to save mempool transactions';
+    console.error({ msg, error });
+    return NextResponse.json(
+      { error: msg },
+      {
+        status: 500,
+      }
+    );
+  }
+}
+
+const getMempoolSize = async () => {
+  const mempool = await getData(`${apiRoot}/extended/v1/tx/mempool/stats`);
+  const txTypeCounts = mempool.tx_type_counts as MempoolTxTypeI;
+  const size =
+    txTypeCounts.token_transfer +
+    txTypeCounts.smart_contract +
+    txTypeCounts.contract_call +
+    txTypeCounts.poison_microblock;
+  return size;
+};

app/api/status/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(req) {
+  return NextResponse.json({ status: 'OK' });
+}

app/components/BlockFullness.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  BlockExecutionCostDB,
+  getBlockFullnessPercentages,
+  getMax,
+} from '../../lib/util';
+
+type NewType = BlockExecutionCostDB;
+
+interface BlockFullnessProps {
+  block: NewType;
+}
+
+const BlockFullness = async ({ block }: BlockFullnessProps) => {
+  const fullnessPerc = await getBlockFullnessPercentages({ block });
+  const maxFullness = getMax(fullnessPerc);
+
+  return (
+    <>
+      <div>Block Fullness:</div>
+      <div>{maxFullness.toFixed(2)}%</div>
+    </>
+  );
+};
+
+export default BlockFullness;

app/components/BlockHash.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Card from './Card';
+
+const BlockHash = ({ blockhash }: { blockhash: string }) => {
+  return (
+    <div className='block-hash col-span-1'>
+      <Card title='Blockhash' value={blockhash} />
+    </div>
+  );
+};
+
+export default BlockHash;

app/components/BlockHeight.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Card from './Card';
+
+const BlockHeight = ({ height }: { height: number }) => {
+  return (
+    <div className='block-height col-span-1'>
+      <Card title='Block height' value={height.toLocaleString()} />
+    </div>
+  );
+};
+
+export default BlockHeight;

app/components/BlocksPerTime.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  getTimestampFromNow,
+  millisecondsPerHour,
+  queryLineChartData,
+} from '../../lib/util';
+import { blocks } from '@prisma/client';
+import Card from './Card';
+
+interface BlocksPerTimeProps {
+  blocks: Pick<blocks, 'burn_block_time' | 'block_height'>[];
+}
+
+const BlocksPerTime = async ({ blocks }: BlocksPerTimeProps) => {
+  const data = (await queryLineChartData('BlocksPerHour')) as {
+    hour: Date;
+    blocks: number;
+  }[];
+  const startTimestamp = getTimestampFromNow(millisecondsPerHour) / 1000;
+  const blocksInLastHour = blocks.filter(
+    (b) => b.burn_block_time >= startTimestamp
+  );
+  return (
+    <div className='blocks-per-time col-span-2'>
+      <Card
+        title='Blocks in the last hour'
+        value={blocksInLastHour.length.toLocaleString()}
+        data={data}
+        x='hour'
+        y='blocks'
+      />
+    </div>
+  );
+};
+
+export default BlocksPerTime;

app/components/Card.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import LineChart from './Charts/LineChart';
+
+interface CardProps {
+  title: string;
+  value: string;
+  data?: any[];
+  x?: string;
+  y?: string;
+}
+
+const Card = ({ title, value, data, x, y }: CardProps) => {
+  return (
+    <div className='card flex h-full items-center justify-center rounded-lg border border-gray-700 bg-[#081115] p-6 shadow-lg'>
+      <div className='flex w-full flex-col items-center justify-between md:flex-row'>
+        <div className='min-w-0 flex-1'>
+          <div className='flex items-center space-x-4'>
+            <div className='flex-1 overflow-hidden'>
+              <h2 className='text-lg font-bold leading-tight text-gray-400'>
+                {title}
+              </h2>
+              {value !== 'NaN' && (
+                <p className='mt-1 flex justify-center overflow-hidden text-xl font-semibold text-indigo-600 md:justify-normal'>
+                  {value}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+        {data && (
+          <div className='mt-4 min-w-0 flex-1 md:mt-0'>
+            <LineChart data={data} xLabel={x} yLabel={y} tooltipTitle={title} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Card;

app/components/CardsGridLayout.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface CardsGridLayoutProps {
+  children: React.ReactNode;
+}
+
+const CardsGridLayout = ({ children }: CardsGridLayoutProps) => {
+  return (
+    <div className='cards-grid-layout grid h-full w-[95%] grid-cols-1 gap-2 md:grid-cols-[repeat(6,_minmax(100px,1fr))]'>
+      {children}
+    </div>
+  );
+};
+
+export default CardsGridLayout;