[#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
([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 []

View File

@ -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]

View File

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

View File

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

View File

@ -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]

View File

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

View File

@ -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 %])

View File

@ -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}}

View File

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

View File

@ -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]

View File

@ -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"
}