[#5898] add HW setup screens

Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>

src/status_im/accounts/create/core.cljs

@@ -109,7 +109,7 @@
 
 (defn navigate-to-authentication-method [{:keys [db] :as cofx}]
   (if (hardwallet/hardwallet-supported? db)
-    (navigation/navigate-to-cofx :hardwallet/authentication-method nil cofx)
+    (navigation/navigate-to-cofx :hardwallet-authentication-method nil cofx)
     (navigate-to-create-account-screen cofx)))
 
 ;;;; COFX

src/status_im/events.cljs

@@ -1,4 +1,5 @@
 (ns status-im.events
+  (:require-macros [status-im.utils.handlers-macro :as handlers-macro])
   (:require [re-frame.core :as re-frame]
             [status-im.accounts.core :as accounts]
             [status-im.accounts.create.core :as accounts.create]
@@ -537,6 +538,63 @@
  (fn [cofx _]
    (browser/open-url "https://hardwallet.status.im" cofx)))
 
+(handlers/register-handler-fx
+ :hardwallet.ui/hold-card-button-pressed
+ (fn [{:keys [db] :as cofx} _]
+   (handlers-macro/merge-fx cofx
+                            {:db (assoc-in db [:hardwallet :setup-step] :begin)}
+                            (navigation/navigate-to-cofx :hardwallet-setup nil))))
+
+(handlers/register-handler-fx
+ :hardwallet.ui/begin-setup-button-pressed
+ (fn [{:keys [db]} _]
+   {:db (assoc-in db [:hardwallet :setup-step] :prepare)}))
+
+(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} _]
+   (handlers-macro/merge-fx cofx
+                            {:db (assoc-in db [:hardwallet :setup-step] :begin)}
+                            (navigation/navigate-to-cofx :hardwallet-setup nil))))
+
+(handlers/register-handler-fx
+ :hardwallet.ui/secret-keys-next-button-pressed
+ (fn [_ _]
+   {:ui/show-confirmation {:title               (i18n/label :t/secret-keys-confirmation-title)
+                           :content             (i18n/label :t/secret-keys-confirmation-text)
+                           :confirm-button-text (i18n/label :t/secret-keys-confirmation-confirm)
+                           :cancel-button-text  (i18n/label :t/secret-keys-confirmation-cancel)
+                           :on-accept           #(re-frame/dispatch [:hardwallet.ui/secret-keys-dialog-confirm-pressed])
+                           :on-cancel           #()}}))
+
+(handlers/register-handler-fx
+ :hardwallet.ui/secret-keys-dialog-confirm-pressed
+ (fn [{:keys [db]} _]
+   {:db (assoc-in db [:hardwallet :setup-step] :complete)}))
+
+(handlers/register-handler-fx
+ :hardwallet.ui/success-button-pressed
+ (fn [cofx _]
+   (navigation/navigate-to-cofx :home nil cofx)))
+
+(handlers/register-handler-fx
+ :hardwallet.ui/pin-numpad-button-pressed
+ (fn [cofx [_ number step]]
+   (hardwallet/process-pin-input number step cofx)))
+
+(handlers/register-handler-fx
+ :hardwallet.ui/pin-numpad-delete-button-pressed
+ (fn [{:keys [db]} [_ step]]
+   (when-not (empty? (get-in db [:hardwallet :pin step]))
+     {:db (update-in db [:hardwallet :pin step] pop)})))
+
 ;; browser module
 
 (handlers/register-handler-fx

src/status_im/hardwallet/core.cljs

@@ -36,7 +36,7 @@
   (handlers-macro/merge-fx
    cofx
    {:hardwallet/check-nfc-enabled nil}
-   (navigation/navigate-to-cofx :hardwallet/connect nil)))
+   (navigation/navigate-to-cofx :hardwallet-connect nil)))
 
 (defn hardwallet-supported? [db]
   (and config/hardwallet-enabled?
@@ -45,9 +45,41 @@
 
 (defn return-back-from-nfc-settings [app-coming-from-background? {:keys [db]}]
   (when (and app-coming-from-background?
-             (= :hardwallet/connect (:view-id db)))
+             (= :hardwallet-connect (:view-id db)))
     {:hardwallet/check-nfc-enabled nil}))
 
+(defn- proceed-to-pin-confirmation [fx]
+  (assoc-in fx [:db :hardwallet :pin :enter-step] :confirmation))
+
+(defn- pin-match [fx]
+  (assoc-in fx [:db :hardwallet :pin :status] :validating))
+
+(defn- pin-mismatch [fx]
+  (assoc-in fx [:db :hardwallet :pin] {:status       :error
+                                       :error        :t/pin-mismatch
+                                       :original     []
+                                       :confirmation []
+                                       :enter-step   :original}))
+
+(defn process-pin-input [number enter-step {:keys [db]}]
+  (let [db' (update-in db [:hardwallet :pin enter-step] conj number)
+        numbers-entered (count (get-in db' [:hardwallet :pin enter-step]))]
+    (cond-> {:db (assoc-in db' [:hardwallet :pin :status] nil)}
+      (and (= enter-step :original)
+           (= 6 numbers-entered))
+      (proceed-to-pin-confirmation)
+
+      (and (= enter-step :confirmation)
+           (= (get-in db' [:hardwallet :pin :original])
+              (get-in db' [:hardwallet :pin :confirmation])))
+      (pin-match)
+
+      (and (= enter-step :confirmation)
+           (= 6 numbers-entered)
+           (not= (get-in db' [:hardwallet :pin :original])
+                 (get-in db' [:hardwallet :pin :confirmation])))
+      (pin-mismatch))))
+
 (re-frame/reg-fx
  :hardwallet/check-nfc-support
  check-nfc-support)

src/status_im/ui/components/colors.cljs

@@ -16,6 +16,7 @@
 (def gray-transparent "rgba(184, 193, 199, 0.5)") ;; Used for tabs
 (def gray-notifications "#4A5054cc") ;; Used for notifications background
 (def gray-border "#ececf0")
+(def gray-background "#eceffc")
 (def blue "#4360df") ;; Used as main wallet color, and ios home add button
 (def blue-transparent "rgba(67, 96, 223, 0.2)")
 (def blue-transparent-10 "rgba(67, 96, 223, 0.1)")

src/status_im/ui/screens/db.cljs

@@ -60,7 +60,10 @@
              :push-notifications/stored          {}
              :registry                           {}
              :hardwallet                         {:nfc-supported? false
-                                                  :nfc-enabled?   false}})
+                                                  :nfc-enabled?   false
+                                                  :pin            {:original     []
+                                                                   :confirmation []
+                                                                   :enter-step   :original}}})
 
 ;;;;GLOBAL
 

src/status_im/ui/screens/events.cljs

@@ -80,8 +80,8 @@
 
 (re-frame/reg-fx
  :ui/show-confirmation
- (fn [{:keys [title content confirm-button-text on-accept on-cancel]}]
+ (fn [options]
-   (utils/show-confirmation title content confirm-button-text on-accept on-cancel)))
+   (utils/show-confirmation options)))
 
 (re-frame/reg-fx
  :ui/close-application

src/status_im/ui/screens/hardwallet/connect/styles.cljs

@@ -21,6 +21,10 @@
 (def hardwallet-card-image-small
   {:width        44
    :height       28
+   :position     :absolute
+   :left         58
+   :top          13
+   :z-index      1
    :margin-right 20})
 
 (def status-hardwallet-text-container
@@ -39,8 +43,10 @@
    :padding-horizontal 80
    :padding-vertical   10})
 
-(def bottom-action-container
+(defn bottom-action-container [nfc-enabled?]
-  {:background-color colors/gray-lighter
+  {:background-color (if nfc-enabled?
+                       colors/gray-background
+                       colors/gray-lighter)
    :width            369
    :height           80
    :border-radius    10
@@ -54,6 +60,7 @@
 (def phone-nfc-image
   {:width       54
    :height      72
+   :z-index     2
    :margin-left 20
    :margin-top  8
    :align-items :baseline})

src/status_im/ui/screens/hardwallet/connect/views.cljs

@@ -35,8 +35,10 @@
         [react/text {:style           styles/link-card-text
                      :number-of-lines 2}
          (i18n/label :t/link-card)]]
-       [react/view styles/bottom-action-container
+       [react/view (styles/bottom-action-container nfc-enabled?)
         (if nfc-enabled?
+          [react/touchable-highlight
+           {:on-press #(re-frame/dispatch [:hardwallet.ui/hold-card-button-pressed])}
            [react/view styles/nfc-enabled-container
             [react/image {:source (:phone-nfc resources/ui)
                           :style  styles/phone-nfc-image}]
@@ -44,8 +46,9 @@
                           :style  styles/hardwallet-card-image-small}]
             [react/text {:style           styles/hold-card-text
                          :number-of-lines 2
+                         :font            :medium
                          :uppercase?      true}
-            (i18n/label :t/hold-card)]]
+             (i18n/label :t/hold-card)]]]
           [react/view styles/nfc-disabled-container
            [vector-icons/icon :icons/nfc {:color           colors/gray
                                           :container-style styles/nfc-icon}]

src/status_im/ui/screens/hardwallet/pin/styles.cljs

@@ -0,0 +1,111 @@
+(ns status-im.ui.screens.hardwallet.pin.styles
+  (: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 error-container
+  {:android {:margin-top 25}
+   :ios     {:margin-top 28}})
+
+(def error-text
+  {:color      colors/red
+   :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
+   :margin-top     28})
+
+(def center-title-text
+  {:font-size 22
+   :color     colors/black})
+
+(def create-pin-text
+  {:font-size   15
+   :padding-top 8
+   :width       314
+   :text-align  :center
+   :color       colors/gray})
+
+(def pin-indicator-container
+  {:flex-direction  :row
+   :justify-content :space-between
+   :margin-top      30})
+
+(def pin-indicator-group-container
+  {:padding-horizontal 12
+   :flex-direction     :row
+   :justify-content    :space-between})
+
+(defn pin-indicator [pressed?]
+  {:width             16
+   :height            16
+   :background-color  (if pressed?
+                        colors/blue
+                        colors/gray-light)
+   :border-radius     50
+   :margin-horizontal 12})
+
+(def waiting-indicator-container
+  {:margin-top 26})
+
+(def numpad-container
+  {:margin-top 30})
+
+(def numpad-row-container
+  {:flex-direction  :row
+   :justify-content :center
+   :align-items     :center
+   :margin-vertical 6})
+
+(def numpad-button
+  {:width             72
+   :margin-horizontal 12
+   :height            72
+   :align-items       :center
+   :justify-content   :center
+   :flex-direction    :row
+   :border-radius     50
+   :background-color  colors/gray-background})
+
+(def numpad-delete-button
+  (assoc numpad-button :background-color colors/white
+         :border-width 2
+         :border-color colors/gray-background))
+
+(def numpad-empty-button
+  (assoc numpad-button :background-color colors/white
+         :border-color colors/white))
+
+(def numpad-button-text
+  {:font-size 34
+   :color     colors/blue})
+
+(def numpad-empty-button-text
+  {:color colors/white})

src/status_im/ui/screens/hardwallet/pin/subs.cljs

@@ -0,0 +1,27 @@
+(ns status-im.ui.screens.hardwallet.pin.subs
+  (:require [re-frame.core :as re-frame]))
+
+(re-frame/reg-sub
+ :hardwallet/pin
+ (fn [db]
+   (get-in db [:hardwallet :pin :original])))
+
+(re-frame/reg-sub
+ :hardwallet/pin-confirmation
+ (fn [db]
+   (get-in db [:hardwallet :pin :confirmation])))
+
+(re-frame/reg-sub
+ :hardwallet/pin-enter-step
+ (fn [db]
+   (get-in db [:hardwallet :pin :enter-step])))
+
+(re-frame/reg-sub
+ :hardwallet/pin-status
+ (fn [db]
+   (get-in db [:hardwallet :pin :status])))
+
+(re-frame/reg-sub
+ :hardwallet/pin-error
+ (fn [db]
+   (get-in db [:hardwallet :pin :error])))

src/status_im/ui/screens/hardwallet/pin/views.cljs

@@ -0,0 +1,101 @@
+(ns status-im.ui.screens.hardwallet.pin.views
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [re-frame.core :as re-frame]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.colors :as colors]
+            [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.screens.hardwallet.pin.styles :as styles]))
+
+(defn numpad-button [n step enabled?]
+  [react/touchable-highlight
+   {:on-press #(when enabled?
+                 (re-frame/dispatch [:hardwallet.ui/pin-numpad-button-pressed n step]))}
+   [react/view styles/numpad-button
+    [react/text {:style styles/numpad-button-text}
+     n]]])
+
+(defn numpad-row [[a b c] step enabled?]
+  [react/view styles/numpad-row-container
+   [numpad-button a step enabled?]
+   [numpad-button b step enabled?]
+   [numpad-button c step enabled?]])
+
+(defn numpad [step enabled?]
+  [react/view styles/numpad-container
+   [numpad-row [1 2 3] step enabled?]
+   [numpad-row [4 5 6] step enabled?]
+   [numpad-row [7 8 9] step enabled?]
+   [react/view styles/numpad-row-container
+    [react/view styles/numpad-empty-button
+     [react/text {:style styles/numpad-empty-button-text}]]
+    [numpad-button 0 step enabled?]
+    [react/touchable-highlight
+     {:on-press #(when enabled?
+                   (re-frame/dispatch [:hardwallet.ui/pin-numpad-delete-button-pressed step]))}
+     [react/view styles/numpad-delete-button
+      [vector-icons/icon :icons/back {:color colors/blue}]]]]])
+
+(defn pin-indicator [pressed?]
+  [react/view (styles/pin-indicator pressed?)])
+
+(defn pin-indicators [pin]
+  [react/view styles/pin-indicator-container
+   (map-indexed
+    (fn [i group]
+      ^{:key i}
+      [react/view styles/pin-indicator-group-container
+       group])
+    (partition 3
+               (map-indexed
+                (fn [i n]
+                  ^{:key i}
+                  [pin-indicator (number? n)])
+                (concat pin
+                        (repeat (- 6 (count pin))
+                                nil)))))])
+
+(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?]]]]))
+
+(defview hardwallet-pin []
+  (letsubs [original [:hardwallet/pin]
+            confirmation [:hardwallet/pin-confirmation]
+            enter-step [:hardwallet/pin-enter-step]
+            status [:hardwallet/pin-status]
+            error [:hardwallet/pin-error]]
+    (case enter-step
+      :original [pin-view {:pin    original
+                           :title  :t/create-pin
+                           :step   :original
+                           :status status
+                           :error  error}]
+      :confirmation [pin-view {:pin    confirmation
+                               :title  :t/repeat-pin
+                               :step   :confirmation
+                               :status status
+                               :error  error}])))

src/status_im/ui/screens/hardwallet/setup/styles.cljs

@@ -0,0 +1,142 @@
+(ns status-im.ui.screens.hardwallet.setup.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})
+
+;; setup step
+
+(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 hardwallet-card-image-container
+  {:margin-top -50})
+
+(def hardwallet-card-image
+  {:width  255
+   :height 160})
+
+(def card-is-empty-text-container
+  {:margin-top 37})
+
+(def card-is-empty-text
+  {:font-size  15
+   :color      colors/gray
+   :text-align :center})
+
+(def bottom-action-container
+  {:background-color colors/gray-background
+   :align-items      :center
+   :justify-content  :center
+   :flex-direction   :row
+   :width            160
+   :height           44
+   :border-radius    10
+   :margin-bottom    40})
+
+(def begin-set-up-text
+  {:font-size      14
+   :color          colors/blue
+   :line-height    20
+   :text-transform :uppercase})
+
+;; prepare step
+
+(def center-container
+  {:flex-direction :column
+   :align-items    :center
+   :height         200})
+
+(def center-title-text
+  {:font-size 22
+   :color     colors/black})
+
+(def generating-codes-for-pairing-text
+  {:font-size   15
+   :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 waiting-indicator-container
+  {:height 200})
+
+;; secret keys step
+
+(def secret-keys-container
+  {:flex-direction :column
+   :align-items    :center})
+
+(def secret-keys-title-container
+  {:width 292})
+
+(def secret-keys-title-text
+  {:font-size  22
+   :text-align :center
+   :color      colors/black})
+
+(def puk-code-title-text
+  {:font-size   17
+   :padding-top 32
+   :color       colors/black})
+
+(def puk-code-explanation-text
+  {:font-size   15
+   :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})
+
+(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})

src/status_im/ui/screens/hardwallet/setup/subs.cljs

@@ -0,0 +1,7 @@
+(ns status-im.ui.screens.hardwallet.setup.subs
+  (:require [re-frame.core :as re-frame]))
+
+(re-frame/reg-sub
+ :hardwallet-setup-step
+ (fn [db]
+   (get-in db [:hardwallet :setup-step])))

src/status_im/ui/screens/hardwallet/setup/views.cljs

@@ -0,0 +1,120 @@
+(ns status-im.ui.screens.hardwallet.setup.views
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [re-frame.core :as re-frame]
+            [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.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 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
+                   :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
+                   :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
+                    :font  :bold}
+        "a12k52kh0x"]]]
+     [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}]]]]])
+
+(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}]]]]])
+
+(defview hardwallet-setup []
+  (letsubs [step [:hardwallet-setup-step]]
+    (case step
+      :begin [begin]
+      :prepare [prepare]
+      :secret-keys [secret-keys]
+      :complete [complete])))

