[WIP] Pay Dashboard

package.json

@@ -31,10 +31,12 @@
     "@emotion/styled": "^11.11.5",
     "@hookform/resolvers": "^3.6.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -84,6 +86,7 @@
     "qrcode": "^1.5.3",
     "react": "18.3.1",
     "react-children-utilities": "^2.10.0",
+    "react-day-picker": "^8.10.1",
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.51.4",

src/@/components/ui/CopyAddressButton.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { Button } from "./button";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+import { ToolTipLabel } from "./tooltip";
+
+export function CopyAddressButton(props: {
+  address: string;
+  className?: string;
+  iconClassName?: string;
+  variant?:
+    | "primary"
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost";
+}) {
+  const [isCopied, setIsCopied] = useState(false);
+  const shortenedAddress = `${props.address.slice(0, 6)}...${props.address.slice(0, 4)}`;
+
+  return (
+    <ToolTipLabel label="Copy address">
+      <Button
+        variant={props.variant || "outline"}
+        aria-label="Copy"
+        className={cn(
+          "h-auto w-auto px-2.5 py-1.5 flex gap-2 text-xs rounded-lg font-mono text-foreground",
+          props.className,
+        )}
+        onClick={() => {
+          navigator.clipboard.writeText(props.address);
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 1000);
+        }}
+      >
+        {isCopied ? (
+          <CheckIcon
+            className={cn("size-3 text-green-500", props.iconClassName)}
+          />
+        ) : (
+          <CopyIcon
+            className={cn("size-3 text-muted-foreground", props.iconClassName)}
+          />
+        )}
+        {shortenedAddress}
+      </Button>
+    </ToolTipLabel>
+  );
+}

src/@/components/ui/DatePickerWithRange.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import * as React from "react";
+import { format, isBefore } from "date-fns";
+import {
+  Calendar as CalendarIcon,
+  CalendarX2Icon,
+  ChevronDownIcon,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { TabButtons } from "./tabs";
+import { DynamicHeight } from "./DynamicHeight";
+
+export function DatePickerWithRange(props: {
+  from: Date;
+  to: Date;
+  setFrom: (from: Date) => void;
+  setTo: (to: Date) => void;
+  className?: string;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  labelOverride?: string;
+}) {
+  const [screen, setScreen] = React.useState<"from" | "to">("from");
+  const { from, to, setFrom, setTo } = props;
+
+  const isValid = React.useMemo(() => isBefore(from, to), [from, to]);
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className={cn("grid gap-2", props.className)}>
+      <Popover
+        open={isOpen}
+        onOpenChange={(v) => {
+          if (!v) {
+            setScreen("from");
+          }
+          setIsOpen(v);
+        }}
+      >
+        {/* Button */}
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "min-w-[200px] justify-start text-left font-normal gap-1",
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {props.labelOverride || (
+              <>
+                {format(from, "LLL dd, y")} - {format(to, "LLL dd, y")}
+              </>
+            )}
+            <ChevronDownIcon className="h-4 w-4 ml-auto" />
+          </Button>
+        </PopoverTrigger>
+
+        {/* Popover */}
+        <PopoverContent className="w-auto p-0" align="start">
+          <DynamicHeight>
+            <div>
+              {!isValid && (
+                <p className="text-sm pt-2 justify-center text-destructive-foreground text-center flex items-center gap-2">
+                  <CalendarX2Icon className="h-4 w-4" />
+                  Invalid date range
+                </p>
+              )}
+              {props.header}
+
+              <div className="px-4">
+                <TabButtons
+                  tabClassName="!text-sm"
+                  activeTabClassName="!bg-inverted !text-inverted-foreground"
+                  tabContainerClassName="gap-2"
+                  tabs={[
+                    {
+                      name: "From",
+                      onClick: () => setScreen("from"),
+                      isActive: screen === "from",
+                      isEnabled: true,
+                    },
+                    {
+                      name: "To",
+                      onClick: () => setScreen("to"),
+                      isActive: screen === "to",
+                      isEnabled: true,
+                    },
+                  ]}
+                />
+              </div>
+
+              {screen === "from" && (
+                <Calendar
+                  key={from.toString()}
+                  mode="range"
+                  selected={{
+                    from,
+                    to,
+                  }}
+                  defaultMonth={from}
+                  onDayClick={(newFrom) => {
+                    if (isBefore(newFrom, to)) {
+                      setFrom(newFrom);
+                    }
+                  }}
+                  classNames={{
+                    day_range_start: "!bg-inverted",
+                    day_range_end:
+                      "!bg-inverted/20 !text-inverted pointer-events-none",
+                  }}
+                />
+              )}
+
+              {screen === "to" && (
+                <Calendar
+                  key={to.toString()}
+                  mode="range"
+                  selected={{
+                    from,
+                    to,
+                  }}
+                  defaultMonth={to}
+                  onDayClick={(newTo) => {
+                    if (isBefore(from, newTo)) {
+                      setTo(newTo);
+                    }
+                  }}
+                  classNames={{
+                    day_range_end: "!bg-inverted",
+                    day_range_start:
+                      "!bg-inverted/20 !text-inverted pointer-events-none",
+                  }}
+                />
+              )}
+              {props.footer}
+            </div>
+          </DynamicHeight>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

src/@/components/ui/DynamicHeight.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable react/forbid-dom-props */
+"use client";
+
+import React, { useState, useRef, useLayoutEffect } from "react";
+
+export function DynamicHeight(props: {
+  children: React.ReactNode;
+  maxHeight?: string;
+  transition?: string;
+}) {
+  const { height, elementRef } = useHeightObserver();
+
+  return (
+    <div
+      style={{
+        height: height ? `${height}px` : "auto",
+        transition:
+          props.transition ||
+          "height 210ms cubic-bezier(0.175, 0.885, 0.32, 1.1)",
+        overflow: "hidden",
+        boxSizing: "border-box",
+      }}
+    >
+      <div
+        ref={elementRef}
+        style={{
+          maxHeight: props.maxHeight,
+        }}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+export function useHeightObserver() {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | undefined>();
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      setHeight(element.scrollHeight);
+    });
+
+    resizeObserver.observe(element);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [elementRef]);
+
+  return { height, elementRef };
+}

src/@/components/ui/ScrollShadow/ScrollShadow.tsx

@@ -9,6 +9,7 @@ export function ScrollShadow(props: {
   children: React.ReactNode;
   className?: string;
   scrollableClassName?: string;
+  disableTopShadow?: boolean;
 }) {
   const scrollableEl = useRef<HTMLDivElement>(null);
   const shadowTopEl = useRef<HTMLDivElement>(null);
@@ -79,6 +80,7 @@ export function ScrollShadow(props: {
         ref={shadowTopEl}
         style={{
           opacity: "0",
+          display: props.disableTopShadow ? "none" : "block",
         }}
       ></div>
       <div

src/@/components/ui/aspect-ratio.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

src/@/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 leading-4",
   {
     variants: {
       variant: {
@@ -14,7 +14,10 @@ const badgeVariants = cva(
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        warning: "border-transparent bg-warning text-warning-foreground",
         outline: "text-foreground",
+        success:
+          "border-transparent bg-success text-success-foreground hover:bg-success/80",
       },
     },
     defaultVariants: {

src/@/components/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const buttonVariants = cva(
+export const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {