From e6b346ca32cb9c425d560f34cc0d62fdbc06ee82 Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Fri, 12 Apr 2024 15:46:17 +0200 Subject: [PATCH] migrate reagent part 7 (#19316) --- .../wallet/account_card/schema.cljs | 1 - .../components/wallet/account_card/view.cljs | 163 +++++---- .../wallet/amount_input/schema.cljs | 4 +- .../components/wallet/amount_input/view.cljs | 55 ++- src/quo/components/wallet/keypair/view.cljs | 9 +- .../wallet/network_routing/schema.cljs | 3 +- .../wallet/network_routing/style.cljs | 4 +- .../wallet/network_routing/view.cljs | 312 ++++++++++-------- .../components/wallet/token_input/schema.cljs | 3 +- .../components/wallet/token_input/view.cljs | 72 ++-- .../wallet/wallet_activity/schema.cljs | 1 - .../wallet/wallet_activity/view.cljs | 69 ++-- 12 files changed, 354 insertions(+), 342 deletions(-) diff --git a/src/quo/components/wallet/account_card/schema.cljs b/src/quo/components/wallet/account_card/schema.cljs index 78b3db97c4..996665206d 100644 --- a/src/quo/components/wallet/account_card/schema.cljs +++ b/src/quo/components/wallet/account_card/schema.cljs @@ -4,7 +4,6 @@ [:map [:type {:optional true} [:enum :default :watch-only :add-account :empty :missing-keypair]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] - [:theme :schema.common/theme] [:metrics? {:optional true} [:maybe :boolean]] [:on-press {:optional true} [:maybe fn?]]]) diff --git a/src/quo/components/wallet/account_card/view.cljs b/src/quo/components/wallet/account_card/view.cljs index d6283590cf..c148d1e291 100644 --- a/src/quo/components/wallet/account_card/view.cljs +++ b/src/quo/components/wallet/account_card/view.cljs @@ -11,7 +11,6 @@ [quo.theme :as quo.theme] [react-native.core :as rn] [react-native.linear-gradient :as linear-gradient] - [reagent.core :as reagent] [schema.core :as schema])) (defn- loading-view @@ -96,87 +95,87 @@ :end {:x 1 :y 0}}]) (defn- user-account - [_] - (let [pressed? (reagent/atom false) - on-press-in #(reset! pressed? true) - on-press-out #(reset! pressed? false)] - (fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics? - theme on-press]}] - (let [watch-only? (= :watch-only type) - missing-keypair? (= :missing-keypair type)] - (if loading? - [loading-view - {:customization-color customization-color - :type type - :theme theme - :metrics? metrics?}] - [rn/pressable - {:on-press-in on-press-in - :on-press-out on-press-out - :style (style/card {:customization-color customization-color - :type type - :theme theme - :pressed? @pressed? - :metrics? metrics?}) - :on-press on-press} - (when (and customization-color (and (not watch-only?) (not missing-keypair?))) - [customization-colors/overlay - {:customization-color customization-color - :border-radius 16 - :theme theme - :pressed? @pressed?}]) - [rn/view {:style style/profile-container} - [rn/view {:style {:padding-bottom 2 :margin-right 2}} - [text/text {:style style/emoji} emoji]] - [rn/view {:style style/watch-only-container} - [text/text - {:size :paragraph-2 - :weight :medium - :number-of-lines 1 - :max-width 110 - :margin-right 4 - :ellipis-mode :tail - :style (style/account-name type theme)} - name] - (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}]) - (when missing-keypair? - [icon/icon :i/alert {:color (properties/alert-icon-color theme) :size 12}])]] - [text/text - {:size :heading-2 - :weight :semi-bold - :style (style/account-value type theme)} - balance] - (when metrics? - [rn/view {:style style/metrics-container} - [metrics-percentage type theme percentage-value] - (when (not= :empty type) - [metrics-info type theme amount])]) - (when watch-only? - [gradient-overview theme customization-color])]))))) + [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics? + on-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)) + watch-only? (= :watch-only type) + missing-keypair? (= :missing-keypair type)] + (if loading? + [loading-view + {:customization-color customization-color + :type type + :theme theme + :metrics? metrics?}] + [rn/pressable + {:on-press-in on-press-in + :on-press-out on-press-out + :style (style/card {:customization-color customization-color + :type type + :theme theme + :pressed? pressed? + :metrics? metrics?}) + :on-press on-press} + (when (and customization-color (and (not watch-only?) (not missing-keypair?))) + [customization-colors/overlay + {:customization-color customization-color + :border-radius 16 + :theme theme + :pressed? pressed?}]) + [rn/view {:style style/profile-container} + [rn/view {:style {:padding-bottom 2 :margin-right 2}} + [text/text {:style style/emoji} emoji]] + [rn/view {:style style/watch-only-container} + [text/text + {:size :paragraph-2 + :weight :medium + :number-of-lines 1 + :max-width 110 + :margin-right 4 + :ellipis-mode :tail + :style (style/account-name type theme)} + name] + (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}]) + (when missing-keypair? + [icon/icon :i/alert {:color (properties/alert-icon-color theme) :size 12}])]] + [text/text + {:size :heading-2 + :weight :semi-bold + :style (style/account-value type theme)} + balance] + (when metrics? + [rn/view {:style style/metrics-container} + [metrics-percentage type theme percentage-value] + (when (not= :empty type) + [metrics-info type theme amount])]) + (when watch-only? + [gradient-overview theme customization-color])]))) (defn- add-account-view - [_] - (let [pressed? (reagent/atom false)] - (fn [{:keys [on-press customization-color theme metrics?]}] - [rn/pressable - {:on-press on-press - :on-press-in #(reset! pressed? true) - :on-press-out #(reset! pressed? false) - :style (style/add-account-container {:theme theme - :metrics? metrics? - :pressed? @pressed?})} - [button/button - {:type :primary - :size 24 - :icon true - :accessibility-label :add-account - :on-press on-press - :pressed? @pressed? - :on-press-in #(reset! pressed? true) - :on-press-out #(reset! pressed? false) - :customization-color customization-color - :icon-only? true} - :i/add]]))) + [{:keys [on-press customization-color metrics?]}] + (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 + {:on-press on-press + :on-press-in on-press-in + :on-press-out on-press-out + :style (style/add-account-container {:theme theme + :metrics? metrics? + :pressed? pressed?})} + [button/button + {:on-press on-press + :type :primary + :size 24 + :icon true + :accessibility-label :add-account + :pressed? pressed? + :icon-only? true + :customization-color customization-color} + :i/add]])) (defn- view-internal [{:keys [type] :as props}] @@ -185,6 +184,4 @@ :add-account [add-account-view props] nil)) -(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/wallet/amount_input/schema.cljs b/src/quo/components/wallet/amount_input/schema.cljs index 9510a2bdee..8a57a9939b 100644 --- a/src/quo/components/wallet/amount_input/schema.cljs +++ b/src/quo/components/wallet/amount_input/schema.cljs @@ -6,9 +6,7 @@ [:props [:map {:closed true} [:status {:optional true} [:maybe [:enum :default :error]]] - [:theme :schema.common/theme] - [:on-inc-press {:optional true} [:maybe fn?]] - [:on-dec-press {:optional true} [:maybe fn?]] + [:on-change-text {:optional true} [:maybe fn?]] [:container-style {:optional true} [:maybe :map]] [:min-value {:optional true} [:maybe :int]] [:max-value {:optional true} [:maybe :int]] diff --git a/src/quo/components/wallet/amount_input/view.cljs b/src/quo/components/wallet/amount_input/view.cljs index c1b2cca8bf..77433872a0 100644 --- a/src/quo/components/wallet/amount_input/view.cljs +++ b/src/quo/components/wallet/amount_input/view.cljs @@ -4,7 +4,7 @@ [quo.components.markdown.text :as text] [quo.components.wallet.amount-input.schema :as amount-input.schema] [quo.components.wallet.amount-input.style :as style] - [quo.theme :as quo.theme] + [quo.theme] [react-native.core :as rn] [schema.core :as schema])) @@ -21,35 +21,34 @@ icon]) (defn- view-internal - [{:keys [on-inc-press on-dec-press theme status value min-value max-value + [{:keys [on-inc-press on-dec-press status value min-value max-value container-style] :or {value 0 min-value 0 max-value 999999999}}] - [rn/view - {:style (merge style/container container-style)} - [amount-button - {:theme theme - :accessibility-label :amount-input-dec-button - :icon :i/remove - :on-press on-dec-press - :disabled? (>= min-value value)}] - [rn/view {:style style/input-container} - [text/text - {:number-of-lines 1 - :accessibility-label :amount-input - :weight :semi-bold - :size :heading-1 - :align-self :center - :style (style/input-text theme (or status :default))} - value]] - [amount-button - {:theme theme - :icon :i/add - :accessibility-label :amount-input-inc-button - :on-press on-inc-press - :disabled? (>= value max-value)}]]) + (let [theme (quo.theme/use-theme-value)] + [rn/view + {:style (merge style/container container-style)} + [amount-button + {:theme theme + :accessibility-label :amount-input-dec-button + :icon :i/remove + :on-press on-dec-press + :disabled? (>= min-value value)}] + [rn/view {:style style/input-container} + [text/text + {:number-of-lines 1 + :accessibility-label :amount-input + :weight :semi-bold + :size :heading-1 + :align-self :center + :style (style/input-text theme (or status :default))} + value]] + [amount-button + {:theme theme + :icon :i/add + :accessibility-label :amount-input-inc-button + :on-press on-inc-press + :disabled? (>= value max-value)}]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal amount-input.schema/?schema))) +(def view (schema/instrument #'view-internal amount-input.schema/?schema)) diff --git a/src/quo/components/wallet/keypair/view.cljs b/src/quo/components/wallet/keypair/view.cljs index 1c8d5addd4..a995fc4a67 100644 --- a/src/quo/components/wallet/keypair/view.cljs +++ b/src/quo/components/wallet/keypair/view.cljs @@ -37,8 +37,9 @@ :border? true}])) (defn title-view - [{:keys [details action selected? type blur? customization-color on-options-press theme]}] - (let [{:keys [full-name]} details] + [{:keys [details action selected? type blur? customization-color on-options-press]}] + (let [theme (quo.theme/use-theme-value) + {:keys [full-name]} details] [rn/view {:style style/title-container :accessibility-label :title} @@ -89,7 +90,7 @@ [item & _rest] [account-list-card/view item]) -(defn- view-internal +(defn view [{:keys [accounts action container-style selected? on-press] :as props}] [rn/pressable {:style (style/container (merge props @@ -108,5 +109,3 @@ :render-fn acc-list-card :separator [rn/view {:style {:height 8}}] :style {:padding-horizontal 8}}]]) - -(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/wallet/network_routing/schema.cljs b/src/quo/components/wallet/network_routing/schema.cljs index fec6a7a3d9..25ae71df0a 100644 --- a/src/quo/components/wallet/network_routing/schema.cljs +++ b/src/quo/components/wallet/network_routing/schema.cljs @@ -12,6 +12,5 @@ [:amount :int] [:max-amount :int] [:network-name [:or :string :keyword]]]]]] - [:container-style {:optional true} [:maybe :map]] - [:theme :schema.common/theme]]]] + [:container-style {:optional true} [:maybe :map]]]]] :any]) diff --git a/src/quo/components/wallet/network_routing/style.cljs b/src/quo/components/wallet/network_routing/style.cljs index b7f08dcdfd..681359e52e 100644 --- a/src/quo/components/wallet/network_routing/style.cljs +++ b/src/quo/components/wallet/network_routing/style.cljs @@ -29,13 +29,13 @@ :background-color (colors/resolve-color network-name nil 10)}) (defn network-bar - [{:keys [max-width on-top? bar-division? theme] + [{:keys [bar-max-width on-top? bar-division? theme] {:keys [network-name translate-x-shared-value]} :bar} width-shared-value] (reanimated/apply-animations-to-style {:width width-shared-value :transform [{:translate-x translate-x-shared-value}]} - {:max-width max-width + {:max-width bar-max-width :flex-direction :row :justify-content :flex-end :background-color (colors/resolve-color network-name nil) diff --git a/src/quo/components/wallet/network_routing/view.cljs b/src/quo/components/wallet/network_routing/view.cljs index ad9c75b1f8..25331398c0 100644 --- a/src/quo/components/wallet/network_routing/view.cljs +++ b/src/quo/components/wallet/network_routing/view.cljs @@ -8,7 +8,6 @@ [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.reanimated :as reanimated] - [reagent.core :as reagent] [schema.core :as schema] [utils.number])) @@ -22,60 +21,73 @@ (js/clearTimeout (k @timeouts)) (swap! timeouts assoc k (js/setTimeout exec-fn-and-remove-timeout ms)))) -(defn- f-slider - [slider-shared-values] - [rn/view {:style style/slider-container} - [reanimated/view {:style (style/slider slider-shared-values)}]]) +(def get-gesture + (memoize + (fn + [[detecting-gesture? slider-width-shared-value max-amount + slider-height-shared-value + amount-shared-value amount-on-gesture-start width->amount + slider-opacity-shared-value on-new-amount set-detecting-gesture]] + (-> (gesture/gesture-pan) + (gesture/enabled detecting-gesture?) + (gesture/on-begin + (fn [_] + (animation/increase-slider slider-width-shared-value slider-height-shared-value) + (reset! amount-on-gesture-start (reanimated/get-shared-value amount-shared-value)))) + (gesture/on-update + (fn [event] + (let [new-amount (-> (oops/oget event "translationX") + (width->amount) + (+ @amount-on-gesture-start) + (utils.number/value-in-range 1 max-amount))] + (reanimated/set-shared-value amount-shared-value new-amount)))) + (gesture/on-finalize + (fn [_] + (animation/decrease-slider slider-width-shared-value slider-height-shared-value) + (animation/hide-slider slider-opacity-shared-value) + (on-new-amount (reanimated/get-shared-value amount-shared-value)) + (add-new-timeout :turn-off-gesture #(set-detecting-gesture false) 20))))))) -(defn f-network-bar - [_] - (let [detecting-gesture? (reagent/atom false) - amount-on-gesture-start (atom 0)] - (fn [{:keys [total-width total-amount on-press on-new-amount allow-press?] - {:keys [amount-shared-value - max-amount]} :bar - :as props}] - (let [slider-width-shared-value (reanimated/use-shared-value 4) - slider-height-shared-value (reanimated/use-shared-value 32) - slider-opacity-shared-value (reanimated/use-shared-value 0) - network-bar-shared-value (reanimated/interpolate amount-shared-value - [0 total-amount] - [0 total-width]) - width->amount #(/ (* % total-amount) total-width)] - [rn/pressable - {:on-press (fn [] - (when (and (not @detecting-gesture?) allow-press?) - (on-press) - (reset! detecting-gesture? true) - (animation/show-slider slider-opacity-shared-value)))} - [reanimated/view - {:style (style/network-bar props network-bar-shared-value) - :accessibility-label :network-routing-bar} - [gesture/gesture-detector - {:gesture - (-> (gesture/gesture-pan) - (gesture/enabled @detecting-gesture?) - (gesture/on-begin - (fn [_] - (animation/increase-slider slider-width-shared-value slider-height-shared-value) - (reset! amount-on-gesture-start (reanimated/get-shared-value amount-shared-value)))) - (gesture/on-update - (fn [event] - (let [new-amount (-> (oops/oget event "translationX") - (width->amount) - (+ @amount-on-gesture-start) - (utils.number/value-in-range 1 max-amount))] - (reanimated/set-shared-value amount-shared-value new-amount)))) - (gesture/on-finalize - (fn [_] - (animation/decrease-slider slider-width-shared-value slider-height-shared-value) - (animation/hide-slider slider-opacity-shared-value) - (on-new-amount (reanimated/get-shared-value amount-shared-value)) - (add-new-timeout :turn-off-gesture #(reset! detecting-gesture? false) 20))))} - [:f> f-slider - {:width-shared-value slider-width-shared-value - :height-shared-value slider-height-shared-value - :opacity-shared-value slider-opacity-shared-value}]]]])))) +(defn network-bar + [{:keys [total-width total-amount on-press on-new-amount allow-press? + bar-idx bar-width bar-max-width] + {:keys [amount-shared-value + max-amount] + :as bar} :bar + :as props}] + (let [[detecting-gesture? + set-detecting-gesture] (rn/use-state false) + amount-on-gesture-start (rn/use-ref-atom 0) + slider-width-shared-value (reanimated/use-shared-value 4) + slider-height-shared-value (reanimated/use-shared-value 32) + slider-opacity-shared-value (reanimated/use-shared-value 0) + network-bar-shared-value (reanimated/interpolate amount-shared-value + [0 total-amount] + [0 total-width]) + width->amount #(/ (* % total-amount) total-width) + gesture (get-gesture + [detecting-gesture? slider-width-shared-value max-amount + slider-height-shared-value + amount-shared-value amount-on-gesture-start width->amount + slider-opacity-shared-value on-new-amount set-detecting-gesture]) + on-press (rn/use-callback + (fn [] + (when (and (not detecting-gesture?) allow-press?) + (on-press bar bar-idx bar-width bar-max-width) + (set-detecting-gesture true) + (animation/show-slider slider-opacity-shared-value))) + [detecting-gesture? allow-press? on-press])] + [rn/pressable + {:on-press on-press} + [reanimated/view + {:style (style/network-bar props network-bar-shared-value) + :accessibility-label :network-routing-bar} + [gesture/gesture-detector {:gesture gesture} + [rn/view {:style style/slider-container} + [reanimated/view + {:style (style/slider {:width-shared-value slider-width-shared-value + :height-shared-value slider-height-shared-value + :opacity-shared-value slider-opacity-shared-value})}]]]]])) (defn- add-bar-shared-values [{:keys [amount] :as network}] @@ -93,101 +105,113 @@ (interleave (repeat [rn/view {:style (style/dashed-line-line network-name)}]) (repeat [rn/view {:style style/dashed-line-space}]))))) -(defn f-network-routing-bars - [_] - (let [selected-network-idx (reagent/atom nil) - press-locked? (reagent/atom false) - lock-press #(reset! press-locked? true) - unlock-press #(reset! press-locked? false) - reset-state-values #(reset! selected-network-idx nil)] - (fn [{:keys [networks total-width total-amount requesting-data? on-amount-selected]}] - (let [bar-opacity-shared-value (reanimated/use-shared-value 0) - network-bars (map add-bar-shared-values networks) - amount->width #(* % (/ total-width total-amount)) - bars-widths-negative (map #(-> % get-negative-amount amount->width) - network-bars) - last-bar-idx (dec (count network-bars))] - (rn/use-effect - #(when (and (not requesting-data?) @selected-network-idx) - (let [bar (nth network-bars @selected-network-idx)] - (animation/hide-pressed-bar bar amount->width)) - (animation/update-bar-values-and-reset-animations - {:new-network-values networks - :network-bars network-bars - :amount->width amount->width - :reset-values-fn reset-state-values - :lock-press-fn lock-press - :unlock-press-fn unlock-press - :add-new-timeout add-new-timeout})) - [requesting-data?]) - [:<> - (doall - (for [[bar-idx bar] (map-indexed vector network-bars) - :let [bar-max-width (amount->width (:max-amount bar)) - bar-width (-> (:amount-shared-value bar) - (reanimated/get-shared-value) - (amount->width)) - hide-division? (or (= last-bar-idx bar-idx) @selected-network-idx) - this-bar-selected? (= @selected-network-idx bar-idx)]] - ^{:key (str "network-bar-" bar-idx)} - [:f> f-network-bar - {:bar bar - :max-width bar-max-width - :total-width total-width - :total-amount total-amount - :bar-division? hide-division? - :on-top? this-bar-selected? - :allow-press? (and (or (not @selected-network-idx) this-bar-selected?) - (not requesting-data?) - (not @press-locked?)) - :on-press (fn [] - (when-not @selected-network-idx - (let [[previous-bars [_ & next-bars]] (split-at bar-idx network-bars) - number-previous-bars bar-idx] - (animation/move-previous-bars - {:bars previous-bars - :bars-widths-negative bars-widths-negative}) - (animation/move-pressed-bar - {:bar bar - :bars-widths-negative bars-widths-negative - :number-previous-bars number-previous-bars}) - (animation/move-next-bars - {:bars next-bars - :bars-widths-negative bars-widths-negative - :number-previous-bars (inc number-previous-bars) - :extra-offset (max 0 (- bar-max-width bar-width)) - :add-new-timeout add-new-timeout})) - (animation/show-max-limit-bar bar-opacity-shared-value) - (reset! selected-network-idx bar-idx))) - :on-new-amount (fn [new-amount] - (animation/hide-max-limit-bar bar-opacity-shared-value) - (when on-amount-selected - (on-amount-selected new-amount @selected-network-idx)))}])) +(defn- network-routing-bars + [{:keys [networks total-width total-amount requesting-data? on-amount-selected]}] + (let [[selected-network-idx + set-selected-network-idx] (rn/use-state nil) + [press-locked? + set-press-locked] (rn/use-state false) + lock-press (rn/use-callback #(set-press-locked true)) + unlock-press (rn/use-callback #(set-press-locked false)) + reset-state-values (rn/use-callback #(set-selected-network-idx nil)) + bar-opacity-shared-value (reanimated/use-shared-value 0) + network-bars (map add-bar-shared-values networks) + amount->width #(* % (/ total-width total-amount)) + bars-widths-negative (map #(-> % get-negative-amount amount->width) + network-bars) + last-bar-idx (dec (count network-bars)) + network-bar-on-press (rn/use-callback + (fn [bar bar-idx bar-width bar-max-width] + (when-not selected-network-idx + (let [[previous-bars + [_ & next-bars]] (split-at bar-idx network-bars)] + (animation/move-previous-bars + {:bars previous-bars + :bars-widths-negative bars-widths-negative}) + (animation/move-pressed-bar + {:bar bar + :bars-widths-negative bars-widths-negative + :number-previous-bars bar-idx}) + (animation/move-next-bars + {:bars next-bars + :bars-widths-negative bars-widths-negative + :number-previous-bars (inc bar-idx) + :extra-offset (max 0 (- bar-max-width bar-width)) + :add-new-timeout add-new-timeout})) + (animation/show-max-limit-bar bar-opacity-shared-value) + (set-selected-network-idx bar-idx))) + [selected-network-idx bars-widths-negative network-bars]) + on-new-amount (rn/use-callback + (fn [new-amount] + (animation/hide-max-limit-bar bar-opacity-shared-value) + (when on-amount-selected + (on-amount-selected new-amount selected-network-idx))) + [on-amount-selected selected-network-idx])] + (rn/use-effect + #(when (and (not requesting-data?) selected-network-idx) + (let [bar (nth network-bars selected-network-idx)] + (animation/hide-pressed-bar bar amount->width)) + (animation/update-bar-values-and-reset-animations + {:new-network-values networks + :network-bars network-bars + :amount->width amount->width + :reset-values-fn reset-state-values + :lock-press-fn lock-press + :unlock-press-fn unlock-press + :add-new-timeout add-new-timeout})) + [requesting-data?]) + [:<> + (doall + (for [[bar-idx bar] (map-indexed vector network-bars) + :let [bar-max-width (amount->width (:max-amount bar)) + bar-width (-> (:amount-shared-value bar) + (reanimated/get-shared-value) + (amount->width)) + hide-division? (or (= last-bar-idx bar-idx) selected-network-idx) + this-bar-selected? (= selected-network-idx bar-idx)]] + ^{:key (str "network-bar-" bar-idx)} + [network-bar + {:bar bar + :bar-idx bar-idx + :bar-width bar-width + :bar-max-width bar-max-width + :total-width total-width + :total-amount total-amount + :bar-division? hide-division? + :on-top? this-bar-selected? + :allow-press? (and (or (not selected-network-idx) this-bar-selected?) + (not requesting-data?) + (not press-locked?)) + :on-press network-bar-on-press + :on-new-amount on-new-amount}])) - (let [{:keys [max-amount network-name]} (some->> @selected-network-idx - (nth network-bars)) - limit-bar-width (amount->width max-amount)] - [reanimated/view - {:style (style/max-limit-bar - {:opacity-shared-value bar-opacity-shared-value - :width limit-bar-width})} - [rn/view {:style (style/max-limit-bar-background network-name)}] - [dashed-line network-name]])])))) + (let [{:keys [max-amount network-name]} (some->> selected-network-idx + (nth network-bars)) + limit-bar-width (amount->width max-amount)] + [reanimated/view + {:style (style/max-limit-bar + {:opacity-shared-value bar-opacity-shared-value + :width limit-bar-width})} + [rn/view {:style (style/max-limit-bar-background network-name)}] + [dashed-line network-name]])])) (defn view-internal - [{:keys [networks container-style theme] :as params}] - (reagent/with-let [total-width (reagent/atom nil)] + [{:keys [networks container-style] :as params}] + (let [theme (quo.theme/use-theme-value) + [total-width + set-total-width] (rn/use-state nil) + on-layout (rn/use-callback #(let [width (oops/oget % "nativeEvent.layout.width")] + (when (not= width total-width) + (set-total-width width))))] + (rn/use-unmount (fn [] + (doseq [[_ living-timeout] @timeouts] + (js/clearTimeout living-timeout)))) [rn/view {:accessibility-label :network-routing :style (style/container container-style theme) - :on-layout #(reset! total-width (oops/oget % "nativeEvent.layout.width"))} - (when @total-width + :on-layout on-layout} + (when total-width ^{:key (str "network-routing-" (count networks))} - [:f> f-network-routing-bars (assoc params :total-width @total-width)])] - (finally - (doseq [[_ living-timeout] @timeouts] - (js/clearTimeout living-timeout))))) + [network-routing-bars (assoc params :total-width total-width)])])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal network-routing-schema/?schema))) +(def view (schema/instrument #'view-internal network-routing-schema/?schema)) diff --git a/src/quo/components/wallet/token_input/schema.cljs b/src/quo/components/wallet/token_input/schema.cljs index 4f8fb8aac7..9c8b0ddfd3 100644 --- a/src/quo/components/wallet/token_input/schema.cljs +++ b/src/quo/components/wallet/token_input/schema.cljs @@ -14,6 +14,5 @@ [:networks {:optional true} [:maybe [:sequential [:map [:source [:maybe :schema.common/image-source]]]]]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]] - [:value {:optional true} [:maybe :string]] - [:theme :schema.common/theme]]]] + [:value {:optional true} [:maybe :string]]]]] :any]) diff --git a/src/quo/components/wallet/token_input/view.cljs b/src/quo/components/wallet/token_input/view.cljs index 8f37edd903..701197f889 100644 --- a/src/quo/components/wallet/token_input/view.cljs +++ b/src/quo/components/wallet/token_input/view.cljs @@ -12,7 +12,6 @@ [quo.foundations.common :as common] [quo.theme :as quo.theme] [react-native.core :as rn] - [reagent.core :as reagent] [schema.core :as schema])) (defn fiat-format @@ -75,7 +74,8 @@ [token-name-text theme text]]) (defn input-section - [{:keys [on-change-text value value-atom on-selection-change on-token-press]}] + [{:keys [on-change-text value value-internal set-value-internal on-selection-change + on-token-press]}] (let [input-ref (atom nil) set-ref #(reset! input-ref %) focus-input #(when-let [ref ^js @input-ref] @@ -83,7 +83,7 @@ controlled-input? (some? value) handle-on-change-text (fn [v] (when-not controlled-input? - (reset! value-atom v)) + (set-value-internal v)) (when on-change-text (on-change-text v))) handle-selection-change (fn [^js e] @@ -117,41 +117,43 @@ :on-selection-change handle-selection-change :selection (clj->js selection)} controlled-input? (assoc :value value) - (not controlled-input?) (assoc :default-value @value-atom))]] + (not controlled-input?) (assoc :default-value value-internal))]] [token-label {:theme theme :text (if crypto? token currency) - :value (if controlled-input? value @value-atom)}]]))) + :value (if controlled-input? value value-internal)}]]))) (defn- view-internal - [] - (let [width (:width (rn/get-window)) - value-atom (reagent/atom nil) - crypto? (reagent/atom true)] - (fn [{:keys [theme container-style value on-swap] :as props}] - (let [handle-on-swap (fn [] - (swap! crypto? not) - (when on-swap (on-swap @crypto?)))] - [rn/view {:style (merge (style/main-container width) container-style)} - [rn/view {:style style/amount-container} - [input-section - (assoc props - :value-atom value-atom - :crypto? @crypto?)] - [button/button - {:icon true - :icon-only? true - :size 32 - :on-press handle-on-swap - :type :outline - :accessibility-label :reorder} - :i/reorder]] - [divider-line/view {:container-style (style/divider theme)}] - [data-info - (assoc props - :crypto? @crypto? - :amount (or value @value-atom))]])))) + [{:keys [container-style value on-swap] :as props}] + (let [theme (quo.theme/use-theme-value) + width (:width (rn/get-window)) + [value-internal set-value-internal] (rn/use-state nil) + [crypto? set-crypto] (rn/use-state true) + handle-on-swap (rn/use-callback + (fn [] + (set-crypto (not crypto?)) + (when on-swap (on-swap (not crypto?)))) + [crypto? on-swap])] + [rn/view {:style (merge (style/main-container width) container-style)} + [rn/view {:style style/amount-container} + [input-section + (assoc props + :value-internal value-internal + :set-value-internal set-value-internal + :crypto? crypto?)] + [button/button + {:icon true + :icon-only? true + :size 32 + :on-press handle-on-swap + :type :outline + :accessibility-label :reorder} + :i/reorder]] + [divider-line/view {:container-style (style/divider theme)}] + [data-info + (assoc props + :theme theme + :crypto? crypto? + :amount (or value value-internal))]])) -(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/wallet/wallet_activity/schema.cljs b/src/quo/components/wallet/wallet_activity/schema.cljs index a138635275..7052c4f3a0 100644 --- a/src/quo/components/wallet/wallet_activity/schema.cljs +++ b/src/quo/components/wallet/wallet_activity/schema.cljs @@ -13,7 +13,6 @@ [:blur? {:optional true} [:maybe :boolean]] [:on-press {:optional true} [:maybe fn?]] [:state {:optional true} [:maybe [:= :disabled]]] - [:theme :schema.common/theme] [:second-tag-prefix {:optional true} [:maybe :keyword]] [:third-tag-prefix {:optional true} [:maybe :keyword]] [:fourth-tag-prefix {:optional true} [:maybe :keyword]] diff --git a/src/quo/components/wallet/wallet_activity/view.cljs b/src/quo/components/wallet/wallet_activity/view.cljs index fd08a9efc5..1b9c8d0f0e 100644 --- a/src/quo/components/wallet/wallet_activity/view.cljs +++ b/src/quo/components/wallet/wallet_activity/view.cljs @@ -8,7 +8,6 @@ [quo.theme :as quo.theme] [react-native.core :as rn] [react-native.hole-view :as hole-view] - [reagent.core :as reagent] [schema.core :as schema] [utils.i18n :as i18n])) @@ -100,39 +99,37 @@ [context-tag/view (merge props {:size 24 :blur? blur?})]]) (defn- view-internal - [_] - (let [pressed? (reagent/atom false)] - (fn - [{:keys [state theme blur? - on-press - first-tag second-tag third-tag fourth-tag - second-tag-prefix third-tag-prefix fourth-tag-prefix] - :as props}] - [rn/pressable - {:style (style/wallet-activity-container {:pressed? @pressed? - :theme theme - :blur? blur?}) - :accessibility-label :wallet-activity - :disabled (= state :disabled) - :on-press on-press - :on-press-in (fn [] (reset! pressed? true)) - :on-press-out (fn [] (reset! pressed? false))} - [rn/view - {:style {:flex-direction :row}} - [transaction-icon-view props] - [rn/view - {:style style/content-container} - [transaction-header props] - [rn/view {:style style/content-line} - (when first-tag [prop-tag first-tag blur?]) - (when second-tag-prefix [prop-text second-tag-prefix theme]) - (when second-tag [prop-tag second-tag blur?])] - [rn/view {:style style/content-line} - (when third-tag-prefix [prop-text third-tag-prefix theme]) - (when third-tag [prop-tag third-tag blur?]) - (when fourth-tag-prefix [prop-text fourth-tag-prefix theme]) - (when fourth-tag [prop-tag fourth-tag blur?])]]]]))) + [{:keys [state blur? first-tag second-tag third-tag fourth-tag on-press + second-tag-prefix third-tag-prefix fourth-tag-prefix] + :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/wallet-activity-container {:pressed? pressed? + :theme theme + :blur? blur?}) + :accessibility-label :wallet-activity + :disabled (= state :disabled) + :on-press on-press + :on-press-in on-press-in + :on-press-out on-press-out} + [rn/view + {:style {:flex-direction :row}} + [transaction-icon-view props] + [rn/view + {:style style/content-container} + [transaction-header props] + [rn/view {:style style/content-line} + (when first-tag [prop-tag first-tag blur?]) + (when second-tag-prefix [prop-text second-tag-prefix theme]) + (when second-tag [prop-tag second-tag blur?])] + [rn/view {:style style/content-line} + (when third-tag-prefix [prop-text third-tag-prefix theme]) + (when third-tag [prop-tag third-tag blur?]) + (when fourth-tag-prefix [prop-text fourth-tag-prefix theme]) + (when fourth-tag [prop-tag fourth-tag blur?])]]]])) -(def view - (quo.theme/with-theme - (schema/instrument #'view-internal component-schema/?schema))) +(def view (schema/instrument #'view-internal component-schema/?schema))