topbar. first iteration

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

fiddle/deps.edn

@@ -10,7 +10,6 @@
            com.taoensso/encore         {:mvn/version "2.94.0"}
            hickory                     {:mvn/version "0.7.1"}
            com.cognitect/transit-cljs  {:mvn/version "0.8.248"}
-           status-im/pluto             {:mvn/version "iteration-4-9"}
            cljs-bean                   {:mvn/version "1.3.0"}}
 
  :paths   ["src" "../src" "resources" "target" "../resources"]

fiddle/src/fiddle/views/main.cljs

@@ -9,6 +9,7 @@
             [fiddle.views.list-items :as list-items]
             [fiddle.views.ui :as ui]
             [fiddle.views.toolbar :as toolbar]
+            [fiddle.views.topbar :as topbar]
             [re-frame.core :as re-frame]))
 
 (defn btn [id label view-id]
@@ -44,7 +45,8 @@
        :screens [screens/screens]
        :typography [typography/typography]
        :list-items [list-items/list-items]
-       :toolbar [toolbar/toolbar]
+       :toolbar [toolbar/toolbar-view]
+       :top-bar [topbar/topbar-view]
        :list-header [list-items/list-header]
        :ui [ui/ui]
        [react/text "TODO"])]))

fiddle/src/fiddle/views/toolbar.cljs

@@ -1,13 +1,13 @@
 (ns fiddle.views.toolbar
   (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar :as toolbar-comp]
+            [status-im.ui.components.toolbar :as toolbar]
             [status-im.ui.components.colors :as colors]
             cljs.pprint
             [reagent.core :as reagent]
             [status-im.ui.components.button :as button])
   (:require-macros [fiddle.snippets :as snippets]))
 
-(defn toolbar []
+(defn toolbar-view []
   [react/view
    {:background-color colors/gray-lighter
     :flex             1
@@ -16,14 +16,14 @@
     :flex-wrap        :wrap}
    [react/view {:width 375}
     [react/view {:background-color :white :margin 10}
-     (snippets/code-snippet [toolbar-comp/toolbar {:center {:type :secondary :label "Label"}}])]
+     (snippets/code-snippet [toolbar/toolbar {:center {:type :secondary :label "Label"}}])]
     [react/view {:background-color :white :margin 10}
-     (snippets/code-snippet [toolbar-comp/toolbar {:left {:type :previous :label "Label"} :right {:type :next :label "Label"}}])]
+     (snippets/code-snippet [toolbar/toolbar {:left {:type :previous :label "Label"} :right {:type :next :label "Label"}}])]
     [react/view {:background-color :white :margin 10}
-     (snippets/code-snippet [toolbar-comp/toolbar {:left {:type :secondary :label "Label"} :right {:label "Label"}}])]
+     (snippets/code-snippet [toolbar/toolbar {:left {:type :secondary :label "Label"} :right {:label "Label"}}])]
     [react/view {:background-color :white :margin 10}
-     (snippets/code-snippet [toolbar-comp/toolbar {:left {:type :previous :label "Label"}}])]
+     (snippets/code-snippet [toolbar/toolbar {:left {:type :previous :label "Label"}}])]
     [react/view {:background-color :white :margin 10}
-     (snippets/code-snippet [toolbar-comp/toolbar {:right {:type :next :label "Label"}}])]
+     (snippets/code-snippet [toolbar/toolbar {:right {:type :next :label "Label"}}])]
     [react/view {:background-color :white :margin 10}
-     (snippets/code-snippet [toolbar-comp/toolbar {:center {:label "Label"}}])]]])
+     (snippets/code-snippet [toolbar/toolbar {:center {:label "Label"}}])]]])

fiddle/src/fiddle/views/topbar.cljs

