wallet: token value drawer (#17730)

* wallet: token value drawer

src/quo/components/inputs/input/view.cljs

@@ -150,7 +150,7 @@
               :auto-complete       :password
               :secure-text-entry   (not @password-shown?)
               :right-icon          {:style-fn  style/password-icon
-                                    :icon-name (if @password-shown? :i/hide :i/reveal)
+                                    :icon-name (if @password-shown? :i/hide-password :i/reveal)
                                     :on-press  #(swap! password-shown? not)})])))
 
 (defn input-internal

src/quo/components/list_items/token_value/view.cljs

@@ -14,7 +14,7 @@
 (defn- internal-view
   []
   (let [state (reagent/atom :default)]
-    (fn [{:keys [theme customization-color status token metrics? values on-press]}]
+    (fn [{:keys [theme customization-color status token metrics? values on-press on-long-press]}]
       (let [bg-opacity                                                      (case @state
                                                                               :active  10
                                                                               :pressed 5
@@ -28,6 +28,7 @@
                                  (reset! state :active)
                                  (js/setTimeout #(reset! state :default) 300)
                                  on-press)
+          :on-long-press       on-long-press
           :accessibility-label :container}
          [rn/view
           {:style {:flex-direction :row

src/status_im2/contexts/wallet/account/tabs/view.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.wallet.account.tabs.view
   (:require
-    [quo.core :as quo]
     [react-native.core :as rn]
     [status-im2.contexts.wallet.account.tabs.about.view :as about]
     [status-im2.contexts.wallet.account.tabs.dapps.view :as dapps]
@@ -8,13 +7,14 @@
     [status-im2.contexts.wallet.common.collectibles-tab.view :as collectibles]
     [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab]
     [status-im2.contexts.wallet.common.temp :as temp]
+    [status-im2.contexts.wallet.common.token-value.view :as token-value]
     [utils.i18n :as i18n]))
 
 (defn view
   [{:keys [selected-tab]}]
   (case selected-tab
     :assets       [rn/flat-list
-                   {:render-fn               quo/token-value
+                   {:render-fn               token-value/view
                     :data                    temp/tokens
                     :content-container-style {:padding-horizontal 8}}]
     :collectibles [collectibles/view]

src/status_im2/contexts/wallet/common/token_value/view.cljs

@@ -0,0 +1,40 @@
+(ns status-im2.contexts.wallet.common.token-value.view
+  (:require [quo.core :as quo]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn token-value-drawer
+  []
+  [:<>
+   [quo/action-drawer
+    [[{:icon                :i/buy
+       :accessibility-label :buy
+       :label               (i18n/label :t/buy)
+       :on-press            #(js/alert "to be implemented")
+       :right-icon          :i/external}
+      {:icon                :i/send
+       :accessibility-label :send
+       :label               (i18n/label :t/send)}
+      {:icon                :i/receive
+       :accessibility-label :receive
+       :label               (i18n/label :t/receive)}
+      {:icon                :i/bridge
+       :accessibility-label :bridge
+       :label               (i18n/label :t/bridge)}
+      {:icon                :i/settings
+       :accessibility-label :settings
+       :label               (i18n/label :t/manage-tokens)
+       :add-divider?        true}
+      {:icon                :i/hide
+       :accessibility-label :hide
+       :label               (i18n/label :t/hide)}]]]])
+
+(defn view
+  [item]
+  [quo/token-value
+   (merge item
+          {:on-long-press
+           #(rf/dispatch
+             [:show-bottom-sheet
+              {:content       token-value-drawer
+               :selected-item (fn [] [quo/token-value item])}])})])

src/status_im2/contexts/wallet/home/view.cljs

@@ -8,6 +8,7 @@
     [status-im2.contexts.wallet.common.activity-tab.view :as activity]
     [status-im2.contexts.wallet.common.collectibles-tab.view :as collectibles]
     [status-im2.contexts.wallet.common.temp :as temp]
+    [status-im2.contexts.wallet.common.token-value.view :as token-value]
     [status-im2.contexts.wallet.home.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -74,7 +75,7 @@
          :on-change      #(reset! selected-tab %)}]
        (case @selected-tab
          :assets       [rn/flat-list
-                        {:render-fn               quo/token-value
+                        {:render-fn               token-value/view
                          :data                    temp/tokens
                          :key                     :assets-list
                          :content-container-style {:padding-horizontal 8}}]

translations/en.json

@@ -2359,5 +2359,6 @@
     "account-name-input-placeholder": "Account name",
     "network-preferences": "Network preferences",
     "network-preferences-desc": "Select which network this address is happy to receive funds on",
-    "layer-2": "Layer 2"
+    "layer-2": "Layer 2",
+    "manage-tokens": "Manage tokens"
 }