withdraw call to action

5 files changed, 156 insertions, 280 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
index 1bf38721c..b12e8df3b 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
@@ -29,6 +29,7 @@ import { CompletedView, LoadingExchangeView, LoadingInfoView, LoadingUriView, Su
 
 export interface Props {
   talerWithdrawUri: string | undefined;
+  cancel: () => Promise<void>;
 }
 
 export type State =
@@ -67,13 +68,8 @@ export namespace State {
     status: "success";
     error: undefined;
 
-    exchange: SelectFieldHandler;
+    exchangeUrl: string;
 
-    editExchange: ButtonHandler;
-    cancelEditExchange: ButtonHandler;
-    confirmEditExchange: ButtonHandler;
-
-    showExchangeSelection: boolean;
     chosenAmount: AmountJson;
     withdrawalFee: AmountJson;
     toBeReceived: AmountJson;
@@ -82,7 +78,9 @@ export namespace State {
     tosProps?: TermsOfServiceSectionProps;
     mustAcceptFirst: boolean;
 
-    ageRestriction: SelectFieldHandler;
+    ageRestriction?: SelectFieldHandler;
+
+    cancel: () => Promise<void>;
   };
 }
 
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
index 2e63c0f47..849dd5cca 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
@@ -17,20 +17,16 @@
 
 import { Amounts } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
-import { useMemo, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
-import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js";
 import { buildTermsOfServiceState } from "../../utils/index.js";
 import * as wxApi from "../../wxApi.js";
-import { State, Props } from "./index.js";
+import { Props, State } from "./index.js";
 
 export function useComponentState(
-  { talerWithdrawUri }: Props,
+  { talerWithdrawUri, cancel }: Props,
   api: typeof wxApi,
 ): State {
-  const [customExchange, setCustomExchange] = useState<string | undefined>(
-    undefined,
-  );
   const [ageRestricted, setAgeRestricted] = useState(0);
 
   /**
@@ -42,9 +38,8 @@ export function useComponentState(
     const uriInfo = await api.getWithdrawalDetailsForUri({
       talerWithdrawUri,
     });
-    const { exchanges: knownExchanges } = await api.listExchanges();
-
-    return { uriInfo, knownExchanges };
+    const { amount, defaultExchangeBaseUrl } = uriInfo
+    return { amount, thisExchange: defaultExchangeBaseUrl };
   });
 
   /**
@@ -55,65 +50,55 @@ export function useComponentState(
       ? undefined
       : uriInfoHook.response;
 
-  const { amount, thisExchange, thisCurrencyExchanges } = useMemo(() => {
-    if (!uriHookDep)
-      return {
-        amount: undefined,
-        thisExchange: undefined,
-        thisCurrencyExchanges: [],
-      };
+  // const { amount, thisExchange } = useMemo(() => {
+  // if (!uriHookDep)
+  //   return {
+  //     amount: undefined,
+  //     thisExchange: undefined,
+  //     thisCurrencyExchanges: [],
+  //   };
 
-    const { uriInfo, knownExchanges } = uriHookDep;
+  // const { uriInfo } = uriHookDep;
 
-    const amount = uriInfo ? Amounts.parseOrThrow(uriInfo.amount) : undefined;
-    const thisCurrencyExchanges =
-      !amount || !knownExchanges
-        ? []
-        : knownExchanges.filter((ex) => ex.currency === amount.currency);
+  // const amount = uriHookDep ? Amounts.parseOrThrow(uriHookDep.amount) : undefined;
+  // const thisExchange = uriHookDep?.thisExchange;
 
-    const thisExchange: string | undefined =
-      customExchange ??
-      uriInfo?.defaultExchangeBaseUrl ??
-      (thisCurrencyExchanges && thisCurrencyExchanges[0]
-        ? thisCurrencyExchanges[0].exchangeBaseUrl
-        : undefined);
-
-    return { amount, thisExchange, thisCurrencyExchanges };
-  }, [uriHookDep, customExchange]);
+  // return { amount, thisExchange };
+  // }, [uriHookDep]);
 
   /**
    * For the exchange selected, bring the status of the terms of service
    */
   const terms = useAsyncAsHook(async () => {
-    if (!thisExchange) return false;
+    if (!uriHookDep?.thisExchange) return false;
 
-    const exchangeTos = await api.getExchangeTos(thisExchange, ["text/xml"]);
+    const exchangeTos = await api.getExchangeTos(uriHookDep.thisExchange, ["text/xml"]);
 
     const state = buildTermsOfServiceState(exchangeTos);
 
     return { state };
-  }, [thisExchange]);
+  }, [uriHookDep]);
 
   /**
    * With the exchange and amount, ask the wallet the information
    * about the withdrawal
    */
-  const info = useAsyncAsHook(async () => {
-    if (!thisExchange || !amount) return false;
+  const amountHook = useAsyncAsHook(async () => {
+    if (!uriHookDep?.thisExchange) return false;
 
     const info = await api.getExchangeWithdrawalInfo({
-      exchangeBaseUrl: thisExchange,
-      amount,
+      exchangeBaseUrl: uriHookDep?.thisExchange,
+      amount: Amounts.parseOrThrow(uriHookDep.amount),
       tosAcceptedFormat: ["text/xml"],
     });
 
-    const withdrawalFee = Amounts.sub(
-      Amounts.parseOrThrow(info.withdrawalAmountRaw),
-      Amounts.parseOrThrow(info.withdrawalAmountEffective),
-    ).amount;
+    const withdrawAmount = {
+      raw: Amounts.parseOrThrow(info.withdrawalAmountRaw),
+      effective: Amounts.parseOrThrow(info.withdrawalAmountEffective),
+    }
 
-    return { info, withdrawalFee };
-  }, [thisExchange, amount]);
+    return { amount: withdrawAmount };
+  }, [uriHookDep]);
 
   const [reviewing, setReviewing] = useState<boolean>(false);
   const [reviewed, setReviewed] = useState<boolean>(false);
@@ -124,9 +109,6 @@ export function useComponentState(
   const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false);
   const [withdrawCompleted, setWithdrawCompleted] = useState<boolean>(false);
 
-  const [showExchangeSelection, setShowExchangeSelection] = useState(false);
-  const [nextExchange, setNextExchange] = useState<string | undefined>();
-
   if (!uriInfoHook) return { status: "loading", error: undefined }
   if (uriInfoHook.hasError) {
     return {
@@ -135,7 +117,10 @@ export function useComponentState(
     };
   }
 
-  if (!thisExchange || !amount) {
+  const { amount, thisExchange } = uriInfoHook.response
+  const chosenAmount = Amounts.parseOrThrow(amount);
+
+  if (!thisExchange) {
     return {
       status: "loading-exchange",
       error: {
@@ -146,15 +131,17 @@ export function useComponentState(
     };
   }
 
-  const selectedExchange = thisExchange;
+  // const selectedExchange = thisExchange;
 
   async function doWithdrawAndCheckError(): Promise<void> {
+    if (!thisExchange) return;
+
     try {
       setDoingWithdraw(true);
       if (!talerWithdrawUri) return;
       const res = await api.acceptWithdrawal(
         talerWithdrawUri,
-        selectedExchange,
+        thisExchange,
         !ageRestricted ? undefined : ageRestricted,
       );
       if (res.confirmTransferUrl) {
@@ -169,54 +156,27 @@ export function useComponentState(
     setDoingWithdraw(false);
   }
 
-  const exchanges = thisCurrencyExchanges.reduce(
-    (prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }),
-    {},
-  );
-
-  if (!info) {
+  if (!amountHook) {
     return { status: "loading", error: undefined }
   }
-  if (info.hasError) {
+  if (amountHook.hasError) {
     return {
       status: "loading-info",
-      error: info,
+      error: amountHook,
     };
   }
-  if (!info.response) {
+  if (!amountHook.response) {
     return { status: "loading", error: undefined };
   }
   if (withdrawCompleted) {
     return { status: "completed", error: undefined };
   }
 
-  const exchangeHandler: SelectFieldHandler = {
-    onChange: async (e) => setNextExchange(e),
-    value: nextExchange ?? thisExchange,
-    list: exchanges,
-    isDirty: nextExchange !== undefined,
-  };
-
-  const editExchange: ButtonHandler = {
-    onClick: async () => {
-      setShowExchangeSelection(true);
-    },
-  };
-  const cancelEditExchange: ButtonHandler = {
-    onClick: async () => {
-      setShowExchangeSelection(false);
-    },
-  };
-  const confirmEditExchange: ButtonHandler = {
-    onClick: async () => {
-      setCustomExchange(exchangeHandler.value);
-      setShowExchangeSelection(false);
-      setNextExchange(undefined);
-    },
-  };
-
-  const { withdrawalFee } = info.response;
-  const toBeReceived = Amounts.sub(amount, withdrawalFee).amount;
+  const withdrawalFee = Amounts.sub(
+    amountHook.response.amount.raw,
+    amountHook.response.amount.effective,
+  ).amount;
+  const toBeReceived = amountHook.response.amount.effective;
 
   const { state: termsState } = (!terms
     ? undefined
@@ -225,11 +185,11 @@ export function useComponentState(
       : terms.response) || { state: undefined };
 
   async function onAccept(accepted: boolean): Promise<void> {
-    if (!termsState) return;
+    if (!termsState || !thisExchange) return;
 
     try {
       await api.setExchangeTosAccepted(
-        selectedExchange,
+        thisExchange,
         accepted ? termsState.version : undefined,
       );
       setReviewed(accepted);
@@ -253,22 +213,22 @@ export function useComponentState(
     ageRestrictionOptions["0"] = "Not restricted";
   }
 
+  //TODO: calculate based on exchange info
+  const ageRestrictionEnabled = false;
+  const ageRestriction = ageRestrictionEnabled ? {
+    list: ageRestrictionOptions,
+    value: String(ageRestricted),
+    onChange: async (v: string) => setAgeRestricted(parseInt(v, 10)),
+  } : undefined;
+
   return {
     status: "success",
     error: undefined,
-    exchange: exchangeHandler,
-    editExchange,
-    cancelEditExchange,
-    confirmEditExchange,
-    showExchangeSelection,
+    exchangeUrl: thisExchange,
     toBeReceived,
     withdrawalFee,
-    chosenAmount: amount,
-    ageRestriction: {
-      list: ageRestrictionOptions,
-      value: String(ageRestricted),
-      onChange: async (v) => setAgeRestricted(parseInt(v, 10)),
-    },
+    chosenAmount,
+    ageRestriction,
     doWithdrawal: {
       onClick:
         doingWithdraw || (mustAcceptFirst && !reviewed)
@@ -286,6 +246,7 @@ export function useComponentState(
         terms: termsState,
       },
     mustAcceptFirst,
+    cancel,
   };
 }
 
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
index 3ecccd1b2..9c4faaf4a 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
@@ -63,24 +63,13 @@ const ageRestrictionSelectField = {
 export const TermsOfServiceNotYetLoaded = createExample(SuccessView, {
   error: undefined,
   status: "success",
-  cancelEditExchange: nullHandler,
-  confirmEditExchange: nullHandler,
-  ageRestriction: ageRestrictionSelectField,
   chosenAmount: {
     currency: "USD",
     value: 2,
     fraction: 10000000,
   },
   doWithdrawal: nullHandler,
-  editExchange: nullHandler,
-  exchange: {
-    list: exchangeList,
-    value: "exchange.demo.taler.net",
-    onChange: async () => {
-      null;
-    },
-  },
-  showExchangeSelection: false,
+  exchangeUrl: "https://exchange.demo.taler.net",
   mustAcceptFirst: false,
   withdrawalFee: {
     currency: "USD",
@@ -97,24 +86,13 @@ export const TermsOfServiceNotYetLoaded = createExample(SuccessView, {
 export const WithSomeFee = createExample(SuccessView, {
   error: undefined,
   status: "success",
-  cancelEditExchange: nullHandler,
-  confirmEditExchange: nullHandler,
-  ageRestriction: ageRestrictionSelectField,
   chosenAmount: {
     currency: "USD",
     value: 2,
     fraction: 10000000,
   },
   doWithdrawal: nullHandler,
-  editExchange: nullHandler,
-  exchange: {
-    list: exchangeList,
-    value: "exchange.demo.taler.net",
-    onChange: async () => {
-      null;
-    },
-  },
-  showExchangeSelection: false,
+  exchangeUrl: "https://exchange.demo.taler.net",
   mustAcceptFirst: false,
   withdrawalFee: {
     currency: "USD",
@@ -132,24 +110,13 @@ export const WithSomeFee = createExample(SuccessView, {
 export const WithoutFee = createExample(SuccessView, {
   error: undefined,
   status: "success",
-  cancelEditExchange: nullHandler,
-  confirmEditExchange: nullHandler,
-  ageRestriction: ageRestrictionSelectField,
   chosenAmount: {
     currency: "USD",
     value: 2,
-    fraction: 10000000,
+    fraction: 0,
   },
   doWithdrawal: nullHandler,
-  editExchange: nullHandler,
-  exchange: {
-    list: exchangeList,
-    value: "exchange.demo.taler.net",
-    onChange: async () => {
-      null;
-    },
-  },
-  showExchangeSelection: false,
+  exchangeUrl: "https://exchange.demo.taler.net",
   mustAcceptFirst: false,
   withdrawalFee: {
     currency: "USD",
@@ -167,24 +134,13 @@ export const WithoutFee = createExample(SuccessView, {
 export const EditExchangeUntouched = createExample(SuccessView, {
   error: undefined,
   status: "success",
-  cancelEditExchange: nullHandler,
-  confirmEditExchange: nullHandler,
-  ageRestriction: ageRestrictionSelectField,
   chosenAmount: {
     currency: "USD",
     value: 2,
     fraction: 10000000,
   },
   doWithdrawal: nullHandler,
-  editExchange: nullHandler,
-  exchange: {
-    list: exchangeList,
-    value: "exchange.demo.taler.net",
-    onChange: async () => {
-      null;
-    },
-  },
-  showExchangeSelection: true,
+  exchangeUrl: "https://exchange.demo.taler.net",
   mustAcceptFirst: false,
   withdrawalFee: {
     currency: "USD",
@@ -202,25 +158,13 @@ export const EditExchangeUntouched = createExample(SuccessView, {
 export const EditExchangeModified = createExample(SuccessView, {
   error: undefined,
   status: "success",
-  cancelEditExchange: nullHandler,
-  confirmEditExchange: nullHandler,
-  ageRestriction: ageRestrictionSelectField,
   chosenAmount: {
     currency: "USD",
     value: 2,
     fraction: 10000000,
   },
   doWithdrawal: nullHandler,
-  editExchange: nullHandler,
-  exchange: {
-    list: exchangeList,
-    isDirty: true,
-    value: "exchange.test.taler.net",
-    onChange: async () => {
-      null;
-    },
-  },
-  showExchangeSelection: true,
+  exchangeUrl: "https://exchange.demo.taler.net",
   mustAcceptFirst: false,
   withdrawalFee: {
     currency: "USD",
@@ -240,11 +184,9 @@ export const CompletedWithoutBankURL = createExample(CompletedView, {
   error: undefined,
 });
 
-export const WithAgeRestrictionSelected = createExample(SuccessView, {
+export const WithAgeRestriction = createExample(SuccessView, {
   error: undefined,
   status: "success",
-  cancelEditExchange: nullHandler,
-  confirmEditExchange: nullHandler,
   ageRestriction: ageRestrictionSelectField,
   chosenAmount: {
     currency: "USD",
@@ -252,15 +194,7 @@ export const WithAgeRestrictionSelected = createExample(SuccessView, {
     fraction: 10000000,
   },
   doWithdrawal: nullHandler,
-  editExchange: nullHandler,
-  exchange: {
-    list: exchangeList,
-    value: "exchange.demo.taler.net",
-    onChange: async () => {
-      null;
-    },
-  },
-  showExchangeSelection: false,
+  exchangeUrl: "https://exchange.demo.taler.net",
   mustAcceptFirst: false,
   withdrawalFee: {
     currency: "USD",
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
index f335f46a8..5917be092 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
@@ -44,7 +44,7 @@ describe("Withdraw CTA states", () => {
   it("should tell the user that the URI is missing", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerWithdrawUri: undefined }, {
+        useComponentState({ talerWithdrawUri: undefined, cancel: async () => { null } }, {
           listExchanges: async () => ({ exchanges }),
           getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
             amount: "ARS:2",
@@ -76,7 +76,7 @@ describe("Withdraw CTA states", () => {
   it("should tell the user that there is not known exchange", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerWithdrawUri: "taler-withdraw://" }, {
+        useComponentState({ talerWithdrawUri: "taler-withdraw://", cancel: async () => { null } }, {
           listExchanges: async () => ({ exchanges }),
           getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
             amount: "EUR:2",
@@ -110,17 +110,18 @@ describe("Withdraw CTA states", () => {
   it("should be able to withdraw if tos are ok", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerWithdrawUri: "taler-withdraw://" }, {
+        useComponentState({ talerWithdrawUri: "taler-withdraw://", cancel: async () => { null } }, {
           listExchanges: async () => ({ exchanges }),
           getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
             amount: "ARS:2",
             possibleExchanges: exchanges,
+            defaultExchangeBaseUrl: exchanges[0].exchangeBaseUrl
           }),
           getExchangeWithdrawalInfo:
             async (): Promise<ExchangeWithdrawDetails> =>
             ({
-              withdrawalAmountRaw: "ARS:5",
-              withdrawalAmountEffective: "ARS:5",
+              withdrawalAmountRaw: "ARS:2",
+              withdrawalAmountEffective: "ARS:2",
             } as any),
           getExchangeTos: async (): Promise<GetExchangeTosResult> => ({
             contentType: "text",
@@ -154,12 +155,12 @@ describe("Withdraw CTA states", () => {
       expect(state.status).equals("success");
       if (state.status !== "success") return;
 
-      expect(state.exchange.isDirty).false;
-      expect(state.exchange.value).equal("http://exchange.demo.taler.net");
-      expect(state.exchange.list).deep.equal({
-        "http://exchange.demo.taler.net": "http://exchange.demo.taler.net",
-      });
-      expect(state.showExchangeSelection).false;
+      // expect(state.exchange.isDirty).false;
+      // expect(state.exchange.value).equal("http://exchange.demo.taler.net");
+      // expect(state.exchange.list).deep.equal({
+      //   "http://exchange.demo.taler.net": "http://exchange.demo.taler.net",
+      // });
+      // expect(state.showExchangeSelection).false;
 
       expect(state.toBeReceived).deep.equal(Amounts.parseOrThrow("ARS:2"));
       expect(state.withdrawalFee).deep.equal(Amounts.parseOrThrow("ARS:0"));
@@ -175,17 +176,18 @@ describe("Withdraw CTA states", () => {
   it("should be accept the tos before withdraw", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerWithdrawUri: "taler-withdraw://" }, {
+        useComponentState({ talerWithdrawUri: "taler-withdraw://", cancel: async () => { null } }, {
           listExchanges: async () => ({ exchanges }),
           getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
             amount: "ARS:2",
             possibleExchanges: exchanges,
+            defaultExchangeBaseUrl: exchanges[0].exchangeBaseUrl
           }),
           getExchangeWithdrawalInfo:
             async (): Promise<ExchangeWithdrawDetails> =>
             ({
-              withdrawalAmountRaw: "ARS:5",
-              withdrawalAmountEffective: "ARS:5",
+              withdrawalAmountRaw: "ARS:2",
+              withdrawalAmountEffective: "ARS:2",
             } as any),
           getExchangeTos: async (): Promise<GetExchangeTosResult> => ({
             contentType: "text",
@@ -220,12 +222,12 @@ describe("Withdraw CTA states", () => {
       expect(state.status).equals("success");
       if (state.status !== "success") return;
 
-      expect(state.exchange.isDirty).false;
-      expect(state.exchange.value).equal("http://exchange.demo.taler.net");
-      expect(state.exchange.list).deep.equal({
-        "http://exchange.demo.taler.net": "http://exchange.demo.taler.net",
-      });
-      expect(state.showExchangeSelection).false;
+      // expect(state.exchange.isDirty).false;
+      // expect(state.exchange.value).equal("http://exchange.demo.taler.net");
+      // expect(state.exchange.list).deep.equal({
+      //   "http://exchange.demo.taler.net": "http://exchange.demo.taler.net",
+      // });
+      // expect(state.showExchangeSelection).false;
 
       expect(state.toBeReceived).deep.equal(Amounts.parseOrThrow("ARS:2"));
       expect(state.withdrawalFee).deep.equal(Amounts.parseOrThrow("ARS:0"));
@@ -245,12 +247,12 @@ describe("Withdraw CTA states", () => {
       expect(state.status).equals("success");
       if (state.status !== "success") return;
 
-      expect(state.exchange.isDirty).false;
-      expect(state.exchange.value).equal("http://exchange.demo.taler.net");
-      expect(state.exchange.list).deep.equal({
-        "http://exchange.demo.taler.net": "http://exchange.demo.taler.net",
-      });
-      expect(state.showExchangeSelection).false;
+      // expect(state.exchange.isDirty).false;
+      // expect(state.exchange.value).equal("http://exchange.demo.taler.net");
+      // expect(state.exchange.list).deep.equal({
+      //   "http://exchange.demo.taler.net": "http://exchange.demo.taler.net",
+      // });
+      // expect(state.showExchangeSelection).false;
 
       expect(state.toBeReceived).deep.equal(Amounts.parseOrThrow("ARS:2"));
       expect(state.withdrawalFee).deep.equal(Amounts.parseOrThrow("ARS:0"));
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 578e5e61f..6ca8f888f 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -15,25 +15,26 @@
  */
 
 import { Fragment, h, VNode } from "preact";
-import { State } from "./index.js";
-import { useTranslationContext } from "../../context/translation.js";
-import { Amount } from "../../components/Amount.js";
 import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { Loading } from "../../components/Loading.js";
 import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { SelectList } from "../../components/SelectList.js";
 import {
   Input,
-  LinkSuccess,
+  Link,
   SubTitle,
   SuccessBox,
+  SvgIcon,
   WalletAction,
 } from "../../components/styled/index.js";
-import { Amounts } from "@gnu-taler/taler-util";
-import { TermsOfServiceSection } from "../TermsOfServiceSection.js";
+import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
+import { ExchangeDetails, WithdrawDetails } from "../../wallet/Transaction.js";
+import { TermsOfServiceSection } from "../TermsOfServiceSection.js";
+import { State } from "./index.js";
+import editIcon from "../../svg/edit_24px.svg";
+import { Amount } from "../../components/Amount.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
@@ -115,77 +116,50 @@ export function SuccessView(state: State.Success): VNode {
         />
       )}
 
-      <section>
-        <Part
-          title={<i18n.Translate>Total to withdraw</i18n.Translate>}
-          text={<Amount value={state.toBeReceived} />}
-          kind="positive"
-        />
-        {Amounts.isNonZero(state.withdrawalFee) && (
-          <Fragment>
-            <Part
-              title={<i18n.Translate>Chosen amount</i18n.Translate>}
-              text={<Amount value={state.chosenAmount} />}
-              kind="neutral"
-            />
-            <Part
-              title={<i18n.Translate>Exchange fee</i18n.Translate>}
-              text={<Amount value={state.withdrawalFee} />}
-              kind="negative"
-            />
-          </Fragment>
-        )}
+      <section style={{ textAlign: "left" }}>
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
-          text={state.exchange.value}
+          title={
+            <div
+              style={{
+                display: "flex",
+              }}
+            >
+              <i18n.Translate>Exchange</i18n.Translate>
+              <SvgIcon
+                title="Edit"
+                dangerouslySetInnerHTML={{ __html: editIcon }}
+                color="black"
+                onClick={() => console.log("ok")}
+              />
+            </div>
+          }
+          text={<ExchangeDetails exchange={state.exchangeUrl} />}
           kind="neutral"
           big
         />
-        {state.showExchangeSelection ? (
-          <Fragment>
-            <div>
-              <SelectList
-                label={<i18n.Translate>Known exchanges</i18n.Translate>}
-                list={state.exchange.list}
-                value={state.exchange.value}
-                name="switchingExchange"
-                onChange={state.exchange.onChange}
-              />
-            </div>
-            <LinkSuccess
-              upperCased
-              style={{ fontSize: "small" }}
-              onClick={state.confirmEditExchange.onClick}
-            >
-              {state.exchange.isDirty ? (
-                <i18n.Translate>Confirm exchange selection</i18n.Translate>
-              ) : (
-                <i18n.Translate>Cancel exchange selection</i18n.Translate>
-              )}
-            </LinkSuccess>
-          </Fragment>
-        ) : (
-          <LinkSuccess
-            style={{ fontSize: "small" }}
-            upperCased
-            onClick={state.editExchange.onClick}
-          >
-            <i18n.Translate>Edit exchange</i18n.Translate>
-          </LinkSuccess>
+        <Part
+          title={<i18n.Translate>Details</i18n.Translate>}
+          text={
+            <WithdrawDetails
+              amount={{
+                effective: state.toBeReceived,
+                raw: state.chosenAmount,
+              }}
+            />
+          }
+        />
+        {state.ageRestriction && (
+          <Input>
+            <SelectList
+              label={<i18n.Translate>Age restriction</i18n.Translate>}
+              list={state.ageRestriction.list}
+              name="age"
+              value={state.ageRestriction.value}
+              onChange={state.ageRestriction.onChange}
+            />
+          </Input>
         )}
       </section>
-      <section>
-        <Input>
-          <SelectList
-            label={<i18n.Translate>Age restriction</i18n.Translate>}
-            list={state.ageRestriction.list}
-            name="age"
-            maxWidth
-            value={state.ageRestriction.value}
-            onChange={state.ageRestriction.onChange}
-          />
-        </Input>
-      </section>
       {state.tosProps && <TermsOfServiceSection {...state.tosProps} />}
       {state.tosProps ? (
         <section>
@@ -197,7 +171,9 @@ export function SuccessView(state: State.Success): VNode {
               disabled={!state.doWithdrawal.onClick}
               onClick={state.doWithdrawal.onClick}
             >
-              <i18n.Translate>Confirm withdrawal</i18n.Translate>
+              <i18n.Translate>
+                Receive &nbsp; <Amount value={state.toBeReceived} />
+              </i18n.Translate>
             </Button>
           )}
           {state.tosProps.terms.status === "notfound" && (
@@ -216,6 +192,11 @@ export function SuccessView(state: State.Success): VNode {
           <i18n.Translate>Loading terms of service...</i18n.Translate>
         </section>
       )}
+      <section>
+        <Link upperCased onClick={state.cancel}>
+          <i18n.Translate>Cancel</i18n.Translate>
+        </Link>
+      </section>
     </WalletAction>
   );
 }