[#9649] Add "Send" button and a QR icon on the wallet screen

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

src/status_im/subs.cljs

@@ -443,11 +443,10 @@
    public-key))
 
 (re-frame/reg-sub
- :multiaccount/default-address
+ :multiaccount/default-account
  :<- [:multiaccount]
  (fn [{:keys [accounts]}]
-   (ethereum/normalized-hex
-    (:address (ethereum/get-default-account accounts)))))
+   (ethereum/get-default-account accounts)))
 
 (re-frame/reg-sub
  :sign-in-enabled?
@@ -1905,12 +1904,12 @@
  :ens/checkout-screen
  :<- [:ens/registration]
  :<- [:ens.stateofus/registrar]
- :<- [:multiaccount/default-address]
+ :<- [:multiaccount/default-account]
  :<- [:multiaccount/public-key]
  :<- [:chain-id]
  (fn [[{:keys [custom-domain? username]}
-       registrar default-address public-key chain-id]]
-   {:address        default-address
+       registrar default-account public-key chain-id]]
+   {:address        (ethereum/normalized-hex (:address default-account))
     :username       username
     :public-key     public-key
     :custom-domain? custom-domain?

src/status_im/ui/screens/wallet/accounts/styles.cljs

@@ -1,5 +1,6 @@
 (ns status-im.ui.screens.wallet.accounts.styles
-  (:require [status-im.ui.components.colors :as colors]))
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.tabbar.styles :as tabs.styles]))
 
 (defn card [color]
   {:width            156
@@ -33,3 +34,26 @@
    :border-radius    8
    :justify-content  :center
    :align-items      :center})
+
+(def send-button-container
+  {:position        :absolute
+   :z-index         2
+   :align-items     :center
+   :justify-content :center
+   :left            0
+   :right           0
+   :bottom          (+ 16 tabs.styles/tabs-diff)
+   :height          40})
+
+(def send-button
+  {:width            40
+   :height           40
+   :background-color colors/blue
+   :border-radius    20
+   :align-items      :center
+   :justify-content  :center
+   :shadow-offset    {:width 0 :height 1}
+   :shadow-radius    6
+   :shadow-opacity   1
+   :shadow-color     "rgba(0, 12, 63, 0.2)"
+   :elevation        2})

src/status_im/ui/screens/wallet/accounts/views.cljs

@@ -13,7 +13,8 @@
             [reagent.core :as reagent]
             [re-frame.core :as re-frame]
             [status-im.ui.screens.wallet.accounts.sheets :as sheets]
-            [status-im.ui.screens.wallet.accounts.styles :as styles]))
+            [status-im.ui.screens.wallet.accounts.styles :as styles]
+            [status-im.utils.utils :as utils.utils]))
 
 (def state (reagent/atom {:tab :assets}))
 
@@ -97,6 +98,20 @@
       (:code currency)]
      [react/text {:style {:color colors/gray}} (i18n/label :t/wallet-total-value)]]))
 
+(defn- request-camera-permissions []
+  (let [options {:handler :wallet.send/qr-scanner-result}]
+    (re-frame/dispatch
+     [:request-permissions
+      {:permissions [:camera]
+       :on-allowed
+       #(re-frame/dispatch [:wallet.send/qr-scanner-allowed options])
+       :on-denied
+       #(utils.utils/set-timeout
+         (fn []
+           (utils.utils/show-popup (i18n/label :t/error)
+                                   (i18n/label :t/camera-access-error)))
+         50)}])))
+
 (views/defview accounts-options []
   (views/letsubs [{:keys [seed-backed-up?]} [:multiaccount]
                   empty-balances?           [:empty-balances?]]
@@ -116,13 +131,30 @@
           [react/text {:style               {:color colors/gray}
                        :accessibility-label :back-up-your-seed-phrase-warning}
            (i18n/label :t/back-up-your-seed-phrase)]]])]
-     [react/touchable-highlight {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet
-                                                                {:content        (sheets/accounts-options seed-backed-up?)
-                                                                 :content-height (if seed-backed-up? 190 250)}])}
-      [react/view {:height          toolbar.styles/toolbar-height :width toolbar.styles/toolbar-height :align-items :center
+     [react/touchable-highlight
+      {:on-press #(request-camera-permissions)}
+      [react/view {:height          toolbar.styles/toolbar-height
+                   :width 24 :align-items :center
+                   :justify-content :center}
+       [icons/icon :main-icons/qr {:accessibility-label :accounts-qr-code}]]]
+     [react/touchable-highlight
+      {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet
+                                      {:content        (sheets/accounts-options seed-backed-up?)
+                                       :content-height (if seed-backed-up? 190 250)}])}
+      [react/view {:height          toolbar.styles/toolbar-height
+                   :width toolbar.styles/toolbar-height :align-items :center
                    :justify-content :center}
        [icons/icon :main-icons/more {:accessibility-label :accounts-more-options}]]]]))
 
+(views/defview  send-button []
+  (views/letsubs [account [:multiaccount/default-account]]
+    [react/view styles/send-button-container
+     [react/touchable-highlight
+      {:accessibility-label :send-transaction-button
+       :on-press            #(re-frame/dispatch [:wallet/prepare-transaction-from-wallet account])}
+      [react/view styles/send-button
+       [icons/icon :main-icons/send {:color :white}]]]]))
+
 (views/defview accounts []
   (views/letsubs [{:keys [accounts keycard-pairing]} [:multiaccount]]
     [react/scroll-view {:horizontal true}
@@ -141,4 +173,6 @@
     [react/view {:margin-top 8 :padding-horizontal 16}
      [total-value]
      [accounts]]
-    [assets]]])
+    [assets]
+    [react/view {:height 68}]]
+   [send-button]])