diff --git a/resources/images/ui2/no-activity-dark@2x.png b/resources/images/ui2/no-activity-dark@2x.png new file mode 100644 index 0000000000..c80aefa344 Binary files /dev/null and b/resources/images/ui2/no-activity-dark@2x.png differ diff --git a/resources/images/ui2/no-activity-dark@3x.png b/resources/images/ui2/no-activity-dark@3x.png new file mode 100644 index 0000000000..8db13e6120 Binary files /dev/null and b/resources/images/ui2/no-activity-dark@3x.png differ diff --git a/resources/images/ui2/no-activity-light@2x.png b/resources/images/ui2/no-activity-light@2x.png new file mode 100644 index 0000000000..ae27d4e263 Binary files /dev/null and b/resources/images/ui2/no-activity-light@2x.png differ diff --git a/resources/images/ui2/no-activity-light@3x.png b/resources/images/ui2/no-activity-light@3x.png new file mode 100644 index 0000000000..c95e7d0f24 Binary files /dev/null and b/resources/images/ui2/no-activity-light@3x.png differ diff --git a/resources/images/ui2/no-collectibles-dark@2x.png b/resources/images/ui2/no-collectibles-dark@2x.png new file mode 100644 index 0000000000..71f97c2e3f Binary files /dev/null and b/resources/images/ui2/no-collectibles-dark@2x.png differ diff --git a/resources/images/ui2/no-collectibles-dark@3x.png b/resources/images/ui2/no-collectibles-dark@3x.png new file mode 100644 index 0000000000..a35ff7a6b6 Binary files /dev/null and b/resources/images/ui2/no-collectibles-dark@3x.png differ diff --git a/resources/images/ui2/no-collectibles-light@2x.png b/resources/images/ui2/no-collectibles-light@2x.png new file mode 100644 index 0000000000..e44666513d Binary files /dev/null and b/resources/images/ui2/no-collectibles-light@2x.png differ diff --git a/resources/images/ui2/no-collectibles-light@3x.png b/resources/images/ui2/no-collectibles-light@3x.png new file mode 100644 index 0000000000..a0c9b2e5e7 Binary files /dev/null and b/resources/images/ui2/no-collectibles-light@3x.png differ diff --git a/resources/images/ui2/no-dapps-dark@2x.png b/resources/images/ui2/no-dapps-dark@2x.png new file mode 100644 index 0000000000..48ad9596d7 Binary files /dev/null and b/resources/images/ui2/no-dapps-dark@2x.png differ diff --git a/resources/images/ui2/no-dapps-dark@3x.png b/resources/images/ui2/no-dapps-dark@3x.png new file mode 100644 index 0000000000..744201511e Binary files /dev/null and b/resources/images/ui2/no-dapps-dark@3x.png differ diff --git a/resources/images/ui2/no-dapps-light@2x.png b/resources/images/ui2/no-dapps-light@2x.png new file mode 100644 index 0000000000..d413e62e3f Binary files /dev/null and b/resources/images/ui2/no-dapps-light@2x.png differ diff --git a/resources/images/ui2/no-dapps-light@3x.png b/resources/images/ui2/no-dapps-light@3x.png new file mode 100644 index 0000000000..22f56bfb23 Binary files /dev/null and b/resources/images/ui2/no-dapps-light@3x.png differ diff --git a/resources/images/ui2/no-funds-dark@2x.png b/resources/images/ui2/no-funds-dark@2x.png new file mode 100644 index 0000000000..05f4e807f2 Binary files /dev/null and b/resources/images/ui2/no-funds-dark@2x.png differ diff --git a/resources/images/ui2/no-funds-dark@3x.png b/resources/images/ui2/no-funds-dark@3x.png new file mode 100644 index 0000000000..27c78d0800 Binary files /dev/null and b/resources/images/ui2/no-funds-dark@3x.png differ diff --git a/resources/images/ui2/no-funds-light@2x.png b/resources/images/ui2/no-funds-light@2x.png new file mode 100644 index 0000000000..e89a444cef Binary files /dev/null and b/resources/images/ui2/no-funds-light@2x.png differ diff --git a/resources/images/ui2/no-funds-light@3x.png b/resources/images/ui2/no-funds-light@3x.png new file mode 100644 index 0000000000..cfd4e8b2a4 Binary files /dev/null and b/resources/images/ui2/no-funds-light@3x.png differ diff --git a/resources/images/ui2/no-permissions-dark@2x.png b/resources/images/ui2/no-permissions-dark@2x.png new file mode 100644 index 0000000000..a7360b6d79 Binary files /dev/null and b/resources/images/ui2/no-permissions-dark@2x.png differ diff --git a/resources/images/ui2/no-permissions-dark@3x.png b/resources/images/ui2/no-permissions-dark@3x.png new file mode 100644 index 0000000000..284c7ebea2 Binary files /dev/null and b/resources/images/ui2/no-permissions-dark@3x.png differ diff --git a/resources/images/ui2/no-permissions-light@2x.png b/resources/images/ui2/no-permissions-light@2x.png new file mode 100644 index 0000000000..6ab14ba820 Binary files /dev/null and b/resources/images/ui2/no-permissions-light@2x.png differ diff --git a/resources/images/ui2/no-permissions-light@3x.png b/resources/images/ui2/no-permissions-light@3x.png new file mode 100644 index 0000000000..b393ce7263 Binary files /dev/null and b/resources/images/ui2/no-permissions-light@3x.png differ diff --git a/src/quo/components/graph/wallet_graph/style.cljs b/src/quo/components/graph/wallet_graph/style.cljs index da6657d6b5..e777a79908 100644 --- a/src/quo/components/graph/wallet_graph/style.cljs +++ b/src/quo/components/graph/wallet_graph/style.cljs @@ -19,3 +19,7 @@ :background-color colors/danger-50 :align-items :center :justify-content :center}) + +(def empty-state + {:width 375 + :height 116}) diff --git a/src/quo/components/graph/wallet_graph/view.cljs b/src/quo/components/graph/wallet_graph/view.cljs index bf611e26fd..93758fdc52 100644 --- a/src/quo/components/graph/wallet_graph/view.cljs +++ b/src/quo/components/graph/wallet_graph/view.cljs @@ -2,11 +2,12 @@ (:require [quo.components.graph.utils :as utils] [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 +43,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-themed-image :no-funds theme) + :accessibility-label :illustration}] [rn/view [linear-gradient/linear-gradient {:colors gradient-colors diff --git a/src/quo/foundations/resources.cljs b/src/quo/foundations/resources.cljs index 5c98a3c7e8..fef4dc933e 100644 --- a/src/quo/foundations/resources.cljs +++ b/src/quo/foundations/resources.cljs @@ -7,6 +7,15 @@ :keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png") :bored-ape (js/require "../resources/images/mock2/bored-ape.png")}) +(def ui-themed + {:no-funds + {:light (js/require "../resources/images/ui2/no-funds-light.png") + :dark (js/require "../resources/images/ui2/no-funds-dark.png")}}) + +(defn get-themed-image + [k theme] + (get-in ui-themed [k theme])) + (defn get-image [k] (get ui k)) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 35cb12db76..895bb99e50 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -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") diff --git a/src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs b/src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs index f33c427dff..57f0c6fe8a 100644 --- a/src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs +++ b/src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs @@ -3,11 +3,10 @@ [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] - [utils.i18n :as i18n] - [utils.re-frame :as rf])) + [utils.i18n :as i18n])) (defn dapp-options [] @@ -23,13 +22,12 @@ (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-dapps-description) + :image (resources/get-themed-image :no-dapps theme)}] [rn/view {:style style/dapps-container} [rn/flat-list {:data dapps-list diff --git a/src/status_im2/contexts/wallet/account/tabs/view.cljs b/src/status_im2/contexts/wallet/account/tabs/view.cljs index a70ba5de1c..5a78ddd47f 100644 --- a/src/status_im2/contexts/wallet/account/tabs/view.cljs +++ b/src/status_im2/contexts/wallet/account/tabs/view.cljs @@ -1,6 +1,8 @@ (ns status-im2.contexts.wallet.account.tabs.view (:require + [quo.theme] [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 +12,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 +22,13 @@ :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)) diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index a8bd18312e..458ae5c561 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/src/status_im2/contexts/wallet/account/view.cljs @@ -25,7 +25,6 @@ [{: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} {:id :dapps :label (i18n/label :t/dapps) :accessibility-label :dapps} {:id :about :label (i18n/label :t/about) :accessibility-label :about}]) diff --git a/src/status_im2/contexts/wallet/common/activity_tab/view.cljs b/src/status_im2/contexts/wallet/common/activity_tab/view.cljs index 13f83a0d78..6744d674d4 100644 --- a/src/status_im2/contexts/wallet/common/activity_tab/view.cljs +++ b/src/status_im2/contexts/wallet/common/activity_tab/view.cljs @@ -1,9 +1,10 @@ (ns status-im2.contexts.wallet.common.activity-tab.view (:require [quo.core :as quo] + [quo.theme] [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])) (defn activity-item @@ -14,15 +15,17 @@ (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-themed-image :no-activity theme)}] [rn/flat-list {:data activity-list :style {:flex 1} :render-fn activity-item}]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/common/collectibles_tab/view.cljs b/src/status_im2/contexts/wallet/common/collectibles_tab/view.cljs index 9943f0ad8d..c2e1d3c4b6 100644 --- a/src/status_im2/contexts/wallet/common/collectibles_tab/view.cljs +++ b/src/status_im2/contexts/wallet/common/collectibles_tab/view.cljs @@ -1,19 +1,21 @@ (ns status-im2.contexts.wallet.common.collectibles-tab.view (:require [quo.core :as quo] + [quo.theme] [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-themed-image :no-collectibles 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)) diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index 68d2fbfb1e..b40c110eea 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/src/status_im2/contexts/wallet/home/view.cljs @@ -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 diff --git a/translations/en.json b/translations/en.json index 6c1e723256..ba3c01ee17 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2389,5 +2389,7 @@ "address-placeholder": "0x123abc... or bob.eth", "invalid-address": "It’s not Ethereum address or ENS name", "address-already-in-use": "Address already being used", - "address-copied": "Address copied" + "address-copied": "Address copied", + "no-dapps-description": "We want dApps!" } +