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

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

This commit is contained in:
Paul Fitzgerald 2024-01-25 19:00:18 +00:00 committed by GitHub
parent 1fb6c60f72
commit cc24794b74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 74 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/status_im/contexts/shell/share/wallet/style.cljs Normal file
View File

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

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

@ -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,9 +44,10 @@
(rf/dispatch [:hide-bottom-sheet])
(reset! selected-networks (map #(get utils/id->network %)
chain-ids)))}])}]))
(defn wallet-qr-code-item
[account width index]
(let [selected-networks (reagent/atom [:ethereum :optimism :arbitrum])
(defn- wallet-qr-code-item-internal
[props]
(let [{:keys [account width index]} props
selected-networks (reagent/atom [:ethereum :optimism :arbitrum])
wallet-type (reagent/atom :wallet-legacy)]
(fn []
(let [share-title (str (:name account) " " (i18n/label :t/address))
@ -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])
width (rf/sub [:dimensions/window-width])]
width (rf/sub [:dimensions/window-width])
current-index (reagent/atom 0)]
(fn []
[rn/view
[rn/flat-list
{:horizontal true
:deceleration-rate 0.9
:snap-to-alignment "start"
:snap-to-alignment :start
:snap-to-interval (- width 30)
:disable-interval-momentum true
:scroll-event-throttle 64
:data accounts
:directional-lock-enabled true
:render-fn (fn [account index]
(wallet-qr-code-item account width index))}]))
: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)])])))