wallet illustrations

Author: OmarBasem

ios/Podfile.lock

@@ -765,7 +765,7 @@ SPEC CHECKSUMS:
   RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
   RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: 42f56dc5c032a11177b9ea12cdb57285318b432e
+  RNReanimated: 06a228c5a245ef7b5b03f0efc29d76ce4db9031c
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9

resources/images/ui2/[email protected]

@@ -19,3 +19,7 @@
    :background-color colors/danger-50
    :align-items      :center
    :justify-content  :center})
+
+(def empty-state
+  {:width  375
+   :height 116})

resources/images/ui2/[email protected]

@@ -4,9 +4,11 @@
     [quo.components.graph.wallet-graph.style :as style]
     [quo.components.markdown.text :as text]
     [quo.foundations.colors :as colors]
+    [quo.foundations.resources :as resources]
     [quo.theme :as quo.theme]
     [react-native.charts :as charts]
     [react-native.core :as rn]
+    [react-native.fast-image :as fast-image]
     [react-native.linear-gradient :as linear-gradient]))
 
 (defn- time-frame->max-data-points
@@ -42,11 +44,10 @@
         gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)]
         fill-color      (colors/theme-colors colors/white colors/neutral-95)]
     (if (= time-frame :empty)
-      [rn/view
-       {:accessibility-label :illustration
-        :style               style/illustration}
-       [text/text {:style {:color colors/white}}
-        "Illustration here"]]
+      [fast-image/fast-image
+       {:style  style/empty-state
+        :source (resources/get-image
+                  (quo.theme/theme-value :no-funds-light :no-funds-dark theme))}]
       [rn/view
        [linear-gradient/linear-gradient
         {:colors gradient-colors

resources/images/ui2/[email protected]

@@ -5,7 +5,10 @@
    :keycard-chip-light (js/require "../resources/images/ui2/keycard-chip-light.png")
    :keycard-chip-dark  (js/require "../resources/images/ui2/keycard-chip-dark.png")
    :keycard-watermark  (js/require "../resources/images/ui2/keycard-watermark.png")
-   :bored-ape          (js/require "../resources/images/mock2/bored-ape.png")})
+   :bored-ape          (js/require "../resources/images/mock2/bored-ape.png")
+   :no-funds
+   {:light (js/require "../resources/images/ui2/no-funds-light.png")
+    :dark  (js/require "../resources/images/ui2/no-funds-dark.png")}})
 
 (defn get-image
   [k]

resources/images/ui2/[email protected]

@@ -79,7 +79,19 @@
     :dark  (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")}
    :no-notifications
    {:light (js/require "../resources/images/ui2/no-notifications-light.png")
-    :dark  (js/require "../resources/images/ui2/no-notifications-dark.png")}})
+    :dark  (js/require "../resources/images/ui2/no-notifications-dark.png")}
+   :no-activity
+   {:light (js/require "../resources/images/ui2/no-activity-light.png")
+    :dark  (js/require "../resources/images/ui2/no-activity-dark.png")}
+   :no-collectibles
+   {:light (js/require "../resources/images/ui2/no-collectibles-light.png")
+    :dark  (js/require "../resources/images/ui2/no-collectibles-dark.png")}
+   :no-dapps
+   {:light (js/require "../resources/images/ui2/no-dapps-light.png")
+    :dark  (js/require "../resources/images/ui2/no-dapps-dark.png")}
+   :no-permissions
+   {:light (js/require "../resources/images/ui2/no-permissions-light.png")
+    :dark  (js/require "../resources/images/ui2/no-permissions-dark.png")}})
 
 (def mock-images
   {:bored-ape             (js/require "../resources/images/mock2/bored-ape.png")

resources/images/ui2/[email protected]

@@ -3,6 +3,7 @@
     [quo.core :as quo]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
+    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.account.tabs.dapps.style :as style]
     [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab]
     [status-im2.contexts.wallet.common.temp :as temp]
@@ -23,13 +24,13 @@
 
 (defn- view-internal
   [{:keys [theme]}]
-  (let [dapps-list (temp/dapps-list {:on-press-icon #(rf/dispatch [:show-bottom-sheet
-                                                                   {:content dapp-options}])})]
+  (let [dapps-list []]
     (if (empty? dapps-list)
       [empty-tab/view
-       {:title        (i18n/label :t/no-dapps)
-        :description  (i18n/label :t/no-collectibles-description)
-        :placeholder? true}]
+       {:title       (i18n/label :t/no-dapps)
+        :description (i18n/label :t/no-collectibles-description)
+        :image       (resources/get-image
+                       (quo.theme/theme-value :no-dapps-light :no-dapps-dark theme))}]
       [rn/view {:style style/dapps-container}
        [rn/flat-list
         {:data      dapps-list

resources/images/ui2/[email protected]

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.wallet.account.tabs.view
   (:require
     [react-native.core :as rn]
+    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.account.tabs.about.view :as about]
     [status-im2.contexts.wallet.account.tabs.dapps.view :as dapps]
     [status-im2.contexts.wallet.common.activity-tab.view :as activity]
@@ -10,8 +11,8 @@
     [status-im2.contexts.wallet.common.token-value.view :as token-value]
     [utils.i18n :as i18n]))
 
-(defn view
-  [{:keys [selected-tab]}]
+(defn- view-internal
+  [{:keys [selected-tab theme]}]
   (case selected-tab
     :assets       [rn/flat-list
                    {:render-fn               token-value/view
@@ -20,8 +21,11 @@
     :collectibles [collectibles/view]
     :activity     [activity/view]
     :permissions  [empty-tab/view
-                   {:title        (i18n/label :t/no-permissions)
-                    :description  (i18n/label :t/no-collectibles-description)
-                    :placeholder? true}]
+                   {:title       (i18n/label :t/no-permissions)
+                    :description (i18n/label :t/no-collectibles-description)
+                    :image       (resources/get-image
+                                   (quo.theme/theme-value :no-permissions-light :no-permissions-dark theme))}]
     :dapps        [dapps/view]
     [about/view]))
+
+(def view (quo.theme/with-theme view-internal))

resources/images/ui2/[email protected]

@@ -25,7 +25,8 @@
   [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
    {:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}
    {:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab}
-   {:id :permissions :label (i18n/label :t/permissions) :accessibility-label :permissions}
+   ;; Disabled for new wallet MVP
+   ;{:id :permissions :label (i18n/label :t/permissions) :accessibility-label :permissions}
    {:id :dapps :label (i18n/label :t/dapps) :accessibility-label :dapps}
    {:id :about :label (i18n/label :t/about) :accessibility-label :about}])
 

resources/images/ui2/[email protected]

@@ -2,6 +2,7 @@
   (:require
     [quo.core :as quo]
     [react-native.core :as rn]
+    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab]
     [status-im2.contexts.wallet.common.temp :as temp]
     [utils.i18n :as i18n]))
@@ -14,15 +15,18 @@
     (merge {:on-press #(js/alert "Item pressed")}
            item)]])
 
