diff --git a/.clj-kondo/config.edn b/.clj-kondo/config.edn
index fa20942ef3e..498e1192046 100644
--- a/.clj-kondo/config.edn
+++ b/.clj-kondo/config.edn
@@ -62,15 +62,7 @@
                 ;; https://github.com/borkdude/clj-kondo/issues/867
                 :unresolved-symbol             {:exclude [PersistentPriorityMap.EMPTY
                                                           number
-                                                          status-im.test-helpers/restore-app-db
-
-                                                          ;; When the namespace
-                                                          ;; matcher-combinators.test is loaded, it
-                                                          ;; extends cljs.test/is macro with
-                                                          ;; directives `match?` and
-                                                          ;; `thrown-match?`.
-                                                          match?
-                                                          thrown-match?]}
+                                                          status-im.test-helpers/restore-app-db]}
                 :unresolved-var                {:level :error}
                 :unsorted-required-namespaces  {:level :error}
                 :unused-alias                  {:level :warning}
diff --git a/.clj-kondo/nubank/matcher-combinators/config.edn b/.clj-kondo/nubank/matcher-combinators/config.edn
new file mode 100644
index 00000000000..ea4ded7232f
--- /dev/null
+++ b/.clj-kondo/nubank/matcher-combinators/config.edn
@@ -0,0 +1,4 @@
+{:linters
+ {:unresolved-symbol
+  {:exclude [(cljs.test/is [match? thrown-match?])
+             (clojure.test/is [match? thrown-match?])]}}}
diff --git a/resources/images/icons2/16x16/diamond@2x.png b/resources/images/icons2/16x16/diamond@2x.png
new file mode 100644
index 00000000000..d1968f43ead
Binary files /dev/null and b/resources/images/icons2/16x16/diamond@2x.png differ
diff --git a/resources/images/icons2/16x16/diamond@3x.png b/resources/images/icons2/16x16/diamond@3x.png
new file mode 100644
index 00000000000..3080b1831f4
Binary files /dev/null and b/resources/images/icons2/16x16/diamond@3x.png differ
diff --git a/src/quo/components/wallet/confirmation_progress/component_spec.cljs b/src/quo/components/wallet/confirmation_progress/component_spec.cljs
new file mode 100644
index 00000000000..60010c48747
--- /dev/null
+++ b/src/quo/components/wallet/confirmation_progress/component_spec.cljs
@@ -0,0 +1,99 @@
+(ns quo.components.wallet.confirmation-progress.component-spec
+  (:require [quo.core :as quo]
+            [reagent.core :as reagent]
+            [test-helpers.component :as h]))
+
+(defn- get-test-data
+  [{:keys [state network]
+    :or   {state :pending network :mainnet}}]
+  {:counter             (reagent/atom 0)
+   :total-box           85
+   :progress-value      "10"
+   :network             network
+   :state               state
+   :customization-color :blue})
+
+(h/describe "Confirmation Progress"
+  (h/test "component renders when state is sending and network is optimism"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :sending
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is confirmed and network is optimism"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :confirmed
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is finalising and network is optimism"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :finalising
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is finalized and network is optimism"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :finalized
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is error and network is optimism"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :error
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is sending and network is arbitrum"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :sending
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is confirmed and network is arbitrum"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :confirmed
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is finalising and network is arbitrum"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :finalising
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is finalized and network is arbitrum"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :finalized
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is error and network is arbitrum"
+    (h/render [quo/confirmation-propgress
+               (get-test-data {:state   :error
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :progress-box)))
+
+  (h/test "component renders when state is pending and network is mainnet"
+    (h/render [quo/confirmation-propgress (get-test-data {})])
+    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+
+  (h/test "component renders when state is sending and network is mainnet"
+    (h/render [quo/confirmation-propgress (get-test-data {:state :sending})])
+    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+
+  (h/test "component renders when state is confirmed and network is mainnet"
+    (h/render [quo/confirmation-propgress (get-test-data {:state :confirmed})])
+    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+
+  (h/test "component renders when state is finalising and network is mainnet"
+    (h/render [quo/confirmation-propgress (get-test-data {:state :finalising})])
+    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+
+  (h/test "component renders when state is finalized and network is mainnet"
+    (h/render [quo/confirmation-propgress (get-test-data {:state :finalized})])
+    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+
+  (h/test "component renders when state is error and network is mainnet"
+    (h/render [quo/confirmation-propgress (get-test-data {:state :error})])
+    (h/is-truthy (h/get-by-label-text :mainnet-progress-box))))
diff --git a/src/quo/components/wallet/confirmation_progress/style.cljs b/src/quo/components/wallet/confirmation_progress/style.cljs
new file mode 100644
index 00000000000..511ba496f86
--- /dev/null
+++ b/src/quo/components/wallet/confirmation_progress/style.cljs
@@ -0,0 +1,9 @@
+(ns quo.components.wallet.confirmation-progress.style)
+
+(def progress-box-container
+  {:flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 12
+   :padding-bottom     10
+   :padding-top        4
+   :flex-wrap          :wrap})
diff --git a/src/quo/components/wallet/confirmation_progress/view.cljs b/src/quo/components/wallet/confirmation_progress/view.cljs
new file mode 100644
index 00000000000..0a438415879
--- /dev/null
+++ b/src/quo/components/wallet/confirmation_progress/view.cljs
@@ -0,0 +1,69 @@
+(ns quo.components.wallet.confirmation-progress.view
+  (:require [quo.components.wallet.confirmation-progress.style :as style]
+            [quo.components.wallet.progress-bar.view :as progress-box]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]))
+
+(def ^:private max-progress 100)
+(def ^:private min-progress 0)
+
+(defn- calculate-box-state
+  [state counter index]
+  (cond
+    (and (= state :sending) (>= counter index) (< index 3))                 :confirmed
+    (and (= state :confirmed) (>= counter index) (< index 5))               :confirmed
+    (and (= state :finalising) (>= counter index) (< index 5))              :confirmed
+    (and (= state :finalising) (>= counter index) (> index 4) (< index 20)) :finalized
+    (and (= state :finalized) (>= counter index) (< index 5))               :confirmed
+    (and (= state :finalized) (>= counter index) (> index 4))               :finalized
+    (and (= state :error) (>= counter index) (< index 2))                   :error
+    :else                                                                   :pending))
+
+(defn- calculate-box-state-sidenet
+  [state]
+  (case state
+    :error                              :error
+    (:confirmed :finalising :finalized) :finalized
+    :pending))
+
+(defn- calculate-progressed-value
+  [state progress-value]
+  (case state
+    :finalising progress-value
+    :finalized  max-progress
+    min-progress))
+
+(defn- progress-boxes-mainnet
+  [{:keys [state counter total-box]}]
+  [rn/view
+   {:accessibility-label :mainnet-progress-box
+    :style               style/progress-box-container}
+   (let [numbers (range 1 total-box)]
+     (doall (for [n numbers]
+              [progress-box/view
+               {:state               (calculate-box-state state counter n)
+                :customization-color :blue
+                :key                 n}])))])
+
+(defn- progress-boxes-sidenet
+  [{:keys [state progress-value]}]
+  [rn/view
+   {:accessibility-label :progress-box
+    :style               style/progress-box-container}
+   [progress-box/view
+    {:state               (calculate-box-state-sidenet state)
+     :customization-color :success}]
+   [progress-box/view
+    {:state               (calculate-box-state-sidenet state)
+     :full-width?         true
+     :progressed-value    (calculate-progressed-value state progress-value)
+     :customization-color :blue}]])
+
+(defn- view-internal
+  [{:keys [network] :as props}]
+  (case network
+    :mainnet              [progress-boxes-mainnet props]
+    (:arbitrum :optimism) [progress-boxes-sidenet props]
+    nil))
+
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/quo/components/wallet/progress_bar/component_spec.cljs b/src/quo/components/wallet/progress_bar/component_spec.cljs
index 39d48caf6af..b5612b36615 100644
--- a/src/quo/components/wallet/progress_bar/component_spec.cljs
+++ b/src/quo/components/wallet/progress_bar/component_spec.cljs
@@ -39,7 +39,7 @@
                     :width           8
                     :borderRadius    3
                     :borderColor     colors/neutral-80-opa-5
-                    :backgroundColor (colors/custom-color (:customization-color props) 50)})))
+                    :backgroundColor (colors/resolve-color (:customization-color props) theme)})))
 
   (h/test "finalized state with customtization-color blue in dark mode"
     (let [theme :dark
@@ -51,7 +51,7 @@
                     :width           8
                     :borderRadius    3
                     :borderColor     colors/neutral-80-opa-5
-                    :backgroundColor (colors/custom-color (:customization-color props) 60)})))
+                    :backgroundColor (colors/resolve-color (:customization-color props) theme)})))
 
   (h/test "finalized state with customtization-color army in light mode"
     (let [theme :light
@@ -63,7 +63,7 @@
                     :width           8
                     :borderRadius    3
                     :borderColor     colors/neutral-80-opa-5
-                    :backgroundColor (colors/custom-color (:customization-color props) 50)})))
+                    :backgroundColor (colors/resolve-color (:customization-color props) theme)})))
 
   (h/test "confirmed state in light mode"
     (let [theme :light
@@ -75,7 +75,7 @@
                     :width           8
                     :borderRadius    3
                     :borderColor     colors/neutral-80-opa-5
-                    :backgroundColor colors/success-50})))
+                    :backgroundColor (colors/resolve-color :success theme)})))
 
   (h/test "confirmed state in dark mode"
     (let [theme :dark
@@ -99,7 +99,7 @@
                     :width           8
                     :borderRadius    3
                     :borderColor     colors/neutral-80-opa-5
-                    :backgroundColor colors/danger-50})))
+                    :backgroundColor (colors/resolve-color :danger theme)})))
 
   (h/test "error state in dark mode"
     (let [theme :dark
@@ -111,4 +111,4 @@
                     :width           8
                     :borderRadius    3
                     :borderColor     colors/white-opa-5
-                    :backgroundColor colors/danger-60}))))
+                    :backgroundColor (colors/resolve-color :danger theme)}))))
diff --git a/src/quo/components/wallet/progress_bar/style.cljs b/src/quo/components/wallet/progress_bar/style.cljs
index 71b1aa2796c..8a1ebe76c1d 100644
--- a/src/quo/components/wallet/progress_bar/style.cljs
+++ b/src/quo/components/wallet/progress_bar/style.cljs
@@ -3,31 +3,48 @@
     [quo.foundations.colors :as colors]))
 
 (defn- border-and-background-color
-  [customization-color]
+  [customization-color theme]
   {:light {:pending   {:border-color     colors/neutral-80-opa-5
                        :background-color colors/neutral-5}
            :confirmed {:border-color     colors/neutral-80-opa-5
-                       :background-color (colors/custom-color :success 50)}
+                       :background-color (colors/resolve-color :success theme)}
            :finalized {:border-color     colors/neutral-80-opa-5
-                       :background-color (colors/custom-color customization-color 50)}
+                       :background-color (colors/resolve-color customization-color theme)}
            :error     {:border-color     colors/neutral-80-opa-5
-                       :background-color (colors/custom-color :danger 50)}}
+                       :background-color (colors/resolve-color :danger theme)}}
    :dark  {:pending   {:border-color     colors/neutral-70
                        :background-color colors/neutral-80}
            :confirmed {:border-color     colors/white-opa-5
-                       :background-color (colors/custom-color :success 60)}
+                       :background-color (colors/resolve-color :success theme)}
            :finalized {:border-color     colors/neutral-80-opa-5
-                       :background-color (colors/custom-color customization-color 60)}
+                       :background-color (colors/resolve-color customization-color theme)}
            :error     {:border-color     colors/white-opa-5
-                       :background-color (colors/custom-color :danger 60)}}})
+                       :background-color (colors/resolve-color :danger theme)}}})
+
+(def max-value 100)
 
 (defn root-container
-  [{:keys [customization-color state theme]}]
-  (let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color)
-                                                        [theme state])]
+  [{:keys [customization-color state theme full-width?]}]
+  (let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color
+                                                                                     theme)
+                                                        [theme (if full-width? :pending state)])]
+    {:height            12
+     :flex              (when full-width? 1)
+     :width             (when (not full-width?) 8)
+     :border-radius     3
+     :border-width      1
+     :border-color      border-color
+     :background-color  background-color
+     :margin-horizontal 1
+     :margin-vertical   2}))
+
+(defn progressed-bar
+  [{:keys [customization-color state theme progressed-value]}]
+  (let [{:keys [background-color]} (get-in (border-and-background-color customization-color theme)
+                                           [theme state])
+        progress                   (if (> progressed-value max-value) max-value progressed-value)]
     {:height           12
-     :width            8
+     :margin-top       -1
+     :width            (str progress "%")
      :border-radius    3
-     :border-width     1
-     :border-color     border-color
      :background-color background-color}))
