fix: mutation inputs and success view

src/components/convert/confirmation.tsx

@@ -35,7 +35,7 @@ const ConversionConfirmation: React.FC<{
             input: {
               walletId: fromWallet?.id,
               recipientWalletId: toWallet?.id,
-              amount: satAmount.amount,
+              amount: Math.round(satAmount.amount),
             },
           },
         })
@@ -54,7 +54,7 @@ const ConversionConfirmation: React.FC<{
             input: {
               walletId: fromWallet?.id,
               recipientWalletId: toWallet?.id,
-              amount: usdAmount.amount,
+              amount: 100 * usdAmount.amount,
             },
           },
         })

src/components/convert/input.tsx

@@ -145,7 +145,7 @@ const ConversionInput: React.FC<{
       setConvertAmount((currAmount) => ({
         id: currAmount.id + 1,
         currency: "USD",
-        amount: Math.floor((usdWalletBalance * percentage) / 100),
+        amount: Math.floor((100 * usdWalletBalance * percentage) / 100) / 100,
       }))
     }
   }

src/components/pages/receive.tsx

@@ -1,15 +1,16 @@
 import { useState } from "react"
 
-import { translate, NoPropsFCT } from "store/index"
+import { translate, NoPropsFCT, useAppDispatcher } from "store/index"
 
 import Header from "components/header"
 import InvoiceOverview from "components/receive/overview"
 import InvoiceInput from "components/receive/input"
 import useMainQuery from "hooks/use-main-query"
 import { GaloyGQL } from "@galoymoney/client"
