remove keycard views with old design
This commit is contained in:
Dmitry Novotochinov
Roman Volosovskyi
parent
3d4e9df825
commit
a6a65ec0e4
|
|
@ -888,20 +888,6 @@
|
||||||
(fn [{:keys [db]} _]
|
(fn [{:keys [db]} _]
|
||||||
{:db (assoc-in db [:hardwallet :setup-step] :recovery-phrase)}))
|
{:db (assoc-in db [:hardwallet :setup-step] :recovery-phrase)}))
|
||||||
|
|
||||||
(handlers/register-handler-fx
|
|
||||||
:hardwallet/connection-error
|
|
||||||
(fn [_ _]
|
|
||||||
{:utils/show-popup {:title (i18n/label :t/cant-read-card)
|
|
||||||
:content (i18n/label :t/cant-read-card-error-explanation)
|
|
||||||
:on-dismiss #(re-frame/dispatch [:hardwallet.ui/connection-error-confirm-button-pressed])}}))
|
|
||||||
|
|
||||||
(handlers/register-handler-fx
|
|
||||||
:hardwallet.ui/connection-error-confirm-button-pressed
|
|
||||||
(fn [{:keys [db] :as cofx} _]
|
|
||||||
(fx/merge cofx
|
|
||||||
{:db (assoc-in db [:hardwallet :setup-step] :begin)}
|
|
||||||
(navigation/navigate-to-cofx :hardwallet-setup nil))))
|
|
||||||
|
|
||||||
(handlers/register-handler-fx
|
(handlers/register-handler-fx
|
||||||
:hardwallet/load-generating-mnemonic-screen
|
:hardwallet/load-generating-mnemonic-screen
|
||||||
(fn [cofx _]
|
(fn [cofx _]
|
||||||
|
|
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
(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]
|
|
||||||
[re-frame.core :as re-frame]))
|
|
||||||
|
|
||||||
(defview application-info [visible?]
|
|
||||||
(letsubs [info [:hardwallet-application-info]
|
|
||||||
error [:hardwallet-application-info-error]]
|
|
||||||
[react/modal {:visible @visible?
|
|
||||||
:transparent false
|
|
||||||
:on-request-close #()}
|
|
||||||
[react/view {:padding 20
|
|
||||||
:justify-content :center}
|
|
||||||
[react/text {:style {:font-size 18
|
|
||||||
:font-weight "700"}}
|
|
||||||
"Application info"]
|
|
||||||
[react/view {:margin-top 20}
|
|
||||||
(if-not error
|
|
||||||
(for [[k v] info]
|
|
||||||
^{:key k} [react/text (str k " " v)])
|
|
||||||
[react/text "Applet is not installed"])]
|
|
||||||
[react/touchable-highlight
|
|
||||||
{:on-press #(reset! visible? false)}
|
|
||||||
[react/view {:align-items :center
|
|
||||||
:text-style :underline
|
|
||||||
:margin-top 48}
|
|
||||||
[react/text {:style {:font-size 18}}
|
|
||||||
"Close window"]]]]]))
|
|
||||||
|
|
||||||
(def step-name
|
|
||||||
{:pin {:label :t/pin-code
|
|
||||||
:number 1
|
|
||||||
:next-step :preparing}
|
|
||||||
:preparing {:label :t/initialization
|
|
||||||
:number 2
|
|
||||||
:next-step :secret-keys}
|
|
||||||
:secret-keys {:label :t/puk-and-pair-codes
|
|
||||||
:number 3
|
|
||||||
:next-step :pairing}
|
|
||||||
:pairing {:label :t/pairing
|
|
||||||
:number 4
|
|
||||||
:next-step :recovery-phrase}
|
|
||||||
:card-ready {:label :t/pairing
|
|
||||||
:number 4
|
|
||||||
:next-step :recovery-phrase}
|
|
||||||
:generating-mnemonic {:label :t/recovery-phrase
|
|
||||||
:number 5}
|
|
||||||
:recovery-phrase-confirm-word1 {:label :t/recovery-phrase
|
|
||||||
:number 5}
|
|
||||||
:recovery-phrase-confirm-word2 {:label :t/recovery-phrase
|
|
||||||
:number 5}
|
|
||||||
:loading-keys {:label :t/recovery-phrase
|
|
||||||
:number 5}
|
|
||||||
:recovery-phrase {:label :t/recovery-phrase
|
|
||||||
:number 5}})
|
|
||||||
|
|
||||||
(defn- setup-steps [step]
|
|
||||||
(let [current-step (step-name step)
|
|
||||||
{current-label :label current-number :number second-step :next-step} current-step
|
|
||||||
{second-label :label second-number :number third-step :next-step} (step-name second-step)
|
|
||||||
{third-label :label third-number :number} (step-name third-step)]
|
|
||||||
(if current-label
|
|
||||||
[react/view styles/setup-steps-container
|
|
||||||
[react/text {:style styles/maintain-card-current-step-text}
|
|
||||||
(str current-number ". " (i18n/label current-label))]
|
|
||||||
(when second-label
|
|
||||||
[react/text {:style styles/maintain-card-second-step-text}
|
|
||||||
(str second-number ". " (i18n/label second-label))])
|
|
||||||
(when third-label
|
|
||||||
[react/view {:flex 1}
|
|
||||||
[react/text {:style styles/maintain-card-third-step-text
|
|
||||||
:number-of-lines 1}
|
|
||||||
(str third-number ". " (i18n/label third-label))]])]
|
|
||||||
[react/text {:style styles/maintain-card-text
|
|
||||||
:number-of-lines 2}
|
|
||||||
(i18n/label :t/maintain-card-to-phone-contact)])))
|
|
||||||
|
|
||||||
(defn maintain-card [step]
|
|
||||||
(let [modal-visible? (reagent/atom false)
|
|
||||||
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 [step] [react/view styles/maintain-card-container
|
|
||||||
[react/view styles/hardwallet-icon-container
|
|
||||||
[vector-icons/icon :main-icons/keycard {: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]))}]]
|
|
||||||
[setup-steps step]
|
|
||||||
[application-info modal-visible?]])})))
|
|
||||||
|
|
||||||
(defn wizard-step [step-number]
|
|
||||||
(when step-number
|
|
||||||
[react/text {:style styles/wizard-step-text}
|
|
||||||
(i18n/label :wizard-step {:current step-number
|
|
||||||
:total 5})]))
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
(ns status-im.ui.screens.hardwallet.login.styles
|
|
||||||
(: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
|
|
||||||
:justify-content :space-between})
|
|
||||||
|
|
||||||
(def login-view
|
|
||||||
{:flex 1
|
|
||||||
:margin-horizontal 16})
|
|
||||||
|
|
||||||
(def login-badge-container
|
|
||||||
{:margin-top 24})
|
|
||||||
|
|
||||||
(def processing-view
|
|
||||||
{:flex 1
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center})
|
|
||||||
|
|
||||||
(def sign-you-in
|
|
||||||
{:margin-top 16
|
|
||||||
:font-size 13})
|
|
||||||
|
|
||||||
(def bottom-button-container
|
|
||||||
{:flex-direction :row
|
|
||||||
:margin-horizontal 12
|
|
||||||
:margin-vertical 15
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(def login-badge
|
|
||||||
{:align-items :center})
|
|
||||||
|
|
||||||
(def login-badge-image-size 56)
|
|
||||||
|
|
||||||
(def login-badge-name
|
|
||||||
{:margin-top 8})
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
(ns status-im.ui.screens.hardwallet.login.views
|
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
|
||||||
(:require [status-im.multiaccounts.core :as multiaccounts]
|
|
||||||
[status-im.ui.screens.hardwallet.pin.views :as pin.views]
|
|
||||||
[status-im.ui.screens.hardwallet.connect.views :as connect.views]
|
|
||||||
[status-im.ui.screens.hardwallet.components :as components]
|
|
||||||
[status-im.ui.screens.hardwallet.login.styles :as styles]
|
|
||||||
[status-im.ui.screens.hardwallet.settings.views :as settings.views]
|
|
||||||
[status-im.ui.components.react :as react]
|
|
||||||
[status-im.ui.components.styles :as components.styles]
|
|
||||||
[status-im.ui.components.status-bar.view :as status-bar]
|
|
||||||
[status-im.ui.components.toolbar.view :as toolbar]
|
|
||||||
[status-im.ui.components.common.common :as components.common]
|
|
||||||
[status-im.ui.screens.chat.photos :as photos]
|
|
||||||
[status-im.i18n :as i18n]
|
|
||||||
[status-im.ui.components.toolbar.actions :as toolbar.actions]
|
|
||||||
[status-im.ui.components.react :as react.components]
|
|
||||||
[re-frame.core :as re-frame]))
|
|
||||||
|
|
||||||
(defview hardwallet-login []
|
|
||||||
(letsubs [{:keys [photo-path name processing] :as account} [:multiaccounts/login]
|
|
||||||
nfc-enabled? [:hardwallet/nfc-enabled?]]
|
|
||||||
[react/keyboard-avoiding-view styles/container
|
|
||||||
[status-bar/status-bar]
|
|
||||||
[toolbar/toolbar
|
|
||||||
nil
|
|
||||||
[toolbar/nav-button
|
|
||||||
(toolbar.actions/back #(re-frame/dispatch [:navigate-to-clean :multiaccounts]))]
|
|
||||||
[toolbar/content-title (i18n/label :t/sign-in-to-status)]]
|
|
||||||
[components.common/separator]
|
|
||||||
[react/view styles/login-view
|
|
||||||
[react/view styles/login-badge-container
|
|
||||||
[react/view styles/login-badge
|
|
||||||
;;TODO this should be done in a subscription
|
|
||||||
[photos/photo (multiaccounts/displayed-photo account) {:size styles/login-badge-image-size}]
|
|
||||||
[react/view
|
|
||||||
[react/text {:style styles/login-badge-name
|
|
||||||
:numberOfLines 1}
|
|
||||||
name]]]
|
|
||||||
[react/view
|
|
||||||
(if nfc-enabled?
|
|
||||||
[connect.views/nfc-enabled]
|
|
||||||
[connect.views/nfc-disabled])]]]
|
|
||||||
(when processing
|
|
||||||
[react/view styles/processing-view
|
|
||||||
[react.components/activity-indicator {:animating true}]
|
|
||||||
[react/i18n-text {:style styles/sign-you-in :key :sign-you-in}]])
|
|
||||||
(when-not processing
|
|
||||||
[react/view {:style styles/bottom-button-container}
|
|
||||||
[react/view {:style {:flex 1}}]])]))
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[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]
|
|
||||||
[status-im.ui.components.toolbar.view :as toolbar]
|
[status-im.ui.components.toolbar.view :as toolbar]
|
||||||
[status-im.ui.components.status-bar.view :as status-bar]
|
[status-im.ui.components.status-bar.view :as status-bar]
|
||||||
[status-im.ui.components.toolbar.actions :as actions]
|
[status-im.ui.components.toolbar.actions :as actions]
|
||||||
|
|
|
||||||
|
|
@ -1,332 +0,0 @@
|
||||||
(ns status-im.ui.screens.hardwallet.setup.styles
|
|
||||||
(:require [status-im.ui.components.colors :as colors]
|
|
||||||
[status-im.utils.styles :as styles]))
|
|
||||||
|
|
||||||
(def container
|
|
||||||
{:flex 1
|
|
||||||
:justify-content :space-between
|
|
||||||
:background-color colors/white})
|
|
||||||
|
|
||||||
(def inner-container
|
|
||||||
{:flex-direction :column
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :space-between})
|
|
||||||
|
|
||||||
;; setup step
|
|
||||||
|
|
||||||
(def maintain-card-container
|
|
||||||
{:flex-direction :row
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :space-between
|
|
||||||
:margin-top 41
|
|
||||||
:width "90%"
|
|
||||||
:height 60
|
|
||||||
:border-radius 10
|
|
||||||
:border-width 1
|
|
||||||
:border-color colors/blue-light})
|
|
||||||
|
|
||||||
(def maintain-card-text
|
|
||||||
{:typography :caption
|
|
||||||
:flex 1
|
|
||||||
:padding-horizontal 20
|
|
||||||
:color colors/blue})
|
|
||||||
|
|
||||||
(def setup-steps-container
|
|
||||||
{:flex-direction :row
|
|
||||||
:align-items :baseline
|
|
||||||
:flex 1
|
|
||||||
:width "95%"
|
|
||||||
:background-color :white
|
|
||||||
:padding-left 10
|
|
||||||
:margin-right 10})
|
|
||||||
|
|
||||||
(def maintain-card-current-step-text
|
|
||||||
{:typography :caption
|
|
||||||
:color colors/blue})
|
|
||||||
|
|
||||||
(def maintain-card-second-step-text
|
|
||||||
{:typography :caption
|
|
||||||
:padding-left 8
|
|
||||||
:color colors/gray})
|
|
||||||
|
|
||||||
(def maintain-card-third-step-text
|
|
||||||
{:typography :caption
|
|
||||||
:padding-left 8
|
|
||||||
:color colors/gray})
|
|
||||||
|
|
||||||
(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 47
|
|
||||||
:flex 1
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(def hardwallet-card-image
|
|
||||||
{:width 255
|
|
||||||
:height 160})
|
|
||||||
|
|
||||||
(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 card-blank-container
|
|
||||||
{:flex 1
|
|
||||||
:flex-direction :column})
|
|
||||||
|
|
||||||
(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 center-text
|
|
||||||
{:color colors/gray
|
|
||||||
:text-align :center})
|
|
||||||
|
|
||||||
(def center-title-text
|
|
||||||
{:typography :header
|
|
||||||
:text-align :center})
|
|
||||||
|
|
||||||
(def bottom-container
|
|
||||||
{:height 52
|
|
||||||
:width "100%"
|
|
||||||
:justify-content :center
|
|
||||||
:align-items :center
|
|
||||||
:border-top-width 1
|
|
||||||
:border-color colors/black-transparent})
|
|
||||||
|
|
||||||
(def bottom-button-container
|
|
||||||
{:background-color colors/blue-light
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center
|
|
||||||
:flex-direction :row
|
|
||||||
:width 160
|
|
||||||
:height 44
|
|
||||||
:border-radius 10})
|
|
||||||
|
|
||||||
(def begin-button-container
|
|
||||||
{:background-color colors/blue-light
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center
|
|
||||||
:flex-direction :row
|
|
||||||
:width 160
|
|
||||||
:height 42
|
|
||||||
:border-radius 10
|
|
||||||
:margin-bottom 1})
|
|
||||||
|
|
||||||
(def bottom-button-text
|
|
||||||
{:typography :main-medium
|
|
||||||
:color colors/blue})
|
|
||||||
|
|
||||||
(def next-button-container
|
|
||||||
{:flex-direction :row
|
|
||||||
:justify-content :space-between
|
|
||||||
:align-items :center
|
|
||||||
:width "100%"
|
|
||||||
:height 52
|
|
||||||
:border-top-width 1
|
|
||||||
:border-color colors/black-transparent})
|
|
||||||
|
|
||||||
(def back-and-next-buttons-container
|
|
||||||
{:flex-direction :row
|
|
||||||
:justify-content :space-between
|
|
||||||
:margin-vertical 15})
|
|
||||||
|
|
||||||
;; prepare step
|
|
||||||
|
|
||||||
(def center-container
|
|
||||||
{:flex-direction :column
|
|
||||||
:align-items :center
|
|
||||||
:height 200})
|
|
||||||
|
|
||||||
(def wizard-step-text
|
|
||||||
{:typography :caption
|
|
||||||
:color colors/blue
|
|
||||||
:text-align :center
|
|
||||||
:padding-bottom 18})
|
|
||||||
|
|
||||||
(def generating-codes-for-pairing-text
|
|
||||||
{:padding-top 8
|
|
||||||
:width 314
|
|
||||||
:text-align :center
|
|
||||||
:color colors/gray})
|
|
||||||
|
|
||||||
(def estimated-time-text
|
|
||||||
(assoc generating-codes-for-pairing-text :padding-top 25))
|
|
||||||
|
|
||||||
(def recovery-phrase-inner-container
|
|
||||||
{:align-self :center})
|
|
||||||
|
|
||||||
(def check-recovery-phrase-text
|
|
||||||
{:typography :header
|
|
||||||
:text-align :center
|
|
||||||
:color colors/gray})
|
|
||||||
|
|
||||||
(def recovery-phrase-word-n-text
|
|
||||||
{:typography :header
|
|
||||||
:text-align :center})
|
|
||||||
|
|
||||||
(def recovery-phrase-description
|
|
||||||
{:padding 16})
|
|
||||||
|
|
||||||
(def waiting-indicator-container
|
|
||||||
{:height 200})
|
|
||||||
|
|
||||||
(def progress-bar-container
|
|
||||||
{:width "65%"})
|
|
||||||
|
|
||||||
;; secret keys step
|
|
||||||
|
|
||||||
(def secret-keys-container
|
|
||||||
{:flex 1
|
|
||||||
:flex-direction :column
|
|
||||||
:justify-content :space-between
|
|
||||||
:margin-top 30})
|
|
||||||
|
|
||||||
(def secret-keys-inner-container
|
|
||||||
{:flex-direction :column
|
|
||||||
:justify-content :space-between
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(def secret-keys-title-container
|
|
||||||
{:width 292
|
|
||||||
:margin-vertical 25})
|
|
||||||
|
|
||||||
(def secret-keys-title-text
|
|
||||||
{:typography :header
|
|
||||||
:text-align :center})
|
|
||||||
|
|
||||||
(def secret-keys-image-container
|
|
||||||
{:width 120
|
|
||||||
:height 120})
|
|
||||||
|
|
||||||
(def puk-code-title-text
|
|
||||||
{:typography :title-bold
|
|
||||||
:padding-top 12})
|
|
||||||
|
|
||||||
(def secret-code-explanation-container
|
|
||||||
{:margin-top 5
|
|
||||||
:margin-bottom 15})
|
|
||||||
|
|
||||||
(def puk-code-explanation-text
|
|
||||||
{:padding-horizontal 32
|
|
||||||
:text-align :center
|
|
||||||
:padding-top 5
|
|
||||||
:padding-bottom 10
|
|
||||||
:color colors/gray})
|
|
||||||
|
|
||||||
(def puk-code-numbers-container
|
|
||||||
{:justify-content :center
|
|
||||||
:flex-direction :row})
|
|
||||||
|
|
||||||
(def puk-code-numbers-border-container
|
|
||||||
{:border-bottom-width 2
|
|
||||||
:width 302
|
|
||||||
:text-align :center
|
|
||||||
:border-color colors/gray-lighter})
|
|
||||||
|
|
||||||
(styles/def puk-code-numbers-inner-container
|
|
||||||
{:width "85%"
|
|
||||||
:android {:margin-horizontal 16}
|
|
||||||
:height 94
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :space-between
|
|
||||||
:flex-direction :column
|
|
||||||
:border-width 2
|
|
||||||
:border-color colors/gray-lighter
|
|
||||||
:border-radius 10})
|
|
||||||
|
|
||||||
(def puk-code-text
|
|
||||||
{:typography :title-bold
|
|
||||||
:padding-bottom 10
|
|
||||||
:text-align :center
|
|
||||||
:color colors/green})
|
|
||||||
|
|
||||||
;; card ready
|
|
||||||
|
|
||||||
(def card-ready-container secret-keys-container)
|
|
||||||
|
|
||||||
(def card-ready-inner-container
|
|
||||||
{:align-self :center
|
|
||||||
:flex 1
|
|
||||||
:justify-content :space-between})
|
|
||||||
|
|
||||||
;; 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
|
|
||||||
{:typography :title
|
|
||||||
:text-align :center})
|
|
||||||
|
|
||||||
(def enter-pair-code-explanation-text
|
|
||||||
{:padding-top 5
|
|
||||||
:text-align :center
|
|
||||||
:padding-horizontal 60
|
|
||||||
:color colors/gray})
|
|
||||||
|
|
||||||
(def card-is-empty-text
|
|
||||||
{:typography :title-bold
|
|
||||||
:margin-bottom 20})
|
|
||||||
|
|
||||||
(def card-is-empty-prepare-text
|
|
||||||
{:margin-top 25
|
|
||||||
:padding-horizontal 40})
|
|
||||||
|
|
||||||
(def remaining-steps-container
|
|
||||||
{:margin-top 55
|
|
||||||
:margin-left 16
|
|
||||||
:flex 1
|
|
||||||
:width "90%"
|
|
||||||
:flex-direction :column})
|
|
||||||
|
|
||||||
(def remaining-steps-text
|
|
||||||
{:color colors/gray})
|
|
||||||
|
|
||||||
(def remaining-step-row
|
|
||||||
{:flex-direction :row
|
|
||||||
:margin-top 15})
|
|
||||||
|
|
||||||
(def remaining-step-row-text
|
|
||||||
{:border-width 1
|
|
||||||
:border-radius 16
|
|
||||||
:border-color colors/black-transparent
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center
|
|
||||||
:width 32
|
|
||||||
:height 32})
|
|
||||||
|
|
||||||
(def remaining-step-row-text2
|
|
||||||
{:align-items :center
|
|
||||||
:justify-content :center
|
|
||||||
:margin-left 11})
|
|
||||||
|
|
@ -1,486 +0,0 @@
|
||||||
(ns status-im.ui.screens.hardwallet.setup.views
|
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
|
||||||
(:require [re-frame.core :as re-frame]
|
|
||||||
[goog.functions :refer [debounce]]
|
|
||||||
[status-im.react-native.js-dependencies :as js-dependencies]
|
|
||||||
[status-im.ui.screens.profile.seed.views :as seed.views]
|
|
||||||
[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]
|
|
||||||
[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.utils.utils :as utils]
|
|
||||||
[status-im.ui.components.colors :as colors]
|
|
||||||
[status-im.ui.screens.hardwallet.setup.styles :as styles]
|
|
||||||
[status-im.utils.security :as security]))
|
|
||||||
|
|
||||||
(defonce event-emitter (.-DeviceEventEmitter js-dependencies/react-native))
|
|
||||||
|
|
||||||
(defview secret-keys []
|
|
||||||
(letsubs [secrets [:hardwallet-secrets]]
|
|
||||||
[react/view styles/secret-keys-container
|
|
||||||
[react/scroll-view
|
|
||||||
[react/view styles/secret-keys-inner-container
|
|
||||||
[react/view
|
|
||||||
[react/image {:source (resources/get-image :secret-keys)
|
|
||||||
:style styles/secret-keys-image-container}]]
|
|
||||||
[react/view styles/secret-keys-title-container
|
|
||||||
[react/text {:style styles/secret-keys-title-text
|
|
||||||
:number-of-lines 2}
|
|
||||||
(i18n/label :t/write-down-and-store-securely)]]
|
|
||||||
[react/view styles/puk-code-numbers-container
|
|
||||||
[react/view styles/puk-code-numbers-inner-container
|
|
||||||
[react/text {:style styles/puk-code-title-text}
|
|
||||||
(i18n/label :t/pin-code)]
|
|
||||||
[react/view styles/puk-code-numbers-border-container]
|
|
||||||
[react/text {:style styles/puk-code-text}
|
|
||||||
(:pin secrets)]]]
|
|
||||||
[react/view styles/secret-code-explanation-container
|
|
||||||
[react/text {:style styles/puk-code-explanation-text}
|
|
||||||
(i18n/label :t/pin-code-description)]]
|
|
||||||
[react/view styles/puk-code-numbers-container
|
|
||||||
[react/view styles/puk-code-numbers-inner-container
|
|
||||||
[react/text {:style styles/puk-code-title-text}
|
|
||||||
(i18n/label :t/puk-code)]
|
|
||||||
[react/view styles/puk-code-numbers-border-container]
|
|
||||||
[react/text {:style styles/puk-code-text}
|
|
||||||
(:puk secrets)]]]
|
|
||||||
[react/view styles/secret-code-explanation-container
|
|
||||||
[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-title-text}
|
|
||||||
(i18n/label :t/pair-code)]
|
|
||||||
[react/view styles/puk-code-numbers-border-container]
|
|
||||||
[react/text {:style styles/puk-code-text}
|
|
||||||
(:password secrets)]]]
|
|
||||||
[react/view styles/secret-code-explanation-container
|
|
||||||
[react/text {:style styles/puk-code-explanation-text
|
|
||||||
:number-of-lines 2}
|
|
||||||
(i18n/label :t/pair-code-explanation)]]]
|
|
||||||
[react/view styles/next-button-container
|
|
||||||
[react/view components.styles/flex]
|
|
||||||
[react/view {:margin-right 20}
|
|
||||||
[components.common/bottom-button
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/secret-keys-next-button-pressed])
|
|
||||||
:forward? true}]]]]]))
|
|
||||||
|
|
||||||
(defview card-ready []
|
|
||||||
(letsubs [flow [:hardwallet-flow]]
|
|
||||||
[react/view styles/card-ready-container
|
|
||||||
[react/view styles/card-ready-inner-container
|
|
||||||
[react/view (assoc styles/center-container :margin-top 68)
|
|
||||||
[react/text {:style styles/center-title-text}
|
|
||||||
(i18n/label :t/card-is-paired)]
|
|
||||||
[react/text {:style styles/estimated-time-text}
|
|
||||||
(if (= flow :create)
|
|
||||||
(i18n/label :t/next-step-generating-mnemonic)
|
|
||||||
(i18n/label :t/next-step-entering-mnemonic))]]
|
|
||||||
[react/view]
|
|
||||||
[react/view styles/next-button-container
|
|
||||||
[react/view components.styles/flex]
|
|
||||||
[react/view {:margin-right 20}
|
|
||||||
[components.common/bottom-button
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/card-ready-next-button-pressed])
|
|
||||||
:forward? true}]]]]]))
|
|
||||||
|
|
||||||
(defn- import-multiaccount []
|
|
||||||
[react/view styles/card-ready-container
|
|
||||||
[react/view styles/card-ready-inner-container
|
|
||||||
[react/view (assoc styles/center-container :margin-top 68)
|
|
||||||
[react/text {:style styles/center-title-text}
|
|
||||||
(i18n/label :t/card-is-paired)]
|
|
||||||
[react/text {:style styles/estimated-time-text}
|
|
||||||
(i18n/label :t/ready-to-import-keycard-multiaccount)]]
|
|
||||||
[react/view]]
|
|
||||||
[react/view styles/back-and-next-buttons-container
|
|
||||||
[components.common/bottom-button
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/import-multiaccount-back-button-pressed])
|
|
||||||
:back? true
|
|
||||||
:label (i18n/label :t/back)}]
|
|
||||||
[components.common/bottom-button
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/import-multiaccount-next-button-pressed])
|
|
||||||
:forward? true}]]])
|
|
||||||
|
|
||||||
(defview display-recovery-phrase []
|
|
||||||
(letsubs [mnemonic [:hardwallet-mnemonic]]
|
|
||||||
(let [mnemonic-vec (vec (map-indexed vector (clojure.string/split mnemonic #" ")))]
|
|
||||||
[react/view styles/card-ready-container
|
|
||||||
[react/view styles/recovery-phrase-inner-container
|
|
||||||
[react/view styles/center-container
|
|
||||||
[react/text {:style styles/center-title-text
|
|
||||||
:number-of-lines 2}
|
|
||||||
(i18n/label :t/your-recovery-phrase)]
|
|
||||||
[react/view
|
|
||||||
[react/view {:style {:margin-top 17
|
|
||||||
:margin-bottom 16
|
|
||||||
:margin-horizontal 16
|
|
||||||
:flex-direction :row
|
|
||||||
:border-radius 8
|
|
||||||
:background-color colors/white
|
|
||||||
:border-width 1
|
|
||||||
:border-color colors/gray-lighter}}
|
|
||||||
[seed.views/six-words (subvec mnemonic-vec 0 6)]
|
|
||||||
[react/view {:style {:width 1
|
|
||||||
:background-color colors/gray-lighter}}]
|
|
||||||
[seed.views/six-words (subvec mnemonic-vec 6 12)]]
|
|
||||||
[react/view styles/recovery-phrase-description
|
|
||||||
[react/text (i18n/label :t/your-recovery-phrase-description)]]]]]
|
|
||||||
[react/view styles/next-button-container
|
|
||||||
[react/view components.styles/flex]
|
|
||||||
[react/view {:margin-right 20}
|
|
||||||
[components.common/bottom-button
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-next-button-pressed])
|
|
||||||
:label (i18n/label :t/next)
|
|
||||||
:forward? true}]]]])))
|
|
||||||
|
|
||||||
(defview confirm-word-input [error ref step]
|
|
||||||
{:component-will-update #(.clear @ref)}
|
|
||||||
[text-input/text-input-with-label
|
|
||||||
{:on-change-text #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-confirm-word-input-changed %])
|
|
||||||
:auto-focus true
|
|
||||||
:ref (partial reset! ref)
|
|
||||||
:on-submit-editing #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-confirm-word-next-button-pressed])
|
|
||||||
:error error
|
|
||||||
:placeholder (i18n/label :t/enter-word)}])
|
|
||||||
|
|
||||||
(defview recovery-phrase-confirm-word [step]
|
|
||||||
^{:key (str step)}
|
|
||||||
(letsubs [width [:dimensions/window-width]
|
|
||||||
word [:hardwallet-recovery-phrase-word]
|
|
||||||
input-word [:hardwallet-recovery-phrase-input-word]
|
|
||||||
error [:hardwallet-recovery-phrase-confirm-error]
|
|
||||||
ref (atom nil)]
|
|
||||||
(let [{:keys [word idx]} word]
|
|
||||||
[react/view styles/enter-pair-code-container
|
|
||||||
[react/view styles/enter-pair-code-title-container
|
|
||||||
[react/view
|
|
||||||
[react/text {:style styles/check-recovery-phrase-text}
|
|
||||||
(i18n/label :t/check-your-recovery-phrase)]
|
|
||||||
[react/text {:style styles/recovery-phrase-word-n-text}
|
|
||||||
(i18n/label :t/word-n {:number (inc idx)})]]
|
|
||||||
[react/view (styles/enter-pair-code-input-container width)
|
|
||||||
[confirm-word-input error ref step]]]
|
|
||||||
[react/view styles/back-and-next-buttons-container
|
|
||||||
[components.common/bottom-button
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-confirm-word-back-button-pressed])
|
|
||||||
:back? true
|
|
||||||
:label (i18n/label :t/back)}]
|
|
||||||
[components.common/bottom-button
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-confirm-word-next-button-pressed])
|
|
||||||
:disabled? (empty? input-word)
|
|
||||||
:forward? true}]]])))
|
|
||||||
|
|
||||||
(defview enter-recovery-phrase []
|
|
||||||
(letsubs [width [:dimensions/window-width]
|
|
||||||
recovered-multiaccount [:get-recover-multiaccount]]
|
|
||||||
(let [{:keys [passphrase passphrase-valid? passphrase-error passphrase-warning]} recovered-multiaccount
|
|
||||||
disabled? (not passphrase-valid?)
|
|
||||||
validate-passphrase (debounce
|
|
||||||
#(re-frame/dispatch [:multiaccounts.recover.ui/passphrase-input-blured])
|
|
||||||
1000)]
|
|
||||||
[react/view styles/enter-pair-code-container
|
|
||||||
[react/view styles/enter-pair-code-title-container
|
|
||||||
[react/view
|
|
||||||
[react/text {:style styles/center-title-text
|
|
||||||
:number-of-lines 2}
|
|
||||||
(i18n/label :t/your-recovery-phrase)]
|
|
||||||
[react/view (styles/enter-pair-code-input-container width)
|
|
||||||
[text-input/text-input-with-label
|
|
||||||
{:style {:flex 1
|
|
||||||
:text-align-vertical :top}
|
|
||||||
:height 92
|
|
||||||
:accessibility-label :enter-12-words
|
|
||||||
:placeholder (i18n/label :t/enter-12-words)
|
|
||||||
:multiline true
|
|
||||||
:default-value passphrase
|
|
||||||
:auto-correct false
|
|
||||||
:on-change-text #(do
|
|
||||||
(re-frame/dispatch [:multiaccounts.recover.ui/passphrase-input-changed (security/mask-data %)])
|
|
||||||
(validate-passphrase))
|
|
||||||
:error (cond passphrase-error (i18n/label passphrase-error)
|
|
||||||
passphrase-warning (i18n/label passphrase-warning))}]]]]
|
|
||||||
[react/view styles/next-button-container
|
|
||||||
[react/view components.styles/flex]
|
|
||||||
[react/view {:margin-right 20}
|
|
||||||
[components.common/bottom-button
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-next-button-pressed])
|
|
||||||
:label (i18n/label :t/next)
|
|
||||||
:disabled? disabled?
|
|
||||||
:forward? true}]]]])))
|
|
||||||
|
|
||||||
(defview recovery-phrase []
|
|
||||||
(letsubs [flow [:hardwallet-flow]]
|
|
||||||
(if (= flow :create)
|
|
||||||
(display-recovery-phrase)
|
|
||||||
(enter-recovery-phrase))))
|
|
||||||
|
|
||||||
(defview enter-pair-code-input [ref]
|
|
||||||
{:component-will-update #(.clear @ref)}
|
|
||||||
[text-input/text-input-with-label
|
|
||||||
{:on-change-text #(re-frame/dispatch [:hardwallet.ui/pair-code-input-changed %])
|
|
||||||
:auto-focus true
|
|
||||||
:ref (partial reset! ref)
|
|
||||||
:placeholder ""}])
|
|
||||||
|
|
||||||
(defview enter-pair-code []
|
|
||||||
(letsubs [pair-code [:hardwallet-pair-code]
|
|
||||||
error [:hardwallet-setup-error]
|
|
||||||
width [:dimensions/window-width]
|
|
||||||
ref (atom nil)]
|
|
||||||
[react/scroll-view
|
|
||||||
[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}
|
|
||||||
(i18n/label :t/enter-pair-code)]
|
|
||||||
[react/text {:style styles/enter-pair-code-explanation-text}
|
|
||||||
(i18n/label :t/enter-pair-code-description)]]
|
|
||||||
(when error
|
|
||||||
[react/view
|
|
||||||
[react/text {:style {:font-weight "700"
|
|
||||||
:padding-top 10
|
|
||||||
:color colors/red}}
|
|
||||||
error]])
|
|
||||||
[react/view (styles/enter-pair-code-input-container width)
|
|
||||||
[enter-pair-code-input ref]]]
|
|
||||||
[react/view styles/next-button-container
|
|
||||||
[react/view components.styles/flex]
|
|
||||||
[react/view {:margin-right 20}
|
|
||||||
[components.common/bottom-button
|
|
||||||
{: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 show-icon?]}]
|
|
||||||
"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 (resources/get-image :hardwallet-card)
|
|
||||||
:style styles/hardwallet-card-image}]
|
|
||||||
[react/view styles/center-text-container
|
|
||||||
[react/text {:style (assoc styles/center-text :padding-horizontal 60)}
|
|
||||||
(i18n/label text-label)]]]
|
|
||||||
[react/view styles/bottom-container
|
|
||||||
[react/touchable-highlight
|
|
||||||
{:on-press on-press}
|
|
||||||
[react/view (merge styles/bottom-button-container button-container-style)
|
|
||||||
[react/text {:style styles/bottom-button-text}
|
|
||||||
(i18n/label button-label)]
|
|
||||||
(when show-icon?
|
|
||||||
[vector-icons/icon :icons/link {:color colors/blue
|
|
||||||
:container-style {:margin-left 5}}])]]]])
|
|
||||||
|
|
||||||
(defn begin []
|
|
||||||
[react/view styles/card-blank-container
|
|
||||||
[react/scroll-view
|
|
||||||
[react/view styles/hardwallet-card-image-container
|
|
||||||
[react/text {:style styles/card-is-empty-text}
|
|
||||||
(i18n/label :t/card-is-blank)]
|
|
||||||
[react/view {:margin-top 15}
|
|
||||||
[react/image {:source (resources/get-image :hardwallet-card)
|
|
||||||
:style styles/hardwallet-card-image}]]
|
|
||||||
[react/view styles/card-is-empty-prepare-text
|
|
||||||
[react/text {:style styles/center-text}
|
|
||||||
(i18n/label :t/card-setup-prepare-text)]]]
|
|
||||||
[react/view styles/remaining-steps-container
|
|
||||||
[react/text {:style styles/remaining-steps-text}
|
|
||||||
(i18n/label :t/remaining-steps)]
|
|
||||||
[react/view {:margin-bottom 25}
|
|
||||||
(for [[number text] [["1" (i18n/label :t/create-pin)]
|
|
||||||
["2" (i18n/label :t/initialization-of-the-card)]
|
|
||||||
["3" (i18n/label :t/puk-and-pairing-codes-displayed)]
|
|
||||||
["4" (i18n/label :t/device-pairing)]
|
|
||||||
["5" (i18n/label :t/recovery-phrase)]]]
|
|
||||||
^{:key number} [react/view styles/remaining-step-row
|
|
||||||
[react/view styles/remaining-step-row-text
|
|
||||||
[react/text number]]
|
|
||||||
[react/view styles/remaining-step-row-text2
|
|
||||||
[react/text text]]])]]
|
|
||||||
[react/view styles/bottom-container
|
|
||||||
[react/touchable-highlight
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/begin-setup-button-pressed])}
|
|
||||||
[react/view styles/begin-button-container
|
|
||||||
[react/text {:style styles/bottom-button-text}
|
|
||||||
(i18n/label :t/begin-set-up)]]]]]])
|
|
||||||
|
|
||||||
(defn pair []
|
|
||||||
[card-with-button-view {:text-label :t/pair-card-question
|
|
||||||
:button-label :t/pair-card
|
|
||||||
:on-press #(re-frame/dispatch [:hardwallet.ui/pair-card-button-pressed])}])
|
|
||||||
|
|
||||||
(defn no-slots []
|
|
||||||
[card-with-button-view {:text-label :t/no-pairing-slots-available
|
|
||||||
:button-label :t/help-capitalized
|
|
||||||
:show-icon? true
|
|
||||||
:button-container-style {:background-color colors/white}
|
|
||||||
:on-press #(.openURL react/linking "https://hardwallet.status.im")}])
|
|
||||||
|
|
||||||
(defn card-already-linked []
|
|
||||||
[card-with-button-view {:text-label :t/card-already-linked
|
|
||||||
:button-label :t/help-capitalized
|
|
||||||
:show-icon? true
|
|
||||||
:button-container-style {:background-color colors/white}
|
|
||||||
:on-press #(.openURL react/linking "https://hardwallet.status.im")}])
|
|
||||||
|
|
||||||
(defview error []
|
|
||||||
(letsubs [error [:hardwallet-setup-error]]
|
|
||||||
[react/view styles/card-with-button-view-container
|
|
||||||
[react/view styles/hardwallet-card-image-container
|
|
||||||
[react/image {:source (resources/get-image :hardwallet-card)
|
|
||||||
:style styles/hardwallet-card-image}]
|
|
||||||
[react/view styles/center-text-container
|
|
||||||
[react/text {:style styles/center-text}
|
|
||||||
(i18n/label :t/something-went-wrong)]
|
|
||||||
[react/view {:padding-horizontal 20
|
|
||||||
:margin-top 20}
|
|
||||||
[react/text {:style styles/center-text}
|
|
||||||
(if (map? error)
|
|
||||||
(str (:code error) "\n" (:error error))
|
|
||||||
(str error))]]]]
|
|
||||||
[react/view styles/bottom-container
|
|
||||||
[react/touchable-highlight
|
|
||||||
{:on-press #(re-frame/dispatch [:hardwallet.ui/error-button-pressed])}
|
|
||||||
[react/view styles/bottom-button-container
|
|
||||||
[react/text {:style styles/bottom-button-text}
|
|
||||||
(i18n/label :t/try-again)]]]]]))
|
|
||||||
|
|
||||||
(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
|
|
||||||
[react/text {:style styles/center-title-text}
|
|
||||||
(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}
|
|
||||||
(i18n/label :t/this-will-take-few-seconds)]]
|
|
||||||
[react/view styles/waiting-indicator-container
|
|
||||||
[react/activity-indicator {:animating true
|
|
||||||
:size :large}]]])
|
|
||||||
|
|
||||||
(defview preparing []
|
|
||||||
(letsubs [progress-bar (atom nil)
|
|
||||||
listener (atom nil)
|
|
||||||
card-state [:hardwallet-card-state]]
|
|
||||||
{:component-did-mount (fn []
|
|
||||||
(when @listener
|
|
||||||
(.removeListener @listener))
|
|
||||||
(reset! listener
|
|
||||||
(.addListener event-emitter
|
|
||||||
"keycardInstallationProgress"
|
|
||||||
(fn [params]
|
|
||||||
(when @progress-bar
|
|
||||||
(.setNativeProps @progress-bar params))))))}
|
|
||||||
[react/view styles/loading-view-container
|
|
||||||
[react/view styles/center-container
|
|
||||||
[react/text {:style styles/center-title-text}
|
|
||||||
(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/taking-long-hold-phone-connected)]]
|
|
||||||
[react/view styles/progress-bar-container
|
|
||||||
(if (contains? #{:blank :init} card-state)
|
|
||||||
[react/progress-bar {:styleAttr "Horizontal"
|
|
||||||
:indeterminate false
|
|
||||||
:progress 0
|
|
||||||
:ref #(reset! progress-bar %)}]
|
|
||||||
[react/activity-indicator {:animating true
|
|
||||||
:size :large}])]]))
|
|
||||||
|
|
||||||
(defn- generating-mnemonic []
|
|
||||||
[react/view styles/loading-view-container
|
|
||||||
[react/view styles/center-container
|
|
||||||
[react/text {:style styles/center-title-text}
|
|
||||||
(i18n/label :t/generating-mnemonic)]
|
|
||||||
[react/text {:style styles/estimated-time-text}
|
|
||||||
(i18n/label :t/this-will-take-few-seconds)]]
|
|
||||||
[react/view styles/waiting-indicator-container
|
|
||||||
[react/activity-indicator {:animating true
|
|
||||||
:size :large}]]])
|
|
||||||
|
|
||||||
(defn- loading-keys []
|
|
||||||
[react/view styles/loading-view-container
|
|
||||||
[react/view styles/center-container
|
|
||||||
[react/text {:style styles/center-title-text}
|
|
||||||
(i18n/label :t/finishing-card-setup)]
|
|
||||||
[react/text {:style styles/generating-codes-for-pairing-text
|
|
||||||
:number-of-lines 2}
|
|
||||||
(i18n/label :t/finishing-card-setup-steps)]
|
|
||||||
[react/text {:style styles/estimated-time-text}
|
|
||||||
(i18n/label :t/this-will-take-few-seconds)]]
|
|
||||||
[react/view styles/waiting-indicator-container
|
|
||||||
[react/activity-indicator {:animating true
|
|
||||||
:size :large}]]])
|
|
||||||
|
|
||||||
(defn- pairing []
|
|
||||||
[react/view styles/loading-view-container
|
|
||||||
[react/view styles/center-container
|
|
||||||
[react/text {:style styles/center-title-text}
|
|
||||||
(i18n/label :t/pairing-card)]
|
|
||||||
[react/text {:style styles/estimated-time-text}
|
|
||||||
(i18n/label :t/this-will-take-few-seconds)]]
|
|
||||||
[react/view styles/waiting-indicator-container
|
|
||||||
[react/activity-indicator {:animating true
|
|
||||||
:size :large}]]])
|
|
||||||
|
|
||||||
(defn complete []
|
|
||||||
[loading-view {:title-label :t/completing-card-setup
|
|
||||||
:estimated-time-seconds 30
|
|
||||||
:step-number 3}])
|
|
||||||
|
|
||||||
(defn- importing-multiaccount []
|
|
||||||
[react/view styles/loading-view-container
|
|
||||||
[react/view styles/center-container
|
|
||||||
[react/text {:style styles/center-title-text}
|
|
||||||
(i18n/label :t/importing-keycard-multiaccount)]
|
|
||||||
[react/text {:style styles/estimated-time-text}
|
|
||||||
(i18n/label :t/this-will-take-few-seconds)]]
|
|
||||||
[react/view styles/waiting-indicator-container
|
|
||||||
[react/activity-indicator {:animating true
|
|
||||||
:size :large}]]])
|
|
||||||
|
|
||||||
(defn- content [step]
|
|
||||||
(case step
|
|
||||||
:begin [begin]
|
|
||||||
:preparing [preparing]
|
|
||||||
:secret-keys [secret-keys]
|
|
||||||
:card-ready [card-ready]
|
|
||||||
:complete [complete]
|
|
||||||
:pair [pair]
|
|
||||||
:generating-mnemonic [generating-mnemonic]
|
|
||||||
:loading-keys [loading-keys]
|
|
||||||
:enter-pair-code [enter-pair-code]
|
|
||||||
:no-slots [no-slots]
|
|
||||||
:card-already-linked [card-already-linked]
|
|
||||||
:pairing [pairing]
|
|
||||||
:pin [pin.views/create-pin]
|
|
||||||
:recovery-phrase [recovery-phrase]
|
|
||||||
:recovery-phrase-confirm-word1 [recovery-phrase-confirm-word step]
|
|
||||||
:recovery-phrase-confirm-word2 [recovery-phrase-confirm-word step]
|
|
||||||
:error [error]
|
|
||||||
:import-multiaccount [import-multiaccount]
|
|
||||||
:importing-multiaccount [importing-multiaccount]
|
|
||||||
[begin]))
|
|
||||||
|
|
||||||
(defview hardwallet-setup []
|
|
||||||
(letsubs [step [:hardwallet-setup-step]]
|
|
||||||
[react/keyboard-avoiding-view components.styles/flex
|
|
||||||
[react/view styles/container
|
|
||||||
[react/view styles/inner-container
|
|
||||||
[components/maintain-card step]]
|
|
||||||
[content step]]]))
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
(ns status-im.ui.screens.hardwallet.success.styles
|
|
||||||
(: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
|
|
||||||
:justify-content :space-between})
|
|
||||||
|
|
||||||
(def hardwallet-card-image-container
|
|
||||||
{:margin-top 120
|
|
||||||
:flex-direction :column
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center})
|
|
||||||
|
|
||||||
(def icon-check-container
|
|
||||||
{:width 160
|
|
||||||
:height 160
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center
|
|
||||||
:background-color colors/green-transparent-10
|
|
||||||
:border-radius 100})
|
|
||||||
|
|
||||||
(def icon-check-inner-container
|
|
||||||
{:width 80
|
|
||||||
:height 80
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center
|
|
||||||
:background-color colors/white
|
|
||||||
:border-radius 50})
|
|
||||||
|
|
||||||
(def complete-text-container
|
|
||||||
{:flex-direction :column
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(def complete-text
|
|
||||||
{:typography :header
|
|
||||||
:text-align :center})
|
|
||||||
|
|
||||||
(def complete-information-text
|
|
||||||
{:text-align :center
|
|
||||||
:color colors/gray
|
|
||||||
:margin-bottom 21
|
|
||||||
:padding-horizontal 70
|
|
||||||
:padding-top 20})
|
|
||||||
|
|
||||||
(def bottom-action-container
|
|
||||||
{:background-color colors/blue-light
|
|
||||||
:align-items :center
|
|
||||||
:justify-content :center
|
|
||||||
:flex-direction :row
|
|
||||||
:width 104
|
|
||||||
:height 44
|
|
||||||
:border-radius 10
|
|
||||||
:margin-bottom 40})
|
|
||||||
|
|
||||||
(def bottom-action-text
|
|
||||||
{:typography :main-medium
|
|
||||||
:color colors/blue
|
|
||||||
:text-transform :uppercase})
|
|
||||||
|
|
||||||
(def waiting-indicator-container
|
|
||||||
{:height 20
|
|
||||||
:margin-bottom 70})
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
(ns status-im.ui.screens.hardwallet.success.views
|
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
|
||||||
(:require [re-frame.core :as re-frame]
|
|
||||||
[status-im.ui.screens.hardwallet.success.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.status-bar.view :as status-bar]
|
|
||||||
[status-im.i18n :as i18n]
|
|
||||||
[status-im.ui.components.colors :as colors]
|
|
||||||
[reagent.core :as reagent]))
|
|
||||||
|
|
||||||
(defn- activity-indicator [show?]
|
|
||||||
[react/view styles/waiting-indicator-container
|
|
||||||
(when @show?
|
|
||||||
[react/view
|
|
||||||
[react/text {:style {:padding-bottom 20}}
|
|
||||||
(i18n/label :t/sign-in-to-status)]
|
|
||||||
[react/activity-indicator {:animating true
|
|
||||||
:size :large}]])])
|
|
||||||
|
|
||||||
(defn hardwallet-success []
|
|
||||||
(let [processing? (reagent/atom false)]
|
|
||||||
[react/view styles/container
|
|
||||||
[status-bar/status-bar]
|
|
||||||
[react/view components.styles/flex
|
|
||||||
[react/view styles/inner-container
|
|
||||||
[react/view styles/hardwallet-card-image-container
|
|
||||||
[react/view styles/icon-check-container
|
|
||||||
[react/view styles/icon-check-inner-container
|
|
||||||
[vector-icons/icon :main-icons/check {:color colors/green
|
|
||||||
:width 30
|
|
||||||
:height 30}]]]]
|
|
||||||
[react/view styles/complete-text-container
|
|
||||||
[activity-indicator processing?]
|
|
||||||
[react/text {:style styles/complete-text}
|
|
||||||
(i18n/label :t/complete-exclamation)]
|
|
||||||
[react/text {:style styles/complete-information-text}
|
|
||||||
(i18n/label :t/complete-hardwallet-setup)]
|
|
||||||
[react/touchable-highlight
|
|
||||||
{:on-press #(do
|
|
||||||
(reset! processing? true)
|
|
||||||
(re-frame/dispatch [:hardwallet.ui/success-button-pressed]))}
|
|
||||||
[react/view styles/bottom-action-container
|
|
||||||
[react/text {:style styles/bottom-action-text}
|
|
||||||
(i18n/label :t/okay)]]]]]]]))
|
|
||||||
|
|
@ -20,8 +20,6 @@
|
||||||
:intro-wizard
|
:intro-wizard
|
||||||
:hardwallet-authentication-method
|
:hardwallet-authentication-method
|
||||||
:hardwallet-connect
|
:hardwallet-connect
|
||||||
:hardwallet-setup
|
|
||||||
:hardwallet-success
|
|
||||||
:keycard-connection-lost
|
:keycard-connection-lost
|
||||||
:keycard-connection-lost-setup
|
:keycard-connection-lost-setup
|
||||||
:keycard-nfc-on
|
:keycard-nfc-on
|
||||||
|
|
@ -77,9 +75,7 @@
|
||||||
:keycard-blank
|
:keycard-blank
|
||||||
:keycard-wrong
|
:keycard-wrong
|
||||||
:keycard-unpaired
|
:keycard-unpaired
|
||||||
:not-keycard
|
:not-keycard]))
|
||||||
:hardwallet-setup
|
|
||||||
:hardwallet-success]))
|
|
||||||
:config (if
|
:config (if
|
||||||
;; add view-id here if you'd like that view to be
|
;; add view-id here if you'd like that view to be
|
||||||
;; first view when app is started
|
;; first view when app is started
|
||||||
|
|
|
||||||
|
|
@ -30,8 +30,6 @@
|
||||||
[status-im.ui.screens.hardwallet.connect.views :as hardwallet.connect]
|
[status-im.ui.screens.hardwallet.connect.views :as hardwallet.connect]
|
||||||
[status-im.ui.screens.hardwallet.pin.views :as hardwallet.pin]
|
[status-im.ui.screens.hardwallet.pin.views :as hardwallet.pin]
|
||||||
[status-im.ui.screens.hardwallet.settings.views :as hardwallet.settings]
|
[status-im.ui.screens.hardwallet.settings.views :as hardwallet.settings]
|
||||||
[status-im.ui.screens.hardwallet.setup.views :as hardwallet.setup]
|
|
||||||
[status-im.ui.screens.hardwallet.success.views :as hardwallet.success]
|
|
||||||
[status-im.ui.screens.keycard.onboarding.views :as keycard.onboarding]
|
[status-im.ui.screens.keycard.onboarding.views :as keycard.onboarding]
|
||||||
[status-im.ui.screens.keycard.recovery.views :as keycard.recovery]
|
[status-im.ui.screens.keycard.recovery.views :as keycard.recovery]
|
||||||
[status-im.ui.screens.keycard.views :as keycard]
|
[status-im.ui.screens.keycard.views :as keycard]
|
||||||
|
|
@ -94,8 +92,6 @@
|
||||||
:enter-pin-settings hardwallet.pin/enter-pin
|
:enter-pin-settings hardwallet.pin/enter-pin
|
||||||
:enter-pin-sign hardwallet.pin/enter-pin
|
:enter-pin-sign hardwallet.pin/enter-pin
|
||||||
:enter-pin-modal [:modal hardwallet.pin/enter-pin]
|
:enter-pin-modal [:modal hardwallet.pin/enter-pin]
|
||||||
:hardwallet-setup hardwallet.setup/hardwallet-setup
|
|
||||||
:hardwallet-success hardwallet.success/hardwallet-success
|
|
||||||
:keycard-onboarding-intro keycard.onboarding/intro
|
:keycard-onboarding-intro keycard.onboarding/intro
|
||||||
:keycard-onboarding-start keycard.onboarding/start
|
:keycard-onboarding-start keycard.onboarding/start
|
||||||
:keycard-onboarding-puk-code keycard.onboarding/puk-code
|
:keycard-onboarding-puk-code keycard.onboarding/puk-code
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue