status-im
/
status-react
mirror of https://github.com/status-im/status-react.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))]]])
(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))

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

@ -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})

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

@ -5,7 +5,6 @@
(def screen-padding 20)
(def header-row
{:flex-direction :row
: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
(: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]])]))))

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

@ -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?