diff --git a/src/status_im2/contexts/wallet/events.cljs b/src/status_im2/contexts/wallet/events.cljs index 2e7d4c3001c3..28d2065537b7 100644 --- a/src/status_im2/contexts/wallet/events.cljs +++ b/src/status_im2/contexts/wallet/events.cljs @@ -139,4 +139,7 @@ (rf/reg-event-fx :wallet/select-send-address (fn [{:keys [db]} [address]] - {:db (assoc db :wallet/send-address address)})) + {:db (assoc db :wallet/send-address address) + :fx [[:dispatch + [:navigate-to-within-stack + [:wallet-select-asset :wallet-select-address]]]]})) 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 bb11625fc9fc..36405c0afe8a 100644 --- a/src/status_im2/contexts/wallet/send/select_address/view.cljs +++ b/src/status_im2/contexts/wallet/send/select_address/view.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.wallet.send.select-address.view (:require - [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] @@ -97,10 +96,8 @@ (defn- suggestion-component [] (fn [{:keys [type ens address accounts] :as local-suggestion} _ _ _] - (let [props {:on-press (fn [] - (let [address (if accounts (:address (first accounts)) address)] - (when-not ens (rf/dispatch [:wallet/select-send-address address])) - (js/alert "Not implemented yet"))) + (let [props {:on-press #(let [address (if accounts (:address (first accounts)) address)] + (when-not ens (rf/dispatch [:wallet/select-send-address address]))) :active-state? false}] (cond (= type types/saved-address) @@ -135,10 +132,9 @@ input-focused? (reagent/atom false)] (fn [] (let [valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))] - (rn/use-effect (fn [] - (fn [] + #_(rn/use-effect (fn [] (rf/dispatch [:wallet/clean-scanned-address]) - (rf/dispatch [:wallet/clean-local-suggestions])))) + (rf/dispatch [:wallet/clean-local-suggestions]))) [rn/scroll-view {:content-container-style (style/container margin-top) :keyboard-should-persist-taps :never @@ -172,7 +168,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 000000000000..22bd826c5375 --- /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 000000000000..46b5f4c69ac1 --- /dev/null +++ b/src/status_im2/contexts/wallet/send/select_asset/view.cljs @@ -0,0 +1,88 @@ +(ns status-im2.contexts.wallet.send.select-asset.view + (:require + [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-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- asset-component + [] + (fn [_ _ _ _] + (let [_ {: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- tab-view + [selected-tab] + (case selected-tab + :tab/assets [asset-list] + :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 + [] + (fn [] + [rn/view])) + +(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-within-stack :wallet-select-asset])] + (fn [] + [rn/scroll-view + {:content-container-style (style/container margin-top) + :keyboard-should-persist-taps :never + :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} + :data tabs-data + :on-change #(reset! selected-tab %)}] + [search-input] + [tab-view @selected-tab]]))) + +(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 dd4144813297..b7a55173a745 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -46,6 +46,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])) @@ -267,6 +268,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 d275ac443d76..82066f7b7cbe 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2364,5 +2364,6 @@ "network-preferences-desc": "Select which network this address is happy to receive funds on", "layer-2": "Layer 2", "manage-tokens": "Manage tokens", - "sign transactions": "sign transactions" + "sign transactions": "sign transactions", + "select-asset": "Select asset" }