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

First implementation of the unsigned transactions list

This commit is contained in:
Julien Eluard 2017-08-17 18:42:31 +02:00 committed by Roman Volosovskyi
parent 775bc8d359
commit a22bde50c7
15 changed files with 216 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/status_im/components/button/styles.cljs Normal file
View File

@ -0,0 +1,57 @@
(ns status-im.components.button.styles
(:require [status-im.components.styles :as st]))
(def border-color st/color-white-transparent-2)
(def button-borders
{:background-color border-color
:margin 5
:border-radius 8})
(def action-buttons-container
(merge
button-borders
{:flex-direction :row}))
(def action-button
{:flex-basis 0
:flex 1
:align-items :center})
(def action-button-center
(merge action-button
{:border-color border-color
:border-left-width 1
:border-right-width 1}))
(def action-button-text
{:font-size 18
:font-weight "normal"
:color st/color-white
:padding-horizontal 16
:padding-vertical 9})
(def primary-button
(merge
action-button
button-borders
{:background-color st/color-blue4}))
(def primary-button-text
(merge
action-button-text
{:color st/color-white}))
(def secondary-button
(merge
action-button
button-borders
{:background-color st/color-blue4-transparent}))
(def secondary-button-text
(merge
action-button-text
{:color st/color-blue4}))
(def action-button-text-disabled
(merge action-button-text {:opacity 0.4}))

33
src/status_im/components/button/view.cljs Normal file
View File

@ -0,0 +1,33 @@
(ns status-im.components.button.view
(:require [cljs.spec.alpha :as s]
[status-im.components.button.styles :as cst]
[status-im.components.react :as rn]))
(defn button [{:keys [on-press style text text-style disabled?]
:or {style cst/action-button}}]
[rn/touchable-highlight (when (and on-press (not disabled?)) {:on-press on-press})
[rn/view {:style style}
[rn/text {:style (or text-style
(if disabled? cst/action-button-text-disabled cst/action-button-text))
:font :medium
:uppercase? false}
text]]])
(defn primary-button [m]
(button (merge {:style cst/primary-button :text-style cst/primary-button-text} m)))
(defn secondary-button [m]
(button (merge {:style cst/secondary-button :text-style cst/secondary-button-text} m)))
(defn- first-or-last [i v] (or (zero? i) (= i (dec (count v)))))
(defn- button-style [i v] (if (first-or-last i v) cst/action-button cst/action-button-center))
(defn buttons
([v] (buttons {} v))
([m v]
[rn/view {:style (merge cst/action-buttons-container m)}
(doall
(map-indexed
(fn [i m] ^{:key i} [button (merge m {:style (button-style i v)})])
v))]))

34
src/status_im/components/list/styles.cljs Normal file
View File

@ -0,0 +1,34 @@
(ns status-im.components.list.styles
(:require [status-im.components.styles :as st]
[status-im.utils.platform :as p]))
(def item
{:flex 1
:flex-direction :row})
(def item-text-view
{:flex 1
:flex-direction :column})
(def primary-text
{:font-size 20
:color st/color-black
:margin-top 13})
(def secondary-text
{:font-size 16
:color st/color-gray4
:margin-top 6})
(def item-icon
{:width 40
:height 40
:margin 14})
(def primary-action item-icon)
(def secondary-action item-icon)
(def action-buttons
{:flex 1
:flex-direction :row})

23
src/status_im/components/list/views.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns status-im.components.list.views
(:require [status-im.components.react :as rn]
[reagent.core :as r]
[status-im.components.common.common :as common]
[status-im.utils.platform :as p]))
(def flat-list-class (rn/get-class "FlatList"))
(defn- wrap-render-fn [f]
(fn [o]
(let [{:keys [item index separators]} (js->clj o :keywordize-keys true)]
(r/as-element (f item index separators)))))
(defn flat-list
"A wrapper for FlatList.
See https://facebook.github.io/react-native/docs/flatlist.html"
([data render-fn] (flat-list data render-fn {}))
([data render-fn props]
[flat-list-class (merge {:data (clj->js data)
:renderItem (wrap-render-fn render-fn)
:keyExtractor (fn [_ i] i)}
(when p/ios? {:ItemSeparatorComponent (fn [] (r/as-element [common/list-separator]))})
props)]))

2
src/status_im/components/main_tabs.cljs
View File

