Custom Option Menu for TX Parameters on SEND Flow (#21657)

* wip

* wip

* custom menu implemented

* sheets closing and navigation

* Hidden under feature flag

* emoji added to settings item

src/quo/components/settings/settings_item/view.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.settings.settings-item.view
   (:require
+    [clojure.string :as string]
     [quo.components.avatars.icon-avatar :as icon-avatar]
     [quo.components.avatars.user-avatar.view :as user-avatar]
     [quo.components.buttons.button.view :as button]
@@ -51,6 +52,11 @@
     :status         [status-description props]
     nil))
 
+(defn emoji-component
+  [image-props]
+  [rn/text
+   (when image-props (string/trim image-props))])
+
 (defn image-component
   [{:keys [image image-props description tag blur?]}]
   (let [theme (quo.theme/use-theme)]
@@ -61,6 +67,7 @@
        :avatar      [user-avatar/user-avatar image-props]
        :icon-avatar [icon-avatar/icon-avatar image-props]
        :token       [token/view image-props]
+       :emoji       [emoji-component image-props]
        nil)]))
 
 (defn tag-component

src/status_im/contexts/preview/quo/settings/settings_item.cljs

@@ -37,7 +37,9 @@
               {:key   :avatar
                :value :avatar}
               {:key   :icon-avatar
-               :value :icon-avatar}]}
+               :value :icon-avatar}
+              {:key   :emoji
+               :value :emoji}]}
    {:key     :description
     :type    :select
     :options [{:key   nil
@@ -77,6 +79,7 @@
                          :icon-avatar {:size  :medium
                                        :icon  :i/placeholder
                                        :color :blue}
+                         :emoji       "🍿"
                          nil)
     :description-props (case (:description data)
                          :text           {:text "This is a description"}

src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs

@@ -9,7 +9,9 @@
     [status-im.common.standard-authentication.core :as standard-auth]
     [status-im.contexts.wallet.common.utils :as utils]
     [status-im.contexts.wallet.send.transaction-confirmation.style :as style]
+    [status-im.contexts.wallet.send.transaction-settings.view :as transaction-settings]
     [status-im.contexts.wallet.send.utils :as send-utils]
+    [status-im.feature-flags :as ff]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
     [utils.security.core :as security]))
@@ -179,6 +181,18 @@
        [rn/activity-indicator {:style {:flex 1}}]
        route-loaded?
        [:<>
+        (when (ff/enabled? ::ff/wallet.transaction-params)
+          [quo/button
+           {:icon-only?          true
+            :type                :outline
+            :size                32
+            :inner-style         {:opacity 1}
+            :accessibility-label :advanced-button
+            :container-style     {:margin-right 8}
+            :on-press            #(rf/dispatch
+                                   [:show-bottom-sheet
+                                    {:content transaction-settings/settings-sheet}])}
+           :i/advanced])
         [data-item
          {:title    (i18n/label :t/est-time)
           :subtitle (i18n/label :t/time-in-mins {:minutes (str estimated-time-min)})}]
@@ -268,33 +282,37 @@
            :gradient-cover?          true
            :customization-color      (:color account)}
           [rn/view
-           [transaction-title
+           [rn/pressable
-            {:token-display-name token-symbol
+            {:on-press #(rf/dispatch [:navigate-to-within-stack
-             :amount             amount
+                                      [:screen/wallet.transaction-details
-             :account            account
+                                       :screen/wallet.transaction-confirmation]])}
-             :type               type
+            [transaction-title
-             :recipient          recipient
+             {:token-display-name token-symbol
-             :route              route
+              :amount             amount
-             :to-network         bridge-to-network
+              :account            account
-             :image-url          image-url
+              :type               type
-             :transaction-type   transaction-type
+              :recipient          recipient
-             :collectible?       collectible?}]
+              :route              route
-           [user-summary
+              :to-network         bridge-to-network
-            {:summary-type        :status-account
+              :image-url          image-url
-             :accessibility-label :summary-from-label
+              :transaction-type   transaction-type
-             :label               (i18n/label :t/from-capitalized)
+              :collectible?       collectible?}]
-             :account-props       from-account-props
+            [user-summary
-             :theme               theme}]
+             {:summary-type        :status-account
-           [user-summary
+              :accessibility-label :summary-from-label
-            {:summary-type        (if (= transaction-type :tx/bridge)
+              :label               (i18n/label :t/from-capitalized)
-                                    :status-account
+              :account-props       from-account-props
-                                    :account)
+              :theme               theme}]
-             :accessibility-label :summary-to-label
+            [user-summary
-             :label               (i18n/label :t/to-capitalized)
+             {:summary-type        (if (= transaction-type :tx/bridge)
-             :account-props       (if (= transaction-type :tx/bridge)
+                                     :status-account
-                                    from-account-props
+                                     :account)
-                                    user-props)
+              :accessibility-label :summary-to-label
-             :recipient           recipient
+              :label               (i18n/label :t/to-capitalized)
-             :bridge-tx?          (= transaction-type :tx/bridge)
+              :account-props       (if (= transaction-type :tx/bridge)
-             :account-to?         true
+                                     from-account-props
-             :theme               theme}]]]]))))
+                                     user-props)
+              :recipient           recipient
+              :bridge-tx?          (= transaction-type :tx/bridge)
+              :account-to?         true
+              :theme               theme}]]]]]))))

