diff --git a/src/quo/components/settings/settings_item/view.cljs b/src/quo/components/settings/settings_item/view.cljs index 80e1ab483e..70a109a34b 100644 --- a/src/quo/components/settings/settings_item/view.cljs +++ b/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 diff --git a/src/status_im/contexts/preview/quo/settings/settings_item.cljs b/src/status_im/contexts/preview/quo/settings/settings_item.cljs index 7bf067c88b..9e703e1a3a 100644 --- a/src/status_im/contexts/preview/quo/settings/settings_item.cljs +++ b/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"} diff --git a/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs b/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs index e467ff82f8..78cf6fe07a 100644 --- a/src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs +++ b/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 - {:token-display-name token-symbol - :amount amount - :account account - :type type - :recipient recipient - :route route - :to-network bridge-to-network - :image-url image-url - :transaction-type transaction-type - :collectible? collectible?}] - [user-summary - {:summary-type :status-account - :accessibility-label :summary-from-label - :label (i18n/label :t/from-capitalized) - :account-props from-account-props - :theme theme}] - [user-summary - {:summary-type (if (= transaction-type :tx/bridge) - :status-account - :account) - :accessibility-label :summary-to-label - :label (i18n/label :t/to-capitalized) - :account-props (if (= transaction-type :tx/bridge) - from-account-props - user-props) - :recipient recipient - :bridge-tx? (= transaction-type :tx/bridge) - :account-to? true - :theme theme}]]]])))) + [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 + :account account + :type type + :recipient recipient + :route route + :to-network bridge-to-network + :image-url image-url + :transaction-type transaction-type + :collectible? collectible?}] + [user-summary + {:summary-type :status-account + :accessibility-label :summary-from-label + :label (i18n/label :t/from-capitalized) + :account-props from-account-props + :theme theme}] + [user-summary + {:summary-type (if (= transaction-type :tx/bridge) + :status-account + :account) + :accessibility-label :summary-to-label + :label (i18n/label :t/to-capitalized) + :account-props (if (= transaction-type :tx/bridge) + from-account-props + user-props) + :recipient recipient + :bridge-tx? (= transaction-type :tx/bridge) + :account-to? true + :theme theme}]]]]])))) diff --git a/src/status_im/contexts/wallet/send/transaction_settings/style.cljs b/src/status_im/contexts/wallet/send/transaction_settings/style.cljs new file mode 100644 index 0000000000..677bca664e --- /dev/null +++ b/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}) diff --git a/src/status_im/contexts/wallet/send/transaction_settings/view.cljs b/src/status_im/contexts/wallet/send/transaction_settings/view.cljs new file mode 100644 index 0000000000..3395fa92be --- /dev/null +++ b/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)}]])) diff --git a/src/status_im/feature_flags.cljs b/src/status_im/feature_flags.cljs index 61a5e083e9..1a24061a8b 100644 --- a/src/status_im/feature_flags.cljs +++ b/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))