From 36d1568a76514bb200936d335676ff690a23316f Mon Sep 17 00:00:00 2001 From: Julien Eluard Date: Mon, 28 Aug 2017 18:55:32 +0200 Subject: [PATCH] Fixed main wallet discrepancies --- .env | 2 +- .../src/status_im/react_native/resources.cljs | 3 + resources/icons/filter.svg | 7 + resources/images/assets/ethereum.png | Bin 0 -> 18718 bytes src/status_im/android/platform.cljs | 3 +- src/status_im/chat/new_chat/view.cljs | 21 +- src/status_im/chat/screen.cljs | 11 +- src/status_im/chat/views/actions.cljs | 2 +- src/status_im/chat/views/input/input.cljs | 2 +- .../action_button/action_button.cljs | 6 +- src/status_im/components/checkbox/styles.cljs | 19 ++ src/status_im/components/checkbox/view.cljs | 11 + src/status_im/components/context_menu.cljs | 30 +-- src/status_im/components/drawer/view.cljs | 2 +- .../components/icons/vector_icons.cljs | 74 +++--- src/status_im/components/list/styles.cljs | 6 +- src/status_im/components/list/views.cljs | 33 ++- src/status_im/components/styles.cljs | 7 +- src/status_im/components/tabs/views.cljs | 8 +- .../text_input_with_label/styles.cljs | 6 +- .../components/toolbar_new/actions.cljs | 34 +-- .../components/toolbar_new/styles.cljs | 38 +++- .../components/toolbar_new/view.cljs | 168 ++++++++++---- .../screens/transaction_details.cljs | 14 +- src/status_im/translations/en.cljs | 5 +- .../ui/screens/accounts/login/views.cljs | 12 +- src/status_im/ui/screens/accounts/views.cljs | 16 +- .../screens/chats_list/views/inner_item.cljs | 4 +- .../contacts/contact_list_modal/views.cljs | 27 ++- src/status_im/ui/screens/contacts/views.cljs | 2 +- src/status_im/ui/screens/db.cljs | 3 +- src/status_im/ui/screens/discover/views.cljs | 2 +- .../discover/views/search_results.cljs | 3 +- src/status_im/ui/screens/events.cljs | 2 +- src/status_im/ui/screens/group/views.cljs | 16 +- src/status_im/ui/screens/profile/views.cljs | 34 +-- src/status_im/ui/screens/wallet/db.cljs | 9 +- src/status_im/ui/screens/wallet/events.cljs | 23 +- .../ui/screens/wallet/history/styles.cljs | 6 +- .../ui/screens/wallet/history/views.cljs | 211 +++++++++--------- .../ui/screens/wallet/main/styles.cljs | 68 ++++-- .../ui/screens/wallet/main/views.cljs | 125 +++++++---- .../ui/screens/wallet/send/views.cljs | 22 +- src/status_im/ui/screens/wallet/subs.cljs | 8 + .../ui/screens/wallet/wallet_list/views.cljs | 27 +-- src/status_im/utils/utils.cljs | 3 - .../status_im/react_native/resources.cljs | 3 + 47 files changed, 686 insertions(+), 452 deletions(-) create mode 100644 resources/icons/filter.svg create mode 100644 resources/images/assets/ethereum.png create mode 100644 src/status_im/components/checkbox/styles.cljs create mode 100644 src/status_im/components/checkbox/view.cljs diff --git a/.env b/.env index 309e3262d2..3870f02d04 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ TESTFAIRY_ENABLED=0 -WALLET_WIP_ENABLED=0 \ No newline at end of file +WALLET_WIP_ENABLED=1 \ No newline at end of file diff --git a/react-native/src/status_im/react_native/resources.cljs b/react-native/src/status_im/react_native/resources.cljs index 44ac511fc4..7f0ffe3b8d 100644 --- a/react-native/src/status_im/react_native/resources.cljs +++ b/react-native/src/status_im/react_native/resources.cljs @@ -15,3 +15,6 @@ :ethlance (js/require "./resources/images/contacts/ethlance.png") :commiteth (js/require "./resources/images/contacts/commiteth.png") :etherplay (js/require "./resources/images/contacts/etherplay.png")}) + +(def assets + {:ethereum (js/require "./resources/images/assets/ethereum.png")}) \ No newline at end of file diff --git a/resources/icons/filter.svg b/resources/icons/filter.svg new file mode 100644 index 0000000000..7c799d7805 --- /dev/null +++ b/resources/icons/filter.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/resources/images/assets/ethereum.png b/resources/images/assets/ethereum.png new file mode 100644 index 0000000000000000000000000000000000000000..1a6146c2ec617d86b40b03b43b2e6fcd6ec6718f GIT binary patch literal 18718 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 literal 0 HcmV?d00001 diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index 1a2e4f3597..cc162cf3ba 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -23,8 +23,9 @@ :transaction {:height 0 :bar-style "light-content" :color styles/color-dark-blue-2} - :wallet {:height 0 + :wallet {:height 25 :bar-style "light-content" + :translucent? true :color styles/color-blue5}} :sized-text {:margin-top 0 :additional-height 0} diff --git a/src/status_im/chat/new_chat/view.cljs b/src/status_im/chat/new_chat/view.cljs index dc7f3116b8..b1bca15e68 100644 --- a/src/status_im/chat/new_chat/view.cljs +++ b/src/status_im/chat/new_chat/view.cljs @@ -17,17 +17,20 @@ (defn options-list [] [view actions-list - [action-button {:label (label :t/new-group-chat) - :icon [:icons/group_big {:color :blue}] - :on-press #(dispatch [:open-contact-toggle-list :chat-group])}] + [action-button {:label (label :t/new-group-chat) + :icon :icons/group-big + :icon-opts {:color :blue} + :on-press #(dispatch [:open-contact-toggle-list :chat-group])}] [action-separator] - [action-button {:label (label :t/new-public-group-chat) - :icon [:icons/public {:color :blue}] - :on-press #(dispatch [:navigate-to :new-public-chat])}] + [action-button {:label (label :t/new-public-group-chat) + :icon :icons/public + :icon-opts {:color :blue} + :on-press #(dispatch [:navigate-to :new-public-chat])}] [action-separator] - [action-button {:label (label :t/add-new-contact) - :icon [:icons/add {:color :blue}] - :on-press #(dispatch [:navigate-to :new-contact])}]]) + [action-button {:label (label :t/add-new-contact) + :icon :icons/add + :icon-opts {:color :blue} + :on-press #(dispatch [:navigate-to :new-contact])}]]) (defn contact-list-row [] (fn [row _ _] diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 75dc332a32..0bb9715a17 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -18,7 +18,7 @@ [status-im.utils.datetime :as time] [status-im.utils.platform :as platform :refer [platform-specific]] [status-im.components.invertible-scroll-view :refer [invertible-scroll-view]] - [status-im.components.toolbar-new.view :refer [toolbar]] + [status-im.components.toolbar-new.view :as toolbar] [status-im.chat.views.toolbar-content :refer [toolbar-content-view]] [status-im.chat.views.message.message :refer [chat-message]] [status-im.chat.views.message.datemark :refer [chat-datemark]] @@ -92,7 +92,7 @@ [touchable-highlight {:on-press #(dispatch [:set-chat-ui-props {:show-actions? false}])} [view st/action - [vi/icon :icons/dropdown_up]]] + [vi/icon :icons/dropdown-up]]] [touchable-highlight {:on-press #(dispatch [:set-chat-ui-props {:show-actions? true}])} [view st/action @@ -114,9 +114,10 @@ creating? [:get :accounts/creating-account?]] [view [status-bar] - [toolbar {:hide-nav? (or (empty? accounts) show-actions? creating?) - :custom-content [toolbar-content-view] - :custom-action [toolbar-action]}] + [toolbar/toolbar2 {:hide-nav? (or (empty? accounts) show-actions? creating?)} + toolbar/default-nav-back + [toolbar-content-view] + [toolbar-action]] [add-contact-bar]]) (defn get-intro-status-message [all-messages] diff --git a/src/status_im/chat/views/actions.cljs b/src/status_im/chat/views/actions.cljs index e3c0ebed5b..5f837062d2 100644 --- a/src/status_im/chat/views/actions.cljs +++ b/src/status_im/chat/views/actions.cljs @@ -29,7 +29,7 @@ {:title (label :t/members-title) :subtitle (members-text members) :icon :menu_group - :icon-style {:width 25 + :icon-opts {:width 25 :height 19} ;; TODO not implemented: action Members :handler nil}) diff --git a/src/status_im/chat/views/input/input.cljs b/src/status_im/chat/views/input/input.cljs index bdd6629814..2e6915e4c8 100644 --- a/src/status_im/chat/views/input/input.cljs +++ b/src/status_im/chat/views/input/input.cljs @@ -48,7 +48,7 @@ [view style/commands-list-icon (if show-suggestions? [vi/icon :icons/close] - [vi/icon :icons/commands_list])]]] + [vi/icon :icons/commands-list])]]] [scroll-view {:horizontal true :showsHorizontalScrollIndicator false :keyboardShouldPersistTaps :always} diff --git a/src/status_im/components/action_button/action_button.cljs b/src/status_im/components/action_button/action_button.cljs index cc18a2d560..b712cb1b4c 100644 --- a/src/status_im/components/action_button/action_button.cljs +++ b/src/status_im/components/action_button/action_button.cljs @@ -4,11 +4,11 @@ [status-im.components.icons.vector-icons :as vi] [status-im.components.react :as rn])) -(defn action-button [{:keys [label icon on-press label-style cyrcle-color]}] +(defn action-button [{:keys [label icon icon-opts on-press label-style cyrcle-color]}] [rn/touchable-highlight {:on-press on-press} [rn/view st/action-button [rn/view (st/action-button-icon-container cyrcle-color) - ((comp vec flatten vector) vi/icon icon)] + [vi/icon icon icon-opts]] [rn/view st/action-button-label-container [rn/text {:style (merge st/action-button-label label-style)} label]]]]) @@ -17,7 +17,7 @@ [rn/view st/action-button [rn/view st/action-button-icon-container-disabled [rn/view {:opacity 0.4} - ((comp vec flatten vector) vi/icon icon)]] + [vi/icon icon]]] [rn/view st/action-button-label-container [rn/text {:style st/action-button-label-disabled} label]]]) diff --git a/src/status_im/components/checkbox/styles.cljs b/src/status_im/components/checkbox/styles.cljs new file mode 100644 index 0000000000..9415d207f4 --- /dev/null +++ b/src/status_im/components/checkbox/styles.cljs @@ -0,0 +1,19 @@ +(ns status-im.components.checkbox.styles + (:require-macros [status-im.utils.styles :refer [defnstyle]]) + (:require [status-im.components.styles :as st])) + +(defnstyle icon-check-container [checked?] + {:background-color (if checked? st/color-light-blue st/color-gray5) + :alignItems :center + :justifyContent :center + :margin-right 16 + :android {:border-radius 2 + :width 17 + :height 17} + :ios {:border-radius 50 + :width 24 + :height 24}}) + +(def check-icon + {:width 12 + :height 12}) \ No newline at end of file diff --git a/src/status_im/components/checkbox/view.cljs b/src/status_im/components/checkbox/view.cljs new file mode 100644 index 0000000000..0fdbdd7bb0 --- /dev/null +++ b/src/status_im/components/checkbox/view.cljs @@ -0,0 +1,11 @@ +(ns status-im.components.checkbox.view + (:require [cljs.spec.alpha :as s] + [status-im.components.checkbox.styles :as cst] + [status-im.components.react :as rn] + [status-im.utils.platform :as p])) + +(defn checkbox [{:keys [on-press checked?]}] + [rn/touchable-highlight {:on-press on-press} + [rn/view (cst/icon-check-container checked?) + (when checked? + [rn/icon :check_on cst/check-icon])]]) \ No newline at end of file diff --git a/src/status_im/components/context_menu.cljs b/src/status_im/components/context_menu.cljs index 49b7006c94..750b7363ac 100644 --- a/src/status_im/components/context_menu.cljs +++ b/src/status_im/components/context_menu.cljs @@ -1,21 +1,15 @@ (ns status-im.components.context-menu (:require [reagent.core :as r] - [status-im.components.styles :as common] - [status-im.i18n :refer [label]] + [status-im.components.styles :as st] [status-im.utils.platform :refer [platform-specific ios?]] - [re-frame.core :refer [dispatch]] - [status-im.components.react :refer [view touchable-highlight text]] + [status-im.components.react :as rn] [status-im.react-native.js-dependencies :as rn-dependencies])) -(defn get-property [name] +(defn- get-property [name] (aget rn-dependencies/popup-menu name)) -(defn adapt-class [class] - (when class - (r/adapt-react-class class))) - -(defn get-class [name] - (adapt-class (get-property name))) +(defn- get-class [name] + (rn/adapt-class (get-property name))) (def menu (get-class "Menu")) (def menu-context (get-class "MenuContext")) @@ -41,7 +35,7 @@ (defn context-menu-text [destructive?] {:font-size 15 :line-height 20 - :color (if destructive? common/color-light-red common/text1-color)}) + :color (if destructive? st/color-light-red st/text1-color)}) (def list-selection-fn (:list-selection-fn platform-specific)) @@ -53,17 +47,17 @@ (handler))))}) nil) -(defn context-menu [trigger options & customStyles trigger-style] +(defn context-menu [trigger options & custom-styles trigger-style] (if ios? - [touchable-highlight {:style trigger-style - :on-press #(open-ios-menu options)} - [view + [rn/touchable-highlight {:style trigger-style + :on-press #(open-ios-menu options)} + [rn/view trigger]] [menu {:onSelect #(when % (do (%) nil))} [menu-trigger {:style trigger-style} trigger] - [menu-options (context-menu-options customStyles) + [menu-options (context-menu-options custom-styles) (for [{:keys [style value destructive?] :as option} options] ^{:key option} [menu-option {:value value} - [text {:style (merge (context-menu-text destructive?) style)} + [rn/text {:style (merge (context-menu-text destructive?) style)} (:text option)]])]])) diff --git a/src/status_im/components/drawer/view.cljs b/src/status_im/components/drawer/view.cljs index 25e9b4cfd6..80c573de14 100644 --- a/src/status_im/components/drawer/view.cljs +++ b/src/status_im/components/drawer/view.cljs @@ -96,7 +96,7 @@ recipient-name (or (:name recipient) to)] [touchable-highlight {:on-press #(rf/dispatch [:navigate-to-modal :transaction-details transaction])} [view {:style st/transaction} - [vi/icon :icons/arrow_right {:container-style st/transaction-icon}] + [vi/icon :icons/arrow-right {:container-style st/transaction-icon}] [view {:style st/transaction-info} [view {:style st/transaction-value-container} [text {:style st/transaction-value :font :medium} value] diff --git a/src/status_im/components/icons/vector_icons.cljs b/src/status_im/components/icons/vector_icons.cljs index 7d573e0258..a222c6d45b 100644 --- a/src/status_im/components/icons/vector_icons.cljs +++ b/src/status_im/components/icons/vector_icons.cljs @@ -2,7 +2,7 @@ (:require-macros [status-im.utils.slurp :refer [slurp-svg]]) (:require [reagent.core :as r] [status-im.utils.platform :refer [ios?]] - [status-im.components.styles :as common] + [status-im.components.styles :as st] [status-im.components.react :as rn] [status-im.react-native.js-dependencies :as rn-dependencies])) @@ -24,66 +24,72 @@ (def defs (get-class "Defs")) (def icons {:icons/chats (slurp-svg "./resources/icons/bottom/chats_gray.svg") - :icons/chats_active (slurp-svg "./resources/icons/bottom/chats_active.svg") + :icons/chats-active (slurp-svg "./resources/icons/bottom/chats_active.svg") :icons/contacts (slurp-svg "./resources/icons/bottom/contacts_gray.svg") - :icons/contacts_active (slurp-svg "./resources/icons/bottom/contacts_active.svg") + :icons/contacts-active (slurp-svg "./resources/icons/bottom/contacts_active.svg") :icons/discover (slurp-svg "./resources/icons/bottom/discover_gray.svg") - :icons/discover_active (slurp-svg "./resources/icons/bottom/discover_active.svg") + :icons/discover-active (slurp-svg "./resources/icons/bottom/discover_active.svg") :icons/wallet (slurp-svg "./resources/icons/bottom/wallet_gray.svg") - :icons/wallet_active (slurp-svg "./resources/icons/bottom/wallet_active.svg") + :icons/wallet-active (slurp-svg "./resources/icons/bottom/wallet_active.svg") :icons/speaker (slurp-svg "./resources/icons/speaker.svg") - :icons/speaker_off (slurp-svg "./resources/icons/speaker_off.svg") - :icons/transaction_history (slurp-svg "./resources/icons/transaction_history.svg") + :icons/speaker-off (slurp-svg "./resources/icons/speaker_off.svg") + :icons/transaction-history (slurp-svg "./resources/icons/transaction_history.svg") :icons/add (slurp-svg "./resources/icons/add.svg") - :icons/add_wallet (slurp-svg "./resources/icons/add_wallet.svg") + :icons/add-wallet (slurp-svg "./resources/icons/add_wallet.svg") :icons/address (slurp-svg "./resources/icons/address.svg") - :icons/arrow_left (slurp-svg "./resources/icons/arrow_left.svg") - :icons/arrow_right (slurp-svg "./resources/icons/arrow_right.svg") + :icons/arrow-left (slurp-svg "./resources/icons/arrow_left.svg") + :icons/arrow-right (slurp-svg "./resources/icons/arrow_right.svg") :icons/attach (slurp-svg "./resources/icons/attach.svg") :icons/back (slurp-svg "./resources/icons/back.svg") :icons/browse (slurp-svg "./resources/icons/browse.svg") :icons/close (slurp-svg "./resources/icons/close.svg") - :icons/dots_horizontal (slurp-svg "./resources/icons/dots_horizontal.svg") - :icons/dots_vertical (slurp-svg "./resources/icons/dots_vertical.svg") + :icons/dots-horizontal (slurp-svg "./resources/icons/dots_horizontal.svg") + :icons/dots-vertical (slurp-svg "./resources/icons/dots_vertical.svg") :icons/exclamation_mark (slurp-svg "./resources/icons/exclamation_mark.svg") + :icons/filter (slurp-svg "./resources/icons/filter.svg") :icons/forward (slurp-svg "./resources/icons/forward.svg") :icons/fullscreen (slurp-svg "./resources/icons/fullscreen.svg") - :icons/group_big (slurp-svg "./resources/icons/group_big.svg") - :icons/group_chat (slurp-svg "./resources/icons/group_chat.svg") + :icons/group-big (slurp-svg "./resources/icons/group_big.svg") + :icons/group-chat (slurp-svg "./resources/icons/group_chat.svg") :icons/hamburger (slurp-svg "./resources/icons/hamburger.svg") :icons/hidden (slurp-svg "./resources/icons/hidden.svg") :icons/mic (slurp-svg "./resources/icons/mic.svg") :icons/ok (slurp-svg "./resources/icons/ok.svg") :icons/public (slurp-svg "./resources/icons/public.svg") - :icons/public_chat (slurp-svg "./resources/icons/public_chat.svg") + :icons/public-chat (slurp-svg "./resources/icons/public_chat.svg") :icons/qr (slurp-svg "./resources/icons/QR.svg") :icons/search (slurp-svg "./resources/icons/search.svg") :icons/smile (slurp-svg "./resources/icons/smile.svg") - :icons/commands_list (slurp-svg "./resources/icons/commands_list.svg") - :icons/dropdown_up (slurp-svg "./resources/icons/dropdown_up.svg") + :icons/commands-list (slurp-svg "./resources/icons/commands_list.svg") + :icons/dropdown-up (slurp-svg "./resources/icons/dropdown_up.svg") :icons/dropdown (slurp-svg "./resources/icons/dropdown.svg") :icons/grab (slurp-svg "./resources/icons/grab.svg")}) -(defn check-name [n] +(defn normalize-property-name [n] (if (= n :icons/options) - (if ios? :icons/dots_horizontal :icons/dots_vertical) + (if ios? :icons/dots-horizontal :icons/dots-vertical) n)) -(defn icon [name & [opts]] - (let [{:keys [color container-style style]} opts] - [rn/view container-style - (into [] - (concat - [svg (merge {:width 24 :height 24 :viewBox "0 0 24 24"} style)] - ((get icons (check-name name)) - (case color - :dark common/icon-dark-color - :gray common/icon-gray-color - :blue common/color-light-blue - :active common/color-blue4 - :white common/color-white - :red common/icon-red-color - common/icon-dark-color))))])) +(def default-viewbox {:width 24 :height 24 :viewBox "0 0 24 24"}) + +(defn icon + ([name] (icon name nil)) + ([name {:keys [color container-style style]}] + [rn/view container-style + (if-let [icon-fn (get icons (normalize-property-name name))] + (into [] + (concat + [svg (merge default-viewbox style)] + (icon-fn + (case color + :dark st/icon-dark-color + :gray st/icon-gray-color + :blue st/color-light-blue + :active st/color-blue4 + :white st/color-white + :red st/icon-red-color + st/icon-dark-color)))) + (throw (js/Error. (str "Unknown icon: " name))))])) (defn touchable-icon [n opts handler] [rn/touchable-highlight {:on-press handler} diff --git a/src/status_im/components/list/styles.cljs b/src/status_im/components/list/styles.cljs index 6fd8e59cc8..a5c977f9d7 100644 --- a/src/status_im/components/list/styles.cljs +++ b/src/status_im/components/list/styles.cljs @@ -29,8 +29,10 @@ (def item-image {:width 40 - :height 40 - :margin 14}) + :height 40}) + +(def item-image-wrapper + {:margin 14}) (def base-separator {:height 1 diff --git a/src/status_im/components/list/views.cljs b/src/status_im/components/list/views.cljs index f7191d3a18..4c66cead48 100644 --- a/src/status_im/components/list/views.cljs +++ b/src/status_im/components/list/views.cljs @@ -4,9 +4,9 @@ (defn render [{:keys [title subtitle]}] [item - [item-icon :dots_vertical_white] + [item-icon {:icon :dots_vertical_white}] [item-content title subtitle] - [item-icon :arrow_right_gray]]) + [item-icon {:icon :arrow_right_gray}]]) [flat-list {:data [{:title \"\" :subtitle \"\"}] :render-fn render}] @@ -38,12 +38,18 @@ [rn/touchable-highlight {:on-press handler} item]) -(defn item-icon [k & [opts]] - [vi/icon k (merge opts {:style lst/item-image})]) +(defn item-icon + [{:keys [icon style icon-opts]}] + [rn/view {:style lst/item-image-wrapper} + [rn/view {:style style} + [vi/icon icon (merge icon-opts {:style lst/item-image})]]]) -(defn item-image [source] - [rn/image {:source source - :style lst/item-image}]) +(defn item-image + ([source] (item-image source nil)) + ([source style] + [rn/view {:style (merge lst/item-image-wrapper style)} + [rn/image {:source source + :style lst/item-image}]])) (defn item-content ([primary] (item-content primary nil)) @@ -94,8 +100,15 @@ (let [{:keys [section]} (js->clj data :keywordize-keys true)] (r/as-element (f section))))) -(defn- default-render-section-header [m] - [rn/text {:style lst/section-header} (:title m)]) +(defn- default-render-section-header [{:keys [title]}] + [rn/text {:style lst/section-header} + title]) + +(defn- wrap-per-section-render-fn [props] + ;; TODO(jeluard) Somehow wrapping `:render-fn` does not work + (if-let [f (:render-fn props)] + (assoc (dissoc props :render-fn) :renderItem (wrap-render-fn f)) + props)) (defn section-list "A wrapper for SectionList. @@ -105,7 +118,7 @@ empty-component [section-list-class (merge (base-list-props render-fn empty-component) - {:sections (clj->js (map #(if-let [f (:render-fn %)] (assoc % :renderItem (wrap-render-fn f)) %) sections)) + {:sections (clj->js (map wrap-per-section-render-fn sections)) :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)} (when p/ios? {:SectionSeparatorComponent (fn [] (r/as-element [section-separator]))}) props)])) \ No newline at end of file diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 49183f82e0..63eb079c5a 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -10,6 +10,7 @@ (def color-blue-transparent "#7099e632") (def color-black "#000000") (def color-purple "#a187d5") +(def color-gray-transparent-light "rgba(0, 0, 0, 0.1)") (def color-gray-transparent "rgba(0, 0, 0, 0.4)") (def color-gray "#838c93de") (def color-gray2 "#8f838c93") @@ -35,7 +36,9 @@ (def color-light-gray "#EEF2F5") (def color-light-gray2 "#ececf0") (def color-red "red") -(def color-red2 "#d84b4b") +(def color-red-2 "#d84b4b") +(def color-red-3 "#FFC1BD") +(def color-red-4 "#8A3832") (def color-light-red "#e86363") (def color-light-red2 "#f47979") (def color-green-1 "#a8f4d4") @@ -50,7 +53,7 @@ (def text4-color color-gray4) (def icon-dark-color color-dark) (def icon-gray-color color-gray7) -(def icon-red-color color-red2) +(def icon-red-color color-red-2) (def online-color color-light-blue) (def new-messages-count-color color-blue-transparent) (def chat-background color-light-gray) diff --git a/src/status_im/components/tabs/views.cljs b/src/status_im/components/tabs/views.cljs index 10b6093d1c..9998b1ab2f 100644 --- a/src/status_im/components/tabs/views.cljs +++ b/src/status_im/components/tabs/views.cljs @@ -16,15 +16,17 @@ (let [active? (= view-id selected-view-id)] [touchable-highlight {:style st/tab :disabled active? - :onPress #(dispatch [:navigate-to-tab view-id])} + :on-press #(dispatch [:navigate-to-tab view-id])} [view {:style st/tab-container} (when-let [icon (if active? icon-active icon-inactive)] [view [image {:source {:uri icon} :style st/tab-icon}]]) [view - [text {:style (st/tab-title active?) - :font (if (and p/ios? active?) :medium :regular)} + [text (merge + (if-not icon-active {:uppercase? (get-in p/platform-specific [:uppercase?])}) + {:style (st/tab-title active?) + :font (if (and p/ios? active?) :medium :regular)}) title]]]])) (defn- create-tab [index data selected-view-id] diff --git a/src/status_im/components/text_input_with_label/styles.cljs b/src/status_im/components/text_input_with_label/styles.cljs index e07ba21b40..eb10c5235a 100644 --- a/src/status_im/components/text_input_with_label/styles.cljs +++ b/src/status_im/components/text_input_with_label/styles.cljs @@ -39,7 +39,7 @@ :letter-spacing -0.2}}) (defstyle error-text - {:color common/color-red2 + {:color common/color-red-2 :android {:margin-top 6 :font-size 12} :ios {:margin-top 4 @@ -47,13 +47,13 @@ :letter-spacing -0.2}}) (defn underline-blured [error] - {:background-color (if error common/color-red2 common/color-light-gray2) + {:background-color (if error common/color-red-2 common/color-light-gray2) :align-items :center}) (defn underline-focused [underline-width underline-height error] {:height underline-height :width underline-width - :background-color (if error common/color-red2 common/color-light-blue)}) + :background-color (if error common/color-red-2 common/color-light-blue)}) (def label-top-top (if ios? 6 6)) diff --git a/src/status_im/components/toolbar_new/actions.cljs b/src/status_im/components/toolbar_new/actions.cljs index 064f421b03..97c6dffd20 100644 --- a/src/status_im/components/toolbar_new/actions.cljs +++ b/src/status_im/components/toolbar_new/actions.cljs @@ -7,6 +7,11 @@ {:icon :icons/hamburger :handler handler}) +(defn hamburger-white [handler] + (merge (hamburger handler) + {:icon-opts {:color :white} + :handler handler})) + (defn add [handler] {:icon :icons/add :handler handler}) @@ -20,37 +25,38 @@ :handler handler}) (def search-icon - {:icon [:icons/search - {:container-style {:opacity 0.4}}]}) + {:icon :icons/search + :icon-opts {:container-style {:opacity 0.4}}}) (defn back [handler] {:icon :icons/back :handler handler :accessibility-label id/toolbar-back-button}) +(def default-handler #(dispatch [:navigate-back])) + (def default-back - (back #(dispatch [:navigate-back]))) + (back default-handler)) (defn back-white [handler] - {:icon [:icons/back - {:color :white}] - :handler handler}) + {:icon :icons/back + :icon-opts {:color :white} + :handler handler}) (defn close [handler] {:icon :icons/close :handler handler}) (defn close-white [handler] - {:icon [:icons/close - {:color :white}] - :handler handler}) + {:icon :icons/close + :icon-opts {:color :white} + :handler handler}) (defn list-white [handler] - {:icon [:icons/transaction_history - {:color :white :style {:viewBox "-108 65.9 24 24"}}] - :handler handler}) + {:icon :icons/transaction-history + :icon-opts {:color :white :style {:viewBox "-108 65.9 24 24"}} + :handler handler}) (defn add-wallet [handler] - {:image {:source {:uri :icon_add_wallet_dark} - :style st/action-default} + {:icon :icons/add-wallet :handler handler}) diff --git a/src/status_im/components/toolbar_new/styles.cljs b/src/status_im/components/toolbar_new/styles.cljs index f569c8f2b9..4caf10444d 100644 --- a/src/status_im/components/toolbar_new/styles.cljs +++ b/src/status_im/components/toolbar_new/styles.cljs @@ -16,16 +16,14 @@ (defstyle toolbar {:flex-direction :row :align-items :center + :justify-content :space-between :android {:height 55} :ios {:height 56}}) (defnstyle toolbar-nav-actions-container [actions] {:flex-direction :row - :margin-left 4 - :ios {:width (when (and actions (pos? (count actions))) - (-> (+ toolbar-icon-width toolbar-icon-spacing) - (* (count actions))))}}) + :margin-left 4}) (defstyle toolbar-title-container {:flex 1 @@ -44,6 +42,8 @@ (def toolbar-border (get-in p/platform-specific [:component-styles :toolbar-border])) +(def toolbar-actions {:flex-direction :row}) + (defn toolbar-actions-container [actions-count custom] (merge {:flex-direction :row} (when-not custom {:margin-right 4}) @@ -81,12 +81,28 @@ {:width 24 :height 24}) -(def toolbar-button - {:paddingVertical 16 - :paddingHorizontal 12}) +(def nav-item-button + {:padding-vertical 16 + :padding-horizontal 12}) -(def toolbar-right-action - {:color st/color-blue4 - :font-size 17 - :margin-right 12}) +(def nav-item-text + {:padding-vertical 18 + :padding-horizontal 16}) + +(defstyle item + {:ios {:margin-horizontal 12 + :margin-vertical 16} + :android {:margin 16}}) + +(def item-text + (merge item + {:color st/color-blue4 + :font-size 17})) + +(def toolbar-text-action + (merge item + {:color st/color-blue4 + :font-size 17})) + +(def item-text-white-background {:color st/color-blue4}) diff --git a/src/status_im/components/toolbar_new/view.cljs b/src/status_im/components/toolbar_new/view.cljs index c6b9e686ad..9ef55c18cf 100644 --- a/src/status_im/components/toolbar_new/view.cljs +++ b/src/status_im/components/toolbar_new/view.cljs @@ -1,44 +1,128 @@ (ns status-im.components.toolbar-new.view - (:require [re-frame.core :refer [subscribe dispatch]] + (:require [reagent.core :as r] + [re-frame.core :as rf] [status-im.components.react :as rn] - [status-im.components.sync-state.gradient :refer [sync-state-gradient-view]] + [status-im.components.sync-state.gradient :as sync-state-gradient-view] [status-im.components.styles :as st] - [status-im.components.context-menu :refer [context-menu]] + [status-im.components.context-menu :as context-menu] [status-im.components.toolbar-new.actions :as act] [status-im.components.toolbar-new.styles :as tst] - [status-im.components.icons.vector-icons :as vi] - [reagent.core :as r])) + [status-im.components.icons.vector-icons :as vi])) -(defn vec-icon [icon] - ((comp vec flatten vector) vi/icon icon)) +;; Navigation item -(defn nav-button - [{:keys [handler accessibility-label image icon]}] +(defn nav-item + [{:keys [handler accessibility-label style] :or {handler #(rf/dispatch [:navigate-back])}} item] [rn/touchable-highlight - (merge {:style tst/toolbar-button - :on-press handler} + (merge {:on-press handler} (when accessibility-label {:accessibility-label accessibility-label})) - [rn/view - (if icon - [vec-icon icon] - [rn/image image])]]) + [rn/view{:style style} + item]]) + +(defn nav-button + [{:keys [icon icon-opts] :as props}] + [nav-item (merge {:style tst/nav-item-button} props) + [vi/icon icon icon-opts]]) + +(defn nav-text + ([text] (nav-text text nil)) + ([text handler] (nav-text nil text handler)) + ([props text handler] + [rn/text (merge {:style tst/item-text :on-press (or handler #(rf/dispatch [:navigate-back]))}) + text])) + +(defn nav-clear-text + ([text] (nav-clear-text text nil)) + ([text handler] + (nav-text tst/item-text-white-background text handler))) + +(def default-nav-back [nav-button act/default-back]) + +;; Content + +(defn content-title + ([title] (content-title nil title)) + ([title-style title] + [rn/view {:style tst/toolbar-title-container} + [rn/text {:style (merge tst/toolbar-title-text title-style) + :font :toolbar-title} + title]])) + +;; Actions (defn text-action [handler title] - [rn/text {:style tst/toolbar-right-action :onPress handler} + [rn/text {:style tst/toolbar-text-action :on-press handler} title]) -(defn toolbar [{:keys [title - nav-action - hide-nav? - actions - custom-action - background-color - custom-content - hide-border? - border-style - title-style - style]}] +(def blank-action [rn/view tst/toolbar-action]) + +(defn- option-actions [icon icon-opts options] + [context-menu/context-menu + [rn/view tst/toolbar-action + [vi/icon icon icon-opts]] + options + nil + tst/item]) + +(defn- icon-action [icon icon-opts handler] + [rn/touchable-highlight {:style tst/item + :on-press handler} + [rn/view {:style tst/toolbar-action} + [vi/icon icon icon-opts]]]) + +(defn actions [v] + [rn/view {:style tst/toolbar-actions} + (for [{:keys [image icon icon-opts options handler]} v] + (with-meta + (cond (= image :blank) + blank-action + + options + [option-actions icon icon-opts options] + + :else + [icon-action icon icon-opts handler]) + {:key (str "action-" image)}))]) + +(defn toolbar2 + ([title] (toolbar2 nil title)) + ([props title] (toolbar2 props default-nav-back [content-title title])) + ([props nav-item content-item] (toolbar2 props nav-item content-item nil)) + ([{:keys [background-color + hide-border? + style + border-style]} + nav-item + content-item + action-items] + (let [style (merge (tst/toolbar-wrapper background-color) style)] + [rn/view {:style style} + [rn/view {:style tst/toolbar} + (when nav-item + [rn/view {:style (tst/toolbar-nav-actions-container 0)} + nav-item]) + content-item + action-items] + [sync-state-gradient-view/sync-state-gradient-view] + (when-not hide-border? + [rn/view {:style (merge tst/toolbar-border-container border-style)} + [rn/view {:style tst/toolbar-border}]])]))) + +(defn toolbar + "DEPRECATED + Do not use, in the process of being replaced by toolbar2" + [{:keys [title + nav-action + hide-nav? + actions + custom-action + background-color + custom-content + hide-border? + border-style + title-style + style]}] (let [style (merge (tst/toolbar-wrapper background-color) style)] [rn/view {:style style} [rn/view tst/toolbar @@ -50,30 +134,30 @@ [rn/text {:style (merge tst/toolbar-title-text title-style) :font :toolbar-title} title]]) + [rn/view (tst/toolbar-actions-container (count actions) custom-action) (if actions - (for [{:keys [image icon options handler]} actions] + (for [{:keys [image icon icon-opts options handler]} actions] (with-meta (cond (= image :blank) [rn/view tst/toolbar-action] options - [context-menu - [rn/view tst/toolbar-action [vec-icon icon]] + [context-menu/context-menu + [rn/view tst/toolbar-action + [vi/icon icon icon-opts]] options nil - tst/toolbar-button] + tst/item] :else - [rn/touchable-highlight {:style tst/toolbar-button + [rn/touchable-highlight {:style tst/item :on-press handler} [rn/view tst/toolbar-action - (if icon - [vec-icon icon] - [rn/image image])]]) + [vi/icon icon icon-opts]]]) {:key (str "action-" (or icon image))})) custom-action)]] - [sync-state-gradient-view] + [sync-state-gradient-view/sync-state-gradient-view] (when-not hide-border? [rn/view (merge tst/toolbar-border-container border-style) [rn/view tst/toolbar-border]])])) @@ -81,9 +165,9 @@ (def search-text-input (r/atom nil)) (defn- toolbar-search-submit [on-search-submit] - (let [text @(subscribe [:get-in [:toolbar-search :text]])] + (let [text @(rf/subscribe [:get-in [:toolbar-search :text]])] (on-search-submit text) - (dispatch [:set-in [:toolbar-search :text] nil]))) + (rf/dispatch [:set-in [:toolbar-search :text] nil]))) (defn- toolbar-with-search-content [{:keys [show-search? search-placeholder @@ -98,7 +182,7 @@ :auto-focus true :placeholder search-placeholder :placeholder-text-color st/color-gray4 - :on-change-text #(dispatch [:set-in [:toolbar-search :text] %]) + :on-change-text #(rf/dispatch [:set-in [:toolbar-search :text] %]) :on-submit-editing (when on-search-submit #(toolbar-search-submit on-search-submit))}] (or custom-title @@ -116,13 +200,13 @@ on-search-submit] :as opts}] (let [toggle-search-fn #(do - (dispatch [:set-in [:toolbar-search :show] %]) - (dispatch [:set-in [:toolbar-search :text] ""])) + (rf/dispatch [:set-in [:toolbar-search :show] %]) + (rf/dispatch [:set-in [:toolbar-search :text] ""])) actions (if show-search? (if (pos? (count search-text)) [(act/close #(do (.clear @search-text-input) - (dispatch [:set-in [:toolbar-search :text] ""])))] + (rf/dispatch [:set-in [:toolbar-search :text] ""])))] [act/search-icon]) (into [(act/search #(toggle-search-fn search-key))] actions))] [toolbar {:style style diff --git a/src/status_im/transactions/screens/transaction_details.cljs b/src/status_im/transactions/screens/transaction_details.cljs index 085b1e6f97..b6dd1915d2 100644 --- a/src/status_im/transactions/screens/transaction_details.cljs +++ b/src/status_im/transactions/screens/transaction_details.cljs @@ -16,14 +16,14 @@ [status-im.utils.money :as money])) (defn toolbar-view [] - [toolbar/toolbar + [toolbar/toolbar2 {:background-color st/transactions-toolbar-background - :nav-action (act/back-white #(rf/dispatch [:navigate-to-modal :unsigned-transactions])) - :border-style st/toolbar-border - :custom-content [rn/view {:style st/toolbar-title-container} - [rn/text {:style st/toolbar-title-text - :font :toolbar-title} - (i18n/label :t/transaction)]]}]) + :border-style st/toolbar-border} + [toolbar/nav-button (act/back-white #(rf/dispatch [:navigate-to-modal :unsigned-transactions]))] + [rn/view {:style st/toolbar-title-container} + [rn/text {:style st/toolbar-title-text + :font :toolbar-title} + (i18n/label :t/transaction)]]]) (defn detail-item [title content name?] [rn/view {:style st/details-item} diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 7d198c628b..166f7b0bec 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -340,14 +340,13 @@ :wallet-request "Request" :wallet-exchange "Exchange" :wallet-assets "Assets" + :wallet-add-asset "Add asset" + :wallet-total-value "Total value" :transactions "Transactions" - :transactions-to "To" :transactions-sign "Sign" :transactions-sign-all "Sign all" :transactions-sign-all-text "Sign the transaction by entering your password.\nMake sure that the words above match your secret signing phrase" :transactions-sign-input-placeholder "Enter your passphrase" - :transactions-sign-all-done "Done" - :transactions-delete "Delete" :transactions-history "History" :transactions-unsigned "Unsigned" :transactions-history-empty "You don't have a history transactions" diff --git a/src/status_im/ui/screens/accounts/login/views.cljs b/src/status_im/ui/screens/accounts/login/views.cljs index 61d235306e..2e196818f9 100644 --- a/src/status_im/ui/screens/accounts/login/views.cljs +++ b/src/status_im/ui/screens/accounts/login/views.cljs @@ -6,7 +6,7 @@ [status-im.ui.screens.accounts.views :refer [account-badge]] [status-im.components.text-input-with-label.view :refer [text-input-with-label]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar]] + [status-im.components.toolbar-new.view :as toolbar] [status-im.components.toolbar-new.actions :as act] [status-im.ui.screens.accounts.login.styles :as st] [status-im.components.react :as react] @@ -14,11 +14,11 @@ [status-im.components.react :as components])) (defn login-toolbar [] - [toolbar {:background-color :transparent - :hide-border? true - :title-style {:color :white} - :nav-action (act/back-white #(dispatch [:navigate-back])) - :title (i18n/label :t/sign-in-to-status)}]) + [toolbar/toolbar2 + {:background-color :transparent + :hide-border? true} + [toolbar/nav-button (act/back-white #(dispatch [:navigate-back]))] + [toolbar/content-title {:color :white} (i18n/label :t/sign-in-to-status)]]) (def password-text-input (atom nil)) diff --git a/src/status_im/ui/screens/accounts/views.cljs b/src/status_im/ui/screens/accounts/views.cljs index 7ef01280b2..f65a4263fa 100644 --- a/src/status_im/ui/screens/accounts/views.cljs +++ b/src/status_im/ui/screens/accounts/views.cljs @@ -47,15 +47,15 @@ :renderRow #(list-item [account-view %])}]] [view st/bottom-actions-container [action-button (merge - {:label (i18n/label :t/create-new-account) - :icon [:icons/add - {:color :white}] - :on-press #(dispatch [:create-new-account-handler])} + {:label (i18n/label :t/create-new-account) + :icon :icons/add + :icon-opts {:color :white} + :on-press #(dispatch [:create-new-account-handler])} st/accounts-action-button)] [common/separator st/accounts-separator st/accounts-separator-wrapper] [action-button (merge - {:label (i18n/label :t/recover-access) - :icon [:icons/dots_horizontal - {:color :white}] - :on-press #(dispatch [:navigate-to :recover])} + {:label (i18n/label :t/recover-access) + :icon :icons/dots-horizontal + :icon-opts {:color :white} + :on-press #(dispatch [:navigate-to :recover])} st/accounts-action-button)]]]) diff --git a/src/status_im/ui/screens/chats_list/views/inner_item.cljs b/src/status_im/ui/screens/chats_list/views/inner_item.cljs index 7d8c2c0d29..ef8b09eb1d 100644 --- a/src/status_im/ui/screens/chats_list/views/inner_item.cljs +++ b/src/status_im/ui/screens/chats_list/views/inner_item.cljs @@ -107,10 +107,10 @@ [view st/name-view (when public-group? [view st/public-group-icon-container - [vi/icon :icons/public_chat {:style st/public-group-icon}]]) + [vi/icon :icons/public-chat {:style st/public-group-icon}]]) (when private-group? [view st/private-group-icon-container - [vi/icon :icons/group_chat {:style st/private-group-icon}]]) + [vi/icon :icons/group-chat {:style st/private-group-icon}]]) [view {:flex-shrink 1} [text {:style st/name-text :number-of-lines 1} diff --git a/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs b/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs index 35ba4fb6d5..cefb58f8e2 100644 --- a/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs +++ b/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs @@ -28,20 +28,23 @@ (defn actions-view [action click-handler] [view actions-list [action-button - {:label (label :t/enter-address) - :icon [:icons/address {:color :blue}] - :on-press #(do - (dispatch [:send-to-webview-bridge - {:event (name :webview-send-transaction)}]) - (dispatch [:navigate-back]))}] + {:label (label :t/enter-address) + :icon :icons/address + :icon-opts {:color :blue} + :on-press #(do + (dispatch [:send-to-webview-bridge + {:event (name :webview-send-transaction)}]) + (dispatch [:navigate-back]))}] [action-separator] (if (= :request action) - [action-button {:label (label :t/show-qr) - :icons [:icons/qr {:color :blue}] - :on-press #(click-handler :qr-scan action)}] - [action-button {:label (label :t/scan-qr) - :icon [:icons/fullscreen {:color :blue}] - :on-press #(click-handler :qr-scan action)}])]) + [action-button {:label (label :t/show-qr) + :icon :icons/qr + :icon-opts {:color :blue} + :on-press #(click-handler :qr-scan action)}] + [action-button {:label (label :t/scan-qr) + :icon :icons/fullscreen + :icon-opts {:color :blue} + :on-press #(click-handler :qr-scan action)}])]) (defn render-row [click-handler action params] (fn [row _ _] diff --git a/src/status_im/ui/screens/contacts/views.cljs b/src/status_im/ui/screens/contacts/views.cljs index cd9b2ff31e..878094114a 100644 --- a/src/status_im/ui/screens/contacts/views.cljs +++ b/src/status_im/ui/screens/contacts/views.cljs @@ -135,7 +135,7 @@ [contact-group-view {:group group :edit? edit?}])] [view st/empty-contact-groups - [vi/icon :icons/group_big {:style st/empty-contacts-icon}] + [vi/icon :icons/group-big {:style st/empty-contacts-icon}] [text {:style st/empty-contacts-text} (label :t/no-contacts)]])] (when (and android? (not edit?)) [contacts-action-button])])) diff --git a/src/status_im/ui/screens/db.cljs b/src/status_im/ui/screens/db.cljs index cfd1160a89..c4f940ae7b 100644 --- a/src/status_im/ui/screens/db.cljs +++ b/src/status_im/ui/screens/db.cljs @@ -176,4 +176,5 @@ :discoveries/request-discoveries-timer :discoveries/new-discover :wallet/wallet - :prices/prices])) + :prices/prices + :prices/prices-loading?])) diff --git a/src/status_im/ui/screens/discover/views.cljs b/src/status_im/ui/screens/discover/views.cljs index 01f1f90093..dad42d7f94 100644 --- a/src/status_im/ui/screens/discover/views.cljs +++ b/src/status_im/ui/screens/discover/views.cljs @@ -90,6 +90,6 @@ [discover-recent {:current-account current-account}]] [view contacts-st/empty-contact-groups ;; todo change icon - [vi/icon :icons/group_big {:style contacts-st/empty-contacts-icon}] + [vi/icon :icons/group-big {:style contacts-st/empty-contacts-icon}] [text {:style contacts-st/empty-contacts-text} (label :t/no-statuses-discovered)]])])) diff --git a/src/status_im/ui/screens/discover/views/search_results.cljs b/src/status_im/ui/screens/discover/views/search_results.cljs index 878d2b0b46..02acc872fd 100644 --- a/src/status_im/ui/screens/discover/views/search_results.cljs +++ b/src/status_im/ui/screens/discover/views/search_results.cljs @@ -48,8 +48,7 @@ :style st/discover-tag-toolbar}] (if (empty? discoveries) [view st/empty-view - ;; todo change icon - [vi/icon :icons/group_big {:style contacts-st/empty-contacts-icon}] + [vi/icon :icons/group-big {:style contacts-st/empty-contacts-icon}] [text {:style contacts-st/empty-contacts-text} (label :t/no-statuses-found)]] [list-view {:dataSource datasource diff --git a/src/status_im/ui/screens/events.cljs b/src/status_im/ui/screens/events.cljs index 7d567a64ba..1c45966ad6 100644 --- a/src/status_im/ui/screens/events.cljs +++ b/src/status_im/ui/screens/events.cljs @@ -165,7 +165,7 @@ [:start-requesting-discoveries] [:remove-old-discoveries!] [:set :accounts/creating-account? false] - [:init-wallet] + [:refresh-wallet] [:get-fcm-token]]})) (register-handler-fx diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index a83f6576db..855c6da565 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -41,9 +41,10 @@ :default-value new-group-name}]])) (defn add-btn [on-press] - [action-button {:label (label :t/add-members) - :icon [:icons/add {:color :blue}] - :on-press on-press}]) + [action-button {:label (label :t/add-members) + :icon :icons/add + :icon-opts {:color :blue} + :on-press on-press}]) (defn delete-btn [on-press] [view styles/settings-group-container @@ -68,14 +69,15 @@ [text {:style styles/settings-group-text} (label :t/mute-notifications)]]]]] [action-separator] - [action-button {:label (label :t/clear-history) - :icon [:icons/close {:color :blue}] - :on-press #(dispatch [:clear-history])}] + [action-button {:label (label :t/clear-history) + :icon :icons/close + :icon-opts {:color :blue} + :on-press #(dispatch [:clear-history])}] [action-separator] [touchable-highlight {:on-press #(dispatch [:leave-group-chat])} [view styles/settings-group-item [view styles/delete-icon-container - [vi/icon :icons/arrow_right {:color :red}]] + [vi/icon :icons/arrow-right {:color :red}]] [view styles/settings-group-text-container [text {:style styles/delete-group-text} (label :t/leave-chat)]]]]]) diff --git a/src/status_im/ui/screens/profile/views.cljs b/src/status_im/ui/screens/profile/views.cljs index 9a8146d415..30d3fbb3dc 100644 --- a/src/status_im/ui/screens/profile/views.cljs +++ b/src/status_im/ui/screens/profile/views.cljs @@ -16,7 +16,7 @@ [status-im.components.status-bar :refer [status-bar]] [status-im.components.styles :refer [color-blue]] [status-im.components.toolbar-new.actions :as actions] - [status-im.components.toolbar-new.view :refer [toolbar]] + [status-im.components.toolbar-new.view :as toolbar] [status-im.i18n :refer [label]] [status-im.ui.screens.profile.styles :as styles] [status-im.utils.datetime :as time] @@ -24,11 +24,11 @@ (:require-macros [status-im.utils.views :refer [defview]])) (defn my-profile-toolbar [] - [toolbar {:actions [(actions/opts [{:value #(dispatch [:my-profile/edit]) + [toolbar/toolbar {:actions [(actions/opts [{:value #(dispatch [:my-profile/edit]) :text (label :t/edit)}])]}]) (defn profile-toolbar [contact] - [toolbar + [toolbar/toolbar (when (and (not (:pending? contact)) (not (:unremovable? contact))) {:actions [(actions/opts [{:value #(dispatch [:hide-contact contact]) @@ -58,20 +58,23 @@ (defn profile-actions [{:keys [pending? whisper-identity dapp?]} chat-id] [react/view actions-list (if pending? - [action-button {:label (label :t/add-to-contacts) - :icon [:icons/add {:color :blue}] - :on-press #(dispatch [:add-pending-contact chat-id])}] + [action-button {:label (label :t/add-to-contacts) + :icon :icons/add + :icon-opts {:color :blue} + :on-press #(dispatch [:add-pending-contact chat-id])}] [action-button-disabled {:label (label :t/in-contacts) :icon :icons/ok}]) [action-separator] - [action-button {:label (label :t/start-conversation) - :icon [:icons/chats {:color :blue}] - :on-press #(dispatch [:profile/send-message whisper-identity])}] + [action-button {:label (label :t/start-conversation) + :icon :icons/chats + :icon-opts {:color :blue} + :on-press #(dispatch [:profile/send-message whisper-identity])}] (when-not dapp? [react/view [action-separator] - [action-button {:label (label :t/send-transaction) - :icon [:icons/arrow_right {:color :blue}] - :on-press #(dispatch [:profile/send-transaction chat-id])}]])]) + [action-button {:label (label :t/send-transaction) + :icon :icons/arrow-right + :icon-opts {:color :blue} + :on-press #(dispatch [:profile/send-transaction chat-id])}]])]) (defn profile-info-item [{:keys [label value options text-mode empty-value?]}] [react/view styles/profile-setting-item @@ -186,9 +189,10 @@ [profile-status status true]] [form-spacer] [react/view actions-list - [action-button {:label (label :t/show-qr) - :icon [:icons/qr {:color :blue}] - :on-press (show-qr current-account :public-key)}]] + [action-button {:label (label :t/show-qr) + :icon :icons/qr + :icon-opts {:color :blue} + :on-press (show-qr current-account :public-key)}]] [form-spacer] [react/view styles/profile-info-container [my-profile-info current-account] diff --git a/src/status_im/ui/screens/wallet/db.cljs b/src/status_im/ui/screens/wallet/db.cljs index f9289dd177..025145ca89 100644 --- a/src/status_im/ui/screens/wallet/db.cljs +++ b/src/status_im/ui/screens/wallet/db.cljs @@ -13,13 +13,10 @@ ;; TODO(oskarth): Spec for prices as as: {:from ETH, :to USD, :price 290.11, :last-day 304.17} (def dummy-transaction-data - [{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :unsigned} - {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :unsigned} - {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :unsigned} - {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :pending} + [{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :pending} {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :pending} - {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :sent} + {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :outgoing} {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :postponed} {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :pending} {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :pending} - {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :sent}]) + {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :outgoing}]) diff --git a/src/status_im/ui/screens/wallet/events.cljs b/src/status_im/ui/screens/wallet/events.cljs index 7185333fb1..cb9e7a70e4 100644 --- a/src/status_im/ui/screens/wallet/events.cljs +++ b/src/status_im/ui/screens/wallet/events.cljs @@ -46,19 +46,22 @@ {:get-prices {:from "ETH" :to "USD" :success-event :update-prices - :error-event :update-prices-fail}})) + :error-event :update-prices-fail} + :db (assoc db :prices-loading? true)})) (handlers/register-handler-fx - :init-wallet + :refresh-wallet (fn [{{:keys [web3 accounts/current-account-id] :as db} :db} [_ a]] {:get-balance {:web3 web3 :account-id current-account-id :success-event :update-balance :error-event :update-balance-fail} :dispatch [:load-prices] - :db (assoc-in db [:wallet :transactions] wallet.db/dummy-transaction-data)})) + :db (-> db + (assoc-in [:wallet :transactions] wallet.db/dummy-transaction-data) + (assoc-in [:wallet :balance-loading?] true))})) -(defn set-error-message [db err] +(defn assoc-error-message [db err] (assoc-in db [:wallet :wallet/error] err)) (handlers/register-handler-db @@ -69,21 +72,25 @@ (handlers/register-handler-db :update-balance (fn [db [_ balance]] - (assoc-in db [:wallet :balance] balance))) + (-> db + (assoc-in [:wallet :balance] balance) + (assoc-in [:wallet :balance-loading?] false)))) (handlers/register-handler-db :update-prices (fn [db [_ prices]] - (assoc db :prices prices))) + (assoc db :prices prices :prices-loading? false))) (handlers/register-handler-db :update-balance-fail (fn [db [_ err]] (log/debug "Unable to get balance: " err) - (set-error-message db :error))) + (-> (assoc-error-message db :error) + (assoc-in [:wallet :balance-loading?] false)))) (handlers/register-handler-db :update-prices-fail (fn [db [_ err]] (log/debug "Unable to get prices: " err) - (set-error-message db :error))) + (-> (assoc-error-message db :error) + (assoc :prices-loading? false)))) diff --git a/src/status_im/ui/screens/wallet/history/styles.cljs b/src/status_im/ui/screens/wallet/history/styles.cljs index 6f148e8396..2414a51445 100644 --- a/src/status_im/ui/screens/wallet/history/styles.cljs +++ b/src/status_im/ui/screens/wallet/history/styles.cljs @@ -60,4 +60,8 @@ :top 0}) (def sign-all-done-button - {:background-color :transparent}) \ No newline at end of file + {:background-color :transparent}) + +(defn transaction-icon-background [color] + {:border-radius 32 + :background-color st/color-blue4-transparent}) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/history/views.cljs b/src/status_im/ui/screens/wallet/history/views.cljs index e72ff51687..40a2d7eb2c 100644 --- a/src/status_im/ui/screens/wallet/history/views.cljs +++ b/src/status_im/ui/screens/wallet/history/views.cljs @@ -3,13 +3,14 @@ (:require [reagent.core :as r] [re-frame.core :as rf] [status-im.components.button.view :as btn] + [status-im.components.checkbox.view :as chk] [status-im.components.react :as rn] [status-im.components.list.views :as list] [status-im.components.tabs.styles :as tst] [status-im.components.tabs.views :as tabs] [status-im.components.toolbar-new.actions :as act] [status-im.components.toolbar-new.view :as toolbar] - [status-im.ui.screens.wallet.history.styles :as st] + [status-im.ui.screens.wallet.history.styles :as history-styles] [status-im.utils.utils :as utils] [status-im.i18n :as i18n])) @@ -27,179 +28,177 @@ [toolbar/text-action #(rf/dispatch [:navigate-to-modal :wallet-transactions-sign-all]) (i18n/label :t/transactions-sign-all)]) -(defn history-action [] - ;; TODO(jeluard) replace with proper icon - [toolbar/text-action #(rf/dispatch [:navigate-to-modal :wallet-transactions-filter]) - "History"]) +(def history-action + {:icon :icons/filter + :icon-opts {} + :handler #(utils/show-popup "TODO" "Not implemented") #_(rf/dispatch [:navigate-to-modal :wallet-transactions-sign-all])}) (defn toolbar-view [view-id] - [toolbar/toolbar - {:title (i18n/label :t/transactions) - :custom-action - [(if (= @view-id :wallet-transactions-unsigned) unsigned-action history-action)]}]) - -(defn- icon-status [k] - (case k - :pending :dropdown_white - :dropdown_white)) + [toolbar/toolbar2 {} + toolbar/default-nav-back + [toolbar/content-title (i18n/label :t/transactions)] + (if (= @view-id :wallet-transactions-unsigned) + [unsigned-action] + [toolbar/actions + [history-action]])]) (defn action-buttons [m] - [rn/view {:style st/action-buttons} + [rn/view {:style history-styles/action-buttons} [btn/primary-button {:text (i18n/label :t/transactions-sign) :on-press #(on-sign-transaction m)}] - [btn/secondary-button {:text (i18n/label :t/transactions-delete) :on-press #(on-delete-transaction m)}]]) + [btn/secondary-button {:text (i18n/label :t/delete) :on-press #(on-delete-transaction m)}]]) (defn- unsigned? [state] (= "unsigned" state)) +(defn- transaction-icon [k color] {:icon k :style (history-styles/transaction-icon-background color)}) + +(defn- transaction-type->icon [s] + (case s + "incoming" (transaction-icon :icons/arrow-left :red) + "outgoing" (transaction-icon :icons/arrow-right :red) + "postponed" (transaction-icon :icons/arrow-right :red) + "unsigned" (transaction-icon :icons/dots-horizontal :red) + "pending" (transaction-icon :icons/dots-horizontal :red) + (throw (str "Unknown transaction type: " s)))) + (defn render-transaction [{:keys [to state] {:keys [value symbol]} :content :as m}] [list/item - [list/item-icon :icons/ok {:color :blue}] + [list/item-icon (transaction-type->icon state)] [list/item-content - (str value " " symbol) (str (i18n/label :t/transactions-to) " " to) + (str value " " symbol) (str (i18n/label :t/to) " " to) (if (unsigned? state) [action-buttons m])] - [list/item-icon :icons/forward]]) + [list/item-icon {:icon :icons/forward}]]) ;; TODO(yenda) hook with re-frame (defn empty-text [s] - [rn/text {:style st/empty-text} s]) + [rn/text {:style history-styles/empty-text} s]) (defview history-list [] (letsubs [pending-transactions [:wallet/pending-transactions] postponed-transactions [:wallet/postponed-transactions] sent-transactions [:wallet/sent-transactions]] - [list/section-list {:sections [{:title "Postponed" - :key :postponed - :data postponed-transactions} - {:title "Pending" - :key :pending - :data pending-transactions} - {:title "Sent" - :key :sent - :data sent-transactions}] - :render-fn render-transaction - :empty-component (empty-text (i18n/label :t/transactions-history-empty))}])) + [rn/scroll-view + [list/section-list {:sections [{:title "Postponed" + :key :postponed + :data postponed-transactions} + {:title "Pending" + :key :pending + :data pending-transactions} + ;; TODO(yenda) :sent transactions shouldbe grouped by day and have their :key / :title adapted + {:title "01 Sep" + :key :sent-sep + :data sent-transactions}] + :render-fn render-transaction + :empty-component (empty-text (i18n/label :t/transactions-history-empty))}]])) -(defview unsigned-list [] - (letsubs [transactions [:wallet/unsigned-transactions]] - [list/flat-list {:data transactions - :render-fn render-transaction - :empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}])) +(defview unsigned-list [transactions] + [] + [rn/scroll-view + [list/flat-list {:data transactions + :render-fn render-transaction + :empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}]]) -(def tab-list +(defn- unsigned-transactions-title [transactions] + (let [count (count transactions)] + (str (i18n/label :t/transactions-unsigned) + (if (pos? count) (str " " count))))) + +(defn- tab-list [unsigned-transactions] [{:view-id :wallet-transactions-unsigned - :title (i18n/label :t/transactions-unsigned) - :screen unsigned-list} + :title (unsigned-transactions-title unsigned-transactions) + :screen [unsigned-list unsigned-transactions]} {:view-id :wallet-transactions-history :title (i18n/label :t/transactions-history) - :screen history-list}]) + :screen [history-list]}]) -(def tab->index (reduce #(assoc %1 (:view-id %2) (count %1)) {} tab-list)) +(defn- tab->index [tabs] (reduce #(assoc %1 (:view-id %2) (count %1)) {} tabs)) -(defn get-tab-index [view-id] - (get tab->index view-id 0)) +(defn get-tab-index [tabs view-id] + (get (tab->index tabs) view-id 0)) ;; Sign all (defview sign-all [] [] - [rn/keyboard-avoiding-view {:style st/sign-all-view} - [rn/view {:style st/sign-all-done} - [btn/primary-button {:style st/sign-all-done-button - :text (i18n/label :t/transactions-sign-all-done) + [rn/keyboard-avoiding-view {:style history-styles/sign-all-view} + [rn/view {:style history-styles/sign-all-done} + [btn/primary-button {:style history-styles/sign-all-done-button + :text (i18n/label :t/done) :on-press #(rf/dispatch [:navigate-back])}]] - [rn/view {:style st/sign-all-popup} - [rn/text {:style st/sign-all-popup-sign-phrase} "one two three"] ;; TODO hook - [rn/text {:style st/sign-all-popup-text} (i18n/label :t/transactions-sign-all-text)] - [rn/view {:style st/sign-all-actions} - [rn/text-input {:style st/sign-all-input + [rn/view {:style history-styles/sign-all-popup} + [rn/text {:style history-styles/sign-all-popup-sign-phrase} "one two three"] ;; TODO hook + [rn/text {:style history-styles/sign-all-popup-text} (i18n/label :t/transactions-sign-all-text)] + [rn/view {:style history-styles/sign-all-actions} + [rn/text-input {:style history-styles/sign-all-input :secure-text-entry true :placeholder (i18n/label :t/transactions-sign-input-placeholder)}] [btn/primary-button {:text (i18n/label :t/transactions-sign-all) :on-press #(on-sign-transaction %)}]]]]) ;; Filter history -(defn- token->icon [s] - (case s - "GNO" [:icons/ok {:color :green}] ;TODO :dollar - [:icons/ok {:color :blue}])) - -(defn item-tokens [{:keys [symbol label]}] +(defn- item-tokens [{:keys [symbol label checked?]}] [list/item - ((comp vec flatten vector) list/item-icon (token->icon symbol)) - [list/item-content label symbol]]) - ;; TODO checkbox + [list/item-icon (transaction-type->icon "pending")] ;; TODO add proper token data + [list/item-content label symbol] + [chk/checkbox {:checked? true #_checked?}]]) - -(defn- type->icon [k] - (case k - "incoming" [:icon/ok {:color :blue}] ;TODO :dollar_green - "outgoing" [:icon/ok {:color :blue}] - "pending" [:icon/ok {:color :blue}] ;TODO :dollar_green - "postponed" [:icon/ok {:color :blue}] - [:icon/ok {:color :blue}])) - -(defn item-type [{:keys [id label]}] +(defn- item-type [{:keys [id label checked?]}] [list/item - ((comp vec flatten vector) list/item-icon (type->icon id)) - [list/item-content label]]) - ;; TODO checkbox - + [list/item-icon (transaction-type->icon id)] + [list/item-content label] + [chk/checkbox checked?]]) (def filter-data [{:title (i18n/label :t/transactions-filter-tokens) :key :tokens - :render-fn item-tokens + :renderItem (list/wrap-render-fn item-tokens) :data [{:symbol "GNO" :label "Gnosis"} {:symbol "SNT" :label "Status Network Token"} {:symbol "SGT" :label "Status Genesis Token"} {:symbol "GOL" :label "Golem"}]} {:title (i18n/label :t/transactions-filter-type) :key :type - :render-fn item-type - :data [{:id :incoming :label "Incoming"} - {:id :outgoing :label "Outgoing"} - {:id :pending :label "Pending"} + :renderItem (list/wrap-render-fn item-type) + :data [{:id :incoming :label "Incoming"} + {:id :outgoing :label "Outgoing"} + {:id :pending :label "Pending"} {:id :postponed :label "Postponed"}]}]) (defview filter-history [] [] [rn/view - [toolbar/toolbar - ;; TODO(jeluard) replace with icon when available and toolbar has been refactored - {:title (i18n/label :t/transactions-filter-title) - :nav-action (act/back #(rf/dispatch [:navigate-back]));; TODO close modal - :custom-action - [toolbar/text-action #(rf/dispatch [:navigate-to-modal :wallet-transactions-filter]) - (i18n/label :t/transactions-filter-select-all)]}] + [toolbar/toolbar2 {} + [toolbar/nav-clear-text (i18n/label :t/done)] + [toolbar/content-title (i18n/label :t/transactions-filter-title)] + [toolbar/text-action #(utils/show-popup "TODO" "Select All") + (i18n/label :t/transactions-filter-select-all)]] [rn/scroll-view [list/section-list {:sections filter-data}]]]) ;; TODO(jeluard) whole swipe logic ;; extract navigate-tab action (on tap) -(defn main-section [view-id] - [rn/view {:style st/main-section} - [tabs/tabs {:selected-view-id @view-id - :tab-list tab-list}] - [rn/swiper (merge tst/swiper - {:index (get-tab-index @view-id) - :loop false}) - ;:ref #(reset! swiper %) - ;:on-momentum-scroll-end (on-scroll-end swiped? scroll-ended @view-id) +(defn- main-section [view-id unsigned-transactions] + (let [tabs (tab-list unsigned-transactions)] + [rn/view {:style history-styles/main-section} + [tabs/tabs {:selected-view-id @view-id + :tab-list tabs}] + [rn/swiper (merge tst/swiper + {:index (get-tab-index tabs @view-id) + :loop false}) + ;:ref #(reset! swiper %) + ;:on-momentum-scroll-end (on-scroll-end swiped? scroll-ended @view-id) - (doall - (map-indexed (fn [index {screen :screen}] - ^{:key index} [screen]) tab-list))]]) + (doall + (map-indexed (fn [index {screen :screen}] + (with-meta screen {:key index} )) tabs))]])) ;; TODO(yenda) must reflect selected wallet -(def initial-tab (-> tab-list first :view-id)) - (defview transactions [] - [] - (let [view-id (r/atom initial-tab)] - [rn/view {:style st/wallet-transactions-container} + [unsigned-transactions [:wallet/unsigned-transactions]] + (let [view-id (r/atom :wallet-transactions-history)] + [rn/view {:style history-styles/wallet-transactions-container} [toolbar-view view-id] - [rn/scroll-view - [main-section view-id]]])) + [main-section view-id unsigned-transactions]])) diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs index 8a77c48b26..9b6a12ca50 100644 --- a/src/status_im/ui/screens/wallet/main/styles.cljs +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -1,21 +1,20 @@ (ns status-im.ui.screens.wallet.main.styles - (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.components.styles :as common] + (:require [status-im.components.styles :as st] [status-im.utils.platform :as platform])) (def wallet-container {:flex 1 - :background-color common/color-white}) + :background-color st/color-white}) (def wallet-error-container {:align-self :center :justify-content :center :border-radius 20 :flex-direction :row - :background-color common/color-blue5}) + :background-color st/color-blue5}) (def wallet-exclamation-container - {:background-color common/color-red2 + {:background-color st/color-red-2 :justify-content :center :margin-top 5 :margin-left 10 @@ -23,18 +22,18 @@ :margin-bottom 5 :border-radius 100}) -(defstyle wallet-error-exclamation +(def wallet-error-exclamation {:width 16 :height 16}) (def wallet-error-message - {:color common/color-white + {:color st/color-white :padding-top 3 :padding-right 10 :font-size 13}) (def toolbar - {:background-color common/color-blue5 + {:background-color st/color-blue5 :elevation 0}) (def toolbar-title-container @@ -46,7 +45,7 @@ {:flex-direction :row}) (def toolbar-title-text - {:color common/color-white + {:color st/color-white :font-size 17 :margin-right 4}) @@ -70,7 +69,7 @@ (def main-section {:padding 16 - :background-color common/color-blue4}) + :background-color st/color-blue4}) (def total-balance-container {:margin-top 18 @@ -82,12 +81,12 @@ (def total-balance-value {:font-size 37 - :color common/color-white}) + :color st/color-white}) (def total-balance-currency {:font-size 37 :margin-left 9 - :color common/color-white + :color st/color-white :opacity 0.4}) (def value-variation @@ -96,19 +95,33 @@ (def value-variation-title {:font-size 14 - :color common/color-white + :color st/color-white :opacity 0.6}) (def today-variation-container - {:border-radius 4 + {:border-radius 100 :margin-left 8 :padding-horizontal 8 - :padding-vertical 4 - :background-color common/color-green-1}) + :padding-vertical 4}) + +(def today-variation-container-positive + (merge today-variation-container + {:background-color st/color-green-1})) + +(def today-variation-container-negative + (merge today-variation-container + {:background-color st/color-red-3})) (def today-variation - {:font-size 12 - :color common/color-green-2}) + {:font-size 12}) + +(def today-variation-positive + (merge today-variation + {:color st/color-green-2})) + +(def today-variation-negative + (merge today-variation + {:color st/color-red-4})) (def buttons {:margin-top 34}) @@ -118,13 +131,13 @@ ;;;;;;;;;;;;;;;;;;;; (def asset-section - {:background-color common/color-white + {:background-color st/color-white :padding-vertical 16}) (def asset-section-title {:font-size 14 :margin-left 16 - :color common/color-gray4}) + :color st/color-gray4}) (def asset-item-value-container {:flex 1 @@ -133,9 +146,20 @@ (def asset-item-value {:font-size 16 - :color common/color-black}) + :color st/color-black}) + +(def add-asset-icon + {:border-radius 32 + :background-color st/color-blue4-transparent}) + +(def add-asset-text + {:font-size 16 + :color st/color-blue4}) (def asset-item-currency {:font-size 16 - :color common/color-gray4 + :color st/color-gray4 :margin-left 6}) + +(defn asset-border [color] + {:border-color color :border-width 1 :border-radius 32}) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index 36a631758e..12baa516ac 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -7,14 +7,16 @@ [status-im.components.drawer.view :as drawer] [status-im.components.list.views :as list] [status-im.components.react :as rn] + [status-im.components.styles :as st] [status-im.components.icons.vector-icons :as vi] [status-im.components.toolbar-new.view :as toolbar] [status-im.components.toolbar-new.actions :as act] [status-im.i18n :as i18n] + [status-im.react-native.resources :as resources] [status-im.utils.config :as config] [status-im.utils.platform :as platform] [status-im.utils.utils :as utils] - [status-im.ui.screens.wallet.main.styles :as st] + [status-im.ui.screens.wallet.main.styles :as wallet-styles] [status-im.utils.money :as money])) (defn- show-not-implemented! [] @@ -22,87 +24,118 @@ (defn toolbar-title [] [rn/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list]) - :style st/toolbar-title-container} - [rn/view {:style st/toolbar-title-inner-container} - [rn/text {:style st/toolbar-title-text + :style wallet-styles/toolbar-title-container} + [rn/view {:style wallet-styles/toolbar-title-inner-container} + [rn/text {:style wallet-styles/toolbar-title-text :font :toolbar-title} (i18n/label :t/main-wallet)] [vi/icon :icons/dropdown - {:container-style st/toolbar-title-icon + {:container-style wallet-styles/toolbar-title-icon :color :white}]]]) (defn toolbar-buttons [] - [rn/view {:style st/toolbar-buttons-container} - [vi/touchable-icon :icons/dots_vertical {:color :white} show-not-implemented!] - [vi/touchable-icon :icons/qr {:color :white} show-not-implemented!]]) - -(defn- show-wallet-transactions [] - (if config/wallet-wip-enabled? - (rf/dispatch [:navigate-to-modal :wallet-transactions]) - (show-not-implemented!))) + [rn/view {:style wallet-styles/toolbar-buttons-container} + [vi/touchable-icon :icons/dots-vertical (merge {:color :white} wallet-styles/toolbar-icon) show-not-implemented!] + [vi/touchable-icon :icons/transaction-history (merge {:color :white :style {:viewBox "-108 65.9 24 24"}} wallet-styles/toolbar-icon) + #(rf/dispatch [:navigate-to-modal :wallet-transactions])]]) (defn toolbar-view [] - [toolbar/toolbar {:style st/toolbar - :nav-action (act/list-white show-wallet-transactions) - :custom-content [toolbar-title] - :custom-action [toolbar-buttons]}]) + [toolbar/toolbar2 {:style wallet-styles/toolbar} + [toolbar/nav-button (act/hamburger-white drawer/open-drawer)] + [toolbar-title] + [toolbar-buttons]]) (defn error-message-view [error-message] - [rn/view {:style st/wallet-error-container} - [rn/view {:style st/wallet-exclamation-container} + [rn/view {:style wallet-styles/wallet-error-container} + [rn/view {:style wallet-styles/wallet-exclamation-container} [vi/icon :icons/exclamation_mark {:color :white - :container-style st/wallet-error-exclamation}]] - [rn/text {:style st/wallet-error-message} (i18n/label :t/wallet-error)]]) + :container-style wallet-styles/wallet-error-exclamation}]] + [rn/text {:style wallet-styles/wallet-error-message} (i18n/label :t/wallet-error)]]) -;; TODO(oskarth): Whatever triggers the "in progress" animation should also trigger wallet-init or load-prices event. (defn main-section [usd-value change error-message] - [rn/view {:style st/main-section} + [rn/view {:style wallet-styles/main-section} (when error-message [error-message-view error-message]) - [rn/view {:style st/total-balance-container} - [rn/view {:style st/total-balance} - [rn/text {:style st/total-balance-value} usd-value] - [rn/text {:style st/total-balance-currency} "USD"]] - [rn/view {:style st/value-variation} - [rn/text {:style st/value-variation-title} "Total value"] - [rn/view {:style st/today-variation-container} - [rn/text {:style st/today-variation} change]]] - [btn/buttons st/buttons + [rn/view {:style wallet-styles/total-balance-container} + [rn/view {:style wallet-styles/total-balance} + [rn/text {:style wallet-styles/total-balance-value} usd-value] + [rn/text {:style wallet-styles/total-balance-currency} "USD"]] + [rn/view {:style wallet-styles/value-variation} + [rn/text {:style wallet-styles/value-variation-title} + (i18n/label :t/wallet-total-value)] + [rn/view {:style (if (pos? change) wallet-styles/today-variation-container-positive wallet-styles/today-variation-container-negative)} + [rn/text {:style (if (pos? change) wallet-styles/today-variation-positive wallet-styles/today-variation-negative)} + change]]] + [btn/buttons wallet-styles/buttons [{:text (i18n/label :t/wallet-send) - :on-press #(rf/dispatch [:navigate-to :wallet-send-transaction]) + :on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction]) :disabled? (not config/wallet-wip-enabled?)} {:text (i18n/label :t/wallet-request) - :on-press #(rf/dispatch [:navigate-to :wallet-request-transaction]) + :on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-request-transaction]) :disabled? (not config/wallet-wip-enabled?)} {:text (i18n/label :t/wallet-exchange) :disabled? true}]]]]) -(defn render-asset-fn [{:keys [id currency amount]}] +(defn- token->image [id] + (case id + "eth" {:source (:ethereum resources/assets) :style (wallet-styles/asset-border st/color-gray-transparent-light)})) + +(defn render-assets-fn [{:keys [id currency amount]}] + ;; TODO(jeluard) Navigate to asset details screen + #_ [list/touchable-item show-not-implemented! [rn/view [list/item [list/item-image {:uri :launch_logo}] - [rn/view {:style st/asset-item-value-container} - [rn/text {:style st/asset-item-value} (str amount)] - [rn/text {:style st/asset-item-currency + [rn/view {:style wallet-styles/asset-item-value-container} + [rn/text {:style wallet-styles/asset-item-value} (str amount)] + [rn/text {:style wallet-styles/asset-item-currency :uppercase? true} id]] - [list/item-icon :icons/forward]]]]) + [list/item-icon {:style :icons/forward}]]]] + [rn/view + [list/item + (let [{:keys [source style]} (token->image id)] + [list/item-image source style]) + [rn/view {:style wallet-styles/asset-item-value-container} + [rn/text {:style wallet-styles/asset-item-value} (str amount)] + [rn/text {:style wallet-styles/asset-item-currency + :uppercase? true} + id]]]]) -(defn asset-section [eth] +(defn render-add-asset-fn [{:keys [id currency amount]}] + [list/touchable-item show-not-implemented! + [rn/view + [list/item + [list/item-icon {:icon :icons/add :style wallet-styles/add-asset-icon :icon-opts {:color :blue}}] + [rn/view {:style wallet-styles/asset-item-value-container} + [rn/text {:style wallet-styles/add-asset-text} + (i18n/label :t/wallet-add-asset)]]]]]) + +(defn asset-section [eth prices-loading? balance-loading?] (let [assets [{:id "eth" :currency :eth :amount eth}]] - [rn/view {:style st/asset-section} - [rn/text {:style st/asset-section-title} (i18n/label :t/wallet-assets)] - [list/flat-list {:data assets - :render-fn render-asset-fn}]])) + [rn/view {:style wallet-styles/asset-section} + [rn/text {:style wallet-styles/asset-section-title} (i18n/label :t/wallet-assets)] + [list/section-list + {:sections [{:key :assets + :data assets + :renderItem (list/wrap-render-fn render-assets-fn)} + {:key :add-asset + :data [{}] + :renderItem (list/wrap-render-fn render-add-asset-fn)}] + :render-section-header-fn #() + :on-refresh #(rf/dispatch [:refresh-wallet]) + :refreshing (or prices-loading? balance-loading?)}]])) (defview wallet [] (letsubs [eth-balance [:eth-balance] portfolio-value [:portfolio-value] portfolio-change [:portfolio-change] + prices-loading? [:prices-loading?] + balance-loading? [:wallet/balance-loading?] error-message [:wallet/error-message]] - [rn/view {:style st/wallet-container} + [rn/view {:style wallet-styles/wallet-container} [toolbar-view] [rn/scroll-view [main-section portfolio-value portfolio-change error-message] - [asset-section eth-balance]]])) + [asset-section eth-balance prices-loading? balance-loading?]]])) diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index 1922a5adb9..47b7e97684 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -1,26 +1,14 @@ (ns status-im.ui.screens.wallet.send.views (:require-macros [status-im.utils.views :refer [defview]]) - (:require [re-frame.core :as rf] - [status-im.components.react :as rn] - [status-im.components.icons.vector-icons :as vi] + (:require [status-im.components.react :as rn] + [status-im.components.toolbar-new.actions :as act] [status-im.components.toolbar-new.view :as toolbar] [status-im.ui.screens.wallet.send.styles :as cst])) -(defn toolbar-title [] - [rn/view {:style cst/toolbar-title-container} - [rn/text {:style cst/toolbar-title-text - :font :toolbar-title} - "Send Transaction"]]) - -(defn toolbar-buttons [] - [rn/view {:style cst/toolbar-buttons-container} - [vi/icon :icons/dots_vertical {:color :white}] - [vi/icon :icons/qr {:color :white}]]) - (defn toolbar-view [] - [toolbar/toolbar {:style cst/toolbar - :custom-content [toolbar-title] - :custom-action [toolbar-buttons]}]) + [toolbar/toolbar2 {:style cst/toolbar} + [toolbar/nav-button (act/back-white act/default-handler)] + [toolbar/content-title {:color :white} "Send Transaction"]]) (defview send-transaction [] [] diff --git a/src/status_im/ui/screens/wallet/subs.cljs b/src/status_im/ui/screens/wallet/subs.cljs index 53a4f14ada..045ffd51bb 100644 --- a/src/status_im/ui/screens/wallet/subs.cljs +++ b/src/status_im/ui/screens/wallet/subs.cljs @@ -46,6 +46,14 @@ (str "%")) "-%"))) +(reg-sub :prices-loading? + (fn [db] + (:prices-loading? db))) + +(reg-sub :wallet/balance-loading? + (fn [db] + (get-in db [:wallet :balance-loading?]))) + (reg-sub :wallet/transactions (fn [db] (get-in db [:wallet :transactions]))) diff --git a/src/status_im/ui/screens/wallet/wallet_list/views.cljs b/src/status_im/ui/screens/wallet/wallet_list/views.cljs index 970d38e3a9..ee606c5490 100644 --- a/src/status_im/ui/screens/wallet/wallet_list/views.cljs +++ b/src/status_im/ui/screens/wallet/wallet_list/views.cljs @@ -12,14 +12,12 @@ [status-im.utils.utils :as utils] [status-im.utils.platform :as platform])) -(defn toolbar-actions [] - [(act/add-wallet #(utils/show-popup "TODO" "Not implemented!"))]) - (defn toolbar-view [transactions] - [toolbar/toolbar {:style st/toolbar - :title (i18n/label :t/wallets) - :nav-action (act/close #(rf/dispatch [:navigate-back])) - :actions (toolbar-actions)}]) + [toolbar/toolbar2 {:style st/toolbar} + [toolbar/nav-clear-text (i18n/label :t/done) #(rf/dispatch [:navigate-back])] + [toolbar/content-title (i18n/label :t/wallets)] + [toolbar/actions + [(act/add-wallet #(utils/show-popup "TODO" "Not implemented!"))]]]) (defn- select-wallet [] (utils/show-popup "TODO" "Not implemented!")) @@ -39,14 +37,11 @@ (def dummy-wallet-data [{:name "Main wallet" :currency "USD" - :amount 12.43 - :assets ["SNT" "SGT" "GNO" "ETH"] - :color "blue-1"} - {:name "Other wallet" - :currency "ETH" - :amount 0.34 - :assets ["ETH"] - :color "gray-1"}]) + :amount 0 + :assets [] + :color "blue-1"}]) + +;; TODO hook real data (defn wallet-list [] [rn/scroll-view {:style st/wallet-list-screen} @@ -59,6 +54,6 @@ (defview wallet-list-screen [] [] [rn/view {:style st/screen-container} - [status-bar/status-bar {:type :main}] + [status-bar/status-bar] [toolbar-view] [wallet-list]]) diff --git a/src/status_im/utils/utils.cljs b/src/status_im/utils/utils.cljs index 81308389f7..4bc7df52b3 100644 --- a/src/status_im/utils/utils.cljs +++ b/src/status_im/utils/utils.cljs @@ -2,7 +2,6 @@ (:require [status-im.constants :as const] [status-im.i18n :as i18n] [clojure.string :as str] - [taoensso.timbre :as log] [status-im.react-native.js-dependencies :as rn-dependencies])) (defn show-popup [title content] @@ -36,7 +35,6 @@ :content-type "application/json"} :body (.stringify js/JSON (clj->js data))})) (.then (fn [response] - (log/debug response) (.text response))) (.then (fn [text] (let [json (.parse js/JSON text) @@ -53,7 +51,6 @@ (-> (.fetch js/window url (clj->js {:method "GET" :headers {"Cache-Control" "no-cache"}})) (.then (fn [response] - (log/debug response) (let [ok? (.-ok response) ok?' (if valid-response? (and ok? (valid-response? response)) diff --git a/test/cljs/status_im/react_native/resources.cljs b/test/cljs/status_im/react_native/resources.cljs index 66f7db072d..3a34573630 100644 --- a/test/cljs/status_im/react_native/resources.cljs +++ b/test/cljs/status_im/react_native/resources.cljs @@ -27,3 +27,6 @@ :ethlance nil :commiteth nil :etherplay nil}) + +(def assets + {:ethereum nil})