add default mint to MintField

src/features/wallet/components/editable-lists.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
@@ -7,20 +9,43 @@ interface IEditableList<T> {
   setItems: (items: T[]) => void;
 }
 
-const MintField: StreamfieldComponent<string> = ({ value, onChange }) => {
+const DEFAULT_MINT = 'https://mint.cubabitcoin.org';
+
+const MintField: StreamfieldComponent<string> = ({ value, onChange, index = 0, values = [] }) => {
+  const isFirst = index === 0;
+  const [inputValue, setInputValue] = React.useState('');
+
+  React.useEffect(() => {
+    // Only apply default mint if it's the first field and all fields are still empty
+    const allEmpty = values.every((v) => !v || v.trim() === '');
+    if (isFirst && allEmpty) {
+      setInputValue(DEFAULT_MINT);
+      onChange(DEFAULT_MINT);
+    } else if (value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value, index, values, isFirst, onChange]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.currentTarget.value;
+    setInputValue(newValue);
+    onChange(newValue);
+  };
+
   return (
     <HStack space={2} grow>
       <Input
         type='text'
         placeholder='https://mint.example.com'
         outerClassName='w-full grow'
-        value={value}
-        onChange={(e) => onChange(e.currentTarget.value)}
+        value={inputValue}
+        onChange={handleChange}
       />
     </HStack>
   );
 };
 
+// Add the index and values props to the Streamfield component in MintEditor
 const MintEditor: React.FC<IEditableList<string>> = ({ items, setItems }) => {
   const handleAdd = () => setItems([...items, '' ]);
   const handleRemove = (index: number) => {
@@ -29,7 +54,15 @@ const MintEditor: React.FC<IEditableList<string>> = ({ items, setItems }) => {
     setItems(newItems);
   };
 
-  return <Streamfield values={items} onChange={setItems} component={MintField} onAddItem={handleAdd} onRemoveItem={handleRemove} />;
+  return (
+    <Streamfield
+      values={items}
+      onChange={setItems}
+      component={(props) => <MintField {...props} index={props.index} values={items} />}
+      onAddItem={handleAdd}
+      onRemoveItem={handleRemove}
+    />
+  );
 };
 
 const RelayField: StreamfieldComponent<string> = ({ value, onChange }) => {