diff --git a/src/quo/components/wallet/progress_bar/view.cljs b/src/quo/components/wallet/progress_bar/view.cljs
index 98cf8e599db..f923091016e 100644
--- a/src/quo/components/wallet/progress_bar/view.cljs
+++ b/src/quo/components/wallet/progress_bar/view.cljs
@@ -5,9 +5,11 @@
     [react-native.core :as rn]))
 
 (defn- view-internal
-  [props]
+  [{:keys [full-width?] :as props}]
   [rn/view
    {:accessibility-label :progress-bar
-    :style               (style/root-container props)}])
+    :style               (style/root-container props)}
+   (when full-width?
+     [rn/view {:style (style/progressed-bar props)}])])
 
 (def view (quo.theme/with-theme view-internal))
diff --git a/src/quo/components/wallet/transaction_progress/component_spec.cljs b/src/quo/components/wallet/transaction_progress/component_spec.cljs
new file mode 100644
index 00000000000..eb82518e10e
--- /dev/null
+++ b/src/quo/components/wallet/transaction_progress/component_spec.cljs
@@ -0,0 +1,200 @@
+(ns quo.components.wallet.transaction-progress.component-spec
+  (:require [quo.core :as quo]
+            [reagent.core :as reagent]
+            [test-helpers.component :as h]))
+
+(defn- get-test-data
+  [{:keys [state network]
+    :or   {state :pending network :mainnet}}]
+  {:title               "Title"
+   :tag-name            "Doodle"
+   :tag-number          "120"
+   :network             network
+   :customization-color :blue
+   :networks            [{:network      :mainnet
+                          :state        state
+                          :counter      (reagent/atom 0)
+                          :total-box    85
+                          :progress     30
+                          :epoch-number "123"}
+                         {:network      :optimism
+                          :state        state
+                          :progress     "50"
+                          :epoch-number "123"}
+                         {:network      :arbitrum
+                          :state        state
+                          :progress     "30"
+                          :epoch-number "123"}]
+   :on-press            (fn []
+                          (js/alert "Transaction progress item pressed"))})
+
+(h/describe "Transaction Progress"
+  (h/test "component renders without props"
+    (h/render [quo/transaction-progress])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is pending and network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is sending and network is optimism-arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :sending
+                               :network :optimism-arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is confirmed and network is optimism-arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :confirmed
+                               :network :optimism-arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is finalising and network is optimism-arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :finalising
+                               :network :optimism-arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is finalized and network is optimism-arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :finalized
+                               :network :optimism-arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is error and network is optimism-arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :error
+                               :network :optimism-arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is sending and network is optimism"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :sending
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is confirmed and network is optimism"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :confirmed
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is finalising and network is optimism"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :finalising
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is finalized and network is optimism"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :finalized
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is error and network is optimism"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :error
+                               :network :optimism})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is sending and network is arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :sending
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is confirmed and network is arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :confirmed
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is finalising and network is arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :finalising
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is finalized and network is arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :finalized
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is error and network is arbitrum"
+    (h/render [quo/transaction-progress
+               (get-test-data {:state   :error
+                               :network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is pending and network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is sending and network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {:state :sending})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is confirmed and network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {:state :confirmed})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is finalising and network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {:state :finalising})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is finalized and network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {:state :finalized})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "component renders when state is error and network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {:state :error})])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+
+  (h/test "mainnet progress box is visible network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {})])
+    (h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
+
+  (h/test "arbitrum-optimism progress box is visible network is optimism-arbitrum"
+    (h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
+    (h/is-truthy (h/get-all-by-label-text :progress-box)))
+
+  (h/test "arbitrum progress box is visible network is arbitrum"
+    (h/render [quo/transaction-progress (get-test-data {:network :arbitrum})])
+    (h/is-truthy (h/get-all-by-label-text :progress-box)))
+
+  (h/test "optimism progress box is visible network is optimism"
+    (h/render [quo/transaction-progress (get-test-data {:network :optimism})])
+    (h/is-truthy (h/get-all-by-label-text :progress-box)))
+
+  (h/test "title is visible network is optimism-arbitrum"
+    (h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
+    (h/is-truthy (h/get-by-text "Title")))
+
+  (h/test "title is visible network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {})])
+    (h/is-truthy (h/get-by-text "Title")))
+
+  (h/test "title is visible network is optimism"
+    (h/render [quo/transaction-progress (get-test-data {:network :optimism})])
+    (h/is-truthy (h/get-by-text "Title")))
+
+  (h/test "title is visible network is arbitrum"
+    (h/render [quo/transaction-progress (get-test-data {:network :arbitrum})])
+    (h/is-truthy (h/get-by-text "Title")))
+
+  (h/test "context tag is visible network is optimism-arbitrum"
+    (h/render [quo/transaction-progress (get-test-data {:network :optimism-arbitrum})])
+    (h/is-truthy (h/get-by-label-text :context-tag)))
+
+  (h/test "context tag is visible network is mainnet"
+    (h/render [quo/transaction-progress (get-test-data {})])
+    (h/is-truthy (h/get-by-label-text :context-tag)))
+
+  (h/test "context tag is visible network is optimism"
+    (h/render [quo/transaction-progress (get-test-data {:network :optimism})])
+    (h/is-truthy (h/get-by-label-text :context-tag)))
+
+  (h/test "context tag is visible network is optimism"
+    (h/render [quo/transaction-progress (get-test-data {:network :arbitrum})])
+    (h/is-truthy (h/get-by-label-text :context-tag))))
diff --git a/src/quo/components/wallet/transaction_progress/style.cljs b/src/quo/components/wallet/transaction_progress/style.cljs
new file mode 100644
index 00000000000..dd6c07c55b2
--- /dev/null
+++ b/src/quo/components/wallet/transaction_progress/style.cljs
@@ -0,0 +1,38 @@
+(ns quo.components.wallet.transaction-progress.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def title-text-container
+  {:flex 1})
+
+(def icon
+  {:margin-right 4})
+
+(defn box-style
+  [theme]
+  {:border-radius 16
+   :border-width  1
+   :border-color  (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
+
+(def title-container
+  {:align-items    :center
+   :flex-direction :row
+   :padding-left   12
+   :padding-top    8
+   :padding-right  8
+   :padding-bottom 4})
+
+(def status-row-container
+  {:flex-direction     :row
+   :align-items        :center
+   :flex               1
+   :padding-horizontal 12
+   :padding-top        8
+   :padding-bottom     4})
+
+(defn context-tag-container
+  [theme]
+  {:padding-horizontal  12
+   :padding-bottom      8
+   :flex-direction      :row
+   :border-bottom-width 1
+   :border-color        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
diff --git a/src/quo/components/wallet/transaction_progress/view.cljs b/src/quo/components/wallet/transaction_progress/view.cljs
new file mode 100644
index 00000000000..2f6048b3788
--- /dev/null
+++ b/src/quo/components/wallet/transaction_progress/view.cljs
@@ -0,0 +1,187 @@
+(ns quo.components.wallet.transaction-progress.view
+  (:require [quo.components.buttons.button.view :as button]
+            [quo.components.icon :as icons]
+            [quo.components.markdown.text :as text]
+            [quo.components.tags.context-tag.view :as context-tag]
+            [quo.components.wallet.confirmation-progress.view :as confirmation-progress]
+            [quo.components.wallet.transaction-progress.style :as style]
+            [quo.foundations.colors :as colors]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            [utils.i18n :as i18n]))
+
+(def ^:private max-mainnet-verifications 4)
+(def ^:private max-sidenet-verifications 1)
+
+(defn- icon-internal
+  ([icon]
+   (icon-internal icon nil 20))
+  ([icon color]
+   (icon-internal icon color 20))
+  ([icon color size]
+   [rn/view {:style style/icon}
+    [icons/icon
+     icon
+     {:color    color
+      :size     size
+      :no-color (when (not color) true)}]]))
+
+(defn- text-internal
+  [{:keys [weight size accessibility-label color]
+    :or   {weight :semi-bold
+           size   :paragraph-1}}
+   title]
+  [text/text
+   {:accessibility-label accessibility-label
+    :ellipsize-mode      :tail
+    :number-of-lines     1
+    :weight              weight
+    :size                size
+    :style               {:color color}}
+   title])
+
+(defn- network-type-text
+  [state]
+  (case state
+    (:sending :pending)      (i18n/label :t/pending-on)
+    (:confirmed :finalising) (i18n/label :t/confirmed-on)
+    :finalized               (i18n/label :t/finalized-on)
+    :error                   (i18n/label :t/failed-on)
+    nil))
+
+(defn- calculate-counter
+  [counter]
+  (if (< counter 4) counter max-mainnet-verifications))
+
+(defn mainnet-label
+  [counter]
+  (str counter "/" max-mainnet-verifications))
+
+(defn subnet-label
+  [counter]
+  (str counter "/" max-sidenet-verifications))
+
+(defn- text-steps
+  [network state epoch-number counter]
+  (let [steps (case network
+                :mainnet
+                {:pending    (mainnet-label 0)
+                 :sending    (mainnet-label (calculate-counter counter))
+                 :confirmed  (mainnet-label (calculate-counter counter))
+                 :finalising (mainnet-label (calculate-counter counter))
+                 :finalized  (i18n/label :t/epoch-number {:number epoch-number})
+                 :error      (mainnet-label 0)}
+                (or :optimism :arbitrum)
+                {:pending    (subnet-label 0)
+                 :sending    (subnet-label 0)
+                 :confirmed  (subnet-label 0)
+                 :finalising (subnet-label 1)
+                 :finalized  (i18n/label :t/epoch-number {:number epoch-number})
+                 :error      (subnet-label 0)}
+                nil)]
+    (get steps state)))
+
+(defn- get-status-icon
+  [theme state]
+  (case state
+    (:pending :sending)      {:icon  :i/pending-state
+                              :color (colors/theme-colors colors/neutral-50
+                                                          colors/neutral-40
+                                                          theme)}
+    (:confirmed :finalising) {:icon  :i/positive-state
+                              :color (colors/resolve-color :success theme)}
+    :finalized               {:icon :i/diamond}
+    :error                   {:icon  :i/negative-state
+                              :color (colors/resolve-color :danger theme)}
+    nil))
+
+(defn- get-network
+  [networks network]
+  (some #(when (= (:network %) network) %)
+        networks))
+
+(defn- calculate-error-state
+  [networks]
+  (some #(= (:state %) :error) networks))
+
+(defn- title-internal
+  [{:keys [title theme networks]}]
+  [rn/view {:style style/title-container}
+   [icon-internal :i/placeholder (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)]
+   [rn/view {:style style/title-text-container}
+    [text-internal nil title]]
+   (when (calculate-error-state networks)
+     [button/button
+      {:size      24
+       :icon-left :i/refresh}
+      (i18n/label :t/retry)])])
+
+(defn- tag-internal
+  [tag-photo tag-name tag-number theme]
+  [rn/view {:style (style/context-tag-container theme)}
+   [context-tag/view
+    {:size               24
+     :collectible        tag-photo
+     :collectible-name   tag-name
+     :collectible-number tag-number
+     :type               :collectible}]])
+
+(defn- get-network-text
+  [network]
+  (case network
+    :arbitrum (i18n/label :t/arbitrum)
+    :mainnet  (i18n/label :t/mainnet)
+    :optimism (i18n/label :t/optimism)
+    nil))
+
+(defn- status-row
+  [{:keys [theme state network epoch-number counter]}]
+  (let [{:keys [icon color]} (get-status-icon theme state)]
+    [rn/view {:style style/status-row-container}
+     [icon-internal icon color 16]
+     [rn/view {:style style/title-text-container}
+      [text-internal
+       {:weight :regular
+        :size   :paragraph-2}
+       (str (network-type-text state) " " (get-network-text network))]]
+     [rn/view
+      [text-internal
+       {:weight :regular
+        :size   :paragraph-2
+        :color  (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}
+       (text-steps network state epoch-number counter)]]]))
+
+(defn- view-network
+  [{:keys [theme state epoch-number counter total-box progress network]}]
+  [:<>
+   [status-row
+    {:theme        theme
+     :state        state
+     :network      network
+     :epoch-number epoch-number
+     :counter      counter}]
+   [confirmation-progress/view
+    {:state          state
+     :network        network
+     :counter        counter
+     :total-box      total-box
+     :progress-value progress}]])
+
+(defn- view-internal
+  [{:keys [title on-press accessibility-label theme tag-photo tag-name tag-number networks]
+    :or   {accessibility-label :transaction-progress}}]
+  [rn/touchable-without-feedback
+   {:on-press            on-press
+    :accessibility-label accessibility-label}
+   [rn/view {:style (style/box-style theme)}
+    [title-internal
+     {:title    title
+      :theme    theme
+      :networks networks}]
+    [tag-internal tag-photo tag-name tag-number theme]
+    (for [network networks]
+      ^{:key (:network network)}
+      (let [assoc-props #(get-network networks %)]
+        [view-network (assoc-props (:network network))]))]])
+
+(def view (quo.theme/with-theme view-internal))
diff --git a/src/quo/core.cljs b/src/quo/core.cljs
index a72ea57ac77..85e39309877 100644
--- a/src/quo/core.cljs
+++ b/src/quo/core.cljs
@@ -146,6 +146,7 @@
     quo.components.wallet.account-origin.view
     quo.components.wallet.account-overview.view
     quo.components.wallet.address-text.view
+    quo.components.wallet.confirmation-progress.view
     quo.components.wallet.keypair.view
     quo.components.wallet.network-amount.view
     quo.components.wallet.network-bridge.view
@@ -154,6 +155,7 @@
     quo.components.wallet.progress-bar.view
     quo.components.wallet.summary-info.view
     quo.components.wallet.token-input.view
+    quo.components.wallet.transaction-progress.view
     quo.components.wallet.transaction-summary.view
     quo.components.wallet.wallet-activity.view
     quo.components.wallet.wallet-overview.view))
@@ -389,6 +391,7 @@
 (def account-origin quo.components.wallet.account-origin.view/view)
 (def account-overview quo.components.wallet.account-overview.view/view)
 (def address-text quo.components.wallet.address-text.view/view)
+(def confirmation-propgress quo.components.wallet.confirmation-progress.view/view)
 (def keypair quo.components.wallet.keypair.view/view)
 (def network-amount quo.components.wallet.network-amount.view/view)
 (def network-bridge quo.components.wallet.network-bridge.view/view)
@@ -399,4 +402,5 @@
 (def token-input quo.components.wallet.token-input.view/view)
 (def wallet-overview quo.components.wallet.wallet-overview.view/view)
 (def wallet-activity quo.components.wallet.wallet-activity.view/view)
+(def transaction-progress quo.components.wallet.transaction-progress.view/view)
 (def transaction-summary quo.components.wallet.transaction-summary.view/view)
diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs
index d642ebfc3cf..a7ab024cf4a 100644
--- a/src/quo/core_spec.cljs
+++ b/src/quo/core_spec.cljs
@@ -80,6 +80,7 @@
     [quo.components.wallet.account-card.component-spec]
     [quo.components.wallet.account-origin.component-spec]
     [quo.components.wallet.account-overview.component-spec]
+    [quo.components.wallet.confirmation-progress.component-spec]
     [quo.components.wallet.keypair.component-spec]
     [quo.components.wallet.network-amount.component-spec]
     [quo.components.wallet.network-bridge.component-spec]
@@ -87,6 +88,7 @@
     [quo.components.wallet.progress-bar.component-spec]
     [quo.components.wallet.summary-info.component-spec]
     [quo.components.wallet.token-input.component-spec]
+    [quo.components.wallet.transaction-progress.component-spec]
     [quo.components.wallet.transaction-summary.component-spec]
     [quo.components.wallet.wallet-activity.component-spec]
     [quo.components.wallet.wallet-overview.component-spec]))
diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs
index 8574a117508..4a47ffc3c07 100644
--- a/src/status_im/communities/core.cljs
+++ b/src/status_im/communities/core.cljs
@@ -74,6 +74,7 @@
                         :adminSettings               :admin-settings
                         :tokenPermissions            :token-permissions
                         :communityTokensMetadata     :tokens-metadata
+                        :introMessage                :intro-message
                         :muteTill                    :muted-till})
       (update :admin-settings
               set/rename-keys
diff --git a/src/status_im/ui/screens/profile/seed/views.cljs b/src/status_im/ui/screens/profile/seed/views.cljs
index 736aaf7fc0e..5ac136bbc16 100644
--- a/src/status_im/ui/screens/profile/seed/views.cljs
+++ b/src/status_im/ui/screens/profile/seed/views.cljs
@@ -46,7 +46,8 @@
      :key   :your-data-belongs-to-you-description}]
    [react/view {:style styles/intro-button}
     [quo/button
-     {:on-press #(re-frame/dispatch [:set-in [:my-profile/seed :step] :12-words])}
+     {:on-press #(do (re-frame/dispatch [:set-in [:my-profile/seed :step] :12-words])
+                     (re-frame/dispatch [:profile.settings/mnemonic-was-shown]))}
      (i18n/label :t/ok-continue)]]])
 
 (defn six-words
diff --git a/src/status_im2/contexts/communities/actions/accounts_selection/view.cljs b/src/status_im2/contexts/communities/actions/accounts_selection/view.cljs
index cc50dbb1ea6..b80d51363f8 100644
--- a/src/status_im2/contexts/communities/actions/accounts_selection/view.cljs
+++ b/src/status_im2/contexts/communities/actions/accounts_selection/view.cljs
@@ -4,6 +4,7 @@
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
     [status-im2.common.password-authentication.view :as password-authentication]
+    [status-im2.contexts.communities.actions.community-rules.view :as community-rules]
     [status-im2.contexts.communities.actions.request-to-join.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -26,6 +27,13 @@
       [rn/view {:flex 1}
        [gesture/scroll-view {:style {:flex 1}}
         [rn/view style/page-container
+         [quo/text
+          {:style               {:margin-top 24}
+           :accessibility-label :community-rules-title
+           :weight              :semi-bold
+           :size                :paragraph-1}
+          (i18n/label :t/community-rules)]
+         [community-rules/view id]
          [rn/view {:style (style/bottom-container)}
           [quo/button
            {:accessibility-label :cancel
diff --git a/src/status_im2/contexts/communities/actions/community_rules/style.cljs b/src/status_im2/contexts/communities/actions/community_rules/style.cljs
new file mode 100644
index 00000000000..37d85fb9475
--- /dev/null
+++ b/src/status_im2/contexts/communities/actions/community_rules/style.cljs
@@ -0,0 +1,10 @@
+(ns status-im2.contexts.communities.actions.community-rules.style)
+
+(def community-rule
+  {:flex        1
+   :align-items :flex-start
+   :margin-top  16})
+
+(def community-rule-text
+  {:margin-left 6
+   :flex        1})
diff --git a/src/status_im2/contexts/communities/actions/community_rules/view.cljs b/src/status_im2/contexts/communities/actions/community_rules/view.cljs
new file mode 100644
index 00000000000..f682d792037
--- /dev/null
+++ b/src/status_im2/contexts/communities/actions/community_rules/view.cljs
@@ -0,0 +1,16 @@
+(ns status-im2.contexts.communities.actions.community-rules.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im2.contexts.communities.actions.community-rules.style :as style]
+    [utils.re-frame :as rf]))
+
+(defn view
+  [id]
+  (let [rules (rf/sub [:communities/rules id])]
+    [rn/view {:style style/community-rule}
+     [quo/text
+      {:style  style/community-rule-text
+       :weight :regular
+       :size   :paragraph-2}
+      rules]]))
diff --git a/src/status_im2/contexts/profile/create/events.cljs b/src/status_im2/contexts/profile/create/events.cljs
index d23026da8d2..2405b16b8cb 100644
--- a/src/status_im2/contexts/profile/create/events.cljs
+++ b/src/status_im2/contexts/profile/create/events.cljs
@@ -1,6 +1,7 @@
 (ns status-im2.contexts.profile.create.events
   (:require
     [native-module.core :as native-module]
+    [status-im2.contexts.emoji-picker.utils :as emoji-picker.utils]
     [status-im2.contexts.profile.config :as profile.config]
     status-im2.contexts.profile.create.effects
     [utils.re-frame :as rf]
@@ -14,4 +15,5 @@
           :displayName        display-name
           :password           (native-module/sha3 (security/safe-unmask-data password))
           :imagePath          (profile.config/strip-file-prefix image-path)
-          :customizationColor color)})
+          :customizationColor color
+          :emoji              (emoji-picker.utils/random-emoji))})
diff --git a/src/status_im2/contexts/profile/recover/events.cljs b/src/status_im2/contexts/profile/recover/events.cljs
index ff8b295f8cb..95aa7300e44 100644
--- a/src/status_im2/contexts/profile/recover/events.cljs
+++ b/src/status_im2/contexts/profile/recover/events.cljs
@@ -1,6 +1,7 @@
 (ns status-im2.contexts.profile.recover.events
   (:require
     [native-module.core :as native-module]
+    [status-im2.contexts.emoji-picker.utils :as emoji-picker.utils]
     [status-im2.contexts.profile.config :as profile.config]
     status-im2.contexts.profile.recover.effects
     [utils.re-frame :as rf]
@@ -18,4 +19,5 @@
            :mnemonic           (security/safe-unmask-data seed-phrase)
            :password           (native-module/sha3 (security/safe-unmask-data password))
            :imagePath          (profile.config/strip-file-prefix image-path)
-           :customizationColor color})})
+           :customizationColor color
+           :emoji              (emoji-picker.utils/random-emoji)})})
diff --git a/src/status_im2/contexts/profile/settings/events.cljs b/src/status_im2/contexts/profile/settings/events.cljs
index eaa5f02e20e..b00da569722 100644
--- a/src/status_im2/contexts/profile/settings/events.cljs
+++ b/src/status_im2/contexts/profile/settings/events.cljs
@@ -138,3 +138,10 @@
   {:events [:profile.settings/update-local-picture]}
   [cofx pics]
   (optimistic-profile-update cofx :images pics))
