Merge pull request #438 from dkackman/default-fee

Rigidity · web-flow · commit 1081d253cc8a · 2025-05-21T01:19:14.000-04:00
Default fee
diff --git a/src/components/AssignNftDialog.tsx b/src/components/AssignNftDialog.tsx
@@ -25,7 +25,7 @@ import {
   FormLabel,
   FormMessage,
 } from './ui/form';
-import { TokenAmountInput } from './ui/masked-input';
+import { FeeAmountInput } from './ui/masked-input';
 import {
   Select,
   SelectContent,
@@ -61,10 +61,6 @@ export function AssignNftDialog({
 
   const form = useForm<z.infer<typeof schema>>({
     resolver: zodResolver(schema),
-    defaultValues: {
-      profile: '',
-      fee: '0',
-    },
   });
 
   const handler = (values: z.infer<typeof schema>) => {
@@ -133,10 +129,7 @@ export function AssignNftDialog({
                     <Trans>Network Fee</Trans>
                   </FormLabel>
                   <FormControl>
-                    <TokenAmountInput
-                      {...field}
-                      aria-label={t`Network fee amount`}
-                    />
+                    <FeeAmountInput {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
diff --git a/src/components/CoinsCard.tsx b/src/components/CoinsCard.tsx
@@ -38,6 +38,7 @@ import {
   commands,
   TransactionResponse,
 } from '../bindings';
+import { FeeAmountInput } from './ui/masked-input';
 
 interface CoinsCardProps {
   precision: number;
@@ -204,9 +205,6 @@ export function CoinsCard({
 
   const combineForm = useForm<z.infer<typeof combineFormSchema>>({
     resolver: zodResolver(combineFormSchema),
-    defaultValues: {
-      combineFee: '0',
-    },
   });
 
   const onCombineSubmit = (values: z.infer<typeof combineFormSchema>) => {
@@ -255,7 +253,6 @@ export function CoinsCard({
     resolver: zodResolver(splitFormSchema),
     defaultValues: {
       outputCount: 2,
-      splitFee: '0',
     },
   });
 
@@ -307,7 +304,6 @@ export function CoinsCard({
   const autoCombineForm = useForm<z.infer<typeof autoCombineFormSchema>>({
     resolver: zodResolver(autoCombineFormSchema),
     defaultValues: {
-      autoCombineFee: '0',
       maxCoins: '100',
       maxCoinAmount: '',
     },
@@ -459,7 +455,7 @@ export function CoinsCard({
                       <Trans>Network Fee</Trans>
                     </FormLabel>
                     <FormControl>
-                      <Input {...field} />
+                      <FeeAmountInput {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -527,7 +523,7 @@ export function CoinsCard({
                       <Trans>Network Fee</Trans>
                     </FormLabel>
                     <FormControl>
-                      <Input {...field} />
+                      <FeeAmountInput {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -577,7 +573,7 @@ export function CoinsCard({
                       <Trans>Network Fee</Trans>
                     </FormLabel>
                     <FormControl>
-                      <Input {...field} />
+                      <FeeAmountInput {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
diff --git a/src/components/FeeOnlyDialog.tsx b/src/components/FeeOnlyDialog.tsx
@@ -24,7 +24,7 @@ import {
   FormLabel,
   FormMessage,
 } from './ui/form';
-import { TokenAmountInput } from './ui/masked-input';
+import { FeeAmountInput } from './ui/masked-input';
 
 export interface FeeOnlyDialogProps {
   title: string;
@@ -53,9 +53,6 @@ export function FeeOnlyDialog({
 
   const form = useForm<z.infer<typeof schema>>({
     resolver: zodResolver(schema),
-    defaultValues: {
-      fee: '0',
-    },
   });
 
   const handler = (values: z.infer<typeof schema>) => {
@@ -80,11 +77,7 @@ export function FeeOnlyDialog({
                     <Trans>Network Fee</Trans>
                   </FormLabel>
                   <FormControl>
-                    <TokenAmountInput
-                      {...field}
-                      placeholder={t`Enter network fee`}
-                      aria-label={t`Network fee amount`}
-                    />
+                    <FeeAmountInput {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
diff --git a/src/components/NftCard.tsx b/src/components/NftCard.tsx
@@ -65,7 +65,7 @@ import {
   FormMessage,
 } from './ui/form';
 import { Input } from './ui/input';
-import { TokenAmountInput } from './ui/masked-input';
+import { FeeAmountInput } from './ui/masked-input';
 import {
   Select,
   SelectContent,
@@ -200,7 +200,6 @@ export function NftCard({ nft, updateNfts, selectionState }: NftCardProps) {
     defaultValues: {
       url: '',
       kind: 'data',
-      fee: '0',
     },
   });
 
@@ -607,7 +606,7 @@ export function NftCard({ nft, updateNfts, selectionState }: NftCardProps) {
                       <Trans>Network Fee</Trans>
                     </FormLabel>
                     <FormControl>
-                      <TokenAmountInput {...field} />
+                      <FeeAmountInput {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
diff --git a/src/components/TransferDialog.tsx b/src/components/TransferDialog.tsx
@@ -23,7 +23,7 @@ import {
   FormMessage,
 } from './ui/form';
 import { Input } from './ui/input';
-import { TokenAmountInput } from './ui/masked-input';
+import { FeeAmountInput } from './ui/masked-input';
 import { Trans } from '@lingui/react/macro';
 import { t } from '@lingui/core/macro';
 
@@ -55,7 +55,6 @@ export function TransferDialog({
     resolver: zodResolver(schema),
     defaultValues: {
       address: '',
-      fee: '0',
     },
   });
 
@@ -96,10 +95,7 @@ export function TransferDialog({
                     <Trans>Network Fee</Trans>
                   </FormLabel>
                   <FormControl>
-                    <TokenAmountInput
-                      {...field}
-                      placeholder={t`Enter fee amount`}
-                    />
+                    <FeeAmountInput {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
diff --git a/src/components/ui/masked-input.tsx b/src/components/ui/masked-input.tsx
@@ -3,6 +3,8 @@ import * as React from 'react';
 import { NumericFormat, NumericFormatProps } from 'react-number-format';
 import { toast } from 'react-toastify';
 import { Input, InputProps } from './input';
+import { useDefaultFee } from '@/hooks/useDefaultFee';
+import { useWalletState } from '@/state';
 
 interface MaskedInputProps extends NumericFormatProps<InputProps> {
   inputRef?: React.Ref<HTMLInputElement>;
@@ -109,4 +111,58 @@ const IntegerInput = React.forwardRef<HTMLInputElement, IntegerInputProps>(
 
 IntegerInput.displayName = 'IntegerInput';
 
-export { MaskedInput, TokenAmountInput, IntegerInput };
+// Fee input that uses the default fee value as initial value
+interface FeeAmountInputProps extends Omit<XchInputProps, 'value'> {
+  value?: string;
+  className?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onValueChange?: (values: {
+    floatValue: number | undefined;
+    value: string;
+  }) => void;
+}
+
+const FeeAmountInput = React.forwardRef<HTMLInputElement, FeeAmountInputProps>(
+  ({ value, className, onChange, onValueChange, ...props }, ref) => {
+    const { fee: defaultFee } = useDefaultFee();
+    const walletState = useWalletState();
+    const hasSetInitialValue = React.useRef(false);
+
+    // Set initial value when component mounts
+    React.useEffect(() => {
+      if (!value && !hasSetInitialValue.current) {
+        hasSetInitialValue.current = true;
+        if (onChange) {
+          onChange({ target: { value: defaultFee } } as any);
+        }
+        if (onValueChange) {
+          onValueChange({ floatValue: Number(defaultFee), value: defaultFee });
+        }
+      }
+    }, [defaultFee, onChange, onValueChange, value]);
+
+    return (
+      <div className='relative'>
+        <TokenAmountInput
+          {...props}
+          ref={ref}
+          value={value ?? defaultFee}
+          onChange={onChange}
+          onValueChange={onValueChange}
+          placeholder={t`Enter network fee`}
+          aria-label={t`Network fee amount`}
+          className={`pr-12 ${className || ''}`}
+        />
+        <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
+          <span className='text-gray-500 text-sm' id='price-currency'>
+            {walletState.sync.unit.ticker}
+          </span>
+        </div>
+      </div>
+    );
+  },
+);
+
+FeeAmountInput.displayName = 'FeeAmountInput';
+
+export { MaskedInput, TokenAmountInput, IntegerInput, FeeAmountInput };
diff --git a/src/hooks/useDefaultFee.ts b/src/hooks/useDefaultFee.ts
@@ -0,0 +1,38 @@
+import { useLocalStorage } from 'usehooks-ts';
+import * as React from 'react';
+
+export interface DefaultFee {
+  fee: string;
+}
+
+const isValidFee = (value: string): boolean => {
+  const num = parseFloat(value);
+  return !isNaN(num) && num >= 0;
+};
+
+const DEFAULT_FEE = '0';
+
+export function useDefaultFee() {
+  const [defaultFee, setDefaultFee] = useLocalStorage<DefaultFee>(
+    'defaultFee',
+    { fee: DEFAULT_FEE },
+  );
+
+  const setFee = (fee: string) => {
+    if (isValidFee(fee)) {
+      setDefaultFee({ fee });
+    }
+  };
+
+  // Ensure we always have a valid fee value
+  React.useEffect(() => {
+    if (!isValidFee(defaultFee.fee)) {
+      setDefaultFee({ fee: DEFAULT_FEE });
+    }
+  }, [defaultFee.fee, setDefaultFee]);
+
+  return {
+    fee: isValidFee(defaultFee.fee) ? defaultFee.fee : DEFAULT_FEE,
+    setFee,
+  };
+}
diff --git a/src/pages/CreateProfile.tsx b/src/pages/CreateProfile.tsx
@@ -21,7 +21,7 @@ import * as z from 'zod';
 import { commands, TransactionResponse } from '../bindings';
 import Container from '../components/Container';
 import { useWalletState } from '../state';
-import { TokenAmountInput } from '@/components/ui/masked-input';
+import { FeeAmountInput } from '@/components/ui/masked-input';
 import { Trans } from '@lingui/react/macro';
 import { t } from '@lingui/core/macro';
 import { CreateProfileConfirmation } from '@/components/confirmations/CreateProfileConfirmation';
@@ -88,12 +88,7 @@ export default function CreateProfile() {
                     </FormLabel>
                     <FormControl>
                       <div className='relative'>
-                        <TokenAmountInput {...field} className='pr-12' />
-                        <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-                          <span className='text-gray-500 text-sm'>
-                            {walletState.sync.unit.ticker}
-                          </span>
-                        </div>
+                        <FeeAmountInput {...field} className='pr-12' />
                       </div>
                     </FormControl>
                     <FormMessage />
diff --git a/src/pages/IssueToken.tsx b/src/pages/IssueToken.tsx
@@ -21,7 +21,7 @@ import * as z from 'zod';
 import { commands, TransactionResponse } from '../bindings';
 import Container from '../components/Container';
 import { useWalletState } from '../state';
-import { TokenAmountInput } from '@/components/ui/masked-input';
+import { TokenAmountInput, FeeAmountInput } from '@/components/ui/masked-input';
 import { Trans } from '@lingui/react/macro';
 import { t } from '@lingui/core/macro';
 import { TokenConfirmation } from '@/components/confirmations/TokenConfirmation';
@@ -127,16 +127,11 @@ export default function IssueToken() {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>
-                      <Trans>Fee</Trans>
+                      <Trans>Network Fee</Trans>
                     </FormLabel>
                     <FormControl>
                       <div className='relative'>
-                        <TokenAmountInput {...field} className='pr-12' />
-                        <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-                          <span className='text-gray-500 text-sm'>
-                            {walletState.sync.unit.ticker}
-                          </span>
-                        </div>
+                        <FeeAmountInput {...field} className='pr-12' />
                       </div>
                     </FormControl>
                     <FormMessage />
diff --git a/src/pages/MakeOffer.tsx b/src/pages/MakeOffer.tsx
@@ -16,7 +16,11 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { IntegerInput, TokenAmountInput } from '@/components/ui/masked-input';
+import {
+  IntegerInput,
+  TokenAmountInput,
+  FeeAmountInput,
+} from '@/components/ui/masked-input';
 import { Switch } from '@/components/ui/switch';
 import {
   Tooltip,
@@ -202,13 +206,10 @@ export function MakeOffer() {
                 <Trans>Network Fee</Trans>
               </Label>
               <div className='relative'>
-                <TokenAmountInput
+                <FeeAmountInput
                   id='fee'
-                  type='text'
-                  placeholder={'0.00'}
                   className='pr-12'
-                  value={state.fee}
-                  onValueChange={(values) => {
+                  onValueChange={(values: { value: string }) => {
                     setState({
                       fee: values.value,
                     });
diff --git a/src/pages/MintNft.tsx b/src/pages/MintNft.tsx
@@ -34,6 +34,7 @@ import * as z from 'zod';
 import { commands, TransactionResponse } from '../bindings';
 import Container from '../components/Container';
 import { useWalletState } from '../state';
+import { FeeAmountInput } from '@/components/ui/masked-input';
 
 export default function MintNft() {
   const navigate = useNavigate();
@@ -272,17 +273,7 @@ export default function MintNft() {
                     </FormLabel>
                     <FormControl>
                       <div className='relative'>
-                        <Input
-                          type='text'
-                          placeholder={'0.00'}
-                          {...field}
-                          className='pr-12'
-                        />
-                        <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-                          <span className='text-gray-500 text-sm'>
-                            {walletState.sync.unit.ticker}
-                          </span>
-                        </div>
+                        <FeeAmountInput {...field} className='pr-12' />
                       </div>
                     </FormControl>
                     <FormMessage />
diff --git a/src/pages/Offers.tsx b/src/pages/Offers.tsx
diff --git a/src/pages/Send.tsx b/src/pages/Send.tsx
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
diff --git a/src/pages/ViewOffer.tsx b/src/pages/ViewOffer.tsx
