diff --git a/resources/icons/tiny_check.svg b/resources/icons/tiny_check.svg new file mode 100644 index 0000000000..d9b790ba7b --- /dev/null +++ b/resources/icons/tiny_check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index 41932316ed..93c10a4a42 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -170,6 +170,7 @@ :icons/logo (components.svg/slurp-svg "./resources/icons/logo.svg") :icons/camera (components.svg/slurp-svg "./resources/icons/camera.svg") :icons/check (components.svg/slurp-svg "./resources/icons/check.svg") + :icons/tiny-check (components.svg/slurp-svg "./resources/icons/tiny_check.svg") :icons/dots (components.svg/slurp-svg "./resources/icons/dots.svg") :icons/warning (components.svg/slurp-svg "./resources/icons/warning.svg") :icons/settings (components.svg/slurp-svg "./resources/icons/settings.svg") diff --git a/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs b/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs index ce068137e3..67c95afcf9 100644 --- a/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs +++ b/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs @@ -1,41 +1,18 @@ (ns status-im.ui.screens.wallet.transaction-sent.styles - (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) - (:require [status-im.ui.components.colors :as colors])) - -(def transaction-sent-container - {:align-items :center}) - -(def ok-icon-container - {:width 56 - :height 56 - :border-radius 28 - :background-color :white - :align-items :center - :justify-content :center - :margin-top 57 - :margin-bottom 16}) + (:require [status-im.ui.components.colors :as colors] + [status-im.utils.platform :as platform])) (def transaction-sent - {:color :white - :font-size 17}) - -(def gap - {:height 8}) + {:color colors/white + :font-weight :bold + :line-height 27 + :font-size (if platform/android? 23 22) + :margin-bottom 8}) (def transaction-sent-description - {:color :white - :opacity 0.6 + {:color "rgba(255,255,255,0.6)" + :font-size (if platform/android? 17 15) + :line-height 22 :text-align :center - :padding-horizontal 16}) - -(def transaction-details - {:color :white - :font-size 15}) - -(def got-it-container - {:align-items :center - :padding-vertical 18}) - -(def got-it - {:color :white - :font-size 15}) + :padding-horizontal 30 + :margin-bottom 35}) diff --git a/src/status_im/ui/screens/wallet/transaction_sent/views.cljs b/src/status_im/ui/screens/wallet/transaction_sent/views.cljs index 3e33f3366b..14e8de8a96 100644 --- a/src/status_im/ui/screens/wallet/transaction_sent/views.cljs +++ b/src/status_im/ui/screens/wallet/transaction_sent/views.cljs @@ -3,38 +3,71 @@ (:require [status-im.ui.components.react :as react] [status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.icons.vector-icons :as vi] - [status-im.ui.screens.wallet.styles :as wallet.styles] + [status-im.react-native.resources :as resources] [status-im.ui.screens.wallet.transaction-sent.styles :as styles] - [status-im.ui.components.styles :as components.styles] [re-frame.core :as re-frame] - [status-im.ui.screens.wallet.components.views :as components] [status-im.i18n :as i18n] [status-im.utils.platform :as platform] [status-im.ui.components.colors :as colors])) -(defview transaction-sent [& [modal?]] +(defn- ok-circle [] + [react/view {:background-color colors/black-transparent + :width 160 + :height 160 + :border-radius 81 + :align-items :center + :justify-content :center} + [react/view {:background-color colors/white + :width 80 + :height 80 + :border-radius 41 + :shadow-radius 4 + :shadow-offset {:width 0 :height 2} + :shadow-opacity 0.8 + :shadow-color "rgba(43, 59, 71, 0.12)" + :align-items :center + :justify-content :center} + [vi/icon :icons/tiny-check {:color colors/blue}]]]) + +(defn- transaction-sent-message [] + [react/view {:align-items :center} + [react/text {:style styles/transaction-sent + :font (if platform/android? :medium :default) + :accessibility-label :transaction-sent-text} + (i18n/label :t/transaction-sent)] + [react/i18n-text {:style styles/transaction-sent-description + :key :transaction-description}]]) + +(defn- bottom-action-button [on-next] + [react/touchable-highlight {:on-press on-next + :style {:border-top-width 1 + :border-color colors/white-light-transparent} + :accessibility-label :got-it-button} + [react/view {:align-items :center + :padding-vertical 18} + [react/text {:style {:color colors/white + :font-size 15} + :font (if platform/android? :medium :default) + :uppercase? true} + (i18n/label :t/done)]]]) + +(defn- sent-screen [{:keys [on-next]}] + {:pre [(fn? on-next)]} + [react/view {:flex 1} + [react/view {:flex 0.7}] ;; spacer + [react/view {:align-items :center} (ok-circle)] + [react/view {:flex 1}] ;; spacer + (transaction-sent-message) + (bottom-action-button on-next)]) + +(defview transaction-sent [] (letsubs [chat-id [:chats/current-chat-id]] - [react/view wallet.styles/wallet-modal-container - [status-bar/status-bar {:type (if modal? :modal-wallet :transparent)}] - [react/view styles/transaction-sent-container - [react/view styles/ok-icon-container - [vi/icon :icons/ok {:color colors/blue}]] - [react/text {:style styles/transaction-sent - :font (if platform/android? :medium :default) - :accessibility-label :transaction-sent-text} - (i18n/label :t/transaction-sent)] - [react/view styles/gap] - [react/i18n-text {:style styles/transaction-sent-description - :key :transaction-description}]] - [react/view components.styles/flex] - [components/separator] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:close-transaction-sent-screen chat-id]) - :accessibility-label :got-it-button} - [react/view styles/got-it-container - [react/text {:style styles/got-it - :font (if platform/android? :medium :default) - :uppercase? true} - (i18n/label :t/got-it)]]]])) + [react/view {:flex 1 :background-color colors/blue} + [status-bar/status-bar {:type :transparent}] + (sent-screen {:on-next #(re-frame/dispatch [:close-transaction-sent-screen chat-id])})])) (defview transaction-sent-modal [] - [transaction-sent true]) + (letsubs [chat-id [:chats/current-chat-id]] + [react/view {:flex 1 :background-color colors/blue} + [status-bar/status-bar {:type :modal-wallet}] + (sent-screen {:on-next #(re-frame/dispatch [:close-transaction-sent-screen chat-id])})])) diff --git a/translations/en.json b/translations/en.json index d80e5d2722..310399a310 100644 --- a/translations/en.json +++ b/translations/en.json @@ -567,7 +567,7 @@ "no-statuses-found": "No statuses found", "extension-address": "Extension address", "can-not-add-yourself": "You can't add yourself", - "transaction-description": "Transactions with 12 confirmations can be considered irreversible", + "transaction-description": "Consider it complete after 12 confirmations on the network.", "add-to-contacts": "Add to contacts", "available": "Available", "currency-display-name-jpy": "Japanese Yen",