Skip to content

Commit

Permalink
Add a button to address watch screen;
Browse files Browse the repository at this point in the history
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
  • Loading branch information
tumanov-alex committed Nov 1, 2023
1 parent 972e1ee commit 3764304
Show file tree
Hide file tree
Showing 11 changed files with 119 additions and 22 deletions.
2 changes: 1 addition & 1 deletion doc/export-icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 6 additions & 4 deletions src/quo/components/drawers/bottom_actions/view.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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}
Expand All @@ -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
Expand Down
4 changes: 4 additions & 0 deletions src/status_im/ui/screens/screens.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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]))

Expand Down Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions src/status_im2/contexts/emoji_picker/utils.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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)))
17 changes: 17 additions & 0 deletions src/status_im2/contexts/wallet/add_watch_only_account/style.cljs
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
(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})
62 changes: 62 additions & 0 deletions src/status_im2/contexts/wallet/add_watch_only_account/views.cljs
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
(ns status-im2.contexts.wallet.add-watch-only-account.views
(:require
[reagent.core :as reagent]
[react-native.safe-area :as safe-area]
[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 %)
safe-bottom (safe-area/get-bottom)]
(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}
[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")}]]
[quo/button
{:customization-color @account-color
:disabled? (clojure.string/blank? @account-name)
:on-press #(re-frame/dispatch [:navigate-to
:wallet-account])
:container-style (style/button-container safe-bottom)} (i18n/label :t/create-account)]])))

(def address-add-edit (quo.theme/with-theme view-internal))
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
:z-index -1})

(def account-avatar-container
{:padding-horizontal 20
{:flex 1
:padding-horizontal 20
:padding-top 12})

(def reaction-button-container
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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})
Original file line number Diff line number Diff line change
@@ -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]
[re-frame.core :as re-frame]
[quo.core :as quo]
[quo.theme :as quo.theme]
[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 "")
{:keys [customization-color]} (rf/sub [:profile/multiaccount])]
(fn []
[rn/view
{:style {:flex 1
Expand All @@ -37,12 +39,17 @@
:container-style {:margin-right 12
:flex 1}
:weight :monospace
:on-change #(reset! input-value %)
:on-change #(reset! input-value (.. % -nativeEvent -text))
: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))
2 changes: 1 addition & 1 deletion src/status_im2/navigation/screens.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
2 changes: 2 additions & 0 deletions translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down

0 comments on commit 3764304

Please sign in to comment.