new compose feature: sub-states

implemented in withdraw page, WIP

16 files changed, 444 insertions, 419 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
index 8beac2cb2..2bee51669 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
@@ -48,6 +48,7 @@ export namespace State {
   }
   export interface Ready extends BaseInfo {
     status: "ready";
+    doSelectExchange: ButtonHandler;
     create: ButtonHandler;
     subject: TextFieldHandler;
     toBeReceived: AmountJson;
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
index 6b4f54504..9b67b4414 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
@@ -84,6 +84,9 @@ export function useComponentState(
       value: subject,
       onInput: async (e) => setSubject(e),
     },
+    doSelectExchange: {
+      //FIX
+    },
     invalid: !subject || Amounts.isZero(amount),
     exchangeUrl: selected.exchangeBaseUrl,
     create: {
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
index b5a0a52e2..306d1b199 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
@@ -38,6 +38,9 @@ export const Ready = createExample(ReadyView, {
     value: 1,
     fraction: 0,
   },
+  doSelectExchange: {
+
+  },
   exchangeUrl: "https://exchange.taler.ar",
   subject: {
     value: "some subject",
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
index 209fb31e5..603392b60 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
@@ -54,6 +54,7 @@ export function ReadyView({
   create,
   toBeReceived,
   chosenAmount,
+  doSelectExchange,
 }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
 
@@ -93,13 +94,13 @@ export function ReadyView({
               }}
             >
               <i18n.Translate>Exchange</i18n.Translate>
-              {/* <Link>
+              <Button onClick={doSelectExchange.onClick} variant="text">
                 <SvgIcon
                   title="Edit"
                   dangerouslySetInnerHTML={{ __html: editIcon }}
                   color="black"
                 />
-              </Link> */}
+              </Button>
             </div>
           }
           text={<ExchangeDetails exchange={exchangeUrl} />}
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/state.ts b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
index e8690be39..8d388aa60 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
@@ -128,6 +128,7 @@ export function useComponentState(
         });
       }
       const res = await api.confirmPay(payStatus.proposalId, undefined);
+      // handle confirm pay
       if (res.type !== ConfirmPayResultType.Done) {
         throw TalerError.fromUncheckedDetail({
           code: TalerErrorCode.GENERIC_CLIENT_INTERNAL_ERROR,
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
index 2d9aaf828..d38c27a2f 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
@@ -26,11 +26,16 @@ import {
   useComponentStateFromURI,
 } from "./state.js";
 import {
+  State as SelectExchangeState
+} from "../../hooks/useSelectedExchange.js";
+
+import {
   LoadingExchangeView,
   LoadingInfoView,
   LoadingUriView,
   SuccessView,
 } from "./views.js";
+import { ExchangeSelectionPage } from "../../wallet/ExchangeSelection/index.js";
 
 export interface PropsFromURI {
   talerWithdrawUri: string | undefined;
@@ -49,6 +54,7 @@ export type State =
   | State.LoadingUriError
   | State.LoadingExchangeError
   | State.LoadingInfoError
+  | SelectExchangeState.Selecting
   | State.Success;
 
 export namespace State {
@@ -57,12 +63,12 @@ export namespace State {
     error: undefined;
   }
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "loading-error";
     error: HookError;
   }
   export interface LoadingExchangeError {
-    status: "loading-exchange";
-    error: HookError;
+    status: "no-exchange";
+    error: undefined,
   }
   export interface LoadingInfoError {
     status: "loading-info";
@@ -80,6 +86,7 @@ export namespace State {
     toBeReceived: AmountJson;
 
     doWithdrawal: ButtonHandler;
+    doSelectExchange: ButtonHandler;
     tosProps?: TermsOfServiceSectionProps;
     mustAcceptFirst: boolean;
 
@@ -92,9 +99,10 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
-  "loading-exchange": LoadingExchangeView,
+  "loading-error": LoadingUriView,
+  "no-exchange": LoadingExchangeView,
   "loading-info": LoadingInfoView,
+  "selecting-exchange": ExchangeSelectionPage,
   success: SuccessView,
 };
 
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
index 1256bf469..2e68d056e 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
@@ -14,223 +14,58 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, parsePaytoUri } from "@gnu-taler/taler-util";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { AmountJson, Amounts, ExchangeListItem, parsePaytoUri } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
+import { Amount } from "../../components/Amount.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
+import { useSelectedExchange } from "../../hooks/useSelectedExchange.js";
 import { buildTermsOfServiceState } from "../../utils/index.js";
 import * as wxApi from "../../wxApi.js";
 import { PropsFromURI, PropsFromParams, State } from "./index.js";
 
+type RecursiveState<S extends object> = S | (() => RecursiveState<S>)
+
 export function useComponentStateFromParams(
   { amount, cancel, onSuccess }: PropsFromParams,
   api: typeof wxApi,
-): State {
-  const [ageRestricted, setAgeRestricted] = useState(0);
-
-  const exchangeHook = useAsyncAsHook(api.listExchanges);
-
-  const exchangeHookDep =
-    !exchangeHook || exchangeHook.hasError || !exchangeHook.response
-      ? undefined
-      : exchangeHook.response;
-
-  const chosenAmount = Amounts.parseOrThrow(amount);
-
-  // get the first exchange with the currency as the default one
-  const exchange = exchangeHookDep
-    ? exchangeHookDep.exchanges.find(
-        (e) => e.currency === chosenAmount.currency,
-      )
-    : undefined;
-  /**
-   * For the exchange selected, bring the status of the terms of service
-   */
-  const terms = useAsyncAsHook(async () => {
-    if (!exchange) return undefined;
-
-    const exchangeTos = await api.getExchangeTos(exchange.exchangeBaseUrl, [
-      "text/xml",
-    ]);
-
-    const state = buildTermsOfServiceState(exchangeTos);
-
-    return { state };
-  }, [exchangeHookDep]);
-
-  /**
-   * With the exchange and amount, ask the wallet the information
-   * about the withdrawal
-   */
-  const amountHook = useAsyncAsHook(async () => {
-    if (!exchange) return undefined;
-
-    const info = await api.getExchangeWithdrawalInfo({
-      exchangeBaseUrl: exchange.exchangeBaseUrl,
-      amount: chosenAmount,
-      tosAcceptedFormat: ["text/xml"],
-      ageRestricted,
-    });
-
-    const withdrawAmount = {
-      raw: Amounts.parseOrThrow(info.withdrawalAmountRaw),
-      effective: Amounts.parseOrThrow(info.withdrawalAmountEffective),
-    };
-
-    return {
-      amount: withdrawAmount,
-      ageRestrictionOptions: info.ageRestrictionOptions,
-    };
-  }, [exchangeHookDep]);
-
-  const [reviewing, setReviewing] = useState<boolean>(false);
-  const [reviewed, setReviewed] = useState<boolean>(false);
+): RecursiveState<State> {
+  const uriInfoHook = useAsyncAsHook(async () => {
+    const exchanges = await api.listExchanges();
+    return { amount: Amounts.parseOrThrow(amount), exchanges };
+  });
 
-  const [withdrawError, setWithdrawError] = useState<TalerError | undefined>(
-    undefined,
-  );
-  const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false);
+  console.log("uri info", uriInfoHook)
 
-  if (!exchangeHook) return { status: "loading", error: undefined };
-  if (exchangeHook.hasError) {
-    return {
-      status: "loading-uri",
-      error: exchangeHook,
-    };
-  }
+  if (!uriInfoHook) return { status: "loading", error: undefined };
 
-  if (!exchange) {
+  if (uriInfoHook.hasError) {
     return {
-      status: "loading-exchange",
-      error: {
-        hasError: true,
-        operational: false,
-        message: "ERROR_NO-DEFAULT-EXCHANGE",
-      },
+      status: "loading-error",
+      error: uriInfoHook,
     };
   }
 
-  async function doWithdrawAndCheckError(): Promise<void> {
-    if (!exchange) return;
+  const chosenAmount = uriInfoHook.response.amount;
+  const exchangeList = uriInfoHook.response.exchanges.exchanges
 
-    try {
-      setDoingWithdraw(true);
-
-      const response = await wxApi.acceptManualWithdrawal(
-        exchange.exchangeBaseUrl,
-        Amounts.stringify(amount),
-      );
-
-      onSuccess(response.transactionId);
-    } catch (e) {
-      if (e instanceof TalerError) {
-        setWithdrawError(e);
-      }
-    }
-    setDoingWithdraw(false);
-  }
-
-  if (!amountHook) {
-    return { status: "loading", error: undefined };
-  }
-  if (amountHook.hasError) {
+  async function doManualWithdraw(exchange: string, ageRestricted: number | undefined): Promise<{ transactionId: string, confirmTransferUrl: string | undefined }> {
+    const res = await api.acceptManualWithdrawal(exchange, Amounts.stringify(chosenAmount), ageRestricted);
     return {
-      status: "loading-info",
-      error: amountHook,
+      confirmTransferUrl: undefined,
+      transactionId: res.transactionId
     };
   }
-  if (!amountHook.response) {
-    return { status: "loading", error: undefined };
-  }
 
-  const withdrawalFee = Amounts.sub(
-    amountHook.response.amount.raw,
-    amountHook.response.amount.effective,
-  ).amount;
-  const toBeReceived = amountHook.response.amount.effective;
-
-  const { state: termsState } = (!terms
-    ? undefined
-    : terms.hasError
-    ? undefined
-    : terms.response) || { state: undefined };
-
-  async function onAccept(accepted: boolean): Promise<void> {
-    if (!termsState || !exchange) return;
-
-    try {
-      await api.setExchangeTosAccepted(
-        exchange.exchangeBaseUrl,
-        accepted ? termsState.version : undefined,
-      );
-      setReviewed(accepted);
-    } catch (e) {
-      if (e instanceof Error) {
-        //FIXME: uncomment this and display error
-        // setErrorAccepting(e.message);
-      }
-    }
-  }
-
-  const mustAcceptFirst =
-    termsState !== undefined &&
-    (termsState.status === "changed" || termsState.status === "new");
+  return () => exchangeSelectionState(doManualWithdraw, cancel, onSuccess, undefined, chosenAmount, exchangeList, undefined, api)
 
-  const ageRestrictionOptions =
-    amountHook.response.ageRestrictionOptions?.reduce(
-      (p, c) => ({ ...p, [c]: `under ${c}` }),
-      {} as Record<string, string>,
-    );
-
-  const ageRestrictionEnabled = ageRestrictionOptions !== undefined;
-  if (ageRestrictionEnabled) {
-    ageRestrictionOptions["0"] = "Not restricted";
-  }
-
-  //TODO: calculate based on exchange info
-  const ageRestriction = ageRestrictionEnabled
-    ? {
-        list: ageRestrictionOptions,
-        value: String(ageRestricted),
-        onChange: async (v: string) => setAgeRestricted(parseInt(v, 10)),
-      }
-    : undefined;
-
-  return {
-    status: "success",
-    error: undefined,
-    exchangeUrl: exchange.exchangeBaseUrl,
-    toBeReceived,
-    withdrawalFee,
-    chosenAmount,
-    ageRestriction,
-    doWithdrawal: {
-      onClick:
-        doingWithdraw || (mustAcceptFirst && !reviewed)
-          ? undefined
-          : doWithdrawAndCheckError,
-      error: withdrawError,
-    },
-    tosProps: !termsState
-      ? undefined
-      : {
-          onAccept,
-          onReview: setReviewing,
-          reviewed: reviewed,
-          reviewing: reviewing,
-          terms: termsState,
-        },
-    mustAcceptFirst,
-    cancel,
-  };
 }
 
 export function useComponentStateFromURI(
   { talerWithdrawUri, cancel, onSuccess }: PropsFromURI,
   api: typeof wxApi,
-): State {
-  const [ageRestricted, setAgeRestricted] = useState(0);
-
+): RecursiveState<State> {
   /**
    * Ask the wallet about the withdraw URI
    */
@@ -240,207 +75,219 @@ export function useComponentStateFromURI(
     const uriInfo = await api.getWithdrawalDetailsForUri({
       talerWithdrawUri,
     });
+    const exchanges = await api.listExchanges();
     const { amount, defaultExchangeBaseUrl } = uriInfo;
-    return { amount, thisExchange: defaultExchangeBaseUrl };
+    return { talerWithdrawUri, amount: Amounts.parseOrThrow(amount), thisExchange: defaultExchangeBaseUrl, exchanges };
   });
 
-  /**
-   * Get the amount and select one exchange
-   */
-  const uriHookDep =
-    !uriInfoHook || uriInfoHook.hasError || !uriInfoHook.response
-      ? undefined
-      : uriInfoHook.response;
-
-  /**
-   * For the exchange selected, bring the status of the terms of service
-   */
-  const terms = useAsyncAsHook(async () => {
-    if (!uriHookDep?.thisExchange) return false;
-
-    const exchangeTos = await api.getExchangeTos(uriHookDep.thisExchange, [
-      "text/xml",
-    ]);
-
-    const state = buildTermsOfServiceState(exchangeTos);
-
-    return { state };
-  }, [uriHookDep]);
-
-  /**
-   * With the exchange and amount, ask the wallet the information
-   * about the withdrawal
-   */
-  const amountHook = useAsyncAsHook(async () => {
-    if (!uriHookDep?.thisExchange) return false;
-
-    const info = await api.getExchangeWithdrawalInfo({
-      exchangeBaseUrl: uriHookDep?.thisExchange,
-      amount: Amounts.parseOrThrow(uriHookDep.amount),
-      tosAcceptedFormat: ["text/xml"],
-      ageRestricted,
-    });
-
-    const withdrawAmount = {
-      raw: Amounts.parseOrThrow(info.withdrawalAmountRaw),
-      effective: Amounts.parseOrThrow(info.withdrawalAmountEffective),
-    };
-
-    return {
-      amount: withdrawAmount,
-      ageRestrictionOptions: info.ageRestrictionOptions,
-    };
-  }, [uriHookDep]);
-
-  const [reviewing, setReviewing] = useState<boolean>(false);
-  const [reviewed, setReviewed] = useState<boolean>(false);
-
-  const [withdrawError, setWithdrawError] = useState<TalerError | undefined>(
-    undefined,
-  );
-  const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false);
-
+  console.log("uri info", uriInfoHook)
   if (!uriInfoHook) return { status: "loading", error: undefined };
+
   if (uriInfoHook.hasError) {
     return {
-      status: "loading-uri",
+      status: "loading-error",
       error: uriInfoHook,
     };
   }
 
-  const { amount, thisExchange } = uriInfoHook.response;
+  const uri = uriInfoHook.response.talerWithdrawUri;
+  const chosenAmount = uriInfoHook.response.amount;
+  const defaultExchange = uriInfoHook.response.thisExchange;
+  const exchangeList = uriInfoHook.response.exchanges.exchanges
 
-  const chosenAmount = Amounts.parseOrThrow(amount);
-
-  if (!thisExchange) {
+  async function doManagedWithdraw(exchange: string, ageRestricted: number | undefined): Promise<{ transactionId: string, confirmTransferUrl: string | undefined }> {
+    const res = await api.acceptWithdrawal(uri, exchange, ageRestricted,);
     return {
-      status: "loading-exchange",
-      error: {
-        hasError: true,
-        operational: false,
-        message: "ERROR_NO-DEFAULT-EXCHANGE",
-      },
+      confirmTransferUrl: res.confirmTransferUrl,
+      transactionId: res.transactionId
     };
   }
 
-  // const selectedExchange = thisExchange;
+  return () => exchangeSelectionState(doManagedWithdraw, cancel, onSuccess, uri, chosenAmount, exchangeList, defaultExchange, api)
 
-  async function doWithdrawAndCheckError(): Promise<void> {
-    if (!thisExchange) return;
+}
 
-    try {
-      setDoingWithdraw(true);
-      if (!talerWithdrawUri) return;
-      const res = await api.acceptWithdrawal(
-        talerWithdrawUri,
-        thisExchange,
-        !ageRestricted ? undefined : ageRestricted,
-      );
-      if (res.confirmTransferUrl) {
-        document.location.href = res.confirmTransferUrl;
-      } else {
-        onSuccess(res.transactionId);
-      }
-    } catch (e) {
-      if (e instanceof TalerError) {
-        setWithdrawError(e);
-      }
-    }
-    setDoingWithdraw(false);
-  }
+type ManualOrManagedWithdrawFunction = (exchange: string, ageRestricted: number | undefined) => Promise<{ transactionId: string, confirmTransferUrl: string | undefined }>
 
-  if (!amountHook) {
-    return { status: "loading", error: undefined };
-  }
-  if (amountHook.hasError) {
+function exchangeSelectionState(doWithdraw: ManualOrManagedWithdrawFunction, cancel: () => Promise<void>, onSuccess: (txid: string) => Promise<void>, talerWithdrawUri: string | undefined, chosenAmount: AmountJson, exchangeList: ExchangeListItem[], defaultExchange: string | undefined, api: typeof wxApi,): RecursiveState<State> {
+
+  //FIXME: use substates here
+  const selectedExchange = useSelectedExchange({ currency: chosenAmount.currency, defaultExchange, list: exchangeList })
+
+  if (selectedExchange.status === 'no-exchange') {
     return {
-      status: "loading-info",
-      error: amountHook,
-    };
+      status: "no-exchange",
+      error: undefined,
+    }
   }
-  if (!amountHook.response) {
-    return { status: "loading", error: undefined };
+
+  if (selectedExchange.status === 'selecting-exchange') {
+    return selectedExchange
   }
+  console.log("exchange selected", selectedExchange.selected)
+
+  return () => {
+
+    const [ageRestricted, setAgeRestricted] = useState(0);
+    const currentExchange = selectedExchange.selected
+    /**
+     * For the exchange selected, bring the status of the terms of service
+     */
+    const terms = useAsyncAsHook(async () => {
+      const exchangeTos = await api.getExchangeTos(currentExchange.exchangeBaseUrl, [
+        "text/xml",
+      ]);
+
+      const state = buildTermsOfServiceState(exchangeTos);
+
+      return { state };
+    }, []);
+    console.log("terms", terms)
+    /**
+     * With the exchange and amount, ask the wallet the information
+     * about the withdrawal
+     */
+    const amountHook = useAsyncAsHook(async () => {
+
+      const info = await api.getExchangeWithdrawalInfo({
+        exchangeBaseUrl: currentExchange.exchangeBaseUrl,
+        amount: chosenAmount,
+        tosAcceptedFormat: ["text/xml"],
+        ageRestricted,
+      });
+
+      const withdrawAmount = {
+        raw: Amounts.parseOrThrow(info.withdrawalAmountRaw),
+        effective: Amounts.parseOrThrow(info.withdrawalAmountEffective),
+      };
+
+      return {
+        amount: withdrawAmount,
+        ageRestrictionOptions: info.ageRestrictionOptions,
+      };
+    }, []);
+
+    const [reviewing, setReviewing] = useState<boolean>(false);
+    const [reviewed, setReviewed] = useState<boolean>(false);
+
+    const [withdrawError, setWithdrawError] = useState<TalerError | undefined>(
+      undefined,
+    );
+    const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false);
+
+
+    async function doWithdrawAndCheckError(): Promise<void> {
+
+      try {
+        setDoingWithdraw(true);
+        const res = await doWithdraw(currentExchange.exchangeBaseUrl, !ageRestricted ? undefined : ageRestricted)
+        if (res.confirmTransferUrl) {
+          document.location.href = res.confirmTransferUrl;
+        } else {
+          onSuccess(res.transactionId);
+        }
+      } catch (e) {
+        if (e instanceof TalerError) {
+          setWithdrawError(e);
+        }
+      }
+      setDoingWithdraw(false);
+    }
 
-  const withdrawalFee = Amounts.sub(
-    amountHook.response.amount.raw,
-    amountHook.response.amount.effective,
-  ).amount;
-  const toBeReceived = amountHook.response.amount.effective;
-
-  const { state: termsState } = (!terms
-    ? undefined
-    : terms.hasError
-    ? undefined
-    : terms.response) || { state: undefined };
-
-  async function onAccept(accepted: boolean): Promise<void> {
-    if (!termsState || !thisExchange) return;
-
-    try {
-      await api.setExchangeTosAccepted(
-        thisExchange,
-        accepted ? termsState.version : undefined,
-      );
-      setReviewed(accepted);
-    } catch (e) {
-      if (e instanceof Error) {
-        //FIXME: uncomment this and display error
-        // setErrorAccepting(e.message);
+    if (!amountHook) {
+      return { status: "loading", error: undefined };
+    }
+    if (amountHook.hasError) {
+      return {
+        status: "loading-info",
+        error: amountHook,
+      };
+    }
+    if (!amountHook.response) {
+      return { status: "loading", error: undefined };
+    }
+
+    const withdrawalFee = Amounts.sub(
+      amountHook.response.amount.raw,
+      amountHook.response.amount.effective,
+    ).amount;
+    const toBeReceived = amountHook.response.amount.effective;
+
+    const { state: termsState } = (!terms
+      ? undefined
+      : terms.hasError
+        ? undefined
+        : terms.response) || { state: undefined };
+
+    async function onAccept(accepted: boolean): Promise<void> {
+      if (!termsState) return;
+
+      try {
+        await api.setExchangeTosAccepted(
+          currentExchange.exchangeBaseUrl,
+          accepted ? termsState.version : undefined,
+        );
+        setReviewed(accepted);
+      } catch (e) {
+        if (e instanceof Error) {
+          //FIXME: uncomment this and display error
+          // setErrorAccepting(e.message);
+        }
       }
     }
-  }
 
-  const mustAcceptFirst =
-    termsState !== undefined &&
-    (termsState.status === "changed" || termsState.status === "new");
+    const mustAcceptFirst =
+      termsState !== undefined &&
+      (termsState.status === "changed" || termsState.status === "new");
 
-  const ageRestrictionOptions =
-    amountHook.response.ageRestrictionOptions?.reduce(
-      (p, c) => ({ ...p, [c]: `under ${c}` }),
-      {} as Record<string, string>,
-    );
+    const ageRestrictionOptions =
+      amountHook.response.ageRestrictionOptions?.reduce(
+        (p, c) => ({ ...p, [c]: `under ${c}` }),
+        {} as Record<string, string>,
+      );
 
-  const ageRestrictionEnabled = ageRestrictionOptions !== undefined;
-  if (ageRestrictionEnabled) {
-    ageRestrictionOptions["0"] = "Not restricted";
-  }
+    const ageRestrictionEnabled = ageRestrictionOptions !== undefined;
+    if (ageRestrictionEnabled) {
+      ageRestrictionOptions["0"] = "Not restricted";
+    }
 
-  //TODO: calculate based on exchange info
-  const ageRestriction = ageRestrictionEnabled
-    ? {
+    //TODO: calculate based on exchange info
+    const ageRestriction = ageRestrictionEnabled
+      ? {
         list: ageRestrictionOptions,
         value: String(ageRestricted),
         onChange: async (v: string) => setAgeRestricted(parseInt(v, 10)),
       }
-    : undefined;
-
-  return {
-    status: "success",
-    error: undefined,
-    exchangeUrl: thisExchange,
-    toBeReceived,
-    withdrawalFee,
-    chosenAmount,
-    talerWithdrawUri,
-    ageRestriction,
-    doWithdrawal: {
-      onClick:
-        doingWithdraw || (mustAcceptFirst && !reviewed)
-          ? undefined
-          : doWithdrawAndCheckError,
-      error: withdrawError,
-    },
-    tosProps: !termsState
-      ? undefined
-      : {
+      : undefined;
+
+    return {
+      status: "success",
+      error: undefined,
+      doSelectExchange: selectedExchange.doSelect,
+      exchangeUrl: currentExchange.exchangeBaseUrl,
+      toBeReceived,
+      withdrawalFee,
+      chosenAmount,
+      talerWithdrawUri,
+      ageRestriction,
+      doWithdrawal: {
+        onClick:
+          doingWithdraw || (mustAcceptFirst && !reviewed)
+            ? undefined
+            : doWithdrawAndCheckError,
+        error: withdrawError,
+      },
+      tosProps: !termsState
+        ? undefined
+        : {
           onAccept,
           onReview: setReviewing,
           reviewed: reviewed,
           reviewing: reviewing,
           terms: termsState,
         },
-    mustAcceptFirst,
-    cancel,
-  };
+      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 2be4437cc..a3daeb5e9 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
@@ -76,6 +76,8 @@ export const TermsOfServiceNotYetLoaded = createExample(SuccessView, {
     fraction: 10000000,
     value: 1,
   },
+  doSelectExchange: {
+  },
   toBeReceived: {
     currency: "USD",
     fraction: 0,
@@ -104,6 +106,8 @@ export const WithSomeFee = createExample(SuccessView, {
     fraction: 0,
     value: 1,
   },
+  doSelectExchange: {
+  },
   tosProps: normalTosState,
 });
 
@@ -123,6 +127,8 @@ export const WithoutFee = createExample(SuccessView, {
     fraction: 0,
     value: 0,
   },
+  doSelectExchange: {
+  },
   toBeReceived: {
     currency: "USD",
     fraction: 0,
@@ -147,6 +153,8 @@ export const EditExchangeUntouched = createExample(SuccessView, {
     fraction: 0,
     value: 0,
   },
+  doSelectExchange: {
+  },
   toBeReceived: {
     currency: "USD",
     fraction: 0,
@@ -171,6 +179,8 @@ export const EditExchangeModified = createExample(SuccessView, {
     fraction: 0,
     value: 0,
   },
+  doSelectExchange: {
+  },
   toBeReceived: {
     currency: "USD",
     fraction: 0,
@@ -188,6 +198,8 @@ export const WithAgeRestriction = createExample(SuccessView, {
     value: 2,
     fraction: 10000000,
   },
+  doSelectExchange: {
+  },
   doWithdrawal: nullHandler,
   exchangeUrl: "https://exchange.demo.taler.net",
   mustAcceptFirst: false,
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
index f614c1c8c..5c62671fe 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
@@ -29,6 +29,7 @@ import { ExchangeWithdrawDetails } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
 import { mountHook } from "../../test-utils.js";
 import { useComponentStateFromURI } from "./state.js";
+import * as wxApi from "../../wxApi.js";
 
 const exchanges: ExchangeFullDetails[] = [
   {
@@ -92,7 +93,7 @@ describe("Withdraw CTA states", () => {
     {
       const { status, error } = getLastResultOrThrow();
 
-      if (status != "loading-uri") expect.fail();
+      if (status != "loading-error") expect.fail();
       if (!error) expect.fail();
       if (!error.hasError) expect.fail();
       if (error.operational) expect.fail();
@@ -127,7 +128,7 @@ describe("Withdraw CTA states", () => {
 
     {
       const { status } = getLastResultOrThrow();
-      expect(status).equals("loading");
+      expect(status).equals("loading", "1");
     }
 
     await waitNextUpdate();
@@ -135,13 +136,9 @@ describe("Withdraw CTA states", () => {
     {
       const { status, error } = getLastResultOrThrow();
 
-      expect(status).equals("loading-exchange");
+      expect(status).equals("no-exchange", "3");
 
-      expect(error).deep.equals({
-        hasError: true,
-        operational: false,
-        message: "ERROR_NO-DEFAULT-EXCHANGE",
-      });
+      expect(error).undefined;
     }
 
     await assertNoPendingUpdate();
@@ -169,10 +166,10 @@ describe("Withdraw CTA states", () => {
             }),
             getExchangeWithdrawalInfo:
               async (): Promise<ExchangeWithdrawDetails> =>
-                ({
-                  withdrawalAmountRaw: "ARS:2",
-                  withdrawalAmountEffective: "ARS:2",
-                } as any),
+              ({
+                withdrawalAmountRaw: "ARS:2",
+                withdrawalAmountEffective: "ARS:2",
+              } as any),
             getExchangeTos: async (): Promise<GetExchangeTosResult> => ({
               contentType: "text",
               content: "just accept",
@@ -246,10 +243,10 @@ describe("Withdraw CTA states", () => {
             }),
             getExchangeWithdrawalInfo:
               async (): Promise<ExchangeWithdrawDetails> =>
-                ({
-                  withdrawalAmountRaw: "ARS:2",
-                  withdrawalAmountEffective: "ARS:2",
-                } as any),
+              ({
+                withdrawalAmountRaw: "ARS:2",
+                withdrawalAmountEffective: "ARS:2",
+              } as any),
             getExchangeTos: async (): Promise<GetExchangeTosResult> => ({
               contentType: "text",
               content: "just accept",
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 60157d289..82d6090e5 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -38,6 +38,7 @@ import editIcon from "../../svg/edit_24px.svg";
 import { Amount } from "../../components/Amount.js";
 import { QR } from "../../components/QR.js";
 import { useState } from "preact/hooks";
+import { ErrorMessage } from "../../components/ErrorMessage.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
@@ -52,15 +53,12 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function LoadingExchangeView({
-  error,
-}: State.LoadingExchangeError): VNode {
+export function LoadingExchangeView(p: State.LoadingExchangeError): VNode {
   const { i18n } = useTranslationContext();
 
   return (
-    <LoadingError
-      title={<i18n.Translate>Could not get exchange</i18n.Translate>}
-      error={error}
+    <ErrorMessage 
+      title={<i18n.Translate>Could not get a default exchange, please check configuration</i18n.Translate>}
     />
   );
 }
@@ -106,13 +104,13 @@ export function SuccessView(state: State.Success): VNode {
               }}
             >
               <i18n.Translate>Exchange</i18n.Translate>
-              {/* <Link>
+              <Button onClick={state.doSelectExchange.onClick} variant="text">
                 <SvgIcon
                   title="Edit"
                   dangerouslySetInnerHTML={{ __html: editIcon }}
                   color="black"
                 />
-              </Link> */}
+              </Button>
             </div>
           }
           text={<ExchangeDetails exchange={state.exchangeUrl} />}
diff --git a/packages/taler-wallet-webextension/src/hooks/useSelectedExchange.ts b/packages/taler-wallet-webextension/src/hooks/useSelectedExchange.ts
new file mode 100644
index 000000000..d9085153e
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/hooks/useSelectedExchange.ts
@@ -0,0 +1,125 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { ExchangeListItem } from "@gnu-taler/taler-util";
+import { useState } from "preact/hooks";
+import { ButtonHandler } from "../mui/handlers.js";
+
+type State = State.Ready | State.NoExchange | State.Selecting;
+
+export namespace State {
+  export interface NoExchange {
+    status: "no-exchange"
+    error: undefined;
+  }
+  export interface Ready {
+    status: "ready",
+    doSelect: ButtonHandler,
+    selected: ExchangeListItem;
+  }
+  export interface Selecting {
+    status: "selecting-exchange",
+    error: undefined,
+    onSelection: (url: string) => Promise<void>;
+    onCancel: () => Promise<void>;
+    list: ExchangeListItem[],
+    currency: string;
+    currentExchange: string;
+  }
+}
+
+interface Props {
+  currency: string;
+  //there is a preference for the default at the initial state
+  defaultExchange?: string,
+  //list of exchanges
+  list: ExchangeListItem[],
+}
+
+
+
+export function useSelectedExchange({ currency, defaultExchange, list }: Props): State {
+  const [isSelecting, setIsSelecting] = useState(false);
+  const [selectedExchange, setSelectedExchange] = useState<string | undefined>(undefined);
+
+  if (!list.length) {
+    return {
+      status: "no-exchange",
+      error: undefined,
+    }
+  }
+
+  const firstByCurrency = list.find((e) => e.currency === currency)
+  if (!firstByCurrency) {
+    // there should be at least one exchange for this currency
+    return {
+      status: "no-exchange",
+      error: undefined,
+    }
+  }
+
+
+  if (isSelecting) {
+    const currentExchange = selectedExchange ?? defaultExchange ?? firstByCurrency.exchangeBaseUrl;
+    return {
+      status: "selecting-exchange",
+      error: undefined,
+      list,
+      currency,
+      currentExchange: currentExchange,
+      onSelection: async (exchangeBaseUrl: string) => {
+        setIsSelecting(false);
+        setSelectedExchange(exchangeBaseUrl)
+      },
+      onCancel: async () => {
+        setIsSelecting(false);
+      }
+    }
+  }
+
+  {
+    const found = !selectedExchange ? undefined : list.find(
+      (e) => e.exchangeBaseUrl === selectedExchange,
+    )
+    if (found) return {
+      status: "ready",
+      doSelect: {
+        onClick: async () => setIsSelecting(true)
+      },
+      selected: found
+    };
+  }
+  {
+    const found = !defaultExchange ? undefined : list.find(
+      (e) => e.exchangeBaseUrl === defaultExchange,
+    )
+    if (found) return {
+      status: "ready",
+      doSelect: {
+        onClick: async () => setIsSelecting(true)
+      },
+      selected: found
+    };
+  }
+
+  return {
+    status: "ready",
+    doSelect: {
+      onClick: async () => setIsSelecting(true)
+    },
+    selected: firstByCurrency
+  }
+}
diff --git a/packages/taler-wallet-webextension/src/test-utils.ts b/packages/taler-wallet-webextension/src/test-utils.ts
index eebfa3612..7e9c5670e 100644
--- a/packages/taler-wallet-webextension/src/test-utils.ts
+++ b/packages/taler-wallet-webextension/src/test-utils.ts
@@ -82,31 +82,38 @@ export function renderNodeOrBrowser(Component: any, args: any): void {
     document.body.removeChild(div);
   }
 }
+type RecursiveState<S> = S | (() => RecursiveState<S>)
 
 interface Mounted<T> {
   unmount: () => void;
-  getLastResultOrThrow: () => T;
+  getLastResultOrThrow: () => Exclude<T, VoidFunction>;
   assertNoPendingUpdate: () => void;
   waitNextUpdate: (s?: string) => Promise<void>;
 }
 
 const isNode = typeof window === "undefined";
 
-export function mountHook<T>(
-  callback: () => T,
+export function mountHook<T extends object>(
+  callback: () => RecursiveState<T>,
   Context?: ({ children }: { children: any }) => VNode,
 ): Mounted<T> {
   // const result: { current: T | null } = {
   //   current: null
   // }
-  let lastResult: T | Error | null = null;
+  let lastResult: Exclude<T, VoidFunction> | Error | null = null;
 
   const listener: Array<() => void> = [];
 
   // component that's going to hold the hook
   function Component(): VNode {
     try {
-      lastResult = callback();
+      let componentOrResult = callback()
+      while (typeof componentOrResult === "function") {
+        componentOrResult = componentOrResult();
+      }
+      //typecheck fails here
+      const l: Exclude<T, () => void> = componentOrResult as any
+      lastResult = l;
     } catch (e) {
       if (e instanceof Error) {
         lastResult = e;
@@ -157,13 +164,13 @@ export function mountHook<T>(
     }
   }
 
-  function getLastResult(): T | Error | null {
-    const copy = lastResult;
+  function getLastResult(): Exclude<T | Error | null, VoidFunction> {
+    const copy: Exclude<T | Error | null, VoidFunction> = lastResult;
     lastResult = null;
     return copy;
   }
 
-  function getLastResultOrThrow(): T {
+  function getLastResultOrThrow(): Exclude<T, VoidFunction> {
     const r = getLastResult();
     if (r instanceof Error) throw r;
     if (!r) throw Error("there was no last result");
diff --git a/packages/taler-wallet-webextension/src/utils/index.ts b/packages/taler-wallet-webextension/src/utils/index.ts
index 8fe1f2a44..3535910cf 100644
--- a/packages/taler-wallet-webextension/src/utils/index.ts
+++ b/packages/taler-wallet-webextension/src/utils/index.ts
@@ -19,7 +19,7 @@ import {
   Amounts,
   GetExchangeTosResult,
 } from "@gnu-taler/taler-util";
-import { VNode } from "preact";
+import { VNode, createElement } from "preact";
 
 function getJsonIfOk(r: Response): Promise<any> {
   if (r.ok) {
@@ -31,8 +31,7 @@ function getJsonIfOk(r: Response): Promise<any> {
   }
 
   throw new Error(
-    `Try another server: (${r.status}) ${
-      r.statusText || "internal server error"
+    `Try another server: (${r.status}) ${r.statusText || "internal server error"
     }`,
   );
 }
@@ -103,10 +102,10 @@ export function buildTermsOfServiceStatus(
   return !content
     ? "notfound"
     : !acceptedVersion
-    ? "new"
-    : acceptedVersion !== currentVersion
-    ? "changed"
-    : "accepted";
+      ? "new"
+      : acceptedVersion !== currentVersion
+        ? "changed"
+        : "accepted";
 }
 
 function parseTermsOfServiceContent(
@@ -198,17 +197,35 @@ export type StateViewMap<StateType extends { status: string }> = {
   [S in StateType as S["status"]]: StateFunc<S>;
 };
 
+type RecursiveState<S extends object> = S | (() => RecursiveState<S>)
+
 export function compose<SType extends { status: string }, PType>(
   name: string,
-  hook: (p: PType) => SType,
-  vs: StateViewMap<SType>,
+  hook: (p: PType) => RecursiveState<SType>,
+  viewMap: StateViewMap<SType>,
 ): (p: PType) => VNode {
-  const Component = (p: PType): VNode => {
-    const state = hook(p);
-    const s = state.status as unknown as SType["status"];
-    const c = vs[s] as unknown as StateFunc<SType>;
-    return c(state);
+
+  function withHook(stateHook: () => RecursiveState<SType>): () => VNode {
+
+    function TheComponent(): VNode {
+      const state = stateHook();
+
+      if (typeof state === "function") {
+        const subComponent = withHook(state)
+        return createElement(subComponent, {});
+      }
+
+      const statusName = state.status as unknown as SType["status"];
+      const viewComponent = viewMap[statusName] as unknown as StateFunc<SType>;
+      return createElement(viewComponent, state);
+    }
+    TheComponent.name = `${name}`;
+
+    return TheComponent;
+  }
+
+  return (p: PType) => {
+    const h = withHook(() => hook(p))
+    return h()
   };
-  Component.name = `${name}`;
-  return Component;
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
index 3b2708eff..2834028c6 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
@@ -20,6 +20,7 @@ import {
   AbsoluteTime,
   ExchangeFullDetails,
   OperationMap,
+  ExchangeListItem,
 } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
@@ -29,13 +30,14 @@ import * as wxApi from "../../wxApi.js";
 import { useComponentState } from "./state.js";
 import {
   ComparingView,
-  LoadingUriView,
+  ErrorLoadingView,
   NoExchangesView,
   ReadyView,
 } from "./views.js";
 
 export interface Props {
-  currency?: string;
+  list: ExchangeListItem[],
+  currentExchange: string,
   onCancel: () => Promise<void>;
   onSelection: (exchange: string) => Promise<void>;
 }
@@ -54,7 +56,7 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error-loading";
     error: HookError;
   }
 
@@ -85,7 +87,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  "error-loading": ErrorLoadingView,
   comparing: ComparingView,
   "no-exchanges": NoExchangesView,
   ready: ReadyView,
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
index 8c0c21486..db6138f8e 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
@@ -22,14 +22,17 @@ import * as wxApi from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState(
-  { onCancel, onSelection, currency }: Props,
+  { onCancel, onSelection, list: exchanges, currentExchange }: Props,
   api: typeof wxApi,
 ): State {
-  const initialValue = 0;
+  const initialValue = exchanges.findIndex(e => e.exchangeBaseUrl === currentExchange);
+  if (initialValue === -1) {
+    throw Error(`wrong usage of ExchangeSelection component, currentExchange '${currentExchange}' is not in the list of exchanges`)
+  }
   const [value, setValue] = useState(String(initialValue));
 
   const hook = useAsyncAsHook(async () => {
-    const { exchanges } = await api.listExchanges();
+    // const { exchanges } = await api.listExchanges();
 
     const selectedIdx = parseInt(value, 10);
     const selectedExchange =
@@ -54,12 +57,12 @@ export function useComponentState(
   }
   if (hook.hasError) {
     return {
-      status: "loading-uri",
+      status: "error-loading",
       error: hook,
     };
   }
 
-  const { exchanges, selected, original } = hook.response;
+  const { selected, original } = hook.response;
 
   if (!selected) {
     //!selected <=> exchanges.length === 0
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
index 4cd90700f..dd85dff46 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
@@ -101,7 +101,7 @@ const Container = styled.div`
   }
 `;
 
-export function LoadingUriView({ error }: State.LoadingUriError): VNode {
+export function ErrorLoadingView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
 
   return (