From f45ef767016a425d04cce7755b27aceff292603c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 24 Mar 2022 16:02:38 -0300 Subject: esbuild configuration --- .../src/NavigationBar.tsx | 15 ++++-- .../src/components/Banner.stories.tsx | 6 +-- .../src/components/ErrorMessage.tsx | 7 ++- .../src/components/ErrorTalerOperation.tsx | 6 +-- .../src/components/LogoHeader.tsx | 13 ++---- .../src/components/MultiActionButton.tsx | 7 ++- .../src/components/styled/index.tsx | 25 ++++------ .../src/hooks/useTalerActionURL.test.ts | 18 ++++---- .../src/mui/Button.stories.tsx | 4 +- .../src/mui/index.stories.tsx | 27 +++++++++++ .../src/popup/BalancePage.tsx | 2 +- .../taler-wallet-webextension/src/stories.test.ts | 3 +- .../src/svg/chevron-down.svg | 7 +++ .../src/svg/delete_24px.svg | 1 + .../src/svg/logo-2021.svg | 9 ++++ .../src/svg/ri-bank-line.svg | 1 + .../src/svg/ri-file-unknown-line.svg | 1 + .../src/svg/ri-hand-heart-line.svg | 1 + .../src/svg/ri-refresh-line.svg | 1 + .../src/svg/ri-refund-2-line.svg | 1 + .../src/svg/ri-shopping-cart-line.svg | 1 + .../src/svg/send_24px.svg | 1 + .../src/svg/settings_black_24dp.svg | 6 +++ .../src/svg/spinner-bars.svg | 53 ++++++++++++++++++++++ .../taler-wallet-webextension/src/svg/wifi.svg | 3 ++ .../taler-wallet-webextension/src/test-utils.ts | 17 +++++-- .../src/wallet/ManualWithdrawPage.tsx | 14 +++++- .../src/wallet/ReserveCreated.tsx | 18 ++++---- 28 files changed, 202 insertions(+), 66 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/mui/index.stories.tsx create mode 100644 packages/taler-wallet-webextension/src/svg/chevron-down.svg create mode 100644 packages/taler-wallet-webextension/src/svg/delete_24px.svg create mode 100644 packages/taler-wallet-webextension/src/svg/logo-2021.svg create mode 100644 packages/taler-wallet-webextension/src/svg/ri-bank-line.svg create mode 100644 packages/taler-wallet-webextension/src/svg/ri-file-unknown-line.svg create mode 100644 packages/taler-wallet-webextension/src/svg/ri-hand-heart-line.svg create mode 100644 packages/taler-wallet-webextension/src/svg/ri-refresh-line.svg create mode 100644 packages/taler-wallet-webextension/src/svg/ri-refund-2-line.svg create mode 100644 packages/taler-wallet-webextension/src/svg/ri-shopping-cart-line.svg create mode 100644 packages/taler-wallet-webextension/src/svg/send_24px.svg create mode 100644 packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg create mode 100644 packages/taler-wallet-webextension/src/svg/spinner-bars.svg create mode 100644 packages/taler-wallet-webextension/src/svg/wifi.svg (limited to 'packages/taler-wallet-webextension/src') diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index 85e1f1884..680c34a9b 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -24,10 +24,15 @@ /** * Imports. */ -import { VNode, h } from "preact"; +import { h, VNode } from "preact"; import { JustInDevMode } from "./components/JustInDevMode"; -import { NavigationHeader, NavigationHeaderHolder } from "./components/styled"; +import { + NavigationHeader, + NavigationHeaderHolder, + SvgIcon, +} from "./components/styled"; import { useTranslationContext } from "./context/translation"; +import settingsIcon from "./svg/settings_black_24dp.svg"; /** * List of pages used by the wallet @@ -72,7 +77,11 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode { -
+ ); diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index 4d5b22208..258bd0676 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -22,7 +22,7 @@ import { Banner } from "./Banner"; import { Fragment, h, VNode } from "preact"; import { Avatar } from "../mui/Avatar"; -import { Icon } from "./styled"; +import { Icon, SvgIcon } from "./styled"; import { Typography } from "../mui/Typography"; export default { @@ -48,7 +48,7 @@ function Wrapper({ children }: any) { ); } function SignalWifiOffIcon({ ...rest }: any): VNode { - return ; + return ; } export const BasicExample = () => ( @@ -67,7 +67,7 @@ export const BasicExample = () => ( , + icon: , description: ( You have lost connection to the internet. This app is offline. diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index 085bf0b82..d6765c13d 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -15,7 +15,7 @@ */ import { VNode, h, ComponentChildren } from "preact"; import { useState } from "preact/hooks"; -import arrowDown from "../../static/img/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.svg"; import { ErrorBox } from "./styled"; export function ErrorMessage({ @@ -36,7 +36,10 @@ export function ErrorMessage({ setShowErrorDetail((v) => !v); }} > - +
)}
diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx index 38d6ec561..9fd8f7a03 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx @@ -16,7 +16,7 @@ import { TalerErrorDetail } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; -import arrowDown from "../../static/img/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.svg"; import { useDevContext } from "../context/devContext"; import { ErrorBox } from "./styled"; @@ -45,12 +45,12 @@ export function ErrorTalerOperation({ setShowErrorDetail((v) => !v); }} > - )} diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx index 6c47dc92a..573221614 100644 --- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx +++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx @@ -15,6 +15,7 @@ */ import { h } from "preact"; +import logo from "../svg/logo-2021.svg"; export function LogoHeader() { return ( @@ -25,14 +26,10 @@ export function LogoHeader() { margin: "2em", }} > - +
); } diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx index 1f46cf82c..866bd0379 100644 --- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx +++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx @@ -1,5 +1,5 @@ import { h, VNode } from "preact"; -import arrowDown from "../../static/img/chevron-down.svg"; +import arrowDown from "../svg/chevron-down.svg"; import { ButtonBoxPrimary, ButtonPrimary, ParagraphClickable } from "./styled"; import { useState } from "preact/hooks"; @@ -91,7 +91,10 @@ export function MultiActionButton({ borderBottomLeftRadius: 0, }} > - +
); diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 608e4af7c..13e3189fb 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -778,9 +778,6 @@ export const WarningBox = styled(ErrorBox)` border-color: #ffecb5; `; -import settingsIcon from "../../../static/img/settings_black_24dp.svg"; -import wifiIcon from "../../../static/img/wifi.svg"; - export const NavigationHeaderHolder = styled.div` width: 100%; display: flex; @@ -809,27 +806,25 @@ export const NavigationHeader = styled.div` line-height: 35px; } - & > a > div.settings-icon { - mask: url(${settingsIcon}) no-repeat center; - background-color: white; - width: 24px; - height: 24px; - margin-left: auto; - margin-right: 8px; - padding: 4px; - } & > a.active { background-color: #f8faf7; color: #0042b2; font-weight: bold; } - & > a.active > div.settings-icon { - background-color: #0042b2; +`; + +export const SvgIcon = styled.div<{ color: string }>` + & > svg { + fill: ${({ color }) => color}; } + width: 24px; + height: 24px; + margin-left: auto; + margin-right: 8px; + padding: 4px; `; export const Icon = styled.div` - mask: url(${wifiIcon}) no-repeat center; background-color: gray; width: 24px; height: 24px; diff --git a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts index 95c77cd76..082b3a05c 100644 --- a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts +++ b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts @@ -17,11 +17,10 @@ import { useTalerActionURL } from "./useTalerActionURL" import { mountHook } from "../test-utils"; import { IoCProviderForTesting } from "../context/iocContext"; import { h, VNode } from "preact"; -import { act } from "preact/test-utils"; +import { expect } from "chai"; describe('useTalerActionURL hook', () => { - // eslint-disable-next-line jest/expect-expect it('should be set url to undefined when dismiss', async () => { const ctx = ({ children }: { children: any }): VNode => { @@ -36,24 +35,25 @@ describe('useTalerActionURL hook', () => { { const [url] = result.current! - if (url !== undefined) throw Error('invalid') + expect(url).undefined; } - await waitNextUpdate() + await waitNextUpdate("waiting for useEffect") { const [url] = result.current! - if (url !== "asd") throw Error(`invalid: ${url}`) + expect(url).equals("asd"); } - await act(() => { - const [, setDismissed] = result.current! - setDismissed(true) - }) + const [, setDismissed] = result.current! + setDismissed(true) + + await waitNextUpdate("after dismiss") { const [url] = result.current! if (url !== undefined) throw Error('invalid') + expect(url).undefined; } }) diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx index a6863add3..9750c6a94 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx @@ -21,8 +21,8 @@ import { Button } from "./Button"; import { Fragment, h } from "preact"; -import DeleteIcon from "../../static/img/delete_24px.svg"; -import SendIcon from "../../static/img/send_24px.svg"; +import DeleteIcon from "../svg/delete_24px.svg"; +import SendIcon from "../svg/send_24px.svg"; import { styled } from "@linaria/react"; export default { diff --git a/packages/taler-wallet-webextension/src/mui/index.stories.tsx b/packages/taler-wallet-webextension/src/mui/index.stories.tsx new file mode 100644 index 000000000..7755c6f6a --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/index.stories.tsx @@ -0,0 +1,27 @@ +/* + This file is part of GNU Taler + (C) 2021 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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import * as a1 from "./Button.stories"; +import * as a3 from "./Grid.stories"; +import * as a4 from "./Paper.stories"; +import * as a5 from "./TextField.stories"; + +export default [a1, a3, a4, a5]; diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index 9de12da4c..2dc0f81e3 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -119,7 +119,7 @@ export function BalanceView({ {currencyWithNonZeroAmount.length > 0 && ( ( - Deposit {{s}} + Deposit {{s}} )} actions={currencyWithNonZeroAmount} onClick={(c) => goToWalletDeposit(c)} diff --git a/packages/taler-wallet-webextension/src/stories.test.ts b/packages/taler-wallet-webextension/src/stories.test.ts index db697460f..dc33dbde5 100644 --- a/packages/taler-wallet-webextension/src/stories.test.ts +++ b/packages/taler-wallet-webextension/src/stories.test.ts @@ -20,6 +20,7 @@ */ import * as popup from "./popup/index.stories"; import * as wallet from "./wallet/index.stories"; +import * as mui from "./mui/index.stories"; import { setupI18n } from "@gnu-taler/taler-util"; import { renderNodeOrBrowser } from "./test-utils"; @@ -40,7 +41,7 @@ function testThisStory(st: any): any { } describe("render every storybook example", () => { - [popup, wallet].forEach(function testAll(st: any) { + [popup, wallet, mui].forEach(function testAll(st: any) { if (Array.isArray(st.default)) { st.default.forEach(testAll) } else { diff --git a/packages/taler-wallet-webextension/src/svg/chevron-down.svg b/packages/taler-wallet-webextension/src/svg/chevron-down.svg new file mode 100644 index 000000000..36adbc1c6 --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/chevron-down.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/packages/taler-wallet-webextension/src/svg/delete_24px.svg b/packages/taler-wallet-webextension/src/svg/delete_24px.svg new file mode 100644 index 000000000..0d0b74d16 --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/delete_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/svg/logo-2021.svg b/packages/taler-wallet-webextension/src/svg/logo-2021.svg new file mode 100644 index 000000000..8c5ff3e5b --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/logo-2021.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg b/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg new file mode 100644 index 000000000..8d987df79 --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/ri-bank-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/src/svg/ri-file-unknown-line.svg b/packages/taler-wallet-webextension/src/svg/ri-file-unknown-line.svg new file mode 100644 index 000000000..5203d49f5 --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/ri-file-unknown-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/src/svg/ri-hand-heart-line.svg b/packages/taler-wallet-webextension/src/svg/ri-hand-heart-line.svg new file mode 100644 index 000000000..a9c195eac --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/ri-hand-heart-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/src/svg/ri-refresh-line.svg b/packages/taler-wallet-webextension/src/svg/ri-refresh-line.svg new file mode 100644 index 000000000..6efa8554b --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/ri-refresh-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/src/svg/ri-refund-2-line.svg b/packages/taler-wallet-webextension/src/svg/ri-refund-2-line.svg new file mode 100644 index 000000000..5805daf09 --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/ri-refund-2-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/src/svg/ri-shopping-cart-line.svg b/packages/taler-wallet-webextension/src/svg/ri-shopping-cart-line.svg new file mode 100644 index 000000000..50dabf446 --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/ri-shopping-cart-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/src/svg/send_24px.svg b/packages/taler-wallet-webextension/src/svg/send_24px.svg new file mode 100644 index 000000000..95fe7a4c6 --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/send_24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg b/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg new file mode 100644 index 000000000..adcd50405 --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/settings_black_24dp.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/svg/spinner-bars.svg b/packages/taler-wallet-webextension/src/svg/spinner-bars.svg new file mode 100644 index 000000000..f6f7dfcb3 --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/spinner-bars.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/taler-wallet-webextension/src/svg/wifi.svg b/packages/taler-wallet-webextension/src/svg/wifi.svg new file mode 100644 index 000000000..ad712435d --- /dev/null +++ b/packages/taler-wallet-webextension/src/svg/wifi.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/test-utils.ts b/packages/taler-wallet-webextension/src/test-utils.ts index 30b37ab8c..24dba8c7b 100644 --- a/packages/taler-wallet-webextension/src/test-utils.ts +++ b/packages/taler-wallet-webextension/src/test-utils.ts @@ -14,10 +14,16 @@ GNU Taler; see the file COPYING. If not, see */ -import { PendingTestFunction, TestFunction } from "mocha"; -import { ComponentChildren, Fragment, FunctionalComponent, h as create, render as renderIntoDom, VNode } from "preact"; +import { ComponentChildren, Fragment, FunctionalComponent, h as create, options, render as renderIntoDom, VNode } from "preact"; import { render as renderToString } from "preact-render-to-string"; +// When doing tests we want the requestAnimationFrame to be as fast as possible. +// without this option the RAF will timeout after 100ms making the tests slower +options.requestAnimationFrame = (fn: () => void) => { + // console.log("RAF called") + return fn() +} + export function createExample( Component: FunctionalComponent, props: Partial, @@ -59,7 +65,7 @@ export function renderNodeOrBrowser(Component: any, args: any): void { interface Mounted { unmount: () => void; result: { current: T | null }; - waitNextUpdate: () => Promise; + waitNextUpdate: (s?: string) => Promise; } const isNode = typeof window === "undefined" @@ -84,10 +90,11 @@ export function mountHook(callback: () => T, Context?: ({ children }: { child const vdom = !Context ? create(Component, {}) : create(Context, { children: [create(Component, {})] },); // waiter callback - async function waitNextUpdate(): Promise { + async function waitNextUpdate(_label = ""): Promise { + if (_label) _label = `. label: "${_label}"` await new Promise((res, rej) => { const tid = setTimeout(() => { - rej(Error("waiting for an update but the hook didn't make one")) + rej(Error(`waiting for an update but the hook didn't make one${_label}`)) }, 100) listener.push(() => { diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx index 05c518508..bea8f0029 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx @@ -19,6 +19,8 @@ import { AmountJson, Amounts, NotificationType, + parsePaytoUri, + PaytoUri, } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -41,6 +43,8 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode { response: AcceptManualWithdrawalResult; exchangeBaseUrl: string; amount: AmountJson; + paytoURI: PaytoUri | undefined; + payto: string; } | undefined >(undefined); @@ -60,7 +64,12 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode { exchangeBaseUrl, Amounts.stringify(amount), ); - setSuccess({ exchangeBaseUrl, response, amount }); + const payto = response.exchangePaytoUris[0]; + const paytoURI = parsePaytoUri(payto); + if (paytoURI && paytoURI.isKnown && paytoURI.targetType === "bitcoin") { + paytoURI.generateSegwitAddress(response.reservePub); + } + setSuccess({ exchangeBaseUrl, response, amount, paytoURI, payto }); } catch (e) { if (e instanceof Error) { setError(e.message); @@ -75,7 +84,8 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode { return ( @@ -39,11 +41,7 @@ export function ReserveCreated({ } function TransferDetails(): VNode { if (!paytoURI) return ; - if (paytoURI.targetType === "bitcoin") { - const { segwitAddr1, segwitAddr2 } = generateFakeSegwitAddress( - reservePub, - paytoURI.targetPath, - ); + if (paytoURI.isKnown && paytoURI.targetType === "bitcoin") { const min = segwitMinAmount(); return (
@@ -64,10 +62,10 @@ export function ReserveCreated({ {paytoURI.targetPath} {Amounts.stringifyValue(amount)} BTC
  • - {segwitAddr1} {Amounts.stringifyValue(min)} BTC + {paytoURI.addr1} {Amounts.stringifyValue(min)} BTC
  • - {segwitAddr2} {Amounts.stringifyValue(min)} BTC + {paytoURI.addr2} {Amounts.stringifyValue(min)} BTC
    • @@ -79,10 +77,10 @@ export function ReserveCreated({ {paytoURI.targetPath},{Amounts.stringifyValue(amount)}
  • - {segwitAddr1},{Amounts.stringifyValue(min)} + {paytoURI.addr1},{Amounts.stringifyValue(min)}
  • - {segwitAddr2},{Amounts.stringifyValue(min)} + {paytoURI.addr2},{Amounts.stringifyValue(min)}
    • -- cgit v1.2.3