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

new-account-cards 

Signed-off-by: andrey <motor4ik@gmail.com>
This commit is contained in:
tbenr 2020-11-07 17:09:36 +01:00 committed by andrey
parent 6311077cec
commit 07e36096cc
No known key found for this signature in database
GPG Key ID: 89B67245FD2F0272
6 changed files with 163 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons/keycard_account@2x.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 B

BIN
resources/images/icons/keycard_account@3x.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 810 B

8
src/status_im/ui/screens/wallet/accounts/sheets.cljs
View File

@ -48,7 +48,7 @@
[:navigate-to :profile-stack {:screen :backup-seed
:initial false}])}])]))
(defn send-receive [account type]
(defn account-card-actions [account type]
[react/view
(when-not (= type :watch)
[quo/list-item
@ -60,9 +60,9 @@
[:wallet/prepare-transaction-from-wallet account])}])
[quo/list-item
{:theme :accent
:title (i18n/label :t/receive)
:icon :main-icons/receive
:accessibility-label :receive-transaction-button
:title (i18n/label :t/share)
:icon :main-icons/share
:accessibility-label :share-account-button
:on-press #(hide-sheet-and-dispatch
[:show-popover {:view :share-account
:address (:address account)}])}]])

108
src/status_im/ui/screens/wallet/accounts/styles.cljs
View File

