From 9a06417b6efc56353feb38d0c98b6ca7f415faca Mon Sep 17 00:00:00 2001
From: Gustavo Nunes <gustavonunesedl@gmail.com>
Date: Thu, 17 Aug 2017 18:10:37 -0300
Subject: [PATCH] New screen: Wallets list (ui only)

---
 .../drawable-hdpi/icon_add_wallet_dark.png    | Bin 0 -> 793 bytes
 .../drawable-mdpi/icon_add_wallet_dark.png    | Bin 0 -> 445 bytes
 .../drawable-xhdpi/icon_add_wallet_dark.png   | Bin 0 -> 849 bytes
 .../drawable-xxhdpi/icon_add_wallet_dark.png  | Bin 0 -> 1251 bytes
 .../drawable-xxxhdpi/icon_add_wallet_dark.png | Bin 0 -> 1734 bytes
 .../Contents.json                             |  21 +++++
 .../icon_add_wallet_dark.png                  | Bin 0 -> 849 bytes
 src/status_im/components/list/styles.cljs     |   6 +-
 src/status_im/components/list/views.cljs      |  10 ++-
 src/status_im/components/react.cljs           |   2 +-
 .../components/toolbar_new/actions.cljs       |   5 ++
 src/status_im/translations/en.cljs            |   8 +-
 src/status_im/ui/screens/views.cljs           |   3 +
 .../ui/screens/wallet/main/styles.cljs        |  26 ++----
 .../ui/screens/wallet/main/views.cljs         |  69 ++++++---------
 .../ui/screens/wallet/wallet_list/styles.cljs |  83 ++++++++++++++++++
 .../ui/screens/wallet/wallet_list/views.cljs  |  64 ++++++++++++++
 17 files changed, 225 insertions(+), 72 deletions(-)
 create mode 100644 android/app/src/main/res/drawable-hdpi/icon_add_wallet_dark.png
 create mode 100644 android/app/src/main/res/drawable-mdpi/icon_add_wallet_dark.png
 create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_add_wallet_dark.png
 create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_add_wallet_dark.png
 create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_add_wallet_dark.png
 create mode 100644 ios/StatusIm/Images.xcassets/icon_add_wallet_dark.imageset/Contents.json
 create mode 100644 ios/StatusIm/Images.xcassets/icon_add_wallet_dark.imageset/icon_add_wallet_dark.png
 create mode 100644 src/status_im/ui/screens/wallet/wallet_list/styles.cljs
 create mode 100644 src/status_im/ui/screens/wallet/wallet_list/views.cljs

diff --git a/android/app/src/main/res/drawable-hdpi/icon_add_wallet_dark.png b/android/app/src/main/res/drawable-hdpi/icon_add_wallet_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..0807fa3b2021605679d799996757beeea82e0cbe
GIT binary patch
literal 793
zcmV+!1LpjRP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00001b5ch_0Itp)
z=>Px%(@8`@R9Fe^S3zhKK@^?8iHRtbUIc4TVm%2SMA3`aqBVga*@}iHks^4pcqoX7
z7*TI}sb{f9b7<2;#M+2gPa<ACcu^4#8u3(0Yu$8rzkkw9I=f_cH)dN=vXJ~YGylJN
z^JlX2!&vX>WuUtZfM0kfbE$8!zH}Us9b_8D{rr8$Z7=}XyZ%_;t5WIylH1=?P-1j!
z#7204h`Zf^A+&2O0^`-0VpZl+3QC^M9WdAMEn^{MMV`@t!H7ZR(9`n6_o6#0fZLiT
z-g1elF<{RCpyu`s+NMkoFl0&cA6SpUc%50d37-}mN<j?qm~bK?Z{j;6!<Fgj#a7=R
zf>b_##aOXklCUF9ilZ`>CO2HTxeCU#Nc3_TVmLqN;e4&R5cjk&0d<BXFSO0X$Y^$0
z>goy-Ura?1P!PLH=Sjs8YQNW(g*s7CvOpOE4Q>V{4C;qA-e~6=NYKJ;vCuBKo4%9j
zv9^N#p)CWLqu2OnI?8*y$wcZ*Zl7V<sdz-IRAwH1^5ar&S+!i${epvx8@By|{D#P0
zB)i`)X7jfU*-%4-us(`B1<~CDiF7W*KOFmTg)*$%GR~gV^XDvPKWSoaO8jdxAI}Wg
z8n*Ua#vKU)_OanFtWU6~AfMPk!*NYJL5`D6+lbNiLU(srpqUj;&7b-`dH84K%VB29
zJsa3@P*0_^cMx!r>SyH&cqrAxbwIfLe6DzHgDM!JdZ^z~4*`6mSInS@b{uLOaDpy%
zPcb}@3nt+c1RH`9dUntTc0rJ;EUy@iWlO3U8=kLae}^CqVXA`+O$nlH+jp$}T3u;-
zHwmBi7K~^VuFGSNEt3a0rlPDMZe@Pst1ekxKfh}k%^&V~uQt`@-!;JT`Ps({vY#VE
z@<1nem07XCC5q4gvQPxgmy2I%0fkN$q4M>74{0`h5P>oleOqq-#$C4Mi|kGK-(}!8
XvZC%}&2(l?00000NkvXXu0mjf&Gc}S

