status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixed main wallet discrepancies

This commit is contained in:
Julien Eluard 2017-08-28 18:55:32 +02:00 committed by Roman Volosovskyi
parent c3f38249e5
commit 36d1568a76
47 changed files with 686 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@ -1,2 +1,2 @@
TESTFAIRY_ENABLED=0 TESTFAIRY_ENABLED=0
WALLET_WIP_ENABLED=0 WALLET_WIP_ENABLED=1

3
react-native/src/status_im/react_native/resources.cljs
View File

@ -15,3 +15,6 @@
:ethlance (js/require "./resources/images/contacts/ethlance.png") :ethlance (js/require "./resources/images/contacts/ethlance.png")
:commiteth (js/require "./resources/images/contacts/commiteth.png") :commiteth (js/require "./resources/images/contacts/commiteth.png")
:etherplay (js/require "./resources/images/contacts/etherplay.png")}) :etherplay (js/require "./resources/images/contacts/etherplay.png")})
(def assets
{:ethereum (js/require "./resources/images/assets/ethereum.png")})

7
resources/icons/filter.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-9" x="4" y="7" width="16" height="2" rx="1" />
<rect id="Rectangle-9" x="6" y="11" width="12" height="2" rx="1" />
<rect id="Rectangle-9" x="9" y="15" width="6" height="2" rx="1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 414 B

BIN
resources/images/assets/ethereum.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

3
src/status_im/android/platform.cljs
View File

@ -23,8 +23,9 @@
:transaction {:height 0 :transaction {:height 0
:bar-style "light-content" :bar-style "light-content"
:color styles/color-dark-blue-2} :color styles/color-dark-blue-2}
:wallet {:height 0 :wallet {:height 25
:bar-style "light-content" :bar-style "light-content"
:translucent? true
:color styles/color-blue5}} :color styles/color-blue5}}
:sized-text {:margin-top 0 :sized-text {:margin-top 0
:additional-height 0} :additional-height 0}

21
src/status_im/chat/new_chat/view.cljs
View File

