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

experiment modal wallet 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2018-07-22 21:37:09 +03:00
parent 063ed16c47
commit 9a02bca975
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
7 changed files with 120 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,10 @@
[toolbar/platform-agnostic-toolbar {}
(toolbar/nav-back-count {:home? true})
[toolbar-content/toolbar-content-view]
[toolbar/actions [{:icon :icons/options
[toolbar/actions [{:icon :icons/wallet
:icon-opts {:color :black}
:handler #(re-frame/dispatch [:navigate-to-modal :wallet-modal])}
{:icon :icons/options
:icon-opts {:color :black
:accessibility-label :chat-menu-button}
:handler #(on-options chat-id name group-chat public?)}]]])

7
src/status_im/ui/screens/browser/views.cljs
View File

@ -94,7 +94,10 @@
(re-frame/dispatch [:remove-browser browser-id]))))]
(if dapp?
[toolbar-content-dapp name]
[toolbar-content url browser])]
[toolbar-content url browser])
[toolbar.view/actions [{:icon :icons/wallet
:icon-opts {:color :black}
:handler #(re-frame/dispatch [:navigate-to-modal :wallet-modal])}]]]
[react/view components.styles/flex
[components.webview-bridge/webview-bridge
{:ref #(reset! webview %)
@ -141,4 +144,4 @@
[icons/icon :icons/refresh]]]
(when-not dapp?
[tooltip/bottom-tooltip-info
(i18n/label :t/browser-warning)])])))
(i18n/label :t/browser-warning)])])))

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

