From 5e7785d43203c2401bd68c9897f3222e7ccf9a7d Mon Sep 17 00:00:00 2001 From: Dmitry Novotochinov Date: Thu, 26 Sep 2019 19:49:26 +0300 Subject: [PATCH] [#8993] adjust pin screens for small screen devices find account by key-uid show pairing slots info on pairing fix pin reset flow pass retry-counter fix sign with keycard button in wallet Signed-off-by: Dmitry Novotochinov --- src/status_im/hardwallet/core.cljs | 73 +++++++++++-------- src/status_im/subs.cljs | 6 ++ .../ui/screens/hardwallet/pin/styles.cljs | 36 ++++----- .../ui/screens/hardwallet/pin/views.cljs | 55 +++++++------- .../ui/screens/hardwallet/settings/subs.cljs | 12 +++ .../ui/screens/keycard/onboarding/views.cljs | 18 +++-- .../ui/screens/keycard/recovery/views.cljs | 23 ++++-- src/status_im/ui/screens/keycard/views.cljs | 36 +++++---- src/status_im/ui/screens/signing/styles.cljs | 19 +++++ src/status_im/ui/screens/signing/views.cljs | 34 ++++++--- translations/en.json | 11 +-- 11 files changed, 202 insertions(+), 121 deletions(-) diff --git a/src/status_im/hardwallet/core.cljs b/src/status_im/hardwallet/core.cljs index 4b08f82b67..24682c3b44 100644 --- a/src/status_im/hardwallet/core.cljs +++ b/src/status_im/hardwallet/core.cljs @@ -47,14 +47,14 @@ (defn get-pairing ([db] - (get-pairing db (get-in db [:hardwallet :application-info :instance-uid]))) - ([db instance-uid] + (get-pairing db (get-in db [:hardwallet :application-info :key-uid]))) + ([db key-uid] (or (get-in db [:multiaccount :keycard-pairing]) (get-in db [:hardwallet :secrets :pairing]) - (when instance-uid + (when key-uid (:keycard-pairing - (find-multiaccount-by-keycard-instance-uid db instance-uid)))))) + (find-multiaccount-by-keycard-key-uid db key-uid)))))) (fx/defn listen-to-hardware-back-button [{:keys [db]}] @@ -439,7 +439,7 @@ (let [app-info (get-in db [:hardwallet :application-info]) flow (get-in db [:hardwallet :flow]) {:keys [instance-uid key-uid]} app-info - pairing (get-pairing db instance-uid) + pairing (get-pairing db key-uid) app-info' (if pairing (assoc app-info :paired? true) app-info) card-state (get-card-state app-info')] (fx/merge cofx @@ -626,6 +626,9 @@ (fx/merge cofx {:db (-> db (assoc-in [:hardwallet :pin :enter-step] enter-step) + (update-in [:hardwallet :pin :error-label] #(if (= :puk enter-step) + :t/enter-puk-code-description + %)) (assoc-in [:hardwallet :application-info] info') (assoc-in [:hardwallet :application-info :applet-installed?] true) (assoc-in [:hardwallet :application-info-error] nil))} @@ -1057,12 +1060,13 @@ (let [pairing (get-pairing db)] (fx/merge cofx {:hardwallet/get-application-info {:pairing pairing} - :db (-> db - (update-in [:hardwallet :pin] merge {:status nil - :enter-step :original - :current [0 0 0 0 0 0] - :puk [] - :error-label nil}))} + :db (-> db + (update-in [:hardwallet :pin] merge {:status nil + :enter-step :original + :current [0 0 0 0 0 0] + :confirmation [] + :puk [] + :error-label nil}))} (navigation/navigate-to-cofx :enter-pin-settings nil)))) (defn on-unblock-pin-error @@ -1070,16 +1074,16 @@ (let [pairing (get-pairing db)] (log/debug "[hardwallet] unblock pin error" error) {:hardwallet/get-application-info {:pairing pairing} - :db (update-in db [:hardwallet :pin] merge {:status :error - :error-label :t/puk-mismatch - :enter-step :puk - :puk []})})) + :db (update-in db [:hardwallet :pin] merge {:status :error + :error-label :t/puk-mismatch + :enter-step :puk + :puk []})})) (fx/defn get-application-info [{:keys [db]} pairing on-card-read] - (let [instance-uid (get-in db [:hardwallet :application-info :instance-uid]) + (let [key-uid (get-in db [:hardwallet :application-info :key-uid]) pairing' (or pairing - (when instance-uid - (get-pairing db instance-uid)))] + (when key-uid + (get-pairing db key-uid)))] {:hardwallet/get-application-info {:pairing pairing' :on-success on-card-read}})) @@ -1140,15 +1144,22 @@ (fx/defn on-change-pin-success [{:keys [db] :as cofx}] - (let [pin (vector->string (get-in db [:hardwallet :pin :original]))] + (let [pin (get-in db [:hardwallet :pin :original])] (fx/merge cofx {:db (-> db (assoc-in [:hardwallet :on-card-connected] nil) - (assoc-in [:hardwallet :pin] {:status nil - :error-label nil})) + (assoc-in [:hardwallet :pin] {:status nil + :login pin + :confirmation [] + :error-label nil})) :utils/show-popup {:title "" :content (i18n/label :t/pin-changed)}} - (multiaccounts.logout/logout)))) + (when (:multiaccounts/login db) + (navigation/navigate-to-cofx :keycard-login-pin nil)) + (when (:multiaccounts/login db) + (get-keys-from-keycard)) + (when (:multiaccount/multiaccount db) + (multiaccounts.logout/logout))))) (fx/defn on-change-pin-error [{:keys [db] :as cofx} error] @@ -1228,9 +1239,9 @@ (defn unblock-pin [{:keys [db] :as cofx}] (let [puk (vector->string (get-in db [:hardwallet :pin :puk])) - instance-uid (get-in db [:hardwallet :application-info :instance-uid]) + key-uid (get-in db [:hardwallet :application-info :key-uid]) card-connected? (get-in db [:hardwallet :card-connected?]) - pairing (get-pairing db instance-uid)] + pairing (get-pairing db key-uid)] (if card-connected? {:db (assoc-in db [:hardwallet :pin :status] :verifying) :hardwallet/unblock-pin {:puk puk @@ -1322,7 +1333,8 @@ [{:keys [db] :as cofx}] (let [{:keys [pairing]} (get-in db [:hardwallet :secrets]) instance-uid (get-in db [:hardwallet :application-info :instance-uid]) - pairing' (or pairing (get-pairing db instance-uid)) + key-uid (get-in db [:hardwallet :application-info :key-uid]) + pairing' (or pairing (get-pairing db key-uid)) pin (vector->string (get-in db [:hardwallet :pin :import-multiaccount]))] (fx/merge cofx {:db (-> db @@ -1426,13 +1438,14 @@ [{:keys [db] :as cofx} _] (log/debug "[hardwallet] card connected") (let [instance-uid (get-in db [:hardwallet :application-info :instance-uid]) + key-uid (get-in db [:hardwallet :application-info :key-uid]) accounts-screen? (= :multiaccounts (:view-id db)) should-read-instance-uid? (nil? instance-uid) on-card-connected (get-in db [:hardwallet :on-card-connected]) on-card-read (cond should-read-instance-uid? :hardwallet/get-application-info :else (get-in db [:hardwallet :on-card-read])) - pairing (get-pairing db instance-uid)] + pairing (get-pairing db key-uid)] (fx/merge cofx {:db (-> db (assoc-in [:hardwallet :card-connected?] true) @@ -1749,7 +1762,7 @@ (let [{:keys [address whisper-address encryption-public-key whisper-private-key] :as account-data} (js->clj data :keywordize-keys true) address (str "0x" address) {:keys [photo-path name]} (get-in db [:multiaccounts/multiaccounts address]) - instance-uid (get-in db [:hardwallet :application-info :instance-uid]) + key-uid (get-in db [:hardwallet :application-info :key-uid]) multiaccount-data (types/clj->json {:name name :address address :photo-path photo-path})] (fx/merge cofx {:db (-> db @@ -1762,7 +1775,7 @@ :address address :photo-path photo-path :name name)) - :hardwallet/get-application-info {:pairing (get-pairing db instance-uid)} + :hardwallet/get-application-info {:pairing (get-pairing db key-uid)} :hardwallet/login-with-keycard {:multiaccount-data multiaccount-data :password encryption-public-key :chat-key whisper-private-key}}))) @@ -1771,7 +1784,7 @@ [{:keys [db] :as cofx} error] (log/debug "[hardwallet] get keys error: " error) (let [tag-was-lost? (= "Tag was lost." (:error error)) - instance-uid (get-in db [:hardwallet :application-info :instance-uid]) + key-uid (get-in db [:hardwallet :application-info :key-uid]) flow (get-in db [:hardwallet :flow])] (if tag-was-lost? (fx/merge cofx @@ -1779,7 +1792,7 @@ (navigation/navigate-to-cofx :keycard-connection-lost nil)) (if (re-matches pin-mismatch-error (:error error)) (fx/merge cofx - {:hardwallet/get-application-info {:pairing (get-pairing db instance-uid)} + {:hardwallet/get-application-info {:pairing (get-pairing db key-uid)} :db (update-in db [:hardwallet :pin] merge {:status :error :login [] :import-multiaccount [] diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 3f24afb7fe..8d16eac4be 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -334,6 +334,12 @@ :<- [:dimensions/window] :height) +(re-frame/reg-sub + :dimensions/small-screen? + :<- [:dimensions/window-height] + (fn [height] + (< height 550))) + (re-frame/reg-sub :get-screen-params :<- [:screen-params] diff --git a/src/status_im/ui/screens/hardwallet/pin/styles.cljs b/src/status_im/ui/screens/hardwallet/pin/styles.cljs index 8e894d9819..b22c8d54bd 100644 --- a/src/status_im/ui/screens/hardwallet/pin/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/styles.cljs @@ -9,16 +9,16 @@ (styles/def pin-container {:flex 1 :flex-direction :column - :justify-content :space-between - :android {:margin-top 10} - :ios {:margin-top 10}}) + :justify-content :space-between}) -(styles/def error-container - {:height 22}) +(styles/defn error-container [small-screen?] + {:height (if small-screen? 18 22) + :margin-top (if small-screen? 14 10) + :margin-bottom (if small-screen? 10 0)}) -(def error-text +(defn error-text [small-screen?] {:color colors/red - :font-size 15 + :font-size (if small-screen? 12 15) :text-align :center}) (defn center-container [title] @@ -59,29 +59,29 @@ {:margin-top 26}) (def numpad-container - {:margin-top 20}) + {:margin-top 18}) -(def numpad-row-container +(defn numpad-row-container [small-screen?] {:flex-direction :row :justify-content :center :align-items :center - :margin-vertical 12}) + :margin-vertical (if small-screen? 4 10)}) -(def numpad-button - {:width 64 - :margin-horizontal 16 - :height 64 +(defn numpad-button [small-screen?] + {:width (if small-screen? 50 64) + :margin-horizontal (if small-screen? 10 14) + :height (if small-screen? 50 64) :align-items :center :justify-content :center :flex-direction :row :border-radius 50 :background-color colors/blue-light}) -(def numpad-delete-button - (assoc numpad-button :background-color colors/white)) +(defn numpad-delete-button [small-screen?] + (assoc (numpad-button small-screen?) :background-color colors/white)) -(def numpad-empty-button - (assoc numpad-button :background-color colors/white +(defn numpad-empty-button [small-screen?] + (assoc (numpad-button small-screen?) :background-color colors/white :border-color colors/white)) (def numpad-button-text diff --git a/src/status_im/ui/screens/hardwallet/pin/views.cljs b/src/status_im/ui/screens/hardwallet/pin/views.cljs index 75802613da..4c31d53fdf 100644 --- a/src/status_im/ui/screens/hardwallet/pin/views.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/views.cljs @@ -12,32 +12,32 @@ [status-im.ui.components.toolbar.actions :as actions] [status-im.ui.components.toolbar.actions :as toolbar.actions])) -(defn numpad-button [n step enabled?] +(defn numpad-button [n step enabled? small-screen?] [react/touchable-highlight {:on-press #(when enabled? (re-frame/dispatch [:hardwallet.ui/pin-numpad-button-pressed n step]))} - [react/view styles/numpad-button + [react/view (styles/numpad-button small-screen?) [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-row [[a b c] step enabled? small-screen?] + [react/view (styles/numpad-row-container small-screen?) + [numpad-button a step enabled? small-screen?] + [numpad-button b step enabled? small-screen?] + [numpad-button c step enabled? small-screen?]]) -(defn numpad [step enabled?] +(defn numpad [step enabled? small-screen?] [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] - [numpad-button 0 step enabled?] + [numpad-row [1 2 3] step enabled? small-screen?] + [numpad-row [4 5 6] step enabled? small-screen?] + [numpad-row [7 8 9] step enabled? small-screen?] + [react/view (styles/numpad-row-container small-screen?) + [react/view (styles/numpad-empty-button small-screen?)] + [numpad-button 0 step enabled? small-screen?] [react/touchable-highlight {:on-press #(when enabled? (re-frame/dispatch [:hardwallet.ui/pin-numpad-delete-button-pressed step]))} - [react/view styles/numpad-delete-button + [react/view (styles/numpad-delete-button small-screen?) [vector-icons/icon :main-icons/backspace {:color colors/blue}]]]]]) (defn pin-indicator [pressed? status] @@ -60,18 +60,18 @@ nil)))))]) (defn puk-indicators [puk status] - [react/view + [react/view {:margin-top 28} (map-indexed (fn [i puk-group] ^{:key i} - [pin-indicators puk-group status {:margin-top 15}]) + [pin-indicators puk-group status {:margin-top 8}]) (partition 6 (concat puk (repeat (- 12 (count puk)) nil))))]) (defn pin-view [{:keys [pin title-label description-label step status error-label - retry-counter]}] + retry-counter small-screen?]}] (let [enabled? (not= status :verifying)] [react/scroll-view [react/view styles/pin-container @@ -83,24 +83,23 @@ [react/text {:style styles/create-pin-text :number-of-lines 2} (i18n/label description-label)]) - [react/view {:height 10} - (when retry-counter - [react/text {:style {:font-weight "700" - :color colors/red}} - (i18n/label :t/pin-retries-left {:number retry-counter})])] - [react/view {:height 22} + [react/view {:margin-top 40 + :height (if small-screen? 18 22)} (case status :verifying [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} + :error [react/view (styles/error-container small-screen?) + [react/text {:style (styles/error-text small-screen?)} (i18n/label error-label)]] - nil)] + (when retry-counter + [react/view {:margin-top (if (= step :puk) 24 8)} + [react/text {:style {:text-align :center}} + (i18n/label :t/pin-retries-left {:number retry-counter})]]))] (if (= step :puk) [puk-indicators pin status] [pin-indicators pin status nil]) - [numpad step enabled?]]]])) + [numpad step enabled? small-screen?]]]])) (def pin-retries 3) (def puk-retries 5) diff --git a/src/status_im/ui/screens/hardwallet/settings/subs.cljs b/src/status_im/ui/screens/hardwallet/settings/subs.cljs index 15730cb00e..e52e6ad093 100644 --- a/src/status_im/ui/screens/hardwallet/settings/subs.cljs +++ b/src/status_im/ui/screens/hardwallet/settings/subs.cljs @@ -29,6 +29,18 @@ (fn [db] (get-in db [:hardwallet :application-info :puk-retry-counter]))) +(re-frame/reg-sub + :hardwallet/retry-counter + :<- [:hardwallet/pin-retry-counter] + :<- [:hardwallet/puk-retry-counter] + (fn [[pin puk]] + (if (zero? pin) puk pin))) + +(re-frame/reg-sub + :hardwallet/puk-retry-counter + (fn [db] + (get-in db [:hardwallet :application-info :puk-retry-counter]))) + (re-frame/reg-sub :keycard-reset-card-disabled? (fn [db] diff --git a/src/status_im/ui/screens/keycard/onboarding/views.cljs b/src/status_im/ui/screens/keycard/onboarding/views.cljs index 71dcd30812..6d240fd3aa 100644 --- a/src/status_im/ui/screens/keycard/onboarding/views.cljs +++ b/src/status_im/ui/screens/keycard/onboarding/views.cljs @@ -238,7 +238,8 @@ enter-step [:hardwallet/pin-enter-step] status [:hardwallet/pin-status] error-label [:hardwallet/pin-error-label] - steps [:hardwallet-flow-steps]] + steps [:hardwallet-flow-steps] + small-screen? [:dimensions/small-screen?]] [react/view styles/container [toolbar/toolbar {:transparent? true @@ -256,22 +257,23 @@ :align-items :center} [react/view {:flex-direction :column :align-items :center} - [react/view {:margin-top 16} + [react/view {:margin-top (if small-screen? 4 16)} [react/text {:style {:typography :header :text-align :center}} (i18n/label (if (= :original enter-step) :t/intro-wizard-title4 :t/intro-wizard-title5))]] - [react/view {:margin-top 16 - :height 22} + [react/view {:margin-top (if small-screen? 8 16) + :height (if small-screen? 16 22)} (when (= :original enter-step) [react/text {:style {:color colors/gray}} (i18n/label :t/intro-wizard-text4)])]] [pin.views/pin-view - {:pin pin - :status status - :error-label error-label - :step enter-step}] + {:pin pin + :status status + :small-screen? small-screen? + :error-label error-label + :step enter-step}] [react/view {:align-items :center :flex-direction :column :justify-content :center diff --git a/src/status_im/ui/screens/keycard/recovery/views.cljs b/src/status_im/ui/screens/keycard/recovery/views.cljs index 597beec6fd..80e99cf5af 100644 --- a/src/status_im/ui/screens/keycard/recovery/views.cljs +++ b/src/status_im/ui/screens/keycard/recovery/views.cljs @@ -114,7 +114,9 @@ (defview pin [] (letsubs [pin [:hardwallet/pin] status [:hardwallet/pin-status] - error-label [:hardwallet/pin-error-label]] + error-label [:hardwallet/pin-error-label] + small-screen? [:dimensions/small-screen?] + retry-counter [:hardwallet/retry-counter]] [react/view styles/container [toolbar/toolbar {:transparent? true @@ -137,14 +139,17 @@ :text-align :center}} (i18n/label :t/enter-your-code)]]] [pin.views/pin-view - {:pin pin - :status status - :error-label error-label - :step :import-multiaccount}]]])) + {:pin pin + :retry-counter retry-counter + :small-screen? small-screen? + :status status + :error-label error-label + :step :import-multiaccount}]]])) (defview pair [] (letsubs [pair-code [:hardwallet-pair-code] error [:hardwallet-setup-error] + {:keys [free-pairing-slots]} [:hardwallet-application-info] width [:dimensions/window-width] ref (atom nil)] [react/view styles/container @@ -173,7 +178,13 @@ :align-items :center} [react/text {:style {:color colors/gray :text-align :center}} - (i18n/label :t/enter-pair-code-description)]]] + (i18n/label :t/enter-pair-code-description)]] + (when free-pairing-slots + [react/view {:align-items :center + :margin-top 20} + [react/text {:style {:text-align :center + :color (if (> 3 free-pairing-slots) colors/red colors/gray)}} + (i18n/label :t/keycard-free-pairing-slots {:n free-pairing-slots})]])] [react/view [text-input/text-input-with-label {:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %]) diff --git a/src/status_im/ui/screens/keycard/views.cljs b/src/status_im/ui/screens/keycard/views.cljs index bbe9d04424..e40308af34 100644 --- a/src/status_im/ui/screens/keycard/views.cljs +++ b/src/status_im/ui/screens/keycard/views.cljs @@ -365,7 +365,9 @@ status [:hardwallet/pin-status] error-label [:hardwallet/pin-error-label] multiple-multiaccounts? [:multiple-multiaccounts?] - {:keys [address name] :as account} [:multiaccounts/login]] + {:keys [address name] :as account} [:multiaccounts/login] + small-screen? [:dimensions/small-screen?] + retry-counter [:hardwallet/retry-counter]] [react/view styles/container [toolbar/toolbar {:transparent? true @@ -386,7 +388,7 @@ :flex-direction :column :justify-content :space-between :align-items :center - :margin-top 60} + :margin-top (if small-screen? 28 46)} [react/view {:flex-direction :column :flex 1 :justify-content :center @@ -396,17 +398,17 @@ [react/view {:justify-content :center :align-items :center :flex-direction :row} - [react/view {:width 69 - :height 69 + [react/view {:width (if small-screen? 50 69) + :height (if small-screen? 50 69) :justify-content :center :align-items :center} ;;TODO this should be done in a subscription - [photos/photo (multiaccounts/displayed-photo account) {:size 61}] + [photos/photo (multiaccounts/displayed-photo account) {:size (if small-screen? 45 61)}] [react/view {:justify-content :center :align-items :center - :width 24 - :height 24 - :border-radius 24 + :width (if small-screen? 18 24) + :height (if small-screen? 18 24) + :border-radius (if small-screen? 18 24) :position :absolute :right 0 :bottom 0 @@ -414,10 +416,10 @@ :border-width 1 :border-color colors/black-transparent} [react/image {:source (resources/get-image :keycard-key) - :style {:width 8 - :height 14}}]]]] + :style {:width (if small-screen? 6 8) + :height (if small-screen? 11 14)}}]]]] [react/text {:style {:text-align :center - :margin-top 12 + :margin-top (if small-screen? 8 12) :color colors/black :font-weight "500"} :number-of-lines 1 @@ -431,11 +433,13 @@ :ellipsize-mode :middle} (utils.core/truncate-str address 14 true)]]] [pin.views/pin-view - {:pin pin - :status status - :error-label error-label - :step enter-step}] - [react/view {:margin-bottom 32} + {:pin pin + :retry-counter retry-counter + :small-screen? small-screen? + :status status + :error-label error-label + :step enter-step}] + [react/view {:margin-bottom (if small-screen? 25 32)} [react/touchable-highlight {:on-press #(re-frame/dispatch [:keycard.login.ui/recover-key-pressed])} [react/text {:style {:color colors/blue}} diff --git a/src/status_im/ui/screens/signing/styles.cljs b/src/status_im/ui/screens/signing/styles.cljs index bc9d7058d4..08e52e6b18 100644 --- a/src/status_im/ui/screens/signing/styles.cljs +++ b/src/status_im/ui/screens/signing/styles.cljs @@ -40,3 +40,22 @@ :border-top-right-radius 16 :border-top-left-radius 16 :padding-bottom 40}) + +(defn sign-with-keycard-button [disabled?] + {:background-color colors/black-light + :padding-top 2 + :border-radius 8 + :width 182 + :height 44 + :flex-direction :row + :justify-content :center + :align-items :center + :opacity (if disabled? 0.1 1) + :padding-horizontal 12}) + +(defn sign-with-keycard-button-text [disabled?] + {:padding-right 2 + :padding-left 16 + :color (if disabled? colors/black colors/white) + :padding-horizontal 16 + :padding-vertical 10}) diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index feeb361dac..cd756d9614 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -111,14 +111,20 @@ [react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]]]]) (views/defview keycard-pin-view [] - (views/letsubs [pin [:hardwallet/pin]] + (views/letsubs [pin [:hardwallet/pin] + small-screen? [:dimensions/small-screen?] + error-label [:hardwallet/pin-error-label] + enter-step [:hardwallet/pin-enter-step] + status [:hardwallet/pin-status] + retry-counter [:hardwallet/retry-counter]] [react/view [pin.views/pin-view {:pin pin - :retry-counter nil - :step :sign - :status nil - :error-label nil}]])) + :retry-counter retry-counter + :step enter-step + :small-screen? small-screen? + :status status + :error-label error-label}]])) (defn- keycard-connect-view [] [react/view {:padding-vertical 20 @@ -145,11 +151,19 @@ :color colors/gray}} (i18n/label :t/processing)]]) -(defn- sign-with-keycard-button +(defn sign-with-keycard-button [amount-error gas-error] - [button/button {:on-press #(re-frame/dispatch [:signing.ui/sign-with-keycard-pressed]) - :disabled? (or amount-error gas-error) - :label :t/sign-with-keycard}]) + (let [disabled? (or amount-error gas-error)] + [react/touchable-highlight {:on-press #(when-not disabled? + (re-frame/dispatch [:signing.ui/sign-with-keycard-pressed]))} + [react/view (styles/sign-with-keycard-button disabled?) + [react/text {:style (styles/sign-with-keycard-button-text disabled?)} + (i18n/label :t/sign-with)] + [react/view {:padding-right 16} + [react/image {:source (resources/get-image :keycard-logo) + :style {:width 64 + :margin-bottom 7 + :height 26}}]]]])) (defn- signing-phrase-view [phrase] [react/view {:align-items :center} @@ -158,7 +172,7 @@ (defn- keycard-view [{:keys [keycard-step]} phrase] - [react/view {:height 500} + [react/view {:height 520} [signing-phrase-view phrase] (case keycard-step :pin [keycard-pin-view] diff --git a/translations/en.json b/translations/en.json index c28173eb7a..f29225cf90 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1114,9 +1114,10 @@ "lock-app-with": "Lock app with", "grant-face-id-permissions": "To grant the required Face ID permission, please go to your system settings and make sure that Status > Face ID is selected", "request-feature": "Request a feature", - "select-account-dapp": "Select the account you wish to use with Dapps", - "apply": "Apply", - "on-status-tree": "On Status tree", - "derivation-path": "Derivation path", - "storage": "Storage" + "select-account-dapp": "Select the account you wish to use with Dapps", + "apply": "Apply", + "on-status-tree": "On Status tree", + "derivation-path": "Derivation path", + "storage": "Storage", + "keycard-free-pairing-slots": "Keycard has {{n}} free pairing slots" }