src/status_im/ui/screens/hardwallet/success/styles.cljs

@@ -0,0 +1,64 @@
+(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 hardwallet-card-image
+  {:width  255
+   :height 160})
+
+(def icon-check-container
+  {:width            64
+   :height           64
+   :bottom           -40
+   :position         :absolute
+   :align-items      :center
+   :justify-content  :center
+   :background-color colors/green
+   :border-radius    50})
+
+(def complete-text-container
+  {:margin-top 40})
+
+(def complete-text
+  {:font-size   22
+   :font-weight :bold
+   :color       colors/black
+   :text-align  :center})
+
+(def complete-information-text
+  {:text-align         :center
+   :font-size          15
+   :color              colors/gray
+   :padding-horizontal 80
+   :padding-vertical   10})
+
+(def bottom-action-container
+  {:background-color colors/gray-background
+   :align-items      :center
+   :justify-content  :center
+   :flex-direction   :row
+   :width            104
+   :height           44
+   :border-radius    10
+   :margin-bottom    40})
+
+(def bottom-action-text
+  {:font-size      14
+   :color          colors/blue
+   :line-height    20
+   :text-transform :uppercase})

src/status_im/ui/screens/hardwallet/success/views.cljs

@@ -0,0 +1,36 @@
+(ns status-im.ui.screens.hardwallet.success.views
+  (:require [re-frame.core :as re-frame]
+            [status-im.react-native.resources :as resources]
+            [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]))
+
+(defn hardwallet-success []
+  [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/image {:source (:hardwallet-card resources/ui)
+                    :style  styles/hardwallet-card-image}]
+      [react/view styles/icon-check-container
+       [vector-icons/icon :icons/check {:color  :white
+                                        :width  30
+                                        :height 30}]]]
+     [react/view styles/complete-text-container
+      [react/text {:style styles/complete-text}
+       (i18n/label :t/complete-exclamation)]
+      [react/text {:style           styles/complete-information-text
+                   :number-of-lines 3}
+       (i18n/label :t/complete-hardwallet-setup)]]
+     [react/touchable-highlight
+      {:on-press #(re-frame/dispatch [:hardwallet.ui/success-button-pressed])}
+      [react/view styles/bottom-action-container
+       [react/text {:style      styles/bottom-action-text
+                    :font       :medium
+                    :uppercase? true}
+        (i18n/label :t/okay)]]]]]])

