Created Wallet main screen

ios/StatusIm/Images.xcassets/icon_dots_white.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_dots_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/icon_dropdown_white.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_dropdown_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/icon_forward_gray.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_forward_gray.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/icon_list_white.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_list_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/icon_qr_white.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_qr_white.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

src/status_im/android/core.cljs

@@ -122,6 +122,7 @@
          (when @view-id
            (let [current-view (validate-current-view @view-id @signed-up?)]
              (let [component (case current-view
+                               :wallet main-tabs
                                :discover main-tabs
                                :discover-search-results discover-search-results
                                :chat-list main-tabs

src/status_im/android/platform.cljs

@@ -22,7 +22,10 @@
                                          :color        styles/color-black}
                            :transaction {:height       0
                                          :bar-style    "light-content"
-                                         :color        styles/color-dark-blue-2}}
+                                         :color        styles/color-dark-blue-2}
+                           :wallet      {:height       0
+                                         :bar-style    "light-content"
+                                         :color        styles/color-blue5}}
    :sized-text            {:margin-top        0
                            :additional-height 0}
    :chat                  {:new-message {:border-top-color styles/color-transparent

src/status_im/components/main_tabs.cljs

@@ -10,6 +10,7 @@
             [status-im.chats-list.screen :refer [chats-list]]
             [status-im.discover.screen :refer [discover]]
             [status-im.contacts.views :refer [contact-groups-list]]
+            [status-im.ui.screens.wallet.main-screen.views :refer [wallet]]
             [status-im.components.tabs.tabs :refer [tabs]]
             [status-im.components.tabs.styles :as st]
             [status-im.components.styles :as common-st]
@@ -34,11 +35,18 @@
     :screen        contact-groups-list
     :icon-inactive :icon_contacts
     :icon-active   :icon_contacts_active
-    :index         2}])
+    :index         2}
+   {:view-id       :wallet
+    :title         "Wallet"
+    :screen        wallet
+    :icon-inactive :icon_contacts
+    :icon-active   :icon_contacts_active
+    :index         3}])
 
 (def tab->index {:chat-list    0
                  :discover     1
-                 :contact-list 2})
+                 :contact-list 2
+                 :wallet       3})
 
 (def index->tab (clojure.set/map-invert tab->index))
 
@@ -98,7 +106,7 @@
        :reagent-render
        (fn []
          [view common-st/flex
-          [status-bar {:type :main}]
+          [status-bar {:type (if (= @view-id :wallet) :wallet :main)}]
           [view common-st/flex
            [drawer-view
             [view {:style common-st/flex}
@@ -110,7 +118,9 @@
                        :on-momentum-scroll-end (on-scroll-end swiped? scroll-ended @view-id)})
               [chats-list]
               [discover (= @view-id :discover)]
-              [contact-groups-list (= @view-id :contact-list)]]
+              [contact-groups-list (= @view-id :contact-list)]
+              ;; [wallet]
+              ]
              [tabs {:selected-view-id @view-id
                     :prev-view-id     @prev-view-id
                     :tab-list         tab-list}]

src/status_im/components/styles.cljs

@@ -4,6 +4,8 @@
 (def color-blue "#7099e6")
 (def color-blue2 "#5b6dee")
 (def color-blue3 "#424fae")
+(def color-blue4 "#4360df")
+(def color-blue5 "#3c56c8")
 (def color-blue-transparent "#7099e632")
 (def color-black "#000000")
 (def color-purple "#a187d5")
@@ -22,6 +24,7 @@
 (def color-light-blue2 "#eff3fc")
 (def color-light-blue3 "#a0bcf0")
 (def color-light-blue4 "#f1f4f5")
+(def color-light-blue5 "#d9dff9")
 (def color-dark-blue-1 "#252c4a")
 (def color-dark-blue-2 "#1f253f")
 (def color-dark-blue-3 "#191f37")
@@ -31,6 +34,8 @@
 (def color-red2 "#d84b4b")
 (def color-light-red "#e86363")
 (def color-light-red2 "#f47979")
+(def color-green-1 "#a8f4d4")
+(def color-green-2 "#448469")
 
 (def color-separator "#D6D6D6")
 

src/status_im/components/tabs/tabs.cljs

@@ -35,6 +35,8 @@
      (let [tabs (into [] tab-list)]
        [[create-tab 0 (nth tabs 0) selected-view-id prev-view-id]
         [create-tab 1 (nth tabs 1) selected-view-id prev-view-id]
-        [create-tab 2 (nth tabs 2) selected-view-id prev-view-id]])
+        [create-tab 2 (nth tabs 2) selected-view-id prev-view-id]
+        ;; WALLET TAB [create-tab 3 (nth tabs 3) selected-view-id prev-view-id]
+        ])
      ;; todo: figure why it doesn't work on iOS release build
      #_(map-indexed #(create-tab %1 %2 selected-view-id prev-view-id) tab-list))])

