Bottom sheet with save and send options not displayed after scanning wallet QR using universal scanner #18928 (#19250)

Author: mmilad75

src/quo/components/drawers/drawer_top/component_spec.cljs

@@ -22,6 +22,13 @@
     (h/is-truthy (h/get-by-text "Title"))
     (h/is-truthy (h/get-by-text "Description")))
 
+  (h/test "component renders in address type"
+    (h/render-with-theme-provider [quo/drawer-top
+                                   {:title "0x1"
+                                    :type  :address}]
+                                  theme)
+    (h/is-truthy (h/get-by-text "0x1")))
+
   (h/test "component renders in info type"
     (h/render-with-theme-provider [quo/drawer-top
                                    {:title "Title"

src/quo/components/drawers/drawer_top/view.cljs

@@ -168,11 +168,16 @@
 (defn- left-title
   [{:keys [type label title title-icon theme blur?]}]
   (case type
-    :label [text/text
-            {:weight :medium
-             :size   :paragraph-2
-             :style  (style/description theme blur?)}
-            label]
+    :label   [text/text
+              {:weight :medium
+               :size   :paragraph-2
+               :style  (style/description theme blur?)}
+              label]
+    :address [address-text/view
+              {:address       title
+               :full-address? true
+               :weight        :semi-bold
+               :size          :heading-2}]
     [rn/view {:style style/title-container}
      [text/text
       {:size   :heading-2

src/quo/components/list_items/token_network/schema.cljs

@@ -4,7 +4,7 @@
   [:=>
    [:cat
     [:map
-     [:token :keyword]
+     [:token [:or :string :keyword]]
      [:label :string]
      [:token-value :string]
      [:fiat-value :string]

src/quo/components/share/share_qr_code/style.cljs

@@ -16,12 +16,6 @@
    :padding-top        12
    :padding-bottom     8})
 
-(def gradient-bg
-  {:position :absolute
-   :top      0
-   :left     0
-   :right    0})
-
 ;;; Header
 (def header-container
   {:flex-direction :row
@@ -71,41 +65,5 @@
    :justify-content :space-between
    :flex            1})
 
-;;; Dashed line
-(def ^:private padding-for-divider (+ padding-horizontal 4))
-(def ^:private dashed-line-width 2)
-(def ^:private dashed-line-space 4)
-
-(def dashed-line
-  {:flex-direction :row
-   :margin-left    -1})
-
-(def line
-  {:background-color colors/white-opa-20
-   :width            dashed-line-width
-   :height           1})
-
-(def line-space
-  {:width  dashed-line-space
-   :height 1})
-
-(defn number-lines-and-spaces-to-fill
-  [component-width]
-  (let [line-and-space-width (+ dashed-line-width dashed-line-space)
-        width-to-fill        (- component-width (* 2 padding-for-divider))
-        number-of-lines      (* (/ width-to-fill line-and-space-width) 2)]
-    (inc (int number-of-lines))))
-
-(def ^:private get-network-full-name
-  {"eth"  :ethereum
-   "opt"  :optimism
-   "arb1" :arbitrum})
-
-(defn network-short-name-text
-  [network-short-name]
-  {:color (-> network-short-name
-              (get-network-full-name :unknown)
-              (colors/resolve-color nil))})
-
 (def watched-account-icon
   {:margin-left 4})

src/quo/components/share/share_qr_code/view.cljs

@@ -1,6 +1,5 @@
 (ns quo.components.share.share-qr-code.view
   (:require [clojure.set]
-            [clojure.string :as string]
             [oops.core :as oops]
             [quo.components.avatars.account-avatar.view :as account-avatar]
             [quo.components.avatars.user-avatar.view :as user-avatar]
@@ -13,6 +12,7 @@
             [quo.components.share.share-qr-code.schema :as component-schema]
             [quo.components.share.share-qr-code.style :as style]
             [quo.components.tabs.tab.view :as tab]
+            [quo.components.wallet.address-text.view :as address-text]
             [quo.foundations.colors :as colors]
             [quo.theme]
             [react-native.core :as rn]
@@ -74,21 +74,6 @@
      :on-press            on-press}
     :i/share]])
 
-(defn- network-colored-text
-  [network-short-name]
-  [text/text {:style (style/network-short-name-text network-short-name)}
-   (str network-short-name ":")])
-
-(defn- wallet-multichain-colored-address
-  [full-address]
-  (let [[networks address]  (as-> full-address $
-                              (string/split $ ":")
-                              [(butlast $) (last $)])
-        ->network-hiccup-xf (map #(vector network-colored-text %))]
-    (as-> networks $
-      (into [:<>] ->network-hiccup-xf $)
-      (conj $ address))))
-
 (defn- profile-bottom
   [{:keys [component-width qr-data on-text-press on-text-long-press share-qr-type]}]
   [rn/view
@@ -116,7 +101,11 @@
     {:width         component-width
      :on-press      on-text-press
      :on-long-press on-text-long-press}
-    [wallet-multichain-colored-address qr-data]]
+    [address-text/view
+     {:address       qr-data
+      :full-address? true
+      :weight        :regular
+      :size          :paragraph-1}]]
    [button/button
     {:icon-only?          true
      :type                :grey

src/quo/components/wallet/address_text/schema.cljs

@@ -10,5 +10,10 @@
       [:format {:optional true} [:enum :short :long]]
       [:theme :schema.common/theme]
       [:networks {:optional true}
-       [:maybe [:sequential [:map [:network-name :keyword] [:short-name :string]]]]]]]]
+       [:maybe [:sequential [:map [:network-name :keyword] [:short-name :string]]]]]
+      [:full-address? {:optional true} [:maybe :boolean]]
+      ;; TODO: size and weight are text schemas and should be imported here
+      ;; https://github.com/status-im/status-mobile/issues/19443
+      [:size {:optional true} [:maybe :keyword]]
+      [:weight {:optional true} [:maybe :keyword]]]]]
    :any])

src/quo/components/wallet/address_text/view.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.wallet.address-text.view
-  (:require [quo.components.markdown.text :as text]
+  (:require [clojure.string :as string]
+            [quo.components.markdown.text :as text]
             [quo.components.wallet.address-text.schema :as component-schema]
             [quo.components.wallet.address-text.style :as style]
             [quo.foundations.colors :as colors]
@@ -8,27 +9,39 @@
             [utils.address :as utils]))
 
 (defn- colored-network-text
-  [theme network]
-  (let [{:keys [network-name short-name]} network]
-    [text/text
-     {:size  :paragraph-2
-      :style {:color (colors/resolve-color network-name theme)}}
-     (str short-name ":")]))
+  [{:keys [theme network size weight]}]
+  [text/text
+   {:size   size
+    :weight weight
+    :style  {:color (colors/resolve-color (keyword network) theme)}}
+   (str network ":")])
 
 (defn- view-internal
-  [{:keys [networks address blur? theme format]}]
-  (let [network-text-xf (map #(colored-network-text theme %))
-        address-text    [text/text
-                         {:size   :paragraph-2
-                          ;; TODO: monospace font
-                          ;; https://github.com/status-im/status-mobile/issues/17009
-                          :weight :monospace
-                          :style  (style/address-text format blur? theme)}
-                         (if (= format :short)
-                           (utils/get-short-wallet-address address)
-                           address)]]
-    (as-> networks $
-      (into [text/text] network-text-xf $)
+  [{:keys [networks address blur? theme format full-address? size weight]
+    :or   {size :paragraph-2}}]
+  (let [network-colored-text                 (map #(colored-network-text {:theme   theme
+                                                                          :network %
+                                                                          :weight  weight
+                                                                          :size    size}))
+        [splitted-networks splitted-address] (and full-address?
+                                                  (as-> address $
+                                                    (string/split $ ":")
+                                                    [(butlast $) (last $)]))
+        address-internal                     (if full-address? splitted-address address)
+        networks-internal                    (if full-address?
+                                               splitted-networks
+                                               (map :short-name networks))
+        address-text                         [text/text
+                                              {:size   size
+                                               ;; TODO: monospace font
+                                               ;; https://github.com/status-im/status-mobile/issues/17009
+                                               :weight (or weight :monospace)
+                                               :style  (style/address-text format blur? theme)}
+                                              (if (= format :short)
+                                                (utils/get-short-wallet-address address-internal)
+                                                address-internal)]]
+    (as-> networks-internal $
+      (into [text/text] network-colored-text $)
       (conj $ address-text))))
 
 (def view

src/quo/components/wallet/token_input/schema.cljs

@@ -5,8 +5,8 @@
    [:catn
     [:props
      [:map
-      [:token {:optional true} [:maybe :keyword]]
-      [:currency {:optional true} [:maybe :keyword]]
+      [:token {:optional true} [:maybe :string :keyword]]
+      [:currency {:optional true} [:maybe :string :keyword]]
       [:error? {:optional true} [:maybe :boolean]]
       [:title {:optional true} [:maybe :string]]
       [:conversion {:optional true} [:maybe :double]]

src/quo/foundations/colors.cljs

@@ -254,6 +254,17 @@
    :polygon  "#AD71F3"
    :unknown  "#EEF2F5"})
 
+(def ^:private get-network-full-name
+  {:eth  :ethereum
+   :opt  :optimism
+   :arb1 :arbitrum})
+
+(def ^:private networks-short-name
+  (reduce (fn [acc [k v]]
+            (assoc acc k (get networks v)))
+          {}
+          get-network-full-name))
+
 (def socials
   {:social/link      "#647084"
    :social/facebook  "#1877F2"
@@ -294,6 +305,7 @@
                     60 warning-60}}
          customization
          networks
+         networks-short-name
          socials))
 
 (defn hex-string?

src/status_im/contexts/shell/qr_reader/events.cljs

@@ -0,0 +1,10 @@
+(ns status-im.contexts.shell.qr-reader.events
+  (:require
+    [status-im.contexts.shell.qr-reader.sheets.scanned-wallet-address :as scanned-address]
+    [utils.re-frame :as rf]))
+
+(rf/reg-event-fx
+ :generic-scanner/scan-success
+ (fn [_ [address]]
+   {:fx [[:dispatch [:navigate-back]]
+         [:dispatch [:show-bottom-sheet {:content #(scanned-address/view address)}]]]}))

src/status_im/contexts/shell/qr_reader/sheets/scanned_wallet_address.cljs

@@ -0,0 +1,26 @@
+(ns status-im.contexts.shell.qr-reader.sheets.scanned-wallet-address
+  (:require
+    [quo.core :as quo]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn view
+  [address]
+  [:<>
+   [quo/drawer-top
+    {:title address
+     :type  :address}]
+   [quo/action-drawer
+    [[{:icon                :i/send
+       :accessibility-label :send-asset
+       :label               (i18n/label :t/send-to-this-address)
+       :on-press            (fn []
+                              (rf/dispatch [:wallet/select-send-address
+                                            {:address     address
+                                             :recipient   address
+                                             :stack-id    :wallet-select-address
+                                             :start-flow? true}]))}
+      {:icon                :i/save
+       :accessibility-label :save-address
+       :label               (i18n/label :t/save-address)
+       :on-press            #(js/alert "feature not implemented")}]]]])

src/status_im/contexts/shell/qr_reader/view.cljs

@@ -88,7 +88,9 @@
     (load-and-show-profile scanned-text)
 
     (eth-address? scanned-text)
-    (debounce/debounce-and-dispatch [:navigate-to :screen/wallet.accounts scanned-text] 300)
+    (do
+      (debounce/debounce-and-dispatch [:generic-scanner/scan-success scanned-text] 300)
+      (debounce/debounce-and-dispatch [:navigate-change-tab :wallet-stack] 300))
 
     (eip681-address? scanned-text)
     (do

src/status_im/contexts/wallet/common/asset_list/view.cljs

@@ -16,7 +16,7 @@
       :label       (:name token)
       :token-value (str crypto-formatted " " (:symbol token))
       :fiat-value  fiat-formatted
-      :networks    (:networks token)
+      :networks    (seq (:networks token))
       :on-press    #(on-token-press token)}]))
 
 (defn view

src/status_im/contexts/wallet/events.cljs

@@ -43,10 +43,14 @@
  (fn [{:keys [db]} [address]]
    {:db (assoc-in db [:wallet :current-viewing-account-address] address)}))
 
-(rf/reg-event-fx :wallet/close-account-page
+(rf/reg-event-fx :wallet/clean-current-viewing-account
  (fn [{:keys [db]}]
-   {:db (update db :wallet dissoc :current-viewing-account-address)
-    :fx [[:dispatch [:pop-to-root :shell-stack]]]}))
+   {:db (update db :wallet dissoc :current-viewing-account-address)}))
+
+(rf/reg-event-fx :wallet/close-account-page
+ (fn [_]
+   {:fx [[:dispatch [:wallet/clean-current-viewing-account]]
+         [:dispatch [:pop-to-root :shell-stack]]]}))
 
 (rf/reg-event-fx
  :wallet/get-accounts-success

src/status_im/contexts/wallet/send/events.cljs

@@ -357,3 +357,13 @@
                                                    {:id   :send-transaction-error
                                                     :type :negative
                                                     :text (:message error)}]))}]})))
+
+(rf/reg-event-fx
+ :wallet/select-from-account
+ (fn [_ [{:keys [address stack-id start-flow?]}]]
+   {:fx [[:dispatch [:wallet/switch-current-viewing-account address]]
+         [:dispatch
+          [:wallet/wizard-navigate-forward
+           {:current-screen stack-id
+            :start-flow?    start-flow?
+            :flow-id        :wallet-flow}]]]}))

src/status_im/contexts/wallet/send/flow_config.cljs

@@ -1,7 +1,9 @@
 (ns status-im.contexts.wallet.send.flow-config)
 
 (def steps
-  [{:screen-id  :screen/wallet.select-address
+  [{:screen-id  :screen/wallet.select-from
+    :skip-step? (fn [db] (some? (get-in db [:wallet :current-viewing-account-address])))}
+   {:screen-id  :screen/wallet.select-address
     :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :recipient])))}
    {:screen-id  :screen/wallet.select-asset
     :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :token])))}

src/status_im/contexts/wallet/send/from/style.cljs

@@ -0,0 +1,7 @@
+(ns status-im.contexts.wallet.send.from.style)
+
+(def accounts-list
+  {:padding-bottom 12})
+
+(def accounts-list-container
+  {:padding-horizontal 8})