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

[#5964] hardwallet screens flow 2 

Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>
This commit is contained in:
Dmitry Novotochinov 2018-10-01 19:35:06 +03:00
parent 77f7a538f1
commit 7a06a415c2
No known key found for this signature in database
GPG Key ID: 43D1DAF5AD39C927
14 changed files with 363 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/icons/indicator-big.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="5" height="17" viewBox="0 0 5 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.43853 16.1688C1.23853 16.1688 1.03853 16.0688 0.838532 15.9688C0.338532 15.6687 0.238531 15.0688 0.538531 14.5688C1.93853 12.5688 2.63853 10.3688 2.63853 8.06875C2.63853 5.76875 1.93853 3.56875 0.538531 1.56875C0.338531 1.06875 0.438531 0.46875 0.938531 0.16875C1.33853 -0.13125 1.93853 -0.03125 2.33853 0.46875C3.93853 2.76875 4.73853 5.46875 4.73853 8.16875C4.73853 10.8687 3.93853 13.4687 2.33853 15.8687C2.13853 16.0687 1.73853 16.1688 1.43853 16.1688Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 588 B

3
resources/icons/indicator-middle.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.23853 11.4687C1.03853 11.4687 0.838532 11.3687 0.638532 11.2687C0.238532 10.9687 0.138533 10.2687 0.438533 9.86874C1.33853 8.66874 1.83853 7.36874 1.83853 6.06874C1.83853 4.76874 1.43853 3.46874 0.538532 2.26874C0.138532 1.86874 0.238532 1.26874 0.738532 0.868739C1.13853 0.568739 1.83853 0.668739 2.13853 1.06874C3.23853 2.66874 3.83853 4.26874 3.83853 6.06874C3.83853 7.86874 3.23853 9.46874 2.03853 11.0687C1.83853 11.3687 1.53853 11.4687 1.23853 11.4687Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 590 B

3
resources/icons/indicator-small.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="3" height="8" viewBox="0 0 3 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.03854 7.46876C0.838535 7.46876 0.538535 7.36876 0.438535 7.26876C0.0385354 6.86876 -0.0614647 6.26876 0.338535 5.86876C0.838535 5.26876 1.03854 4.66876 1.03854 4.16876C1.03854 3.56876 0.838535 2.96876 0.338535 2.36876C-0.161465 1.96876 -0.0614647 1.26876 0.338535 0.968757C0.738535 0.668757 1.43854 0.668757 1.73854 1.06876C2.53854 2.06876 2.93854 3.06876 2.93854 4.06876C2.93854 5.16876 2.53854 6.16876 1.73854 7.06876C1.63854 7.36876 1.33854 7.46876 1.03854 7.46876Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 598 B

26
src/status_im/events.cljs
View File

@ -677,7 +677,31 @@
(handlers/register-handler-fx
:hardwallet.ui/begin-setup-button-pressed
(fn [{:keys [db]} _]
{:db (assoc-in db [:hardwallet :setup-step] :prepare)}))
{:db (assoc-in db [:hardwallet :setup-step] :preparing)}))
(handlers/register-handler-fx
:hardwallet.ui/pair-card-button-pressed
(fn [{:keys [db]} _]
{:db (assoc-in db [:hardwallet :setup-step] :enter-pair-code)}))
(handlers/register-handler-fx
:hardwallet.ui/pair-code-input-changed
(fn [{:keys [db]} [_ pair-code]]
{:db (assoc-in db [:hardwallet :pair-code] pair-code)}))
(handlers/register-handler-fx
:hardwallet.ui/pair-code-next-button-pressed
(fn [{:keys [db]} _]))
(handlers/register-handler-fx
:hardwallet.ui/no-pairing-slots-help-button-pressed
(fn [cofx _]
(browser/open-url "https://hardwallet.status.im" cofx)))
(handlers/register-handler-fx
:hardwallet.ui/card-already-linked-help-button-pressed
(fn [cofx _]
(browser/open-url "https://hardwallet.status.im" cofx)))
(handlers/register-handler-fx
:hardwallet/connection-error

6
src/status_im/ui/components/animation.cljs
View File

@ -5,6 +5,12 @@
([anim] (.start anim))
([anim callback] (.start anim callback)))
(defn anim-loop [animation]
(.loop react/animated animation))
(defn interpolate [anim-value config]
(.interpolate anim-value (clj->js config)))
(defn timing [anim-value config]
(.timing react/animated anim-value (clj->js config)))