literal 0
HcmV?d00001

diff --git a/android/app/src/main/res/drawable-mdpi/icon_add_wallet_dark.png b/android/app/src/main/res/drawable-mdpi/icon_add_wallet_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3d34934ee437c23dbfc427142f711a7fca2f5c1
GIT binary patch
literal 445
zcmV;u0Yd(XP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00001b5ch_0Itp)
z=>Px$cS%G+R7ef&RLx4mKoFjhQU!ZeP(1Z*5<Q7~k_H6v71T>DK86TFil-G%wt1Ug
z6c2i>Xo@iIL^o`*>t=)CsX1hKX1@96Co=(9J`Ekfx?PA-cTTfQKo|hgcHQok5uX)d
zx(@vdDMt&&cIplVInXIk-4Y<Hgp}La8_pPf&Mzwf03~cdz-(=`dvbq!{ls$9vwwKJ
z^N}yE2q;oPn4<`=;&9wzT^n-7b0X}+ceAyQ3JM6k=lNrFF!&Y%-^#~Ax+<_he^LBe
zL3TH`CM+b7s=6{B|6f55JDVYyYD_GW2fj~bx~FyKX|+hon^zOibSI)+AI90DNF)=T
zna?@IW>ru)5yh1+<zYg^iO1~PWFOqNnZ4(2uJ1xw0k=hMU~E$8k>e~)A`_$U`d3lN
z>ZhmmWdN=4okARK%<1#Rg{fptFxHqdKqk|28g%BZmyI)5<UQ;UtpHl#JAX#F)rOZ9
nREQC$iY0WADy~bRbqBrxXJmNXF%y8G00000NkvXXu0mjfi;%sR

literal 0
HcmV?d00001

diff --git a/android/app/src/main/res/drawable-xhdpi/icon_add_wallet_dark.png b/android/app/src/main/res/drawable-xhdpi/icon_add_wallet_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec985c5e28822e5bdb63582795a537792a253a44
GIT binary patch
literal 849
zcmV-X1FrmuP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px&3rR#lRA>e5SWjycK@@*)BUPk&@T5>Zc&*@9@ZTl&CdOXcDg^7%n;*h&U`asJ
zqO@D2mnI0ddiEd`v>pU62KD5{Vr!r~&SbNj*EdOKW|Pe->_W(UZ)bk*&%F0`W&rXh
zk3b%QJOWup0Bw~EA#kR2w=59KC}3KEIAuFG$v6c3C3SuD04tmRvuZyKD+g|t?wu7P
zSOE~%`vIjXN5t0v-hADE`h)B7xPbF2@>v?M?2$Iy00@?qE!@5W7jXXFr!V(Gz(X$2
zfWP?M-)Mf`-FZ)SAEQh!8UrW`{Y4W!@6m~g<8NQCEPdBsCzsrsTReBr`g27D!DERs
zMUhnfNxnj5MhE1iX}JRQX-?wAWq+;ulL|*gcLMUFR4TvP6RjPI8#|$z2iIe)0crds
zoune~`{@`@^(Y-m7nSwud}aqIf}~a2Fi~o(jV@yfaqIRE_P-Tx&vS7qywqjHbzT7@
z;+O~I4vabAnmXqiXsj=5UqcObgaTP_N1Hgq&Qpj5WbEvJzXHY@@I1VBQWQR@(Ei55
zOQQ~Padx2yhhnLXTfoJ}YOUd-!|1@~TI~%1q%;u^K?d+d&JOoGA$`FGE&CJ_;(Tl{
zrDNe>B6|l0+h=@hOrZ#2*j$ZpM*VNU0%4)4T%C%GZq(K!z_WKCDzs2Ze8@<k^XL@B
zud#sAv2ZZq;=o{}q;EZVAg4ClzmRr9vaSIqRENQxzTfRcWUe|No6ZE;uK+Qalj?BK
zWt`V`mZaOb=6Mqmd`Y=M5ibw*XS74TysfLR*G@-c)W4oW-EKq2+0apU>X{BU0BTHh
zt+E%iv}+Z4#kI?EbO-o|A^4d)3s-|cY`Z`V%6Z{Im1F5OAk#n&QeDCIX{QjK6m0^j
zEIEx^_0?L1&(~I<UsvEKqw${1a0}6!lb5{O=}dEgdpHc=-hOK;?GU5ub!l={U9a~t
zULmFGKxZqibvip2x}y+lU4~J54X^?KI_u&9Eo@3>>Z82_-R`7yn@l~(mFE%2BalZR
b(+K<pHj3)BqR~#u00000NkvXXu0mjf=U<4z

literal 0
HcmV?d00001

diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_add_wallet_dark.png b/android/app/src/main/res/drawable-xxhdpi/icon_add_wallet_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ac9f6d78bc14700a5539ee653dce385c5f5d458
GIT binary patch
literal 1251
zcmV<91RVQ`P)<h;3K|Lk000e1NJLTq002k;002k`1^@s6RqeA!00001b5ch_0Itp)
z=>Px(ok>JNRCodHo4rpIK@`B}9UsPkCK?;1BX;&ygeX=RKN>Dr2n2z~+5{^_JN^L+
zRLC9107s!wpfG|GE%*bh40K3LPzxX=$KH)^?sl{5?VH`3{Wx~xY;w8T_h#OE^SjxZ
z*_k=U^rZ=C0-As(pb2OKnt&#t2@nK;kSU9Lv%@`%8U4Va8w+=E#!o35iLn4M*hBN%
zEW<uyh3A(R@@w_F3kB#_cI2YLj;1*0SL=0{gnR&O6<S)xmR?V9`Nb0$(9P^%m%-Ru
z#`#%4C&|>qFP4GZD+{@=UhxG2BwEf9JK9Ju91{t^?-Log{AND4DT9=eDZJ!Iy!brz
za6|>M^%u+KDX+RJ1G;f%=o%Wl;$<{VI?h>7b&#Q>Zl=X@DK~h(TwBrb41*WEx#?wF
z>EyRU;n}`V{#ex6?EUtGro&5Mlt#*okD?Qg?!*vvTBQO}22=*#%{XPMBHLlme0QlZ
zLpqa|ia}xiFdJxk16#-(<HjpYpQl`z(-TUCGXup7ja`rw;R4P|0^rofSBVK@L%Hmy
z?Wiqd-75o<O#;PZl|(pJMMZ2PM(f`BEvu8rqYTJt*qIi6j`Kc==^!yi21s<sNrd8z
zDM*aUowU=TGriCE_ImpUoT9{~F-GN>B5Og)o>Njl1M>NyG$0Mghk%b-w;&%tk&R+2
zi?bf@IzCY}P>mz4Y&K0sp<57%#TIHnHVZPP0g+g2p$25LAX6F;iNzKwk7B?w_cE>U
z1=?G;g&DqI>?jv`mu<4Kscd$lb)RoN#YhILo*~~3osSBIiDDFyC<9tv%+1s|{*L$J
zb1c^Z+j@d<#%<?(9D#}3hqf$uD)o;TPHN1S<A4AxvSo$T1H!Ev_YyEAbMRA1rXP?>
zZ3E=hfPA1SchXLKagQKQU&oaW1;`v;V;ez^3yRZk$VbeYdpJ!}GN(RW>5zcPol0`|
zGBzv#KU}scnJZI$g0O(<^Acw+&Sq=P<HA(FRu=R=R38-7X_V!}YsCR<0xw&WL&&$W
z&c{*tNIf9)ol6W9j=_S)BTjs%?v17Y5u;g<QgIxHRCoygD?s9`kOvD=C0%H*nFK~P
zGVS0wrbw3~$XXFXaWbxCls}-#RcCQbczH2@nkdGkeUN(+NEKI>A?RqABkGAj9I-1I
zh8XQ!a71|y+&xt=4NC#p3s7dxNWUtR$w<~~WMTbt1dkh|n2&@b%4ayN%j|dnk`;+h
ze!XvKn6vV96do$06&~cSXA=yXVP59bqmzcbtWbD4ZCfnmhPSP3;nVxM+(%g{DIhTc
z!&W(o1+im|>=K>yWYxCY=9#8*(!Ri*I|2zFByWM%F)vHf=hCZ?rIT&r2Hl1p7<kaO
zd-$_4$A%FO_Aj^J74n{~R@#Cr2#x&yQ`&VepT-aX0IZ3>Ao#%%t`pTs$F+TA{T&L2
z^L4E9{IbGP<wOB8x0GtPm11Z^^_xu8BUXRdjmxP4`LGTPh?)XWGM_M#s}2c>n($Gw
z<O1-EEL0~gCVbU>aBHEy`ljyZRO>YXO+XXS1T+CnKoigeG=bC;_zPwOPCN5@_?rL#
N002ovPDHLkV1nrBJeL3f

literal 0
HcmV?d00001

diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_add_wallet_dark.png b/android/app/src/main/res/drawable-xxxhdpi/icon_add_wallet_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e9c4235c67eb78b04b523f8d343169f86362617
GIT binary patch
literal 1734
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

literal 0
HcmV?d00001

diff --git a/ios/StatusIm/Images.xcassets/icon_add_wallet_dark.imageset/Contents.json b/ios/StatusIm/Images.xcassets/icon_add_wallet_dark.imageset/Contents.json
new file mode 100644
index 0000000000..a0377cf1bc
--- /dev/null
+++ b/ios/StatusIm/Images.xcassets/icon_add_wallet_dark.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_add_wallet_dark.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
diff --git a/ios/StatusIm/Images.xcassets/icon_add_wallet_dark.imageset/icon_add_wallet_dark.png b/ios/StatusIm/Images.xcassets/icon_add_wallet_dark.imageset/icon_add_wallet_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec985c5e28822e5bdb63582795a537792a253a44
GIT binary patch
literal 849
zcmV-X1FrmuP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px&3rR#lRA>e5SWjycK@@*)BUPk&@T5>Zc&*@9@ZTl&CdOXcDg^7%n;*h&U`asJ
zqO@D2mnI0ddiEd`v>pU62KD5{Vr!r~&SbNj*EdOKW|Pe->_W(UZ)bk*&%F0`W&rXh
zk3b%QJOWup0Bw~EA#kR2w=59KC}3KEIAuFG$v6c3C3SuD04tmRvuZyKD+g|t?wu7P
zSOE~%`vIjXN5t0v-hADE`h)B7xPbF2@>v?M?2$Iy00@?qE!@5W7jXXFr!V(Gz(X$2
zfWP?M-)Mf`-FZ)SAEQh!8UrW`{Y4W!@6m~g<8NQCEPdBsCzsrsTReBr`g27D!DERs
zMUhnfNxnj5MhE1iX}JRQX-?wAWq+;ulL|*gcLMUFR4TvP6RjPI8#|$z2iIe)0crds
zoune~`{@`@^(Y-m7nSwud}aqIf}~a2Fi~o(jV@yfaqIRE_P-Tx&vS7qywqjHbzT7@
z;+O~I4vabAnmXqiXsj=5UqcObgaTP_N1Hgq&Qpj5WbEvJzXHY@@I1VBQWQR@(Ei55
zOQQ~Padx2yhhnLXTfoJ}YOUd-!|1@~TI~%1q%;u^K?d+d&JOoGA$`FGE&CJ_;(Tl{
zrDNe>B6|l0+h=@hOrZ#2*j$ZpM*VNU0%4)4T%C%GZq(K!z_WKCDzs2Ze8@<k^XL@B
zud#sAv2ZZq;=o{}q;EZVAg4ClzmRr9vaSIqRENQxzTfRcWUe|No6ZE;uK+Qalj?BK
zWt`V`mZaOb=6Mqmd`Y=M5ibw*XS74TysfLR*G@-c)W4oW-EKq2+0apU>X{BU0BTHh
zt+E%iv}+Z4#kI?EbO-o|A^4d)3s-|cY`Z`V%6Z{Im1F5OAk#n&QeDCIX{QjK6m0^j
zEIEx^_0?L1&(~I<UsvEKqw${1a0}6!lb5{O=}dEgdpHc=-hOK;?GU5ub!l={U9a~t
zULmFGKxZqibvip2x}y+lU4~J54X^?KI_u&9Eo@3>>Z82_-R`7yn@l~(mFE%2BalZR
b(+K<pHj3)BqR~#u00000NkvXXu0mjf=U<4z

literal 0
HcmV?d00001

diff --git a/src/status_im/components/list/styles.cljs b/src/status_im/components/list/styles.cljs
index 6271a7ae81..6fd8e59cc8 100644
--- a/src/status_im/components/list/styles.cljs
+++ b/src/status_im/components/list/styles.cljs
@@ -27,15 +27,11 @@
    :color       st/color-gray4
    :padding-top 4})
 
-(def item-icon
+(def item-image
   {:width   40
    :height  40
    :margin  14})
 
-(def primary-action item-icon)
-
-(def secondary-action item-icon)
-
 (def base-separator
   {:height           1
    :background-color st/color-gray5
diff --git a/src/status_im/components/list/views.cljs b/src/status_im/components/list/views.cljs
index 50b464e49d..7436338f0f 100644
--- a/src/status_im/components/list/views.cljs
+++ b/src/status_im/components/list/views.cljs
@@ -33,8 +33,16 @@
     content
     right-action]))
 
+(defn touchable-item [handler item]
+  [rn/touchable-highlight {:on-press handler}
+   item])
+
 (defn item-icon [k]
-  [rn/icon k lst/item-icon])
+  [rn/icon k lst/item-image])
+
+(defn item-image [source]
+  [rn/image {:source source
+             :style  lst/item-image}])
 
 (defn item-content
   ([primary] (item-content primary nil))
diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs
index c665c60e2f..29edbe7c37 100644
--- a/src/status_im/components/react.cljs
+++ b/src/status_im/components/react.cljs
@@ -190,4 +190,4 @@
 
 ;; Emoji
 
-(def emojilib (js/require "emojilib"))
\ No newline at end of file
+(def emojilib (js/require "emojilib"))
diff --git a/src/status_im/components/toolbar_new/actions.cljs b/src/status_im/components/toolbar_new/actions.cljs
index 88e1d5e741..4fcce6530e 100644
--- a/src/status_im/components/toolbar_new/actions.cljs
+++ b/src/status_im/components/toolbar_new/actions.cljs
@@ -60,3 +60,8 @@
   {:image   {:source {:uri :icon_list_white}
              :style  st/action-default}
    :handler handler})
+
+(defn add-wallet [handler]
+  {:image   {:source {:uri :icon_add_wallet_dark}
+             :style  st/action-default}
+   :handler handler})
diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs
index 9dc87467bc..1235b11de4 100644
--- a/src/status_im/translations/en.cljs
+++ b/src/status_im/translations/en.cljs
@@ -287,7 +287,6 @@
 
    ;wallet-qr-code
    :done                                  "Done"
-   :main-wallet                           "Main Wallet"
 
    ;validation
    :invalid-phone                         "Invalid phone number"
@@ -330,6 +329,13 @@
 
    ;; wallet
    :wallet                                "Wallet"
+   :wallets                               "Wallets"
+   :your-wallets                          "Your wallets"
+   :main-wallet                           "Main Wallet"
+   :wallet-send                           "Send"
+   :wallet-request                        "Request"
+   :wallet-exchange                       "Exchange"
+   :wallet-assets                         "Assets"
    :transactions                          "Transactions"
    :transactions-to                       "To"
    :transactions-sign                     "Sign"
diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs
index c6ffd3523b..9f6f7ad9ac 100644
--- a/src/status_im/ui/screens/views.cljs
+++ b/src/status_im/ui/screens/views.cljs
@@ -41,7 +41,9 @@
             [status-im.ui.screens.profile.edit.views :refer [edit-my-profile]]
             [status-im.ui.screens.profile.photo-capture.views :refer [profile-photo-capture]]
             [status-im.ui.screens.profile.qr-code.views :refer [qr-code-view]]
+
             [status-im.ui.screens.wallet.send.views :refer [send-transaction]]
+            [status-im.ui.screens.wallet.wallet-list.views :refer [wallet-list-screen]]
             [status-im.ui.screens.wallet.history.views :as wallet-history]))
 
 (defn validate-current-view
@@ -59,6 +61,7 @@
       (let [current-view (validate-current-view view-id signed-up?)]
         (let [component (case current-view
                           :wallet main-tabs
+                          :wallet-list wallet-list-screen
                           :wallet-send-transaction send-transaction
                           :discover main-tabs
                           :discover-search-results discover-search-results
diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs
index 498e760b39..6d38f3b9c2 100644
--- a/src/status_im/ui/screens/wallet/main/styles.cljs
+++ b/src/status_im/ui/screens/wallet/main/styles.cljs
@@ -16,6 +16,9 @@
    :flex-direction :row
    :margin-left    6})
 
+(def toolbar-title-inner-container
+  {:flex-direction :row})
+
 (def toolbar-title-text
   {:color        common/color-white
    :font-size    17
@@ -97,19 +100,10 @@
    :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})
+   :flex-direction :row
+   :align-items    :center})
 
 (def asset-item-value
   {:font-size 16
@@ -119,13 +113,3 @@
   {: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})
diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs
index 061d88c34f..4d7b3eb1c0 100644
--- a/src/status_im/ui/screens/wallet/main/views.cljs
+++ b/src/status_im/ui/screens/wallet/main/views.cljs
@@ -5,12 +5,12 @@
             [status-im.components.common.common :as common]
             [status-im.components.button.view :as btn]
             [status-im.components.drawer.view :as drawer]
+            [status-im.components.list.views :as list]
             [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.config :as config]
-            [status-im.utils.listview :as lw]
             [status-im.utils.platform :as platform]
             [status-im.utils.utils :as utils]
             [status-im.ui.screens.wallet.main.styles :as st]
@@ -20,11 +20,13 @@
   (utils/show-popup "TODO" "Not implemented yet!"))
 
 (defn toolbar-title []
-  [rn/view {:style st/toolbar-title-container}
-   [rn/text {:style st/toolbar-title-text
-             :font  :toolbar-title}
-    "Main Wallet"]
-   [rn/touchable-icon :dropdown_white st/toolbar-title-icon show-not-implemented!]])
+  [rn/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list])
+                           :style st/toolbar-title-container}
+   [rn/view {:style st/toolbar-title-inner-container}
+    [rn/text {:style st/toolbar-title-text
+              :font  :toolbar-title}
+     (i18n/label :t/main-wallet)]
+    [rn/icon :dropdown_white st/toolbar-title-icon]]])
 
 (defn toolbar-buttons []
   [rn/view {:style st/toolbar-buttons-container}
@@ -54,52 +56,33 @@
      [rn/view {:style st/today-variation-container}
       [rn/text {:style st/today-variation} change]]]
     [btn/buttons st/buttons
-     [{:text     "Send"
+     [{:text     (i18n/label :t/wallet-send)
        :on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])
        :disabled? (not config/wallet-wip-enabled?)}
-      {:text     "Request"
+      {:text     (i18n/label :t/wallet-request)
        :on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
        :disabled? (not config/wallet-wip-enabled?)}
-      {:text      "Exchange"
+      {:text      (i18n/label :t/wallet-exchange)
        :disabled? true}]]]])
 
-(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/touchable-icon :forward_gray st/asset-item-details-icon show-not-implemented!]])
+(defn render-asset-fn [{:keys [id currency amount]}]
+  [list/touchable-item show-not-implemented!
+   [rn/view
+    [list/item
+     [list/item-image {:uri :launch_logo}]
+     [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]]
+     [list/item-icon :forward_gray]]]])
 
-(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]]]))
-
-(def assets-example-map
-  {"eth" {:currency :eth :amount 0.445}
-   "snt" {:currency :snt :amount 1}
-   "gno" {:currency :gno :amount 0.024794}})
-
-;; NOTE(oskarth): In development, replace assets with assets-example-map
-;; to check multiple assets being rendered
 (defn asset-section [eth]
-  (let [assets {"eth" {:currency :eth :amount eth}}]
+  (let [assets [{:id "eth" :currency :eth :amount eth}]]
     [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}]]))
+     [rn/text {:style st/asset-section-title} (i18n/label :t/wallet-assets)]
+     [list/flat-list {:data      assets
+                      :render-fn render-asset-fn}]]))
 
 (defn eth-balance [{:keys [balance]}]
   (when balance
diff --git a/src/status_im/ui/screens/wallet/wallet_list/styles.cljs b/src/status_im/ui/screens/wallet/wallet_list/styles.cljs
new file mode 100644
index 0000000000..6a71ff6e91
--- /dev/null
+++ b/src/status_im/ui/screens/wallet/wallet_list/styles.cljs
@@ -0,0 +1,83 @@
+(ns status-im.ui.screens.wallet.wallet-list.styles
+  (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
+  (:require [status-im.components.styles :as st]
+            [status-im.utils.platform :as platform]))
+
+(def screen-container
+  {:flex             1
+   :background-color st/color-white})
+
+(def wallet-colors
+  {:blue-1 "#4360df"
+   :gray-1 "#3c3d4e"})
+
+(def toolbar
+  {:elevation           0
+   :border-bottom-width 1
+   :border-color        st/color-light-gray2})
+
+(def toolbar-icon
+  {:width  24
+   :height 24})
+
+;;;;;;;;;;;;;;;;;
+;; Wallet list ;;
+;;;;;;;;;;;;;;;;;
+
+(def wallet-list-screen
+  {:flex           1
+   :padding        16
+   :padding-bottom 0})
+
+(def wallet-list
+  {:padding-bottom 16})
+
+(def wallet-list-title
+  {:font-size     14
+   :margin-bottom 15
+   :color         st/color-gray4})
+
+;;;;;;;;;;;;;;;
+;; List item ;;
+;;;;;;;;;;;;;;;
+
+(defnstyle wallet-item [color]
+  {:flex             1
+   :flex-direction   :row
+   :align-items      :center
+   :padding          16
+   :background-color (get wallet-colors color)
+   :margin-bottom    12
+   :android          {:border-radius 4
+                      :padding-right 12}
+   :ios              {:border-radius 8
+                      :padding-right 8}})
+
+(def wallet-info
+  {:flex-grow 1})
+
+(def wallet-name
+  {:font-size 14
+   :color     st/color-white})
+
+(def total-balance
+  {:margin-top     5
+   :margin-bottom  5
+   :flex-direction :row})
+
+(def total-balance-value
+  {:font-size 26
+   :color     st/color-white})
+
+(def total-balance-currency
+  (merge total-balance-value {:margin-left 6
+                              :opacity     0.4}))
+
+(def asset-list
+  {:font-size 14
+   :color     st/color-white
+   :opacity   0.6})
+
+(def select-wallet-icon
+  {:height 24
+   :width  24})
diff --git a/src/status_im/ui/screens/wallet/wallet_list/views.cljs b/src/status_im/ui/screens/wallet/wallet_list/views.cljs
new file mode 100644
index 0000000000..970d38e3a9
--- /dev/null
+++ b/src/status_im/ui/screens/wallet/wallet_list/views.cljs
@@ -0,0 +1,64 @@
+(ns status-im.ui.screens.wallet.wallet-list.views
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [clojure.string :as string]
+            [re-frame.core :as rf]
+            [status-im.components.list.views :as list]
+            [status-im.components.react :as rn]
+            [status-im.components.status-bar :as status-bar]
+            [status-im.components.toolbar-new.view :as toolbar]
+            [status-im.components.toolbar-new.actions :as act]
+            [status-im.i18n :as i18n]
+            [status-im.ui.screens.wallet.wallet-list.styles :as st]
+            [status-im.utils.utils :as utils]
+            [status-im.utils.platform :as platform]))
+
+(defn toolbar-actions []
+  [(act/add-wallet #(utils/show-popup "TODO" "Not implemented!"))])
+
+(defn toolbar-view [transactions]
+  [toolbar/toolbar {:style      st/toolbar
+                    :title      (i18n/label :t/wallets)
+                    :nav-action (act/close #(rf/dispatch [:navigate-back]))
+                    :actions    (toolbar-actions)}])
+
+(defn- select-wallet []
+  (utils/show-popup "TODO" "Not implemented!"))
+
+(defn wallet-list-item [{:keys [name currency amount assets color]}]
+  (let [asset-list (string/join "  " assets)]
+    [rn/touchable-highlight {:on-press select-wallet}
+     [rn/view {:style (st/wallet-item (keyword color))}
+      [rn/view {:style st/wallet-info}
+       [rn/text {:style st/wallet-name} name]
+       [rn/view {:style st/total-balance}
+        [rn/text {:style st/total-balance-value} amount]
+        [rn/text {:style st/total-balance-currency} currency]]
+       [rn/text {:style st/asset-list} asset-list]]
+      [rn/icon :forward_gray st/select-wallet-icon]]]))
+
+(def dummy-wallet-data
+  [{:name     "Main wallet"
+    :currency "USD"
+    :amount   12.43
+    :assets   ["SNT" "SGT" "GNO" "ETH"]
+    :color    "blue-1"}
+   {:name     "Other wallet"
+    :currency "ETH"
+    :amount   0.34
+    :assets   ["ETH"]
+    :color    "gray-1"}])
+
+(defn wallet-list []
+  [rn/scroll-view {:style st/wallet-list-screen}
+   [rn/text {:style st/wallet-list-title} (i18n/label :t/your-wallets)]
+   [list/flat-list {:data          dummy-wallet-data
+                    :render-fn     wallet-list-item
+                    :style         st/wallet-list
+                    :scrollEnabled false}]])
+
+(defview wallet-list-screen []
+  []
+  [rn/view {:style st/screen-container}
+   [status-bar/status-bar {:type :main}]
+   [toolbar-view]
+   [wallet-list]])