@ -10,7 +10,7 @@
[status-im.ui.screens.chats-list.views :refer [chats-list]]
[status-im.ui.screens.discover.views :refer [discover]]
[status-im.ui.screens.contacts.views :refer [contact-groups-list]]
[status-im.ui.screens.wallet.main-screen.views :refer [wallet]]
[status-im.ui.screens.wallet.main.views :refer [wallet]]
[status-im.utils.config :as config]
[status-im.components.tabs.views :refer [tabs]]
[status-im.components.tabs.styles :as st]

15
src/status_im/components/react.cljs
View File

@ -40,7 +40,6 @@
(def list-view-class (get-class "ListView"))
(def scroll-view (get-class "ScrollView"))
(def flat-list-class (get-class "FlatList"))
(def web-view (get-class "WebView"))
(def keyboard-avoiding-view-class (get-class "KeyboardAvoidingView"))
@ -106,19 +105,7 @@
:resizeMode "contain"
:style style}]))
(defn- wrap-render-fn [f]
(fn [o]
(let [{:keys [item index separators]} (js->clj o :keywordize-keys true)]
(r/as-element (f item index separators)))))
(defn flat-list
"A function wrapping the creation of FlatList.
See https://facebook.github.io/react-native/docs/flatlist.html"
([data render-fn] (flat-list data render-fn {}))
([data render-fn props]
[flat-list-class (merge {:data (clj->js data) :renderItem (wrap-render-fn render-fn) :keyExtractor (fn [_ i] i)} props)]))
;; TODO Migrate to new FlatList and SectionList when appropriate. ListView will eventually get deprecated
;; TODO Migrate to new FlatList and SectionList when appropriate (see components.list). ListView will eventually get deprecated
;; see https://facebook.github.io/react-native/docs/using-a-listview.html
(defn list-view [props]
[list-view-class (merge {:enableEmptySections true} props)])

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

@ -5,6 +5,7 @@
(def color-blue2 "#5b6dee")
(def color-blue3 "#424fae")
(def color-blue4 "#4360df")
(def color-blue4-transparent "rgba(67, 96, 223, 0.10)")
(def color-blue5 "#3c56c8")
(def color-blue-transparent "#7099e632")
(def color-black "#000000")

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

@ -330,4 +330,7 @@
;; wallet
:transactions "Transactions"
:transactions-sign-all "Sign all"})
:transactions-to "To"
:transactions-sign "Sign"
:transactions-sign-all "Sign all"
:transactions-delete "Delete"})

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

