From fb8372dfbf27b7b4e8b2fe4f81aa2ba18bfcf638 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 15 Aug 2022 23:01:05 -0300 Subject: default exchange and select currency --- .../taler-wallet-webextension/src/mui/Modal.tsx | 38 ++++-- .../src/mui/ModalManager.ts | 16 +++ .../taler-wallet-webextension/src/mui/Popover.tsx | 18 ++- .../taler-wallet-webextension/src/mui/Portal.tsx | 65 ++++++---- .../src/wallet/DestinationSelection.tsx | 135 ++++++++++++++++----- 5 files changed, 207 insertions(+), 65 deletions(-) diff --git a/packages/taler-wallet-webextension/src/mui/Modal.tsx b/packages/taler-wallet-webextension/src/mui/Modal.tsx index 5a30bcf26..b24a45d61 100644 --- a/packages/taler-wallet-webextension/src/mui/Modal.tsx +++ b/packages/taler-wallet-webextension/src/mui/Modal.tsx @@ -1,9 +1,25 @@ +/* + 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 + */ + import { css } from "@linaria/core"; import { h, JSX, VNode, ComponentChildren } from "preact"; import { useCallback, useEffect, useRef, useState } from "preact/hooks"; // eslint-disable-next-line import/extensions import { alpha } from "./colors/manipulation"; -import { ModalManager } from "./ModalManager"; +import { ModalManager } from "./ModalManager.js"; import { Portal } from "./Portal.js"; // eslint-disable-next-line import/extensions import { theme } from "./style"; @@ -22,12 +38,16 @@ interface Props { children: ComponentChildren; open?: boolean; exited?: boolean; - container?: HTMLElement; + container?: VNode; } const defaultManager = new ModalManager(); const manager = defaultManager; +function getModal(): any { + return null; //TODO: fix +} + export function Modal({ open, // exited, @@ -52,18 +72,18 @@ export function Modal({ return; } - if (open && isTopModal()) { - handleMounted(); - } else { - ariaHidden(modalRef.current, true); - } + // if (open && isTopModal()) { + // handleMounted(); + // } else { + // ariaHidden(modalRef.current, true); + // } }); return (
(typeof n === "number" ? `${n}px` : n)) .join(" "); diff --git a/packages/taler-wallet-webextension/src/mui/ModalManager.ts b/packages/taler-wallet-webextension/src/mui/ModalManager.ts index 2894ffa7a..b4a3ee597 100644 --- a/packages/taler-wallet-webextension/src/mui/ModalManager.ts +++ b/packages/taler-wallet-webextension/src/mui/ModalManager.ts @@ -1,3 +1,19 @@ +/* + 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 + */ + //////////////////// function ownerDocument(node: Node | null | undefined): Document { return (node && node.ownerDocument) || document; diff --git a/packages/taler-wallet-webextension/src/mui/Popover.tsx b/packages/taler-wallet-webextension/src/mui/Popover.tsx index 408f87987..69e0ab10a 100644 --- a/packages/taler-wallet-webextension/src/mui/Popover.tsx +++ b/packages/taler-wallet-webextension/src/mui/Popover.tsx @@ -1,3 +1,19 @@ +/* + 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 + */ + import { css } from "@linaria/core"; import { h, JSX, VNode, ComponentChildren } from "preact"; // eslint-disable-next-line import/extensions @@ -48,7 +64,7 @@ function getOffsetLeft(rect: any, horizontal: any): number { return offset; } -function getTransformOriginValue(transformOrigin): string { +function getTransformOriginValue(transformOrigin: any): string { return [transformOrigin.horizontal, transformOrigin.vertical] .map((n) => (typeof n === "number" ? `${n}px` : n)) .join(" "); diff --git a/packages/taler-wallet-webextension/src/mui/Portal.tsx b/packages/taler-wallet-webextension/src/mui/Portal.tsx index 828a574fd..f9be021f0 100644 --- a/packages/taler-wallet-webextension/src/mui/Portal.tsx +++ b/packages/taler-wallet-webextension/src/mui/Portal.tsx @@ -1,3 +1,19 @@ +/* + 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 + */ + import { css } from "@linaria/core"; import { createPortal, forwardRef } from "preact/compat"; import { @@ -26,7 +42,7 @@ const baseStyle = css` `; interface Props { - class: string; + // class: string; children: ComponentChildren; disablePortal?: boolean; container?: VNode; @@ -39,10 +55,11 @@ export const Portal = forwardRef(function Portal( const [mountNode, setMountNode] = useState( undefined, ); - const handleRef = useForkRef( - isValidElement(children) ? children.ref : null, - ref, - ); + const handleRef = null; + // useForkRef( + // isValidElement(children) ? children.ref : null, + // ref, + // ); useEffect(() => { if (!disablePortal) { @@ -81,25 +98,25 @@ function getContainer(container: any): any { return typeof container === "function" ? container() : container; } -function useForkRef( - refA: React.Ref | null | undefined, - refB: React.Ref | null | undefined, -): React.Ref | null { - /** - * This will create a new function if the ref props change and are defined. - * This means react will call the old forkRef with `null` and the new forkRef - * with the ref. Cleanup naturally emerges from this behavior. - */ - return useMemo(() => { - if (refA == null && refB == null) { - return null; - } - return (refValue) => { - setRef(refA, refValue); - setRef(refB, refValue); - }; - }, [refA, refB]); -} +// function useForkRef( +// refA: React.Ref | null | undefined, +// refB: React.Ref | null | undefined, +// ): React.Ref | null { +// /** +// * This will create a new function if the ref props change and are defined. +// * This means react will call the old forkRef with `null` and the new forkRef +// * with the ref. Cleanup naturally emerges from this behavior. +// */ +// return useMemo(() => { +// if (refA == null && refB == null) { +// return null; +// } +// return (refValue) => { +// setRef(refA, refValue); +// setRef(refB, refValue); +// }; +// }, [refA, refB]); +// } function setRef( ref: RefObject | ((instance: T | null) => void) | null | undefined, diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx index 5f9c5065c..ba5dcf1da 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx @@ -18,18 +18,29 @@ import { Amounts } from "@gnu-taler/taler-util"; import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; +import { ErrorMessage } from "../components/ErrorMessage.js"; +import { Loading } from "../components/Loading.js"; +import { LoadingError } from "../components/LoadingError.js"; +import { SelectList } from "../components/SelectList.js"; import { + Input, InputWithLabel, LightText, + LinkPrimary, + SubTitle, SvgIcon, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; +import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { Alert } from "../mui/Alert.js"; import { Button } from "../mui/Button.js"; import { Grid } from "../mui/Grid.js"; import { Paper } from "../mui/Paper.js"; import { TextField } from "../mui/TextField.js"; +import { Pages } from "../NavigationBar.js"; import arrowIcon from "../svg/chevron-down.svg"; import bankIcon from "../svg/ri-bank-line.svg"; +import * as wxApi from "../wxApi.js"; const Container = styled.div` display: flex; @@ -152,6 +163,57 @@ const CircleDiv = styled.div` border: none; `; +export function SelectCurrency({ + onChange, +}: { + onChange: (s: string) => void; +}): VNode { + const { i18n } = useTranslationContext(); + + const hook = useAsyncAsHook(wxApi.listExchanges); + + if (!hook) { + return ; + } + if (hook.hasError) { + return ( + Could not load list of exchange} + /> + ); + } + const list: Record = {}; + hook.response.exchanges.forEach((e) => (list[e.currency] = e.currency)); + list[""] = "Select a currency"; + return ( + +