@ -17,17 +17,20 @@
(defn options-list [] (defn options-list []
[view actions-list [view actions-list
[action-button {:label (label :t/new-group-chat) [action-button {:label (label :t/new-group-chat)
:icon [:icons/group_big {:color :blue}] :icon :icons/group-big
:on-press #(dispatch [:open-contact-toggle-list :chat-group])}] :icon-opts {:color :blue}
:on-press #(dispatch [:open-contact-toggle-list :chat-group])}]
[action-separator] [action-separator]
[action-button {:label (label :t/new-public-group-chat) [action-button {:label (label :t/new-public-group-chat)
:icon [:icons/public {:color :blue}] :icon :icons/public
:on-press #(dispatch [:navigate-to :new-public-chat])}] :icon-opts {:color :blue}
:on-press #(dispatch [:navigate-to :new-public-chat])}]
[action-separator] [action-separator]
[action-button {:label (label :t/add-new-contact) [action-button {:label (label :t/add-new-contact)
:icon [:icons/add {:color :blue}] :icon :icons/add
:on-press #(dispatch [:navigate-to :new-contact])}]]) :icon-opts {:color :blue}
:on-press #(dispatch [:navigate-to :new-contact])}]])
(defn contact-list-row [] (defn contact-list-row []
(fn [row _ _] (fn [row _ _]

11
src/status_im/chat/screen.cljs
View File

@ -18,7 +18,7 @@
[status-im.utils.datetime :as time] [status-im.utils.datetime :as time]
[status-im.utils.platform :as platform :refer [platform-specific]] [status-im.utils.platform :as platform :refer [platform-specific]]
[status-im.components.invertible-scroll-view :refer [invertible-scroll-view]] [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.toolbar-content :refer [toolbar-content-view]]
[status-im.chat.views.message.message :refer [chat-message]] [status-im.chat.views.message.message :refer [chat-message]]
[status-im.chat.views.message.datemark :refer [chat-datemark]] [status-im.chat.views.message.datemark :refer [chat-datemark]]
@ -92,7 +92,7 @@
[touchable-highlight [touchable-highlight
{:on-press #(dispatch [:set-chat-ui-props {:show-actions? false}])} {:on-press #(dispatch [:set-chat-ui-props {:show-actions? false}])}
[view st/action [view st/action
[vi/icon :icons/dropdown_up]]] [vi/icon :icons/dropdown-up]]]
[touchable-highlight [touchable-highlight
{:on-press #(dispatch [:set-chat-ui-props {:show-actions? true}])} {:on-press #(dispatch [:set-chat-ui-props {:show-actions? true}])}
[view st/action [view st/action
@ -114,9 +114,10 @@
creating? [:get :accounts/creating-account?]] creating? [:get :accounts/creating-account?]]
[view [view
[status-bar] [status-bar]
[toolbar {:hide-nav? (or (empty? accounts) show-actions? creating?) [toolbar/toolbar2 {:hide-nav? (or (empty? accounts) show-actions? creating?)}
:custom-content [toolbar-content-view] toolbar/default-nav-back
:custom-action [toolbar-action]}] [toolbar-content-view]
[toolbar-action]]
[add-contact-bar]]) [add-contact-bar]])
(defn get-intro-status-message [all-messages] (defn get-intro-status-message [all-messages]

2
src/status_im/chat/views/actions.cljs
View File

@ -29,7 +29,7 @@
{:title (label :t/members-title) {:title (label :t/members-title)
:subtitle (members-text members) :subtitle (members-text members)
:icon :menu_group :icon :menu_group
:icon-style {:width 25 :icon-opts {:width 25
:height 19} :height 19}
;; TODO not implemented: action Members ;; TODO not implemented: action Members
:handler nil}) :handler nil})

2
src/status_im/chat/views/input/input.cljs
View File

@ -48,7 +48,7 @@
[view style/commands-list-icon [view style/commands-list-icon
(if show-suggestions? (if show-suggestions?
[vi/icon :icons/close] [vi/icon :icons/close]
[vi/icon :icons/commands_list])]]] [vi/icon :icons/commands-list])]]]
[scroll-view {:horizontal true [scroll-view {:horizontal true
:showsHorizontalScrollIndicator false :showsHorizontalScrollIndicator false
:keyboardShouldPersistTaps :always} :keyboardShouldPersistTaps :always}

6
src/status_im/components/action_button/action_button.cljs
View File

@ -4,11 +4,11 @@
[status-im.components.icons.vector-icons :as vi] [status-im.components.icons.vector-icons :as vi]
[status-im.components.react :as rn])) [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/touchable-highlight {:on-press on-press}
[rn/view st/action-button [rn/view st/action-button
[rn/view (st/action-button-icon-container cyrcle-color) [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/view st/action-button-label-container
[rn/text {:style (merge st/action-button-label label-style)} [rn/text {:style (merge st/action-button-label label-style)}
label]]]]) label]]]])
@ -17,7 +17,7 @@
[rn/view st/action-button [rn/view st/action-button
[rn/view st/action-button-icon-container-disabled [rn/view st/action-button-icon-container-disabled
[rn/view {:opacity 0.4} [rn/view {:opacity 0.4}
((comp vec flatten vector) vi/icon icon)]] [vi/icon icon]]]
[rn/view st/action-button-label-container [rn/view st/action-button-label-container
[rn/text {:style st/action-button-label-disabled} [rn/text {:style st/action-button-label-disabled}
label]]]) label]]])

19
src/status_im/components/checkbox/styles.cljs Normal file
View File

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

11
src/status_im/components/checkbox/view.cljs Normal file
View File

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

30
src/status_im/components/context_menu.cljs
View File

@ -1,21 +1,15 @@
(ns status-im.components.context-menu (ns status-im.components.context-menu
(:require [reagent.core :as r] (:require [reagent.core :as r]
[status-im.components.styles :as common] [status-im.components.styles :as st]
[status-im.i18n :refer [label]]
[status-im.utils.platform :refer [platform-specific ios?]] [status-im.utils.platform :refer [platform-specific ios?]]
[re-frame.core :refer [dispatch]] [status-im.components.react :as rn]
[status-im.components.react :refer [view touchable-highlight text]]
[status-im.react-native.js-dependencies :as rn-dependencies])) [status-im.react-native.js-dependencies :as rn-dependencies]))
(defn get-property [name] (defn- get-property [name]
(aget rn-dependencies/popup-menu name)) (aget rn-dependencies/popup-menu name))
(defn adapt-class [class] (defn- get-class [name]
(when class (rn/adapt-class (get-property name)))
(r/adapt-react-class class)))
(defn get-class [name]
(adapt-class (get-property name)))
(def menu (get-class "Menu")) (def menu (get-class "Menu"))
(def menu-context (get-class "MenuContext")) (def menu-context (get-class "MenuContext"))
@ -41,7 +35,7 @@
(defn context-menu-text [destructive?] (defn context-menu-text [destructive?]
{:font-size 15 {:font-size 15
:line-height 20 :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)) (def list-selection-fn (:list-selection-fn platform-specific))
@ -53,17 +47,17 @@
(handler))))}) (handler))))})
nil) nil)
(defn context-menu [trigger options & customStyles trigger-style] (defn context-menu [trigger options & custom-styles trigger-style]
(if ios? (if ios?
[touchable-highlight {:style trigger-style [rn/touchable-highlight {:style trigger-style
:on-press #(open-ios-menu options)} :on-press #(open-ios-menu options)}
[view [rn/view
trigger]] trigger]]
[menu {:onSelect #(when % (do (%) nil))} [menu {:onSelect #(when % (do (%) nil))}
[menu-trigger {:style trigger-style} trigger] [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] (for [{:keys [style value destructive?] :as option} options]
^{:key option} ^{:key option}
[menu-option {:value value} [menu-option {:value value}
[text {:style (merge (context-menu-text destructive?) style)} [rn/text {:style (merge (context-menu-text destructive?) style)}
(:text option)]])]])) (:text option)]])]]))

2
src/status_im/components/drawer/view.cljs
View File

@ -96,7 +96,7 @@
recipient-name (or (:name recipient) to)] recipient-name (or (:name recipient) to)]
[touchable-highlight {:on-press #(rf/dispatch [:navigate-to-modal :transaction-details transaction])} [touchable-highlight {:on-press #(rf/dispatch [:navigate-to-modal :transaction-details transaction])}
[view {:style st/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-info}
[view {:style st/transaction-value-container} [view {:style st/transaction-value-container}
[text {:style st/transaction-value :font :medium} value] [text {:style st/transaction-value :font :medium} value]

74
src/status_im/components/icons/vector_icons.cljs
View File

@ -2,7 +2,7 @@
(:require-macros [status-im.utils.slurp :refer [slurp-svg]]) (:require-macros [status-im.utils.slurp :refer [slurp-svg]])
(:require [reagent.core :as r] (:require [reagent.core :as r]
[status-im.utils.platform :refer [ios?]] [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.components.react :as rn]
[status-im.react-native.js-dependencies :as rn-dependencies])) [status-im.react-native.js-dependencies :as rn-dependencies]))
@ -24,66 +24,72 @@
(def defs (get-class "Defs")) (def defs (get-class "Defs"))
(def icons {:icons/chats (slurp-svg "./resources/icons/bottom/chats_gray.svg") (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 (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 (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 (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 (slurp-svg "./resources/icons/speaker.svg")
:icons/speaker_off (slurp-svg "./resources/icons/speaker_off.svg") :icons/speaker-off (slurp-svg "./resources/icons/speaker_off.svg")
:icons/transaction_history (slurp-svg "./resources/icons/transaction_history.svg") :icons/transaction-history (slurp-svg "./resources/icons/transaction_history.svg")
:icons/add (slurp-svg "./resources/icons/add.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/address (slurp-svg "./resources/icons/address.svg")
:icons/arrow_left (slurp-svg "./resources/icons/arrow_left.svg") :icons/arrow-left (slurp-svg "./resources/icons/arrow_left.svg")
:icons/arrow_right (slurp-svg "./resources/icons/arrow_right.svg") :icons/arrow-right (slurp-svg "./resources/icons/arrow_right.svg")
:icons/attach (slurp-svg "./resources/icons/attach.svg") :icons/attach (slurp-svg "./resources/icons/attach.svg")
:icons/back (slurp-svg "./resources/icons/back.svg") :icons/back (slurp-svg "./resources/icons/back.svg")
:icons/browse (slurp-svg "./resources/icons/browse.svg") :icons/browse (slurp-svg "./resources/icons/browse.svg")
:icons/close (slurp-svg "./resources/icons/close.svg") :icons/close (slurp-svg "./resources/icons/close.svg")
:icons/dots_horizontal (slurp-svg "./resources/icons/dots_horizontal.svg") :icons/dots-horizontal (slurp-svg "./resources/icons/dots_horizontal.svg")
:icons/dots_vertical (slurp-svg "./resources/icons/dots_vertical.svg") :icons/dots-vertical (slurp-svg "./resources/icons/dots_vertical.svg")
:icons/exclamation_mark (slurp-svg "./resources/icons/exclamation_mark.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/forward (slurp-svg "./resources/icons/forward.svg")
:icons/fullscreen (slurp-svg "./resources/icons/fullscreen.svg") :icons/fullscreen (slurp-svg "./resources/icons/fullscreen.svg")
:icons/group_big (slurp-svg "./resources/icons/group_big.svg") :icons/group-big (slurp-svg "./resources/icons/group_big.svg")
:icons/group_chat (slurp-svg "./resources/icons/group_chat.svg") :icons/group-chat (slurp-svg "./resources/icons/group_chat.svg")
:icons/hamburger (slurp-svg "./resources/icons/hamburger.svg") :icons/hamburger (slurp-svg "./resources/icons/hamburger.svg")
:icons/hidden (slurp-svg "./resources/icons/hidden.svg") :icons/hidden (slurp-svg "./resources/icons/hidden.svg")
:icons/mic (slurp-svg "./resources/icons/mic.svg") :icons/mic (slurp-svg "./resources/icons/mic.svg")
:icons/ok (slurp-svg "./resources/icons/ok.svg") :icons/ok (slurp-svg "./resources/icons/ok.svg")
:icons/public (slurp-svg "./resources/icons/public.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/qr (slurp-svg "./resources/icons/QR.svg")
:icons/search (slurp-svg "./resources/icons/search.svg") :icons/search (slurp-svg "./resources/icons/search.svg")
:icons/smile (slurp-svg "./resources/icons/smile.svg") :icons/smile (slurp-svg "./resources/icons/smile.svg")
:icons/commands_list (slurp-svg "./resources/icons/commands_list.svg") :icons/commands-list (slurp-svg "./resources/icons/commands_list.svg")
:icons/dropdown_up (slurp-svg "./resources/icons/dropdown_up.svg") :icons/dropdown-up (slurp-svg "./resources/icons/dropdown_up.svg")
:icons/dropdown (slurp-svg "./resources/icons/dropdown.svg") :icons/dropdown (slurp-svg "./resources/icons/dropdown.svg")
:icons/grab (slurp-svg "./resources/icons/grab.svg")}) :icons/grab (slurp-svg "./resources/icons/grab.svg")})
(defn check-name [n] (defn normalize-property-name [n]
(if (= n :icons/options) (if (= n :icons/options)
(if ios? :icons/dots_horizontal :icons/dots_vertical) (if ios? :icons/dots-horizontal :icons/dots-vertical)
n)) n))
(defn icon [name & [opts]] (def default-viewbox {:width 24 :height 24 :viewBox "0 0 24 24"})
(let [{:keys [color container-style style]} opts]
[rn/view container-style (defn icon
(into [] ([name] (icon name nil))
(concat ([name {:keys [color container-style style]}]
[svg (merge {:width 24 :height 24 :viewBox "0 0 24 24"} style)] [rn/view container-style
((get icons (check-name name)) (if-let [icon-fn (get icons (normalize-property-name name))]
(case color (into []
:dark common/icon-dark-color (concat
:gray common/icon-gray-color [svg (merge default-viewbox style)]
:blue common/color-light-blue (icon-fn
:active common/color-blue4 (case color
:white common/color-white :dark st/icon-dark-color
:red common/icon-red-color :gray st/icon-gray-color
common/icon-dark-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] (defn touchable-icon [n opts handler]
[rn/touchable-highlight {:on-press handler} [rn/touchable-highlight {:on-press handler}

6
src/status_im/components/list/styles.cljs
View File

@ -29,8 +29,10 @@
(def item-image (def item-image
{:width 40 {:width 40
:height 40 :height 40})
:margin 14})
(def item-image-wrapper
{:margin 14})
(def base-separator (def base-separator
{:height 1 {:height 1

33
src/status_im/components/list/views.cljs
View File

@ -4,9 +4,9 @@
(defn render [{:keys [title subtitle]}] (defn render [{:keys [title subtitle]}]
[item [item
[item-icon :dots_vertical_white] [item-icon {:icon :dots_vertical_white}]
[item-content title subtitle] [item-content title subtitle]
[item-icon :arrow_right_gray]]) [item-icon {:icon :arrow_right_gray}]])
[flat-list {:data [{:title \"\" :subtitle \"\"}] :render-fn render}] [flat-list {:data [{:title \"\" :subtitle \"\"}] :render-fn render}]
@ -38,12 +38,18 @@
[rn/touchable-highlight {:on-press handler} [rn/touchable-highlight {:on-press handler}
item]) item])
(defn item-icon [k & [opts]] (defn item-icon
[vi/icon k (merge opts {:style lst/item-image})]) [{: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] (defn item-image
[rn/image {:source source ([source] (item-image source nil))
:style lst/item-image}]) ([source style]
[rn/view {:style (merge lst/item-image-wrapper style)}
[rn/image {:source source
:style lst/item-image}]]))
(defn item-content (defn item-content
([primary] (item-content primary nil)) ([primary] (item-content primary nil))
@ -94,8 +100,15 @@
(let [{:keys [section]} (js->clj data :keywordize-keys true)] (let [{:keys [section]} (js->clj data :keywordize-keys true)]
(r/as-element (f section))))) (r/as-element (f section)))))
(defn- default-render-section-header [m] (defn- default-render-section-header [{:keys [title]}]
[rn/text {:style lst/section-header} (:title m)]) [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 (defn section-list
"A wrapper for SectionList. "A wrapper for SectionList.
@ -105,7 +118,7 @@
empty-component empty-component
[section-list-class [section-list-class
(merge (base-list-props render-fn empty-component) (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)} :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)}
(when p/ios? {:SectionSeparatorComponent (fn [] (r/as-element [section-separator]))}) (when p/ios? {:SectionSeparatorComponent (fn [] (r/as-element [section-separator]))})
props)])) props)]))

7
src/status_im/components/styles.cljs
View File

@ -10,6 +10,7 @@
(def color-blue-transparent "#7099e632") (def color-blue-transparent "#7099e632")
(def color-black "#000000") (def color-black "#000000")
(def color-purple "#a187d5") (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-transparent "rgba(0, 0, 0, 0.4)")
(def color-gray "#838c93de") (def color-gray "#838c93de")
(def color-gray2 "#8f838c93") (def color-gray2 "#8f838c93")
@ -35,7 +36,9 @@
(def color-light-gray "#EEF2F5") (def color-light-gray "#EEF2F5")
(def color-light-gray2 "#ececf0") (def color-light-gray2 "#ececf0")
(def color-red "red") (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-red "#e86363")
(def color-light-red2 "#f47979") (def color-light-red2 "#f47979")
(def color-green-1 "#a8f4d4") (def color-green-1 "#a8f4d4")
@ -50,7 +53,7 @@
(def text4-color color-gray4) (def text4-color color-gray4)
(def icon-dark-color color-dark) (def icon-dark-color color-dark)
(def icon-gray-color color-gray7) (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 online-color color-light-blue)
(def new-messages-count-color color-blue-transparent) (def new-messages-count-color color-blue-transparent)
(def chat-background color-light-gray) (def chat-background color-light-gray)

8
src/status_im/components/tabs/views.cljs
View File

@ -16,15 +16,17 @@
(let [active? (= view-id selected-view-id)] (let [active? (= view-id selected-view-id)]
[touchable-highlight {:style st/tab [touchable-highlight {:style st/tab
:disabled active? :disabled active?
:onPress #(dispatch [:navigate-to-tab view-id])} :on-press #(dispatch [:navigate-to-tab view-id])}
[view {:style st/tab-container} [view {:style st/tab-container}
(when-let [icon (if active? icon-active icon-inactive)] (when-let [icon (if active? icon-active icon-inactive)]
[view [view
[image {:source {:uri icon} [image {:source {:uri icon}
:style st/tab-icon}]]) :style st/tab-icon}]])
[view [view
[text {:style (st/tab-title active?) [text (merge
:font (if (and p/ios? active?) :medium :regular)} (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]]]])) title]]]]))
(defn- create-tab [index data selected-view-id] (defn- create-tab [index data selected-view-id]

6
src/status_im/components/text_input_with_label/styles.cljs
View File

@ -39,7 +39,7 @@
:letter-spacing -0.2}}) :letter-spacing -0.2}})
(defstyle error-text (defstyle error-text
{:color common/color-red2 {:color common/color-red-2
:android {:margin-top 6 :android {:margin-top 6
:font-size 12} :font-size 12}
:ios {:margin-top 4 :ios {:margin-top 4
@ -47,13 +47,13 @@
:letter-spacing -0.2}}) :letter-spacing -0.2}})
(defn underline-blured [error] (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}) :align-items :center})
(defn underline-focused [underline-width underline-height error] (defn underline-focused [underline-width underline-height error]
{:height underline-height {:height underline-height
:width underline-width :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)) (def label-top-top (if ios? 6 6))

34
src/status_im/components/toolbar_new/actions.cljs
View File

@ -7,6 +7,11 @@
{:icon :icons/hamburger {:icon :icons/hamburger
:handler handler}) :handler handler})
(defn hamburger-white [handler]
(merge (hamburger handler)
{:icon-opts {:color :white}
:handler handler}))
(defn add [handler] (defn add [handler]
{:icon :icons/add {:icon :icons/add
:handler handler}) :handler handler})
@ -20,37 +25,38 @@
:handler handler}) :handler handler})
(def search-icon (def search-icon
{:icon [:icons/search {:icon :icons/search
{:container-style {:opacity 0.4}}]}) :icon-opts {:container-style {:opacity 0.4}}})
(defn back [handler] (defn back [handler]
{:icon :icons/back {:icon :icons/back
:handler handler :handler handler
:accessibility-label id/toolbar-back-button}) :accessibility-label id/toolbar-back-button})
(def default-handler #(dispatch [:navigate-back]))
(def default-back (def default-back
(back #(dispatch [:navigate-back]))) (back default-handler))
(defn back-white [handler] (defn back-white [handler]
{:icon [:icons/back {:icon :icons/back
{:color :white}] :icon-opts {:color :white}
:handler handler}) :handler handler})
(defn close [handler] (defn close [handler]
{:icon :icons/close {:icon :icons/close
:handler handler}) :handler handler})
(defn close-white [handler] (defn close-white [handler]
{:icon [:icons/close {:icon :icons/close
{:color :white}] :icon-opts {:color :white}
:handler handler}) :handler handler})
(defn list-white [handler] (defn list-white [handler]
{:icon [:icons/transaction_history {:icon :icons/transaction-history
{:color :white :style {:viewBox "-108 65.9 24 24"}}] :icon-opts {:color :white :style {:viewBox "-108 65.9 24 24"}}
:handler handler}) :handler handler})
(defn add-wallet [handler] (defn add-wallet [handler]
{:image {:source {:uri :icon_add_wallet_dark} {:icon :icons/add-wallet
:style st/action-default}
:handler handler}) :handler handler})

38
src/status_im/components/toolbar_new/styles.cljs
View File

@ -16,16 +16,14 @@
(defstyle toolbar (defstyle toolbar
{:flex-direction :row {:flex-direction :row
:align-items :center :align-items :center
:justify-content :space-between
:android {:height 55} :android {:height 55}
:ios {:height 56}}) :ios {:height 56}})
(defnstyle toolbar-nav-actions-container (defnstyle toolbar-nav-actions-container
[actions] [actions]
{:flex-direction :row {:flex-direction :row
:margin-left 4 :margin-left 4})
:ios {:width (when (and actions (pos? (count actions)))
(-> (+ toolbar-icon-width toolbar-icon-spacing)
(* (count actions))))}})
(defstyle toolbar-title-container (defstyle toolbar-title-container
{:flex 1 {:flex 1
@ -44,6 +42,8 @@
(def toolbar-border (def toolbar-border
(get-in p/platform-specific [:component-styles :toolbar-border])) (get-in p/platform-specific [:component-styles :toolbar-border]))
(def toolbar-actions {:flex-direction :row})
(defn toolbar-actions-container [actions-count custom] (defn toolbar-actions-container [actions-count custom]
(merge {:flex-direction :row} (merge {:flex-direction :row}
(when-not custom {:margin-right 4}) (when-not custom {:margin-right 4})
@ -81,12 +81,28 @@
{:width 24 {:width 24
:height 24}) :height 24})
(def toolbar-button (def nav-item-button
{:paddingVertical 16 {:padding-vertical 16
:paddingHorizontal 12}) :padding-horizontal 12})
(def toolbar-right-action (def nav-item-text
{:color st/color-blue4 {:padding-vertical 18
:font-size 17 :padding-horizontal 16})
:margin-right 12})
(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})

168
src/status_im/components/toolbar_new/view.cljs
View File

@ -1,44 +1,128 @@
(ns status-im.components.toolbar-new.view (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.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.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.actions :as act]
[status-im.components.toolbar-new.styles :as tst] [status-im.components.toolbar-new.styles :as tst]
[status-im.components.icons.vector-icons :as vi] [status-im.components.icons.vector-icons :as vi]))
[reagent.core :as r]))
(defn vec-icon [icon] ;; Navigation item
((comp vec flatten vector) vi/icon icon))
(defn nav-button (defn nav-item
[{:keys [handler accessibility-label image icon]}] [{:keys [handler accessibility-label style] :or {handler #(rf/dispatch [:navigate-back])}} item]
[rn/touchable-highlight [rn/touchable-highlight
(merge {:style tst/toolbar-button (merge {:on-press handler}
:on-press handler}
(when accessibility-label (when accessibility-label
{:accessibility-label accessibility-label})) {:accessibility-label accessibility-label}))
[rn/view [rn/view{:style style}
(if icon item]])
[vec-icon icon]
[rn/image image])]]) (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] (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]) title])
(defn toolbar [{:keys [title (def blank-action [rn/view tst/toolbar-action])
nav-action
hide-nav? (defn- option-actions [icon icon-opts options]
actions [context-menu/context-menu
custom-action [rn/view tst/toolbar-action
background-color [vi/icon icon icon-opts]]
custom-content options
hide-border? nil
border-style tst/item])
title-style
style]}] (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)] (let [style (merge (tst/toolbar-wrapper background-color) style)]
[rn/view {:style style} [rn/view {:style style}
[rn/view tst/toolbar [rn/view tst/toolbar
@ -50,30 +134,30 @@
[rn/text {:style (merge tst/toolbar-title-text title-style) [rn/text {:style (merge tst/toolbar-title-text title-style)
:font :toolbar-title} :font :toolbar-title}
title]]) title]])
[rn/view (tst/toolbar-actions-container (count actions) custom-action) [rn/view (tst/toolbar-actions-container (count actions) custom-action)
(if actions (if actions
(for [{:keys [image icon options handler]} actions] (for [{:keys [image icon icon-opts options handler]} actions]
(with-meta (with-meta
(cond (= image :blank) (cond (= image :blank)
[rn/view tst/toolbar-action] [rn/view tst/toolbar-action]
options options
[context-menu [context-menu/context-menu
[rn/view tst/toolbar-action [vec-icon icon]] [rn/view tst/toolbar-action
[vi/icon icon icon-opts]]
options options
nil nil
tst/toolbar-button] tst/item]
:else :else
[rn/touchable-highlight {:style tst/toolbar-button [rn/touchable-highlight {:style tst/item
:on-press handler} :on-press handler}
[rn/view tst/toolbar-action [rn/view tst/toolbar-action
(if icon [vi/icon icon icon-opts]]])
[vec-icon icon]
[rn/image image])]])
{:key (str "action-" (or icon image))})) {:key (str "action-" (or icon image))}))
custom-action)]] custom-action)]]
[sync-state-gradient-view] [sync-state-gradient-view/sync-state-gradient-view]
(when-not hide-border? (when-not hide-border?
[rn/view (merge tst/toolbar-border-container border-style) [rn/view (merge tst/toolbar-border-container border-style)
[rn/view tst/toolbar-border]])])) [rn/view tst/toolbar-border]])]))
@ -81,9 +165,9 @@
(def search-text-input (r/atom nil)) (def search-text-input (r/atom nil))
(defn- toolbar-search-submit [on-search-submit] (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) (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? (defn- toolbar-with-search-content [{:keys [show-search?
search-placeholder search-placeholder
@ -98,7 +182,7 @@
:auto-focus true :auto-focus true
:placeholder search-placeholder :placeholder search-placeholder
:placeholder-text-color st/color-gray4 :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 :on-submit-editing (when on-search-submit
#(toolbar-search-submit on-search-submit))}] #(toolbar-search-submit on-search-submit))}]
(or custom-title (or custom-title
@ -116,13 +200,13 @@
on-search-submit] on-search-submit]
:as opts}] :as opts}]
(let [toggle-search-fn #(do (let [toggle-search-fn #(do
(dispatch [:set-in [:toolbar-search :show] %]) (rf/dispatch [:set-in [:toolbar-search :show] %])
(dispatch [:set-in [:toolbar-search :text] ""])) (rf/dispatch [:set-in [:toolbar-search :text] ""]))
actions (if show-search? actions (if show-search?
(if (pos? (count search-text)) (if (pos? (count search-text))
[(act/close #(do [(act/close #(do
(.clear @search-text-input) (.clear @search-text-input)
(dispatch [:set-in [:toolbar-search :text] ""])))] (rf/dispatch [:set-in [:toolbar-search :text] ""])))]
[act/search-icon]) [act/search-icon])
(into [(act/search #(toggle-search-fn search-key))] actions))] (into [(act/search #(toggle-search-fn search-key))] actions))]
[toolbar {:style style [toolbar {:style style

14
src/status_im/transactions/screens/transaction_details.cljs
View File

@ -16,14 +16,14 @@
[status-im.utils.money :as money])) [status-im.utils.money :as money]))
(defn toolbar-view [] (defn toolbar-view []
[toolbar/toolbar [toolbar/toolbar2
{:background-color st/transactions-toolbar-background {:background-color st/transactions-toolbar-background
:nav-action (act/back-white #(rf/dispatch [:navigate-to-modal :unsigned-transactions])) :border-style st/toolbar-border}
:border-style st/toolbar-border [toolbar/nav-button (act/back-white #(rf/dispatch [:navigate-to-modal :unsigned-transactions]))]
:custom-content [rn/view {:style st/toolbar-title-container} [rn/view {:style st/toolbar-title-container}
[rn/text {:style st/toolbar-title-text [rn/text {:style st/toolbar-title-text
:font :toolbar-title} :font :toolbar-title}
(i18n/label :t/transaction)]]}]) (i18n/label :t/transaction)]]])
(defn detail-item [title content name?] (defn detail-item [title content name?]
[rn/view {:style st/details-item} [rn/view {:style st/details-item}

5
src/status_im/translations/en.cljs
View File

@ -340,14 +340,13 @@
:wallet-request "Request" :wallet-request "Request"
:wallet-exchange "Exchange" :wallet-exchange "Exchange"
:wallet-assets "Assets" :wallet-assets "Assets"
:wallet-add-asset "Add asset"
:wallet-total-value "Total value"
:transactions "Transactions" :transactions "Transactions"
:transactions-to "To"
:transactions-sign "Sign" :transactions-sign "Sign"
:transactions-sign-all "Sign all" :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-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-input-placeholder "Enter your passphrase"
:transactions-sign-all-done "Done"
:transactions-delete "Delete"
:transactions-history "History" :transactions-history "History"
:transactions-unsigned "Unsigned" :transactions-unsigned "Unsigned"
:transactions-history-empty "You don't have a history transactions" :transactions-history-empty "You don't have a history transactions"

12
src/status_im/ui/screens/accounts/login/views.cljs
View File

@ -6,7 +6,7 @@
[status-im.ui.screens.accounts.views :refer [account-badge]] [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.text-input-with-label.view :refer [text-input-with-label]]
[status-im.components.status-bar :refer [status-bar]] [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.components.toolbar-new.actions :as act]
[status-im.ui.screens.accounts.login.styles :as st] [status-im.ui.screens.accounts.login.styles :as st]
[status-im.components.react :as react] [status-im.components.react :as react]
@ -14,11 +14,11 @@
[status-im.components.react :as components])) [status-im.components.react :as components]))
(defn login-toolbar [] (defn login-toolbar []
[toolbar {:background-color :transparent [toolbar/toolbar2
:hide-border? true {:background-color :transparent
:title-style {:color :white} :hide-border? true}
:nav-action (act/back-white #(dispatch [:navigate-back])) [toolbar/nav-button (act/back-white #(dispatch [:navigate-back]))]
:title (i18n/label :t/sign-in-to-status)}]) [toolbar/content-title {:color :white} (i18n/label :t/sign-in-to-status)]])
(def password-text-input (atom nil)) (def password-text-input (atom nil))

16
src/status_im/ui/screens/accounts/views.cljs
View File

@ -47,15 +47,15 @@
:renderRow #(list-item [account-view %])}]] :renderRow #(list-item [account-view %])}]]
[view st/bottom-actions-container [view st/bottom-actions-container
[action-button (merge [action-button (merge
{:label (i18n/label :t/create-new-account) {:label (i18n/label :t/create-new-account)
:icon [:icons/add :icon :icons/add
{:color :white}] :icon-opts {:color :white}
:on-press #(dispatch [:create-new-account-handler])} :on-press #(dispatch [:create-new-account-handler])}
st/accounts-action-button)] st/accounts-action-button)]
[common/separator st/accounts-separator st/accounts-separator-wrapper] [common/separator st/accounts-separator st/accounts-separator-wrapper]
[action-button (merge [action-button (merge
{:label (i18n/label :t/recover-access) {:label (i18n/label :t/recover-access)
:icon [:icons/dots_horizontal :icon :icons/dots-horizontal
{:color :white}] :icon-opts {:color :white}
:on-press #(dispatch [:navigate-to :recover])} :on-press #(dispatch [:navigate-to :recover])}
st/accounts-action-button)]]]) st/accounts-action-button)]]])

4
src/status_im/ui/screens/chats_list/views/inner_item.cljs
View File

@ -107,10 +107,10 @@
[view st/name-view [view st/name-view
(when public-group? (when public-group?
[view st/public-group-icon-container [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? (when private-group?
[view st/private-group-icon-container [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} [view {:flex-shrink 1}
[text {:style st/name-text [text {:style st/name-text
:number-of-lines 1} :number-of-lines 1}

27
src/status_im/ui/screens/contacts/contact_list_modal/views.cljs
View File

@ -28,20 +28,23 @@
(defn actions-view [action click-handler] (defn actions-view [action click-handler]
[view actions-list [view actions-list
[action-button [action-button
{:label (label :t/enter-address) {:label (label :t/enter-address)
:icon [:icons/address {:color :blue}] :icon :icons/address
:on-press #(do :icon-opts {:color :blue}
(dispatch [:send-to-webview-bridge :on-press #(do
{:event (name :webview-send-transaction)}]) (dispatch [:send-to-webview-bridge
(dispatch [:navigate-back]))}] {:event (name :webview-send-transaction)}])
(dispatch [:navigate-back]))}]
[action-separator] [action-separator]
(if (= :request action) (if (= :request action)
[action-button {:label (label :t/show-qr) [action-button {:label (label :t/show-qr)
:icons [:icons/qr {:color :blue}] :icon :icons/qr
:on-press #(click-handler :qr-scan action)}] :icon-opts {:color :blue}
[action-button {:label (label :t/scan-qr) :on-press #(click-handler :qr-scan action)}]
:icon [:icons/fullscreen {:color :blue}] [action-button {:label (label :t/scan-qr)
:on-press #(click-handler :qr-scan action)}])]) :icon :icons/fullscreen
:icon-opts {:color :blue}
:on-press #(click-handler :qr-scan action)}])])
(defn render-row [click-handler action params] (defn render-row [click-handler action params]
(fn [row _ _] (fn [row _ _]

2
src/status_im/ui/screens/contacts/views.cljs
View File

@ -135,7 +135,7 @@
[contact-group-view {:group group [contact-group-view {:group group
:edit? edit?}])] :edit? edit?}])]
[view st/empty-contact-groups [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)]])] [text {:style st/empty-contacts-text} (label :t/no-contacts)]])]
(when (and android? (not edit?)) (when (and android? (not edit?))
[contacts-action-button])])) [contacts-action-button])]))

3
src/status_im/ui/screens/db.cljs
View File

@ -176,4 +176,5 @@
:discoveries/request-discoveries-timer :discoveries/request-discoveries-timer
:discoveries/new-discover :discoveries/new-discover
:wallet/wallet :wallet/wallet
:prices/prices])) :prices/prices
:prices/prices-loading?]))

2
src/status_im/ui/screens/discover/views.cljs
View File

@ -90,6 +90,6 @@
[discover-recent {:current-account current-account}]] [discover-recent {:current-account current-account}]]
[view contacts-st/empty-contact-groups [view contacts-st/empty-contact-groups
;; todo change icon ;; 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} [text {:style contacts-st/empty-contacts-text}
(label :t/no-statuses-discovered)]])])) (label :t/no-statuses-discovered)]])]))

3
src/status_im/ui/screens/discover/views/search_results.cljs
View File

@ -48,8 +48,7 @@
:style st/discover-tag-toolbar}] :style st/discover-tag-toolbar}]
(if (empty? discoveries) (if (empty? discoveries)
[view st/empty-view [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} [text {:style contacts-st/empty-contacts-text}
(label :t/no-statuses-found)]] (label :t/no-statuses-found)]]
[list-view {:dataSource datasource [list-view {:dataSource datasource

2
src/status_im/ui/screens/events.cljs
View File

@ -165,7 +165,7 @@
[:start-requesting-discoveries] [:start-requesting-discoveries]
[:remove-old-discoveries!] [:remove-old-discoveries!]
[:set :accounts/creating-account? false] [:set :accounts/creating-account? false]
[:init-wallet] [:refresh-wallet]
[:get-fcm-token]]})) [:get-fcm-token]]}))
(register-handler-fx (register-handler-fx

16
src/status_im/ui/screens/group/views.cljs
View File

@ -41,9 +41,10 @@
:default-value new-group-name}]])) :default-value new-group-name}]]))
(defn add-btn [on-press] (defn add-btn [on-press]
[action-button {:label (label :t/add-members) [action-button {:label (label :t/add-members)
:icon [:icons/add {:color :blue}] :icon :icons/add
:on-press on-press}]) :icon-opts {:color :blue}
:on-press on-press}])
(defn delete-btn [on-press] (defn delete-btn [on-press]
[view styles/settings-group-container [view styles/settings-group-container
@ -68,14 +69,15 @@
[text {:style styles/settings-group-text} [text {:style styles/settings-group-text}
(label :t/mute-notifications)]]]]] (label :t/mute-notifications)]]]]]
[action-separator] [action-separator]
[action-button {:label (label :t/clear-history) [action-button {:label (label :t/clear-history)
:icon [:icons/close {:color :blue}] :icon :icons/close
:on-press #(dispatch [:clear-history])}] :icon-opts {:color :blue}
:on-press #(dispatch [:clear-history])}]
[action-separator] [action-separator]
[touchable-highlight {:on-press #(dispatch [:leave-group-chat])} [touchable-highlight {:on-press #(dispatch [:leave-group-chat])}
[view styles/settings-group-item [view styles/settings-group-item
[view styles/delete-icon-container [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 [view styles/settings-group-text-container
[text {:style styles/delete-group-text} [text {:style styles/delete-group-text}
(label :t/leave-chat)]]]]]) (label :t/leave-chat)]]]]])

34
src/status_im/ui/screens/profile/views.cljs
View File

@ -16,7 +16,7 @@
[status-im.components.status-bar :refer [status-bar]] [status-im.components.status-bar :refer [status-bar]]
[status-im.components.styles :refer [color-blue]] [status-im.components.styles :refer [color-blue]]
[status-im.components.toolbar-new.actions :as actions] [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.i18n :refer [label]]
[status-im.ui.screens.profile.styles :as styles] [status-im.ui.screens.profile.styles :as styles]
[status-im.utils.datetime :as time] [status-im.utils.datetime :as time]
@ -24,11 +24,11 @@
(:require-macros [status-im.utils.views :refer [defview]])) (:require-macros [status-im.utils.views :refer [defview]]))
(defn my-profile-toolbar [] (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)}])]}]) :text (label :t/edit)}])]}])
(defn profile-toolbar [contact] (defn profile-toolbar [contact]
[toolbar [toolbar/toolbar
(when (and (not (:pending? contact)) (when (and (not (:pending? contact))
(not (:unremovable? contact))) (not (:unremovable? contact)))
{:actions [(actions/opts [{:value #(dispatch [:hide-contact contact]) {:actions [(actions/opts [{:value #(dispatch [:hide-contact contact])
@ -58,20 +58,23 @@
(defn profile-actions [{:keys [pending? whisper-identity dapp?]} chat-id] (defn profile-actions [{:keys [pending? whisper-identity dapp?]} chat-id]
[react/view actions-list [react/view actions-list
(if pending? (if pending?
[action-button {:label (label :t/add-to-contacts) [action-button {:label (label :t/add-to-contacts)
:icon [:icons/add {:color :blue}] :icon :icons/add
:on-press #(dispatch [:add-pending-contact chat-id])}] :icon-opts {:color :blue}
:on-press #(dispatch [:add-pending-contact chat-id])}]
[action-button-disabled {:label (label :t/in-contacts) :icon :icons/ok}]) [action-button-disabled {:label (label :t/in-contacts) :icon :icons/ok}])
[action-separator] [action-separator]
[action-button {:label (label :t/start-conversation) [action-button {:label (label :t/start-conversation)
:icon [:icons/chats {:color :blue}] :icon :icons/chats
:on-press #(dispatch [:profile/send-message whisper-identity])}] :icon-opts {:color :blue}
:on-press #(dispatch [:profile/send-message whisper-identity])}]
(when-not dapp? (when-not dapp?
[react/view [react/view
[action-separator] [action-separator]
[action-button {:label (label :t/send-transaction) [action-button {:label (label :t/send-transaction)
:icon [:icons/arrow_right {:color :blue}] :icon :icons/arrow-right
:on-press #(dispatch [:profile/send-transaction chat-id])}]])]) :icon-opts {:color :blue}
:on-press #(dispatch [:profile/send-transaction chat-id])}]])])
(defn profile-info-item [{:keys [label value options text-mode empty-value?]}] (defn profile-info-item [{:keys [label value options text-mode empty-value?]}]
[react/view styles/profile-setting-item [react/view styles/profile-setting-item
@ -186,9 +189,10 @@
[profile-status status true]] [profile-status status true]]
[form-spacer] [form-spacer]
[react/view actions-list [react/view actions-list
[action-button {:label (label :t/show-qr) [action-button {:label (label :t/show-qr)
:icon [:icons/qr {:color :blue}] :icon :icons/qr
:on-press (show-qr current-account :public-key)}]] :icon-opts {:color :blue}
:on-press (show-qr current-account :public-key)}]]
[form-spacer] [form-spacer]
[react/view styles/profile-info-container [react/view styles/profile-info-container
[my-profile-info current-account] [my-profile-info current-account]

9
src/status_im/ui/screens/wallet/db.cljs
View File

@ -13,13 +13,10 @@
;; TODO(oskarth): Spec for prices as as: {:from ETH, :to USD, :price 290.11, :last-day 304.17} ;; TODO(oskarth): Spec for prices as as: {:from ETH, :to USD, :price 290.11, :last-day 304.17}
(def dummy-transaction-data (def dummy-transaction-data
[{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :unsigned} [{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :pending}
{: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 "10000" :symbol "SGT"} :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 "10000" :symbol "SGT"} :state :postponed}
{: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 :pending}
{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :sent}]) {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :outgoing}])

23
src/status_im/ui/screens/wallet/events.cljs
View File

@ -46,19 +46,22 @@
{:get-prices {:from "ETH" {:get-prices {:from "ETH"
:to "USD" :to "USD"
:success-event :update-prices :success-event :update-prices
:error-event :update-prices-fail}})) :error-event :update-prices-fail}
:db (assoc db :prices-loading? true)}))
(handlers/register-handler-fx (handlers/register-handler-fx
:init-wallet :refresh-wallet
(fn [{{:keys [web3 accounts/current-account-id] :as db} :db} [_ a]] (fn [{{:keys [web3 accounts/current-account-id] :as db} :db} [_ a]]
{:get-balance {:web3 web3 {:get-balance {:web3 web3
:account-id current-account-id :account-id current-account-id
:success-event :update-balance :success-event :update-balance
:error-event :update-balance-fail} :error-event :update-balance-fail}
:dispatch [:load-prices] :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)) (assoc-in db [:wallet :wallet/error] err))
(handlers/register-handler-db (handlers/register-handler-db
@ -69,21 +72,25 @@
(handlers/register-handler-db (handlers/register-handler-db
:update-balance :update-balance
(fn [db [_ 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 (handlers/register-handler-db
:update-prices :update-prices
(fn [db [_ prices]] (fn [db [_ prices]]
(assoc db :prices prices))) (assoc db :prices prices :prices-loading? false)))
(handlers/register-handler-db (handlers/register-handler-db
:update-balance-fail :update-balance-fail
(fn [db [_ err]] (fn [db [_ err]]
(log/debug "Unable to get balance: " 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 (handlers/register-handler-db
:update-prices-fail :update-prices-fail
(fn [db [_ err]] (fn [db [_ err]]
(log/debug "Unable to get prices: " err) (log/debug "Unable to get prices: " err)
(set-error-message db :error))) (-> (assoc-error-message db :error)
(assoc :prices-loading? false))))

6
src/status_im/ui/screens/wallet/history/styles.cljs
View File

@ -60,4 +60,8 @@
:top 0}) :top 0})
(def sign-all-done-button (def sign-all-done-button
{:background-color :transparent}) {:background-color :transparent})
(defn transaction-icon-background [color]
{:border-radius 32
:background-color st/color-blue4-transparent})

211
src/status_im/ui/screens/wallet/history/views.cljs
View File

@ -3,13 +3,14 @@
(:require [reagent.core :as r] (:require [reagent.core :as r]
[re-frame.core :as rf] [re-frame.core :as rf]
[status-im.components.button.view :as btn] [status-im.components.button.view :as btn]
[status-im.components.checkbox.view :as chk]
[status-im.components.react :as rn] [status-im.components.react :as rn]
[status-im.components.list.views :as list] [status-im.components.list.views :as list]
[status-im.components.tabs.styles :as tst] [status-im.components.tabs.styles :as tst]
[status-im.components.tabs.views :as tabs] [status-im.components.tabs.views :as tabs]
[status-im.components.toolbar-new.actions :as act] [status-im.components.toolbar-new.actions :as act]
[status-im.components.toolbar-new.view :as toolbar] [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.utils.utils :as utils]
[status-im.i18n :as i18n])) [status-im.i18n :as i18n]))
@ -27,179 +28,177 @@
[toolbar/text-action #(rf/dispatch [:navigate-to-modal :wallet-transactions-sign-all]) [toolbar/text-action #(rf/dispatch [:navigate-to-modal :wallet-transactions-sign-all])
(i18n/label :t/transactions-sign-all)]) (i18n/label :t/transactions-sign-all)])
(defn history-action [] (def history-action
;; TODO(jeluard) replace with proper icon {:icon :icons/filter
[toolbar/text-action #(rf/dispatch [:navigate-to-modal :wallet-transactions-filter]) :icon-opts {}
"History"]) :handler #(utils/show-popup "TODO" "Not implemented") #_(rf/dispatch [:navigate-to-modal :wallet-transactions-sign-all])})
(defn toolbar-view [view-id] (defn toolbar-view [view-id]
[toolbar/toolbar [toolbar/toolbar2 {}
{:title (i18n/label :t/transactions) toolbar/default-nav-back
:custom-action [toolbar/content-title (i18n/label :t/transactions)]
[(if (= @view-id :wallet-transactions-unsigned) unsigned-action history-action)]}]) (if (= @view-id :wallet-transactions-unsigned)
[unsigned-action]
(defn- icon-status [k] [toolbar/actions
(case k [history-action]])])
:pending :dropdown_white
:dropdown_white))
(defn action-buttons [m] (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/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- 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}] (defn render-transaction [{:keys [to state] {:keys [value symbol]} :content :as m}]
[list/item [list/item
[list/item-icon :icons/ok {:color :blue}] [list/item-icon (transaction-type->icon state)]
[list/item-content [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) (if (unsigned? state)
[action-buttons m])] [action-buttons m])]
[list/item-icon :icons/forward]]) [list/item-icon {:icon :icons/forward}]])
;; TODO(yenda) hook with re-frame ;; TODO(yenda) hook with re-frame
(defn empty-text [s] (defn empty-text [s]
[rn/text {:style st/empty-text} s]) [rn/text {:style history-styles/empty-text} s])
(defview history-list [] (defview history-list []
(letsubs [pending-transactions [:wallet/pending-transactions] (letsubs [pending-transactions [:wallet/pending-transactions]
postponed-transactions [:wallet/postponed-transactions] postponed-transactions [:wallet/postponed-transactions]
sent-transactions [:wallet/sent-transactions]] sent-transactions [:wallet/sent-transactions]]
[list/section-list {:sections [{:title "Postponed" [rn/scroll-view
:key :postponed [list/section-list {:sections [{:title "Postponed"
:data postponed-transactions} :key :postponed
{:title "Pending" :data postponed-transactions}
:key :pending {:title "Pending"
:data pending-transactions} :key :pending
{:title "Sent" :data pending-transactions}
:key :sent ;; TODO(yenda) :sent transactions shouldbe grouped by day and have their :key / :title adapted
:data sent-transactions}] {:title "01 Sep"
:render-fn render-transaction :key :sent-sep
:empty-component (empty-text (i18n/label :t/transactions-history-empty))}])) :data sent-transactions}]
:render-fn render-transaction
:empty-component (empty-text (i18n/label :t/transactions-history-empty))}]]))
(defview unsigned-list [] (defview unsigned-list [transactions]
(letsubs [transactions [:wallet/unsigned-transactions]] []
[list/flat-list {:data transactions [rn/scroll-view
:render-fn render-transaction [list/flat-list {:data transactions
:empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}])) :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 [{:view-id :wallet-transactions-unsigned
:title (i18n/label :t/transactions-unsigned) :title (unsigned-transactions-title unsigned-transactions)
:screen unsigned-list} :screen [unsigned-list unsigned-transactions]}
{:view-id :wallet-transactions-history {:view-id :wallet-transactions-history
:title (i18n/label :t/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] (defn get-tab-index [tabs view-id]
(get tab->index view-id 0)) (get (tab->index tabs) view-id 0))
;; Sign all ;; Sign all
(defview sign-all [] (defview sign-all []
[] []
[rn/keyboard-avoiding-view {:style st/sign-all-view} [rn/keyboard-avoiding-view {:style history-styles/sign-all-view}
[rn/view {:style st/sign-all-done} [rn/view {:style history-styles/sign-all-done}
[btn/primary-button {:style st/sign-all-done-button [btn/primary-button {:style history-styles/sign-all-done-button
:text (i18n/label :t/transactions-sign-all-done) :text (i18n/label :t/done)
:on-press #(rf/dispatch [:navigate-back])}]] :on-press #(rf/dispatch [:navigate-back])}]]
[rn/view {:style st/sign-all-popup} [rn/view {:style history-styles/sign-all-popup}
[rn/text {:style st/sign-all-popup-sign-phrase} "one two three"] ;; TODO hook [rn/text {:style history-styles/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/text {:style history-styles/sign-all-popup-text} (i18n/label :t/transactions-sign-all-text)]
[rn/view {:style st/sign-all-actions} [rn/view {:style history-styles/sign-all-actions}
[rn/text-input {:style st/sign-all-input [rn/text-input {:style history-styles/sign-all-input
:secure-text-entry true :secure-text-entry true
:placeholder (i18n/label :t/transactions-sign-input-placeholder)}] :placeholder (i18n/label :t/transactions-sign-input-placeholder)}]
[btn/primary-button {:text (i18n/label :t/transactions-sign-all) :on-press #(on-sign-transaction %)}]]]]) [btn/primary-button {:text (i18n/label :t/transactions-sign-all) :on-press #(on-sign-transaction %)}]]]])
;; Filter history ;; Filter history
(defn- token->icon [s] (defn- item-tokens [{:keys [symbol label checked?]}]
(case s
"GNO" [:icons/ok {:color :green}] ;TODO :dollar
[:icons/ok {:color :blue}]))
(defn item-tokens [{:keys [symbol label]}]
[list/item [list/item
((comp vec flatten vector) list/item-icon (token->icon symbol)) [list/item-icon (transaction-type->icon "pending")] ;; TODO add proper token data
[list/item-content label symbol]]) [list/item-content label symbol]
;; TODO checkbox [chk/checkbox {:checked? true #_checked?}]])
(defn- item-type [{:keys [id label 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]}]
[list/item [list/item
((comp vec flatten vector) list/item-icon (type->icon id)) [list/item-icon (transaction-type->icon id)]
[list/item-content label]]) [list/item-content label]
;; TODO checkbox [chk/checkbox checked?]])
(def filter-data (def filter-data
[{:title (i18n/label :t/transactions-filter-tokens) [{:title (i18n/label :t/transactions-filter-tokens)
:key :tokens :key :tokens
:render-fn item-tokens :renderItem (list/wrap-render-fn item-tokens)
:data [{:symbol "GNO" :label "Gnosis"} :data [{:symbol "GNO" :label "Gnosis"}
{:symbol "SNT" :label "Status Network Token"} {:symbol "SNT" :label "Status Network Token"}
{:symbol "SGT" :label "Status Genesis Token"} {:symbol "SGT" :label "Status Genesis Token"}
{:symbol "GOL" :label "Golem"}]} {:symbol "GOL" :label "Golem"}]}
{:title (i18n/label :t/transactions-filter-type) {:title (i18n/label :t/transactions-filter-type)
:key :type :key :type
:render-fn item-type :renderItem (list/wrap-render-fn item-type)
:data [{:id :incoming :label "Incoming"} :data [{:id :incoming :label "Incoming"}
{:id :outgoing :label "Outgoing"} {:id :outgoing :label "Outgoing"}
{:id :pending :label "Pending"} {:id :pending :label "Pending"}
{:id :postponed :label "Postponed"}]}]) {:id :postponed :label "Postponed"}]}])
(defview filter-history [] (defview filter-history []
[] []
[rn/view [rn/view
[toolbar/toolbar [toolbar/toolbar2 {}
;; TODO(jeluard) replace with icon when available and toolbar has been refactored [toolbar/nav-clear-text (i18n/label :t/done)]
{:title (i18n/label :t/transactions-filter-title) [toolbar/content-title (i18n/label :t/transactions-filter-title)]
:nav-action (act/back #(rf/dispatch [:navigate-back]));; TODO close modal [toolbar/text-action #(utils/show-popup "TODO" "Select All")
:custom-action (i18n/label :t/transactions-filter-select-all)]]
[toolbar/text-action #(rf/dispatch [:navigate-to-modal :wallet-transactions-filter])
(i18n/label :t/transactions-filter-select-all)]}]
[rn/scroll-view [rn/scroll-view
[list/section-list {:sections filter-data}]]]) [list/section-list {:sections filter-data}]]])
;; TODO(jeluard) whole swipe logic ;; TODO(jeluard) whole swipe logic
;; extract navigate-tab action (on tap) ;; extract navigate-tab action (on tap)
(defn main-section [view-id] (defn- main-section [view-id unsigned-transactions]
[rn/view {:style st/main-section} (let [tabs (tab-list unsigned-transactions)]
[tabs/tabs {:selected-view-id @view-id [rn/view {:style history-styles/main-section}
:tab-list tab-list}] [tabs/tabs {:selected-view-id @view-id
[rn/swiper (merge tst/swiper :tab-list tabs}]
{:index (get-tab-index @view-id) [rn/swiper (merge tst/swiper
:loop false}) {:index (get-tab-index tabs @view-id)
;:ref #(reset! swiper %) :loop false})
;:on-momentum-scroll-end (on-scroll-end swiped? scroll-ended @view-id) ;:ref #(reset! swiper %)
;:on-momentum-scroll-end (on-scroll-end swiped? scroll-ended @view-id)
(doall (doall
(map-indexed (fn [index {screen :screen}] (map-indexed (fn [index {screen :screen}]
^{:key index} [screen]) tab-list))]]) (with-meta screen {:key index} )) tabs))]]))
;; TODO(yenda) must reflect selected wallet ;; TODO(yenda) must reflect selected wallet
(def initial-tab (-> tab-list first :view-id))
(defview transactions [] (defview transactions []
[] [unsigned-transactions [:wallet/unsigned-transactions]]
(let [view-id (r/atom initial-tab)] (let [view-id (r/atom :wallet-transactions-history)]
[rn/view {:style st/wallet-transactions-container} [rn/view {:style history-styles/wallet-transactions-container}
[toolbar-view view-id] [toolbar-view view-id]
[rn/scroll-view [main-section view-id unsigned-transactions]]))
[main-section view-id]]]))

68
src/status_im/ui/screens/wallet/main/styles.cljs
View File

@ -1,21 +1,20 @@
(ns status-im.ui.screens.wallet.main.styles (ns status-im.ui.screens.wallet.main.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) (:require [status-im.components.styles :as st]
(:require [status-im.components.styles :as common]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(def wallet-container (def wallet-container
{:flex 1 {:flex 1
:background-color common/color-white}) :background-color st/color-white})
(def wallet-error-container (def wallet-error-container
{:align-self :center {:align-self :center
:justify-content :center :justify-content :center
:border-radius 20 :border-radius 20
:flex-direction :row :flex-direction :row
:background-color common/color-blue5}) :background-color st/color-blue5})
(def wallet-exclamation-container (def wallet-exclamation-container
{:background-color common/color-red2 {:background-color st/color-red-2
:justify-content :center :justify-content :center
:margin-top 5 :margin-top 5
:margin-left 10 :margin-left 10
@ -23,18 +22,18 @@
:margin-bottom 5 :margin-bottom 5
:border-radius 100}) :border-radius 100})
(defstyle wallet-error-exclamation (def wallet-error-exclamation
{:width 16 {:width 16
:height 16}) :height 16})
(def wallet-error-message (def wallet-error-message
{:color common/color-white {:color st/color-white
:padding-top 3 :padding-top 3
:padding-right 10 :padding-right 10
:font-size 13}) :font-size 13})
(def toolbar (def toolbar
{:background-color common/color-blue5 {:background-color st/color-blue5
:elevation 0}) :elevation 0})
(def toolbar-title-container (def toolbar-title-container
@ -46,7 +45,7 @@
{:flex-direction :row}) {:flex-direction :row})
(def toolbar-title-text (def toolbar-title-text
{:color common/color-white {:color st/color-white
:font-size 17 :font-size 17
:margin-right 4}) :margin-right 4})
@ -70,7 +69,7 @@
(def main-section (def main-section
{:padding 16 {:padding 16
:background-color common/color-blue4}) :background-color st/color-blue4})
(def total-balance-container (def total-balance-container
{:margin-top 18 {:margin-top 18
@ -82,12 +81,12 @@
(def total-balance-value (def total-balance-value
{:font-size 37 {:font-size 37
:color common/color-white}) :color st/color-white})
(def total-balance-currency (def total-balance-currency
{:font-size 37 {:font-size 37
:margin-left 9 :margin-left 9
:color common/color-white :color st/color-white
:opacity 0.4}) :opacity 0.4})
(def value-variation (def value-variation
@ -96,19 +95,33 @@
(def value-variation-title (def value-variation-title
{:font-size 14 {:font-size 14
:color common/color-white :color st/color-white
:opacity 0.6}) :opacity 0.6})
(def today-variation-container (def today-variation-container
{:border-radius 4 {:border-radius 100
:margin-left 8 :margin-left 8
:padding-horizontal 8 :padding-horizontal 8
:padding-vertical 4 :padding-vertical 4})
:background-color common/color-green-1})
(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 (def today-variation
{:font-size 12 {:font-size 12})
:color common/color-green-2})
(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 (def buttons
{:margin-top 34}) {:margin-top 34})
@ -118,13 +131,13 @@
;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;
(def asset-section (def asset-section
{:background-color common/color-white {:background-color st/color-white
:padding-vertical 16}) :padding-vertical 16})
(def asset-section-title (def asset-section-title
{:font-size 14 {:font-size 14
:margin-left 16 :margin-left 16
:color common/color-gray4}) :color st/color-gray4})
(def asset-item-value-container (def asset-item-value-container
{:flex 1 {:flex 1
@ -133,9 +146,20 @@
(def asset-item-value (def asset-item-value
{:font-size 16 {: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 (def asset-item-currency
{:font-size 16 {:font-size 16
:color common/color-gray4 :color st/color-gray4
:margin-left 6}) :margin-left 6})
(defn asset-border [color]
{:border-color color :border-width 1 :border-radius 32})

125
src/status_im/ui/screens/wallet/main/views.cljs
View File

@ -7,14 +7,16 @@
[status-im.components.drawer.view :as drawer] [status-im.components.drawer.view :as drawer]
[status-im.components.list.views :as list] [status-im.components.list.views :as list]
[status-im.components.react :as rn] [status-im.components.react :as rn]
[status-im.components.styles :as st]
[status-im.components.icons.vector-icons :as vi] [status-im.components.icons.vector-icons :as vi]
[status-im.components.toolbar-new.view :as toolbar] [status-im.components.toolbar-new.view :as toolbar]
[status-im.components.toolbar-new.actions :as act] [status-im.components.toolbar-new.actions :as act]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.react-native.resources :as resources]
[status-im.utils.config :as config] [status-im.utils.config :as config]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.utils.utils :as utils] [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])) [status-im.utils.money :as money]))
(defn- show-not-implemented! [] (defn- show-not-implemented! []
@ -22,87 +24,118 @@
(defn toolbar-title [] (defn toolbar-title []
[rn/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list]) [rn/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list])
:style st/toolbar-title-container} :style wallet-styles/toolbar-title-container}
[rn/view {:style st/toolbar-title-inner-container} [rn/view {:style wallet-styles/toolbar-title-inner-container}
[rn/text {:style st/toolbar-title-text [rn/text {:style wallet-styles/toolbar-title-text
:font :toolbar-title} :font :toolbar-title}
(i18n/label :t/main-wallet)] (i18n/label :t/main-wallet)]
[vi/icon [vi/icon
:icons/dropdown :icons/dropdown
{:container-style st/toolbar-title-icon {:container-style wallet-styles/toolbar-title-icon
:color :white}]]]) :color :white}]]])
(defn toolbar-buttons [] (defn toolbar-buttons []
[rn/view {:style st/toolbar-buttons-container} [rn/view {:style wallet-styles/toolbar-buttons-container}
[vi/touchable-icon :icons/dots_vertical {:color :white} show-not-implemented!] [vi/touchable-icon :icons/dots-vertical (merge {:color :white} wallet-styles/toolbar-icon) show-not-implemented!]
[vi/touchable-icon :icons/qr {:color :white} 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- show-wallet-transactions []
(if config/wallet-wip-enabled?
(rf/dispatch [:navigate-to-modal :wallet-transactions])
(show-not-implemented!)))
(defn toolbar-view [] (defn toolbar-view []
[toolbar/toolbar {:style st/toolbar [toolbar/toolbar2 {:style wallet-styles/toolbar}
:nav-action (act/list-white show-wallet-transactions) [toolbar/nav-button (act/hamburger-white drawer/open-drawer)]
:custom-content [toolbar-title] [toolbar-title]
:custom-action [toolbar-buttons]}]) [toolbar-buttons]])
(defn error-message-view [error-message] (defn error-message-view [error-message]
[rn/view {:style st/wallet-error-container} [rn/view {:style wallet-styles/wallet-error-container}
[rn/view {:style st/wallet-exclamation-container} [rn/view {:style wallet-styles/wallet-exclamation-container}
[vi/icon :icons/exclamation_mark {:color :white [vi/icon :icons/exclamation_mark {:color :white
:container-style st/wallet-error-exclamation}]] :container-style wallet-styles/wallet-error-exclamation}]]
[rn/text {:style st/wallet-error-message} (i18n/label :t/wallet-error)]]) [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] (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]) (when error-message [error-message-view error-message])
[rn/view {:style st/total-balance-container} [rn/view {:style wallet-styles/total-balance-container}
[rn/view {:style st/total-balance} [rn/view {:style wallet-styles/total-balance}
[rn/text {:style st/total-balance-value} usd-value] [rn/text {:style wallet-styles/total-balance-value} usd-value]
[rn/text {:style st/total-balance-currency} "USD"]] [rn/text {:style wallet-styles/total-balance-currency} "USD"]]
[rn/view {:style st/value-variation} [rn/view {:style wallet-styles/value-variation}
[rn/text {:style st/value-variation-title} "Total value"] [rn/text {:style wallet-styles/value-variation-title}
[rn/view {:style st/today-variation-container} (i18n/label :t/wallet-total-value)]
[rn/text {:style st/today-variation} change]]] [rn/view {:style (if (pos? change) wallet-styles/today-variation-container-positive wallet-styles/today-variation-container-negative)}
[btn/buttons st/buttons [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) [{: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?)} :disabled? (not config/wallet-wip-enabled?)}
{:text (i18n/label :t/wallet-request) {: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?)} :disabled? (not config/wallet-wip-enabled?)}
{:text (i18n/label :t/wallet-exchange) {:text (i18n/label :t/wallet-exchange)
:disabled? true}]]]]) :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! [list/touchable-item show-not-implemented!
[rn/view [rn/view
[list/item [list/item
[list/item-image {:uri :launch_logo}] [list/item-image {:uri :launch_logo}]
[rn/view {:style st/asset-item-value-container} [rn/view {:style wallet-styles/asset-item-value-container}
[rn/text {:style st/asset-item-value} (str amount)] [rn/text {:style wallet-styles/asset-item-value} (str amount)]
[rn/text {:style st/asset-item-currency [rn/text {:style wallet-styles/asset-item-currency
:uppercase? true} :uppercase? true}
id]] 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}]] (let [assets [{:id "eth" :currency :eth :amount eth}]]
[rn/view {:style st/asset-section} [rn/view {:style wallet-styles/asset-section}
[rn/text {:style st/asset-section-title} (i18n/label :t/wallet-assets)] [rn/text {:style wallet-styles/asset-section-title} (i18n/label :t/wallet-assets)]
[list/flat-list {:data assets [list/section-list
:render-fn render-asset-fn}]])) {: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 [] (defview wallet []
(letsubs [eth-balance [:eth-balance] (letsubs [eth-balance [:eth-balance]
portfolio-value [:portfolio-value] portfolio-value [:portfolio-value]
portfolio-change [:portfolio-change] portfolio-change [:portfolio-change]
prices-loading? [:prices-loading?]
balance-loading? [:wallet/balance-loading?]
error-message [:wallet/error-message]] error-message [:wallet/error-message]]
[rn/view {:style st/wallet-container} [rn/view {:style wallet-styles/wallet-container}
[toolbar-view] [toolbar-view]
[rn/scroll-view [rn/scroll-view
[main-section portfolio-value portfolio-change error-message] [main-section portfolio-value portfolio-change error-message]
[asset-section eth-balance]]])) [asset-section eth-balance prices-loading? balance-loading?]]]))

22
src/status_im/ui/screens/wallet/send/views.cljs
View File

@ -1,26 +1,14 @@
(ns status-im.ui.screens.wallet.send.views (ns status-im.ui.screens.wallet.send.views
(:require-macros [status-im.utils.views :refer [defview]]) (:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :as rf] (:require [status-im.components.react :as rn]
[status-im.components.react :as rn] [status-im.components.toolbar-new.actions :as act]
[status-im.components.icons.vector-icons :as vi]
[status-im.components.toolbar-new.view :as toolbar] [status-im.components.toolbar-new.view :as toolbar]
[status-im.ui.screens.wallet.send.styles :as cst])) [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 [] (defn toolbar-view []
[toolbar/toolbar {:style cst/toolbar [toolbar/toolbar2 {:style cst/toolbar}
:custom-content [toolbar-title] [toolbar/nav-button (act/back-white act/default-handler)]
:custom-action [toolbar-buttons]}]) [toolbar/content-title {:color :white} "Send Transaction"]])
(defview send-transaction [] (defview send-transaction []
[] []

8
src/status_im/ui/screens/wallet/subs.cljs
View File

@ -46,6 +46,14 @@
(str "%")) (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 (reg-sub :wallet/transactions
(fn [db] (fn [db]
(get-in db [:wallet :transactions]))) (get-in db [:wallet :transactions])))

27
src/status_im/ui/screens/wallet/wallet_list/views.cljs
View File

@ -12,14 +12,12 @@
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(defn toolbar-actions []
[(act/add-wallet #(utils/show-popup "TODO" "Not implemented!"))])
(defn toolbar-view [transactions] (defn toolbar-view [transactions]
[toolbar/toolbar {:style st/toolbar [toolbar/toolbar2 {:style st/toolbar}
:title (i18n/label :t/wallets) [toolbar/nav-clear-text (i18n/label :t/done) #(rf/dispatch [:navigate-back])]
:nav-action (act/close #(rf/dispatch [:navigate-back])) [toolbar/content-title (i18n/label :t/wallets)]
:actions (toolbar-actions)}]) [toolbar/actions
[(act/add-wallet #(utils/show-popup "TODO" "Not implemented!"))]]])
(defn- select-wallet [] (defn- select-wallet []
(utils/show-popup "TODO" "Not implemented!")) (utils/show-popup "TODO" "Not implemented!"))
@ -39,14 +37,11 @@
(def dummy-wallet-data (def dummy-wallet-data
[{:name "Main wallet" [{:name "Main wallet"
:currency "USD" :currency "USD"
:amount 12.43 :amount 0
:assets ["SNT" "SGT" "GNO" "ETH"] :assets []
:color "blue-1"} :color "blue-1"}])
{:name "Other wallet"
:currency "ETH" ;; TODO hook real data
:amount 0.34
:assets ["ETH"]
:color "gray-1"}])
(defn wallet-list [] (defn wallet-list []
[rn/scroll-view {:style st/wallet-list-screen} [rn/scroll-view {:style st/wallet-list-screen}
@ -59,6 +54,6 @@
(defview wallet-list-screen [] (defview wallet-list-screen []
[] []
[rn/view {:style st/screen-container} [rn/view {:style st/screen-container}
[status-bar/status-bar {:type :main}] [status-bar/status-bar]
[toolbar-view] [toolbar-view]
[wallet-list]]) [wallet-list]])

3
src/status_im/utils/utils.cljs
View File

@ -2,7 +2,6 @@
(:require [status-im.constants :as const] (:require [status-im.constants :as const]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[clojure.string :as str] [clojure.string :as str]
[taoensso.timbre :as log]
[status-im.react-native.js-dependencies :as rn-dependencies])) [status-im.react-native.js-dependencies :as rn-dependencies]))
(defn show-popup [title content] (defn show-popup [title content]
@ -36,7 +35,6 @@
:content-type "application/json"} :content-type "application/json"}
:body (.stringify js/JSON (clj->js data))})) :body (.stringify js/JSON (clj->js data))}))
(.then (fn [response] (.then (fn [response]
(log/debug response)
(.text response))) (.text response)))
(.then (fn [text] (.then (fn [text]
(let [json (.parse js/JSON text) (let [json (.parse js/JSON text)
@ -53,7 +51,6 @@
(-> (.fetch js/window url (clj->js {:method "GET" (-> (.fetch js/window url (clj->js {:method "GET"
:headers {"Cache-Control" "no-cache"}})) :headers {"Cache-Control" "no-cache"}}))
(.then (fn [response] (.then (fn [response]
(log/debug response)
(let [ok? (.-ok response) (let [ok? (.-ok response)
ok?' (if valid-response? ok?' (if valid-response?
(and ok? (valid-response? response)) (and ok? (valid-response? response))

3
test/cljs/status_im/react_native/resources.cljs
View File

@ -27,3 +27,6 @@
:ethlance nil :ethlance nil
:commiteth nil :commiteth nil
:etherplay nil}) :etherplay nil})
(def assets
{:ethereum nil})