feat: add gold banner on profile screen (#2497)

* feat: add gold banner on profile screen * add web only
showtime-xyz · Nov 2, 2023 · dcf6515 · dcf6515
1 parent 1fd2cfc
commit dcf6515
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/packages/app/components/home/header.tsx b/packages/app/components/home/header.tsx
@@ -40,7 +40,7 @@ const VISIBLE_HEIGHT_NATIVE = 60;
 
 const heightsNative = [HIDDEN_HEIGHT, VISIBLE_HEIGHT_NATIVE];
 
-const CreatorTokensBanner = () => {
+export const CreatorTokensBanner = ({ height }: { height?: number }) => {
   // const showValue = getIsShowCreatorTokenIntroBanner() ? 1 : 0;
   const showValue = 1;
   const showBanner = useSharedValue(showValue);
@@ -50,7 +50,9 @@ const CreatorTokensBanner = () => {
   const user = useContext(UserContext);
   const { width } = useWindowDimensions();
   const isMdWidth = width >= breakpoints["md"];
-  const visibleHeight = isMdWidth
+  const visibleHeight = height
+    ? height
+    : isMdWidth
     ? VISIBLE_HEIGHT_DESKTOP
     : VISIBLE_HEIGHT_NATIVE;
   const heightsWeb = [HIDDEN_HEIGHT, visibleHeight];

diff --git a/packages/app/components/profile/creator-tokens-panel.tsx b/packages/app/components/profile/creator-tokens-panel.tsx
@@ -183,9 +183,7 @@ export const CreatorTokensPanel = ({
                       color={isDark ? colors.gray[300] : colors.gray[500]}
                     />
                   }
-                  text={
-                    "Your estimated USDC wallet\nbalance on the Base network."
-                  }
+                  text={"Your USDC balance on\nthe Base Ethereum L2."}
                 />
               </View>
               <Text tw="text-base font-bold text-gray-900 dark:text-white">

diff --git a/packages/app/components/profile/profile-top.tsx b/packages/app/components/profile/profile-top.tsx
@@ -48,6 +48,7 @@ import { breakpoints } from "design-system/theme";
 import { toast } from "design-system/toast";
 
 import { ButtonGoldLinearGradient } from "../gold-gradient";
+import { CreatorTokensBanner } from "../home/header";
 import { CompleteProfileButton } from "./complete-profile-button";
 import { CreatorTokensPanel } from "./creator-tokens-panel";
 import { ProfileSocial } from "./profile-social";
@@ -266,6 +267,7 @@ export const ProfileTop = memo<ProfileTopProps>(function ProfileTop({
   }
   return (
     <>
+      {Platform.OS === "web" && <CreatorTokensBanner height={52} />}
       <View tw="web:bg-gray-100 overflow-hidden bg-gray-400 dark:bg-gray-800">
         <ProfileCover uri={getFullSizeCover(profileData?.profile)} />
       </View>

diff --git a/packages/app/components/profile/profile.web.tsx b/packages/app/components/profile/profile.web.tsx
@@ -59,6 +59,7 @@ import { EmptyPlaceholder } from "../empty-placeholder";
 import { ButtonGoldLinearGradient } from "../gold-gradient";
 import { HeaderLeft } from "../header";
 import { HeaderRightSm } from "../header/header-right.sm";
+import { CreatorTokensBanner } from "../home/header";
 import { CreatorTokensPanel } from "./creator-tokens-panel";
 import { MyCollection } from "./my-collection";
 import { ProfileError } from "./profile-error";
@@ -251,6 +252,7 @@ const Profile = ({ username }: ProfileScreenProps) => {
           <ProfileTabsNFTProvider tabType={isSelf ? type : undefined}>
             {isProfileMdScreen ? (
               <>
+                <CreatorTokensBanner />
                 <ProfileCover
                   tw="overflow-hidden rounded-b-3xl"
                   uri={getFullSizeCover(profileData?.data?.profile)}
@@ -289,7 +291,7 @@ const Profile = ({ username }: ProfileScreenProps) => {
               </>
             ) : null}
             <View tw="w-full flex-row">
-              <View tw="-mt-3 flex-1">
+              <View tw="flex-1">
                 <ProfileTop
                   address={username}
                   isBlocked={isBlocked}