diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup/Settings.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/popup/Settings.tsx | 83 |
1 files changed, 58 insertions, 25 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx index 3b83f0762..0a3f777d5 100644 --- a/packages/taler-wallet-webextension/src/popup/Settings.tsx +++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx @@ -14,26 +14,34 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { i18n } from "@gnu-taler/taler-util"; -import { VNode, h } from "preact"; +import { ExchangeListItem, i18n } from "@gnu-taler/taler-util"; +import { Fragment, h, VNode } from "preact"; import { Checkbox } from "../components/Checkbox"; -import { EditableText } from "../components/EditableText"; -import { SelectList } from "../components/SelectList"; -import { PopupBox } from "../components/styled"; +import { ButtonPrimary } from "../components/styled"; import { useDevContext } from "../context/devContext"; +import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import { useBackupDeviceName } from "../hooks/useBackupDeviceName"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; import { useLang } from "../hooks/useLang"; +// import { strings as messages } from "../i18n/strings"; +import * as wxApi from "../wxApi"; export function SettingsPage(): VNode { const [permissionsEnabled, togglePermissions] = useExtendedPermissions(); const { devMode, toggleDevMode } = useDevContext(); const { name, update } = useBackupDeviceName(); const [lang, changeLang] = useLang(); + const exchangesHook = useAsyncAsHook(wxApi.listExchanges); + return ( <SettingsView lang={lang} changeLang={changeLang} + knownExchanges={ + !exchangesHook || exchangesHook.hasError + ? [] + : exchangesHook.response.exchanges + } deviceName={name} setDeviceName={update} permissionsEnabled={permissionsEnabled} @@ -53,36 +61,59 @@ export interface ViewProps { togglePermissions: () => void; developerMode: boolean; toggleDeveloperMode: () => void; + knownExchanges: Array<ExchangeListItem>; } -import { strings as messages } from "../i18n/strings"; - -type LangsNames = { - [P in keyof typeof messages]: string; -}; +// type LangsNames = { +// [P in keyof typeof messages]: string; +// }; -const names: LangsNames = { - es: "Español [es]", - en: "English [en]", - fr: "Français [fr]", - de: "Deutsch [de]", - sv: "Svenska [sv]", - it: "Italiano [it]", -}; +// const names: LangsNames = { +// es: "Español [es]", +// en: "English [en]", +// fr: "Français [fr]", +// de: "Deutsch [de]", +// sv: "Svenska [sv]", +// it: "Italiano [it]", +// }; export function SettingsView({ - lang, - changeLang, - deviceName, - setDeviceName, + knownExchanges, + // lang, + // changeLang, + // deviceName, + // setDeviceName, permissionsEnabled, togglePermissions, developerMode, toggleDeveloperMode, }: ViewProps): VNode { return ( - <PopupBox> + <Fragment> <section> + <h2> + <i18n.Translate>Known exchanges</i18n.Translate> + </h2> + {!knownExchanges || !knownExchanges.length ? ( + <div>No exchange yet!</div> + ) : ( + <Fragment> + <table> + {knownExchanges.map((e, idx) => ( + <tr key={idx}> + <td>{e.currency}</td> + <td> + <a href={e.exchangeBaseUrl}>{e.exchangeBaseUrl}</a> + </td> + </tr> + ))} + </table> + </Fragment> + )} + <div style={{ display: "flex", justifyContent: "space-between" }}> + <div /> + <ButtonPrimary>Manage exchange</ButtonPrimary> + </div> {/* <h2><i18n.Translate>Wallet</i18n.Translate></h2> */} {/* <SelectList value={lang} @@ -124,14 +155,16 @@ export function SettingsView({ rel="noopener noreferrer" style={{ color: "darkgreen", textDecoration: "none" }} href={ + // eslint-disable-next-line no-undef chrome.extension - ? chrome.extension.getURL(`/static/wallet.html#/settings`) + ? // eslint-disable-next-line no-undef + chrome.extension.getURL(`/static/wallet.html#/settings`) : "#" } > VIEW MORE SETTINGS </a> </footer> - </PopupBox> + </Fragment> ); } |