Connected dApps screen with empty state and list of dApps

src/status_im/contexts/wallet/common/account_switcher/view.cljs

@@ -32,8 +32,9 @@
       :accessibility-label accessibility-label
       :networks            networks
       :networks-on-press   #(rf/dispatch [:show-bottom-sheet {:content network-filter/view}])
-      :right-side          [(when (and (ff/enabled? ::ff/wallet.wallet-connect)
-                                       (not watch-only?))
+      :right-side          [(when (or true ;; temp thing
+                                      (and (ff/enabled? ::ff/wallet.wallet-connect)
+                                           (not watch-only?)))
                               {:icon-name :i/dapps
                                :on-press  #(rf/dispatch [:navigate-to :screen/wallet.connected-dapps])})
 

src/status_im/contexts/wallet/connected_dapps/style.cljs

@@ -9,9 +9,17 @@
    :padding-horizontal screen-padding
    :margin-vertical    12})
 
-(defn header-text
-  [bottom-padding?]
-  {:padding-horizontal screen-padding
-   :padding-top        12
-   :padding-bottom     (when bottom-padding? 8)
-   :color              colors/black})
+(def header-title-container
+  {:flex-direction     :row
+   :align-items        :center
+   :padding-horizontal screen-padding
+   :height             56})
+
+(def header-title
+  {:flex  1
+   :color colors/black})
+
+(def empty-container-style
+  {:justify-content :center
+   :flex            1
+   :margin-bottom   44})

src/status_im/contexts/wallet/connected_dapps/view.cljs

@@ -1,29 +1,52 @@
 (ns status-im.contexts.wallet.connected-dapps.view
   (:require
     [quo.core :as quo]
+    [quo.theme :as quo.theme]
     [react-native.core :as rn]
+    [status-im.common.plus-button.view :as plus-button]
+    [status-im.common.resources :as resources]
     [status-im.contexts.wallet.connected-dapps.style :as style]
+    [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
 (defn- header
-  [{:keys [title subtitle]}]
+  [{:keys [title customization-color on-close on-add]}]
   [:<>
    [rn/view {:style style/header-container}
     [quo/button
      {:icon-only?          true
       :type                :grey
       :background          :blur
       :size                32
-      :accessibility-label :close-scan-qr-code
-      :on-press            #(rf/dispatch [:navigate-back])}
+      :accessibility-label :connected-dapps-close
+      :on-press            on-close}
      :i/close]]
-   [quo/text
-    {:size   :heading-1
-     :weight :semi-bold
-     :style  (style/header-text (when subtitle true))}
-    title]])
+   [rn/view {:style style/header-title-container}
+    [quo/text
+     {:size   :heading-1
+      :weight :semi-bold
+      :style  style/header-title}
+     title]
+    [plus-button/plus-button
+     {:on-press            on-add
+      :accessibility-label :connected-dapps-add
+      :customization-color customization-color}]]])
 
 (defn view
   []
-  [rn/view {:style {:flex 1}}
-   [header {:title "Connected dApps"}]])
+  (let [customization-color (rf/sub [:profile/customization-color])
+        theme               (quo.theme/use-theme)
+        dapps-list          []]
+    [rn/view {:style {:flex 1}}
+     [header
+      {:title               (i18n/label :t/connected-dapps)
+       :customization-color customization-color
+       :on-close            #(rf/dispatch [:navigate-back])
+       :on-add              #(js/alert "Feature not implemented.")}]
+     (if (empty? dapps-list)
+       [quo/empty-state
+        {:title           (i18n/label :t/no-dapps)
+         :description     (i18n/label :t/no-dapps-description)
+         :image           (resources/get-themed-image :no-dapps theme)
+         :container-style style/empty-container-style}]
+       [rn/view])]))

translations/en.json

@@ -2395,6 +2395,7 @@
     "keypair-title": "{{name}}'s default key pair",
     "about": "About",
     "no-permissions": "No permissions",
+    "connected-dapps": "Connected dApps",
     "no-dapps": "No connected dApps",
     "days": "Days",
     "add-account": "Add account",