Merge pull request #1750 from geyserfund/sajal/gys-9226-final-reveal-…

…work Sajal/gys 9226 final reveal work
geyserfund · Dec 18, 2024 · a42bc78 · a42bc78
2 parents 85f45f7 + 4e823df
commit a42bc78
Show file tree

Hide file tree

Showing 91 changed files with 18,590 additions and 10,871 deletions.
diff --git a/language/translations/en.json b/language/translations/en.json
@@ -1413,5 +1413,63 @@
   "login": "login",
   "To manage your subscription in the future, please login to stripe with your provided email.": "To manage your subscription in the future, please login to stripe with your provided email.",
   "Email is required when subscribing to a project.": "Email is required when subscribing to a project.",
-  "Card": "Card"
+  "Card": "Card",
+  "GEYSER GUARDIANS": "GEYSER GUARDIANS",
+  "Warrior": "Warrior",
+  "< Choose your character >": "< Choose your character >",
+  "Geyser’s <1>mission</1> is to push Bitcoin adoption forward. Geyser Guardians are the defenders of this mission. Their bravery will be rewarded with rare artifacts. Their names shall be remembered in future epochs, and soon, you can become one of them. Enter your email to be notified first–the first 121 Guardians will get a special deal.": "Geyser’s <1>mission</1> is to push Bitcoin adoption forward. Geyser Guardians are the defenders of this mission. Their bravery will be rewarded with rare artifacts. Their names shall be remembered in future epochs, and soon, you can become one of them. Enter your email to be notified first–the first 121 Guardians will get a special deal.",
+  "Legend": "Legend",
+  "6 days, 2 hours, 18 seconds.": "6 days, 2 hours, 18 seconds.",
+  "Knight": "Knight",
+  "More will be revealed in": "More will be revealed in",
+  "Sign me up": "Sign me up",
+  "King": "King",
+  "0 days, 0 hours, 0 seconds.": "0 days, 0 hours, 0 seconds.",
+  "6 days, 2 hours, 15 seconds.": "6 days, 2 hours, 15 seconds.",
+  "6 days, 2 hours, 13 seconds.": "6 days, 2 hours, 13 seconds.",
+  "6 days, 2 hours, 11 seconds.": "6 days, 2 hours, 11 seconds.",
+  "6 days, 2 hours, 10 seconds.": "6 days, 2 hours, 10 seconds.",
+  "6 days, 2 hours, 8 seconds.": "6 days, 2 hours, 8 seconds.",
+  "6 days, 2 hours, 6 seconds.": "6 days, 2 hours, 6 seconds.",
+  "6 days, 2 hours, 4 seconds.": "6 days, 2 hours, 4 seconds.",
+  "6 days, 2 hours, 58 seconds.": "6 days, 2 hours, 58 seconds.",
+  "6 days, 2 hours, 53 seconds.": "6 days, 2 hours, 53 seconds.",
+  "6 days, 2 hours, 50 seconds.": "6 days, 2 hours, 50 seconds.",
+  "6 days, 2 hours, 46 seconds.": "6 days, 2 hours, 46 seconds.",
+  "6 days, 2 hours, 45 seconds.": "6 days, 2 hours, 45 seconds.",
+  "6 days, 2 hours, 42 seconds.": "6 days, 2 hours, 42 seconds.",
+  "6 days, 2 hours, 41 seconds.": "6 days, 2 hours, 41 seconds.",
+  "6 days, 2 hours, 38 seconds.": "6 days, 2 hours, 38 seconds.",
+  "6 days, 2 hours, 34 seconds.": "6 days, 2 hours, 34 seconds.",
+  "6 days, 2 hours, 31 seconds.": "6 days, 2 hours, 31 seconds.",
+  "6 days, 2 hours, 30 seconds.": "6 days, 2 hours, 30 seconds.",
+  "6 days, 2 hours, 26 seconds.": "6 days, 2 hours, 26 seconds.",
+  "6 days, 2 hours, 25 seconds.": "6 days, 2 hours, 25 seconds.",
+  "6 days, 2 hours, 21 seconds.": "6 days, 2 hours, 21 seconds.",
+  "6 days, 2 hours, 17 seconds.": "6 days, 2 hours, 17 seconds.",
+  "6 days, 2 hours, 16 seconds.": "6 days, 2 hours, 16 seconds.",
+  "6 days, 2 hours, 12 seconds.": "6 days, 2 hours, 12 seconds.",
+  "6 days, 2 hours, 9 seconds.": "6 days, 2 hours, 9 seconds.",
+  "6 days, 2 hours, 5 seconds.": "6 days, 2 hours, 5 seconds.",
+  "6 days, 2 hours, 1 seconds.": "6 days, 2 hours, 1 seconds.",
+  "6 days, 2 hours, 0 seconds.": "6 days, 2 hours, 0 seconds.",
+  "6 days, 2 hours, 56 seconds.": "6 days, 2 hours, 56 seconds.",
+  "6 days, 2 hours, 55 seconds.": "6 days, 2 hours, 55 seconds.",
+  "6 days, 2 hours, 52 seconds.": "6 days, 2 hours, 52 seconds.",
+  "6 days, 2 hours, 51 seconds.": "6 days, 2 hours, 51 seconds.",
+  "6 days, 2 hours, 48 seconds.": "6 days, 2 hours, 48 seconds.",
+  "6 days, 2 hours, 47 seconds.": "6 days, 2 hours, 47 seconds.",
+  "6 days, 2 hours, 44 seconds.": "6 days, 2 hours, 44 seconds.",
+  "6 days, 2 hours, 43 seconds.": "6 days, 2 hours, 43 seconds.",
+  "6 days, 2 hours, 40 seconds.": "6 days, 2 hours, 40 seconds.",
+  "6 days, 2 hours, 39 seconds.": "6 days, 2 hours, 39 seconds.",
+  "6 days, 2 hours, 36 seconds.": "6 days, 2 hours, 36 seconds.",
+  "6 days, 2 hours, 35 seconds.": "6 days, 2 hours, 35 seconds.",
+  "6 days, 2 hours, 32 seconds.": "6 days, 2 hours, 32 seconds.",
+  "6 days, 2 hours, 28 seconds.": "6 days, 2 hours, 28 seconds.",
+  "6 days, 2 hours, 27 seconds.": "6 days, 2 hours, 27 seconds.",
+  "6 days, 2 hours, 24 seconds.": "6 days, 2 hours, 24 seconds.",
+  "6 days, 2 hours, 22 seconds.": "6 days, 2 hours, 22 seconds.",
+  "6 days, 2 hours, 19 seconds.": "6 days, 2 hours, 19 seconds.",
+  "6 days, 2 hours, 14 seconds.": "6 days, 2 hours, 14 seconds."
 }
