From f90fe2f04ddd8fa8abc15eb2cb2c0af99837587a Mon Sep 17 00:00:00 2001
From: Andrey Shovkoplyas <motor4ik@gmail.com>
Date: Fri, 20 Dec 2019 11:30:41 +0100
Subject: [PATCH] topbar. first iteration

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
---
 fiddle/deps.edn                               |  1 -
 fiddle/src/fiddle/views/main.cljs             |  4 +-
 fiddle/src/fiddle/views/toolbar.cljs          | 16 ++--
 fiddle/src/fiddle/views/topbar.cljs           | 33 +++++++
 .../network/ui/edit_network/views.cljs        |  5 +-
 .../network/ui/network_details/views.cljs     |  5 +-
 src/status_im/network/ui/views.cljs           | 11 +--
 src/status_im/ui/components/toolbar/view.cljs |  9 +-
 src/status_im/ui/components/topbar.cljs       | 55 +++++++++++
 src/status_im/ui/screens/about_app/views.cljs |  7 +-
 .../ui/screens/add_new/new_chat/views.cljs    |  5 +-
 .../screens/add_new/new_public_chat/view.cljs |  7 +-
 .../ui/screens/advanced_settings/views.cljs   |  6 +-
 .../edit_bootnode/views.cljs                  |  5 +-
 .../ui/screens/bootnodes_settings/views.cljs  | 17 +---
 .../ui/screens/contacts_list/views.cljs       |  9 +-
 .../ui/screens/currency_settings/views.cljs   |  6 +-
 .../ui/screens/dapps_permissions/views.cljs   |  8 +-
 src/status_im/ui/screens/ens/views.cljs       | 16 ++--
 .../ui/screens/fleet_settings/views.cljs      |  7 +-
 .../authentication_method/views.cljs          |  7 +-
 .../ui/screens/hardwallet/connect/views.cljs  | 15 ++-
 .../ui/screens/hardwallet/pin/views.cljs      | 16 ++--
 .../ui/screens/hardwallet/settings/views.cljs | 10 +-
 .../ui/screens/help_center/views.cljs         |  8 +-
 src/status_im/ui/screens/intro/views.cljs     | 91 ++++++++-----------
 .../ui/screens/keycard/onboarding/views.cljs  | 27 ++----
 .../ui/screens/keycard/recovery/views.cljs    | 35 ++-----
 src/status_im/ui/screens/keycard/views.cljs   | 40 +++-----
 .../ui/screens/language_settings/views.cljs   |  8 +-
 .../ui/screens/log_level_settings/views.cljs  |  9 +-
 .../screens/mobile_network_settings/view.cljs |  6 +-
 .../ui/screens/multiaccounts/login/views.cljs | 15 +--
 .../screens/notifications_settings/views.cljs |  8 +-
 .../edit_mailserver/views.cljs                |  5 +-
 .../offline_messaging_settings/views.cljs     | 15 ++-
 src/status_im/ui/screens/pairing/views.cljs   |  8 +-
 .../privacy_and_security_settings/views.cljs  |  6 +-
 .../ui/screens/profile/group_chat/views.cljs  | 27 ++----
 .../screens/profile/photo_capture/views.cljs  |  8 +-
 src/status_im/ui/screens/routing/screens.cljs |  1 -
 src/status_im/ui/screens/stickers/views.cljs  |  7 +-
 .../ui/screens/sync_settings/views.cljs       |  6 +-
 .../ui/screens/wallet/account/views.cljs      | 21 ++---
 .../wallet/account_settings/views.cljs        | 22 +++--
 .../ui/screens/wallet/add_new/views.cljs      | 10 +-
 .../ui/screens/wallet/collectibles/views.cljs |  8 +-
 .../screens/wallet/custom_tokens/views.cljs   | 12 +--
 .../ui/screens/wallet/settings/views.cljs     | 61 ++-----------
 .../ui/screens/wallet/transactions/views.cljs | 37 ++------
 50 files changed, 343 insertions(+), 438 deletions(-)
 create mode 100644 fiddle/src/fiddle/views/topbar.cljs
 create mode 100644 src/status_im/ui/components/topbar.cljs

