Add a button to address watch screen; (#17781)

Add account creation screen

remove icons

remove extra utility and create a new one that would use conventional way of getting an emoji

fix lint

Use button component instead of bottom-actions

Provide global customization color to buttons

Use conventional approach to extract account name

Move to another address

Move to another namespace

Refactor bottom-actions to have button props in maps

Update doc with new icon location

Add spaces between styles

Work on pr comments

Use :on-change-text instead of :on-change for input component
Subscribe to :profile/customization-color directly
Use bottom button from the create-or-edit-account wrapper

Remove extra code
Sort requires

Move ns to proper fileˆ

Fix styles
This commit is contained in:
Alex Tumanov 2023-11-07 16:40:24 +00:00 committed by GitHub
parent 188f7f461e
commit 569036c1d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 137 additions and 33 deletions

View File

@ -4,7 +4,7 @@
![](images/export-icons/export-icons.gif) ![](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"`. 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: 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 ```clojure

View File

@ -7,8 +7,9 @@
[react-native.core :as rn])) [react-native.core :as rn]))
(def default-props (def default-props
{:button-one-type :primary {:button-one-type :primary
:button-two-type :grey}) :button-two-type :grey
:customization-color :blue})
(defn- view-internal (defn- view-internal
"Options: "Options:
@ -23,7 +24,7 @@
:scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered" :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
[props] [props]
(let [{:keys [actions description button-one-label button-two-label (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)] (merge default-props props)]
[:<> [:<>
[rn/view {:style style/buttons-container} [rn/view {:style style/buttons-container}
@ -43,7 +44,8 @@
:container-style style/button-container :container-style style/button-container
:background (when scroll? :blur) :background (when scroll? :blur)
:theme theme :theme theme
:accessibility-label :button-one} :accessibility-label :button-one
:customization-color customization-color}
button-one-props) button-one-props)
button-one-label]] button-one-label]]
(when description (when description

View File

@ -16,3 +16,7 @@
(some #(string/includes? % cleaned-query) tags))) (some #(string/includes? % cleaned-query) tags)))
emoji-data) emoji-data)
(partition-all constants/emojis-per-row)))) (partition-all constants/emojis-per-row))))
(defn random-emoji
[]
(:unicode (rand-nth emoji-data)))

View File

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

View File

@ -0,0 +1,60 @@
(ns status-im2.contexts.wallet.add-watch-only-account.views
(:require
[clojure.string :as string]
[quo.core :as quo]
[quo.theme :as quo.theme]
[re-frame.core :as re-frame]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.emoji-picker.utils :as emoji-picker.utils]
[status-im2.contexts.wallet.add-watch-only-account.style :as style]
[status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
create-or-edit-account]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn- view-internal
[]
(let [{:keys [address]} (rf/sub [:get-screen-params])
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 :blue)
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))

View File

@ -1,19 +0,0 @@
(ns status-im2.contexts.wallet.address-watch.style)
(def header-container
{:margin-horizontal 20
:margin-top 12
:margin-bottom 20})
(def input-container
{:flex-direction :row
:padding-horizontal 20
:align-items :flex-end})
(def button-container
{:position :absolute
:bottom 12
:left 20
:right 20
:justify-content :center
:align-items :center})

View File

