Show popup on new device detected

src/status_im/events.cljs

@@ -1364,6 +1364,16 @@
  (fn [cofx [_ installation-id]]
    (pairing/disable-fx cofx installation-id)))
 
+(handlers/register-handler-fx
+ :pairing.ui/prompt-dismissed
+ (fn [cofx _]
+   (pairing/prompt-dismissed cofx)))
+
+(handlers/register-handler-fx
+ :pairing.ui/prompt-accepted
+ (fn [cofx _]
+   (pairing/prompt-accepted cofx)))
+
 (handlers/register-handler-fx
  :pairing.callback/enable-installation-success
  (fn [cofx [_ installation-id]]

src/status_im/pairing/core.cljs

@@ -1,7 +1,9 @@
 (ns status-im.pairing.core
   (:require [re-frame.core :as re-frame]
             [clojure.string :as string]
+            [status-im.i18n :as i18n]
             [status-im.utils.fx :as fx]
+            [status-im.ui.screens.navigation :as navigation]
             [status-im.utils.config :as config]
             [status-im.utils.platform :as utils.platform]
             [status-im.accounts.db :as accounts.db]
@@ -54,6 +56,23 @@
     (merge local (select-keys remote account-mergeable-keys))
     local))
 
+(fx/defn prompt-dismissed [{:keys [db]}]
+  {:db (assoc-in db [:pairing/prompt-user-pop-up] false)})
+
+(fx/defn prompt-accepted [{:keys [db] :as cofx}]
+  (fx/merge cofx
+            {:db (assoc-in db [:pairing/prompt-user-pop-up] false)}
+            (navigation/navigate-to-cofx :installations nil)))
+
+(fx/defn prompt-user-on-new-installation [{:keys [db]}]
+  {:db               (assoc-in db [:pairing/prompt-user-pop-up] true)
+   :ui/show-confirmation {:title      (i18n/label :t/pairing-new-installation-detected-title)
+                          :content    (i18n/label :t/pairing-new-installation-detected-content)
+                          :confirm-button-text (i18n/label :t/pairing-go-to-installation)
+                          :cancel-button-text  (i18n/label :t/cancel)
+                          :on-cancel  #(re-frame/dispatch [:pairing.ui/prompt-dismissed])
+                          :on-accept #(re-frame/dispatch [:pairing.ui/prompt-accepted])}})
+
 (fx/defn upsert-installation [{:keys [db]} {:keys [installation-id] :as new-installation}]
   (let [old-installation (get-in db [:pairing/installations installation-id])
         updated-installation (merge old-installation new-installation)]
@@ -73,7 +92,10 @@
                  (accounts.db/current-public-key cofx))
               (not= (get-in db [:account/account :installation-id]) installation-id)
               (not (get-in db [:pairing/installations installation-id])))
-          (upsert-installation cofx new-installation))))))
+          (fx/merge cofx
+                    (upsert-installation new-installation)
+                    #(when-not (get-in % [:db :pairing/prompt-user-pop-up])
+                       (prompt-user-on-new-installation %))))))))
 
 (defn sync-installation-account-message [{:keys [db]}]
   (let [account (-> db

src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs

@@ -15,9 +15,7 @@
             [status-im.ui.screens.pairing.views :as pairing.views]
             [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
             [status-im.ui.screens.desktop.main.tabs.profile.styles :as styles]
-            [status-im.native-module.core :as status]
-            [status-im.mailserver.core :as mailserver.core]
-            [status-im.constants :as constants]
+            [status-im.ui.screens.pairing.styles :as pairing.styles]
             [status-im.ui.screens.profile.user.views :as profile]
             [status-im.ui.screens.profile.seed.views :as profile.recovery]
             [status-im.ui.components.common.common :as components.common]))
@@ -83,7 +81,11 @@
   [react/view
    [pairing.views/pair-this-device]
    [pairing.views/sync-devices]
-   [pairing.views/installations-list installations]])
+   [react/view {:style pairing.styles/installation-list}
+    (for [installation installations]
+      ^{:key (:installation-id installation)}
+      [react/view {:style {:margin-bottom 10}}
+       (pairing.views/render-row installation)])]])
 
 (defn connection-status
   "generates a composite message of the current connection state given peer and mailserver statuses"
@@ -140,8 +142,7 @@
                     :on-value-change #(re-frame/dispatch [:log-level.ui/logging-enabled (not logging-enabled)])}]]))
 
 (views/defview advanced-settings []
-  (views/letsubs [installations    [:pairing/installations]
-                  current-mailserver-id [:mailserver/current-id]
+  (views/letsubs [current-mailserver-id [:mailserver/current-id]
                   mailservers           [:mailserver/fleet-mailservers]
                   mailserver-state      [:mailserver/state]
                   node-status           [:node-status]
@@ -170,16 +171,16 @@
           ^{:key (:id mailserver)}
           [react/view {:style {:margin-vertical 8}}
            [render-fn mailserver]])]
-;
-       [react/view {:style styles/title-separator}]
-       [react/text {:style styles/adv-settings-subtitle} (i18n/label :devices)]
-       (when (config/pairing-enabled? true)
-         (installations-section installations))
-;
        [react/view {:style styles/title-separator}]
        [react/text {:style styles/adv-settings-subtitle} (i18n/label :t/logging)]
        [logging-display]])))
 
