Skip to content

Commit

Permalink
feat: lnurlpay optional fields toggle styles refinement
Browse files Browse the repository at this point in the history
  • Loading branch information
@lujakob
lujakob committed Apr 25, 2023
1 parent 25482ec commit 9b237c1
Showing 1 changed file with 98 additions and 102 deletions.
200 changes: 98 additions & 102 deletions src/app/screens/LNURLPay/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,113 +409,109 @@ function LNURLPay() {
/>
<form onSubmit={handleSubmit}>
<fieldset disabled={loadingConfirm}>
<div className="my-4">
<dl className="overflow-hidden">
<>
{formattedMetadata(details.metadata).map(
([dt, dd], i) => (
<Fragment key={`element-${i}`}>
<Dt>{dt}</Dt>
<Dd>{dd}</Dd>
</Fragment>
)
)}
{details.minSendable === details.maxSendable && (
<>
<Dt>{t("amount.label")}</Dt>
<Dd>
{getFormattedSats(
Math.floor(+details.minSendable / 1000)
)}
</Dd>
</>
<dl className="mt-4 overflow-hidden">
<>
{formattedMetadata(details.metadata).map(
([dt, dd], i) => (
<Fragment key={`element-${i}`}>
<Dt>{dt}</Dt>
<Dd>{dd}</Dd>
</Fragment>
)
)}
{details.minSendable === details.maxSendable && (
<>
<Dt>{t("amount.label")}</Dt>
<Dd>
{getFormattedSats(
Math.floor(+details.minSendable / 1000)
)}
</Dd>
</>
)}
</>
</dl>
{details && details.minSendable !== details.maxSendable && (
<div>
<DualCurrencyField
autoFocus
id="amount"
label={t("amount.label")}
min={Math.floor(+details.minSendable / 1000)}
max={Math.floor(+details.maxSendable / 1000)}
value={valueSat}
onChange={(e) => setValueSat(e.target.value)}
fiatValue={fiatValue}
hint={`${tCommon("balance")}: ${
auth?.balancesDecorated?.accountBalance
}`}
/>
<SatButtons
min={Math.floor(+details.minSendable / 1000)}
max={Math.floor(+details.maxSendable / 1000)}
onClick={setValueSat}
disabled={loadingConfirm}
/>
</div>
)}

{showCommentField() && (
<div className="mt-4">
<TextField
id="comment"
label={t("comment.label")}
placeholder={tCommon("optional")}
onChange={(e) => {
setComment(e.target.value);
}}
/>
</div>
)}

{(showNameField() || showEmailField()) && (
<div className="flex justify-center mt-4">
<Hyperlink onClick={toggleShowMoreFields}>
{tCommon("actions.more")}{" "}
{showMoreFields ? (
<CaretUpIcon className="h-4 w-4 inline-flex" />
) : (
<CaretDownIcon className="h-4 w-4 inline-flex" />
)}
</>
</dl>
{details &&
details.minSendable !== details.maxSendable && (
<div>
<DualCurrencyField
autoFocus
id="amount"
label={t("amount.label")}
min={Math.floor(+details.minSendable / 1000)}
max={Math.floor(+details.maxSendable / 1000)}
value={valueSat}
onChange={(e) => setValueSat(e.target.value)}
fiatValue={fiatValue}
hint={`${tCommon("balance")}: ${
auth?.balancesDecorated?.accountBalance
}`}
</Hyperlink>
</div>
)}

{showMoreFields && (
<>
{showNameField() && (
<div className="mt-4">
<TextField
id="name"
label={t("name.label")}
placeholder={tCommon("optional")}
value={userName}
onChange={(e) => {
setUserName(e.target.value);
}}
/>
<SatButtons
min={Math.floor(+details.minSendable / 1000)}
max={Math.floor(+details.maxSendable / 1000)}
onClick={setValueSat}
disabled={loadingConfirm}
</div>
)}
{showEmailField() && (
<div className="mt-4">
<TextField
id="email"
label={t("email.label")}
placeholder={tCommon("optional")}
value={userEmail}
onChange={(e) => {
setUserEmail(e.target.value);
}}
/>
</div>
)}

{(showCommentField() ||
showNameField() ||
showEmailField()) && (
<div className="flex justify-center mt-4 mb-4">
<Hyperlink onClick={toggleShowMoreFields}>
{tCommon("actions.more")}{" "}
{showMoreFields ? (
<CaretUpIcon className="h-4 w-4 inline-flex" />
) : (
<CaretDownIcon className="h-4 w-4 inline-flex" />
)}
</Hyperlink>
</div>
)}

{showMoreFields && (
<>
{showCommentField() && (
<div className="mt-4">
<TextField
id="comment"
label={t("comment.label")}
placeholder={tCommon("optional")}
onChange={(e) => {
setComment(e.target.value);
}}
/>
</div>
)}
{showNameField() && (
<div className="mt-4">
<TextField
id="name"
label={t("name.label")}
placeholder={tCommon("optional")}
value={userName}
onChange={(e) => {
setUserName(e.target.value);
}}
/>
</div>
)}
{showEmailField() && (
<div className="mt-4">
<TextField
id="email"
label={t("email.label")}
placeholder={tCommon("optional")}
value={userEmail}
onChange={(e) => {
setUserEmail(e.target.value);
}}
/>
</div>
)}
</>
)}
</div>
<div className="pt-2 border-t border-gray-200 dark:border-white/10">
</>
)}
<div className="mt-4 dark:border-white/10">
<ConfirmOrCancel
isFocused={false}
label={tCommon("actions.confirm")}
Expand Down

0 comments on commit 9b237c1

Please sign in to comment.