@ -38,7 +38,7 @@
{:padding-vertical 8}) {:padding-vertical 8})
(def color-picker (def color-picker
{:padding-horizontal 12}) {:padding-horizontal 20})
(def divider-2 (def divider-2
{:margin-top 4 {:margin-top 4

View File

@ -0,0 +1,18 @@
(ns status-im2.contexts.wallet.select-address-to-watch.style)
(def header-container
{:margin-horizontal 20
:margin-top 12
:margin-bottom 20})
(def input-container
{:flex-direction :row
:padding-horizontal 20
:align-items :flex-end})
(defn button-container
[bottom]
{:position :absolute
:bottom (- bottom 22)
:left 20
:right 20})

View File

@ -1,20 +1,27 @@
(ns status-im2.contexts.wallet.address-watch.view (ns status-im2.contexts.wallet.select-address-to-watch.view
(:require (:require
[clojure.string :as string] [clojure.string :as string]
[quo.core :as quo] [quo.core :as quo]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[re-frame.core :as re-frame]
[react-native.clipboard :as clipboard] [react-native.clipboard :as clipboard]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent] [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.i18n :as i18n]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn view-internal (defn view-internal
[] []
(let [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 [] (fn []
[rn/view {:style {:flex 1}} [rn/view
{:style {:flex 1
:margin-top top}}
[quo/page-nav [quo/page-nav
{:type :no-title {:type :no-title
:icon-name :i/close :icon-name :i/close
@ -32,12 +39,18 @@
:container-style {:margin-right 12 :container-style {:margin-right 12
:flex 1} :flex 1}
:weight :monospace :weight :monospace
:on-change #(reset! input-value %) :on-change-text #(reset! input-value %)
:default-value @input-value}] :default-value @input-value}]
[quo/button [quo/button
{:icon-only? true {:icon-only? true
:type :outline} :i/scan]] :type :outline} :i/scan]]
[rn/view {:style style/button-container} [quo/button
[quo/text "[WIP] Bottom Actions"]]]))) {: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)) (def view (quo.theme/with-theme view-internal))

View File

@ -39,13 +39,14 @@
[status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing] [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
[status-im2.contexts.wallet.account.bridge.view :as bridge] [status-im2.contexts.wallet.account.bridge.view :as bridge]
[status-im2.contexts.wallet.account.view :as wallet-accounts] [status-im2.contexts.wallet.account.view :as wallet-accounts]
[status-im2.contexts.wallet.address-watch.view :as wallet-address-watch] [status-im2.contexts.wallet.add-watch-only-account.views :as address-add-edit]
[status-im2.contexts.wallet.collectible.view :as wallet-collectible] [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.edit-derivation-path.view :as wallet-edit-derivation-path]
[status-im2.contexts.wallet.create-account.view :as wallet-create-account] [status-im2.contexts.wallet.create-account.view :as wallet-create-account]
[status-im2.contexts.wallet.edit-account.view :as wallet-edit-account] [status-im2.contexts.wallet.edit-account.view :as wallet-edit-account]
[status-im2.contexts.wallet.saved-address.view :as wallet-saved-address] [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
[status-im2.contexts.wallet.scan-account.view :as scan-address] [status-im2.contexts.wallet.scan-account.view :as scan-address]
[status-im2.contexts.wallet.select-address-to-watch.view :as wallet-address-watch]
[status-im2.contexts.wallet.send.select-address.view :as wallet-select-address] [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
[status-im2.navigation.options :as options] [status-im2.navigation.options :as options]
[status-im2.navigation.transitions :as transitions])) [status-im2.navigation.transitions :as transitions]))
@ -247,6 +248,9 @@
:options {:insets {:top? true}} :options {:insets {:top? true}}
:component wallet-accounts/view} :component wallet-accounts/view}
{:name :address-to-watch-edit
:component address-add-edit/address-add-edit}
{:name :wallet-edit-account {:name :wallet-edit-account
:component wallet-edit-account/view} :component wallet-edit-account/view}

View File

@ -292,6 +292,7 @@
"create-profile": "Create profile", "create-profile": "Create profile",
"create-profile-password-info-box-title": "About your profile password", "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-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-pin": "Create a 6-digit passcode",
"create-a-puk": "Create a 12-digit PUK", "create-a-puk": "Create a 12-digit PUK",
"create-group-chat": "Create group chat", "create-group-chat": "Create group chat",
@ -1564,6 +1565,7 @@
"delete-account": "Delete account", "delete-account": "Delete account",
"delete-keys-keycard": "Delete keys from Keycard", "delete-keys-keycard": "Delete keys from Keycard",
"watch-only": "Watch-only", "watch-only": "Watch-only",
"watch-address": "Watch address",
"cant-report-bug": "Can't report a bug", "cant-report-bug": "Can't report a bug",
"mail-should-be-configured": "Mail client should be configured", "mail-should-be-configured": "Mail client should be configured",
"check-on-block-explorer": "Check on block explorer", "check-on-block-explorer": "Check on block explorer",