+(views/defview installations []
+  (views/letsubs [installations    [:pairing/installations]]
+    [react/scroll-view
+     (when (config/pairing-enabled? true)
+       (installations-section installations))]))
+
 (views/defview backup-recovery-phrase []
   [profile.recovery/backup-seed])
 
@@ -218,6 +219,7 @@
                   editing?        [:get :my-profile/editing?]] ;; TODO janherich: refactor my-profile, unnecessary complicated structure in db (could be just `:staged-name`/`:editing?` fields in account map) and horrible way to access it woth `:get`/`:set` subs/events
     (let [adv-settings-open?           (= current-view-id :advanced-settings)
           help-open?                   (= current-view-id :help-center)
+          installations-open?          (= current-view-id :installations)
           backup-recovery-phrase-open? (= current-view-id :backup-recovery-phrase)
           notifications?               (get-in user [:desktop-notifications?])
           show-backup-seed?            (and (not seed-backed-up?) (not (string/blank? mnemonic)))]
@@ -238,6 +240,12 @@
                         :on-value-change #(re-frame/dispatch [:accounts.ui/notifications-enabled (not notifications?)])}]]
         [advanced-settings-item adv-settings-open?]
         [help-item help-open?]
+        [react/touchable-highlight {:style  (styles/profile-row installations-open?)
+                                    :on-press #(re-frame/dispatch [:navigate-to (if installations-open? :home :installations)])}
+         [react/view {:style styles/adv-settings}
+          [react/text {:style (styles/profile-row-text colors/black)}
+           (i18n/label :t/devices)]
+          [vector-icons/icon :icons/forward {:style {:tint-color colors/gray}}]]]
         (when show-backup-seed?
           [react/touchable-highlight {:style  (styles/profile-row backup-recovery-phrase-open?)
                                       :on-press #(re-frame/dispatch [:navigate-to :backup-recovery-phrase])}

src/status_im/ui/screens/desktop/main/views.cljs

@@ -44,6 +44,7 @@
                       :qr-code profile.views/qr-code
                       :advanced-settings profile.views/advanced-settings
                       :help-center help-center.views/help-center
+                      :installations profile.views/installations
                       :chat-profile chat.views/chat-profile
                       :backup-recovery-phrase profile.views/backup-recovery-phrase
                       status-view)]

src/status_im/ui/screens/desktop/views.cljs

@@ -44,6 +44,7 @@
                        :desktop/new-public-chat
                        :advanced-settings
                        :help-center
+                       :installations
                        :chat
                        :home
                        :qr-code

src/status_im/ui/screens/pairing/subs.cljs

@@ -4,7 +4,7 @@
 
 (re-frame/reg-sub :pairing/installations
                   :<- [:get :pairing/installations]
-                  (fn [k]
-                    (->> k
+                  (fn [installations]
+                    (->> installations
                          vals
-                         (filter :device-type))))
+                         (sort-by (comp unchecked-negate :last-paired)))))

src/status_im/ui/screens/pairing/views.cljs

@@ -94,7 +94,7 @@
          (i18n/label :t/syncing-disabled))]]]]])
 
 (defn render-rows [installations]
-  [react/view {:style styles/wrapper}
+  [react/scroll-view {:style styles/wrapper}
    [list/flat-list {:data               installations
                     :default-separator? false
                     :key-fn             :installation-id

src/status_im/utils/utils.cljs

@@ -24,7 +24,7 @@
    (show-popup title content on-dismiss)))
 
 (defn show-confirmation
-  [{:keys [title content confirm-button-text on-accept on-cancel cancel-button-text]}]
+  [{:keys [title content confirm-button-text on-dismiss on-accept on-cancel cancel-button-text]}]
   (.alert (.-Alert rn-dependencies/react-native)
           title
           content
@@ -37,8 +37,8 @@
                    {:text                (or confirm-button-text (i18n/label :t/ok))
                     :onPress             on-accept
                     :style               "default"
-                    :accessibility-label :confirm-button})
-           #js {:cancelable false})))
+                    :accessibility-label :confirm-button}))
+          #js {:cancelable false}))
 
 (re-frame/reg-fx
  :utils/show-confirmation

translations/en.json

@@ -13,6 +13,9 @@
     "syncing-disabled": "Syncing disabled",
     "sync-all-devices": "Sync all devices",
     "paired-devices": "Paired devices",
+    "pairing-new-installation-detected-title": "New device detected",
+    "pairing-new-installation-detected-content": "A new device has been detected.\nIn order to use your devices correctly, it's important to pair and enable them before using them.\nPlease go to the device section under settings to pair your devices.",
+    "pairing-go-to-installation": "Go to pairing settings",
     "currency-display-name-tzs": "Tanzanian Shilling",
     "currency-display-name-brl": "Brazil Real",
     "mainnet-network": "Main network",