chore: migrate next to app router

components/home/ChartBox/index.tsx → app/(home)/_components/ChartBox/index.tsx

@@ -1,9 +1,11 @@
+'use client';
+
 import { PropsType, ValidDaysFilter } from './Chart.type';
 import { useState } from 'react';
 import { daysFilter } from './Chart.helper';
 import dynamic from 'next/dynamic';
 
-const Chart = dynamic(() => import('components/home/ChartBox/Chart'), {
+const Chart = dynamic(() => import('./Chart'), {
   ssr: false,
 });
 

app/(home)/_components/RecentSwaps/index.tsx

@@ -0,0 +1,34 @@
+import Table from 'components/common/Table';
+import { getLastSwaps } from 'services';
+import { Timer } from '../Timer';
+
+const RecentSwaps = async () => {
+  const lastSwaps = await getLastSwaps();
+
+  return (
+    <div className="pt-[17.68rem] md:pt-[14.68rem] flex justify-center">
+      <div className="w-[calc(100%-3.125rem)] md:container mt-30  md:mt-[3.125rem] rounded-normal bg-baseForeground px-15 py-20 md:p-35 overflow-hidden">
+        <div className="flex flex-col">
+          <div className="flex justify-between  md:mb-25 items-start">
+            <div className="flex flex-col justify-center items-start">
+              <h2 className="text-14 md:text-28 font-semibold text-primary-500">
+                Recent Swaps
+              </h2>
+              <p className="text-12 md:text-16 text-neutral-800">
+                Latest 25 swaps on Rango
+              </p>
+            </div>
+            <div className="flex items-center pt-10">
+              <Timer />
+            </div>
+          </div>
+          <div>
+            <Table data={lastSwaps} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RecentSwaps;

app/(home)/_components/Timer/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import refreshLatestSwaps from 'app/actions';
+import RefreshButton from 'components/common/RefreshButton';
+import { useEffect, useState } from 'react';
+
+const REFRESH_TIME = 30;
+
+export const Timer = () => {
+  const [second, setSecond] = useState(REFRESH_TIME);
+  const [isRefreshInProgress, setIsRefreshInProgress] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      if (second > 0) {
+        setSecond(second - 1);
+      } else {
+        setSecond(REFRESH_TIME);
+        handleRefresh();
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [second]);
+
+  const handleRefresh = () => {
+    setIsRefreshInProgress(true);
+    refreshLatestSwaps();
+    setSecond(REFRESH_TIME);
+  };
+
+  return (
+    <>
+      <RefreshButton
+        elapsedTime={REFRESH_TIME - second}
+        isRefreshInProgress={isRefreshInProgress}
+        handleRefreshInProgressEnd={() => setIsRefreshInProgress(false)}
+        handleClick={handleRefresh}
+      />
+      <span className="text-10 md:text-14 text-neutral-400">
+        Refresh in {second > 9 ? second : `0${second}`} seconds
+      </span>
+    </>
+  );
+};

app/(home)/page.tsx

@@ -0,0 +1,31 @@
+import SearchBox from 'components/common/SearchBox';
+import { Metadata } from 'next';
+import { getSummary } from 'services';
+import Summary from './_components/Summary';
+import ChartBox from './_components/ChartBox';
+import RecentSwaps from './_components/RecentSwaps';
+
+export const metadata: Metadata = {
+  title: 'Rango Exchange Explorer',
+};
+
+export default async function HomePage() {
+  const summary = await getSummary();
+
+  return (
+    <div>
+      <div className="flex flex-col items-center relative bg-baseBackground h-[595px] md:h-[662px]">
+        <SearchBox />
+        <div className="w-[calc(100%-3.125rem)] md:container bg-neutral-500 absolute p-20 md:p-[40px] pr-0 md:pr-0 flex flex-col-reverse  md:flex-row  justify-between bottom-0 rounded-normal translate-y-[50%]">
+          <div className="w-full md:w-[36%]">
+            <Summary summary={summary} />
+          </div>
+          <div className="w-full h-full md:w-[64%]">
+            <ChartBox data={summary.dailyInterval} />
+          </div>
+        </div>
+      </div>
+      <RecentSwaps />
+    </div>
+  );
+}

app/actions.ts

@@ -0,0 +1,8 @@
+'use server';
+
+import { revalidateTag } from 'next/cache';
+import { GET_LAST_SWAPS_TAG } from 'services';
+
+export default async function refreshLatestSwaps() {
+  revalidateTag(GET_LAST_SWAPS_TAG);
+}

app/error.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import Image from 'next/image';
+import errorImage from 'public/img/error.png';
+
+const ReloadButton = dynamic(() => import('components/common/ReloadButton'), {
+  ssr: false,
+});
+
+const Error = () => {
+  return (
+    <div className="flex flex-col py-[75px] md:py-[120px] items-center">
+      <div className="w-full relative">
+        <Image
+          priority
+          rel="preload"
+          src={errorImage}
+          className="max-w-[240px] md:max-w-max md:w-auto mx-auto"
+          alt="error"
+        />
+      </div>
+      <div className="text-18 md:text-45 mt-30 md:mt-50 text-primary-500 font-semibold">
+        Sorry, something went wrong
+      </div>
+      <div className="text-14 md:text-20 w-[80%] text-center mt-10 md:mt-5 text-neutral-800">
+        An unexpected error has occurred. If reloading the page does not fix it,
+        please contact Rango support.
+      </div>
+      <ReloadButton />
+    </div>
+  );
+};
+
+export default Error;