aboutsummaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx')
-rw-r--r--packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx195
1 files changed, 157 insertions, 38 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
index 95ab55261..26ff2c0d3 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
@@ -178,7 +178,11 @@ export function ComparingView({
selected,
onReset,
onSelect,
- pairTimeline,
+ coinOperationTimeline,
+ globalFeeTimeline,
+ wireFeeTimeline,
+ missingWireTYpe,
+ newWireType,
onShowPrivacy,
onShowTerms,
}: State.Comparing): VNode {
@@ -249,9 +253,16 @@ export function ComparingView({
</section>
<section>
<h2>
- <i18n.Translate>Operations</i18n.Translate>
+ <i18n.Translate>Coin operations</i18n.Translate>
</h2>
<p>
+ <i18n.Translate>
+ 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.
+ </i18n.Translate>
+ </p>
+ <p>
<i18n.Translate>Deposits</i18n.Translate>
</p>
<FeeDescriptionTable>
@@ -274,7 +285,7 @@ export function ComparingView({
</thead>
<tbody>
<RenderFeePairByValue
- list={pairTimeline.deposit}
+ list={coinOperationTimeline.deposit}
sorting={(a, b) => Number(a) - Number(b)}
/>
</tbody>
@@ -290,7 +301,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>
@@ -299,7 +313,7 @@ export function ComparingView({
</thead>
<tbody>
<RenderFeePairByValue
- list={pairTimeline.withdraw}
+ list={coinOperationTimeline.withdraw}
sorting={(a, b) => Number(a) - Number(b)}
/>
</tbody>
@@ -315,7 +329,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>
@@ -324,7 +341,7 @@ export function ComparingView({
</thead>
<tbody>
<RenderFeePairByValue
- list={pairTimeline.refund}
+ list={coinOperationTimeline.refund}
sorting={(a, b) => Number(a) - Number(b)}
/>
</tbody>
@@ -340,7 +357,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>
@@ -349,13 +369,141 @@ export function ComparingView({
</thead>
<tbody>
<RenderFeePairByValue
- list={pairTimeline.refresh}
+ list={coinOperationTimeline.refresh}
sorting={(a, b) => Number(a) - Number(b)}
/>
</tbody>
</FeeDescriptionTable>{" "}
</section>
<section>
+ <h2>
+ <i18n.Translate>Transfer operations</i18n.Translate>
+ </h2>
+ <p>
+ <i18n.Translate>
+ 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.
+ </i18n.Translate>
+ </p>
+ {missingWireTYpe.map((type) => {
+ return (
+ <p key={type}>
+ Wire <b>{type}</b> is not supported for this exchange.
+ </p>
+ );
+ })}
+ {newWireType.map((type) => {
+ return (
+ <Fragment key={type}>
+ <p>
+ Wire <b>{type}</b> is not supported for the previous exchange.
+ </p>
+ <FeeDescriptionTable>
+ <thead>
+ <tr>
+ <th>&nbsp;</th>
+ <th>
+ <i18n.Translate>Operation</i18n.Translate>
+ </th>
+ <th class="fee">
+ <i18n.Translate>Fee</i18n.Translate>
+ </th>
+ <th>
+ <i18n.Translate>Until</i18n.Translate>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <RenderFeeDescriptionByValue
+ list={selected.transferFees[type]}
+ />
+ </tbody>
+ </FeeDescriptionTable>
+ </Fragment>
+ );
+ })}
+ {Object.entries(wireFeeTimeline).map(([type, fees], idx) => {
+ return (
+ <Fragment key={idx}>
+ <p>{type}</p>
+ <FeeDescriptionTable>
+ <thead>
+ <tr>
+ <th>&nbsp;</th>
+ <th>
+ <i18n.Translate>Operation</i18n.Translate>
+ </th>
+ <th class="fee">
+ <i18n.Translate>Current</i18n.Translate>
+ </th>
+ <th class="fee">
+ <i18n.Translate>Selected</i18n.Translate>
+ </th>
+ <th>
+ <i18n.Translate>Until</i18n.Translate>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <RenderFeePairByValue
+ list={fees}
+ sorting={(a, b) => a.localeCompare(b)}
+ />
+ </tbody>
+ </FeeDescriptionTable>
+ </Fragment>
+ );
+ })}
+ </section>
+ <section>
+ <h2>
+ <i18n.Translate>Wallet operations</i18n.Translate>
+ </h2>
+ <p>
+ <i18n.Translate>
+ 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.
+ </i18n.Translate>
+ </p>
+ <FeeDescriptionTable>
+ <thead>
+ <tr>
+ <th>&nbsp;</th>
+ <th>
+ <i18n.Translate>Feature</i18n.Translate>
+ </th>
+ <th class="fee">
+ <i18n.Translate>Current</i18n.Translate>
+ </th>
+ <th class="fee">
+ <i18n.Translate>Selected</i18n.Translate>
+ </th>
+ <th>
+ <i18n.Translate>Until</i18n.Translate>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <RenderFeePairByValue
+ list={globalFeeTimeline}
+ sorting={(a, b) => a.localeCompare(b)}
+ />
+ </tbody>
+ </FeeDescriptionTable>
+ </section>
+ <section>
+ <ButtonGroupFooter>
+ <Button onClick={onShowPrivacy.onClick} variant="outlined">
+ Privacy policy
+ </Button>
+ <Button onClick={onShowTerms.onClick} variant="outlined">
+ Terms of service
+ </Button>
+ </ButtonGroupFooter>
+ </section>
+ <section>
<ButtonGroupFooter>
<Button onClick={onShowPrivacy.onClick} variant="outlined">
Privacy policy
@@ -755,35 +903,6 @@ function RenderFeePairByValue({
.sort(sorting)
.map((i, idx) => <FeePairRowsGroup key={idx} infos={grouped[i]} />);
return <Fragment>{p}</Fragment>;
-
- // return (
- // <Fragment>
- // {
- // list.reduce(
- // (prev, info, idx) => {
- // const next = idx >= list.length - 1 ? undefined : list[idx + 1];
-
- // const nextIsMoreInfo =
- // next !== undefined && next.group === info.group;
-
- // prev.rows.push(info);
-
- // 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>
- // );
}
/**
*