[#5964] hardwallet screens flow 2
Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>
This commit is contained in:
parent
77f7a538f1
commit
7a06a415c2
|
@ -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>
|
After Width: | Height: | Size: 588 B |
|
@ -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>
|
After Width: | Height: | Size: 590 B |
|
@ -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>
|
After Width: | Height: | Size: 598 B |
|
@ -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
|
||||
|
|
|
@ -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)))
|
||||
|
||||
|
|
|
@ -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,10 +192,10 @@
|
|||
: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
|
||||
[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
|
||||
|
|
|
@ -2,14 +2,11 @@
|
|||
(:require-macros [status-im.utils.styles :refer [defstyle]])
|
||||
(:require [status-im.ui.components.colors :as colors]))
|
||||
|
||||
(def container
|
||||
(defstyle pin-container
|
||||
{:flex 1
|
||||
:background-color colors/white})
|
||||
|
||||
(def inner-container
|
||||
{:flex-direction :column
|
||||
:flex 1
|
||||
:align-items :center})
|
||||
: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
|
||||
|
|
|
@ -58,12 +58,7 @@
|
|||
|
||||
(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/pin-container
|
||||
[react/view styles/center-container
|
||||
[react/text {:style styles/center-title-text
|
||||
:font :bold}
|
||||
|
@ -80,9 +75,9 @@
|
|||
:font :medium}
|
||||
(i18n/label error)]]
|
||||
[pin-indicators pin])
|
||||
[numpad step enabled?]]]]))
|
||||
[numpad step enabled?]]]))
|
||||
|
||||
(defview hardwallet-pin []
|
||||
(defview main []
|
||||
(letsubs [original [:hardwallet/pin]
|
||||
confirmation [:hardwallet/pin-confirmation]
|
||||
enter-step [:hardwallet/pin-enter-step]
|
||||
|
|
|
@ -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,11 +149,18 @@
|
|||
|
||||
(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
|
||||
{: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
|
||||
|
@ -124,19 +174,31 @@
|
|||
: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})
|
||||
|
||||
(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})
|
||||
|
|
|
@ -5,3 +5,8 @@
|
|||
:hardwallet-setup-step
|
||||
(fn [db]
|
||||
(get-in db [:hardwallet :setup-step])))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:hardwallet-pair-code
|
||||
(fn [db]
|
||||
(get-in db [:hardwallet :pair-code])))
|
||||
|
|
|
@ -1,68 +1,54 @@
|
|||
(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
|
||||
(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}]
|
||||
[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
|
||||
[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/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}]]]]])
|
||||
(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-inner-container
|
||||
[react/view styles/secret-keys-title-container
|
||||
[react/text {:style styles/secret-keys-title-text
|
||||
:number-of-lines 2
|
||||
|
@ -74,47 +60,146 @@
|
|||
[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}
|
||||
"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/pair-code-explanation-text
|
||||
[react/text {:style styles/puk-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
|
||||
[react/view styles/puk-code-numbers-container
|
||||
[react/view styles/puk-code-numbers-inner-container
|
||||
[react/text {:style styles/puk-code-text
|
||||
:font :bold}
|
||||
"a12k52kh0x"]]]
|
||||
[react/view styles/next-button-container
|
||||
"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}]]]]])
|
||||
:forward? true}]]])
|
||||
|
||||
(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)]]
|
||||
(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}
|
||||
(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/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 :t/completing-card-setup)]
|
||||
(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/estimated-time {:time "~30 seconds"})]]
|
||||
(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}]]]]])
|
||||
: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 []
|
||||
[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]]]]))
|
|
@ -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"
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue