feat: select asset screen ui

Signed-off-by: Brian Sztamfater <[email protected]>

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

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

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

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

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

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

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