+
+(rf/defn mark-mnemonic-as-shown
+  {:events [:profile.settings/mnemonic-was-shown]}
+  [cofx]
+  {:json-rpc/call [{:method     "settings_mnemonicWasShown"
+                    :on-success #(log/debug "mnemonic was marked as shown")
+                    :on-error   #(log/error "mnemonic was not marked as shown" %)}]})
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index 3a9406f7e7a..c9754bc8d00 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/src/status_im2/contexts/quo_preview/main.cljs
@@ -170,6 +170,7 @@
     [status-im2.contexts.quo-preview.wallet.account-origin :as account-origin]
     [status-im2.contexts.quo-preview.wallet.account-overview :as
      account-overview]
+    [status-im2.contexts.quo-preview.wallet.confirmation-progress :as confirmation-progress]
     [status-im2.contexts.quo-preview.wallet.keypair :as keypair]
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
@@ -178,6 +179,7 @@
     [status-im2.contexts.quo-preview.wallet.progress-bar :as progress-bar]
     [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info]
     [status-im2.contexts.quo-preview.wallet.token-input :as token-input]
+    [status-im2.contexts.quo-preview.wallet.transaction-progress :as transaction-progress]
     [status-im2.contexts.quo-preview.wallet.transaction-summary :as
      transaction-summary]
     [status-im2.contexts.quo-preview.wallet.wallet-activity :as wallet-activity]
@@ -464,6 +466,8 @@
                        {:name :account-origin :component account-origin/view}
                        {:name      :account-overview
                         :component account-overview/view}
+                       {:name      :confirmation-progress
+                        :component confirmation-progress/view}
                        {:name :keypair :component keypair/view}
                        {:name :network-amount :component network-amount/view}
                        {:name :network-bridge :component network-bridge/view}
@@ -473,6 +477,7 @@
                        {:name :summary-info :component summary-info/view}
                        {:name :token-input :component token-input/view}
                        {:name :wallet-activity :component wallet-activity/view}
+                       {:name :transaction-progress :component transaction-progress/view}
                        {:name :transaction-summary :component transaction-summary/view}
                        {:name      :wallet-overview
                         :component wallet-overview/view}]
diff --git a/src/status_im2/contexts/quo_preview/wallet/confirmation_progress.cljs b/src/status_im2/contexts/quo_preview/wallet/confirmation_progress.cljs
new file mode 100644
index 00000000000..5a5a99f7a31
--- /dev/null
+++ b/src/status_im2/contexts/quo_preview/wallet/confirmation_progress.cljs
@@ -0,0 +1,85 @@
+(ns status-im2.contexts.quo-preview.wallet.confirmation-progress
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:type :text
+    :key  :progress-value}
+   {:type    :select
+    :key     :network
+    :options [{:key :mainnet}
+              {:key :optimism}
+              {:key :arbitrum}]}
+   {:type    :select
+    :key     :state
+    :options [{:key :pending}
+              {:key :sending}
+              {:key :confirmed}
+              {:key :finalising}
+              {:key :finalized}
+              {:key :error}]}
+   (preview/customization-color-option)])
+
+(def total-box 85)
+(def counter (reagent/atom 0))
+(def interval-id (reagent/atom nil))
+(def interval-ms 50)
+
+(defn- stop-interval
+  []
+  (when @interval-id
+    (js/clearInterval @interval-id)
+    (reset! interval-id nil)))
+
+(defn- clear-counter
+  []
+  (reset! counter 0))
+
+(defn- update-counter
+  [state]
+  (let [new-counter-value (inc @counter)]
+    (if (or (and (= state :pending) (> new-counter-value 0))
+            (and (= state :sending) (> new-counter-value 2))
+            (and (= state :confirmed) (> new-counter-value 4))
+            (and (= state :finalising) (> new-counter-value 18))
+            (and (= state :finalized) (> new-counter-value total-box))
+            (and (= state :error) (> new-counter-value 2)))
+      (stop-interval)
+      (reset! counter new-counter-value))))
+
+(defn- start-interval
+  [state]
+  (reset! interval-id
+    (js/setInterval
+     (fn []
+       (update-counter state))
+     interval-ms)))
+
+(defn- f-view
+  [state]
+  (fn []
+    (rn/use-effect
+     (fn []
+       (start-interval (:state @state))
+       (clear-counter)
+       (fn []
+         (stop-interval)))
+     [(:state @state)])
+    [preview/preview-container {:state state :descriptor descriptor}
+     [quo/confirmation-propgress
+      (assoc @state
+             :counter
+             @counter)]]))
+
+(defn view
+  []
+  (let [state (reagent/atom
+               {:total-box           total-box
+                :progress-value      "10"
+                :network             :mainnet
+                :state               :pending
+                :customization-color :blue})]
+    [:f> f-view state]))
diff --git a/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs b/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs
index d9b4f2cad84..eec0741ed49 100644
--- a/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs
+++ b/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs
@@ -1,6 +1,7 @@
 (ns status-im2.contexts.quo-preview.wallet.progress-bar
   (:require
     [quo.core :as quo]
+    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -11,11 +12,17 @@
               {:key :confirmed}
               {:key :finalized}
               {:key :error}]}
+   {:key  :full-width?
+    :type :boolean}
+   {:key  :progressed-value
+    :type :text}
    (preview/customization-color-option)])
 
 (defn view
   []
   (let [state (reagent/atom {:state               :pending
+                             :full-width?         false
+                             :progressed-value    "10"
                              :customization-color :blue})]
     (fn []
       [preview/preview-container
@@ -23,4 +30,5 @@
         :descriptor                descriptor
         :component-container-style {:padding-top 40
                                     :align-items :center}}
-       [quo/progress-bar @state]])))
+       [rn/view {:style {:flex-direction :row}}
+        [quo/progress-bar @state]]])))
diff --git a/src/status_im2/contexts/quo_preview/wallet/transaction_progress.cljs b/src/status_im2/contexts/quo_preview/wallet/transaction_progress.cljs
new file mode 100644
index 00000000000..ad66ad41977
--- /dev/null
+++ b/src/status_im2/contexts/quo_preview/wallet/transaction_progress.cljs
@@ -0,0 +1,155 @@
+(ns status-im2.contexts.quo-preview.wallet.transaction-progress
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.common.resources :as resources]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:type :text
+    :key  :title}
+   {:type :text
+    :key  :tag-name}
+   {:type :text
+    :key  :epoch-number-mainnet}
+   {:type :text
+    :key  :epoch-number-optimism}
+   {:type :text
+    :key  :epoch-number-arbitrum}
+   {:type :text
+    :key  :tag-number}
+   {:type :text
+    :key  :optimism-progress-percentage}
+   {:type :text
+    :key  :arbitrum-progress-percentage}
+   {:type    :select
+    :key     :network
+    :options [{:key :mainnet}
+              {:key :optimism}
+              {:key :arbitrum}
+              {:key :optimism-arbitrum}]}
+   {:type    :select
+    :key     :state-mainnet
+    :options [{:key :pending}
+              {:key :sending}
+              {:key :confirmed}
+              {:key :finalising}
+              {:key :finalized}
+              {:key :error}]}
+   {:type    :select
+    :key     :state-optimism
+    :options [{:key :pending}
+              {:key :sending}
+              {:key :confirmed}
+              {:key :finalising}
+              {:key :finalized}
+              {:key :error}]}
+   {:type    :select
+    :key     :state-arbitrum
+    :options [{:key :pending}
+              {:key :sending}
+              {:key :confirmed}
+              {:key :finalising}
+              {:key :finalized}
+              {:key :error}]}
+   (preview/customization-color-option)])
+
+(def total-box 85)
+(def counter (reagent/atom 0))
+(def interval-id (reagent/atom nil))
+(def interval-ms 50)
+
+(defn- stop-interval
+  []
+  (when @interval-id
+    (js/clearInterval @interval-id)
+    (reset! interval-id nil)))
+
+(defn- clear-counter
+  []
+  (reset! counter 0))
+
+(defn- update-counter
+  [state]
+  (let [new-counter-value (inc @counter)]
+    (if (or (and (= state :pending) (> new-counter-value 0))
+            (and (= state :sending) (> new-counter-value 2))
+            (and (= state :confirmed) (> new-counter-value 4))
+            (and (= state :finalising) (> new-counter-value 18))
+            (and (= state :finalized) (> new-counter-value total-box))
+            (and (= state :error) (> new-counter-value 2)))
+      (stop-interval)
+      (reset! counter new-counter-value))))
+
+(defn- start-interval
+  [state]
+  (reset! interval-id
+    (js/setInterval
+     (fn []
+       (update-counter state))
+     interval-ms)))
+
+(defn- get-networks
+  [state]
+  (case (:network state)
+    :mainnet           [{:network      :mainnet
+                         :state        (:state-mainnet state)
+                         :counter      @counter
+                         :total-box    total-box
+                         :epoch-number (:epoch-number-mainnet state)}]
+    :optimism          [{:network      :optimism
+                         :state        (:state-optimism state)
+                         :progress     (:optimism-progress-percentage state)
+                         :epoch-number (:epoch-number-optimism state)}]
+    :arbitrum          [{:network      :arbitrum
+                         :state        (:state-arbitrum state)
+                         :progress     (:arbitrum-progress-percentage state)
+                         :epoch-number (:epoch-number-arbitrum state)}]
+    :optimism-arbitrum [{:network      :optimism
+                         :state        (:state-optimism state)
+                         :progress     (:optimism-progress-percentage state)
+                         :epoch-number (:epoch-number-optimism state)}
+                        {:network      :arbitrum
+                         :state        (:state-arbitrum state)
+                         :progress     (:arbitrum-progress-percentage state)
+                         :epoch-number (:epoch-number-arbitrum state)}]))
+
+(defn- f-view
+  [state]
+  (fn []
+    (rn/use-effect
+     (fn []
+       (start-interval (:state-mainnet @state))
+       (clear-counter)
+       (fn []
+         (stop-interval)))
+     [(:state-mainnet @state)])
+    [preview/preview-container {:state state :descriptor descriptor}
+     [quo/transaction-progress
+      (assoc @state
+             :networks
+             (get-networks @state))]]))
+
+(defn view
+  []
+  (let [state (reagent/atom
+               {:title                        "Title"
+                :counter                      40
+                :total-box                    total-box
+                :tag-name                     "Doodle"
+                :tag-number                   "120"
+                :epoch-number-mainnet         "181,329"
+                :epoch-number-optimism        "181,329"
+                :epoch-number-arbitrum        "181,329"
+                :optimism-progress-percentage "10"
+                :arbitrum-progress-percentage "10"
+                :network                      :mainnet
+                :state-mainnet                :pending
+                :state-arbitrum               :pending
+                :state-optimism               :pending
+                :customization-color          :blue
+                :tag-photo                    (resources/get-mock-image :collectible)
+                :on-press                     (fn []
+                                                (js/alert "Transaction progress item pressed"))})]
+    [:f> f-view state]))
diff --git a/src/status_im2/subs/communities.cljs b/src/status_im2/subs/communities.cljs
index d0f8a9c250a..0fc4ab22ce5 100644
--- a/src/status_im2/subs/communities.cljs
+++ b/src/status_im2/subs/communities.cljs
@@ -329,3 +329,9 @@
  :<- [:communities]
  (fn [communities [_ id]]
    (get-in communities [id :images])))