-(defn view
-  []
-  (let [activity-list temp/activity-list]
+(defn- view-internal
+  [{:keys [theme]}]
+  (let [activity-list []]
     (if (empty? activity-list)
       [empty-tab/view
-       {:title        (i18n/label :t/no-activity)
-        :description  (i18n/label :t/empty-tab-description)
-        :placeholder? true}]
+       {:title       (i18n/label :t/no-activity)
+        :description (i18n/label :t/empty-tab-description)
+        :image       (resources/get-image
+                       (quo.theme/theme-value :no-activity-light :no-activity-dark theme))}]
       [rn/flat-list
        {:data      activity-list
         :style     {:flex 1}
         :render-fn activity-item}])))
+
+(def view (quo.theme/with-theme view-internal))

resources/images/ui2/[email protected]

@@ -2,18 +2,20 @@
   (:require
     [quo.core :as quo]
     [react-native.core :as rn]
+    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(defn view
-  []
+(defn- view-internal
+  [{:keys [theme]}]
   (let [collectible-list (rf/sub [:wallet/collectibles])]
     (if (empty? collectible-list)
       [empty-tab/view
-       {:title        (i18n/label :t/no-collectibles)
-        :description  (i18n/label :t/no-collectibles-description)
-        :placeholder? true}]
+       {:title       (i18n/label :t/no-collectibles)
+        :description (i18n/label :t/no-collectibles-description)
+        :image       (resources/get-image
+                       (quo.theme/theme-value :no-collectibles-light :no-collectibles-dark theme))}]
       [rn/flat-list
        {:data                    collectible-list
         :style                   {:flex 1}
@@ -25,3 +27,5 @@
                                      :on-press #(rf/dispatch
                                                  [:navigate-to
                                                   :wallet-collectible])}])}])))
+
+(def view (quo.theme/with-theme view-internal))

resources/images/ui2/[email protected]

@@ -53,10 +53,7 @@
          [common.top-nav/view]
          [rn/view {:style style/overview-container}
           [quo/wallet-overview (temp/wallet-overview-state networks)]]
-         [rn/pressable
-          {:on-long-press #(rf/dispatch [:show-bottom-sheet
-                                         {:content temp/wallet-temporary-navigation}])}
-          [quo/wallet-graph {:time-frame :empty}]]
+         [quo/wallet-graph {:time-frame :empty}]
          [rn/flat-list
           {:style                             style/accounts-list
            :content-container-style           style/accounts-list-container