status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add wizard and 'card is ready' screen 

Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>
This commit is contained in:
Dmitry Novotochinov 2018-10-03 16:16:28 +03:00
parent 23679ac5b4
commit 5dec44340d
No known key found for this signature in database
GPG Key ID: 43D1DAF5AD39C927
5 changed files with 114 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/status_im/events.cljs
View File

@ -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

47
src/status_im/ui/screens/hardwallet/components.cljs Normal file
View File

@ -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})]))

5
src/status_im/ui/screens/hardwallet/pin/views.cljs
View File

@ -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)]

54
src/status_im/ui/screens/hardwallet/setup/styles.cljs
View File

@ -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

63
src/status_im/ui/screens/hardwallet/setup/views.cljs
View File

@ -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]]]]))