status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: transaction confirmation page ui (#17812) 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-12-06 20:16:08 -03:00 committed by GitHub
parent 3b5fe36717
commit 198a4d74a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 248 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/wallet/summary_info/style.cljs
View File

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

41
src/status_im2/contexts/wallet/send/transaction_confirmation/style.cljs Normal file
View File

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

196
src/status_im2/contexts/wallet/send/transaction_confirmation/view.cljs Normal file
View File

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

5
src/status_im2/navigation/screens.cljs
View File

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

6
translations/en.json
View File

@ -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"
}