Implement transaction progress component (#17933)

* copy codes

* refactor preview

* refactor deprecated codes in view

* change condition structure in view-internal

* comment unused codes

* refactor title

* fix title style

* fix icon style

* fix context tag

* fix icon and row

* refactor icon-internal

* rename network-state and network-type

* fix progress-container style

* fix progress-box-container style

* fix progress container naming and style

* change progress-bar component

* fix progress box component

* convert to functional component and bring back the animation

* fix progress box for arbitrum-optimism network

* fix text-steps

* fix status-row

* refactor code style

* refactor get-network-text

* resolve comment

* add translations

* remove btn-title prop

* fix dark mode border color

* fix dark mode icon color

* move interval to preview

* add tests ns

* add tests

* fix lint issues

* fix rendering issue

* fix lint issue

* add arbitrum and optimism as separate networks

* create const for progress percentage

* fix progress bar component and preview

* refactor text-steps

* refactor names

* fix lint issues

* rename arbitrum-progress-percentage and optimism-progress-percentage

* update tests

* convert hard-coded color to customization-color

* fix progress_bar tests

* separate state for each network

* add progress percentage for each network and refactor params of functions

* separate epoch number for  each network

* update tests

* fix lint issues

* refactor codes

* fix lint issues

* resolve comments

* add confirmation progress

* use confirmation-progress component in transaction-progress

* fix preview

* add tests

* fix lint issue

* resolve comment

* refactor networks

* change sending state style

* update tests

* fix lint issues

* remove unused code

* add helper for calculate counter step

* add assoc-props to view-networks

* change text-internal props order

* fix colors/resolve-color usage

* refactor view codes

* add get-networks to preview

* add max-value to progress bar style

* remove threading macros in the previews

* remove inline functional components in the previews

* remove optimism-arbitrum checks in the view

* fix lint issues

* add max-progress and min-progress to confirmation-progress

* refactor text-steps

* fix counter structure in transaction-progress

* fix counter structure in confirmation-progress

* fix resolve-color usage

* fix lint issue

* fix tests

* resolve comments

* fix color issue

* fix margins

* fix lint issue

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))))

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})

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))

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)}))))

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]}]
+  [{:keys [customization-color state theme full-width?]}]
-  (let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color)
+  (let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color
-                                                        [theme state])]
+                                                                                     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}))

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))

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))))

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)})

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))

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)

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]))

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}]

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]))

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]]])))

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]))

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",