Skip to content

Commit

Permalink
Pressable and dapps list
Browse files Browse the repository at this point in the history
  • Loading branch information
@alwx
alwx committed May 16, 2024
1 parent a3553a3 commit 25d7419
Show file tree
Hide file tree
Showing 6 changed files with 66 additions and 77 deletions.
25 changes: 12 additions & 13 deletions src/quo/components/list_items/dapp/component_spec.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
(ns quo.components.list-items.dapp.component-spec
(:require
[quo.components.list-items.dapp.view :as dapp]
[test-helpers.component :as h]))
[quo.components.list-items.dapp.view :as dapp]
[test-helpers.component :as h]))

(def props
{:dapp {:avatar nil
:name "Coingecko"
:value "coingecko.com"}
:state :default
:action :icon
:blur? false
:customization-color :blue})

(h/describe
"dApp component test"
(h/test "default render"
(h/render [dapp/view props])
(h/is-truthy (h/get-by-text (:name (:dapp props))))
(h/is-truthy (h/get-by-text (:value (:dapp props)))))
(h/test "on-press event"
(let [mock-fn (h/mock-fn)]
(h/render [dapp/view (assoc props :on-press-icon mock-fn)])
(h/fire-event :press (h/get-by-test-id "dapp-component-icon"))
(h/was-called mock-fn))))
"dApp component test"
(h/test "default render"
(h/render [dapp/view props])
(h/is-truthy (h/get-by-text (:name (:dapp props))))
(h/is-truthy (h/get-by-text (:value (:dapp props)))))
(h/test "on-press event"
(let [mock-fn (h/mock-fn)]
(h/render [dapp/view (assoc props :on-press mock-fn)])
(h/fire-event :press (h/get-by-test-id "dapp-pressable"))
(h/was-called mock-fn))))
30 changes: 11 additions & 19 deletions src/quo/components/list_items/dapp/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
(ns quo.components.list-items.dapp.view
(:require
[quo.components.icon :as icons]
[quo.components.list-items.dapp.style :as style]
[quo.components.markdown.text :as text]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]))
[quo.components.list-items.dapp.style :as style]
[quo.components.markdown.text :as text]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]))

(defn view
[{:keys [dapp action on-press on-press-icon] :as props}]
[{:keys [dapp on-press right-component] :as props}]
(let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))]
[rn/pressable
{:style (style/container (assoc props :pressed? pressed?))
:on-press on-press
:testID "dapp-pressable"
:on-press (when on-press
(fn [] (on-press dapp)))
:on-press-in on-press-in
:on-press-out on-press-out}
[rn/view {:style style/container-info}
Expand All @@ -34,13 +34,5 @@
:size :paragraph-2
:style (style/style-text-value theme)}
(:value dapp)]]]
(when (= action :icon)
[rn/pressable
{:on-press on-press-icon
:testID "dapp-component-icon"}
[icons/icon :i/options
{:color (colors/theme-colors
colors/neutral-50
colors/neutral-40
theme)
:accessibility-label :icon}]])]))
(when right-component
[right-component dapp])]))
13 changes: 6 additions & 7 deletions src/status_im/contexts/preview/quo/list_items/dapp.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
(ns status-im.contexts.preview.quo.list-items.dapp
(:require
[quo.core :as quo]
[quo.foundations.resources :as resources]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im.contexts.preview.quo.preview :as preview]))
[quo.core :as quo]
[quo.foundations.resources :as resources]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im.contexts.preview.quo.preview :as preview]))

(def descriptor
[{:key :state
Expand All @@ -28,10 +28,9 @@
:name "Coingecko"
:value "coingecko.com"}
:state :default
:action :icon
:blur? false
:customization-color :blue
:on-press-icon (fn [] (js/alert "Button pressed"))})]
:on-press (fn [{:keys [name]}] (js/alert (str name " got pressed")))})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[rn/view
Expand Down
10 changes: 0 additions & 10 deletions src/status_im/contexts/wallet/connected_dapps/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,6 @@
(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 account-details-text
{:padding-horizontal 6})

(def empty-container-style
{:justify-content :center
:flex 1
Expand Down
59 changes: 34 additions & 25 deletions src/status_im/contexts/wallet/connected_dapps/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
(ns status-im.contexts.wallet.connected-dapps.view
(:require
[quo.components.icon :as icons]
[quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.foundations.resources :as quo.resources]
[quo.theme :as quo.theme]
[react-native.core :as rn]
Expand All @@ -20,18 +22,7 @@
: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]]]))
:customization-color color}]]))

(defn- header
[{:keys [title wallet-account on-close on-add]}]
Expand Down Expand Up @@ -62,14 +53,15 @@
[]
(let [wallet-account (rf/sub [:wallet/current-viewing-account])
theme (quo.theme/use-theme)
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"))}]]
dapps-list [{:avatar (quo.resources/get-dapp :1inch)
:name "1inch"
:value "1inch.com"}
{:avatar (quo.resources/get-dapp :coingecko)
:name "Coingecko"
:value "coingecko.com"}
{:avatar (quo.resources/get-dapp :uniswap)
:name "Uniswap"
:value "uniswap.com"}]]
[rn/view {:flex 1}
[header
{:title (i18n/label :t/connected-dapps)
Expand All @@ -83,8 +75,25 @@
:image (resources/get-themed-image :no-dapps theme)
:container-style style/empty-container-style}]
[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)}]}]])]))
[rn/flat-list
{:data dapps-list
:style (style/dapps-list theme)
:render-fn (fn [item]
[quo/dapp
{:dapp item
:state :default
:action :icon
:blur? false
:customization-color :blue
:on-press (fn [{:keys [name]}] (js/alert (str name " got pressed")))
:right-component (fn [dapp]
[rn/pressable
{:on-press (fn [] (js/alert (str (:name dapp) " right got pressed")))}
[icons/icon :i/disconnect
{:color (colors/theme-colors
colors/neutral-50
colors/neutral-40
theme)
:accessibility-label :icon}]])}])
:separator [rn/view
{:style (style/separator theme)}]}]])]))
6 changes: 3 additions & 3 deletions src/status_im/contexts/wallet/wallet_connect/utils.cljs
View file
Original file line number Diff line number Diff line change
@@ -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/core" :refer [Core]]
["@walletconnect/react-native-compat"]
["@walletconnect/utils" :refer [buildApprovedNamespaces]]
(:require ["@walletconnect/react-native-compat"]
["@walletconnect/core" :refer [Core]]
["@walletconnect/web3wallet" :refer [Web3Wallet]]
["@walletconnect/utils" :refer [buildApprovedNamespaces]]
[status-im.config :as config]
[utils.i18n :as i18n]))

Expand Down

0 comments on commit 25d7419

Please sign in to comment.