Skip to content

Commit

Permalink
feat: select asset screen ui
Browse files Browse the repository at this point in the history 
Signed-off-by: Brian Sztamfater <brian@status.im>
  • Loading branch information
@briansztamfater
briansztamfater committed Oct 24, 2023
1 parent 2a0a3c7 commit 6bb8f12
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 2 deletions.
6 changes: 4 additions & 2 deletions src/status_im2/contexts/wallet/send/select_address/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@
(defn- suggestion-component
[]
(fn [{:keys [type ens] :as local-suggestion} _ _ _]
(let [props {:on-press #(js/alert "Not implemented yet")
(let [props {:on-press #(rf/dispatch [:navigate-to-within-stack
[:wallet-select-asset :wallet-select-address]])
:active-state? false}]
(cond
(= type types/saved-address)
Expand Down Expand Up @@ -168,7 +169,8 @@
:type :primary
:disabled? (not valid-ens-or-address?)
:container-style style/button
:on-press #(js/alert "Not implemented yet")}
:on-press #(rf/dispatch [:navigate-to-within-stack
[:wallet-select-asset :wallet-select-address]])}
(i18n/label :t/continue)])]
[:<>
[quo/tabs
Expand Down
28 changes: 28 additions & 0 deletions src/status_im2/contexts/wallet/send/select_asset/style.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
(ns status-im2.contexts.wallet.send.select-asset.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})

(def button
{:justify-self :flex-end
:margin-bottom 46
:margin-horizontal 20})
127 changes: 127 additions & 0 deletions src/status_im2/contexts/wallet/send/select_asset/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
(ns status-im2.contexts.wallet.send.select-asset.view
(:require
[clojure.string :as string]
[quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im2.constants :as constants]
[status-im2.contexts.wallet.item-types :as types]
[status-im2.contexts.wallet.send.select-address.style :as style]
[utils.debounce :as debounce]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[status-im2.contexts.quo-preview.inputs.search-input :as search-input]))

(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- search-input
[input-value input-focused? valid-ens-or-address?]
(fn []
(let [scanned-address (rf/sub [:wallet/scanned-address])]
[quo/address-input
{:on-focus #(reset! input-focused? true)
:on-blur #(reset! input-focused? false)
:on-scan #(rf/dispatch [:open-modal :scan-address])
:ens-regex constants/regx-ens
:address-regex constants/regx-address
:scanned-value scanned-address
:on-detect-ens #(debounce/debounce-and-dispatch [:wallet/search-ens-local-suggestions
%]
300)
:on-detect-address #(debounce/debounce-and-dispatch
[:wallet/search-address-local-suggestions %]
300)
:on-change-text (fn [text]
(when-not (= scanned-address text)
(rf/dispatch [:wallet/clean-scanned-address]))
(rf/dispatch [:wallet/clean-local-suggestions])
(reset! input-value text))
:valid-ens-or-address? valid-ens-or-address?}])))

(defn- asset-component
[]
(fn [asset _ _ _]
(let [props {:on-press #(js/alert "Not implemented yet")
:active-state? false}]
[rn/view])))

(defn- asset-list
[]
(fn []
(let [local-suggestion (rf/sub [:wallet/local-suggestions])]
[rn/view {:style {:flex 1}}
[rn/flat-list
{:data local-suggestion
:content-container-style {:flex-grow 1}
:key-fn :id
:on-scroll-to-index-failed identity
:render-fn asset-component}]])))

(defn- f-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 %)
input-value (reagent/atom "")
input-focused? (reagent/atom false)]
(fn []
(rn/use-effect (fn []
(fn []
(rf/dispatch [:wallet/clean-scanned-address])
(rf/dispatch [:wallet/clean-local-suggestions]))))
[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
:account-switcher {:customization-color :purple
:on-press #(js/alert "Not implemented yet")
:state :default
:emoji "🍑"}}]
[quo/text-combinations
{:title (i18n/label :t/send-to)
:container-style style/title-container
:title-accessibility-label :title-label}]
[asset-list]])))

(defn- view-internal
[]
[:f> f-view-internal])

(def view (quo.theme/with-theme view-internal))
4 changes: 4 additions & 0 deletions src/status_im2/navigation/screens.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
[status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
[status-im2.contexts.wallet.scan-account.view :as scan-address]
[status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
[status-im2.contexts.wallet.send.select-asset.view :as wallet-select-asset]
[status-im2.navigation.options :as options]
[status-im2.navigation.transitions :as transitions]))

Expand Down Expand Up @@ -266,6 +267,9 @@
:options {:modalPresentationStyle :overCurrentContext}
:component wallet-select-address/view}

{:name :wallet-select-asset
:component wallet-select-asset/view}

{:name :scan-address
:options (merge
options/dark-screen
Expand Down

0 comments on commit 6bb8f12

Please sign in to comment.