src/status_im/contexts/wallet/send/transaction_settings/style.cljs

@@ -0,0 +1,14 @@
+(ns status-im.contexts.wallet.send.transaction-settings.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn prop-text
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(def content-line
+  {:flex-direction  :row
+   :margin-top      2
+   :align-items     :center
+   :column-gap      4
+   :justify-content :flex-start})

src/status_im/contexts/wallet/send/transaction_settings/view.cljs

@@ -0,0 +1,108 @@
+(ns status-im.contexts.wallet.send.transaction-settings.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+
+(defn custom-settings-sheet
+  [_]
+  [rn/view
+   [quo/drawer-top
+    {:title "Custom"}]
+   [quo/category
+    {:list-type :settings
+     :data      [{:title             "Max base fee"
+                  :description-props {:text "8.2 GWEI - €1.45"}
+                  :image             :none
+                  :description       :text
+                  :action            :arrow
+                  :on-press          #()
+                  :label             :text
+                  :preview-size      :size-32}
+                 {:title             "Priority fee"
+                  :description-props {:text "0.06 GWEI - €0.03"}
+                  :image             :none
+                  :description       :text
+                  :action            :arrow
+                  :on-press          #()
+                  :label             :text
+                  :preview-size      :size-32}
+                 {:title             "Gas amount"
+                  :description-props {:text "31,500 UNITS"}
+                  :image             :none
+                  :description       :text
+                  :action            :arrow
+                  :on-press          #()
+                  :label             :text
+                  :preview-size      :size-32}
+                 {:title             "Nonce"
+                  :description-props {:text "22"}
+                  :image             :none
+                  :description       :text
+                  :action            :arrow
+                  :on-press          #()
+                  :label             :text
+                  :preview-size      :size-32}]}]
+   [quo/bottom-actions
+    {:actions          :one-action
+     :button-one-props {:on-press #(rf/dispatch [:hide-bottom-sheet])}
+     :button-one-label (i18n/label :t/confirm)}]])
+
+(defn settings-sheet
+  [_]
+  (let [[selected-id set-selected-id] (rn/use-state :normal)]
+    [rn/view
+     [quo/drawer-top
+      {:title "Transaction settings"}]
+     [quo/category
+      {:list-type :settings
+       :data      [{:title             "Normal ~60s"
+                    :image-props       "🍿"
+                    :description-props {:text "€1.45"}
+                    :image             :emoji
+                    :description       :text
+                    :action            :selector
+                    :action-props      {:type     :radio
+                                        :checked? (= :normal selected-id)}
+                    :on-press          #(set-selected-id :normal)
+                    :label             :text
+                    :preview-size      :size-32}
+                   {:title             "Fast ~40s"
+                    :image-props       "🚗"
+                    :description-props {:text "€1.65"}
+                    :image             :emoji
+                    :description       :text
+                    :action            :selector
+                    :action-props      {:type     :radio
+                                        :checked? (= :fast selected-id)}
+                    :on-press          #(set-selected-id :fast)
+                    :label             :text
+                    :preview-size      :size-32}
+                   {:title             "Urgent ~15s"
+                    :image-props       "🚀"
+                    :description-props {:text "€1.85"}
+                    :image             :emoji
+                    :description       :text
+                    :action            :selector
+                    :action-props      {:type     :radio
+                                        :checked? (= :urgent selected-id)}
+                    :on-press          #(set-selected-id :urgent)
+                    :label             :text
+                    :preview-size      :size-32}
+                   {:title             "Custom"
+                    :image-props       :i/edit
+                    :description-props {:text "Set your own fees and nonce"}
+                    :image             :icon
+                    :description       :text
+                    :action            :arrow
+                    :on-press          #(rf/dispatch
+                                         [:show-bottom-sheet
+                                          {:content custom-settings-sheet}])
+                    :label             :text
+                    :preview-size      :size-32}]}]
+     [quo/bottom-actions
+      {:actions          :one-action
+       :button-one-props {:on-press #(rf/dispatch [:hide-bottom-sheet])}
+       :button-one-label (i18n/label :t/confirm)}]]))

src/status_im/feature_flags.cljs

@@ -30,7 +30,8 @@
    ::wallet.long-press-watch-only-asset (enabled-in-env? :FLAG_LONG_PRESS_WATCH_ONLY_ASSET_ENABLED)
    ::wallet.saved-addresses             (enabled-in-env? :WALLET_SAVED_ADDRESSES)
    ::wallet.wallet-connect              (enabled-in-env? :FLAG_WALLET_CONNECT_ENABLED)
-   ::wallet.custom-network-amounts      (enabled-in-env? :FLAG_WALLET_CUSTOM_NETWORK_AMOUNTS_ENABLED)})
+   ::wallet.custom-network-amounts      (enabled-in-env? :FLAG_WALLET_CUSTOM_NETWORK_AMOUNTS_ENABLED)
+   ::wallet.transaction-params          (enabled-in-env? :FLAG_WALLET_TRANSACTION_PARAMS_ENABLED)})
 
 (defonce ^:private feature-flags-config
   (reagent/atom initial-flags))