chore(wallet): add images to select address page (#18119)

src/status_im2/common/resources.cljs

@@ -22,44 +22,27 @@
    :onboarding-illustration       (js/require "../resources/images/ui2/onboarding_illustration.png")
    :qr-code                       (js/require "../resources/images/ui2/qr-code.png")
    :keycard-logo                  (js/require "../resources/images/ui2/keycard-logo.png")
-   :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")
    :discover                      (js/require "../resources/images/ui2/discover.png")
    :invite-friends                (js/require "../resources/images/ui2/invite-friends.png")
-   :no-messages-light             (js/require "../resources/images/ui2/no-messages-light.png")
-   :no-messages-dark              (js/require "../resources/images/ui2/no-messages-dark.png")
-   :no-group-chats-light          (js/require "../resources/images/ui2/no-group-chats-light.png")
-   :no-group-chats-dark           (js/require "../resources/images/ui2/no-group-chats-dark.png")
-   :no-contacts-light             (js/require "../resources/images/ui2/no-contacts-light.png")
-   :no-contacts-dark              (js/require "../resources/images/ui2/no-contacts-dark.png")
-   :no-sent-requests-light        (js/require "../resources/images/ui2/no-sent-requests-light.png")
-   :no-sent-requests-dark         (js/require "../resources/images/ui2/no-sent-requests-dark.png")
-   :no-received-requests-light    (js/require "../resources/images/ui2/no-received-requests-light.png")
-   :no-received-requests-dark     (js/require "../resources/images/ui2/no-received-requests-dark.png")
-   :no-communities-light          (js/require "../resources/images/ui2/no-communities-light.png")
-   :no-communities-dark           (js/require "../resources/images/ui2/no-communities-dark.png")
-   :no-pending-communities-light  (js/require "../resources/images/ui2/no-pending-communities-light.png")
-   :no-pending-communities-dark   (js/require "../resources/images/ui2/no-pending-communities-dark.png")
-   :no-opened-communities-light   (js/require "../resources/images/ui2/no-opened-communities-light.png")
-   :no-opened-communities-dark    (js/require "../resources/images/ui2/no-opened-communities-dark.png")
-   :no-contacts-to-invite-light   (js/require "../resources/images/ui2/no-contacts-to-invite-light.png")
-   :no-contacts-to-invite-dark    (js/require "../resources/images/ui2/no-contacts-to-invite-dark.png")
-   :no-notifications-light        (js/require "../resources/images/ui2/no-notifications-light.png")
-   :no-notifications-dark         (js/require "../resources/images/ui2/no-notifications-dark.png")
-   :notifications                 (js/require "../resources/images/ui2/notifications.png")
    :welcome-illustration          (js/require "../resources/images/ui2/welcome_illustration.png")})
 
 (def ui-themed
-  {:no-messages
+  {:angry-man
-   {:light (js/require "../resources/images/ui2/no-messages-light.png")
+   {:light (js/require "../resources/images/ui2/angry-man-light.png")
-    :dark  (js/require "../resources/images/ui2/no-messages-dark.png")}
+    :dark  (js/require "../resources/images/ui2/angry-man-dark.png")}
-   :no-group-chats
+   :cat-in-box
-   {:light (js/require "../resources/images/ui2/no-group-chats-light.png")
+   {:light (js/require "../resources/images/ui2/cat-in-box-light.png")
-    :dark  (js/require "../resources/images/ui2/no-group-chats-dark.png")}
+    :dark  (js/require "../resources/images/ui2/cat-in-box-dark.png")}
    :no-contacts
    {:light (js/require "../resources/images/ui2/no-contacts-light.png")
     :dark  (js/require "../resources/images/ui2/no-contacts-dark.png")}
+   :keycard-chip
+   {:light (js/require "../resources/images/ui2/keycard-chip-light.png")
+    :dark  (js/require "../resources/images/ui2/keycard-chip-dark.png")}
+   :no-group-chats
+   {:light (js/require "../resources/images/ui2/no-group-chats-light.png")
+    :dark  (js/require "../resources/images/ui2/no-group-chats-dark.png")}
    :no-sent-requests
    {:light (js/require "../resources/images/ui2/no-sent-requests-light.png")
     :dark  (js/require "../resources/images/ui2/no-sent-requests-dark.png")}
@@ -92,7 +75,10 @@
     :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")}})
+    :dark  (js/require "../resources/images/ui2/no-permissions-dark.png")}
+   :sweating-man
+   {:light (js/require "../resources/images/ui2/sweating-man-light.png")
+    :dark  (js/require "../resources/images/ui2/sweating-man-dark.png")}})
 
 (def mock-images
   {:bored-ape             (js/require "../resources/images/mock2/bored-ape.png")

src/status_im2/contexts/chat/home/view.cljs

@@ -35,18 +35,15 @@
   #:tab{:contacts
         {:title       (i18n/label :t/no-contacts)
          :description (i18n/label :t/no-contacts-description)
-         :image       (resources/get-image
+         :image       (resources/get-themed-image :no-contacts theme)}
-                       (quo.theme/theme-value :no-contacts-light :no-contacts-dark theme))}
         :groups
         {:title       (i18n/label :t/no-group-chats)
          :description (i18n/label :t/no-group-chats-description)
-         :image       (resources/get-image
+         :image       (resources/get-themed-image :no-group-chats theme)}
-                       (quo.theme/theme-value :no-group-chats-light :no-group-chats-dark theme))}
         :recent
         {:title       (i18n/label :t/no-messages)
          :description (i18n/label :t/no-messages-description)
-         :image       (resources/get-image
+         :image       (resources/get-themed-image :cat-in-box theme)}})
-                       (quo.theme/theme-value :no-messages-light :no-messages-dark theme))}})
 
 (defn chats
   [{:keys [theme selected-tab set-scroll-ref scroll-shared-value]}]

src/status_im2/contexts/communities/home/view.cljs

@@ -49,21 +49,15 @@
                    (i18n/label :t/no-communities-description-strikethrough)]
                   " "
                   (i18n/label :t/no-communities-description)]
