Skip to content

Fix/495 legal disclaimer integration #2

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

Open
Whiznificent wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix/495 legal disclaimer integration #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f70c985
fix(#495): integrate LegalDisclaimerModal into trade creation and fun…
Whiznificent May 27, 2026
6ab9777
fix(ci): update tests to reflect LegalDisclaimerModal gate in Step3Re…
Whiznificent May 27, 2026
05a22ba
fix: rename tradeValueUsdc to tradeValueCngn in VaultValueCard
Whiznificent May 28, 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
82 changes: 54 additions & 28 deletions frontend/src/app/trades/create/__tests__/Step3Review.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,21 @@ jest.mock('@/hooks/useAuth', () => ({
}),
}));

jest.mock('@radix-ui/react-dialog', () => {
const actual = jest.requireActual('@radix-ui/react-dialog');
return { ...actual };
});

jest.mock('@/components/ui/LegalDisclaimerModal', () => ({
LegalDisclaimerModal: ({ isOpen, onAccept, onDecline }: { isOpen: boolean; onAccept: () => void; onDecline: () => void }) =>
isOpen ? (
<div data-testid="legal-disclaimer-modal">
<button onClick={onAccept}>Accept &amp; Proceed</button>
<button onClick={onDecline}>Decline</button>
</div>
) : null,
}));

