ADD: Splash screen animation #644

5 years ago · 0976b44b8f
9 changed files with 146 additions and 45 deletions
--- a/img/bluewalletsplash.json
+++ b/img/bluewalletsplash.json
--- a/index.js
+++ b/index.js
@ -7,6 +7,8 @@ import { Sentry } from 'react-native-sentry';
 import { AppRegistry } from 'react-native';
 import WalletMigrate from './screen/wallets/walletMigrate';
 import { name as appName } from './app.json';
+import LottieView from 'lottie-react-native';
+
 /** @type {AppStorage} */
 const BlueApp = require('./BlueApp');
 let A = require('./analytics');
@ -22,7 +24,12 @@ if (!Error.captureStackTrace) {
 class BlueAppComponent extends React.Component {
  constructor(props) {
    super(props);
-    this.state = { isMigratingData: true };
+    this.state = { isMigratingData: true, onAnimationFinished: false };
+  }
+
+  componentDidMount() {
+    const walletMigrate = new WalletMigrate(this.setIsMigratingData);
+    walletMigrate.start();
  }

  setIsMigratingData = async () => {
@ -31,8 +38,40 @@ class BlueAppComponent extends React.Component {
    this.setState({ isMigratingData: false });
  };

+  onAnimationFinish = () => {
+    if (this.state.isMigratingData) {
+      this.loadingSplash.play(0);
+    } else {
+      this.setState({ onAnimationFinished: true });
+    }
+  };
+
  render() {
-    return this.state.isMigratingData ? <WalletMigrate onComplete={this.setIsMigratingData} /> : <App />;
+    if (this.state.isMigratingData) {
+      return (
+        <LottieView
+          ref={ref => (this.loadingSplash = ref)}
+          onAnimationFinish={this.onAnimationFinish}
+          source={require('./img/bluewalletsplash.json')}
+          autoPlay
+          loop={false}
+        />
+      );
+    } else {
+      if (this.state.onAnimationFinished) {
+        return <App />;
+      } else {
+        return (
+          <LottieView
+            ref={ref => (this.loadingSplash = ref)}
+            onAnimationFinish={this.onAnimationFinish}
+            source={require('./img/bluewalletsplash.json')}
+            autoPlay
+            loop={false}
+          />
+        );
+      }
+    }
  }
 }

--- a/ios/BlueWallet-Bridging-Header.h
+++ b/ios/BlueWallet-Bridging-Header.h
@ -0,0 +1,4 @@
+//
+//  Use this file to import your target's public headers that you would like to expose to Swift.
+//
+
--- a/ios/BlueWallet.xcodeproj/project.pbxproj
+++ b/ios/BlueWallet.xcodeproj/project.pbxproj
@ -23,6 +23,7 @@
 		2D16E6881FA4F8E400B85C8A /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2D16E6891FA4F8E400B85C8A /* libReact.a */; };
 		2DCD954D1E0B4F2C00145EB5 /* BlueWalletTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* BlueWalletTests.m */; };
 		3208E93922F63279007F5A27 /* AppCenter-Config.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3208E93822F63279007F5A27 /* AppCenter-Config.plist */; };
+		32B5A32A2334450100F8D608 /* Bridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = 32B5A3292334450100F8D608 /* Bridge.swift */; };
 		32F0A29A2311DBB20095C559 /* ComplicationController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 32F0A2992311DBB20095C559 /* ComplicationController.swift */; };
 		34582CAA4AD140F7B80C961A /* libTcpSockets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 9DF4E6C040764E4BA1ACC1EB /* libTcpSockets.a */; };
 		34CC55B441594DBB95AD1B50 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E8E8CE89B3D142C6A8A56C34 /* Octicons.ttf */; };
@ -149,6 +150,8 @@
 		2D16E6891FA4F8E400B85C8A /* libReact.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libReact.a; sourceTree = BUILT_PRODUCTS_DIR; };
 		2FCC2CD6FF4448229D0CE0F3 /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialCommunityIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; };
 		3208E93822F63279007F5A27 /* AppCenter-Config.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "AppCenter-Config.plist"; sourceTree = "<group>"; };
+		32B5A3282334450100F8D608 /* BlueWallet-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "BlueWallet-Bridging-Header.h"; sourceTree = "<group>"; };
+		32B5A3292334450100F8D608 /* Bridge.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Bridge.swift; sourceTree = "<group>"; };
 		32F0A24F2310B0700095C559 /* BlueWalletWatch Extension.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = "BlueWalletWatch Extension.entitlements"; sourceTree = "<group>"; };
 		32F0A2502310B0910095C559 /* BlueWallet.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = BlueWallet.entitlements; path = BlueWallet/BlueWallet.entitlements; sourceTree = "<group>"; };
 		32F0A2992311DBB20095C559 /* ComplicationController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ComplicationController.swift; sourceTree = "<group>"; };
@ -321,6 +324,8 @@
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
 				13B07FB71A68108700A75B9A /* main.m */,
