diff --git a/resources/icons/indicator-big.svg b/resources/icons/indicator-big.svg new file mode 100644 index 0000000000..54c57ae8c1 --- /dev/null +++ b/resources/icons/indicator-big.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/indicator-middle.svg b/resources/icons/indicator-middle.svg new file mode 100644 index 0000000000..c4b960da70 --- /dev/null +++ b/resources/icons/indicator-middle.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/indicator-small.svg b/resources/icons/indicator-small.svg new file mode 100644 index 0000000000..583e688b08 --- /dev/null +++ b/resources/icons/indicator-small.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 6076a51622..3690493d3b 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -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 diff --git a/src/status_im/ui/components/animation.cljs b/src/status_im/ui/components/animation.cljs index 270e7e21f1..049da6ad17 100644 --- a/src/status_im/ui/components/animation.cljs +++ b/src/status_im/ui/components/animation.cljs @@ -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))) diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index fcb3b37c55..26341d4a4f 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -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 diff --git a/src/status_im/ui/screens/hardwallet/pin/styles.cljs b/src/status_im/ui/screens/hardwallet/pin/styles.cljs index 246155d1fc..f2d12faa94 100644 --- a/src/status_im/ui/screens/hardwallet/pin/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/hardwallet/pin/views.cljs b/src/status_im/ui/screens/hardwallet/pin/views.cljs index b9ffd4b506..982b75d310 100644 --- a/src/status_im/ui/screens/hardwallet/pin/views.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/views.cljs @@ -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] diff --git a/src/status_im/ui/screens/hardwallet/setup/styles.cljs b/src/status_im/ui/screens/hardwallet/setup/styles.cljs index ffbd41e912..39b8dc93ef 100644 --- a/src/status_im/ui/screens/hardwallet/setup/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/setup/styles.cljs @@ -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}) diff --git a/src/status_im/ui/screens/hardwallet/setup/subs.cljs b/src/status_im/ui/screens/hardwallet/setup/subs.cljs index 4cb2f5145c..4a2e93219c 100644 --- a/src/status_im/ui/screens/hardwallet/setup/subs.cljs +++ b/src/status_im/ui/screens/hardwallet/setup/subs.cljs @@ -4,4 +4,9 @@ (re-frame/reg-sub :hardwallet-setup-step (fn [db] - (get-in db [:hardwallet :setup-step]))) \ No newline at end of file + (get-in db [:hardwallet :setup-step]))) + +(re-frame/reg-sub + :hardwallet-pair-code + (fn [db] + (get-in db [:hardwallet :pair-code]))) diff --git a/src/status_im/ui/screens/hardwallet/setup/views.cljs b/src/status_im/ui/screens/hardwallet/setup/views.cljs index 1afc8755e9..a3ca413740 100644 --- a/src/status_im/ui/screens/hardwallet/setup/views.cljs +++ b/src/status_im/ui/screens/hardwallet/setup/views.cljs @@ -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]))) \ No newline at end of file + [react/keyboard-avoiding-view components.styles/flex + [react/view styles/container + [react/view styles/inner-container + [maintain-card] + [content step]]]])) \ No newline at end of file diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index 31148b4347..0e51f5d91f 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -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" diff --git a/translations/en.json b/translations/en.json index 5ec51c93fc..9be3253816 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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", diff --git a/translations/ms.json b/translations/ms.json index 57b12d4340..9856628ab2 100644 --- a/translations/ms.json +++ b/translations/ms.json @@ -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",