[#4380] Improve browser security warning

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

resources/icons/lock.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#6E777E" d="M5,8 L5,6.25641026 C5,4.47325715 6.32593143,3 8,3 C9.67406857,3 11,4.47325715 11,6.25641026 L11,8 L11.5,8 C12.3284271,8 13,8.67157288 13,9.5 L13,12.5 C13,13.3284271 12.3284271,14 11.5,14 L4.5,14 C3.67157288,14 3,13.3284271 3,12.5 L3,9.5 C3,8.67157288 3.67157288,8 4.5,8 L5,8 Z M6.38461538,8 L9.61538462,8 L9.61538462,6.25641026 C9.61538462,5.20733388 8.87493797,4.38461538 8,4.38461538 C7.12506203,4.38461538 6.38461538,5.20733388 6.38461538,6.25641026 L6.38461538,8 Z" id="shape"></path>
+  <path fill="" d="M5,8 L5,6.25641026 C5,4.47325715 6.32593143,3 8,3 C9.67406857,3 11,4.47325715 11,6.25641026 L11,8 L11.5,8 C12.3284271,8 13,8.67157288 13,9.5 L13,12.5 C13,13.3284271 12.3284271,14 11.5,14 L4.5,14 C3.67157288,14 3,13.3284271 3,12.5 L3,9.5 C3,8.67157288 3.67157288,8 4.5,8 L5,8 Z M6.38461538,8 L9.61538462,8 L9.61538462,6.25641026 C9.61538462,5.20733388 8.87493797,4.38461538 8,4.38461538 C7.12506203,4.38461538 6.38461538,5.20733388 6.38461538,6.25641026 L6.38461538,8 Z" id="shape"></path>
 </svg>

resources/icons/lock_opened.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill-rule="evenodd">
+    <path d="M5 8L5 6.25641026C5 4.47325715 6.32593143 3 8 3 9.67406857 3 11 4.47325715 11 6.25641026L11 8 5 8zM6.39959641 6C6.50856018 5.07632579 7.19774249 4.38461538 8 4.38461538 8.87493797 4.38461538 9.61538462 5.20733388 9.61538462 6.25641026L9.61538462 8 6.38461538 8 5 8 5 6 6.39959641 6zM5 8L11 8 11.5 8C12.3284271 8 13 8.67157288 13 9.5L13 12.5C13 13.3284271 12.3284271 14 11.5 14L4.5 14C3.67157288 14 3 13.3284271 3 12.5L3 9.5C3 8.67157288 3.67157288 8 4.5 8L5 8z"/>
+  </g>
+</svg>

src/status_im/models/browser.cljs

@@ -2,7 +2,9 @@
   (:require [status-im.data-store.browser :as browser-store]
             [status-im.data-store.dapp-permissions :as dapp-permissions]
             [status-im.i18n :as i18n]
-            [status-im.constants :as constants]))
+            [status-im.constants :as constants]
+            [status-im.ui.screens.browser.default-dapps :as default-dapps]
+            [status-im.utils.http :as http]))
 
 (defn get-current-url [{:keys [history history-index]}]
   (when (and history-index history)
@@ -14,8 +16,15 @@
 (defn can-go-forward? [{:keys [history-index history]}]
   (< history-index (dec (count history))))
 
+(defn check-if-dapp-in-list [{:keys [history history-index] :as browser}]
+  (let [history-host  (http/url-host (try (nth history history-index) (catch js/Error _)))
+        dapp (first (filter #(= history-host (http/url-host (:dapp-url %))) (apply concat (mapv :data default-dapps/all))))]
+    (if dapp
+      (assoc browser :dapp? true :name (:name dapp))
+      (assoc browser :dapp? false :name (i18n/label :t/browser)))))
+
 (defn update-browser-fx [{:keys [db now]} browser]
-  (let [updated-browser (assoc browser :timestamp now)]
+  (let [updated-browser (check-if-dapp-in-list (assoc browser :timestamp now))]
     {:db            (update-in db [:browser/browsers (:browser-id updated-browser)]
                                merge updated-browser)
      :data-store/tx [(browser-store/save-browser-tx updated-browser)]}))

src/status_im/translations/en.cljs

@@ -700,7 +700,8 @@
    :dapp                                 "ÐApp"
    :selected                             "Selected"
    :selected-dapps                       "Selected ÐApps"
-   :browser-warning                      "Connection is not proven secure. Make sure you trust this site before signing transactions or entering personal data."
+   :browser-secure                       "Connection is secure. Make sure you really trust this site before signing transactions or entering personal data."
+   :browser-not-secure                   "Connection is not secure! Do not sign transactions or send personal data on this site."
    :make-sure-you-trust-dapp             "Make sure that you trust this DApp"
    :would-like-to-access                 "Would like to Access"
    :your-contact-code                    "Your Contact Code"})

src/status_im/ui/components/icons/vector_icons.cljs

@@ -126,6 +126,7 @@
      :icons/hidden              (components.svg/slurp-svg "./resources/icons/hidden.svg")
      :icons/in-contacts         (components.svg/slurp-svg "./resources/icons/in_contacts.svg")
      :icons/lock                (components.svg/slurp-svg "./resources/icons/lock.svg")
+     :icons/lock-opened         (components.svg/slurp-svg "./resources/icons/lock_opened.svg")
      :icons/mic                 (components.svg/slurp-svg "./resources/icons/mic.svg")
      :icons/ok                  (components.svg/slurp-svg "./resources/icons/ok.svg")
      :icons/public              (components.svg/slurp-svg "./resources/icons/public.svg")

src/status_im/ui/components/tooltip/views.cljs

@@ -18,12 +18,10 @@
        [react/text {:style (styles/tooltip-text font-size)} label]]
       [vector-icons/icon :icons/tooltip-triangle {:color color :style styles/tooltip-triangle}]]]))
 
