indexer poc WIP

package.json

@@ -36,7 +36,8 @@
     "**/form-data": "4.0.4",
     "**/axios": "1.12.0",
     "@eslint/plugin-kit": "0.3.4",
-    "minimatch": "3.1.2"
+    "@types/react": "19.2.0",
+    "@types/react-dom": "19.2.0"
   },
   "keywords": [],
   "author": "",
@@ -46,13 +47,14 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.26.0",
+    "@headlessui/react": "^2.2.8",
+    "@headlessui/tailwindcss": "^0.2.2",
+    "@heroicons/react": "^2.2.0",
     "@next/eslint-plugin-next": "^15.3.2",
     "@offchainlabs/eslint-config-typescript": "0.2.2",
     "@offchainlabs/prettier-config": "0.3.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/node": "^22.5.0",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.10",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
     "audit-ci": "^6.3.0",
@@ -69,8 +71,7 @@
     "eslint-plugin-zustand-rules": "https://github.com/OffchainLabs/eslint-plugin-zustand-rules",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1"
+    "typescript": "^5.8.3"
   },
   "config": {
     "chromeVersion": "128.0.6613.137",

packages/app/next.config.js

@@ -3,18 +3,13 @@
 /**
  * @type {import('next').NextConfig}
  **/
-
 module.exports = {
   distDir: 'build',
   productionBrowserSourceMaps: true,
   reactStrictMode: true,
   experimental: {
     externalDir: true,
   },
-  webpack: (config) => {
-    config.externals.push('pino-pretty', 'lokijs', 'encoding');
-    return config;
-  },
   images: {
     remotePatterns: [
       {

packages/app/package.json

@@ -4,26 +4,34 @@
   "license": "UNLICENSED",
   "private": true,
   "dependencies": {
-    "next": "^14.2.32",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tippy.js": "^6.3.7",
-    "use-query-params": "^2.2.1",
+    "@arbitrum/sdk": "^4.0.3",
     "@rainbow-me/rainbowkit": "^2.2.4",
-    "react-toastify": "^9.1.1"
+    "dayjs": "^1.11.13",
+    "next": "^15.5.4",
+    "posthog-js": "^1.273.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-toastify": "^9.1.1",
+    "tailwind-merge": "^3.2.0",
+    "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.0"
+    "@headlessui/tailwindcss": "^0.2.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.16"
   },
   "scripts": {
     "predev": "yarn workspace portal fetch:data && yarn workspace arb-token-bridge-ui generateDenylist && yarn css:build:all",
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "prebuild": "yarn workspace portal fetch:data && yarn workspace arb-token-bridge-ui generateDenylist && yarn css:build:all",
-    "build": "next build",
+    "build": "next build --turbopack",
     "start": "next start",
     "css:build": "tailwindcss -c ./tailwind.config.js -i ./src/app.css -o ./src/styles/common.css --minify",
     "css:watch": "tailwindcss -c ./tailwind.config.js -i ./src/app.css -o ./src/styles/common.css --watch",
-    "css:build:all": "yarn css:build && yarn workspace arb-token-bridge-ui css:build & yarn workspace portal css:build",
-    "css:watch:all": "yarn css:watch && yarn workspace arb-token-bridge-ui css:watch & yarn workspace portal css:watch"
+    "css:build:all": "yarn css:build && yarn workspace arb-token-bridge-ui css:build && yarn workspace portal css:build",
+    "css:watch:all": "yarn css:watch && yarn workspace arb-token-bridge-ui css:watch && yarn workspace portal css:watch"
   }
 }

packages/app/src/app/(embed)/bridge/embed/buy/page.tsx

@@ -1,13 +1,9 @@
+import { SearchParamsProps } from '@/app/src/types';
 import { PathnameEnum } from '@/bridge/constants';
 
 import EmbedPageWrapper from '../EmbedPageWrapper';
 
-export default async function EmbeddedBuyPage({
-  searchParams,
-}: {
-  searchParams: {
-    [key: string]: string | string[] | undefined;
-  };
-}) {
+export default async function EmbeddedBuyPage(props: SearchParamsProps) {
+  const searchParams = await props.searchParams;
   return <EmbedPageWrapper searchParams={searchParams} redirectPath={PathnameEnum.EMBED_BUY} />;
 }

packages/app/src/app/(embed)/bridge/embed/page.tsx

@@ -1,13 +1,9 @@
+import { SearchParamsProps } from '@/app/src/types';
 import { PathnameEnum } from '@/bridge/constants';
 
 import EmbedPageWrapper from './EmbedPageWrapper';
 
-export default async function EmbededPage({
-  searchParams,
-}: {
-  searchParams: {
-    [key: string]: string | string[] | undefined;
-  };
-}) {
+export default async function EmbededPage(props: SearchParamsProps) {
+  const searchParams = await props.searchParams;
   return <EmbedPageWrapper searchParams={searchParams} redirectPath={PathnameEnum.EMBED} />;
 }

packages/app/src/app/(with-sidebar)/(portal)/arcade/page.tsx

@@ -35,10 +35,10 @@ export function generateMetadata(): Metadata {
 }
 
 type OptionalArcadePageParams = {
-  searchParams: {
+  searchParams: Promise<{
     arcadeWeekIndex?: string;
     project?: string;
-  };
+  }>;
 };
 
 // With respect to Arcade, get the current week number, so that we can show the plan accordingly
@@ -87,8 +87,8 @@ const getCurrentWeekIndex = (hardCodedWeekIndex?: number) => {
   return currentWeekIndex;
 };
 
-export default function ArcadePage(params: OptionalArcadePageParams) {
-  const currentWeekIndex = getCurrentWeekIndex(Number(params.searchParams.arcadeWeekIndex));
+export default async function ArcadePage(params: OptionalArcadePageParams) {
+  const currentWeekIndex = getCurrentWeekIndex(Number((await params.searchParams).arcadeWeekIndex));
 
   const isBeforeArcade = currentWeekIndex < 0;
   const isDuringArcade = currentWeekIndex >= 0 && currentWeekIndex < ARCADE_WEEKLY_PLAN.length;

packages/app/src/app/(with-sidebar)/(portal)/bookmarks/page.tsx

@@ -1,11 +1,4 @@
-import dynamic from 'next/dynamic';
-
-const MyProjects = dynamic(
-  () => import('@/portal/components/MyProjects').then((mod) => mod.MyProjects),
-  {
-    ssr: false,
-  },
-);
+import { MyProjects } from '@/portal/components/MyProjects';
 
 export default function Page() {
   return <MyProjects />;

packages/app/src/app/(with-sidebar)/(portal)/chains/ecosystem/page.tsx

@@ -17,8 +17,8 @@ const metadataContent = {
 };
 
 // Generate server-side metadata for this page
-export function generateMetadata(props: ServerSideAppProps): Metadata {
-  const { selectedOrbitChain } = getServerSideAppParams(props);
+export async function generateMetadata(props: ServerSideAppProps): Promise<Metadata> {
+  const { selectedOrbitChain } = await getServerSideAppParams(props);
 
   const entitySlug = selectedOrbitChain || '';
 

packages/app/src/app/(with-sidebar)/(portal)/projects/[categorySlug]/page.tsx

@@ -7,20 +7,20 @@ import { ServerSideAppProps, getServerSideAppParams } from '@/portal/common/getS
 import { CategoryPageBanner } from '@/portal/components/CategoryPageBanner';
 import { CategoryPageDescription } from '@/portal/components/CategoryPageDescription';
 import { Projects } from '@/portal/components/Projects';
-import { useFilteredProjects } from '@/portal/hooks/useFilteredProjects';
+import { getFilteredProjects } from '@/portal/hooks/useFilteredProjects';
 
 // Generate server-side metadata for this page
-export function generateMetadata(props: ServerSideAppProps): Metadata {
+export function generateMetadata(props: ServerSideAppProps): Promise<Metadata> {
   return getMetaData(props);
 }
 
-export default function Page(props: ServerSideAppProps) {
+export default async function Page(props: ServerSideAppProps) {
   const { selectedCategory, selectedSubcategories, selectedChains, selectedSort } =
-    getServerSideAppParams(props);
+    await getServerSideAppParams(props);
 
   const categoryMetaData = getCategoryDetailsById(selectedCategory);
 
-  const projects = useFilteredProjects({
+  const projects = getFilteredProjects({
     selectedCategory,
     selectedSubcategories,
     selectedChains,

packages/app/src/app/(with-sidebar)/(portal)/projects/page.tsx

@@ -1,21 +1,20 @@
 import { Metadata } from 'next';
-import React from 'react';
 
 import { getMetaData } from '@/portal/common/getMetaData';
 import { ServerSideAppProps, getServerSideAppParams } from '@/portal/common/getServerSideAppParams';
 import { Projects } from '@/portal/components/Projects';
-import { useFilteredProjects } from '@/portal/hooks/useFilteredProjects';
+import { getFilteredProjects } from '@/portal/hooks/useFilteredProjects';
 
 // Generate server-side metadata for this page
-export function generateMetadata(props: ServerSideAppProps): Metadata {
+export function generateMetadata(props: ServerSideAppProps): Promise<Metadata> {
   return getMetaData(props);
 }
 
-export default function ProjectsPage(props: ServerSideAppProps) {
+export default async function ProjectsPage(props: ServerSideAppProps) {
   const { selectedCategory, selectedSubcategories, selectedChains, selectedSort } =
-    getServerSideAppParams(props);
+    await getServerSideAppParams(props);
 
-  const projects = useFilteredProjects({
+  const projects = getFilteredProjects({
     selectedCategory,
     selectedSubcategories,
     selectedChains,

packages/app/src/app/(with-sidebar)/(portal)/search/[searchSlug]/page.tsx

@@ -6,12 +6,12 @@ import { ServerSideAppProps, getServerSideAppParams } from '@/portal/common/getS
 import { FullPageSearchResults } from '@/portal/components/FullPageSearchResults';
 
 // Generate server-side metadata for this page
-export function generateMetadata(props: ServerSideAppProps): Metadata {
+export function generateMetadata(props: ServerSideAppProps): Promise<Metadata> {
   return getMetaData(props);
 }
 
-export default function SearchPage(props: ServerSideAppProps) {
-  const { searchString } = getServerSideAppParams(props);
+export default async function SearchPage(props: ServerSideAppProps) {
+  const { searchString } = await getServerSideAppParams(props);
 
   const searchResults = getSearchResults(searchString);
 

packages/app/src/app/(with-sidebar)/bridge/buy/page.tsx

@@ -1,19 +1,17 @@
 import { Metadata } from 'next';
 
+import { SearchParamsProps } from '@/app/src/types';
 import { PathnameEnum } from '@/bridge/constants';
 
 import BridgePageWrapper from '../BridgePageWrapper';
 
-type Props = {
-  searchParams: { [key: string]: string | string[] | undefined };
-};
-
 export const metadata: Metadata = {
   title: 'On-Ramp to Arbitrum',
   description:
     "On-ramp directly to Arbitrum with one of several third party providers. Built to scale Ethereum, Arbitrum brings you 10x lower costs while inheriting Ethereum's security model. Arbitrum is a Layer 2 Optimistic Rollup.",
 };
 
-export default async function BridgeBuyPage({ searchParams }: Props) {
+export default async function BridgeBuyPage(props: SearchParamsProps) {
+  const searchParams = await props.searchParams;
   return <BridgePageWrapper searchParams={searchParams} redirectPath={PathnameEnum.BUY} />;
 }

packages/app/src/app/(with-sidebar)/bridge/page.tsx

@@ -1,16 +1,14 @@
 import type { Metadata } from 'next';
 
+import { SearchParamsProps } from '@/app/src/types';
 import { PORTAL_DOMAIN, PathnameEnum } from '@/bridge/constants';
 import { ChainKeyQueryParam, getChainForChainKeyQueryParam } from '@/bridge/types/ChainQueryParam';
 import { isNetwork } from '@/bridge/util/networks';
 
 import BridgePageWrapper from './BridgePageWrapper';
 
-type Props = {
-  searchParams: { [key: string]: string | string[] | undefined };
-};
-
-export async function generateMetadata({ searchParams }: Props): Promise<Metadata> {
+export async function generateMetadata(props: SearchParamsProps): Promise<Metadata> {
+  const searchParams = await props.searchParams;
   const sourceChainSlug = (
     typeof searchParams.sourceChain === 'string' ? searchParams.sourceChain : 'ethereum'
   ) as ChainKeyQueryParam;
@@ -70,6 +68,7 @@ export async function generateMetadata({ searchParams }: Props): Promise<Metadat
   };
 }
 
-export default async function BridgePage({ searchParams }: Props) {
+export default async function BridgePage(props: SearchParamsProps) {
+  const searchParams = await props.searchParams;
   return <BridgePageWrapper searchParams={searchParams} redirectPath={PathnameEnum.BRIDGE} />;
 }

packages/app/src/types.ts

@@ -0,0 +1,5 @@
+export type SearchParamsProps = {
+  searchParams: Promise<{
+    [key: string]: string | string[] | undefined;
+  }>;
+};