chore: Buy component touch ups (#1797)

Co-authored-by: Alissa Crane <[email protected]>

playground/nextjs-app-router/components/demo/Buy.tsx

@@ -45,7 +45,9 @@ function BuyComponent() {
         </div>
       ) : null}
       <Buy
-        className="w-full"
+        disabled={
+          ENVIRONMENT_VARIABLES[ENVIRONMENT.ENVIRONMENT] === 'production'
+        }
         onStatus={handleOnStatus}
         onSuccess={handleOnSuccess}
         onError={handleOnError}

site/docs/pages/buy/buy.mdx

@@ -21,10 +21,14 @@ The `Buy` components provide a comprehensive interface for users to purchase [To
 
 The `Buy` component supports token swaps from USDC and ETH by default with the option to provide an additional token of choice using the `fromToken` prop. In addition, users are able to purchase tokens using their Coinbase account, Apple Pay, or debit card.
 
+:::info
+The Apple Pay and Debit Card onramp options are only available for Coinbase supported assets.  
+:::
+
 Before using, ensure you've completed all [Getting Started steps](/getting-started).
 
 :::info
-Note: this component requires a `projectId` to be set in the `OnchainKitProvider`. You can find your `projectId` on [Coinbase Developer Platform](https://portal.cdp.coinbase.com/products/onchainkit).
+This component requires a `projectId` to be set in the `OnchainKitProvider`. You can find your `projectId` on [Coinbase Developer Platform](https://portal.cdp.coinbase.com/products/onchainkit).
 :::
 
 ## Usage

src/buy/components/BuyAmountInput.tsx

@@ -18,6 +18,7 @@ export function BuyAmountInput() {
         'flex h-12 items-center border px-2 pl-4',
         background.default,
         border.radius,
+        border.lineDefault,
       )}
     >
       <TextInput

src/buy/components/BuyButton.tsx

@@ -1,12 +1,13 @@
 import { useCallback, useMemo } from 'react';
 import { Spinner } from '../../internal/components/Spinner';
 import { checkmarkSvg } from '../../internal/svg/checkmarkSvg';
-import { closeSvg } from '../../internal/svg/closeSvg';
+import { CloseSvg } from '../../internal/svg/closeSvg';
 import {
   background,
   border,
   cn,
   color,
+  icon,
   pressable,
   text,
 } from '../../styles/theme';
@@ -69,7 +70,7 @@ export function BuyButton() {
       return checkmarkSvg;
     }
     if (isDropdownOpen) {
-      return closeSvg;
+      return <CloseSvg className={icon.inverse} />;
     }
     return 'Buy';
   }, [statusName, isDropdownOpen]);

src/buy/components/BuyDropdown.tsx

@@ -87,7 +87,7 @@ export function BuyDropdown() {
         border.radius,
       )}
     >
-      <div className="px-2 pt-2">Buy with</div>
+      <div className={cn(text.headline, 'px-2 pt-2')}>Buy with</div>
       {!isToETH && <BuyTokenItem swapUnit={fromETH} />}
       {!isToUSDC && <BuyTokenItem swapUnit={fromUSDC} />}
       {showFromToken && <BuyTokenItem swapUnit={from} />}

src/internal/components/Toast.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { background, cn } from '../../styles/theme';
 import { getToastPosition } from '../../ui/react/internal/utils/getToastPosition';
-import { closeSvg } from '../svg/closeSvg';
+import { CloseSvg } from '../svg/closeSvg';
 
 type ToastProps = {
   className?: string;
@@ -76,7 +76,7 @@ export function Toast({
           type="button"
           data-testid="ockCloseButton"
         >
-          {closeSvg}
+          <CloseSvg />
         </button>
       </div>
     </div>

src/internal/svg/closeSvg.tsx

@@ -1,18 +1,22 @@
 import { icon } from '../../styles/theme';
 
-export const closeSvg = (
-  <svg
-    aria-label="ock-closeSvg"
-    width="12"
-    height="12"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Close SVG</title>
-    <path
-      d="M2.14921 1L1 2.1492L6.8508 8L1 13.8508L2.1492 15L8 9.1492L13.8508 15L15 13.8508L9.14921 8L15 2.1492L13.8508 1L8 6.8508L2.14921 1Z"
-      className={icon.foreground}
-    />
-  </svg>
-);
+type CloseSvgProps = {
+  className?: string;
+};
+
+export function CloseSvg({ className = icon.foreground }: CloseSvgProps) {
+  return (
+    <svg
+      aria-label="ock-closeSvg"
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>Close</title>
+      <path d="M2.14921 1L1 2.1492L6.8508 8L1 13.8508L2.1492 15L8 9.1492L13.8508 15L15 13.8508L9.14921 8L15 2.1492L13.8508 1L8 6.8508L2.14921 1Z" />
+    </svg>
+  );
+}

src/token/components/TokenSearch.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useTheme } from '../../core-react/internal/hooks/useTheme';
 import { TextInput } from '../../internal/components/TextInput';
-import { closeSvg } from '../../internal/svg/closeSvg';
+import { CloseSvg } from '../../internal/svg/closeSvg';
 import { searchIconSvg } from '../../internal/svg/searchIconSvg';
 import { cn, color, placeholder, pressable } from '../../styles/theme';
 import type { TokenSearchReact } from '../types';
@@ -47,7 +47,7 @@ export function TokenSearch({
           className="-translate-y-1/2 absolute top-1/2 right-4"
           onClick={handleClear}
         >
-          {closeSvg}
+          <CloseSvg />
         </button>
       )}
     </div>

src/wallet/components/WalletModal.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useConnect } from 'wagmi';
 import { coinbaseWallet, injected, metaMask } from 'wagmi/connectors';
 import { useOnchainKit } from '../../core-react/useOnchainKit';
-import { closeSvg } from '../../internal/svg/closeSvg';
+import { CloseSvg } from '../../internal/svg/closeSvg';
 import { coinbaseWalletSvg } from '../../internal/svg/coinbaseWalletSvg';
 import { defaultAvatarSVG } from '../../internal/svg/defaultAvatarSVG';
 import { metamaskSvg } from '../../internal/svg/metamaskSvg';
@@ -200,7 +200,7 @@ export function WalletModal({
           aria-label="Close modal"
         >
           <div className={cn('flex h-4 w-4 items-center justify-center')}>
-            {closeSvg}
+            <CloseSvg />
           </div>
         </button>