diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/BusinessAccount.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/BusinessAccount.tsx | 175 |
1 files changed, 35 insertions, 140 deletions
diff --git a/packages/demobank-ui/src/pages/BusinessAccount.tsx b/packages/demobank-ui/src/pages/BusinessAccount.tsx index 7f69cd9f0..d9aa8fa36 100644 --- a/packages/demobank-ui/src/pages/BusinessAccount.tsx +++ b/packages/demobank-ui/src/pages/BusinessAccount.tsx @@ -47,6 +47,7 @@ import { LoginForm } from "./LoginForm.js"; import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js"; import { handleNotOkResult } from "./HomePage.js"; import { ErrorMessage, notifyInfo } from "../hooks/notification.js"; +import { Amount } from "./WalletWithdrawForm.js"; interface Props { onClose: () => void; @@ -345,34 +346,23 @@ function CreateCashout({ ? i18n.str`Amount to send` : i18n.str`Amount to receive`} </label> - <div style={{ width: "max-content" }}> - <input - type="text" - readonly - class="currency-indicator" - size={amount?.currency.length ?? 0} - maxLength={amount?.currency.length ?? 0} - tabIndex={-1} - value={amount?.currency ?? ""} - /> - - <input - type="number" - // ref={ref} - id="withdraw-amount" - name="withdraw-amount" - value={form.amount ?? ""} - onChange={(e): void => { - form.amount = e.currentTarget.value; + <div style={{ display: "flex" }}> + <Amount + currency={amount.currency} + value={form.amount} + onChange={(v) => { + form.amount = v; updateForm(structuredClone(form)); }} + error={errors?.amount} /> - - <label class="toggle"> + <label class="toggle" style={{ marginLeft: 4, marginTop: 0 }}> <input class="toggle-checkbox" type="checkbox" + name="asd" onChange={(e): void => { + console.log("asdasd", form.isDebit); form.isDebit = !form.isDebit; updateForm(structuredClone(form)); }} @@ -380,10 +370,6 @@ function CreateCashout({ <div class="toggle-switch"></div> </label> </div> - <ShowInputErrorLabel - message={errors?.amount} - isDirty={form.amount !== undefined} - /> </fieldset> <fieldset> <label>{i18n.str`Conversion rate`}</label> @@ -391,118 +377,43 @@ function CreateCashout({ </fieldset> <fieldset> <label>{i18n.str`Balance now`}</label> - <div style={{ width: "max-content" }}> - <input - type="text" - readonly - class="currency-indicator" - size={balance.currency.length} - maxLength={balance.currency.length} - tabIndex={-1} - value={balance.currency} - /> - - <input - type="number" - id="withdraw-amount" - disabled - name="withdraw-amount" - value={Amounts.stringifyValue(balance)} - /> - </div> + <Amount + currency={balance.currency} + value={Amounts.stringifyValue(balance)} + /> </fieldset> <fieldset> <label style={{ fontWeight: "bold", color: "red" }} >{i18n.str`Total cost`}</label> - <div style={{ width: "max-content" }}> - <input - type="text" - readonly - class="currency-indicator" - size={balance.currency.length} - maxLength={balance.currency.length} - tabIndex={-1} - value={balance.currency} - /> - - <input - type="number" - // ref={ref} - id="withdraw-amount" - disabled - name="withdraw-amount" - value={Amounts.stringifyValue(calc.debit)} - /> - </div> + <Amount + currency={balance.currency} + value={Amounts.stringifyValue(calc.debit)} + /> </fieldset> <fieldset> <label>{i18n.str`Balance after`}</label> - <div style={{ width: "max-content" }}> - <input - type="text" - readonly - class="currency-indicator" - size={balance.currency.length} - maxLength={balance.currency.length} - tabIndex={-1} - value={balance.currency} - /> - - <input - type="number" - // ref={ref} - id="withdraw-amount" - disabled - name="withdraw-amount" - value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""} - /> - </div> + <Amount + currency={balance.currency} + value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""} + /> </fieldset>{" "} {Amounts.isZero(sellFee) ? undefined : ( <Fragment> <fieldset> <label>{i18n.str`Amount after conversion`}</label> - <div style={{ width: "max-content" }}> - <input - type="text" - readonly - class="currency-indicator" - size={fiatCurrency.length} - maxLength={fiatCurrency.length} - tabIndex={-1} - value={fiatCurrency} - /> - - <input - // type="number" - style={{ color: "black" }} - disabled - value={Amounts.stringifyValue(calc.beforeFee)} - /> - </div> + <Amount + currency={fiatCurrency} + value={Amounts.stringifyValue(calc.beforeFee)} + /> </fieldset> <fieldset> <label>{i18n.str`Cashout fee`}</label> - <div style={{ width: "max-content" }}> - <input - type="text" - readonly - class="currency-indicator" - size={fiatCurrency.length} - maxLength={fiatCurrency.length} - tabIndex={-1} - value={fiatCurrency} - /> - - <input - // type="number" - style={{ color: "black" }} - disabled - value={Amounts.stringifyValue(sellFee)} - /> - </div> + <Amount + currency={fiatCurrency} + value={Amounts.stringifyValue(sellFee)} + /> </fieldset> </Fragment> )} @@ -510,26 +421,10 @@ function CreateCashout({ <label style={{ fontWeight: "bold", color: "green" }} >{i18n.str`Total cashout transfer`}</label> - <div style={{ width: "max-content" }}> - <input - type="text" - readonly - class="currency-indicator" - size={fiatCurrency.length} - maxLength={fiatCurrency.length} - tabIndex={-1} - value={fiatCurrency} - /> - - <input - type="number" - // ref={ref} - id="withdraw-amount" - disabled - name="withdraw-amount" - value={Amounts.stringifyValue(calc.credit)} - /> - </div> + <Amount + currency={fiatCurrency} + value={Amounts.stringifyValue(calc.credit)} + /> </fieldset> <fieldset> <label>{i18n.str`Confirmation channel`}</label> |