src/status_im/components/toolbar_new/actions.cljs

@@ -49,3 +49,8 @@
   {:image   {:source {:uri :icon_close_white}
              :style  st/action-default}
    :handler handler})
+
+(defn list-white [handler]
+  {:image   {:source {:uri :icon_list_white}
+             :style  st/action-default}
+   :handler handler})

src/status_im/ios/core.cljs

@@ -92,6 +92,7 @@
          (when @view-id
            (let [current-view (validate-current-view @view-id @signed-up?)]
              (let [component (case current-view
+                               :wallet main-tabs
                                :discover main-tabs
                                :discover-search-results discover-search-results
                                :chat-list main-tabs

src/status_im/ui/screens/wallet/main-screen/styles.cljs

@@ -0,0 +1,159 @@
+(ns status-im.ui.screens.wallet.main-screen.styles
+  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
+  (:require [status-im.components.styles :as common]
+            [status-im.utils.platform :as platform]))
+
+(def wallet-container
+  {:flex             1
+   :background-color common/color-white})
+
+(def toolbar
+  {:background-color common/color-blue5
+   :elevation        0})
+
+(def toolbar-title-container
+  {:flex           1
+   :flex-direction :row
+   :margin-left    6})
+
+(def toolbar-title-text
+  {:color        common/color-white
+   :font-size    17
+   :margin-right 4})
+
+(def toolbar-icon
+  {:width  24
+   :height 24})
+
+(def toolbar-title-icon
+  (merge toolbar-icon {:opacity 0.4}))
+
+(def toolbar-buttons-container
+  {:flex-direction  :row
+   :flex-shrink     1
+   :justify-content :space-between
+   :width           68
+   :margin-right    12})
+
+;;;;;;;;;;;;;;;;;;
+;; Main section ;;
+;;;;;;;;;;;;;;;;;;
+
+(def main-section
+  {:padding          16
+   :background-color common/color-blue4})
+
+(def total-balance-container
+  {:margin-top      18
+   :align-items     :center
+   :justify-content :center})
+
+(def total-balance
+  {:flex-direction :row})
+
+(def total-balance-value
+  {:font-size 37
+   :color     common/color-white})
+
+(def total-balance-currency
+  {:font-size   37
+   :margin-left 9
+   :color       common/color-white
+   :opacity     0.4})
+
+(def value-variation
+  {:flex-direction :row
+   :align-items    :center})
+
+(def value-variation-title
+  {:font-size 14
+   :color     common/color-white
+   :opacity   0.6})
+
+(def today-variation-container
+  {:border-radius      4
+   :margin-left        8
+   :padding-horizontal 8
+   :padding-vertical   4
+   :background-color   common/color-green-1})
+
+(def today-variation
+  {:font-size 12
+   :color     common/color-green-2})
+
+;;;;;;;;;;;;;;;;;;;;
+;; Action buttons ;;
+;;;;;;;;;;;;;;;;;;;;
+
+(def action-buttons-container
+  {:flex-direction   :row
+   :background-color common/color-white-transparent-2
+   :margin-top       34
+   :margin-left      5
+   :margin-right     5
+   :border-radius    4})
+
+(def action-button
+  {:padding-vertical 13
+   :flex-basis       0
+   :flex             1
+   :align-items      :center})
+
+(def action-button-center
+  (merge action-button
+         {:border-color       common/color-white-transparent-2
+          :border-left-width  1
+          :border-right-width 1}))
+
+(def action-button-text
+  {:font-size 13
+   :color     common/color-white})
+
+(def action-button-text-disabled
+  (merge action-button-text {:opacity 0.4}))
+
+;;;;;;;;;;;;;;;;;;;;
+;; Assets section ;;
+;;;;;;;;;;;;;;;;;;;;
+
+(def asset-section
+  {:background-color common/color-white
+   :padding-vertical 16})
+
+(def asset-section-title
+  {:font-size   14
+   :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})
+
+(def asset-item-value
+  {:font-size 16
+   :color     common/color-black})
+
+(def asset-item-currency
+  {: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-screen/views.cljs

@@ -0,0 +1,99 @@
+(ns status-im.ui.screens.wallet.main-screen.views
+  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require [clojure.string :as string]
+            [re-frame.core :as rf]
+            [status-im.components.common.common :as common]
+            [status-im.components.drawer.view :as drawer]
+            [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.listview :as lw]
+            [status-im.utils.platform :as platform]
+            [status-im.ui.screens.wallet.main-screen.styles :as st]))
+
+(defn toolbar-title []
+  [rn/view {:style st/toolbar-title-container}
+   [rn/text {:style st/toolbar-title-text
+             :font  :toolbar-title}
+    "Main Wallet"]
+   [rn/icon :dropdown_white st/toolbar-title-icon]])
+
+(defn toolbar-buttons []
+  [rn/view {:style st/toolbar-buttons-container}
+   [rn/icon :dots_vertical_white st/toolbar-icon]
+   [rn/icon :qr_white st/toolbar-icon]])
+
+(defn toolbar-view []
+  [toolbar/toolbar {:style          st/toolbar
+                    :nav-action     (act/list-white #(rf/dispatch [:navigate-to-modal :unsigned-transactions]))
+                    :custom-content [toolbar-title]
+                    :custom-action  [toolbar-buttons]}])
+
+(defn action-buttons []
+  [rn/view {:style st/action-buttons-container}
+   [rn/view {:style st/action-button}
+    [rn/text {:style      st/action-button-text
+              :font       :medium
+              :uppercase? true} "Send"]]
+   [rn/view {:style st/action-button-center}
+    [rn/text {:style      st/action-button-text
+              :font       :medium
+              :uppercase? true} "Request"]]
+   [rn/view {:style st/action-button}
+    [rn/text {:style      st/action-button-text-disabled
+              :font       :medium
+              :uppercase? true} "Exchange"]]])
+
+(defn main-section []
+  [rn/view {:style st/main-section}
+   [rn/view {:style st/total-balance-container}
+    [rn/view {:style st/total-balance}
+     [rn/text {:style st/total-balance-value} "12.43"]
+     [rn/text {:style st/total-balance-currency} "USD"]]
+    [rn/view {:style st/value-variation}
+     [rn/text {:style st/value-variation-title} "Total value"]
+     [rn/view {:style st/today-variation-container}
+      [rn/text {:style st/today-variation} "+5.43%"]]]
+    [action-buttons]]])
+
+(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/icon :forward_gray st/asset-item-details-icon]])
+
+(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]]]))
+
+(defn asset-section []
+  (let [assets {"eth" {:currency :eth :amount 0.445}
+                "snt" {:currency :snt :amount 1}
+                "gno" {:currency :gno :amount 0.024794}}]
+    [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}]]))
+
+(defview wallet []
+  []
+  [rn/view {:style st/wallet-container}
+   [toolbar-view]
+   [rn/scroll-view
+    [main-section]
+    [asset-section]]])