From d50f6ca21ebdafd95749c7ca31ee6477b33b5c2b Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Wed, 15 Apr 2020 10:15:49 +0300 Subject: [PATCH] Show redeem text for Keycard redeem txs Signed-off-by: Vitaliy Vlasov --- src/status_im/browser/core.cljs | 3 +- src/status_im/hardwallet/common.cljs | 5 +- src/status_im/hardwallet/sign.cljs | 23 ++-- src/status_im/subs.cljs | 32 ++--- .../screens/keycard/keycard_interaction.cljs | 20 +++- src/status_im/ui/screens/signing/views.cljs | 110 +++++++++++------- translations/en.json | 3 + 7 files changed, 115 insertions(+), 81 deletions(-) diff --git a/src/status_im/browser/core.cljs b/src/status_im/browser/core.cljs index 2fd48c5cf7..bd397d39ef 100644 --- a/src/status_im/browser/core.cljs +++ b/src/status_im/browser/core.cljs @@ -325,7 +325,8 @@ (let [message? (constants/web3-sign-message? method) dapps-address (get-in cofx [:db :multiaccount :dapps-address])] (if (or message? (= constants/web3-send-transaction method)) - (let [[address data] (cond (= method constants/web3-keycard-sign-typed-data) + (let [[address data] (cond (and (= method constants/web3-keycard-sign-typed-data) + (not (vector? params))) ;; We don't use signer argument for keycard sign-typed-data ["0x0" params] message? (normalize-sign-message-params params) diff --git a/src/status_im/hardwallet/common.cljs b/src/status_im/hardwallet/common.cljs index 9e674d659a..d546bc2082 100644 --- a/src/status_im/hardwallet/common.cljs +++ b/src/status_im/hardwallet/common.cljs @@ -159,11 +159,12 @@ (assoc-in [:hardwallet :on-card-read] nil) (assoc-in [:hardwallet :last-on-card-read] nil))}) -(defn keycard-sheet-content [on-cancel connected?] +(defn keycard-sheet-content [on-cancel connected? params] (fn [] (keycard-sheet/connect-keycard {:on-cancel #(re-frame/dispatch on-cancel) :connected? connected? + :params params :on-connect ::on-card-connected :on-disconnect ::on-card-disconnected}))) @@ -185,7 +186,7 @@ :backdrop-dismiss? false :disable-drag? true :back-button-cancel false - :content (keycard-sheet-content on-cancel connected?)}}) + :content (keycard-sheet-content on-cancel connected? nil)}}) (when on-card-read (set-on-card-read on-card-read)) (set-on-card-connected on-card-connected) diff --git a/src/status_im/hardwallet/sign.cljs b/src/status_im/hardwallet/sign.cljs index 3b1ebae78e..f8f5ccad90 100644 --- a/src/status_im/hardwallet/sign.cljs +++ b/src/status_im/hardwallet/sign.cljs @@ -3,7 +3,6 @@ [re-frame.core :as re-frame] [status-im.ethereum.core :as ethereum] [status-im.ethereum.json-rpc :as json-rpc] - [status-im.hardwallet.card :as card] [status-im.utils.fx :as fx] [status-im.utils.money :as money] [status-im.utils.types :as types] @@ -85,27 +84,19 @@ (common/get-application-info (common/get-pairing db) nil) (common/hide-connection-sheet))) -(def sign-typed-data-listener (atom nil)) - (fx/defn sign-typed-data {:events [:hardwallet/sign-typed-data]} [{:keys [db] :as cofx}] (let [card-connected? (get-in db [:hardwallet :card-connected?]) hash (get-in db [:hardwallet :hash])] (if card-connected? - (do - (when @sign-typed-data-listener - (card/remove-event-listener @sign-typed-data-listener)) - {:db (-> db - (assoc-in [:hardwallet :card-read-in-progress?] true) - (assoc-in [:signing/sign :keycard-step] :signing)) - :hardwallet/sign-typed-data {:hash (ethereum/naked-address hash)}}) - (do - (reset! sign-typed-data-listener - (card/on-card-connected #(re-frame/dispatch [:hardwallet/sign-typed-data]))) - (fx/merge cofx - (common/set-on-card-connected :hardwallet/sign-typed-data) - {:db (assoc-in db [:signing/sign :keycard-step] :signing)}))))) + {:db (-> db + (assoc-in [:hardwallet :card-read-in-progress?] true) + (assoc-in [:signing/sign :keycard-step] :signing)) + :hardwallet/sign-typed-data {:hash (ethereum/naked-address hash)}} + (fx/merge cofx + (common/set-on-card-connected :hardwallet/sign-typed-data) + {:db (assoc-in db [:signing/sign :keycard-step] :signing)})))) (fx/defn fetch-currency-symbol-on-success {:events [:hardwallet/fetch-currency-symbol-on-success]} diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 568aaf1ff8..2bbca38ba0 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -169,6 +169,7 @@ (reg-root-key-sub :ens/names :ens/names) ;;signing +(reg-root-key-sub :signing/sign :signing/sign) (reg-root-key-sub :signing/tx :signing/tx) (reg-root-key-sub :signing/edit-fee :signing/edit-fee) @@ -2030,19 +2031,24 @@ signing-phrase)) (re-frame/reg-sub - :signing/sign - (fn [db] - (let [sign (:signing/sign db)] - (if (= :pinless (:type sign)) - (let [message (get-in sign [:formatted-data :message])] - (if (and (:amount message) (:currency message)) - (assoc sign :fiat-amount - (money/fiat-amount-value (:amount message) - (:currency message) - :USD (:prices db)) - :fiat-currency "USD") - sign)) - sign)))) + :signing/sign-message + :<- [:signing/sign] + :<- [:multiaccount/accounts] + :<- [:prices] + (fn [[sign wallet-accounts prices]] + (if (= :pinless (:type sign)) + (let [message (get-in sign [:formatted-data :message]) + wallet-acc (some #(when (= (:address %) (:receiver message)) %) wallet-accounts)] + (cond-> sign + (and (:amount message) (:currency message)) + (assoc :fiat-amount + (money/fiat-amount-value (:amount message) + (:currency message) + :USD prices) + :fiat-currency "USD") + (and (:receiver message) wallet-acc) + (assoc :account wallet-acc))) + sign))) (defn- too-precise-amount? "Checks if number has any extra digit beyond the allowed number of decimals. diff --git a/src/status_im/ui/screens/keycard/keycard_interaction.cljs b/src/status_im/ui/screens/keycard/keycard_interaction.cljs index a48a02d21a..9be11ad9ac 100644 --- a/src/status_im/ui/screens/keycard/keycard_interaction.cljs +++ b/src/status_im/ui/screens/keycard/keycard_interaction.cljs @@ -26,8 +26,9 @@ (defn card-sync-flow [] (let [state (reagent/atom nil)] - (fn [{:keys [on-card-connected connected? on-card-disconnected]}] - (let [translation (get state->translations @state)] + (fn [{:keys [on-card-connected connected? on-card-disconnected params]}] + (let [translation (or (get-in params [:state-translations @state]) + (get state->translations @state))] [react/view {:style styles/container-style} [react/view {:height 200 :margin-bottom 20} @@ -40,7 +41,9 @@ {:title (i18n/label (:title translation)) :description (i18n/label (:description translation))}])])))) -(defn connect-keycard [{:keys [on-connect on-cancel connected? on-disconnect]}] +(defn connect-keycard [{:keys [on-connect on-cancel + connected? on-disconnect + params]}] [react/view {:style {:flex 1 :align-items :center :justify-content :center}} @@ -55,10 +58,19 @@ :color colors/blue :text-align :center}} (i18n/label :t/cancel)]]) + (when (:title params) + [react/view {:style {:align-self :flex-start :padding-left 16 :margin-bottom 24 :position :absolute :top 0 :left 0}} + [react/text {:style {:font-size (if (:small-screen? params) 15 17) :font-weight "700"}} + (:title params)]]) + (when (:header params) + [(:header params)]) (if @(re-frame/subscribe [:hardwallet/nfc-enabled?]) [card-sync-flow {:connected? connected? + :params (select-keys params [:state-translations]) :on-card-disconnected #(re-frame/dispatch [on-disconnect]) :on-card-connected #(re-frame/dispatch [on-connect])}] - [turn-nfc/turn-nfc-on])]) + [turn-nfc/turn-nfc-on]) + (when (:footer params) + [(:footer params)])]) diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index f1715df52b..49031bdf59 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -9,6 +9,8 @@ [status-im.ui.components.copyable-text :as copyable-text] [status-im.wallet.utils :as wallet.utils] [status-im.ui.components.list.views :as list] + [status-im.hardwallet.common :as hardwallet.common] + [status-im.ui.screens.keycard.keycard-interaction :as keycard-sheet] [status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.text-input.view :as text-input] @@ -136,48 +138,41 @@ [react/view {:align-items :center :margin-top 16 :margin-bottom 40} [sign-with-keycard-button nil nil]])]) -(defn signature-request - [{:keys [formatted-data fiat-amount fiat-currency keycard-step]} small-screen?] - (let [message (:message formatted-data) - title (case keycard-step - :connect :t/looking-for-cards - :signing :t/processing - :error :t/lost-connection - :success :t/success) - subtitle (case keycard-step - :connect :t/hold-card - :signing :t/try-keeping-the-card-still - :error :t/tap-card-again - :success :t/transaction-signed)] - [react/view (assoc (styles/message) :padding-vertical 16 :align-items :center) - [react/view {:style {:align-self :flex-start :padding-left 16 :margin-bottom 24}} - [react/text {:style {:font-size (if small-screen? 15 17) :font-weight "700"}} - (i18n/label :t/confirmation-request)]] - (when (and (:formatted-amount message) (:formatted-currency message)) - [react/view {:style {:margin-bottom 24 :align-self :stretch}} - [react/nested-text {:style {:font-weight "500" :font-size (if small-screen? 34 44) - :text-align :center}} - (str (:formatted-amount message) " ") - [{:style {:color colors/gray}} (:formatted-currency message)]] - [react/text {:style {:font-size 19 :text-align :center - :margin-bottom 16}} - (str fiat-amount " " fiat-currency)] - [separator]]) - [react/view {:style (styles/sheet-icon (case keycard-step - (:connect :signing) colors/blue-transparent-10 - :error colors/red-transparent-10 - :success colors/green-transparent-10))} - (case keycard-step - :connect - [icons/icon :main-icons/nfc {:color colors/blue :width 27 :height 21}] - :signing - [react/activity-indicator {:animating true :color colors/blue}] - :error - [icons/icon :main-icons/close {:color colors/red}] - :success - [icons/icon :main-icons/check {:color colors/green}])] - [react/text {:style (styles/sheet-title small-screen?)} (i18n/label title)] - [react/text {:style (styles/sheet-subtitle small-screen?)} (i18n/label subtitle)] +(defn redeem-tx-header [account receiver small-screen?] + (fn [] + [react/view {:style {:align-self :stretch :margin-top 30}} + [separator] + [react/view {:style {:flex-direction :row + :justify-content :space-between + :align-items :center + :padding-left 16 :margin-vertical 8}} + [react/text {:style {:flex 2 :margin-right 16}} (i18n/label :t/keycard-redeem-title)] + [react/text {:number-of-lines 1 + :ellipsize-mode :middle + :style {:padding-left 16 + :color colors/gray + :flex 3}} + (if account (:name account) receiver)] + (when account + [react/view {:style {:flex 1 :padding-left 8}} + [chat-icon/custom-icon-view-list (:name account) (:color account) (if small-screen? 20 32)]])] + [separator]])) + +(defn signature-request-header [amount currency small-screen? fiat-amount fiat-currency] + (fn [] + [react/view {:style {:align-self :stretch :margin-vertical 30}} + [react/nested-text {:style {:font-weight "500" :font-size (if small-screen? 34 44) + :text-align :center}} + (str amount " ") + [{:style {:color colors/gray}} currency]] + [react/text {:style {:font-size 19 :text-align :center + :margin-bottom 16}} + (str fiat-amount " " fiat-currency)] + [separator]])) + +(defn signature-request-footer [keycard-step small-screen?] + (fn [] + [react/view {:style {:align-self :stretch}} [button/button {:type :main :disabled? (= keycard-step :success) :text-style {:font-size (if small-screen? 18 20)} @@ -195,6 +190,30 @@ :label (i18n/label :t/decline) :on-press #(re-frame/dispatch [:signing.ui/cancel-is-pressed])}]])) +(defn signature-request [{:keys [formatted-data account fiat-amount fiat-currency keycard-step]} + connected? + small-screen?] + (let [message (:message formatted-data)] + [react/view (assoc (styles/message) :padding-vertical 16) + [keycard-sheet/connect-keycard + {:on-connect ::hardwallet.common/on-card-connected + :on-disconnect ::hardwallet.common/on-card-disconnected + :connected? connected? + :on-cancel #(re-frame/dispatch [:signing.ui/cancel-is-pressed]) + :params + (if (:receiver message) + {:header (redeem-tx-header account (:receiver message) small-screen?) + :title (i18n/label :t/confirmation-request) + :small-screen? small-screen? + :state-translations {:init {:title :t/keycard-redeem-tx + :description :t/keycard-redeem-tx-desc}}} + {:title (i18n/label :t/confirmation-request) + :header (signature-request-header (:formatted-amount message) + (:formatted-currency message) + small-screen? fiat-amount fiat-currency) + :footer (signature-request-footer keycard-step small-screen?) + :small-screen? small-screen?})}]])) + (defn- transaction-data-item [{:keys [label data]}] [react/view [react/text {:style {:font-size 17 @@ -260,10 +279,11 @@ [react/view]))) (views/defview message-sheet [] - (views/letsubs [{:keys [formatted-data type] :as sign} [:signing/sign] - small-screen? [:dimensions/small-screen?]] + (views/letsubs [{:keys [formatted-data type] :as sign} [:signing/sign-message] + small-screen? [:dimensions/small-screen?] + keycard [:keycard]] (if (= type :pinless) - [signature-request sign small-screen?] + [signature-request sign (:card-connected? keycard) small-screen?] [react/view (styles/message) [react/view styles/message-header [react/text {:style {:typography :title-bold}} (i18n/label :t/signing-a-message)] diff --git a/translations/en.json b/translations/en.json index 1e4cba14e2..4adda72338 100644 --- a/translations/en.json +++ b/translations/en.json @@ -579,6 +579,9 @@ "keycard-recovery-phrase-confirmation-text": "You won’t have a second chance! If you lose access, for example by losing your keycard, you can only access your keys with your seed phrase. No one, but you has your seed phrase. Write it down. Keep it safe.", "keycard-recovery-phrase-confirmation-title": "Written the seed phrase down?", "keycard-recovery-success-header": "Your keys have been\n successfully recovered", + "keycard-redeem-title": "Redeem to", + "keycard-redeem-tx": "Redeem assets", + "keycard-redeem-tx-desc": "Tap the card to sign and receive assets", "keycard-unauthorized-operation": "You're unauthorized to perform this operation.\n Please tap valid card and try again.", "keycard-is-frozen-title": "Keycard is frozen", "keycard-is-frozen-details": "To protect your assets, your card is frozen. Reset card access to unlock keys and send transactions. Create a new passcode and enter your PUK to access your account(s) on this card",