chore: add outline for transacation-progress page (#18217)

src/quo/components/buttons/wallet_ctas/view.cljs

@@ -15,9 +15,8 @@
    {:style               style/button-container
     :accessibility-label accessibility-label}
    [wallet-button/view
-    {:icon          icon
+    {:icon     icon
-     :on-press      on-press
+     :on-press on-press}]
-     :on-long-press #(js/alert "long pressed")}]
    [text/text
     {:weight :medium
      :size   :paragraph-2

src/quo/components/utilities/token/loader.cljs

@@ -8,7 +8,7 @@
   [token]
   (let [token-symbol (cond-> token
                        (keyword? token) name
-                       :always          string/lower-case)]
+                       :always          (comp string/lower-case str))]
     (get tokens token-symbol)))
 
 (def get-token-image (memoize get-token-image*))

src/status_im/common/floating_button_page/view.cljs

@@ -1,6 +1,7 @@
 (ns status-im.common.floating-button-page.view
   (:require
     [oops.core :as oops]
+    [quo.core :as quo]
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.safe-area :as safe-area]
@@ -51,7 +52,8 @@
      :remove-listeners    remove-listeners}))
 
 (defn view
-  [{:keys [header footer]} & children]
+  [{:keys [header footer customization-color gradient-cover?]} &
+   children]
   (reagent/with-let [window-height                (:height (rn/get-window))
                      footer-container-height      (reagent/atom 0)
                      header-height                (reagent/atom 0)
@@ -79,24 +81,25 @@
                                              :content-container-height @content-container-height
                                              :header-height            @header-height
                                              :keyboard-shown?          keyboard-shown?})]
-
+      [:<>
-      [rn/view {:style style/page-container}
+       (when gradient-cover? [quo/gradient-cover {:customization-color customization-color}])
-       [rn/view {:on-layout set-header-height}
+       [rn/view {:style style/page-container}
-        header]
+        [rn/view {:on-layout set-header-height}
-       [rn/scroll-view
+         header]
-        {:on-scroll               set-content-y-scroll
+        [rn/scroll-view
-         :scroll-event-throttle   64
+         {:on-scroll               set-content-y-scroll
-         :content-container-style {:flex-grow 1}}
+          :scroll-event-throttle   64
-        (into [rn/view {:on-layout set-content-container-height}]
+          :content-container-style {:flex-grow 1}}
-              children)]
+         (into [rn/view {:on-layout set-content-container-height}]
-       [rn/keyboard-avoiding-view
+               children)]
-        {:style                    style/keyboard-avoiding-view
+        [rn/keyboard-avoiding-view
-         :keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0)
+         {:style                    style/keyboard-avoiding-view
-         :pointer-events           :box-none}
+          :keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0)
-        [floating-container/view
+          :pointer-events           :box-none}
-         {:on-layout       set-footer-container-height
+         [floating-container/view
-          :keyboard-shown? keyboard-shown?
+          {:on-layout       set-footer-container-height
-          :blur?           show-background?}
+           :keyboard-shown? keyboard-shown?
-         footer]]])
+           :blur?           show-background?}
+          footer]]]])
     (finally
      (remove-listeners))))

src/status_im/common/resources.cljs

@@ -25,6 +25,7 @@
    :keycard-watermark             (js/require "../resources/images/ui2/keycard-watermark.png")
    :discover                      (js/require "../resources/images/ui2/discover.png")
    :invite-friends                (js/require "../resources/images/ui2/invite-friends.png")
