From e1408f2a5fe4b3df2334d377a4963741f87f1bd3 Mon Sep 17 00:00:00 2001 From: Ulises Manuel <90291778+ulisesmac@users.noreply.github.com> Date: Thu, 16 May 2024 22:16:17 -0600 Subject: [PATCH] Implement collectible header with animations (#20024) Co-authored-by: Ajay Sivan --- 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 +++++++++++++----- src/utils/worklets/header_animations.cljs | 7 + 8 files changed, 244 insertions(+), 70 deletions(-) create mode 100644 src/js/worklets/header_animations.js create mode 100644 src/utils/worklets/header_animations.cljs diff --git a/src/js/worklets/header_animations.js b/src/js/worklets/header_animations.js new file mode 100644 index 0000000000..83a0e14d0d --- /dev/null +++ b/src/js/worklets/header_animations.js @@ -0,0 +1,25 @@ +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 90407edca4..fb0a2ddf9a 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -438,6 +438,7 @@ "../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 e58d2c4988..60f2662d01 100644 --- a/src/quo/components/profile/expanded_collectible/style.cljs +++ b/src/quo/components/profile/expanded_collectible/style.cljs @@ -1,13 +1,10 @@ (ns quo.components.profile.expanded-collectible.style - (:require [quo.foundations.colors :as colors] - [quo.foundations.shadows :as shadows])) + (:require [quo.foundations.colors :as colors])) -(defn container - [theme] - (merge (shadows/get 2 theme) - {:align-items :center - :justify-content :center - :border-radius 16})) +(def container + {: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 8c612d0195..e47a738a4f 100644 --- a/src/quo/components/profile/expanded_collectible/view.cljs +++ b/src/quo/components/profile/expanded_collectible/view.cljs @@ -34,7 +34,8 @@ label]]) (defn view-internal - [{:keys [container-style square? on-press counter image-src native-ID supported-file?]}] + [{:keys [container-style square? on-press counter image-src native-ID supported-file? + on-collectible-load]}] (let [theme (quo.theme/use-theme) [image-size set-image-size] (rn/use-state {}) [image-error? set-image-error] (rn/use-state false)] @@ -48,7 +49,7 @@ [rn/pressable {:on-press (when (and (not image-error?) supported-file?) on-press) :accessibility-label :expanded-collectible - :style (merge container-style (style/container theme))} + :style (merge container-style style/container)} (cond (not supported-file?) [fallback-view @@ -68,7 +69,8 @@ {:style (style/image square? (:aspect-ratio image-size)) :source image-src :native-ID native-ID - :on-error #(set-image-error true)}] + :on-error #(set-image-error true) + :on-load on-collectible-load}] [counter-view counter]])])) (def ?schema @@ -82,7 +84,8 @@ [: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-press {:optional true} [:maybe fn?]] + [:on-collectible-load {: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 4c7e6ad9b1..8576229ce2 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> f-scroll-page-header + [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 d0fe93f51f..bac1c79b0a 100644 --- a/src/status_im/contexts/wallet/collectible/style.cljs +++ b/src/status_im/contexts/wallet/collectible/style.cljs @@ -1,17 +1,15 @@ -(ns status-im.contexts.wallet.collectible.style) +(ns status-im.contexts.wallet.collectible.style + (:require [quo.foundations.colors :as colors] + [react-native.core :as rn] + [react-native.platform :as platform])) (def container - {:margin-top 100 - :margin-bottom 34}) + {:margin-bottom 34}) (def preview-container {:margin-horizontal 8 - :margin-top 12}) - -(def preview - {:width "100%" - :aspect-ratio 1 - :border-radius 16}) + :margin-top 12 + :padding-top 100}) (def header {:margin-horizontal 20 @@ -43,3 +41,43 @@ (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 06327f7afa..073626c4bd 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -1,21 +1,29 @@ (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.re-frame :as rf] + [utils.worklets.header-animations :as header-animations])) (defn header - [collectible-name collection-name collection-image-url] - [rn/view {:style style/header} + [collectible-name collection-name collection-image-url set-title-ref] + [rn/view + {:style style/header + :ref set-title-ref + :collapsable false} [quo/text {:weight :semi-bold :size :heading-1} @@ -64,13 +72,74 @@ :label (i18n/label :t/about) :accessibility-label :about-tab}]) -(defn view +(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 [_] (let [selected-tab (reagent/atom :overview) on-tab-change #(reset! selected-tab %)] - (fn [] - (let [theme (quo.theme/use-theme) - collectible (rf/sub [:wallet/last-collectible-details]) + (fn [{:keys [collectible set-title-bottom theme]}] + (let [title-ref (rn/use-ref-atom nil) + set-title-ref (rn/use-callback #(reset! title-ref %)) animation-shared-element-id (rf/sub [:animation-shared-element-id]) collectible-owner (rf/sub [:wallet/last-collectible-details-owner]) {:keys [id @@ -95,51 +164,47 @@ :id token-id :header collectible-name :description collection-name} - 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} + total-owned (utils/total-owned-collectible + (:ownership collectible) + (:address collectible-owner))] + [rn/view {:style style/container} + [rn/view + [gradient-layer preview-uri] [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}])}])}])))}] - [header collectible-name collection-name collection-image] + {: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] [cta-buttons {:chain-id chain-id :token-id token-id :contract-address contract-address - :watch-only? false ;(:watch-only? collectible-owner) + :watch-only? (:watch-only? collectible-owner) :collectible collectible}] [quo/tabs {:size 32 @@ -149,3 +214,41 @@ :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/utils/worklets/header_animations.cljs b/src/utils/worklets/header_animations.cljs new file mode 100644 index 0000000000..d0dd15f7f0 --- /dev/null +++ b/src/utils/worklets/header_animations.cljs @@ -0,0 +1,7 @@ +(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))