Wallet: dApps Tab (#17587)

* feat: dapps tab

src/quo2/components/settings/category/reorder/view.cljs

@@ -4,7 +4,6 @@
     [quo2.components.settings.reorder-item.types :as types]
     [quo2.components.settings.reorder-item.view :as reorder-item]
     [quo2.foundations.colors :as colors]
-    [react-native.blur :as blur]
     [react-native.core :as rn]
     [quo2.components.settings.category.style :as style]
     [quo2.theme :as quo.theme]
@@ -20,8 +19,6 @@
   [{:keys [label data blur? theme]}]
   (reagent/with-let [atom-data (reagent/atom data)]
     [rn/view {:style style/container}
-     (when blur?
-       [rn/view (style/blur-container) [blur/view (style/blur-view)]])
      [text/text
       {:weight :medium
        :size   :paragraph-2

src/quo2/components/settings/category/settings/view.cljs

@@ -3,7 +3,6 @@
     [quo2.components.markdown.text :as text]
     [quo2.components.settings.settings-item.view :as settings-item]
     [quo2.foundations.colors :as colors]
-    [react-native.blur :as blur]
     [react-native.core :as rn]
     [quo2.components.settings.category.style :as style]
     [quo2.theme :as quo.theme]))
@@ -11,8 +10,6 @@
 (defn- category-internal
   [{:keys [label data blur? theme]}]
   [rn/view {:style style/container}
-   (when blur?
-     [rn/view (style/blur-container) [blur/view (style/blur-view)]])
    [text/text
     {:weight :medium
      :size   :paragraph-2

src/status_im2/contexts/quo_preview/settings/category.cljs

@@ -1,10 +1,6 @@
 (ns status-im2.contexts.quo-preview.settings.category
   (:require
     [quo2.core :as quo]
-    [quo2.foundations.colors :as colors]
-    [quo2.theme :as theme]
-    [react-native.core :as rn]
-    [react-native.fast-image :as fast-image]
     [reagent.core :as reagent]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
@@ -50,50 +46,26 @@
 
 (defn preview
   []
-  (let [state                  (reagent/atom {:label       "Label"
+  (let [state (reagent/atom {:label       "Label"
-                                              :size        "5"
+                             :size        "5"
-                                              :blur?       false
+                             :blur?       false
-                                              :right-icon? true
+                             :right-icon? true
-                                              :image?      true
+                             :image?      true
-                                              :subtitle?   true
+                             :subtitle?   true
-                                              :list-type   :settings})
+                             :list-type   :settings})]
-        {:keys [width height]} (rn/get-window)]
     (fn []
       (let [data (reagent/atom (create-item-array (max (js/parseInt (:size @state)) 1) @state))]
-        [:f>
+        [preview/preview-container
-         (fn []
+         {:state                 state
-           (rn/use-effect (fn []
+          :descriptor            (if (= (:list-type @state) :settings)
-                            (if (:blur? @state)
+                                   settings-descriptor
-                              (theme/set-theme :dark)
+                                   reorder-descriptor)
-                              (theme/set-theme :light))
+          :blur?                 (:blur? @state)
-                            (reset! data (create-item-array (max (js/parseInt (:size @state)) 1)
+          :show-blur-background? true
-                                                            @state)))
+          :blur-dark-only?       true
-                          [(:blur? @state) (:right-icon? @state) (:image? @state) (:subtitle? @state)])
+          :blur-height           400}
-           [preview/preview-container
+         [quo/category
-            {:state      state
+          {:list-type (:list-type @state)
-             :descriptor (if (= (:list-type @state) :settings) settings-descriptor reorder-descriptor)}
+           :label     (:label @state)
-            [rn/view
+           :data      @data
-             {:style {:flex             1
+           :blur?     (:blur? @state)}]]))))
-                      :padding-bottom   150
-                      :margin-bottom    50
-                      :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}}
-             [rn/view
-              {:style {:min-height 200
-                       :z-index    1}}
-              [preview/customizer state
-               (if (= (:list-type @state) :settings) settings-descriptor reorder-descriptor)]]
-             (when (:blur? @state)
-               [fast-image/fast-image
-                {:source (resources/get-mock-image :dark-blur-bg)
-                 :style  {:width    width
-                          :height   height
-                          :position :absolute}}])
-             [rn/view
-              {:style {:background-color (if (:blur? @state)
-                                           colors/neutral-80-opa-80
-                                           (colors/theme-colors colors/neutral-5 colors/neutral-95))}}
-              [quo/category
-               {:list-type (:list-type @state)
-                :label     (:label @state)
-                :data      @data
-                :blur?     (:blur? @state)}]]]])]))))

src/status_im2/contexts/wallet/account/tabs/dapps/style.cljs

@@ -0,0 +1,18 @@
+(ns status-im2.contexts.wallet.account.tabs.dapps.style
+  (:require
+    [quo2.foundations.colors :as colors]))
+
+(def dapps-container
+  {:padding-horizontal 20
+   :padding-vertical   8})
+
+(defn dapps-list
+  [theme]
+  {:border-radius 16
+   :border-width  1
+   :border-color  (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
+
+(defn separator
+  [theme]
+  {:height           1
+   :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})

src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs

@@ -0,0 +1,39 @@
+(ns status-im2.contexts.wallet.account.tabs.dapps.view
+  (:require [quo2.core :as quo]
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]
+            [utils.i18n :as i18n]
+            [status-im2.contexts.wallet.account.tabs.dapps.style :as style]
+            [status-im2.contexts.wallet.common.temp :as temp]
+            [utils.re-frame :as rf]
+            [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab]))
+
+(defn dapp-options
+  []
+  [quo/action-drawer
+   [[{:icon                :i/browser
+      :accessibility-label :visit-dapp
+      :label               (i18n/label :t/visit-dapp)}
+     {:icon                :i/disconnect
+      :accessibility-label :disconnect-dapp
+      :label               (i18n/label :t/disconnect-dapp)
+      :add-divider?        true
+      :danger?             true}]]])
+
+(defn- view-internal
+  [{:keys [theme]}]
+  (let [dapps-list (temp/dapps-list {:on-press-icon #(rf/dispatch [:show-bottom-sheet
+                                                                   {:content dapp-options}])})]
+    (if (empty? dapps-list)
+      [empty-tab/view
+       {:title        (i18n/label :t/no-dapps)
+        :description  (i18n/label :t/no-collectibles-description)
+        :placeholder? true}]
+      [rn/view {:style style/dapps-container}
+       [rn/flat-list
+        {:data      dapps-list
+         :style     (style/dapps-list theme)
+         :render-fn (fn [item] [quo/dapp item])
+         :separator [rn/view {:style (style/separator theme)}]}]])))
+
+(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/account/tabs/view.cljs

@@ -2,10 +2,11 @@
   (:require
     [quo2.core :as quo]
     [react-native.core :as rn]
-    [status-im2.contexts.wallet.account.tabs.style :as style]
     [status-im2.contexts.wallet.common.temp :as temp]
     [utils.i18n :as i18n]
-    [status-im2.contexts.wallet.account.tabs.about.view :as about]))
+    [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.empty-tab.view :as empty-tab]))
 
 (defn view
   [{:keys [selected-tab]}]
@@ -14,24 +15,19 @@
                    {:render-fn               quo/token-value
                     :data                    temp/tokens
                     :content-container-style {:padding-horizontal 8}}]
-    :collectibles [quo/empty-state
+    :collectibles [empty-tab/view
-                   {:title           (i18n/label :t/no-collectibles)
+                   {:title        (i18n/label :t/no-collectibles)
-                    :description     (i18n/label :t/no-collectibles-description)
+                    :description  (i18n/label :t/no-collectibles-description)
-                    :placeholder?    true
+                    :placeholder? true}]
-                    :container-style style/empty-container-style}]
+    :activity     [empty-tab/view
-    :activity     [quo/empty-state
+                   {:title        (i18n/label :t/no-activity)
-                   {:title           (i18n/label :t/no-activity)
+                    :description  (i18n/label :t/empty-tab-description)
-                    :description     (i18n/label :t/empty-tab-description)
+                    :placeholder? true}]
-                    :placeholder?    true
+    :permissions  [empty-tab/view
-                    :container-style style/empty-container-style}]
+                   {:title        (i18n/label :t/no-permissions)
-    :permissions  [quo/empty-state
+                    :description  (i18n/label :t/no-collectibles-description)
-                   {:title           (i18n/label :t/no-permissions)
+                    :placeholder? true}]
-                    :description     (i18n/label :t/no-collectibles-description)
+    :dapps        [dapps/view]
-                    :placeholder?    true
-                    :container-style style/empty-container-style}]
-    :dapps        [quo/empty-state
-                   {:title           (i18n/label :t/no-dapps)
-                    :description     (i18n/label :t/no-collectibles-description)
-                    :placeholder?    true
-                    :container-style style/empty-container-style}]
     [about/view]))
+
+

src/status_im2/contexts/wallet/common/empty_tab/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im2.contexts.wallet.account.tabs.style)
+(ns status-im2.contexts.wallet.common.empty-tab.style)
 
 (def empty-container-style
   {:justify-content :center

src/status_im2/contexts/wallet/common/empty_tab/view.cljs

@@ -0,0 +1,8 @@
+(ns status-im2.contexts.wallet.common.empty-tab.view
+  (:require [quo2.core :as quo]
+            [status-im2.contexts.wallet.common.empty-tab.style :as style]))
+
+(defn view
+  [props]
+  [quo/empty-state
+   (assoc props :container-style style/empty-container-style)])

src/status_im2/contexts/wallet/common/temp.cljs

@@ -164,3 +164,18 @@
    :derivation-path (string/replace constants/path-default-wallet #"/" " / ")
    :user-name       "Alisher Yakupov"
    :on-press        #(js/alert "pressed")})
+
+(defn dapps-list
+  [{:keys [on-press-icon]}]
+  [{:dapp          {:avatar (quo.resources/get-dapp :coingecko)
+                    :name   "Coingecko"
+                    :value  "coingecko.com"}
+    :state         :default
+    :action        :icon
+    :on-press-icon on-press-icon}
+   {:dapp          {:avatar (quo.resources/get-dapp :uniswap)
+                    :name   "Uniswap"
+                    :value  "uniswap.org"}
+    :state         :default
+    :action        :icon
+    :on-press-icon on-press-icon}])

translations/en.json

@@ -2337,10 +2337,12 @@
     "traits": "Traits",
     "opensea": "OpenSea",
     "mainnet": "Mainnet",
-    "scan-sync-code-placeholder": "cs2:4FH...",
     "view-on-eth": "View on Etherscan",
     "view-on-opt": "View on Optimism Explorer",
     "view-on-arb": "View on Arbiscan",
     "copy-address": "Copy address",
-    "show-address-qr": "Show address QR"
+    "show-address-qr": "Show address QR",
+    "scan-sync-code-placeholder": "cs2:4FH...",
+    "visit-dapp": "Visit dApp",
+    "disconnect-dapp": "Disconnect dApp"
 }