From 3846f5d55756ec334da93259ab9071310f634b57 Mon Sep 17 00:00:00 2001
From: Gaubee <GaubeeBangeel@Gmail.com>
Date: Mon, 22 Dec 2025 19:26:46 +0800
Subject: [PATCH] feat(AmountInput): migrate to native Amount type support

BREAKING CHANGE: AmountInput now uses Amount objects instead of strings

- value: Amount | null (was string)
- onChange: (Amount | null) => void (was string => void)
- balance: Amount (was string)
- max: Amount (was string)

Updates:
- useSend hook: state.amount is now Amount | null
- SendPage: integrated with new AmountInput API
- Tests: updated all test files with Amount objects
- Stories: updated to use Amount for demos

Closes #65
---
 .../transfer/amount-input.stories.tsx         | 113 +++++++++-------
 src/components/transfer/amount-input.test.tsx | 104 +++++++++++----
 src/components/transfer/amount-input.tsx      | 124 +++++++++++++-----
 src/components/transfer/index.ts              |   2 +-
 src/hooks/use-send.constants.ts               |   2 +-
 src/hooks/use-send.logic.ts                   |  35 ++---
 src/hooks/use-send.test.ts                    |  44 ++++---
 src/hooks/use-send.ts                         |  24 +++-
 src/hooks/use-send.types.ts                   |   8 +-
 src/pages/send/index.tsx                      |  24 ++--
 10 files changed, 313 insertions(+), 167 deletions(-)

