feat: implement payment destination page, wip

src/app/payment-destination/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { ChainCurrencySelector } from "@/components/chain-currency-selector";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CHAIN_TO_ID } from "@/lib/constants/chains";
+import { TRPCReactProvider } from "@/trpc/react";
+import { useAppKit, useAppKitAccount } from "@reown/appkit/react";
+import { LogOut, Wallet } from "lucide-react";
+import { useState } from "react";
+
+function PaymentDestinationContent() {
+  const { open } = useAppKit();
+  const { address, isConnected } = useAppKitAccount();
+
+  const [chainId, setChainId] = useState<number>(CHAIN_TO_ID.SEPOLIA);
+  const [tokenAddress, setTokenAddress] = useState<string | undefined>(
+    undefined,
+  );
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.info({
+      walletAddress: address,
+      chainId,
+      tokenAddress,
+    });
+  };
+
+  return (
+    <div className="min-h-screen p-8 bg-background">
+      <div className="max-w-2xl mx-auto space-y-6">
+        <h1 className="text-3xl font-bold">Payment Destination</h1>
+
+        {/* Wallet Connection */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Wallet Connection</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {isConnected ? (
+              <>
+                <div className="space-y-2">
+                  <div className="text-sm font-medium">Connected Address</div>
+                  <div className="p-3 bg-muted rounded-md font-mono text-sm break-all">
+                    {address}
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => open()}
+                  className="flex items-center gap-2"
+                >
+                  <LogOut className="h-4 w-4" />
+                  Manage Wallet
+                </Button>
+              </>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-6 space-y-4">
+                <p className="text-sm text-muted-foreground text-center">
+                  Please connect your wallet to continue
+                </p>
+                <Button onClick={() => open()} size="lg">
+                  <Wallet className="mr-2 h-4 w-4" />
+                  Connect Wallet
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Chain and Currency Selection */}
+        {isConnected && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Payment Details</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <ChainCurrencySelector
+                  chainId={chainId}
+                  tokenAddress={tokenAddress}
+                  onChainChange={(newChainId) => {
+                    setChainId(newChainId);
+                    setTokenAddress(undefined);
+                  }}
+                  onTokenChange={setTokenAddress}
+                />
+
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={!tokenAddress}
+                >
+                  Submit
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function PaymentDestinationPage() {
+  return (
+    <TRPCReactProvider cookies="">
+      <PaymentDestinationContent />
+    </TRPCReactProvider>
+  );
+}

src/components/chain-currency-selector.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CHAIN_TO_ID, ID_TO_NETWORK } from "@/lib/constants/chains";
+import { api } from "@/trpc/react";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+
+interface ChainCurrencySelectorProps {
+  chainId: number;
+  tokenAddress: string | undefined;
+  onChainChange: (chainId: number) => void;
+  onTokenChange: (address: string | undefined) => void;
+  isLoading?: boolean;
+}
+
+export function ChainCurrencySelector({
+  chainId,
+  tokenAddress,
+  onChainChange,
+  onTokenChange,
+}: ChainCurrencySelectorProps) {
+  const networkName = ID_TO_NETWORK[chainId];
+
+  const {
+    data: currenciesData,
+    isLoading,
+    isError,
+    refetch,
+  } = api.currency.getCurrenciesByNetwork.useQuery(
+    { network: networkName },
+    {
+      enabled: !!networkName,
+      staleTime: 86400000, // 1 day
+      gcTime: 86400000, // 1 day
+    },
+  );
+
+  const currencies = currenciesData?.conversionRoutes || [];
+
+  // Auto-select first token when currencies load or chain changes
+  useEffect(() => {
+    if (
+      currencies.length > 0 &&
+      !currencies.find((c) => c.address === tokenAddress)
+    ) {
+      onTokenChange(currencies[0].address);
+    }
+  }, [currencies, tokenAddress, onTokenChange]);
+
+  const chainOptions = [
+    { id: CHAIN_TO_ID.SEPOLIA, name: "Sepolia" },
+    { id: CHAIN_TO_ID.BASE, name: "Base" },
+    { id: CHAIN_TO_ID.ETHEREUM, name: "Ethereum" },
+    { id: CHAIN_TO_ID.ARBITRUM, name: "Arbitrum" },
+    { id: CHAIN_TO_ID.OPTIMISM, name: "Optimism" },
+    { id: CHAIN_TO_ID.POLYGON, name: "Polygon" },
+  ];
+
+  return (
+    <div className="space-y-4">
+      {/* Chain Selector */}
+      <div className="space-y-2">
+        <label htmlFor="chain-select" className="text-sm font-medium">
+          Chain
+        </label>
+        <Select
+          value={chainId.toString()}
+          onValueChange={(value) => onChainChange(Number(value))}
+        >
+          <SelectTrigger id="chain-select">
+            <SelectValue placeholder="Select a chain" />
+          </SelectTrigger>
+          <SelectContent>
+            {chainOptions.map((chain) => (
+              <SelectItem key={chain.id} value={chain.id.toString()}>
+                {chain.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Token Selector */}
+      <div className="space-y-2">
+        <label htmlFor="token-select" className="text-sm font-medium">
+          Token
+        </label>
+        {isLoading ? (
+          <div className="flex items-center gap-2 h-10 px-3 border rounded-md bg-background">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className="text-sm text-muted-foreground">
+              Loading tokens...
+            </span>
+          </div>
+        ) : isError ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 h-10 px-3 border border-destructive rounded-md bg-background">
+              <span className="text-sm text-destructive">
+                Something went wrong
+              </span>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => refetch()}
+            >
+              Retry
+            </Button>
+          </div>
+        ) : currencies.length === 0 ? (
+          <div className="flex items-center gap-2 h-10 px-3 border rounded-md bg-background">
+            <span className="text-sm text-muted-foreground">
+              No tokens available
+            </span>
+          </div>
+        ) : (
+          <Select value={tokenAddress} onValueChange={onTokenChange}>
+            <SelectTrigger id="token-select">
+              <SelectValue placeholder="Select a token" />
+            </SelectTrigger>
+            <SelectContent>
+              {currencies.map((currency) => (
+                <SelectItem key={currency.id} value={currency.address}>
+                  {currency.symbol}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function isChainCurrencySelectorLoading(chainId: number): boolean {
+  const networkName = ID_TO_NETWORK[chainId];
+  const { isLoading } = api.currency.getCurrenciesByNetwork.useQuery(
+    { network: networkName },
+    {
+      enabled: !!networkName,
+      staleTime: 86400000,
+      gcTime: 86400000,
+    },
+  );
+  return isLoading;
+}

src/lib/constants/chains.ts

@@ -16,6 +16,15 @@ export const CHAIN_TO_ID = {
   POLYGON: 137,
 };
 
+export const ID_TO_NETWORK: Record<number, string> = {
+  137: "matic",
+  8453: "base",
+  42161: "arbitrum-one",
+  10: "optimism",
+  1: "mainnet",
+  11155111: "sepolia",
+};
+
 export const NETWORK_TO_ID = {
   matic: 137,
   base: 8453,

src/server/routers/currency.ts

@@ -14,6 +14,7 @@ export type ConversionCurrency = {
   network: string;
 };
 
+// TODO: Rename this to just Currency as it's used for both conversion routes and general currencies
 export interface GetConversionCurrenciesResponse {
   currencyId: string;
   network: string;
@@ -61,4 +62,41 @@ export const currencyRouter = router({
         });
       }
     }),
+  getCurrenciesByNetwork: publicProcedure
+    .input(
+      z.object({
+        network: z.string(),
+      }),
+    )
+    .query(async ({ input }): Promise<GetConversionCurrenciesResponse> => {
+      const { network } = input;
+
+      try {
+        const response: AxiosResponse<GetConversionCurrenciesResponse> =
+          await apiClient.get(`v2/currencies?network=${network}`);
+
+        return response.data;
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          const statusCode = error.response?.status;
+          const code =
+            statusCode === 404
+              ? "NOT_FOUND"
+              : statusCode === 400
+                ? "BAD_REQUEST"
+                : "INTERNAL_SERVER_ERROR";
+
+          throw new TRPCError({
+            code,
+            message: error.response?.data?.message || error.message,
+            cause: error,
+          });
+        }
+
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to fetch currencies",
+        });
+      }
+    }),
 });