Implement seed phrase fallback flow (#21090)

Co-authored-by: Parvesh Monu <[email protected]>
Co-authored-by: Andrea Maria Piana <[email protected]>

Author: Parveshdhull

resources/images/ui2/[email protected]

@@ -62,6 +62,7 @@
                         :chatId                    :chat-id
                         :contactVerificationStatus :contact-verification-status
                         :communityId               :community-id
+                        :installationId            :installation-id
                         :membershipStatus          :membership-status
                         :albumMessages             :album-messages})
       (update :last-message #(when % (messages/<-rpc %)))

resources/images/ui2/[email protected]

@@ -117,20 +117,24 @@
 
 (deftest parse-notification-counts-response-test
   (is
-   (= {notification-types/one-to-one-chat      15
-       notification-types/private-group-chat   16
-       notification-types/mention              17
-       notification-types/reply                18
-       notification-types/contact-request      19
-       notification-types/admin                20
-       notification-types/contact-verification 21}
+   (= {notification-types/one-to-one-chat           15
+       notification-types/private-group-chat        16
+       notification-types/mention                   17
+       notification-types/reply                     18
+       notification-types/contact-request           19
+       notification-types/admin                     20
+       notification-types/contact-verification      21
+       notification-types/new-installation-received 22
+       notification-types/new-installation-created  23}
       (store/parse-notification-counts-response
-       {(keyword (str notification-types/one-to-one-chat))      15
-        (keyword (str notification-types/private-group-chat))   16
-        (keyword (str notification-types/mention))              17
-        (keyword (str notification-types/reply))                18
-        (keyword (str notification-types/contact-request))      19
-        (keyword (str notification-types/admin))                20
-        (keyword (str notification-types/contact-verification)) 21
+       {(keyword (str notification-types/one-to-one-chat))           15
+        (keyword (str notification-types/private-group-chat))        16
+        (keyword (str notification-types/mention))                   17
+        (keyword (str notification-types/reply))                     18
+        (keyword (str notification-types/contact-request))           19
+        (keyword (str notification-types/admin))                     20
+        (keyword (str notification-types/contact-verification))      21
+        (keyword (str notification-types/new-installation-received)) 22
+        (keyword (str notification-types/new-installation-created))  23
         ;; Unsupported type in the response is ignored
-        :999                                                    100}))))
+        :999                                                         100}))))

src/legacy/status_im/data_store/activities.cljs

@@ -243,6 +243,23 @@
                {}
                installations))})
 
