Add network info in about, with copy to clipboard

In network we show peer infos about you and the connect peers.
Any entry is about is clickable and will copy the value to the
clipboard. Copy info will copy all the info in a JSON string.

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

src/status_im/events.cljs

@@ -37,6 +37,7 @@
             [status-im.search.core :as search]
             [status-im.signals.core :as signals]
             [status-im.transport.message.core :as transport.message]
+            [status-im.transport.core :as transport]
             [status-im.ui.screens.currency-settings.models :as currency-settings.models]
             [status-im.node.core :as node]
             [status-im.web3.core :as web3]
@@ -1723,3 +1724,8 @@
  :stickers/pending-timout
  (fn [cofx _]
    (stickers/pending-timeout cofx)))
+
+(handlers/register-handler-fx
+ :transport.callback/node-info-fetched
+ (fn [cofx [_ node-info]]
+   (transport/set-node-info cofx node-info)))

src/status_im/transport/core.cljs

@@ -2,6 +2,7 @@
  status-im.transport.core
   (:require status-im.transport.filters
             [re-frame.core :as re-frame]
+            [status-im.native-module.core :as status]
             [status-im.mailserver.core :as mailserver]
             [status-im.transport.message.core :as message]
             [status-im.transport.partitioned-topic :as transport.topic]
@@ -28,6 +29,23 @@
                  :callback (constantly nil)}))
         chats))
 
+(defn set-node-info [{:keys [db]} node-info]
+  {:db (assoc db :node-info node-info)})
+
+(defn fetch-node-info []
+  (let [args    {:jsonrpc "2.0"
+                 :id      2
+                 :method  "admin_nodeInfo"}
+        payload (.stringify js/JSON (clj->js args))]
+    (status/call-private-rpc payload
+                             (handlers/response-handler #(re-frame/dispatch [:transport.callback/node-info-fetched %])
+                                                        #(log/error "node-info: failed error" %)))))
+
+(re-frame/reg-fx
+ ::fetch-node-info
+ (fn []
+   (fetch-node-info)))
+
 (fx/defn init-whisper
   "Initialises whisper protocol by:
   - adding fixed shh discovery filter
@@ -48,6 +66,7 @@
                                               :chat-id :discovery-topic})
                                            discovery-topics))}
 
+                 ::fetch-node-info []
                  :shh/restore-sym-keys-batch
                  {:web3       web3
                   :transport  (keep (fn [[chat-id {:keys [topic sym-key]

src/status_im/transport/utils.cljs

@@ -46,3 +46,6 @@
       (get 0 "")
       (string/split "@")
       (get 0)))
+
+(defn extract-url-components [address]
+  (rest (re-matches #"enode://(.*?)@(.*):(.*)" address)))

src/status_im/ui/screens/about_app/styles.cljs

@@ -0,0 +1,21 @@
+(ns status-im.ui.screens.about-app.styles
+  (:require [status-im.ui.components.colors :as colors]))
+
+(def peer-view
+  {:background-color colors/white
+   :padding-bottom 5
+   :padding-horizontal 16})
+
+(def peer-text
+  {:font-size 10
+   :color colors/black})
+
+(def about-title
+  {:background-color colors/white
+   :font-size 20
+   :padding-vertical 5
+   :padding-horizontal 16})
+
+(def about-title-text
+  {:font-size 20
+   :color colors/black})

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

@@ -3,12 +3,44 @@
   (:require [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.ui.screens.about-app.styles :as styles]
             [status-im.i18n :as i18n]
+            [status-im.transport.utils :as transport.utils]
             [status-im.ui.screens.profile.components.views :as profile.components]
             [re-frame.core :as re-frame]))
 
+(defn app-info->json [app-version peers mailserver node-info node-version]
+  (js/JSON.stringify
+   (clj->js
+    {:client {:app-version app-version
+              :mailserver mailserver
+              :node-info node-info
+              :node-version node-version}
+     :peers peers})
+   nil
+   4))
+
+(defn peer-view [{:keys [enode]}]
+  (let [[enode-id ip-address port] (transport.utils/extract-url-components enode)]
+    ^{:key enode}
+    [react/touchable-highlight {:style styles/peer-view
+                                :on-press #(react/copy-to-clipboard enode)}
+     [react/view
+      [react/view
+       [react/text {:style styles/peer-text} (str "id: " enode-id)]]
+      [react/view
+       [react/text {:style styles/peer-text} (str "ip: " ip-address)]]
+      [react/view
+       [react/text {:style styles/peer-text} (str "port: " port)]]]]))
+
+(defn peers-summary-section [peers]
+  (mapv peer-view peers))
+
 (views/defview about-app []
-  (views/letsubs [app-version [:get-app-short-version]
+  (views/letsubs [app-version  [:get-app-short-version]
+                  peers        [:peers-summary]
+                  mailserver   [:mailserver/current-id]
+                  node-info    [:about-app/node-info]
                   node-version [:get-app-node-version]]
     [react/view {:flex 1}
      [status-bar/status-bar]
@@ -16,6 +48,7 @@
      [react/scroll-view
       [react/view
        [profile.components/settings-item-separator]
+
        [profile.components/settings-item
         {:label-kw            :t/privacy-policy
          :accessibility-label :privacy-policy
@@ -24,11 +57,37 @@
          [profile.components/settings-item-separator])
        [profile.components/settings-item
         {:item-text           (i18n/label :t/version {:version app-version})
+         :action-fn           #(react/copy-to-clipboard app-version)
          :accessibility-label :version
          :hide-arrow?         true}]
        (when status-im.utils.platform/ios?
          [profile.components/settings-item-separator])
        [profile.components/settings-item
         {:item-text           node-version
+         :action-fn           #(react/copy-to-clipboard node-version)
          :accessibility-label :version
-         :hide-arrow?         true}]]]]))
+         :hide-arrow?         true}]
+       [profile.components/settings-item
+        {:item-text           mailserver
+         :action-fn           #(react/copy-to-clipboard (str mailserver))
+         :accessibility-label :mailserver
+         :hide-arrow?         true}]
+       [profile.components/settings-item
+        {:item-text           (i18n/label :t/copy-info)
+         :action-fn           #(react/copy-to-clipboard
+                                (app-info->json
+                                 app-version
+                                 peers
+                                 mailserver
+                                 node-info
+                                 node-version))
+         :accessibility-label :copy-to-clipboard
+         :hide-arrow?         true}]
+
+       [react/view {:style styles/about-title}
+        [react/text {:style styles/about-title-text} (i18n/label :t/node-info)]]
+       [peer-view {:enode (:enode node-info)}]
+       [react/view {:style styles/about-title}
+        [react/text {:style styles/about-title-text} (i18n/label :t/peers)]]
+       [react/view
+        (map peer-view peers)]]]]))

src/status_im/ui/screens/db.cljs

@@ -41,6 +41,7 @@
              :wallet/all-tokens                  {}
              :prices                             {}
              :peers-count                        0
+             :node-info                          {}
              :peers-summary                      []
              :notifications                      {}
              :semaphores                         #{}
@@ -164,6 +165,7 @@
 (spec/def ::network (spec/nilable string?))
 (spec/def ::chain (spec/nilable string?))
 (spec/def ::peers-count (spec/nilable integer?))
+(spec/def ::node-info (spec/nilable map?))
 (spec/def ::peers-summary (spec/nilable vector?))
 
 (spec/def ::collectible (spec/nilable map?))
@@ -291,6 +293,7 @@
                                    ::tab-bar-visible?
                                    ::network-status
                                    ::peers-count
+                                   ::node-info
                                    ::peers-summary
                                    ::sync-state
                                    ::sync-data

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

@@ -231,6 +231,15 @@
      (i18n/label  :t/help-center)]
     [vector-icons/icon :main-icons/next {:style {:tint-color colors/gray}}]]])
 