-    :image       (resources/get-image (quo.theme/theme-value :no-communities-light
+    :image       (resources/get-themed-image :no-communities theme)}
-                                                             :no-communities-dark
-                                                             theme))}
    :pending
    {:title       (i18n/label :t/no-pending-communities)
     :description (i18n/label :t/no-pending-communities-description)
-    :image       (resources/get-image (quo.theme/theme-value :no-pending-communities-light
+    :image       (resources/get-themed-image :no-pending-communities theme)}
-                                                             :no-pending-communities-dark
-                                                             theme))}
    :opened
    {:title       (i18n/label :t/no-opened-communities)
     :description (i18n/label :t/no-opened-communities-description)
-    :image       (resources/get-image (quo.theme/theme-value :no-opened-communities-light
+    :image       (resources/get-themed-image :no-opened-communities theme)}})
-                                                             :no-opened-communities-dark
-                                                             theme))}})
 
 (def ^:private banner-data
   {:title-props

src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.quo-preview.empty-state.empty-state
   (:require
     [quo.core :as quo]
+    [quo.theme]
     [reagent.core :as reagent]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
@@ -12,10 +13,8 @@
     :type :text}
    {:key     :image
     :type    :select
-    :options [{:key :no-contacts-light}
+    :options [{:key :cat-in-box}
-              {:key :no-contacts-dark}
+              {:key :no-contacts}]}
-              {:key :no-messages-light}
-              {:key :no-messages-dark}]}
    {:key  :upper-button-text
     :type :text}
    {:key  :lower-button-text
@@ -23,9 +22,9 @@
    {:key  :blur?
     :type :boolean}])
 
-(defn view
+(defn view-internal
-  []
+  [{:keys [theme]}]
-  (let [state (reagent/atom {:image             :no-messages-light
+  (let [state (reagent/atom {:image             :no-contacts
                              :title             "A big friendly title"
                              :description       "Some cool description will be here"
                              :blur?             false
@@ -46,4 +45,6 @@
             (assoc :lower-button
                    {:text     (:lower-button-text @state)
                     :on-press #(js/alert "Lower button")})
-            (update :image resources/get-image))]])))
+            (assoc :image (resources/get-themed-image (:image @state) theme)))]])))
+
+(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/shell/activity_center/tabs/empty_tab/view.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.shell.activity-center.tabs.empty-tab.view
   (:require
     [quo.core :as quo]
+    [quo.theme]
     [react-native.core :as rn]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.shell.activity-center.notification-types :as types]
@@ -8,7 +9,7 @@
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(def empty-tab-description
+(def ^:private empty-tab-description
   {types/no-type              (i18n/label :t/empty-notifications-all-tab)
    types/admin                (i18n/label :t/empty-notifications-admin-tab)
    types/mention              (i18n/label :t/empty-notifications-mentions-tab)
@@ -19,13 +20,15 @@
    types/membership           (i18n/label :t/empty-notifications-membership-tab)
    types/system               (i18n/label :t/empty-notifications-system-tab)})
 
-(defn empty-tab
+(defn empty-tab-internal
-  []
+  [{:keys [theme]}]
   (let [filter-type (rf/sub [:activity-center/filter-type])
         description (get empty-tab-description filter-type nil)]
     [rn/view {:style style/empty-container}
      [quo/empty-state
       {:blur?       true
-       :image       (resources/get-image :no-notifications-dark)
+       :image       (resources/get-themed-image :no-notifications theme)
        :title       (i18n/label :t/empty-notifications-title-unread)
        :description description}]]))
+
+(def empty-tab (quo.theme/with-theme empty-tab-internal))

src/status_im2/contexts/wallet/home/style.cljs

@@ -7,9 +7,6 @@
    :padding-top        8
    :padding-bottom     12})
 
-(def accounts-container
-  {:height 112})
-
 (def overview-container
   {:height 86})
 
@@ -21,11 +18,6 @@
 (def accounts-list-container
   {:padding-horizontal 20})
 
-(def empty-container-style
-  {:justify-content :center
-   :flex            1
-   :margin-bottom   44})
-
 (def separator
   {:width 12})
 

src/status_im2/contexts/wallet/home/view.cljs

@@ -3,7 +3,6 @@
     [quo.core :as quo]
     [react-native.core :as rn]
     [reagent.core :as reagent]
-    [status-im.ui.screens.wallet.components.styles :as styles]
     [status-im2.common.home.top-nav.view :as common.top-nav]
     [status-im2.contexts.wallet.common.activity-tab.view :as activity]
     [status-im2.contexts.wallet.common.collectibles-tab.view :as collectibles]
@@ -55,7 +54,7 @@
            :content-container-style           style/accounts-list-container
            :data                              cards
            :horizontal                        true
-           :separator                         [rn/view {:style styles/separator}]
+           :separator                         [rn/view {:style style/separator}]
            :render-fn                         quo/account-card
            :shows-horizontal-scroll-indicator false}]
          [quo/tabs

src/status_im2/contexts/wallet/send/select_address/tabs/view.cljs

@@ -1,7 +1,9 @@
 (ns status-im2.contexts.wallet.send.select-address.tabs.view
   (:require
     [quo.core :as quo]
+    [quo.theme :as quo.theme]
     [react-native.gesture :as gesture]
+    [status-im2.common.resources :as resources]
     [status-im2.contexts.wallet.send.select-address.tabs.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -15,20 +17,14 @@
                      (rf/dispatch [:navigate-to-within-stack
                                    [:wallet-select-asset :wallet-select-address]]))}])
 
