diff --git a/src/quo/components/wallet/summary_info/style.cljs b/src/quo/components/wallet/summary_info/style.cljs index 204f0be21c..9854d69734 100644 --- a/src/quo/components/wallet/summary_info/style.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/send/transaction_confirmation/style.cljs b/src/status_im2/contexts/wallet/send/transaction_confirmation/style.cljs new file mode 100644 index 0000000000..be2bdf4f61 --- /dev/null +++ b/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)}) diff --git a/src/status_im2/contexts/wallet/send/transaction_confirmation/view.cljs b/src/status_im2/contexts/wallet/send/transaction_confirmation/view.cljs new file mode 100644 index 0000000000..1168c6f468 --- /dev/null +++ b/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)) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 8f3ef89336..b7049751ff 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/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 diff --git a/translations/en.json b/translations/en.json index d25d4e9908..439332f87e 100644 --- a/translations/en.json +++ b/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" }