-(views/defview bottom-tooltip-info [label]
+(views/defview bottom-tooltip-info [label on-close]
-  (views/letsubs [opened?           (reagent/atom true)
+  (views/letsubs [bottom-anim-value (animation/create-value -150)
-                  bottom-anim-value (animation/create-value -150)
                   opacity-value     (animation/create-value 0)]
     {:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)}
-    (when @opened?
     [react/view styles/bottom-tooltip-container
      [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)}
       [vector-icons/icon :icons/tooltip-triangle {:color           colors/gray-notifications
@@ -31,6 +29,6 @@
                                                   :container-style {:transform [{:rotate "180deg"}]}}]
       [react/view styles/bottom-tooltip-text-container
        [react/text {:style styles/bottom-tooltip-text} label]
-         [react/touchable-highlight {:on-press #(reset! opened? false)
+       [react/touchable-highlight {:on-press on-close
                                    :style    styles/close-icon}
-          [vector-icons/icon :icons/close {:color colors/white}]]]]])))
+        [vector-icons/icon :icons/close {:color colors/white}]]]]]))

src/status_im/ui/screens/add_new/open_dapp/views.cljs

@@ -64,7 +64,7 @@
                                     :accessibility-label :open-dapp-button
                                     :on-press            #(do
                                                             (re-frame/dispatch [:navigate-to-clean :home])
-                                                            (re-frame/dispatch [:open-dapp-in-browser dapp]))}]
+                                                            (re-frame/dispatch [:open-url-in-browser dapp-url]))}]
       [components/separator {:margin-left 72}]]
      [react/view styles/description-container
       [react/i18n-text {:style styles/gray-label :key :description}]

src/status_im/ui/screens/browser/db.cljs

@@ -10,11 +10,15 @@
 (spec/def :browser/history (spec/nilable vector?))
 (spec/def :browser/history-index (spec/nilable int?))
 (spec/def :browser/loading? (spec/nilable boolean?))
+(spec/def :browser/url-editing? (spec/nilable boolean?))
+(spec/def :browser/show-tooltip (spec/nilable keyword?))
 
 (spec/def :browser/options
   (allowed-keys
    :opt-un [:browser/browser-id
             :browser/loading?
+            :browser/url-editing?
+            :browser/show-tooltip
             :browser/error?]))
 
 (spec/def :browser/browser

src/status_im/ui/screens/browser/default_dapps.cljs

@@ -1,4 +1,4 @@
-(ns status-im.ui.screens.contacts.default-dapps)
+(ns status-im.ui.screens.browser.default-dapps)
 
 (def all
   [{:title "Exchanges"
@@ -94,11 +94,11 @@
             :description "The Beautiful (card) Game"}]}
    {:title "Social Networks"
     :data [{:name        "Cent"
-            :dapp-url    "https://beta.cent.co"
+            :dapp-url    "https://beta.cent.co/"
             :photo-path  "contacts://cent"
             :description "Get wisdom, get money"}
            {:name        "Peepeth"
-            :dapp-url    "http://peepeth.com/"
+            :dapp-url    "https://peepeth.com/"
             :photo-path  "contacts://peepeth"
             :description "Blockchain-powered microblogging"}
            {:name        "Purrbook"
@@ -124,6 +124,6 @@
             :developer?   true}]}
    {:title "Other: Media"
     :data [{:name        "LivePeer"
-            :dapp-url    "http://livepeer.tv"
+            :dapp-url    "https://media.livepeer.org/"
             :photo-path  "contacts://livepeer"
             :description "Decentralized video broadcasting"}]}])

