new compose feature: sub-states

implemented in withdraw page, WIP

3 files changed, 15 insertions, 10 deletions

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 (