creator-token improments

apps/next/src/pages/_app.tsx

@@ -40,6 +40,7 @@ import { CreatorChannelsShareScreen } from "app/screens/creator-channles-share";
 import { CreatorTokenBuyScreen } from "app/screens/creator-token/buy-creator-token";
 import { CreatorTokenInviteSignInScreen } from "app/screens/creator-token/invite-sign-in";
 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";
 import { EnterInviteCodeModalScreen } from "app/screens/creatro-tokens-enter-invite-modal";
 import { DetailsScreen } from "app/screens/details";
@@ -266,6 +267,7 @@ function App({ Component, pageProps, router }: AppProps) {
         <CreatorTokenBuyScreen />
         <CreatorTokensShareModalScreen />
         <CreatorTokenInviteSignInScreen />
+        <CreatorTokensSelfServeExplainerScreen />
         {/* Login should be the last so it renders on top of others if needed */}
         <LoginScreen />
         <Toaster />

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

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { Platform } from "react-native";
 
 import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
-import { Showtime, Check2 } from "@showtime-xyz/universal.icon";
+import { Saved, Check2 } from "@showtime-xyz/universal.icon";
 import { useRouter } from "@showtime-xyz/universal.router";
 import { Skeleton } from "@showtime-xyz/universal.skeleton";
 import { colors } from "@showtime-xyz/universal.tailwind";
@@ -236,7 +236,7 @@ export function ClaimButtonIconic({
       buttonColor={isDark ? "#fff" : colors.gray[900]}
       {...rest}
     >
-      <Showtime height={25} width={25} color={isDark ? "#000" : "#fff"} />
+      <Saved height={25} width={25} color={isDark ? "#000" : "#fff"} />
     </FeedSocialButton>
   );
 }

packages/app/components/creator-token/self-serve-explainer.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { Platform } from "react-native";
 
 import { Avatar } from "@showtime-xyz/universal.avatar";
 import { Button } from "@showtime-xyz/universal.button";
@@ -36,12 +37,13 @@ export const SelfServeExplainer = () => {
     creatorTokenDeployStatus.pollDeployStatus();
   }, [creatorTokenDeployStatus]);
 
