status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Volodymyr Kozieiev 2024-11-21 16:28:45 +00:00 committed by GitHub
parent fa0777e25e
commit 5442a8567c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 183 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/quo/components/settings/settings_item/view.cljs
View File

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

5
src/status_im/contexts/preview/quo/settings/settings_item.cljs
View File

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

20
src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs
View File

@ -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,6 +282,10 @@
:gradient-cover? true
:customization-color (:color account)}
[rn/view
[rn/pressable
{:on-press #(rf/dispatch [:navigate-to-within-stack
[:screen/wallet.transaction-details
:screen/wallet.transaction-confirmation]])}
[transaction-title
{:token-display-name token-symbol
:amount amount
@ -297,4 +315,4 @@
:recipient recipient
:bridge-tx? (= transaction-type :tx/bridge)
:account-to? true
:theme theme}]]]]))))
:theme theme}]]]]]))))

14
src/status_im/contexts/wallet/send/transaction_settings/style.cljs Normal file
View File

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

108
src/status_im/contexts/wallet/send/transaction_settings/view.cljs Normal file
View File

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

3
src/status_im/feature_flags.cljs
View File

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