Updates

status-im · May 16, 2024 · 184da9b · 184da9b
1 parent b186cdd
commit 184da9b
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 54 deletions.
diff --git a/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs b/src/status_im/contexts/wallet/account/tabs/dapps/view.cljs
@@ -1,12 +1,12 @@
 (ns status-im.contexts.wallet.account.tabs.dapps.view
  (:require
-  [quo.core :as quo]
-  [quo.theme :as quo.theme]
-  [react-native.core :as rn]
-  [status-im.common.resources :as resources]
-  [status-im.contexts.wallet.account.tabs.dapps.style :as style]
-  [status-im.contexts.wallet.common.empty-tab.view :as empty-tab]
-  [utils.i18n :as i18n]))
+ [quo.core :as quo]
+ [quo.theme :as quo.theme]
+ [react-native.core :as rn]
+ [status-im.common.resources :as resources]
+ [status-im.contexts.wallet.account.tabs.dapps.style :as style]
+ [status-im.contexts.wallet.common.empty-tab.view :as empty-tab]
+ [utils.i18n :as i18n]))
 
 (defn dapp-options
  []

diff --git a/src/status_im/contexts/wallet/connected_dapps/style.cljs b/src/status_im/contexts/wallet/connected_dapps/style.cljs
@@ -9,17 +9,42 @@
  :padding-horizontal screen-padding
  :margin-vertical 12})
 
-(def header-title-container
- {:flex-direction :row
- :align-items :center
- :padding-horizontal screen-padding
- :height 56})
+(def header-wrapper
+ {:flex-direction :column
+ :height 96
+ :gap 8
+ :padding-horizontal 20
+ :padding-vertical 12})
+
+(def account-details-wrapper
+ {:align-items :flex-start})
+
+(defn account-details-container [theme]
+ {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-60 theme)
+ :padding 2
+ :border-radius 8
+ :flex-direction :row
+ :align-items :center})
 
-(def header-title
- {:flex 1
- :color colors/black})
+(def account-details-text
+ {:padding-horizontal 6})
 
 (def empty-container-style
  {:justify-content :center
  :flex 1
  :margin-bottom 44})
+
+(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)})
diff --git a/src/status_im/contexts/wallet/connected_dapps/view.cljs b/src/status_im/contexts/wallet/connected_dapps/view.cljs
@@ -1,35 +1,37 @@
 (ns status-im.contexts.wallet.connected-dapps.view
  (:require
-  [quo.core :as quo]
-  [quo.foundations.colors :as colors]
-  [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]))
+ [quo.core :as quo]
+ [quo.foundations.resources :as quo.resources]
+ [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]))
 
-;; TODO(alwx): move this to quo
-(defn account-details
+(defn- account-details
  [{:keys [name emoji color]}]
  (let [theme (quo.theme/use-theme)]
- [rn/view
- {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-60 theme)
- :padding 2
- :border-radius 8
- :flex-direction :row
- :align-items :center}
- [quo/account-avatar
- {:customization-color color
- :size 20
- :emoji emoji
- :type :default}]
- [quo/text
- {:weight :medium
- :size :paragraph-2
- :style {:padding-horizontal 6}}
- name]]))
+ [rn/view {:style style/account-details-wrapper}
+ [quo/context-tag
+ {:theme theme
+ :type :account
+ :size 24
+ :account-name name
+ :emoji emoji
+ :customization-color color}]
+ #_[rn/view {:style (style/account-details-container theme)}
+ [quo/account-avatar
+ {:customization-color color
+ :size 20
+ :emoji emoji
+ :type :default}]
+ [quo/text
+ {:weight :medium
+ :size :paragraph-2
+ :style style/account-details-text}
+ name]]]))
 
 (defn- header
  [{:keys [title wallet-account on-close on-add]}]
@@ -44,12 +46,7 @@
  :accessibility-label :connected-dapps-close
  :on-press on-close}
  :i/close]]
- [rn/view
- {:flex-direction :column
- :height 96
- :gap 8
- :padding-horizontal 20
- :padding-vertical 12}
+ [rn/view {:style style/header-wrapper}
  [quo/standard-title
  {:title title
  :accessibility-label :connected-dapps
@@ -58,16 +55,22 @@
  {:on-press on-add
  :accessibility-label :connected-dapps-add
  :customization-color color}]}]
- [rn/view {:style {:flex 1 :flex-direction :column}}
- [rn/view {:align-items :flex-start}
- [account-details wallet-account]]]]]))
+ [rn/view {:flex 1}
+ [account-details wallet-account]]]]))
 
 (defn view
  []
  (let [wallet-account (rf/sub [:wallet/current-viewing-account])
  theme (quo.theme/use-theme)
- dapps-list []]
- [rn/view {:style {:flex 1}}
+ dapps-list [{:dapp {:avatar (quo.resources/get-dapp :coingecko)
+ :name "Coingecko"
+ :value "coingecko.com"}
+ :state :default
+ :action :icon
+ :blur? false
+ :customization-color :blue
+ :on-press-icon (fn [] (js/alert "Button pressed"))}]]
+ [rn/view {:flex 1}
  [header
  {:title (i18n/label :t/connected-dapps)
  :wallet-account wallet-account
@@ -79,4 +82,9 @@
  :description (i18n/label :t/no-dapps-description)
  :image (resources/get-themed-image :no-dapps theme)
  :container-style style/empty-container-style}]
- [rn/view])]))
+ [rn/view 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)}]}]])]))