diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index d679a26dfb..fa6a4d9da6 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -748,6 +748,11 @@ (when-not (empty? (get-in db [:hardwallet :pin step])) {:db (update-in db [:hardwallet :pin step] pop)}))) +(handlers/register-handler-fx + :hardwallet.ui/create-pin-button-pressed + (fn [{:keys [db]} _] + {:db (update-in db [:hardwallet :setup-step] :pin)})) + ;; browser module (handlers/register-handler-fx diff --git a/src/status_im/ui/screens/hardwallet/components.cljs b/src/status_im/ui/screens/hardwallet/components.cljs new file mode 100644 index 0000000000..7444928232 --- /dev/null +++ b/src/status_im/ui/screens/hardwallet/components.cljs @@ -0,0 +1,47 @@ +(ns status-im.ui.screens.hardwallet.components + (:require-macros [status-im.utils.views :refer [defview letsubs]]) + (:require [reagent.core :as reagent] + [status-im.ui.components.animation :as animation] + [status-im.ui.screens.hardwallet.setup.styles :as styles] + [status-im.ui.components.icons.vector-icons :as vector-icons] + [status-im.ui.components.react :as react] + [status-im.i18n :as i18n] + [status-im.ui.components.colors :as colors])) + +(defn maintain-card [] + (let [animation-value (animation/create-value 0) + ;TODO(dmitryn): make animation smoother + interpolate-fn (fn [output-range] + (animation/interpolate animation-value + {:inputRange [0 0.25 0.5 0.75 1] + :outputRange output-range}))] + (reagent/create-class + {:component-did-mount (fn [] + (-> animation-value + (animation/timing {:toValue 1 + :duration 1000 + :useNativeDriver true}) + (animation/anim-loop) + (animation/start))) + :display-name "maintain-card" + :reagent-render (fn [] [react/view styles/maintain-card-container + [react/view styles/hardwallet-icon-container + [vector-icons/icon :icons/hardwallet {:color colors/blue}] + [vector-icons/icon :icons/indicator-small {:color colors/blue + :container-style (styles/hardwallet-icon-indicator-small-container + (interpolate-fn [0 0.5 1 0.5 0]))}] + [vector-icons/icon :icons/indicator-middle {:color colors/blue + :container-style (styles/hardwallet-icon-indicator-middle-container + (interpolate-fn [1 0.4 0 0.4 0.8]))}] + [vector-icons/icon :icons/indicator-big {:color colors/blue + :container-style (styles/hardwallet-icon-indicator-big-container + (interpolate-fn [0.5 0.8 0.5 0.8 0.4]))}]] + [react/text {:style styles/maintain-card-text + :number-of-lines 2} + (i18n/label :t/maintain-card-to-phone-contact)]])}))) + +(defn- wizard-step [step-number] + (when step-number + [react/text {:style styles/wizard-step-text} + (i18n/label :wizard-step {:current step-number + :total 5})])) diff --git a/src/status_im/ui/screens/hardwallet/pin/views.cljs b/src/status_im/ui/screens/hardwallet/pin/views.cljs index 982b75d310..04876ec8e2 100644 --- a/src/status_im/ui/screens/hardwallet/pin/views.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/views.cljs @@ -5,8 +5,8 @@ [status-im.ui.components.colors :as colors] [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.react :as react] - [status-im.ui.components.styles :as components.styles] - [status-im.ui.screens.hardwallet.pin.styles :as styles])) + [status-im.ui.screens.hardwallet.pin.styles :as styles] + [status-im.ui.screens.hardwallet.components :as components])) (defn numpad-button [n step enabled?] [react/touchable-highlight @@ -60,6 +60,7 @@ (let [enabled? (not= status :validating)] [react/view styles/pin-container [react/view styles/center-container + [components/wizard-step 4] [react/text {:style styles/center-title-text :font :bold} (i18n/label title)] diff --git a/src/status_im/ui/screens/hardwallet/setup/styles.cljs b/src/status_im/ui/screens/hardwallet/setup/styles.cljs index 39b8dc93ef..df13ad829b 100644 --- a/src/status_im/ui/screens/hardwallet/setup/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/setup/styles.cljs @@ -18,7 +18,7 @@ {:flex-direction :row :align-items :center :justify-content :space-between - :margin-top 81 + :margin-top 41 :width "90%" :height 60 :border-radius 10 @@ -82,6 +82,11 @@ :color colors/gray :text-align :center}) +(def center-title-text + {:font-size 22 + :text-align :center + :color colors/black}) + (def bottom-button-container {:background-color colors/gray-background :align-items :center @@ -98,6 +103,13 @@ :line-height 20 :text-transform :uppercase}) +(def next-button-container + {:flex-direction :row + :align-self :flex-end + :width "100%" + :margin-vertical 15 + :margin-right 21}) + ;; prepare step (def center-container @@ -105,9 +117,11 @@ :align-items :center :height 200}) -(def center-title-text - {:font-size 22 - :color colors/black}) +(def wizard-step-text + {:font-size 12 + :color colors/blue + :text-align :center + :padding-bottom 18}) (def generating-codes-for-pairing-text {:font-size 15 @@ -149,7 +163,7 @@ (def puk-code-explanation-text {:font-size 15 - :width "90%" + :width 292 :text-align :center :padding-top 5 :color colors/gray}) @@ -159,29 +173,27 @@ :flex-direction :row}) (defstyle puk-code-numbers-inner-container - {:width "85%" - :android {:margin-horizontal 16} - :height 64 - :margin-top 20 - :align-items :center - :justify-content :center - :border-width 1 - :border-color colors/gray-light - :border-radius 10}) + {:width "85%" + :android {:margin-horizontal 16} + :height 64 + :margin-top 20 + :align-items :center + :justify-content :center + :border-width 1 + :border-color colors/gray-light + :border-radius 10}) (def puk-code-text {:font-size 17 :text-align :center :color colors/green}) -(def next-button-container - {:flex-direction :row - :margin-vertical 15}) +;; card ready -(def secret-keys-next-button-container - (assoc next-button-container - :width "100%" - :margin-right 12)) +(def card-ready-container secret-keys-container) + +(def card-ready-inner-container + {:align-self :center}) ;; enter pair code diff --git a/src/status_im/ui/screens/hardwallet/setup/views.cljs b/src/status_im/ui/screens/hardwallet/setup/views.cljs index a3ca413740..73f63194f7 100644 --- a/src/status_im/ui/screens/hardwallet/setup/views.cljs +++ b/src/status_im/ui/screens/hardwallet/setup/views.cljs @@ -2,6 +2,7 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [re-frame.core :as re-frame] [reagent.core :as reagent] + [status-im.ui.screens.hardwallet.components :as components] [status-im.ui.screens.hardwallet.pin.views :as pin.views] [status-im.ui.components.animation :as animation] [status-im.ui.components.common.common :as components.common] @@ -14,42 +15,11 @@ [status-im.i18n :as i18n] [status-im.ui.components.colors :as colors])) -(defn maintain-card [] - (let [animation-value (animation/create-value 0) - ;TODO(dmitryn): make animation smoother - interpolate-fn (fn [output-range] - (animation/interpolate animation-value - {:inputRange [0 0.25 0.5 0.75 1] - :outputRange output-range}))] - (reagent/create-class - {:component-did-mount (fn [] - (-> animation-value - (animation/timing {:toValue 1 - :duration 1000 - :useNativeDriver true}) - (animation/anim-loop) - (animation/start))) - :display-name "maintain-card" - :reagent-render (fn [] [react/view styles/maintain-card-container - [react/view styles/hardwallet-icon-container - [vector-icons/icon :icons/hardwallet {:color colors/blue}] - [vector-icons/icon :icons/indicator-small {:color colors/blue - :container-style (styles/hardwallet-icon-indicator-small-container - (interpolate-fn [0 0.5 1 0.5 0]))}] - [vector-icons/icon :icons/indicator-middle {:color colors/blue - :container-style (styles/hardwallet-icon-indicator-middle-container - (interpolate-fn [1 0.4 0 0.4 0.8]))}] - [vector-icons/icon :icons/indicator-big {:color colors/blue - :container-style (styles/hardwallet-icon-indicator-big-container - (interpolate-fn [0.5 0.8 0.5 0.8 0.4]))}]] - [react/text {:style styles/maintain-card-text - :number-of-lines 2} - (i18n/label :t/maintain-card-to-phone-contact)]])}))) - (defn secret-keys [] [react/view styles/secret-keys-container [react/view styles/secret-keys-inner-container [react/view styles/secret-keys-title-container + [components/wizard-step 2] [react/text {:style styles/secret-keys-title-text :number-of-lines 2 :font :bold} @@ -75,12 +45,27 @@ [react/text {:style styles/puk-code-text :font :bold} "a12k52kh0x"]]]] - [react/view styles/secret-keys-next-button-container + [react/view styles/next-button-container [react/view components.styles/flex] [components.common/bottom-button {:on-press #(re-frame/dispatch [:hardwallet.ui/secret-keys-next-button-pressed]) :forward? true}]]]) +(defn card-ready [] + [react/view styles/card-ready-container + [react/view styles/card-ready-inner-container + [components/wizard-step 3] + [react/text {:style styles/center-title-text + :number-of-lines 2 + :font :bold} + (i18n/label :t/card-is-ready)]] + [react/view styles/next-button-container + [react/view components.styles/flex] + [components.common/bottom-button + {:on-press #(re-frame/dispatch [:hardwallet.ui/create-pin-button-pressed]) + :label (i18n/label :t/create-pin) + :forward? true}]]]) + (defview enter-pair-code [] (letsubs [pair-code [:hardwallet-pair-code] width [:dimensions/window-width]] @@ -145,11 +130,12 @@ :button-container-style {:background-color colors/white} :on-press-event :hardwallet.ui/card-already-linked-help-button-pressed}]) -(defn- loading-view [{:keys [title-label text-label estimated-time-seconds]}] +(defn- loading-view [{:keys [title-label text-label estimated-time-seconds step-number]}] "Generic view with waiting time estimate and loading indicator. Used by 'Prepare', 'Pairing', 'Completing' screens" [react/view styles/loading-view-container [react/view styles/center-container + [components/wizard-step step-number] [react/text {:style styles/center-title-text :font :bold} (i18n/label title-label)] @@ -172,7 +158,8 @@ (defn preparing [] [loading-view {:title-label :t/preparing-card :text-label :t/generating-codes-for-pairing - :estimated-time-seconds 20}]) + :estimated-time-seconds 20 + :step-number 1}]) (defn pairing [] [loading-view {:title-label :t/pairing-card @@ -180,13 +167,15 @@ (defn complete [] [loading-view {:title-label :t/completing-card-setup - :estimated-time-seconds 30}]) + :estimated-time-seconds 30 + :step-number 3}]) (defn- content [step] (case step :begin [begin] :preparing [preparing] :secret-keys [secret-keys] + :card-ready [card-ready] :complete [complete] :pair [pair] :enter-pair-code [enter-pair-code] @@ -201,5 +190,5 @@ [react/keyboard-avoiding-view components.styles/flex [react/view styles/container [react/view styles/inner-container - [maintain-card] + [components/maintain-card] [content step]]]])) \ No newline at end of file