Skip to content

Commit

Permalink
refactor: form el for ConfirmorCancel getAlby#1617
Browse files Browse the repository at this point in the history
  • Loading branch information
@vaibhavgarg237
vaibhavgarg237 committed Dec 5, 2022
1 parent 5dea366 commit e53c1c5
Show file tree
Hide file tree
Showing 8 changed files with 351 additions and 303 deletions.
68 changes: 37 additions & 31 deletions src/app/screens/ConfirmKeysend/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,45 +123,51 @@ function ConfirmKeysend() {
});
}

function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
confirm();
}

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<ScreenHeader title={t("title")} />
{!successMessage ? (
<Container justifyBetween maxWidth="sm">
<div>
<PublisherCard
title={origin.name}
image={origin.icon}
url={origin.host}
/>
<div className="my-4">
<div className="shadow mb-4 bg-white dark:bg-surface-02dp p-4 rounded-lg">
<PaymentSummary
amount={amount}
fiatAmount={fiatAmount}
description={t("payment_summary.description", {
destination,
})}
<form onSubmit={handleSubmit}>
<div>
<PublisherCard
title={origin.name}
image={origin.icon}
url={origin.host}
/>
<div className="my-4">
<div className="shadow mb-4 bg-white dark:bg-surface-02dp p-4 rounded-lg">
<PaymentSummary
amount={amount}
fiatAmount={fiatAmount}
description={t("payment_summary.description", {
destination,
})}
/>
</div>

<BudgetControl
fiatAmount={fiatBudgetAmount}
remember={rememberMe}
onRememberChange={(event) => {
setRememberMe(event.target.checked);
}}
budget={budget}
onBudgetChange={(event) => setBudget(event.target.value)}
/>
</div>

<BudgetControl
fiatAmount={fiatBudgetAmount}
remember={rememberMe}
onRememberChange={(event) => {
setRememberMe(event.target.checked);
}}
budget={budget}
onBudgetChange={(event) => setBudget(event.target.value)}
/>
</div>
</div>
<ConfirmOrCancel
disabled={loading}
loading={loading}
onConfirm={confirm}
onCancel={reject}
/>
<ConfirmOrCancel
disabled={loading}
loading={loading}
onCancel={reject}
/>
</form>
</Container>
) : (
<Container maxWidth="sm">
Expand Down
80 changes: 43 additions & 37 deletions src/app/screens/ConfirmPayment/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,52 +133,58 @@ function ConfirmPayment() {
});
}

