From d9bcabe98fae8de44f12d5c87af8f5a07deb517e Mon Sep 17 00:00:00 2001 From: Norman Meier Date: Sat, 20 Apr 2024 18:29:52 +0200 Subject: [PATCH] chore(premium-feed): update front to use channel id Signed-off-by: Norman Meier --- packages/hooks/feed/usePremiumChannel.ts | 52 ++++++++++++++++--- packages/hooks/feed/usePremiumSubscription.ts | 11 ++-- .../UserPublicProfile/components/UPPIntro.tsx | 4 +- .../modals/PremiumSubscriptionModal.tsx | 12 ++--- .../modals/SubscriptionSetupModal.tsx | 6 +-- 5 files changed, 64 insertions(+), 21 deletions(-) diff --git a/packages/hooks/feed/usePremiumChannel.ts b/packages/hooks/feed/usePremiumChannel.ts index 084fceec45..affc6a61f7 100644 --- a/packages/hooks/feed/usePremiumChannel.ts +++ b/packages/hooks/feed/usePremiumChannel.ts @@ -1,22 +1,24 @@ import { useQuery } from "@tanstack/react-query"; +import { parseUserId } from "@/networks"; import { mustGetCw721MembershipQueryClient } from "@/utils/feed/client"; -export const usePremiumChannel = ( +const usePremiumChannel = ( networkId: string | undefined, - channelAddress: string | undefined, + channelId: string | undefined, + enabled?: boolean, ) => { return useQuery( - ["feed-premium-channel", networkId, channelAddress], + ["feed-premium-channel", networkId, channelId], async () => { - if (!networkId || !channelAddress) { + if (!networkId || !channelId) { return null; } const client = await mustGetCw721MembershipQueryClient(networkId); try { - const channel = await client.channel({ channelAddr: channelAddress }); + const channel = await client.channel({ channelId }); return channel; } catch (error) { if ( @@ -29,8 +31,46 @@ export const usePremiumChannel = ( } }, { - enabled: !!networkId && !!channelAddress, + enabled: (enabled ?? true) && !!networkId && !!channelId, staleTime: Infinity, }, ); }; + +const usePremiumChannelsByOwner = ( + userId: string | undefined, + enabled?: boolean, +) => { + return useQuery( + ["feed-premium-channels", userId], + async () => { + if (!userId) { + return []; + } + const [, userAddress] = parseUserId(userId); + if (!userAddress) { + return []; + } + + const client = await mustGetCw721MembershipQueryClient(userId); + + const channels = await client.channelsByOwner({ + ownerAddress: userAddress, + }); + return channels; + }, + { + enabled: (enabled ?? true) && !!userId, + staleTime: Infinity, + }, + ); +}; + +export const useMainPremiumChannel = ( + userId: string | undefined, + enabled?: boolean, +) => { + const [network] = parseUserId(userId); + const { data: channels } = usePremiumChannelsByOwner(userId, enabled); + return usePremiumChannel(network?.id, channels?.[0], enabled); +}; diff --git a/packages/hooks/feed/usePremiumSubscription.ts b/packages/hooks/feed/usePremiumSubscription.ts index d39affca61..a761d4c86e 100644 --- a/packages/hooks/feed/usePremiumSubscription.ts +++ b/packages/hooks/feed/usePremiumSubscription.ts @@ -1,5 +1,7 @@ import { useQuery } from "@tanstack/react-query"; +import { useMainPremiumChannel } from "./usePremiumChannel"; + import { parseUserId } from "@/networks"; import { mustGetCw721MembershipQueryClient } from "@/utils/feed/client"; @@ -7,25 +9,26 @@ export const usePremiumSubscription = ( channelUserId: string | undefined, subUserId: string | undefined, ) => { + const { data: channel } = useMainPremiumChannel(channelUserId); return useQuery( ["premium-is-subscribed", channelUserId, subUserId], async () => { - const [network, channelAddr] = parseUserId(channelUserId); + const [network] = parseUserId(channelUserId); const [, subAddr] = parseUserId(subUserId); - if (!network || !channelAddr || !subAddr) { + if (!channel || !network || !subAddr) { return null; } const client = await mustGetCw721MembershipQueryClient(network.id); const result = await client.subscription({ - channelAddr, + channelId: channel.id, subAddr, }); return result; }, - { staleTime: Infinity }, + { staleTime: Infinity, enabled: !!channel }, ); }; diff --git a/packages/screens/UserPublicProfile/components/UPPIntro.tsx b/packages/screens/UserPublicProfile/components/UPPIntro.tsx index 716882e520..d16a1d5090 100644 --- a/packages/screens/UserPublicProfile/components/UPPIntro.tsx +++ b/packages/screens/UserPublicProfile/components/UPPIntro.tsx @@ -21,7 +21,7 @@ import { SocialButton } from "@/components/buttons/SocialButton"; import { SocialButtonSecondary } from "@/components/buttons/SocialButtonSecondary"; import { ProfileButton } from "@/components/hub/ProfileButton"; import { UserAvatarWithFrame } from "@/components/images/AvatarWithFrame"; -import { usePremiumChannel } from "@/hooks/feed/usePremiumChannel"; +import { useMainPremiumChannel } from "@/hooks/feed/usePremiumChannel"; import { usePremiumIsSubscribed } from "@/hooks/feed/usePremiumIsSubscribed"; import { useMaxResolution } from "@/hooks/useMaxResolution"; import { useNSUserInfo } from "@/hooks/useNSUserInfo"; @@ -56,7 +56,7 @@ export const UPPIntro: React.FC<{ const [network, userAddress] = parseUserId(userId); const { width } = useMaxResolution(); const { width: windowWidth } = useWindowDimensions(); - const { data: premiumChannel } = usePremiumChannel(network?.id, userAddress); + const { data: premiumChannel } = useMainPremiumChannel(userId); const networkHasPremiumFeature = !!getNetworkFeature( network?.id, NetworkFeature.CosmWasmPremiumFeed, diff --git a/packages/screens/UserPublicProfile/components/modals/PremiumSubscriptionModal.tsx b/packages/screens/UserPublicProfile/components/modals/PremiumSubscriptionModal.tsx index d758aff880..b3b230fac6 100644 --- a/packages/screens/UserPublicProfile/components/modals/PremiumSubscriptionModal.tsx +++ b/packages/screens/UserPublicProfile/components/modals/PremiumSubscriptionModal.tsx @@ -10,7 +10,7 @@ import { UserAvatarWithFrame } from "@/components/images/AvatarWithFrame"; import ModalBase from "@/components/modals/ModalBase"; import { SpacerColumn } from "@/components/spacer"; import { useFeedbacks } from "@/context/FeedbacksProvider"; -import { usePremiumChannel } from "@/hooks/feed/usePremiumChannel"; +import { useMainPremiumChannel } from "@/hooks/feed/usePremiumChannel"; import { useNSUserInfo } from "@/hooks/useNSUserInfo"; import useSelectedWallet from "@/hooks/useSelectedWallet"; import { getUserId, parseUserId } from "@/networks"; @@ -26,8 +26,8 @@ export const PremiumSubscriptionModal: React.FC<{ userId: string; }> = ({ onClose, isVisible, userId }) => { const { metadata } = useNSUserInfo(userId); - const [network, channelAddress] = parseUserId(userId); - const { data: channel } = usePremiumChannel(network?.id, channelAddress); + const [network, channelOwnerAddress] = parseUserId(userId); + const { data: channel } = useMainPremiumChannel(userId); const selectedWallet = useSelectedWallet(); const { wrapWithFeedback } = useFeedbacks(); @@ -62,7 +62,7 @@ export const PremiumSubscriptionModal: React.FC<{ ); await client.subscribe( { - channelAddr: channelAddress, + channelId: channel.id, membershipKind: selectedItemIndex, recipientAddr: selectedWallet.address, }, @@ -97,7 +97,7 @@ export const PremiumSubscriptionModal: React.FC<{ @@ -105,7 +105,7 @@ export const PremiumSubscriptionModal: React.FC<{ {metadata?.tokenId ? metadata?.public_name : DEFAULT_NAME} - @{metadata?.tokenId ? metadata.tokenId : channelAddress} + @{metadata?.tokenId ? metadata.tokenId : channelOwnerAddress} diff --git a/packages/screens/UserPublicProfile/components/modals/SubscriptionSetupModal.tsx b/packages/screens/UserPublicProfile/components/modals/SubscriptionSetupModal.tsx index 39f3e50cb9..705955c7f6 100644 --- a/packages/screens/UserPublicProfile/components/modals/SubscriptionSetupModal.tsx +++ b/packages/screens/UserPublicProfile/components/modals/SubscriptionSetupModal.tsx @@ -20,7 +20,7 @@ import { ChannelResponse, MembershipConfig, } from "@/contracts-clients/cw721-membership"; -import { usePremiumChannel } from "@/hooks/feed/usePremiumChannel"; +import { useMainPremiumChannel } from "@/hooks/feed/usePremiumChannel"; import useSelectedWallet from "@/hooks/useSelectedWallet"; import { getNativeCurrency, getNetworkFeature, parseUserId } from "@/networks"; import { NetworkFeature } from "@/networks/features"; @@ -45,10 +45,10 @@ export const SubscriptionSetupModal: React.FC<{ isVisible: boolean; onClose: () => void; }> = ({ userId, isVisible, onClose }) => { - const [network, channelAddress] = parseUserId(userId); + const [network] = parseUserId(userId); const networkId = network?.id; - const { data: channel } = usePremiumChannel(networkId, channelAddress); + const { data: channel } = useMainPremiumChannel(userId); if (!networkId || channel === undefined) { return null;