feat: select asset screen ui

Signed-off-by: Brian Sztamfater <brian@status.im>

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]]]]}))

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

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})

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))

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

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"
 }