+(defn about-app-item [open?]
+  [react/touchable-highlight {:style    (styles/adv-settings-row open?)
+                              :on-press #(re-frame/dispatch [:navigate-to (if open? :home :about-app)])}
+   [react/view {:style styles/adv-settings}
+    [react/text {:style (styles/adv-settings-row-text colors/black)
+                 :font  (if open? :medium :default)}
+     (i18n/label  :t/about-app)]
+    [vector-icons/icon :main-icons/next {:style {:tint-color colors/gray}}]]])
+
 (defn advanced-settings-item [adv-settings-open?]
   [react/touchable-highlight {:style  (styles/adv-settings-row adv-settings-open?)
                               :on-press #(do
@@ -246,6 +255,7 @@
   (views/letsubs [current-view-id [:get :view-id]
                   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)
+          about-app-open?              (= current-view-id :about-app)
           help-open?                   (= current-view-id :help-center)
           installations-open?          (= current-view-id :installations)
           backup-recovery-phrase-open? (= current-view-id :backup-recovery-phrase)
@@ -268,6 +278,7 @@
                         :on-value-change #(re-frame/dispatch [:accounts.ui/notifications-enabled (not notifications?)])}]]
         [advanced-settings-item adv-settings-open?]
         [help-item help-open?]
+        [about-app-item about-app-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}

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

@@ -5,6 +5,7 @@
             [status-im.ui.screens.desktop.main.styles :as styles]
             [status-im.ui.screens.desktop.main.chat.views :as chat.views]
             [status-im.ui.screens.desktop.main.add-new.views :as add-new.views]
+            [status-im.ui.screens.about-app.views :as about-app.views]
             [status-im.ui.screens.help-center.views :as help-center.views]
             [status-im.ui.components.desktop.tabs :as tabs]
             [status-im.ui.components.react :as react]
@@ -43,6 +44,7 @@
                       :desktop/new-group-chat add-new.views/new-group-chat
                       :qr-code profile.views/qr-code
                       :advanced-settings profile.views/advanced-settings
+                      :about-app about-app.views/about-app
                       :help-center help-center.views/help-center
                       :installations profile.views/installations
                       :chat-profile chat.views/chat-profile

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

@@ -43,6 +43,7 @@
                        :desktop/new-group-chat
                        :desktop/new-public-chat
                        :advanced-settings
+                       :about-app
                        :help-center
                        :installations
                        :chat

src/status_im/ui/screens/subs.cljs

@@ -51,6 +51,8 @@
 (reg-sub :sync-state :sync-state)
 (reg-sub :network-status :network-status)
 (reg-sub :peers-count :peers-count)
+(reg-sub :about-app/node-info :node-info)
+(reg-sub :peers-summary :peers-summary)
 (reg-sub :node-status :node/status)
 
 (reg-sub :disconnected?

translations/en.json

@@ -144,6 +144,9 @@
     "dapps": "ÐApps",
     "ropsten-network": "Ropsten test network",
     "bootnode-details": "Bootnode details",
+    "node-info": "Node info",
+    "copy-info": "Copy info",
+    "peers": "Peers",
     "popular-tags": "Popular #hashtags",
     "invite-friends": "Invite friends",
     "network-settings": "Network settings",
@@ -386,6 +389,7 @@
     "reset-default": "Reset to default",
     "search-for": "Search for...",
     "test-networks": "Test networks",
+    "copy-to-clipboard": "Copy to clipboard",
     "sharing-copy-to-clipboard": "Copy to clipboard",
     "your-wallets": "Your wallets",
     "phone-international": "International 2",