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

feat: wallet select address screen UI in empty state (#17248) 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-09-18 16:17:11 -03:00 committed by GitHub
parent 9df1b854bd
commit 9479f02b39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 176 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/quo2/components/dividers/divider_line/style.cljs
View File

@ -2,10 +2,10 @@
(:require [quo2.foundations.colors :as colors]))
(defn divider-line
[blur? theme]
{:border-color (if blur?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
:padding-top 12
:padding-bottom 8
:border-bottom-width 1})
[{:keys [blur? container-style theme]}]
(merge
{:border-color (if blur?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
:border-bottom-width 1}
container-style))

4
src/quo2/components/dividers/divider_line/view.cljs
View File

@ -5,7 +5,7 @@
[quo2.components.dividers.divider-line.style :as style]))
(defn- view-internal
[{:keys [blur? theme]}]
[rn/view {:style (style/divider-line blur? theme)}])
[props]
[rn/view {:style (style/divider-line props)}])
(def view (quo.theme/with-theme view-internal))

16
src/quo2/components/inputs/address_input/view.cljs
View File

@ -56,10 +56,9 @@
(defn- f-address-input-internal
[]
(let [status (reagent/atom :default)
value (reagent/atom "")
clipboard (reagent/atom nil)
focused? (atom false)]
(let [status (reagent/atom :default)
value (reagent/atom "")
focused? (atom false)]
(fn [{:keys [scanned-value theme blur? on-change-text on-blur on-focus on-clear on-scan on-detect-ens
ens-regex
valid-ens?]}]
@ -75,9 +74,11 @@
(reset! status :loading)
(on-detect-ens text))))
on-paste (fn []
(when-not (empty? @clipboard)
(on-change @clipboard)
(reset! value @clipboard)))
(clipboard/get-string
(fn [clipboard]
(when-not (empty? clipboard)
(on-change clipboard)
(reset! value clipboard)))))
on-clear (fn []
(reset! value "")
(reset! status (if @focused? :active :default))
@ -100,7 +101,6 @@
(when-not (empty? scanned-value)
(on-change scanned-value)))
[scanned-value])
(clipboard/get-string #(reset! clipboard %))
[rn/view {:style style/container}
[rn/text-input
{:accessibility-label :address-text-input

4
src/quo2/components/navigation/page_nav/view.cljs
View File

@ -56,7 +56,9 @@
(cond
;; TODO: use account-switcher when available (issue #16456)
(and support-account-switcher? (= content :account-switcher))
[rn/view {:style style/account-switcher-placeholder}]
[rn/pressable
{:style style/account-switcher-placeholder
:on-press #(js/alert "Not implemented yet")}]
(coll? content)
(into [rn/view {:style style/right-actions-container}]

54
src/quo2/components/tabs/tabs/view.cljs
View File

@ -70,8 +70,7 @@
on-change
scroll-on-press?
size
style
]}]
style]}]
[rn/view
{:style (style/tab {:size size
:default-tab-size default-tab-size
@ -132,6 +131,7 @@
scroll-on-press?
scrollable?
style
container-style
size
blur?
in-scroll-view?
@ -159,35 +159,36 @@
:size)
(when scroll-on-press?
{:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)})
{:ref #(reset! flat-list-ref %)
:style style
{:ref #(reset! flat-list-ref %)
:style style
;; The padding-top workaround is needed because on Android
;; {:overflow :visible} doesn't work on components inheriting
;; from ScrollView (e.g. FlatList). There are open issues, here's
;; just one about this topic:
;; https://github.com/facebook/react-native/issues/31218
:content-container-style {:padding-top (dec unread-count-offset)}
:horizontal true
:scroll-event-throttle 64
:content-container-style
(assoc container-style :padding-top (dec unread-count-offset))
:horizontal true
:scroll-event-throttle 64
:shows-horizontal-scroll-indicator false
:data data
:key-fn (comp str :id)
:on-scroll-to-index-failed identity
:on-scroll (partial on-scroll-handler
{:fade-end-percentage fade-end-percentage
:fade-end? fade-end?
:fading fading
:on-scroll on-scroll})
:render-fn tab-view
:render-data {:active-tab-id active-tab-id
:blur? blur?
:customization-color customization-color
:flat-list-ref flat-list-ref
:number-of-items (count data)
:on-change on-change
:scroll-on-press? scroll-on-press?
:size size
:style style}})]]]
:data data
:key-fn (comp str :id)
:on-scroll-to-index-failed identity
:on-scroll (partial on-scroll-handler
{:fade-end-percentage fade-end-percentage
:fade-end? fade-end?
:fading fading
:on-scroll on-scroll})
:render-fn tab-view
:render-data {:active-tab-id active-tab-id
:blur? blur?
:customization-color customization-color
:flat-list-ref flat-list-ref
:number-of-items (count data)
:on-change on-change
:scroll-on-press? scroll-on-press?
:size size
:style style}})]]]
[rn/view (merge style {:flex-direction :row})
(map-indexed (fn [index item]
^{:key (:id item)}
@ -198,6 +199,5 @@
:number-of-items (count data)
:on-change on-change
:size size
:style style}
])
:style style}])
data)]))))

3
src/status_im2/contexts/wallet/account/view.cljs
View File

