diff --git a/src/status_im/contexts/wallet/account/tabs/view.cljs b/src/status_im/contexts/wallet/account/tabs/view.cljs index 172de0e43e..a941a6be2c 100644 --- a/src/status_im/contexts/wallet/account/tabs/view.cljs +++ b/src/status_im/contexts/wallet/account/tabs/view.cljs @@ -7,18 +7,24 @@ [status-im.contexts.wallet.common.activity-tab.view :as activity] [status-im.contexts.wallet.common.collectibles-tab.view :as collectibles] [status-im.contexts.wallet.common.empty-tab.view :as empty-tab] - [utils.i18n :as i18n])) + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (defn view [{:keys [selected-tab]}] - [rn/view {:style {:flex 1}} - (case selected-tab - :assets [assets/view] - :collectibles [collectibles/view] - :activity [activity/view] - :permissions [empty-tab/view - {:title (i18n/label :t/no-permissions) - :description (i18n/label :t/no-collectibles-description) - :placeholder? true}] - :dapps [dapps/view] - [about/view])]) + (let [collectible-list (rf/sub [:wallet/current-viewing-account-collectibles])] + [rn/view {:style {:flex 1}} + (case selected-tab + :assets [assets/view] + :collectibles [collectibles/view + {:collectibles collectible-list + :on-collectible-press (fn [id] + (rf/dispatch [:wallet/get-collectible-details id]) + (rf/dispatch [:navigate-to :wallet-collectible]))}] + :activity [activity/view] + :permissions [empty-tab/view + {:title (i18n/label :t/no-permissions) + :description (i18n/label :t/no-collectibles-description) + :placeholder? true}] + :dapps [dapps/view] + [about/view])])) diff --git a/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs b/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs index d1363de92f..f80eabec50 100644 --- a/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs +++ b/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs @@ -5,32 +5,34 @@ [react-native.core :as rn] [status-im.common.resources :as resources] [status-im.contexts.wallet.common.empty-tab.view :as empty-tab] - [utils.i18n :as i18n] - [utils.re-frame :as rf])) + [utils.i18n :as i18n])) (defn- view-internal - [{:keys [theme]}] - (let [specific-address (rf/sub [:wallet/current-viewing-account-address]) - collectible-list (if specific-address - (rf/sub [:wallet/collectibles-per-account specific-address]) - (rf/sub [:wallet/all-collectibles]))] - (if (empty? collectible-list) + [{:keys [theme collectibles filtered? on-collectible-press]}] + (let [no-results-match-query? (and filtered? (empty? collectibles))] + (cond + no-results-match-query? + [rn/view {:style {:flex 1 :justify-content :center}} + [quo/empty-state + {:title (i18n/label :t/nothing-found) + :description (i18n/label :t/try-to-search-something-else) + :image (resources/get-themed-image :no-collectibles theme)}]] + + (empty? collectibles) [empty-tab/view {:title (i18n/label :t/no-collectibles) :description (i18n/label :t/no-collectibles-description) :image (resources/get-themed-image :no-collectibles theme)}] + + :else [rn/flat-list - {:data collectible-list + {:data collectibles :style {:flex 1} :content-container-style {:align-items :center} :num-columns 2 :render-fn (fn [{:keys [preview-url id]}] [quo/collectible {:images [preview-url] - :on-press (fn [] - (rf/dispatch [:wallet/get-collectible-details id]) - (rf/dispatch - [:navigate-to - :wallet-collectible]))}])}]))) + :on-press #(on-collectible-press id)}])}]))) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/home/tabs/view.cljs b/src/status_im/contexts/wallet/home/tabs/view.cljs index 536d91b394..6c27845277 100644 --- a/src/status_im/contexts/wallet/home/tabs/view.cljs +++ b/src/status_im/contexts/wallet/home/tabs/view.cljs @@ -4,12 +4,18 @@ [status-im.contexts.wallet.common.activity-tab.view :as activity] [status-im.contexts.wallet.common.collectibles-tab.view :as collectibles] [status-im.contexts.wallet.home.tabs.assets.view :as assets] - [status-im.contexts.wallet.home.tabs.style :as style])) + [status-im.contexts.wallet.home.tabs.style :as style] + [utils.re-frame :as rf])) (defn view [{:keys [selected-tab]}] - [rn/view {:style style/container} - (case selected-tab - :assets [assets/view] - :collectibles [collectibles/view] - [activity/view])]) + (let [collectible-list (rf/sub [:wallet/all-collectibles])] + [rn/view {:style style/container} + (case selected-tab + :assets [assets/view] + :collectibles [collectibles/view + {:collectibles collectible-list + :on-collectible-press (fn [id] + (rf/dispatch [:wallet/get-collectible-details id]) + (rf/dispatch [:navigate-to :wallet-collectible]))}] + [activity/view])])) diff --git a/src/status_im/contexts/wallet/send/select_asset/view.cljs b/src/status_im/contexts/wallet/send/select_asset/view.cljs index bff8aefb7e..89a360b98d 100644 --- a/src/status_im/contexts/wallet/send/select_asset/view.cljs +++ b/src/status_im/contexts/wallet/send/select_asset/view.cljs @@ -1,11 +1,12 @@ (ns status-im.contexts.wallet.send.select-asset.view (:require + [clojure.string :as string] [quo.core :as quo] [quo.theme :as quo.theme] [react-native.core :as rn] - [react-native.safe-area :as safe-area] [reagent.core :as reagent] [status-im.contexts.wallet.common.account-switcher.view :as account-switcher] + [status-im.contexts.wallet.common.collectibles-tab.view :as collectibles-tab] [status-im.contexts.wallet.common.utils :as utils] [status-im.contexts.wallet.send.select-asset.style :as style] [utils.i18n :as i18n] @@ -18,14 +19,13 @@ (defn- asset-component [] (fn [token _ _ {:keys [currency currency-symbol]}] - (let [on-press - #(rf/dispatch [:wallet/send-select-token - {:token token - :stack-id :wallet-select-asset}]) - token-units (utils/total-token-units-in-all-chains token) + (let [on-press #(rf/dispatch [:wallet/send-select-token + {:token token + :stack-id :wallet-select-asset}]) + token-units (utils/total-token-units-in-all-chains token) crypto-formatted (utils/get-standard-crypto-format token token-units) - fiat-value (utils/total-token-fiat-value currency token) - fiat-formatted (utils/get-standard-fiat-format crypto-formatted currency-symbol fiat-value)] + fiat-value (utils/total-token-fiat-value currency token) + fiat-formatted (utils/get-standard-fiat-format crypto-formatted currency-symbol fiat-value)] [quo/token-network {:token (:symbol token) :label (:name token) @@ -50,34 +50,49 @@ :on-scroll-to-index-failed identity :render-fn asset-component}])) -(defn- tab-view - [search-text selected-tab] - (case selected-tab - :tab/assets [asset-list 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 (safe-area/get-top))}])) - (defn- search-input + [search-text on-change-text] + [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 collectibles-grid [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}]]))) + (let [collectibles (rf/sub [:wallet/current-viewing-account-collectibles-filtered search-text]) + search-performed? (not (string/blank? search-text))] + [collectibles-tab/view + {:collectibles collectibles + :filtered? search-performed? + :on-collectible-press (fn [collectible-id] + (js/alert (str "Collectible to send: \n" + collectible-id + "\nNavigation not implemented yet")))}])) + +(defn- tab-view + [search-text selected-tab on-change-text] + (let [unfiltered-collectibles (rf/sub [:wallet/current-viewing-account-collectibles]) + show-search-input? (or (= selected-tab :tab/assets) + (and (= selected-tab :tab/collectibles) + (seq unfiltered-collectibles)))] + [:<> + (when show-search-input? + [search-input search-text on-change-text]) + (case selected-tab + :tab/assets [asset-list search-text] + :tab/collectibles [collectibles-grid search-text])])) + (defn- f-view-internal [] - (let [selected-tab (reagent/atom (:id (first tabs-data))) - search-text (reagent/atom "") - on-close #(rf/dispatch [:navigate-back-within-stack - :wallet-select-asset])] + (let [selected-tab (reagent/atom (:id (first tabs-data))) + search-text (reagent/atom "") + on-change-text #(reset! search-text %) + on-change-tab #(reset! selected-tab %) + on-close #(rf/dispatch [:navigate-back-within-stack :wallet-select-asset])] (fn [] [rn/safe-area-view {:style style/container} [rn/scroll-view @@ -100,9 +115,8 @@ :container-style {:margin-horizontal 20 :margin-vertical 8} :data tabs-data - :on-change #(reset! selected-tab %)}] - [search-input search-text] - [tab-view @search-text @selected-tab]]]))) + :on-change on-change-tab}] + [tab-view @search-text @selected-tab on-change-text]]]))) (defn- view-internal [] diff --git a/src/status_im/subs/wallet/collectibles.cljs b/src/status_im/subs/wallet/collectibles.cljs index 0102540a31..a1f7bbdcc3 100644 --- a/src/status_im/subs/wallet/collectibles.cljs +++ b/src/status_im/subs/wallet/collectibles.cljs @@ -10,15 +10,17 @@ animation-url image-url)) +(defn add-collectibles-preview-url + [collectibles] + (map (fn [{:keys [collectible-data] :as collectible}] + (assoc collectible :preview-url (preview-url collectible-data))) + collectibles)) + (re-frame/reg-sub - :wallet/collectibles-per-account - :<- [:wallet] - (fn [wallet [_ address]] - (as-> wallet $ - (get-in $ [:accounts address :collectibles]) - (map (fn [{:keys [collectible-data] :as collectible}] - (assoc collectible :preview-url (preview-url collectible-data))) - $)))) + :wallet/current-viewing-account-collectibles + :<- [:wallet/current-viewing-account] + (fn [current-account] + (-> current-account :collectibles add-collectibles-preview-url))) (re-frame/reg-sub :wallet/all-collectibles @@ -27,8 +29,18 @@ (->> wallet :accounts (mapcat (comp :collectibles val)) - (map (fn [{:keys [collectible-data] :as collectible}] - (assoc collectible :preview-url (preview-url collectible-data))))))) + (add-collectibles-preview-url)))) + +(re-frame/reg-sub + :wallet/current-viewing-account-collectibles-filtered + :<- [:wallet/current-viewing-account-collectibles] + (fn [current-account-collectibles [_ search-text]] + (let [search-text-lower-case (string/lower-case search-text)] + (filter (fn [{{collection-name :name} :collection-data + {collectible-name :name} :collectible-data}] + (or (string/includes? (string/lower-case collection-name) search-text-lower-case) + (string/includes? (string/lower-case collectible-name) search-text-lower-case))) + current-account-collectibles)))) (re-frame/reg-sub :wallet/last-collectible-details diff --git a/src/status_im/subs/wallet/wallet.cljs b/src/status_im/subs/wallet/wallet.cljs index 0bdee64e89..a619a016d7 100644 --- a/src/status_im/subs/wallet/wallet.cljs +++ b/src/status_im/subs/wallet/wallet.cljs @@ -124,10 +124,10 @@ :<- [:wallet/balances] :<- [:profile/currency-symbol] (fn [[accounts current-viewing-account-address balances currency-symbol]] - (let [current-viewing-account (utils/get-account-by-address accounts current-viewing-account-address) - balance (get balances current-viewing-account-address) - formatted-balance (utils/prettify-balance currency-symbol balance)] - (-> current-viewing-account + (let [balance (get balances current-viewing-account-address) + formatted-balance (utils/prettify-balance currency-symbol balance)] + (-> accounts + (utils/get-account-by-address current-viewing-account-address) (assoc :balance balance :formatted-balance formatted-balance))))) diff --git a/translations/en.json b/translations/en.json index aa0f643aa3..8038213161 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1793,6 +1793,8 @@ "community-info-not-found": "Community information not found", "community-info": "Community info", "not-found": "Not found", + "nothing-found": "Nothing found", + "try-to-search-something-else": "Try to search something else", "activity": "Activity", "reject-and-delete": "Reject and delete", "accept-and-add": "Accept and add",