From 04eaf4188918d0ce6cbca2256e82893f417f5f2e Mon Sep 17 00:00:00 2001 From: Ulises Manuel <90291778+ulisesmac@users.noreply.github.com> Date: Tue, 14 May 2024 12:36:49 -0600 Subject: [PATCH] Revert "Implement collectible header with animations (#19783)" (#20023) This reverts commit 5a6a0f7e3d0b903a9f0f4cdad5154538127899f1. --- src/js/worklets/header_animations.js | 25 --- src/mocks/js_dependencies.cljs | 1 - .../profile/expanded_collectible/style.cljs | 13 +- .../profile/expanded_collectible/view.cljs | 11 +- src/status_im/common/scroll_page/view.cljs | 2 +- .../contexts/wallet/collectible/style.cljs | 56 +---- .../contexts/wallet/collectible/view.cljs | 199 +++++------------- .../contexts/wallet/wallet_connect/utils.cljs | 6 +- src/utils/worklets/header_animations.cljs | 7 - 9 files changed, 73 insertions(+), 247 deletions(-) delete mode 100644 src/js/worklets/header_animations.js delete mode 100644 src/utils/worklets/header_animations.cljs diff --git a/src/js/worklets/header_animations.js b/src/js/worklets/header_animations.js deleted file mode 100644 index 83a0e14d0d..0000000000 --- a/src/js/worklets/header_animations.js +++ /dev/null @@ -1,25 +0,0 @@ -import { - useDerivedValue, - interpolate, - interpolateColor, - Extrapolation, - useAnimatedStyle, -} from 'react-native-reanimated'; - -const CLAMP_MIN = 0; -const CLAMP_MAX = 60; -const BLUR_MIN = 1; -const BLUR_MAX = 15; - -export const useBlurAmount = (sharedValue) => - useDerivedValue(() => - parseInt(interpolate(sharedValue.value, [CLAMP_MIN, CLAMP_MAX], [BLUR_MIN, BLUR_MAX], Extrapolation.CLAMP)), - ); - -export function useLayerOpacity(sharedValue, from, to) { - return useAnimatedStyle(() => ({ - flex: 1, - justifyContent: 'flex-end', - backgroundColor: interpolateColor(sharedValue.value, [0, 60], [from, to], 'RGB'), - })); -} diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index fb0a2ddf9a..90407edca4 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -438,7 +438,6 @@ "../src/js/worklets/parallax.js" #js {} "../src/js/worklets/profile_header.js" #js {} "../src/js/worklets/identifiers_highlighting.js" #js {} - "../src/js/worklets/header_animations.js" #js {} "./fleets.js" default-fleets "../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json")) "../translations/de.json" (js/JSON.parse (slurp "./translations/de.json")) diff --git a/src/quo/components/profile/expanded_collectible/style.cljs b/src/quo/components/profile/expanded_collectible/style.cljs index 60f2662d01..e58d2c4988 100644 --- a/src/quo/components/profile/expanded_collectible/style.cljs +++ b/src/quo/components/profile/expanded_collectible/style.cljs @@ -1,10 +1,13 @@ (ns quo.components.profile.expanded-collectible.style - (:require [quo.foundations.colors :as colors])) + (:require [quo.foundations.colors :as colors] + [quo.foundations.shadows :as shadows])) -(def container - {:align-items :center - :justify-content :center - :border-radius 16}) +(defn container + [theme] + (merge (shadows/get 2 theme) + {:align-items :center + :justify-content :center + :border-radius 16})) (defn image [square? aspect-ratio] diff --git a/src/quo/components/profile/expanded_collectible/view.cljs b/src/quo/components/profile/expanded_collectible/view.cljs index e47a738a4f..8c612d0195 100644 --- a/src/quo/components/profile/expanded_collectible/view.cljs +++ b/src/quo/components/profile/expanded_collectible/view.cljs @@ -34,8 +34,7 @@ label]]) (defn view-internal - [{:keys [container-style square? on-press counter image-src native-ID supported-file? - on-collectible-load]}] + [{:keys [container-style square? on-press counter image-src native-ID supported-file?]}] (let [theme (quo.theme/use-theme) [image-size set-image-size] (rn/use-state {}) [image-error? set-image-error] (rn/use-state false)] @@ -49,7 +48,7 @@ [rn/pressable {:on-press (when (and (not image-error?) supported-file?) on-press) :accessibility-label :expanded-collectible - :style (merge container-style style/container)} + :style (merge container-style (style/container theme))} (cond (not supported-file?) [fallback-view @@ -69,8 +68,7 @@ {:style (style/image square? (:aspect-ratio image-size)) :source image-src :native-ID native-ID - :on-error #(set-image-error true) - :on-load on-collectible-load}] + :on-error #(set-image-error true)}] [counter-view counter]])])) (def ?schema @@ -84,8 +82,7 @@ [:native-ID {:optional true} [:maybe [:or string? keyword?]]] [:square? {:optional true} [:maybe boolean?]] [:counter {:optional true} [:maybe string?]] - [:on-press {:optional true} [:maybe fn?]] - [:on-collectible-load {:optional true} [:maybe fn?]]]]] + [:on-press {:optional true} [:maybe fn?]]]]] :any]) (def view (schema/instrument #'view-internal ?schema)) diff --git a/src/status_im/common/scroll_page/view.cljs b/src/status_im/common/scroll_page/view.cljs index e45a49f9f5..6414122f39 100644 --- a/src/status_im/common/scroll_page/view.cljs +++ b/src/status_im/common/scroll_page/view.cljs @@ -108,7 +108,7 @@ children] (let [theme (quo.theme/use-theme)] [:<> - [f-scroll-page-header + [:f> f-scroll-page-header {:scroll-height @scroll-height :height height :sticky-header sticky-header diff --git a/src/status_im/contexts/wallet/collectible/style.cljs b/src/status_im/contexts/wallet/collectible/style.cljs index bac1c79b0a..d0fe93f51f 100644 --- a/src/status_im/contexts/wallet/collectible/style.cljs +++ b/src/status_im/contexts/wallet/collectible/style.cljs @@ -1,15 +1,17 @@ -(ns status-im.contexts.wallet.collectible.style - (:require [quo.foundations.colors :as colors] - [react-native.core :as rn] - [react-native.platform :as platform])) +(ns status-im.contexts.wallet.collectible.style) (def container - {:margin-bottom 34}) + {:margin-top 100 + :margin-bottom 34}) (def preview-container {:margin-horizontal 8 - :margin-top 12 - :padding-top 100}) + :margin-top 12}) + +(def preview + {:width "100%" + :aspect-ratio 1 + :border-radius 16}) (def header {:margin-horizontal 20 @@ -41,43 +43,3 @@ (def opensea-button {:flex 1 :margin-left 6}) - -(def animated-header - {:position :absolute - :top 0 - :left 0 - :right 0 - :height 100 - :z-index 1 - :overflow :hidden}) - -(defn scroll-view - [safe-area-top] - {:flex 1 - :margin-top (when platform/ios? (- safe-area-top))}) - -(def gradient-layer - {:position :absolute - :top 0 - :left 0 - :right 0 - :bottom 0 - :flex 1 - :align-items :center - :overflow :hidden}) - -(def image-background - {:height (:height (rn/get-window)) - :aspect-ratio 1}) - -(def gradient - {:position :absolute - :top 0 - :left 0 - :right 0 - :bottom 0}) - -(defn background-color - [theme] - {:flex 1 - :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}) diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index 073626c4bd..06327f7afa 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -1,29 +1,21 @@ (ns status-im.contexts.wallet.collectible.view (:require - [oops.core :as oops] [quo.core :as quo] [quo.foundations.colors :as colors] [quo.theme :as quo.theme] [react-native.core :as rn] - [react-native.linear-gradient :as linear-gradient] - [react-native.platform :as platform] - [react-native.reanimated :as reanimated] - [react-native.safe-area :as safe-area] [reagent.core :as reagent] + [status-im.common.scroll-page.view :as scroll-page] [status-im.contexts.wallet.collectible.options.view :as options-drawer] [status-im.contexts.wallet.collectible.style :as style] [status-im.contexts.wallet.collectible.tabs.view :as tabs] [status-im.contexts.wallet.collectible.utils :as utils] [utils.i18n :as i18n] - [utils.re-frame :as rf] - [utils.worklets.header-animations :as header-animations])) + [utils.re-frame :as rf])) (defn header - [collectible-name collection-name collection-image-url set-title-ref] - [rn/view - {:style style/header - :ref set-title-ref - :collapsable false} + [collectible-name collection-name collection-image-url] + [rn/view {:style style/header} [quo/text {:weight :semi-bold :size :heading-1} @@ -72,74 +64,13 @@ :label (i18n/label :t/about) :accessibility-label :about-tab}]) -(def navigate-back #(rf/dispatch [:navigate-back])) - -(defn animated-header - [{:keys [scroll-amount title-opacity page-nav-type picture title description theme]}] - (let [blur-amount (header-animations/use-blur-amount scroll-amount) - layer-opacity (header-animations/use-layer-opacity - scroll-amount - "transparent" - (colors/theme-colors colors/white-opa-50 colors/neutral-95-opa-70-blur theme))] - [rn/view {:style style/animated-header} - [reanimated/blur-view - {:style {:flex 1} - :blur-type :transparent - :overlay-color :transparent - :blur-amount blur-amount - :blur-radius blur-amount} - [reanimated/view {:style layer-opacity} - [quo/page-nav - {:type page-nav-type - :picture picture - :title title - :description description - :background :blur - :icon-name :i/close - :accessibility-label :back-button - :on-press navigate-back - :right-side [{:icon-name :i/options - :on-press #(rf/dispatch - [:show-bottom-sheet - {:content (fn [] - [options-drawer/view - {:name title - :image picture}]) - :theme theme}])}] - :center-opacity title-opacity}]]]])) - -(defn on-scroll - [e scroll-amount title-opacity title-bottom-coord] - (let [scroll-y (oops/oget e "nativeEvent.contentOffset.y") - new-opacity (if (>= scroll-y @title-bottom-coord) 1 0)] - (reanimated/set-shared-value scroll-amount scroll-y) - (reanimated/set-shared-value title-opacity - (reanimated/with-timing new-opacity #js {:duration 300})))) - -(defn- gradient-layer - [image-uri] - (let [theme (quo.theme/use-theme)] - [rn/view {:style style/gradient-layer} - [rn/image - {:style style/image-background - :source {:uri image-uri} - :blur-radius 14}] - [rn/view {:style style/gradient} - [linear-gradient/linear-gradient - {:style {:flex 1} - :colors (colors/theme-colors - [colors/white-opa-70 colors/white colors/white] - [colors/neutral-95-opa-70 colors/neutral-95 colors/neutral-95] - theme) - :locations [0 0.9 1]}]]])) - -(defn collectible-details +(defn view [_] (let [selected-tab (reagent/atom :overview) on-tab-change #(reset! selected-tab %)] - (fn [{:keys [collectible set-title-bottom theme]}] - (let [title-ref (rn/use-ref-atom nil) - set-title-ref (rn/use-callback #(reset! title-ref %)) + (fn [] + (let [theme (quo.theme/use-theme) + collectible (rf/sub [:wallet/last-collectible-details]) animation-shared-element-id (rf/sub [:animation-shared-element-id]) collectible-owner (rf/sub [:wallet/last-collectible-details-owner]) {:keys [id @@ -164,47 +95,51 @@ :id token-id :header collectible-name :description collection-name} - total-owned (utils/total-owned-collectible - (:ownership collectible) - (:address collectible-owner))] - [rn/view {:style style/container} - [rn/view - [gradient-layer preview-uri] + total-owned (utils/total-owned-collectible (:ownership collectible) + (:address collectible-owner))] + (rn/use-unmount #(rf/dispatch [:wallet/clear-last-collectible-details])) + [scroll-page/scroll-page + {:navigate-back? true + :height 148 + :page-nav-props {:type :title-description + :title collectible-name + :description collection-name + :right-side [{:icon-name :i/options + :on-press #(rf/dispatch + [:show-bottom-sheet + {:content (fn [] [options-drawer/view + {:name collectible-name + :image preview-uri}]) + :theme theme}])}] + :picture preview-uri + :blur? true}} + [rn/view {:style style/container} [quo/expanded-collectible - {:image-src preview-uri - :container-style style/preview-container - :counter (utils/collectible-owned-counter total-owned) - :native-ID (when (= animation-shared-element-id token-id) :shared-element) - :supported-file? (utils/supported-file? (:animation-media-type collectible-data)) - :on-press (fn [] - (if svg? - (js/alert "Can't visualize SVG images in lightbox") - (rf/dispatch - [:lightbox/navigate-to-lightbox - token-id - {:images [collectible-image] - :index 0 - :on-options-press #(rf/dispatch [:show-bottom-sheet - {:content - (fn [] - [options-drawer/view - {:name collectible-name - :image - preview-uri}])}])}]))) - :on-collectible-load (fn [] - ;; We need to delay the measurement because the - ;; navigation has an animation - (js/setTimeout - #(some-> @title-ref - (oops/ocall "measureInWindow" set-title-bottom)) - 300))}]] - [rn/view {:style (style/background-color theme)} - [header collectible-name collection-name collection-image set-title-ref] + {:image-src preview-uri + :container-style style/preview-container + :counter (utils/collectible-owned-counter total-owned) + :native-ID (when (= animation-shared-element-id token-id) :shared-element) + :supported-file? (utils/supported-file? (:animation-media-type collectible-data)) + :on-press (fn [] + (if svg? + (js/alert "Can't visualize SVG images in lightbox") + (rf/dispatch + [:lightbox/navigate-to-lightbox + token-id + {:images [collectible-image] + :index 0 + :on-options-press #(rf/dispatch [:show-bottom-sheet + {:content + (fn [] + [options-drawer/view + {:name collectible-name + :image preview-uri}])}])}])))}] + [header collectible-name collection-name collection-image] [cta-buttons {:chain-id chain-id :token-id token-id :contract-address contract-address - :watch-only? (:watch-only? collectible-owner) + :watch-only? false ;(:watch-only? collectible-owner) :collectible collectible}] [quo/tabs {:size 32 @@ -214,41 +149,3 @@ :on-change on-tab-change :data tabs-data}] [tabs/view {:selected-tab @selected-tab}]]])))) - -(defn view - [_] - (let [{:keys [top]} (safe-area/get-insets) - theme (quo.theme/use-theme) - title-bottom-coord (rn/use-ref-atom 0) - set-title-bottom (rn/use-callback - (fn [_ y _ height] - (reset! title-bottom-coord - (+ y height -100 (if platform/ios? (- top) top))))) - scroll-amount (reanimated/use-shared-value 0) - title-opacity (reanimated/use-shared-value 0) - collectible (rf/sub [:wallet/last-collectible-details]) - {:keys [preview-url - collection-data - collectible-data]} collectible - {preview-uri :uri} preview-url - {collectible-name :name} collectible-data - {collection-name :name} collection-data] - - (rn/use-unmount #(rf/dispatch [:wallet/clear-last-collectible-details])) - - [rn/view {:style (style/background-color theme)} - [animated-header - {:scroll-amount scroll-amount - :title-opacity title-opacity - :page-nav-type :title-description - :picture preview-uri - :title collectible-name - :description collection-name - :theme theme}] - [reanimated/scroll-view - {:style (style/scroll-view top) - :on-scroll #(on-scroll % scroll-amount title-opacity title-bottom-coord)} - [collectible-details - {:collectible collectible - :set-title-bottom set-title-bottom - :theme theme}]]])) diff --git a/src/status_im/contexts/wallet/wallet_connect/utils.cljs b/src/status_im/contexts/wallet/wallet_connect/utils.cljs index a3414892dd..8cf5952d67 100644 --- a/src/status_im/contexts/wallet/wallet_connect/utils.cljs +++ b/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/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])) diff --git a/src/utils/worklets/header_animations.cljs b/src/utils/worklets/header_animations.cljs deleted file mode 100644 index d0dd15f7f0..0000000000 --- a/src/utils/worklets/header_animations.cljs +++ /dev/null @@ -1,7 +0,0 @@ -(ns utils.worklets.header-animations) - -(def worklets (js/require "../src/js/worklets/header_animations.js")) - -(def use-blur-amount (.-useBlurAmount worklets)) - -(def use-layer-opacity (.-useLayerOpacity worklets))