From 49948eea98b9016446c6d4da3d757fc39860a8cc Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 17 Mar 2022 15:00:34 -0300 Subject: fulfillment url on payment ticket --- .../src/components/Part.tsx | 2 +- packages/taler-wallet-webextension/src/cta/Pay.tsx | 7 ++ .../src/popup/BalancePage.tsx | 2 +- .../src/popupEntryPoint.tsx | 3 - .../src/wallet/BackupPage.tsx | 16 ---- .../src/wallet/CreateManualWithdraw.tsx | 106 ++++++++++++++------- .../src/wallet/ManualWithdrawPage.tsx | 7 -- .../src/wallet/Transaction.tsx | 28 +++++- 8 files changed, 109 insertions(+), 62 deletions(-) (limited to 'packages/taler-wallet-webextension/src') diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx index 05da90b2d..89cc51391 100644 --- a/packages/taler-wallet-webextension/src/components/Part.tsx +++ b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -20,7 +20,7 @@ import { h, VNode } from "preact"; export type Kind = "positive" | "negative" | "neutral"; interface Props { title: VNode; - text: AmountLike; + text: VNode | string; kind: Kind; big?: boolean; } diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index ba31f4c34..de0978aca 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -47,6 +47,8 @@ import { Part } from "../components/Part"; import { QR } from "../components/QR"; import { ButtonSuccess, + Link, + LinkPrimary, LinkSuccess, SmallLightText, SuccessBox, @@ -406,6 +408,11 @@ export function PaymentRequestView({ )} +
+ + Cancel + +
); } diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index c894c333f..9de12da4c 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -34,7 +34,7 @@ import { AddNewActionView } from "../wallet/AddNewActionView"; import * as wxApi from "../wxApi"; import { NoBalanceHelp } from "./NoBalanceHelp"; -interface Props { +export interface Props { goToWalletDeposit: (currency: string) => void; goToWalletHistory: (currency: string) => void; goToWalletManualWithdraw: () => void; diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index 6a58648b1..f4df4f7f5 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -38,11 +38,8 @@ import { useTalerActionURL } from "./hooks/useTalerActionURL"; import { strings } from "./i18n/strings"; import { Pages, PopupNavBar } from "./NavigationBar"; import { BalancePage } from "./popup/BalancePage"; -import { DeveloperPage } from "./popup/DeveloperPage"; import { TalerActionFound } from "./popup/TalerActionFound"; import { BackupPage } from "./wallet/BackupPage"; -import { ExchangeAddPage } from "./wallet/ExchangeAddPage"; -import { ProviderAddPage } from "./wallet/ProviderAddPage"; import { ProviderDetailPage } from "./wallet/ProviderDetailPage"; function main(): void { 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; onCreate: (exchangeBaseUrl: string, amount: AmountJson) => Promise; - onAddExchange: () => void; initialCurrency?: string; } -export function CreateManualWithdraw({ - initialAmount, - exchangeList, - error, - initialCurrency, - onCreate, - onAddExchange, -}: Props): VNode { - const { i18n } = useTranslationContext(); +export function useComponentState( + exchangeList: Record, + 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; + 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 (

@@ -115,9 +153,12 @@ export function CreateManualWithdraw({ No exchange configured - - Add exchange - + + Add Exchange +

); @@ -146,37 +187,38 @@ export function CreateManualWithdraw({ Currency} - list={currencyMap} name="currency" - value={currency} - onChange={changeCurrency} + {...state.currency} /> Exchange} - list={exchangeMap} - name="currency" - value={exchange} - onChange={changeExchange} + name="exchange" + {...state.exchange} />
- + Add Exchange
- {currency && ( - + {state.currency.value && ( +
- {currency} + {state.currency.value} setAmount(e.currentTarget.value)} + value={state.amount.value} + onInput={(e) => state.amount.onInput(e.currentTarget.value)} />
@@ -186,8 +228,8 @@ export function CreateManualWithdraw({