- {tx.badges.map((badge) => (
-
- )}
diff --git a/src/app/components/onboard/index.tsx b/src/app/components/onboard/index.tsx
index 152b26f410..d5dfb14dc3 100644
--- a/src/app/components/onboard/index.tsx
+++ b/src/app/components/onboard/index.tsx
@@ -1,5 +1,6 @@
import {
ClockIcon,
+ InfoCircleIcon,
TwoKeysIcon,
} from "@bitcoin-design/bitcoin-icons-react/outline";
import { useTranslation } from "react-i18next";
@@ -9,7 +10,6 @@ import PublisherCard from "~/app/components/PublisherCard";
import ScreenHeader from "~/app/components/ScreenHeader";
import { useAccount } from "~/app/context/AccountContext";
import { useNavigationState } from "~/app/hooks/useNavigationState";
-import InfoCircleIcon from "~/app/icons/InfoCircleIcon";
import { NO_KEYS_ERROR, USER_REJECTED_ERROR } from "~/common/constants";
import api from "~/common/lib/api";
import msg from "~/common/lib/msg";
diff --git a/src/app/icons/InfoCircleIcon.tsx b/src/app/icons/InfoCircleIcon.tsx
deleted file mode 100644
index 2c99d4b941..0000000000
--- a/src/app/icons/InfoCircleIcon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { SVGProps } from "react";
-
-export default function InfoCircleIcon(props: SVGProps) {
- return (
-
-
- );
-}
diff --git a/src/app/router/Prompt/Prompt.tsx b/src/app/router/Prompt/Prompt.tsx
index 36ffae360c..a063ca49b5 100644
--- a/src/app/router/Prompt/Prompt.tsx
+++ b/src/app/router/Prompt/Prompt.tsx
@@ -22,6 +22,8 @@ import Toaster from "~/app/components/Toast/Toaster";
import Providers from "~/app/context/Providers";
import RequireAuth from "~/app/router/RequireAuth";
import BitcoinConfirmGetAddress from "~/app/screens/Bitcoin/ConfirmGetAddress";
+import ConfirmSignPsbt from "~/app/screens/Bitcoin/ConfirmSignPsbt";
+import ConfirmPaymentAsync from "~/app/screens/ConfirmPaymentAsync";
import AlbyEnable from "~/app/screens/Enable/AlbyEnable";
import LiquidEnable from "~/app/screens/Enable/LiquidEnable";
import NostrEnable from "~/app/screens/Enable/NostrEnable";
@@ -109,6 +111,10 @@ function Prompt() {
path="public/webbtc/confirmGetAddress"
element={
@@ -403,8 +404,7 @@ function AccountDetail() {
)}
diff --git a/src/app/screens/Bitcoin/ConfirmSignPsbt/index.test.tsx b/src/app/screens/Bitcoin/ConfirmSignPsbt/index.test.tsx
new file mode 100644
index 0000000000..8afcf54d4a
--- /dev/null
+++ b/src/app/screens/Bitcoin/ConfirmSignPsbt/index.test.tsx
@@ -0,0 +1,144 @@
+import { act, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import msg from "~/common/lib/msg";
+import state from "~/extension/background-script/state";
+import { btcFixture } from "~/fixtures/btc";
+import type { OriginData } from "~/types";
+
+import { getFormattedSats } from "~/common/utils/currencyConvert";
+import Bitcoin from "~/extension/background-script/bitcoin";
+import Mnemonic from "~/extension/background-script/mnemonic";
+import ConfirmSignPsbt from "./index";
+
+const mockOrigin: OriginData = {
+ location: "https://getalby.com/demo",
+ domain: "https://getalby.com",
+ host: "getalby.com",
+ pathname: "/demo",
+ name: "Alby",
+ description: "",
+ icon: "https://getalby.com/assets/alby-503261fa1b83c396b7ba8d927db7072d15fea5a84d387a654c5d0a2cefd44604.svg",
+ metaData: {
+ title: "Alby Demo",
+ url: "https://getalby.com/demo",
+ provider: "Alby",
+ image:
+ "https://getalby.com/assets/alby-503261fa1b83c396b7ba8d927db7072d15fea5a84d387a654c5d0a2cefd44604.svg",
+ icon: "https://getalby.com/favicon.ico",
+ },
+ external: true,
+};
+
+jest.mock("~/app/hooks/useNavigationState", () => {
+ return {
+ useNavigationState: jest.fn(() => ({
+ origin: mockOrigin,
+ args: {
+ psbt: btcFixture.regtestTaprootPsbt,
+ },
+ })),
+ };
+});
+
+const passwordMock = jest.fn;
+
+const mockState = {
+ password: passwordMock,
+ currentAccountId: "1e1e8ea6-493e-480b-9855-303d37506e97",
+ getAccount: () => ({
+ mnemonic: btcFixture.mnemonic,
+ bitcoinNetwork: "regtest",
+ }),
+ getMnemonic: () => new Mnemonic(btcFixture.mnemonic),
+ getBitcoin: () => new Bitcoin(new Mnemonic(btcFixture.mnemonic), "regtest"),
+ getConnector: jest.fn(),
+};
+
+state.getState = jest.fn().mockReturnValue(mockState);
+
+jest.mock("~/app/context/SettingsContext", () => ({
+ useSettings: () => ({
+ getFormattedSats: (amount: number) =>
+ getFormattedSats({
+ amount,
+ locale: "en",
+ }),
+ }),
+}));
+
+// mock getPsbtPreview request
+msg.request = jest
+ .fn()
+ .mockReturnValue(
+ new Bitcoin(new Mnemonic(btcFixture.mnemonic), "regtest").getPsbtPreview(
+ btcFixture.regtestTaprootPsbt
+ )
+ );
+
+describe("ConfirmSignPsbt", () => {
+ test("render", async () => {
+ await act(async () => {
+ render(
+
+
+ );
+ });
+
+ const user = userEvent.setup();
+
+ await act(async () => {
+ await user.click(screen.getByText("View details"));
+ });
+
+ expect(
+ await screen.findByText(
+ "This website asks you to sign a bitcoin transaction"
+ )
+ ).toBeInTheDocument();
+
+ // Check inputs
+ const inputsContainer = (await screen.getByText("Inputs")
+ .parentElement) as HTMLElement;
+ expect(inputsContainer).toBeInTheDocument();
+ const inputsRef = within(inputsContainer);
+ expect(
+ await inputsRef.findByText(
+ "bcrt1p8wpt9v4frpf3tkn0srd97pksgsxc5hs52lafxwru9kgeephvs7rqjeprhg"
+ )
+ ).toBeInTheDocument();
+
+ // Check outputs
+ const outputsContainer = screen.getByText("Outputs")
+ .parentElement as HTMLElement;
+ expect(outputsContainer).toBeInTheDocument();
+
+ const outputsRef = within(outputsContainer);
+ expect(
+ await outputsRef.findByText(
+ "bcrt1p6uav7en8k7zsumsqugdmg5j6930zmzy4dg7jcddshsr0fvxlqx7qnc7l22"
+ )
+ ).toBeInTheDocument();
+
+ expect(
+ await outputsRef.findByText(
+ "bcrt1p90h6z3p36n9hrzy7580h5l429uwchyg8uc9sz4jwzhdtuhqdl5eqkcyx0f"
+ )
+ ).toBeInTheDocument();
+
+ // Check fee
+ const feeContainer = screen.getByText("Fee").parentElement as HTMLElement;
+ expect(feeContainer).toBeInTheDocument();
+
+ const feeRef = within(feeContainer);
+ expect(await feeRef.findByText("155 sats")).toBeInTheDocument();
+
+ await act(async () => {
+ await user.click(screen.getByText("View raw transaction (Hex)"));
+ });
+ expect(
+ await screen.findByText(btcFixture.regtestTaprootPsbt)
+ ).toBeInTheDocument();
+ });
+});
diff --git a/src/app/screens/Bitcoin/ConfirmSignPsbt/index.tsx b/src/app/screens/Bitcoin/ConfirmSignPsbt/index.tsx
new file mode 100644
index 0000000000..03355a37f8
--- /dev/null
+++ b/src/app/screens/Bitcoin/ConfirmSignPsbt/index.tsx
@@ -0,0 +1,194 @@
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PublisherCard from "@components/PublisherCard";
+import SuccessMessage from "@components/SuccessMessage";
+import { TFunction } from "i18next";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import Hyperlink from "~/app/components/Hyperlink";
+import Loading from "~/app/components/Loading";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { useSettings } from "~/app/context/SettingsContext";
+import { useNavigationState } from "~/app/hooks/useNavigationState";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import api from "~/common/lib/api";
+import msg from "~/common/lib/msg";
+import type { Address, OriginData, PsbtPreview } from "~/types";
+
+function ConfirmSignPsbt() {
+ const navState = useNavigationState();
+ const { t: tCommon } = useTranslation("common");
+ const { t } = useTranslation("translation", {
+ keyPrefix: "bitcoin.confirm_sign_psbt",
+ });
+ const navigate = useNavigate();
+ const { getFormattedSats } = useSettings();
+
+ const psbt = navState.args?.psbt as string;
+ const origin = navState.origin as OriginData;
+ const [loading, setLoading] = useState(true);
+ const [successMessage, setSuccessMessage] = useState("");
+ const [preview, setPreview] = useState
(undefined);
+ const [showAddresses, setShowAddresses] = useState(false);
+ const [showHex, setShowHex] = useState(false);
+
+ useEffect(() => {
+ (async () => {
+ try {
+ const preview = await api.bitcoin.getPsbtPreview(psbt);
+ setPreview(preview);
+ setLoading(false);
+ } catch (e) {
+ console.error(e);
+ const error = e as { message: string };
+ const errorMessage = error.message || "Unknown error";
+ toast.error(`${tCommon("error")}: ${errorMessage}`);
+ }
+ })();
+ }, [origin, psbt, tCommon]);
+
+ async function confirm() {
+ try {
+ setLoading(true);
+ const response = await api.bitcoin.signPsbt(psbt);
+ msg.reply(response);
+ setSuccessMessage(tCommon("success"));
+ } catch (e) {
+ console.error(e);
+ const error = e as { message: string };
+ const errorMessage = error.message || "Unknown error";
+ toast.error(`${tCommon("error")}: ${errorMessage}`);
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ function reject(e: React.MouseEvent) {
+ e.preventDefault();
+ msg.error(USER_REJECTED_ERROR);
+ }
+
+ function close(e: React.MouseEvent) {
+ if (navState.isPrompt) {
+ window.close();
+ } else {
+ e.preventDefault();
+ navigate(-1);
+ }
+ }
+
+ function toggleShowAddresses() {
+ setShowAddresses((current) => !current);
+ }
+ function toggleShowHex() {
+ setShowHex((current) => !current);
+ }
+
+ if (!preview) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ {!successMessage ? (
+
+
+
+
+
+ {t("allow_sign", { host: origin.host })}
+
+
+
+
+ {showAddresses ? t("hide_details") : t("view_details")}
+
+
+
+ {showAddresses && (
+ <>
+
+
{t("inputs")}
+
+ {preview.inputs.map((input) => (
+
+ ))}
+
+
{t("outputs")}
+
+ {preview.outputs.map((output) => (
+
+ ))}
+
+
{t("fee")}
+
+ {getFormattedSats(preview.fee)}
+
+
+
+
+ {showHex
+ ? t("hide_raw_transaction")
+ : t("view_raw_transaction")}
+
+
+
+ )}
+
+ {showHex && (
+
+ {psbt}
+
+ )}
+
+ ) : (
+
+
+ )}
+
+
{address}
+
+ {getFormattedSats(amount)}
+
+
diff --git a/src/app/screens/ConfirmPaymentAsync/index.test.tsx b/src/app/screens/ConfirmPaymentAsync/index.test.tsx
new file mode 100644
index 0000000000..dd525f0fed
--- /dev/null
+++ b/src/app/screens/ConfirmPaymentAsync/index.test.tsx
@@ -0,0 +1,80 @@
+import { act, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { settingsFixture as mockSettings } from "~/../tests/fixtures/settings";
+import type { OriginData } from "~/types";
+
+import ConfirmPaymentAsync from "./index";
+
+const mockOrigin: OriginData = {
+ location: "https://getalby.com/demo",
+ domain: "https://getalby.com",
+ host: "getalby.com",
+ pathname: "/demo",
+ name: "Alby",
+ description: "",
+ icon: "https://getalby.com/assets/alby-503261fa1b83c396b7ba8d927db7072d15fea5a84d387a654c5d0a2cefd44604.svg",
+ metaData: {
+ title: "Alby Demo",
+ url: "https://getalby.com/demo",
+ provider: "Alby",
+ image:
+ "https://getalby.com/assets/alby-503261fa1b83c396b7ba8d927db7072d15fea5a84d387a654c5d0a2cefd44604.svg",
+ icon: "https://getalby.com/favicon.ico",
+ },
+ external: true,
+};
+
+const paymentRequest =
+ "lnbc250n1p3qzycupp58uc2wa29470f98wrxmy4xwuqt8cywjygf5t2cp0s376y7nwdyq3sdqhf35kw6r5de5kueeqg3jk6mccqzpgxqyz5vqsp5wfdmwtv5rmru00ajsnn3f8lzpxa4snug2tmqvc8zj8semr4kjjts9qyyssq83h74pte8nrkqs8sr2hscv5zcdmhwunwnd6xr3mskeayh96pu7ksswa6p7trknlpp6t3js4k6uytxutv5ecgcwaxz7fj4zfy5khjcjcpf66muy";
+
+let parameters = {};
+
+jest.mock("~/app/hooks/useNavigationState", () => {
+ return {
+ useNavigationState: jest.fn(() => parameters),
+ };
+});
+
+let mockGetFiatValue = jest.fn();
+let mockSettingsTmp = { ...mockSettings };
+
+jest.mock("~/app/context/SettingsContext", () => ({
+ useSettings: () => ({
+ settings: mockSettingsTmp,
+ isLoading: false,
+ updateSetting: jest.fn(),
+ getFormattedFiat: mockGetFiatValue,
+ getFormattedNumber: jest.fn(),
+ getFormattedSats: jest.fn(() => "25 sats"),
+ }),
+}));
+
+describe("ConfirmPaymentAsync", () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test("prompt: renders with fiat", async () => {
+ parameters = {
+ origin: mockOrigin,
+ args: {
+ paymentRequest,
+ },
+ };
+
+ mockSettingsTmp = { ...mockSettings };
+ mockGetFiatValue = jest.fn(() => Promise.resolve("$0.01"));
+
+ await act(async () => {
+ render(
+
+
+ );
+ });
+
+ expect(await screen.findByText("Amount")).toBeInTheDocument();
+ expect(await screen.findByText("Description")).toBeInTheDocument();
+ expect(await screen.findByText("(~$0.01)")).toBeInTheDocument();
+ });
+});
diff --git a/src/app/screens/ConfirmPaymentAsync/index.tsx b/src/app/screens/ConfirmPaymentAsync/index.tsx
new file mode 100644
index 0000000000..26a12cd2f7
--- /dev/null
+++ b/src/app/screens/ConfirmPaymentAsync/index.tsx
@@ -0,0 +1,140 @@
+import ConfirmOrCancel from "@components/ConfirmOrCancel";
+import Container from "@components/Container";
+import PaymentSummary from "@components/PaymentSummary";
+import PublisherCard from "@components/PublisherCard";
+import lightningPayReq from "bolt11";
+import { useEffect, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import Alert from "~/app/components/Alert";
+import Hyperlink from "~/app/components/Hyperlink";
+import ScreenHeader from "~/app/components/ScreenHeader";
+import toast from "~/app/components/Toast";
+import { useSettings } from "~/app/context/SettingsContext";
+import { useNavigationState } from "~/app/hooks/useNavigationState";
+import { USER_REJECTED_ERROR } from "~/common/constants";
+import api from "~/common/lib/api";
+import msg from "~/common/lib/msg";
+
+function ConfirmPaymentAsync() {
+ const {
+ isLoading: isLoadingSettings,
+ settings,
+ getFormattedFiat,
+ } = useSettings();
+
+ const showFiat = !isLoadingSettings && settings.showFiat;
+
+ const { t } = useTranslation("translation", {
+ keyPrefix: "confirm_payment_async",
+ });
+
+ const navState = useNavigationState();
+ const paymentRequest = navState.args?.paymentRequest as string;
+ const invoice = lightningPayReq.decode(paymentRequest);
+
+ const navigate = useNavigate();
+
+ const [fiatAmount, setFiatAmount] = useState("");
+
+ useEffect(() => {
+ (async () => {
+ if (showFiat && invoice.satoshis) {
+ const res = await getFormattedFiat(invoice.satoshis);
+ setFiatAmount(res);
+ }
+ })();
+ }, [invoice.satoshis, showFiat, getFormattedFiat]);
+
+ const [loading, setLoading] = useState(false);
+
+ async function confirm() {
+ try {
+ setLoading(true);
+ const response = await api.sendPaymentAsync(
+ paymentRequest,
+ navState.origin
+ );
+
+ if ("error" in response) {
+ throw new Error(response.error);
+ }
+
+ msg.reply(response);
+ } catch (e) {
+ console.error(e);
+ if (e instanceof Error) toast.error(`Error: ${e.message}`);
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ function reject(e: React.MouseEvent
) {
+ e.preventDefault();
+ if (navState.isPrompt) {
+ msg.error(USER_REJECTED_ERROR);
+ } else {
+ navigate(-1);
+ }
+ }
+
+ function handleSubmit(event: React.FormEvent) {
+ event.preventDefault();
+ confirm();
+ }
+
+ return (
+
+ );
+}
+
+export default ConfirmPaymentAsync;
diff --git a/src/app/screens/Enable/WebbtcEnable.tsx b/src/app/screens/Enable/WebbtcEnable.tsx
index 99fc52d15e..fe325dcf3c 100644
--- a/src/app/screens/Enable/WebbtcEnable.tsx
+++ b/src/app/screens/Enable/WebbtcEnable.tsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import LiquidEnableComponent from "~/app/components/Enable/LiquidEnable";
+import WebbtcEnableComponent from "~/app/components/Enable/WebbtcEnable";
import Onboard from "~/app/components/onboard";
import { useAccount } from "~/app/context/AccountContext";
import api from "~/common/lib/api";
@@ -34,7 +34,7 @@ export default function WebbtcEnable(props: Props) {
return (
<>
{hasMnemonic ? (
- ) {
- e.preventDefault();
- if (navState.isPrompt) {
- msg.error(USER_REJECTED_ERROR);
- } else {
- navigate(-1);
}
- }
- function close(e: React.MouseEvent) {
- // will never be reached via prompt
- e.preventDefault();
- navigate(-1);
- }
+ fetchAccountInfo();
+ }, [account]);
return (
-
-
- {!successMessage ? (
- <>
-
-
- {origin ? (
-
- ) : (
-
- )}
-
-
-
- {errorMessage && (
-
{errorMessage}
- )}
-
-
- ) : (
-
-
-
-
- )}
-
-
-
- {showDetails ? t("hide_details") : t("view_details")}
-
-
+
+
diff --git a/src/app/screens/Receive/index.tsx b/src/app/screens/Receive/index.tsx
index a2966598d4..9558692df9 100644
--- a/src/app/screens/Receive/index.tsx
+++ b/src/app/screens/Receive/index.tsx
@@ -76,14 +76,10 @@ function Receive() {
) : (
<>
-
)}
diff --git a/src/app/screens/ReceiveInvoice/index.tsx b/src/app/screens/ReceiveInvoice/index.tsx
index e0dfe387eb..02242e8e2c 100644
--- a/src/app/screens/ReceiveInvoice/index.tsx
+++ b/src/app/screens/ReceiveInvoice/index.tsx
@@ -1,6 +1,5 @@
import {
CaretLeftIcon,
- CheckIcon,
CopyIcon,
} from "@bitcoin-design/bitcoin-icons-react/outline";
import Button from "@components/Button";
@@ -15,6 +14,7 @@ import Confetti from "react-confetti";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import QRCode from "~/app/components/QRCode";
+import ResultCard from "~/app/components/ResultCard";
import toast from "~/app/components/Toast";
import { useAccount } from "~/app/context/AccountContext";
import { useSettings } from "~/app/context/SettingsContext";
@@ -46,9 +46,6 @@ function ReceiveInvoice() {
paymentRequest: string;
rHash: string;
} | null>();
- const [copyInvoiceLabel, setCopyInvoiceLabel] = useState(
- tCommon("actions.copy_invoice") as string
- );
const [paid, setPaid] = useState(false);
const [pollingForPayment, setPollingForPayment] = useState(false);
@@ -142,44 +139,22 @@ function ReceiveInvoice() {
if (!invoice) return null;
return (
<>
-
- {paid && (
-
- {
- setDefaults();
- navigate("/receive/invoice");
- }}
- />
-
- )}
{!paid && (
<>
-
+
+
{
try {
navigator.clipboard.writeText(invoice.paymentRequest);
- setCopyInvoiceLabel(tCommon("copied"));
- setTimeout(() => {
- setCopyInvoiceLabel(tCommon("actions.copy_invoice"));
- }, 1000);
+ toast.success(tCommon("copied"));
} catch (e) {
if (e instanceof Error) {
toast.error(e.message);
@@ -187,11 +162,10 @@ function ReceiveInvoice() {
}
}}
icon={
-
{pollingForPayment && (
@@ -210,15 +184,30 @@ function ReceiveInvoice() {
)}
{paid && (
-
{
- confetti && confetti.reset();
- }}
- style={{ pointerEvents: "none" }}
- />
+ <>
+
+ {
+ setDefaults();
+ navigate("/receive/invoice");
+ }}
+ />
+
+ {
+ confetti && confetti.reset();
+ }}
+ style={{ pointerEvents: "none" }}
+ />
+
)}
);
@@ -239,11 +228,13 @@ function ReceiveInvoice() {
{t("title")}
{invoice ? (
- {renderInvoice()}
+
+ {renderInvoice()}
+
) : (
-