[#5964] hardwallet screens flow 2

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

resources/icons/indicator-big.svg

@@ -0,0 +1,3 @@
+<svg width="5" height="17" viewBox="0 0 5 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.43853 16.1688C1.23853 16.1688 1.03853 16.0688 0.838532 15.9688C0.338532 15.6687 0.238531 15.0688 0.538531 14.5688C1.93853 12.5688 2.63853 10.3688 2.63853 8.06875C2.63853 5.76875 1.93853 3.56875 0.538531 1.56875C0.338531 1.06875 0.438531 0.46875 0.938531 0.16875C1.33853 -0.13125 1.93853 -0.03125 2.33853 0.46875C3.93853 2.76875 4.73853 5.46875 4.73853 8.16875C4.73853 10.8687 3.93853 13.4687 2.33853 15.8687C2.13853 16.0687 1.73853 16.1688 1.43853 16.1688Z" fill="#4360DF"/>
+</svg>

resources/icons/indicator-middle.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="12" viewBox="0 0 4 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.23853 11.4687C1.03853 11.4687 0.838532 11.3687 0.638532 11.2687C0.238532 10.9687 0.138533 10.2687 0.438533 9.86874C1.33853 8.66874 1.83853 7.36874 1.83853 6.06874C1.83853 4.76874 1.43853 3.46874 0.538532 2.26874C0.138532 1.86874 0.238532 1.26874 0.738532 0.868739C1.13853 0.568739 1.83853 0.668739 2.13853 1.06874C3.23853 2.66874 3.83853 4.26874 3.83853 6.06874C3.83853 7.86874 3.23853 9.46874 2.03853 11.0687C1.83853 11.3687 1.53853 11.4687 1.23853 11.4687Z" fill="#4360DF"/>
+</svg>

resources/icons/indicator-small.svg

@@ -0,0 +1,3 @@
+<svg width="3" height="8" viewBox="0 0 3 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.03854 7.46876C0.838535 7.46876 0.538535 7.36876 0.438535 7.26876C0.0385354 6.86876 -0.0614647 6.26876 0.338535 5.86876C0.838535 5.26876 1.03854 4.66876 1.03854 4.16876C1.03854 3.56876 0.838535 2.96876 0.338535 2.36876C-0.161465 1.96876 -0.0614647 1.26876 0.338535 0.968757C0.738535 0.668757 1.43854 0.668757 1.73854 1.06876C2.53854 2.06876 2.93854 3.06876 2.93854 4.06876C2.93854 5.16876 2.53854 6.16876 1.73854 7.06876C1.63854 7.36876 1.33854 7.46876 1.03854 7.46876Z" fill="#4360DF"/>
+</svg>

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

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)))
 

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,10 +192,10 @@
                    :style  (merge icon-style style)}]]))
 
 (defn mobile-icon
-  [name {:keys [color container-style style accessibility-label width height]
+  [name {:keys [color container-style accessibility-label width height]
          :or   {accessibility-label :icon}}]
   ^{:key name}
-  [react/view {:style               container-style
+  [react/animated-view {:style               container-style
                         :accessibility-label accessibility-label}
    (if-let [icon-fn (get icons (normalize-property-name name))]
      (let [icon-vec (icon-fn

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
+(defstyle pin-container
   {:flex            1
-   :background-color colors/white})
+   :flex-direction  :column
-
+   :justify-content :space-between
-(def inner-container
+   :ios             {:margin-top 30}})
-  {:flex-direction :column
-   :flex           1
-   :align-items    :center})
 
 (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

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

@@ -58,12 +58,7 @@
 
 (defn pin-view [{:keys [pin title step status error]}]
   (let [enabled? (not= status :validating)]
-    [react/view styles/container
+    [react/view styles/pin-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}
@@ -80,9 +75,9 @@
                              :font  :medium}
                  (i18n/label error)]]
         [pin-indicators pin])
-       [numpad step enabled?]]]]))
+      [numpad step enabled?]]]))
 
