New screen: Wallets list (ui only)

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"
+  }
+}

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

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))

src/status_im/components/react.cljs

@@ -190,4 +190,4 @@
 
 ;; Emoji
 
-(def emojilib (js/require "emojilib"))
+(def emojilib (js/require "emojilib"))

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})

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"

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

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})

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

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})

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]])