+
+(re-frame/reg-sub
+ :communities/rules
+ :<- [:communities]
+ (fn [communities [_ community-id]]
+   (get-in communities [community-id :intro-message])))
diff --git a/test/appium/tests/critical/chats/test_public_chat_browsing.py b/test/appium/tests/critical/chats/test_public_chat_browsing.py
index 61b1dc16240..0eb18940c46 100644
--- a/test/appium/tests/critical/chats/test_public_chat_browsing.py
+++ b/test/appium/tests/critical/chats/test_public_chat_browsing.py
@@ -197,13 +197,13 @@ def test_restore_multiaccount_with_waku_backup_remove_switch(self):
         self.home.chats_tab.click()
         self.home.contacts_tab.click()
         contacts_number = self.home.get_contact_rows_count()
-        if contacts_number != len(waku_user.contacts):
-            self.errors.append(
-                "Incorrect contacts number restored: %s instead of %s" % (contacts_number, len(waku_user.contacts)))
-        else:
-            for contact in waku_user.contacts:
-                if not self.home.element_by_text(contact).is_element_displayed(30):
-                    self.errors.append('%s was not restored as a contact from waku backup!' % contact)
+        # Todo: enable when https://github.com/status-im/status-mobile/issues/18096 is fixed
+        # if contacts_number != len(waku_user.contacts):
+        #     self.errors.append(
+        #         "Incorrect contacts number restored: %s instead of %s" % (contacts_number, len(waku_user.contacts)))
+        for contact in waku_user.contacts:
+            if not self.home.element_by_text(contact).is_element_displayed(30):
+                self.errors.append('%s was not restored as a contact from waku backup!' % contact)
                 # Disabled for simple check as sometimes from waku-backup users restored with 3-random names
                 # self.home.click_system_back_button_until_element_is_shown()
                 # contact_row = self.home.contact_details_row(index=i + 1)
@@ -967,6 +967,8 @@ def test_community_leave(self):
         self.errors.verify_no_errors()
 
     @marks.testrail_id(702948)
+    @marks.xfail(
+        reason="Can't navigate to a channel by hashtag link, https://github.com/status-im/status-mobile/issues/18095")
     def test_community_hashtag_links_to_community_channels(self):
         for home in self.homes:
             home.navigate_back_to_home_view()
diff --git a/translations/en.json b/translations/en.json
index 2f86b33ba30..8dd205bff4c 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -2389,6 +2389,13 @@
     "keypairs": "Keypairs",
     "keypairs-description": "Select keypair to derive your new account from",
     "confirm-account-origin": "Confirm account origin",
+    "confirmed-on": "Confirmed on",
+    "pending-on": "Pending on",
+    "finalized-on": "Finalized on",
+    "failed-on": "Failed on",
+    "epoch-number": "Epoch {{number}}",
+    "arbitrum": "Arbitrum",
+    "optimism": "Optimism",
     "address-placeholder": "0x123abc... or bob.eth",
     "invalid-address": "It’s not Ethereum address or ENS name",
     "address-already-in-use": "Address already being used",