status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#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
This commit is contained in:
Ulises Manuel 2024-04-01 09:53:26 -06:00 committed by GitHub
parent 8b0681c44a
commit feb875310e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 66 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/quo/components/share/share_qr_code/view.cljs
View File

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

12
src/status_im/contexts/shell/share/profile/view.cljs
View File

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

1
src/status_im/contexts/shell/share/style.cljs
View File

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

101
src/status_im/contexts/shell/share/wallet/view.cljs
View File

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

4
src/status_im/subs/general.cljs
View File

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