+ Specify the amount and the origin +

+ + + Choose a currency to proceed or add more exchanges in the settings tab + + + Known currencies} + list={list} + name="lang" + value={""} + onChange={(v) => onChange(v)} + /> + +
+
+ + Add an exchange + +
+ + ); +} + function RowExample({ info, disabled, @@ -194,9 +256,9 @@ export function DestinationSelectionGetCash({ ? undefined : Amounts.parse(initialAmount); const parsedInitialAmountValue = !parsedInitialAmount - ? "" + ? "0" : Amounts.stringifyValue(parsedInitialAmount); - const currency = parsedInitialAmount?.currency; + const [currency, setCurrency] = useState(parsedInitialAmount?.currency); const [amount, setAmount] = useState(parsedInitialAmountValue); const { i18n } = useTranslationContext(); @@ -220,7 +282,11 @@ export function DestinationSelectionGetCash({ ]; if (!currency) { - return
currency not provided
; + return ( +
+ setCurrency(c)} /> +
+ ); } const currencyAndAmount = `${currency}:${amount}`; const parsedAmount = Amounts.parse(currencyAndAmount); @@ -231,20 +297,25 @@ export function DestinationSelectionGetCash({

Specify the amount and the origin

- {currency}
- } - value={amount} - onChange={(e) => { - setAmount(e); - }} - /> + + {currency}
+ } + value={amount} + onChange={(e) => { + setAmount(e); + }} + /> + + {previous2.length > 0 ? ( @@ -350,20 +421,22 @@ export function DestinationSelectionSendCash({ Specify the amount and the destination - {currency} - } - value={amount} - onChange={(e) => { - setAmount(e); - }} - /> +
+ {currency}
+ } + value={amount} + onChange={(e) => { + setAmount(e); + }} + /> + {previous2.length > 0 ? ( -- cgit v1.2.3