16
src/status_im/ui/components/icons/vector_icons.cljs
View File

@ -96,7 +96,10 @@
:icons/hardwallet (js/require "./resources/icons/hardwallet.svg")
:icons/password (js/require "./resources/icons/password.svg")
:icons/nfc (js/require "./resources/icons/nfc.svg")
:icons/reply (js/require "./resources/icons/reply.svg")}
:icons/reply (js/require "./resources/icons/reply.svg")
:icons/indicator-big (js/require "./resources/icons/indicator-big.svg")
:icons/indicator-middle (js/require "./resources/icons/indicator-middle.svg")
:icons/indicator-small (js/require "./resources/icons/indicator-small.svg")}
{:icons/discover (components.svg/slurp-svg "./resources/icons/bottom/discover_gray.svg")
:icons/contacts (components.svg/slurp-svg "./resources/icons/bottom/contacts_gray.svg")
:icons/home (components.svg/slurp-svg "./resources/icons/bottom/home_gray.svg")
@ -166,7 +169,10 @@
:icons/hardwallet (components.svg/slurp-svg "./resources/icons/hardwallet.svg")
:icons/password (components.svg/slurp-svg "./resources/icons/password.svg")
:icons/nfc (components.svg/slurp-svg "./resources/icons/nfc.svg")
:icons/reply (components.svg/slurp-svg "./resources/icons/reply.svg")}))
:icons/reply (components.svg/slurp-svg "./resources/icons/reply.svg")
:icons/indicator-big (components.svg/slurp-svg "./resources/icons/indicator-big.svg")
:icons/indicator-middle (components.svg/slurp-svg "./resources/icons/indicator-middle.svg")
:icons/indicator-small (components.svg/slurp-svg "./resources/icons/indicator-small.svg")}))
(defn normalize-property-name [n]
(if (= n :icons/options)
@ -186,11 +192,11 @@
:style (merge icon-style style)}]]))
(defn mobile-icon
[name {:keys [color container-style style accessibility-label width height]
[name {:keys [color container-style accessibility-label width height]
:or {accessibility-label :icon}}]
^{:key name}
[react/view {:style container-style
:accessibility-label accessibility-label}
[react/animated-view {:style container-style
:accessibility-label accessibility-label}
(if-let [icon-fn (get icons (normalize-property-name name))]
(let [icon-vec (icon-fn
(cond

30
src/status_im/ui/screens/hardwallet/pin/styles.cljs
View File

@ -2,14 +2,11 @@
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.ui.components.colors :as colors]))
(def container
{:flex 1
:background-color colors/white})
(def inner-container
{:flex-direction :column
:flex 1
:align-items :center})
(defstyle pin-container
{:flex 1
:flex-direction :column
:justify-content :space-between
:ios {:margin-top 30}})
(defstyle error-container
{:android {:margin-top 25}
@ -20,23 +17,6 @@
:font-size 15
:text-align :center})
(def maintain-card-container
{:flex-direction :row
:align-items :center
:justify-content :center
:margin-top 81
:width 369
:height 60
:border-radius 10
:border-width 1
:border-color colors/blue
:border-style :dashed})
(def maintain-card-text
{:padding-horizontal 20
:font-size 12
:color colors/blue})
(def center-container
{:flex-direction :column
:align-items :center

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

@ -58,31 +58,26 @@
(defn pin-view [{:keys [pin title step status error]}]
(let [enabled? (not= status :validating)]
[react/view styles/container
[react/view styles/inner-container
[react/view styles/maintain-card-container
[vector-icons/icon :icons/hardwallet {:color colors/blue}]
[react/text {:style styles/maintain-card-text}
(i18n/label :t/maintain-card-to-phone-contact)]]
[react/view styles/center-container
[react/text {:style styles/center-title-text
:font :bold}
(i18n/label title)]
[react/text {:style styles/create-pin-text
:number-of-lines 2}
(i18n/label :t/create-pin-description)]
(case status
:validating [react/view styles/waiting-indicator-container
[react/activity-indicator {:animating true
:size :small}]]
:error [react/view styles/error-container
[react/text {:style styles/error-text
:font :medium}
(i18n/label error)]]
[pin-indicators pin])
[numpad step enabled?]]]]))
[react/view styles/pin-container
[react/view styles/center-container
[react/text {:style styles/center-title-text
:font :bold}
(i18n/label title)]
[react/text {:style styles/create-pin-text
:number-of-lines 2}
(i18n/label :t/create-pin-description)]
(case status
:validating [react/view styles/waiting-indicator-container
[react/activity-indicator {:animating true
:size :small}]]
:error [react/view styles/error-container
[react/text {:style styles/error-text
:font :medium}
(i18n/label error)]]
[pin-indicators pin])
[numpad step enabled?]]]))
(defview hardwallet-pin []
(defview main []
(letsubs [original [:hardwallet/pin]
confirmation [:hardwallet/pin-confirmation]
enter-step [:hardwallet/pin-enter-step]

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

@ -1,4 +1,5 @@
(ns status-im.ui.screens.hardwallet.setup.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.ui.components.colors :as colors]))
(def container
@ -16,9 +17,9 @@
(def maintain-card-container
{:flex-direction :row
:align-items :center
:justify-content :center
:justify-content :space-between
:margin-top 81
:width 369
:width "90%"
:height 60
:border-radius 10
:border-width 1
@ -28,24 +29,60 @@
(def maintain-card-text
{:padding-horizontal 20
:font-size 12
:width 232
:color colors/blue})
(def hardwallet-icon-container
{:margin-left 20
:flex-direction :row
:align-items :center})
(defn hardwallet-icon-indicator-small-container [opacity]
{:margin-left 4
:opacity opacity})
(defn hardwallet-icon-indicator-middle-container [opacity]
{:margin-left 1
:opacity opacity})
(defn hardwallet-icon-indicator-big-container [opacity]
{:opacity opacity})
(def hardwallet-card-image-container
{:margin-top -50})
{:margin-top 81
:flex 1
:align-items :center})
(def hardwallet-card-image
{:width 255
:height 160})
(def card-is-empty-text-container
(def loading-view-container
{:flex 1
:flex-direction :column
:align-items :center
:margin-top 100})
(def card-with-button-view-container
{:flex 1
:flex-direction :column
:align-items :center})
(def enter-pair-code-container
{:flex 1
:flex-direction :column
:justify-content :space-between
:margin-top 80})
(def center-text-container
{:margin-top 37})
(def card-is-empty-text
(def center-text
{:font-size 15
:color colors/gray
:text-align :center})
(def bottom-action-container
(def bottom-button-container
{:background-color colors/gray-background
:align-items :center
:justify-content :center
@ -55,7 +92,7 @@
:border-radius 10
:margin-bottom 40})
(def begin-set-up-text
(def bottom-button-text
{:font-size 14
:color colors/blue
:line-height 20
@ -88,6 +125,12 @@
;; secret keys step
(def secret-keys-container
{:flex 1
:flex-direction :column
:justify-content :space-between
:margin-top 40})
(def secret-keys-inner-container
{:flex-direction :column
:align-items :center})
@ -106,37 +149,56 @@
(def puk-code-explanation-text
{:font-size 15
:width "90%"
:text-align :center
:padding-top 5
:color colors/gray})
(def puk-code-numbers-container
{:width 369
:height 64
:margin-top 20
:align-items :center
:justify-content :center
:border-width 1
:border-color colors/gray-light
:border-radius 10})
{:justify-content :center
: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})
(def puk-code-text
{:font-size 17
:text-align :center
:color colors/green})
(def pair-code-title-text
puk-code-title-text)
(def pair-code-explanation-text
(assoc puk-code-explanation-text :text-align :center))
(def pair-code-text-container
puk-code-numbers-container)
(def pair-code-text
puk-code-text)
(def next-button-container
{:flex-direction :row
:margin-horizontal 12
:margin-vertical 15})
{:flex-direction :row
:margin-vertical 15})
(def secret-keys-next-button-container
(assoc next-button-container
:width "100%"
:margin-right 12))
;; enter pair code
(def enter-pair-code-title-container
{:flex-direction :column
:align-items :center})
(defn enter-pair-code-input-container [width]
{:width (* width 0.9)
:margin-top 10})
(def enter-pair-code-title-text
{:font-size 22
:text-align :center
:color colors/black})
(def enter-pair-code-explanation-text
{:font-size 15
:padding-top 5
:color colors/gray})

7
src/status_im/ui/screens/hardwallet/setup/subs.cljs
View File

@ -4,4 +4,9 @@
(re-frame/reg-sub
:hardwallet-setup-step
(fn [db]
(get-in db [:hardwallet :setup-step])))
(get-in db [:hardwallet :setup-step])))
(re-frame/reg-sub
:hardwallet-pair-code
(fn [db]
(get-in db [:hardwallet :pair-code])))

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

@ -1,120 +1,205 @@
(ns status-im.ui.screens.hardwallet.setup.views
(: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.pin.views :as pin.views]
[status-im.ui.components.animation :as animation]
[status-im.ui.components.common.common :as components.common]
[status-im.react-native.resources :as resources]
[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.ui.components.styles :as components.styles]
[status-im.ui.components.text-input.view :as text-input]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]))
(defn begin []
[react/view styles/container
[react/view components.styles/flex
[react/view styles/inner-container
[react/view styles/maintain-card-container
[vector-icons/icon :icons/hardwallet {:color colors/blue}]
[react/text {:style styles/maintain-card-text}
(i18n/label :t/maintain-card-to-phone-contact)]]
[react/view styles/hardwallet-card-image-container
[react/image {:source (:hardwallet-card resources/ui)
:style styles/hardwallet-card-image}]
[react/view styles/card-is-empty-text-container
[react/text {:style styles/card-is-empty-text}
(i18n/label :t/card-is-empty)]]]
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:hardwallet.ui/begin-setup-button-pressed])}
[react/view styles/bottom-action-container
[react/text {:style styles/begin-set-up-text
:font :medium
:uppercase? true}
(i18n/label :t/begin-set-up)]]]]]])
(defn prepare []
[react/view styles/container
[react/view components.styles/flex
[react/view styles/inner-container
[react/view styles/maintain-card-container
[vector-icons/icon :icons/hardwallet {:color colors/blue}]
[react/text {:style styles/maintain-card-text}
(i18n/label :t/maintain-card-to-phone-contact)]]
[react/view styles/center-container
[react/text {:style styles/center-title-text
:font :bold}
(i18n/label :t/preparing-card)]
[react/text {:style styles/generating-codes-for-pairing-text
:number-of-lines 2}
(i18n/label :t/generating-codes-for-pairing)]
[react/text {:style styles/estimated-time-text}
(i18n/label :t/estimated-time
{:time "~20 seconds"})]]
[react/view styles/waiting-indicator-container
[react/activity-indicator {:animating true
:size :large}]]]]])
(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/container
[react/view components.styles/flex
[react/view styles/inner-container
[react/view styles/maintain-card-container
[vector-icons/icon :icons/hardwallet {:color colors/blue}]
[react/text {:style styles/maintain-card-text}
(i18n/label :t/maintain-card-to-phone-contact)]]
[react/view styles/secret-keys-container
[react/view styles/secret-keys-title-container
[react/text {:style styles/secret-keys-title-text
:number-of-lines 2
:font :bold}
(i18n/label :t/write-down-and-store-securely)]]
[react/text {:style styles/puk-code-title-text
[react/view styles/secret-keys-container
[react/view styles/secret-keys-inner-container
[react/view styles/secret-keys-title-container
[react/text {:style styles/secret-keys-title-text
:number-of-lines 2
:font :bold}
(i18n/label :t/write-down-and-store-securely)]]
[react/text {:style styles/puk-code-title-text
:font :bold}
(i18n/label :t/puk-code)]
[react/text {:style styles/puk-code-explanation-text}
(i18n/label :t/puk-code-explanation)]
[react/view styles/puk-code-numbers-container
[react/view styles/puk-code-numbers-inner-container
[react/text {:style styles/puk-code-text
:font :bold}
(i18n/label :t/puk-code)]
[react/text {:style styles/puk-code-explanation-text}
(i18n/label :t/puk-code-explanation)]
[react/view styles/puk-code-numbers-container
[react/text {:style styles/puk-code-text
:font :bold}
"1234 5678 9123"]]
[react/text {:style styles/pair-code-title-text
"1234 5678 9123"]]]
[react/text {:style styles/puk-code-title-text
:font :bold}
(i18n/label :t/pair-code)]
[react/text {:style styles/puk-code-explanation-text
:number-of-lines 2}
(i18n/label :t/pair-code-explanation)]
[react/view styles/puk-code-numbers-container
[react/view styles/puk-code-numbers-inner-container
[react/text {:style styles/puk-code-text
:font :bold}
(i18n/label :t/pair-code)]
[react/text {:style styles/pair-code-explanation-text
:number-of-lines 2}
(i18n/label :t/pair-code-explanation)]
[react/view styles/pair-code-text-container
[react/text {:style styles/pair-code-text
"a12k52kh0x"]]]]
[react/view styles/secret-keys-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}]]])
(defview enter-pair-code []
(letsubs [pair-code [:hardwallet-pair-code]
width [:dimensions/window-width]]
[react/view styles/enter-pair-code-container
[react/view styles/enter-pair-code-title-container
[react/view
[react/text {:style styles/enter-pair-code-title-text
:font :bold}
"a12k52kh0x"]]]
(i18n/label :t/enter-pair-code)]
[react/text {:style styles/enter-pair-code-explanation-text}
(i18n/label :t/enter-pair-code-description)]]
[react/view (styles/enter-pair-code-input-container width)
[text-input/text-input-with-label
{:on-change-text #(re-frame/dispatch [:hardwallet.ui/pair-code-input-changed %])
:secure-text-entry true
:placeholder ""}]]]
[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}]]]]])
{:on-press #(re-frame/dispatch [:hardwallet.ui/pair-code-next-button-pressed])
:disabled? (empty? pair-code)
:forward? true}]]]))
(defn- card-with-button-view
[{:keys [text-label button-label button-container-style on-press-event]}]
"Generic view with centered card image and button at the bottom.
Used by 'Prepare', 'Pair', 'No slots', 'Card is linked' screens"
[react/view styles/card-with-button-view-container
[react/view styles/hardwallet-card-image-container
[react/image {:source (:hardwallet-card resources/ui)
:style styles/hardwallet-card-image}]
[react/view styles/center-text-container
[react/text {:style styles/center-text}
(i18n/label text-label)]]]
[react/touchable-highlight
{:on-press #(re-frame/dispatch [on-press-event])}
[react/view (merge styles/bottom-button-container button-container-style)
[react/text {:style styles/bottom-button-text
:font :medium
:uppercase? true}
(i18n/label button-label)]]]])
(defn begin []
[card-with-button-view {:text-label :t/card-is-empty
:button-label :t/begin-set-up
:on-press-event :hardwallet.ui/begin-setup-button-pressed}])
(defn pair []
[card-with-button-view {:text-label :t/pair-card-question
:button-label :t/pair-card
:on-press-event :hardwallet.ui/pair-card-button-pressed}])
(defn no-slots []
[card-with-button-view {:text-label :t/no-pairing-slots-available
:button-label :t/help
:button-container-style {:background-color colors/white}
:on-press-event :hardwallet.ui/no-pairing-slots-help-button-pressed}])
(defn card-already-linked []
[card-with-button-view {:text-label :t/card-already-linked
:button-label :t/help
: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]}]
"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
[react/text {:style styles/center-title-text
:font :bold}
(i18n/label title-label)]
(when text-label
[react/text {:style styles/generating-codes-for-pairing-text
:number-of-lines 2}
(i18n/label text-label)])
[react/text {:style styles/estimated-time-text}
(str
(i18n/label :t/estimated-time)
" ~"
estimated-time-seconds
" "
(i18n/label-pluralize estimated-time-seconds
:t/datetime-second))]]
[react/view styles/waiting-indicator-container
[react/activity-indicator {:animating true
:size :large}]]])
(defn preparing []
[loading-view {:title-label :t/preparing-card
:text-label :t/generating-codes-for-pairing
:estimated-time-seconds 20}])
(defn pairing []
[loading-view {:title-label :t/pairing-card
:estimated-time-seconds 30}])
(defn complete []
[react/view styles/container
[react/view components.styles/flex
[react/view styles/inner-container
[react/view styles/maintain-card-container
[vector-icons/icon :icons/hardwallet {:color colors/blue}]
[react/text {:style styles/maintain-card-text}
(i18n/label :t/maintain-card-to-phone-contact)]]
[react/view styles/center-container
[react/text {:style styles/center-title-text
:font :bold}
(i18n/label :t/completing-card-setup)]
[react/text {:style styles/estimated-time-text}
(i18n/label :t/estimated-time {:time "~30 seconds"})]]
[react/view styles/waiting-indicator-container
[react/activity-indicator {:animating true
:size :large}]]]]])
[loading-view {:title-label :t/completing-card-setup
:estimated-time-seconds 30}])
(defn- content [step]
(case step
:begin [begin]
:preparing [preparing]
:secret-keys [secret-keys]
:complete [complete]
:pair [pair]
:enter-pair-code [enter-pair-code]
:no-slots [no-slots]
:card-already-linked [card-already-linked]
:pairing [pairing]
:pin [pin.views/main]
[begin]))
(defview hardwallet-setup []
(letsubs [step [:hardwallet-setup-step]]
(case step
:begin [begin]
:prepare [prepare]
:secret-keys [secret-keys]
:complete [complete])))
[react/keyboard-avoiding-view components.styles/flex
[react/view styles/container
[react/view styles/inner-container
[maintain-card]
[content step]]]]))

