diff --git a/doc/export-icons.md b/doc/export-icons.md index 3b9aa7da02ff..9d12f5cab438 100644 --- a/doc/export-icons.md +++ b/doc/export-icons.md @@ -4,7 +4,7 @@ ![](images/export-icons/export-icons.gif) -1. Export from figma 2 pngs 2x and 3x put them in `./resources/images/icons` +1. Export from figma 2 pngs 2x and 3x put them in `./resources/images/icons2` 2. if necessary, rename file so that filename contains only lower case chars, e.g. `"Icon-Name@2x.png"` should be renamed to `"icon_name@2x.png"`. 3. In the app `icon_name.png` still can be accessed as `icon-name`, so in order to use can add the next code: ```clojure diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index ea1d100fe7e3..2b06080440c4 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/src/quo/components/drawers/bottom_actions/view.cljs @@ -7,8 +7,9 @@ [react-native.core :as rn])) (def default-props - {:button-one-type :primary - :button-two-type :grey}) + {:button-one-type :primary + :button-two-type :grey + :customization-color :blue}) (defn- view-internal "Options: @@ -23,7 +24,7 @@ :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered" [props] (let [{:keys [actions description button-one-label button-two-label - button-one-props button-two-props theme scroll?]} + button-one-props button-two-props theme scroll? customization-color]} (merge default-props props)] [:<> [rn/view {:style style/buttons-container} @@ -43,7 +44,8 @@ :container-style style/button-container :background (when scroll? :blur) :theme theme - :accessibility-label :button-one} + :accessibility-label :button-one + :customization-color customization-color} button-one-props) button-one-label]] (when description diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index e0ab98d15749..8784e96a3a39 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -73,6 +73,7 @@ [status-im.ui.screens.wallet.settings.views :as wallet-settings] [status-im.ui.screens.wallet.swap.views :as wallet.swap] [status-im.ui.screens.wallet.transactions.views :as wallet-transactions] + [status-im2.contexts.wallet.add-watch-only-account.views :as address-add-edit] [status-im2.contexts.chat.group-details.view :as group-details] [utils.i18n :as i18n])) @@ -219,6 +220,9 @@ :options {:insets {:top? true}} :component wallet.swap/asset-selector} + {:name :address-to-watch-edit + :component address-add-edit/address-add-edit} + ;;PROFILE {:name :my-profile diff --git a/src/status_im2/contexts/emoji_picker/utils.cljs b/src/status_im2/contexts/emoji_picker/utils.cljs index 2f84e8383f0a..f02f4a02eac5 100644 --- a/src/status_im2/contexts/emoji_picker/utils.cljs +++ b/src/status_im2/contexts/emoji_picker/utils.cljs @@ -16,3 +16,7 @@ (some #(string/includes? % cleaned-query) tags))) emoji-data) (partition-all constants/emojis-per-row)))) + +(defn random-emoji + [] + (:unicode (rand-nth emoji-data))) diff --git a/src/status_im2/contexts/wallet/add_watch_only_account/style.cljs b/src/status_im2/contexts/wallet/add_watch_only_account/style.cljs new file mode 100644 index 000000000000..2e70570177bb --- /dev/null +++ b/src/status_im2/contexts/wallet/add_watch_only_account/style.cljs @@ -0,0 +1,20 @@ +(ns status-im2.contexts.wallet.add-watch-only-account.style) + +(def container + {:flex 1}) + +(def input + {:margin-right 12 + :flex 1}) + +(def data-item + {:margin-horizontal 20 + :padding-vertical 8 + :padding-horizontal 12}) + +(defn button-container + [bottom] + {:position :absolute + :bottom (+ bottom 12) + :left 20 + :right 20}) diff --git a/src/status_im2/contexts/wallet/add_watch_only_account/views.cljs b/src/status_im2/contexts/wallet/add_watch_only_account/views.cljs new file mode 100644 index 000000000000..841b6df1aaf8 --- /dev/null +++ b/src/status_im2/contexts/wallet/add_watch_only_account/views.cljs @@ -0,0 +1,61 @@ +(ns status-im2.contexts.wallet.add-watch-only-account.views + (:require + [reagent.core :as reagent] + [clojure.string :as string] + [utils.i18n :as i18n] + [re-frame.core :as re-frame] + [react-native.core :as rn] + [quo.core :as quo] + [quo.theme :as quo.theme] + [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as + create-or-edit-account] + [utils.re-frame :as rf] + [status-im2.contexts.emoji-picker.utils :as emoji-picker.utils] + [status-im2.contexts.wallet.add-watch-only-account.style :as style])) + +(defn- view-internal + [] + (let [{:keys [address]} (rf/sub [:get-screen-params]) + {:keys [customization-color]} (rf/sub [:profile/multiaccount]) + number-of-accounts (count (rf/sub [:profile/wallet-accounts])) + account-name (reagent/atom (i18n/label :t/default-account-name + {:number (inc number-of-accounts)})) + address-title (i18n/label :t/watch-address) + account-color (reagent/atom customization-color) + account-emoji (reagent/atom (emoji-picker.utils/random-emoji)) + on-change-name #(reset! account-name %) + on-change-color #(reset! account-color %) + on-change-emoji #(reset! account-emoji %)] + (fn [] + [rn/view {:style style/container} + [create-or-edit-account/view + {:page-nav-right-side [{:icon-name :i/info + :on-press + #(js/alert + "Get info (to be + implemented)")}] + :account-name @account-name + :account-emoji @account-emoji + :account-color @account-color + :on-change-name on-change-name + :on-change-color on-change-color + :on-change-emoji on-change-emoji + :bottom-action? true + :bottom-action-label :t/create-account + :bottom-action-props {:customization-color @account-color + :disabled? (string/blank? @account-name) + :on-press #(re-frame/dispatch [:navigate-to + :wallet-account])}} + [quo/data-item + {:card? true + :right-icon :i/advanced + :icon-right? true + :emoji @account-emoji + :title address-title + :subtitle address + :status :default + :size :default + :container-style style/data-item + :on-press #(js/alert "To be implemented")}]]]))) + +(def address-add-edit (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/address_watch/style.cljs b/src/status_im2/contexts/wallet/select_address_to_watch/style.cljs similarity index 52% rename from src/status_im2/contexts/wallet/address_watch/style.cljs rename to src/status_im2/contexts/wallet/select_address_to_watch/style.cljs index 219b9d5fb2d6..66e0306ee9b9 100644 --- a/src/status_im2/contexts/wallet/address_watch/style.cljs +++ b/src/status_im2/contexts/wallet/select_address_to_watch/style.cljs @@ -1,4 +1,4 @@ -(ns status-im2.contexts.wallet.address-watch.style) +(ns status-im2.contexts.wallet.select-address-to-watch.style) (def header-container {:margin-horizontal 20 @@ -12,9 +12,7 @@ (defn button-container [bottom] - {:position :absolute - :bottom (+ bottom 12) - :left 20 - :right 20 - :justify-content :center - :align-items :center}) + {:position :absolute + :bottom (+ bottom 12) + :left 20 + :right 20}) diff --git a/src/status_im2/contexts/wallet/address_watch/view.cljs b/src/status_im2/contexts/wallet/select_address_to_watch/view.cljs similarity index 61% rename from src/status_im2/contexts/wallet/address_watch/view.cljs rename to src/status_im2/contexts/wallet/select_address_to_watch/view.cljs index 787dd7194a05..ba20e8baf916 100644 --- a/src/status_im2/contexts/wallet/address_watch/view.cljs +++ b/src/status_im2/contexts/wallet/select_address_to_watch/view.cljs @@ -1,21 +1,23 @@ -(ns status-im2.contexts.wallet.address-watch.view +(ns status-im2.contexts.wallet.select-address-to-watch.view (:require [clojure.string :as string] [quo.core :as quo] [quo.theme :as quo.theme] + [re-frame.core :as re-frame] [react-native.clipboard :as clipboard] [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] - [status-im2.contexts.wallet.address-watch.style :as style] + [status-im2.contexts.wallet.select-address-to-watch.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) (defn view-internal [] - (let [top (safe-area/get-top) - bottom (safe-area/get-bottom) - input-value (reagent/atom "")] + (let [top (safe-area/get-top) + bottom (safe-area/get-bottom) + input-value (reagent/atom "") + customization-color (rf/sub [:profile/customization-color])] (fn [] [rn/view {:style {:flex 1 @@ -37,12 +39,18 @@ :container-style {:margin-right 12 :flex 1} :weight :monospace - :on-change #(reset! input-value %) + :on-change-text #(reset! input-value %) :default-value @input-value}] [quo/button {:icon-only? true :type :outline} :i/scan]] - [rn/view {:style (style/button-container bottom)} - [quo/text "[WIP] Bottom Actions"]]]))) + [quo/button + {:customization-color customization-color + :disabled? (clojure.string/blank? @input-value) + :on-press #(re-frame/dispatch [:navigate-to + :address-to-watch-edit + {:address @input-value}]) + :container-style (style/button-container bottom)} + (i18n/label :t/continue)]]))) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index a2acffaf4887..bdae537ffc46 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -38,7 +38,7 @@ [status-im2.contexts.syncing.setup-syncing.view :as settings-setup-syncing] [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing] [status-im2.contexts.wallet.account.view :as wallet-accounts] - [status-im2.contexts.wallet.address-watch.view :as wallet-address-watch] + [status-im2.contexts.wallet.select-address-to-watch.view :as wallet-address-watch] [status-im2.contexts.wallet.collectible.view :as wallet-collectible] [status-im2.contexts.wallet.create-account.edit-derivation-path.view :as wallet-edit-derivation-path] [status-im2.contexts.wallet.create-account.view :as wallet-create-account] diff --git a/translations/en.json b/translations/en.json index ae0328c04c7f..8bc001179c0f 100644 --- a/translations/en.json +++ b/translations/en.json @@ -292,6 +292,7 @@ "create-profile": "Create profile", "create-profile-password-info-box-title": "About your profile password", "create-profile-password-info-box-description": "Your Status keys are the foundation of your self-sovereign identity in Web3. You have complete control over these keys, which you can use to sign transactions, access your data, and interact with Web3 services.\n\nYour keys are always securely stored on your device and protected by your Status profile password. Status doesn't know your password and can't reset it for you. If you forget your password, you may lose access to your Status profile and wallet funds.\n\nRemember your Status password and don't share it with anyone.", + "create-account": "Create account", "create-a-pin": "Create a 6-digit passcode", "create-a-puk": "Create a 12-digit PUK", "create-group-chat": "Create group chat", @@ -1563,6 +1564,7 @@ "delete-account": "Delete account", "delete-keys-keycard": "Delete keys from Keycard", "watch-only": "Watch-only", + "watch-address": "Watch address", "cant-report-bug": "Can't report a bug", "mail-should-be-configured": "Mail client should be configured", "check-on-block-explorer": "Check on block explorer",