SwissBitcoinPay · SwissBitcoinPay · Sep 8, 2024 · Sep 8, 2024
diff --git a/src/assets/images/bitcoin-to-slot.png b/src/assets/images/bitcoin-to-slot.png
diff --git a/src/assets/translations/de.json b/src/assets/translations/de.json
@@ -119,6 +119,8 @@
       "status": "Status",
       "timeLeft": "Verbleibende Zeit",
       "amount": "Betrag",
+      "alreadyPaid": "Bereits bezahlt",
+      "payTheRest": "Bezahlen Sie den Rest ({{sats}} sats) über Lightning oder Onchain",
       "paidOn": "Bezahlt am",
       "awaitingPayment": "Erwartete Zahlung",
       "returningToTerminal": "Rückkehr zum Terminal",

diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
@@ -120,6 +120,8 @@
       "status": "Status",
       "timeLeft": "Time left",
       "amount": "Amount",
+      "alreadyPaid": "Already paid",
+      "payTheRest": "Pay the rest ({{sats}} sats) via Lightning or Onchain",
       "paidOn": "Paid on",
       "awaitingPayment": "Awaiting payment",
       "returningToTerminal": "Returning to terminal",

diff --git a/src/assets/translations/es.json b/src/assets/translations/es.json
@@ -119,6 +119,8 @@
       "status": "Estado",
       "timeLeft": "Tiempo restante",
       "amount": "Importe",
+      "alreadyPaid": "Ya pagado",
+      "payTheRest": "Pagar el resto ({{sats}} sats) a través de Lightning o Onchain",
       "paidOn": "Pagado el",
       "awaitingPayment": "En espera de pago",
       "returningToTerminal": "Volver al terminal",

diff --git a/src/assets/translations/fr.json b/src/assets/translations/fr.json
@@ -120,6 +120,8 @@
       "status": "Statut",
       "timeLeft": "Temps restant",
       "amount": "Montant",
+      "alreadyPaid": "Déjà payé",
+      "payTheRest": "Payez le reste ({{sats}} sats) via Lightning ou Onchain",
       "paidOn": "Payé le",
       "awaitingPayment": "En attente de paiement",
       "returningToTerminal": "Retour au terminal",

diff --git a/src/assets/translations/it.json b/src/assets/translations/it.json
@@ -119,6 +119,8 @@
       "status": "Stato",
       "timeLeft": "Tempo rimanente",
       "amount": "Importo",
+      "alreadyPaid": "Già pagato",
+      "payTheRest": "Pagare il resto ({{sats}} sats) tramite Lightning o Onchain",
       "paidOn": "Pagato il",
       "awaitingPayment": "In attesa di pagamento",
       "returningToTerminal": "Ritorno al terminale",

diff --git a/src/assets/translations/pt.json b/src/assets/translations/pt.json
@@ -119,6 +119,8 @@
       "status": "Estado",
       "timeLeft": "Tempo restante",
       "amount": "Montante",
+      "alreadyPaid": "Já pago",
+      "payTheRest": "Pagar o restante ({{sats}} sats) via Lightning ou Onchain",
       "paidOn": "Pago em",
       "awaitingPayment": "A aguardar pagamento",
       "returningToTerminal": "Regresso ao terminal",

diff --git a/src/screens/Invoice/Invoice.tsx b/src/screens/Invoice/Invoice.tsx
@@ -62,14 +62,12 @@ import {
 import LottieView from "lottie-react-native";
 import * as S from "./styled";
 import { XOR } from "ts-essentials";
+import { numberWithSpaces } from "@utils/numberWithSpaces";
 
 const PAID_ANIMATION_DURATION = 350;
 
 const getTrue = () => true;
 
-const numberWithSpaces = (nb: number) =>
-  nb.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, " ");
-
 const { isWeb, isIos } = platform;
 
 type Status =
