feat: transactions

consolelabs · May 16, 2024 · 5993e5f · 5993e5f
1 parent 336915c
commit 5993e5f
Show file tree

Hide file tree

Showing 37 changed files with 4,220 additions and 121 deletions.
diff --git a/app/[server]/page.tsx b/app/[server]/page.tsx
@@ -8,8 +8,6 @@ import Image from "next/image";
 import { Button, Typography } from "@mochi-ui/core";
 import { PlusLine, VaultSolid } from "@mochi-ui/icons";
 import { Highlights } from "@/components/overview/highlights";
-import { About } from "@/components/overview/about";
-import { BountyTable } from "@/components/overview/bounty-table";
 import Link from "next/link";
 import { ROUTES } from "@/constants/routes";
 import { useParams } from "next/navigation";
@@ -96,11 +94,9 @@ const Overview = () => {
             </Button>
           </div>
         </div>
-        <div className="flex flex-col py-6">
+        <div className="flex flex-col">
           <Highlights />
         </div>
-        <About />
-        <BountyTable />
       </div>
       <div className="mt-auto">
         <Footer />

diff --git a/components/amount.tsx b/components/amount.tsx
@@ -0,0 +1,144 @@
+import { MonikerIcons } from "@/constants/tokens";
+import { Avatar, Typography } from "@mochi-ui/core";
+import clsx from "clsx";
+import { SVGProps } from "react";
+
+interface AmountProps {
+  value: string;
+  valueUsd?: string;
+  tokenIcon?: string;
+  platformIcon?: string | ((props: SVGProps<SVGSVGElement>) => JSX.Element);
+  unit?: string;
+  approxMoniker?: string;
+  className?: string;
+  size?: "sm" | "base" | "md" | "lg";
+  //      14      16      24     32
+  isMultipleTokens?: boolean;
+  isMoniker?: boolean;
+  alignment?: "left" | "center";
+  inline?: boolean;
+}
+
+const titleSize: any = {
+  sm: "h9",
+  base: "h7",
+  md: "h5",
+  lg: "h4",
+};
+
+const subtitleSize: any = {
+  sm: "p6",
+  base: "p6",
+  md: "p6",
+  lg: "p5",
+};
+
+const iconSize: any = {
+  sm: 16,
+  base: 16,
+  md: 24,
+  lg: 32,
+};
+
+export default function Amount({
+  value,
+  valueUsd,
+  tokenIcon = "",
+  platformIcon,
+  unit,
+  approxMoniker,
+  className = "",
+  size = "md",
+  isMultipleTokens = false,
+  alignment = "center",
+  isMoniker,
+  inline = false,
+}: AmountProps) {
+  const isLongNumber = value.length >= 12;
+
+  return (
+    <div
+      style={{
+        gridTemplateColumns: `${iconSize[size]}px minmax(0, 1fr)`,
+        gridTemplateRows: !isLongNumber
+          ? "minmax(0, 1fr) min-content"
+          : `${iconSize[size]}px minmax(0, 1fr) min-content`,
+      }}
+      className={clsx("shrink-0 gap-x-2 font-medium text-left", className, {
+        grid: !inline,
+        "inline-grid": inline,
+        "gap-y-1.5 grid-cols-1": isLongNumber,
+      })}
+    >
+      <div className="h-8 flex items-center">
+        {isMoniker ? (
+          <div className="my-auto flex justify-center items-center w-7 h-7 rounded-full border border-[#E5E4E3]">
+            <span className="text-sm">{MonikerIcons.get(tokenIcon)}</span>
+          </div>
+        ) : (
+          <Avatar
+            size={size === "lg" || size === "md" ? "xs" : "xxs"}
+            className={clsx("shrink-0 aspect-square [&>img]:rounded-none", {
+              /* 'my-1': size === 'md' && alignment === 'center' && !isLongNumber, */
+              "row-start-1 row-span-2 my-auto":
+                alignment === "left" && !isLongNumber,
+              "mx-auto": isLongNumber,
+            })}
+            src={tokenIcon}
+            smallSrc={platformIcon}
+          />
+        )}
+      </div>
+      <div
+        className={clsx("flex gap-x-1 items-center", {
+          "flex-col items-center": isLongNumber,
+        })}
+      >
+        <Typography
+          level={titleSize[size]}
+          className="!leading-[1] font-mono"
+          fontWeight="md"
+        >
+          {value}
+        </Typography>
+        <Typography
+          level={titleSize[size]}
+          className="!leading-[1] font-mono"
+          fontWeight="md"
+        >
+          {unit}
+        </Typography>
+      </div>
+      {(valueUsd || isMultipleTokens) && (
+        <div
+          className={clsx({
+            "col-start-1 col-span-2 text-center":
+              alignment === "center" && !isLongNumber,
+            "col-start-2 col-span-1": alignment === "left" && !isLongNumber,
+            "text-center": isLongNumber,
+          })}
+        >
+          {isMultipleTokens && (
+            <Typography
+              level={subtitleSize[size]}
+              color="textSecondary"
+              fontWeight="md"
+              className="font-mono"
+            >
+              and other tokens
+            </Typography>
+          )}
+          <Typography
+            level={subtitleSize[size]}
+            fontWeight="md"
+            color="textTertiary"
+            className="font-mono"
+          >
+            {approxMoniker} {valueUsd?.startsWith("<") ? "" : <>&asymp;</>}{" "}
+            {valueUsd}
+          </Typography>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/overview/highlights.tsx b/components/overview/highlights.tsx
@@ -21,6 +21,11 @@ import {
 import utc from "dayjs/plugin/utc";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import dayjs from "dayjs";
+import { Transactions } from "./transactions";
+import { useState } from "react";
+import { About } from "./about";
+import { BountyTable } from "./bounty-table";
+import ChartColumn from "@/public/svg/chart-column.svg";
 dayjs.extend(utc);
 dayjs.extend(advancedFormat);
 
@@ -220,53 +225,72 @@ function NoteCard(props: Extract<Link, { type: "NOTE" }>) {
 
 export function Highlights() {
   const { data } = useServerInfo();
+  const [selectedtab, setSelectedTab] = useState("home");
 
   return (
-    <Tabs defaultValue="home">
-      <TabList>
-        <TabTrigger value="home">
-          <BinocularSolid />
-          Home
-        </TabTrigger>
-        <TabTrigger value="token">
-          <DollarSquareSolid />
-          Token
-        </TabTrigger>
-        <TabTrigger value="bounty">
-          <TrophySolid />
-          Bounty
-        </TabTrigger>
-      </TabList>
-      <div className="py-6">
-        <TabContent value="home" className="grid grid-cols-3 grid-rows-2 gap-4">
-          {data?.links.map((l, i) => {
-            let Card: (args: any) => JSX.Element = () => <></>;
-            switch (l.type) {
-              case "LINK":
-                Card = LinkCard;
-                break;
-              case "SOCIAL_MEDIA":
-                Card = SocialCard;
-                break;
-              case "EVENT":
-                Card = EventCard;
-                break;
-              case "VIDEO":
-                Card = VideoCard;
-                break;
-              case "NOTE":
-                Card = NoteCard;
-                break;
-              default:
-                break;
-            }
+    <>
+      <Tabs value={selectedtab} onValueChange={setSelectedTab} className="py-6">
+        <TabList className="[&>div>button]:px-4 [&>div>button]:py-1.5 [&>div>button]:rounded-lg [&>div>button[data-state=active]]:bg-background-level3 [&>div>button[data-state=active]]:text-text-primary">
+          <TabTrigger value="home">
+            <BinocularSolid />
+            Home
+          </TabTrigger>
+          <TabTrigger value="token">
+            <DollarSquareSolid />
+            Token
+          </TabTrigger>
+          <TabTrigger value="bounty">
+            <TrophySolid />
+            Bounty
+          </TabTrigger>
+          <TabTrigger value="transaction">
+            <ChartColumn />
+            Transaction
+          </TabTrigger>
+        </TabList>
+        <div className="py-6">
+          <TabContent
+            value="home"
+            className="grid grid-cols-3 grid-rows-2 gap-4"
+          >
+            {data?.links.map((l, i) => {
+              let Card: (args: any) => JSX.Element = () => <></>;
+              switch (l.type) {
+                case "LINK":
+                  Card = LinkCard;
+                  break;
+                case "SOCIAL_MEDIA":
+                  Card = SocialCard;
+                  break;
+                case "EVENT":
+                  Card = EventCard;
+                  break;
+                case "VIDEO":
+                  Card = VideoCard;
+                  break;
+                case "NOTE":
+                  Card = NoteCard;
+                  break;
+                default:
+                  break;
+              }
 
-            return <Card key={`${i}-${l.type}`} {...l} />;
-          })}
-        </TabContent>
-        <TabContent value="token">token</TabContent>
-        <TabContent value="bounty">bounty</TabContent>
-      </div>
-    </Tabs>
+              return <Card key={`${i}-${l.type}`} {...l} />;
+            })}
+          </TabContent>
+          <TabContent value="token">token</TabContent>
+          <TabContent value="bounty">bounty</TabContent>
+          <TabContent value="transaction">
+            <Transactions />
+          </TabContent>
+        </div>
+      </Tabs>
+      {selectedtab !== "transaction" && (
+        <>
+          <About />
+          <BountyTable />
+        </>
+      )}
+    </>
   );
 }