Feat/integrate creator token collectors

apps/next/src/pages/_app.tsx

@@ -37,8 +37,11 @@ import { CreatorChannelsMessageReactionsScreen } from "app/screens/creator-chann
 import { CreatorChannelsSettingsScreen } from "app/screens/creator-channels-settings";
 import { CreatorChannelsShareScreen } from "app/screens/creator-channles-share";
 import { CreatorTokenBuyScreen } from "app/screens/creator-token/buy-creator-token";
+import { CreatorTokenCollectedScreen } from "app/screens/creator-token/creator-token-collected";
+import { CreatorTokenCollectorsScreen } from "app/screens/creator-token/creator-token-collectors";
 import { InviteCreatorTokenScreen } from "app/screens/creator-token/invite-creator-token";
 import { CreatorTokenInviteSignInScreen } from "app/screens/creator-token/invite-sign-in";
+import { TopCreatorTokenScreen } from "app/screens/creator-token/top-creator-token";
 import { CreatorTokensExplanationScreen } from "app/screens/creator-tokens-explanation";
 import { CreatorTokensSelfServeExplainerScreen } from "app/screens/creator-tokens-self-serve-explainer";
 import { CreatorTokensShareModalScreen } from "app/screens/creator-tokens-share";
@@ -264,6 +267,9 @@ function App({ Component, pageProps, router }: AppProps) {
         <CreatorTokensSelfServeExplainerScreen />
         <CreatorTokensImportAllowlistScreen />
         <CreatorTokensImportAllowlistSuccessScreen />
+        <TopCreatorTokenScreen />
+        <CreatorTokenCollectedScreen />
+        <CreatorTokenCollectorsScreen />
         {/* Login should be the last so it renders on top of others if needed */}
         <LoginScreen />
         <Toaster />

packages/app/components/claim/claim-button-iconic.tsx

@@ -38,7 +38,7 @@ export function ClaimButtonIconic({
   const redirectToDropImageShareScreen = useRedirectDropImageShareScreen();
   const { handleClaimNFT } = useClaimDrop(edition);
 
-  const viewCollecters = useCallback(() => {
+  const viewCollectors = useCallback(() => {
     const as = `/collectors/${nft?.chain_name}/${nft?.contract_address}/${nft?.token_id}`;
     router.push(
       Platform.select({
@@ -84,7 +84,7 @@ export function ClaimButtonIconic({
               tw={[
                 "text-center text-xs font-semibold text-gray-900 dark:text-white",
               ]}
-              onPress={viewCollecters}
+              onPress={viewCollectors}
             >
               {formatClaimNumber(edition.total_claimed_count)}
               {edition.creator_airdrop_edition.edition_size > 0
@@ -110,7 +110,7 @@ export function ClaimButtonIconic({
               tw={[
                 "text-center text-xs font-semibold text-gray-900 dark:text-white",
               ]}
-              onPress={viewCollecters}
+              onPress={viewCollectors}
             >
               {formatClaimNumber(edition.total_claimed_count)}
               {edition.creator_airdrop_edition.edition_size > 0
@@ -134,7 +134,7 @@ export function ClaimButtonIconic({
               tw={[
                 "text-center text-xs font-semibold text-gray-900 dark:text-white",
               ]}
-              onPress={viewCollecters}
+              onPress={viewCollectors}
             >
               {formatClaimNumber(edition.total_claimed_count)}
               {edition.creator_airdrop_edition.edition_size > 0
@@ -194,7 +194,7 @@ export function ClaimButtonIconic({
                   ? "text-orange-500"
                   : "text-gray-900 dark:text-white",
               ]}
-              onPress={viewCollecters}
+              onPress={viewCollectors}
             >
               {formatClaimNumber(edition.total_claimed_count)}
               {edition.creator_airdrop_edition.edition_size > 0
@@ -224,7 +224,7 @@ export function ClaimButtonIconic({
                 ? "text-orange-500"
                 : "text-gray-900 dark:text-white",
             ]}
-            onPress={viewCollecters}
+            onPress={viewCollectors}
           >
             {formatClaimNumber(edition.total_claimed_count)}
             {edition.creator_airdrop_edition.edition_size > 0

packages/app/components/creator-token/creator-token-collected.tsx

@@ -0,0 +1,128 @@
+import { useCallback } from "react";
+import { useWindowDimensions, Platform } from "react-native";
+
+import type { ListRenderItemInfo } from "@shopify/flash-list";
+
+import { Avatar } from "@showtime-xyz/universal.avatar";
+import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
+import { Showtime } from "@showtime-xyz/universal.icon";
+import { InfiniteScrollList } from "@showtime-xyz/universal.infinite-scroll-list";
+import { PressableHover } from "@showtime-xyz/universal.pressable-hover";
+import { useRouter } from "@showtime-xyz/universal.router";
+import Spinner from "@showtime-xyz/universal.spinner";
+import { colors } from "@showtime-xyz/universal.tailwind";
+import { Text } from "@showtime-xyz/universal.text";
+import { View, ViewProps } from "@showtime-xyz/universal.view";
+
+import { EmptyPlaceholder } from "app/components/empty-placeholder";
+import { ErrorBoundary } from "app/components/error-boundary";
+import {
+  CreatorTokenUser,
+  useCreatorTokenCoLlected,
+  useCreatorTokenCollectors,
+} from "app/hooks/creator-token/use-creator-tokens";
+import { useHeaderHeight } from "app/lib/react-navigation/elements";
+import { createParam } from "app/navigation/use-param";
+
+import { breakpoints } from "design-system/theme";
+
+import {
+  CreatorTokensTitle,
+  TopCreatorTokensItem,
+} from "./creator-token-users";
+
+const keyExtractor = (item: CreatorTokenUser) => `${item.profile_id}`;
+type Query = {
+  profileId: string;
+};
+
+const { useParam } = createParam<Query>();
+
+export const CreatorTokenCollectedList = () => {
+  const { height: screenHeight, width } = useWindowDimensions();
+  const [profileId] = useParam("profileId");
+  const isMdWidth = width >= breakpoints["md"];
+  const { data: list, isLoading } = useCreatorTokenCoLlected(profileId);
+  const numColumns = 3;
+  const itemWidth = isMdWidth ? 130 : (width - 40 - 2 * 16) / 3;
+
+  const renderItem = useCallback(
+    ({
+      item,
+      index,
+    }: ListRenderItemInfo<CreatorTokenUser & { loading?: boolean }>) => {
+      return (
+        <View tw="w-full items-center">
+          <TopCreatorTokensItem
+            item={item}
+            index={index}
+            style={{ width: itemWidth }}
+          />
+        </View>
+      );
+    },
+    [itemWidth]
+  );
+
+  const getItemType = useCallback(
+    (_: CreatorTokenUser, index: number) => {
+      const marginLeft = isMdWidth ? 0 : index % numColumns === 0 ? 0 : 8;
+      if (marginLeft) {
+        return "right";
+      }
+      return "left";
+    },
+    [isMdWidth, numColumns]
+  );
+
+  const ListEmptyComponent = useCallback(() => {
+    if (isLoading) {
+      return (
+        <View tw="mx-auto w-full max-w-screen-xl justify-center md:px-0">
+          <Spinner />
+        </View>
+      );
+    }
+    return (
+      <EmptyPlaceholder
+        title={"No creator tokens, yet."}
+        tw="h-[50vh]"
+        hideLoginBtn
+      />
+    );
+  }, [isLoading]);
+
+  const ListHeaderComponent = useCallback(() => {
+    return <CreatorTokensTitle title="Creator Token Collected " />;
+  }, []);
+
+  return (
+    <View tw="bg-white px-2 dark:bg-black md:px-4">
+      <ErrorBoundary>
+        <InfiniteScrollList
+          useWindowScroll
+          data={list || []}
+          preserveScrollPosition
+          keyExtractor={keyExtractor}
+          numColumns={numColumns}
+          renderItem={renderItem}
+          drawDistance={500}
+          getItemType={getItemType}
+          style={{
+            height: Platform.select({
+              web: undefined,
+              default: screenHeight,
+            }),
+          }}
+          contentContainerStyle={{
+            paddingHorizontal: 8,
+          }}
+          overscan={12}
+          ListEmptyComponent={ListEmptyComponent}
+          ListHeaderComponent={ListHeaderComponent}
+          estimatedItemSize={101}
+        />
+      </ErrorBoundary>
+    </View>
+  );
+};

packages/app/components/creator-token/creator-token-collectors.tsx

@@ -0,0 +1,126 @@
+import { useCallback } from "react";
+import { useWindowDimensions, Platform } from "react-native";
+
+import type { ListRenderItemInfo } from "@shopify/flash-list";
+
+import { Avatar } from "@showtime-xyz/universal.avatar";
+import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
+import { Showtime } from "@showtime-xyz/universal.icon";
+import { InfiniteScrollList } from "@showtime-xyz/universal.infinite-scroll-list";
+import { PressableHover } from "@showtime-xyz/universal.pressable-hover";
+import { useRouter } from "@showtime-xyz/universal.router";
+import Spinner from "@showtime-xyz/universal.spinner";
+import { colors } from "@showtime-xyz/universal.tailwind";
+import { Text } from "@showtime-xyz/universal.text";
+import { View, ViewProps } from "@showtime-xyz/universal.view";
+
+import { EmptyPlaceholder } from "app/components/empty-placeholder";
+import { ErrorBoundary } from "app/components/error-boundary";
+import {
+  CreatorTokenUser,
+  useCreatorTokenCoLlected,
+  useCreatorTokenCollectors,
+} from "app/hooks/creator-token/use-creator-tokens";
+import { createParam } from "app/navigation/use-param";
+
+import { breakpoints } from "design-system/theme";
+
+import {
+  CreatorTokensTitle,
+  TopCreatorTokensItem,
+} from "./creator-token-users";
+
+const keyExtractor = (item: CreatorTokenUser) => `${item.profile_id}`;
+type Query = {
+  creatorTokenId: string;
+};
+
+const { useParam } = createParam<Query>();
+
+export const CreatorTokenCollectorsList = () => {
+  const { height: screenHeight, width } = useWindowDimensions();
+  const [creatorTokenId] = useParam("creatorTokenId");
+  const isMdWidth = width >= breakpoints["md"];
+  const { data: list, isLoading } = useCreatorTokenCollectors(creatorTokenId);
+  const numColumns = 3;
+  const itemWidth = isMdWidth ? 130 : (width - 40 - 2 * 16) / 3;
+  const renderItem = useCallback(
+    ({
+      item,
+      index,
+    }: ListRenderItemInfo<CreatorTokenUser & { loading?: boolean }>) => {
+      return (
+        <View tw="w-full items-center">
+          <TopCreatorTokensItem
+            item={item}
+            index={index}
+            style={{ width: itemWidth }}
+          />
+        </View>
+      );
+    },
+    [itemWidth]
+  );
+
+  const getItemType = useCallback(
+    (_: CreatorTokenUser, index: number) => {
+      const marginLeft = isMdWidth ? 0 : index % numColumns === 0 ? 0 : 8;
+      if (marginLeft) {
+        return "right";
+      }
+      return "left";
+    },
+    [isMdWidth, numColumns]
+  );
+
+  const ListEmptyComponent = useCallback(() => {
+    if (isLoading) {
+      return (
+        <View tw="mx-auto w-full max-w-screen-xl justify-center md:px-0">
+          <Spinner />
+        </View>
+      );
+    }
+    return (
+      <EmptyPlaceholder
+        title={"No creator tokens, yet."}
+        tw="h-[50vh]"
+        hideLoginBtn
+      />
+    );
+  }, [isLoading]);
+
+  const ListHeaderComponent = useCallback(() => {
+    return <CreatorTokensTitle title="Creator Token Collectors " />;
+  }, []);
+
+  return (
+    <View tw="bg-white px-2 dark:bg-black md:px-4">
+      <ErrorBoundary>
+        <InfiniteScrollList
+          useWindowScroll
+          data={list || []}
+          preserveScrollPosition
+          keyExtractor={keyExtractor}
+          numColumns={numColumns}
+          renderItem={renderItem}
+          drawDistance={500}
+          getItemType={getItemType}
+          style={{
+            height: Platform.select({
+              web: undefined,
+              default: screenHeight,
+            }),
+          }}
+          contentContainerStyle={{
+            paddingHorizontal: 8,
+          }}
+          overscan={12}
+          ListEmptyComponent={ListEmptyComponent}
+          ListHeaderComponent={ListHeaderComponent}
+          estimatedItemSize={101}
+        />
+      </ErrorBoundary>
+    </View>
+  );
+};