[#19401] Wallet share QR code - multiple fixes (#19425)

* Fix key extractions in re-frame/reg-sub

* Add `:width` to share-qr-code
  By adding this prop, `on-layout` can be skipped and the component can be properly rendered faster.

* Use `share-qr-code`'s `:width` prop in share profile shell

* Fix share qr code for wallet addresses

* Fix the height of the component being cropped.

* Fix the bottom dots not being accurately highlighted.

* Fix the blink when the component is mounted

Author: ulisesmac

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

@@ -188,21 +188,21 @@
          nil))]]])
 
 (defn- view-internal
-  [props]
-  (let [[component-width
+  [{provided-width :width :as props}]
+  (let [[calculated-width
          set-component-width] (rn/use-state nil)
         on-layout             (rn/use-callback #(set-component-width
                                                  (oops/oget % "nativeEvent.layout.width")))
         props                 (-> props
-                                  (assoc :component-width component-width)
+                                  (assoc :component-width (or provided-width calculated-width))
                                   (clojure.set/rename-keys {:type :share-qr-type}))]
     [quo.theme/provider {:theme :dark}
      [rn/view
       {:accessibility-label :share-qr-code
        :style               style/outer-container
-       :on-layout           on-layout}
+       :on-layout           (when-not provided-width on-layout)}
       [rn/view {:style {:background-color style/overlay-color}}
-       (when component-width
+       (when (:component-width props)
          [share-qr-code props])]]]))
 
 (def view (schema/instrument #'view-internal component-schema/?schema))

src/status_im/contexts/shell/share/profile/view.cljs

@@ -16,16 +16,18 @@
   []
   (let [{:keys [emoji-hash
                 universal-profile-url]
-         :as   profile}     (rf/sub [:profile/profile-with-image])
-        customization-color (rf/sub [:profile/customization-color])
-        abbreviated-url     (address/get-abbreviated-profile-url
-                             universal-profile-url)
-        emoji-hash-string   (string/join emoji-hash)]
+         :as   profile}       (rf/sub [:profile/profile-with-image])
+        {window-width :width} (rn/get-window)
+        customization-color   (rf/sub [:profile/customization-color])
+        abbreviated-url       (address/get-abbreviated-profile-url
+                               universal-profile-url)
+        emoji-hash-string     (string/join emoji-hash)]
     [rn/scroll-view
      {:content-container-style {:padding-bottom 16}}
      [rn/view {:style style/qr-code-container}
       [qr-codes/share-qr-code
        {:type                :profile
+        :width               (- window-width (* style/screen-padding 2))
         :qr-data             universal-profile-url
         :qr-data-label-shown abbreviated-url
         :on-share-press      #(list-selection/open-share {:message universal-profile-url})

src/status_im/contexts/shell/share/style.cljs

@@ -5,7 +5,6 @@
 
 (def screen-padding 20)
 
-
 (def header-row
   {:flex-direction     :row
    :justify-content    :space-between

src/status_im/contexts/shell/share/wallet/view.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.shell.share.wallet.view
   (:require
+    [oops.core :as oops]
     [quo.core :as quo]
     [react-native.core :as rn]
     [react-native.platform :as platform]
@@ -11,6 +12,7 @@
     [status-im.contexts.wallet.sheets.network-preferences.view :as network-preferences]
     [utils.i18n :as i18n]
     [utils.image-server :as image-server]
+    [utils.number]
     [utils.re-frame :as rf]))
 
 (def qr-size 500)
@@ -44,14 +46,14 @@
                                           (rf/dispatch [:hide-bottom-sheet])
                                           (reset! selected-networks (map #(get utils/id->network %)
                                                                          chain-ids)))}])}]))