src/status_im/ui/screens/browser/events.cljs

@@ -58,29 +58,14 @@
  (fn [_ [_ link]]
    {:browse link}))
 
-(handlers/register-handler-fx
- :open-dapp-in-browser
- [re-frame/trim-v]
- (fn [cofx [{:keys [name dapp-url]}]]
-   (let [browser {:browser-id    name
-                  :name          name
-                  :dapp?         true
-                  :history-index 0
-                  :history       [(http/normalize-and-decode-url dapp-url)]}]
-     (model/update-browser-and-navigate cofx browser))))
-
 (handlers/register-handler-fx
  :open-url-in-browser
  [re-frame/trim-v]
  (fn [cofx [url]]
-   (let [normalized-url          (http/normalize-and-decode-url url)
+   (let [normalized-url (http/normalize-and-decode-url url)]
-         browser {:browser-id    (or (http/url-host normalized-url)
+     (model/update-browser-and-navigate cofx {:browser-id    (or (http/url-host normalized-url) (random/id))
-                                     ;; purely as a fallback should url not parse...
-                                     (random/id))
-                  :name          (i18n/label :t/browser)
                                               :history-index 0
-                  :history       [normalized-url]}]
+                                              :history       [normalized-url]}))))
-     (model/update-browser-and-navigate cofx browser))))
 
 (handlers/register-handler-fx
  :open-browser

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

@@ -65,18 +65,20 @@
    :height             36
    :background-color   colors/gray-lighter
    :padding-horizontal 12
-   :android            {:align-items    :flex-start
+   :margin-right       5
-                        :margin-left    (if show-actions 66 20)
+   :align-items        :center
-                        :padding-bottom 6}
+   :android            {:margin-left (if show-actions 66 20)}
-   :ios                {:align-items       :center
+   :ios                {:margin-left 20}})
-                        :margin-horizontal 15}})
 
 (defstyle url-input
   {:flex              1
    :font-size         14
    :letter-spacing    -0.2
+   :margin-horizontal 5
    :android           {:padding 0}})
 
-(def toolbar-content-dapp
+(def url-text
-  {:flex-direction    :row
+  {:font-size         14
-   :margin-horizontal 15})
+   :letter-spacing    -0.2
+   :margin-horizontal 5})
+

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

@@ -11,7 +11,6 @@
             [status-im.utils.js-resources :as js-res]
             [status-im.ui.components.react :as components]
             [reagent.core :as reagent]
-            [status-im.ui.components.chat-icon.screen :as chat-icon.screen]
             [status-im.ui.components.icons.vector-icons :as icons]
             [status-im.i18n :as i18n]
             [status-im.utils.ethereum.core :as ethereum]
@@ -19,39 +18,42 @@
             [status-im.ui.components.tooltip.views :as tooltip]
             [status-im.models.browser :as model]
             [status-im.utils.http :as http]
-            [status-im.ui.components.styles :as components.styles]))
+            [status-im.ui.components.styles :as components.styles]
-
+            [status-im.ui.components.colors :as colors]
-(views/defview toolbar-content-dapp [name]
+            [clojure.string :as string]))
-  (views/letsubs [dapp [:get-dapp-by-name name]]
-    [react/view
-     [react/view styles/toolbar-content-dapp
-      [chat-icon.screen/dapp-icon-browser dapp 36]
-      [react/view styles/dapp-name
-       [react/text {:style               styles/dapp-name-text
-                    :number-of-lines     1
-                    :font                :toolbar-title
-                    :accessibility-label :dapp-name-text}
-        name]
-       [react/i18n-text {:style styles/dapp-text :key :dapp}]]]]))
 
 (def browser-config
   (reader/read-string (slurp "./src/status_im/utils/browser_config.edn")))
 