diff --git a/fiddle/deps.edn b/fiddle/deps.edn
index 94846a42aa..8044d53774 100644
--- a/fiddle/deps.edn
+++ b/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"]
diff --git a/fiddle/src/fiddle/views/main.cljs b/fiddle/src/fiddle/views/main.cljs
index 7b771b1603..a43c0155a7 100644
--- a/fiddle/src/fiddle/views/main.cljs
+++ b/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"])]))
\ No newline at end of file
diff --git a/fiddle/src/fiddle/views/toolbar.cljs b/fiddle/src/fiddle/views/toolbar.cljs
index 7eb93d2c63..da42f27f1f 100644
--- a/fiddle/src/fiddle/views/toolbar.cljs
+++ b/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"}}])]]])
\ No newline at end of file
+     (snippets/code-snippet [toolbar/toolbar {:center {:label "Label"}}])]]])
\ No newline at end of file
diff --git a/fiddle/src/fiddle/views/topbar.cljs b/fiddle/src/fiddle/views/topbar.cljs
new file mode 100644
index 0000000000..d389927c0d
--- /dev/null
+++ b/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"}])]]])
\ No newline at end of file
diff --git a/src/status_im/network/ui/edit_network/views.cljs b/src/status_im/network/ui/edit_network/views.cljs
index 7b47078edc..0e9055acaa 100644
--- a/src/status_im/network/ui/edit_network/views.cljs
+++ b/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
diff --git a/src/status_im/network/ui/network_details/views.cljs b/src/status_im/network/ui/network_details/views.cljs
index 2c7ea4d1a3..e72f568879 100644
--- a/src/status_im/network/ui/network_details/views.cljs
+++ b/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
diff --git a/src/status_im/network/ui/views.cljs b/src/status_im/network/ui/views.cljs
index 3bb651fdf2..8d7582b96b 100644
--- a/src/status_im/network/ui/views.cljs
+++ b/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.toolbar.view :as toolbar])
+            [status-im.ui.components.topbar :as topbar])
   (: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 {}
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/network-settings)]
-      [toolbar/actions
-       [(toolbar.actions/add false #(re-frame/dispatch [::network/add-network-pressed]))]]]
+     [topbar/topbar {:title       :t/network-settings
+                     :accessories [{:icon    :main-icons/add
+                                    :handler #(re-frame/dispatch [::network/add-network-pressed])}]}]
      [react/view styles/wrapper
       [list/section-list {:sections           [{:title (i18n/label :t/main-networks)
                                                 :key :mainnet
diff --git a/src/status_im/ui/components/toolbar/view.cljs b/src/status_im/ui/components/toolbar/view.cljs
index c99875de9a..e42b71943b 100644
--- a/src/status_im/ui/components/toolbar/view.cljs
+++ b/src/status_im/ui/components/toolbar/view.cljs
@@ -162,11 +162,4 @@
                  :height          styles/toolbar-height
                  :justify-content :center
                  :align-items     :center}
-     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])))
+     action-items]]))
\ No newline at end of file
diff --git a/src/status_im/ui/components/topbar.cljs b/src/status_im/ui/components/topbar.cljs
new file mode 100644
index 0000000000..520bbc05a5
--- /dev/null
+++ b/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)]])])))
\ No newline at end of file
diff --git a/src/status_im/ui/screens/about_app/views.cljs b/src/status_im/ui/screens/about_app/views.cljs
index 38a6d36b7d..05e4462c8a 100644
--- a/src/status_im/ui/screens/about_app/views.cljs
+++ b/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
-      (i18n/label :t/about-app)]
+     [topbar/topbar {:title :t/about-app}]
      [list/flat-list
       {:data      (data app-version node-version)
        :key-fn    (fn [_ i] (str i))
diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs
index 63c0be5eb7..8c4c8d8d51 100644
--- a/src/status_im/ui/screens/add_new/new_chat/views.cljs
+++ b/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 %])
diff --git a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs
index 12e99fa279..475f994aec 100644
--- a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs
+++ b/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
-      (i18n/label :t/new-public-group-chat)
-      true]
+     [topbar/topbar {:title :t/new-public-group-chat :modal? true}]
      [react/scroll-view {:style {:flex 1}}
       [react/view {:padding-horizontal 16}
        [react/view {:align-items :center :padding-vertical 12}
diff --git a/src/status_im/ui/screens/advanced_settings/views.cljs b/src/status_im/ui/screens/advanced_settings/views.cljs
index d9acfeb8cd..2b9d61d6d7 100644
--- a/src/status_im/ui/screens/advanced_settings/views.cljs
+++ b/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
-      (i18n/label :t/advanced)]
+     [topbar/topbar {:title :t/advanced}]
      [list/flat-list
       {:data      (flat-list-data
                    network-name current-log-level
diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs
index 8bbb584d77..25dd6ad678 100644
--- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs
+++ b/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
diff --git a/src/status_im/ui/screens/bootnodes_settings/views.cljs b/src/status_im/ui/screens/bootnodes_settings/views.cljs
index 63ce15f49d..9b519d3bee 100644
--- a/src/status_im/ui/screens/bootnodes_settings/views.cljs
+++ b/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 {}
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/bootnodes-settings)]
-      [toolbar/actions
-       [(toolbar.actions/add false #(navigate-to-add-bootnode nil))]]]
+     [topbar/topbar {:title       :t/bootnodes-settings
+                     :accessories [{:icon    :main-icons/add
+                                    :handler #(navigate-to-add-bootnode nil)}]}]
      [react/view styles/switch-container
       [profile.components/settings-switch-item
        {:label-kw  :t/bootnodes-enabled
diff --git a/src/status_im/ui/screens/contacts_list/views.cljs b/src/status_im/ui/screens/contacts_list/views.cljs
index 9cfc6a5c58..3c9863492d 100644
--- a/src/status_im/ui/screens/contacts_list/views.cljs
+++ b/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.toolbar.view :as toolbar.view])
+            [status-im.ui.components.topbar :as topbar])
   (: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
-      toolbar.view/default-nav-back
-      (toolbar.view/content-title (i18n/label :t/contacts))]
+     [topbar/topbar {:title :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
diff --git a/src/status_im/ui/screens/currency_settings/views.cljs b/src/status_im/ui/screens/currency_settings/views.cljs
index 6674988e2a..e628e53bd2 100644
--- a/src/status_im/ui/screens/currency_settings/views.cljs
+++ b/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
-      (i18n/label :t/main-currency)]
+     [topbar/topbar {:title :t/main-currency}]
      [react/view styles/wrapper
       [list/flat-list {:data      (->> constants/currencies
                                        vals
diff --git a/src/status_im/ui/screens/dapps_permissions/views.cljs b/src/status_im/ui/screens/dapps_permissions/views.cljs
index dfeecffc57..a4e55e5e11 100644
--- a/src/status_im/ui/screens/dapps_permissions/views.cljs
+++ b/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
-      (i18n/label :t/dapps-permissions)]
+     [topbar/topbar {:title :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))
diff --git a/src/status_im/ui/screens/ens/views.cljs b/src/status_im/ui/screens/ens/views.cljs
index 928b8f7a8a..57e7842493 100644
--- a/src/status_im/ui/screens/ens/views.cljs
+++ b/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
-   [toolbar/nav-button (actions/back #(re-frame/dispatch [:navigate-back]))]
-   [toolbar/content-title (i18n/label :t/ens-your-username)]])
+  [topbar/topbar {:title :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
-      (i18n/label :t/ens-terms-registration)]
+     [topbar/topbar {:title :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
-      name]
+     [topbar/topbar {:title 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
-      (i18n/label :t/ens-usernames)]
+     [topbar/topbar {:title :t/ens-usernames}]
      (if (seq names)
        [registered names multiaccount show?]
        [welcome])]))
diff --git a/src/status_im/ui/screens/fleet_settings/views.cljs b/src/status_im/ui/screens/fleet_settings/views.cljs
index 8b798503ed..6d430514ba 100644
--- a/src/status_im/ui/screens/fleet_settings/views.cljs
+++ b/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 {}
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/fleet-settings)]]
+     [topbar/topbar {:title :t/fleet-settings}]
      [react/view styles/wrapper
       [list/flat-list {:data               (fleets custom-fleets)
                        :default-separator? false
diff --git a/src/status_im/ui/screens/hardwallet/authentication_method/views.cljs b/src/status_im/ui/screens/hardwallet/authentication_method/views.cljs
index a437b908d6..c968153c19 100644
--- a/src/status_im/ui/screens/hardwallet/authentication_method/views.cljs
+++ b/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 {}
-     toolbar/default-nav-back
-     nil]
+    [topbar/topbar]
     [common/separator]
     [react/view styles/choose-authentication-method
      [react/view styles/lock-image-container
diff --git a/src/status_im/ui/screens/hardwallet/connect/views.cljs b/src/status_im/ui/screens/hardwallet/connect/views.cljs
index 9a8e5463db..a4773b3914 100644
--- a/src/status_im/ui/screens/hardwallet/connect/views.cljs
+++ b/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 {}
-       [toolbar/nav-button (assoc toolbar.actions/default-back
-                                  :handler
-                                  #(re-frame/dispatch [:hardwallet.ui/hardwallet-connect-navigate-back-button-clicked]))]
-       nil]
+      [topbar/topbar
+       {:navigation
+        {:icon    :main-icons/back
+         :accessibility-label :back-button
+         :handler #(re-frame/dispatch [:hardwallet.ui/hardwallet-connect-navigate-back-button-clicked])}}]
       [react/view styles/hardwallet-connect
        (if nfc-enabled?
          [nfc-enabled]
diff --git a/src/status_im/ui/screens/hardwallet/pin/views.cljs b/src/status_im/ui/screens/hardwallet/pin/views.cljs
index 457f7419ff..74c639d600 100644
--- a/src/status_im/ui/screens/hardwallet/pin/views.cljs
+++ b/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
-      nil
-      [toolbar/nav-button (assoc toolbar.actions/default-back
-                                 :handler
-                                 #(re-frame/dispatch [:hardwallet.ui/enter-pin-navigate-back-button-clicked]))]
-      nil]
+     [topbar/topbar
+      {:navigation
+       {:icon    :main-icons/back
+        :accessibility-label :back-button
+        :handler #(re-frame/dispatch [:hardwallet.ui/enter-pin-navigate-back-button-clicked])}}]
      (if (zero? pin-retry-counter)
        [pin-view {:pin               pin
                   :retry-counter     (when (< puk-retry-counter puk-retries) puk-retry-counter)
diff --git a/src/status_im/ui/screens/hardwallet/settings/views.cljs b/src/status_im/ui/screens/hardwallet/settings/views.cljs
index 1369f52447..65a1fc6955 100644
--- a/src/status_im/ui/screens/hardwallet/settings/views.cljs
+++ b/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
-      (i18n/label :t/reset-card)]
+     [topbar/topbar {:title :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
-      (i18n/label :t/status-keycard)]
+     [topbar/topbar {:title :t/status-keycard}]
      [react/view {:flex             1
                   :background-color :white}
       [react/view {:margin-top  47
diff --git a/src/status_im/ui/screens/help_center/views.cljs b/src/status_im/ui/screens/help_center/views.cljs
index 350a0477e9..c3de50bb06 100644
--- a/src/status_im/ui/screens/help_center/views.cljs
+++ b/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
-    (i18n/label :t/need-help)]
+   [topbar/topbar {:title :t/need-help}]
    [list/flat-list
     {:data      data
      :key-fn    (fn [_ i] (str i))
diff --git a/src/status_im/ui/screens/intro/views.cljs b/src/status_im/ui/screens/intro/views.cljs
index cad1932504..ff8895c049 100644
--- a/src/status_im/ui/screens/intro/views.cljs
+++ b/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
-      {:style {:border-bottom-width 0
-               :margin-top 16}}
-      (toolbar/nav-button
-       (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
-      nil]
+     [topbar/topbar
+      {:navigation
+       {:icon    :main-icons/back
+        :accessibility-label :back-button
+        :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
      [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
-      {:style {:border-bottom-width 0
-               :margin-left 16
-               :margin-top 16}}
-      (toolbar/nav-text
-       {:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}
-       (i18n/label :t/cancel))
-      nil]
+     [topbar/topbar
+      {:navigation
+       {:label    :t/cancel
+        :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
      [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
-      {:style (merge {:border-bottom-width 0
-                      :margin-top 16}
-                     (when (:recovering? wizard-state)
-                       {:margin-left 16}))}
-      (if (:recovering? wizard-state)
-        (toolbar/nav-text
-         {:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}
-         (i18n/label :t/cancel))
-        (toolbar/nav-button
-         (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back]))))
-      nil]
+     [topbar/topbar
+      {:navigation
+       (if (:recovering? wizard-state)
+         {:label   :t/cancel
+          :accessibility-label :back-button
+          :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}
+         {:icon    :main-icons/back
+          :accessibility-label :back-button
+          :handler #(re-frame/dispatch [:intro-wizard/navigate-back])})}]
      [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
-      {:style {:border-bottom-width 0
-               :margin-top 16}}
-      (toolbar/nav-button
-       (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
-      nil]
+     [topbar/topbar
+      {:navigation
+       {:icon    :main-icons/back
+        :accessibility-label :back-button
+        :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
      [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
-      {:style {:border-bottom-width 0
-               :margin-top 16}}
+     [topbar/topbar
       (when-not (:processing? wizard-state)
-        (toolbar/nav-button
-         (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back]))))
-      nil]
+        {:navigation
+         {:icon    :main-icons/back
+          :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}}
-      (toolbar/nav-button
-       (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
-      nil]
+     [topbar/topbar
+      {:navigation
+       {:icon    :main-icons/back
+        :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
-      {:style {:border-bottom-width 0
-               :margin-top 16}}
-      (toolbar/nav-button
-       (actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
-      nil]
+     [topbar/topbar
+      {:navigation
+       {:icon    :main-icons/back
+        :accessibility-label :back-button
+        :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
      [react/view {:style {:flex 1
                           :justify-content :space-between}}
       [top-bar {:step :recovery-success}]
diff --git a/src/status_im/ui/screens/keycard/onboarding/views.cljs b/src/status_im/ui/screens/keycard/onboarding/views.cljs
index 6d240fd3aa..568d1baadc 100644
--- a/src/status_im/ui/screens/keycard/onboarding/views.cljs
+++ b/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
-      {:transparent? true
-       :style        {:margin-top 32}}
-      toolbar/default-nav-back
-      nil]
+     [topbar/topbar]
      [react/view {:flex            1
                   :flex-direction  :column
                   :justify-content :space-between
@@ -103,11 +100,7 @@
 
 (defn start []
   [react/view styles/container
-   [toolbar/toolbar
-    {:transparent? true
-     :style        {:margin-top 32}}
-    toolbar/default-nav-back
-    nil]
+   [topbar/topbar]
    [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
-       :style        {:margin-top 32}}
+      {:transparent? true}
       [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
-       :style        {:margin-top 32}}
+      {:transparent? true}
       [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
-       :style        {:margin-top 32}}
+      {:transparent? true}
       [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
-         :style        {:margin-top 32}}
+        {:transparent? true}
         [toolbar/nav-text
          {:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
           :style   {:padding-left 21}}
diff --git a/src/status_im/ui/screens/keycard/recovery/views.cljs b/src/status_im/ui/screens/keycard/recovery/views.cljs
index 80e99cf5af..d40906ad46 100644
--- a/src/status_im/ui/screens/keycard/recovery/views.cljs
+++ b/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
-    {:transparent? true
-     :style        {:margin-top 32}}
-    (toolbar/nav-button
-     (actions/back #(re-frame/dispatch [:navigate-back])))
-    nil]
+   [topbar/topbar]
    [react/view {:flex            1
                 :flex-direction  :column
                 :justify-content :space-between
@@ -76,11 +71,7 @@
 
 (defn start []
   [react/view styles/container
-   [toolbar/toolbar
-    {:transparent? true
-     :style        {:margin-top 32}}
-    toolbar/default-nav-back
-    nil]
+   [topbar/topbar]
    [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
-       :style        {:margin-top 32}}
+      {:transparent? true}
       [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
-       :style        {:margin-top 32}}
+      {:transparent? true}
       [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
-      {:transparent? true
-       :style        {:margin-top 32}}
-      nil
-      nil]
+     [topbar/topbar {:navigation :none}]
      [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
-      {:transparent? true
-       :style        {:margin-top 32}}
-      nil
-      nil]
+     [topbar/topbar {:navigation :none}]
      [react/view {:flex            1
                   :flex-direction  :column
                   :justify-content :space-between
diff --git a/src/status_im/ui/screens/keycard/views.cljs b/src/status_im/ui/screens/keycard/views.cljs
index e334c693d1..100d4d2c1d 100644
--- a/src/status_im/ui/screens/keycard/views.cljs
+++ b/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
-    {:transparent? true
-     :style        {:margin-top 32}}
-    toolbar/default-nav-back
-    nil]
+   [topbar/topbar]
    [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
-                     :style        {:margin-top 32}}
-    nil nil]
+   [topbar/topbar {:navigation :none}]
    [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
-      {:transparent? true}
-      (when multiple-multiaccounts?
-        [toolbar/nav-button
-         (actions/back
-          #(re-frame/dispatch [:keycard.login.pin.ui/cancel-pressed]))])
-      nil
-      [react/view {:margin-right 20}
-       [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}}]]]]
+     [topbar/topbar
+      (cond-> {:accessories [{:icon    :main-icons/more
+                              :handler #(re-frame/dispatch [:keycard.login.pin.ui/more-icon-pressed])}]}
+        multiple-multiaccounts?
+        (assoc :navigation
+               {:icon    :main-icons/back
+                :accessibility-label :back-button
+                :handler #(re-frame/dispatch [:keycard.login.pin.ui/cancel-pressed])}))]
      [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
-         :style        {:margin-top 32}}
+        {:transparent? true}
         nil
         [react/text {:style {:color colors/gray}}
          (i18n/label :t/step-i-of-n {:number 2
diff --git a/src/status_im/ui/screens/language_settings/views.cljs b/src/status_im/ui/screens/language_settings/views.cljs
index 63247d59c0..d26c74668c 100644
--- a/src/status_im/ui/screens/language_settings/views.cljs
+++ b/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]
-            [status-im.ui.components.colors :as colors]
+  (:require [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
-    (i18n/label :t/language)]])
+   [topbar/topbar {:title :t/language}]])
diff --git a/src/status_im/ui/screens/log_level_settings/views.cljs b/src/status_im/ui/screens/log_level_settings/views.cljs
index b1b281b6fd..b4290b7624 100644
--- a/src/status_im/ui/screens/log_level_settings/views.cljs
+++ b/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 {}
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/log-level-settings)]]
+     [topbar/topbar {:title :t/log-level-settings}]
      [react/view styles/wrapper
       [list/flat-list {:data               log-levels
                        :default-separator? false
diff --git a/src/status_im/ui/screens/mobile_network_settings/view.cljs b/src/status_im/ui/screens/mobile_network_settings/view.cljs
index cf4f387cd5..4dc9c25a8a 100644
--- a/src/status_im/ui/screens/mobile_network_settings/view.cljs
+++ b/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}
diff --git a/src/status_im/ui/screens/multiaccounts/login/views.cljs b/src/status_im/ui/screens/multiaccounts/login/views.cljs
index 3889358ee5..eb833141ae 100644
--- a/src/status_im/ui/screens/multiaccounts/login/views.cljs
+++ b/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
-   {:style {:border-bottom-width 0
-            :margin-top          0}}
-   (when can-navigate-back?
-     [toolbar/nav-button (act/back #(re-frame/dispatch [:navigate-reset :multiaccounts]))])
-   nil])
+  [topbar/topbar
+   {:navigation (if can-navigate-back?
+                  {:icon                :main-icons/back
+                   :accessibility-label :back-button
+                   :handler             #(re-frame/dispatch [:navigate-reset :multiaccounts])}
+                  :none)}])
 
 (defn login-multiaccount [password-text-input]
   (.blur password-text-input)
diff --git a/src/status_im/ui/screens/notifications_settings/views.cljs b/src/status_im/ui/screens/notifications_settings/views.cljs
index 1e713bf980..e52c90ecb0 100644
--- a/src/status_im/ui/screens/notifications_settings/views.cljs
+++ b/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]
-            [status-im.ui.components.colors :as colors]
+  (:require [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
-    (i18n/label :t/notifications)]])
+   [topbar/topbar {:title :t/notifications}]])
 
diff --git a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs
index 365b84cec3..33dfff1508 100644
--- a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs
+++ b/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
diff --git a/src/status_im/ui/screens/offline_messaging_settings/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/views.cljs
index b862083a9e..80d011ba3e 100644
--- a/src/status_im/ui/screens/offline_messaging_settings/views.cljs
+++ b/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.components.toolbar.actions :as toolbar.actions]
-            [status-im.ui.screens.offline-messaging-settings.styles :as styles]))
+            [status-im.ui.screens.offline-messaging-settings.styles :as styles]
+            [status-im.ui.components.topbar :as topbar]))
 
 (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 {}
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/offline-messaging-settings)]
-      [toolbar/actions
-       [(toolbar.actions/add false #(re-frame/dispatch [:mailserver.ui/add-pressed]))]]]
+     [topbar/topbar
+      {:title       :t/offline-messaging-settings
+       :accessories [{:icon    :main-icons/add
+                      :handler #(re-frame/dispatch [:mailserver.ui/add-pressed])}]}]
      [react/view styles/wrapper
       [pinned-state preferred-mailserver-id]
       [list/flat-list {:data               (vals mailservers)
diff --git a/src/status_im/ui/screens/pairing/views.cljs b/src/status_im/ui/screens/pairing/views.cljs
index 287fc39ee1..7ea4901991 100644
--- a/src/status_im/ui/screens/pairing/views.cljs
+++ b/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 {}
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/devices)]]
+     [topbar/topbar {:title :t/devices}]
      [react/scroll-view {:style {:background-color :white}}
       (if (string/blank? (-> installations first :name))
         [edit-installation-name]
diff --git a/src/status_im/ui/screens/privacy_and_security_settings/views.cljs b/src/status_im/ui/screens/privacy_and_security_settings/views.cljs
index 7d5f056750..376fa590f0 100644
--- a/src/status_im/ui/screens/privacy_and_security_settings/views.cljs
+++ b/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
-      (i18n/label :t/privacy-and-security)]
+     [topbar/topbar {:title :t/privacy-and-security}]
      [list/flat-list
       {:data      (list-data mnemonic settings supported-biometric-auth
                              (= auth-method "biometric") keycard-multiaccount?)
diff --git a/src/status_im/ui/screens/profile/group_chat/views.cljs b/src/status_im/ui/screens/profile/group_chat/views.cljs
index 03368993db..17c99b6cd6 100644
--- a/src/status_im/ui/screens/profile/group_chat/views.cljs
+++ b/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 {}
-   toolbar/default-nav-back
-   nil
+  [topbar/topbar
    (when admin?
-     [toolbar/text-action {:handler #(re-frame/dispatch [:group-chat-profile/start-editing])
-                           :accessibility-label :edit-button}
-      (i18n/label :t/edit)])])
-
-(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)]])
+     {:accessories
+      [{:label               :t/edit
+        :accessibility-label :edit-button
+        :handler             #(re-frame/dispatch [:group-chat-profile/start-editing])}]})])
 
 (defn member-actions [chat-id member us-admin?]
   (concat
diff --git a/src/status_im/ui/screens/profile/photo_capture/views.cljs b/src/status_im/ui/screens/profile/photo_capture/views.cljs
index 15bc04d930..deeb9ec297 100644
--- a/src/status_im/ui/screens/profile/photo_capture/views.cljs
+++ b/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 {}
-      toolbar/default-nav-back
-      [toolbar/content-title (i18n/label :t/image-source-title)]]
+     [topbar/topbar {:title :t/image-source-title}]
      [camera/camera {:style         {:flex 1}
                      ;:aspect        (:fill camera/aspects)
                      :captureQuality "480p"
diff --git a/src/status_im/ui/screens/routing/screens.cljs b/src/status_im/ui/screens/routing/screens.cljs
index b454fad2fe..72305cba83 100644
--- a/src/status_im/ui/screens/routing/screens.cljs
+++ b/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
diff --git a/src/status_im/ui/screens/stickers/views.cljs b/src/status_im/ui/screens/stickers/views.cljs
index e3c3737853..aa930d4d29 100644
--- a/src/status_im/ui/screens/stickers/views.cljs
+++ b/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}
diff --git a/src/status_im/ui/screens/sync_settings/views.cljs b/src/status_im/ui/screens/sync_settings/views.cljs
index 97c98ef6d6..bd0bd48c68 100644
--- a/src/status_im/ui/screens/sync_settings/views.cljs
+++ b/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
-      (i18n/label :t/sync-settings)]
+     [topbar/topbar {:title :t/sync-settings}]
      [list/flat-list
       {:data      (list-data mailserver-id syncing-on-mobile-network?)
        :key-fn    (fn [_ i] (str i))
diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs
index 1fe8bb004a..eab50b5c78 100644
--- a/src/status_im/ui/screens/wallet/account/views.cljs
+++ b/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
-   [toolbar/toolbar {:transparent? true}
-    toolbar/default-nav-back
-    [toolbar/content-title title]
-    [toolbar/actions
-     [{:icon      :main-icons/more
-       :icon-opts {:color :black}
-       :handler   #(re-frame/dispatch [:bottom-sheet/show-sheet
-                                       {:content        sheets/account-settings
-                                        :content-height 60}])}]]]])
+  [topbar/topbar
+   {:title title
+    :accessories
+    [{:icon    :main-icons/more
+      :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}}
diff --git a/src/status_im/ui/screens/wallet/account_settings/views.cljs b/src/status_im/ui/screens/wallet/account_settings/views.cljs
index bffdd7d905..318899522b 100644
--- a/src/status_im/ui/screens/wallet/account_settings/views.cljs
+++ b/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/default-nav-back
-      [topbar/content-title (i18n/label :t/account-settings)]
-      (when (and @new-account (not= "" (:name @new-account)))
-        [button/button {:type :secondary :label (i18n/label :t/apply)
-                        :on-press #(do
-                                     (re-frame/dispatch [:wallet.accounts/save-account account @new-account])
-                                     (reset! new-account nil))}])]
+     [topbar/topbar
+      (cond-> {:title :t/account-settings}
+        (and @new-account (not= "" (:name @new-account)))
+        (assoc :accessories [{:label :t/apply
+                              :handler
+                              #(do
+                                 (re-frame/dispatch [:wallet.accounts/save-account
+                                                     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}
diff --git a/src/status_im/ui/screens/wallet/add_new/views.cljs b/src/status_im/ui/screens/wallet/add_new/views.cljs
index fc6ea503e8..0b444bceb1 100644
--- a/src/status_im/ui/screens/wallet/add_new/views.cljs
+++ b/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}
diff --git a/src/status_im/ui/screens/wallet/collectibles/views.cljs b/src/status_im/ui/screens/wallet/collectibles/views.cljs
index ef2147e87f..7d267fb45f 100644
--- a/src/status_im/ui/screens/wallet/collectibles/views.cljs
+++ b/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 {}
-       toolbar/default-nav-back
-       [toolbar/content-title name]]
+      [topbar/topbar {:title name}]
       (cond
         (nil? collectibles)
         [react/view {:style styles/loading-indicator}
diff --git a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs
index 6aa5f7faa6..69f0025e32 100644
--- a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs
+++ b/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
-      toolbar/default-nav-back
-      [toolbar/content-title
-       (i18n/label :t/add-custom-token)]]
+     [topbar/topbar {:title :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
-      toolbar/default-nav-back
-      [toolbar/content-title name]]
+     [topbar/topbar {:title name}]
      [react/scroll-view {:keyboard-should-persist-taps :handled
                          :style {:flex 1 :margin-top 8}}
       [react/view {:padding-horizontal 16}
diff --git a/src/status_im/ui/screens/wallet/settings/views.cljs b/src/status_im/ui/screens/wallet/settings/views.cljs
index 43fedf5282..0ee4bd1425 100644
--- a/src/status_im/ui/screens/wallet/settings/views.cljs
+++ b/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
-   [toolbar/nav-button
-    (actions/back #(re-frame/dispatch
-                    [:wallet.settings.ui/navigate-back-pressed]))]
-   [toolbar/content-title
-    (i18n/label :t/wallet-assets)]])
+  [topbar/topbar
+   {:title :t/wallet-assets
+    :navigation
+    {:icon                :main-icons/back
+     :accessibility-label :back-button
+     :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}]]]))
-
-(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))}]]]))
+        :render-fn render-token-wrapper}]]]))
\ No newline at end of file
diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs
index d7a7441363..48d2cdfd30 100644
--- a/src/status_im/ui/screens/wallet/transactions/views.cljs
+++ b/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 {}
-      [toolbar/nav-clear-text
-       {:accessibility-label :done-button}
-       (i18n/label :t/done)]
-      [toolbar/content-title
-       (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)]]
+     [topbar/topbar {:title       :t/transactions-filter-title
+                     :navigation  {:label   (i18n/label :t/done)
+                                   :handler #(re-frame/dispatch [:navigate-back])}
+                     :accessories [{:label   :t/transactions-filter-select-all
+                                    :handler on-touch-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)]