Bring the seedphrase backup flow to the new settings #19554 (#19887)

src/legacy/status_im/ui/screens/privacy_and_security_settings/views.cljs

@@ -2,7 +2,6 @@
   (:require
     [legacy.status-im.multiaccounts.reset-password.core :as reset-password]
     [legacy.status-im.multiaccounts.update.core :as multiaccounts.update]
-    [legacy.status-im.ui.components.common.common :as components.common]
     [legacy.status-im.ui.components.core :as components]
     [legacy.status-im.ui.components.list.item :as list.item]
     [legacy.status-im.ui.components.react :as react]
@@ -29,8 +28,7 @@
 
 (views/defview privacy-and-security
   []
-  (views/letsubs [{:keys [mnemonic
+  (views/letsubs [{:keys [preview-privacy?
-                          preview-privacy?
                           messages-from-contacts-only
                           webview-allow-permission-requests?
                           opensea-enabled?
@@ -45,16 +43,6 @@
        :icon-name  :i/close
        :on-press   #(rf/dispatch [:navigate-back])}]
      [react/scroll-view {:padding-vertical 8}
-      [components/list-header (i18n/label :t/security)]
-      [list.item/list-item
-       {:size                :small
-        :title               (i18n/label :t/back-up-seed-phrase)
-        :accessibility-label :back-up-recovery-phrase-button
-        :disabled            (not mnemonic)
-        :chevron             (boolean mnemonic)
-        :accessory           (when mnemonic [components.common/counter {:size 22} 1])
-        :on-press            #(re-frame/dispatch [:navigate-to :backup-seed])}]
-      [separator]
       [components/list-header (i18n/label :t/privacy)]
       [list.item/list-item
        {:size                :small

src/legacy/status_im/ui/screens/profile/seed/views.cljs

@@ -12,8 +12,12 @@
     [legacy.status-im.ui.screens.profile.seed.styles :as styles]
     [legacy.status-im.utils.utils :as utils]
     [re-frame.core :as re-frame]
+    [react-native.core :as rn]
     [reagent.core :as reagent]
-    [utils.i18n :as i18n]))
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]
+    [react-native.platform :as platform]
+    [react-native.safe-area :as safe-area]))
 
 (def steps-numbers
   {:intro       1
@@ -153,13 +157,17 @@
     [quo/button {:on-press #(re-frame/dispatch [:navigate-back])}
      (i18n/label :t/ok-got-it)]]])
 
-(defview backup-seed
+(defn backup-seed
   []
-  (letsubs [current-multiaccount                             [:profile/profile]
+  (let [current-multiaccount             (rf/sub [:profile/profile])
-            {:keys [step first-word second-word error word]} [:my-profile/recovery]]
+        {:keys [step first-word
-    [react/keyboard-avoiding-view
+                second-word error word]} (rf/sub [:my-profile/recovery])
+        footer-container-padding         (+ (safe-area/get-top)
+                                            (rf/sub [:alert-banners/top-margin])
+                                            20)]
+    [rn/keyboard-avoiding-view
      {:style                    {:flex 1}
-      :ignore-offset true}
+      :keyboard-vertical-offset (if platform/ios? footer-container-padding 0)}
      [topbar/topbar
       {:title      (i18n/label :t/backup-recovery-phrase)
        :subtitle   (i18n/label :t/step-i-of-n {:step (steps-numbers step) :number 3})

src/legacy/status_im/ui/screens/profile/user/views.cljs

@@ -1,6 +1,5 @@
 (ns legacy.status-im.ui.screens.profile.user.views
   (:require
-    [legacy.status-im.ui.components.common.common :as components.common]
     [legacy.status-im.ui.components.core :as components]
     [legacy.status-im.ui.components.list.item :as list.item]
     [quo.core :as quo]
@@ -12,7 +11,6 @@
 
 (defn content
   []
-  (let [{:keys [mnemonic]} (rf/sub [:profile/profile])]
   [rn/scroll-view {:flex 1}
    [components/list-header "Legacy settings"]
    [list.item/list-item
@@ -20,15 +18,13 @@
      :title               (i18n/label :t/privacy-and-security)
      :accessibility-label :privacy-and-security-settings-button
      :chevron             true
-       :accessory           (when mnemonic
-                              [components.common/counter {:size 22} 1])
      :on-press            #(re-frame/dispatch [:open-modal :legacy-privacy-and-security])}]
    [list.item/list-item
     {:icon                :main-icons/mobile
      :title               (i18n/label :t/sync-settings)
      :accessibility-label :sync-settings-button
      :chevron             true
-       :on-press            #(re-frame/dispatch [:open-modal :legacy-sync-settings])}]]))
+     :on-press            #(re-frame/dispatch [:open-modal :legacy-sync-settings])}]])
 
 (defn legacy-settings
   []

src/legacy/status_im/ui/screens/screens.cljs

@@ -189,7 +189,7 @@
                 :insets {:top? true}}
     :component backup-settings/backup-settings}
    {:name      :backup-seed
-    :options   {:insets {:top? true}}
+    :options   {:insets {:top? platform/android? :bottom? true}}
     :component profile.seed/backup-seed}
    {:name      :reset-password
     :options   {:topBar (topbar-options :t/reset-password)

src/quo/components/settings/settings_item/view.cljs

@@ -79,7 +79,7 @@
     nil))
 
 (defn label-component
-  [{:keys [label label-props blur? theme preview-size]}]
+  [{:keys [label label-props label-icon-props blur? theme preview-size]}]
   [rn/view {:accessibility-label :label-component}
    (case label
      :text    [text/text
@@ -89,6 +89,7 @@
                {:style (style/label-dot label-props)}]
      :preview [preview-list/view {:type (:type label-props) :size (or preview-size :size-24)}
                (:data label-props)]
+     :icon    [icon/icon label-props label-icon-props]
      nil)])
 
 (defn action-component

src/status_im/contexts/profile/settings/list_items.cljs

@@ -4,8 +4,19 @@
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
-(def items
+(defn items
-  [[{:title       (i18n/label :t/edit-profile)
+  [mnemonic?]
+  [(when mnemonic?
+     [{:title            (i18n/label :t/back-up-seed-phrase)
+       :on-press         #(rf/dispatch [:open-modal :backup-seed])
+       :image-props      :i/seed
+       :image            :icon
+       :label            :icon
+       :label-props      :i/warning
+       :label-icon-props {:no-color true}
+       :blur?            true
+       :action           :arrow}])
+   [{:title       (i18n/label :t/edit-profile)
      :on-press    #(rf/dispatch [:open-modal :edit-profile])
      :image-props :i/edit
      :image       :icon

src/status_im/contexts/profile/settings/view.cljs

@@ -37,15 +37,19 @@
   [_ index]
   #js {:length 100 :offset (* 100 index) :index index})
 
+(defn logout-press
+  []
+  (rf/dispatch [:multiaccounts.logout.ui/logout-pressed]))
+
 (defn view
   []
   (let [theme               (quo.theme/use-theme)
         insets              (safe-area/get-insets)
         customization-color (rf/sub [:profile/customization-color])
         scroll-y            (reanimated/use-shared-value 0)
-        logout-press        #(rf/dispatch [:multiaccounts.logout.ui/logout-pressed])
         profile             (rf/sub [:profile/profile])
-        full-name           (profile.utils/displayed-name profile)]
+        full-name           (profile.utils/displayed-name profile)
+        on-scroll           (rn/use-callback #(scroll-handler % scroll-y))]
     [quo/overlay {:type :shell}
      [rn/view
       {:key   :header
@@ -70,13 +74,13 @@
      [rn/flat-list
       {:key                             :list
        :header                          [settings.header/view {:scroll-y scroll-y}]
-       :data                            settings.items/items
+       :data                            (settings.items/items (boolean (:mnemonic profile)))
        :shows-vertical-scroll-indicator false
        :render-fn                       settings-item-view
        :get-item-layout                 get-item-layout
        :footer                          [footer insets logout-press]
        :scroll-event-throttle           16
-       :on-scroll                       #(scroll-handler % scroll-y)
+       :on-scroll                       on-scroll
        :bounces                         false
        :over-scroll-mode                :never}]
      [quo/floating-shell-button

src/utils/re_frame.cljs

@@ -81,10 +81,10 @@
     res))
 
 (defn delay-render
-  [content]
+  [_]
   (let [render? (reagent/atom false)]
     (js/setTimeout #(reset! render? true) 0)
-    (fn []
+    (fn [content]
       (when @render?
         content))))
 

translations/en.json

@@ -62,8 +62,8 @@
         "other": "You can select {{count}} more participants"
     },
     "back": "Back",
-    "back-up-seed-phrase": "Back up seed phrase",
+    "back-up-seed-phrase": "Backup recovery phrase",
-    "back-up-your-seed-phrase": "Back up your seed phrase",
+    "back-up-your-seed-phrase": "Backup your recovery phrase",
     "balance": "Balance",
     "begin-set-up": "Begin setup",
     "bio": "Bio",