@ -1,46 +1,14 @@
(ns status-im.ui.screens.wallet.history.styles
(:require-macros [status-im.utils.styles :refer [defnstyle]])
(:require [status-im.components.styles :as common]))
(:require [status-im.components.styles :as st]))
(def wallet-transactions-container
{:flex 1
:background-color common/color-white})
:background-color st/color-white})
(def toolbar-buttons-container
{:flex-direction :row
:flex-shrink 1
:justify-content :space-between
:width 68
(def toolbar-right-action
{:color st/color-blue4
:font-size 18
:margin-right 12})
(def item
{:flex-direction :row
:flex 1})
(def item-text-view
{:flex 1
:flex-direction :column})
(def primary-text
{:flex 1
:font-size 16
:color common/color-black})
(def secondary-text
{:font-size 16
:color common/color-gray4})
(def item-icon
{:width 40
:height 40})
(def secondary-action
(merge item-icon {:align-self "flex-end"}))
;;;;;;;;;;;;;;;;;;
;; Main section ;;
;;;;;;;;;;;;;;;;;;
(def main-section
{:padding 16
:background-color common/color-white})
{:background-color st/color-white})

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

@ -1,13 +1,16 @@
(ns status-im.ui.screens.wallet.history.views
(:require-macros [status-im.utils.views :refer [defview]])
(:require [status-im.components.react :as rn]
(:require [status-im.components.button.view :as btn]
[status-im.components.react :as rn]
[status-im.components.list.styles :as list-st]
[status-im.components.list.views :as list]
[status-im.components.toolbar-new.view :as toolbar]
[status-im.ui.screens.wallet.history.styles :as st]
[status-im.i18n :as i18n]))
(defn unsigned-action []
[rn/view {:style st/toolbar-buttons-container}
[rn/text (i18n/label :t/transactions-sign-all)]])
[rn/text {:style st/toolbar-right-action}
(i18n/label :t/transactions-sign-all)])
(defn toolbar-view []
[toolbar/toolbar
@ -22,24 +25,27 @@
(defn render-transaction
[item]
[rn/view {:style st/item}
[rn/view {:style list-st/item}
[rn/image {:source {:uri :console}
:style st/item-icon}]
#_
[rn/icon :dropdown-white #_(icon-status (:status item)) st/item-icon]
[rn/view {:style st/item-text-view}
:style list-st/item-icon}]
[rn/view {:style list-st/item-text-view}
(let [m (:content item)]
[rn/text {:style st/primary-text} (str (:value m) " " (:symbol m))])
[rn/text {:style st/secondary-text} (:to item)]]
[rn/icon :forward_gray st/secondary-action]])
[rn/text {:style list-st/primary-text} (str (:value m) " " (:symbol m))])
[rn/text {:style list-st/secondary-text} (str (i18n/label :t/transactions-to) " " (:to item))]
[rn/view {:style list-st/action-buttons}
[btn/primary-button {:text (i18n/label :t/transactions-sign)}]
[btn/secondary-button {:text (i18n/label :t/transactions-delete)}]]]
[rn/icon :forward_gray list-st/secondary-action]])
(def dummy-transaction-data
[{:to "0xAAAAA" :content {:value "0,4909" :symbol "ETH"}}
{:to "0xAAAAA" :content {:value "10000" :symbol "SGT"}}])
(defn main-section []
[rn/view {:style st/main-section}
(rn/flat-list [{:to "0xAAAAA" :content {:value "5" :symbol "ETH"} :status :pending}
{:from "0xAAAAA" :content {:value "5" :symbol "ETH"} :status :sent}
{:to "0xAAAAA" :content {:value "5" :symbol "ETH"} :status :pending}] render-transaction)])
[list/flat-list dummy-transaction-data render-transaction]])
;; TODO must reflect selected wallet
(defview wallet-transactions []
[]

35
src/status_im/ui/screens/wallet/main_screen/styles.cljs → src/status_im/ui/screens/wallet/main/styles.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.ui.screens.wallet.main-screen.styles
(ns status-im.ui.screens.wallet.main.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.components.styles :as common]
[status-im.utils.platform :as platform]))
@ -81,37 +81,8 @@
{:font-size 12
:color common/color-green-2})
;;;;;;;;;;;;;;;;;;;;
;; Action buttons ;;
;;;;;;;;;;;;;;;;;;;;
(def action-buttons-container
{:flex-direction :row
:background-color common/color-white-transparent-2
:margin-top 34
:margin-left 5
:margin-right 5
:border-radius 4})
(def action-button
{:padding-vertical 13
:padding-horizontal 18
:flex-basis 0
:flex 1
:align-items :center})
(def action-button-center
(merge action-button
{:border-color common/color-white-transparent-2
:border-left-width 1
:border-right-width 1}))
(def action-button-text
{:font-size 13
:color common/color-white})
(def action-button-text-disabled
(merge action-button-text {:opacity 0.4}))
(def buttons
{:margin-top 34})
;;;;;;;;;;;;;;;;;;;;
;; Assets section ;;

37
src/status_im/ui/screens/wallet/main_screen/views.cljs → src/status_im/ui/screens/wallet/main/views.cljs
View File

