Better custom payment methods

.github/ISSUE_TEMPLATE/payment_method.md

@@ -0,0 +1,24 @@
+---
+name: New payment method
+about: Suggest a new payment method to be included in our list
+title: ''
+labels: 'Payment method'
+assignees: ''
+
+---
+
+**Payment method official name**
+
+-
+
+**Payment method URL**
+
+-
+
+**Payment method icon**
+
+-
+
+**Additional context**
+
+Add any other context or screenshots. Be aware to not reveal any personal data.

.pre-commit-config.yaml

@@ -23,44 +23,44 @@ repos:
       - id: collect-phrases
         name: Collect i18n phrases
         stages:
-          - commit
-          - merge-commit
+          - pre-commit
+          - pre-merge-commit
         language: system
         files: ^frontend/src/
         types_or: [javascript, jsx, ts, tsx] # uses https://github.com/pre-commit/identify
         entry: bash -c 'cd frontend/static/locales && python3 collect_phrases.py'
       - id: prettier-frontend
         name: prettier-frontend
         stages:
-          - commit
-          - merge-commit
+          - pre-commit
+          - pre-merge-commit
         language: system
         files: ^frontend/
         types_or: [javascript, jsx, ts, tsx, css, markdown, json] # uses https://github.com/pre-commit/identify
         entry: bash -c 'cd frontend && npm run format'
       - id: lintern-frontend
         name: lintern-frontend
         stages:
-          - commit
-          - merge-commit
+          - pre-commit
+          - pre-merge-commit
         language: system
         files: ^frontend/
         types_or: [javascript, jsx, ts, tsx, css, markdown, json] # uses https://github.com/pre-commit/identify
         entry: bash -c 'cd frontend && npm run lint'
       - id: prettier-mobile
         name: prettier-mobile
         stages:
-          - commit
-          - merge-commit
+          - pre-commit
+          - pre-merge-commit
         language: system
         files: ^mobile/
         types_or: [javascript, jsx, ts, tsx, css, markdown, json] # uses https://github.com/pre-commit/identify
         entry: bash -c 'cd mobile && npm run format'
       - id: lintern-mobile
         name: lintern-mobile
         stages:
-          - commit
-          - merge-commit
+          - pre-commit
+          - pre-merge-commit
         language: system
         files: ^mobile/
         types_or: [javascript, jsx, ts, tsx, css, markdown, json] # uses https://github.com/pre-commit/identify
@@ -70,15 +70,15 @@ repos:
     hooks:
     - id: ruff
       stages:
-        - commit
-        - merge-commit
+        - pre-commit
+        - pre-merge-commit
       language: system
       args: [ --fix ]
       types: [python]
     - id: ruff-format
       stages:
-        - commit
-        - merge-commit
+        - pre-commit
+        - pre-merge-commit
       language: system
       types: [python]
 

frontend/src/basic/RobotPage/TokenInput.tsx