-(defn- wallet-qr-code-item-internal
-  [props]
-  (let [{:keys [account width index]} props
-        selected-networks             (reagent/atom [:ethereum :optimism :arbitrum])
-        wallet-type                   (reagent/atom :legacy)
-        on-settings-press             #(open-preferences selected-networks)
-        on-legacy-press               #(reset! wallet-type :legacy)
-        on-multichain-press           #(reset! wallet-type :multichain)]
+(defn- wallet-qr-code-item
+  [{:keys [account index]}]
+  (let [{window-width :width} (rn/get-window)
+        selected-networks     (reagent/atom [:ethereum :optimism :arbitrum])
+        wallet-type           (reagent/atom :legacy)
+        on-settings-press     #(open-preferences selected-networks)
+        on-legacy-press       #(reset! wallet-type :legacy)
+        on-multichain-press   #(reset! wallet-type :multichain)]
     (fn []
       (let [share-title         (str (:name account) " " (i18n/label :t/address))
             qr-url              (utils/get-wallet-qr {:wallet-type       @wallet-type
@@ -62,10 +64,11 @@
                                   :port        (rf/sub [:mediaserver/port])
                                   :qr-size     qr-size
                                   :error-level :highest})]
-        [rn/view {:style {:height qr-size :width width :margin-left (if (zero? index) 0 -30)}}
+        [rn/view {:style {:width window-width :margin-left (if (zero? index) 0 -30)}}
          [rn/view {:style style/qr-code-container}
           [quo/share-qr-code
            {:type                :wallet
+            :width               (- window-width (* style/screen-padding 2))
             :address             @wallet-type
             :qr-image-uri        qr-media-server-uri
             :qr-data             qr-url
@@ -79,54 +82,54 @@
             :on-legacy-press     on-legacy-press
             :on-settings-press   on-settings-press}]]]))))
 
-(def wallet-qr-code-item (memoize wallet-qr-code-item-internal))
-
 (defn- indicator
   [active?]
-  [rn/view
-   {:style (wallet-style/indicator-wrapper-style active?)}])
+  [rn/view {:style (wallet-style/indicator-wrapper-style active?)}])
 
 (defn- indicator-list
-  [indicator-count current-index]
-  [rn/view
-   {:style wallet-style/indicator-list-style}
-   (for [i (range indicator-count)]
-     (let [current-index (cond (<= current-index 0)                     0
-                               (>= current-index (dec indicator-count)) (dec indicator-count)
-                               :else                                    current-index)]
-       ^{:key i} [indicator (= current-index i)]))])
+  [num-indicators current-index]
+  [rn/view {:style wallet-style/indicator-list-style}
+   (for [i (range num-indicators)]
+     ^{:key i} [indicator (= current-index i)])])
 
 (defn render-item
   [item]
-  (let [width (rf/sub [:dimensions/window-width])]
-    [wallet-qr-code-item
-     {:account item
-      :index   (:position item)
-      :width   width}]))
+  [wallet-qr-code-item
+   {:account item
+    :index   (:position item)}])
+
+(defn- qr-code-visualized-index
+  [offset qr-code-size num-qr-codes]
+  (-> (+ (/ offset qr-code-size) 0.5)
+      (int)
+      (utils.number/value-in-range 0 (dec num-qr-codes))))
 
 (defn wallet-tab
   []
-  (let [accounts      (rf/sub [:wallet/accounts])
-        width         (rf/sub [:dimensions/window-width])
-        current-index (reagent/atom 0)]
+  (let [current-index         (reagent/atom 0)
+        {window-width :width} (rn/get-window)
+        qr-code-size          (- window-width 30)]
     (fn []
-      [rn/view
-       [rn/flat-list
-        {:horizontal                        true
-         :deceleration-rate                 0.9
-         :snap-to-alignment                 :start
-         :snap-to-interval                  (- width 30)
-         :disable-interval-momentum         true
-         :scroll-event-throttle             64
-         :data                              accounts
-         :directional-lock-enabled          true
-         :shows-horizontal-scroll-indicator false
-         :on-scroll                         (fn [e]
-                                              (reset! current-index (js/Math.ceil
-                                                                     (/ e.nativeEvent.contentOffset.x
-                                                                        width))))
-         :render-fn                         render-item}]
-       (when (> (count accounts) 1)
-         [rn/view
-          {:style {:margin-top 20}}
-          (indicator-list (count accounts) @current-index)])])))
+      (let [accounts     (rf/sub [:wallet/accounts])
+            num-accounts (count accounts)
+            on-scroll    (rn/use-callback
+                          (fn [e]
+                            (let [offset-x (oops/oget e "nativeEvent.contentOffset.x")
+                                  index    (qr-code-visualized-index offset-x qr-code-size num-accounts)]
+                              (reset! current-index index))))]
+        [rn/view
+         [rn/flat-list
+          {:horizontal                        true
+           :deceleration-rate                 0.9
+           :snap-to-alignment                 :start
+           :snap-to-interval                  qr-code-size
+           :disable-interval-momentum         true
+           :scroll-event-throttle             64
+           :data                              accounts
+           :directional-lock-enabled          true
+           :shows-horizontal-scroll-indicator false
+           :on-scroll                         on-scroll
+           :render-fn                         render-item}]
+         (when (> num-accounts 1)
+           [rn/view {:style {:margin-top 20}}
+            [indicator-list num-accounts @current-index]])]))))

src/status_im/subs/general.cljs

@@ -120,12 +120,12 @@
 (re-frame/reg-sub
  :dimensions/window-width
  :<- [:dimensions/window]
- :width)
+ :-> :width)
 
 (re-frame/reg-sub
  :dimensions/window-height
  :<- [:dimensions/window]
- :height)
+ :-> :height)
 
 (re-frame/reg-sub
  :dimensions/small-screen?