From feb875310e1ef72030fb099b0c1e13697b47e790 Mon Sep 17 00:00:00 2001 From: Ulises Manuel <90291778+ulisesmac@users.noreply.github.com> Date: Mon, 1 Apr 2024 09:53:26 -0600 Subject: [PATCH] [#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 --- .../components/share/share_qr_code/view.cljs | 10 +- .../contexts/shell/share/profile/view.cljs | 12 ++- src/status_im/contexts/shell/share/style.cljs | 1 - .../contexts/shell/share/wallet/view.cljs | 101 +++++++++--------- src/status_im/subs/general.cljs | 4 +- 5 files changed, 66 insertions(+), 62 deletions(-) diff --git a/src/quo/components/share/share_qr_code/view.cljs b/src/quo/components/share/share_qr_code/view.cljs index f203258840..6daecf5f9c 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/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)) diff --git a/src/status_im/contexts/shell/share/profile/view.cljs b/src/status_im/contexts/shell/share/profile/view.cljs index 7847fceffa..e6cab6779f 100644 --- a/src/status_im/contexts/shell/share/profile/view.cljs +++ b/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}) diff --git a/src/status_im/contexts/shell/share/style.cljs b/src/status_im/contexts/shell/share/style.cljs index 7aaf5376c8..a5753fcf22 100644 --- a/src/status_im/contexts/shell/share/style.cljs +++ b/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 diff --git a/src/status_im/contexts/shell/share/wallet/view.cljs b/src/status_im/contexts/shell/share/wallet/view.cljs index 4b8f8408e2..8254852e69 100644 --- a/src/status_im/contexts/shell/share/wallet/view.cljs +++ b/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]])])))) diff --git a/src/status_im/subs/general.cljs b/src/status_im/subs/general.cljs index 6224f5c8d6..7f53a3419a 100644 --- a/src/status_im/subs/general.cljs +++ b/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?