rename SendSats -> ZapModal

packages/app/src/Components/Embed/Invoice.tsx

@@ -7,7 +7,7 @@ import { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Icon from "@/Components/Icons/Icon";
-import SendSats from "@/Components/SendSats/SendSats";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import { useWallet } from "@/Wallet";
 
 import messages from "../messages";
@@ -36,7 +36,7 @@ export default function Invoice(props: InvoiceProps) {
           <FormattedMessage {...messages.Invoice} />
         </h4>
         <Icon name="zapCircle" className="zap-circle" />
-        <SendSats
+        <ZapModal
           title={formatMessage(messages.PayInvoice)}
           invoice={invoice}
           show={showInvoice}

packages/app/src/Components/Event/Note/NoteFooter/FooterZapButton.tsx

@@ -8,7 +8,7 @@ import { useLongPress } from "use-long-press";
 import { AsyncFooterIcon } from "@/Components/Event/Note/NoteFooter/AsyncFooterIcon";
 import { ZapperQueue } from "@/Components/Event/Note/NoteFooter/ZapperQueue";
 import { ZapsSummary } from "@/Components/Event/ZapsSummary";
-import SendSats from "@/Components/SendSats/SendSats";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import { useInteractionCache } from "@/Hooks/useInteractionCache";
 import useLogin from "@/Hooks/useLogin";
@@ -38,14 +38,14 @@ export const FooterZapButton = ({ ev, zaps }: ZapIconProps) => {
   const link = NostrLink.fromEvent(ev);
   const zapTotal = zaps.reduce((acc, z) => acc + z.amount, 0);
   const didZap = interactionCache.data.zapped || zaps.some(a => a.sender === publicKey);
-  const [tip, setTip] = useState(false);
+  const [showZapModal, setShowZapModal] = useState(false);
   const { formatMessage } = useIntl();
   const [zapping, setZapping] = useState(false);
   const { publisher, system } = useEventPublisher();
   const author = useUserProfile(ev.pubkey);
   const isMine = ev.pubkey === publicKey;
 
-  const longPress = useLongPress(() => setTip(true), { captureEvent: true });
+  const longPress = useLongPress(() => setShowZapModal(true), { captureEvent: true });
 
   const getZapTarget = (): Array<ZapTarget> | undefined => {
     if (ev.tags.some(v => v[0] === "zap")) {
@@ -80,13 +80,13 @@ export const FooterZapButton = ({ ev, zaps }: ZapIconProps) => {
       } catch (e) {
         console.warn("Fast zap failed", e);
         if (!(e instanceof Error) || e.message !== "User rejected") {
-          setTip(true);
+          setShowZapModal(true);
         }
       } finally {
         setZapping(false);
       }
     } else {
-      setTip(true);
+      setShowZapModal(true);
     }
   };
 
@@ -144,13 +144,15 @@ export const FooterZapButton = ({ ev, zaps }: ZapIconProps) => {
             />
             <ZapsSummary zaps={zaps} />
           </div>
-          <SendSats
+          {showZapModal && (
-            targets={getZapTarget()}
+            <ZapModal
-            onClose={() => setTip(false)}
+              targets={getZapTarget()}
-            show={tip}
+              onClose={() => setShowZapModal(false)}
-            note={ev.id}
+              note={ev.id}
-            allocatePool={true}
+              show={true}
-          />
+              allocatePool={true}
+            />
+          )}
         </>
       )}
     </>

packages/app/src/Components/Event/Poll.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
 
 import Spinner from "@/Components/Icons/Spinner";
-import SendSats from "@/Components/SendSats/SendSats";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import useLogin from "@/Hooks/useLogin";
 import { unwrap } from "@/Utils";
@@ -172,7 +172,7 @@ export default function Poll(props: PollProps) {
         {error && <b className="error">{error}</b>}
       </div>
 
-      <SendSats show={invoice !== ""} onClose={() => setInvoice("")} invoice={invoice} />
+      <ZapModal show={invoice !== ""} onClose={() => setInvoice("")} invoice={invoice} />
     </>
   );
 }

packages/app/src/Components/Event/ZapButton.tsx

@@ -5,7 +5,7 @@ import { useUserProfile } from "@snort/system-react";
 import { useState } from "react";
 
 import Icon from "@/Components/Icons/Icon";
-import SendSats from "@/Components/SendSats/SendSats";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import { ZapTarget } from "@/Utils/Zapper";
 
 const ZapButton = ({
@@ -30,7 +30,7 @@ const ZapButton = ({
         <Icon name="zap-solid" />
         {children}
       </button>
-      <SendSats
+      <ZapModal
         targets={[
           {
             type: "lnurl",

packages/app/src/Components/Event/ZapGoal.tsx

@@ -6,13 +6,12 @@ import { FormattedNumber } from "react-intl";
 
 import Icon from "@/Components/Icons/Icon";
 import Progress from "@/Components/Progress/Progress";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import useZapsFeed from "@/Feed/ZapsFeed";
 import { findTag } from "@/Utils";
 import { formatShort } from "@/Utils/Number";
 import { Zapper } from "@/Utils/Zapper";
 
-import SendSats from "../SendSats/SendSats";
-
 export function ZapGoal({ ev }: { ev: NostrEvent }) {
   const [zap, setZap] = useState(false);
   const zaps = useZapsFeed(NostrLink.fromEvent(ev));
@@ -27,7 +26,7 @@ export function ZapGoal({ ev }: { ev: NostrEvent }) {
         <div className="zap-button flex" onClick={() => setZap(true)}>
           <Icon name="zap" size={15} />
         </div>
-        <SendSats targets={Zapper.fromEvent(ev)} show={zap} onClose={() => setZap(false)} />
+        <ZapModal targets={Zapper.fromEvent(ev)} show={zap} onClose={() => setZap(false)} />
       </div>
 
       <div className="flex justify-between">

packages/app/src/Components/Nip5Service.tsx

@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { UserCache } from "@/Cache";
 import AsyncButton from "@/Components/Button/AsyncButton";
 import Copy from "@/Components/Copy/Copy";
-import SendSats from "@/Components/SendSats/SendSats";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import useLogin from "@/Hooks/useLogin";
 import { unwrap } from "@/Utils";
@@ -298,7 +298,7 @@ export default function Nip5Service(props: Nip05ServiceProps) {
           </b>
         </div>
       )}
-      <SendSats
+      <ZapModal
         invoice={registerResponse?.invoice}
         show={showInvoice}
         onClose={() => setShowInvoice(false)}

packages/app/src/Components/ZapModal/ZapModal.tsx

@@ -1,4 +1,4 @@
-import "./SendSats.css";
+import "./ZapModal.css";
 
 import { LNURLSuccessAction } from "@snort/shared";
 import { HexKey } from "@snort/system";
@@ -6,11 +6,11 @@ import React, { ReactNode, useEffect, useState } from "react";
 
 import CloseButton from "@/Components/Button/CloseButton";
 import Modal from "@/Components/Modal/Modal";
-import { SendSatsInput, SendSatsInputSelection } from "@/Components/SendSats/SendSatsInput";
+import { SuccessAction } from "@/Components/ZapModal/SuccessAction";
-import { SendSatsInvoice } from "@/Components/SendSats/SendSatsInvoice";
+import { SendSatsInputSelection,ZapModalInput } from "@/Components/ZapModal/ZapModalInput";
-import { SendSatsTitle } from "@/Components/SendSats/SendSatsTitle";
+import { ZapModalInvoice } from "@/Components/ZapModal/ZapModalInvoice";
-import { SuccessAction } from "@/Components/SendSats/SuccessAction";
+import { ZapModalTitle } from "@/Components/ZapModal/ZapModalTitle";
-import { ZapType } from "@/Components/SendSats/ZapType";
+import { ZapType } from "@/Components/ZapModal/ZapType";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import { debounce } from "@/Utils";
 import { Zapper, ZapTarget, ZapTargetResult } from "@/Utils/Zapper";
@@ -27,7 +27,7 @@ export interface SendSatsProps {
   allocatePool?: boolean;
 }
 
-export default function SendSats(props: SendSatsProps) {
+export default function ZapModal(props: SendSatsProps) {
   const onClose = props.onClose || (() => undefined);
 
   const [zapper, setZapper] = useState<Zapper>();
@@ -91,12 +91,12 @@ export default function SendSats(props: SendSatsProps) {
       <div className="p flex flex-col g12">
         <div className="flex g12">
           <div className="flex items-center grow">
-            {props.title || <SendSatsTitle amount={amount} targets={props.targets} zapper={zapper} />}
+            {props.title || <ZapModalTitle amount={amount} targets={props.targets} zapper={zapper} />}
           </div>
           <CloseButton onClick={onClose} />
         </div>
         {zapper && !invoice && (
-          <SendSatsInput
+          <ZapModalInput
             zapper={zapper}
             onChange={v => setAmount(v)}
             onNextStage={async p => {
@@ -129,7 +129,7 @@ export default function SendSats(props: SendSatsProps) {
         )}
         {error && <p className="error">{error}</p>}
         {invoice && !success && (
-          <SendSatsInvoice
+          <ZapModalInvoice
             invoice={invoice}
             wallet={wallet}
             notice={props.notice}

packages/app/src/Components/ZapModal/ZapModalInput.tsx

@@ -4,8 +4,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import AsyncButton from "@/Components/Button/AsyncButton";
 import Icon from "@/Components/Icons/Icon";
 import messages from "@/Components/messages";
-import { SendSatsZapTypeSelector } from "@/Components/SendSats/SendSatsZapTypeSelector";
+import { ZapType } from "@/Components/ZapModal/ZapType";
-import { ZapType } from "@/Components/SendSats/ZapType";
+import { ZapTypeSelector } from "@/Components/ZapModal/ZapTypeSelector";
 import useLogin from "@/Hooks/useLogin";
 import { formatShort } from "@/Utils/Number";
 import { Zapper } from "@/Utils/Zapper";
@@ -16,7 +16,7 @@ export interface SendSatsInputSelection {
   type: ZapType;
 }
 
-export function SendSatsInput(props: {
+export function ZapModalInput(props: {
   zapper: Zapper;
   onChange?: (v: SendSatsInputSelection) => void;
   onNextStage: (v: SendSatsInputSelection) => Promise<void>;
@@ -119,7 +119,7 @@ export function SendSatsInput(props: {
           />
         )}
       </div>
-      <SendSatsZapTypeSelector zapType={zapType} setZapType={setZapType} />
+      <ZapTypeSelector zapType={zapType} setZapType={setZapType} />
       {(amount ?? 0) > 0 && (
         <AsyncButton onClick={() => props.onNextStage(getValue())}>
           <Icon name="zap" />

packages/app/src/Components/ZapModal/ZapModalInvoice.tsx

@@ -6,7 +6,7 @@ import QrCode from "@/Components/QrCode";
 import { ZapTargetResult } from "@/Utils/Zapper";
 import { LNWallet } from "@/Wallet";
 
-export function SendSatsInvoice(props: {
+export function ZapModalInvoice(props: {
   invoice: Array<ZapTargetResult>;
   wallet?: LNWallet;
   notice?: ReactNode;

packages/app/src/Components/ZapModal/ZapModalTitle.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { SendSatsInputSelection } from "@/Components/SendSats/SendSatsInput";
 import ProfileImage from "@/Components/User/ProfileImage";
+import { SendSatsInputSelection } from "@/Components/ZapModal/ZapModalInput";
 import { formatShort } from "@/Utils/Number";
 import { Zapper, ZapTarget } from "@/Utils/Zapper";
 
-export function SendSatsTitle({
+export function ZapModalTitle({
   targets,
   zapper,
   amount,

packages/app/src/Components/ZapModal/ZapTypeSelector.tsx

@@ -1,16 +1,10 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { ZapType } from "@/Components/SendSats/ZapType";
+import { ZapType } from "@/Components/ZapModal/ZapType";
 import useLogin from "@/Hooks/useLogin";
 
-export function SendSatsZapTypeSelector({
+export function ZapTypeSelector({ zapType, setZapType }: { zapType: ZapType; setZapType: (t: ZapType) => void }) {
-  zapType,
-  setZapType,
-}: {
-  zapType: ZapType;
-  setZapType: (t: ZapType) => void;
-}) {
   const { readonly } = useLogin(s => ({ readonly: s.readonly }));
   const makeTab = (t: ZapType, n: React.ReactNode) => (
     <button type="button" className={zapType === t ? "" : "secondary"} onClick={() => setZapType(t)}>

packages/app/src/Pages/Profile/ProfilePage.tsx

@@ -22,7 +22,6 @@ import Icon from "@/Components/Icons/Icon";
 import Modal from "@/Components/Modal/Modal";
 import { ProxyImg } from "@/Components/ProxyImg";
 import QrCode from "@/Components/QrCode";
-import SendSats from "@/Components/SendSats/SendSats";
 import { SpotlightMediaModal } from "@/Components/Spotlight/SpotlightMedia";
 import { Tab, TabElement } from "@/Components/Tabs/Tabs";
 import Text from "@/Components/Text/Text";
@@ -38,6 +37,7 @@ import MutedList from "@/Components/User/MutedList";
 import Nip05 from "@/Components/User/Nip05";
 import ProfileImage from "@/Components/User/ProfileImage";
 import { UserWebsiteLink } from "@/Components/User/UserWebsiteLink";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import useProfileBadges from "@/Feed/BadgesFeed";
 import useFollowsFeed from "@/Feed/FollowsFeed";
 import { useStatusFeed } from "@/Feed/StatusFeed";
@@ -181,7 +181,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
           </div>
         )}
 
-        <SendSats
+        <ZapModal
           targets={
             lnurl?.lnurl && id
               ? [

packages/app/src/Pages/subscribe/RenewSub.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import AsyncButton from "@/Components/Button/AsyncButton";
-import SendSats from "@/Components/SendSats/SendSats";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import SnortApi, { Subscription, SubscriptionError } from "@/External/SnortApi";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import useLogin from "@/Hooks/useLogin";
@@ -72,7 +72,7 @@ export function RenewSub({ sub: s }: { sub?: Subscription }) {
           </AsyncButton>
         </div>
       </div>
-      <SendSats
+      <ZapModal
         invoice={invoice}
         show={invoice !== ""}
         onClose={() => setInvoice("")}

packages/app/src/Pages/subscribe/index.tsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from "react-intl";
 import { RouteObject } from "react-router-dom";
 
 import AsyncButton from "@/Components/Button/AsyncButton";
-import SendSats from "@/Components/SendSats/SendSats";
+import ZapModal from "@/Components/ZapModal/ZapModal";
 import SnortApi, { SubscriptionError } from "@/External/SnortApi";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import ManageSubscriptionPage from "@/Pages/subscribe/ManageSubscription";
@@ -86,7 +86,7 @@ export function SubscribePage() {
         })}
       </div>
       {error && <b className="error">{mapSubscriptionErrorCode(error)}</b>}
-      <SendSats invoice={invoice} show={invoice !== ""} onClose={() => setInvoice("")} />
+      <ZapModal invoice={invoice} show={invoice !== ""} onClose={() => setInvoice("")} />
     </>
   );
 }