function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
confirm();
}

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<ScreenHeader title={!successMessage ? t("title") : tCommon("success")} />
{!successMessage ? (
<Container justifyBetween maxWidth="sm">
<div>
{navState.origin && (
<PublisherCard
title={navState.origin.name}
image={navState.origin.icon}
url={navState.origin.host}
/>
)}
<div className="my-4">
<div className="mb-4 p-4 shadow bg-white dark:bg-surface-02dp rounded-lg">
<PaymentSummary
amount={invoice.satoshis || "0"} // how come that sathoshis can be undefined, bolt11?
fiatAmount={fiatAmount}
description={invoice.tagsObject.description}
/>
</div>
<form onSubmit={handleSubmit}>
<div>
{navState.origin && (
<BudgetControl
fiatAmount={fiatBudgetAmount}
remember={rememberMe}
onRememberChange={(event) => {
setRememberMe(event.target.checked);
}}
budget={budget}
onBudgetChange={(event) => setBudget(event.target.value)}
<PublisherCard
title={navState.origin.name}
image={navState.origin.icon}
url={navState.origin.host}
/>
)}
<div className="my-4">
<div className="mb-4 p-4 shadow bg-white dark:bg-surface-02dp rounded-lg">
<PaymentSummary
amount={invoice.satoshis || "0"} // how come that sathoshis can be undefined, bolt11?
fiatAmount={fiatAmount}
description={invoice.tagsObject.description}
/>
</div>
{navState.origin && (
<BudgetControl
fiatAmount={fiatBudgetAmount}
remember={rememberMe}
onRememberChange={(event) => {
setRememberMe(event.target.checked);
}}
budget={budget}
onBudgetChange={(event) => setBudget(event.target.value)}
/>
)}
</div>
</div>
</div>
<div>
<ConfirmOrCancel
disabled={loading}
loading={loading}
onConfirm={confirm}
onCancel={reject}
label={t("actions.pay_now")}
/>
<p className="mb-4 text-center text-sm text-gray-400">
<em>{tComponents("only_trusted")}</em>
</p>
</div>
<div>
<ConfirmOrCancel
disabled={loading}
loading={loading}
onCancel={reject}
label={t("actions.pay_now")}
/>
<p className="mb-4 text-center text-sm text-gray-400">
<em>{tComponents("only_trusted")}</em>
</p>
</div>
</form>
</Container>
) : (
<Container justifyBetween maxWidth="sm">
Expand Down
84 changes: 45 additions & 39 deletions src/app/screens/ConfirmRequestPermission/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,52 +35,58 @@ const ConfirmRequestPermission: FC = () => {
msg.error(USER_REJECTED_ERROR);
};

function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
enable();
}

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<ScreenHeader title={t("title")} />
<Container justifyBetween maxWidth="sm">
<div>
<PublisherCard
title={origin.name}
image={origin.icon}
url={origin.host}
isSmall={false}
/>
<form onSubmit={handleSubmit}>
<div>
<PublisherCard
title={origin.name}
image={origin.icon}
url={origin.host}
isSmall={false}
/>

<div className="dark:text-white pt-6">
<p className="mb-4">{t("allow", { host: origin.host })}</p>
<div className="mb-4 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
<p className="dark:text-white">
{t("enable_method", { method: requestMethod })}
</p>
</div>
<div className="flex items-center">
<Checkbox
id="always_allow"
name="always_allow"
checked={alwaysAllow}
onChange={() => setAlwaysAllow((prev) => !prev)}
/>
<label
htmlFor="always_allow"
className="cursor-pointer ml-2 block text-sm text-gray-900 font-medium dark:text-white"
>
{t("always_allow", {
method: requestMethod,
host: origin.host,
})}
</label>
<div className="dark:text-white pt-6">
<p className="mb-4">{t("allow", { host: origin.host })}</p>
<div className="mb-4 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
<p className="dark:text-white">
{t("enable_method", { method: requestMethod })}
</p>
</div>
<div className="flex items-center">
<Checkbox
id="always_allow"
name="always_allow"
checked={alwaysAllow}
onChange={() => setAlwaysAllow((prev) => !prev)}
/>
<label
htmlFor="always_allow"
className="cursor-pointer ml-2 block text-sm text-gray-900 font-medium dark:text-white"
>
{t("always_allow", {
method: requestMethod,
host: origin.host,
})}
</label>
</div>
</div>
</div>
</div>
<div className="mb-4 text-center flex flex-col">
<ConfirmOrCancel
label={tCommon("actions.confirm")}
onConfirm={enable}
onCancel={reject}
/>
</div>
<div className="mb-4 text-center flex flex-col">
<ConfirmOrCancel
label={tCommon("actions.confirm")}
onCancel={reject}
/>
</div>
</form>
</Container>
</div>
);
Expand Down
54 changes: 30 additions & 24 deletions src/app/screens/Keysend/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,11 @@ function Keysend() {
navigate(-1);
}

function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
confirm();
}

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<Header
Expand All @@ -103,32 +108,33 @@ function Keysend() {
{!successMessage ? (
<>
<Container justifyBetween maxWidth="sm">
<div>
{destination && <PublisherCard title={destination} />}
<ContentMessage
heading={t("receiver.label")}
content={destination}
/>
<div className="p-4 shadow bg-white dark:bg-surface-02dp rounded-lg overflow-hidden">
<DualCurrencyField
id="amount"
label={t("amount.label")}
min={+0 / 1000}
max={+1000000 / 1000}
onChange={(e) => setAmountSat(e.target.value)}
value={amountSat}
fiatValue={fiatAmount}
<form onSubmit={handleSubmit}>
<div>
{destination && <PublisherCard title={destination} />}
<ContentMessage
heading={t("receiver.label")}
content={destination}
/>
<SatButtons onClick={setAmountSat} />
<div className="p-4 shadow bg-white dark:bg-surface-02dp rounded-lg overflow-hidden">
<DualCurrencyField
id="amount"
label={t("amount.label")}
min={+0 / 1000}
max={+1000000 / 1000}
onChange={(e) => setAmountSat(e.target.value)}
value={amountSat}
fiatValue={fiatAmount}
/>
<SatButtons onClick={setAmountSat} />
</div>
</div>
</div>
<ConfirmOrCancel
label={tCommon("actions.confirm")}
onConfirm={confirm}
onCancel={reject}
loading={loading}
disabled={loading || !amountSat}
/>
<ConfirmOrCancel
label={tCommon("actions.confirm")}
onCancel={reject}
loading={loading}
disabled={loading || !amountSat}
/>
</form>
</Container>
</>
) : (
Expand Down
Loading

0 comments on commit e53c1c5

Please sign in to comment.