Skip to content

fix: client id creation, fetching of routes and dark mode issues #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bassgeta merged 2 commits into from
Oct 14, 2025
Merged

fix: client id creation, fetching of routes and dark mode issues #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de93678
fix: send undefined for client id fee and fee address instead of null
bassgeta Oct 13, 2025
b1313a2
fix: dark mode issues
bassgeta Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--popover: 0 0% 98%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
Expand All @@ -27,15 +27,15 @@
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
Expand All @@ -53,7 +53,7 @@
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%
--chart-5: 340 75% 55%;
}
}
@layer base {
Expand Down
68 changes: 34 additions & 34 deletions src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,68 +6,68 @@ export default async function NotFound() {
const { user } = await getCurrentSession();

return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 px-6">
<div className="min-h-screen flex flex-col items-center justify-center bg-background px-6">
<div className="max-w-2xl w-full text-center">
<div className="mb-8">
<div className="w-16 h-16 rounded-xl bg-black flex items-center justify-center mx-auto mb-6">
<span className="text-white font-bold text-xl">EI</span>
<div className="w-16 h-16 rounded-xl bg-foreground flex items-center justify-center mx-auto mb-6">
<span className="text-background font-bold text-xl">EI</span>
</div>
</div>

<div className="mb-8">
<h1 className="text-8xl font-bold text-gray-900 mb-4">404</h1>
<h1 className="text-8xl font-bold text-foreground mb-4">404</h1>
<div className="flex items-center justify-center gap-2 mb-4">
<Wallet className="w-5 h-5 text-gray-600" />
<span className="text-lg font-medium text-gray-700">
<Wallet className="w-5 h-5 text-muted-foreground" />
<span className="text-lg font-medium text-foreground">
Page Not Found
</span>
</div>
<p className="text-gray-600 mb-2">
<p className="text-muted-foreground mb-2">
The page you're looking for doesn't exist or may have been moved.
</p>
<p className="text-gray-600">
<p className="text-muted-foreground">
Your account and invoices remain secure.
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<Link
href="/payouts"
className="shadow-md group p-6 bg-white rounded-lg border border-gray-200 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
className="shadow-md group p-6 bg-card rounded-lg border border-border hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
<div className="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
<DollarSign className="w-6 h-6 text-blue-600" />
<div className="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50 transition-colors">
<DollarSign className="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<h3 className="font-semibold text-gray-900 mb-2">Payouts</h3>
<p className="text-sm text-gray-600">
<h3 className="font-semibold text-card-foreground mb-2">Payouts</h3>
<p className="text-sm text-muted-foreground">
Single, batch or recurring payouts
</p>
</Link>

{user ? (
<Link
href="/invoices/create"
className="shadow-md group p-6 bg-white rounded-lg border border-gray-200 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
className="shadow-md group p-6 bg-card rounded-lg border border-border hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
<div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 transition-colors">
<Zap className="w-6 h-6 text-purple-600" />
<div className="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 dark:group-hover:bg-purple-900/50 transition-colors">
<Zap className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<h3 className="font-semibold text-gray-900 mb-2">
<h3 className="font-semibold text-card-foreground mb-2">
Create Invoice
</h3>
<p className="text-sm text-gray-600">
<p className="text-sm text-muted-foreground">
Start a new payment request
</p>
</Link>
) : (
<div className="shadow-md p-6 bg-white rounded-lg border border-gray-200 opacity-75 cursor-not-allowed">
<div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mx-auto mb-4">
<Lock className="w-6 h-6 text-gray-500" />
<div className="shadow-md p-6 bg-card rounded-lg border border-border opacity-75 cursor-not-allowed">
<div className="w-12 h-12 rounded-lg bg-muted flex items-center justify-center mx-auto mb-4">
<Lock className="w-6 h-6 text-muted-foreground" />
</div>
<h3 className="font-semibold text-gray-900 mb-2">
<h3 className="font-semibold text-card-foreground mb-2">
Sign in to create invoices
</h3>
<p className="text-sm text-gray-600">
<p className="text-sm text-muted-foreground">
Start a new payment request
</p>
</div>
Expand All @@ -76,27 +76,27 @@ export default async function NotFound() {
{user ? (
<Link
href="/subscription-plans"
className="shadow-md group p-6 bg-white rounded-lg border border-gray-200 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
className="shadow-md group p-6 bg-card rounded-lg border border-border hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
<div className="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mx-auto mb-4 group-hover:bg-green-200 transition-colors">
<FileText className="w-6 h-6 text-green-600" />
<div className="w-12 h-12 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center mx-auto mb-4 group-hover:bg-green-200 dark:group-hover:bg-green-900/50 transition-colors">
<FileText className="w-6 h-6 text-green-600 dark:text-green-400" />
</div>
<h3 className="font-semibold text-gray-900 mb-2">
<h3 className="font-semibold text-card-foreground mb-2">
Subscription Plans
</h3>
<p className="text-sm text-gray-600">
<p className="text-sm text-muted-foreground">
Manage your subscription plans
</p>
</Link>
) : (
<div className="shadow-md p-6 bg-white rounded-lg border border-gray-200 opacity-75 cursor-not-allowed">
<div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mx-auto mb-4">
<Lock className="w-6 h-6 text-gray-500" />
<div className="shadow-md p-6 bg-card rounded-lg border border-border opacity-75 cursor-not-allowed">
<div className="w-12 h-12 rounded-lg bg-muted flex items-center justify-center mx-auto mb-4">
<Lock className="w-6 h-6 text-muted-foreground" />
</div>
<h3 className="font-semibold text-gray-900 mb-2">
<h3 className="font-semibold text-card-foreground mb-2">
Sign in to manage subscription plans
</h3>
<p className="text-sm text-gray-600">
<p className="text-sm text-muted-foreground">
View and manage your subscription options
</p>
</div>
Expand All @@ -105,7 +105,7 @@ export default async function NotFound() {

<Link
href="/dashboard"
className="inline-flex items-center gap-2 px-6 py-3 bg-black text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground font-medium rounded-lg hover:bg-primary/90 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
<Home className="w-4 h-4" />
Back to Dashboard
Expand Down
2 changes: 1 addition & 1 deletion src/components/payment-route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function PaymentRoute({
if (isDirectPayment) {
return {
bgColor: "bg-primary/10",
textColor: "text-primary-foreground",
textColor: "text-primary",
icon: <ArrowRight className="w-3 h-3 mr-1" />,
};
}
Expand Down
8 changes: 4 additions & 4 deletions src/lib/invoice-status.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,18 +75,18 @@ export const getPaymentSectionStatusClass = (
status: (typeof requestStatusEnum.enumValues)[number],
) => {
if (status === "paid" || status === "crypto_paid") {
return "bg-green-100 text-green-800";
return "bg-success/10 text-success-foreground";
}

if (status === "offramp_failed") {
return "bg-red-100 text-red-800";
return "bg-destructive/10 text-destructive";
}

if (status.includes("offramp") || status === "processing") {
return "bg-orange-100 text-orange-800";
return "bg-warning/10 text-warning-foreground";
}

return "bg-blue-100 text-blue-800";
return "bg-primary/10 text-primary";
};

/**
Expand Down
19 changes: 12 additions & 7 deletions src/lib/schemas/ecommerce.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,27 @@ const baseEcommerceClientApiSchema = z.object({
domain: z.string().url(),
feeAddress: z
.string()
.transform((val) => (val === "" ? undefined : val))
.optional()
.transform((val) => {
if (val === undefined || val === "") return undefined;
return val;
})
.refine((value) => {
if (value === undefined) return true;
return isEthereumAddress(value);
}, "Invalid Ethereum address format")
.optional(),
}, "Invalid Ethereum address format"),
feePercentage: z
.string()
.transform((val) => (val === "" ? undefined : val))
.optional()
.transform((val) => {
if (val === undefined || val === "") return undefined;
return val;
})
.refine((value) => {
if (value === undefined) return true;
const num = Number(value);

return !Number.isNaN(num) && num >= 0 && num <= 100;
}, "Fee percentage must be a number between 0 and 100")
.optional(),
}, "Fee percentage must be a number between 0 and 100"),
});

export const ecommerceClientApiSchema =
Expand Down
4 changes: 2 additions & 2 deletions src/server/routers/ecommerce.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ export const ecommerceRouter = router({
const response = await apiClient.post("v2/client-ids", {
label: input.label,
allowedDomains: [input.domain],
feePercentage: input.feePercentage ?? null,
feeAddress: input.feeAddress ?? null,
feePercentage: input.feePercentage ?? undefined,
feeAddress: input.feeAddress ?? undefined,
});

if (!response.data.clientId) {
Expand Down
12 changes: 9 additions & 3 deletions src/server/routers/invoice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,9 +447,15 @@ export const invoiceRouter = router({
.query(async ({ input }) => {
const { requestId, walletAddress } = input;

const response = await apiClient.get(
`/v2/request/${requestId}/routes?wallet=${walletAddress}&feePercentage=${process.env.FEE_PERCENTAGE_FOR_PAYMENT}&feeAddress=${process.env.FEE_ADDRESS_FOR_PAYMENT}`,
);
let url = `/v2/request/${requestId}/routes?wallet=${walletAddress}`;

if (
process.env.FEE_PERCENTAGE_FOR_PAYMENT &&
process.env.FEE_ADDRESS_FOR_PAYMENT
) {
url += `&feePercentage=${process.env.FEE_PERCENTAGE_FOR_PAYMENT}&feeAddress=${process.env.FEE_ADDRESS_FOR_PAYMENT}`;
}
const response = await apiClient.get(url);

if (response.status !== 200) {
throw new TRPCError({
Expand Down