From 209534d3bebdd3475da70e0813cac0fa541632a1 Mon Sep 17 00:00:00 2001
From: Alexander Evchenko <alexivchenko9@gmail.com>
Date: Fri, 9 Feb 2024 14:26:15 +0400
Subject: [PATCH] refactor: add loading to ImportWallet and prevent double-tap

---
 src/redux/slices/settingsSlice/selectors.ts   |  27 ----
 .../import/ImportMasterKeyScreen.tsx          | 122 +++++++++++-------
 2 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/src/redux/slices/settingsSlice/selectors.ts b/src/redux/slices/settingsSlice/selectors.ts
index 7506be765..f85be7db7 100644
--- a/src/redux/slices/settingsSlice/selectors.ts
+++ b/src/redux/slices/settingsSlice/selectors.ts
@@ -4,20 +4,6 @@ export const selectRequests = ({ settings }: RootState) => settings.requests
 
 export const selectTopColor = ({ settings }: RootState) => settings.topColor
 
-export const selectWallet = ({ settings }: RootState) => {
-  if (!settings.wallets) {
-    throw new Error('No Wallets set!')
-  }
-
-  return settings.wallets[settings.selectedWallet]
-}
-
-export const selectWalletIsDeployed = ({ settings }: RootState) => {
-  if (!settings.walletsIsDeployed) {
-    throw new Error('WalletIsDeployed is not set!')
-  }
-  return settings.walletsIsDeployed[settings.selectedWallet]
-}
 export const selectSettingsIsLoading = ({ settings }: RootState) =>
   settings.loading
 
@@ -41,16 +27,3 @@ export const selectHideBalance = ({ settings }: RootState) =>
 export const selectBitcoin = ({ settings }: RootState) => settings.bitcoin
 
 export const selectChainId = ({ settings }: RootState) => settings.chainId
-
-export const selectWalletState = ({
-  settings: { wallets, walletsIsDeployed, chainId, selectedWallet },
-}: RootState) => {
-  if (!wallets || !walletsIsDeployed) {
-    throw new Error('No Wallet exist in state')
-  }
-  return {
-    wallet: wallets[selectedWallet],
-    walletIsDeployed: walletsIsDeployed[selectedWallet],
-    chainId,
-  }
-}
diff --git a/src/screens/createKeys/import/ImportMasterKeyScreen.tsx b/src/screens/createKeys/import/ImportMasterKeyScreen.tsx
index 1c225789c..88a53efdb 100644
--- a/src/screens/createKeys/import/ImportMasterKeyScreen.tsx
+++ b/src/screens/createKeys/import/ImportMasterKeyScreen.tsx
@@ -43,6 +43,38 @@ const headerTextMap = new Map([
   [StatusActions.SUCCESS, 'header_phrase_correct'],
 ])
 
+const StatusIcon = ({ status }: { status: StatusActions }) => {
+  const iconStyle = {
+    backgroundColor:
+      status === StatusActions.SUCCESS
+        ? sharedColors.successLight
+        : sharedColors.errorBackground,
+    borderRadius: 50,
+  }
+  switch (status) {
+    case StatusActions.SUCCESS:
+      return (
+        <AntDesign
+          name="checkcircleo"
+          size={100}
+          style={iconStyle}
+          color={sharedColors.black}
+        />
+      )
+    case StatusActions.ERROR:
+      return (
+        <Feather
+          name="x"
+          size={100}
+          style={iconStyle}
+          color={sharedColors.black}
+        />
+      )
+    default:
+      return null
+  }
+}
+
 export const ImportMasterKeyScreen = (
   _: CreateKeysScreenProps<createKeysRouteNames.ImportMasterKey>,
 ) => {
@@ -62,27 +94,39 @@ export const ImportMasterKeyScreen = (
   const { setValue } = form
   const [selectedSlide, setSelectedSlide] = useState<number>(0)
   const [status, setStatus] = useState<StatusActions>(StatusActions.INITIAL)
+  const [isLoading, setIsLoading] = useState(false)
 
   const handleImportMnemonic = useCallback(async () => {
+    // immediatly set loading to avoid double-tap
+    setIsLoading(true)
+
     if (status === StatusActions.ERROR) {
       setStatus(StatusActions.INITIAL)
       return
     }
+
     const mnemonicError = validateMnemonic(words.current.join(' '))
+
     if (mnemonicError) {
       setStatus(StatusActions.ERROR)
+      // mnemonic failed set loading back to false
+      setIsLoading(false)
       return
     }
 
     try {
-      await dispatch(
-        createWallet({
-          mnemonic: words.current.join(' '),
-          initializeWallet,
-        }),
-      )
-      form.reset()
+      setTimeout(async () => {
+        await dispatch(
+          createWallet({
+            mnemonic: words.current.join(' '),
+            initializeWallet,
+          }),
+        )
+        form.reset()
+        setIsLoading(false)
+      }, 500)
     } catch (err) {
+      setIsLoading(false)
       if (err instanceof Error) {
         throw new Error(err.toString())
       }
@@ -104,6 +148,13 @@ export const ImportMasterKeyScreen = (
     [],
   )
 
+  const errorTimeout = useCallback(() => {
+    setTimeout(() => {
+      setStatus(StatusActions.INITIAL)
+    }, 1000)
+    return null
+  }, [])
+
   const renderItem = useCallback(
     (item: CarouselRenderItemInfo<number>) => {
       const groupIndex = 3 * item.index
@@ -178,6 +229,7 @@ export const ImportMasterKeyScreen = (
 
   return (
     <FormProvider {...form}>
+      {errorTimeout()}
       <ScrollView style={styles.parent} keyboardShouldPersistTaps={'always'}>
         <Typography
           style={styles.titleText}
@@ -223,53 +275,25 @@ export const ImportMasterKeyScreen = (
           />
         )}
 
-        <AppButton
-          accessibilityLabel={'OK'}
-          title="OK"
-          color="white"
-          textColor="black"
-          textType="body2"
-          textStyle={sharedStyles.fontBoldText}
-          onPress={handleImportMnemonic}
-          style={styles.appButtonStyleView}
-        />
+        {status !== StatusActions.ERROR && (
+          <AppButton
+            accessibilityLabel={'OK'}
+            title={t('ok')}
+            color={sharedColors.white}
+            textColor={sharedColors.black}
+            textType={'body2'}
+            textStyle={sharedStyles.fontBoldText}
+            onPress={handleImportMnemonic}
+            style={styles.appButtonStyleView}
+            loading={isLoading}
+            disabled={isLoading}
+          />
+        )}
       </ScrollView>
     </FormProvider>
   )
 }
 
-const StatusIcon = ({ status }: { status: StatusActions }) => {
-  const iconStyle = {
-    backgroundColor:
-      status === StatusActions.SUCCESS
-        ? sharedColors.successLight
-        : sharedColors.errorBackground,
-    borderRadius: 50,
-  }
-  switch (status) {
-    case StatusActions.SUCCESS:
-      return (
-        <AntDesign
-          name="checkcircleo"
-          size={100}
-          style={iconStyle}
-          color={sharedColors.black}
-        />
-      )
-    case StatusActions.ERROR:
-      return (
-        <Feather
-          name="x"
-          size={100}
-          style={iconStyle}
-          color={sharedColors.black}
-        />
-      )
-    default:
-      return null
-  }
-}
-
 const styles = StyleSheet.create({
   parent: castStyle.view({
     backgroundColor: sharedColors.black,