@ -25,6 +25,7 @@
[status-im.ui.screens.profile.contact.views :as profile.contact]
[status-im.ui.screens.profile.group-chat.views :as profile.group-chat]
[status-im.ui.screens.profile.photo-capture.views :refer [profile-photo-capture]]
[status-im.ui.screens.wallet.views :refer [wallet-modal]]
[status-im.ui.screens.wallet.collectibles.views :refer [collectibles-list]]
[status-im.ui.screens.wallet.send.views :refer [send-transaction send-transaction-modal sign-message-modal]]
[status-im.ui.screens.wallet.choose-recipient.views :refer [choose-recipient]]
@ -103,6 +104,7 @@
(case modal-view
:qr-scanner qr-scanner
:profile-qr-viewer profile.user/qr-viewer
:wallet-modal wallet-modal
:wallet-transactions-filter wallet-transactions/filter-history
:wallet-settings-assets wallet-settings/manage-assets
:wallet-send-transaction-modal send-transaction-modal

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

@ -1,14 +1,19 @@
(ns status-im.ui.screens.wallet.navigation
(:require [re-frame.core :as re-frame]
[status-im.ui.screens.navigation :as navigation]
[status-im.utils.ethereum.core :as ethereum]
[status-im.utils.ethereum.tokens :as tokens]))
[status-im.utils.ethereum.core :as ethereum]))
(defmethod navigation/preload-data! :wallet
[db _]
(re-frame/dispatch [:update-wallet])
(assoc-in db [:wallet :current-tab] 0))
(defmethod navigation/preload-data! :wallet-modal
[db _]
(re-frame/dispatch [:update-wallet])
(re-frame/dispatch [:update-transactions])
(assoc-in db [:wallet :modal-history?] false))
(defmethod navigation/preload-data! :transactions-history
[db _]
(re-frame/dispatch [:update-transactions])

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

@ -34,11 +34,11 @@
(defn cartouche-content-wrapper [disabled?]
(merge
{:flex-direction :row
:margin-top 8
:border-radius styles/border-radius
:padding-left 14
:padding-right 8}
{:flex-direction :row
:margin-top 8
:border-radius styles/border-radius
:padding-left 14
:padding-right 8}
(if disabled?
{:border-color colors/white-light-transparent
:border-width 1}
@ -65,8 +65,9 @@
;; Main section
(defstyle main-section
{:flex 1
:ios {:background-color colors/blue}})
{:flex 1
:android {:background-color colors/white}
:ios {:background-color colors/blue}})
(defstyle scroll-bottom
{:background-color colors/white
@ -115,7 +116,7 @@
:color colors/white})
(def total-value
{:color colors/white-transparent})
{:color colors/white-transparent})
(defstyle total-balance-currency
{:font-size 37
@ -175,3 +176,21 @@
{:font-size 16
:color colors/gray
:margin-left 6})
(def wallet-address
{:color :white
:text-align :center
:font-size 15
:letter-spacing -0.2
:line-height 20})
(def address-section
(merge
section
{:flex-grow 1
:align-items :center
:padding 20}))
(def modal-history
{:flex 1
:background-color :white})

43
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

@ -43,20 +43,20 @@
(defn- transaction-type->icon [k]
(case k
:inbound (transaction-icon :icons/arrow-left (colors/alpha colors/green 0.2) colors/green)
:outbound (transaction-icon :icons/arrow-right (colors/alpha colors/blue 0.1) colors/blue)
:failed (transaction-icon :icons/exclamation-mark colors/gray-light colors/red)
(:postponed :pending) (transaction-icon :icons/arrow-right colors/gray-light colors/gray)
:inbound (transaction-icon :icons/arrow-left (colors/alpha colors/green 0.2) colors/green)
:outbound (transaction-icon :icons/arrow-right (colors/alpha colors/blue 0.1) colors/blue)
:failed (transaction-icon :icons/exclamation-mark colors/gray-light colors/red)
(:postponed :pending) (transaction-icon :icons/arrow-right colors/gray-light colors/gray)
(throw (str "Unknown transaction type: " k))))
(defn render-transaction [{:keys [hash from-contact to-contact to from type value time-formatted symbol]} network]
(defn render-transaction [{:keys [hash from-contact to-contact to from type value time-formatted symbol]} network hide-details?]
(let [[label contact address
contact-accessibility-label
address-accessibility-label] (if (inbound? type)
[(i18n/label :t/from) from-contact from :sender-text :sender-address-text]
[(i18n/label :t/to) to-contact to :recipient-name-text :recipient-address-text])
{:keys [decimals]} (tokens/asset-for (ethereum/network->chain-keyword network) symbol)]
[list/touchable-item #(re-frame/dispatch [:show-transaction-details hash])
[list/touchable-item #(when-not hide-details? (re-frame/dispatch [:show-transaction-details hash]))
[react/view {:accessibility-label :transaction-item}
[list/item
[list/item-icon (transaction-type->icon (keyword type))]
@ -85,10 +85,11 @@
:number-of-lines 1
:accessibility-label address-accessibility-label}
address]]]
[list/item-icon {:icon :icons/forward
:style {:margin-top 10}
:icon-opts (merge styles/forward
{:accessibility-label :show-transaction-button})}]]]]))
(when-not hide-details?
[list/item-icon {:icon :icons/forward
:style {:margin-top 10}
:icon-opts (merge styles/forward
{:accessibility-label :show-transaction-button})}])]]]))
(defn filtered-transaction? [transaction filter-data]
(:checked? (some #(when (= (:type transaction) (:id %)) %) (:type filter-data))))
@ -96,14 +97,14 @@
(defn update-transactions [m filter-data]
(update m :data (fn [v] (filter #(filtered-transaction? % filter-data) v))))
(defview history-list []
(defview history-list [& [hide-details?]]
(letsubs [transactions-history-list [:wallet.transactions/transactions-history-list]
filter-data [:wallet.transactions/filters]
network [:get-current-account-network]]
[react/view components.styles/flex
[list/section-list {:sections (map #(update-transactions % filter-data) transactions-history-list)
:key-fn :hash
:render-fn #(render-transaction % network)
:render-fn #(render-transaction % network hide-details?)
:empty-component [react/i18n-text {:style styles/empty-text
:key :transactions-history-empty}]
:on-refresh #(re-frame/dispatch [:update-transactions])
@ -127,10 +128,10 @@
label]]])
(defn- wrap-filter-data [m]
[{:title (i18n/label :t/transactions-filter-type)
:key :type
:render-fn render-item-filter
:data (:type m)}])
[{:title (i18n/label :t/transactions-filter-type)
:key :type
:render-fn render-item-filter
:data (:type m)}])
(defview filter-history []
(letsubs [filter-data [:wallet.transactions/filters]]
@ -194,9 +195,9 @@
([label props-value]
(details-list-row label props-value nil))
([label props-value extra-props-value]
(let [[props value] (if (string? props-value)
[nil props-value]
props-value)
(let [[props value] (if (string? props-value)
[nil props-value]
props-value)
[extra-props extra-value] (if (string? extra-props-value)
[nil extra-props-value]
extra-props-value)]
@ -240,8 +241,8 @@
(defview transaction-details []
(letsubs [{:keys [hash url type] :as transaction} [:wallet.transactions/transaction-details]
confirmations [:wallet.transactions.details/confirmations]
confirmations-progress [:wallet.transactions.details/confirmations-progress]]
confirmations [:wallet.transactions.details/confirmations]
confirmations-progress [:wallet.transactions.details/confirmations-progress]]
[react/view {:style components.styles/flex}
[status-bar/status-bar]
[toolbar/toolbar {}

78
src/status_im/ui/screens/wallet/views.cljs
View File

@ -11,9 +11,13 @@
[status-im.ui.screens.wallet.styles :as styles]
[status-im.ui.screens.wallet.utils :as wallet.utils]
[status-im.utils.money :as money]
[status-im.ui.components.toolbar.actions :as action]
status-im.ui.screens.wallet.collectibles.etheremon.views
status-im.ui.screens.wallet.collectibles.cryptostrikers.views
status-im.ui.screens.wallet.collectibles.cryptokitties.views))
status-im.ui.screens.wallet.collectibles.cryptokitties.views
[status-im.ui.components.status-bar.view :as status-bar.view]
[status-im.ui.components.text :as text]
[status-im.ui.screens.wallet.transactions.views :as transactions.views]))
(defn toolbar-view []
[toolbar/toolbar {:style styles/toolbar :flat? true}
@ -26,6 +30,17 @@
:options [{:label (i18n/label :t/wallet-manage-assets)
:action #(re-frame/dispatch [:navigate-to-modal :wallet-settings-assets])}]}]]])
(defn toolbar-modal [modal-history?]
[react/view
[status-bar.view/status-bar {:type :modal-wallet}]
[toolbar/toolbar {:style styles/toolbar :flat? true}
[toolbar/nav-button (action/close-white action/default-handler)]
[toolbar/content-wrapper]
[toolbar/actions
[{:icon (if modal-history? :icons/wallet :icons/transaction-history)
:icon-opts {:color :white}
:handler #(re-frame/dispatch [:set-in [:wallet :modal-history?] (not modal-history?)])}]]]])
(defn- total-section [value currency]
[react/view styles/section
[react/view {:style styles/total-balance-container}
@ -83,15 +98,15 @@
[react/text {:style styles/asset-item-price
:uppercase? true
:number-of-lines 1}
(if @asset-value @asset-value "...")]]])))
(or @asset-value "...")]]])))
(def item-icon-forward
[list/item-icon {:icon :icons/forward
:icon-opts {:color :gray}}])
(defn- render-collectible [address-hex {:keys [symbol name icon amount] :as collectible}]
(defn- render-collectible [address-hex {:keys [symbol name icon amount] :as collectible} modal?]
(let [items-number (money/to-fixed amount)
details? (pos? items-number)]
details? (and (pos? items-number) (not modal?))]
[react/touchable-highlight
(when details?
{:on-press #(re-frame/dispatch [:show-collectibles-list address-hex collectible])})
@ -114,7 +129,7 @@
(defn group-assets [v]
(group-by #(if (:nft? %) :nfts :tokens) v))
(defn- asset-section [assets currency address-hex]
(defn- asset-section [assets currency address-hex modal?]
(let [{:keys [tokens nfts]} (group-assets assets)]
[react/view styles/asset-section
[list/section-list
@ -128,35 +143,48 @@
{:title (i18n/label :t/wallet-collectibles)
:key :collectibles
:data nfts
:render-fn #(render-collectible address-hex %)}]}]]))
:render-fn #(render-collectible address-hex % modal?)}]}]]))
(views/defview wallet-root []
(views/defview wallet-root [modal?]
(views/letsubs [assets [:wallet/visible-assets-with-amount]
currency [:wallet/currency]
portfolio-value [:portfolio-value]
{:keys [modal-history?]} [:get :wallet]
{:keys [seed-backed-up?]} [:get-current-account]
address-hex [:get-current-account-hex]]
[react/view styles/main-section
[toolbar-view]
[react/scroll-view {:refresh-control
(reagent/as-element
[react/refresh-control {:on-refresh #(re-frame/dispatch [:update-wallet])
:tint-color :white
:refreshing false}])}
[total-section portfolio-value currency]
(when (and (not seed-backed-up?)
(some (fn [{:keys [amount]}]
(and amount (not (.isZero amount))))
assets))
[backup-seed-phrase])
[list/action-list actions
{:container-style styles/action-section}]
[asset-section assets currency address-hex]
;; Hack to allow different colors for bottom scroll view (iOS only)
[react/view {:style styles/scroll-bottom}]]]))
(if modal?
[toolbar-modal modal-history?]
[toolbar-view])
(if (and modal? modal-history?)
[react/view styles/modal-history
[transactions.views/history-list true]]
[react/scroll-view {:refresh-control
(reagent/as-element
[react/refresh-control {:on-refresh #(re-frame/dispatch [:update-wallet])
:tint-color :white
:refreshing false}])}
[total-section portfolio-value currency]
(when (and (not modal?)
(not seed-backed-up?)
(some (fn [{:keys [amount]}]
(and amount (not (.isZero amount))))
assets))
[backup-seed-phrase])
(if modal?
[react/view styles/address-section
[text/selectable-text {:value address-hex :style styles/wallet-address}]]
[list/action-list actions
{:container-style styles/action-section}])
[asset-section assets currency address-hex modal?]
;; Hack to allow different colors for bottom scroll view (iOS only)
[react/view {:style styles/scroll-bottom}]])]))
(views/defview wallet-modal []
[wallet-root true])
(views/defview wallet []
(views/letsubs [{:keys [wallet-set-up-passed?]} [:get-current-account]]
(if (not wallet-set-up-passed?)
[onboarding.views/onboarding]
[wallet-root])))
[wallet-root false])))