src/status_im/ui/screens/subs.cljs

@@ -22,7 +22,9 @@
             status-im.ui.screens.add-new.new-chat.subs
             status-im.ui.screens.add-new.new-public-chat.subs
             status-im.ui.screens.profile.subs
-            status-im.ui.screens.hardwallet.connect.subs))
+            status-im.ui.screens.hardwallet.connect.subs
+            status-im.ui.screens.hardwallet.pin.subs
+            status-im.ui.screens.hardwallet.setup.subs))
 
 (reg-sub :get
          (fn [db [_ k]]

src/status_im/ui/screens/views.cljs

@@ -58,6 +58,9 @@
             [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]]
             [status-im.ui.screens.about-app.views :as about-app]
             [status-im.utils.navigation :as navigation]
@@ -131,8 +134,11 @@
                 :create-account                   create-account
                 :recover                          recover
                 :accounts                         accounts
-                :hardwallet/authentication-method hardwallet-authentication-method
+                :hardwallet-authentication-method hardwallet-authentication-method
-                :hardwallet/connect               hardwallet-connect}
+                :hardwallet-connect               hardwallet-connect
+                :hardwallet-setup                 hardwallet-setup
+                :hardwallet-pin                   hardwallet-pin
+                :hardwallet-success               hardwallet-success}
          (= :intro view-id)
          (assoc :intro intro)))
       (cond-> {:headerMode "none"}
@@ -272,8 +278,11 @@
            :create-account                   create-account
            :recover                          recover
            :accounts                         accounts
-           :hardwallet/authentication-method hardwallet-authentication-method
+           :hardwallet-authentication-method hardwallet-authentication-method
-           :hardwallet/connect               hardwallet-connect
+           :hardwallet-connect               hardwallet-connect
+           :hardwallet-pin                   hardwallet-pin
+           :hardwallet-setup                 hardwallet-setup
+           :hardwallet-success               hardwallet-success
            :qr-scanner                       qr-scanner})
          {:headerMode       "none"
           :initialRouteName "my-profile"})}

