From 99a856a6130d643c9f366679fbdee045eb4ad7ef 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 --- .../list_items/token_network/view.cljs | 2 +- .../contexts/wallet/account/view.cljs | 2 +- .../wallet/send/select_address/view.cljs | 19 ++- .../wallet/send/select_asset/style.cljs | 19 +++ .../wallet/send/select_asset/view.cljs | 136 ++++++++++++++++++ src/status_im2/navigation/screens.cljs | 4 + translations/en.json | 1 + 7 files changed, 174 insertions(+), 9 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/quo/components/list_items/token_network/view.cljs b/src/quo/components/list_items/token_network/view.cljs index 1aad33f33bb6..5d4d805c41ee 100644 --- a/src/quo/components/list_items/token_network/view.cljs +++ b/src/quo/components/list_items/token_network/view.cljs @@ -19,7 +19,7 @@ [preview-list/view {:type :network :size :size-14 - :number 3} + :number (count networks)} networks]]]) (defn- values diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index 3889f8e5b15e..2fbdf780f1b8 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/src/status_im2/contexts/wallet/account/view.cljs @@ -58,7 +58,7 @@ :customization-color :blue}] [quo/wallet-graph {:time-frame :empty}] [quo/wallet-ctas - {:send-action #(rf/dispatch [:open-modal :wallet-select-address]) + {:send-action #(rf/dispatch [:open-modal :wallet-select-address (:address account)]) :buy-action #(rf/dispatch [:show-bottom-sheet {:content buy-drawer}]) :bridge-action #(rf/dispatch [:open-modal :wallet-bridge])}] 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 ff042d09d750..8903af2b3423 100644 --- a/src/status_im2/contexts/wallet/send/select_address/view.cljs +++ b/src/status_im2/contexts/wallet/send/select_address/view.cljs @@ -50,7 +50,10 @@ send-address (rf/sub [:wallet/send-address]) valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))] [quo/address-input - {:on-focus #(reset! input-focused? true) + {:on-focus (fn [] + (when (empty? @input-value) + (rf/dispatch [:wallet/clean-local-suggestions])) + (reset! input-focused? true)) :on-blur #(reset! input-focused? false) :on-scan (fn [] (rn/dismiss-keyboard!) @@ -130,16 +133,15 @@ [] (let [margin-top (safe-area/get-top) selected-tab (reagent/atom (:id (first tabs-data))) - on-close #(rf/dispatch [:navigate-back]) + on-close (fn [] + (rf/dispatch [:wallet/clean-scanned-address]) + (rf/dispatch [:wallet/clean-local-suggestions]) + (rf/dispatch [:navigate-back])) on-change-tab #(reset! selected-tab %) input-value (reagent/atom "") input-focused? (reagent/atom false)] (fn [] (let [valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))] - (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 :handled @@ -173,7 +175,10 @@ :type :primary :disabled? (not valid-ens-or-address?) :container-style style/button - :on-press #(js/alert "Not implemented yet")} + :on-press (fn [] + (rf/dispatch [:wallet/select-send-address @input-value]) + (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 000000000000..93ec5d801ef8 --- /dev/null +++ b/src/status_im2/contexts/wallet/send/select_asset/style.cljs @@ -0,0 +1,19 @@ +(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 empty-container-style + {:justify-content :center + :flex 1 + :margin-bottom 44}) + +(def search-input-container + {:padding-horizontal 20 + :padding-vertical 8}) 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 000000000000..ff04cdb71c46 --- /dev/null +++ b/src/status_im2/contexts/wallet/send/select_asset/view.cljs @@ -0,0 +1,136 @@ +(ns status-im2.contexts.wallet.send.select-asset.view + (:require + [clojure.string :as string] + [quo.core :as quo] + [quo.foundations.resources :as quo.resources] + [quo.theme :as quo.theme] + [react-native.core :as rn] + [react-native.safe-area :as safe-area] + [reagent.core :as reagent] + [status-im2.contexts.wallet.send.select-asset.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(def tabs-data + [{:id :tab/assets :label (i18n/label :t/assets) :accessibility-label :assets-tab} + {:id :tab/collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}]) + +(defn- network-names + [balances-per-chain] + (mapv (fn [chain-id-keyword] + (let [chain-id-str (name chain-id-keyword) + chain-id (js/parseInt chain-id-str)] + (case chain-id + 10 {:source (quo.resources/get-network :optimism)} + 42161 {:source (quo.resources/get-network :arbitrum)} + 5 {:source (quo.resources/get-network :ethereum)} + 1 {:source (quo.resources/get-network :ethereum)} + :unknown))) ; Default case if the chain-id is not recognized + (keys balances-per-chain))) + +(defn- asset-component + [] + (fn [token _ _ _] + (let [on-press #(js/alert "Not implemented yet") + total-balance (reduce + + (map #(js/parseFloat (:balance %)) + (vals (:balancesPerChain token)))) + total-balance-formatted (.toFixed total-balance 2) + currency :usd + currency-symbol "$" + price-fiat-currency (get-in token [:marketValuesPerCurrency currency :price]) + balance-fiat (* total-balance price-fiat-currency) + balance-fiat-formatted (.toFixed balance-fiat 2) + networks-list (network-names (:balancesPerChain token))] + [quo/token-network + {:token (quo.resources/get-token (keyword (string/lower-case (:symbol token)))) + :label (:name token) + :token-value (str total-balance-formatted " " (:symbol token)) + :fiat-value (str currency-symbol balance-fiat-formatted) + :networks networks-list + :on-press on-press}]))) + +(defn- asset-list + [account-address search-text] + (let [tokens (rf/sub [:wallet/tokens]) + account-tokens (get tokens (keyword account-address)) + sorted-tokens (sort-by :name compare account-tokens) + filtered-tokens (filter #(or (string/starts-with? (string/lower-case (:name %)) + (string/lower-case search-text)) + (string/starts-with? (string/lower-case (:symbol %)) + (string/lower-case search-text))) + sorted-tokens)] + [rn/view {:style {:flex 1}} + [rn/flat-list + {:data filtered-tokens + :content-container-style {:padding-horizontal 8} + :keyboard-should-persist-taps :handled + :key-fn :id + :on-scroll-to-index-failed identity + :render-fn asset-component}]])) + +(defn- tab-view + [account search-text selected-tab] + (case selected-tab + :tab/assets [asset-list account search-text] + :tab/collectibles [quo/empty-state + {:title (i18n/label :t/no-collectibles) + :description (i18n/label :t/no-collectibles-description) + :placeholder? true + :container-style style/empty-container-style}])) + +(defn- search-input + [search-text] + (let [on-change-text #(reset! search-text %)] + (fn [] + [rn/view {:style style/search-input-container} + [quo/input + {:small? true + :placeholder (i18n/label :t/search-assets) + :icon-name :i/search + :value @search-text + :on-change-text on-change-text}]]))) + +(defn- f-view-internal + [account-address] + (let [margin-top (safe-area/get-top) + selected-tab (reagent/atom (:id (first tabs-data))) + search-text (reagent/atom "") + account-address (string/lower-case (or account-address + (rf/sub [:get-screen-params :wallet-accounts]))) + on-close #(rf/dispatch [:navigate-back-within-stack :wallet-select-asset])] + (fn [] + [rn/scroll-view + {:content-container-style (style/container margin-top) + :keyboard-should-persist-taps :handled + :scroll-enabled false} + [quo/page-nav + {:icon-name :i/arrow-left + :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/select-asset) + :container-style style/title-container + :title-accessibility-label :title-label}] + [quo/segmented-control + {:size 32 + :blur? false + :symbol false + :default-active :tab/assets + :container-style {:margin-horizontal 20 + :margin-vertical 8} + :data tabs-data + :on-change #(reset! selected-tab %)}] + [search-input search-text] + [tab-view account-address @search-text @selected-tab]]))) + +(defn- view-internal + [{:keys [account-address]}] + [:f> f-view-internal account-address]) + +(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 7b7c381bf138..15e9f39510f2 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -48,6 +48,7 @@ [status-im2.contexts.wallet.scan-account.view :as scan-address] [status-im2.contexts.wallet.select-address-to-watch.view :as wallet-address-watch] [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])) @@ -281,6 +282,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 diff --git a/translations/en.json b/translations/en.json index cfb80976e655..63dd7aa6fd84 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2376,5 +2376,6 @@ "derive-addresses": "Derive addresses", "address-activity": "This address has activity", "sign transactions": "sign transactions", + "select-asset": "Select asset", "search-assets": "Search assets" }