diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/AddExchange/views.tsx')
| -rw-r--r-- | packages/taler-wallet-webextension/src/wallet/AddExchange/views.tsx | 201 |
1 files changed, 201 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/AddExchange/views.tsx b/packages/taler-wallet-webextension/src/wallet/AddExchange/views.tsx new file mode 100644 index 000000000..e1bc7f0f6 --- /dev/null +++ b/packages/taler-wallet-webextension/src/wallet/AddExchange/views.tsx @@ -0,0 +1,201 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Fragment, h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { ErrorMessage } from "../../components/ErrorMessage.js"; +import { Input, LightText, SubTitle, Title, WarningBox } from "../../components/styled/index.js"; +import { TermsOfService } from "../../components/TermsOfService/index.js"; +import { Button } from "../../mui/Button.js"; +import { State } from "./index.js"; + + +export function VerifyView({ + expectedCurrency, + onCancel, + onAccept, + result, + knownExchanges, + url, +}: State.Verify): VNode { + const { i18n } = useTranslationContext(); + + return ( + <Fragment> + <section> + {!expectedCurrency ? ( + <Title> + <i18n.Translate>Add new exchange</i18n.Translate> + </Title> + ) : ( + <SubTitle> + <i18n.Translate>Add exchange for {expectedCurrency}</i18n.Translate> + </SubTitle> + )} + {!result && ( + <LightText> + <i18n.Translate> + Enter the URL of an exchange you trust. + </i18n.Translate> + </LightText> + )} + {result && ( + <LightText> + <i18n.Translate> + An exchange has been found! Review the information and click next + </i18n.Translate> + </LightText> + )} + {result && result.ok && expectedCurrency && expectedCurrency !== result.data.currency && ( + <WarningBox> + <i18n.Translate> + This exchange doesn't match the expected currency + <b>{expectedCurrency}</b> + </i18n.Translate> + </WarningBox> + )} + {result && !result.ok && !result.loading && ( + <ErrorMessage + title={i18n.str`Unable to verify this exchange`} + description={result.message} + /> + )} + <p> + <Input invalid={result && !result.ok} > + <label>URL</label> + <input + type="text" + placeholder="https://" + value={url.value} + onInput={(e) => { + if (url.onInput) { + url.onInput(e.currentTarget.value) + } + }} + /> + </Input> + {result && result.loading && ( + <div> + <i18n.Translate>loading</i18n.Translate>... + </div> + )} + {result && result.ok && !result.loading && ( + <Fragment> + <Input> + <label> + <i18n.Translate>Version</i18n.Translate> + </label> + <input type="text" disabled value={result.data.version} /> + </Input> + <Input> + <label> + <i18n.Translate>Currency</i18n.Translate> + </label> + <input type="text" disabled value={result.data.currency} /> + </Input> + </Fragment> + )} + </p> + {url.error && ( + <ErrorMessage + title={i18n.str`Can't use this URL`} + description={url.error} + /> + )} + </section> + <footer> + <Button variant="contained" color="secondary" onClick={onCancel}> + <i18n.Translate>Cancel</i18n.Translate> + </Button> + <Button + variant="contained" + disabled={ + !result || + result.loading || + !result.ok || + (!!expectedCurrency && expectedCurrency !== result.data.currency) + } + onClick={onAccept} + > + <i18n.Translate>Next</i18n.Translate> + </Button> + </footer> + <section> + <ul> + {knownExchanges.map(ex => { + return <li><a href="#" onClick={(e) => { + if (url.onInput) { + url.onInput(ex.href) + } + e.preventDefault() + }}> + {ex.href}</a></li> + })} + </ul> + </section> + </Fragment> + ); +} + + +export function ConfirmView({ + url, + onCancel, + onConfirm, +}: State.Confirm): VNode { + const { i18n } = useTranslationContext(); + + const [accepted, setAccepted] = useState(false); + + return ( + <Fragment> + <section> + <Title> + <i18n.Translate>Review terms of service</i18n.Translate> + </Title> + <div> + <i18n.Translate>Exchange URL</i18n.Translate>: + <a href={url} target="_blank" rel="noreferrer"> + {url} + </a> + </div> + </section> + + <TermsOfService key="terms" exchangeUrl={url} onChange={setAccepted} /> + + <footer> + <Button + key="cancel" + variant="contained" + color="secondary" + onClick={onCancel} + > + <i18n.Translate>Cancel</i18n.Translate> + </Button> + <Button + key="add" + variant="contained" + color="success" + disabled={!accepted} + onClick={onConfirm} + > + <i18n.Translate>Add exchange</i18n.Translate> + </Button> + </footer> + </Fragment> + ); +} |