src/status_im/utils/utils.cljs

@@ -24,16 +24,7 @@
    (show-popup title content on-dismiss)))
 
 (defn show-confirmation
-  ([title content on-accept]
+  [{:keys [title content confirm-button-text on-accept on-cancel cancel-button-text]}]
-   (show-confirmation title content nil on-accept))
-  ([title content confirm-button-text on-accept]
-   (show-confirmation title content confirm-button-text on-accept nil))
-  ([title content confirm-button-text on-accept on-cancel]
-   (show-confirmation nil title content confirm-button-text on-accept on-cancel))
-  ([ios-style title content confirm-button-text on-accept on-cancel]
-   (show-confirmation ios-style title content confirm-button-text on-accept on-cancel nil))
-  ([{:keys [ios-confirm-style] :or {ios-confirm-style "destructive"}}
-    title content confirm-button-text on-accept on-cancel cancel-button-text]
   (.alert (.-Alert rn-dependencies/react-native)
           title
           content
@@ -43,10 +34,11 @@
                            :style               "cancel"
                            :accessibility-label :cancel-button}
                           (when on-cancel {:onPress on-cancel}))
-                    {:text                (or confirm-button-text "OK")
+                   {:text                (or confirm-button-text (i18n/label :t/ok))
                     :onPress             on-accept
-                     :style               ios-confirm-style
+                    :style               "default"
-                     :accessibility-label :confirm-button})))))
+                    :accessibility-label :confirm-button})
+           #js {:cancelable false})))
 
 (defn show-question
   ([title content on-accept]

test/cljs/status_im/test/hardwallet/core.cljs

@@ -0,0 +1,46 @@
+(ns status-im.test.hardwallet.core
+  (:require [cljs.test :refer-macros [deftest is testing]]
+            [status-im.hardwallet.core :as hardwallet]))
+
+(deftest process-pin-input
+  (testing "start entering PIN"
+    (is (= {:db {:hardwallet {:pin {:original     [1]
+                                    :confirmation []
+                                    :status       nil
+                                    :enter-step   :original}}}}
+           (hardwallet/process-pin-input 1
+                                         :original
+                                         {:db {:hardwallet {:pin {:original     []
+                                                                  :confirmation []
+                                                                  :enter-step   :original}}}}))))
+  (testing "first 6 numbers entered"
+    (is (= {:db {:hardwallet {:pin {:original     [1 2 3 4 5 6]
+                                    :confirmation []
+                                    :status       nil
+                                    :enter-step   :confirmation}}}}
+           (hardwallet/process-pin-input 6
+                                         :original
+                                         {:db {:hardwallet {:pin {:original     [1 2 3 4 5]
+                                                                  :confirmation []
+                                                                  :enter-step   :original}}}}))))
+  (testing "confirmation entered"
+    (is (= {:db {:hardwallet {:pin {:original     [1 2 3 4 5 6]
+                                    :confirmation [1 2 3 4 5 6]
+                                    :enter-step   :confirmation
+                                    :status       :validating}}}}
+           (hardwallet/process-pin-input 6
+                                         :confirmation
+                                         {:db {:hardwallet {:pin {:original     [1 2 3 4 5 6]
+                                                                  :confirmation [1 2 3 4 5]
+                                                                  :enter-step   :confirmation}}}}))))
+  (testing "confirmation doesn't match"
+    (is (= {:db {:hardwallet {:pin {:original     []
+                                    :confirmation []
+                                    :enter-step   :original
+                                    :error        :t/pin-mismatch
+                                    :status       :error}}}}
+           (hardwallet/process-pin-input 7
+                                         :confirmation
+                                         {:db {:hardwallet {:pin {:original     [1 2 3 4 5 6]
+                                                                  :confirmation [1 2 3 4 5]
+                                                                  :enter-step   :confirmation}}}})))))

test/cljs/status_im/test/runner.cljs

@@ -52,6 +52,7 @@
             [status-im.test.ui.screens.add-new.models]
 
             [status-im.test.accounts.recover.core]
+            [status-im.test.hardwallet.core]
             [status-im.test.ui.screens.currency-settings.models]
             [status-im.test.ui.screens.wallet.db]))
 