diff --git a/src/AppLayout.tsx b/src/AppLayout.tsx
@@ -9,10 +9,12 @@ import { useAuthContext } from './context'
 import { useActivityHook } from './modules/discovery/hooks/useActivityHook'
 import { PlatformNavBar } from './modules/navigation/platformNavBar/PlatformNavBar'
 import { InfoBanner } from './modules/notification/InfoBanner'
+import { NoticeBanner } from './modules/notification/NoticeBanner'
 import { LoadingPage } from './pages/loading'
 import { dimensions, ID } from './shared/constants'
 import { useLayoutAnimation } from './shared/hooks'
 import { useInitBtcRate } from './shared/hooks/platform/useInitBtcRate'
+import { useInitialColorModeEffect } from './shared/hooks/utils/useInitialColorMode'
 import { useMobileMode } from './utils'
 import { useScrollToTop } from './utils/tools/useScrollToTop'
 
@@ -27,6 +29,7 @@ export const AppLayout = () => {
   useHistoryRoutes()
   useActivityHook()
   useScrollToTop()
+  useInitialColorModeEffect()
 
   const layoutAnimationClassName = useLayoutAnimation()
 
@@ -68,6 +71,7 @@ export const AppLayout = () => {
               <Outlet />
             </Box>
             <InfoBanner />
+            <NoticeBanner />
           </Box>
         </Box>
       </PullToRefresh>

diff --git a/src/api/airtable.ts b/src/api/airtable.ts
@@ -22,6 +22,16 @@ export const fetchInfoBannerData = async () => {
   }).then((response) => response.json())
 }
 
