diff --git a/apps/minifront/src/components/v2/transfer-layout/send-page/index.tsx b/apps/minifront/src/components/v2/transfer-layout/send-page/index.tsx index 2b126f85e..b85f5642e 100644 --- a/apps/minifront/src/components/v2/transfer-layout/send-page/index.tsx +++ b/apps/minifront/src/components/v2/transfer-layout/send-page/index.tsx @@ -2,11 +2,30 @@ import { Card } from '@repo/ui/Card'; import { FormField } from '@repo/ui/FormField'; import { SegmentedControl } from '@repo/ui/SegmentedControl'; import { TextInput } from '@repo/ui/TextInput'; -import { useStore } from '../../../../state'; -import { sendSelector } from '../../../../state/send'; +import { AllSlices } from '../../../../state'; +import { sendValidationErrors } from '../../../../state/send'; import { FeeTier_Tier } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/fee/v1/fee_pb'; import { Button } from '@repo/ui/Button'; import { ArrowUpFromDot } from 'lucide-react'; +import { useMemo } from 'react'; +import { useStoreShallow } from '../../../../utils/use-store-shallow'; + +const sendPageSelector = (state: AllSlices) => ({ + selection: state.send.selection, + amount: state.send.amount, + recipient: state.send.recipient, + memo: state.send.memo, + fee: state.send.fee, + feeTier: state.send.feeTier, + assetFeeMetadata: state.send.assetFeeMetadata, + setAmount: state.send.setAmount, + setSelection: state.send.setSelection, + setRecipient: state.send.setRecipient, + setFeeTier: state.send.setFeeTier, + setMemo: state.send.setMemo, + sendTx: state.send.sendTx, + txInProgress: state.send.txInProgress, +}); const FEE_TIER_OPTIONS = [ { @@ -39,7 +58,21 @@ export const SendPage = () => { setMemo, sendTx, txInProgress, - } = useStore(sendSelector); + } = useStoreShallow(sendPageSelector); + + const validationErrors = useMemo(() => { + return sendValidationErrors(selection, amount, recipient); + }, [selection, amount, recipient]); + + const submitButtonDisabled = useMemo( + () => + !Number(amount) || + !recipient || + !!Object.values(validationErrors).find(Boolean) || + txInProgress || + !selection, + [amount, recipient, validationErrors, txInProgress, selection], + ); return ( <> @@ -57,6 +90,7 @@ export const SendPage = () => { value={amount} onChange={setAmount} placeholder='Amount to send...' + min={0} /> @@ -74,7 +108,12 @@ export const SendPage = () => { -