feat: unique users by protocols and filters (#3)

.gitignore

@@ -37,6 +37,7 @@ next-env.d.ts
 
 # Local Database
 sqlite.db
+sqlite.db-*
 
 # Chainhooks
 chainhooks.production.json

README.md

@@ -31,3 +31,11 @@ fly deploy --remote-only
 ```
 
 Finally upload the chainhooks predicates file `chainhooks.production.json` to the [Hiro platform](https://platform.hiro.so/) for your project.
+
+## Download the production database locally
+
+```bash
+flyctl ssh issue --agent
+flyctl proxy 10022:22
+scp -r -P 10022 root@localhost:/data  /your/local/path/where/to/copy/data
+```

package.json

@@ -30,6 +30,7 @@
     "next": "14.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "recharts": "2.12.3",
     "sharp": "0.33.2",
     "tailwind-merge": "2.2.1",
     "tailwindcss-animate": "1.0.7",

src/app/page.tsx

@@ -1,13 +1,19 @@
+import { UniqueUsersBarChart } from "@/components/Stats/UniqueUsersBarChart";
 import { TransactionRow } from "@/components/Transaction/TransactionRow";
 import { getTransactions, getTransactionsStats } from "@/db/transactions";
 import { Card, Container, Heading, Separator, Text } from "@radix-ui/themes";
-import { Fragment } from "react";
+import { Fragment, Suspense } from "react";
 
 export const dynamic = "force-dynamic";
+// TODO
+// Cache the page for 60 seconds
+// export const revalidate = 60;
 
 export default async function HomePage() {
-  const transactions = await getTransactions();
-  const stats = await getTransactionsStats();
+  const [transactions, stats] = await Promise.all([
+    getTransactions(),
+    getTransactionsStats(),
+  ]);
 
   return (
     <Container size="2" className="px-4 pb-10 pt-5">
@@ -30,6 +36,10 @@ export default async function HomePage() {
         </Card>
       </div>
 
+      <Suspense>
+        <UniqueUsersBarChart />
+      </Suspense>
+
       <div className="mt-10">
         <Heading as="h2" size="3" color="gray">
           Transactions