-(defview hardwallet-pin []
+(defview main []
   (letsubs [original [:hardwallet/pin]
             confirmation [:hardwallet/pin-confirmation]
             enter-step [:hardwallet/pin-enter-step]

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,11 +149,18 @@
 
 (def puk-code-explanation-text
   {:font-size   15
+   :width       "90%"
+   :text-align  :center
    :padding-top 5
    :color       colors/gray})
 
 (def puk-code-numbers-container
-  {:width           369
+  {:justify-content :center
+   :flex-direction  :row})
+
+(defstyle puk-code-numbers-inner-container
+  {:width            "85%"
+   :android          {:margin-horizontal 16}
    :height           64
    :margin-top       20
    :align-items      :center
@@ -124,19 +174,31 @@
    :text-align :center
    :color      colors/green})
 
-(def pair-code-title-text
-  puk-code-title-text)
-
-(def pair-code-explanation-text
-  (assoc puk-code-explanation-text :text-align :center))
-
-(def pair-code-text-container
-  puk-code-numbers-container)
-
-(def pair-code-text
-  puk-code-text)
-
 (def next-button-container
   {:flex-direction  :row
-   :margin-horizontal 12
    :margin-vertical 15})
+
+(def secret-keys-next-button-container
+  (assoc next-button-container
+         :width "100%"
+         :margin-right 12))
+
+;; enter pair code
+
+(def enter-pair-code-title-container
+  {:flex-direction :column
+   :align-items    :center})
+
+(defn enter-pair-code-input-container [width]
+  {:width      (* width 0.9)
+   :margin-top 10})
+
+(def enter-pair-code-title-text
+  {:font-size  22
+   :text-align :center
+   :color      colors/black})
+
+(def enter-pair-code-explanation-text
+  {:font-size   15
+   :padding-top 5
+   :color       colors/gray})

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

@@ -5,3 +5,8 @@
  :hardwallet-setup-step
  (fn [db]
    (get-in db [:hardwallet :setup-step])))
+
+(re-frame/reg-sub
+ :hardwallet-pair-code
+ (fn [db]
+   (get-in db [:hardwallet :pair-code])))

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

@@ -1,68 +1,54 @@
 (ns status-im.ui.screens.hardwallet.setup.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [re-frame.core :as re-frame]
+            [reagent.core :as reagent]
+            [status-im.ui.screens.hardwallet.pin.views :as pin.views]
+            [status-im.ui.components.animation :as animation]
             [status-im.ui.components.common.common :as components.common]
             [status-im.react-native.resources :as resources]
             [status-im.ui.screens.hardwallet.setup.styles :as styles]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.styles :as components.styles]
+            [status-im.ui.components.text-input.view :as text-input]
             [status-im.i18n :as i18n]
             [status-im.ui.components.colors :as colors]))
 
-(defn begin []
+(defn maintain-card []
-  [react/view styles/container
+  (let [animation-value (animation/create-value 0)
-   [react/view components.styles/flex
+        ;TODO(dmitryn): make animation smoother
-    [react/view styles/inner-container
+        interpolate-fn (fn [output-range]
-     [react/view styles/maintain-card-container
+                         (animation/interpolate animation-value
+                                                {:inputRange  [0 0.25 0.5 0.75 1]
+                                                 :outputRange output-range}))]
+    (reagent/create-class
+     {:component-did-mount (fn []
+                             (-> animation-value
+                                 (animation/timing {:toValue         1
+                                                    :duration        1000
+                                                    :useNativeDriver true})
+                                 (animation/anim-loop)
+                                 (animation/start)))
+      :display-name        "maintain-card"
+      :reagent-render      (fn [] [react/view styles/maintain-card-container
+                                   [react/view styles/hardwallet-icon-container
                                     [vector-icons/icon :icons/hardwallet {:color colors/blue}]
-      [react/text {:style styles/maintain-card-text}
+                                    [vector-icons/icon :icons/indicator-small {:color           colors/blue
-       (i18n/label :t/maintain-card-to-phone-contact)]]
+                                                                               :container-style (styles/hardwallet-icon-indicator-small-container
-     [react/view styles/hardwallet-card-image-container
+                                                                                                 (interpolate-fn [0 0.5 1 0.5 0]))}]
-      [react/image {:source (:hardwallet-card resources/ui)
+                                    [vector-icons/icon :icons/indicator-middle {:color           colors/blue
-                    :style  styles/hardwallet-card-image}]
+                                                                                :container-style (styles/hardwallet-icon-indicator-middle-container
-      [react/view styles/card-is-empty-text-container
+                                                                                                  (interpolate-fn [1 0.4 0 0.4 0.8]))}]
-       [react/text {:style styles/card-is-empty-text}
+                                    [vector-icons/icon :icons/indicator-big {:color           colors/blue
-        (i18n/label :t/card-is-empty)]]]
+                                                                             :container-style (styles/hardwallet-icon-indicator-big-container
-     [react/touchable-highlight
+                                                                                               (interpolate-fn [0.5 0.8 0.5 0.8 0.4]))}]]
-      {:on-press #(re-frame/dispatch [:hardwallet.ui/begin-setup-button-pressed])}
+                                   [react/text {:style           styles/maintain-card-text
-      [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)]
+                                    (i18n/label :t/maintain-card-to-phone-contact)]])})))
-      [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-inner-container
     [react/view styles/secret-keys-title-container
      [react/text {:style           styles/secret-keys-title-text
                   :number-of-lines 2
@@ -74,47 +60,146 @@
     [react/text {:style styles/puk-code-explanation-text}
      (i18n/label :t/puk-code-explanation)]
     [react/view styles/puk-code-numbers-container
+     [react/view styles/puk-code-numbers-inner-container
       [react/text {:style styles/puk-code-text
                    :font  :bold}
-        "1234 5678 9123"]]
+       "1234 5678 9123"]]]
-      [react/text {:style styles/pair-code-title-text
+    [react/text {:style styles/puk-code-title-text
                  :font  :bold}
      (i18n/label :t/pair-code)]
-      [react/text {:style           styles/pair-code-explanation-text
+    [react/text {:style           styles/puk-code-explanation-text
                  :number-of-lines 2}
      (i18n/label :t/pair-code-explanation)]
-      [react/view styles/pair-code-text-container
+    [react/view styles/puk-code-numbers-container
-       [react/text {:style styles/pair-code-text
+     [react/view styles/puk-code-numbers-inner-container
+      [react/text {:style styles/puk-code-text
                    :font  :bold}
-        "a12k52kh0x"]]]
+       "a12k52kh0x"]]]]
-     [react/view styles/next-button-container
+   [react/view styles/secret-keys-next-button-container
     [react/view components.styles/flex]
     [components.common/bottom-button
      {:on-press #(re-frame/dispatch [:hardwallet.ui/secret-keys-next-button-pressed])
-        :forward? true}]]]]])
+      :forward? true}]]])
 
-(defn complete []
+(defview enter-pair-code []
-  [react/view styles/container
+  (letsubs [pair-code [:hardwallet-pair-code]
-   [react/view components.styles/flex
+            width [:dimensions/window-width]]
-    [react/view styles/inner-container
+    [react/view styles/enter-pair-code-container
-     [react/view styles/maintain-card-container
+     [react/view styles/enter-pair-code-title-container
-      [vector-icons/icon :icons/hardwallet {:color colors/blue}]
+      [react/view
-      [react/text {:style styles/maintain-card-text}
+       [react/text {:style styles/enter-pair-code-title-text
-       (i18n/label :t/maintain-card-to-phone-contact)]]
+                    :font  :bold}
+        (i18n/label :t/enter-pair-code)]
+       [react/text {:style styles/enter-pair-code-explanation-text}
+        (i18n/label :t/enter-pair-code-description)]]
+      [react/view (styles/enter-pair-code-input-container width)
+       [text-input/text-input-with-label
+        {:on-change-text    #(re-frame/dispatch [:hardwallet.ui/pair-code-input-changed %])
+         :secure-text-entry true
+         :placeholder       ""}]]]
+     [react/view styles/next-button-container
+      [react/view components.styles/flex]
+      [components.common/bottom-button
+       {:on-press  #(re-frame/dispatch [:hardwallet.ui/pair-code-next-button-pressed])
+        :disabled? (empty? pair-code)
+        :forward?  true}]]]))
+
+(defn- card-with-button-view
+  [{:keys [text-label button-label button-container-style on-press-event]}]
+  "Generic view with centered card image and button at the bottom.
+  Used by 'Prepare', 'Pair', 'No slots', 'Card is linked' screens"
+  [react/view styles/card-with-button-view-container
+   [react/view styles/hardwallet-card-image-container
+    [react/image {:source (:hardwallet-card resources/ui)
+                  :style  styles/hardwallet-card-image}]
+    [react/view styles/center-text-container
+     [react/text {:style styles/center-text}
+      (i18n/label text-label)]]]
+   [react/touchable-highlight
+    {:on-press #(re-frame/dispatch [on-press-event])}
+    [react/view (merge styles/bottom-button-container button-container-style)
+     [react/text {:style      styles/bottom-button-text
+                  :font       :medium
+                  :uppercase? true}
+      (i18n/label button-label)]]]])
+
+(defn begin []
+  [card-with-button-view {:text-label     :t/card-is-empty
+                          :button-label   :t/begin-set-up
+                          :on-press-event :hardwallet.ui/begin-setup-button-pressed}])
+
+(defn pair []
+  [card-with-button-view {:text-label     :t/pair-card-question
+                          :button-label   :t/pair-card
+                          :on-press-event :hardwallet.ui/pair-card-button-pressed}])
+
+(defn no-slots []
+  [card-with-button-view {:text-label             :t/no-pairing-slots-available
+                          :button-label           :t/help
+                          :button-container-style {:background-color colors/white}
+                          :on-press-event         :hardwallet.ui/no-pairing-slots-help-button-pressed}])
+
+(defn card-already-linked []
+  [card-with-button-view {:text-label             :t/card-already-linked
+                          :button-label           :t/help
+                          :button-container-style {:background-color colors/white}
+                          :on-press-event         :hardwallet.ui/card-already-linked-help-button-pressed}])
+
+(defn- loading-view [{:keys [title-label text-label estimated-time-seconds]}]
+  "Generic view with waiting time estimate and loading indicator.
+  Used by 'Prepare', 'Pairing', 'Completing' screens"
+  [react/view styles/loading-view-container
    [react/view styles/center-container
     [react/text {:style styles/center-title-text
                  :font  :bold}
-       (i18n/label :t/completing-card-setup)]
+     (i18n/label title-label)]
+    (when text-label
+      [react/text {:style           styles/generating-codes-for-pairing-text
+                   :number-of-lines 2}
+       (i18n/label text-label)])
     [react/text {:style styles/estimated-time-text}
-       (i18n/label :t/estimated-time {:time "~30 seconds"})]]
+     (str
+      (i18n/label :t/estimated-time)
+      " ~"
+      estimated-time-seconds
+      " "
+      (i18n/label-pluralize estimated-time-seconds
+                            :t/datetime-second))]]
    [react/view styles/waiting-indicator-container
     [react/activity-indicator {:animating true
-                                 :size      :large}]]]]])
+                               :size      :large}]]])
+
+(defn preparing []
+  [loading-view {:title-label            :t/preparing-card
+                 :text-label             :t/generating-codes-for-pairing
+                 :estimated-time-seconds 20}])
+
+(defn pairing []
+  [loading-view {:title-label            :t/pairing-card
+                 :estimated-time-seconds 30}])
+
+(defn complete []
+  [loading-view {:title-label            :t/completing-card-setup
+                 :estimated-time-seconds 30}])
+
+(defn- content [step]
+  (case step
+    :begin [begin]
+    :preparing [preparing]
+    :secret-keys [secret-keys]
+    :complete [complete]
+    :pair [pair]
+    :enter-pair-code [enter-pair-code]
+    :no-slots [no-slots]
+    :card-already-linked [card-already-linked]
+    :pairing [pairing]
+    :pin [pin.views/main]
+    [begin]))
 
 (defview hardwallet-setup []
   (letsubs [step [:hardwallet-setup-step]]
-    (case step
+    [react/keyboard-avoiding-view components.styles/flex
-      :begin [begin]
+     [react/view styles/container
-      :prepare [prepare]
+      [react/view styles/inner-container
-      :secret-keys [secret-keys]
+       [maintain-card]
-      :complete [complete])))
+       [content step]]]]))

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"

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",

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",