diff options
author | Sebastian <sebasjm@gmail.com> | 2022-11-18 11:29:24 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-11-18 11:29:24 -0300 |
commit | d8088e30da7048fb8fa79cc1aa1a3240513309c6 (patch) | |
tree | e7469c187b77a81beee0490e88f86de14a85ad14 /packages/taler-wallet-webextension/src | |
parent | 6dc4fda73ac3f69af3a18d71f49c815ab6dbda21 (diff) | |
download | wallet-core-d8088e30da7048fb8fa79cc1aa1a3240513309c6.tar.xz |
fix #7394
Diffstat (limited to 'packages/taler-wallet-webextension/src')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts | 30 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx | 97 |
2 files changed, 82 insertions, 45 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts index 0a66dc381..39fbb6ce2 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts @@ -38,30 +38,34 @@ export function useComponentState( } const [value, setValue] = useState(String(initialValue)); + const selectedIdx = parseInt(value, 10); + const selectedExchange = + exchanges.length == 0 ? undefined : exchanges[selectedIdx]; + + const comparingExchanges = selectedIdx !== initialValue; + + const initialExchange = + comparingExchanges ? exchanges[initialValue] : undefined; + const hook = useAsyncAsHook(async () => { - const selectedIdx = parseInt(value, 10); - const selectedExchange = - exchanges.length == 0 ? undefined : exchanges[selectedIdx]; const selected = !selectedExchange ? undefined : await api.wallet.call(WalletApiOperation.GetExchangeDetailedInfo, { - exchangeBaseUrl: selectedExchange.exchangeBaseUrl, - }); + exchangeBaseUrl: selectedExchange.exchangeBaseUrl, + }); - const initialExchange = - selectedIdx === initialValue ? undefined : exchanges[initialValue]; const original = !initialExchange ? undefined : await api.wallet.call(WalletApiOperation.GetExchangeDetailedInfo, { - exchangeBaseUrl: initialExchange.exchangeBaseUrl, - }); + exchangeBaseUrl: initialExchange.exchangeBaseUrl, + }); return { exchanges, selected: selected?.exchange, original: original?.exchange, }; - }, [value]); + }, [selectedExchange, initialExchange]); const [showingTos, setShowingTos] = useState<string | undefined>(undefined); const [showingPrivacy, setShowingPrivacy] = useState<string | undefined>( @@ -83,8 +87,7 @@ export function useComponentState( const { selected, original } = hook.response; - if (!selected) { - //!selected <=> exchanges.length === 0 + if (selectedExchange === undefined || !selected) { return { status: "no-exchange", error: undefined, @@ -118,7 +121,7 @@ export function useComponentState( }; } - if (!original) { + if (!comparingExchanges || !original) { // !original <=> selected == original return { status: "ready", @@ -147,6 +150,7 @@ export function useComponentState( }; } + //this may be expensive, useMemo const pairTimeline: DenomOperationMap<FeeDescription[]> = { deposit: createPairTimeline( selected.denomFees.deposit, diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx index be059630f..95ab55261 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx @@ -262,7 +262,10 @@ export function ComparingView({ <i18n.Translate>Denomination</i18n.Translate> </th> <th class="fee"> - <i18n.Translate>Fee</i18n.Translate> + <i18n.Translate>Current</i18n.Translate> + </th> + <th class="fee"> + <i18n.Translate>Selected</i18n.Translate> </th> <th> <i18n.Translate>Until</i18n.Translate> @@ -270,7 +273,10 @@ export function ComparingView({ </tr> </thead> <tbody> - <RenderFeePairByValue list={pairTimeline.deposit} /> + <RenderFeePairByValue + list={pairTimeline.deposit} + sorting={(a, b) => Number(a) - Number(b)} + /> </tbody> </FeeDescriptionTable> <p> @@ -292,7 +298,10 @@ export function ComparingView({ </tr> </thead> <tbody> - <RenderFeePairByValue list={pairTimeline.withdraw} /> + <RenderFeePairByValue + list={pairTimeline.withdraw} + sorting={(a, b) => Number(a) - Number(b)} + /> </tbody> </FeeDescriptionTable> <p> @@ -314,7 +323,10 @@ export function ComparingView({ </tr> </thead> <tbody> - <RenderFeePairByValue list={pairTimeline.refund} /> + <RenderFeePairByValue + list={pairTimeline.refund} + sorting={(a, b) => Number(a) - Number(b)} + /> </tbody> </FeeDescriptionTable>{" "} <p> @@ -336,7 +348,10 @@ export function ComparingView({ </tr> </thead> <tbody> - <RenderFeePairByValue list={pairTimeline.refresh} /> + <RenderFeePairByValue + list={pairTimeline.refresh} + sorting={(a, b) => Number(a) - Number(b)} + /> </tbody> </FeeDescriptionTable>{" "} </section> @@ -689,7 +704,7 @@ function FeePairRowsGroup({ infos }: { infos: FeeDescriptionPair[] }): VNode { <td class="icon"> {hasMoreInfo && main ? ( <SvgIcon - title="Select this contact" + title="Expand" dangerouslySetInnerHTML={{ __html: arrowDown }} color="currentColor" transform={expanded ? "" : "rotate(-90deg)"} @@ -708,7 +723,7 @@ function FeePairRowsGroup({ infos }: { infos: FeeDescriptionPair[] }): VNode { <td class="fee"> --- </td> )} <td class="expiration"> - <Time timestamp={info.until} format="dd-MMM-yyyy" /> + <Time timestamp={info.until} format="dd-MMM-yyyy HH:mm:ss" /> </td> </tr> ); @@ -722,35 +737,53 @@ function FeePairRowsGroup({ infos }: { infos: FeeDescriptionPair[] }): VNode { * @param param0 * @returns */ -function RenderFeePairByValue({ list }: { list: FeeDescriptionPair[] }): VNode { - return ( - <Fragment> - { - list.reduce( - (prev, info, idx) => { - const next = idx >= list.length - 1 ? undefined : list[idx + 1]; +function RenderFeePairByValue({ + list, + sorting, +}: { + list: FeeDescriptionPair[]; + sorting?: (a: string, b: string) => number; +}): VNode { + const grouped = list.reduce((prev, cur) => { + if (!prev[cur.group]) { + prev[cur.group] = []; + } + prev[cur.group].push(cur); + return prev; + }, {} as Record<string, FeeDescriptionPair[]>); + const p = Object.keys(grouped) + .sort(sorting) + .map((i, idx) => <FeePairRowsGroup key={idx} infos={grouped[i]} />); + return <Fragment>{p}</Fragment>; - const nextIsMoreInfo = - next !== undefined && next.group === info.group; + // return ( + // <Fragment> + // { + // list.reduce( + // (prev, info, idx) => { + // const next = idx >= list.length - 1 ? undefined : list[idx + 1]; - prev.rows.push(info); + // const nextIsMoreInfo = + // next !== undefined && next.group === info.group; - if (nextIsMoreInfo) { - return prev; - } + // prev.rows.push(info); - // prev.rows = []; - prev.views.push(<FeePairRowsGroup infos={prev.rows} />); - return prev; - }, - { rows: [], views: [] } as { - rows: FeeDescriptionPair[]; - views: h.JSX.Element[]; - }, - ).views - } - </Fragment> - ); + // if (nextIsMoreInfo) { + // return prev; + // } + + // // prev.rows = []; + // prev.views.push(<FeePairRowsGroup infos={prev.rows} />); + // return prev; + // }, + // { rows: [], views: [] } as { + // rows: FeeDescriptionPair[]; + // views: h.JSX.Element[]; + // }, + // ).views + // } + // </Fragment> + // ); } /** * |