@@ -0,0 +1,33 @@
+(ns fiddle.views.topbar
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.components.topbar :as topbar]
+            [status-im.ui.components.colors :as colors]
+            cljs.pprint
+            [reagent.core :as reagent])
+  (:require-macros [fiddle.snippets :as snippets]))
+
+(defn topbar-view []
+  [react/view
+   {:background-color colors/gray-lighter
+    :flex             1
+    :padding          20
+    :flex-direction   :row
+    :flex-wrap        :wrap}
+   [react/view {:width 375}
+    [react/view {:background-color :white :margin 10}
+     (snippets/code-snippet [topbar/topbar {:title "Chat Invites"}])]
+    [react/view {:background-color :white :margin 10}
+     (snippets/code-snippet [topbar/topbar {:title "Chat Invites tile tile title  tile tile title tile tile title tile tile title tile tile title tile tile title 3"}])]
+    [react/view {:background-color :white :margin 10}
+     (snippets/code-snippet [topbar/topbar {:title "Chat" :navigation :none :show-border? true}])
+     [react/view {:height 10}]]
+    [react/view {:background-color :white :margin 10}
+     (snippets/code-snippet [topbar/topbar {:title "Blocked Users" :accessories [{:label "Done" :handler #(js/alert "Done")}]}])]
+    [react/view {:background-color :white :margin 10}
+     (snippets/code-snippet [topbar/topbar {:title "Blocked Users" :accessories [{:label "Done" :handler #(js/alert "Done")}] :navigation {:label "Cancel" :handler #(js/alert "Cancel")}}])]
+    [react/view {:background-color :white :margin 10}
+     (snippets/code-snippet [topbar/topbar {:title "Chat Invites" :accessories [{:icon :more :handler #(js/alert "More")}]}])]
+    [react/view {:background-color :white :margin 10}
+     (snippets/code-snippet [topbar/topbar {:title "Title" :accessories [{:icon :more :handler #(js/alert "More")} {:icon :share :handler #(js/alert "Share")}]}])]
+    [react/view {:background-color :white :margin 10}
+     (snippets/code-snippet [topbar/topbar {:title "test"}])]]])

src/status_im/network/ui/edit_network/views.cljs

@@ -11,7 +11,8 @@
    [status-im.ui.components.text-input.view :as text-input]
    [status-im.network.core :as network]
    [status-im.network.ui.edit-network.styles :as styles]
-   [clojure.string :as string]))
+   [clojure.string :as string]
+   [status-im.ui.components.topbar :as topbar]))
 
 (defn- render-network-type [manage-network type]
   (let [name (case type
@@ -31,7 +32,7 @@
     (let [custom? (= (get-in manage-network [:chain :value]) :custom)]
       [react/view styles/container
        [react/keyboard-avoiding-view components.styles/flex
-        [toolbar/simple-toolbar (i18n/label :t/add-network)]
+        [topbar/topbar {:title :t/add-network}]
         [react/scroll-view
          [react/view styles/edit-network-view
           [text-input/text-input-with-label

src/status_im/network/ui/network_details/views.cljs

@@ -8,7 +8,8 @@
             [status-im.ui.components.common.common :as components.common]
             [status-im.network.ui.styles :as st]
             [status-im.network.core :as network]
-            [status-im.network.ui.views :as network-settings]))
+            [status-im.network.ui.views :as network-settings]
+            [status-im.ui.components.topbar :as topbar]))
 
 (views/defview network-details []
   (views/letsubs [{:keys [networks/selected-network]} [:get-screen-params]
@@ -19,7 +20,7 @@
           custom?                  (seq (filter #(= (:id %) id) (:custom networks)))]
       [react/view st/container
        [react/view components.styles/flex
-        [toolbar/simple-toolbar (i18n/label :t/network-details)]
+        [topbar/topbar {:title :t/network-details}]
         [react/view components.styles/flex
          [network-settings/network-badge
           {:name       name

src/status_im/network/ui/views.cljs

@@ -7,8 +7,7 @@
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.styles :as components.styles]
-            [status-im.ui.components.toolbar.actions :as toolbar.actions]
+            [status-im.ui.components.topbar :as topbar])
-            [status-im.ui.components.toolbar.view :as toolbar])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn- network-icon [connected? size]
@@ -45,11 +44,9 @@
   (views/letsubs [current-network [:networks/current-network]
                   networks        [:get-networks]]
     [react/view components.styles/flex
-     [toolbar/toolbar {}
+     [topbar/topbar {:title       :t/network-settings
-      toolbar/default-nav-back
+                     :accessories [{:icon    :main-icons/add
-      [toolbar/content-title (i18n/label :t/network-settings)]
+                                    :handler #(re-frame/dispatch [::network/add-network-pressed])}]}]
-      [toolbar/actions
-       [(toolbar.actions/add false #(re-frame/dispatch [::network/add-network-pressed]))]]]
      [react/view styles/wrapper
       [list/section-list {:sections           [{:title (i18n/label :t/main-networks)
                                                 :key :mainnet

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

@@ -162,11 +162,4 @@
                  :height          styles/toolbar-height
                  :justify-content :center
                  :align-items     :center}
-     action-items]]))
+     action-items]]))
-
-;;TODO remove
-(defn simple-toolbar
-  "A simple toolbar composed of a nav-back item and a single line title."
-  ([] (simple-toolbar nil))
-  ([title] (simple-toolbar title false))
-  ([title modal?] (toolbar nil (if modal? default-nav-close default-nav-back) [content-title title])))

src/status_im/ui/components/topbar.cljs

@@ -0,0 +1,55 @@
+(ns status-im.ui.components.topbar
+  (:require [status-im.ui.components.react :as react]
+            [re-frame.core :as re-frame]
+            [status-im.ui.components.icons.vector-icons :as icons]
+            [status-im.ui.components.colors :as colors]
+            [reagent.core :as reagent]
+            [status-im.utils.label :as utils.label]))
+
+(defn default-navigation [modal?]
+  {:icon                (if modal? :main-icons/close :main-icons/back)
+   :accessibility-label :back-button
+   :handler             #(re-frame/dispatch [:navigate-back])})
+
+(defn container [style title-padding & children]
+  (into []
+        (concat
+         [react/view {:style     style
+                      :on-layout #(reset! title-padding (max (-> % .-nativeEvent .-layout .-width)
+                                                             @title-padding))}]
+         children)))
+
+(defn button [value nav?]
+  (let [{:keys [handler icon label accessibility-label]} value]
+    [react/touchable-highlight {:on-press #(when handler (handler))}
+     [react/view (cond-> {:padding-horizontal (if nav? 16 10) :height 56
+                          :align-items        :center :justify-content :center}
+                   accessibility-label
+                   (assoc :accessibility-label accessibility-label))
+      (cond
+        icon
+        [icons/icon icon]
+        label
+        [react/text {:style {:color colors/blue}} label])]]))
+
+(defn topbar [& [{:keys [title navigation accessories show-border? modal?]}]]
+  (let [navigation    (or navigation (default-navigation modal?))
+        title-padding (reagent/atom 16)]
+    (fn [_]
+      [react/view (cond-> {:height 56 :align-items :center :flex-direction :row}
+                    show-border?
+                    (assoc :border-bottom-width 1 :border-bottom-color colors/gray-lighter))
+       (when-not (= navigation :none)
+         [container {} title-padding
+          [button navigation true]])
+       [react/view {:flex 1}]
+       (when accessories
+         [container {:flex-direction :row :padding-right 6} title-padding
+          (for [value accessories]
+            ^{:key value}
+            [button value false])])
+       (when title
+         [react/view {:position :absolute :left @title-padding :right @title-padding
+                      :top      0 :bottom 0 :align-items :center :justify-content :center}
+          [react/text {:style {:typography :title-bold :text-align :center} :number-of-lines 2}
+           (utils.label/stringify title)]])])))

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

@@ -8,8 +8,8 @@
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.list-item.views :as list-item]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.screens.about-app.styles :as styles]
-            [status-im.ui.screens.about-app.styles :as styles]))
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn- data [app-version node-version]
   [{:type                :small
@@ -56,8 +56,7 @@
   (views/letsubs [app-version  [:get-app-short-version]
                   node-version [:get-app-node-version]]
     [react/view {:flex 1 :background-color colors/white}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/about-app}]
-      (i18n/label :t/about-app)]
      [list/flat-list
       {:data      (data app-version node-version)
        :key-fn    (fn [_ i] (str i))

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

@@ -12,7 +12,8 @@
             [status-im.utils.platform :as platform]
             [status-im.ui.components.list-item.views :as list-item]
             [status-im.ui.components.chat-icon.screen :as chat-icon]
-            [status-im.multiaccounts.core :as multiaccounts]))
+            [status-im.multiaccounts.core :as multiaccounts]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn- render-row [row _ _]
   [list-item/list-item {:title       (multiaccounts/displayed-name row)
@@ -25,7 +26,7 @@
                   new-identity  [:contacts/new-identity]
                   error-message [:new-identity-error]]
     [react/view {:style {:flex 1}}
-     [toolbar.view/simple-toolbar (i18n/label :t/new-chat) true]
+     [topbar/topbar {:title :t/new-chat :modal? true}]
      [react/view add-new.styles/new-chat-container
       [react/view add-new.styles/new-chat-input-container
        [react/text-input {:on-change-text      #(re-frame/dispatch [:new-chat/set-new-identity %])

src/status_im/ui/screens/add_new/new_public_chat/view.cljs

@@ -12,7 +12,8 @@
             status-im.utils.db
             [status-im.react-native.resources :as resources]
             [status-im.ui.components.colors :as colors]
-            [status-im.i18n-resources :as i18n-resources])
+            [status-im.i18n-resources :as i18n-resources]
+            [status-im.ui.components.topbar :as topbar])
   (:require-macros
    [status-im.utils.slurp :refer [slurp]]
    [status-im.utils.views :as views]))
@@ -73,9 +74,7 @@
   (views/letsubs [topic [:public-group-topic]
                   error [:public-chat.new/topic-error-message]]
     [react/view {:style styles/group-container}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/new-public-group-chat :modal? true}]
-      (i18n/label :t/new-public-group-chat)
-      true]
      [react/scroll-view {:style {:flex 1}}
       [react/view {:padding-horizontal 16}
        [react/view {:align-items :center :padding-vertical 12}

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

@@ -1,11 +1,10 @@
 (ns status-im.ui.screens.advanced-settings.views
   (:require-macros [status-im.utils.views :as views])
   (:require [re-frame.core :as re-frame]
-            [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]))
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn- normal-mode-settings-data [network-name current-log-level
                                   current-fleet dev-mode?]
@@ -93,8 +92,7 @@
                   current-log-level        [:settings/current-log-level]
                   current-fleet            [:settings/current-fleet]]
     [react/view {:flex 1 :background-color colors/white}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/advanced}]
-      (i18n/label :t/advanced)]
      [list/flat-list
       {:data      (flat-list-data
                    network-name current-log-level

src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs

@@ -14,7 +14,8 @@
    [status-im.ui.screens.bootnodes-settings.edit-bootnode.styles :as styles]
    [status-im.utils.platform :as platform]
    [status-im.ui.components.tooltip.views :as tooltip]
-   [clojure.string :as string]))
+   [clojure.string :as string]
+   [status-im.ui.components.topbar :as topbar]))
 
 (defn delete-button [id]
   [react/touchable-highlight {:on-press #(re-frame/dispatch [:bootnodes.ui/delete-pressed id])}
@@ -42,7 +43,7 @@
           invalid-url? (contains? validation-errors :url)]
       [react/view styles/container
        [react/keyboard-avoiding-view components.styles/flex
-        [toolbar/simple-toolbar (i18n/label (if id :t/bootnode-details :t/add-bootnode))]
+        [topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}]
         [react/scroll-view {:keyboard-should-persist-taps :handled}
          [react/view styles/edit-bootnode-view
           [text-input/text-input-with-label

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

@@ -1,16 +1,11 @@
 (ns status-im.ui.screens.bootnodes-settings.views
   (:require-macros [status-im.utils.views :as views])
   (:require [re-frame.core :as re-frame]
-            [status-im.i18n :as i18n]
-            [status-im.utils.config :as config]
-            [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.ui.components.toolbar.actions :as toolbar.actions]
             [status-im.ui.screens.profile.components.views :as profile.components]
-            [status-im.ui.screens.bootnodes-settings.styles :as styles]))
+            [status-im.ui.screens.bootnodes-settings.styles :as styles]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn navigate-to-add-bootnode [id]
   (re-frame/dispatch [:bootnodes.ui/add-bootnode-pressed id]))
@@ -28,11 +23,9 @@
   (views/letsubs [bootnodes-enabled [:settings/bootnodes-enabled]
                   bootnodes         [:settings/network-bootnodes]]
     [react/view {:flex 1}
-     [toolbar/toolbar {}
+     [topbar/topbar {:title       :t/bootnodes-settings
-      toolbar/default-nav-back
+                     :accessories [{:icon    :main-icons/add
-      [toolbar/content-title (i18n/label :t/bootnodes-settings)]
+                                    :handler #(navigate-to-add-bootnode nil)}]}]
-      [toolbar/actions
-       [(toolbar.actions/add false #(navigate-to-add-bootnode nil))]]]
      [react/view styles/switch-container
       [profile.components/settings-switch-item
        {:label-kw  :t/bootnodes-enabled

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

@@ -5,8 +5,7 @@
             [status-im.ui.components.list.views :as list.views]
             [status-im.ui.components.react :as react]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.contact.contact :as contact-view]
+            [status-im.ui.components.topbar :as topbar])
-            [status-im.ui.components.toolbar.view :as toolbar.view])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn contacts-list-item [{:keys [public-key] :as contact}]
@@ -20,9 +19,7 @@
   (letsubs [blocked-contacts-count [:contacts/blocked-count]
             contacts      [:contacts/active]]
     [react/view {:flex 1}
-     [toolbar.view/toolbar nil
+     [topbar/topbar {:title :t/contacts}]
-      toolbar.view/default-nav-back
-      (toolbar.view/content-title (i18n/label :t/contacts))]
      [react/scroll-view {:flex 1}
       [list.views/big-list-item
        {:style               {:margin-vertical 16}
@@ -41,7 +38,7 @@
   (letsubs [blocked-contacts [:contacts/blocked]]
     [react/view {:flex 1
                  :background-color colors/white}
-     [toolbar.view/simple-toolbar (i18n/label :t/blocked-users)]
+     [topbar/topbar {:title :t/blocked-users}]
      [react/scroll-view {:style {:background-color colors/white
                                  :padding-vertical 8}}
       [list.views/flat-list

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

@@ -8,7 +8,8 @@
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.profile.components.views :as profile.components]
             [status-im.ui.screens.currency-settings.styles :as styles]
-            [status-im.constants :as constants]))
+            [status-im.constants :as constants]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn render-currency [current-currency-id]
   (fn [{:keys [id code display-name] :as currency}]
@@ -25,8 +26,7 @@
 (views/defview currency-settings []
   (views/letsubs [currency-id [:wallet.settings/currency]]
     [react/view {:flex 1}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/main-currency}]
-      (i18n/label :t/main-currency)]
      [react/view styles/wrapper
       [list/flat-list {:data      (->> constants/currencies
                                        vals

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

@@ -9,7 +9,8 @@
             [status-im.ui.screens.dapps-permissions.styles :as styles]
             [status-im.constants :as constants]
             [status-im.ui.components.common.common :as components.common]
-            [status-im.ui.components.icons.vector-icons :as icons]))
+            [status-im.ui.components.icons.vector-icons :as icons]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn d-icon []
   [react/view styles/icon-container
@@ -32,8 +33,7 @@
 (views/defview dapps-permissions []
   (views/letsubs [permissions [:dapps/permissions]]
     [react/view {:flex 1 :background-color colors/white}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/dapps-permissions}]
-      (i18n/label :t/dapps-permissions)]
      [list/flat-list
       {:data      (vec (map prepare-items (vals permissions)))
        :key-fn    (fn [_ i] (str i))
@@ -43,7 +43,7 @@
   (views/letsubs [{:keys [dapp permissions]} [:get-screen-params]
                   {:keys [name]} [:dapps-account]]
     [react/view {:flex 1 :background-color colors/white}
-     [toolbar/simple-toolbar dapp]
+     [topbar/topbar {:title dapp}]
      [list/flat-list
       {:data      (vec (map (prepare-items-manage name) permissions))
        :key-fn    (fn [_ i] (str i))

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

@@ -23,7 +23,8 @@
             [status-im.ui.components.list-item.views :as list-item]
             [status-im.ui.screens.chat.photos :as photos]
             [status-im.multiaccounts.core :as multiaccounts]
-            [status-im.utils.debounce :as debounce])
+            [status-im.utils.debounce :as debounce]
+            [status-im.ui.components.topbar :as topbar])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn- button
@@ -90,9 +91,7 @@
     {:color colors/white}]])
 
 (defn- toolbar []
-  [toolbar/toolbar nil
+  [topbar/topbar {:title :t/ens-your-username}])
-   [toolbar/nav-button (actions/back #(re-frame/dispatch [:navigate-back]))]
-   [toolbar/content-title (i18n/label :t/ens-your-username)]])
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;;; SEARCH SCREEN
@@ -441,8 +440,7 @@
 (views/defview terms []
   (views/letsubs [{:keys [contract]} [:get-screen-params :ens-terms]]
     [react/scroll-view {:style {:flex 1}}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/ens-terms-registration}]
-      (i18n/label :t/ens-terms-registration)]
      [react/view {:style {:height 136 :background-color colors/gray-lighter :justify-content :center :align-items :center}}
       [react/text {:style {:text-align :center :typography :header :letter-spacing -0.275}}
        (i18n/label :t/ens-terms-header)]]
@@ -483,8 +481,7 @@
   (views/letsubs [{:keys [name address custom-domain? public-key pending?]}
                   [:ens.name/screen]]
     [react/view {:style {:flex 1}}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title name}]
-      name]
      [react/scroll-view {:style {:flex 1}}
       (when-not custom-domain?
         [react/view {:style {:flex 1 :margin-horizontal 16}}
@@ -661,8 +658,7 @@
 (views/defview main []
   (views/letsubs [{:keys [names multiaccount show?]} [:ens.main/screen]]
     [react/keyboard-avoiding-view {:style {:flex 1}}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/ens-usernames}]
-      (i18n/label :t/ens-usernames)]
      (if (seq names)
        [registered names multiaccount show?]
        [welcome])]))

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

@@ -7,7 +7,8 @@
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.fleet-settings.styles :as styles]
             [status-im.node.core :as node]
-            [status-im.utils.platform :as platform])
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.topbar :as topbar])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn- fleet-icon [current?]
@@ -40,9 +41,7 @@
   (views/letsubs [custom-fleets [:fleets/custom-fleets]
                   current-fleet [:settings/current-fleet]]
     [react/view {:flex 1}
-     [toolbar/toolbar {}
+     [topbar/topbar {:title :t/fleet-settings}]
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/fleet-settings)]]
      [react/view styles/wrapper
       [list/flat-list {:data               (fleets custom-fleets)
                        :default-separator? false

src/status_im/ui/screens/hardwallet/authentication_method/views.cljs

@@ -8,7 +8,8 @@
             [status-im.ui.components.common.common :as common]
             [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
-            [status-im.react-native.resources :as resources]))
+            [status-im.react-native.resources :as resources]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn authentication-method-row [{:keys [title on-press icon]}]
   [react/touchable-highlight {:on-press on-press}
@@ -24,9 +25,7 @@
 (defn hardwallet-authentication-method []
   [react/view styles/container
    [react/view components.styles/flex
-    [toolbar/toolbar {}
+    [topbar/topbar]
-     toolbar/default-nav-back
-     nil]
     [common/separator]
     [react/view styles/choose-authentication-method
      [react/view styles/lock-image-container

src/status_im/ui/screens/hardwallet/connect/views.cljs

@@ -5,11 +5,10 @@
             [status-im.ui.screens.hardwallet.connect.styles :as styles]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.ui.components.styles :as components.styles]
             [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.toolbar.actions :as toolbar.actions]))
+            [status-im.ui.components.toolbar.actions :as toolbar.actions]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defview nfc-enabled []
   (letsubs [card-read-in-progress? [:hardwallet/card-read-in-progress?]]
@@ -46,11 +45,11 @@
      [react/view {:flex            1
                   :flex-direction  :column
                   :justify-content :space-between}
-      [toolbar/toolbar {}
+      [topbar/topbar
-       [toolbar/nav-button (assoc toolbar.actions/default-back
+       {:navigation
-                                  :handler
+        {:icon    :main-icons/back
-                                  #(re-frame/dispatch [:hardwallet.ui/hardwallet-connect-navigate-back-button-clicked]))]
+         :accessibility-label :back-button
-       nil]
+         :handler #(re-frame/dispatch [:hardwallet.ui/hardwallet-connect-navigate-back-button-clicked])}}]
       [react/view styles/hardwallet-connect
        (if nfc-enabled?
          [nfc-enabled]

src/status_im/ui/screens/hardwallet/pin/views.cljs

@@ -6,10 +6,9 @@
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.hardwallet.pin.styles :as styles]
-            [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.ui.components.toolbar.actions :as toolbar.actions]
             [status-im.ui.components.checkbox.view :as checkbox]
-            [status-im.utils.platform :as platform]))
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn numpad-button [n step enabled? small-screen?]
   [react/touchable-highlight
@@ -143,12 +142,11 @@
             error-label [:hardwallet/pin-error-label]]
     [react/view {:flex             1
                  :background-color colors/white}
-     [toolbar/toolbar
+     [topbar/topbar
-      nil
+      {:navigation
-      [toolbar/nav-button (assoc toolbar.actions/default-back
+       {:icon    :main-icons/back
-                                 :handler
+        :accessibility-label :back-button
-                                 #(re-frame/dispatch [:hardwallet.ui/enter-pin-navigate-back-button-clicked]))]
+        :handler #(re-frame/dispatch [:hardwallet.ui/enter-pin-navigate-back-button-clicked])}}]
-      nil]
      (if (zero? pin-retry-counter)
        [pin-view {:pin               pin
                   :retry-counter     (when (< puk-retry-counter puk-retries) puk-retry-counter)

src/status_im/ui/screens/hardwallet/settings/views.cljs

@@ -3,11 +3,11 @@
   (:require [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.react-native.resources :as resources]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.common.common :as components.common]))
+            [status-im.ui.components.common.common :as components.common]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn- action-row [{:keys [icon label on-press color-theme]}]
   [react/touchable-highlight
@@ -51,8 +51,7 @@
 (defview reset-card []
   (letsubs [disabled? [:keycard-reset-card-disabled?]]
     [react/view {:flex 1}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/reset-card}]
-      (i18n/label :t/reset-card)]
      [react/view {:flex             1
                   :background-color :white}
       [react/view {:margin-top  71
@@ -89,8 +88,7 @@
             puk-retry-counter [:hardwallet/puk-retry-counter]
             pairing [:keycard-multiaccount-pairing]]
     [react/view {:flex 1}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/status-keycard}]
-      (i18n/label :t/status-keycard)]
      [react/view {:flex             1
                   :background-color :white}
       [react/view {:margin-top  47

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

@@ -1,11 +1,10 @@
 (ns status-im.ui.screens.help-center.views
   (:require [re-frame.core :as re-frame]
-            [status-im.i18n :as i18n]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.colors :as colors]
-            [status-im.utils.platform :as platform]))
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.topbar :as topbar]))
 
 (def data
   [{:type                :small
@@ -36,8 +35,7 @@
 
 (defn help-center []
   [react/view {:flex 1 :background-color colors/white}
-   [toolbar/simple-toolbar
+   [topbar/topbar {:title :t/need-help}]
-    (i18n/label :t/need-help)]
    [list/flat-list
     {:data      data
      :key-fn    (fn [_ i] (str i))

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

@@ -14,16 +14,15 @@
             [status-im.utils.gfycat.core :as gfy]
             [status-im.ui.components.colors :as colors]
             [reagent.core :as r]
-            [status-im.ui.components.toolbar.actions :as actions]
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.screens.intro.styles :as styles]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.utils.platform :as platform]
             [status-im.utils.security :as security]
             [status-im.i18n :as i18n]
             [status-im.constants :as constants]
             [status-im.utils.config :as config]
-            [status-im.utils.platform :as platform]))
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn dots-selector [{:keys [on-press n selected color]}]
   [react/view {:style (styles/dot-selector n)}
@@ -453,12 +452,11 @@
 (defview wizard-generate-key []
   (letsubs [wizard-state [:intro-wizard/generate-key]]
     [react/view {:style {:flex 1}}
-     [toolbar/toolbar
+     [topbar/topbar
-      {:style {:border-bottom-width 0
+      {:navigation
-               :margin-top 16}}
+       {:icon    :main-icons/back
-      (toolbar/nav-button
+        :accessibility-label :back-button
-       (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
+        :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
-      nil]
      [react/view {:style {:flex 1
                           :justify-content :space-between}}
       [top-bar {:step :generate-key}]
@@ -470,14 +468,10 @@
 (defview wizard-choose-key []
   (letsubs [wizard-state [:intro-wizard/choose-key]]
     [react/view {:style {:flex 1}}
-     [toolbar/toolbar
+     [topbar/topbar
-      {:style {:border-bottom-width 0
+      {:navigation
-               :margin-left 16
+       {:label    :t/cancel
-               :margin-top 16}}
+        :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
-      (toolbar/nav-text
-       {:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}
-       (i18n/label :t/cancel))
-      nil]
      [react/view {:style {:flex 1
                           :justify-content :space-between}}
       [top-bar {:step :choose-key}]
@@ -488,18 +482,15 @@
 (defview wizard-select-key-storage []
   (letsubs [wizard-state [:intro-wizard/select-key-storage]]
     [react/view {:style {:flex 1}}
-     [toolbar/toolbar
+     [topbar/topbar
-      {:style (merge {:border-bottom-width 0
+      {:navigation
-                      :margin-top 16}
+       (if (:recovering? wizard-state)
-                     (when (:recovering? wizard-state)
+         {:label   :t/cancel
-                       {:margin-left 16}))}
+          :accessibility-label :back-button
-      (if (:recovering? wizard-state)
+          :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}
-        (toolbar/nav-text
+         {:icon    :main-icons/back
-         {:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}
+          :accessibility-label :back-button
-         (i18n/label :t/cancel))
+          :handler #(re-frame/dispatch [:intro-wizard/navigate-back])})}]
-        (toolbar/nav-button
-         (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back]))))
-      nil]
      [react/view {:style {:flex 1
                           :justify-content :space-between}}
       [top-bar {:step :select-key-storage}]
@@ -510,12 +501,11 @@
 (defview wizard-create-code []
   (letsubs [wizard-state [:intro-wizard/create-code]]
     [react/keyboard-avoiding-view {:style {:flex 1}}
-     [toolbar/toolbar
+     [topbar/topbar
-      {:style {:border-bottom-width 0
+      {:navigation
-               :margin-top 16}}
+       {:icon    :main-icons/back
-      (toolbar/nav-button
+        :accessibility-label :back-button
-       (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
+        :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
-      nil]
      [react/view {:style {:flex 1
                           :justify-content :space-between}}
       [top-bar {:step :create-code :encrypt-with-password? (:encrypt-with-password? wizard-state)}]
@@ -527,13 +517,12 @@
 (defview wizard-confirm-code []
   (letsubs [wizard-state [:intro-wizard/confirm-code]]
     [react/keyboard-avoiding-view {:style {:flex 1}}
-     [toolbar/toolbar
+     [topbar/topbar
-      {:style {:border-bottom-width 0
-               :margin-top 16}}
       (when-not (:processing? wizard-state)
-        (toolbar/nav-button
+        {:navigation
-         (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back]))))
+         {:icon    :main-icons/back
-      nil]
+          :accessibility-label :back-button
+          :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}})]
      [react/view {:style {:flex 1
                           :justify-content :space-between}}
       [top-bar {:step :confirm-code :encrypt-with-password? (:encrypt-with-password? wizard-state)}]
@@ -545,10 +534,11 @@
 (defview wizard-enter-phrase []
   (letsubs [wizard-state [:intro-wizard/enter-phrase]]
     [react/keyboard-avoiding-view {:style {:flex 1}}
-     [toolbar/toolbar {:style {:border-bottom-width 0}}
+     [topbar/topbar
-      (toolbar/nav-button
+      {:navigation
-       (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
+       {:icon    :main-icons/back
-      nil]
+        :accessibility-label :back-button
+        :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
      [react/view {:style {:flex            1
                           :justify-content :space-between}}
       [top-bar {:step :enter-phrase}]
@@ -561,12 +551,11 @@
   (letsubs [{:keys [pubkey processing? name photo-path]} [:intro-wizard/recovery-success]
             existing-account? [:intro-wizard/recover-existing-account?]]
     [react/view {:style {:flex 1}}
-     [toolbar/toolbar
+     [topbar/topbar
-      {:style {:border-bottom-width 0
+      {:navigation
-               :margin-top 16}}
+       {:icon    :main-icons/back
-      (toolbar/nav-button
+        :accessibility-label :back-button
-       (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
+        :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
-      nil]
      [react/view {:style {:flex 1
                           :justify-content :space-between}}
       [top-bar {:step :recovery-success}]

src/status_im/ui/screens/keycard/onboarding/views.cljs

@@ -13,16 +13,13 @@
             [status-im.ui.components.styles :as components.styles]
             [status-im.ui.components.text-input.view :as text-input]
             [status-im.ui.components.tooltip.views :as tooltip]
-            [status-im.ui.screens.hardwallet.pin.views :as pin.views]))
+            [status-im.ui.screens.hardwallet.pin.views :as pin.views]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defview intro []
   (letsubs [flow [:hardwallet-flow]]
     [react/view styles/container
-     [toolbar/toolbar
+     [topbar/topbar]
-      {:transparent? true
-       :style        {:margin-top 32}}
-      toolbar/default-nav-back
-      nil]
      [react/view {:flex            1
                   :flex-direction  :column
                   :justify-content :space-between
@@ -103,11 +100,7 @@
 
 (defn start []
   [react/view styles/container
-   [toolbar/toolbar
+   [topbar/topbar]
-    {:transparent? true
-     :style        {:margin-top 32}}
-    toolbar/default-nav-back
-    nil]
    [react/view {:flex            1
                 :flex-direction  :column
                 :justify-content :space-between
@@ -140,8 +133,7 @@
             puk-code [:hardwallet-puk-code]]
     [react/view styles/container
      [toolbar/toolbar
-      {:transparent? true
+      {:transparent? true}
-       :style        {:margin-top 32}}
       [toolbar/nav-text
        {:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
         :style   {:padding-left 21}}
@@ -242,8 +234,7 @@
             small-screen? [:dimensions/small-screen?]]
     [react/view styles/container
      [toolbar/toolbar
-      {:transparent? true
+      {:transparent? true}
-       :style        {:margin-top 32}}
       [toolbar/nav-text
        {:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
         :style   {:padding-left 21}}
@@ -287,8 +278,7 @@
   (letsubs [mnemonic [:hardwallet-mnemonic]]
     [react/view styles/container
      [toolbar/toolbar
-      {:transparent? true
+      {:transparent? true}
-       :style        {:margin-top 32}}
       [toolbar/nav-text
        {:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
         :style   {:padding-left 21}}
@@ -358,8 +348,7 @@
     (let [{:keys [word idx]} word]
       [react/view styles/container
        [toolbar/toolbar
-        {:transparent? true
+        {:transparent? true}
-         :style        {:margin-top 32}}
         [toolbar/nav-text
          {:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
           :style   {:padding-left 21}}

src/status_im/ui/screens/keycard/recovery/views.cljs

@@ -4,7 +4,6 @@
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.keycard.styles :as styles]
             [status-im.ui.screens.keycard.views :as views]
-            [status-im.ui.components.toolbar.actions :as actions]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
@@ -17,16 +16,12 @@
             [status-im.utils.identicon :as identicon]
             [status-im.utils.core :as utils.core]
             [status-im.ui.screens.hardwallet.pin.views :as pin.views]
-            [status-im.ui.components.tooltip.views :as tooltip]))
+            [status-im.ui.components.tooltip.views :as tooltip]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn intro []
   [react/view styles/container
-   [toolbar/toolbar
+   [topbar/topbar]
-    {:transparent? true
-     :style        {:margin-top 32}}
-    (toolbar/nav-button
-     (actions/back #(re-frame/dispatch [:navigate-back])))
-    nil]
    [react/view {:flex            1
                 :flex-direction  :column
                 :justify-content :space-between
@@ -76,11 +71,7 @@
 
 (defn start []
   [react/view styles/container
-   [toolbar/toolbar
+   [topbar/topbar]
-    {:transparent? true
-     :style        {:margin-top 32}}
-    toolbar/default-nav-back
-    nil]
    [react/view {:flex            1
                 :flex-direction  :column
                 :justify-content :space-between
@@ -119,8 +110,7 @@
             retry-counter [:hardwallet/retry-counter]]
     [react/view styles/container
      [toolbar/toolbar
-      {:transparent? true
+      {:transparent? true}
-       :style        {:margin-top 32}}
       [toolbar/nav-text
        {:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
         :style   {:padding-left 21}}
@@ -154,8 +144,7 @@
             ref (atom nil)]
     [react/view styles/container
      [toolbar/toolbar
-      {:transparent? true
+      {:transparent? true}
-       :style        {:margin-top 32}}
       [toolbar/nav-text
        {:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
         :style   {:padding-left 21}}
@@ -218,11 +207,7 @@
   (letsubs [address [:hardwallet-multiaccount-wallet-address]
             whisper-public-key [:hardwallet-multiaccount-whisper-public-key]]
     [react/view styles/container
-     [toolbar/toolbar
+     [topbar/topbar {:navigation :none}]
-      {:transparent? true
-       :style        {:margin-top 32}}
-      nil
-      nil]
      [react/view {:flex            1
                   :flex-direction  :column
                   :justify-content :space-between
@@ -277,11 +262,7 @@
 (defview no-key []
   (letsubs [card-state [:hardwallet-card-state]]
     [react/view styles/container
-     [toolbar/toolbar
+     [topbar/topbar {:navigation :none}]
-      {:transparent? true
-       :style        {:margin-top 32}}
-      nil
-      nil]
      [react/view {:flex            1
                   :flex-direction  :column
                   :justify-content :space-between

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

@@ -2,9 +2,7 @@
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [status-im.multiaccounts.core :as multiaccounts]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.checkbox.view :as checkbox]
             [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.ui.components.toolbar.actions :as actions]
             [status-im.ui.screens.keycard.styles :as styles]
             [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]
@@ -13,10 +11,9 @@
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.screens.hardwallet.pin.views :as pin.views]
             [status-im.utils.core :as utils.core]
-            [status-im.utils.gfycat.core :as gfy]
-            [status-im.utils.identicon :as identicon]
             [status-im.ui.components.list-item.views :as list-item]
-            [status-im.ui.screens.chat.photos :as photos]))
+            [status-im.ui.screens.chat.photos :as photos]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defview connection-lost []
   (letsubs [{:keys [card-connected?]} [:keycard]]
@@ -89,11 +86,7 @@
 
 (defn nfc-on []
   [react/view styles/container
-   [toolbar/toolbar
+   [topbar/topbar]
-    {:transparent? true
-     :style        {:margin-top 32}}
-    toolbar/default-nav-back
-    nil]
    [react/view {:flex            1
                 :flex-direction  :column
                 :justify-content :space-between
@@ -121,9 +114,7 @@
 
 (defn loading [title-label]
   [react/view styles/container
-   [toolbar/toolbar {:transparent? true
+   [topbar/topbar {:navigation :none}]
-                     :style        {:margin-top 32}}
-    nil nil]
    [react/view {:flex            1
                 :flex-direction  :column
                 :justify-content :space-between
@@ -370,18 +361,14 @@
             small-screen? [:dimensions/small-screen?]
             retry-counter [:hardwallet/retry-counter]]
     [react/view styles/container
-     [toolbar/toolbar
+     [topbar/topbar
-      {:transparent? true}
+      (cond-> {:accessories [{:icon    :main-icons/more
-      (when multiple-multiaccounts?
+                              :handler #(re-frame/dispatch [:keycard.login.pin.ui/more-icon-pressed])}]}
-        [toolbar/nav-button
+        multiple-multiaccounts?
-         (actions/back
+        (assoc :navigation
-          #(re-frame/dispatch [:keycard.login.pin.ui/cancel-pressed]))])
+               {:icon    :main-icons/back
-      nil
+                :accessibility-label :back-button
-      [react/view {:margin-right 20}
+                :handler #(re-frame/dispatch [:keycard.login.pin.ui/cancel-pressed])}))]
-       [react/touchable-highlight
-        {:on-press #(re-frame/dispatch [:keycard.login.pin.ui/more-icon-pressed])}
-        [vector-icons/icon :main-icons/more {:color           colors/black
-                                             :container-style {:margin-left 5}}]]]]
      [react/view {:flex            1
                   :flex-direction  :column
                   :justify-content :space-between
@@ -449,8 +436,7 @@
     (let [in-progress? (= status :verifying)]
       [react/view styles/container
        [toolbar/toolbar
-        {:transparent? true
+        {:transparent? true}
-         :style        {:margin-top 32}}
         nil
         [react/text {:style {:color colors/gray}}
          (i18n/label :t/step-i-of-n {:number 2

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

@@ -1,10 +1,8 @@
 (ns status-im.ui.screens.language-settings.views
-  (:require [status-im.i18n :as i18n]
+  (:require [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]))
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn language-settings []
   [react/view {:flex 1 :background-color colors/white}
-   [toolbar/simple-toolbar
+   [topbar/topbar {:title :t/language}]])
-    (i18n/label :t/language)]])

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

@@ -1,12 +1,11 @@
 (ns status-im.ui.screens.log-level-settings.views
   (:require [re-frame.core :as re-frame]
-            [status-im.i18n :as i18n]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.log-level-settings.styles :as styles]
-            [status-im.utils.platform :as platform])
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.topbar :as topbar])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn- log-level-icon [current?]
@@ -49,9 +48,7 @@
 (views/defview log-level-settings []
   (views/letsubs [current-log-level [:settings/current-log-level]]
     [react/view {:flex 1}
-     [toolbar/toolbar {}
+     [topbar/topbar {:title :t/log-level-settings}]
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/log-level-settings)]]
      [react/view styles/wrapper
       [list/flat-list {:data               log-levels
                        :default-separator? false

src/status_im/ui/screens/mobile_network_settings/view.cljs

@@ -5,10 +5,10 @@
             [status-im.i18n :as i18n]
             [re-frame.core :as re-frame]
             status-im.ui.screens.mobile-network-settings.events
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.profile.components.views :as profile.components]
             [status-im.utils.platform :as platform]
-            [status-im.ui.screens.mobile-network-settings.sheets :as sheets]))
+            [status-im.ui.screens.mobile-network-settings.sheets :as sheets]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn settings-separator []
   [react/view
@@ -20,7 +20,7 @@
              remember-syncing-choice?]}
      [:multiaccount]]
     [react/view {:style styles/container}
-     [toolbar/simple-toolbar (i18n/label :t/mobile-network-settings)]
+     [topbar/topbar {:title :t/mobile-network-settings}]
      (when platform/ios?
        [settings-separator])
      [react/view {:style styles/switch-container}

src/status_im/ui/screens/multiaccounts/login/views.cljs

@@ -15,16 +15,17 @@
             [status-im.utils.platform :as platform]
             [status-im.utils.security :as security]
             [status-im.utils.utils :as utils]
-            [status-im.ui.components.icons.vector-icons :as icons])
+            [status-im.ui.components.icons.vector-icons :as icons]
+            [status-im.ui.components.topbar :as topbar])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn login-toolbar [can-navigate-back?]
-  [toolbar/toolbar
+  [topbar/topbar
-   {:style {:border-bottom-width 0
+   {:navigation (if can-navigate-back?
-            :margin-top          0}}
+                  {:icon                :main-icons/back
-   (when can-navigate-back?
+                   :accessibility-label :back-button
-     [toolbar/nav-button (act/back #(re-frame/dispatch [:navigate-reset :multiaccounts]))])
+                   :handler             #(re-frame/dispatch [:navigate-reset :multiaccounts])}
-   nil])
+                  :none)}])
 
 (defn login-multiaccount [password-text-input]
   (.blur password-text-input)

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

@@ -1,11 +1,9 @@
 (ns status-im.ui.screens.notifications-settings.views
-  (:require [status-im.i18n :as i18n]
+  (:require [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]))
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn notifications-settings []
   [react/view {:flex 1 :background-color colors/white}
-   [toolbar/simple-toolbar
+   [topbar/topbar {:title :t/notifications}]])
-    (i18n/label :t/notifications)]])
 

src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs

@@ -14,7 +14,8 @@
    [status-im.ui.components.text-input.view :as text-input]
    [status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles]
    [status-im.ui.components.tooltip.views :as tooltip]
-   [clojure.string :as string]))
+   [clojure.string :as string]
+   [status-im.ui.components.topbar :as topbar]))
 
 (defn connect-button [id]
   [react/touchable-highlight {:on-press #(re-frame/dispatch [:mailserver.ui/connect-pressed id])}
@@ -51,7 +52,7 @@
           invalid-url? (contains? validation-errors :url)]
       [react/view components.styles/flex
        [react/keyboard-avoiding-view components.styles/flex
-        [toolbar/simple-toolbar (i18n/label (if id :t/mailserver-details :t/add-mailserver))]
+        [topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}]
         [react/scroll-view {:keyboard-should-persist-taps :handled}
          [react/view styles/edit-mailserver-view
           [text-input/text-input-with-label

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

@@ -2,15 +2,13 @@
   (:require-macros [status-im.utils.views :as views])
   (:require [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
-            [status-im.utils.config :as config]
             [status-im.ui.components.checkbox.view :as checkbox.views]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.utils.platform :as platform]
-            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.screens.offline-messaging-settings.styles :as styles]
-            [status-im.ui.components.toolbar.actions :as toolbar.actions]
+            [status-im.ui.components.topbar :as topbar]))
-            [status-im.ui.screens.offline-messaging-settings.styles :as styles]))
 
 (defn- mailserver-icon [connected?]
   [react/view (if platform/desktop?
@@ -52,11 +50,10 @@
                   preferred-mailserver-id [:mailserver/preferred-id]
                   mailservers             [:mailserver/fleet-mailservers]]
     [react/view {:flex 1}
-     [toolbar/toolbar {}
+     [topbar/topbar
-      toolbar/default-nav-back
+      {:title       :t/offline-messaging-settings
-      [toolbar/content-title (i18n/label :t/offline-messaging-settings)]
+       :accessories [{:icon    :main-icons/add
-      [toolbar/actions
+                      :handler #(re-frame/dispatch [:mailserver.ui/add-pressed])}]}]
-       [(toolbar.actions/add false #(re-frame/dispatch [:mailserver.ui/add-pressed]))]]]
      [react/view styles/wrapper
       [pinned-state preferred-mailserver-id]
       [list/flat-list {:data               (vals mailservers)

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

@@ -13,9 +13,9 @@
             [status-im.ui.components.checkbox.view :as checkbox.views]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.text-input.view :as text-input]
-            [status-im.ui.screens.pairing.styles :as styles]))
+            [status-im.ui.screens.pairing.styles :as styles]
+            [status-im.ui.components.topbar :as topbar]))
 
 (def syncing (reagent/atom false))
 (def installation-name (reagent/atom ""))
@@ -186,9 +186,7 @@
 (views/defview installations []
   (views/letsubs [installations [:pairing/installations]]
     [react/view {:flex 1}
-     [toolbar/toolbar {}
+     [topbar/topbar {:title :t/devices}]
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/devices)]]
      [react/scroll-view {:style {:background-color :white}}
       (if (string/blank? (-> installations first :name))
         [edit-installation-name]

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

@@ -8,7 +8,8 @@
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.multiaccounts.biometric.core :as biometric])
+            [status-im.multiaccounts.biometric.core :as biometric]
+            [status-im.ui.components.topbar :as topbar])
   (:require-macros [status-im.utils.views :as views]))
 
 (defn- list-data [mnemonic settings supported-biometric-auth biometric-auth? keycard?]
@@ -88,8 +89,7 @@
                   auth-method              [:auth-method]
                   keycard-multiaccount?    [:keycard-multiaccount?]]
     [react/view {:flex 1 :background-color colors/white}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/privacy-and-security}]
-      (i18n/label :t/privacy-and-security)]
      [list/flat-list
       {:data      (list-data mnemonic settings supported-biometric-auth
                              (= auth-method "biometric") keycard-multiaccount?)

src/status_im/ui/screens/profile/group_chat/views.cljs

@@ -2,36 +2,23 @@
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [status-im.utils.platform :as platform]
             [status-im.constants :as constants]
-            [status-im.ui.screens.profile.group-chat.styles :as styles]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.profile.components.styles :as profile.components.styles]
             [status-im.ui.screens.profile.components.views :as profile.components]
             [status-im.ui.components.contact.contact :as contact]
             [status-im.ui.components.list.views :as list]
-            [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [re-frame.core :as re-frame]
-            [status-im.ui.components.common.styles :as common.styles]
             [status-im.i18n :as i18n]
-            [status-im.utils.utils :as utils]
+            [status-im.ui.components.list-item.views :as list-item]
-            [status-im.ui.components.list-item.views :as list-item]))
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn group-chat-profile-toolbar [admin?]
-  [toolbar/toolbar {}
+  [topbar/topbar
-   toolbar/default-nav-back
-   nil
    (when admin?
-     [toolbar/text-action {:handler #(re-frame/dispatch [:group-chat-profile/start-editing])
+     {:accessories
-                           :accessibility-label :edit-button}
+      [{:label               :t/edit
-      (i18n/label :t/edit)])])
+        :accessibility-label :edit-button
-
+        :handler             #(re-frame/dispatch [:group-chat-profile/start-editing])}]})])
-(defn group-chat-profile-edit-toolbar []
-  [toolbar/toolbar {}
-   nil
-   nil
-   [toolbar/text-action {:handler   #(re-frame/dispatch [:group-chats.ui/save-pressed])
-                         :accessibility-label :done-button}
-    (i18n/label :t/done)]])
 
 (defn member-actions [chat-id member us-admin?]
   (concat

src/status_im/ui/screens/profile/photo_capture/views.cljs

@@ -3,12 +3,12 @@
             [reagent.core :as reagent]
             [status-im.ui.components.camera :as camera]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.i18n :as i18n]
             [status-im.ui.screens.profile.photo-capture.styles :as styles]
             [status-im.utils.image-processing :as image-processing]
             [taoensso.timbre :as log]
-            [status-im.ui.components.icons.vector-icons :as icons]))
+            [status-im.ui.components.icons.vector-icons :as icons]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn image-captured [data]
   (let [path       (.-uri data)
@@ -24,9 +24,7 @@
 (defn profile-photo-capture []
   (let [camera-ref (reagent/atom nil)]
     [react/view styles/container
-     [toolbar/toolbar {}
+     [topbar/topbar {:title :t/image-source-title}]
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/image-source-title)]]
      [camera/camera {:style         {:flex 1}
                      ;:aspect        (:fill camera/aspects)
                      :captureQuality "480p"

src/status_im/ui/screens/routing/screens.cljs

@@ -137,7 +137,6 @@
    :collectibles-list                                collectibles/collectibles-list
    :contact-code                                     [:modal wallet.components/contact-code]
    :wallet-transaction-details                       wallet-transactions/transaction-details
-   :wallet-settings-hook                             wallet-settings/settings-hook
    :wallet-settings-assets                           wallet-settings/manage-assets
    :wallet-add-custom-token                          custom-tokens/add-custom-token
    :wallet-custom-token-details                      custom-tokens/custom-token-details

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

@@ -9,7 +9,8 @@
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.stickers.styles :as styles]
             [status-im.utils.contenthash :as contenthash]
-            [status-im.utils.money :as money])
+            [status-im.utils.money :as money]
+            [status-im.ui.components.topbar :as topbar])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn- thumbnail-icon [uri size]
@@ -61,7 +62,7 @@
   (letsubs [packs [:stickers/all-packs]]
     [react/view styles/screen
      [react/keyboard-avoiding-view components.styles/flex
-      [toolbar/simple-toolbar (i18n/label :t/sticker-market)]
+      [topbar/topbar {:title :t/sticker-market}]
       (if (seq packs)
         [react/scroll-view {:keyboard-should-persist-taps :handled :style {:padding 16}}
          [react/view
@@ -79,7 +80,7 @@
              :as pack}
             [:stickers/get-current-pack]]
     [react/keyboard-avoiding-view components.styles/flex
-     [toolbar/simple-toolbar nil modal?]
+     [topbar/topbar {:modal? modal?}]
      (if pack
        [react/view {:flex 1}
         [react/view {:height 74 :align-items :center :flex-direction :row :padding-horizontal 16}

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

@@ -5,7 +5,8 @@
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]))
+            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn- list-data [mailserver-id use-mobile-data?]
   (let [mobile-data-usage-state (if use-mobile-data?
@@ -51,8 +52,7 @@
   (views/letsubs [{:keys [syncing-on-mobile-network?]} [:multiaccount]
                   mailserver-id                        [:mailserver/current-id]]
     [react/view {:flex 1 :background-color colors/white}
-     [toolbar/simple-toolbar
+     [topbar/topbar {:title :t/sync-settings}]
-      (i18n/label :t/sync-settings)]
      [list/flat-list
       {:data      (list-data mailserver-id syncing-on-mobile-network?)
        :key-fn    (fn [_ i] (str i))

src/status_im/ui/screens/wallet/account/views.cljs

@@ -1,7 +1,6 @@
 (ns status-im.ui.screens.wallet.account.views
   (:require-macros [status-im.utils.views :as views])
   (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.colors :as colors]
             [re-frame.core :as re-frame]
             [status-im.ui.screens.wallet.accounts.views :as accounts]
@@ -16,21 +15,19 @@
             [status-im.ethereum.core :as ethereum]
             [status-im.ui.components.list-item.views :as list-item]
             [status-im.utils.money :as money]
-            [status-im.wallet.utils :as wallet.utils]))
+            [status-im.wallet.utils :as wallet.utils]
+            [status-im.ui.components.topbar :as topbar]))
 
 (def state (reagent/atom {:tab :assets}))
 
 (defn toolbar-view [title]
-  [react/view
+  [topbar/topbar
-   [toolbar/toolbar {:transparent? true}
+   {:title title
-    toolbar/default-nav-back
+    :accessories
-    [toolbar/content-title title]
+    [{:icon    :main-icons/more
-    [toolbar/actions
+      :handler #(re-frame/dispatch [:bottom-sheet/show-sheet
-     [{:icon      :main-icons/more
+                                    {:content        sheets/account-settings
-       :icon-opts {:color :black}
+                                     :content-height 60}])}]}])
-       :handler   #(re-frame/dispatch [:bottom-sheet/show-sheet
-                                       {:content        sheets/account-settings
-                                        :content-height 60}])}]]]])
 
 (defn button [label icon handler]
   [react/touchable-highlight {:on-press handler :style {:flex 1}}

src/status_im/ui/screens/wallet/account_settings/views.cljs

@@ -1,7 +1,6 @@
 (ns status-im.ui.screens.wallet.account-settings.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as topbar]
             [status-im.ui.components.text-input.view :as text-input]
             [re-frame.core :as re-frame]
             [status-im.i18n :as i18n]
@@ -12,7 +11,8 @@
             [status-im.ui.components.toolbar :as toolbar]
             [status-im.ui.components.copyable-text :as copyable-text]
             [reagent.core :as reagent]
-            [status-im.ui.components.list-item.views :as list-item]))
+            [status-im.ui.components.list-item.views :as list-item]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defview colors-popover [selected-color on-press]
   (letsubs [width [:dimensions/window-width]]
@@ -83,14 +83,16 @@
   (letsubs [{:keys [address color path type] :as account} [:multiaccount/current-account]
             new-account (reagent/atom nil)]
     [react/keyboard-avoiding-view {:flex 1}
-     [topbar/toolbar {}
+     [topbar/topbar
-      topbar/default-nav-back
+      (cond-> {:title :t/account-settings}
-      [topbar/content-title (i18n/label :t/account-settings)]
+        (and @new-account (not= "" (:name @new-account)))
-      (when (and @new-account (not= "" (:name @new-account)))
+        (assoc :accessories [{:label :t/apply
-        [button/button {:type :secondary :label (i18n/label :t/apply)
+                              :handler
-                        :on-press #(do
+                              #(do
-                                     (re-frame/dispatch [:wallet.accounts/save-account account @new-account])
+                                 (re-frame/dispatch [:wallet.accounts/save-account
-                                     (reset! new-account nil))}])]
+                                                     account
+                                                     @new-account])
+                                 (reset! new-account nil))}]))]
      [react/scroll-view {:keyboard-should-persist-taps :handled
                          :style                        {:flex 1}}
       [react/view {:padding-bottom 28 :padding-top 10}

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

@@ -1,7 +1,6 @@
 (ns status-im.ui.screens.wallet.add-new.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [status-im.ui.components.react :as react]
-            [status-im.ui.components.toolbar.view :as topbar]
             [status-im.i18n :as i18n]
             [re-frame.core :as re-frame]
             [status-im.ui.components.colors :as colors]
@@ -11,11 +10,12 @@
             [status-im.multiaccounts.db :as multiaccounts.db]
             [status-im.ui.components.toolbar :as toolbar]
             [status-im.ui.components.styles :as components.styles]
-            [status-im.ethereum.core :as ethereum]))
+            [status-im.ethereum.core :as ethereum]
+            [status-im.ui.components.topbar :as topbar]))
 
 (defn add-account []
   [react/view {:flex 1}
-   [topbar/simple-toolbar]
+   [topbar/topbar]
    [react/scroll-view {:keyboard-should-persist-taps :handled
                        :style                        {:flex 1}}
     [react/view {:align-items :center :padding-horizontal 40 :margin-bottom 52}
@@ -63,7 +63,7 @@
 (defview add-watch-account []
   (letsubs [{:keys [address]} [:add-account]]
     [react/keyboard-avoiding-view {:flex 1}
-     [topbar/simple-toolbar]
+     [topbar/topbar]
      [react/view {:flex            1
                   :justify-content :space-between
                   :align-items     :center :margin-horizontal 16}
@@ -89,7 +89,7 @@
   (letsubs [{:keys [error]} [:add-account]
             entered-password (reagent/atom "")]
     [react/keyboard-avoiding-view {:style {:flex 1}}
-     [topbar/simple-toolbar]
+     [topbar/topbar]
      [react/view {:flex            1
                   :justify-content :space-between
                   :align-items     :center :margin-horizontal 16}

src/status_im/ui/screens/wallet/collectibles/views.cljs

@@ -5,8 +5,8 @@
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.styles :as component.styles]
-            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.screens.wallet.collectibles.styles :as styles]
-            [status-im.ui.screens.wallet.collectibles.styles :as styles]))
+            [status-im.ui.components.topbar :as topbar]))
 
 (defmulti render-collectible (fn [symbol _] symbol))
 
@@ -19,9 +19,7 @@
             collectibles [:screen-collectibles]]
     [react/view styles/container
      [react/view {:style component.styles/flex}
-      [toolbar/toolbar {}
+      [topbar/topbar {:title name}]
-       toolbar/default-nav-back
-       [toolbar/content-title name]]
       (cond
         (nil? collectibles)
         [react/view {:style styles/loading-indicator}

src/status_im/ui/screens/wallet/custom_tokens/views.cljs

@@ -8,7 +8,8 @@
             [status-im.ui.components.common.common :as components.common]
             [clojure.string :as string]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.list-item.views :as list-item]))
+            [status-im.ui.components.list-item.views :as list-item]
+            [status-im.ui.components.topbar :as topbar]))
 
 (def debounce-timers (atom {}))
 
@@ -24,10 +25,7 @@
   (letsubs [{:keys [contract name symbol balance decimals in-progress? error error-name error-symbol]}
             [:wallet/custom-token-screen]]
     [react/keyboard-avoiding-view {:flex 1 :background-color :white}
-     [toolbar/toolbar nil
+     [topbar/topbar {:title :t/add-custom-token}]
-      toolbar/default-nav-back
-      [toolbar/content-title
-       (i18n/label :t/add-custom-token)]]
      [react/scroll-view {:keyboard-should-persist-taps :handled :style {:flex 1 :margin-top 8 :padding-horizontal 16}}
       [react/view {:style {:flex-direction :row :justify-content :space-between :padding-vertical 10}}
        [react/text (i18n/label :t/contract-address)]
@@ -106,9 +104,7 @@
   (letsubs [{:keys [address name symbol decimals custom?] :as token}
             [:get-screen-params]]
     [react/keyboard-avoiding-view {:flex 1 :background-color :white}
-     [toolbar/toolbar nil
+     [topbar/topbar {:title name}]
-      toolbar/default-nav-back
-      [toolbar/content-title name]]
      [react/scroll-view {:keyboard-should-persist-taps :handled
                          :style {:flex 1 :margin-top 8}}
       [react/view {:padding-horizontal 16}

src/status_im/ui/screens/wallet/settings/views.cljs

@@ -1,25 +1,22 @@
 (ns status-im.ui.screens.wallet.settings.views
   (:require [re-frame.core :as re-frame]
-            [status-im.ethereum.core :as ethereum]
             [status-im.i18n :as i18n]
             [status-im.ui.components.chat-icon.screen :as chat-icon]
-            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.styles :as components.styles]
-            [status-im.ui.components.toolbar.actions :as actions]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.list-item.views :as list-item]
-            [reagent.core :as reagent])
+            [reagent.core :as reagent]
+            [status-im.ui.components.topbar :as topbar])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn toolbar []
-  [toolbar/toolbar nil
+  [topbar/topbar
-   [toolbar/nav-button
+   {:title :t/wallet-assets
-    (actions/back #(re-frame/dispatch
+    :navigation
-                    [:wallet.settings.ui/navigate-back-pressed]))]
+    {:icon                :main-icons/back
-   [toolbar/content-title
+     :accessibility-label :back-button
-    (i18n/label :t/wallet-assets)]])
+     :handler             #(re-frame/dispatch [:wallet.settings.ui/navigate-back-pressed])}}])
 
 (defn hide-sheet-and-dispatch [event]
   (re-frame/dispatch [:bottom-sheet/hide-sheet])
@@ -97,44 +94,4 @@
         :render-section-header-fn
         (fn [{:keys [title data]}]
           [list-item/list-item {:type :section-header :title title}])
-        :render-fn render-token-wrapper}]]]))
+        :render-fn render-token-wrapper}]]]))
-
-(defn- create-payload [address]
-  {:address (ethereum/normalized-hex address)})
-
-(defview settings-hook []
-  (letsubs [{:keys [label view on-close]} [:get-screen-params :wallet-settings-hook]
-            {address :address} [:multiaccount]]
-    [react/keyboard-avoiding-view {:style {:flex 1 :background-color colors/blue}}
-     [toolbar/toolbar
-      {:style {:border-bottom-color colors/white-transparent-10}}
-      [toolbar/nav-button
-       (actions/back-white
-        #(re-frame/dispatch [:wallet.settings.ui/navigate-back-pressed
-                             (when (fn? on-close)
-                               (on-close (create-payload address)))]))]
-      [toolbar/content-title {:color colors/white}
-       label]]
-     [view (create-payload address)]]))
-
-(defn- setting->action [address {:keys [label on-open] :as m}]
-  {:label  label
-   :action #(do
-              (when (fn? on-open)
-                (on-open (create-payload address)))
-              (re-frame/dispatch [:navigate-to :wallet-settings-hook m]))})
-
-(defview toolbar-view []
-  (letsubs [settings [:wallet/settings]
-            {address :address} [:multiaccount]]
-    [toolbar/toolbar {:style {:background-color    colors/blue
-                              :border-bottom-width 0}}
-     nil
-     [toolbar/content-wrapper]
-     [toolbar/actions
-      [{:icon      :main-icons/more
-        :icon-opts {:color               colors/white
-                    :accessibility-label :options-menu-button}
-        :options   (into [{:label  (i18n/label :t/wallet-manage-assets)
-                           :action #(re-frame/dispatch [:navigate-to :wallet-settings-assets])}]
-                         (map #(setting->action address %) settings))}]]]))

src/status_im/ui/screens/wallet/transactions/views.cljs

@@ -7,26 +7,10 @@
             [status-im.ui.components.styles :as components.styles]
             [status-im.ui.components.toolbar.actions :as actions]
             [status-im.ui.components.toolbar.view :as toolbar]
-            [status-im.ui.screens.wallet.transactions.styles :as styles])
+            [status-im.ui.screens.wallet.transactions.styles :as styles]
+            [status-im.ui.components.topbar :as topbar])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
-(defn history-action
-  [all-filters?]
-  (cond-> {:icon      :main-icons/filter
-           :icon-opts {:accessibility-label :filters-button}
-           :handler   #(re-frame/dispatch [:navigate-to :wallet-transactions-filter])}
-
-    (not all-filters?)
-    (assoc-in [:icon-opts :overlay-style] styles/corner-dot)))
-
-(defn- toolbar-view
-  [all-filters?]
-  [toolbar/toolbar nil
-   toolbar/default-nav-back
-   [toolbar/content-title (i18n/label :t/transactions-history)]
-   [toolbar/actions
-    [(history-action all-filters?)]]])
-
 (defn- transaction-icon
   [icon-key background-color color]
   {:icon      icon-key
@@ -113,17 +97,11 @@
   (letsubs [{:keys [filters all-filters? on-touch-select-all]}
             [:wallet.transactions.filters/screen]]
     [react/view styles/filter-container
-     [toolbar/toolbar {}
+     [topbar/topbar {:title       :t/transactions-filter-title
-      [toolbar/nav-clear-text
+                     :navigation  {:label   (i18n/label :t/done)
-       {:accessibility-label :done-button}
+                                   :handler #(re-frame/dispatch [:navigate-back])}
-       (i18n/label :t/done)]
+                     :accessories [{:label   :t/transactions-filter-select-all
-      [toolbar/content-title
+                                    :handler on-touch-select-all}]}]
-       (i18n/label :t/transactions-filter-title)]
-      [toolbar/text-action
-       {:handler             on-touch-select-all
-        :disabled?           all-filters?
-        :accessibility-label :select-all-button}
-       (i18n/label :t/transactions-filter-select-all)]]
      [react/view
       {:style (merge {:background-color :white} components.styles/flex)}
       [list/section-list {:sections [{:title
@@ -221,6 +199,7 @@
              :as transaction}
             [:wallet.transactions.details/screen hash address]]
     [react/view {:style components.styles/flex}
+     ;;TODO options should be replaced by bottom sheet ,and topbar should be used here
      [toolbar/toolbar {}
       toolbar/default-nav-back
       [toolbar/content-title (i18n/label :t/transaction-details)]