+				32B5A3292334450100F8D608 /* Bridge.swift */,
+				32B5A3282334450100F8D608 /* BlueWallet-Bridging-Header.h */,
 			);
 			name = BlueWallet;
 			sourceTree = "<group>";
@ -624,6 +629,7 @@
 					};
 					13B07F861A680F5B00A75B9A = {
 						DevelopmentTeam = A7W54YZ4WU;
+						LastSwiftMigration = 1030;
 						ProvisioningStyle = Manual;
 						SystemCapabilities = {
 							com.apple.Keychain = {
@ -932,6 +938,7 @@
 			files = (
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
+				32B5A32A2334450100F8D608 /* Bridge.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@ -1024,6 +1031,7 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = A1B6AA2DE9A6E425682F4F3C /* Pods-BlueWalletTests.debug.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				DEVELOPMENT_TEAM = A7W54YZ4WU;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@ -1074,6 +1082,7 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 6AB6574CC4ECAAA359683D0F /* Pods-BlueWalletTests.release.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				COPY_PHASE_STRIP = NO;
 				DEVELOPMENT_TEAM = A7W54YZ4WU;
@ -1122,6 +1131,7 @@
 			baseConfigurationReference = 9B3A324B70BC8C6D9314FD4F /* Pods-BlueWallet.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				CURRENT_PROJECT_VERSION = 1;
@ -1143,6 +1153,9 @@
 				PRODUCT_BUNDLE_IDENTIFIER = io.bluewallet.bluewallet;
 				PRODUCT_NAME = BlueWallet;
 				PROVISIONING_PROFILE_SPECIFIER = "io.bluewallet.bluewallet AppStore";
+				SWIFT_OBJC_BRIDGING_HEADER = "BlueWallet-Bridging-Header.h";
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
@ -1153,6 +1166,7 @@
 			baseConfigurationReference = B459EE96941AE09BCB547DC0 /* Pods-BlueWallet.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				CURRENT_PROJECT_VERSION = 1;
@ -1173,6 +1187,8 @@
 				PRODUCT_BUNDLE_IDENTIFIER = io.bluewallet.bluewallet;
 				PRODUCT_NAME = BlueWallet;
 				PROVISIONING_PROFILE_SPECIFIER = "io.bluewallet.bluewallet AppStore";
+				SWIFT_OBJC_BRIDGING_HEADER = "BlueWallet-Bridging-Header.h";
+				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
--- a/ios/Bridge.swift
+++ b/ios/Bridge.swift
@ -0,0 +1,9 @@
+//
+//  Bridge.swift
+//  BlueWallet
+//
+//  Created by Marcos Rodriguez on 9/19/19.
+//  Copyright © 2019 Facebook. All rights reserved.
+//
+
+import Foundation
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -33,6 +33,10 @@ PODS:
    - DoubleConversion
    - glog
  - glog (0.3.5)
+  - lottie-ios (3.0.7)
+  - lottie-react-native (3.1.1):
+    - lottie-ios (~> 3.0.3)
+    - React
  - RCTSystemSetting (1.7.2):
    - React
  - React (0.60.5):
@ -151,7 +155,7 @@ PODS:
  - SentryReactNative (0.43.2):
    - React
    - Sentry (~> 4.1.3)
-  - swift_qrcodejs (1.1.1)
+  - swift_qrcodejs (1.1.2)
  - ToolTipMenu (5.2.1):
    - React
  - yoga (0.60.5.React)
@ -165,6 +169,7 @@ DEPENDENCIES:
  - EFQRCode (= 5.0.0)
  - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - lottie-react-native (from `../node_modules/lottie-react-native`)
  - RCTSystemSetting (from `../node_modules/react-native-system-setting`)
  - React (from `../node_modules/react-native/`)
  - React-Core (from `../node_modules/react-native/React`)
@ -211,6 +216,7 @@ SPEC REPOS:
    - AppCenterReactNativeShared
    - boost-for-react-native
    - EFQRCode
+    - lottie-ios
    - Sentry
    - swift_qrcodejs

@ -229,6 +235,8 @@ EXTERNAL SOURCES:
    :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
  glog:
    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
+  lottie-react-native:
+    :path: "../node_modules/lottie-react-native"
  RCTSystemSetting:
    :path: "../node_modules/react-native-system-setting"
  React:
@ -320,6 +328,8 @@ SPEC CHECKSUMS:
  EFQRCode: 07437cfbce3a1e497397a4f3d766c980d8972608
  Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
  glog: 1f3da668190260b06b429bb211bfbee5cd790c28
+  lottie-ios: c38c3178ae8c4a8f200661aa5f80b9f1ca7f56b3
+  lottie-react-native: d8caf2aa9ab8bb76312e44997c1c91804a23d44d
  RCTSystemSetting: 9279ff44c49bb4fb0a5d335a0851852c8f3eda99
  React: 53c53c4d99097af47cf60594b8706b4e3321e722
  React-Core: ba421f6b4f4cbe2fb17c0b6fc675f87622e78a64
@ -358,7 +368,7 @@ SPEC CHECKSUMS:
  RNWatch: c2d3bff3adf9ce06e10eb8c2d75c9043f5df0e35
  Sentry: 4e8a17b61ddd116f89536cc81d567fdee1ebca96
  SentryReactNative: 07237139c00366ea2e75ae3e5c566e7a71c27a90
-  swift_qrcodejs: 0bacbfe321a99954c7b8e04c75562007ea4e4f7c
+  swift_qrcodejs: 4d024fc98b0778b804ec6a5c810880fd092aec9d
  ToolTipMenu: c158702a26154d892bc9e6eaa7d7382f0f1ee16e
  yoga: 312528f5bbbba37b4dcea5ef00e8b4033fdd9411

--- a/package-lock.json
+++ b/package-lock.json
@ -3750,6 +3750,11 @@
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
    },
+    "dedent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.6.0.tgz",
+      "integrity": "sha1-Dm2o8M5Sg471zsXI+TlrDBtko8s="
+    },
    "deep-equal": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@ -7610,6 +7615,22 @@
        "js-tokens": "^3.0.0 || ^4.0.0"
      }
    },
+    "lottie-ios": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lottie-ios/-/lottie-ios-3.1.3.tgz",
+      "integrity": "sha512-FKSx9l5Ekwm1Wt/ncoCwvsq8NAb1nylzMFlxrHixLYNBtO2eCQet+vwQag+74Nc/E9Lp3DKkBUCyBfz+zjtmAw=="
+    },
+    "lottie-react-native": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-3.1.1.tgz",
+      "integrity": "sha512-zIHMQZoyAItPUw+42s38TwKA9+CWBaWxsTJhS8Ef7xbRWD9Gkr7UA6RrYfBJ0RZ4SKQ/V1YNnjp6200no+Rn8w==",
+      "requires": {
+        "invariant": "^2.2.2",
+        "lottie-ios": "^3.0.3",
+        "prop-types": "^15.5.10",
+        "react-native-safe-modules": "^1.0.0"
+      }
+    },
    "lru-cache": {
      "version": "4.1.5",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
@ -10837,6 +10858,14 @@
        "hoist-non-react-statics": "^2.3.1"
      }
    },
+    "react-native-safe-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-safe-modules/-/react-native-safe-modules-1.0.0.tgz",
+      "integrity": "sha512-ShT8duWBT30W4OFcltZl+UvpPDikZFURvLDQqAsrvbyy6HzWPGJDCpdqM+6GqzPPs4DPEW31YfMNmdJcZ6zI2w==",
+      "requires": {
+        "dedent": "^0.6.0"
+      }
+    },
    "react-native-screens": {
      "version": "1.0.0-alpha.23",
      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-1.0.0-alpha.23.tgz",
--- a/package.json
+++ b/package.json
@ -74,6 +74,7 @@
    "events": "1.1.1",
    "frisbee": "2.0.9",
    "intl": "1.2.5",
+    "lottie-react-native": "3.1.1",
    "mocha": "5.2.0",
    "node-libs-react-native": "1.0.3",
    "path-browserify": "1.0.0",
--- a/screen/wallets/walletMigrate.js
+++ b/screen/wallets/walletMigrate.js
@ -1,41 +1,20 @@
-import React, { Component } from 'react';
-import { View, ActivityIndicator } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
-import PropTypes from 'prop-types';
 import RNFS from 'react-native-fs';
 import RNSecureKeyStore, { ACCESSIBLE } from 'react-native-secure-key-store';

-const expoDataDirectory = RNFS.DocumentDirectoryPath + '/ExponentExperienceData/%40overtorment%2Fbluewallet/RCTAsyncLocalStorage';
+export default class WalletMigrate {
+  static expoDataDirectory = RNFS.DocumentDirectoryPath + '/ExponentExperienceData/%40overtorment%2Fbluewallet/RCTAsyncLocalStorage';

-export default class WalletMigrate extends Component {
-  componentDidMount() {
-    this.migrateDataFromExpo();
+  constructor(onComplete) {
+    this.onComplete = onComplete;
  }

-  migrationComplete() {
-    console.log('Migration was successful. Exiting migration...');
-    this.props.onComplete();
-  }
-
-  async migrateDataToSecureKeystore() {
-    try {
-      const data = await AsyncStorage.getItem('data');
-      if (data) {
-        const isEncrypted = (await AsyncStorage.getItem('data_encrypted')) || '';
-        await RNSecureKeyStore.set('data', data, { accessible: ACCESSIBLE.WHEN_UNLOCKED });
-        await RNSecureKeyStore.set('data_encrypted', isEncrypted, {
-          accessible: ACCESSIBLE.WHEN_UNLOCKED,
-        });
-        await AsyncStorage.removeItem('data');
-        await AsyncStorage.removeItem('data_encrypted');
-      }
-    } catch (_e) {
-      console.log('Nothing to migrate from AsyncStorage.');
-    }
-    this.migrationComplete();
+  // 0: Let's start!
+  async start() {
+    return this.migrateDataFromExpo();
  }

-  // Migrate Document directory from Expo
+  // 1: Migrate Document directory from Expo
  async migrateDataFromExpo() {
    const expoDirectoryExists = await RNFS.exists(RNFS.DocumentDirectoryPath + '/ExponentExperienceData');

@ -52,7 +31,7 @@ export default class WalletMigrate extends Component {
      console.log('/RCTAsyncLocalStorage_V1 does not exist. Continuing...');
    }
    try {
-      await RNFS.copyFile(expoDataDirectory, RNFS.DocumentDirectoryPath + '/RCTAsyncLocalStorage_V1');
+      await RNFS.copyFile(WalletMigrate.expoDataDirectory, RNFS.DocumentDirectoryPath + '/RCTAsyncLocalStorage_V1');
    } catch (error) {
      console.log('An error was encountered when trying to copy Expo data to /RCTAsyncLocalStorage_V1. Exiting migration...');
      console.log(error);
@ -63,7 +42,7 @@ export default class WalletMigrate extends Component {
      console.log('An error was encountered when trying to delete .DS_Store. Continuing migration...');
      console.log(error);
    }
-    const files = await RNFS.readDir(expoDataDirectory);
+    const files = await RNFS.readDir(WalletMigrate.expoDataDirectory);
    for (const file of files) {
      try {
        if (file.isFile()) {
@ -100,15 +79,28 @@ export default class WalletMigrate extends Component {
    await this.migrateDataToSecureKeystore();
  }

-  render() {
-    return (
-      <View style={{ flex: 1, justifyContent: 'center', alignContent: 'center', backgroundColor: '#ffffff' }}>
-        <ActivityIndicator />
-      </View>
-    );
+  // 2: Migrate Data from AsyncStorage to RNSecureKeyStore
+  async migrateDataToSecureKeystore() {
+    try {
+      const data = await AsyncStorage.getItem('data');
+      if (data) {
+        const isEncrypted = (await AsyncStorage.getItem('data_encrypted')) || '';
+        await RNSecureKeyStore.set('data', data, { accessible: ACCESSIBLE.WHEN_UNLOCKED });
+        await RNSecureKeyStore.set('data_encrypted', isEncrypted, {
+          accessible: ACCESSIBLE.WHEN_UNLOCKED,
+        });
+        await AsyncStorage.removeItem('data');
+        await AsyncStorage.removeItem('data_encrypted');
+      }
+    } catch (_e) {
+      console.log('Nothing to migrate from AsyncStorage.');
+    }
+    this.migrationComplete();
  }
-}

-WalletMigrate.propTypes = {
-  onComplete: PropTypes.func,
-};
+  // 3: We're done!
+  migrationComplete() {
+    console.log('Migration was successful. Exiting migration...');
+    this.onComplete();
+  }
+}