[#7005] add installation progress bar

Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>

.env.jenkins

@@ -16,3 +16,4 @@ PFS_ENCRYPTION_ENABLED=0
 PAIRING_ENABLED=1
 ERC20_CONTRACT_WARNINGS=1
 MAILSERVER_CONFIRMATIONS_ENABLED=0
+HARDWALLET_ENABLED=0

components/src/status_im/ui/components/react.cljs

@@ -36,6 +36,7 @@
 (def net-info (get-react-property "NetInfo"))
 (def view (get-class "View"))
 (def safe-area-view (get-class "SafeAreaView"))
+(def progress-bar (get-class "ProgressBarAndroid"))
 
 (def status-bar (get-class (if platform/desktop? "View" "StatusBar")))
 

mobile_files/package.json.orig

@@ -55,7 +55,7 @@
     "react-native-safe-area-view": "0.9.0",
     "react-native-securerandom": "https://github.com/status-im/react-native-securerandom#0.1.1-1",
     "react-native-splash-screen": "3.1.1",
-    "react-native-status-keycard": "github:status-im/react-native-status-keycard",
+    "react-native-status-keycard": "https://github.com/status-im/react-native-status-keycard",
     "react-native-svg": "6.5.2",
     "react-native-tcp": "https://github.com/status-im/react-native-tcp.git#3.3.0-1",
     "react-native-udp": "https://github.com/status-im/react-native-udp.git#2.3.1-1",

mobile_files/yarn.lock

@@ -6005,9 +6005,9 @@ react-native-splash-screen@3.1.1:
   resolved "https://registry.yarnpkg.com/react-native-splash-screen/-/react-native-splash-screen-3.1.1.tgz#1a4e46c9fdce53ff52af2a2cb4181788c4e30b30"
   integrity sha512-PU2YocOSGbLjL9Vgcq/cwMNuHHKNjjuPpa1IPMuWo+6EB/fSZ5VOmxSa7+eucQe3631s3NhGuk3eHKahU03a4Q==
 
-"react-native-status-keycard@github:status-im/react-native-status-keycard":
+"react-native-status-keycard@https://github.com/status-im/react-native-status-keycard":
-  version "1.0.0"
+  version "2.0.1"
-  resolved "https://codeload.github.com/status-im/react-native-status-keycard/tar.gz/b6c7324a8fd69acba42127000189bf9d58f4b774"
+  resolved "https://github.com/status-im/react-native-status-keycard#5a16166a97035d4edf94ad5278910df5740a4361"
 
 react-native-svg@6.5.2:
   version "6.5.2"

src/status_im/accounts/create/core.cljs

@@ -61,7 +61,9 @@
   [{:keys [signing-phrase
            status
            db] :as cofx}
-   {:keys [pubkey address mnemonic installation-id keycard-instance-uid]} password seed-backed-up]
+   {:keys [pubkey address mnemonic installation-id keycard-instance-uid]}
+   password
+   {:keys [seed-backed-up? login?] :or {login? true}}]
   (let [normalized-address (utils.hex/normalize-hex address)
         account            {:public-key             pubkey
                             :installation-id        (or installation-id (get-in db [:accounts/new-installation-id]))
@@ -72,7 +74,7 @@
                             :desktop-notifications? false
                             :photo-path             (identicon/identicon pubkey)
                             :signing-phrase         signing-phrase
-                            :seed-backed-up?        seed-backed-up
+                            :seed-backed-up?        seed-backed-up?
                             :mnemonic               mnemonic
                             :keycard-instance-uid   keycard-instance-uid
                             :settings               (constants/default-account-settings)}]
@@ -83,7 +85,8 @@
                                                 :password   password
                                                 :processing true})}
                 (add-account account)
