Tweak some logic on the send page

penumbra-zone · Aug 10, 2024 · 89b7cf7 · 89b7cf7
1 parent 8b7c38c
commit 89b7cf7
Showing 1 changed file with 43 additions and 4 deletions.
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
@@ -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}
             />
           </FormField>
         </Card.Section>
@@ -74,7 +108,12 @@ export const SendPage = () => {
         </Card.Section>
       </Card.Stack>
 
-      <Button type='submit' icon={ArrowUpFromDot} actionType='accent'>
+      <Button
+        type='submit'
+        icon={ArrowUpFromDot}
+        actionType='accent'
+        disabled={submitButtonDisabled}
+      >
         Send
       </Button>
     </>