[#11469] Browser bookmarks

src/quo/previews/icons.cljs

@@ -0,0 +1,13 @@
+(ns quo.previews.icons
+  (:require [quo.design-system.colors :as colors]
+            [quo.react-native :as rn]
+            [status-im.ui.components.icons.icons :as icons]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]))
+
+(defn preview []
+  [rn/scroll-view {:background-color (:ui-background @colors/theme)
+                   :flex             1}
+   (for [i (keys icons/icons)]
+     [rn/view {:flex-direction :row}
+      [vector-icons/icon (keyword i)]
+      [rn/text i]])])

src/quo/previews/main.cljs

@@ -12,7 +12,8 @@
             [reagent.core :as reagent]
             [quo.design-system.colors :as colors]
             [quo.theme :as theme]
-            [status-im.ui.screens.routing.core :as navigation]))
+            [status-im.ui.screens.routing.core :as navigation]
+            [quo.previews.icons :as icons]))
 
 (def screens [{:name      :texts
                :insets    {:top false}
@@ -37,7 +38,10 @@
                :component bottom-sheet/preview}
               {:name      :controls
                :insets    {:top false}
-               :component controls/preview}])
+               :component controls/preview}
+              {:name      :icons
+               :insets    {:top false}
+               :component icons/preview}])
 
 (defn theme-switcher []
   [rn/view {:style {:flex-direction   :row

src/status_im/browser/core.cljs

@@ -24,7 +24,8 @@
             [status-im.multiaccounts.update.core :as multiaccounts.update]
             [status-im.ui.components.bottom-sheet.core :as bottom-sheet]
             [status-im.browser.webview-ref :as webview-ref]
-            ["eth-phishing-detect" :as eth-phishing-detect]))
+            ["eth-phishing-detect" :as eth-phishing-detect]
+            [status-im.utils.debounce :as debounce]))
 
 (fx/defn update-browser-option
   [{:keys [db]} option-key option-value]
@@ -114,9 +115,9 @@
                                        :cb       resolve-ens-contenthash-callback}}))
 
 (fx/defn update-browser
-  [{:keys [db now]}
+  [{:keys [db]}
    {:keys [browser-id] :as browser}]
-  (let [updated-browser (-> (assoc browser :timestamp now)
+  (let [updated-browser (-> browser
                             (update-dapp-name)
                             (check-if-phishing-url))]
     {:db            (update-in db
@@ -126,6 +127,35 @@
                        :params [(select-keys updated-browser [:browser-id :timestamp :name :dapp? :history :history-index])]
                        :on-success #()}]}))
 
+(fx/defn store-bookmark
+  {:events [:browser/store-bookmark]}
+  [{:keys [db]}
+   {:keys [url] :as bookmark}]
+  {:db            (assoc-in db [:bookmarks/bookmarks url] bookmark)
+   ::json-rpc/call [{:method "browsers_storeBookmark"
+                     :params [bookmark]
+                     :on-success #()}]})
+
+(fx/defn update-bookmark
+  {:events [:browser/update-bookmark]}
+  [{:keys [db]}
+   {:keys [url] :as bookmark}]
+  {:db            (update-in db
+                             [:bookmarks/bookmarks url]
+                             merge bookmark)
+   ::json-rpc/call [{:method "browsers_updateBookmark"
+                     :params [url bookmark]
+                     :on-success #()}]})
+
+(fx/defn delete-bookmark
+  {:events [:browser/delete-bookmark]}
+  [{:keys [db]}
+   url]
+  {:db            (update db :bookmarks/bookmarks dissoc url)
+   ::json-rpc/call [{:method "browsers_deleteBookmark"
+                     :params [url]
+                     :on-success #()}]})
+
 (defn can-go-back? [{:keys [history-index]}]
   (pos? history-index))
 
@@ -221,7 +251,7 @@
   (let [browser (get-current-browser (:db cofx))
         options (get-in cofx [:db :browser/options])
         current-url (:url options)]
-    (when (and (not= "about:blank" url) (not= current-url url) (not= (str current-url "/") url))
+    (when (and (not (string/blank? url)) (not= "about:blank" url) (not= current-url url) (not= (str current-url "/") url))
       (let [resolved-ens (first (filter (fn [v]
                                           (not= (.indexOf ^js url (second v)) -1))
                                         (:resolved-ens options)))
@@ -417,21 +447,6 @@
       (= type constants/api-request)
       (browser.permissions/process-permission cofx dapp-name permission messageId params))))
 
-(defn filter-letters-numbers-and-replace-dot-on-dash
-  [^js value]
-  (let [cc (.charCodeAt value 0)]
-    (cond (or (and (> cc 96) (< cc 123))
-              (and (> cc 64) (< cc 91))
-              (and (> cc 47) (< cc 58)))
-          value
-          (= cc 46)
-          "-")))
-
-(fx/defn open-chat-from-browser
-  [cofx host]
-  (let [topic (string/lower-case (apply str (map filter-letters-numbers-and-replace-dot-on-dash host)))]
-    {:dispatch [:chat.ui/start-public-chat topic nil]}))
-
 (re-frame/reg-fx
  :browser/resolve-ens-content
  (fn [{:keys [registry ens-name cb]}]
@@ -495,3 +510,9 @@
             #(when (= (:view-id db) :browser)
                (merge (navigation/navigate-back %)
                       {:dispatch [:browser.ui/browser-item-selected (get-in db [:browser/options :browser-id])]}))))
+
+(fx/defn open-empty-tab
+  {:events [:browser.ui/open-empty-tab]}
+  [cofx]
+  (debounce/clear :browser/navigation-state-changed)
+  (navigation/navigate-to-cofx cofx :empty-tab nil))

src/status_im/browser/core_test.cljs

@@ -33,8 +33,7 @@
                                          :history-index 0
                                          :history ["https://cryptokitties.co"]
                                          :dapp? false
-                                         :name "Browser"
-                                         :timestamp 1}))
+                                         :name "Browser"}))
             "some properties of the browser are not correct")
 
         (testing "then a second dapp"
@@ -49,8 +48,7 @@
                                             {:browser-id dapp2-id
                                              :history-index 0
                                              :history ["http://test2.com"]
-                                             :dapp? false
-                                             :timestamp 2}))
+                                             :dapp? false}))
                 "some properties of the browser are not correct")
 
             (testing "then removes the second dapp"
@@ -70,8 +68,7 @@
                                              :history-index 0
                                              :history ["https://cryptokitties.co"]
                                              :dapp? false
-                                             :name "Browser"
-                                             :timestamp 2}))
+                                             :name "Browser"}))
                 "some properties of the browser are not correct")
             (is (nil? (browser/navigate-to-next-page result-open-existing))
                 "nothing should happen if user tries to navigate to next page")
@@ -91,8 +88,7 @@
                                                  :history-index 1
                                                  :history ["https://cryptokitties.co" dapp1-url2]
                                                  :dapp? false
-                                                 :name "Browser"
-                                                 :timestamp 4}))
+                                                 :name "Browser"}))
                     "some properties of the browser are not correct")
 
                 (testing "then navigates to previous page"
@@ -104,8 +100,7 @@
                                                      :history-index 0
                                                      :history ["https://cryptokitties.co" dapp1-url2]
                                                      :dapp? false
-                                                     :name "Browser"
-                                                     :timestamp 5}))
+                                                     :name "Browser"}))
                         "some properties of the browser are not correct")
 
                     (testing "then navigates to next page")
