diff --git a/pages/dev/counter.js b/pages/dev/counter.js
new file mode 100644
index 0000000..c8fe396
--- /dev/null
+++ b/pages/dev/counter.js
@@ -0,0 +1,72 @@
+import Footer from '@/components/Footer'
+import Header from '@/components/Header'
+import Head from 'next/head'
+import { useEffect, useState } from 'react';
+import { Box, Container, Flex, Heading, useColorMode } from 'theme-ui'
+
+function currentAmount(startTime, untilYesterday, lastDay) {
+ const elapsed = Date.now() - startTime;
+ const fullDay = 1000 * 60 * 60 * 24;
+ const additional = elapsed / fullDay * lastDay;
+
+ return untilYesterday + additional;
+}
+
+export default function Counter({ untilYesterday, lastDay, startTime, initialValue }) {
+ const [transactionAmount, setTransactionAmount] = useState(initialValue);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTransactionAmount(currentAmount(startTime, untilYesterday, lastDay));
+ }, 50);
+ return () => clearInterval(interval);
+ }, []);
+ return (
+ <>
+
+ Counter
+
+
+
+
+ Total Transaction Volume (24h delay)
+
+ {new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ }).format(transactionAmount / 100)}
+
+
+
+
+
+
+ )
+}
+
+export async function getServerSideProps() {
+ // const stats = await fetch("https://hcb.hackclub.com/stats").then(res => res.json());
+
+ // const total = stats.all.transactions_volume;
+ // const lastDay = stats.last_day.transactions_volume;
+
+ const total = 3857174281;
+ const lastDay = 11919761;
+ const date = "2025-01-14T19:23:07.650+00:00";
+
+ const untilYesterday = total - lastDay;
+ const startTime = new Date(date).getTime();
+
+ return {
+ props: {
+ untilYesterday,
+ lastDay,
+ startTime,
+ initialValue: currentAmount(startTime, untilYesterday, lastDay)
+ }
+ }
+}
\ No newline at end of file