diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 76c2e7dba1..88e70e433b 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -888,20 +888,6 @@ (fn [{:keys [db]} _] {: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 :hardwallet/load-generating-mnemonic-screen (fn [cofx _] diff --git a/src/status_im/ui/screens/hardwallet/components.cljs b/src/status_im/ui/screens/hardwallet/components.cljs deleted file mode 100644 index 3551aacc63..0000000000 --- a/src/status_im/ui/screens/hardwallet/components.cljs +++ /dev/null @@ -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})])) diff --git a/src/status_im/ui/screens/hardwallet/login/styles.cljs b/src/status_im/ui/screens/hardwallet/login/styles.cljs deleted file mode 100644 index e45d4849b2..0000000000 --- a/src/status_im/ui/screens/hardwallet/login/styles.cljs +++ /dev/null @@ -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}) diff --git a/src/status_im/ui/screens/hardwallet/login/views.cljs b/src/status_im/ui/screens/hardwallet/login/views.cljs deleted file mode 100644 index 5b2804f718..0000000000 --- a/src/status_im/ui/screens/hardwallet/login/views.cljs +++ /dev/null @@ -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}}]])])) diff --git a/src/status_im/ui/screens/hardwallet/pin/views.cljs b/src/status_im/ui/screens/hardwallet/pin/views.cljs index 4c31d53fdf..42c561475c 100644 --- a/src/status_im/ui/screens/hardwallet/pin/views.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/views.cljs @@ -6,7 +6,6 @@ [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.react :as react] [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.status-bar.view :as status-bar] [status-im.ui.components.toolbar.actions :as actions] diff --git a/src/status_im/ui/screens/hardwallet/setup/styles.cljs b/src/status_im/ui/screens/hardwallet/setup/styles.cljs deleted file mode 100644 index 5491979811..0000000000 --- a/src/status_im/ui/screens/hardwallet/setup/styles.cljs +++ /dev/null @@ -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}) diff --git a/src/status_im/ui/screens/hardwallet/setup/views.cljs b/src/status_im/ui/screens/hardwallet/setup/views.cljs deleted file mode 100644 index 7ef0e87e44..0000000000 --- a/src/status_im/ui/screens/hardwallet/setup/views.cljs +++ /dev/null @@ -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]]])) diff --git a/src/status_im/ui/screens/hardwallet/success/styles.cljs b/src/status_im/ui/screens/hardwallet/success/styles.cljs deleted file mode 100644 index ce6aa10153..0000000000 --- a/src/status_im/ui/screens/hardwallet/success/styles.cljs +++ /dev/null @@ -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}) diff --git a/src/status_im/ui/screens/hardwallet/success/views.cljs b/src/status_im/ui/screens/hardwallet/success/views.cljs deleted file mode 100644 index e44de39e14..0000000000 --- a/src/status_im/ui/screens/hardwallet/success/views.cljs +++ /dev/null @@ -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)]]]]]]])) diff --git a/src/status_im/ui/screens/routing/intro_login_stack.cljs b/src/status_im/ui/screens/routing/intro_login_stack.cljs index 9cf2b8a758..a0bb4887dd 100644 --- a/src/status_im/ui/screens/routing/intro_login_stack.cljs +++ b/src/status_im/ui/screens/routing/intro_login_stack.cljs @@ -20,8 +20,6 @@ :intro-wizard :hardwallet-authentication-method :hardwallet-connect - :hardwallet-setup - :hardwallet-success :keycard-connection-lost :keycard-connection-lost-setup :keycard-nfc-on @@ -77,9 +75,7 @@ :keycard-blank :keycard-wrong :keycard-unpaired - :not-keycard - :hardwallet-setup - :hardwallet-success])) + :not-keycard])) :config (if ;; add view-id here if you'd like that view to be ;; first view when app is started diff --git a/src/status_im/ui/screens/routing/screens.cljs b/src/status_im/ui/screens/routing/screens.cljs index 69b28c2f71..43e2838ed3 100644 --- a/src/status_im/ui/screens/routing/screens.cljs +++ b/src/status_im/ui/screens/routing/screens.cljs @@ -30,8 +30,6 @@ [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.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.recovery.views :as keycard.recovery] [status-im.ui.screens.keycard.views :as keycard] @@ -94,8 +92,6 @@ :enter-pin-settings hardwallet.pin/enter-pin :enter-pin-sign 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-start keycard.onboarding/start :keycard-onboarding-puk-code keycard.onboarding/puk-code