Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: transaction confirmation page ui #17812

Merged
merged 1 commit into from
Dec 6, 2023
Merged

feat: transaction confirmation page ui #17812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/quo/components/wallet/summary_info/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

(defn container
[networks? theme]
{:width 335
{:width "100%"
:height (if networks? 90 56)
:border-radius 16
:border-width 1
Expand Down
41 changes: 41 additions & 0 deletions src/status_im2/contexts/wallet/send/transaction_confirmation/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 196 additions & 0 deletions src/status_im2/contexts/wallet/send/transaction_confirmation/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
Comment on lines +29 to +44
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These and other style maps can be moved to the style ns

[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}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a nit here, we should instead use container-style prop on the actual component because it is much easier to read imo.

also here we should be using slide-button from status-im2.common.standard-authentication.core instead as this will handle the auth flows 👍 -
It's a follow up anyway and the UI will be the same 👍

Copy link
Contributor Author

@briansztamfater briansztamfater Dec 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I replaced it on the PR with with backend integration. Will merge this first and replace it shortly with the integration part ✨

[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 changes: 5 additions & 0 deletions src/status_im2/navigation/screens.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]))

Expand Down Expand Up @@ -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
Expand Down
6 changes: 5 additions & 1 deletion translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}