+
+ );
+}
diff --git a/src/problem2/fancy-form/src/components/form-card/InputCurrency.tsx b/src/problem2/fancy-form/src/components/form-card/InputCurrency.tsx
new file mode 100644
index 0000000000..bdaba6f391
--- /dev/null
+++ b/src/problem2/fancy-form/src/components/form-card/InputCurrency.tsx
@@ -0,0 +1,71 @@
+import type { Token } from '@/common/types/token';
+import { cn } from '@/lib/utils';
+import { useBalanceStore } from '@/store/balance.store';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { Field, FieldContent, FieldError } from '../ui/field';
+import { Input } from '../ui/input';
+import { TokenSelector } from './TokenSelector';
+
+interface InputCurrencyProps extends React.ComponentProps<'input'> {
+ label: string;
+ name: string;
+ token: Token;
+ setToken: (value: Token) => void;
+}
+export const InputCurrency = ({
+ name,
+ token,
+ setToken,
+ label,
+ className,
+ ...props
+}: InputCurrencyProps) => {
+ const { control } = useFormContext();
+ const { getBalanceByCurrency } = useBalanceStore();
+
+ const currentPayTokenBalance = getBalanceByCurrency(token?.currency || '');
+
+ return (
+
+ {/* Animated glow on card border */}
+
+
+ {/* Card header */}
+
+
+
+
+
+
+
+
+
+
+
+
+ + Token Swapper +
+
+
+
+ Swap Direction
+
+
+
+ Exchange Rate
+
+ 1 ={' '}
+ {exchangeRate.toFixed(6)}
+
+
+
+
+
+
+ Slippage Tolerance
+0.5%
+
+ {
+ return (
+
+
+
+
+ );
+ }}
+ />
+
+ );
+};
diff --git a/src/problem2/fancy-form/src/components/form-card/TokenSelector.tsx b/src/problem2/fancy-form/src/components/form-card/TokenSelector.tsx
new file mode 100644
index 0000000000..4e2abaae57
--- /dev/null
+++ b/src/problem2/fancy-form/src/components/form-card/TokenSelector.tsx
@@ -0,0 +1,112 @@
+import { getTokenIcon } from '@/common/constants/token-mapping';
+import type { Token } from '@/common/types/token';
+import { useDebounce } from '@/hooks/useDebounce';
+import { cn } from '@/lib/utils';
+import { useTokenStore } from '@/store/token.store';
+import { useMemo, useState } from 'react';
+
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '../ui/dialog';
+import { Input } from '../ui/input';
+
+interface Props {
+ selectedToken: Token | undefined;
+ onSelect: (value: Token) => void;
+}
+
+export function TokenSelector({ selectedToken, onSelect }: Props) {
+ const [search, setSearch] = useState('');
+ const searchDebounced = useDebounce(search, 500);
+ const [open, setOpen] = useState(false);
+ const { tokens } = useTokenStore();
+
+ const tokenIcon = getTokenIcon(selectedToken?.currency || 'ETH');
+
+ const filteredTokens = useMemo(
+ () =>
+ tokens?.filter((token) =>
+ token.currency.toLowerCase().includes(searchDebounced.toLowerCase())
+ ),
+ [tokens, searchDebounced]
+ );
+
+ return (
+
+ );
+}
diff --git a/src/problem2/fancy-form/src/components/ui/button.tsx b/src/problem2/fancy-form/src/components/ui/button.tsx
new file mode 100644
index 0000000000..a4c705e62d
--- /dev/null
+++ b/src/problem2/fancy-form/src/components/ui/button.tsx
@@ -0,0 +1,63 @@
+import { cn } from '@/lib/utils';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import * as React from 'react';
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const buttonVariants = cva(
+ "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+ outline:
+ 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent dark:hover:bg-input/30',
+ secondary:
+ 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+ ghost:
+ 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+ destructive:
+ 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default:
+ 'h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
+ xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+ sm: 'h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+ lg: 'h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+ icon: 'size-9',
+ 'icon-xs': "size-6 [&_svg:not([class*='size-'])]:size-3",
+ 'icon-sm': 'size-8',
+ 'icon-lg': 'size-10',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ }
+);
+
+export function Button({
+ className,
+ variant = 'default',
+ size = 'default',
+ asChild = false,
+ ...props
+}: React.ComponentProps<'button'> &
+ VariantProps
+
+
+
+ Balance: ${currentPayTokenBalance.amount}
+
+ {
+ const numValue = parseFloat(e.target.value);
+ onChange(numValue);
+ }}
+ className={cn('text-display-lg!', className)}
+ {...props}
+ />
+
+
+ {children}
+ {showCloseButton && (
+
+
+
+ )}
+
+ );
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps