[Dashboard] move onramp countries page

Author: gregfromstl

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/client/provider.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+
+export type OnrampProvider = "stripe" | "coinbase" | "transak";
+
+export const ProviderSelector: React.FC<{ activeProvider: OnrampProvider }> = ({
+  activeProvider,
+}) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useDashboardRouter();
+
+  const createPageURL = useCallback(
+    (provider: OnrampProvider) => {
+      const params = new URLSearchParams(searchParams || undefined);
+      params.set("provider", provider);
+      return `${pathname}?${params.toString()}`;
+    },
+    [pathname, searchParams],
+  );
+
+  const providers: OnrampProvider[] = ["coinbase", "stripe", "transak"];
+
+  return (
+    <div className="flex flex-row gap-2">
+      {providers.map((p) => (
+        <Button
+          key={p}
+          size="sm"
+          variant={activeProvider === p ? "default" : "outline"}
+          onClick={() => router.replace(createPageURL(p))}
+          className="capitalize"
+        >
+          {p}
+        </Button>
+      ))}
+    </div>
+  );
+};

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/server/countries-table.tsx

@@ -0,0 +1,43 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { getOnrampCountrySupport } from "../../../../utils";
+import type { OnrampProvider } from "../client/provider";
+
+export async function CountriesTable(props: { provider: OnrampProvider }) {
+  const data = await getOnrampCountrySupport(props.provider);
+  const countries = data.supportedCountries;
+
+  return (
+    <TableContainer className="overflow-hidden rounded-xl border border-border/50 bg-card/50 shadow-sm transition-all">
+      <Table>
+        <TableHeader className="z-0">
+          <TableRow className="border-border/50 border-b bg-muted/50">
+            <TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
+              Country
+            </TableHead>
+            <TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
+              Currencies
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {countries.map((country) => (
+            <TableRow key={country.code} className="hover:bg-accent/50">
+              <TableCell className="font-medium">{country.name}</TableCell>
+              <TableCell className="text-muted-foreground">
+                {country.currencies.join(", ")}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/page.tsx

@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import {
+  type OnrampProvider,
+  ProviderSelector,
+} from "./components/client/provider";
+import { CountriesTable } from "./components/server/countries-table";
+
+const title = "Onramp Country Support";
+const description = "Countries and currencies supported by onramp providers.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+  },
+};
+
+export default async function OnrampCountriesPage(props: {
+  searchParams: Promise<{ provider?: OnrampProvider }>;
+}) {
+  const searchParams = await props.searchParams;
+  const activeProvider: OnrampProvider =
+    (searchParams.provider as OnrampProvider) || "coinbase";
+
+  return (
+    <section className="container mx-auto flex h-full flex-col px-4 py-10">
+      <header className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-col gap-2">
+            <h1 className="font-semibold text-4xl tracking-tighter lg:text-5xl">
+              Onramp Countries
+            </h1>
+          </div>
+          <div className="flex flex-row items-end gap-4 lg:flex-col">
+            <div className="flex w-full flex-row items-center gap-4">
+              <ProviderSelector activeProvider={activeProvider} />
+            </div>
+          </div>
+        </div>
+      </header>
+      <div className="h-10" />
+      <CountriesTable provider={activeProvider} />
+    </section>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/types/onramp-country.ts

@@ -0,0 +1,17 @@
+export type OnrampCountryToken = {
+  chainId: number;
+  address: string;
+  symbol: string;
+};
+
+export type OnrampCountryDetails = {
+  code: string;
+  name: string;
+  currencies: string[];
+  tokens: OnrampCountryToken[];
+};
+
+export type OnrampCountrySupport = {
+  provider: "stripe" | "coinbase" | "transak";
+  supportedCountries: OnrampCountryDetails[];
+};

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts

@@ -68,3 +68,25 @@ export async function getRoutes({
 
   return routes;
 }
+
+export async function getOnrampCountrySupport(
+  provider: "stripe" | "coinbase" | "transak",
+) {
+  const url = new URL(
+    `${NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST}/v1/onramp/countries`,
+  );
+  url.searchParams.set("provider", provider);
+  const res = await fetch(url.toString(), {
+    headers: {
+      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
+    },
+    next: { revalidate: 60 * 60 },
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch onramp countries");
+  }
+
+  const json = await res.json();
+  return json.data as import("./types/onramp-country").OnrampCountrySupport;
+}