add custom zap amounts

.changeset/new-snakes-remember.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add custom zap amounts to settings

src/components/zap-modal.tsx

@@ -1,7 +1,5 @@
 import {
   Button,
-  ButtonGroup,
-  DefaultIcon,
   Flex,
   IconButton,
   Input,
@@ -35,6 +33,7 @@ import QrCodeSvg from "./qr-code-svg";
 import { CopyIconButton } from "./copy-icon-button";
 import { useIsMobile } from "../hooks/use-is-mobile";
 import settings from "../services/settings";
+import useSubject from "../hooks/use-subject";
 
 type FormValues = {
   amount: number;
@@ -64,6 +63,7 @@ export default function ZapModal({
   const [promptInvoice, setPromptInvoice] = useState<string>();
   const { isOpen: showQr, onToggle: toggleQr } = useDisclosure();
   const isMobile = useIsMobile();
+  const zapAmounts = useSubject(settings.zapAmounts);
 
   const {
     register,
@@ -239,17 +239,18 @@ export default function ZapModal({
                   <Text>{actionName}</Text>
                   <UserLink pubkey={pubkey} />
                 </Flex>
-                <Flex gap="2" alignItems="center">
+                <Flex gap="2" alignItems="center" flexWrap="wrap">
-                  <ButtonGroup>
+                  {zapAmounts.map((amount, i) => (
-                    <Button onClick={() => setValue("amount", 10)}>10</Button>
+                    <Button key={amount + i} onClick={() => setValue("amount", amount)} size="sm" variant="outline">
-                    <Button onClick={() => setValue("amount", 100)}>100</Button>
+                      {amount}
-                    <Button onClick={() => setValue("amount", 500)}>500</Button>
+                    </Button>
-                    <Button onClick={() => setValue("amount", 1000)}>1K</Button>
+                  ))}
-                  </ButtonGroup>
+                </Flex>
+                <Flex gap="2">
                   <InputGroup maxWidth={32}>
                     {!isMobile && (
                       <InputLeftElement pointerEvents="none" color="gray.300" fontSize="1.2em">
-                        <LightningIcon fontSize="1rem" />
+                        <LightningIcon fontSize="1rem" color="yellow.400" />
                       </InputLeftElement>
                     )}
                     <Input
@@ -260,14 +261,14 @@ export default function ZapModal({
                       {...register("amount", { valueAsNumber: true, min: 1, required: true })}
                     />
                   </InputGroup>
+                  {(canZap || lnurlMetadata?.commentAllowed) && (
+                    <Input
+                      placeholder="Comment"
+                      {...register("comment", { maxLength: lnurlMetadata?.commentAllowed ?? 150 })}
+                      autoComplete="off"
+                    />
+                  )}
                 </Flex>
-                {(canZap || lnurlMetadata?.commentAllowed) && (
-                  <Input
-                    placeholder="Comment"
-                    {...register("comment", { maxLength: lnurlMetadata?.commentAllowed ?? 150 })}
-                    autoComplete="off"
-                  />
-                )}
                 <Button leftIcon={<LightningIcon />} type="submit" isLoading={isSubmitting} variant="solid" size="md">
                   {actionName} {getUserDisplayName(metadata, pubkey)} {readablizeSats(watch("amount"))} sats
                 </Button>

src/services/settings.ts

@@ -16,6 +16,7 @@ const settings = {
   showSignatureVerification: new PersistentSubject(false),
   accounts: new PersistentSubject<Account[]>([]),
   lightningPayMode: new PersistentSubject<LightningPayMode>(LightningPayMode.Prompt),
+  zapAmounts: new PersistentSubject<number[]>([50, 200, 500, 1000]),
 };
 
 async function loadSettings() {

src/views/settings/index.tsx

@@ -15,6 +15,7 @@ import {
   FormHelperText,
   Select,
   Link,
+  Input,
 } from "@chakra-ui/react";
 import { useState } from "react";
 import settings, { LightningPayMode } from "../../services/settings";
@@ -22,6 +23,7 @@ import { clearCacheData, deleteDatabase } from "../../services/db";
 import accountService from "../../services/account";
 import useSubject from "../../hooks/use-subject";
 import { GithubIcon, LightningIcon, LogoutIcon } from "../../components/icons";
+import ZapModal from "../../components/zap-modal";
 
 export default function SettingsView() {
   const blurImages = useSubject(settings.blurImages);
@@ -30,6 +32,9 @@ export default function SettingsView() {
   const showReactions = useSubject(settings.showReactions);
   const showSignatureVerification = useSubject(settings.showSignatureVerification);
   const lightningPayMode = useSubject(settings.lightningPayMode);
+  const zapAmounts = useSubject(settings.zapAmounts);
+
+  const [zapInput, setZapInput] = useState(zapAmounts.join(","));
 
   const { colorMode, setColorMode } = useColorMode();
 
@@ -213,6 +218,30 @@ export default function SettingsView() {
                   <span>External: Open an external app using "lightning:" link</span>
                 </FormHelperText>
               </FormControl>
+
+              <FormControl>
+                <FormLabel htmlFor="zap-amounts" mb="0">
+                  Zap Amounts
+                </FormLabel>
+                <Input
+                  id="zap-amounts"
+                  value={zapInput}
+                  onChange={(e) => setZapInput(e.target.value)}
+                  onBlur={() => {
+                    const amounts = zapInput
+                      .split(",")
+                      .map((v) => parseInt(v))
+                      .filter(Boolean)
+                      .sort((a, b) => a - b);
+
+                    settings.zapAmounts.next(amounts);
+                    setZapInput(amounts.join(","));
+                  }}
+                />
+                <FormHelperText>
+                  <span>Comma separated list of custom zap amounts</span>
+                </FormHelperText>
+              </FormControl>
             </Flex>
           </AccordionPanel>
         </AccordionItem>