feat: transaction confirmation page ui (#17812)

Signed-off-by: Brian Sztamfater <[email protected]>

Author: briansztamfater

src/quo/components/wallet/summary_info/style.cljs

@@ -4,7 +4,7 @@
 
 (defn container
   [networks? theme]
-  {:width         335
+  {:width         "100%"
    :height        (if networks? 90 56)
    :border-radius 16
    :border-width  1

src/status_im2/contexts/wallet/send/transaction_confirmation/style.cljs

@@ -0,0 +1,41 @@
+(ns status-im2.contexts.wallet.send.transaction-confirmation.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn container
+  [margin-top]
+  {:position :absolute
+   :top      margin-top
+   :right    0
+   :left     0
+   :bottom   0})
+
+(def content-container
+  {:padding-top        12
+   :padding-horizontal 20
+   :padding-bottom     32})
+
+(def title-container
+  {:margin-right 4})
+
+(defn details-container
+  [theme]
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :height             52
+   :padding-horizontal 12
+   :padding-top        7
+   :padding-bottom     8
+   :border-radius      16
+   :border-width       1
+   :border-color       (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)})
+
+(def slide-button-container
+  {:position :absolute
+   :right    20
+   :left     20
+   :bottom   20})
+
+(defn section-label
+  [theme]
+  {:margin-bottom 8
+   :color         (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

src/status_im2/contexts/wallet/send/transaction_confirmation/view.cljs

@@ -0,0 +1,196 @@
+(ns status-im2.contexts.wallet.send.transaction-confirmation.view
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
+    [reagent.core :as reagent]
+    [status-im2.common.resources :as resources]
+    [status-im2.contexts.wallet.send.transaction-confirmation.style :as style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- transaction-title
+  []
+  [rn/view {:style style/content-container}
+   [rn/view {:style {:flex-direction :row}}
+    [quo/text
+     {:size                :heading-1
+      :weight              :semi-bold
+      :style               style/title-container
+      :accessibility-label :send-label}
+     (i18n/label :t/send)]
+    [quo/summary-tag
+     {:label        "150 ETH"
+      :type         :token
+      :image-source (quo.resources/get-token :eth)}]]
+   [rn/view
+    {:style {:flex-direction :row
+             :margin-top     4}}
+    [quo/text
+     {:size                :heading-1
+      :weight              :semi-bold
+      :style               style/title-container
+      :accessibility-label :send-label}
+     (i18n/label :t/from)]
+    [quo/summary-tag
+     {:label               "Collectibles vault"
+      :type                :account
+      :emoji               "🍑"
+      :customization-color :purple}]]
+   [rn/view
+    {:style {:flex-direction :row
+             :margin-top     4}}
+    [quo/text
+     {:size                :heading-1
+      :weight              :semi-bold
+      :style               style/title-container
+      :accessibility-label :send-label}
+     (i18n/label :t/to)]
+    [quo/summary-tag
+     {:label               "Mark Libot"
+      :type                :user
+      :image-source        (resources/get-mock-image :user-picture-male4)
+      :customization-color :magenta}]]])
+
+(defn- transaction-from
+  [status-account-props theme]
+  [rn/view
+   {:style {:padding-horizontal 20
+            :padding-bottom     16}}
+   [quo/text
+    {:size                :paragraph-2
+     :weight              :medium
+     :style               (style/section-label theme)
+     :accessibility-label :summary-from-label}
+    (i18n/label :t/from-capitalized)]
+   [quo/summary-info
+    {:type          :status-account
+     :networks?     true
+     :values        {:ethereum 150
+                     :optimism 50
+                     :arbitrum 25}
+     :account-props status-account-props}]])
+
+(defn- transaction-to
+  [user-props theme]
+  [rn/view
+   {:style {:padding-horizontal 20
+            :padding-bottom     16}}
+   [quo/text
+    {:size                :paragraph-2
+     :weight              :medium
+     :style               (style/section-label theme)
+     :accessibility-label :summary-from-label}
+    (i18n/label :t/to-capitalized)]
+   [quo/summary-info
+    {:type          :user
+     :networks?     true
+     :values        {:ethereum 150
+                     :optimism 50
+                     :arbitrum 25}
+     :account-props user-props}]])
+
+(defn- transaction-details
+  [theme]
+  [rn/view
+   {:style {:padding-horizontal 20
+            :padding-bottom     16}}
+   [quo/text
+    {:size                :paragraph-2
+     :weight              :medium
+     :style               (style/section-label theme)
+     :accessibility-label :summary-from-label}
+    (i18n/label :t/details)]
+   [rn/view
+    {:style (style/details-container theme)}
+    [quo/data-item
+     {:container-style {:flex   1
+                        :height 36}
+      :blur?           false
+      :description     :default
+      :icon-right?     false
+      :card?           false
+      :label           :none
+      :status          :default
+      :size            :small
+      :title           (i18n/label :t/est-time)
+      :subtitle        "3-5 min"}]
+    [quo/data-item
+     {:container-style {:flex   1
+                        :height 36}
+      :blur?           false
+      :description     :default
+      :icon-right?     false
+      :card?           false
+      :label           :none
+      :status          :default
+      :size            :small
+      :title           (i18n/label :t/max-fees)
+      :subtitle        "€188,70"}]
+    [quo/data-item
+     {:container-style {:flex   1
+                        :height 36}
+      :blur?           false
+      :description     :default
+      :icon-right?     false
+      :card?           false
+      :label           :none
+      :status          :default
+      :size            :small
+      :title           (i18n/label :t/user-gets {:name "Mark"})
+      :subtitle        "149.99 ETH"}]]])
+
+(defn- f-view-internal
+  [_]
+  (let [reset-slider?        (reagent/atom false)
+        margin-top           (safe-area/get-top)
+        biometric-auth?      true
+        on-close             #(rf/dispatch [:navigate-back-within-stack :wallet-select-asset])
+        status-account-props {:customization-color :purple
+                              :size                32
+                              :emoji               "🍑"
+                              :type                :default
+                              :name                "Collectibles vault"
+                              :address             "0x0ah...78b"}
+        user-props           {:full-name           "M L"
+                              :status-indicator?   false
+                              :size                :small
+                              :ring-background     (resources/get-mock-image :ring)
+                              :customization-color :blue
+                              :name                "Mark Libot"
+                              :address             "0x0ah...78b"
+                              :status-account      (merge status-account-props
+                                                          {:size  16
+                                                           :name  "New house"
+                                                           :emoji "🍔"})}]
+    (fn [{:keys [theme]}]
+      [rn/view {:style {:flex 1}}
+       [quo/gradient-cover {:customization-color :purple}]
+       [rn/view {:style (style/container margin-top)}
+        [quo/page-nav
+         {:icon-name           :i/arrow-left
+          :on-press            on-close
+          :accessibility-label :top-bar
+          :right-side          [{:icon-name           :i/advanced
+                                 :on-press            (fn callback [] nil)
+                                 :accessibility-label "Advanced"}]}]
+        [transaction-title]
+        [transaction-from status-account-props theme]
+        [transaction-to user-props theme]
+        [transaction-details theme]
+        [rn/view {:style style/slide-button-container}
+         [quo/slide-button
+          {:size                :size/s-48
+           :customization-color :purple
+           :on-reset            (when @reset-slider? #(reset! reset-slider? false))
+           :on-complete         #(js/alert "Not implemented yet")
+           :track-icon          (if biometric-auth? :i/face-id :password)
+           :track-text          (i18n/label :t/slide-to-send)}]]]])))
+
+(defn view-internal
+  [props]
+  [:f> f-view-internal props])
+
+(def view (quo.theme/with-theme view-internal))

src/status_im2/navigation/screens.cljs

@@ -55,6 +55,7 @@
     [status-im2.contexts.wallet.send.input-amount.view :as wallet-send-input-amount]
     [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
     [status-im2.contexts.wallet.send.select-asset.view :as wallet-select-asset]
+    [status-im2.contexts.wallet.send.transaction-confirmation.view :as wallet-transaction-confirmation]
     [status-im2.navigation.options :as options]
     [status-im2.navigation.transitions :as transitions]))
 
@@ -312,6 +313,10 @@
      :options   {:insets {:top? true}}
      :component wallet-select-asset/view}
 
+    {:name      :wallet-transaction-confirmation
+     :options   {:insets {:bottom? true}}
+     :component wallet-transaction-confirmation/view}
+
     {:name      :scan-address
      :options   (merge
                  options/dark-screen

translations/en.json

@@ -2406,5 +2406,9 @@
     "send-limit": "Max: {{limit}}",
     "searching-for-activity": "Searching for activity...",
     "this-address-has-no-activity": "This address has no activity",
-    "this-address-has-activity": "This address has activity"
+    "this-address-has-activity": "This address has activity",
+    "details": "Details",
+    "est-time": "Est. time",
+    "user-gets": "{{name}} gets",
+    "slide-to-send": "Slide to send"
 }