diff --git a/src/quo/components/list_items/account/schema.cljs b/src/quo/components/list_items/account/schema.cljs index 041517c4ac..dd55d91679 100644 --- a/src/quo/components/list_items/account/schema.cljs +++ b/src/quo/components/list_items/account/schema.cljs @@ -27,7 +27,6 @@ [:blur? {:optional true} [:maybe :boolean]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:on-press {:optional true} [:maybe fn?]] - [:theme :schema.common/theme] [:title-icon {:optional true} [:maybe :keyword]] [:account-props [:map diff --git a/src/quo/components/list_items/account/view.cljs b/src/quo/components/list_items/account/view.cljs index b57aa39cd3..1806437619 100644 --- a/src/quo/components/list_items/account/view.cljs +++ b/src/quo/components/list_items/account/view.cljs @@ -9,7 +9,6 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [schema.core :as schema])) (defn- account-view @@ -97,41 +96,40 @@ (colors/resolve-color customization-color theme))}]]) (defn- internal-view - [_] - (let [pressed? (reagent/atom false) - on-press-in #(reset! pressed? true) - on-press-out #(reset! pressed? false)] - (fn [{:keys [type state blur? customization-color on-press] - :or {customization-color :blue - type :default - state :default - blur? false} - :as props}] - [rn/pressable - {:style (style/container - {:state state - :blur? blur? - :customization-color customization-color - :pressed? @pressed?}) - :on-press-in on-press-in - :on-press on-press - :on-press-out on-press-out - :accessibility-label :container} - [account-view props] - [rn/view {:style (when (= type :tag) style/token-tag-container)} - (cond - (#{:balance-neutral :balance-negative :balance-positive} type) - [balance-view props] + [{:keys [type state blur? customization-color on-press] + :or {customization-color :blue + type :default + state :default + blur? false} + :as props}] + (let [theme (quo.theme/use-theme-value) + [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)) + props (assoc props :theme theme)] + [rn/pressable + {:style (style/container + {:state state + :blur? blur? + :customization-color customization-color + :pressed? pressed?}) + :on-press-in on-press-in + :on-press on-press + :on-press-out on-press-out + :accessibility-label :container} + [account-view props] + [rn/view {:style (when (= type :tag) style/token-tag-container)} + (cond + (#{:balance-neutral :balance-negative :balance-positive} type) + [balance-view props] - (= type :tag) - [token-tag props] + (= type :tag) + [token-tag props] - (= type :action) - [options-button props] + (= type :action) + [options-button props] - (and (= type :default) (= state :selected)) - [check-icon props])]]))) + (and (= type :default) (= state :selected)) + [check-icon props])]])) -(def view - (quo.theme/with-theme - (schema/instrument #'internal-view component-schema/?schema))) +(def view (schema/instrument #'internal-view component-schema/?schema)) diff --git a/src/quo/components/list_items/account_list_card/schema.cljs b/src/quo/components/list_items/account_list_card/schema.cljs index 24b5520ddd..9d170e3142 100644 --- a/src/quo/components/list_items/account_list_card/schema.cljs +++ b/src/quo/components/list_items/account_list_card/schema.cljs @@ -5,7 +5,6 @@ [:action {:optional true} [:enum :icon :none]] [:blur? {:optional true} [:maybe :boolean]] [:on-press {:optional true} [:maybe fn?]] - [:theme :schema.common/theme] [:account-props [:map {:closed true} [:type [:enum :default :watch-only]] diff --git a/src/quo/components/list_items/account_list_card/view.cljs b/src/quo/components/list_items/account_list_card/view.cljs index 99b4988ac2..4a8c59111e 100644 --- a/src/quo/components/list_items/account_list_card/view.cljs +++ b/src/quo/components/list_items/account_list_card/view.cljs @@ -9,38 +9,37 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [schema.core :as schema])) (defn- internal-view - [] - (let [state (reagent/atom :default)] - (fn [{:keys [action blur? account-props networks on-press on-options-press theme]}] - [rn/pressable - {:style (style/container {:state @state :blur? blur? :theme theme}) - :on-press-in #(reset! state :pressed) - :on-press-out #(reset! state :default) - :on-press on-press - :accessibility-label :container} - [rn/view {:style style/left-container} - [account-avatar/view account-props] - [rn/view {:style {:margin-left 8}} - [text/text - {:weight :semi-bold - :size :paragraph-2} - (:name account-props)] - [address-text/view - {:networks networks - :address (:address account-props) - :format :short}]]] - (when (= action :icon) - [rn/pressable {:on-press on-options-press} - [icon/icon :i/options - {:color (if blur? - colors/white-opa-70 - (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)) - :accessibility-label :icon}]])]))) + [{:keys [action blur? account-props networks on-press on-options-press]}] + (let [theme (quo.theme/use-theme-value) + [state set-state] (rn/use-state :default) + on-press-in (rn/use-callback #(set-state :pressed)) + on-press-out (rn/use-callback #(set-state :default))] + [rn/pressable + {:style (style/container {:state state :blur? blur? :theme theme}) + :on-press-in on-press-in + :on-press-out on-press-out + :on-press on-press + :accessibility-label :container} + [rn/view {:style style/left-container} + [account-avatar/view account-props] + [rn/view {:style {:margin-left 8}} + [text/text + {:weight :semi-bold + :size :paragraph-2} + (:name account-props)] + [address-text/view + {:networks networks + :address (:address account-props) + :format :short}]]] + (when (= action :icon) + [rn/pressable {:on-press on-options-press} + [icon/icon :i/options + {:color (if blur? + colors/white-opa-70 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)) + :accessibility-label :icon}]])])) -(def view - (quo.theme/with-theme - (schema/instrument #'internal-view component-schema/?schema))) +(def view (schema/instrument #'internal-view component-schema/?schema)) diff --git a/src/quo/components/list_items/address/schema.cljs b/src/quo/components/list_items/address/schema.cljs index a52ce6f66f..611addad25 100644 --- a/src/quo/components/list_items/address/schema.cljs +++ b/src/quo/components/list_items/address/schema.cljs @@ -9,6 +9,5 @@ [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:on-press {:optional true} [:maybe fn?]] [:blur? {:optional true} [:maybe :boolean]] - [:theme :schema.common/theme] [:active-state? {:optional true} [:maybe :boolean]]]] :any]) diff --git a/src/quo/components/list_items/address/view.cljs b/src/quo/components/list_items/address/view.cljs index 9f224f93c6..e04b9f096e 100644 --- a/src/quo/components/list_items/address/view.cljs +++ b/src/quo/components/list_items/address/view.cljs @@ -1,13 +1,12 @@ (ns quo.components.list-items.address.view (:require [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar] - (quo.components.list-items.address.schema :as component-schema) + [quo.components.list-items.address.schema :as component-schema] [quo.components.list-items.address.style :as style] [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [schema.core :as schema] [utils.address :as address])) @@ -39,34 +38,35 @@ (address/get-shortened-key address)]]]]) (defn- internal-view - [] - (let [state (reagent/atom :default) - active? (atom false) - timer (atom nil) - on-press-in (fn [] - (when-not (= @state :selected) - (reset! timer (js/setTimeout #(reset! state :pressed) 100))))] - (fn [{:keys [networks address customization-color on-press active-state? blur? theme] - :or {customization-color :blue}}] - (let [on-press-out (fn [] - (let [new-state (if (or (not active-state?) @active?) :default :active)] - (when @timer (js/clearTimeout @timer)) - (reset! timer nil) - (reset! active? (= new-state :active)) - (reset! state new-state)))] - [rn/pressable - {:style (style/container @state customization-color blur?) - :on-press-in on-press-in - :on-press-out on-press-out - :on-press on-press - :accessibility-label :container} - [left-container - {:theme theme - :networks networks - :address address - :blur? blur?}]])))) - -(def view - (quo.theme/with-theme - (schema/instrument #'internal-view component-schema/?schema))) + [{:keys [networks address customization-color on-press active-state? blur?] + :or {customization-color :blue}}] + (let [theme (quo.theme/use-theme-value) + [state set-state] (rn/use-state :default) + active? (rn/use-ref-atom false) + timer (rn/use-ref-atom nil) + on-press-in (rn/use-callback + (fn [] + (when-not (= state :selected) + (reset! timer (js/setTimeout #(set-state :pressed) 100)))) + [state]) + on-press-out (rn/use-callback + (fn [] + (let [new-state (if (or (not active-state?) @active?) :default :active)] + (when @timer (js/clearTimeout @timer)) + (reset! timer nil) + (reset! active? (= new-state :active)) + (set-state new-state))) + [active-state?])] + [rn/pressable + {:style (style/container state customization-color blur?) + :on-press-in on-press-in + :on-press-out on-press-out + :on-press on-press + :accessibility-label :container} + [left-container + {:theme theme + :networks networks + :address address + :blur? blur?}]])) +(def view (schema/instrument #'internal-view component-schema/?schema)) diff --git a/src/quo/components/list_items/channel/view.cljs b/src/quo/components/list_items/channel/view.cljs index b9e6f8fad9..3269f31eb7 100644 --- a/src/quo/components/list_items/channel/view.cljs +++ b/src/quo/components/list_items/channel/view.cljs @@ -5,11 +5,10 @@ [quo.components.icon :as quo.icons] [quo.components.list-items.channel.style :as style] [quo.components.markdown.text :as quo.text] - [quo.theme :as theme] - [react-native.core :as rn] - [reagent.core :as reagent])) + [quo.theme] + [react-native.core :as rn])) -(defn- view-internal +(defn view "Options: - notification - (nil/:notification/:mention/:mute, default: nil): - :notification - Display a grey dot. @@ -27,38 +26,37 @@ - on-press - (function, default: nil) - Function called when the component is pressed. - on-long-press - (function, default: nil) - Function called when the component is long pressed. - theme - Theme value from with-theme HOC" - [] - (let [pressed? (reagent/atom false)] - (fn [{:keys [notification locked? mentions-count customization-color emoji name on-press - on-long-press theme]}] - [rn/pressable - {:style (style/container @pressed? customization-color theme) - :accessibility-label :channel-list-item - :on-press on-press - :on-long-press on-long-press - :on-press-in #(reset! pressed? true) - :on-press-out #(reset! pressed? false)} - [channel-avatar/view - {:size :size-32 - :locked? locked? - :full-name name - :customization-color customization-color - :emoji emoji}] - [quo.text/text - {:style (style/label notification theme) - :weight :medium - :size :paragraph-1} (str "# " name)] - (when-not locked? - (condp = notification - :mute [quo.icons/icon :i/muted - {:color (style/mute-notification-icon-color theme)}] - :mention [counter/view - {:customization-color customization-color - :container-style (style/counter mentions-count)} - mentions-count] - :notification [quo.icons/icon :i/notification - {:color (style/mute-notification-icon-color theme) - :accessibility-label :unviewed-messages-public}] - nil))]))) - -(def view (theme/with-theme view-internal)) + [{:keys [notification locked? mentions-count customization-color emoji name on-press on-long-press]}] + (let [theme (quo.theme/use-theme-value) + [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 pressed? customization-color theme) + :accessibility-label :channel-list-item + :on-press on-press + :on-long-press on-long-press + :on-press-in on-press-in + :on-press-out on-press-out} + [channel-avatar/view + {:size :size-32 + :locked? locked? + :full-name name + :customization-color customization-color + :emoji emoji}] + [quo.text/text + {:style (style/label notification theme) + :weight :medium + :size :paragraph-1} (str "# " name)] + (when-not locked? + (condp = notification + :mute [quo.icons/icon :i/muted + {:color (style/mute-notification-icon-color theme)}] + :mention [counter/view + {:customization-color customization-color + :container-style (style/counter mentions-count)} + mentions-count] + :notification [quo.icons/icon :i/notification + {:color (style/mute-notification-icon-color theme) + :accessibility-label :unviewed-messages-public}] + nil))])) diff --git a/src/quo/components/list_items/community/view.cljs b/src/quo/components/list_items/community/view.cljs index 9e4ab03e6e..4b0eaf3af8 100644 --- a/src/quo/components/list_items/community/view.cljs +++ b/src/quo/components/list_items/community/view.cljs @@ -7,8 +7,7 @@ [quo.components.markdown.text :as text] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] - [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.core :as rn])) (defn- logo-component [logo] @@ -83,7 +82,7 @@ :style {:margin-left 10}} component]))) -(defn- view-internal +(defn view "Options: :type - :discover/engage/share @@ -116,49 +115,48 @@ :unread-count - number - When the info is :mention, it will be used to show the number of unread mentions. " - [] - (let [pressed? (reagent/atom false)] - (fn [{:keys [members type info tokens locked? title subtitle - logo blur? customization-color - on-press on-long-press on-press-info - container-style unread-count theme]}] - [rn/pressable - {:accessibility-label :container - :on-press-in (fn [] (reset! pressed? true)) - :on-press on-press - :on-long-press on-long-press - :on-press-out (fn [] (reset! pressed? false)) - :style (merge (style/container {:blur? blur? - :customization-color customization-color - :info info - :type type - :pressed? @pressed? - :theme theme}) - container-style)} - [logo-component logo] - [rn/view {:style {:flex 1}} - [title-component - {:blur? blur? - :info info - :theme theme - :title title - :type type}] - (when (and (= type :share) subtitle) - [subtitle-component subtitle blur? theme]) - (when (and members (= type :discover)) - [community-view/community-stats-column - {:type :list-view - :members-count (:members-count members) - :active-count (:active-count members)}])] - [info-component - {:blur? blur? - :customization-color customization-color - :info info - :type type - :locked? locked? - :on-press-info on-press-info - :theme theme - :tokens tokens - :unread-count unread-count}]]))) + [{:keys [members type info tokens locked? title subtitle logo blur? customization-color + on-press on-long-press on-press-info container-style unread-count]}] + (let [theme (quo.theme/use-theme-value) + [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 + {:accessibility-label :container -(def view (quo.theme/with-theme view-internal)) + :on-press on-press + :on-long-press on-long-press + :on-press-in on-press-in + :on-press-out on-press-out + :style (merge (style/container {:blur? blur? + :customization-color customization-color + :info info + :type type + :pressed? pressed? + :theme theme}) + container-style)} + [logo-component logo] + [rn/view {:style {:flex 1}} + [title-component + {:blur? blur? + :info info + :theme theme + :title title + :type type}] + (when (and (= type :share) subtitle) + [subtitle-component subtitle blur? theme]) + (when (and members (= type :discover)) + [community-view/community-stats-column + {:type :list-view + :members-count (:members-count members) + :active-count (:active-count members)}])] + [info-component + {:blur? blur? + :customization-color customization-color + :info info + :type type + :locked? locked? + :on-press-info on-press-info + :theme theme + :tokens tokens + :unread-count unread-count}]])) diff --git a/src/quo/components/list_items/dapp/view.cljs b/src/quo/components/list_items/dapp/view.cljs index 98545b7639..461fc6d2a6 100644 --- a/src/quo/components/list_items/dapp/view.cljs +++ b/src/quo/components/list_items/dapp/view.cljs @@ -6,43 +6,41 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [react-native.fast-image :as fast-image] - [reagent.core :as reagent])) + [react-native.fast-image :as fast-image])) -(defn- view-internal - [] - (let [pressed? (reagent/atom false)] - (fn [{:keys [dapp action on-press on-press-icon theme] :as props}] - [rn/pressable - {:style (style/container (assoc props :pressed? @pressed?)) - :on-press on-press - :on-press-in #(reset! pressed? true) - :on-press-out #(reset! pressed? false)} - [rn/view {:style style/container-info} - [fast-image/fast-image - {:source (:avatar dapp) - :style {:width 32 :height 32}}] - [rn/view {:style style/user-info} - [text/text - {:weight :semi-bold - :size :paragraph-1 - :style (style/style-text-name theme)} - (:name dapp)] - [text/text - {:weight :regular - :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}]])]))) - -(def view - (quo.theme/with-theme view-internal)) +(defn view + [{:keys [dapp action on-press on-press-icon] :as props}] + (let [theme (quo.theme/use-theme-value) + [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 + :on-press-in on-press-in + :on-press-out on-press-out} + [rn/view {:style style/container-info} + [fast-image/fast-image + {:source (:avatar dapp) + :style {:width 32 :height 32}}] + [rn/view {:style style/user-info} + [text/text + {:weight :semi-bold + :size :paragraph-1 + :style (style/style-text-name theme)} + (:name dapp)] + [text/text + {:weight :regular + :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}]])])) diff --git a/src/quo/components/list_items/network_list/view.cljs b/src/quo/components/list_items/network_list/view.cljs index e99535393d..b8331a9bba 100644 --- a/src/quo/components/list_items/network_list/view.cljs +++ b/src/quo/components/list_items/network_list/view.cljs @@ -5,7 +5,6 @@ [quo.components.markdown.text :as text] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [schema.core :as schema])) (defn- info @@ -22,18 +21,19 @@ (if (string/blank? label) "-" label)]]]) (defn- values - [{:keys [token-value fiat-value theme]}] - [rn/view {:style style/values-container} - [text/text - {:weight :medium - :size :paragraph-2 - :number-of-lines 1} - token-value] - [text/text - {:style (style/fiat-value theme) - :size :paragraph-2 - :number-of-lines 1} - fiat-value]]) + [{:keys [token-value fiat-value]}] + (let [theme (quo.theme/use-theme-value)] + [rn/view {:style style/values-container} + [text/text + {:weight :medium + :size :paragraph-2 + :number-of-lines 1} + token-value] + [text/text + {:style (style/fiat-value theme) + :size :paragraph-2 + :number-of-lines 1} + fiat-value]])) (def ?schema [:=> @@ -51,26 +51,21 @@ :any]) (defn- view-internal - [] - (let [pressed? (reagent/atom false) - on-press-in #(reset! pressed? true) - on-press-out #(reset! pressed? false)] - (fn [{:keys [on-press state customization-color theme] - :as props - :or {customization-color :blue}}] - (let [internal-state (if @pressed? - :pressed - state)] + [{:keys [on-press state customization-color] + :as props + :or {customization-color :blue}}] + (let [theme (quo.theme/use-theme-value) + [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)) + internal-state (if pressed? :pressed state)] + [rn/pressable + {:style (style/container internal-state customization-color theme) + :on-press-in on-press-in + :on-press-out on-press-out + :on-press on-press + :accessibility-label :network-list} + [info props] + [values props]])) - [rn/pressable - {:style (style/container internal-state customization-color theme) - :on-press-in on-press-in - :on-press-out on-press-out - :on-press on-press - :accessibility-label :network-list} - [info props] - [values props]])))) - -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal ?schema))) +(def view (schema/instrument #'view-internal ?schema)) diff --git a/src/quo/components/list_items/saved_address/view.cljs b/src/quo/components/list_items/saved_address/view.cljs index 4f4a2a0aaf..8fa19652ed 100644 --- a/src/quo/components/list_items/saved_address/view.cljs +++ b/src/quo/components/list_items/saved_address/view.cljs @@ -7,70 +7,69 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [utils.address :as address])) (defn- left-container - [{:keys [blur? theme name ens address customization-color]}] - [rn/view {:style style/left-container} - [wallet-user-avatar/wallet-user-avatar - {:size :size-32 - :full-name name - :customization-color customization-color}] - [rn/view {:style style/account-container} - [text/text - {:weight :semi-bold - :size :paragraph-1 - :style style/name-text} - name] - [text/text {:size :paragraph-2} - [text/text - {:size :paragraph-2 - :weight :monospace - :style (style/account-address blur? theme)} - (or ens (address/get-shortened-key address))]]]]) + [{:keys [blur? name ens address customization-color]}] + (let [theme (quo.theme/use-theme-value)] + [rn/view {:style style/left-container} + [wallet-user-avatar/wallet-user-avatar + {:size :size-32 + :full-name name + :customization-color customization-color}] + [rn/view {:style style/account-container} + [text/text + {:weight :semi-bold + :size :paragraph-1 + :style style/name-text} + name] + [text/text {:size :paragraph-2} + [text/text + {:size :paragraph-2 + :weight :monospace + :style (style/account-address blur? theme)} + (or ens (address/get-shortened-key address))]]]])) -(defn- internal-view - [] - (let [state (reagent/atom :default) - active? (atom false) - timer (atom nil) - on-press-in (fn [] - (when-not (= @state :selected) - (reset! timer (js/setTimeout #(reset! state :pressed) 100))))] - (fn [{:keys [blur? user-props active-state? customization-color - on-press - on-options-press - theme] - :or {customization-color :blue - blur? false}}] - (let [on-press-out (fn [] - (let [new-state (if (or (not active-state?) @active?) :default :active)] - (when @timer (js/clearTimeout @timer)) - (reset! timer nil) - (reset! active? (= new-state :active)) - (reset! state new-state)))] - [rn/pressable - {:style (style/container - {:state @state :blur? blur? :customization-color customization-color}) - :on-press-in on-press-in - :on-press-out on-press-out - :on-press on-press - :accessibility-label :container} - [left-container - {:blur? blur? - :theme theme - :name (:name user-props) - :ens (:ens user-props) - :address (:address user-props) - :customization-color (or (:customization-color user-props) :blue)}] - (when on-options-press - [rn/pressable - {:accessibility-label :options-button - :on-press on-options-press} - [icon/icon :i/options - {:color (if blur? - colors/white-opa-70 - (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])])))) - -(def view (quo.theme/with-theme internal-view)) +(defn view + [{:keys [blur? user-props active-state? customization-color on-press on-options-press] + :or {customization-color :blue + blur? false}}] + (let [theme (quo.theme/use-theme-value) + [state set-state] (rn/use-state :default) + active? (rn/use-ref-atom false) + timer (rn/use-ref-atom nil) + on-press-in (rn/use-callback + (fn [] + (when-not (= state :selected) + (reset! timer (js/setTimeout #(set-state :pressed) 100)))) + [state]) + on-press-out (rn/use-callback + (fn [] + (let [new-state (if (or (not active-state?) @active?) :default :active)] + (when @timer (js/clearTimeout @timer)) + (reset! timer nil) + (reset! active? (= new-state :active)) + (set-state new-state))) + [active-state?])] + [rn/pressable + {:style (style/container + {:state state :blur? blur? :customization-color customization-color}) + :on-press-in on-press-in + :on-press-out on-press-out + :on-press on-press + :accessibility-label :container} + [left-container + {:blur? blur? + :theme theme + :name (:name user-props) + :ens (:ens user-props) + :address (:address user-props) + :customization-color (or (:customization-color user-props) :blue)}] + (when on-options-press + [rn/pressable + {:accessibility-label :options-button + :on-press on-options-press} + [icon/icon :i/options + {:color (if blur? + colors/white-opa-70 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])])) diff --git a/src/quo/components/list_items/saved_contact_address/schema.cljs b/src/quo/components/list_items/saved_contact_address/schema.cljs index 27d7785e57..532039accd 100644 --- a/src/quo/components/list_items/saved_contact_address/schema.cljs +++ b/src/quo/components/list_items/saved_contact_address/schema.cljs @@ -23,7 +23,6 @@ [:contact-props ?contact] [:accounts {:optional true} ?accounts] [:on-press {:optional true} [:maybe fn?]] - [:theme :schema.common/theme] [:active-state? {:optional true} [:maybe :boolean]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]] :any]) diff --git a/src/quo/components/list_items/saved_contact_address/view.cljs b/src/quo/components/list_items/saved_contact_address/view.cljs index 16c96f00f9..dfe9bd3d38 100644 --- a/src/quo/components/list_items/saved_contact_address/view.cljs +++ b/src/quo/components/list_items/saved_contact_address/view.cljs @@ -9,91 +9,89 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [schema.core :as schema] [utils.address :as address] [utils.i18n :as i18n])) (defn- account - [{:keys [emoji name address customization-color theme]}] - [rn/view - {:accessibility-label :account-container - :style style/account-container} - [account-avatar/view - {:emoji emoji - :size 16 - :customization-color customization-color}] - [text/text - {:size :paragraph-2 - :weight :monospace - :style (style/account-name theme)} - name] - [rn/view {:style (style/dot-divider theme)}] - [text/text - {:size :paragraph-2 - :weight :monospace - :style (style/account-address theme)} - (address/get-shortened-key address)]]) + [{:keys [emoji name address customization-color]}] + (let [theme (quo.theme/use-theme-value)] + [rn/view + {:accessibility-label :account-container + :style style/account-container} + [account-avatar/view + {:emoji emoji + :size 16 + :customization-color customization-color}] + [text/text + {:size :paragraph-2 + :weight :monospace + :style (style/account-name theme)} + name] + [rn/view {:style (style/dot-divider theme)}] + [text/text + {:size :paragraph-2 + :weight :monospace + :style (style/account-address theme)} + (address/get-shortened-key address)]])) (defn- internal-view - [] - (let [state (reagent/atom :default) - active? (atom false) - timer (atom nil) - on-press-in (fn [] - (when-not (= @state :selected) - (reset! timer (js/setTimeout #(reset! state :pressed) 100))))] - (fn [{:keys [contact-props accounts active-state? customization-color on-press theme] - :or {customization-color :blue - accounts [] - active-state? true}}] - (let [accounts-count (count accounts) - account-props (when (= accounts-count 1) - (first accounts)) - on-press-out (fn [] + [{:keys [contact-props accounts active-state? customization-color on-press] + :or {customization-color :blue + accounts [] + active-state? true}}] + (let [theme (quo.theme/use-theme-value) + [state set-state] (rn/use-state :default) + active? (rn/use-ref-atom false) + timer (rn/use-ref-atom nil) + on-press (rn/use-callback #(when on-press (on-press))) + on-press-in (rn/use-callback + (fn [] + (when-not (= state :selected) + (reset! timer (js/setTimeout #(set-state :pressed) 100)))) + [state]) + accounts-count (count accounts) + account-props (when (= accounts-count 1) (first accounts)) + on-press-out (rn/use-callback + (fn [] (let [new-state (if (or (not active-state?) @active?) :default :active)] (when @timer (js/clearTimeout @timer)) (reset! timer nil) (reset! active? (= new-state :active)) - (reset! state new-state)))] - [rn/pressable - {:style (style/container - {:state @state :customization-color customization-color}) - :on-press-in on-press-in - :on-press-out on-press-out - :on-press #(when on-press - (on-press)) - :accessibility-label :container} - [rn/view {:style style/left-container} - [user-avatar/user-avatar (assoc contact-props :size :small)] - [rn/view {:style style/saved-contact-container} - [rn/view - {:style style/account-title-container} - [text/text - {:weight :semi-bold - :size :paragraph-1} - (:full-name contact-props)] - [icon/icon :i/contact - {:container-style style/contact-icon-container - :accessibility-label :contact-icon - :size 12 - :color (colors/theme-colors colors/primary-50 colors/primary-60 theme) - :color-2 colors/white}]] - (if account-props - [account (assoc account-props :theme theme)] - [text/text - {:accessibility-label :accounts-count - :size :paragraph-2 - :style (style/accounts-count theme)} - (i18n/label :t/accounts-count {:count accounts-count})])]] - (when (> accounts-count 1) - [icon/icon :i/chevron-right - {:accessibility-label :check-icon - :size 20 - :color (colors/theme-colors colors/neutral-50 - colors/neutral-40 - theme)}])])))) + (set-state new-state))) + [active-state?])] + [rn/pressable + {:style (style/container {:state state :customization-color customization-color}) + :on-press-in on-press-in + :on-press-out on-press-out + :on-press on-press + :accessibility-label :container} + [rn/view {:style style/left-container} + [user-avatar/user-avatar (assoc contact-props :size :small)] + [rn/view {:style style/saved-contact-container} + [rn/view + {:style style/account-title-container} + [text/text + {:weight :semi-bold + :size :paragraph-1} + (:full-name contact-props)] + [icon/icon :i/contact + {:container-style style/contact-icon-container + :accessibility-label :contact-icon + :size 12 + :color (colors/theme-colors colors/primary-50 colors/primary-60 theme) + :color-2 colors/white}]] + (if account-props + [account (assoc account-props :theme theme)] + [text/text + {:accessibility-label :accounts-count + :size :paragraph-2 + :style (style/accounts-count theme)} + (i18n/label :t/accounts-count {:count accounts-count})])]] + (when (> accounts-count 1) + [icon/icon :i/chevron-right + {:accessibility-label :check-icon + :size 20 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])])) -(def view - (quo.theme/with-theme - (schema/instrument #'internal-view component-schema/?schema))) +(def view (schema/instrument #'internal-view component-schema/?schema)) diff --git a/src/quo/components/list_items/token_network/schema.cljs b/src/quo/components/list_items/token_network/schema.cljs index 26d3c7b71f..15c69659cc 100644 --- a/src/quo/components/list_items/token_network/schema.cljs +++ b/src/quo/components/list_items/token_network/schema.cljs @@ -11,6 +11,5 @@ [:networks [:* [:map [:source :schema.common/image-source]]]] [:on-press {:optional true} [:maybe fn?]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] - [:state {:optional true} [:enum :default :active :selected]] - [:theme :schema.common/theme]]] + [:state {:optional true} [:enum :default :active :selected]]]] :any]) diff --git a/src/quo/components/list_items/token_network/view.cljs b/src/quo/components/list_items/token_network/view.cljs index 2c4f5f0e8f..862606dc17 100644 --- a/src/quo/components/list_items/token_network/view.cljs +++ b/src/quo/components/list_items/token_network/view.cljs @@ -8,7 +8,6 @@ [quo.components.utilities.token.view :as token] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [schema.core :as schema])) (defn- info @@ -31,44 +30,40 @@ networks]]]) (defn- values - [{:keys [state token-value fiat-value customization-color theme]}] - (if (= state :selected) - [icon/icon :i/check - {:color (style/check-color customization-color theme) - :accessibility-label :check-icon}] - [rn/view {:style style/values-container} - [text/text - {:weight :medium - :size :paragraph-2 - :number-of-lines 1} - token-value] - [text/text - {:style (style/fiat-value theme) - :size :paragraph-2 - :number-of-lines 1} - fiat-value]])) + [{:keys [state token-value fiat-value customization-color]}] + (let [theme (quo.theme/use-theme-value)] + (if (= state :selected) + [icon/icon :i/check + {:color (style/check-color customization-color theme) + :accessibility-label :check-icon}] + [rn/view {:style style/values-container} + [text/text + {:weight :medium + :size :paragraph-2 + :number-of-lines 1} + token-value] + [text/text + {:style (style/fiat-value theme) + :size :paragraph-2 + :number-of-lines 1} + fiat-value]]))) (defn- view-internal - [] - (let [pressed? (reagent/atom false) - on-press-in #(reset! pressed? true) - on-press-out #(reset! pressed? false)] - (fn [{:keys [on-press state customization-color - _token _networks _token-value _fiat-value theme] - :as props - :or {customization-color :blue}}] - (let [internal-state (if @pressed? - :pressed - state)] - [rn/pressable - {:style (style/container internal-state customization-color theme) - :on-press-in on-press-in - :on-press-out on-press-out - :on-press on-press - :accessibility-label :token-network} - [info props] - [values props]])))) + [{:keys [on-press state customization-color _token _networks _token-value _fiat-value] + :as props + :or {customization-color :blue}}] + (let [theme (quo.theme/use-theme-value) + [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)) + internal-state (if pressed? :pressed state)] + [rn/pressable + {:style (style/container internal-state customization-color theme) + :on-press-in on-press-in + :on-press-out on-press-out + :on-press on-press + :accessibility-label :token-network} + [info props] + [values props]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/quo/components/list_items/token_value/schema.cljs b/src/quo/components/list_items/token_value/schema.cljs index bba8c1424c..bbc55b3cf1 100644 --- a/src/quo/components/list_items/token_value/schema.cljs +++ b/src/quo/components/list_items/token_value/schema.cljs @@ -17,7 +17,6 @@ [:values ?values] [:on-press {:optional true} [:maybe fn?]] [:on-long-press {:optional true} [:maybe fn?]] - [:theme :schema.common/theme] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:metrics? {:optional true} [:maybe :boolean]]]] :any]) diff --git a/src/quo/components/list_items/token_value/view.cljs b/src/quo/components/list_items/token_value/view.cljs index 00f5e66e62..4f22380a00 100644 --- a/src/quo/components/list_items/token_value/view.cljs +++ b/src/quo/components/list_items/token_value/view.cljs @@ -9,64 +9,67 @@ [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [schema.core :as schema])) (defn- internal-view - [] - (let [state (reagent/atom :default)] - (fn [{:keys [theme customization-color status token metrics? values on-press on-long-press - token-name]}] - (let [bg-opacity (case @state - :active 10 - :pressed 5 - 0) - {:keys [crypto-value fiat-value percentage-change fiat-change]} values] - [rn/pressable - {:style (style/container customization-color bg-opacity theme) - :on-press-in #(reset! state :pressed) - :on-press-out #(reset! state :default) - :on-press (fn [] - (reset! state :active) - (js/setTimeout #(reset! state :default) 300) - on-press) - :on-long-press on-long-press - :accessibility-label :container} - [rn/view - {:style {:flex-direction :row - :align-items :center - :flex 1}} - [token/view {:token token :size :size-32}] - [rn/view {:style {:margin-left 8}} - [text/text {:weight :semi-bold} token-name] - [text/text - {:size :paragraph-2 - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} - (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]] - [rn/view - {:style {:align-items :flex-end - :justify-content :space-between}} - [text/text - {:weight :medium - :size :paragraph-2} fiat-value] - (when metrics? - [rn/view - {:style {:flex-direction :row - :align-items :center}} - [text/text - {:size :paragraph-2 - :style (style/metric-text status theme)} (str percentage-change "%")] - [rn/view {:style (style/dot-divider status theme)}] - [text/text - {:size :paragraph-2 - :style (style/metric-text status theme)} fiat-change] - (when (not= status :empty) - [rn/view - {:style {:margin-left 4} - :accessibility-label :arrow-icon} - [icon/icon (if (= status :positive) :i/positive :i/negative) - (style/arrow-icon status theme)]])])]])))) + [{:keys [customization-color status token metrics? values on-press on-long-press token-name]}] + (let [theme (quo.theme/use-theme-value) + [state set-state] (rn/use-state :default) + bg-opacity (case state + :active 10 + :pressed 5 + 0) + {:keys [crypto-value + fiat-value + percentage-change + fiat-change]} values + on-press-in (rn/use-callback #(set-state :pressed)) + on-press-out (rn/use-callback #(set-state :default)) + on-press (rn/use-callback + (fn [] + (set-state :active) + (js/setTimeout #(set-state :default) 300) + on-press))] + [rn/pressable + {:style (style/container customization-color bg-opacity theme) + :on-press-in on-press-in + :on-press-out on-press-out + :on-press on-press + :on-long-press on-long-press + :accessibility-label :container} + [rn/view + {:style {:flex-direction :row + :align-items :center + :flex 1}} + [token/view {:token token :size :size-32}] + [rn/view {:style {:margin-left 8}} + [text/text {:weight :semi-bold} token-name] + [text/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]] + [rn/view + {:style {:align-items :flex-end + :justify-content :space-between}} + [text/text + {:weight :medium + :size :paragraph-2} fiat-value] + (when metrics? + [rn/view + {:style {:flex-direction :row + :align-items :center}} + [text/text + {:size :paragraph-2 + :style (style/metric-text status theme)} (str percentage-change "%")] + [rn/view {:style (style/dot-divider status theme)}] + [text/text + {:size :paragraph-2 + :style (style/metric-text status theme)} fiat-change] + (when (not= status :empty) + [rn/view + {:style {:margin-left 4} + :accessibility-label :arrow-icon} + [icon/icon (if (= status :positive) :i/positive :i/negative) + (style/arrow-icon status theme)]])])]])) -(def view - (quo.theme/with-theme - (schema/instrument #'internal-view component-schema/?schema))) +(def view (schema/instrument #'internal-view component-schema/?schema))