@ -1,8 +1,9 @@
(ns status-im.ui.screens.wallet.main-screen.views
(ns status-im.ui.screens.wallet.main.views
(:require-macros [status-im.utils.views :refer [defview]])
(:require [clojure.string :as string]
[re-frame.core :as rf]
[status-im.components.common.common :as common]
[status-im.components.button.view :as btn]
[status-im.components.drawer.view :as drawer]
[status-im.components.react :as rn]
[status-im.components.toolbar-new.view :as toolbar]
@ -10,7 +11,7 @@
[status-im.i18n :as i18n]
[status-im.utils.listview :as lw]
[status-im.utils.platform :as platform]
[status-im.ui.screens.wallet.main-screen.styles :as st]))
[status-im.ui.screens.wallet.main.styles :as st]))
(defn toolbar-title []
[rn/view {:style st/toolbar-title-container}
@ -30,30 +31,6 @@
:custom-content [toolbar-title]
:custom-action [toolbar-buttons]}])
;; TODO: Use standard signature and move to action-button namespace
(defn action-button [{:keys [on-press view-style text-style text]}]
[rn/touchable-highlight {:on-press on-press}
[rn/view {:style view-style}
[rn/text {:style text-style
:font :medium
:uppercase? false} text]]])
;; TODO: button to go to send screen
(defn action-buttons []
[rn/view {:style st/action-buttons-container}
[action-button {:on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])
:view-style st/action-button
:text-style st/action-button-text
:text "Send"}]
[action-button {:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
:view-style st/action-button-center
:text-style st/action-button-text
:text "Request"}]
[action-button {:on-press (fn [] )
:view-style st/action-button
:text-style st/action-button-text-disabled
:text "Exchange"}]])
(defn main-section []
[rn/view {:style st/main-section}
[rn/view {:style st/total-balance-container}
@ -64,7 +41,13 @@
[rn/text {:style st/value-variation-title} "Total value"]
[rn/view {:style st/today-variation-container}
[rn/text {:style st/today-variation} "+5.43%"]]]
[action-buttons]]])
[btn/buttons st/buttons
[{:text "Send"
:on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])}
{:text "Request"
:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])}
{:text "Exchange"
:disabled? true}]]]])
(defn asset-list-item [[id {:keys [currency amount] :as row}]]
[rn/view {:style st/asset-item-container}

137
src/status_im/ui/screens/wallet/send/styles.cljs
View File

@ -1,17 +1,12 @@
(ns status-im.ui.screens.wallet.send.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.components.styles :as common]
[status-im.utils.platform :as platform]))
;; XXX: Copy paste from main wallet
;; TODO: Transfer to common space
(:require [status-im.components.styles :as st]))
(def wallet-container
{:flex 1
:background-color common/color-white})
:background-color st/color-white})
(def toolbar
{:background-color common/color-blue5
{:background-color st/color-blue5
:elevation 0})
(def toolbar-title-container
@ -20,7 +15,7 @@
:margin-left 6})
(def toolbar-title-text
{:color common/color-white
{:color st/color-white
:font-size 17
:margin-right 4})
@ -37,127 +32,3 @@
:justify-content :space-between
:width 68
:margin-right 12})
;;;;;;;;;;;;;;;;;;
;; Main section ;;
;;;;;;;;;;;;;;;;;;
(def main-section
{:padding 16
:background-color common/color-blue4})
(def total-balance-container
{:margin-top 18
:align-items :center
:justify-content :center})
(def total-balance
{:flex-direction :row})
(def total-balance-value
{:font-size 37
:color common/color-white})
(def total-balance-currency
{:font-size 37
:margin-left 9
:color common/color-white
:opacity 0.4})
(def value-variation
{:flex-direction :row
:align-items :center})
(def value-variation-title
{:font-size 14
:color common/color-white
:opacity 0.6})
(def today-variation-container
{:border-radius 4
:margin-left 8
:padding-horizontal 8
:padding-vertical 4
:background-color common/color-green-1})
(def today-variation
{:font-size 12
:color common/color-green-2})
;;;;;;;;;;;;;;;;;;;;
;; Action buttons ;;
;;;;;;;;;;;;;;;;;;;;
(def action-buttons-container
{:flex-direction :row
:background-color common/color-white-transparent-2
:margin-top 34
:margin-left 5
:margin-right 5
:border-radius 4})
(def action-button
{:padding-vertical 13
:padding-horizontal 18
:flex-basis 0
:flex 1
:align-items :center})
(def action-button-center
(merge action-button
{:border-color common/color-white-transparent-2
:border-left-width 1
:border-right-width 1}))
(def action-button-text
{:font-size 13
:color common/color-white})
(def action-button-text-disabled
(merge action-button-text {:opacity 0.4}))
;;;;;;;;;;;;;;;;;;;;
;; Assets section ;;
;;;;;;;;;;;;;;;;;;;;
(def asset-section
{:background-color common/color-white
:padding-vertical 16})
(def asset-section-title
{:font-size 14
:margin-left 16
:color common/color-gray4})
(def asset-item-container
{:flex-direction :row
:align-items :center
:padding 12})
(def asset-item-currency-icon
{:height 40
:width 40
:margin-right 14})
(def asset-item-value-container
{:flex 1
:flex-direction :row})
(def asset-item-value
{:font-size 16
:color common/color-black})
(def asset-item-currency
{:font-size 16
:color common/color-gray4
:margin-left 6})
(def asset-item-details-icon
{:flex-shrink 1
:height 24
:width 24})
(def asset-list-separator
{:margin-left 70
:border-bottom-width 1
:border-color common/color-separator})

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

