feat: Buy component

site/docs/pages/token/types.mdx

@@ -41,6 +41,7 @@ type TokenChipReact = {
   token: Token; // Rendered token
   onClick?: (token: Token) => void;
   className?: string;
+  isPressable?: boolean; // Default: true
 };
 ```
 

src/buy/components/BuyAmountInput.tsx

@@ -15,15 +15,14 @@ export function BuyAmountInput() {
   return (
     <div
       className={cn(
-        'flex h-full items-center rounded-lg border px-4',
+        'flex h-full items-center rounded-lg border pl-4 px-2',
         background.default,
       )}
     >
       <TextInput
         className={cn(
-          'mr-2 w-full border-[none] font-display',
-          'leading-none outline-none',
-          'disabled:cursor-not-allowed',
+          'mr-2 w-full border-none font-display',
+          'leading-none outline-none disabled:cursor-not-allowed',
           background.default,
           color.foreground,
         )}

src/buy/components/BuyButton.tsx

@@ -23,7 +23,9 @@ export function BuyButton() {
     fromUSDC,
     to,
     lifecycleStatus: { statusName },
+    updateLifecycleStatus,
   } = useBuyContext();
+
   const isLoading =
     to?.loading ||
     from?.loading ||
@@ -32,15 +34,34 @@ export function BuyButton() {
     statusName === 'transactionPending' ||
     statusName === 'transactionApproved';
 
-  const isDisabled = !to?.amount || !to?.token || isLoading;
+  const isMissingRequiredField = !to?.amount || !to?.token;
+  const isDisabled = isLoading;
 
   const handleSubmit = useCallback(() => {
+    if (isMissingRequiredField) {
+      updateLifecycleStatus({
+        statusName: 'error',
+        statusData: {
+          code: 'TmBPc05',
+          error: 'Missing required fields',
+          message: 'Complete the field to continue',
+        },
+      });
+      return;
+    }
     if (isDropdownOpen) {
       setIsDropdownOpen(false);
-    } else {
+      return;
+    }
+    if (!isDropdownOpen) {
       setIsDropdownOpen(true);
     }
-  }, [setIsDropdownOpen, isDropdownOpen]);
+  }, [
+    isMissingRequiredField,
+    setIsDropdownOpen,
+    isDropdownOpen,
+    updateLifecycleStatus,
+  ]);
 
   const buttonContent = useMemo(() => {
     if (statusName === 'success') {

src/buy/components/BuyMessage.tsx

@@ -3,16 +3,25 @@
 
 export function BuyMessage() {
   const {
-    lifecycleStatus: { statusName },
+    lifecycleStatus: { statusName, statusData },
   } = useBuyContext();
 
-  if (statusName !== 'error') {
-    return null;
+  // Missing required fields
+  if (statusName === 'error' && statusData.code === 'TmBPc05') {
+    return (
+      <div className={cn('text-sm', color.foregroundMuted)}>
+        Complete the field to continue
+      </div>
+    );
   }
 
-  return (
-    <div className={cn(color.error, 'text-sm')}>
-      Something went wrong. Please try again.
-    </div>
-  );
+  if (statusName === 'error') {
+    return (
+      <div className={cn(color.error, 'text-sm')}>
+        Something went wrong. Please try again.
+      </div>
+    );
+  }
+
+  return null;
 }

src/buy/components/BuyTokenItem.tsx

@@ -33,7 +33,7 @@ export function BuyTokenItem({ swapUnit }: { swapUnit?: SwapUnit }) {
     <button
       className={cn(
         'flex items-center gap-2 rounded-lg p-2',
-        !hasInsufficientBalance && 'hover:bg-[var(--ock-bg-inverse)]',
+        !hasInsufficientBalance,
       )}
       onClick={handleClick}
       type="button"