@@ -87,6 +85,7 @@ type OnchainTx = {
   network: "onchain";
   address: string;
   txId?: string;
+  amount?: number;
   vout_index?: number;
   confirmations?: number;
   minConfirmations?: number;
@@ -198,7 +197,7 @@ export const Invoice = () => {
   const [paidAt, setPaidAt] = useState<number>();
 
   // Onchain data
-  const [onChainTx, setOnchainTx] = useState<OnchainTx>();
+  const [onChainTxs, setOnchainTxs] = useState<OnchainTx[]>();
 
   const isAlive = useMemo(
     () => !["settled", "expired", "unconfirmed"].includes(status),
@@ -330,7 +329,7 @@ export const Invoice = () => {
   );
 
   const updateInvoice = useCallback(
-    async (getInvoiceData: InvoiceType, isInitialData?: boolean) => {
+    (getInvoiceData: InvoiceType, isInitialData?: boolean) => {
       try {
         const _pr =
           getInvoiceData.paymentDetails.find(
@@ -339,11 +338,9 @@ export const Invoice = () => {
           getInvoiceData.paymentDetails.find((p) => p.network === "lightning")
             ?.paymentRequest;
 
-        const _onChainData =
-          getInvoiceData.paymentDetails.find(
-            (p) => p.network === "onchain" && p.paidAt
-          ) ||
-          getInvoiceData.paymentDetails.find((p) => p.network === "onchain");
+        const unpaidOnchain = getInvoiceData.paymentDetails.find(
+          (p) => p.network === "onchain" && !p.paidAt
+        );
 
         const _paymentMethod = getInvoiceData.paymentDetails.find(
           (p) => p.paidAt
@@ -355,13 +352,17 @@ export const Invoice = () => {
         setDelay(getInvoiceData.expiry - getInvoiceData.time);
         setPr(_pr);
         setReadingNfcData(_pr);
-        setOnChainAddr(_onChainData?.address);
+        setOnChainAddr(unpaidOnchain?.address);
         setAmount(getInvoiceData.amount * 1000);
         setInvoiceCurrency(getInvoiceData.input.unit || "CHF");
         setInvoiceFiatAmount(getInvoiceData.input.amount);
         setStatus(getInvoiceData.status);
         setPaymentMethod(_paymentMethod);
-        setOnchainTx(_onChainData);
+        setOnchainTxs(
+          getInvoiceData.paymentDetails.filter(
+            (p) => p.network === "onchain" && p.paidAt
+          )
+        );
         setPaidAt(getInvoiceData.paidAt);
 
         setIsInit(true);
@@ -387,24 +388,6 @@ export const Invoice = () => {
         if (status === "expired") {
           return;
         }
-
-        if (_paymentMethod === "onchain") {
-          try {
-            const { data: txDetails } = await axios.get(
-              `https://mempool.space/api/tx/${_onChainData?.txId}`
-            );
-            if (txDetails.status.confirmed) {
-              const { data: blockHeight } = await axios.get(
-                "https://mempool.space/api/blocks/tip/height"
-              );
-              setOnchainTx({
-                ..._onChainData,
-                minConfirmations:
-                  blockHeight - txDetails.status.block_height + 1
-              });
-            }
-          } catch (e) {}
-        }
       } catch (e) {
         setIsInvalidInvoice(true);
         return;
@@ -478,6 +461,20 @@ export const Invoice = () => {
     [status, isExternalInvoice]
   );
 
+  const alreadyPaidAmount = useMemo(
+    () => onChainTxs?.reduce((result, o) => result + (o.amount || 0), 0) || 0,
+    [onChainTxs]
+  );
+
+  const { confirmations, minConfirmations } = useMemo(
+    () =>
+      (onChainTxs || []).reduce(
+        (result, o) => (o.confirmations < result.confirmations ? o : result),
+        { confirmations: 100, minConfirmations: 0 }
+      ),
+    [onChainTxs]
+  );
+
   const [isQrModalOpen, setIsQrModalOpen] = useState(false);
 
   const onOpenQrModal = useCallback(() => {
@@ -635,7 +632,7 @@ export const Invoice = () => {
                   />
                 ) : null}
                 {!isAlive && (
-                  <ComponentStack direction="horizontal">
+                  <ComponentStack direction="horizontal" gapSize={8}>
                     {status === "unconfirmed" && (
                       <Loader color={colors.warning} />
                     )}
@@ -741,6 +738,28 @@ export const Invoice = () => {
                     {amount ? numberWithSpaces(amount / 1000) : ""} sats
                   </S.AmountText>
                 )}
+                {alreadyPaidAmount > 0 && status === "underpaid" && (
+                  <>
+                    <S.BitcoinSlotText subAmount color={colors.warning}>
+                      <S.BitcoinSlotImage
+                        source={require("@assets/images/bitcoin-to-slot.png")}
+                      />
+                      {t("alreadyPaid")}: {numberWithSpaces(alreadyPaidAmount)}{" "}
+                      sats
+                    </S.BitcoinSlotText>
+                    <S.BitcoinSlotText
+                      subAmount
+                      color={colors.warning}
+                      style={{ marginTop: 6 }}
+                    >
+                      {t("payTheRest", {
+                        sats: numberWithSpaces(
+                          amount / 1000 - alreadyPaidAmount
+                        )
+                      })}
+                    </S.BitcoinSlotText>
+                  </>
+                )}
               </>
               {status === "settled" &&
                 isExternalInvoice &&
@@ -868,26 +887,32 @@ export const Invoice = () => {
                       .toString()}
                   />
                 )}
-                {onChainTx?.txId && (
-                  <FooterLine
-                    label={t("transactionId")}
-                    url={`https://mempool.space/tx/${onChainTx.txId}${
-                      onChainTx.vout_index !== undefined
-                        ? `#vout=${onChainTx.vout_index}`
-                        : ""
-                    }`}
-                    value={truncate(onChainTx.txId, 16)}
-                  />
-                )}
-                {onChainTx?.confirmations !== undefined && (
-                  <FooterLine
-                    label={t("confirmations")}
-                    value={onChainTx.confirmations.toString()}
-                    {...(status === "unconfirmed"
-                      ? { color: colors.warning }
-                      : {})}
-                  />
-                )}
+                {onChainTxs?.map((tx) => {
+                  const success = tx.confirmations >= tx.minConfirmations;
+                  const color = success ? colors.success : colors.warning;
+
+                  return (
+                    <>
+                      {tx.txId && (
+                        <FooterLine
+                          label={t("transactionId")}
+                          {...(success
+                            ? { prefixIcon: { icon: faCheck, color } }
+                            : {
+                                color: color,
+                                prefixComponent: <Loader size={22} />
+                              })}
+                          url={`https://mempool.space/tx/${tx.txId}${
+                            tx.vout_index !== undefined
+                              ? `#vout=${tx.vout_index}`
+                              : ""
+                          }`}
+                          value={truncate(tx.txId, 16)}
+                        />
+                      )}
+                    </>
+                  );
+                })}
               </S.Section>
             )}
           </S.SectionsContainer>

diff --git a/src/screens/Invoice/components/FooterLine/FooterLine.tsx b/src/screens/Invoice/components/FooterLine/FooterLine.tsx
@@ -60,13 +60,6 @@ export const FooterLine = ({
         target="_blank"
         rel="noopener noreferrer"
       >
-        {(copyable || url) && (
-          <Icon
-            size={ICON_SIZE}
-            icon={url ? faExternalLinkAlt : isCopied ? faCheck : faCopy}
-            color={colors.white}
-          />
-        )}
         {prefixIcon && (
           <Icon
             size={ICON_SIZE}
@@ -75,6 +68,13 @@ export const FooterLine = ({
           />
         )}
         {prefixComponent && cloneElement(prefixComponent, { color })}
+        {(copyable || url) && (
+          <Icon
+            size={ICON_SIZE}
+            icon={url ? faExternalLinkAlt : isCopied ? faCheck : faCopy}
+            color={color || colors.white}
+          />
+        )}
         <S.FooterValue color={color || colors.white}>
           {value}
           {valueSuffix}

diff --git a/src/screens/Invoice/styled.tsx b/src/screens/Invoice/styled.tsx
@@ -15,7 +15,7 @@ import {
 import { platform } from "@config";
 import { Circle } from "react-native-progress";
 
-const isNative = { platform };
+const { isNative } = platform;
 
 type InvoicePageContainerProps = { isLoading: boolean };
 
@@ -173,16 +173,28 @@ export const NFCSwitchContainerCircle = styled(View)`
 
 type AmountTextProps = {
   subAmount?: boolean;
+  color?: string;
 };
 
 export const AmountText = styled(Text).attrs<AmountTextProps>(
-  ({ theme, subAmount }) => ({
+  ({ theme, subAmount, color }) => ({
     ...(subAmount ? { h4: true } : { h2: true }),
     weight: 700,
-    color: theme.colors.white
+    color: color || theme.colors.white
   })
 )<AmountTextProps>``;
 
+export const BitcoinSlotText = styled(AmountText)`
+  display: flex;
+  margin-top: 16px;
+`;
+
+export const BitcoinSlotImage = styled(Image)`
+  width: 20px;
+  height: 20px;
+  margin-right: 6px;
+`;
+
 export const ProgressBar = styled(RootProgressBar)`
   width: 90%;
 `;

diff --git a/src/utils/getFormattedUnit.ts b/src/utils/getFormattedUnit.ts
@@ -1,3 +1,5 @@
+import { numberWithSpaces } from "@utils";
+
 export const getFormattedUnit = (
   amount: number,
   unit: string,
@@ -10,7 +12,7 @@ export const getFormattedUnit = (
   }
 
   if (unit === "sat" || unit === "sats") {
-    return `${prefix}${amount} sats`;
+    return `${prefix}${numberWithSpaces(amount)} sats`;
   }
 
   return `${prefix}${Intl.NumberFormat(undefined, {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -18,4 +18,5 @@ export { generateBtcAddress } from "./generateBtcAddress";
 export { validateBitcoinAddress } from "./validateBitcoinAddress";
 export { hexToRgb } from "./hexToRgb";
 export { mergeDeep } from "./mergeDeep";
-export { isMinUserType } from "./isMinUserType";
+export { isMinUserType } from "./isMinUserType";
+export { numberWithSpaces } from "./numberWithSpaces";
diff --git a/src/utils/numberWithSpaces.ts b/src/utils/numberWithSpaces.ts
@@ -0,0 +1,2 @@
+export const numberWithSpaces = (nb: number) =>
+  nb.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, " ");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const numberWithSpaces = (nb: number) =>
		nb.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, " ");