fix exchange selection

packages/taler-wallet-webextension/src/components/SelectList.tsx

@@ -36,6 +36,7 @@ export function SelectList({
   onChange,
   label,
   description,
+  canBeNull,
 }: Props): VNode {
   return (
     <Fragment>
@@ -49,20 +50,21 @@ export function SelectList({
       <NiceSelect>
         <select
           name={name}
+          value={value}
           onChange={(e) => {
-            console.log(e.currentTarget.value, value);
             onChange(e.currentTarget.value);
           }}
         >
-          {value !== undefined ? (
-            <option selected>{list[value]}</option>
-          ) : (
-            <option selected disabled>
-              Select one option
-            </option>
-          )}
+          {value === undefined ||
+            (canBeNull && (
+              <option selected disabled>
+                Select one option
+              </option>
+              // ) : (
+              //   <option selected>{list[value]}</option>
+            ))}
           {Object.keys(list)
-            .filter((l) => l !== value)
+            // .filter((l) => l !== value)
             .map((key) => (
               <option value={key} key={key}>
                 {list[key]}

packages/taler-wallet-webextension/src/cta/Withdraw.tsx

@@ -79,9 +79,11 @@ export function View({
 }: ViewProps): VNode {
   const needsReview = terms.status === "changed" || terms.status === "new";
 
-  const [switchingExchange, setSwitchingExchange] = useState<
-    string | undefined
-  >(undefined);
+  const [switchingExchange, setSwitchingExchange] = useState(false);
+  const [nextExchange, setNextExchange] = useState<string | undefined>(
+    undefined,
+  );
+
   const exchanges = knownExchanges.reduce(
     (prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }),
     {},
@@ -117,25 +119,33 @@ export function View({
       </section>
       {!reviewing && (
         <section>
-          {switchingExchange !== undefined ? (
+          {switchingExchange ? (
             <Fragment>
               <div>
                 <SelectList
                   label="Known exchanges"
                   list={exchanges}
-                  name=""
-                  onChange={onSwitchExchange}
+                  value={nextExchange}
+                  name="switchingExchange"
+                  onChange={setNextExchange}
                 />
               </div>
               <LinkSuccess
                 upperCased
-                onClick={() => onSwitchExchange(switchingExchange)}
+                onClick={() => {
+                  if (nextExchange !== undefined) {
+                    onSwitchExchange(nextExchange);
+                  }
+                  setSwitchingExchange(false);
+                }}
               >
-                {i18n.str`Confirm exchange selection`}
+                {nextExchange === undefined
+                  ? i18n.str`Cancel exchange selection`
+                  : i18n.str`Confirm exchange selection`}
               </LinkSuccess>
             </Fragment>
           ) : (
-            <LinkSuccess upperCased onClick={() => setSwitchingExchange("")}>
+            <LinkSuccess upperCased onClick={() => setSwitchingExchange(true)}>
               {i18n.str`Switch exchange`}
             </LinkSuccess>
           )}