diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
4 files changed, 100 insertions, 57 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx index 39afe8441..e1d34748b 100644 --- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx @@ -49,22 +49,6 @@ interface Props { onAddProvider: () => void; } -// interface BackupStatus { -// deviceName: string; -// providers: ProviderInfo[]; -// } - -// async function getBackupInfoOrdered(): BackupStatus { -// //create a first list of backup info by currency -// const status = await wxApi.getBackupInfo(); - -// return { deviceName: status.deviceId, providers }; -// } - -// async function sync() { -// await wxApi.syncAllProviders(); -// } - export function BackupPage({ onAddProvider }: Props): VNode { const { i18n } = useTranslationContext(); const status = useAsyncAsHook(wxApi.getBackupInfo); diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index 0ee83c265..bf578dfb5 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -27,7 +27,6 @@ import { SelectList } from "../components/SelectList"; import { BoldLight, ButtonPrimary, - ButtonSuccess, Centered, Input, InputWithLabel, @@ -35,25 +34,21 @@ import { LinkPrimary, } from "../components/styled"; import { useTranslationContext } from "../context/translation"; +import { Pages } from "../NavigationBar"; export interface Props { error: string | undefined; initialAmount?: string; exchangeList: Record<string, string>; onCreate: (exchangeBaseUrl: string, amount: AmountJson) => Promise<void>; - onAddExchange: () => void; initialCurrency?: string; } -export function CreateManualWithdraw({ - initialAmount, - exchangeList, - error, - initialCurrency, - onCreate, - onAddExchange, -}: Props): VNode { - const { i18n } = useTranslationContext(); +export function useComponentState( + exchangeList: Record<string, string>, + initialAmount: string | undefined, + initialCurrency: string | undefined, +) { const exchangeSelectList = Object.keys(exchangeList); const currencySelectList = Object.values(exchangeList); const exchangeMap = exchangeSelectList.reduce( @@ -74,10 +69,12 @@ export function CreateManualWithdraw({ ? exchangeSelectList[foundExchangeForCurrency] : exchangeSelectList.length > 0 ? exchangeSelectList[0] - : ""; + : undefined; const [exchange, setExchange] = useState(initialExchange || ""); - const [currency, setCurrency] = useState(exchangeList[initialExchange] ?? ""); + const [currency, setCurrency] = useState( + initialExchange ? exchangeList[initialExchange] : "", + ); const [amount, setAmount] = useState(initialAmount || ""); const parsedAmount = Amounts.parse(`${currency}:${amount}`); @@ -97,8 +94,49 @@ export function CreateManualWithdraw({ setExchange(""); } } + return { + initialExchange, + currency: { + list: currencyMap, + value: currency, + onChange: changeCurrency, + }, + exchange: { + list: exchangeMap, + value: exchange, + onChange: changeExchange, + }, + amount: { + value: amount, + onInput: (e: string) => setAmount(e), + }, + parsedAmount, + }; +} - if (!initialExchange) { +interface InputHandler { + value: string; + onInput: (s: string) => void; +} + +interface SelectInputHandler { + list: Record<string, string>; + value: string; + onChange: (s: string) => void; +} + +export function CreateManualWithdraw({ + initialAmount, + exchangeList, + error, + initialCurrency, + onCreate, +}: Props): VNode { + const { i18n } = useTranslationContext(); + + const state = useComponentState(exchangeList, initialAmount, initialCurrency); + + if (!state.initialExchange) { return ( <section> <h2> @@ -115,9 +153,12 @@ export function CreateManualWithdraw({ <BoldLight> <i18n.Translate>No exchange configured</i18n.Translate> </BoldLight> - <ButtonSuccess onClick={onAddExchange}> - <i18n.Translate>Add exchange</i18n.Translate> - </ButtonSuccess> + <LinkPrimary + href={Pages.settings_exchange_add} + style={{ marginLeft: "auto" }} + > + <i18n.Translate>Add Exchange</i18n.Translate> + </LinkPrimary> </Centered> </section> ); @@ -146,37 +187,38 @@ export function CreateManualWithdraw({ <Input> <SelectList label={<i18n.Translate>Currency</i18n.Translate>} - list={currencyMap} name="currency" - value={currency} - onChange={changeCurrency} + {...state.currency} /> </Input> <Input> <SelectList label={<i18n.Translate>Exchange</i18n.Translate>} - list={exchangeMap} - name="currency" - value={exchange} - onChange={changeExchange} + name="exchange" + {...state.exchange} /> </Input> <div style={{ display: "flex", justifyContent: "space-between" }}> - <LinkPrimary onClick={onAddExchange} style={{ marginLeft: "auto" }}> + <LinkPrimary + href={Pages.settings_exchange_add} + style={{ marginLeft: "auto" }} + > <i18n.Translate>Add Exchange</i18n.Translate> </LinkPrimary> </div> - {currency && ( - <InputWithLabel invalid={!!amount && !parsedAmount}> + {state.currency.value && ( + <InputWithLabel + invalid={!!state.amount.value && !state.parsedAmount} + > <label> <i18n.Translate>Amount</i18n.Translate> </label> <div> - <span>{currency}</span> + <span>{state.currency.value}</span> <input type="number" - value={amount} - onInput={(e) => setAmount(e.currentTarget.value)} + value={state.amount.value} + onInput={(e) => state.amount.onInput(e.currentTarget.value)} /> </div> </InputWithLabel> @@ -186,8 +228,8 @@ export function CreateManualWithdraw({ <footer> <div /> <ButtonPrimary - disabled={!parsedAmount || !exchange} - onClick={() => onCreate(exchange, parsedAmount!)} + disabled={!state.parsedAmount || !state.exchange.value} + onClick={() => onCreate(state.exchange.value, state.parsedAmount!)} > <i18n.Translate>Start withdrawal</i18n.Translate> </ButtonPrimary> diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx index 6d9b9d2b5..866b5f37f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx @@ -73,12 +73,6 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode { } } - const [addingExchange, setAddingExchange] = useState(false); - - if (addingExchange) { - return <ExchangeAddPage onBack={() => setAddingExchange(false)} />; - } - if (success) { return ( <ReserveCreated @@ -117,7 +111,6 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode { return ( <CreateManualWithdraw - onAddExchange={() => setAddingExchange(true)} error={error} exchangeList={exchangeList} onCreate={doCreate} diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 08cf8c7d1..e60c8f4f7 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -369,7 +369,19 @@ export function TransactionView({ /> <Part title={<i18n.Translate>Purchase</i18n.Translate>} - text={transaction.info.summary} + text={ + transaction.info.fulfillmentUrl ? ( + <a + href={transaction.info.fulfillmentUrl} + target="_bank" + rel="noreferrer" + > + {transaction.info.summary} + </a> + ) : ( + transaction.info.summary + ) + } kind="neutral" /> <Part @@ -542,7 +554,19 @@ export function TransactionView({ /> <Part title={<i18n.Translate>Purchase</i18n.Translate>} - text={transaction.info.summary} + text={ + transaction.info.fulfillmentUrl ? ( + <a + href={transaction.info.fulfillmentUrl} + target="_bank" + rel="noreferrer" + > + {transaction.info.summary} + </a> + ) : ( + transaction.info.summary + ) + } kind="neutral" /> <Part |