Add migration screen

chainapsis · Dec 10, 2023 · df47b59 · df47b59
1 parent 9092c43
commit df47b59
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 143 deletions.
diff --git a/packages/mobile/src/background/background.ts b/packages/mobile/src/background/background.ts
@@ -55,9 +55,9 @@ const {initFn} = init(
       },
     },
     getDisabledChainIdentifiers: async () => {
-      const kvStore = new AsyncKVStore('store_chain_config');
+      const kvStore = new AsyncKVStore('store_chains');
       const legacy = await kvStore.get<{disabledChains: string[]}>(
-        'extension_chainInfoInUIConfig',
+        'chain_info_in_ui_config',
       );
       if (!legacy) {
         return [];

diff --git a/packages/mobile/src/screen/locked/index.tsx b/packages/mobile/src/screen/locked/index.tsx
diff --git a/packages/mobile/src/screen/unlock/index.tsx b/packages/mobile/src/screen/unlock/index.tsx
@@ -22,6 +22,9 @@ import {TextInput} from '../../components/input';
 import {Button} from '../../components/button';
 import {TextButton} from '../../components/text-button';
 import delay from 'delay';
+import {GuideBox} from '../../components/guide-box';
+import {XAxis} from '../../components/axis';
+import {SVGLoadingIcon} from '../../components/spinner';
 
 export const UnlockScreen: FunctionComponent = observer(() => {
   const {keyRingStore, keychainStore, accountStore, chainStore} = useStore();
@@ -34,6 +37,11 @@ export const UnlockScreen: FunctionComponent = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
   const [isBiometricLoading, setIsBiometricLoading] = useState(false);
   const [error, setError] = useState<Error | undefined>();
+  const [isMigrationSecondPhase, setIsMigrationSecondPhase] = useState(false);
+  // 유저가 enter를 누르고 처리하는 딜레이 동안 키보드를 또 누를수도 있다...
+  // 그 경우를 위해서 따로 state를 관리한다.
+  const [migrationSecondPhasePassword, setMigrationSecondPhasePassword] =
+    useState('');
 
   const tryBiometricAutoOnce = useRef(false);
 
@@ -81,7 +89,7 @@ export const UnlockScreen: FunctionComponent = observer(() => {
     }
   }, [keychainStore, navigation, waitAccountInit]);
 
-  const tryUnlock = async () => {
+  const tryUnlock = async (password: string) => {
     try {
       setIsLoading(true);
 
@@ -101,12 +109,40 @@ export const UnlockScreen: FunctionComponent = observer(() => {
     }
   };
 
+  const onPressSubmit = async () => {
+    if (isMigrationSecondPhase) {
+      // Migration은 enter를 눌러서 진행할 수 없고 명시적으로 버튼을 눌러야한다.
+      // 근데 사실 migration 버튼은 type이 button이라 onSubmit이 발생할일은 없음.
+      return;
+    }
+
+    if (keyRingStore.needMigration) {
+      try {
+        setIsLoading(true);
+
+        await keyRingStore.checkLegacyKeyRingPassword(password);
+        setIsMigrationSecondPhase(true);
+        setMigrationSecondPhasePassword(password);
+
+        setError(undefined);
+      } catch (e) {
+        console.log(e);
+        setError(e);
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      await tryUnlock(password);
+    }
+  };
+
   //For a one-time biometric authentication
   useEffect(() => {
     if (
       !tryBiometricAutoOnce.current &&
       keychainStore.isBiometryOn &&
-      keyRingStore.status === 'locked'
+      keyRingStore.status === 'locked' &&
+      !keyRingStore.needMigration
     ) {
       tryBiometricAutoOnce.current = true;
       (async () => {
@@ -128,6 +164,7 @@ export const UnlockScreen: FunctionComponent = observer(() => {
       })();
     }
   }, [
+    keyRingStore.needMigration,
     keyRingStore.status,
     keychainStore,
     keychainStore.isBiometryOn,
@@ -146,46 +183,109 @@ export const UnlockScreen: FunctionComponent = observer(() => {
         <LottieView
           source={require('../../public/assets/lottie/wallet/logo.json')}
           style={{width: 200, height: 155}}
+          autoPlay={keyRingStore.needMigration}
+          loop={keyRingStore.needMigration}
         />
 
-        <Text style={style.flatten(['h1', 'color-text-high'])}>
-          <FormattedMessage id="page.unlock.paragraph-section.welcome-back" />
-        </Text>
+        {keyRingStore.needMigration ? (
+          <React.Fragment>
+            <Text style={style.flatten(['h1', 'color-text-high'])}>
+              <FormattedMessage id="page.unlock.paragraph-section.keplr-here" />
+            </Text>
+
+            <Gutter size={12} />
+
+            <Text style={style.flatten(['subtitle4', 'color-gray-200'])}>
+              <FormattedMessage id="page.unlock.paragraph-section.enter-password-to-upgrade" />
+            </Text>
+          </React.Fragment>
+        ) : (
+          <Text style={style.flatten(['h1', 'color-text-high'])}>
+            <FormattedMessage id="page.unlock.paragraph-section.welcome-back" />
+          </Text>
+        )}
 
         <Gutter size={70} />
 
-        <TextInput
-          label={intl.formatMessage({
-            id: 'page.unlock.bottom-section.password-input-label',
-          })}
-          value={password}
-          containerStyle={{width: '100%'}}
-          secureTextEntry={true}
-          returnKeyType="done"
-          onChangeText={setPassword}
-          onSubmitEditing={async () => {
-            await tryUnlock();
-          }}
-          error={
-            error
-              ? intl.formatMessage({id: 'error.invalid-password'})
-              : undefined
-          }
-        />
+        {isMigrationSecondPhase || keyRingStore.isMigrating ? (
+          <GuideBox
+            color="warning"
+            title={intl.formatMessage({
+              id: 'page.unlock.bottom-section.guide-title',
+            })}
+            paragraph={intl.formatMessage({
+              id: 'page.unlock.bottom-section.guide-paragraph',
+            })}
+          />
+        ) : (
+          <TextInput
+            label={intl.formatMessage({
+              id: 'page.unlock.bottom-section.password-input-label',
+            })}
+            value={password}
+            containerStyle={{width: '100%'}}
+            secureTextEntry={true}
+            returnKeyType="done"
+            onChangeText={setPassword}
+            onSubmitEditing={onPressSubmit}
+            error={
+              error
+                ? intl.formatMessage({id: 'error.invalid-password'})
+                : undefined
+            }
+          />
+        )}
 
         <Gutter size={34} />
 
-        <Button
-          text={intl.formatMessage({id: 'page.unlock.unlock-button'})}
-          size="large"
-          onPress={tryUnlock}
-          loading={isLoading}
-          containerStyle={{width: '100%'}}
-        />
+        {(() => {
+          if (isMigrationSecondPhase || keyRingStore.isMigrating) {
+            if (keyRingStore.isMigrating) {
+              return (
+                <XAxis alignY="center">
+                  <Text style={style.flatten(['subtitle4', 'color-gray-200'])}>
+                    <FormattedMessage id="page.unlock.upgrade-in-progress" />
+                  </Text>
+
+                  <Gutter size={8} />
+
+                  <SVGLoadingIcon
+                    color={style.get('color-gray-200').color}
+                    size={16}
+                  />
+                </XAxis>
+              );
+            } else {
+              return (
+                <Button
+                  text={intl.formatMessage({
+                    id: 'page.unlock.star-migration-button',
+                  })}
+                  size="large"
+                  onPress={async () => {
+                    await tryUnlock(migrationSecondPhasePassword);
+                  }}
+                  loading={isLoading}
+                  containerStyle={{width: '100%'}}
+                />
+              );
+            }
+          }
+
+          return (
+            <Button
+              text={intl.formatMessage({id: 'page.unlock.unlock-button'})}
+              size="large"
+              onPress={onPressSubmit}
+              loading={isLoading}
+              containerStyle={{width: '100%'}}
+            />
+          );
+        })()}
 
         <Gutter size={32} />
 
-        {keychainStore.isBiometryOn ? (
+        {keychainStore.isBiometryOn && !keyRingStore.needMigration ? (
           <TextButton
             text="Use Biometric Authentication"
             size="large"