diff --git a/src/status_im/contexts/wallet/send/save_address/style.cljs b/src/status_im/contexts/wallet/send/save_address/style.cljs new file mode 100644 index 0000000000..1243076f22 --- /dev/null +++ b/src/status_im/contexts/wallet/send/save_address/style.cljs @@ -0,0 +1,39 @@ +(ns status-im.contexts.wallet.send.save-address.style) + +(def title-input-container + {:padding-horizontal 20 + :padding-top 12 + :padding-bottom 16}) + +(def account-avatar-container + {:padding-horizontal 20 + :padding-top 12}) + +(def color-picker-top-divider + {:margin-bottom 12}) + +(def color-picker-container + {:padding-vertical 12}) + +(def section-container + {:padding-horizontal 20 + :padding-bottom 4}) + +(def color-picker + {:padding-horizontal 20 + :padding-top 12}) + +(def color-picker-bottom-divider + {:padding-top 8 + :padding-bottom 12}) + +(def save-address-button + {:padding-horizontal 20}) + +(def data-item + {:margin-horizontal 20 + :padding-vertical 8}) + +(def address-container + {:padding-top 8 + :padding-bottom 12}) diff --git a/src/status_im/contexts/wallet/send/save_address/view.cljs b/src/status_im/contexts/wallet/send/save_address/view.cljs new file mode 100644 index 0000000000..248bf63660 --- /dev/null +++ b/src/status_im/contexts/wallet/send/save_address/view.cljs @@ -0,0 +1,89 @@ +(ns status-im.contexts.wallet.send.save-address.view + (:require + [clojure.string :as string] + [quo.core :as quo] + [quo.theme] + [react-native.core :as rn] + [status-im.common.floating-button-page.view :as floating-button-page] + [status-im.contexts.wallet.send.save-address.style :as style] + [status-im.contexts.wallet.sheets.network-preferences.view + :as network-preferences] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn- address-view + [address] + (let [network-details (rf/sub [:wallet/network-preference-details])] + [rn/view {:style style/address-container} + [quo/data-item + {:status :default + :size :default + :subtitle-type :default + :label :none + :blur? false + :icon-right? true + :right-icon :i/advanced + :card? true + :title (i18n/label :t/address) + :custom-subtitle (rn/use-callback + (fn [] [quo/address-text + {:networks network-details + :address address + :format :long}])) + :on-press (rn/use-callback + (fn [] + (rf/dispatch [:show-bottom-sheet + {:content + (fn [] + [network-preferences/view + {:on-save (fn [])}])}]))) + :container-style style/data-item}]])) + +(defn view + [] + (let [[address-label set-address-label] (rn/use-state "") + [address-color set-address-color] (rn/use-state :blue) + placeholder (i18n/label :t/address-name)] + [floating-button-page/view + {:footer-container-padding 0 + :header [quo/page-nav + {:type :no-title + :background :blur + :icon-name :i/close + :on-press (rn/use-callback #(rf/dispatch [:navigate-back])) + :accessibility-label :save-address-top-bar}] + :footer [quo/button + {:accessibility-label :save-address-button + :type :primary + :container-style style/save-address-button} + (i18n/label :t/save-address)] + :customization-color address-color + :gradient-cover? true} + [rn/view + {:style style/account-avatar-container} + [quo/user-avatar + {:full-name (if (string/blank? address-label) + placeholder + address-label) + :customization-color address-color + :size :big}]] + [quo/title-input + {:blur? true + :auto-focus true + :max-length 24 + :size :heading-1 + :placeholder placeholder + :default-value address-label + :on-change-text set-address-label + :customization-color address-color + :container-style style/title-input-container}] + [quo/divider-line {:container-style style/color-picker-top-divider}] + [quo/section-label + {:section (i18n/label :t/colour) + :container-style style/section-container}] + [quo/color-picker + {:default-selected address-color + :on-change set-address-color + :container-style style/color-picker}] + [quo/divider-line {:container-style style/color-picker-bottom-divider}] + [address-view "0xshivek"]])) diff --git a/src/status_im/contexts/wallet/send/transaction_progress/view.cljs b/src/status_im/contexts/wallet/send/transaction_progress/view.cljs index 366e691070..22828774a4 100644 --- a/src/status_im/contexts/wallet/send/transaction_progress/view.cljs +++ b/src/status_im/contexts/wallet/send/transaction_progress/view.cljs @@ -25,6 +25,23 @@ (some (fn [[_k v]] (= (:status v) :confirmed)) transaction-details) :confirmed :else nil)) +(defn- footer + [{:keys [color leave-page]}] + (let [save-address-visible? false] + [quo/bottom-actions + {:actions (if save-address-visible? :two-actions :one-action) + :button-two-label (i18n/label :t/save-address) + :button-two-props {:type :grey + :icon-left :i/contact-book + :accessibility-label :save-address + :on-press (rn/use-callback + #(rf/dispatch [:open-modal :screen/wallet.save-address]))} + :button-one-label (i18n/label :t/done) + :button-one-props {:customization-color color + :type :primary + :accessibility-label :done + :on-press leave-page}}])) + (defn view [] (let [leave-page #(rf/dispatch [:wallet/close-transaction-progress-page]) @@ -40,10 +57,9 @@ :margin-top (safe-area/get-top) :on-press leave-page :accessibility-label :top-bar}] - :footer [quo/button - {:customization-color color - :on-press leave-page} - (i18n/label :t/done)] + :footer [footer + {:color color + :leave-page leave-page}] :customization-color color :gradient-cover? true} [rn/view {:style style/content-container} diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index cfee478b11..46f9a4911c 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -71,6 +71,7 @@ [status-im.contexts.wallet.edit-account.view :as wallet-edit-account] [status-im.contexts.wallet.saved-addresses.view :as wallet-saved-addresses] [status-im.contexts.wallet.scan-account.view :as wallet-scan-address] + [status-im.contexts.wallet.send.save-address.view :as wallet-save-address] [status-im.contexts.wallet.send.select-address.view :as wallet-select-address] [status-im.contexts.wallet.send.select-asset.view :as wallet-select-asset] [status-im.contexts.wallet.send.send-amount.view :as wallet-send-input-amount] @@ -383,6 +384,10 @@ {:name :screen/wallet.saved-addresses :component wallet-saved-addresses/view} + {:name :screen/wallet.save-address + :options {:sheet? true} + :component wallet-save-address/view} + {:name :screen/wallet.send-input-amount :options {:modalPresentationStyle :overCurrentContext :insets {:top? true diff --git a/translations/en.json b/translations/en.json index 0960fe6495..8cf52a8778 100644 --- a/translations/en.json +++ b/translations/en.json @@ -14,6 +14,7 @@ "account-color": "Account color", "added-to-group-chat": "Added to group chat", "added-you-to": "added you to", + "address-name": "Address name", "anyone": "Anyone", "messages-from-contacts-only-subtitle": "Only people you added as contacts can start a new chat with you or invite you to a group", "messages-gap-warning": "Some messages might be missing", @@ -1249,6 +1250,7 @@ "reveal-sync-code": "Reveal sync code", "revoke-access": "Revoke access", "save": "Save", + "save-address": "Save address", "save-bio": "Save bio", "save-colour": "Save colour", "save-name": "Save name", @@ -1971,6 +1973,7 @@ "wallet-connect": "Wallet Connect", "reject": "Reject", "manage-connections": "Manage connections from within Application Connections", + "contact-request-was-ignored": "Contact request ignored", "wallet-manage-app-connections": "Manage app connections", "connection-request": "Connection Request", "disconnect": "Disconnect", @@ -1982,7 +1985,6 @@ "contact-request-was-sent": "Contact request sent", "contact-request-sent-to": "Contact request sent to", "contact-request-was-accepted": "Contact request accepted", - "contact-request-was-ignored": "Contact request ignored", "contact-request-is-now-a-contact": "is now a contact", "contact-request-removed-you-as-contact": "removed you as a contact", "contact-request-removed-as-contact": "removed as a contact",