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

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

@@ -16,8 +16,7 @@
     :accessibility-label accessibility-label}
    [wallet-button/view
     {: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,7 +81,8 @@
                                              :content-container-height @content-container-height
                                              :header-height            @header-height
                                              :keyboard-shown?          keyboard-shown?})]
-
+      [:<>
+       (when gradient-cover? [quo/gradient-cover {:customization-color customization-color}])
        [rn/view {:style style/page-container}
         [rn/view {:on-layout set-header-height}
          header]
@@ -97,6 +100,6 @@
           {:on-layout       set-footer-container-height
            :keyboard-shown? keyboard-shown?
            :blur?           show-background?}
-         footer]]])
+          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

@@ -10,6 +10,7 @@
 (defn view
   []
   (let [content-height  (reagent/atom 450)
+        gradient-cover? (reagent/atom false)
         slide?          (reagent/atom false)]
     (fn []
       [rn/view {:style (style/container)}
@@ -39,7 +40,9 @@
                                 [quo/button
                                  {:container-style {:z-index 2}
                                   :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!"
 }