@@ -10,6 +10,7 @@ interface TokenInputProps {
   editable?: boolean;
   fullWidth?: boolean;
   loading?: boolean;
+  inputRef?: React.Ref<HTMLElement>;
   inputToken: string;
   autoFocusTarget?: 'textfield' | 'copyButton' | 'none';
   onPressEnter: () => void;
@@ -23,6 +24,7 @@ const TokenInput = ({
   editable = true,
   showCopy = true,
   label,
+  inputRef,
   fullWidth = true,
   onPressEnter,
   autoFocusTarget = 'textfield',
@@ -71,6 +73,7 @@ const TokenInput = ({
         autoFocus={autoFocusTarget === 'textfield'}
         fullWidth={fullWidth}
         sx={{ borderColor: 'primary' }}
+        inputRef={inputRef}
         variant={editable ? 'outlined' : 'filled'}
         helperText={badToken}
         size='medium'

frontend/src/components/Dialogs/AddNewPaymentMethodDialog.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Dialog,
+  DialogTitle,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  Button,
+  Box,
+  Typography,
+  Link,
+  TextField,
+  Grid,
+} from '@mui/material';
+import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
+
+interface AddNewPaymentMethodDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (newPaymentMethod: string) => void;
+}
+
+const AddNewPaymentMethodDialog = ({
+  open,
+  onClose,
+  onConfirm,
+}: AddNewPaymentMethodDialogProps): React.JSX.Element => {
+  const { t } = useTranslation();
+  const [newPaymentMethod, setNewPaymentMethod] = useState<string>();
+  const [badInput, setBadInput] = useState<string>();
+  const textFieldRef = React.useRef<HTMLDivElement>(null);
+
+  const handleOnSuccess = () => {
+    if (newPaymentMethod) {
+      onConfirm(newPaymentMethod);
+      setNewPaymentMethod(undefined);
+      setBadInput(undefined);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      const timer = setTimeout(() => {
+        textFieldRef.current?.focus();
+      }, 100); // Delay for 100 milliseconds
+      return () => clearTimeout(timer); // Cleanup the timer
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth>
+      <DialogTitle>
+        <Box display='flex' alignItems='center' gap={1}>
+          <DashboardCustomizeIcon color='primary' />
+          {t('Add custom payment method')}
+        </Box>
+      </DialogTitle>
+
+      <DialogContent>
+        <DialogContentText component='div'>
+          <Typography variant='body1' gutterBottom>
+            {t("Can't find your favorite payment method in the list?")}
+          </Typography>
+
+          <Typography variant='body2' sx={{ mt: 2 }}>
+            {t('Use this free input to add any payment method you would like to offer.')}
+          </Typography>
+
+          <Grid item style={{ width: '100%' }} sx={{ mt: 2 }}>
+            <TextField
+              required={true}
+              fullWidth
+              label={t('Payment method')}
+              value={newPaymentMethod}
+              inputRef={textFieldRef}
+              error={badInput !== undefined}
+              variant='outlined'
+              helperText={badInput}
+              size='medium'
+              onChange={(e) => {
+                if (e.target.value && e.target.value !== '') {
+                  setNewPaymentMethod(e.target.value);
+                } else {
+                  setNewPaymentMethod(undefined);
+                  setBadInput(t("Can't be empty"));
+                }
+              }}
+            />
+          </Grid>
+
+          <Typography variant='body2' sx={{ mt: 2 }}>
+            {t('If you want to see it available, consider submitting a request on our ')}
+            <Link
+              target='_blank'
+              href='https://github.com/RoboSats/robosats/issues/new?template=payment_method.md'
+              rel='noreferrer'
+            >
+              {t('GitHub')}
+            </Link>
+          </Typography>
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} color='primary'>
+          {t('Cancel')}
+        </Button>
+        <Button
+          onClick={handleOnSuccess}
+          color='primary'
+          variant='contained'
+          disabled={!newPaymentMethod || newPaymentMethod === ''}
+        >
+          {t('Add payment method')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default AddNewPaymentMethodDialog;

frontend/src/components/Dialogs/Recovery.tsx

@@ -19,9 +19,16 @@ const RecoveryDialog = ({ setInputToken, setView }: Props): React.JSX.Element =>
   const { federation } = useContext<UseFederationStoreType>(FederationContext);
   const [recoveryToken, setRecoveryToken] = useState<string>('');
   const [validToken, setValidToken] = useState<boolean>(false);
+  const textFieldRef = React.useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setRecoveryToken('');
+    if (open.recovery) {
+      const timer = setTimeout(() => {
+        textFieldRef.current?.focus();
+      }, 100); // Delay for 100 milliseconds
+      return () => clearTimeout(timer); // Cleanup the timer
+    }
   }, [open.recovery]);
 
   const onClickRecover = (): void => {
@@ -59,6 +66,7 @@ const RecoveryDialog = ({ setInputToken, setView }: Props): React.JSX.Element =>
           <Grid item style={{ width: '100%' }}>
             <TokenInput
               fullWidth
+              inputRef={textFieldRef}
               showCopy={false}
               inputToken={recoveryToken}
               setInputToken={setRecoveryToken}