Skip to content

fix: design polish for yield demo #146

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
madeleine-c merged 2 commits into from
Feb 25, 2026
Merged

fix: design polish for yield demo #146

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
309c292
fix: design polish for yield demo cards, headers, and transaction his…
madeleine-c Feb 25, 2026
614560f
fix: handle millisecond timestamps in transaction history
madeleine-c Feb 25, 2026
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
14 changes: 0 additions & 14 deletions examples/privy-next-yield-demo/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,6 @@ button, a, input, select, textarea {
text-sm leading-5 cursor-pointer;
}

.button {
@apply flex flex-row items-center
px-3 py-2 gap-3 cursor-pointer
bg-white border border-[#E2E3F0] rounded-xl
text-[#040217] font-normal text-base leading-6
hover:bg-gray-50 hover:border-gray-300
focus:bg-gray-50 focus:border-gray-300
active:bg-gray-100
focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2
transition-all duration-200 ease-in-out
disabled:opacity-50 disabled:cursor-not-allowed
box-border;
}

.text-primary {
@apply text-[#5B4FFF];
}
Expand Down
16 changes: 8 additions & 8 deletions examples/privy-next-yield-demo/src/components/FeeRecipientCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ export function FeeRecipientCard() {

if (isLoading) {
return (
<div className="rounded-2xl p-6 bg-white">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Vault Info</h3>
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Vault info</h3>
<div className="space-y-3">
<div className="h-6 w-24 bg-white/50 rounded animate-pulse" />
<div className="h-8 w-32 bg-white/50 rounded animate-pulse" />
Expand All @@ -62,26 +62,26 @@ export function FeeRecipientCard() {

if (error) {
return (
<div className="rounded-2xl p-6 bg-white">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Vault Info</h3>
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Vault info</h3>
<p className="text-sm text-[#991B1B]">{error}</p>
</div>
);
}

if (!vaultInfo || !vaultId) {
return (
<div className="rounded-2xl p-6 bg-white">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Vault Info</h3>
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Vault info</h3>
<p className="text-sm text-[#64668B]">Vault not configured</p>
</div>
);
}

return (
<div className="rounded-2xl p-6 bg-white">
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<div className="flex items-start justify-between mb-4">
<h3 className="text-lg font-semibold text-[#040217]">Vault Info</h3>
<h3 className="text-lg font-semibold text-[#040217]">Vault info</h3>
</div>

<div>
Expand Down
16 changes: 8 additions & 8 deletions examples/privy-next-yield-demo/src/components/PositionDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ export function PositionDisplay({ walletId }: { walletId?: string } = {}) {

if (isLoading) {
return (
<div className="rounded-2xl p-6 bg-white">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Your Position</h3>
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Your position</h3>
<div className="space-y-3">
<div className="h-6 w-32 bg-white/50 rounded animate-pulse" />
<div className="h-10 w-40 bg-white/50 rounded animate-pulse" />
Expand All @@ -75,17 +75,17 @@ export function PositionDisplay({ walletId }: { walletId?: string } = {}) {

if (error) {
return (
<div className="rounded-2xl p-6 bg-white">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Your Position</h3>
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Your position</h3>
<p className="text-sm text-[#991B1B]">{error}</p>
</div>
);
}

if (!position || !vaultId) {
return (
<div className="rounded-2xl p-6 bg-white">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Your Position</h3>
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">Your position</h3>
<p className="text-sm text-[#64668B]">
{!vaultId ? 'Vault not configured' : 'No active position'}
</p>
Expand All @@ -94,9 +94,9 @@ export function PositionDisplay({ walletId }: { walletId?: string } = {}) {
}

return (
<div className="rounded-2xl p-6 bg-white">
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<div className="flex items-start justify-between mb-4">
<h3 className="text-lg font-semibold text-[#040217]">Your Position</h3>
<h3 className="text-lg font-semibold text-[#040217]">Your position</h3>
</div>

<div className="space-y-4">
Expand Down
105 changes: 46 additions & 59 deletions examples/privy-next-yield-demo/src/components/TransactionHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { useEffect, useState, useCallback } from "react";
import { usePrivy } from "@privy-io/react-auth";
import { formatUSDC, truncateAddress } from "@/lib/constants";
import { formatUSDC } from "@/lib/constants";

interface Transaction {
id: string;
Expand All @@ -17,45 +17,37 @@ interface Transaction {
updated_at: number;
}

function formatTimestamp(unixSeconds: number): string {
const date = new Date(unixSeconds * 1000);
return date.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
});
}

function TypeBadge({ type }: { type: string }) {
const isDeposit = type === "deposit";
return (
<span
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
isDeposit
? "bg-[#DCFCE7] text-[#135638]"
: "bg-[#FEE2E2] text-[#991B1B]"
}`}
>
{isDeposit ? "Deposit" : "Withdrawal"}
</span>
);
function formatTimestamp(timestamp: number): string {
// Handle both seconds and milliseconds: if > 1e12, it's already ms
const ms = timestamp > 1e12 ? timestamp : timestamp * 1000;
const date = new Date(ms);
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const year = String(date.getFullYear()).slice(-2);
const hours = date.getHours();
const minutes = String(date.getMinutes()).padStart(2, "0");
const ampm = hours >= 12 ? "PM" : "AM";
const displayHours = String(hours % 12 || 12).padStart(2, "0");
return `${month}/${day}/${year} ${displayHours}:${minutes} ${ampm}`;
}

function StatusBadge({ status }: { status: string }) {
const styles: Record<string, string> = {
pending: "bg-[#FEF3C7] text-[#906218]",
confirmed: "bg-[#DCFCE7] text-[#135638]",
failed: "bg-[#FEE2E2] text-[#991B1B]",
const config: Record<string, { style: string; label: string }> = {
pending: { style: "bg-[#FEF3C7] text-[#906218]", label: "Pending" },
confirmed: { style: "bg-[#DCFCE7] text-[#135638]", label: "Successful" },
failed: { style: "bg-[#FEE2E2] text-[#991B1B]", label: "Failed" },
};

const { style, label } = config[status] ?? {
style: "bg-[#F1F2F9] text-[#64668B]",
label: status,
};

return (
<span
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium capitalize ${
styles[status] ?? "bg-[#F1F2F9] text-[#64668B]"
}`}
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${style}`}
>
{status}
{label}
</span>
);
}
Expand Down Expand Up @@ -114,9 +106,9 @@ export function TransactionHistory({

if (isLoading) {
return (
<div className="rounded-2xl p-6 bg-white">
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">
Transaction History
Transaction history
</h3>
<div className="space-y-3">
<div className="h-12 w-full bg-white/50 rounded-xl animate-pulse" />
Expand All @@ -129,9 +121,9 @@ export function TransactionHistory({

if (error) {
return (
<div className="rounded-2xl p-6 bg-white">
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">
Transaction History
Transaction history
</h3>
<p className="text-sm text-[#991B1B]">{error}</p>
</div>
Expand All @@ -140,9 +132,9 @@ export function TransactionHistory({

if (transactions.length === 0) {
return (
<div className="rounded-2xl p-6 bg-white">
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">
Transaction History
Transaction history
</h3>
<p className="text-sm text-[#64668B]">
No transactions yet. Make a deposit or withdrawal to get started.
Expand All @@ -152,37 +144,32 @@ export function TransactionHistory({
}

return (
<div className="rounded-2xl p-6 bg-white">
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<h3 className="text-lg font-semibold text-[#040217] mb-4">
Transaction History
Transaction history
</h3>

<div className="space-y-2">
{transactions.map((tx) => {
<div>
{transactions.map((tx, index) => {
const isDeposit = tx.type === "deposit";
const sign = isDeposit ? "+" : "-";

return (
<div
key={tx.id}
className="bg-white rounded-xl p-4 border border-[#E2E3F0] flex items-center justify-between gap-3"
className={`flex items-center justify-between py-3 ${
index < transactions.length - 1
? "border-b border-[#E2E3F0]"
: ""
}`}
>
<div className="flex items-center gap-3 min-w-0">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2">
<TypeBadge type={tx.type} />
<StatusBadge status={tx.status} />
</div>
</div>
</div>

<span
className={`text-sm font-medium whitespace-nowrap ${
isDeposit ? "text-[#135638]" : "text-[#991B1B]"
}`}
>
{sign}${formatUSDC(tx.asset_amount)} USDC
<span className="text-sm font-semibold text-[#040217]">
{isDeposit ? "Deposited" : "Withdrew"} $
{formatUSDC(tx.asset_amount)} USDC
</span>
<span className="text-sm text-[#64668B]">
{formatTimestamp(tx.created_at)}
</span>
<StatusBadge status={tx.status} />
</div>
);
})}
Expand Down
4 changes: 2 additions & 2 deletions examples/privy-next-yield-demo/src/components/WalletCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,10 @@ export function WalletCard() {
};

return (
<div className="rounded-2xl p-6 bg-white">
<div className="rounded-2xl p-6 bg-white border border-[#E2E3F0]">
<div className="flex items-start justify-between mb-4">
<div>
<h2 className="text-sm font-medium text-[#64668B]">Your Wallet</h2>
<h2 className="text-sm font-medium text-[#64668B]">Your wallet</h2>
<div className="flex items-center gap-2 mt-1">
<span className="text-sm font-mono text-[#040217]">
{walletAddress ? truncateAddress(walletAddress) : 'No wallet'}
Expand Down
2 changes: 1 addition & 1 deletion examples/privy-next-yield-demo/src/components/ui/fullscreen-loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const FullScreenLoader = () => {
d="M 28.746094 0.015625 C 28.359375 0.03125 27.722656 0.0703125 27.363281 0.105469 C 22.929688 0.515625 18.730469 2.207031 15.242188 4.992188 C 10.347656 8.894531 7.28125 14.597656 6.730469 20.804688 C 6.667969 21.515625 6.648438 21.972656 6.648438 22.863281 C 6.648438 23.753906 6.667969 24.207031 6.730469 24.929688 C 7.152344 29.683594 9.066406 34.183594 12.210938 37.816406 C 13.949219 39.832031 16.046875 41.53125 18.394531 42.84375 C 18.953125 43.15625 19.9375 43.636719 20.53125 43.890625 C 22.722656 44.820312 25.042969 45.40625 27.398438 45.617188 C 28.769531 45.746094 30.207031 45.746094 31.578125 45.617188 C 35.304688 45.28125 38.875 44.035156 42.035156 41.964844 C 43.890625 40.75 45.613281 39.210938 47.058594 37.476562 C 49.902344 34.066406 51.683594 29.910156 52.1875 25.5 C 52.386719 23.769531 52.386719 21.882812 52.179688 20.144531 C 51.65625 15.714844 49.839844 11.539062 46.96875 8.132812 C 46.183594 7.207031 45.144531 6.164062 44.21875 5.382812 C 42.054688 3.558594 39.523438 2.128906 36.859375 1.222656 C 34.933594 0.570312 33.109375 0.207031 31.019531 0.0585938 C 30.558594 0.0234375 29.148438 -0.00390625 28.746094 0.015625 Z M 28.746094 0.015625 "
/>
<path
className="animate-blobby-pulse"
className="animate-pulse"
stroke="none"
fillRule="nonzero"
fill="#E1E4FF"
Expand Down
10 changes: 3 additions & 7 deletions examples/privy-next-yield-demo/src/components/ui/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function Header({ authenticated, onLogout }: HeaderProps) {
: "bg-transparent border-none backdrop-blur-none"
}`}
>
<div className="flex flex-row items-center gap-4 h-[26px] font-[family-name:var(--font-inter)]">
<div className="flex flex-row items-center gap-4 h-[26px]">
<Image
src={authenticated ? "./privy-logo-black.svg" : "./privy-logo-white.svg"}
alt="Privy Logo"
Expand All @@ -32,11 +32,7 @@ export function Header({ authenticated, onLogout }: HeaderProps) {

{authenticated && (
<div
className={`text-medium flex h-[22px] items-center justify-center rounded-[11px] border px-[0.375rem] text-[0.75rem] ${
authenticated
? "border-primary text-primary"
: "border-white text-white"
}`}
className="font-medium flex h-[22px] items-center justify-center rounded-[11px] border px-[0.375rem] text-[0.75rem] border-primary text-primary"
>
Yield Demo
</div>
Expand Down Expand Up @@ -78,7 +74,7 @@ export function Header({ authenticated, onLogout }: HeaderProps) {
</nav>
)}

<div className="flex flex-row justify-end items-center gap-4 h-9 font-[family-name:var(--font-inter)]">
<div className="flex flex-row justify-end items-center gap-4 h-9">
<a
className={`flex flex-row items-center gap-1 text-sm font-medium cursor-pointer ${
authenticated ? "text-primary" : "text-white"
Expand Down
2 changes: 0 additions & 2 deletions examples/privy-next-yield-demo/src/lib/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import { base } from 'viem/chains';

// Network Configuration
export const CHAIN = base;
export const CHAIN_ID = base.id; // 8453

// USDC on Base Mainnet
export const USDC_ADDRESS = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' as const;
export const USDC_DECIMALS = 6;
Expand Down