diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index c367ab7295..0e3031bb6e 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -374,6 +374,7 @@ ;;validation :invalid-phone "Invalid phone number" :amount "Amount" + :invalid-number "Invalid number" ;;transactions :confirm "Confirm" diff --git a/src/status_im/ui/screens/wallet/send/events.cljs b/src/status_im/ui/screens/wallet/send/events.cljs index 9cf27dd525..fb08086a04 100644 --- a/src/status_im/ui/screens/wallet/send/events.cljs +++ b/src/status_im/ui/screens/wallet/send/events.cljs @@ -327,14 +327,14 @@ {:db (assoc-in db [:wallet :send-transaction :signing?] signing?)})) (handlers/register-handler-fx - :wallet.send/edit-gas - (fn [{:keys [db]} [_ gas]] - {:db (assoc-in db [:wallet :edit :gas] (money/bignumber gas))})) - -(handlers/register-handler-fx - :wallet.send/edit-gas-price - (fn [{:keys [db]} [_ gas-price]] - {:db (assoc-in db [:wallet :edit :gas-price] (money/bignumber gas-price))})) + :wallet.send/edit-value + (fn [{:keys [db]} [_ key value]] + (let [bn-value (money/bignumber value) + data (if bn-value + {:value bn-value + :invalid? false} + {:invalid? true})] + {:db (update-in db [:wallet :edit key] merge data)}))) (handlers/register-handler-fx :wallet.send/set-gas-details @@ -352,9 +352,7 @@ :wallet.send/reset-gas-default (fn [{:keys [db]}] {:dispatch [:wallet/update-gas-price true] - :db (update-in db [:wallet :edit] - assoc - :gas (ethereum/estimate-gas (get-in db [:wallet :send-transaction :symbol])))})) + :db (assoc-in db [:wallet :edit :gas] nil)})) (defn update-gas-price [db edit?] {:update-gas-price {:web3 (:web3 db) diff --git a/src/status_im/ui/screens/wallet/send/styles.cljs b/src/status_im/ui/screens/wallet/send/styles.cljs index bc5fe77e6f..487bc0fb53 100644 --- a/src/status_im/ui/screens/wallet/send/styles.cljs +++ b/src/status_im/ui/screens/wallet/send/styles.cljs @@ -74,6 +74,10 @@ {:margin-top 24 :margin-bottom 16}) +(def gas-container-wrapper + {:flex 1 + :flex-direction :row}) + (def gas-input-wrapper {:align-items :center :justify-content :space-between diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index 72b211c3d6..8dda3d203e 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -24,7 +24,8 @@ [status-im.utils.utils :as utils] [status-im.transport.utils :as transport.utils] [status-im.utils.ethereum.tokens :as tokens] - [status-im.utils.ethereum.core :as ethereum])) + [status-im.utils.ethereum.core :as ethereum] + [clojure.string :as string])) (defn sign-later-popup [from-chat?] @@ -117,31 +118,41 @@ (defview transaction-fee [] (letsubs [{:keys [amount symbol] :as transaction} [:wallet.send/transaction] network [:get-current-account-network] - edit [:wallet/edit]] - (let [gas (or (:gas edit) (:gas transaction)) - gas-price (or (:gas-price edit) (:gas-price transaction)) + {gas-edit :gas + gas-price-edit :gas-price} [:wallet/edit]] + (let [gas (or (:value gas-edit) (:gas transaction)) + gas-price (or (:value gas-price-edit) (:gas-price transaction)) {:keys [decimals]} (tokens/asset-for (ethereum/network->chain-keyword network) symbol)] [wallet.components/simple-screen {:status-toolbar-type :modal-wallet} [toolbar true act/close-white (i18n/label :t/wallet-transaction-fee)] [react/view components.styles/flex [react/view {:flex-direction :row} - [wallet.components/cartouche {} - (i18n/label :t/gas-limit) - [react/view styles/gas-input-wrapper - [react/text-input (merge styles/transaction-fee-input - {:on-change-text #(re-frame/dispatch [:wallet.send/edit-gas %]) - :default-value (str (money/to-fixed gas)) - :accessibility-label :gas-limit-input})]]] - [wallet.components/cartouche {} - (i18n/label :t/gas-price) - [react/view styles/gas-input-wrapper - [react/text-input (merge styles/transaction-fee-input - {:on-change-text #(re-frame/dispatch [:wallet.send/edit-gas-price (money/->wei :gwei %)]) - :default-value (str (money/to-fixed (money/wei-> :gwei gas-price))) - :accessibility-label :gas-price-input})] - [wallet.components/cartouche-secondary-text - (i18n/label :t/gwei)]]]] + + [react/view styles/gas-container-wrapper + [wallet.components/cartouche {} + (i18n/label :t/gas-limit) + [react/view styles/gas-input-wrapper + [react/text-input (merge styles/transaction-fee-input + {:on-change-text #(re-frame/dispatch [:wallet.send/edit-value :gas %]) + :default-value (str (money/to-fixed gas)) + :accessibility-label :gas-limit-input})]]] + (when (:invalid? gas-edit) + [tooltip/tooltip (i18n/label :t/invalid-number)])] + + [react/view styles/gas-container-wrapper + [wallet.components/cartouche {} + (i18n/label :t/gas-price) + [react/view styles/gas-input-wrapper + [react/text-input (merge styles/transaction-fee-input + {:on-change-text #(re-frame/dispatch [:wallet.send/edit-value :gas-price (money/->wei :gwei %)]) + :default-value (str (money/to-fixed (money/wei-> :gwei gas-price))) + :accessibility-label :gas-price-input})] + [wallet.components/cartouche-secondary-text + (i18n/label :t/gwei)]]] + (when (:invalid? gas-price-edit) + [tooltip/tooltip (i18n/label :t/invalid-number)])]] + [react/view styles/transaction-fee-info [react/view styles/transaction-fee-info-icon [react/text {:style styles/transaction-fee-info-icon-text} "?"]] @@ -162,12 +173,16 @@ [wallet.components/cartouche-text-content (str (money/to-fixed (max-fee gas gas-price))) (i18n/label :t/eth)]]]] + [bottom-buttons/bottom-buttons styles/fee-buttons [button/button {:on-press #(re-frame/dispatch [:wallet.send/reset-gas-default]) :accessibility-label :reset-to-default-button} (i18n/label :t/reset-default)] - [button/button {:on-press #(do (re-frame/dispatch [:wallet.send/set-gas-details gas gas-price]) (act/default-handler)) - :accessibility-label :done-button} + [button/button {:on-press #(do (re-frame/dispatch [:wallet.send/set-gas-details gas gas-price]) + (act/default-handler)) + :accessibility-label :done-button + :disabled? (or (:invalid? gas-edit) + (:invalid? gas-price-edit))} (i18n/label :t/done)]]]]))) (defn- advanced-cartouche [{:keys [gas gas-price]} modal?]