+(rf/defn finish-seed-phrase-fallback-syncing
+  {:events [:pairing/finish-seed-phrase-fallback-syncing]}
+  [{:keys [db]}]
+  {:fx [[:json-rpc/call
+         [{:method      "wakuext_enableInstallationAndPair"
+           :params      [{:installationId (:syncing/installation-id db)}]
+           :js-response true
+           :on-success  [:sanitize-messages-and-process-response]}]]]})
+
+(rf/defn pair-and-sync
+  {:events [:pairing/pair-and-sync]}
+  [cofx installation-id]
+  {:fx [[:json-rpc/call
+         [{:method     "wakuext_enableInstallationAndSync"
+           :params     [{:installationId installation-id}]
+           :on-success #(log/debug "successfully synced devices")}]]]})
+
 (rf/defn enable-installation-success
   {:events [:pairing.callback/enable-installation-success]}
   [cofx installation-id]

src/legacy/status_im/data_store/activities_test.cljs

@@ -0,0 +1,23 @@
+(ns status-im.common.new-device-sheet.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def heading
+  {:padding-left   20
+   :padding-bottom 8})
+
+(def message
+  {:padding-horizontal 20
+   :padding-top        4})
+
+(def warning
+  {:margin-horizontal 20
+   :margin-top        10})
+
+(def drawer-container
+  {:padding-horizontal 13
+   :padding-top        16})
+
+(def settings-subtext
+  {:color         colors/white-opa-70
+   :align-self    :center
+   :margin-bottom 12})

src/legacy/status_im/pairing/core.cljs

@@ -0,0 +1,75 @@
+(ns status-im.common.new-device-sheet.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.common.events-helper :as events-helper]
+    [status-im.common.new-device-sheet.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- pair-and-sync
+  [installation-id]
+  (rf/dispatch [:pairing/pair-and-sync installation-id])
+  (events-helper/hide-bottom-sheet))
+
+(defn installation-request-receiver-view
+  [installation-id]
+  (rn/use-mount events-helper/dismiss-keyboard)
+  [:<>
+   [quo/text
+    {:weight              :semi-bold
+     :size                :heading-2
+     :accessibility-label :new-device-sheet-heading
+     :style               style/heading}
+    (i18n/label :t/pair-new-device-and-sync)]
+   [quo/text
+    {:weight              :regular
+     :size                :paragraph-1
+     :accessibility-label :new-device-sheet-message
+     :style               style/message}
+    (i18n/label :t/new-device-detected-recovered-device-message)]
+   [quo/text
+    {:weight              :semi-bold
+     :size                :heading-2
+     :accessibility-label :new-device-installation-id
+     :style               style/heading}
+    installation-id]
+   [quo/bottom-actions
+    {:actions          :two-actions
+     :blur?            true
+     :container-style  {:margin-top 12}
+     :button-two-label (i18n/label :t/cancel)
+     :button-two-props {:type     :grey
+                        :on-press events-helper/hide-bottom-sheet}
+     :button-one-label (i18n/label :t/pair-and-sync)
+     :button-one-props {:on-press #(pair-and-sync installation-id)}}]])
+
+(defn installation-request-creator-view
+  [installation-id]
+  (rn/use-mount events-helper/dismiss-keyboard)
+  [:<>
+   [quo/text
+    {:weight              :semi-bold
+     :size                :heading-2
+     :accessibility-label :new-device-sheet-heading
+     :style               style/heading}
+    (i18n/label :t/pair-this-device-and-sync)]
+   [quo/text
+    {:weight              :regular
+     :size                :paragraph-1
+     :accessibility-label :new-device-sheet-message
+     :style               style/message}
+    (i18n/label :t/new-device-detected-other-device-message)]
+   [quo/text
+    {:weight              :semi-bold
+     :size                :heading-2
+     :accessibility-label :new-device-installation-id
+     :style               style/heading}
+    installation-id]
+   [quo/bottom-actions
+    {:actions          :one-action
+     :blur?            true
+     :container-style  {:margin-top 12}
+     :button-one-label (i18n/label :t/close)
+     :button-one-props {:type     :grey
+                        :on-press events-helper/hide-bottom-sheet}}]])

src/status_im/common/new_device_sheet/style.cljs

@@ -28,6 +28,7 @@
    :notifications                 (js/require "../resources/images/ui2/notifications.png")
    :nfc-prompt                    (js/require "../resources/images/ui2/nfc-prompt.png")
    :nfc-success                   (js/require "../resources/images/ui2/nfc-success.png")
+   :preparing-status              (js/require "../resources/images/ui2/preparing-status.png")
    :syncing-devices               (js/require "../resources/images/ui2/syncing_devices.png")
    :syncing-wrong                 (js/require "../resources/images/ui2/syncing_wrong.png")})
 

src/status_im/common/new_device_sheet/view.cljs

@@ -37,6 +37,7 @@
     :screen/onboarding.enable-biometrics
     :screen/onboarding.generating-keys
     :screen/onboarding.enable-notifications
+    :screen/onboarding.preparing-status
     :screen/onboarding.sign-in-intro
     :screen/onboarding.sign-in
     :screen/onboarding.syncing-progress

src/status_im/common/resources.cljs

@@ -71,17 +71,20 @@
   {:events [:onboarding/create-account-and-login]}
   [{:keys [db] :as cofx}]
   (let [{:keys [display-name seed-phrase password image-path color] :as profile}
-        (:onboarding/profile db)]
+        (:onboarding/profile db)
+        loading-screen (if (seq (:syncing/key-uid db))
+                         :screen/onboarding.preparing-status
+                         :screen/onboarding.generating-keys)]
     (rf/merge cofx
               {:dispatch       [:navigate-to-within-stack
-                                [:screen/onboarding.generating-keys
+                                [loading-screen
                                  (get db
                                       :onboarding/navigated-to-enter-seed-phrase-from-screen
                                       :screen/onboarding.new-to-status)]]
                :dispatch-later [{:ms       constants/onboarding-generating-keys-animation-duration-ms
                                  :dispatch [:navigate-to-within-stack
                                             [:screen/onboarding.enable-notifications
-                                             :screen/onboarding.generating-keys]]}]
+                                             loading-screen]]}]
                :db             (-> db
                                    (dissoc :profile/login)
                                    (dissoc :auth-method)
@@ -134,22 +137,32 @@
 (rf/defn seed-phrase-validated
   {:events [:onboarding/seed-phrase-validated]}
   [{:keys [db]} seed-phrase key-uid]
-  (if (contains? (:profile/profiles-overview db) key-uid)
-    {:effects.utils/show-confirmation
-     {:title               (i18n/label :t/multiaccount-exists-title)
-      :content             (i18n/label :t/multiaccount-exists-content)
-      :confirm-button-text (i18n/label :t/unlock)
-      :on-accept           (fn []
-                             (re-frame/dispatch [:pop-to-root :screen/profile.profiles])
-                             (re-frame/dispatch
-                              [:profile/profile-selected key-uid]))
-      :on-cancel           #(re-frame/dispatch [:pop-to-root :multiaccounts])}}
-    {:db       (assoc-in db [:onboarding/profile :seed-phrase] seed-phrase)
-     :dispatch [:navigate-to-within-stack
-                [:screen/onboarding.create-profile
-                 (get db
-                      :onboarding/navigated-to-enter-seed-phrase-from-screen
-                      :screen/onboarding.new-to-status)]]}))
+  (let [syncing-account-recovered? (and (seq (:syncing/key-uid db))
+                                        (= (:syncing/key-uid db) key-uid))
+        next-screen                (if syncing-account-recovered?
+                                     :screen/onboarding.create-profile-password
+                                     :screen/onboarding.create-profile)]
+    (if (contains? (:profile/profiles-overview db) key-uid)
+      {:effects.utils/show-confirmation
+       {:title               (i18n/label :t/multiaccount-exists-title)
+        :content             (i18n/label :t/multiaccount-exists-content)
+        :confirm-button-text (i18n/label :t/unlock)
+        :on-accept           (fn []
+                               (re-frame/dispatch [:pop-to-root :screen/profile.profiles])
+                               (re-frame/dispatch
+                                [:profile/profile-selected key-uid]))
+        :on-cancel           #(re-frame/dispatch [:pop-to-root :multiaccounts])}}
+      {:db (-> db
+               (assoc-in [:onboarding/profile :seed-phrase] seed-phrase)
+               (assoc-in [:onboarding/profile :color] constants/profile-default-color))
+       :fx [[:dispatch
+             [:navigate-to-within-stack
+              [next-screen
+               (get db
+                    :onboarding/navigated-to-enter-seed-phrase-from-screen
+                    :screen/onboarding.new-to-status)]]]
+            (when-not syncing-account-recovered?
+              [:dispatch [:syncing/clear-syncing-data]])]})))
 
 (rf/defn navigate-to-create-profile
   {:events [:onboarding/navigate-to-create-profile]}

src/status_im/contexts/centralized_metrics/tracking.cljs

@@ -0,0 +1,11 @@
+(ns status-im.contexts.onboarding.preparing-status.style)
+
+(defn page-container
+  [insets]
+  {:flex        1
+   :padding-top (:top insets)})
+
+(defn page-illustration
+  [width]
+  {:flex  1
+   :width width})

src/status_im/contexts/onboarding/events.cljs

@@ -0,0 +1,36 @@
+(ns status-im.contexts.onboarding.preparing-status.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
+    [status-im.common.resources :as resources]
+    [status-im.contexts.onboarding.generating-keys.style :as style]
+    [utils.i18n :as i18n]))
+
+(defn title
+  []
+  [rn/view
+   {:style {:margin-top    56
+            :height        56
+            :margin-bottom 10}}
+   [quo/text-combinations
+    {:container-style {:margin-horizontal 20
+                       :margin-vertical   12}
+     :title           (i18n/label :t/preparing-app-for-you)
+     :description     (i18n/label :t/hang-in-there)}]])
+
+(defn content
+  []
+  (let [width (:width (rn/get-window))]
+    [rn/image
+     {:resize-mode :stretch
+      :style       (style/page-illustration width)
+      :source      (resources/get-image :preparing-status)}]))
+
+(defn view
+  []
+  (let [insets (safe-area/get-insets)]
+    [rn/view {:style (style/page-container insets)}
+     [:<>
+      [title]
+      [content]]]))

src/status_im/contexts/onboarding/preparing_status/style.cljs

@@ -27,7 +27,3 @@
    :align-items     :center
    :align-self      :center
    :justify-content :center})
-
-(def try-again-button
-  {:margin-top         20
-   :padding-horizontal 20})

src/status_im/contexts/onboarding/preparing_status/view.cljs

@@ -5,6 +5,7 @@
     [status-im.common.resources :as resources]
     [status-im.contexts.onboarding.common.background.view :as background]
     [status-im.contexts.onboarding.syncing.progress.style :as style]
+    [utils.debounce :as debounce]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -25,17 +26,40 @@
     :title-accessibility-label       :progress-screen-title
     :description-accessibility-label :progress-screen-sub-title}])
 
+(defn- navigate-to-enter-seed-phrase
+  []
+  (debounce/debounce-and-dispatch
+   [:onboarding/navigate-to-sign-in-by-seed-phrase :screen/onboarding.sync-or-recover-profile]
+   500))
+
+(defn- try-again
+  [logged-in?]
+  (rf/dispatch [:syncing/clear-states])
+  (if logged-in?
+    (rf/dispatch [:navigate-back])
+    (rf/dispatch [:navigate-back-to :screen/onboarding.sync-or-recover-profile])))
+
 (defn try-again-button
-  [profile-color]
-  [quo/button
-   {:on-press            (fn []
-                           (rf/dispatch [:syncing/clear-states])
-                           (rf/dispatch [:navigate-back]))
-    :accessibility-label :try-again-later-button
-    :customization-color profile-color
-    :size                40
-    :container-style     style/try-again-button}
-   (i18n/label :t/try-again)])
+  [profile-color logged-in?]
+  [quo/bottom-actions
+   {:actions (if logged-in? :one-action :two-actions)
+    :blur? true
+    :button-one-label (i18n/label :t/recovery-phrase)
+    :button-one-props {:type                :primary
+                       :accessibility-label :try-seed-phrase-button
+                       :customization-color profile-color
+                       :container-style     {:flex 1}
+                       :size                40
+                       :on-press            navigate-to-enter-seed-phrase}
+    (if logged-in? :button-one-label :button-two-label)
+    (i18n/label :t/try-again)
+    (if logged-in? :button-one-props :button-two-props)
+    {:type                (if logged-in? :primary :grey)
+     :accessibility-label :try-again-later-button
+     :customization-color profile-color
+     :container-style     {:flex 1}
+     :size                40
+     :on-press            #(try-again logged-in?)}}])
 
 (defn- illustration
   [pairing-progress?]
@@ -47,6 +71,7 @@
 (defn view
   [in-onboarding?]
   (let [pairing-status    (rf/sub [:pairing/pairing-status])
+        logged-in?        (rf/sub [:multiaccount/logged-in?])
         pairing-progress? (pairing-progress pairing-status)
         profile-color     (or (:color (rf/sub [:onboarding/profile]))
                               (rf/sub [:profile/customization-color]))]
@@ -58,7 +83,7 @@
      [page-title pairing-progress?]
      [illustration pairing-progress?]
      (when-not (pairing-progress pairing-status)
-       [try-again-button profile-color])]))
+       [try-again-button profile-color logged-in?])]))
 
 (defn view-onboarding
   []