Show redeem text for Keycard redeem txs

Signed-off-by: Vitaliy Vlasov <siphiuel@gmail.com>

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)

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)

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)}})
+       :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 (assoc-in db [:signing/sign :keycard-step] :signing)}))))
 
 (fx/defn fetch-currency-symbol-on-success
   {:events [:hardwallet/fetch-currency-symbol-on-success]}

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
+ :signing/sign-message
- (fn [db]
+ :<- [:signing/sign]
-   (let [sign (:signing/sign db)]
+ :<- [:multiaccount/accounts]
+ :<- [:prices]
+ (fn [[sign wallet-accounts prices]]
    (if (= :pinless (:type sign))
-       (let [message (get-in sign [:formatted-data :message])]
+     (let [message (get-in sign [:formatted-data :message])
-         (if (and (:amount message) (:currency message))
+           wallet-acc (some #(when (= (:address %) (:receiver message)) %) wallet-accounts)]
-           (assoc sign :fiat-amount
+       (cond-> sign
+         (and (:amount message) (:currency message))
+         (assoc :fiat-amount
                 (money/fiat-amount-value (:amount message)
                                          (:currency message)
-                                           :USD (:prices db))
+                                         :USD prices)
                 :fiat-currency "USD")
-           sign))
+         (and (:receiver message) wallet-acc)
-       sign))))
+         (assoc :account wallet-acc)))
+     sign)))
 
 (defn- too-precise-amount?
   "Checks if number has any extra digit beyond the allowed number of decimals.

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]}]
+    (fn [{:keys [on-card-connected connected? on-card-disconnected params]}]
-      (let [translation (get state->translations @state)]
+      (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)])])

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
+(defn redeem-tx-header [account receiver small-screen?]
-  [{:keys [formatted-data fiat-amount fiat-currency keycard-step]} small-screen?]
+  (fn []
-  (let [message (:message formatted-data)
+    [react/view {:style {:align-self :stretch :margin-top 30}}
-        title (case keycard-step
+     [separator]
-                :connect :t/looking-for-cards
+     [react/view {:style {:flex-direction :row
-                :signing :t/processing
+                          :justify-content :space-between
-                :error      :t/lost-connection
+                          :align-items :center
-                :success :t/success)
+                          :padding-left 16 :margin-vertical 8}}
-        subtitle (case keycard-step
+      [react/text {:style {:flex 2 :margin-right 16}} (i18n/label :t/keycard-redeem-title)]
-                   :connect :t/hold-card
+      [react/text {:number-of-lines 1
-                   :signing :t/try-keeping-the-card-still
+                   :ellipsize-mode :middle
-                   :error :t/tap-card-again
+                   :style {:padding-left 16
-                   :success :t/transaction-signed)]
+                           :color colors/gray
-    [react/view (assoc (styles/message) :padding-vertical 16 :align-items :center)
+                           :flex 3}}
-     [react/view {:style {:align-self :flex-start :padding-left 16 :margin-bottom 24}}
+       (if account (:name account) receiver)]
-      [react/text {:style {:font-size (if small-screen? 15 17) :font-weight "700"}}
+      (when account
-       (i18n/label :t/confirmation-request)]]
+        [react/view {:style {:flex 1 :padding-left 8}}
-     (when (and (:formatted-amount message) (:formatted-currency message))
+         [chat-icon/custom-icon-view-list (:name account) (:color account) (if small-screen? 20 32)]])]
-       [react/view {:style {:margin-bottom 24 :align-self :stretch}}
+     [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 (:formatted-amount message) " ")
+      (str amount " ")
-         [{:style {:color colors/gray}} (:formatted-currency message)]]
+      [{:style {:color colors/gray}} currency]]
      [react/text {:style {:font-size 19 :text-align :center
                           :margin-bottom 16}}
       (str fiat-amount " " fiat-currency)]
-        [separator]])
+     [separator]]))
-     [react/view {:style (styles/sheet-icon (case keycard-step
+
-                                              (:connect :signing) colors/blue-transparent-10
+(defn signature-request-footer [keycard-step small-screen?]
-                                              :error              colors/red-transparent-10
+  (fn []
-                                              :success            colors/green-transparent-10))}
+    [react/view {:style {:align-self :stretch}}
-      (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)]
      [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]
+  (views/letsubs [{:keys [formatted-data type] :as sign} [:signing/sign-message]
-                  small-screen? [:dimensions/small-screen?]]
+                  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)]

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