[#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

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

@@ -188,21 +188,21 @@
          nil))]]])
 
 (defn- view-internal
-  [props]
+  [{provided-width :width :as props}]
-  (let [[component-width
+  (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

@@ -17,6 +17,7 @@
   (let [{:keys [emoji-hash
                 universal-profile-url]
          :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)
@@ -26,6 +27,7 @@
      [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,9 +46,9 @@
                                           (rf/dispatch [:hide-bottom-sheet])
                                           (reset! selected-networks (map #(get utils/id->network %)
                                                                          chain-ids)))}])}]))
-(defn- wallet-qr-code-item-internal
+(defn- wallet-qr-code-item
-  [props]
+  [{:keys [account index]}]
-  (let [{:keys [account width index]} props
+  (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)
@@ -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
+  [rn/view {:style (wallet-style/indicator-wrapper-style active?)}])
-   {:style (wallet-style/indicator-wrapper-style active?)}])
 
 (defn- indicator-list
-  [indicator-count current-index]
+  [num-indicators current-index]
-  [rn/view
+  [rn/view {:style wallet-style/indicator-list-style}
-   {:style wallet-style/indicator-list-style}
+   (for [i (range num-indicators)]
-   (for [i (range indicator-count)]
+     ^{:key i} [indicator (= current-index i)])])
-     (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)]))])
 
 (defn render-item
   [item]
-  (let [width (rf/sub [:dimensions/window-width])]
   [wallet-qr-code-item
    {:account item
-      :index   (:position item)
+    :index   (:position item)}])
-      :width   width}]))
+
+(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])
+  (let [current-index         (reagent/atom 0)
-        width         (rf/sub [:dimensions/window-width])
+        {window-width :width} (rn/get-window)
-        current-index (reagent/atom 0)]
+        qr-code-size          (- window-width 30)]
     (fn []
+      (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                  (- width 30)
+           :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                         (fn [e]
+           :on-scroll                         on-scroll
-                                              (reset! current-index (js/Math.ceil
-                                                                     (/ e.nativeEvent.contentOffset.x
-                                                                        width))))
            :render-fn                         render-item}]
-       (when (> (count accounts) 1)
+         (when (> num-accounts 1)
-         [rn/view
+           [rn/view {:style {:margin-top 20}}
-          {:style {:margin-top 20}}
+            [indicator-list num-accounts @current-index]])]))))
-          (indicator-list (count 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?