-  console.log("creatorTokenDeployStatus", creatorTokenDeployStatus.status);
-
   return (
     <View
-      tw="md:max-w-screen-content min-h-screen px-5"
-      style={{ paddingTop: 48 + top, paddingHorizontal: 20 }}
+      tw="md:max-w-screen-content px-5"
+      style={{
+        paddingTop: Platform.select({ web: 0, default: top + 48 }),
+        paddingHorizontal: 20,
+      }}
     >
       <Text tw="text-2xl font-bold text-gray-900 dark:text-white">
         You're invited to be first.

packages/app/components/home/engagement-icons.tsx

@@ -6,8 +6,8 @@ import { View } from "@showtime-xyz/universal.view";
 import { CreatorEditionResponse } from "app/hooks/use-creator-collection-detail";
 import type { NFT } from "app/types";
 
+import { ClaimButtonIconic } from "../claim/claim-button-iconic";
 import { NFTShareDropdown } from "../nft-share-dropdown";
-import { ClaimButtonIconic } from "./claim-button-iconic";
 import { FeedCommentButton } from "./feed-comment-button";
 
 export type EngagementIconsProps = {

packages/app/components/home/header.tsx

@@ -35,7 +35,26 @@ const CreatorTokensBanner = () => {
       </View>
       <Text
         onPress={() => {
-          router.push("/creator-token/self-serve-explainer");
+          console.log(123);
+
+          const as = `/creator-token/self-serve-explainer`;
+          router.push(
+            Platform.select({
+              native: as,
+              web: {
+                pathname: router.pathname,
+                query: {
+                  ...router.query,
+                  creatorTokensSelfServeExplainerModal: true,
+                },
+              } as any,
+            }),
+            Platform.select({
+              native: as,
+              web: router.asPath,
+            }),
+            { shallow: true }
+          );
           // router.push("/creator-token/imalan/invite-sign-in");
         }}
         tw="text-13 ml-2 font-bold text-gray-900 underline"

packages/app/components/profile/profile-tab-bar.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { Platform } from "react-native";
 
 import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
-import { SongsTab, SavedTab, TokensTab } from "@showtime-xyz/universal.icon";
+import { Songs, Saved, Tokens } from "@showtime-xyz/universal.icon";
 import {
   ScollableTabBar,
   TabBarSingle,
@@ -24,11 +24,11 @@ export const ProfileTabBar = (props: any) => {
 
       switch (route.key) {
         case "song_drops_created":
-          return <SongsTab height={16} color={iconColor} />;
+          return <Songs height={16} color={iconColor} />;
         case "song_drops_collected":
-          return <SavedTab height={16} color={iconColor} />;
+          return <Saved height={16} color={iconColor} />;
         case "tokens":
-          return <TokensTab height={16} color={iconColor} />;
+          return <Tokens height={16} color={iconColor} />;
         default:
           return null;
       }

packages/app/components/profile/profile-top.tsx

@@ -11,9 +11,14 @@ import { Button } from "@showtime-xyz/universal.button";
 import { Chip } from "@showtime-xyz/universal.chip";
 import { ClampText } from "@showtime-xyz/universal.clamp-text";
 import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
-import { InformationCircle, Lock } from "@showtime-xyz/universal.icon";
+import {
+  GiftSolid,
+  InformationCircle,
+  Lock,
+} from "@showtime-xyz/universal.icon";
 import { Image } from "@showtime-xyz/universal.image";
 import { LightBox } from "@showtime-xyz/universal.light-box";
+import { Pressable } from "@showtime-xyz/universal.pressable";
 import { PressableScale } from "@showtime-xyz/universal.pressable-scale";
 import { useRouter } from "@showtime-xyz/universal.router";
 import { useSafeAreaInsets } from "@showtime-xyz/universal.safe-area";
@@ -34,6 +39,7 @@ import { getProfileImage, getProfileName } from "app/utilities";
 
 import { breakpoints } from "design-system/theme";
 
+import { ButtonGoldLinearGradient } from "../gold-gradient";
 import { CreatorTokensPanel } from "./creator-tokens-panel";
 import { ProfileSocial } from "./profile-social";
 

packages/app/components/profile/profile.web.tsx

@@ -17,9 +17,12 @@ import type { ParsedUrlQuery } from "querystring";
 import { useSharedValue } from "react-native-reanimated";
 
 import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
+import { GiftSolid } from "@showtime-xyz/universal.icon";
 import { InfiniteScrollList } from "@showtime-xyz/universal.infinite-scroll-list";
+import { Pressable } from "@showtime-xyz/universal.pressable";
 import { useRouter } from "@showtime-xyz/universal.router";
 import { Route, TabBarSingle } from "@showtime-xyz/universal.tab-view";
+import { colors } from "@showtime-xyz/universal.tailwind";
 import { View } from "@showtime-xyz/universal.view";
 
 import { Card } from "app/components/card";
@@ -47,6 +50,7 @@ import { formatProfileRoutes, getProfileImage } from "app/utilities";
 import { Spinner } from "design-system/spinner";
 
 import { EmptyPlaceholder } from "../empty-placeholder";
+import { ButtonGoldLinearGradient } from "../gold-gradient";
 import { HeaderLeft } from "../header";
 import { HeaderRightSm } from "../header/header-right.sm";
 import { CreatorTokensPanel } from "./creator-tokens-panel";
@@ -245,10 +249,27 @@ const Profile = ({ username }: ProfileScreenProps) => {
           <MutateProvider mutate={updateItem}>
             <ProfileTabsNFTProvider tabType={isSelf ? type : undefined}>
               {isProfileMdScreen ? (
-                <ProfileCover
-                  tw="overflow-hidden rounded-b-3xl"
-                  uri={getProfileImage(profileData?.data?.profile)}
-                />
+                <>
+                  <ProfileCover
+                    tw="overflow-hidden rounded-b-3xl"
+                    uri={getProfileImage(profileData?.data?.profile)}
+                  />
+                  <Pressable
+                    tw={[
+                      "absolute right-5 top-2 ml-2 h-8 w-8 items-center justify-center rounded-full bg-black/60",
+                    ]}
+                    onPress={() => {
+                      router.push("/profile/invite-creator-token");
+                    }}
+                  >
+                    <ButtonGoldLinearGradient />
+                    <GiftSolid
+                      width={26}
+                      height={26}
+                      color={colors.gray[900]}
+                    />
+                  </Pressable>
+                </>
               ) : null}
               <View tw="w-full flex-row">
                 <View tw="-mt-4 flex-1">
@@ -260,6 +281,7 @@ const Profile = ({ username }: ProfileScreenProps) => {
                     isError={isError}
                     isSelf={isSelf}
                   />
+
                   <ProfileTabBar
                     onPress={onChangeTabBar}
                     routes={routes}
@@ -298,8 +320,19 @@ const Profile = ({ username }: ProfileScreenProps) => {
       </ProfileHeaderContext.Provider>
       <>
         {isSelf ? (
-          <View tw={["fixed right-4 top-2 z-50 flex md:hidden"]}>
+          <View tw={["fixed right-4 top-2 z-50 flex flex-row md:hidden"]}>
             <HeaderRightSm withBackground />
+            <Pressable
+              tw={[
+                "ml-2 h-8 w-8 items-center justify-center rounded-full bg-black/60",
+              ]}
+              onPress={() => {
+                router.push("/profile/invite-creator-token");
+              }}
+            >
+              <ButtonGoldLinearGradient />
+              <GiftSolid width={26} height={26} color={colors.gray[900]} />
+            </Pressable>
           </View>
         ) : (
           <View tw={["fixed left-4 top-2 z-50 flex md:hidden"]}>

packages/app/screens/creator-tokens-self-serve-explainer.tsx

@@ -1,13 +1,31 @@
+import { Platform } from "react-native";
+
+import { withModalScreen } from "@showtime-xyz/universal.modal-screen";
+
 import { SelfServeExplainer } from "app/components/creator-token/self-serve-explainer";
 import { withColorScheme } from "app/components/memo-with-theme";
 import { useUser } from "app/hooks/use-user";
 import { useTrackPageViewed } from "app/lib/analytics";
 
-export const CreatorTokensSelfServeExplainerScreen = withColorScheme(() => {
+const SelfServeExplainerScreen = withColorScheme(() => {
   useTrackPageViewed({ name: "Creator Tokens self serve explainer" });
   useUser({
     redirectTo: "/login",
   });
 
   return <SelfServeExplainer />;
 });
+
+const CreatorTokensSelfServeExplainerModal = withModalScreen(
+  SelfServeExplainerScreen,
+  {
+    title: "",
+    matchingPathname: "/creator-token/self-serve-explainer",
+    matchingQueryParam: "creatorTokensSelfServeExplainerModal",
+    disableBackdropPress: true,
+  }
+);
+export const CreatorTokensSelfServeExplainerScreen =
+  Platform.OS === "web"
+    ? CreatorTokensSelfServeExplainerModal
+    : SelfServeExplainerScreen;

packages/design-system/icon/icon.stories.tsx

@@ -200,9 +200,9 @@ export const Default = () => {
           <IconItem icon={Icon.RaffleBadge} title="RaffleBadge" />
           <IconItem icon={Icon.MusicBadge} title="MusicBadge" />
           <IconItem icon={Icon.LockBadge} title="LockBadge" />
-          <IconItem icon={Icon.SongsTab} title="SongsTab" />
-          <IconItem icon={Icon.SavedTab} title="SavedTab" />
-          <IconItem icon={Icon.TokensTab} title="TokensTab" />
+          <IconItem icon={Icon.Songs} title="Songs" />
+          <IconItem icon={Icon.Saved} title="Saved" />
+          <IconItem icon={Icon.Tokens} title="Tokens" />
           <IconItem icon={Icon.Photo} title="Photo" />
           <IconItem icon={Icon.Gallery} title="Gallery" />
           <IconItem icon={Icon.PieChart} title="PieChart" />

packages/design-system/icon/index.ts

@@ -153,9 +153,9 @@ export { default as Messagev2 } from "./Messagev2";
 export { default as MusicBadge } from "./MusicBadge";
 export { default as RaffleBadge } from "./RaffleBadge";
 export { default as LockBadge } from "./LockBadge";
-export { default as SongsTab } from "./SongsTab";
-export { default as SavedTab } from "./SavedTab";
-export { default as TokensTab } from "./TokensTab";
+export { default as Songs } from "./Songs";
+export { default as Saved } from "./Saved";
+export { default as Tokens } from "./Tokens";
 export { default as Photo } from "./Photo";
 export { default as Gallery } from "./Gallery";
 export { default as GrowthArrow } from "./GrowthArrow";