@ -1,101 +1,28 @@
(ns status-im.ui.screens.wallet.send.views
(:require-macros [status-im.utils.views :refer [defview]])
(:require [clojure.string :as string]
[re-frame.core :as rf]
[status-im.components.common.common :as common]
[status-im.components.drawer.view :as drawer]
(:require [re-frame.core :as rf]
[status-im.components.react :as rn]
[status-im.components.toolbar-new.view :as toolbar]
[status-im.components.toolbar-new.actions :as act]
[status-im.i18n :as i18n]
[status-im.utils.listview :as lw]
[status-im.utils.platform :as platform]
[status-im.ui.screens.wallet.main-screen.styles :as st]))
;; XXX Copy paste from main-screen ns
[status-im.ui.screens.wallet.send.styles :as cst]))
(defn toolbar-title []
[rn/view {:style st/toolbar-title-container}
[rn/text {:style st/toolbar-title-text
[rn/view {:style cst/toolbar-title-container}
[rn/text {:style cst/toolbar-title-text
:font :toolbar-title}
"Send Transaction"]
[rn/icon :dropdown_white st/toolbar-title-icon]])
"Send Transaction"]])
(defn toolbar-buttons []
[rn/view {:style st/toolbar-buttons-container}
[rn/icon :dots_vertical_white st/toolbar-icon]
[rn/icon :qr_white st/toolbar-icon]])
[rn/view {:style cst/toolbar-buttons-container}
[rn/icon :dots_vertical_white cst/toolbar-icon]
[rn/icon :qr_white cst/toolbar-icon]])
(defn toolbar-view []
[toolbar/toolbar {:style st/toolbar
:nav-action (act/list-white #(rf/dispatch [:navigate-to-modal :unsigned-transactions]))
[toolbar/toolbar {:style cst/toolbar
:custom-content [toolbar-title]
:custom-action [toolbar-buttons]}])
(defn action-buttons []
[rn/view {:style st/action-buttons-container}
[rn/view {:style st/action-button}
[rn/text {:style st/action-button-text
:font :medium
:uppercase? true} "Send"]]
[rn/view {:style st/action-button-center}
[rn/text {:style st/action-button-text
:font :medium
:uppercase? true} "Request"]]
[rn/view {:style st/action-button}
[rn/text {:style st/action-button-text-disabled
:font :medium
:uppercase? true} "Exchange"]]])
(defn main-section []
[rn/view {:style st/main-section}
[rn/view {:style st/total-balance-container}
[rn/view {:style st/total-balance}
[rn/text {:style st/total-balance-value} "12.43"]
[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} "+5.43%"]]]
[action-buttons]]])
(defn asset-list-item [[id {:keys [currency amount] :as row}]]
[rn/view {:style st/asset-item-container}
[rn/image {:source {:uri :launch_logo}
:style st/asset-item-currency-icon}]
[rn/view {:style st/asset-item-value-container}
[rn/text {:style st/asset-item-value} (str amount)]
[rn/text {:style st/asset-item-currency
:uppercase? true}
id]]
[rn/icon :forward_gray st/asset-item-details-icon]])
(defn render-separator-fn [assets-count]
(fn [_ row-id _]
(rn/list-item
^{:key row-id}
[common/separator {} st/asset-list-separator])))
(defn render-row-fn [row _ _]
(rn/list-item
[rn/touchable-highlight {:on-press #()}
[rn/view
[asset-list-item row]]]))
(defn asset-section []
(let [assets {"eth" {:currency :eth :amount 0.445}
"snt" {:currency :snt :amount 1}
"gno" {:currency :gno :amount 0.024794}}]
[rn/view {:style st/asset-section}
[rn/text {:style st/asset-section-title} "Assets"]
[rn/list-view {:dataSource (lw/to-datasource assets)
:renderSeparator (when platform/ios? (render-separator-fn (count assets)))
:renderRow render-row-fn}]]))
(defview send-transaction []
[]
[rn/view {:style st/wallet-container}
[rn/view {:style cst/wallet-container}
[toolbar-view]
[rn/scroll-view
[main-section]
[asset-section]]])
[rn/text "Nothing here yet!"]])

6
src/status_im/utils/styles.clj
View File

@ -11,13 +11,13 @@
(defmacro defstyle
"Defines style symbol.
Style parameter may contain plaform specific style:
Style parameter may contain platform specific style:
{:width 100
:height 125
:ios {:height 20}
:android {:margin-top 3}}
Reuslting style for Android:
Resulting style for Android:
{:width 100
:height 125
:margin-top 3}
@ -31,7 +31,7 @@
(defmacro defnstyle
"Defines style function.
Style parameter may contain plaform specific style:
Style parameter may contain platform specific style:
{:width 100
:height (* a 2)
:ios {:height (/ a 2)}