@@ -113,6 +114,7 @@
  'status-im.test.utils.http
  'status-im.test.ui.screens.add-new.models
  'status-im.test.accounts.recover.core
+ 'status-im.test.hardwallet.core
  'status-im.test.ui.screens.currency-settings.models
  'status-im.test.ui.screens.wallet.db
  'status-im.test.browser.core

translations/en.json

@@ -305,6 +305,7 @@
     "mainnet-text": "You’re on the Mainnet. Real ETH will be sent",
     "receive": "Receive",
     "ok-got-it": "Ok, got it",
+    "ok": "OK",
     "main-currency": "Main currency",
     "clear-history-title": "Clear history?",
     "image-source-make-photo": "Capture",
@@ -714,5 +715,27 @@
     "link-card": "Link the card and use it to confirm your identity on the platform.",
     "hold-card": "hold card to the back of your phone",
     "turn-nfc-on": "turn nfc on",
-    "go-to-settings": "Go to Settings"
+    "go-to-settings": "Go to Settings",
+    "card-is-empty": "Card is empty",
+    "begin-set-up": "begin set up",
+    "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}}",
+    "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",
+    "puk-code": "PUK code",
+    "puk-code-explanation": "Unlocks card if you lose access",
+    "pair-code": "Pair code",
+    "pair-code-explanation": "Pairs card to a different device with the same Status account on it",
+    "secret-keys-confirmation-title": "Did you write them down?",
+    "secret-keys-confirmation-text": "Record these now because you won't see this screen again",
+    "secret-keys-confirmation-confirm": "GOT IT",
+    "secret-keys-confirmation-cancel": "SEE IT AGAIN",
+    "completing-card-setup": "Completing card setup",
+    "create-pin": "Create a PIN",
+    "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"
 }