-                (accounts.login/user-login true)))))
+                (when login?
+                  (accounts.login/user-login true))))))
 
 (defn reset-account-creation [{db :db}]
   {:db (update db :accounts/create assoc

src/status_im/accounts/recover/core.cljs

@@ -71,7 +71,7 @@
                    :address    address
                    :photo-path (identicon/identicon pubkey)
                    :mnemonic   ""}]
-      (accounts.create/on-account-created cofx account password true))
+      (accounts.create/on-account-created cofx account password {:seed-backed-up? true}))
     {:db (assoc-in db [:accounts/recover :password-error] :recover-password-invalid)}))
 
 (fx/defn on-account-recovered

src/status_im/events.cljs

@@ -186,7 +186,7 @@
   (re-frame/inject-cofx :accounts.create/get-signing-phrase)
   (re-frame/inject-cofx :accounts.create/get-status)]
  (fn [cofx [_ result password]]
-   (accounts.create/on-account-created cofx result password false)))
+   (accounts.create/on-account-created cofx result password {:seed-backed-up? false})))
 
 (handlers/register-handler-fx
  :accounts.create.ui/create-new-account-button-pressed

src/status_im/hardwallet/core.cljs

@@ -8,7 +8,8 @@
             [taoensso.timbre :as log]
             [status-im.i18n :as i18n]
             [status-im.accounts.create.core :as accounts.create]
-            [status-im.accounts.login.core :as accounts.login]))
+            [status-im.accounts.login.core :as accounts.login]
+            [status-im.node.core :as node]))
 
 (defn hardwallet-supported? [{:keys [db]}]
   (and config/hardwallet-enabled?
@@ -259,8 +260,27 @@
                                                   :pairing  pairing
                                                   :pin      pin}})))
 
+(fx/defn create-keycard-account
+  [{:keys [db] :as cofx}]
+  (let [{{:keys [whisper-public-key
+                 wallet-address
+                 encryption-public-key
+                 keycard-instance-uid]} :hardwallet} db]
+    (fx/merge (-> cofx
+                  (accounts.create/get-signing-phrase)
+                  (accounts.create/get-status))
+              {:db (assoc-in db [:hardwallet :setup-step] nil)}
+              (accounts.create/on-account-created {:pubkey               whisper-public-key
+                                                   :address              wallet-address
+                                                   :mnemonic             ""
+                                                   :keycard-instance-uid keycard-instance-uid}
+                                                  encryption-public-key
+                                                  {:seed-backed-up? true
+                                                   :login?          false})
+              (navigation/navigate-to-cofx :hardwallet-success nil))))
+
 (fx/defn on-generate-and-load-key-success
-  [{:keys [db] :as cofx} data]
+  [{:keys [db random-guid-generator] :as cofx} data]
   (let [{:keys [whisper-public-key
                 whisper-private-key
                 whisper-address
@@ -275,14 +295,10 @@
                        (assoc-in [:hardwallet :whisper-address] whisper-address)
                        (assoc-in [:hardwallet :wallet-address] wallet-address)
                        (assoc-in [:hardwallet :encryption-public-key] encryption-public-key)
-                       (assoc-in [:hardwallet :setup-step] nil))}
+                       (assoc-in [:hardwallet :keycard-instance-uid] keycard-instance-uid)
-              (accounts.create/on-account-created {:pubkey   whisper-public-key'
+                       (assoc :node/on-ready :create-keycard-account)
-                                                   :address  wallet-address
+                       (assoc :accounts/new-installation-id (random-guid-generator)))}
-                                                   :mnemonic ""
+              (node/initialize nil))))
-                                                   :keycard-instance-uid keycard-instance-uid}
-                                                  encryption-public-key
-                                                  true)
-              (navigation/navigate-to-cofx :hardwallet-success nil))))
 
 (fx/defn on-generate-and-load-key-error
   [{:keys [db] :as cofx} {:keys [error code]}]

src/status_im/signals/core.cljs

@@ -9,7 +9,8 @@
             [status-im.utils.fx :as fx]
             [status-im.utils.types :as types]
             [taoensso.timbre :as log]
-            [status-im.utils.security :as security]))
+            [status-im.utils.security :as security]
+            [status-im.hardwallet.core :as hardwallet]))
 
 (fx/defn status-node-started
   [{db :db :as cofx}]
@@ -38,7 +39,9 @@
                 (fn [{:keys [db]}]
                   (let [{:keys [password passphrase]} (:accounts/recover db)]
                     {:accounts.recover/recover-account
-                     [(security/mask-data passphrase) password]}))))))
+                     [(security/mask-data passphrase) password]}))
+                :create-keycard-account
+                (hardwallet/create-keycard-account)))))
 
 (fx/defn status-node-stopped
   [{db :db}]

src/status_im/ui/screens/hardwallet/setup/styles.cljs

@@ -4,11 +4,11 @@
 
 (def container
   {:flex             1
+   :justify-content :space-between
    :background-color colors/white})
 
 (def inner-container
   {:flex-direction  :column
-   :flex            1
    :align-items     :center
    :justify-content :space-between})
 
@@ -46,12 +46,10 @@
 (def maintain-card-second-step-text
   {:font-size    12
    :padding-left 8
-   ;:background-color :red
    :color        colors/gray})
 
 (def maintain-card-third-step-text
   {:font-size    12
-   ;:background-color :yellow
    :padding-left 8
    :color        colors/gray})
 
@@ -208,6 +206,9 @@
 (def waiting-indicator-container
   {:height 200})
 
+(def progress-bar-container
+  {:width "65%"})
+
 ;; secret keys step
 
 (def secret-keys-container

src/status_im/ui/screens/hardwallet/setup/views.cljs

@@ -1,7 +1,7 @@
 (ns status-im.ui.screens.hardwallet.setup.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [re-frame.core :as re-frame]
-            [reagent.core :as reagent]
+            [status-im.react-native.js-dependencies :as js-dependencies]
             [status-im.ui.screens.profile.seed.views :as seed.views]
             [status-im.ui.screens.hardwallet.components :as components]
             [status-im.ui.screens.hardwallet.pin.views :as pin.views]
@@ -18,6 +18,8 @@
             [status-im.ui.components.colors :as colors]
             [status-im.ui.screens.hardwallet.setup.styles :as styles]))
 
+(defonce event-emitter (.-DeviceEventEmitter js-dependencies/react-native))
+
 (defview secret-keys []
   (letsubs [secrets [:hardwallet-secrets]]
     [react/view styles/secret-keys-container
@@ -83,6 +85,7 @@
      [react/view {:margin-right 20}
       [components.common/bottom-button
        {:on-press   #(re-frame/dispatch [:hardwallet.ui/card-ready-next-button-pressed])
+        :uppercase? false
         :forward?   true}]]]]])
 
 (defview recovery-phrase []
@@ -135,7 +138,7 @@
             word [:hardwallet-recovery-phrase-word]
             input-word [:hardwallet-recovery-phrase-input-word]
             error [:hardwallet-recovery-phrase-confirm-error]
-            ref (reagent/atom nil)]
+            ref (atom nil)]
     (let [{:keys [word idx]} word]
       [react/view styles/enter-pair-code-container
        [react/view styles/enter-pair-code-title-container
@@ -288,7 +291,19 @@
     [react/activity-indicator {:animating true
                                :size      :large}]]])
 