diff --git a/src/components/transfer/amount-input.stories.tsx b/src/components/transfer/amount-input.stories.tsx
index 9ea8121d5..c57548dd4 100644
--- a/src/components/transfer/amount-input.stories.tsx
+++ b/src/components/transfer/amount-input.stories.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { AmountInput } from './amount-input';
+import { Amount } from '@/types/amount';
 
 const meta: Meta<typeof AmountInput> = {
   title: 'Transfer/AmountInput',
@@ -11,20 +12,22 @@ const meta: Meta<typeof AmountInput> = {
 export default meta;
 type Story = StoryObj<typeof AmountInput>;
 
+// Helper to create Amount objects for stories
+const createAmount = (value: string, decimals: number, symbol: string) =>
+  Amount.fromFormatted(value, decimals, symbol);
+
 export const Default: Story = {
   args: {
     label: '转账金额',
-    symbol: 'USDT',
-    balance: '1,234.56',
+    balance: createAmount('1234.56', 6, 'USDT'),
   },
 };
 
 export const WithValue: Story = {
   args: {
     label: '转账金额',
-    symbol: 'ETH',
-    value: '0.5',
-    balance: '2.5',
+    value: createAmount('0.5', 18, 'ETH'),
+    balance: createAmount('2.5', 18, 'ETH'),
     fiatValue: '900.00',
   },
 };
@@ -32,18 +35,17 @@ export const WithValue: Story = {
 export const WithError: Story = {
   args: {
     label: '转账金额',
-    symbol: 'USDT',
-    value: '5000',
-    balance: '1000',
-    max: '1000',
+    value: createAmount('5000', 6, 'USDT'),
+    balance: createAmount('1000', 6, 'USDT'),
+    max: createAmount('1000', 6, 'USDT'),
   },
 };
 
 export const CustomError: Story = {
   args: {
     label: '转账金额',
-    symbol: 'USDT',
-    value: '10',
+    value: createAmount('10', 6, 'USDT'),
+    balance: createAmount('1000', 6, 'USDT'),
     error: '最小转账金额为 20 USDT',
   },
 };
@@ -51,35 +53,34 @@ export const CustomError: Story = {
 export const Disabled: Story = {
   args: {
     label: '转账金额',
-    symbol: 'USDT',
-    value: '100',
+    value: createAmount('100', 6, 'USDT'),
+    balance: createAmount('1000', 6, 'USDT'),
     disabled: true,
   },
 };
 
 export const Controlled: Story = {
   render: () => {
-    const [value, setValue] = useState('');
-    const balance = '1000';
+    const [value, setValue] = useState<Amount | null>(null);
+    const balance = createAmount('1000', 6, 'USDT');
     const rate = 1; // USDT to USD
-    const fiatValue = value ? (parseFloat(value) * rate).toFixed(2) : undefined;
-
-    const inputProps: Record<string, unknown> = {
-      label: '转账金额',
-      symbol: 'USDT',
-      value,
-      onChange: setValue,
-      balance,
-      max: balance,
-    };
-    if (fiatValue !== undefined) {
-      inputProps.fiatValue = fiatValue;
-    }
+    const fiatValue = value ? (value.toNumber() * rate).toFixed(2) : undefined;
 
     return (
       <div className="space-y-4">
-        <AmountInput {...inputProps} />
-        <p className="text-muted-foreground text-sm">输入值: {value || '(空)'}</p>
+        <AmountInput
+          label="转账金额"
+          value={value}
+          onChange={setValue}
+          balance={balance}
+          fiatValue={fiatValue ?? undefined}
+        />
+        <p className="text-muted-foreground text-sm">
+          输入值: {value?.toFormatted() ?? '(空)'}
+        </p>
+        <p className="text-muted-foreground text-sm">
+          原始值: {value?.toRawString() ?? '(空)'}
+        </p>
       </div>
     );
   },
@@ -88,42 +89,54 @@ export const Controlled: Story = {
 export const DifferentTokens: Story = {
   render: () => (
     <div className="space-y-6">
-      <AmountInput label="发送" symbol="ETH" value="0.5" balance="2.5" fiatValue="900" />
-      <AmountInput label="发送" symbol="BTC" value="0.01" balance="0.1" fiatValue="500" />
-      <AmountInput label="发送" symbol="TRX" value="1000" balance="10000" fiatValue="80" />
+      <AmountInput
+        label="发送"
+        value={createAmount('0.5', 18, 'ETH')}
+        balance={createAmount('2.5', 18, 'ETH')}
+        fiatValue="900"
+      />
+      <AmountInput
+        label="发送"
+        value={createAmount('0.01', 8, 'BTC')}
+        balance={createAmount('0.1', 8, 'BTC')}
+        fiatValue="500"
+      />
+      <AmountInput
+        label="发送"
+        value={createAmount('1000', 6, 'TRX')}
+        balance={createAmount('10000', 6, 'TRX')}
+        fiatValue="80"
+      />
     </div>
   ),
 };
 
 export const TransferForm: Story = {
   render: () => {
-    const [amount, setAmount] = useState('');
-    const balance = '1000';
-    const numAmount = parseFloat(amount) || 0;
-    const isValid = numAmount > 0 && numAmount <= parseFloat(balance);
-    const fiatValue = amount ? (parseFloat(amount) || 0).toFixed(2) : undefined;
+    const [amount, setAmount] = useState<Amount | null>(null);
+    const balance = createAmount('1000', 6, 'USDT');
+    const isValid = amount && amount.isPositive() && amount.lte(balance);
+    const fiatValue = amount ? amount.toNumber().toFixed(2) : undefined;
 
-    const formInputProps: Record<string, unknown> = {
-      label: '转账金额',
-      symbol: 'USDT',
-      value: amount,
-      onChange: setAmount,
-      balance,
-      max: balance,
+    const handleQuickSelect = (val: string) => {
+      setAmount(createAmount(val, 6, 'USDT'));
     };
-    if (fiatValue !== undefined) {
-      formInputProps.fiatValue = fiatValue;
-    }
 
     return (
       <div className="space-y-6 p-4">
         <h3 className="text-lg font-medium">转账 USDT</h3>
-        <AmountInput {...formInputProps} />
+        <AmountInput
+          label="转账金额"
+          value={amount}
+          onChange={setAmount}
+          balance={balance}
+          fiatValue={fiatValue ?? undefined}
+        />
         <div className="flex gap-2 text-sm">
           {['100', '500', '1000'].map((val) => (
             <button
               key={val}
-              onClick={() => setAmount(val)}
+              onClick={() => handleQuickSelect(val)}
               className="bg-muted hover:bg-muted/80 rounded-lg px-4 py-2 transition-colors"
             >
               {val}
diff --git a/src/components/transfer/amount-input.test.tsx b/src/components/transfer/amount-input.test.tsx
index 70661afa4..700a450e7 100644
--- a/src/components/transfer/amount-input.test.tsx
+++ b/src/components/transfer/amount-input.test.tsx
@@ -1,95 +1,153 @@
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { AmountInput, formatInputValue } from './amount-input'
+import { AmountInput, sanitizeInput, limitDecimals } from './amount-input'
 import { TestI18nProvider } from '@/test/i18n-mock'
+import { Amount } from '@/types/amount'
 
 const renderWithI18n = (ui: React.ReactElement) => render(<TestI18nProvider>{ui}</TestI18nProvider>)
 
-describe('formatInputValue', () => {
+describe('sanitizeInput', () => {
   it('removes non-numeric characters', () => {
-    expect(formatInputValue('abc123')).toBe('123')
+    expect(sanitizeInput('abc123')).toBe('123')
   })
 
   it('allows decimal point', () => {
-    expect(formatInputValue('123.45')).toBe('123.45')
+    expect(sanitizeInput('123.45')).toBe('123.45')
   })
 
   it('keeps only one decimal point', () => {
-    expect(formatInputValue('123.45.67')).toBe('123.4567')
+    expect(sanitizeInput('123.45.67')).toBe('123.4567')
+  })
+})
+
+describe('limitDecimals', () => {
+  it('limits decimal places to specified number', () => {
+    expect(limitDecimals('1.123456789012', 8)).toBe('1.12345678')
   })
 
-  it('limits decimal places to 8', () => {
-    expect(formatInputValue('1.123456789012')).toBe('1.12345678')
+  it('allows fewer decimals than limit', () => {
+    expect(limitDecimals('1.12', 8)).toBe('1.12')
+  })
+
+  it('handles no decimals', () => {
+    expect(limitDecimals('100', 8)).toBe('100')
   })
 })
 
 describe('AmountInput', () => {
+  const createBalance = (value: string, decimals = 18, symbol = 'ETH') =>
+    Amount.fromFormatted(value, decimals, symbol)
+
   it('renders with label', () => {
-    renderWithI18n(<AmountInput label="转账金额" />)
+    renderWithI18n(<AmountInput label="转账金额" decimals={18} />)
     expect(screen.getByText('转账金额')).toBeInTheDocument()
   })
 
   it('renders with symbol', () => {
-    renderWithI18n(<AmountInput symbol="USDT" />)
+    renderWithI18n(<AmountInput symbol="USDT" decimals={18} />)
     expect(screen.getByText('USDT')).toBeInTheDocument()
   })
 
   it('shows balance when provided', () => {
-    renderWithI18n(<AmountInput label="金额" symbol="ETH" balance="2.5" />)
+    const balance = createBalance('2.5')
+    renderWithI18n(<AmountInput label="金额" balance={balance} />)
     expect(screen.getByText(/余额: 2.5 ETH/)).toBeInTheDocument()
   })
 
-  it('calls onChange when typing', async () => {
+  it('calls onChange with Amount when typing valid number', async () => {
     const handleChange = vi.fn()
-    renderWithI18n(<AmountInput onChange={handleChange} />)
+    renderWithI18n(<AmountInput onChange={handleChange} decimals={18} />)
     
     const input = screen.getByPlaceholderText('0')
     await userEvent.type(input, '100')
     
     expect(handleChange).toHaveBeenCalled()
+    // Last call should have Amount with value 100
+    const lastCall = handleChange.mock.calls[handleChange.mock.calls.length - 1]![0] as Amount
+    expect(lastCall?.toFormatted()).toBe('100')
+  })
+
+  it('calls onChange with null for incomplete input', async () => {
+    const handleChange = vi.fn()
+    renderWithI18n(<AmountInput onChange={handleChange} decimals={18} />)
+    
+    const input = screen.getByPlaceholderText('0')
+    await userEvent.type(input, '.')
+    
+    // Single dot is not a valid amount
+    const lastCall = handleChange.mock.calls[handleChange.mock.calls.length - 1]![0]
+    expect(lastCall).toBeNull()
   })
 
   it('shows MAX button when balance is provided', () => {
-    renderWithI18n(<AmountInput balance="1000" />)
+    const balance = createBalance('1000')
+    renderWithI18n(<AmountInput balance={balance} />)
     expect(screen.getByRole('button', { name: 'MAX' })).toBeInTheDocument()
   })
 
   it('sets max value when MAX button clicked', async () => {
     const handleChange = vi.fn()
-    renderWithI18n(<AmountInput balance="1000" max="1000" onChange={handleChange} />)
+    const balance = createBalance('1000')
+    renderWithI18n(<AmountInput balance={balance} onChange={handleChange} />)
     
     await userEvent.click(screen.getByRole('button', { name: 'MAX' }))
-    expect(handleChange).toHaveBeenCalledWith('1000')
+    
+    const lastCall = handleChange.mock.calls[handleChange.mock.calls.length - 1]![0] as Amount
+    expect(lastCall.toFormatted()).toBe('1000')
   })
 
-  it('shows fiat value when provided', () => {
-    renderWithI18n(<AmountInput value="100" fiatValue="100.00" />)
+  it('shows fiat value when provided and input has value', async () => {
+    renderWithI18n(<AmountInput decimals={18} fiatValue="100.00" />)
+    
+    // First type something to show fiat value
+    const input = screen.getByPlaceholderText('0')
+    await userEvent.type(input, '100')
+    
     expect(screen.getByText(/≈ \$100.00/)).toBeInTheDocument()
   })
 
-  it('shows custom fiat symbol', () => {
-    renderWithI18n(<AmountInput value="100" fiatValue="800" fiatSymbol="¥" />)
+  it('shows custom fiat symbol', async () => {
+    renderWithI18n(<AmountInput decimals={18} fiatValue="800" fiatSymbol="¥" />)
+    
+    const input = screen.getByPlaceholderText('0')
+    await userEvent.type(input, '100')
+    
     expect(screen.getByText(/≈ ¥800/)).toBeInTheDocument()
   })
 
   it('shows error when value exceeds max', () => {
-    renderWithI18n(<AmountInput value="5000" max="1000" />)
+    const value = Amount.fromFormatted('5000', 18, 'ETH')
+    const max = Amount.fromFormatted('1000', 18, 'ETH')
+    renderWithI18n(<AmountInput value={value} max={max} />)
     expect(screen.getByText('超出可用余额')).toBeInTheDocument()
   })
 
   it('shows custom error message', () => {
-    renderWithI18n(<AmountInput error="最小金额为 10" />)
+    renderWithI18n(<AmountInput error="最小金额为 10" decimals={18} />)
     expect(screen.getByText('最小金额为 10')).toBeInTheDocument()
   })
 
   it('disables input when disabled', () => {
-    renderWithI18n(<AmountInput disabled />)
+    renderWithI18n(<AmountInput disabled decimals={18} />)
     expect(screen.getByPlaceholderText('0')).toBeDisabled()
   })
 
   it('hides MAX button when disabled', () => {
-    renderWithI18n(<AmountInput balance="1000" disabled />)
+    const balance = createBalance('1000')
+    renderWithI18n(<AmountInput balance={balance} disabled />)
     expect(screen.queryByRole('button', { name: 'MAX' })).not.toBeInTheDocument()
   })
+
+  it('derives decimals from balance', async () => {
+    const handleChange = vi.fn()
+    const balance = Amount.fromFormatted('100', 6, 'USDT') // 6 decimals like USDT
+    renderWithI18n(<AmountInput balance={balance} onChange={handleChange} />)
+    
+    const input = screen.getByPlaceholderText('0')
+    await userEvent.type(input, '1.1234567890') // More than 6 decimals
+    
+    // Should be limited to 6 decimals
+    expect(input).toHaveValue('1.123456')
+  })
 })
diff --git a/src/components/transfer/amount-input.tsx b/src/components/transfer/amount-input.tsx
index 0bfd01684..d5c0dee38 100644
--- a/src/components/transfer/amount-input.tsx
+++ b/src/components/transfer/amount-input.tsx
@@ -1,22 +1,36 @@
-import { useState, forwardRef } from 'react';
+import { useState, forwardRef, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
+import { Amount } from '@/types/amount';
 
 interface AmountInputProps {
-  value?: string | undefined;
-  onChange?: ((value: string) => void) | undefined;
+  /** Amount value (controlled). Pass null or undefined for empty/invalid state */
+  value?: Amount | null | undefined;
+  /** Called when user input changes. Provides Amount (or null if invalid) */
+  onChange?: ((value: Amount | null) => void) | undefined;
+  /** Decimals for Amount parsing (required if balance not provided) */
+  decimals?: number | undefined;
+  /** Symbol to display (falls back to balance.symbol) */
   symbol?: string | undefined;
-  balance?: string | undefined;
+  /** Available balance as Amount */
+  balance?: Amount | undefined;
+  /** Max allowed amount (defaults to balance) */
+  max?: Amount | undefined;
+  /** Fiat value to display */
   fiatValue?: string | undefined;
+  /** Fiat symbol (default: $) */
   fiatSymbol?: string | undefined;
-  max?: string | undefined;
+  /** Error message */
   error?: string | undefined;
+  /** Label text */
   label?: string | undefined;
+  /** Additional class names */
   className?: string | undefined;
+  /** Disabled state */
   disabled?: boolean | undefined;
 }
 
-function formatInputValue(value: string): string {
+function sanitizeInput(value: string): string {
   // Remove non-numeric characters except decimal point
   let cleaned = value.replace(/[^0-9.]/g, '');
 
@@ -26,20 +40,24 @@ function formatInputValue(value: string): string {
     cleaned = parts[0] + '.' + parts.slice(1).join('');
   }
 
-  // Limit decimal places to 8
-  if (parts.length === 2 && parts[1]!.length > 8) {
-    cleaned = parts[0] + '.' + parts[1]!.slice(0, 8);
-  }
-
   return cleaned;
 }
 
+function limitDecimals(value: string, maxDecimals: number): string {
+  const parts = value.split('.');
+  if (parts.length === 2 && parts[1]!.length > maxDecimals) {
+    return parts[0] + '.' + parts[1]!.slice(0, maxDecimals);
+  }
+  return value;
+}
+
 const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
   (
     {
-      value = '',
+      value,
       onChange,
-      symbol = '',
+      decimals: propDecimals,
+      symbol: propSymbol,
       balance,
       fiatValue,
       fiatSymbol = '$',
@@ -53,29 +71,69 @@ const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
   ) => {
     const { t } = useTranslation('common');
     const [focused, setFocused] = useState(false);
-    const [internalValue, setInternalValue] = useState(value);
+    const [inputValue, setInputValue] = useState('');
+
+    // Derive decimals and symbol from balance or props
+    const decimals = propDecimals ?? balance?.decimals ?? 18;
+    const symbol = propSymbol ?? balance?.symbol ?? '';
+    const effectiveMax = max ?? balance;
+
+    // Sync input value when controlled value changes from parent
+    useEffect(() => {
+      if (value) {
+        const formatted = value.toFormatted();
+        // Only update if different to avoid cursor jump
+        if (formatted !== inputValue && !focused) {
+          setInputValue(formatted);
+        }
+      } else if (value === null && inputValue !== '' && !focused) {
+        // Don't clear input while user is typing
+      }
+    }, [value, focused]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const currentValue = value || internalValue;
-    const numValue = parseFloat(currentValue) || 0;
-    const numMax = max ? parseFloat(max) : Infinity;
-    const isOverMax = numValue > numMax;
+    // Check if current value exceeds max
+    const isOverMax = value && effectiveMax ? value.gt(effectiveMax) : false;
+
+    const parseInputToAmount = useCallback((input: string): Amount | null => {
+      if (!input || input === '.' || input === '-') {
+        return null;
+      }
+      return Amount.tryFromFormatted(input, decimals, symbol || undefined);
+    }, [decimals, symbol]);
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const formatted = formatInputValue(e.target.value);
-      setInternalValue(formatted);
-      onChange?.(formatted);
+      const raw = e.target.value;
+      const sanitized = sanitizeInput(raw);
+      const limited = limitDecimals(sanitized, decimals);
+
+      setInputValue(limited);
+
+      const amount = parseInputToAmount(limited);
+      onChange?.(amount);
     };
 
     const handleMax = () => {
-      if (max) {
-        setInternalValue(max);
-        onChange?.(max);
-      } else if (balance) {
-        setInternalValue(balance);
-        onChange?.(balance);
+      if (effectiveMax) {
+        const formatted = effectiveMax.toFormatted();
+        setInputValue(formatted);
+        onChange?.(effectiveMax);
       }
     };
 
+    const handleBlur = () => {
+      setFocused(false);
+      // Clean up display value on blur (e.g., "1." -> "1")
+      if (value) {
+        setInputValue(value.toFormatted());
+      } else if (inputValue && !parseInputToAmount(inputValue)) {
+        // Invalid input, clear it
+        setInputValue('');
+      }
+    };
+
+    // Format balance for display
+    const balanceDisplay = balance?.toFormatted() ?? undefined;
+
     return (
       <div className={cn('@container space-y-2', className)}>
         {label && (
@@ -83,7 +141,7 @@ const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             <label className="block text-sm font-medium">{label}</label>
             {balance && (
               <span className="text-muted-foreground text-xs">
-                {t('balance')}: {balance} {symbol}
+                {t('balance')}: {balanceDisplay} {symbol}
               </span>
             )}
           </div>
@@ -102,10 +160,10 @@ const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
               ref={ref}
               type="text"
               inputMode="decimal"
-              value={currentValue}
+              value={inputValue}
               onChange={handleChange}
               onFocus={() => setFocused(true)}
-              onBlur={() => setFocused(false)}
+              onBlur={handleBlur}
               className={cn(
                 'placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-2xl font-semibold outline-none @xs:text-3xl',
                 disabled && 'cursor-not-allowed',
@@ -116,7 +174,7 @@ const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             />
 
             <div className="flex items-center gap-2">
-              {(balance || max) && !disabled && (
+              {effectiveMax && !disabled && (
                 <button
                   type="button"
                   onClick={handleMax}
@@ -129,7 +187,7 @@ const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             </div>
           </div>
 
-          {fiatValue && currentValue && (
+          {fiatValue && inputValue && (
             <p className="text-muted-foreground mt-1 text-sm">
               ≈ {fiatSymbol}
               {fiatValue}
@@ -144,4 +202,4 @@ const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
 );
 AmountInput.displayName = 'AmountInput';
 
-export { AmountInput, formatInputValue };
+export { AmountInput, sanitizeInput, limitDecimals };
diff --git a/src/components/transfer/index.ts b/src/components/transfer/index.ts
index 03a459c7f..29316e53b 100644
--- a/src/components/transfer/index.ts
+++ b/src/components/transfer/index.ts
@@ -1,2 +1,2 @@
 export { AddressInput, isValidAddress } from './address-input'
-export { AmountInput, formatInputValue } from './amount-input'
+export { AmountInput, sanitizeInput, limitDecimals } from './amount-input'
diff --git a/src/hooks/use-send.constants.ts b/src/hooks/use-send.constants.ts
index 30f0753f1..87f4474cb 100644
--- a/src/hooks/use-send.constants.ts
+++ b/src/hooks/use-send.constants.ts
@@ -14,7 +14,7 @@ export const initialState: SendState = {
   step: 'input',
   asset: null,
   toAddress: '',
-  amount: '',
+  amount: null,
   addressError: null,
   amountError: null,
   feeAmount: null,
diff --git a/src/hooks/use-send.logic.ts b/src/hooks/use-send.logic.ts
index f4c4f98d8..ddbdfe6da 100644
--- a/src/hooks/use-send.logic.ts
+++ b/src/hooks/use-send.logic.ts
@@ -15,61 +15,54 @@ export function validateAddressInput(address: string, isBioforestChain: boolean)
   return null
 }
 
-export function validateAmountInput(amount: string, asset: AssetInfo | null): string | null {
-  if (!amount.trim()) return '请输入金额'
+export function validateAmountInput(amount: Amount | null, asset: AssetInfo | null): string | null {
+  if (!amount) return '请输入金额'
   if (!asset) return null
 
-  const inputAmount = Amount.tryFromFormatted(amount, asset.decimals)
-  if (!inputAmount || !inputAmount.isPositive()) return '请输入有效金额'
-
-  if (inputAmount.gt(asset.amount)) return '余额不足'
+  if (!amount.isPositive()) return '请输入有效金额'
+  if (amount.gt(asset.amount)) return '余额不足'
 
   return null
 }
 
 export function canProceedToConfirm(options: {
   toAddress: string
-  amount: string
+  amount: Amount | null
   asset: AssetInfo | null
   isBioforestChain: boolean
 }): boolean {
   const { toAddress, amount, asset, isBioforestChain } = options
-  if (!asset) return false
-
-  const inputAmount = Amount.tryFromFormatted(amount, asset.decimals)
-  if (!inputAmount) return false
+  if (!asset || !amount) return false
 
   return (
     toAddress.trim() !== '' &&
-    amount.trim() !== '' &&
     isValidRecipientAddress(toAddress, isBioforestChain) &&
-    inputAmount.isPositive() &&
-    inputAmount.lte(asset.amount)
+    amount.isPositive() &&
+    amount.lte(asset.amount)
   )
 }
 
 export type FeeAdjustResult =
-  | { status: 'ok'; adjustedAmount?: string }
+  | { status: 'ok'; adjustedAmount?: Amount }
   | { status: 'error'; message: string }
 
 export function adjustAmountForFee(
-  amount: string,
+  amount: Amount | null,
   asset: AssetInfo,
   fee: Amount
 ): FeeAdjustResult {
-  const inputAmount = Amount.tryFromFormatted(amount, asset.decimals)
-  if (!inputAmount) return { status: 'error', message: '请输入有效金额' }
+  if (!amount) return { status: 'error', message: '请输入有效金额' }
 
   const balance = asset.amount
 
-  if (inputAmount.add(fee).lte(balance)) return { status: 'ok' }
-  if (!inputAmount.eq(balance)) return { status: 'error', message: '余额不足' }
+  if (amount.add(fee).lte(balance)) return { status: 'ok' }
+  if (!amount.eq(balance)) return { status: 'error', message: '余额不足' }
 
   const maxSendable = balance.sub(fee)
   if (!maxSendable.isPositive()) return { status: 'error', message: '余额不足' }
 
   return {
     status: 'ok',
-    adjustedAmount: maxSendable.toFormatted(),
+    adjustedAmount: maxSendable,
   }
 }
diff --git a/src/hooks/use-send.test.ts b/src/hooks/use-send.test.ts
index 0ef75bfb0..669b4868a 100644
--- a/src/hooks/use-send.test.ts
+++ b/src/hooks/use-send.test.ts
@@ -29,7 +29,7 @@ describe('useSend', () => {
     it('starts with empty values', () => {
       const { result } = renderHook(() => useSend())
       expect(result.current.state.toAddress).toBe('')
-      expect(result.current.state.amount).toBe('')
+      expect(result.current.state.amount).toBeNull()
       expect(result.current.state.asset).toBeNull()
     })
 
@@ -66,11 +66,12 @@ describe('useSend', () => {
 
   describe('setAmount', () => {
     it('updates amount', () => {
-      const { result } = renderHook(() => useSend())
+      const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('1.5', 18, 'ETH')
       act(() => {
-        result.current.setAmount('1.5')
+        result.current.setAmount(amount)
       })
-      expect(result.current.state.amount).toBe('1.5')
+      expect(result.current.state.amount?.toFormatted()).toBe('1.5')
     })
 
     it('clears amount error on change', () => {
@@ -83,8 +84,9 @@ describe('useSend', () => {
       expect(result.current.state.amountError).not.toBeNull()
 
       // Now set amount
+      const amount = Amount.fromFormatted('0.5', 18, 'ETH')
       act(() => {
-        result.current.setAmount('0.5')
+        result.current.setAmount(amount)
       })
       expect(result.current.state.amountError).toBeNull()
     })
@@ -115,8 +117,9 @@ describe('useSend', () => {
   describe('canProceed', () => {
     it('returns false when address is empty', () => {
       const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('1', 18, 'ETH')
       act(() => {
-        result.current.setAmount('1')
+        result.current.setAmount(amount)
       })
       expect(result.current.canProceed).toBe(false)
     })
@@ -131,18 +134,20 @@ describe('useSend', () => {
 
     it('returns false when asset is null', () => {
       const { result } = renderHook(() => useSend())
+      const amount = Amount.fromFormatted('1', 18, 'ETH')
       act(() => {
         result.current.setToAddress('0x1234567890abcdef1234567890abcdef12345678')
-        result.current.setAmount('1')
+        result.current.setAmount(amount)
       })
       expect(result.current.canProceed).toBe(false)
     })
 
     it('returns true when all fields are valid', () => {
       const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('0.5', 18, 'ETH')
       act(() => {
         result.current.setToAddress('0x1234567890abcdef1234567890abcdef12345678')
-        result.current.setAmount('0.5')
+        result.current.setAmount(amount)
       })
       expect(result.current.canProceed).toBe(true)
     })
@@ -151,8 +156,9 @@ describe('useSend', () => {
   describe('goToConfirm', () => {
     it('returns false and sets error for empty address', () => {
       const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('1', 18, 'ETH')
       act(() => {
-        result.current.setAmount('1')
+        result.current.setAmount(amount)
       })
 
       let success: boolean
@@ -167,9 +173,10 @@ describe('useSend', () => {
 
     it('returns false and sets error for invalid address', () => {
       const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('1', 18, 'ETH')
       act(() => {
         result.current.setToAddress('invalid')
-        result.current.setAmount('1')
+        result.current.setAmount(amount)
       })
 
       let success: boolean
@@ -198,9 +205,10 @@ describe('useSend', () => {
 
     it('returns false for insufficient balance', () => {
       const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('10', 18, 'ETH') // More than 1 ETH balance
       act(() => {
         result.current.setToAddress('0x1234567890abcdef1234567890abcdef12345678')
-        result.current.setAmount('10') // More than 1 ETH balance
+        result.current.setAmount(amount)
       })
 
       let success: boolean
@@ -214,9 +222,10 @@ describe('useSend', () => {
 
     it('returns true and goes to confirm for valid input', () => {
       const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('0.5', 18, 'ETH')
       act(() => {
         result.current.setToAddress('0x1234567890abcdef1234567890abcdef12345678')
-        result.current.setAmount('0.5')
+        result.current.setAmount(amount)
       })
 
       let success: boolean
@@ -232,10 +241,11 @@ describe('useSend', () => {
   describe('goBack', () => {
     it('returns to input step', () => {
       const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('0.5', 18, 'ETH')
       // Go to confirm first
       act(() => {
         result.current.setToAddress('0x1234567890abcdef1234567890abcdef12345678')
-        result.current.setAmount('0.5')
+        result.current.setAmount(amount)
       })
       act(() => {
         result.current.goToConfirm()
@@ -254,9 +264,10 @@ describe('useSend', () => {
       vi.useRealTimers() // Need real timers for async
 
       const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('0.5', 18, 'ETH')
       act(() => {
         result.current.setToAddress('0x1234567890abcdef1234567890abcdef12345678')
-        result.current.setAmount('0.5')
+        result.current.setAmount(amount)
         result.current.goToConfirm()
       })
 
@@ -281,9 +292,10 @@ describe('useSend', () => {
   describe('reset', () => {
     it('resets to initial state', () => {
       const { result } = renderHook(() => useSend({ initialAsset: mockAsset }))
+      const amount = Amount.fromFormatted('0.5', 18, 'ETH')
       act(() => {
         result.current.setToAddress('0x1234567890abcdef1234567890abcdef12345678')
-        result.current.setAmount('0.5')
+        result.current.setAmount(amount)
         result.current.goToConfirm()
       })
 
@@ -293,7 +305,7 @@ describe('useSend', () => {
 
       expect(result.current.state.step).toBe('input')
       expect(result.current.state.toAddress).toBe('')
-      expect(result.current.state.amount).toBe('')
+      expect(result.current.state.amount).toBeNull()
       expect(result.current.state.asset).toEqual(mockAsset) // Keeps initial asset
     })
   })
diff --git a/src/hooks/use-send.ts b/src/hooks/use-send.ts
index 6b8873acd..20e8c8828 100644
--- a/src/hooks/use-send.ts
+++ b/src/hooks/use-send.ts
@@ -26,7 +26,7 @@ export function useSend(options: UseSendOptions = {}): UseSendReturn {
   }, [isBioforestChain])
 
   // Validate amount
-  const validateAmount = useCallback((amount: string, asset: AssetInfo | null): string | null => {
+  const validateAmount = useCallback((amount: Amount | null, asset: AssetInfo | null): string | null => {
     return validateAmountInput(amount, asset)
   }, [])
 
@@ -40,7 +40,7 @@ export function useSend(options: UseSendOptions = {}): UseSendReturn {
   }, [])
 
   // Set amount
-  const setAmount = useCallback((amount: string) => {
+  const setAmount = useCallback((amount: Amount | null) => {
     setState((prev) => ({
       ...prev,
       amount,
@@ -138,7 +138,7 @@ export function useSend(options: UseSendOptions = {}): UseSendReturn {
       return false
     }
 
-    if (state.asset && state.feeAmount) {
+    if (state.asset && state.feeAmount && state.amount) {
       const adjustResult = adjustAmountForFee(state.amount, state.asset, state.feeAmount)
       if (adjustResult.status === 'error') {
         setState((prev) => ({
@@ -147,7 +147,7 @@ export function useSend(options: UseSendOptions = {}): UseSendReturn {
         }))
         return false
       }
-      if (adjustResult.adjustedAmount !== undefined) {
+      if (adjustResult.adjustedAmount) {
         setState((prev) => ({
           ...prev,
           amount: adjustResult.adjustedAmount ?? prev.amount,
@@ -221,8 +221,18 @@ export function useSend(options: UseSendOptions = {}): UseSendReturn {
       errorMessage: null,
     }))
 
-    // Convert formatted amount string to Amount object
-    const sendAmount = Amount.fromFormatted(state.amount, state.asset.decimals, state.asset.assetType)
+    // Amount should never be null here (validated above)
+    if (!state.amount) {
+      setState((prev) => ({
+        ...prev,
+        step: 'result',
+        isSubmitting: false,
+        resultStatus: 'failed',
+        txHash: null,
+        errorMessage: '无效的金额',
+      }))
+      return { status: 'error' as const }
+    }
 
     const result = await submitBioforestTransfer({
       chainConfig,
@@ -230,7 +240,7 @@ export function useSend(options: UseSendOptions = {}): UseSendReturn {
       password,
       fromAddress,
       toAddress: state.toAddress,
-      amount: sendAmount,
+      amount: state.amount,
     })
 
     if (result.status === 'password') {
diff --git a/src/hooks/use-send.types.ts b/src/hooks/use-send.types.ts
index 6d2eda642..a9abc6d30 100644
--- a/src/hooks/use-send.types.ts
+++ b/src/hooks/use-send.types.ts
@@ -16,8 +16,8 @@ export interface SendState {
   asset: AssetInfo | null
   /** Recipient address */
   toAddress: string
-  /** Amount to send (user-friendly format) */
-  amount: string
+  /** Amount to send (as Amount object, null if empty/invalid) */
+  amount: Amount | null
   /** Address validation error */
   addressError: string | null
   /** Amount validation error */
@@ -56,8 +56,8 @@ export interface UseSendReturn {
   state: SendState
   /** Set recipient address */
   setToAddress: (address: string) => void
-  /** Set amount */
-  setAmount: (amount: string) => void
+  /** Set amount (Amount object or null for empty/invalid) */
+  setAmount: (amount: Amount | null) => void
   /** Set asset */
   setAsset: (asset: AssetInfo) => void
   /** Validate and go to confirm */
diff --git a/src/pages/send/index.tsx b/src/pages/send/index.tsx
index 078f502fe..abe907c83 100644
--- a/src/pages/send/index.tsx
+++ b/src/pages/send/index.tsx
@@ -92,13 +92,16 @@ export function SendPage() {
     if (initialAddress && !state.toAddress) {
       setToAddress(initialAddress);
     }
-    if (initialAmount && !state.amount) {
-      setAmount(initialAmount);
+    if (initialAmount && !state.amount && state.asset) {
+      const parsedAmount = Amount.tryFromFormatted(initialAmount, state.asset.decimals, state.asset.assetType);
+      if (parsedAmount) {
+        setAmount(parsedAmount);
+      }
     }
-  }, [initialAddress, initialAmount, state.toAddress, state.amount, setToAddress, setAmount]);
+  }, [initialAddress, initialAmount, state.toAddress, state.amount, state.asset, setToAddress, setAmount]);
 
-  // Derive formatted values
-  const balance = state.asset ? state.asset.amount.toFormatted() : '0';
+  // Derive formatted values for display
+  const balance = state.asset?.amount ?? null;
   const symbol = state.asset?.assetType ?? 'TOKEN';
 
   const handleScan = async () => {
@@ -185,7 +188,7 @@ export function SendPage() {
         <PageHeader title={t('sendPage.resultTitle')} />
         <SendResult
           status={state.step === 'sending' ? 'pending' : (state.resultStatus ?? 'pending')}
-          amount={state.amount}
+          amount={state.amount?.toFormatted() ?? '0'}
           symbol={symbol}
           toAddress={state.toAddress}
           txHash={state.txHash ?? undefined}
@@ -222,13 +225,12 @@ export function SendPage() {
         {/* Amount input */}
         <AmountInput
           label={t('sendPage.amountLabel')}
-          value={state.amount}
+          value={state.amount ?? undefined}
           onChange={setAmount}
-          balance={balance}
+          balance={balance ?? undefined}
           symbol={symbol}
-          max={balance}
           error={state.amountError ?? undefined}
-          fiatValue={state.amount ? `${parseFloat(state.amount).toFixed(2)}` : undefined}
+          fiatValue={state.amount ? state.amount.toNumber().toFixed(2) : undefined}
         />
 
         {/* Network warning */}
@@ -248,7 +250,7 @@ export function SendPage() {
         open={state.step === 'confirm'}
         onClose={goBack}
         onConfirm={handleConfirm}
-        amount={state.amount}
+        amount={state.amount?.toFormatted() ?? '0'}
         symbol={symbol}
         toAddress={state.toAddress}
         feeAmount={state.feeAmount?.toFormatted() ?? '0'}