[#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 <dmitry.novot@gmail.com>
This commit is contained in:
Dmitry Novotochinov 2019-09-26 19:49:26 +03:00
parent 2bb7c70216
commit 5e7785d432
No known key found for this signature in database
GPG Key ID: 43D1DAF5AD39C927
11 changed files with 202 additions and 121 deletions

View File

@ -47,14 +47,14 @@
(defn get-pairing (defn get-pairing
([db] ([db]
(get-pairing db (get-in db [:hardwallet :application-info :instance-uid]))) (get-pairing db (get-in db [:hardwallet :application-info :key-uid])))
([db instance-uid] ([db key-uid]
(or (or
(get-in db [:multiaccount :keycard-pairing]) (get-in db [:multiaccount :keycard-pairing])
(get-in db [:hardwallet :secrets :pairing]) (get-in db [:hardwallet :secrets :pairing])
(when instance-uid (when key-uid
(:keycard-pairing (: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 (fx/defn listen-to-hardware-back-button
[{:keys [db]}] [{:keys [db]}]
@ -439,7 +439,7 @@
(let [app-info (get-in db [:hardwallet :application-info]) (let [app-info (get-in db [:hardwallet :application-info])
flow (get-in db [:hardwallet :flow]) flow (get-in db [:hardwallet :flow])
{:keys [instance-uid key-uid]} app-info {: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) app-info' (if pairing (assoc app-info :paired? true) app-info)
card-state (get-card-state app-info')] card-state (get-card-state app-info')]
(fx/merge cofx (fx/merge cofx
@ -626,6 +626,9 @@
(fx/merge cofx (fx/merge cofx
{:db (-> db {:db (-> db
(assoc-in [:hardwallet :pin :enter-step] enter-step) (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] info')
(assoc-in [:hardwallet :application-info :applet-installed?] true) (assoc-in [:hardwallet :application-info :applet-installed?] true)
(assoc-in [:hardwallet :application-info-error] nil))} (assoc-in [:hardwallet :application-info-error] nil))}
@ -1057,12 +1060,13 @@
(let [pairing (get-pairing db)] (let [pairing (get-pairing db)]
(fx/merge cofx (fx/merge cofx
{:hardwallet/get-application-info {:pairing pairing} {:hardwallet/get-application-info {:pairing pairing}
:db (-> db :db (-> db
(update-in [:hardwallet :pin] merge {:status nil (update-in [:hardwallet :pin] merge {:status nil
:enter-step :original :enter-step :original
:current [0 0 0 0 0 0] :current [0 0 0 0 0 0]
:puk [] :confirmation []
:error-label nil}))} :puk []
:error-label nil}))}
(navigation/navigate-to-cofx :enter-pin-settings nil)))) (navigation/navigate-to-cofx :enter-pin-settings nil))))
(defn on-unblock-pin-error (defn on-unblock-pin-error
@ -1070,16 +1074,16 @@
(let [pairing (get-pairing db)] (let [pairing (get-pairing db)]
(log/debug "[hardwallet] unblock pin error" error) (log/debug "[hardwallet] unblock pin error" error)
{:hardwallet/get-application-info {:pairing pairing} {:hardwallet/get-application-info {:pairing pairing}
:db (update-in db [:hardwallet :pin] merge {:status :error :db (update-in db [:hardwallet :pin] merge {:status :error
:error-label :t/puk-mismatch :error-label :t/puk-mismatch
:enter-step :puk :enter-step :puk
:puk []})})) :puk []})}))
(fx/defn get-application-info (fx/defn get-application-info
[{:keys [db]} pairing on-card-read] [{: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 pairing' (or pairing
(when instance-uid (when key-uid
(get-pairing db instance-uid)))] (get-pairing db key-uid)))]
{:hardwallet/get-application-info {:pairing pairing' {:hardwallet/get-application-info {:pairing pairing'
:on-success on-card-read}})) :on-success on-card-read}}))
@ -1140,15 +1144,22 @@
(fx/defn on-change-pin-success (fx/defn on-change-pin-success
[{:keys [db] :as cofx}] [{: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 (fx/merge cofx
{:db (-> db {:db (-> db
(assoc-in [:hardwallet :on-card-connected] nil) (assoc-in [:hardwallet :on-card-connected] nil)
(assoc-in [:hardwallet :pin] {:status nil (assoc-in [:hardwallet :pin] {:status nil
:error-label nil})) :login pin
:confirmation []
:error-label nil}))
:utils/show-popup {:title "" :utils/show-popup {:title ""
:content (i18n/label :t/pin-changed)}} :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 (fx/defn on-change-pin-error
[{:keys [db] :as cofx} error] [{:keys [db] :as cofx} error]
@ -1228,9 +1239,9 @@
(defn unblock-pin (defn unblock-pin
[{:keys [db] :as cofx}] [{:keys [db] :as cofx}]
(let [puk (vector->string (get-in db [:hardwallet :pin :puk])) (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?]) card-connected? (get-in db [:hardwallet :card-connected?])
pairing (get-pairing db instance-uid)] pairing (get-pairing db key-uid)]
(if card-connected? (if card-connected?
{:db (assoc-in db [:hardwallet :pin :status] :verifying) {:db (assoc-in db [:hardwallet :pin :status] :verifying)
:hardwallet/unblock-pin {:puk puk :hardwallet/unblock-pin {:puk puk
@ -1322,7 +1333,8 @@
[{:keys [db] :as cofx}] [{:keys [db] :as cofx}]
(let [{:keys [pairing]} (get-in db [:hardwallet :secrets]) (let [{:keys [pairing]} (get-in db [:hardwallet :secrets])
instance-uid (get-in db [:hardwallet :application-info :instance-uid]) 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]))] pin (vector->string (get-in db [:hardwallet :pin :import-multiaccount]))]
(fx/merge cofx (fx/merge cofx
{:db (-> db {:db (-> db
@ -1426,13 +1438,14 @@
[{:keys [db] :as cofx} _] [{:keys [db] :as cofx} _]
(log/debug "[hardwallet] card connected") (log/debug "[hardwallet] card connected")
(let [instance-uid (get-in db [:hardwallet :application-info :instance-uid]) (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)) accounts-screen? (= :multiaccounts (:view-id db))
should-read-instance-uid? (nil? instance-uid) should-read-instance-uid? (nil? instance-uid)
on-card-connected (get-in db [:hardwallet :on-card-connected]) on-card-connected (get-in db [:hardwallet :on-card-connected])
on-card-read (cond on-card-read (cond
should-read-instance-uid? :hardwallet/get-application-info should-read-instance-uid? :hardwallet/get-application-info
:else (get-in db [:hardwallet :on-card-read])) :else (get-in db [:hardwallet :on-card-read]))
pairing (get-pairing db instance-uid)] pairing (get-pairing db key-uid)]
(fx/merge cofx (fx/merge cofx
{:db (-> db {:db (-> db
(assoc-in [:hardwallet :card-connected?] true) (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) (let [{:keys [address whisper-address encryption-public-key whisper-private-key] :as account-data} (js->clj data :keywordize-keys true)
address (str "0x" address) address (str "0x" address)
{:keys [photo-path name]} (get-in db [:multiaccounts/multiaccounts 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})] multiaccount-data (types/clj->json {:name name :address address :photo-path photo-path})]
(fx/merge cofx (fx/merge cofx
{:db (-> db {:db (-> db
@ -1762,7 +1775,7 @@
:address address :address address
:photo-path photo-path :photo-path photo-path
:name name)) :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 :hardwallet/login-with-keycard {:multiaccount-data multiaccount-data
:password encryption-public-key :password encryption-public-key
:chat-key whisper-private-key}}))) :chat-key whisper-private-key}})))
@ -1771,7 +1784,7 @@
[{:keys [db] :as cofx} error] [{:keys [db] :as cofx} error]
(log/debug "[hardwallet] get keys error: " error) (log/debug "[hardwallet] get keys error: " error)
(let [tag-was-lost? (= "Tag was lost." (: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])] flow (get-in db [:hardwallet :flow])]
(if tag-was-lost? (if tag-was-lost?
(fx/merge cofx (fx/merge cofx
@ -1779,7 +1792,7 @@
(navigation/navigate-to-cofx :keycard-connection-lost nil)) (navigation/navigate-to-cofx :keycard-connection-lost nil))
(if (re-matches pin-mismatch-error (:error error)) (if (re-matches pin-mismatch-error (:error error))
(fx/merge cofx (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 :db (update-in db [:hardwallet :pin] merge {:status :error
:login [] :login []
:import-multiaccount [] :import-multiaccount []

View File

@ -334,6 +334,12 @@
:<- [:dimensions/window] :<- [:dimensions/window]
:height) :height)
(re-frame/reg-sub
:dimensions/small-screen?
:<- [:dimensions/window-height]
(fn [height]
(< height 550)))
(re-frame/reg-sub (re-frame/reg-sub
:get-screen-params :get-screen-params
:<- [:screen-params] :<- [:screen-params]

View File

@ -9,16 +9,16 @@
(styles/def pin-container (styles/def pin-container
{:flex 1 {:flex 1
:flex-direction :column :flex-direction :column
:justify-content :space-between :justify-content :space-between})
:android {:margin-top 10}
:ios {:margin-top 10}})
(styles/def error-container (styles/defn error-container [small-screen?]
{:height 22}) {: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 {:color colors/red
:font-size 15 :font-size (if small-screen? 12 15)
:text-align :center}) :text-align :center})
(defn center-container [title] (defn center-container [title]
@ -59,29 +59,29 @@
{:margin-top 26}) {:margin-top 26})
(def numpad-container (def numpad-container
{:margin-top 20}) {:margin-top 18})
(def numpad-row-container (defn numpad-row-container [small-screen?]
{:flex-direction :row {:flex-direction :row
:justify-content :center :justify-content :center
:align-items :center :align-items :center
:margin-vertical 12}) :margin-vertical (if small-screen? 4 10)})
(def numpad-button (defn numpad-button [small-screen?]
{:width 64 {:width (if small-screen? 50 64)
:margin-horizontal 16 :margin-horizontal (if small-screen? 10 14)
:height 64 :height (if small-screen? 50 64)
:align-items :center :align-items :center
:justify-content :center :justify-content :center
:flex-direction :row :flex-direction :row
:border-radius 50 :border-radius 50
:background-color colors/blue-light}) :background-color colors/blue-light})
(def numpad-delete-button (defn numpad-delete-button [small-screen?]
(assoc numpad-button :background-color colors/white)) (assoc (numpad-button small-screen?) :background-color colors/white))
(def numpad-empty-button (defn numpad-empty-button [small-screen?]
(assoc numpad-button :background-color colors/white (assoc (numpad-button small-screen?) :background-color colors/white
:border-color colors/white)) :border-color colors/white))
(def numpad-button-text (def numpad-button-text

View File

@ -12,32 +12,32 @@
[status-im.ui.components.toolbar.actions :as actions] [status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.actions :as toolbar.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 [react/touchable-highlight
{:on-press #(when enabled? {:on-press #(when enabled?
(re-frame/dispatch [:hardwallet.ui/pin-numpad-button-pressed n step]))} (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} [react/text {:style styles/numpad-button-text}
n]]]) n]]])
(defn numpad-row [[a b c] step enabled?] (defn numpad-row [[a b c] step enabled? small-screen?]
[react/view styles/numpad-row-container [react/view (styles/numpad-row-container small-screen?)
[numpad-button a step enabled?] [numpad-button a step enabled? small-screen?]
[numpad-button b step enabled?] [numpad-button b step enabled? small-screen?]
[numpad-button c step enabled?]]) [numpad-button c step enabled? small-screen?]])
(defn numpad [step enabled?] (defn numpad [step enabled? small-screen?]
[react/view styles/numpad-container [react/view styles/numpad-container
[numpad-row [1 2 3] step enabled?] [numpad-row [1 2 3] step enabled? small-screen?]
[numpad-row [4 5 6] step enabled?] [numpad-row [4 5 6] step enabled? small-screen?]
[numpad-row [7 8 9] step enabled?] [numpad-row [7 8 9] step enabled? small-screen?]
[react/view styles/numpad-row-container [react/view (styles/numpad-row-container small-screen?)
[react/view styles/numpad-empty-button] [react/view (styles/numpad-empty-button small-screen?)]
[numpad-button 0 step enabled?] [numpad-button 0 step enabled? small-screen?]
[react/touchable-highlight [react/touchable-highlight
{:on-press #(when enabled? {:on-press #(when enabled?
(re-frame/dispatch [:hardwallet.ui/pin-numpad-delete-button-pressed step]))} (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}]]]]]) [vector-icons/icon :main-icons/backspace {:color colors/blue}]]]]])
(defn pin-indicator [pressed? status] (defn pin-indicator [pressed? status]
@ -60,18 +60,18 @@
nil)))))]) nil)))))])
(defn puk-indicators [puk status] (defn puk-indicators [puk status]
[react/view [react/view {:margin-top 28}
(map-indexed (map-indexed
(fn [i puk-group] (fn [i puk-group]
^{:key i} ^{:key i}
[pin-indicators puk-group status {:margin-top 15}]) [pin-indicators puk-group status {:margin-top 8}])
(partition 6 (partition 6
(concat puk (concat puk
(repeat (- 12 (count puk)) (repeat (- 12 (count puk))
nil))))]) nil))))])
(defn pin-view [{:keys [pin title-label description-label step status error-label (defn pin-view [{:keys [pin title-label description-label step status error-label
retry-counter]}] retry-counter small-screen?]}]
(let [enabled? (not= status :verifying)] (let [enabled? (not= status :verifying)]
[react/scroll-view [react/scroll-view
[react/view styles/pin-container [react/view styles/pin-container
@ -83,24 +83,23 @@
[react/text {:style styles/create-pin-text [react/text {:style styles/create-pin-text
:number-of-lines 2} :number-of-lines 2}
(i18n/label description-label)]) (i18n/label description-label)])
[react/view {:height 10} [react/view {:margin-top 40
(when retry-counter :height (if small-screen? 18 22)}
[react/text {:style {:font-weight "700"
:color colors/red}}
(i18n/label :t/pin-retries-left {:number retry-counter})])]
[react/view {:height 22}
(case status (case status
:verifying [react/view styles/waiting-indicator-container :verifying [react/view styles/waiting-indicator-container
[react/activity-indicator {:animating true [react/activity-indicator {:animating true
:size :small}]] :size :small}]]
:error [react/view styles/error-container :error [react/view (styles/error-container small-screen?)
[react/text {:style styles/error-text} [react/text {:style (styles/error-text small-screen?)}
(i18n/label error-label)]] (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) (if (= step :puk)
[puk-indicators pin status] [puk-indicators pin status]
[pin-indicators pin status nil]) [pin-indicators pin status nil])
[numpad step enabled?]]]])) [numpad step enabled? small-screen?]]]]))
(def pin-retries 3) (def pin-retries 3)
(def puk-retries 5) (def puk-retries 5)

View File

@ -29,6 +29,18 @@
(fn [db] (fn [db]
(get-in db [:hardwallet :application-info :puk-retry-counter]))) (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 (re-frame/reg-sub
:keycard-reset-card-disabled? :keycard-reset-card-disabled?
(fn [db] (fn [db]

View File

@ -238,7 +238,8 @@
enter-step [:hardwallet/pin-enter-step] enter-step [:hardwallet/pin-enter-step]
status [:hardwallet/pin-status] status [:hardwallet/pin-status]
error-label [:hardwallet/pin-error-label] error-label [:hardwallet/pin-error-label]
steps [:hardwallet-flow-steps]] steps [:hardwallet-flow-steps]
small-screen? [:dimensions/small-screen?]]
[react/view styles/container [react/view styles/container
[toolbar/toolbar [toolbar/toolbar
{:transparent? true {:transparent? true
@ -256,22 +257,23 @@
:align-items :center} :align-items :center}
[react/view {:flex-direction :column [react/view {:flex-direction :column
:align-items :center} :align-items :center}
[react/view {:margin-top 16} [react/view {:margin-top (if small-screen? 4 16)}
[react/text {:style {:typography :header [react/text {:style {:typography :header
:text-align :center}} :text-align :center}}
(i18n/label (if (= :original enter-step) (i18n/label (if (= :original enter-step)
:t/intro-wizard-title4 :t/intro-wizard-title4
:t/intro-wizard-title5))]] :t/intro-wizard-title5))]]
[react/view {:margin-top 16 [react/view {:margin-top (if small-screen? 8 16)
:height 22} :height (if small-screen? 16 22)}
(when (= :original enter-step) (when (= :original enter-step)
[react/text {:style {:color colors/gray}} [react/text {:style {:color colors/gray}}
(i18n/label :t/intro-wizard-text4)])]] (i18n/label :t/intro-wizard-text4)])]]
[pin.views/pin-view [pin.views/pin-view
{:pin pin {:pin pin
:status status :status status
:error-label error-label :small-screen? small-screen?
:step enter-step}] :error-label error-label
:step enter-step}]
[react/view {:align-items :center [react/view {:align-items :center
:flex-direction :column :flex-direction :column
:justify-content :center :justify-content :center

View File

@ -114,7 +114,9 @@
(defview pin [] (defview pin []
(letsubs [pin [:hardwallet/pin] (letsubs [pin [:hardwallet/pin]
status [:hardwallet/pin-status] 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 [react/view styles/container
[toolbar/toolbar [toolbar/toolbar
{:transparent? true {:transparent? true
@ -137,14 +139,17 @@
:text-align :center}} :text-align :center}}
(i18n/label :t/enter-your-code)]]] (i18n/label :t/enter-your-code)]]]
[pin.views/pin-view [pin.views/pin-view
{:pin pin {:pin pin
:status status :retry-counter retry-counter
:error-label error-label :small-screen? small-screen?
:step :import-multiaccount}]]])) :status status
:error-label error-label
:step :import-multiaccount}]]]))
(defview pair [] (defview pair []
(letsubs [pair-code [:hardwallet-pair-code] (letsubs [pair-code [:hardwallet-pair-code]
error [:hardwallet-setup-error] error [:hardwallet-setup-error]
{:keys [free-pairing-slots]} [:hardwallet-application-info]
width [:dimensions/window-width] width [:dimensions/window-width]
ref (atom nil)] ref (atom nil)]
[react/view styles/container [react/view styles/container
@ -173,7 +178,13 @@
:align-items :center} :align-items :center}
[react/text {:style {:color colors/gray [react/text {:style {:color colors/gray
:text-align :center}} :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 [react/view
[text-input/text-input-with-label [text-input/text-input-with-label
{:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %]) {:on-change-text #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-changed %])

View File

@ -365,7 +365,9 @@
status [:hardwallet/pin-status] status [:hardwallet/pin-status]
error-label [:hardwallet/pin-error-label] error-label [:hardwallet/pin-error-label]
multiple-multiaccounts? [:multiple-multiaccounts?] 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 [react/view styles/container
[toolbar/toolbar [toolbar/toolbar
{:transparent? true {:transparent? true
@ -386,7 +388,7 @@
:flex-direction :column :flex-direction :column
:justify-content :space-between :justify-content :space-between
:align-items :center :align-items :center
:margin-top 60} :margin-top (if small-screen? 28 46)}
[react/view {:flex-direction :column [react/view {:flex-direction :column
:flex 1 :flex 1
:justify-content :center :justify-content :center
@ -396,17 +398,17 @@
[react/view {:justify-content :center [react/view {:justify-content :center
:align-items :center :align-items :center
:flex-direction :row} :flex-direction :row}
[react/view {:width 69 [react/view {:width (if small-screen? 50 69)
:height 69 :height (if small-screen? 50 69)
:justify-content :center :justify-content :center
:align-items :center} :align-items :center}
;;TODO this should be done in a subscription ;;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 [react/view {:justify-content :center
:align-items :center :align-items :center
:width 24 :width (if small-screen? 18 24)
:height 24 :height (if small-screen? 18 24)
:border-radius 24 :border-radius (if small-screen? 18 24)
:position :absolute :position :absolute
:right 0 :right 0
:bottom 0 :bottom 0
@ -414,10 +416,10 @@
:border-width 1 :border-width 1
:border-color colors/black-transparent} :border-color colors/black-transparent}
[react/image {:source (resources/get-image :keycard-key) [react/image {:source (resources/get-image :keycard-key)
:style {:width 8 :style {:width (if small-screen? 6 8)
:height 14}}]]]] :height (if small-screen? 11 14)}}]]]]
[react/text {:style {:text-align :center [react/text {:style {:text-align :center
:margin-top 12 :margin-top (if small-screen? 8 12)
:color colors/black :color colors/black
:font-weight "500"} :font-weight "500"}
:number-of-lines 1 :number-of-lines 1
@ -431,11 +433,13 @@
:ellipsize-mode :middle} :ellipsize-mode :middle}
(utils.core/truncate-str address 14 true)]]] (utils.core/truncate-str address 14 true)]]]
[pin.views/pin-view [pin.views/pin-view
{:pin pin {:pin pin
:status status :retry-counter retry-counter
:error-label error-label :small-screen? small-screen?
:step enter-step}] :status status
[react/view {:margin-bottom 32} :error-label error-label
:step enter-step}]
[react/view {:margin-bottom (if small-screen? 25 32)}
[react/touchable-highlight [react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.login.ui/recover-key-pressed])} {:on-press #(re-frame/dispatch [:keycard.login.ui/recover-key-pressed])}
[react/text {:style {:color colors/blue}} [react/text {:style {:color colors/blue}}

View File

@ -40,3 +40,22 @@
:border-top-right-radius 16 :border-top-right-radius 16
:border-top-left-radius 16 :border-top-left-radius 16
:padding-bottom 40}) :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})

View File

@ -111,14 +111,20 @@
[react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]]]]) [react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]]]])
(views/defview keycard-pin-view [] (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 [react/view
[pin.views/pin-view [pin.views/pin-view
{:pin pin {:pin pin
:retry-counter nil :retry-counter retry-counter
:step :sign :step enter-step
:status nil :small-screen? small-screen?
:error-label nil}]])) :status status
:error-label error-label}]]))
(defn- keycard-connect-view [] (defn- keycard-connect-view []
[react/view {:padding-vertical 20 [react/view {:padding-vertical 20
@ -145,11 +151,19 @@
:color colors/gray}} :color colors/gray}}
(i18n/label :t/processing)]]) (i18n/label :t/processing)]])
(defn- sign-with-keycard-button (defn sign-with-keycard-button
[amount-error gas-error] [amount-error gas-error]
[button/button {:on-press #(re-frame/dispatch [:signing.ui/sign-with-keycard-pressed]) (let [disabled? (or amount-error gas-error)]
:disabled? (or amount-error gas-error) [react/touchable-highlight {:on-press #(when-not disabled?
:label :t/sign-with-keycard}]) (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] (defn- signing-phrase-view [phrase]
[react/view {:align-items :center} [react/view {:align-items :center}
@ -158,7 +172,7 @@
(defn- keycard-view (defn- keycard-view
[{:keys [keycard-step]} phrase] [{:keys [keycard-step]} phrase]
[react/view {:height 500} [react/view {:height 520}
[signing-phrase-view phrase] [signing-phrase-view phrase]
(case keycard-step (case keycard-step
:pin [keycard-pin-view] :pin [keycard-pin-view]

View File

@ -1114,9 +1114,10 @@
"lock-app-with": "Lock app with", "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", "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", "request-feature": "Request a feature",
"select-account-dapp": "Select the account you wish to use with Dapps", "select-account-dapp": "Select the account you wish to use with Dapps",
"apply": "Apply", "apply": "Apply",
"on-status-tree": "On Status tree", "on-status-tree": "On Status tree",
"derivation-path": "Derivation path", "derivation-path": "Derivation path",
"storage": "Storage" "storage": "Storage",
"keycard-free-pairing-slots": "Keycard has {{n}} free pairing slots"
} }