+import { SuccessCheckmark } from "@galoymoney/react"
 
 export type ReceiveScreenInput = {
-  view: "overview" | "input"
+  view: "overview" | "input" | "success"
   layer: "lightning" | "onchain"
   currency: "USD" | "SATS"
   amount?: number | ""
@@ -22,6 +23,7 @@ export type ReceiveScreenInput = {
 export type ConvertedValuesType = null | { usd: number; sats?: number }
 
 const Receive: NoPropsFCT = () => {
+  const dispatch = useAppDispatcher()
   const { btcWallet, usdWallet } = useMainQuery()
 
   const [input, setInput] = useState<ReceiveScreenInput>({
@@ -50,12 +52,25 @@ const Receive: NoPropsFCT = () => {
     }))
   }
 
+  const resetReceiveScreen = () => {
+    dispatch({ type: "navigate", path: "/receive" })
+  }
+
   return (
     <div className="receive">
       <Header page="receive-bitcoin" />
 
       <div className="page-title">{translate("Receive Bitcoin")}</div>
 
+      {input.view === "success" && (
+        <div className="invoice-status">
+          <SuccessCheckmark />
+          <button onClick={resetReceiveScreen}>
+            {translate("Receive another payment")}
+          </button>
+        </div>
+      )}
+
       {input.view === "overview" && (
         <InvoiceOverview input={input} setInput={setInput} toggleWallet={toggleWallet} />
       )}

src/components/receive/invoice-details.tsx

@@ -1,20 +1,22 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { QRCode } from "react-qrcode-logo"
 import copy from "copy-to-clipboard"
 
 import { formatUsd, GaloyGQL, satsToBTC } from "@galoymoney/client"
-import { SatFormat, SuccessCheckmark } from "@galoymoney/react"
+import { SatFormat } from "@galoymoney/react"
 
-import { translate, useAppDispatcher } from "store/index"
+import { translate } from "store/index"
 import useMyUpdates from "hooks/use-my-updates"
+import useMainQuery from "hooks/use-main-query"
 
 type LightningInvoiceFCT = React.FC<{
   invoice: Pick<GaloyGQL.LnInvoice, "paymentHash" | "paymentRequest">
   onPaymentSuccess?: () => void
 }>
 
 const LightningInvoice: LightningInvoiceFCT = ({ invoice, onPaymentSuccess }) => {
-  const dispatch = useAppDispatcher()
+  const { refetch } = useMainQuery()
+
   const { lnUpdate } = useMyUpdates()
   const [showCopied, setShowCopied] = useState(false)
 
@@ -24,27 +26,15 @@ const LightningInvoice: LightningInvoiceFCT = ({ invoice, onPaymentSuccess }) =>
     setTimeout(() => setShowCopied(false), 3000)
   }
 
-  const resetReceiveScreen = () => {
-    dispatch({ type: "navigate", path: "/receive" })
-  }
-
   const invoicePaid =
     lnUpdate?.paymentHash === invoice?.paymentHash && lnUpdate?.status === "PAID"
 
-  if (invoicePaid) {
-    if (onPaymentSuccess) {
+  useEffect(() => {
+    if (invoicePaid && onPaymentSuccess) {
+      refetch()
       onPaymentSuccess()
     }
-
-    return (
-      <div className="invoice-status">
-        <SuccessCheckmark />
-        <button onClick={resetReceiveScreen}>
-          {translate("Receive another payment")}
-        </button>
-      </div>
-    )
-  }
+  }, [invoicePaid, onPaymentSuccess, refetch])
 
   const { paymentRequest } = invoice
 

src/components/receive/invoice-generator.tsx

@@ -37,6 +37,7 @@ type AmountInvoiceFCT = React.FC<{
   memo: string
   satAmount: number
   usdAmount: number
+  onPaymentSuccess: () => void
 }>
 
 const BtcAmountInvoiceGenerator: AmountInvoiceFCT = ({
@@ -47,6 +48,7 @@ const BtcAmountInvoiceGenerator: AmountInvoiceFCT = ({
   currency,
   satAmount,
   usdAmount,
+  onPaymentSuccess,
 }) => {
   const [invoiceStatus, setInvoiceStatus] = useState<undefined | "new" | "expired">()
 
@@ -106,7 +108,7 @@ const BtcAmountInvoiceGenerator: AmountInvoiceFCT = ({
           </div>
         </div>
       )}
-      <LightningInvoice invoice={invoice} onPaymentSuccess={clearTimers} />
+      <LightningInvoice invoice={invoice} onPaymentSuccess={onPaymentSuccess} />
       <div className="amount-description">
         <div className="amount-primarys">
           <SatFormat amount={satAmount} />
@@ -121,8 +123,8 @@ const UsdAmountInvoiceGenerator: AmountInvoiceFCT = ({
   wallet,
   regenerate,
   memo,
-  satAmount,
   usdAmount,
+  onPaymentSuccess,
 }) => {
   const [invoiceStatus, setInvoiceStatus] = useState<undefined | "new" | "expired">()
 
@@ -135,12 +137,12 @@ const UsdAmountInvoiceGenerator: AmountInvoiceFCT = ({
 
   useEffect(() => {
     createInvoice({
-      variables: { input: { walletId: wallet.id, amount: satAmount, memo } },
+      variables: { input: { walletId: wallet.id, amount: 100 * usdAmount, memo } },
     })
 
     return () => stopCountdownTimer()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [createInvoice, memo, satAmount, wallet.id])
+  }, [createInvoice, memo, usdAmount, wallet.id])
 
   const invoice = data?.lnUsdInvoiceCreate?.invoice
 
@@ -178,7 +180,7 @@ const UsdAmountInvoiceGenerator: AmountInvoiceFCT = ({
 
   return (
     <>
-      <LightningInvoice invoice={invoice} onPaymentSuccess={() => stopCountdownTimer()} />
+      <LightningInvoice invoice={invoice} onPaymentSuccess={onPaymentSuccess} />
       <div className="amount-description">
         <div className="amount-primary">{formatUsd(usdAmount)}</div>
       </div>
@@ -199,9 +201,15 @@ type NoAmountInvoiceFCT = React.FC<{
   wallet: GaloyGQL.Wallet
   regenerate: () => void
   memo: string
+  onPaymentSuccess: () => void
 }>
 
-const NoAmountInvoiceGenerator: NoAmountInvoiceFCT = ({ wallet, regenerate, memo }) => {
+const NoAmountInvoiceGenerator: NoAmountInvoiceFCT = ({
+  wallet,
+  regenerate,
+  memo,
+  onPaymentSuccess,
+}) => {
   const [invoiceStatus, setInvoiceStatus] = useState<undefined | "new" | "expired">()
 
   const timerIds = useRef<number[]>([])
@@ -245,7 +253,7 @@ const NoAmountInvoiceGenerator: NoAmountInvoiceFCT = ({ wallet, regenerate, memo
 
   return (
     <>
-      <LightningInvoice invoice={invoice} onPaymentSuccess={clearTimers} />
+      <LightningInvoice invoice={invoice} onPaymentSuccess={onPaymentSuccess} />
       <div className="amount-description">{translate("Flexible Amount Invoice")}</div>
     </>
   )
@@ -269,6 +277,7 @@ const InvoiceGenerator: AmountInvoiceFCT = (props) => {
         wallet={props.wallet}
         regenerate={props.regenerate}
         memo={props.memo}
+        onPaymentSuccess={props.onPaymentSuccess}
       />
     )
   }

src/components/receive/overview.tsx

@@ -84,6 +84,14 @@ const InvoiceOverview: FCT = ({ input, setInput, toggleWallet }) => {
           memo={input.memo as string}
           satAmount={input.satAmount as number}
           usdAmount={input.usdAmount as number}
+          onPaymentSuccess={() =>
+            setInput((currInput) => ({
+              ...currInput,
+              satAmount: NaN,
+              usdAmount: NaN,
+              view: "success",
+            }))
+          }
         />
       )
     )

src/components/send/send-action.tsx

@@ -35,7 +35,7 @@ import { formatSats, formatUsd } from "@galoymoney/client"
 
 export type SendActionProps = SendScreenInput & {
   btcWalletId: string
-  btcWalletBalance: number
+  usdWalletId: string | undefined
   reset: () => void
 }
 
@@ -46,7 +46,7 @@ type FCT = React.FC<{
 
 const SendAction: FCT = ({ children, input }) => {
   const dispatch = useAppDispatcher()
-  const { btcWalletId, btcWalletBalance, usdWalletBalance } = useMainQuery()
+  const { btcWalletId, btcWalletBalance, usdWalletId, usdWalletBalance } = useMainQuery()
 
   const reset = useCallback(() => {
     dispatch({ type: "navigate", path: "/send" })
@@ -118,7 +118,7 @@ const SendAction: FCT = ({ children, input }) => {
   const sendActionProps = {
     ...input,
     btcWalletId,
-    btcWalletBalance,
+    usdWalletId,
     reset,
   }
 

src/components/send/send-intra-ledger-action.tsx

@@ -3,6 +3,7 @@ import { MouseEvent } from "react"
 
 import SendActionDisplay from "components/send/send-action-display"
 import { SendActionProps } from "components/send/send-action"
+import useMainQuery from "hooks/use-main-query"
 
 export type SendIntraLedgerActionProps = SendActionProps & {
   recipientWalletId: string
@@ -12,8 +13,14 @@ export type SendIntraLedgerActionProps = SendActionProps & {
 type FCT = React.FC<SendIntraLedgerActionProps>
 
 const SendIntraLedgerAction: FCT = (props) => {
+  const { refetch } = useMainQuery()
+
   const [sendPayment, { loading, errorsMessage, data }] =
-    useMutation.intraLedgerPaymentSend()
+    useMutation.intraLedgerPaymentSend({
+      onCompleted: () => {
+        refetch()
+      },
+    })
 
   const handleSend = (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()

src/components/send/send-intra-ledger-usd-action.tsx

@@ -3,24 +3,32 @@ import { MouseEvent } from "react"
 
 import SendActionDisplay from "components/send/send-action-display"
 import { SendActionProps } from "components/send/send-action"
+import useMainQuery from "hooks/use-main-query"
 
 export type SendIntraLedgerUsdActionProps = SendActionProps & {
+  usdWalletId: string
   recipientWalletId: string
   usdAmount: number
 }
 
 type FCT = React.FC<SendIntraLedgerUsdActionProps>
 
 const SendIntraLedgerUsdAction: FCT = (props) => {
+  const { refetch } = useMainQuery()
+
   const [sendPayment, { loading, errorsMessage, data }] =
-    useMutation.intraLedgerUsdPaymentSend()
+    useMutation.intraLedgerUsdPaymentSend({
+      onCompleted: () => {
+        refetch()
+      },
+    })
 
   const handleSend = (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
     sendPayment({
       variables: {
         input: {
-          walletId: props.btcWalletId,
+          walletId: props.usdWalletId,
           recipientWalletId: props.recipientWalletId,
           amount: 100 * props.usdAmount,
           memo: props.memo,

src/components/send/send-ln-action.tsx

@@ -4,6 +4,7 @@ import { useMutation } from "@galoymoney/client"
 
 import SendActionDisplay from "components/send/send-action-display"
 import { SendActionProps } from "components/send/send-action"
+import useMainQuery from "hooks/use-main-query"
 
 export type SendLnActionProps = SendActionProps & {
   paymentRequest: string
@@ -12,8 +13,14 @@ export type SendLnActionProps = SendActionProps & {
 type SendLnActionFCT = React.FC<SendLnActionProps>
 
 export const SendLnInvoiceAction: SendLnActionFCT = (props) => {
+  const { refetch } = useMainQuery()
+
   const [sendPayment, { loading, data, errorsMessage: paymentError }] =
-    useMutation.lnInvoicePaymentSend()
+    useMutation.lnInvoicePaymentSend({
+      onCompleted: () => {
+        refetch()
+      },
+    })
 
   const [
     propeForFee,

src/components/send/send-ln-usd-action.tsx

@@ -4,6 +4,7 @@ import { GaloyGQL, useMutation } from "@galoymoney/client"
 
 import SendActionDisplay from "components/send/send-action-display"
 import { SendActionProps } from "components/send/send-action"
+import useMainQuery from "hooks/use-main-query"
 
 export type SendLnUsdActionProps = SendActionProps & {
   fromWallet: GaloyGQL.Wallet
@@ -13,8 +14,14 @@ export type SendLnUsdActionProps = SendActionProps & {
 type SendLnUsdActionFCT = React.FC<SendLnUsdActionProps>
 
 export const SendLnUsdInvoiceAction: SendLnUsdActionFCT = (props) => {
+  const { refetch } = useMainQuery()
+
   const [sendPayment, { loading, data, errorsMessage: paymentError }] =
-    useMutation.lnInvoicePaymentSend()
+    useMutation.lnInvoicePaymentSend({
+      onCompleted: () => {
+        refetch()
+      },
+    })
 
   const [
     propeForFee,