+   :transaction-progress          (js/require "../resources/images/ui2/transaction-progress.png")
    :welcome-illustration          (js/require "../resources/images/ui2/welcome_illustration.png")})
 
 (def ui-themed

src/status_im/contexts/status_im_preview/common/floating_button_page/view.cljs

@@ -9,8 +9,9 @@
 
 (defn view
   []
-  (let [content-height (reagent/atom 450)
+  (let [content-height  (reagent/atom 450)
-        slide?         (reagent/atom false)]
+        gradient-cover? (reagent/atom false)
+        slide?          (reagent/atom false)]
     (fn []
       [rn/view {:style (style/container)}
        (when-not @slide?
@@ -18,28 +19,30 @@
           {:style  style/background-image
            :source (resources/get-mock-image :dark-blur-bg)}])
        [floating-button-page/view
-        {:header [quo/page-nav
+        {:header              [quo/page-nav
-                  {:type        :title-description
+                               {:type        :title-description
-                   :title       "floating button page"
+                                :title       "floating button page"
-                   :description "press right icon to swap button type"
+                                :description "press right icon to swap button type"
-                   :text-align  :left
+                                :text-align  :left
-                   :right-side  [{:icon-name :i/swap
+                                :right-side  [{:icon-name :i/swap
-                                  :on-press  #(swap! slide? not)}]
+                                               :on-press  #(swap! slide? not)}]
-                   :background  :blur
+                                :background  :blur
-                   :icon-name   :i/close
+                                :icon-name   :i/close
-                   :on-press    #(rf/dispatch [:navigate-back])}]
+                                :on-press    #(rf/dispatch [:navigate-back])}]
-         :footer (if @slide?
+         :footer              (if @slide?
-                   [quo/slide-button
+                                [quo/slide-button
-                    {:track-text          "We gotta slide"
+                                 {:track-text          "We gotta slide"
-                     :track-icon          :face-id
+                                  :track-icon          :face-id
-                     :container-style     {:z-index 2}
+                                  :container-style     {:z-index 2}
-                     :customization-color :blue
+                                  :customization-color :blue
-                     :on-complete         #(js/alert "button slid")}
+                                  :on-complete         #(js/alert "button slid")}
-                    "Save address"]
+                                 "Save address"]
-                   [quo/button
+                                [quo/button
-                    {:container-style {:z-index 2}
+                                 {:container-style {:z-index 2}
-                     :on-press        #(js/alert "button pressed")}
+                                  :on-press        #(js/alert "button pressed")}
-                    "Save address"])}
+                                 "Save address"])
+         :gradient-cover?     @gradient-cover?
+         :customization-color :orange}
         [rn/view {:style (style/page-content @content-height)}
          [quo/text {:size :heading-1} "Page Content"]
          [quo/input
@@ -52,4 +55,8 @@
          [quo/button
           {:type     :outline
            :on-press #(swap! content-height (fn [v] (- v 10)))}
-          "decrease height"]]]])))
+          "decrease height"]
+         [quo/button
+          {:type     :outline
+           :on-press #(swap! gradient-cover? not)}
+          "gradient cover?"]]]])))

src/status_im/contexts/wallet/send/transaction_progress/style.cljs

@@ -0,0 +1,5 @@
+(ns status-im.contexts.wallet.send.transaction-progress.style)
+
+(def content-container
+  {:flex              1
+   :margin-horizontal 20})

src/status_im/contexts/wallet/send/transaction_progress/view.cljs

@@ -0,0 +1,44 @@
+(ns status-im.contexts.wallet.send.transaction-progress.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
+    [reagent.core :as reagent]
+    [status-im.common.floating-button-page.view :as floating-button-page]
+    [status-im.common.resources :as resources]
+    [status-im.contexts.wallet.send.transaction-progress.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn titles
+  [status]
+  (case status
+    :sending   (i18n/label :t/sending-with-elipsis)
+    :confirmed (i18n/label :t/transaction-confirmed)
+    :finalised (i18n/label :t/transacation-finalised)
+    ""))
+
+(defn view
+  []
+  (let [status          (reagent/atom :sending)
+        {:keys [color]} (rf/sub [:wallet/current-viewing-account])]
+    [floating-button-page/view
+     {:header              [quo/page-nav
+                            {:type                :no-title
+                             :background          :blur
+                             :icon-name           :i/close
+                             :margin-top          (safe-area/get-top)
+                             :on-press            #(rf/dispatch [:navigate-back])
+                             :accessibility-label :top-bar}]
+      :footer              [quo/button
+                            {:customization-color color
+                             :on-press            #(rf/dispatch [:navigate-back])}
+                            (i18n/label :t/done)]
+      :customization-color color
+      :gradient-cover?     true}
+     [rn/view {:style style/content-container}
+      [rn/image
+       {:source (resources/get-image :transaction-progress)
+        :style  {:margin-bottom 12}}]
+      [quo/standard-title
+       {:title (titles @status)}]]]))

src/status_im/navigation/screens.cljs

@@ -61,6 +61,7 @@
     [status-im.contexts.wallet.send.select-address.view :as wallet-select-address]
     [status-im.contexts.wallet.send.select-asset.view :as wallet-select-asset]
     [status-im.contexts.wallet.send.transaction-confirmation.view :as wallet-transaction-confirmation]
+    [status-im.contexts.wallet.send.transaction-progress.view :as wallet-transaction-progress]
     [status-im.navigation.options :as options]
     [status-im.navigation.transitions :as transitions]))
 
@@ -335,6 +336,10 @@
      :options   {:insets {:bottom? true}}
      :component wallet-transaction-confirmation/view}
 
+    {:name      :wallet-transaction-progress
+     :options   {:insets {:bottom? true}}
+     :component wallet-transaction-progress/view}
+
     {:name      :scan-address
      :options   (merge
                  options/dark-screen

translations/en.json

@@ -2439,5 +2439,8 @@
     "copy-all-details": "Copy all details",
     "share-details": "Share details",
     "what-are-you-waiting-for": "What are you waiting for?",
-    "no-relevant-tokens": "No relevant tokens"
+    "no-relevant-tokens": "No relevant tokens",
+    "sending-with-elipsis": "Sending...",
+    "transaction-confirmed": "Transaction confirmed!",
+    "transacation-finalised": "Transaction finalised!"
 }