diff --git a/resources/images/ui2/transaction-progress@2x.png b/resources/images/ui2/transaction-progress@2x.png new file mode 100644 index 0000000000..d9b00557c9 Binary files /dev/null and b/resources/images/ui2/transaction-progress@2x.png differ diff --git a/resources/images/ui2/transaction-progress@3x.png b/resources/images/ui2/transaction-progress@3x.png new file mode 100644 index 0000000000..bca40f0eb1 Binary files /dev/null and b/resources/images/ui2/transaction-progress@3x.png differ diff --git a/src/quo/components/buttons/wallet_ctas/view.cljs b/src/quo/components/buttons/wallet_ctas/view.cljs index 0cfd9ac798..fc77f4f08d 100644 --- a/src/quo/components/buttons/wallet_ctas/view.cljs +++ b/src/quo/components/buttons/wallet_ctas/view.cljs @@ -15,9 +15,8 @@ {:style style/button-container :accessibility-label accessibility-label} [wallet-button/view - {:icon icon - :on-press on-press - :on-long-press #(js/alert "long pressed")}] + {:icon icon + :on-press on-press}] [text/text {:weight :medium :size :paragraph-2 diff --git a/src/quo/components/utilities/token/loader.cljs b/src/quo/components/utilities/token/loader.cljs index 671b321d79..af3274b780 100644 --- a/src/quo/components/utilities/token/loader.cljs +++ b/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*)) diff --git a/src/status_im/common/floating_button_page/view.cljs b/src/status_im/common/floating_button_page/view.cljs index f4ef017e73..dc0ed27b6b 100644 --- a/src/status_im/common/floating_button_page/view.cljs +++ b/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,24 +81,25 @@ :content-container-height @content-container-height :header-height @header-height :keyboard-shown? keyboard-shown?})] - - [rn/view {:style style/page-container} - [rn/view {:on-layout set-header-height} - header] - [rn/scroll-view - {:on-scroll set-content-y-scroll - :scroll-event-throttle 64 - :content-container-style {:flex-grow 1}} - (into [rn/view {:on-layout set-content-container-height}] - children)] - [rn/keyboard-avoiding-view - {:style style/keyboard-avoiding-view - :keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0) - :pointer-events :box-none} - [floating-container/view - {:on-layout set-footer-container-height - :keyboard-shown? keyboard-shown? - :blur? show-background?} - footer]]]) + [:<> + (when gradient-cover? [quo/gradient-cover {:customization-color customization-color}]) + [rn/view {:style style/page-container} + [rn/view {:on-layout set-header-height} + header] + [rn/scroll-view + {:on-scroll set-content-y-scroll + :scroll-event-throttle 64 + :content-container-style {:flex-grow 1}} + (into [rn/view {:on-layout set-content-container-height}] + children)] + [rn/keyboard-avoiding-view + {:style style/keyboard-avoiding-view + :keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0) + :pointer-events :box-none} + [floating-container/view + {:on-layout set-footer-container-height + :keyboard-shown? keyboard-shown? + :blur? show-background?} + footer]]]]) (finally (remove-listeners)))) diff --git a/src/status_im/common/resources.cljs b/src/status_im/common/resources.cljs index 8b649f2d2f..d3699d6880 100644 --- a/src/status_im/common/resources.cljs +++ b/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 diff --git a/src/status_im/contexts/status_im_preview/common/floating_button_page/view.cljs b/src/status_im/contexts/status_im_preview/common/floating_button_page/view.cljs index 04eb4eb62d..30a5d2a975 100644 --- a/src/status_im/contexts/status_im_preview/common/floating_button_page/view.cljs +++ b/src/status_im/contexts/status_im_preview/common/floating_button_page/view.cljs @@ -9,8 +9,9 @@ (defn view [] - (let [content-height (reagent/atom 450) - slide? (reagent/atom false)] + (let [content-height (reagent/atom 450) + gradient-cover? (reagent/atom false) + slide? (reagent/atom false)] (fn [] [rn/view {:style (style/container)} (when-not @slide? @@ -18,28 +19,30 @@ {:style style/background-image :source (resources/get-mock-image :dark-blur-bg)}]) [floating-button-page/view - {:header [quo/page-nav - {:type :title-description - :title "floating button page" - :description "press right icon to swap button type" - :text-align :left - :right-side [{:icon-name :i/swap - :on-press #(swap! slide? not)}] - :background :blur - :icon-name :i/close - :on-press #(rf/dispatch [:navigate-back])}] - :footer (if @slide? - [quo/slide-button - {:track-text "We gotta slide" - :track-icon :face-id - :container-style {:z-index 2} - :customization-color :blue - :on-complete #(js/alert "button slid")} - "Save address"] - [quo/button - {:container-style {:z-index 2} - :on-press #(js/alert "button pressed")} - "Save address"])} + {:header [quo/page-nav + {:type :title-description + :title "floating button page" + :description "press right icon to swap button type" + :text-align :left + :right-side [{:icon-name :i/swap + :on-press #(swap! slide? not)}] + :background :blur + :icon-name :i/close + :on-press #(rf/dispatch [:navigate-back])}] + :footer (if @slide? + [quo/slide-button + {:track-text "We gotta slide" + :track-icon :face-id + :container-style {:z-index 2} + :customization-color :blue + :on-complete #(js/alert "button slid")} + "Save address"] + [quo/button + {:container-style {:z-index 2} + :on-press #(js/alert "button pressed")} + "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?"]]]]))) diff --git a/src/status_im/contexts/wallet/send/transaction_progress/style.cljs b/src/status_im/contexts/wallet/send/transaction_progress/style.cljs new file mode 100644 index 0000000000..94f31ccae9 --- /dev/null +++ b/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}) diff --git a/src/status_im/contexts/wallet/send/transaction_progress/view.cljs b/src/status_im/contexts/wallet/send/transaction_progress/view.cljs new file mode 100644 index 0000000000..cc940aec38 --- /dev/null +++ b/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)}]]])) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index c208c66a23..c3c8904f79 100644 --- a/src/status_im/navigation/screens.cljs +++ b/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 diff --git a/translations/en.json b/translations/en.json index 9d29f95987..67cafea614 100644 --- a/translations/en.json +++ b/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!" }