chore (shell): add indicators to share wallet qrs (#18523)

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

@@ -0,0 +1,18 @@
+(ns status-im.contexts.shell.share.wallet.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn indicator-wrapper-style
+  [active?]
+  {:width            8
+   :height           8
+   :border-radius    4
+   :background-color colors/white
+   :opacity          (if active? 1.0 0.5)})
+
+(def indicator-list-style
+  {:display         :flex
+   :flex-direction  :row
+   :align-items     :center
+   :justify-content :center
+   :gap             8})

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

@@ -6,6 +6,7 @@
     [react-native.share :as share]
     [reagent.core :as reagent]
     [status-im.contexts.shell.share.style :as style]
+    [status-im.contexts.shell.share.wallet.style :as wallet-style]
     [status-im.contexts.wallet.common.sheets.network-preferences.view :as network-preferences]
     [status-im.contexts.wallet.common.utils :as utils]
     [utils.i18n :as i18n]
@@ -43,10 +44,11 @@
                                           (rf/dispatch [:hide-bottom-sheet])
                                           (reset! selected-networks (map #(get utils/id->network %)
                                                                          chain-ids)))}])}]))
-(defn wallet-qr-code-item
+(defn- wallet-qr-code-item-internal
-  [account width index]
+  [props]
-  (let [selected-networks (reagent/atom [:ethereum :optimism :arbitrum])
+  (let [{:keys [account width index]} props
-        wallet-type       (reagent/atom :wallet-legacy)]
+        selected-networks             (reagent/atom [:ethereum :optimism :arbitrum])
+        wallet-type                   (reagent/atom :wallet-legacy)]
     (fn []
       (let [share-title         (str (:name account) " " (i18n/label :t/address))
             qr-url              (utils/get-wallet-qr {:wallet-type       @wallet-type
@@ -57,7 +59,7 @@
                                   :port        (rf/sub [:mediaserver/port])
                                   :qr-size     qr-size
                                   :error-level :highest})]
-        [rn/view {:style {:width width :margin-left (if (zero? index) 0 -30)}}
+        [rn/view {:style {:height qr-size :width width :margin-left (if (zero? index) 0 -30)}}
          [rn/view {:style style/qr-code-container}
           [quo/share-qr-code
            {:type                @wallet-type
@@ -73,18 +75,54 @@
             :on-legacy-press     #(reset! wallet-type :wallet-legacy)
             :on-settings-press   #(open-preferences @selected-networks)}]]]))))
 
+(def wallet-qr-code-item (memoize wallet-qr-code-item-internal))
+
+(defn- indicator
+  [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)]))])
+
+(defn render-item
+  [item]
+  (let [width (rf/sub [:dimensions/window-width])]
+    [wallet-qr-code-item
+     {:account item
+      :index   (:position item)
+      :width   width}]))
+
 (defn wallet-tab
   []
-  (let [accounts (rf/sub [:wallet/accounts])
+  (let [accounts      (rf/sub [:wallet/accounts])
-        width    (rf/sub [:dimensions/window-width])]
+        width         (rf/sub [:dimensions/window-width])
-    [rn/flat-list
+        current-index (reagent/atom 0)]
-     {:horizontal                true
+    (fn []
-      :deceleration-rate         0.9
+      [rn/view
-      :snap-to-alignment         "start"
+       [rn/flat-list
-      :snap-to-interval          (- width 30)
+        {:horizontal                        true
-      :disable-interval-momentum true
+         :deceleration-rate                 0.9
-      :scroll-event-throttle     64
+         :snap-to-alignment                 :start
-      :data                      accounts
+         :snap-to-interval                  (- width 30)
-      :directional-lock-enabled  true
+         :disable-interval-momentum         true
-      :render-fn                 (fn [account index]
+         :scroll-event-throttle             64
-                                   (wallet-qr-code-item account width index))}]))
+         :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)])])))