@ -36,7 +36,8 @@
:on-press #(rf/dispatch [:open-modal :how-to-pair])}]}]
[quo/account-overview temp/account-overview-state]
[quo/wallet-graph {:time-frame :empty}]
[quo/wallet-ctas]
[quo/wallet-ctas
{:send-action #(rf/dispatch [:open-modal :wallet-select-address])}]
[quo/tabs
{:style style/tabs
:size 32

23
src/status_im2/contexts/wallet/send/select_address/style.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns status-im2.contexts.wallet.send.select-address.style)
(defn container
[margin-top]
{:flex 1
:margin-top margin-top})
(def title-container
{:margin-horizontal 20
:margin-vertical 12})
(def tabs
{:padding-top 20
:padding-bottom 12})
(def tabs-content
{:padding-left 20
:padding-right 8})
(def empty-container-style
{:justify-content :center
:flex 1
:margin-bottom 44})

91
src/status_im2/contexts/wallet/send/select_address/view.cljs Normal file
View File

@ -0,0 +1,91 @@
(ns status-im2.contexts.wallet.send.select-address.view
(:require [quo2.theme :as quo.theme]
[react-native.core :as rn]
[status-im2.contexts.wallet.send.select-address.style :as style]
[react-native.safe-area :as safe-area]
[quo2.core :as quo]
[utils.re-frame :as rf]
[utils.i18n :as i18n]
[status-im2.constants :as constants]
[reagent.core :as reagent]))
(def tabs-data
[{:id :tab/recent :label (i18n/label :t/recent) :accessibility-label :recent-tab}
{:id :tab/saved :label (i18n/label :t/saved) :accessibility-label :saved-tab}
{:id :tab/contacts :label (i18n/label :t/contacts) :accessibility-label :contacts-tab}
{:id :tab/my-accounts :label (i18n/label :t/my-accounts) :accessibility-label :my-accounts-tab}])
(defn- tab-view
[selected-tab]
(case selected-tab
:tab/recent [quo/empty-state
{:title (i18n/label :t/no-recent-transactions)
:description (i18n/label :t/make-one-it-is-easy-we-promise)
:placeholder? true
:container-style style/empty-container-style}]
:tab/saved [quo/empty-state
{:title (i18n/label :t/no-saved-addresses)
:description (i18n/label :t/you-like-to-type-43-characters)
:placeholder? true
:container-style style/empty-container-style}]
:tab/contacts [quo/empty-state
{:title (i18n/label :t/no-contacts)
:description (i18n/label :t/no-contacts-description)
:placeholder? true
:container-style style/empty-container-style}]
:tab/my-accounts [quo/empty-state
{:title (i18n/label :t/no-other-accounts)
:description (i18n/label :t/here-is-a-cat-in-a-box-instead)
:placeholder? true
:container-style style/empty-container-style}]))
(defn- address-input
[]
(let [timer (atom nil)
valid-ens? (reagent/atom false)
input-value (atom "")]
[quo/address-input
{:on-scan #(js/alert "Not implemented yet")
:ens-regex constants/regx-ens
:on-detect-ens
(fn [_]
(reset! valid-ens? false)
(when @timer (js/clearTimeout @timer))
(reset! timer (js/setTimeout #(reset! valid-ens? true) 2000)))
:on-change-text #(reset! input-value %)
:valid-ens? @valid-ens?}]))
(defn- view-internal
[]
(let [margin-top (safe-area/get-top)
selected-tab (reagent/atom (:id (first tabs-data)))
on-close #(rf/dispatch [:navigate-back])
on-change-tab #(reset! selected-tab %)]
(fn []
[rn/scroll-view
{:content-container-style (style/container margin-top)
:keyboard-should-persist-taps :never
:scroll-enabled false}
[quo/page-nav
{:icon-name :i/close
:on-press on-close
:accessibility-label :top-bar
:right-side :account-switcher}]
[quo/text-combinations
{:title (i18n/label :t/send-to)
:container-style style/title-container
:title-accessibility-label :title-label}]
[address-input]
[quo/divider-line]
[quo/tabs
{:style style/tabs
:container-style style/tabs-content
:size 32
:default-active @selected-tab
:data tabs-data
:scrollable? true
:scroll-on-press? true
:on-change on-change-tab}]
[tab-view @selected-tab]])))
(def view (quo.theme/with-theme view-internal))

6
src/status_im2/contexts/wallet/send/view.cljs
View File

@ -1,6 +0,0 @@
(ns status-im2.contexts.wallet.send.view
(:require [react-native.core :as rn]))
(defn view
[]
[rn/view])

7
src/status_im2/navigation/screens.cljs
View File

@ -41,7 +41,7 @@
[status-im2.contexts.wallet.create-account.view :as wallet-create-account]
[status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
[status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
[status-im2.contexts.wallet.send.view :as wallet-send]
[status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
[status-im2.navigation.options :as options]
[status-im2.navigation.transitions :as transitions]))
@ -253,8 +253,9 @@
{:name :wallet-saved-addresses
:component wallet-saved-addresses/view}
{:name :wallet-send
:component wallet-send/view}]
{:name :wallet-select-address
:options {:modalPresentationStyle :overCurrentContext}
:component wallet-select-address/view}]
(when config/quo-preview-enabled?
quo.preview/screens)

10
translations/en.json
View File

@ -2318,5 +2318,13 @@
"emoji-symbols": "Symbols",
"emoji-flags": "Flags",
"emoji-no-results-title": "No emojis match your search",
"emoji-no-results-description": "Try something like “rainbow”"
"emoji-no-results-description": "Try something like “rainbow”",
"send-to": "Send to",
"saved": "Saved",
"no-recent-transactions": "No recent transactions",
"make-one-it-is-easy-we-promise": "Make one, it’s easy, we promise!",
"no-saved-addresses": "No saved addresses",
"you-like-to-type-43-characters": "You like to type 43 characters?",
"no-other-accounts": "No other accounts",
"here-is-a-cat-in-a-box-instead": "Here’s a cat in a box instead"
}