Skip to content
This repository has been archived by the owner on Dec 21, 2023. It is now read-only.

Commit

Permalink
Merge branch 'staging' into feat/new-notification-types
Browse files Browse the repository at this point in the history
  • Loading branch information
@hirbod
hirbod committed Nov 7, 2023
2 parents e301f48 + c280886 commit 9552357
Show file tree
Hide file tree
Showing 23 changed files with 636 additions and 202 deletions.
2 changes: 0 additions & 2 deletions apps/next/src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import { CreatorTokenCollectedScreen } from "app/screens/creator-token/creator-t
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";
Expand Down Expand Up @@ -267,7 +266,6 @@ 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 */}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "showtime",
"version": "149.0.17",
"version": "149.0.19",
"private": true,
"license": "MIT",
"devDependencies": {
Expand Down
344 changes: 312 additions & 32 deletions packages/app/components/creator-token/creator-token-users.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
import { Platform } from "react-native";
import { Platform, useWindowDimensions } from "react-native";

import { Avatar } from "@showtime-xyz/universal.avatar";
import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
import { Showtime } from "@showtime-xyz/universal.icon";
import {
GoldHexagon,
Showtime,
ShowtimeRounded,
} from "@showtime-xyz/universal.icon";
import { PressableHover } from "@showtime-xyz/universal.pressable-hover";
import { useRouter } from "@showtime-xyz/universal.router";
import { Skeleton } from "@showtime-xyz/universal.skeleton";
import { colors } from "@showtime-xyz/universal.tailwind";
import { Text } from "@showtime-xyz/universal.text";
import { VerificationBadge } from "@showtime-xyz/universal.verification-badge";
import { View, ViewProps } from "@showtime-xyz/universal.view";

import { CreatorTokenUser } from "app/hooks/creator-token/use-creator-tokens";
import {
CreatorTokenUser,
TopCreatorTokenUser,
} from "app/hooks/creator-token/use-creator-tokens";
import { useHeaderHeight } from "app/lib/react-navigation/elements";
import { Link } from "app/navigation/link";
import { formatAddressShort } from "app/utilities";

import { breakpoints } from "design-system/theme";

export const CreatorTokensTitle = ({ title }: { title: string }) => {
const headerHeight = useHeaderHeight();
Expand All @@ -32,46 +45,313 @@ export const CreatorTokensTitle = ({ title }: { title: string }) => {
</View>
);
};
export const TopCreatorTokensItem = ({

export const TopCreatorTokenItemOnProfile = ({
index,
tw,
item,
showName = false,
...rest
}: ViewProps & { index: number; item: CreatorTokenUser }) => {
const isDark = useIsDarkMode();
}: ViewProps & {
index?: number;
item: CreatorTokenUser;
showName?: boolean;
}) => {
const router = useRouter();
return (
<PressableHover
tw={[
"mb-3 items-center rounded-md border border-gray-200 bg-slate-50 px-1 py-4 dark:border-gray-700 dark:bg-gray-900",
tw,
].join(" ")}
tw={["py-1.5", tw].join(" ")}
onPress={() => router.push(`/@${item.username}`)}
{...rest}
>
<>
<View tw="mb-3">
<View tw="absolute -left-1 top-0">
<Showtime
width={8}
height={8}
color={isDark ? colors.white : colors.gray[900]}
/>
</View>
<Avatar url={item?.img_url} size={44} />
<View tw="flex-row items-center">
{index != undefined ? (
index < 3 ? (
<View tw="mr-1 items-center justify-center">
<View tw="absolute -top-1">
<GoldHexagon width={18} height={18} />
</View>
<Text tw="text-xs font-bold text-white">{index + 1}</Text>
</View>
) : (
<View tw="mr-1 items-center justify-center">
<Text tw="text-xs font-bold text-gray-700 dark:text-white">
{index + 1}
</Text>
</View>
)
) : null}
<View tw="web:flex-1 ml-2 flex-row items-center">
<Avatar url={item?.img_url} size={34} />
<View tw="w-2" />
{showName ? (
<View tw="flex-1 justify-center">
{item.name ? (
<>
<Text
tw="text-sm font-semibold text-gray-600 dark:text-gray-300"
numberOfLines={1}
>
{item.name}
</Text>
<View tw="h-1" />
</>
) : null}

<View tw="flex-row items-center">
<Text
tw="text-sm font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
{item.username ? (
<>@{item.username}</>
) : (
<>{formatAddressShort(item.wallet_address)}</>
)}
</Text>
{Boolean(item.verified) && (
<View tw="ml-1">
<VerificationBadge size={14} />
</View>
)}
</View>
</View>
) : (
<Text
tw="flex-1 text-sm font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
@{item?.username}
</Text>
)}
</View>
<Text
tw="px-1 text-sm font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
@{item?.username}
</Text>
{/* <View tw="h-3" />
<Text tw="text-sm font-bold text-gray-900 dark:text-white">$2.60</Text> */}
</>
{/* <View tw="absolute -right-2.5 -top-2.5 h-6 min-w-[24px] items-center justify-center rounded-full bg-slate-500 px-1.5 text-gray-500 dark:bg-gray-600">
<Text tw="text-xs font-semibold text-white">{index + 1}</Text>
</View> */}
</View>
</PressableHover>
);
};
export const TopCreatorTokenItem = ({
index,
tw,
item,
...rest
}: ViewProps & {
index?: number;
item: TopCreatorTokenUser;
}) => {
const router = useRouter();
const isDark = useIsDarkMode();

return (
<Link
href={
item.owner_profile?.username
? `/@${item.owner_profile?.username}`
: `/@${item.owner_address}`
}
>
<View tw={["py-1.5", tw].join(" ")} {...rest}>
<View tw="flex-row items-center">
<View tw="min-w-[24px]">
{index != undefined ? (
index < 3 ? (
<View tw="items-center justify-center">
<View tw="absolute -top-1">
<GoldHexagon width={18} height={18} />
</View>
<Text tw="text-xs font-bold text-white">{index + 1}</Text>
</View>
) : (
<View tw="items-center justify-center">
<Text tw="text-xs font-bold text-gray-700 dark:text-white">
{index + 1}
</Text>
</View>
)
) : null}
</View>
<View tw="ml-1 flex-1 flex-row items-center">
<Avatar url={item?.owner_profile?.img_url} size={34} />
<View tw="ml-2 flex-1 justify-center">
<View tw="flex-row items-center">
<Text
tw="text-sm font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
@
{item.owner_profile?.username
? item.owner_profile?.username
: formatAddressShort(item.owner_address)}
</Text>
{Boolean(item.owner_profile?.verified) && (
<View tw="ml-1">
<VerificationBadge size={14} />
</View>
)}
</View>
<View tw="mt-1 flex-row items-center">
<Text
tw="text-xs font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
{item.nft_count}
</Text>
<View tw="w-1" />
<ShowtimeRounded
width={14}
height={14}
color={isDark ? colors.white : colors.gray[900]}
/>
</View>
</View>
</View>
</View>
</View>
</Link>
);
};
export const TopCreatorTokenListItem = ({
index,
tw,
item,
isSimplified = false,
isMdWidth,
...rest
}: ViewProps & {
index?: number;
item: TopCreatorTokenUser;
isSimplified?: boolean;
isMdWidth?: boolean;
}) => {
const isDark = useIsDarkMode();
if (!isMdWidth) {
return <TopCreatorTokenItem index={index} tw={tw} item={item} {...rest} />;
}
return (
<Link
href={
item.owner_profile?.username
? `/@${item.owner_profile?.username}`
: `/@${item.owner_address}`
}
>
<View tw={["py-2.5", tw].join(" ")} {...rest}>
<View tw="flex-row items-center">
<View tw="min-w-[24px]">
{index != undefined ? (
index < 3 ? (
<View tw="items-center justify-center">
<View tw="absolute -top-1">
<GoldHexagon width={18} height={18} />
</View>
<Text tw="text-xs font-bold text-white">{index + 1}</Text>
</View>
) : (
<View tw="items-center justify-center">
<Text tw="text-xs font-bold text-gray-700 dark:text-white">
{index + 1}
</Text>
</View>
)
) : null}
</View>
<View tw="web:flex-1 ml-2 flex-row items-center">
<Avatar url={item?.owner_profile?.img_url} size={34} />
<View tw="w-2" />
<View tw="min-w-[180px] flex-row items-center">
<Text
tw="text-sm font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
@
{item.owner_profile?.username
? item.owner_profile?.username
: formatAddressShort(item.owner_address)}
</Text>
<View tw="h-1" />
{Boolean(item.owner_profile?.verified) && (
<View tw="ml-1">
<VerificationBadge size={14} />
</View>
)}
</View>
<View tw="min-w-[50px] flex-row items-center">
<Text
tw="text-xs font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
{item.nft_count}
</Text>
<View tw="w-1" />
<ShowtimeRounded
width={14}
height={14}
color={isDark ? colors.white : colors.gray[900]}
/>
</View>
{!isSimplified ? (
<View tw="ml-6 min-w-[150px] flex-1">
<Text
tw="text-sm font-bold text-gray-900 dark:text-white"
numberOfLines={1}
>
{item.owner_profile?.name}
</Text>
<View tw="h-2" />
<Text
tw="text-xs text-gray-500 dark:text-gray-400"
numberOfLines={3}
>
{item.owner_profile?.bio}
</Text>
</View>
) : null}
</View>
</View>
</View>
</Link>
);
};

export const TopCreatorTokenSkeleton = ({ tw, ...rest }: ViewProps) => {
return (
<View tw={["py-1.5", tw].join(" ")} {...rest}>
<View tw="flex-row items-center pl-1">
<Skeleton width={16} height={16} show radius={8} />
<View tw="ml-2 flex-row items-center">
<Skeleton width={34} height={34} show radius={999} />
<View tw="w-2" />
<View tw="">
<Skeleton width={100} height={13} show radius={4} />
<View tw="h-1" />
<Skeleton width={80} height={13} show radius={4} />
</View>
</View>
</View>
</View>
);
};

export const TopCreatorTokenListItemSkeleton = ({
tw,
isMdWidth,
...rest
}: ViewProps & {
isMdWidth: boolean;
}) => {
if (!isMdWidth) {
return <TopCreatorTokenSkeleton tw={tw} {...rest} />;
}
return (
<View tw={["py-2.5", tw].join(" ")} {...rest}>
<View tw="flex-row items-center pl-1">
<Skeleton width={16} height={16} show radius={8} />
<View tw="w-2.5" />
<Skeleton width={34} height={34} show radius={999} />
<View tw="w-2" />
<Skeleton width={120} height={13} show radius={4} />
<View tw="w-4" />
<Skeleton width={44} height={14} show radius={4} />
</View>
</View>
);
};
Loading

0 comments on commit 9552357

Please sign in to comment.