-(defn- preparing []
+(defview preparing []
+  (letsubs [progress-bar (atom nil)
+            listener (atom nil)]
+    {:component-will-mount (fn []
+                             (when @listener
+                               (.removeListener @listener)))
+     :component-did-mount  (fn []
+                             (reset! listener
+                                     (.addListener event-emitter
+                                                   "keycardInstallationProgress"
+                                                   (fn [params]
+                                                     (when @progress-bar
+                                                       (.setNativeProps @progress-bar params))))))}
     [react/view styles/loading-view-container
      [react/view styles/center-container
       [react/text {:style styles/center-title-text
@@ -299,9 +314,11 @@
        (i18n/label :t/generating-codes-for-pairing)]
       [react/text {:style styles/estimated-time-text}
        (i18n/label :t/taking-long-hold-phone-connected)]]
-   [react/view styles/waiting-indicator-container
+     [react/view styles/progress-bar-container
-    [react/activity-indicator {:animating true
+      [react/progress-bar {:styleAttr     "Horizontal"
-                               :size      :large}]]])
+                           :indeterminate false
+                           :progress      0
+                           :ref           #(reset! progress-bar %)}]]]))
 
 (defn- generating-mnemonic []
   [react/view styles/loading-view-container
@@ -373,5 +390,5 @@
     [react/keyboard-avoiding-view components.styles/flex
      [react/view styles/container
       [react/view styles/inner-container
-       [components/maintain-card step]
+       [components/maintain-card step]]
-       [content step]]]]))
+      [content step]]]))