3
src/status_im/ui/screens/views.cljs
View File

@ -58,7 +58,6 @@
[status-im.ui.screens.accounts.create.views :refer [create-account]]
[status-im.ui.screens.hardwallet.authentication-method.views :refer [hardwallet-authentication-method]]
[status-im.ui.screens.hardwallet.connect.views :refer [hardwallet-connect]]
[status-im.ui.screens.hardwallet.pin.views :refer [hardwallet-pin]]
[status-im.ui.screens.hardwallet.setup.views :refer [hardwallet-setup]]
[status-im.ui.screens.hardwallet.success.views :refer [hardwallet-success]]
[status-im.ui.screens.profile.seed.views :refer [backup-seed]]
@ -142,7 +141,6 @@
(assoc :hardwallet-authentication-method hardwallet-authentication-method
:hardwallet-connect hardwallet-connect
:hardwallet-setup hardwallet-setup
:hardwallet-pin hardwallet-pin
:hardwallet-success hardwallet-success)))
(cond-> {:headerMode "none"}
(#{:intro :login} view-id)
@ -293,7 +291,6 @@
config/hardwallet-enabled?
(assoc :hardwallet-authentication-method hardwallet-authentication-method
:hardwallet-connect hardwallet-connect
:hardwallet-pin hardwallet-pin
:hardwallet-setup hardwallet-setup
:hardwallet-success hardwallet-success)))
{:headerMode "none"

10
translations/en.json
View File

@ -717,7 +717,7 @@
"maintain-card-to-phone-contact": "Maintain card-to-phone contact during process.",
"preparing-card": "Preparing card",
"generating-codes-for-pairing": "Generating codes for pairing with your Status account.",
"estimated-time": "Estimated time {{time}}",
"estimated-time": "Estimated time",
"cant-read-card": "Can't read card",
"cant-read-card-error-explanation": "Card must stay in contact with phone during setup so it can connect to the NFC reader",
"write-down-and-store-securely": "Write these down and store them securely",
@ -734,6 +734,14 @@
"create-pin-description": "You'll need your card + this PIN to log in and to confirm transactions",
"repeat-pin": "Repeate your PIN",
"pin-mismatch": "PIN does not match",
"pair-card": "pair card",
"pair-card-question": "Do you want to pair card to this device?",
"enter-pair-code": "Enter pair code",
"enter-pair-code-description": "Needed to link your card to this device",
"no-pairing-slots-available": "No pairing slots are available.\n You could unpair the device\n that already paired with the card",
"card-already-linked": "Card is already linked to another account",
"help": "help",
"pairing-card": "Pairing card",
"view-my-wallet": "View my wallet",
"share-my-profile": "Share my profile",
"share-chat": "Share chat",

2
translations/ms.json
View File

@ -284,7 +284,7 @@
"error-unable-to-get-token-balance": "Tidak boleh mendapatkan baki token",
"error-unable-to-get-transactions": "Tidak dapat memperoleh sejarah transaksi",
"errors": "Ralat",
"estimated-time": "Anggaran masa {{time}}",
"estimated-time": "Anggaran masa",
"eth": "ETH",
"existing-networks": "Rangkaian sedia ada",
"existing-wnodes": "Mailserver sedia ada",