From 6bb8f1204159433c20335b65e3cece959913c250 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Mon, 23 Oct 2023 20:49:53 -0300 Subject: [PATCH] feat: select asset screen ui Signed-off-by: Brian Sztamfater --- .../wallet/send/select_address/view.cljs | 6 +- .../wallet/send/select_asset/style.cljs | 28 ++++ .../wallet/send/select_asset/view.cljs | 127 ++++++++++++++++++ src/status_im2/navigation/screens.cljs | 4 + 4 files changed, 163 insertions(+), 2 deletions(-) create mode 100644 src/status_im2/contexts/wallet/send/select_asset/style.cljs create mode 100644 src/status_im2/contexts/wallet/send/select_asset/view.cljs diff --git a/src/status_im2/contexts/wallet/send/select_address/view.cljs b/src/status_im2/contexts/wallet/send/select_address/view.cljs index 80c094a0e2d..11d97406313 100644 --- a/src/status_im2/contexts/wallet/send/select_address/view.cljs +++ b/src/status_im2/contexts/wallet/send/select_address/view.cljs @@ -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) @@ -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 diff --git a/src/status_im2/contexts/wallet/send/select_asset/style.cljs b/src/status_im2/contexts/wallet/send/select_asset/style.cljs new file mode 100644 index 00000000000..22bd826c537 --- /dev/null +++ b/src/status_im2/contexts/wallet/send/select_asset/style.cljs @@ -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}) diff --git a/src/status_im2/contexts/wallet/send/select_asset/view.cljs b/src/status_im2/contexts/wallet/send/select_asset/view.cljs new file mode 100644 index 00000000000..83a63167a60 --- /dev/null +++ b/src/status_im2/contexts/wallet/send/select_asset/view.cljs @@ -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)) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index e808835ca01..e7ad07948b6 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -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])) @@ -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