+export const fetchNoticeBannerData = async () => {
+  return fetch(`${AIRTABLE_API}/Notice%20Banner?view=Grid%20view`, {
+    method: 'GET',
+    headers: {
+      Authorization: `Bearer ${VITE_APP_AIR_TABLE_KEY}`,
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => response.json())
+}
+
 export const fetchHeroSponsorshipBannerData = async () => {
   return fetch(`${AIRTABLE_API}/Hero%20Sponsorship%20Banner?view=Grid%20view`, {
     method: 'GET',

diff --git a/src/config/GlobalStyles.tsx b/src/config/GlobalStyles.tsx
@@ -6,10 +6,8 @@ const GlobalStyles = () => (
   <Global
     styles={`
         @import url('https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700&display=swap');
 		    @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Livvic:wght@400;500;600;700&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Hubot+Sans:ital,wght@0,200..900;1,200..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Figtree:ital,wght@0,300..900;1,300..900&family=Hubot+Sans:ital,wght@0,200..900;1,200..900&display=swap');
 
         
         @font-face {

diff --git a/src/config/theme/components/buttonTheme.ts b/src/config/theme/components/buttonTheme.ts
@@ -346,7 +346,6 @@ export const buttonTheme: ComponentStyleConfig = {
       color: theme.colors.neutral[900],
       backgroundColor: theme.colors.neutral[0],
       textDecoration: 'none',
-      fontFamily: fonts.roboto,
       fontSize: '14px',
       padding: '12px',
       iconSpacing: '10px',

diff --git a/src/config/theme/theme.ts b/src/config/theme/theme.ts
@@ -75,13 +75,6 @@ export const theme = {
           lineHeight: 1.6,
           fontSize: '16px',
         }),
-        satoshi: () => ({
-          fontFamily: fonts.mono,
-          fontWeight: 500,
-          fontSize: '32px',
-          lineHeight: '1.4em',
-          letterSpacing: '0.01125em',
-        }),
       },
     },
     Link: {

diff --git a/src/graphqlBase/fragments/user.ts b/src/graphqlBase/fragments/user.ts
@@ -35,6 +35,7 @@ export const FRAGMENT_USER_ME = gql`
     id
     username
     heroId
+    guardianType
     imageUrl
     email
     ranking

diff --git a/src/modules/discovery/pages/activity/components/ActivityFeedItem.tsx b/src/modules/discovery/pages/activity/components/ActivityFeedItem.tsx
@@ -4,6 +4,8 @@ import { PiBag, PiFlagBannerFold, PiLightning, PiNewspaper, PiSparkle } from 're
 import { Link } from 'react-router-dom'
 
 import { ImageWithReload } from '@/components/ui'
+import { ProfileAvatar } from '@/shared/components/display/ProfileAvatar'
+import { ProfileText } from '@/shared/components/display/ProfileText'
 import { CardLayout } from '@/shared/components/layouts'
 import { Body } from '@/shared/components/typography'
 import { getPathWithGeyserHero } from '@/shared/constants'
@@ -405,11 +407,13 @@ const ContributionInfo = ({ resource }: { resource: ActivityResource }) => {
 
     return (
       <HStack width="full" spacing={2} justifyContent="flex-start">
-        {user && user.imageUrl && <Image width={'40px'} height={'40px'} borderRadius={'full'} src={user.imageUrl} />}
+        {user && user.imageUrl && (
+          <ProfileAvatar width={'40px'} height={'40px'} src={user.imageUrl} guardian={user.guardianType} />
+        )}
         <VStack alignItems="flex-start" justifyContent="center" spacing={0}>
-          <Body size="md" dark>
+          <ProfileText size="md" dark guardian={user?.guardianType}>
             {user?.username}
-          </Body>
+          </ProfileText>
           <Body size="md" medium dark>
             {commaFormatted(resource.amount)} {' sats '}
             <Body as="span" size="md" muted>

diff --git a/src/modules/discovery/pages/activity/graphql/fragments/activityFeedFragment.ts b/src/modules/discovery/pages/activity/graphql/fragments/activityFeedFragment.ts
@@ -43,6 +43,7 @@ export const ACTIVITY_FEED_FRAGMENT = gql`
             id
             username
             imageUrl
+            guardianType
           }
         }
       }

diff --git a/src/modules/discovery/pages/hallOfFame/components/GeyserHeroes.tsx b/src/modules/discovery/pages/hallOfFame/components/GeyserHeroes.tsx
@@ -3,7 +3,8 @@ import { t } from 'i18next'
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
 
-import { ImageWithReload } from '@/components/ui'
+import { ProfileAvatar } from '@/shared/components/display/ProfileAvatar'
+import { ProfileText } from '@/shared/components/display/ProfileText'
 import { RankMedal } from '@/shared/components/display/RankMedal'
 import { CardLayout, SkeletonLayout } from '@/shared/components/layouts'
 import { Body } from '@/shared/components/typography'
@@ -131,11 +132,17 @@ const RenderHeroList = ({
                 _hover={{ cursor: 'pointer', backgroundColor: 'neutral1.3' }}
               >
                 <RankMedal rank={index + 1} />
-                <ImageWithReload borderRadius={'50%'} height="40px" width="40px" src={datum[labels?.userImageUrl]} />
+                <ProfileAvatar
+                  borderRadius={'50%'}
+                  height="40px"
+                  width="40px"
+                  src={datum[labels?.userImageUrl]}
+                  guardian={datum.userGuardianType}
+                />
                 <VStack w="full" overflow="hidden" flex={1} spacing={0} alignItems="start">
-                  <Body w="full" bold isTruncated>
+                  <ProfileText guardian={datum.userGuardianType} w="full" bold isTruncated>
                     {datum[labels?.username]}
-                  </Body>
+                  </ProfileText>
                   <Body size="xs" medium isTruncated>
                     {`${formatAmount(datum[labels?.usdAmount], FormatCurrencyType.Usd)} `}
                     <Body as="span" light>{`(${getShortAmountLabel(datum[labels?.amount])} sats)`}</Body>

diff --git a/src/modules/discovery/pages/hallOfFame/components/TopHeroes.tsx b/src/modules/discovery/pages/hallOfFame/components/TopHeroes.tsx
@@ -4,7 +4,8 @@ import { useState } from 'react'
 import { Trans } from 'react-i18next'
 import { Link } from 'react-router-dom'
 
-import { ImageWithReload } from '@/components/ui'
+import { ProfileAvatar } from '@/shared/components/display/ProfileAvatar'
+import { ProfileText } from '@/shared/components/display/ProfileText'
 import { RankMedal } from '@/shared/components/display/RankMedal'
 import { SkeletonLayout } from '@/shared/components/layouts'
 import { Body } from '@/shared/components/typography'
@@ -234,11 +235,17 @@ const HeroDisplay = ({
         <RankMedal rank={rank} boxSize={'32px'} size="20px" />
       </HStack>
 
-      <ImageWithReload borderRadius={'50%'} height="64px" width="64px" src={data.userImageUrl} />
+      <ProfileAvatar
+        borderRadius={'50%'}
+        height="64px"
+        width="64px"
+        src={data.userImageUrl}
+        guardian={data.guardianType}
+      />
       <VStack w="full" overflow="hidden" flex={1} spacing={0} alignItems="start">
-        <Body w="full" bold isTruncated>
+        <ProfileText guardian={data.guardianType} w="full" bold isTruncated>
           {data.username}
-        </Body>
+        </ProfileText>
         {renderDescription()}
       </VStack>
     </HStack>

diff --git a/src/modules/discovery/pages/hallOfFame/graphql/fragments/topAmbassadorsFragment.ts b/src/modules/discovery/pages/hallOfFame/graphql/fragments/topAmbassadorsFragment.ts
@@ -6,6 +6,8 @@ export const TOP_AMBASSADORS_FRAGMENT = gql`
     contributionsTotalUsd
     projectsCount
     userId
+    userHeroId
+    userGuardianType
     userImageUrl
     username
   }

diff --git a/src/modules/discovery/pages/hallOfFame/graphql/fragments/topContributorsFragment.ts b/src/modules/discovery/pages/hallOfFame/graphql/fragments/topContributorsFragment.ts
@@ -7,6 +7,8 @@ export const TOP_CONTRIBUTORS_FRAGMENT = gql`
     contributionsTotalUsd
     projectsContributedCount
     userId
+    userHeroId
+    userGuardianType
     username
     userImageUrl
   }

diff --git a/src/modules/discovery/pages/hallOfFame/graphql/fragments/topCreatorsFragment.ts b/src/modules/discovery/pages/hallOfFame/graphql/fragments/topCreatorsFragment.ts
@@ -6,6 +6,8 @@ export const TOP_CREATORS_FRAGMENT = gql`
     contributionsTotalUsd
     projectsCount
     userId
+    userHeroId
+    userGuardianType
     userImageUrl
     username
   }

diff --git a/src/modules/guardians/Guardians.tsx b/src/modules/guardians/Guardians.tsx
@@ -1,49 +1,101 @@
-import { HStack, VStack } from '@chakra-ui/react'
+import { Box, HStack, VStack } from '@chakra-ui/react'
 import { t } from 'i18next'
+import { useSetAtom } from 'jotai'
+import { useEffect } from 'react'
 import { Link, Outlet } from 'react-router-dom'
+import { useSearchParams } from 'react-router-dom'
 
-import { H1 } from '@/shared/components/typography'
-import { dimensions, getPath } from '@/shared/constants'
+import { addProjectHeroAtom } from '@/modules/project/pages1/projectView/state/heroAtom'
+import { Body, H1 } from '@/shared/components/typography'
+import {
+  dimensions,
+  getPath,
+  GuardiansSeriesOneBackground4kUrl,
+  GuardiansSeriesOneBackgroundFullHDUrl,
+  GuardiansSeriesOneBackgroundMobileUrl,
+  GuardiansSeriesOneBackgroundTabUrl,
+} from '@/shared/constants'
 import { fonts } from '@/shared/styles'
 import { toPx } from '@/utils'
 
 import { useIsGuardianCharacterPage } from '../navigation/platformNavBar/platformNavBarAtom'
+import { useGuardianProjectRewards } from './hooks/useGuardianProjectRewards'
+const GEYSER_GUARDIANS_PROJECT_NAME = 'geyserguardians'
 
 export const Guardians = () => {
   const isGuardianCharacterPage = useIsGuardianCharacterPage()
+
+  const [searchParams] = useSearchParams()
+
+  const addHeroId = useSetAtom(addProjectHeroAtom)
+  const heroId = searchParams.get('hero')
+
+  useEffect(() => {
+    if (heroId) {
+      addHeroId({
+        projectName: GEYSER_GUARDIANS_PROJECT_NAME,
+        heroId,
+      })
+    }
+  }, [heroId, addHeroId])
+
+  useGuardianProjectRewards()
+
   return (
     <HStack w="full" justify="center" backgroundColor="guardians.background">
+      <Box
+        background={{
+          base: `url(${GuardiansSeriesOneBackgroundMobileUrl})`,
+          md: `url(${GuardiansSeriesOneBackgroundTabUrl})`,
+          lg: `url(${GuardiansSeriesOneBackgroundFullHDUrl})`,
+          '5xl': `url(${GuardiansSeriesOneBackground4kUrl})`,
+        }}
+        backgroundSize="cover"
+        backgroundPosition="center"
+        backgroundRepeat="no-repeat"
+        position="fixed"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        zIndex={0}
+      />
       <VStack
         w="full"
         maxWidth={dimensions.guardians.maxWidth}
         spacing={4}
-        fontFamily={fonts.mazius}
+        fontFamily={fonts.cormorant}
         fontStyle="normal"
-        h={{
-          base: `calc(100vh - ${toPx(dimensions.topNavBar.mobile.height)})`,
-          lg: `calc(100vh - ${toPx(dimensions.topNavBar.desktop.height)})`,
-        }}
-        backgroundColor={'guardians.background'}
-        overflow="hidden"
         position="relative"
-        // paddingTop={{ base: dimensions.topNavBar.mobile.height, lg: dimensions.topNavBar.desktop.height }}
       >
         <VStack
-          zIndex={10}
+          zIndex={{ base: 1, lg: 10 }}
           pt={{ base: toPx(dimensions.topNavBar.mobile.height), lg: 6, xl: 4 }}
-          spacing={{ base: 0, lg: 6 }}
-          position="fixed"
-          top={0}
+          spacing={0}
+          position="absolute"
+          top={{
+            base: `-${toPx(dimensions.topNavBar.mobile.height)}`,
+            lg: `-${toPx(dimensions.topNavBar.desktop.height)}`,
+          }}
         >
           <H1
             as={Link}
             to={getPath('guardians')}
             fontSize={{ base: '32px', md: '48px', lg: '56px', xl: '72px' }}
-            fontWeight={{ base: 'bold', lg: 'normal' }}
             color={isGuardianCharacterPage ? 'neutral1.9' : 'utils.text'}
+            textAlign="center"
+            bold
           >
             {t('GEYSER GUARDIANS')}
           </H1>
+          <Body
+            fontSize={{ base: '16px', md: '20px', lg: '24px', xl: '28px' }}
+            marginTop={{ base: '-8px', md: '-12px', lg: '-16px', xl: '-20px' }}
+            color={isGuardianCharacterPage ? 'utils.text' : ' neutral1.9'}
+            bold
+          >
+            {t('Series 1')}
+          </Body>
         </VStack>
         <Outlet />
       </VStack>
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,7 @@ export const FRAGMENT_USER_ME = gql` @@
         id
         username
         heroId
+        guardianType
         imageUrl
         email
         ranking
@@ Expand Down @@