jest.mock('@/lib/api', () => ({
api: {
trades: {
Expand Down Expand Up @@ -160,6 +175,29 @@ describe('Step3Review', () => {
});
});

describe('legal disclaimer modal', () => {
it('should open disclaimer modal when submit button is clicked', async () => {
const user = userEvent.setup();
renderWithProvider();

const submitButton = screen.getByRole('button', { name: /lock funds & create trade/i });
await user.click(submitButton);

expect(screen.getByTestId('legal-disclaimer-modal')).toBeInTheDocument();
});

it('should close disclaimer modal when decline is clicked', async () => {
const user = userEvent.setup();
renderWithProvider();

await user.click(screen.getByRole('button', { name: /lock funds & create trade/i }));
expect(screen.getByTestId('legal-disclaimer-modal')).toBeInTheDocument();

await user.click(screen.getByRole('button', { name: /decline/i }));
expect(screen.queryByTestId('legal-disclaimer-modal')).not.toBeInTheDocument();
});
});

describe('submit button states', () => {
it('should be enabled when authenticated', () => {
renderWithProvider();
Expand All @@ -172,10 +210,9 @@ describe('Step3Review', () => {
const user = userEvent.setup();
renderWithProvider();

const submitButton = screen.getByRole('button', { name: /lock funds & create trade/i });
await user.click(submitButton);
await user.click(screen.getByRole('button', { name: /lock funds & create trade/i }));
await user.click(screen.getByRole('button', { name: /accept/i }));

// After clicking, button should show loading state
await waitFor(() => {
expect(screen.getByText(/creating trade/i)).toBeInTheDocument();
});
Expand All @@ -185,8 +222,8 @@ describe('Step3Review', () => {
const user = userEvent.setup();
renderWithProvider();

const submitButton = screen.getByRole('button', { name: /lock funds & create trade/i });
await user.click(submitButton);
await user.click(screen.getByRole('button', { name: /lock funds & create trade/i }));
await user.click(screen.getByRole('button', { name: /accept/i }));

await waitFor(() => {
const loadingButton = screen.getByRole('button', { name: /creating trade/i });
Expand All @@ -200,8 +237,8 @@ describe('Step3Review', () => {
const user = userEvent.setup();
renderWithProvider();

const submitButton = screen.getByRole('button', { name: /lock funds & create trade/i });
await user.click(submitButton);
await user.click(screen.getByRole('button', { name: /lock funds & create trade/i }));
await user.click(screen.getByRole('button', { name: /accept/i }));

// Error would be displayed if submission fails
// This test verifies the error display structure exists
Expand Down Expand Up @@ -231,51 +268,40 @@ describe('Step3Review', () => {
const user = userEvent.setup();
renderWithProvider();

const submitButton = screen.getByRole('button', { name: /lock funds & create trade/i });
await user.click(submitButton);

// After successful submission, success state would be displayed
// This test verifies the success display structure exists
await user.click(screen.getByRole('button', { name: /lock funds & create trade/i }));
await user.click(screen.getByRole('button', { name: /accept/i }));
});

it('should display trade ID after successful submission', async () => {
const user = userEvent.setup();
renderWithProvider();

const submitButton = screen.getByRole('button', { name: /lock funds & create trade/i });
await user.click(submitButton);

// Trade ID would be displayed after successful submission
await user.click(screen.getByRole('button', { name: /lock funds & create trade/i }));
await user.click(screen.getByRole('button', { name: /accept/i }));
});

it('should display transaction hash after successful submission', async () => {
const user = userEvent.setup();
renderWithProvider();

const submitButton = screen.getByRole('button', { name: /lock funds & create trade/i });
await user.click(submitButton);

// Transaction hash would be displayed after successful submission
await user.click(screen.getByRole('button', { name: /lock funds & create trade/i }));
await user.click(screen.getByRole('button', { name: /accept/i }));
});

it('should display view trade details button after successful submission', async () => {
const user = userEvent.setup();
renderWithProvider();

const submitButton = screen.getByRole('button', { name: /lock funds & create trade/i });
await user.click(submitButton);

// View trade details button would be displayed after successful submission
await user.click(screen.getByRole('button', { name: /lock funds & create trade/i }));
await user.click(screen.getByRole('button', { name: /accept/i }));
});

it('should display view all trades link after successful submission', async () => {
const user = userEvent.setup();
renderWithProvider();

const submitButton = screen.getByRole('button', { name: /lock funds & create trade/i });
await user.click(submitButton);

// View all trades link would be displayed after successful submission
await user.click(screen.getByRole('button', { name: /lock funds & create trade/i }));
await user.click(screen.getByRole('button', { name: /accept/i }));
});
});

Expand Down
17 changes: 16 additions & 1 deletion frontend/src/app/trades/create/steps/Step3Review.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useTrade } from "../TradeContext";
import { useAuth } from "@/hooks/useAuth";
import { api, apiConfig, ApiError } from "@/lib/api";
import Link from "next/link";
import { LegalDisclaimerModal } from "@/components/ui/LegalDisclaimerModal";

type Row = { label: string; value: string };

Expand All @@ -27,6 +28,7 @@ export default function Step3Review() {
const [txHash, setTxHash] = useState<string | null>(null);
const [tradeId, setTradeId] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [showDisclaimer, setShowDisclaimer] = useState(false);

const qty = parseFloat(data.quantity);
const price = parseFloat(data.pricePerUnit);
Expand All @@ -50,6 +52,11 @@ export default function Step3Review() {
const buyerLossBps = Math.round(data.buyerRatio * 100);
const sellerLossBps = Math.round(data.sellerRatio * 100);

const handleDisclaimerAccept = () => {
setShowDisclaimer(false);
void handleSubmit();
};

const handleSubmit = async () => {
if (!isAuthenticated || !token) {
setError("Please connect and authenticate your wallet first.");
Expand Down Expand Up @@ -208,6 +215,14 @@ export default function Step3Review() {
<p className="text-status-danger text-sm text-center">{error}</p>
)}

<LegalDisclaimerModal
isOpen={showDisclaimer}
onAccept={handleDisclaimerAccept}
onDecline={() => setShowDisclaimer(false)}
lossRatio={{ buyer: data.buyerRatio * 100, seller: data.sellerRatio * 100 }}
tradeValueCngn={amountCngn}
/>

<div className="flex gap-3">
<button
disabled={loading}
Expand All @@ -218,7 +233,7 @@ export default function Step3Review() {
</button>
<button
disabled={loading || !isFormValid}
onClick={handleSubmit}
onClick={() => setShowDisclaimer(true)}
className="flex-1 h-12 rounded-full bg-gradient-gold-cta text-text-inverse font-semibold disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
>
{loading ? (
Expand Down
14 changes: 13 additions & 1 deletion frontend/src/components/vault/VaultValueCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
"use client";
import { useState } from "react";
import { BentoCard } from "@/components/ui/BentoCard";
import { Shield, Key } from "lucide-react";
import { LegalDisclaimerModal } from "@/components/ui/LegalDisclaimerModal";

interface VaultValueCardProps {
value: number;
Expand All @@ -14,6 +17,8 @@ export function VaultValueCard({
isInsured,
onReleaseFunds,
}: VaultValueCardProps) {
const [showDisclaimer, setShowDisclaimer] = useState(false);

const formattedValue = new Intl.NumberFormat("en-US", {
style: "currency",
currency: currency,
Expand All @@ -23,6 +28,13 @@ export function VaultValueCard({

return (
<BentoCard title="" icon={null} glowVariant="emerald" className="h-full">
<LegalDisclaimerModal
isOpen={showDisclaimer}
onAccept={() => { setShowDisclaimer(false); onReleaseFunds?.(); }}
onDecline={() => setShowDisclaimer(false)}
lossRatio={{ buyer: 5000, seller: 5000 }}
tradeValueCngn={String(value)}
/>
<div className="flex flex-col w-76 h-[335.13px]">
<div className="flex items-center justify-between mb-2">
<p className="text-xs font-semibold tracking-widest text-text-secondary uppercase">
Expand Down Expand Up @@ -56,7 +68,7 @@ export function VaultValueCard({
)}

<button
onClick={onReleaseFunds}
onClick={() => setShowDisclaimer(true)}
className="mt-auto w-full flex items-center justify-center gap-2 bg-gold hover:bg-gold-hover text-text-inverse font-semibold py-3 px-6 rounded-xl transition-colors"
>
<Key className="w-5 h-5" />
Expand Down
27 changes: 27 additions & 0 deletions frontend/src/components/vault/__tests__/VaultValueCard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,16 @@ jest.mock('@/components/ui/BentoCard', () => ({
),
}));

jest.mock('@/components/ui/LegalDisclaimerModal', () => ({
LegalDisclaimerModal: ({ isOpen, onAccept, onDecline }: { isOpen: boolean; onAccept: () => void; onDecline: () => void }) =>
isOpen ? (
<div data-testid="legal-disclaimer-modal">
<button onClick={onAccept}>Accept &amp; Proceed</button>
<button onClick={onDecline}>Decline</button>
</div>
) : null,
}));

describe('VaultValueCard Component', () => {
const defaultProps = {
value: 2480000,
Expand Down Expand Up @@ -80,9 +90,26 @@ describe('VaultValueCard Component', () => {
const button = screen.getByText('Release Funds');
fireEvent.click(button);

// Clicking opens the disclaimer modal first — onReleaseFunds not called yet
expect(onReleaseFunds).not.toHaveBeenCalled();
expect(screen.getByTestId('legal-disclaimer-modal')).toBeInTheDocument();

// Accepting the modal triggers onReleaseFunds
fireEvent.click(screen.getByText('Accept & Proceed'));
expect(onReleaseFunds).toHaveBeenCalledTimes(1);
});

it('does not call onReleaseFunds when disclaimer is declined', () => {
const onReleaseFunds = jest.fn();
render(<VaultValueCard {...defaultProps} onReleaseFunds={onReleaseFunds} />);

fireEvent.click(screen.getByText('Release Funds'));
fireEvent.click(screen.getByText('Decline'));

expect(onReleaseFunds).not.toHaveBeenCalled();
expect(screen.queryByTestId('legal-disclaimer-modal')).not.toBeInTheDocument();
});

it('renders the key icon in the Release Funds button', () => {
render(<VaultValueCard {...defaultProps} />);
const button = screen.getByText('Release Funds').closest('button');
Expand Down
Loading