fix for mobile views

MattPereira · May 22, 2024 · 8587f23 · 8587f23
1 parent a8fb3ae
commit 8587f23
Show file tree

Hide file tree

Showing 12 changed files with 230 additions and 241 deletions.
diff --git a/packages/nextjs/app/builders/[address]/page.tsx b/packages/nextjs/app/builders/[address]/page.tsx
@@ -49,44 +49,40 @@ const BuilderDetails: NextPage<PageProps> = ({ params }) => {
   const { withdrawalsCount, totalWithdrawals, streamCap, streamContracts, date } = data.builder;
 
   return (
-    <section className="overflow-x-auto ">
-      <div className="flex justify-center ">
-        <div className="flex flex-col justify-center items-center gap-10 my-14 max-w-[1000px]">
-          <Address size="3xl" address={params.address} />
-
-          <StatsShowcase
-            data={[
-              { label: "Monthly Cap", value: customFormatEther(streamCap) },
-              { label: "Withdrawals", value: withdrawalsCount },
-              {
-                label: "Average",
-                value:
-                  withdrawalsCount > 0
-                    ? customFormatEther(BigInt(totalWithdrawals) / BigInt(withdrawalsCount))
-                    : "0.00",
-              },
-              {
-                label: "Total",
-                value: customFormatEther(totalWithdrawals),
-              },
-            ]}
-          />
+    <section className="flex flex-col justify-center lg:items-center gap-10 my-14 text-center">
+      <div className="flex justify-center">
+        <Address size="3xl" address={params.address} />
+      </div>
 
-          <div className="text-2xl">
-            {streamContracts.map((contract: string) => streamDirectory[contract.toLowerCase()]?.name).join(", ")} since{" "}
-            {timestampToFormattedDate(date)}
-          </div>
+      <StatsShowcase
+        data={[
+          { label: "Monthly Cap", value: customFormatEther(streamCap) },
+          { label: "Withdrawals", value: withdrawalsCount },
+          {
+            label: "Average",
+            value:
+              withdrawalsCount > 0 ? customFormatEther(BigInt(totalWithdrawals) / BigInt(withdrawalsCount)) : "0.00",
+          },
+          {
+            label: "Total",
+            value: customFormatEther(totalWithdrawals),
+          },
+        ]}
+      />
 
-          <Withdrawals withdrawals={data?.withdrawals?.items} />
-        </div>
+      <div className="text-xl md:text-2xl">
+        {streamContracts.map((contract: string) => streamDirectory[contract.toLowerCase()]?.name).join(", ")} since{" "}
+        {timestampToFormattedDate(date)}
       </div>
+
+      <Withdrawals withdrawals={data?.withdrawals?.items} />
     </section>
   );
 };
 
 const Withdrawals = ({ withdrawals }: { withdrawals: Withdrawal[] }) => {
   return (
-    <div>
+    <div className="max-w-[1000px]">
       <div className="overflow-x-auto w-full border border-neutral-600 rounded-xl">
         <table className="table text-xl">
           <thead>

diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
@@ -6,7 +6,7 @@ import { gql, useQuery } from "@apollo/client";
 import type { NextPage } from "next";
 import { formatEther } from "viem";
 import { Address } from "~~/components/scaffold-eth";
-import { SkeletonLoader, Table, TableControls } from "~~/components/streamogator";
+import { PageTitle, PaginationControls, SkeletonLoader, Table } from "~~/components/streamogator";
 import { type Builder } from "~~/types/streamogator";
 import { streamDirectory, timestampToIsoDate } from "~~/utils/helpers";
 
@@ -31,7 +31,7 @@ const BUILDERS = gql`
   }
 `;
 
-const BuilderTotals: NextPage = () => {
+const Builders: NextPage = () => {
   const [afterCursor, setAfterCursor] = useState<string | null>(null);
   const [cursorHistory, setCursorHistory] = useState<string[]>([]);
   const [orderDirection, setOrderDirection] = useState<"asc" | "desc">("desc");
@@ -87,67 +87,64 @@ const BuilderTotals: NextPage = () => {
   ];
 
   return (
-    <section className="flex justify-center">
-      <div className="flex flex-col justify-center items-center gap-10 my-14">
-        <div className="relative">
-          <div className="absolute left-0 text-5xl mt-1">🏗️</div>
-          <h1 className="text-6xl mb-0 font-paytone px-16">Builders</h1>
-        </div>
-        <div className="text-2xl">Sort by column name and select a builder to see their full details</div>
-
-        <div>
-          {loading ? (
-            <div className="w-[954px] h-[602px]">
-              <SkeletonLoader />
-            </div>
-          ) : (
-            <Table
-              setOrderDirection={toggleOrderDirection}
-              orderDirection={orderDirection}
-              orderBy={orderBy}
-              headers={headers}
-              hrefPrefix={"/builders/"}
-              rows={data.builders.items.map((builder: Builder) => {
-                const builderAddress = <Address disableAddressLink size="xl" address={builder.id} key={builder.id} />;
-                const startDate = timestampToIsoDate(builder.date);
-                const averageWithdrawalAmount =
-                  builder.withdrawalsCount > 0
-                    ? `Ξ ${Number(
-                        formatEther(BigInt(builder.totalWithdrawals) / BigInt(builder.withdrawalsCount)),
-                      ).toFixed(2)}`
-                    : "Ξ 0.00";
-                const streamCap = `Ξ ${Number(formatEther(builder.streamCap)).toFixed(2)}`;
-                const totalWithdrawals = `Ξ ${Number(formatEther(builder.totalWithdrawals)).toFixed(2)}`;
-                const streamContracts = builder.streamContracts
-                  .map(contract => streamDirectory[contract.toLowerCase()]?.name)
-                  .join(", ");
-                return [
-                  builder.id,
-                  builderAddress,
-                  startDate,
-                  builder.withdrawalsCount,
-                  averageWithdrawalAmount,
-                  totalWithdrawals,
-                  streamCap,
-                  streamContracts || "N/A",
-                  ,
-                ];
-              })}
-            />
-          )}
-
-          <TableControls
-            limit={limit}
-            setLimit={setLimit}
-            loadPreviousItems={loadPreviousItems}
-            loadNextItems={loadNextItems}
-            cursorHistory={cursorHistory}
-            hasNextPage={data?.builders?.pageInfo?.hasNextPage}
+    <section className="flex flex-col justify-center lg:items-center gap-10 my-14">
+      <PageTitle
+        title="Builders"
+        emoji="🏗️"
+        description="Sort by column name and select a builder to see the full details"
+      />
+      <div className="max-w-[1111px]">
+        {loading ? (
+          <div className="w-[1109px] h-[602px]">
+            <SkeletonLoader />
+          </div>
+        ) : (
+          <Table
+            setOrderDirection={toggleOrderDirection}
+            orderDirection={orderDirection}
+            orderBy={orderBy}
+            headers={headers}
+            hrefPrefix={"/builders/"}
+            rows={data.builders.items.map((builder: Builder) => {
+              const builderAddress = <Address disableAddressLink size="xl" address={builder.id} key={builder.id} />;
+              const startDate = timestampToIsoDate(builder.date);
+              const averageWithdrawalAmount =
+                builder.withdrawalsCount > 0
+                  ? `Ξ ${Number(
+                      formatEther(BigInt(builder.totalWithdrawals) / BigInt(builder.withdrawalsCount)),
+                    ).toFixed(2)}`
+                  : "Ξ 0.00";
+              const streamCap = `Ξ ${Number(formatEther(builder.streamCap)).toFixed(2)}`;
+              const totalWithdrawals = `Ξ ${Number(formatEther(builder.totalWithdrawals)).toFixed(2)}`;
+              const streamContracts = builder.streamContracts
+                .map(contract => streamDirectory[contract.toLowerCase()]?.name)
+                .join(", ");
+              return [
+                builder.id,
+                builderAddress,
+                startDate,
+                builder.withdrawalsCount,
+                averageWithdrawalAmount,
+                totalWithdrawals,
+                streamCap,
+                streamContracts || "N/A",
+                ,
+              ];
+            })}
           />
-        </div>
+        )}
+
+        <PaginationControls
+          limit={limit}
+          setLimit={setLimit}
+          loadPreviousItems={loadPreviousItems}
+          loadNextItems={loadNextItems}
+          cursorHistory={cursorHistory}
+          hasNextPage={data?.builders?.pageInfo?.hasNextPage}
+        />
       </div>
     </section>
   );
 };
 
-export default BuilderTotals;
+export default Builders;
diff --git a/packages/nextjs/app/charts/page.tsx b/packages/nextjs/app/charts/page.tsx
@@ -69,7 +69,7 @@ const ChartDisplay = ({ data }: { data: any }) => {
   const labels = data.streams.items.map((stream: any) => stream.name);
 
   return (
-    <div className="w-[888px]">
+    <div className="w-[333px] lg:w-[888px]">
       <div className="mb-10">
         <Bar
           options={options}

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import type { NextPage } from "next";
+import { PageTitle } from "~~/components/streamogator/";
 
 const PAGES = [
   {
@@ -31,15 +32,12 @@ const PAGES = [
 
 const Home: NextPage = () => {
   return (
-    <section className="flex justify-center px-10">
+    <section className="flex justify-center">
       <div className="flex flex-col justify-center items-center gap-14 my-14">
-        <div className="relative">
-          <div className="mt-2 absolute left-0 text-5xl">🐊</div>
-          <h1 className="text-6xl mb-0 font-paytone px-16">StreamoGator</h1>
-        </div>
-        <div className="text-2xl">
-          🕵️ Data analytics for all Buidl Guidl stream contracts deployed on Ethereum and Optimism
-        </div>
+        <PageTitle
+          title="StreamoGator"
+          description="🕵️ Data analytics for all Buidl Guidl stream cohorts deployed on Ethereum and Optimism"
+        />
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
           {PAGES.map(item => (
@@ -49,7 +47,7 @@ const Home: NextPage = () => {
               href={item.href}
               passHref
             >
-              <h3 className="text-4xl font-bold mb-10">{item.title}</h3>
+              <h3 className="text-4xl font-bold mb-7">{item.title}</h3>
               <div className="text-8xl mb-10">{item.emoji}</div>
               <p className="text-xl mb-0">{item.description}</p>
             </Link>

diff --git a/packages/nextjs/app/streams/[address]/page.tsx b/packages/nextjs/app/streams/[address]/page.tsx
@@ -65,35 +65,27 @@ const StreamDetails: NextPage<PageProps> = ({ params }) => {
   if (error) return <div className="text-red-500 text-center my-10">Error : {error.message}</div>;
 
   return (
-    <section className="overflow-x-auto ">
-      <div className="flex justify-center ">
-        <div className="flex flex-col justify-center items-center gap-10 my-14 max-w-[1000px]">
-          <div className="flex flex-col justify-center items-center gap-3">
-            <div className="text-5xl font-paytone">{data.stream.name}</div>
-          </div>
+    <section className="flex flex-col justify-center lg:items-center gap-10 my-14 text-center">
+      <div className="text-4xl md:text-5xl font-paytone">{data.stream.name}</div>
+      <StatsShowcase
+        data={[
+          { label: "Builders", value: data.stream.buildersCount },
+          { label: "Withdrawals", value: data.stream.withdrawalsCount },
+          { label: "Total", value: customFormatEther(data.stream.totalWithdrawals) },
+        ]}
+      />
 
-          <StatsShowcase
-            data={[
-              { label: "Builders", value: data.stream.buildersCount },
-              { label: "Withdrawals", value: data.stream.withdrawalsCount },
-              { label: "Total", value: customFormatEther(data.stream.totalWithdrawals) },
-            ]}
-          />
-
-          <div className="flex flex-wrap gap-2 text-2xl">
-            <Address size="2xl" address={params.address} /> deployed on{" "}
-            {timestampToFormattedDate(data.stream.timestamp)}
-          </div>
-          <Withdrawals withdrawals={data?.withdrawals?.items} />
-        </div>
+      <div className="flex flex-wrap justify-center gap-2 text-2xl">
+        <Address size="2xl" address={params.address} /> deployed on {timestampToFormattedDate(data.stream.timestamp)}
       </div>
+      <Withdrawals withdrawals={data?.withdrawals?.items} />
     </section>
   );
 };
 
 const Withdrawals = ({ withdrawals }: { withdrawals: Withdrawal[] }) => {
   return (
-    <div>
+    <div className="max-w-[1000px]">
       <div className="overflow-x-auto w-full border border-neutral-600 rounded-xl">
         <table className="table text-xl">
           <thead>

diff --git a/packages/nextjs/app/streams/page.tsx b/packages/nextjs/app/streams/page.tsx
@@ -6,7 +6,7 @@ import { gql, useQuery } from "@apollo/client";
 import type { NextPage } from "next";
 import { formatEther } from "viem";
 import { Address } from "~~/components/scaffold-eth";
-import { SkeletonLoader, Table } from "~~/components/streamogator";
+import { PageTitle, SkeletonLoader, Table } from "~~/components/streamogator";
 import { type Stream } from "~~/types/streamogator";
 import { timestampToIsoDate } from "~~/utils/helpers";
 
@@ -57,40 +57,33 @@ const Streams: NextPage = () => {
   ];
 
   return (
-    <section className="flex justify-center">
-      <div className="flex flex-col justify-center items-center gap-10 my-14">
-        <div className="relative">
-          <div className="absolute left-0 text-5xl mt-2">🏞️</div>
-          <h1 className="text-6xl mb-0 font-paytone px-16">Streams</h1>
-        </div>
-        <div className="text-2xl">Sort by column name and select a stream to see more details</div>
+    <section className="flex flex-col justify-center lg:items-center gap-10 my-14">
+      <PageTitle title="Streams" emoji="🏞️" description="Sort by column name and select a stream to see more details" />
+      <div>
+        {loading ? (
+          <div className="w-[1052px] h-[762px]">
+            <SkeletonLoader />
+          </div>
+        ) : (
+          <Table
+            setOrderDirection={toggleOrderDirection}
+            orderDirection={orderDirection}
+            orderBy={orderBy}
+            headers={headers}
+            hrefPrefix={"/streams"}
+            rows={data?.streams?.items.map((stream: Stream) => {
+              const address = <Address disableAddressLink size="lg" address={stream.id} />;
+              const name = stream.name;
+              const start = timestampToIsoDate(Number(stream.timestamp));
+              const buildersCount = stream.buildersCount;
+              const withdrawalsCount = stream.withdrawalsCount;
+              const totalWithdrawals = `Ξ ${Number(formatEther(stream.totalWithdrawals)).toFixed(2)}`;
+              const chainId = stream.chainId;
 
-        <div>
-          {loading ? (
-            <div className="w-[1052px] h-[602px]">
-              <SkeletonLoader />
-            </div>
-          ) : (
-            <Table
-              setOrderDirection={toggleOrderDirection}
-              orderDirection={orderDirection}
-              orderBy={orderBy}
-              headers={headers}
-              hrefPrefix={"/streams"}
-              rows={data?.streams?.items.map((stream: Stream) => {
-                const address = <Address disableAddressLink size="lg" address={stream.id} />;
-                const name = stream.name;
-                const start = timestampToIsoDate(Number(stream.timestamp));
-                const buildersCount = stream.buildersCount;
-                const withdrawalsCount = stream.withdrawalsCount;
-                const totalWithdrawals = `Ξ ${Number(formatEther(stream.totalWithdrawals)).toFixed(2)}`;
-                const chainId = stream.chainId;
-
-                return [stream.id, name, address, start, buildersCount, withdrawalsCount, totalWithdrawals, chainId];
-              })}
-            />
-          )}
-        </div>
+              return [stream.id, name, address, start, buildersCount, withdrawalsCount, totalWithdrawals, chainId];
+            })}
+          />
+        )}
       </div>
     </section>
   );