diff --git a/src/status_im/contexts/wallet/account/tabs/view.cljs b/src/status_im/contexts/wallet/account/tabs/view.cljs index 172de0e43e..e3b4e466f6 100644 --- a/src/status_im/contexts/wallet/account/tabs/view.cljs +++ b/src/status_im/contexts/wallet/account/tabs/view.cljs @@ -7,18 +7,20 @@ [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}] + :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..c18e1a0075 100644 --- a/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs +++ b/src/status_im/contexts/wallet/common/collectibles_tab/view.cljs @@ -9,28 +9,30 @@ [utils.re-frame :as rf])) (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) - [empty-tab/view - {:title (i18n/label :t/no-collectibles) - :description (i18n/label :t/no-collectibles-description) - :image (resources/get-themed-image :no-collectibles theme)}] - [rn/flat-list - {:data collectible-list - :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]))}])}]))) + [{:keys [theme collectibles filtered?]}] + (cond + (and filtered? (empty? collectibles)) + [rn/view] + + (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 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]))}])}])) (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..e6b3313f18 100644 --- a/src/status_im/contexts/wallet/home/tabs/view.cljs +++ b/src/status_im/contexts/wallet/home/tabs/view.cljs @@ -4,12 +4,14 @@ [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}] + [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 bc63cc75c8..227b9679f8 100644 --- a/src/status_im/contexts/wallet/send/select_asset/view.cljs +++ b/src/status_im/contexts/wallet/send/select_asset/view.cljs @@ -3,9 +3,9 @@ [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.send.select-asset.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -17,13 +17,12 @@ (defn- asset-component [] (fn [token _ _ _] - (let [on-press - #(rf/dispatch [:wallet/send-select-token - {:token token - :stack-id :wallet-select-asset}]) + (let [on-press #(rf/dispatch [:wallet/send-select-token + {:token token + :stack-id :wallet-select-asset}]) total-balance-formatted (.toFixed (:total-balance token) 2) - balance-fiat-formatted (.toFixed (:total-balance-fiat token) 2) - currency-symbol (rf/sub [:profile/currency-symbol])] + balance-fiat-formatted (.toFixed (:total-balance-fiat token) 2) + currency-symbol (rf/sub [:profile/currency-symbol])] [quo/token-network {:token (:symbol token) :label (:name token) @@ -44,34 +43,45 @@ :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-filtered (rf/sub [:wallet/current-viewing-account-collectibles-filtered + search-text])] + [collectibles-tab/view + {:collectibles collectibles-filtered + :filtered? true}])) + +(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 @@ -94,9 +104,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..3c9c208b13 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,7 @@ (->> 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/last-collectible-details @@ -57,3 +58,14 @@ (let [address (:address (first (:ownership collectible))) account (get-in wallet [:accounts address])] account))) + +(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))))