@@ -117,6 +112,5 @@
                                                        :history-index 1
                                                        :history ["https://cryptokitties.co" dapp1-url2]
                                                        :dapp? false
-                                                       :name "Browser"
-                                                       :timestamp 6}))
+                                                       :name "Browser"}))
                           "some properties of the browser are not correct"))))))))))))

src/status_im/browser/permissions.cljs

@@ -70,13 +70,19 @@
                        :params [allowed-permissions]
                        :on-success #()}]}))
 
-(fx/defn revoke-dapp-permissions
+(fx/defn revoke-permissions
+  {:events [:browser/revoke-dapp-permissions]}
   [{:keys [db] :as cofx} dapp]
   (fx/merge cofx
-            {:db            (update-in db [:dapps/permissions] dissoc dapp)
+            {:db             (update-in db [:dapps/permissions] dissoc dapp)
              ::json-rpc/call [{:method "permissions_deleteDappPermissions"
                                :params [dapp]
-                               :on-success #()}]}
+                               :on-success #()}]}))
+
+(fx/defn revoke-dapp-permissions
+  [cofx dapp]
+  (fx/merge cofx
+            (revoke-permissions dapp)
             (navigation/navigate-back)))
 
 (fx/defn clear-dapps-permissions

src/status_im/ethereum/json_rpc.cljs

@@ -127,6 +127,10 @@
    "browsers_getBrowsers" {}
    "browsers_addBrowser" {}
    "browsers_deleteBrowser" {}
+   "browsers_getBookmarks" {}
+   "browsers_storeBookmark" {}
+   "browsers_updateBookmark" {}
+   "browsers_deleteBookmark" {}
    "mailservers_getMailserverRequestGaps" {}
    "mailservers_addMailserverRequestGaps" {}
    "mailservers_deleteMailserverRequestGaps" {}

src/status_im/events.cljs

@@ -724,11 +724,6 @@
  (fn [cofx [_ url]]
    (browser/open-url cofx url)))
 
-(handlers/register-handler-fx
- :browser.ui/open-modal-chat-button-pressed
- (fn [cofx [_ host]]
-   (browser/open-chat-from-browser cofx host)))
-
 (handlers/register-handler-fx
  :dapps/revoke-access
  (fn [cofx [_ dapp]]

src/status_im/multiaccounts/login/core.cljs

@@ -115,6 +115,15 @@
                          all-stored-browsers)]
     {:db (assoc db :browser/browsers browsers)}))
 
+(fx/defn initialize-bookmarks
+  {:events [::initialize-bookmarks]}
+  [{:keys [db]} stored-bookmarks]
+  (let [bookmarks (reduce (fn [acc {:keys [url] :as bookmark}]
+                            (assoc acc url bookmark))
+                          {}
+                          stored-bookmarks)]
+    {:db (assoc db :bookmarks/bookmarks bookmarks)}))
+
 (fx/defn initialize-invitations
   {:events [::initialize-invitations]}
   [{:keys [db]} invitations]
@@ -245,6 +254,8 @@
                  :on-success #(re-frame/dispatch [::protocol/initialize-protocol {:mailserver-ranges (or % {})}])}
                 {:method     "browsers_getBrowsers"
                  :on-success #(re-frame/dispatch [::initialize-browsers %])}
+                {:method     "browsers_getBookmarks"
+                 :on-success #(re-frame/dispatch [::initialize-bookmarks %])}
                 {:method     "permissions_getDappPermissions"
                  :on-success #(re-frame/dispatch [::initialize-dapp-permissions %])}
                 {:method     "mailservers_getMailservers"

src/status_im/subs.cljs

@@ -130,6 +130,7 @@
 (reg-root-key-sub :browsers :browser/browsers)
 (reg-root-key-sub :browser/options :browser/options)
 (reg-root-key-sub :dapps/permissions :dapps/permissions)
+(reg-root-key-sub :bookmarks :bookmarks/bookmarks)
 
 ;;stickers
 (reg-root-key-sub :stickers/selected-pack :stickers/selected-pack)
@@ -1033,7 +1034,7 @@
  :browser/browsers-vals
  :<- [:browser/browsers]
  (fn [browsers]
-   (sort-by :timestamp > (vals browsers))))
+   (vals browsers)))
 
 (re-frame/reg-sub
  :get-current-browser

src/status_im/ui/components/connectivity/view.cljs

@@ -64,7 +64,8 @@
                          :top              -3
                          :z-index          3
                          :height           3
-                         :background-color colors/white}}
+                         :background-color colors/white}
+                 :accessibility-label :loading-indicator}
      [react/animated-view {:style (animated-bar-style blue-bar-left-margin
                                                       parent-width
                                                       colors/blue)}]

src/status_im/ui/components/tabbar/core.cljs

@@ -18,7 +18,7 @@
 (defn main-tab? [view-id]
   (contains?
    #{:chat-stack :browser-stack :wallet-stack :profile-stack :status-stack
-     :status :home :wallet :open-dapp :my-profile :wallet-onboarding-setup}
+     :status :home :wallet :empty-tab :my-profile :wallet-onboarding-setup}
    view-id))
 
 (def tabs-list-data

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

@@ -0,0 +1,49 @@
+(ns status-im.ui.screens.browser.bookmarks.views
+  (:require [status-im.ui.components.keyboard-avoid-presentation :as kb-presentation]
+            [status-im.ui.components.react :as react]
+            [status-im.ui.components.topbar :as topbar]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.toolbar :as toolbar]
+            [quo.core :as quo]
+            [status-im.ui.components.colors :as colors]
+            [reagent.core :as reagent]
+            [clojure.string :as string]
+            [re-frame.core :as re-frame]))
+
+(defn screen [{:keys [url name new]}]
+  (let [input-name (reagent/atom name)]
+    (fn []
+      (let [edit? (not new)]
+        [kb-presentation/keyboard-avoiding-view {:style {:flex 1}}
+         [react/view {:flex 1}
+          [topbar/topbar
+           {:modal?        true
+            :border-bottom true
+            :title         (if edit? (i18n/label :t/edit-favourite) (i18n/label :t/new-favourite))}]
+          [react/view {:style {:flex 1}}
+           [quo/text-input
+            {:container-style     {:margin 16 :margin-top 10}
+             :accessibility-label :bookmark-input
+             :max-length          100
+             :auto-focus          true
+             :show-cancel         false
+             :label               (i18n/label :t/name)
+             :default-value       name
+             :on-change-text      #(reset! input-name %)}]
+           [react/text {:style {:margin 16 :color colors/gray}}
+            url]]
+          [toolbar/toolbar
+           {:show-border? true
+            :center
+            [quo/button
+             {:accessibility-label :save-bookmark
+              :type                :secondary
+              :disabled            (string/blank? @input-name)
+              :on-press            #(do (if edit?
+                                          (re-frame/dispatch [:browser/update-bookmark {:url url :name @input-name}])
+                                          (re-frame/dispatch [:browser/store-bookmark {:url url :name @input-name}]))
+                                        (re-frame/dispatch [:navigate-back]))}
+             (if edit? (i18n/label :t/save) (i18n/label :t/add-favourite))]}]]]))))
+
+(defn new-bookmark []
+  [screen @(re-frame/subscribe [:get-screen-params])])

src/status_im/ui/screens/browser/open_dapp/styles.cljs → src/status_im/ui/screens/browser/empty_tab/styles.cljs

@@ -1,17 +1,13 @@
-(ns status-im.ui.screens.browser.open-dapp.styles
-  (:require [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.styles :as components.styles]
-            [status-im.utils.styles :as styles]))
+(ns status-im.ui.screens.browser.empty-tab.styles
+  (:require [status-im.ui.components.colors :as colors]))
 
-(styles/defn input []
-  {:border-radius      components.styles/border-radius
-   :background-color   colors/gray-lighter
-   :margin-horizontal  16
-   :margin-bottom      9
-   :margin-top         24
-   :height             36
-   :padding-horizontal 14
-   :android            {:padding 0}})
+(def input
+  {:height  36
+   :padding 0})
+
+(def input-container-style
+  {:margin-horizontal 16
+   :margin-vertical   10})
 
 (defn browser-icon-container []
   {:width            40
@@ -24,7 +20,7 @@
 (defn dapp-store-container []
   {:margin             16
    :border-color       colors/gray-lighter
-   :margin-top         8
+   :margin-top         18
    :border-width       1
    :border-radius      12
    :padding-vertical   16