feat: Native Send Component

playground/nextjs-app-router/onchainkit/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.36.8",
+  "version": "0.36.9",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
   "scripts": {
-    "build": "packemon build --addEngines --addFiles --loadConfigs --declaration && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
+    "build": "packemon build --addEngines --addFiles --loadConfigs --declaration && tscpaths -p tsconfig.esm.json -s ./src -o ./esm && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
     "check": "biome check --write .",
     "check:unsafe": "biome check . --fix --unsafe",
     "ci:check": "biome ci --formatter-enabled=false --linter-enabled=false",
@@ -77,6 +77,7 @@
     "rimraf": "^5.0.5",
     "storybook": "^8.2.9",
     "tailwindcss": "^3.4.3",
+    "tscpaths": "^0.0.9",
     "tsup": "^8.3.5",
     "typescript": "~5.3.3",
     "vite": "^5.3.3",

src/internal/components/TextInput.tsx

@@ -20,10 +20,6 @@ type TextInputReact = {
   setValue?: (s: string) => void;
   value: string;
   inputValidator?: (s: string) => boolean;
-  /** autocomplete attribute handles browser autocomplete, defaults to 'off' */
-  autoComplete?: string;
-  /** data-1p-ignore attribute handles password manager autocomplete, defaults to true */
-  'data-1p-ignore'?: boolean;
 };
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputReact>(
@@ -41,8 +37,6 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputReact>(
       inputMode,
       value,
       inputValidator = () => true,
-      autoComplete = 'off',
-      'data-1p-ignore': data1pIgnore = true,
     },
     ref,
   ) => {
@@ -80,8 +74,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputReact>(
         onChange={handleChange}
         onFocus={onFocus}
         disabled={disabled}
-        autoComplete={autoComplete}
-        data-1p-ignore={data1pIgnore}
+        autoComplete="off" // autocomplete attribute handles browser autocomplete
+        data-1p-ignore={true} // data-1p-ignore attribute handles password manager autocomplete
       />
     );
   },

src/internal/components/TokenBalance.tsx

@@ -0,0 +1,129 @@
+import type { PortfolioTokenWithFiatValue } from '@/api/types';
+import { truncateDecimalPlaces } from '@/internal/utils/truncateDecimalPlaces';
+import { border, cn, color, text } from '@/styles/theme';
+import { TokenImage } from '@/token';
+import { useMemo } from 'react';
+
+type TokenBalanceProps = {
+  token: PortfolioTokenWithFiatValue;
+  subtitle: string;
+  showImage?: boolean;
+  onClick?: (token: PortfolioTokenWithFiatValue) => void;
+  className?: string;
+} & (
+  | { showAction?: true; actionText?: string; onActionPress?: () => void }
+  | { showAction?: false; actionText?: never; onActionPress?: never }
+);
+
+export function TokenBalance({
+  token,
+  subtitle,
+  showImage = true,
+  onClick,
+  showAction = false,
+  actionText = 'Use max',
+  onActionPress,
+  className,
+}: TokenBalanceProps) {
+  const formattedValueInFiat = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(token.fiatBalance);
+
+  const tokenContent = useMemo(() => {
+    return (
+      <div className="grid w-full grid-cols-[2.5rem_1fr_auto] items-center gap-3">
+        <div className="h-10 w-10">
+          {showImage && <TokenImage token={token} size={40} />}
+        </div>
+        <div className="flex min-w-0 flex-col text-left">
+          <span
+            className={cn(
+              text.headline,
+              color.foreground,
+              'overflow-hidden text-ellipsis whitespace-nowrap',
+            )}
+          >
+            {token.name?.trim()}
+          </span>
+          <span className={cn(text.label2, color.foregroundMuted)}>
+            {`${truncateDecimalPlaces(
+              token.cryptoBalance / 10 ** token.decimals,
+              2,
+            )} ${token.symbol} ${subtitle}`}
+          </span>
+        </div>
+        <div className="text-right">
+          {showAction ? (
+            <span
+              aria-label={actionText}
+              onClick={(e) => {
+                e.stopPropagation();
+                onActionPress?.();
+              }}
+              onKeyDown={(e) => {
+                e.stopPropagation();
+                onActionPress?.();
+              }}
+              className={cn(
+                text.label2,
+                color.primary,
+                border.radius,
+                'ml-auto p-0.5 font-bold',
+                'border border-transparent hover:border-[--ock-line-primary]',
+              )}
+            >
+              {actionText}
+            </span>
+          ) : (
+            <span
+              className={cn(
+                text.label2,
+                color.foregroundMuted,
+                'whitespace-nowrap',
+              )}
+            >
+              {formattedValueInFiat}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  }, [
+    showImage,
+    token,
+    subtitle,
+    showAction,
+    actionText,
+    onActionPress,
+    formattedValueInFiat,
+  ]);
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={() => onClick(token)}
+        className={cn(
+          'flex w-full items-center justify-start gap-4 px-2 py-1',
+          className,
+        )}
+        data-testid="ockTokenBalanceButton"
+      >
+        {tokenContent}
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex w-full items-center justify-start gap-4 px-2 py-1',
+        className,
+      )}
+      data-testid="ockTokenBalanceDiv"
+    >
+      {tokenContent}
+    </div>
+  );
+}

src/internal/components/amount-input/AmountInput.tsx

@@ -16,6 +16,7 @@ type AmountInputProps = {
   setCryptoAmount: (value: string) => void;
   exchangeRate: string;
   className?: string;
+  textClassName?: string;
 };
 
 export function AmountInput({
@@ -24,10 +25,11 @@ export function AmountInput({
   asset,
   selectedInputType,
   currency,
-  className,
   setFiatAmount,
   setCryptoAmount,
   exchangeRate,
+  className,
+  textClassName,
 }: AmountInputProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -101,6 +103,7 @@ export function AmountInput({
             '[appearance:textfield]',
             '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',
             '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',
+            textClassName,
           )}
           value={value}
           onChange={handleAmountChange}
@@ -110,12 +113,17 @@ export function AmountInput({
           placeholder="0"
         />
 
-        <CurrencyLabel ref={currencySpanRef} label={currencyOrAsset} />
+        <CurrencyLabel
+          ref={currencySpanRef}
+          label={currencyOrAsset}
+          className={textClassName}
+        />
       </div>
 
       {/* Hidden span for measuring text width
           Without this span the input field would not adjust its width based on the text width and would look like this:
           [0.12--------Empty Space-------][ETH] - As you can see the currency symbol is far away from the inputed value
+
           With this span we can measure the width of the text in the input field and set the width of the input field to match the text width
           [0.12][ETH] - Now the currency symbol is displayed next to the input field
       */}
@@ -128,6 +136,7 @@ export function AmountInput({
           'text-6xl leading-none outline-none',
           'pointer-events-none absolute whitespace-nowrap opacity-0',
           'left-[-9999px]', // Hide the span from the DOM
+          textClassName,
         )}
       >
         {value ? `${value}.` : '0.'}

src/internal/components/amount-input/CurrencyLabel.tsx

@@ -3,10 +3,11 @@ import { forwardRef } from 'react';
 
 type CurrencyLabelProps = {
   label: string;
+  className?: string;
 };
 
 export const CurrencyLabel = forwardRef<HTMLSpanElement, CurrencyLabelProps>(
-  ({ label }, ref) => {
+  ({ label, className }, ref) => {
     return (
       <span
         ref={ref}
@@ -15,6 +16,7 @@ export const CurrencyLabel = forwardRef<HTMLSpanElement, CurrencyLabelProps>(
           color.disabled,
           'flex items-center justify-center bg-transparent',
           'text-6xl leading-none outline-none',
+          className,
         )}
         data-testid="ockCurrencySpan"
       >

src/token/components/TokenRow.tsx

@@ -32,7 +32,14 @@ export const TokenRow = memo(function TokenRow({
       <span className="flex items-center gap-3">
         {!hideImage && <TokenImage token={token} size={28} />}
         <span className="flex flex-col items-start">
-          <span className={cn(text.headline)}>{token.name}</span>
+          <span
+            className={cn(
+              text.headline,
+              'overflow-hidden text-ellipsis whitespace-nowrap text-left',
+            )}
+          >
+            {token.name.trim()}
+          </span>
           {!hideSymbol && (
             <span className={cn(text.body, color.foregroundMuted)}>
               {token.symbol}