diff --git a/src/components/invoice-creator.tsx b/src/components/invoice-creator.tsx index 44fb227c..3aae045a 100644 --- a/src/components/invoice-creator.tsx +++ b/src/components/invoice-creator.tsx @@ -1,6 +1,6 @@ "use client"; -import { InvoiceForm } from "@/components/invoice-form"; +import { InvoiceForm } from "@/components/invoice-form/invoice-form"; import { InvoicePreview } from "@/components/invoice-preview"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { generateInvoiceNumber } from "@/lib/helpers/client"; diff --git a/src/components/invoice-form/blocks/payment-currency-selector.tsx b/src/components/invoice-form/blocks/payment-currency-selector.tsx new file mode 100644 index 00000000..921fd344 --- /dev/null +++ b/src/components/invoice-form/blocks/payment-currency-selector.tsx @@ -0,0 +1,116 @@ +import { Label } from "@/components/ui/label"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + type InvoiceCurrency, + formatCurrencyLabel, +} from "@/lib/constants/currencies"; +import { api } from "@/trpc/react"; +import { Loader2 } from "lucide-react"; + +interface PaymentCurrencySelectorProps { + onChange: (value: string) => void; + targetCurrency: InvoiceCurrency; + network: string; +} + +export function PaymentCurrencySelector({ + onChange, + targetCurrency, + network, +}: PaymentCurrencySelectorProps) { + const { + data: conversionData, + isLoading, + error, + refetch, + } = api.currency.getConversionCurrencies.useQuery({ + targetCurrency, + network, + }); + + if (isLoading) { + return ( +
+ + +
+ ); + } + + if (error) { + return ( +
+ + +

+ Failed to load payment currencies: {error.message} +

+

+ {" "} + or refresh the page. +

+
+ ); + } + + const conversionRoutes = conversionData?.conversionRoutes || []; + + if (conversionRoutes.length === 0) { + return ( +
+ + +

+ No payment currencies are available for {targetCurrency} on {network} +

+
+ ); + } + + return ( +
+ + +
+ ); +} diff --git a/src/components/invoice-form.tsx b/src/components/invoice-form/invoice-form.tsx similarity index 97% rename from src/components/invoice-form.tsx rename to src/components/invoice-form/invoice-form.tsx index 4385cb18..0819a76c 100644 --- a/src/components/invoice-form.tsx +++ b/src/components/invoice-form/invoice-form.tsx @@ -26,7 +26,6 @@ import { MAINNET_CURRENCIES, type MainnetCurrency, formatCurrencyLabel, - getPaymentCurrenciesForInvoice, } from "@/lib/constants/currencies"; import type { InvoiceFormValues } from "@/lib/schemas/invoice"; import type { @@ -40,11 +39,13 @@ import { useCallback, useEffect, useState } from "react"; import type { UseFormReturn } from "react-hook-form"; import { useFieldArray } from "react-hook-form"; import { toast } from "sonner"; -import { Alert, AlertDescription, AlertTitle } from "./ui/alert"; +import { Alert, AlertDescription, AlertTitle } from "../ui/alert"; +import { PaymentCurrencySelector } from "./blocks/payment-currency-selector"; // Constants const PAYMENT_DETAILS_POLLING_INTERVAL = 30000; // 30 seconds in milliseconds const BANK_ACCOUNT_APPROVAL_TIMEOUT = 60000; // 1 minute timeout for bank account approval +const DEFAULT_NETWORK = "sepolia"; type RecurringFrequency = "DAILY" | "WEEKLY" | "MONTHLY" | "YEARLY"; @@ -896,22 +897,11 @@ export function InvoiceForm({ {/* Only show payment currency selector for USD invoices */} {form.watch("invoiceCurrency") === "USD" && (
- - + form.setValue("paymentCurrency", value)} + targetCurrency="USD" + network={DEFAULT_NETWORK} + /> {form.formState.errors.paymentCurrency && (

{form.formState.errors.paymentCurrency.message} diff --git a/src/server/index.ts b/src/server/index.ts index 5364df09..64442c73 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -1,5 +1,6 @@ import { authRouter } from "./routers/auth"; import { complianceRouter } from "./routers/compliance"; +import { currencyRouter } from "./routers/currency"; import { invoiceRouter } from "./routers/invoice"; import { invoiceMeRouter } from "./routers/invoice-me"; import { paymentRouter } from "./routers/payment"; @@ -15,6 +16,7 @@ export const appRouter = router({ compliance: complianceRouter, recurringPayment: recurringPaymentRouter, subscriptionPlan: subscriptionPlanRouter, + currency: currencyRouter, }); export type AppRouter = typeof appRouter; diff --git a/src/server/routers/currency.ts b/src/server/routers/currency.ts new file mode 100644 index 00000000..ed6d9cbd --- /dev/null +++ b/src/server/routers/currency.ts @@ -0,0 +1,64 @@ +import { apiClient } from "@/lib/axios"; +import { TRPCError } from "@trpc/server"; +import type { AxiosResponse } from "axios"; +import axios from "axios"; +import { z } from "zod"; +import { publicProcedure, router } from "../trpc"; + +export type ConversionCurrency = { + id: string; + symbol: string; + decimals: number; + address: string; + type: "ERC20" | "ETH" | "ISO4217"; + network: string; +}; + +export interface GetConversionCurrenciesResponse { + currencyId: string; + network: string; + conversionRoutes: ConversionCurrency[]; +} + +export const currencyRouter = router({ + getConversionCurrencies: publicProcedure + .input( + z.object({ + targetCurrency: z.string(), + network: z.string(), + }), + ) + .query(async ({ input }): Promise => { + const { targetCurrency, network } = input; + + try { + const response: AxiosResponse = + await apiClient.get( + `v2/currencies/${targetCurrency}/conversion-routes?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 conversion currencies", + }); + } + }), +});