chore(premium-feed): update front to use channel id

Signed-off-by: Norman Meier <[email protected]>

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);
+};

packages/hooks/feed/usePremiumSubscription.ts

@@ -1,31 +1,34 @@
 import { useQuery } from "@tanstack/react-query";
 
+import { useMainPremiumChannel } from "./usePremiumChannel";
+
 import { parseUserId } from "@/networks";
 import { mustGetCw721MembershipQueryClient } from "@/utils/feed/client";
 
 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 },
   );
 };

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,

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,15 +97,15 @@ export const PremiumSubscriptionModal: React.FC<{
           <SpacerColumn size={2} />
 
           <UserAvatarWithFrame
-            userId={getUserId(network.id, channelAddress)}
+            userId={getUserId(network.id, channelOwnerAddress)}
             size="XL"
           />
           <SpacerColumn size={2} />
           <BrandText style={[fontBold16]}>
             {metadata?.tokenId ? metadata?.public_name : DEFAULT_NAME}
           </BrandText>
           <BrandText style={[fontMedium14, { color: neutral55, marginTop: 2 }]}>
-            @{metadata?.tokenId ? metadata.tokenId : channelAddress}
+            @{metadata?.tokenId ? metadata.tokenId : channelOwnerAddress}
           </BrandText>
         </View>
       </View>

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;