address qa comments

src/buy/components/Buy.tsx

@@ -26,7 +26,7 @@ function BuyContent({ className }: { className?: string }) {
       ref={buyContainerRef}
       className={cn('relative flex flex-col gap-2', componentTheme, className)}
     >
-      <div className={cn('flex items-center gap-4', className)}>
+      <div className={cn('flex items-center gap-4')}>
         <BuyAmountInput />
         <BuyButton />
         {isDropdownOpen && <BuyDropdown />}

src/buy/components/BuyAmountInput.tsx

@@ -23,6 +23,7 @@ export function BuyAmountInput() {
         className={cn(
           'mr-2 w-full border-[none] font-display',
           'leading-none outline-none',
+          'disabled:cursor-not-allowed',
           background.default,
           color.foreground,
         )}
@@ -37,6 +38,7 @@ export function BuyAmountInput() {
       <TokenChip
         className={cn(color.foreground, 'rounded-md')}
         token={to.token}
+        isPressable={false}
       />
     </div>
   );

src/buy/components/BuyDropdown.test.tsx

@@ -110,4 +110,15 @@ describe('BuyDropdown', () => {
       }),
     );
   });
+
+  it('closes the dropdown when Escape key is pressed', () => {
+    render(<BuyDropdown />);
+
+    const { setIsDropdownOpen } = mockContextValue;
+
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Escape' });
+    });
+    expect(setIsDropdownOpen).toHaveBeenCalledWith(false);
+  });
 });

src/buy/components/BuyDropdown.tsx

@@ -1,6 +1,6 @@
 import { useOnchainKit } from '@/core-react/useOnchainKit';
 import { openPopup } from '@/ui-react/internal/utils/openPopup';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useAccount } from 'wagmi';
 import { getRoundedAmount } from '../../core/utils/getRoundedAmount';
 import { ONRAMP_BUY_URL } from '../../fund/constants';
@@ -13,7 +13,8 @@ import { BuyTokenItem } from './BuyTokenItem';
 
 export function BuyDropdown() {
   const { projectId } = useOnchainKit();
-  const { to, fromETH, fromUSDC, from, startPopupMonitor } = useBuyContext();
+  const { to, fromETH, fromUSDC, from, startPopupMonitor, setIsDropdownOpen } =
+    useBuyContext();
   const { address } = useAccount();
 
   const handleOnrampClick = useCallback(
@@ -60,12 +61,25 @@ export function BuyDropdown() {
     from?.token?.symbol !== 'ETH' &&
     from?.token?.symbol !== 'USDC';
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [setIsDropdownOpen]);
+
   return (
     <div
       className={cn(
         color.foreground,
         background.default,
-        'absolute right-0 bottom-0 flex translate-y-[105%] flex-col gap-2',
+        'absolute right-0 bottom-0 flex translate-y-[102%] flex-col gap-2',
         'min-w-80 rounded rounded-lg border p-2',
       )}
     >

src/buy/components/BuyTokenItem.tsx

@@ -26,7 +26,7 @@ export function BuyTokenItem({ swapUnit }: { swapUnit?: SwapUnit }) {
   }, [swapUnit.amount]);
 
   const roundedBalance = useMemo(() => {
-    return getRoundedAmount(swapUnit.balance || '0', 10);
+    return getRoundedAmount(swapUnit.balance || '0', 3);
   }, [swapUnit.balance]);
 
   return (

src/token/components/TokenChip.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '../../core-react/internal/hooks/useTheme';
-import { cn, pressable, text } from '../../styles/theme';
+import { background, cn, pressable, text } from '../../styles/theme';
 import type { TokenChipReact } from '../types';
 import { TokenImage } from './TokenImage';
 
@@ -9,7 +9,12 @@ import { TokenImage } from './TokenImage';
  * WARNING: This component is under development and
  *          may change in the next few weeks.
  */
-export function TokenChip({ token, onClick, className }: TokenChipReact) {
+export function TokenChip({
+  token,
+  onClick,
+  className,
+  isPressable = true,
+}: TokenChipReact) {
   const componentTheme = useTheme();
 
   return (
@@ -18,8 +23,9 @@ export function TokenChip({ token, onClick, className }: TokenChipReact) {
       data-testid="ockTokenChip_Button"
       className={cn(
         componentTheme,
-        pressable.secondary,
-        pressable.shadow,
+        isPressable
+          ? [pressable.secondary, pressable.shadow]
+          : [background.secondary, 'cursor-default'],
         'flex w-fit shrink-0 items-center gap-2 rounded-lg py-1 pr-3 pl-1 ',
         className,
       )}

src/token/types.ts

@@ -34,6 +34,7 @@ export type TokenChipReact = {
   token: Token; // Rendered token
   onClick?: (token: Token) => void;
   className?: string;
+  isPressable?: boolean;
 };
 
 /**