Finished title

src/quo/components/text_combinations/standard_title/component_spec.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.text-combinations.standard-title.component-spec
- (:require [quo.components.text-combinations.standard-title.view :as standard-title]
+ (:require [quo.components.markdown.text :as text]
+ [quo.components.text-combinations.standard-title.view :as standard-title]
  [test-helpers.component :as h]))
 
 (h/describe "Text combinations - Standard title"
@@ -48,4 +49,12 @@
  :right :tag
  :on-press on-press-fn}])
  (h/fire-event :on-press (h/get-by-label-text :standard-title-tag))
- (h/was-called-times on-press-fn 1)))))
+ (h/was-called-times on-press-fn 1))))
+
+ (h/describe "Custom content variant"
+ (h/test "Default render"
+ (h/render [standard-title/view
+ {:title "This is a title"
+ :right [text/text "Right"]}])
+ (h/is-truthy (h/get-by-text "This is a title"))
+ (h/is-truthy (h/get-by-text "Right")))))

src/quo/components/text_combinations/standard_title/view.cljs

@@ -66,4 +66,4 @@
  :counter [right-counter props]
  :action [right-action props]
  :tag [right-tag props]
- nil)])
+ right)])

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

@@ -1,6 +1,7 @@
 (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]
@@ -9,40 +10,69 @@
  [utils.i18n :as i18n]
  [utils.re-frame :as rf]))
 
+;; TODO(alwx): move this to quo
+(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]]))
+
 (defn- header
- [{: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 :connected-dapps-close
- :on-press on-close}
- :i/close]]
- [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}]]])
+ [{:keys [title wallet-account on-close on-add]}]
+ (let [{:keys [color]} wallet-account]
+ [:<>
+ [rn/view {:style style/header-container}
+ [quo/button
+ {:icon-only? true
+ :type :grey
+ :background :blur
+ :size 32
+ :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}
+ [quo/standard-title
+ {:title title
+ :accessibility-label :connected-dapps
+ :customization-color color
+ :right [plus-button/plus-button
+ {: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]]]]]))
 
 (defn view
  []
- (let [customization-color (rf/sub [:profile/customization-color])
- theme  (quo.theme/use-theme)
- dapps-list  []]
+ (let [wallet-account (rf/sub [:wallet/current-viewing-account])
+ 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.")}]
+ {:title (i18n/label :t/connected-dapps)
+ :wallet-account wallet-account
+ :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)

src/status_im/contexts/wallet/wallet_connect/utils.cljs

@@ -1,10 +1,10 @@
 (ns status-im.contexts.wallet.wallet-connect.utils
  ;; NOTE: Not sorting namespaces since @walletconnect/react-native-compat should be the first
  #_{:clj-kondo/ignore [:unsorted-required-namespaces]}
- (:require ["@walletconnect/react-native-compat"]
- ["@walletconnect/core" :refer [Core]]
- ["@walletconnect/web3wallet" :refer [Web3Wallet]]
+ (:require ["@walletconnect/core" :refer [Core]]
+ ["@walletconnect/react-native-compat"]
  ["@walletconnect/utils" :refer [buildApprovedNamespaces]]
+ ["@walletconnect/web3wallet" :refer [Web3Wallet]]
  [status-im.config :as config]
  [utils.i18n :as i18n]))