From 610df1c9cf8ec91815130ac2a426f8f5b7d1ed0c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 12 Oct 2022 15:58:10 -0300 Subject: create a fee description timeline for global fee and wire fees --- .../src/wallet/ExchangeSelection/views.tsx | 255 ++++++++++++--------- 1 file changed, 145 insertions(+), 110 deletions(-) (limited to 'packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx') diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx index 47554bfcd..6b753e215 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx @@ -31,9 +31,7 @@ import { useTranslationContext } from "../../context/translation.js"; import { Button } from "../../mui/Button.js"; import arrowDown from "../../svg/chevron-down.svg"; import { State } from "./index.js"; -import { - State as SelectExchangeState -} from "../../hooks/useSelectedExchange.js"; +import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js"; const ButtonGroup = styled.div` & > button { @@ -59,7 +57,7 @@ const FeeDescriptionTable = styled.table` } td.value { text-align: right; - width: 1%; + width: 15%; white-space: nowrap; } td.icon { @@ -109,26 +107,28 @@ export function ErrorLoadingView({ error }: State.LoadingUriError): VNode { return ( Could not load tip status} + title={Could not load exchange fees} error={error} /> ); } - - -export function NoExchangesView({currency}: SelectExchangeState.NoExchange): VNode { +export function NoExchangesView({ + currency, +}: SelectExchangeState.NoExchange): VNode { const { i18n } = useTranslationContext(); if (!currency) { return (
could not find any exchange
- ); + ); } return (
- could not find any exchange for the currency {currency} + + could not find any exchange for the currency {currency} +
); } @@ -356,7 +356,6 @@ export function ReadyView({ exchanges, selected, onClose, - timeline, }: State.Ready): VNode { const { i18n } = useTranslationContext(); @@ -365,7 +364,10 @@ export function ReadyView({

Service fee description

- +

+ All fee indicated below are in the same and only currency the exchange + works. +

-

- - - Select {selected.currency} exchange - - } - list={exchanges.list} - name="lang" - value={exchanges.value} - onChange={exchanges.onChange} - /> - -

+ {Object.keys(exchanges.list).length === 1 ? ( + +

Exchange: {selected.exchangeBaseUrl}

+ + ) : ( +

+ + + Select {selected.currency} exchange + + } + list={exchanges.list} + name="lang" + value={exchanges.value} + onChange={exchanges.onChange} + /> + +

+ )} @@ -411,16 +419,25 @@ export function ReadyView({ + -
- currency + Currency + + {selected.currency} {selected.currency}

- Operations + Coin operations

+

+ + Every operation in this section may be different by denomination + value and is valid for a period of time. The exchange will charge + the indicated amount every time a coin is used in such operation. + +

Deposits

@@ -440,7 +457,10 @@ export function ReadyView({ - + Number(a) - Number(b)} + />

@@ -462,7 +482,10 @@ export function ReadyView({ - + Number(a) - Number(b)} + />

@@ -484,7 +507,10 @@ export function ReadyView({ - + Number(a) - Number(b)} + /> {" "}

@@ -506,53 +532,81 @@ export function ReadyView({ - + Number(a) - Number(b)} + /> - {" "} +

- +

+ Transfer operations +

+

+ + Every operation in this section may be different by transfer type + and is valid for a period of time. The exchange will charge the + indicated amount every time a transfer is made. + +

+ {Object.entries(selected.transferFees).map(([type, fees], idx) => { + return ( + +

{type}

+ + + + + + + + + + + + + + + ); + })} + +
+

+ Wallet operations +

+

+ + Every operation in this section may be different by transfer type + and is valid for a period of time. The exchange will charge the + indicated amount every time a transfer is made. + +

+
- - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + -
  + Operation + + Fee + + Until +
- Wallet operations - +   + Feature + Fee - + + Until +
history(i) 0.1
kyc (i) 0.1
account (i) 0.1
purse (i) 0.1
wire SEPA (i) 0.1
closing SEPA(i) 0.1
wad SEPA (i) 0.1
+
@@ -579,7 +633,7 @@ function FeeDescriptionRowsGroup({ setExpand((p) => !p)} @@ -594,9 +648,7 @@ function FeeDescriptionRowsGroup({ /> ) : undefined} - - {main ? : ""} - + {main ? info.group : ""} {info.fee ? ( {} ) : undefined} @@ -621,7 +673,7 @@ function FeePairRowsGroup({ infos }: { infos: FeeDescriptionPair[] }): VNode { setExpand((p) => !p)} @@ -636,9 +688,7 @@ function FeePairRowsGroup({ infos }: { infos: FeeDescriptionPair[] }): VNode { /> ) : undefined} - - {main ? : ""} - + {main ? info.group : ""} {info.left ? ( {} ) : ( @@ -673,7 +723,7 @@ function RenderFeePairByValue({ list }: { list: FeeDescriptionPair[] }): VNode { const next = idx >= list.length - 1 ? undefined : list[idx + 1]; const nextIsMoreInfo = - next !== undefined && Amounts.cmp(next.value, info.value) === 0; + next !== undefined && next.group === info.group; prev.rows.push(info); @@ -681,7 +731,7 @@ function RenderFeePairByValue({ list }: { list: FeeDescriptionPair[] }): VNode { return prev; } - prev.rows = []; + // prev.rows = []; prev.views.push(); return prev; }, @@ -701,36 +751,21 @@ function RenderFeePairByValue({ list }: { list: FeeDescriptionPair[] }): VNode { * @returns */ function RenderFeeDescriptionByValue({ - first, + list, + sorting, }: { - first: FeeDescription[]; + list: FeeDescription[]; + sorting?: (a: string, b: string) => number; }): VNode { - return ( - - { - first.reduce( - (prev, info, idx) => { - const next = idx >= first.length - 1 ? undefined : first[idx + 1]; - - const nextIsMoreInfo = - next !== undefined && Amounts.cmp(next.value, info.value) === 0; - - prev.rows.push(info); - - if (nextIsMoreInfo) { - return prev; - } - - prev.rows = []; - prev.views.push(); - return prev; - }, - { rows: [], views: [] } as { - rows: FeeDescription[]; - views: h.JSX.Element[]; - }, - ).views - } - - ); + const grouped = list.reduce((prev, cur) => { + if (!prev[cur.group]) { + prev[cur.group] = []; + } + prev[cur.group].push(cur); + return prev; + }, {} as Record); + const p = Object.keys(grouped) + .sort(sorting) + .map((i, idx) => ); + return {p}; } -- cgit v1.2.3