frontend: refactor account to functional component

Ongoing effort to rewrite all class based components to functional
components so we can use hooks.

- typed check-sdcard api
- typed buy-supported api
- remove load decorator and load config directly

frontends/web/src/api/backend.ts

@@ -59,3 +59,9 @@ export const getQRCode = (data: string) => {
     return apiGet(`qr?data=${encodeURIComponent(data)}`);
   };
 };
+
+export const isMoonpayBuySupported = (code: string) => {
+  return (): Promise<boolean> => {
+    return apiGet(`exchange/moonpay/buy-supported/${code}`);
+  };
+};

frontends/web/src/api/bitbox02.ts

@@ -41,6 +41,12 @@ export const getDeviceInfo = (
     });
 };
 
+export const checkSDCard = (
+  deviceID: string,
+): Promise<boolean> => {
+  return apiGet(`devices/bitbox02/${deviceID}/check-sdcard`);
+};
+
 export const setDeviceName = (
   deviceID: string,
   newDeviceName: string,

frontends/web/src/hooks/sdcard.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright 2022 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DependencyList, useEffect, useState } from 'react';
+import { TDevices } from '../api/devices';
+import { checkSDCard } from '../api/bitbox02';
+import { getDeviceInfo as getBitBox01DeviceInfo } from '../api/bitbox01';
+import { useMountedRef } from './utils';
+
+/**
+ * useSDCard hook to check if one of the devices has a SDCard plugged in
+ * @param devices which to check
+ * @param dependencies optional array to re-run the check if any of the dependency change, devices is automatically added to the dependencies list
+ */
+export const useSDCard = (
+  devices: TDevices,
+  dependencies?: DependencyList,
+) => {
+  const [sdcard, setSDCard] = useState<boolean>(false);
+  const mounted = useMountedRef();
+  useEffect(() => {
+    const deviceIDs = Object.keys(devices);
+    Promise.all(deviceIDs.map(deviceID => {
+      switch (devices[deviceID]) {
+      case 'bitbox':
+        return getBitBox01DeviceInfo(deviceID)
+          .then(({ sdcard }) => sdcard);
+      case 'bitbox02':
+        return checkSDCard(deviceID);
+      default:
+        return false;
+      }
+    }))
+      .then(sdcards => sdcards.some(sdcard => sdcard))
+      .then(result => {
+        if (mounted.current) {
+          setSDCard(result);
+        }
+      })
+      .catch(console.error);
+    // disable warning about mounted not in the dependency list
+  }, [devices, ...(dependencies || [])] ); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return sdcard;
+};