@ -2,6 +2,28 @@
(:require [quo.animated :as animated]
[status-im.ui.components.colors :as colors]))
(def dot-size 6)
(def dot-container
{:height 200
:flex-direction :column
:flex-wrap :wrap
:padding-horizontal 8})
(defn dot-selector []
{:flex-direction :row
:justify-content :space-between
:align-items :center})
(defn dot-style [selected]
{:background-color (if selected colors/blue colors/blue-light)
:overflow :hidden
:opacity 1
:margin-horizontal 3
:width dot-size
:height dot-size
:border-radius 3})
(defn container [{:keys [minimized]}]
(when-not minimized
{:padding-bottom 8
@ -25,34 +47,84 @@
:bottom 0
:left 0})
(defn card-common []
{:margin-vertical 16
:margin-horizontal 8
:width 156
:height 145
:shadow-offset {:width 0 :height 2}
:shadow-radius 8
:shadow-opacity 1
:shadow-color (if (colors/dark?)
"rgba(0, 0, 0, 0.75)"
"rgba(0, 9, 26, 0.12)")
:elevation 3
:border-radius 8})
(def card-margin 8)
(defn page-width [card-width]
(+ card-width (* card-margin 2)))
(defn card [color]
(merge (card-common)
(defn card-common [card-width]
{:margin card-margin
:width card-width
:height 82
:border-radius 16})
(defn card [color card-width]
(merge (card-common card-width)
{:background-color color
:justify-content :space-between
:padding-horizontal 12
:padding-top 12
:padding-bottom 6}))
:padding-bottom 10}))
(defn add-card []
(merge (card-common)
(defn add-card [card-width]
(merge (card-common card-width)
{:background-color colors/white
:flex-direction :row
:border-width 1
:border-color colors/gray-lighter
:justify-content :center
:align-items :center}))
(def add-text
{:color colors/blue
:margin-left 8
:font-weight "500"
:font-size 15
:line-height 22})
(def card-name
{:color colors/white-persist
:font-weight "500"
:font-size 15
:line-height 22})
(def card-address
{:number-of-lines 1
:ellipsize-mode :middle
:size :small
:monospace true
:style {:width 110
:font-size 15
:line-height 22
:color colors/white-transparent-70-persist}})
(def card-value
{:color colors/white-persist
:font-size 22
:font-weight "500"})
(def card-value-currency
{:color colors/white-persist
:font-size 22
:font-weight "500"})
(def card-icon-more
{:border-radius 32
:width 36
:height 36
:justify-content :center
:align-items :center
:background-color colors/black-transparent})
(def card-icon-type
{:border-radius 32
:width 36
:height 36
:justify-content :center
:align-items :center
:margin-left :auto
:margin-right 12
:background-color colors/white-persist})
(def send-button-container
{:position :absolute
:z-index 2

104
src/status_im/ui/screens/wallet/accounts/views.cljs
View File

@ -2,6 +2,7 @@
(:require [quo.animated :as reanimated]
[quo.core :as quo]
[re-frame.core :as re-frame]
[reagent.core :as reagent]
[status-im.i18n :as i18n]
[status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.colors :as colors]
@ -15,48 +16,49 @@
[status-im.keycard.login :as keycard.login])
(:require-macros [status-im.utils.views :as views]))
(views/defview account-card [{:keys [name color address type] :as account}]
(views/defview account-card [{:keys [name color address type] :as account} keycard? card-width]
(views/letsubs [currency [:wallet/currency]
portfolio-value [:account-portfolio-value address]
prices-loading? [:prices-loading?]]
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:navigate-to :wallet-account account])
:accessibility-label (str "accountcard" name)
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet
{:content (fn [] [sheets/send-receive account type])
:content-height 130}])}
[react/view {:style (styles/card color)}
:accessibility-label (str "accountcard" name)}
[react/view {:style (styles/card color card-width)}
[react/view {:flex-direction :row :align-items :center :justify-content :space-between}
[react/text {:style styles/card-name} name]
[quo/text styles/card-address
address]]
[react/view {:flex-direction :row :align-items :center :justify-content :space-between}
[react/view {:style {:flex-direction :row}}
(if prices-loading?
[react/small-loading-indicator :colors/white-persist]
[react/text {:style {:color colors/white-persist :font-weight "500"}
[react/text {:style styles/card-value
:accessibility-label "account-total-value"} portfolio-value])
[react/text {:style {:color colors/white-transparent-persist :font-weight "500"}} (str " " (:code currency))]]
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:show-popover
{:view :share-account :address address}])}
[icons/icon :main-icons/share {:color colors/white-persist}]]]
[react/view
[react/text {:style {:color colors/white-persist :font-weight "500" :line-height 22}} name]
[quo/text {:number-of-lines 1
:ellipsize-mode :middle
:size :small
:monospace true
:style {:line-height 22
:color colors/white-transparent-70-persist}}
address]]]]))
[react/text {:style styles/card-value-currency} (str " " (:code currency))]]
(let [icon (cond
(= type :watch)
:main-icons/show
(defn add-card []
(and (not= type :watch) keycard?)
:main-icons/keycard-account)]
(when icon
[icons/icon icon {:container-style styles/card-icon-type
:color color}]))
[react/touchable-highlight
{:style styles/card-icon-more
:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet
{:content (fn [] [sheets/account-card-actions account type])
:content-height 130}])}
[icons/icon :main-icons/more {:color colors/white-persist}]]]]]))
(defn add-card [card-width]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet
{:content sheets/add-account
:content-height 260}])
:accessibility-label "add-new-account"}
[react/view {:style (styles/add-card)}
[react/view {:width 40 :height 40 :justify-content :center :border-radius 20
:align-items :center :background-color colors/blue-transparent-10 :margin-bottom 8}
[icons/icon :main-icons/add {:color colors/blue}]]
[react/text {:style {:color colors/blue}} (i18n/label :t/add-account)]]])
[react/view {:style (styles/add-card card-width)}
[icons/icon :main-icons/add-circle {:color colors/blue}]
[react/text {:style styles/add-text} (i18n/label :t/add-account)]]])
(defn render-asset [currency & [on-press]]
(fn [{:keys [icon decimals amount color value] :as token}]
@ -96,16 +98,46 @@
[react/view (styles/send-button)
[icons/icon :main-icons/send {:color colors/white-persist}]]]]))
(defn dot []
(fn [{:keys [selected]}]
[react/view {:style (styles/dot-style selected)}]))
(defn dots-selector [{:keys [n selected]}]
[react/view {:style (styles/dot-selector)}
(for [i (range n)]
^{:key i}
[dot {:selected (= selected i)}])])
(views/defview accounts []
(views/letsubs [accounts [:multiaccount/accounts]]
[react/scroll-view {:horizontal true
:shows-horizontal-scroll-indicator false}
[react/view {:flex-direction :row
:padding-horizontal 8}
(for [account accounts]
^{:key account}
[account-card account])
[add-card]]]))
(views/letsubs [accounts [:multiaccount/accounts]
keycard? [:keycard-multiaccount?]
window-width [:dimensions/window-width]
index (reagent/atom 0)]
(let [card-width (quot window-width 1.1)
page-width (styles/page-width card-width)]
[react/view {:style {:align-items :center
:flex 1
:justify-content :flex-end}}
[react/scroll-view {:horizontal true
:deceleration-rate "fast"
:snap-to-interval page-width
:snap-to-alignment "left"
:shows-horizontal-scroll-indicator false
:scroll-event-throttle 64
:on-scroll #(let [x (.-nativeEvent.contentOffset.x ^js %)]
(reset! index (Math/max (Math/round (/ x page-width)) 0)))}
[react/view styles/dot-container
(doall
(for [account accounts]
^{:key account}
[account-card account keycard? card-width]))
[add-card card-width]]]
(let [columns (Math/ceil (/ (inc (count accounts)) 2))
totalwidth (* (styles/page-width card-width) columns)
n (Math/ceil (/ totalwidth window-width))]
(when (> n 1)
[dots-selector {:selected @index
:n n}]))])))
(views/defview total-value [{:keys [animation minimized]}]
(views/letsubs [currency [:wallet/currency]

2
translations/en.json
View File

@ -16,7 +16,7 @@
"active-unknown": "Unknown",
"add": "Add",
"add-a-watch-account": "Add a watch-only address",
"add-account": "Add account",
"add-account": "Add an account",
"add-account-description": "You can import any type of Ethereum account to add it to your Status wallet",
"add-account-incorrect-password": "Password seems to be incorrect. Enter the password you use to unlock the app.",
"add-an-account": "Add an account",