-(def data
-  [{:id :tab/recent :label (i18n/label :t/recent) :accessibility-label :recent-tab}
-   {:id :tab/saved :label (i18n/label :t/saved) :accessibility-label :saved-tab}
-   {:id :tab/contacts :label (i18n/label :t/contacts) :accessibility-label :contacts-tab}
-   {:id :tab/my-accounts :label (i18n/label :t/my-accounts) :accessibility-label :my-accounts-tab}])
-
 (defn my-accounts
-  []
+  [theme]
   (let [other-accounts (rf/sub [:wallet/accounts-without-current-viewing-account])]
     (if (zero? (count other-accounts))
       [quo/empty-state
        {:title           (i18n/label :t/no-other-accounts)
         :description     (i18n/label :t/here-is-a-cat-in-a-box-instead)
-        :placeholder?    true
+        :image           (resources/get-themed-image :cat-in-box theme)
         :container-style style/empty-container-style}]
       [gesture/flat-list
        {:data                            other-accounts
@@ -36,22 +32,24 @@
         :content-container-style         style/my-accounts-container
         :shows-vertical-scroll-indicator false}])))
 
-(defn view
+(defn view-internal
-  [selected-tab]
+  [{:keys [selected-tab theme]}]
   (case selected-tab
     :tab/recent      [quo/empty-state
                       {:title           (i18n/label :t/no-recent-transactions)
                        :description     (i18n/label :t/make-one-it-is-easy-we-promise)
-                       :placeholder?    true
+                       :image           (resources/get-themed-image :angry-man theme)
                        :container-style style/empty-container-style}]
     :tab/saved       [quo/empty-state
                       {:title           (i18n/label :t/no-saved-addresses)
                        :description     (i18n/label :t/you-like-to-type-43-characters)
-                       :placeholder?    true
+                       :image           (resources/get-themed-image :sweating-man theme)
                        :container-style style/empty-container-style}]
     :tab/contacts    [quo/empty-state
                       {:title           (i18n/label :t/no-contacts)
                        :description     (i18n/label :t/no-contacts-description)
-                       :placeholder?    true
+                       :image           (resources/get-themed-image :no-contacts theme)
                        :container-style style/empty-container-style}]
-    :tab/my-accounts [my-accounts]))
+    :tab/my-accounts [my-accounts theme]))
+
+(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/send/select_address/view.cljs

@@ -163,7 +163,7 @@
               :scrollable?      true
               :scroll-on-press? true
               :on-change        on-change-tab}]
-            [tabs/view selected-tab]])]))))
+            [tabs/view {:selected-tab selected-tab}]])]))))
 
 (defn view
   []

translations/en.json

@@ -2435,5 +2435,6 @@
     "share-opensea-link": "Share OpenSea link",
     "save-image-to-photos": "Save image to Photos",
     "copy-all-details": "Copy all details",
-    "share-details": "Share details"
+    "share-details": "Share details",
+    "what-are-you-waiting-for": "What are you waiting for?"
 }