From 07e36096cc5d5cbcc8eefeb1361b5af362e0c2d9 Mon Sep 17 00:00:00 2001
From: tbenr <enrico.delfante@gmail.com>
Date: Sat, 7 Nov 2020 17:09:36 +0100
Subject: [PATCH] new-account-cards

Signed-off-by: andrey <motor4ik@gmail.com>
---
 resources/images/icons/keycard_account@2x.png | Bin 0 -> 553 bytes
 resources/images/icons/keycard_account@3x.png | Bin 0 -> 810 bytes
 .../ui/screens/wallet/accounts/sheets.cljs    |   8 +-
 .../ui/screens/wallet/accounts/styles.cljs    | 108 +++++++++++++++---
 .../ui/screens/wallet/accounts/views.cljs     | 104 +++++++++++------
 translations/en.json                          |   2 +-
 6 files changed, 163 insertions(+), 59 deletions(-)
 create mode 100755 resources/images/icons/keycard_account@2x.png
 create mode 100755 resources/images/icons/keycard_account@3x.png

diff --git a/resources/images/icons/keycard_account@2x.png b/resources/images/icons/keycard_account@2x.png
new file mode 100755
index 0000000000000000000000000000000000000000..a2cb2e2aea30c7dfc7d2e73e63dfda7676b9e423
GIT binary patch
literal 553
zcmV+^0@nSBP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0lrB@K~#7F?U{j1
z!!Qs<KZpSs!6Pt&H=u0N4QeI;CTKQ*4I(Be8?;PNHYh$NRxSx?<8XEy)lWLfu59V9
zzVqEVKqiy<FWSo1%HGPUmR<eZ3JIgElxUP5l6}24DITmGaanmM$9hi^D72NQu|efZ
z4pO#2-w1^S;J$vzJyd6XiJ4iU{jaJKduR<mF^w51&?vI?*k>m06KBU1@d-+ew%dtu
z13ykP?H%M63&+=h0~>3Mhr8Ps1o1WClZ`dTvu0ya1ANi&PfQB!tM?HzQ(}4|6TN|^
zqR_8{=x*nJuB~j)FF6zvVbR5$L!s>+LsBBaa+*W+QGveV<W?FB;uSO0JCd3BhmF4x
ziK{Cmk|P^1H?a-i*?A2C?hp@B-mv*S1c-G4UFDxU^U1_8Aei#f7&Mvq9hHl`pj}=V
zB#goNqRt=yv0{MQNP_^xGC)D-*69+<08&0kg&NX;!pa+)Q{Nzxyh35{cR#@U1o6H&
z)Cur@z@T{xB3E)(tOzk;fEt}AGz||m_ZtWiD~J!MGO&YULF5Bq%xaWk;e*X7PJ&#m
rQ&Fg%S<b!IxfpP-bV(VI$t;my43V$QDkgk#00000NkvXXu0mjfc9r6)

literal 0
HcmV?d00001

diff --git a/resources/images/icons/keycard_account@3x.png b/resources/images/icons/keycard_account@3x.png
new file mode 100755
index 0000000000000000000000000000000000000000..d991afaa3e93641660b1d6de0a393d09b388a564
GIT binary patch
literal 810
zcmV+_1J(SAP)<h;3K|Lk000e1NJLTq002k;002k`1^@s6RqeA!00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0>4Q_K~#7F?VCYz
z(=Zf<Ki~q~0NsEd;c<g<g5(Bt%PQdngcBq;pi6cQJ9aHQcA+O|m+Xq(Bpr(L6x)^K
z$g;kfH<>85X8h;(v-B)Mp-?Ck3Pa@u{UAQheZ2MIcA?z+xbgAR$EA-oBSU;#`FLm;
z8y^!!fTNu-)mZY+W!d4_I^iKQHY6ZY*Ez_sb&d=C{+n%{x!rx&oOD)m{JY&}7KEIm
zqRD~tRHPMQC%q;EX4n^a(V~xwKp%4kj>EpNDeajW{oFBd7p>^_Utf@!i>kS2LmcXs
zJN8{PNHoD#|Lq0w%#D5>J@b-yoY8hkJZqy(=$S4AIy2gCh{x)q_e9-=Ko<AJWA!me
zfsS<{Nj%n%CD0l1Sbbd6GhGO@Hrj-E&W*NP28uOiiM>U-9$TH1Is0Rl&pe+Qc8zGT
zSR-GJ3GJC+&+8lmXHNWV{sWoL<`s2OHE%q<Jq|tDgm8)Wq`Bu56~)K57|I*A;v70Y
ztBRuH$fzcLEF9qyYLhtR!mOCm&P^(eFhYc_qpYETwk;T`FjcIg{Dg!#R=FdDRpUu|
ze$}@?gQEykLlLNkB2W!Qpc;xmH57qr7>YnM{vU<MR4bE4*dIwt%{fc#d0Q`}?jRLs
zYP5eLQ-tOY3OQ#*#t6*>8l^ajP%qGE#ZiRAZ#_mWjw09vGZp5Fk&B}U?P}92MuyN_
zoZeS*Sfo4-`pyUunmb5yljFps>>z!W{go4w`cy;T=Vv=HwGhHjD@S;*hA<L@{fn>O
zM%FfjB=S)o2+iDajs04>cT&wk@7Z5HE3{jTHAsZ!`6ZN(x>#bIEJC{kyfTj8kjV~2
z3!$Arp=EtbGDT?r2)DLdRm&vVppK|ssB3VZm5;jEa#hPK`sEMXg`;lw{iBa>4bJ=V
o<h;i<*`Iv;qEILl3WY*|zjO=3ZfN-!=l}o!07*qoM6N<$g6uGHF8}}l

literal 0
HcmV?d00001

diff --git a/src/status_im/ui/screens/wallet/accounts/sheets.cljs b/src/status_im/ui/screens/wallet/accounts/sheets.cljs
index 5503cdda6a..46a5c5cd19 100644
--- a/src/status_im/ui/screens/wallet/accounts/sheets.cljs
+++ b/src/status_im/ui/screens/wallet/accounts/sheets.cljs
@@ -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)}])}]])
diff --git a/src/status_im/ui/screens/wallet/accounts/styles.cljs b/src/status_im/ui/screens/wallet/accounts/styles.cljs
index d3222db8e7..8513f03907 100644
--- a/src/status_im/ui/screens/wallet/accounts/styles.cljs
+++ b/src/status_im/ui/screens/wallet/accounts/styles.cljs
@@ -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
diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs
index 3daf07e6a6..60fc57ea6f 100644
--- a/src/status_im/ui/screens/wallet/accounts/views.cljs
+++ b/src/status_im/ui/screens/wallet/accounts/views.cljs
@@ -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]
diff --git a/translations/en.json b/translations/en.json
index 7c9475de84..195f3556c0 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -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",