-(defn toolbar-content [url browser]
+(defn toolbar-content [url {:keys [dapp? history history-index] :as browser} error? url-editing?]
-  (let [url-text (atom url)]
+  (let [url-text    (atom url)
+        history-url (try (nth history history-index) (catch js/Error _))
+        secure?     (or dapp? (and (not error?) (string/starts-with? history-url "https://")))]
     [react/view
      [react/view (styles/toolbar-content false)
+      [react/touchable-highlight {:on-press #(re-frame/dispatch [:update-browser-options
+                                                                 {:show-tooltip (if secure? :secure :not-secure)}])}
+       (if secure?
+         [icons/icon :icons/lock {:color colors/green}]
+         [icons/icon :icons/lock-opened])]
+      (if url-editing?
         [react/text-input {:on-change-text    #(reset! url-text %)
-                         :on-submit-editing #(re-frame/dispatch [:update-browser-on-nav-change
+                           :on-blur           #(re-frame/dispatch [:update-browser-options {:url-editing? false}])
+                           :on-submit-editing #(do
+                                                 (re-frame/dispatch [:update-browser-options {:url-editing? false}])
+                                                 (re-frame/dispatch [:update-browser-on-nav-change
                                                                      browser
                                                                      (http/normalize-and-decode-url @url-text)
-                                                                 false])
+                                                                     false]))
-                         :auto-focus        (not url)
                            :placeholder       (i18n/label :t/enter-url)
                            :auto-capitalize   :none
                            :auto-correct      false
+                           :auto-focus        true
                            :default-value     url
-                         :style             styles/url-input}]]]))
+                           :ellipsize         :end
+                           :style             styles/url-input}]
+        [react/touchable-highlight {:style {:flex 1} :on-press #(re-frame/dispatch [:update-browser-options {:url-editing? true}])}
+         [react/text {:style styles/url-text} (http/url-host url)]])]]))
 
 (defn- web-view-error [_ code desc]
   (reagent/as-element
@@ -75,8 +77,8 @@
 (views/defview browser []
   (views/letsubs [webview    (atom nil)
                   {:keys [address]} [:get-current-account]
-                  {:keys [dapp? browser-id name] :as browser} [:get-current-browser]
+                  {:keys [browser-id] :as browser} [:get-current-browser]
-                  {:keys [error? loading?]} [:get :browser/options]
+                  {:keys [error? loading? url-editing? show-tooltip]} [:get :browser/options]
                   rpc-url    [:get :rpc-url]
                   network-id [:get-network-id]]
     (let [can-go-back?    (model/can-go-back? browser)
@@ -92,9 +94,7 @@
                           (re-frame/dispatch [:navigate-back])
                           (when error?
                             (re-frame/dispatch [:remove-browser browser-id]))))]
-        (if dapp?
+        [toolbar-content url browser error? url-editing?]
-          [toolbar-content-dapp name]
-          [toolbar-content url browser])
         [toolbar.view/actions [{:icon      :icons/wallet
                                 :icon-opts {:color :black}
                                 :handler   #(re-frame/dispatch [:navigate-to-modal :wallet-modal])}]]]
@@ -142,6 +142,9 @@
         [react/view {:flex 1}]
         [react/touchable-highlight {:on-press #(.reload @webview)}
          [icons/icon :icons/refresh]]]
-       (when-not dapp?
+       (when show-tooltip
          [tooltip/bottom-tooltip-info
-          (i18n/label :t/browser-warning)])])))
+          (if (= show-tooltip :secure)
+            (i18n/label :t/browser-secure)
+            (i18n/label :t/browser-not-secure))
+          #(re-frame/dispatch [:update-browser-options {:show-tooltip nil}])])])))

src/status_im/ui/screens/contacts/events.cljs

@@ -2,7 +2,7 @@
   (:require [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
             [status-im.ui.screens.add-new.new-chat.db :as new-chat.db]
-            [status-im.ui.screens.contacts.default-dapps :as default-dapps]
+            [status-im.ui.screens.browser.default-dapps :as default-dapps]
             [status-im.utils.handlers :as handlers]
             [status-im.utils.handlers-macro :as handlers-macro]
             [status-im.utils.js-resources :as js-res]

src/status_im/utils/http.cljs

@@ -71,7 +71,7 @@
   (try
     (when-let [host (.getDomain (goog.Uri. url))]
       (when-not (string/blank? host)
-        host))
+        (string/replace host #"www." "")))
     (catch :default _ nil)))
 
 (defn parse-payload [o]

test/cljs/status_im/test/browser/events.cljs

@@ -43,16 +43,14 @@
    (re-frame/dispatch [:initialize-browsers])
 
    (let [browsers  (re-frame/subscribe [:browsers])
-         dapp1-url "test.com"
+         dapp1-url "cryptokitties.co"
          dapp2-url "http://test2.com"]
 
      (testing "open and remove dapps"
 
        (is (zero? (count @browsers)))
 
-       (re-frame/dispatch [:open-dapp-in-browser {:name        "Test Dapp"
+       (re-frame/dispatch [:open-url-in-browser dapp1-url])
-                                                  :dapp-url    dapp1-url
-                                                  :description "Test description"}])
 
        (is (= 1 (count @browsers)))
 
@@ -69,7 +67,7 @@
          (is (and (= [(str "http://" dapp1-url) (:history browser1)])
                   (= [dapp2-url] (:history browser2)))))
 
-       (re-frame/dispatch [:remove-browser "Test Dapp"])
+       (re-frame/dispatch [:remove-browser dapp1-url])
 
        (is (= 1 (count @browsers))))