Merge branch 'main' into feat/sg-populate-builders

.ebstalk.apps.env/scoutgame.env

@@ -10,6 +10,7 @@ DD_API_KEY="{{pull:secretsmanager:/io.cv.app/shared/datadog:SecretString:dd_api_
 DD_AGENT_HOST="datadog-agent"
 DD_RUNTIME_METRICS_ENABLED=true
 REACT_APP_DD_CLIENT_TOKEN="{{pull:secretsmanager:/io.cv.app/shared/datadog:SecretString:dd_client_token}}"
+REACT_APP_WALLETCONNECT_PROJECTID="{{pull:secretsmanager:/io.cv.app/prd/wallet-connect:SecretString:wallet_connect_project_id}}"
 S3_UPLOAD_BUCKET="{{pull:secretsmanager:/io.cv.app/prd/aws/s3:SecretString:bucket}}"
 S3_UPLOAD_REGION="{{pull:secretsmanager:/io.cv.app/prd/aws/s3:SecretString:region}}"
 S3_UPLOAD_SECRET="{{pull:secretsmanager:/io.cv.app/prd/aws/s3:SecretString:access_key_secret}}"

apps/comingsoon/public/.well-known/walletconnect.txt

@@ -0,0 +1 @@
+fcf948f7-7d24-42e2-abda-90ae4a10d892=e8571bc102fc1c2c9c2a3e4b6d647a7cf8c87cb27e6b81f52ef232f6942c6f47

apps/cron/jest.config.ts

@@ -1,6 +1,8 @@
 import { compilerOptions } from './tsconfig.json';
 
 export default {
+  // Teardown function after all tests run
+  globalTeardown: '<rootDir>/jest.teardown-init.js',
   transform: {
     '^.+\\.(t|j)sx?$': [
       '@swc/jest',

apps/cron/jest.teardown-init.js

@@ -0,0 +1,10 @@
+import { execSync } from 'child_process';
+
+// We were having errors with typescript and ESM execution / loading during teardown
+export default async function wipeTestData() {
+  if (process.env.NODE_ENV === 'test') {
+    // eslint-disable-next-line no-console
+    console.log('Wiping test data');
+    execSync('npx dotenv -e .env.test.local -- npx tsx ./jest.teardown.ts');
+  }
+}

apps/cron/jest.teardown.ts

@@ -0,0 +1,15 @@
+import { log } from '@charmverse/core/log';
+import { prisma } from '@charmverse/core/prisma-client';
+
+async function wipeTestData() {
+  if (process.env.NODE_ENV === 'test') {
+    await prisma.space.deleteMany({});
+
+    await prisma.user.deleteMany({});
+    // eslint-disable-next-line no-console
+    log.debug('✅ Database wiped');
+  }
+
+  return true;
+}
+wipeTestData().then(() => process.exit(0));

apps/cron/tsconfig.json

@@ -15,5 +15,5 @@
       "lib/*": ["../../lib/*"]
     }
   },
-  "exclude": ["jest.config.ts", "esbuild.config.ts"]
+  "exclude": ["jest.config.ts", "esbuild.config.ts", "jest.teardown.ts"]
 }

apps/scoutgame/components/[username]/PublicProfileTabsMenu.tsx

@@ -6,7 +6,7 @@ export function PublicProfileTabsMenu({ tab, username }: { tab: string; username
       value={tab}
       tabs={[
         { value: 'scout', label: 'Scout', href: `/u/${username}/?tab=scout` },
-        { value: 'build', label: 'Build', href: `/u/${username}/?tab=build` }
+        { value: 'build', label: 'Builder', href: `/u/${username}/?tab=build` }
       ]}
     />
   );

apps/scoutgame/components/[username]/components/PublicBuilderProfile/PublicBuilderProfileContainer.tsx

@@ -93,14 +93,13 @@ export function PublicBuilderProfileContainer({
               <Stack flexDirection='row' alignItems='center' gap={2}>
                 <Box minWidth='fit-content'>
                   <BuilderCard
-                    user={user}
                     builder={{
                       ...builder,
                       price: builder.price
                     }}
                     hideDetails
                     showPurchaseButton
-                    size='small'
+                    size={isDesktop ? 'small' : 'x-small'}
                   />
                 </Box>
                 <Stack gap={1} pr={1}>
@@ -151,7 +150,6 @@ export function PublicBuilderProfileContainer({
                     }}
                     hideDetails
                     showPurchaseButton
-                    user={user}
                   />
                   <PublicBuilderStats
                     seasonPoints={seasonPoints}

apps/scoutgame/components/[username]/components/PublicBuilderProfile/PublicBuilderStats.tsx

@@ -1,6 +1,10 @@
+'use client';
+
 import { Stack, Typography } from '@mui/material';
 import Image from 'next/image';
 
+import { useMdScreen } from 'hooks/useMediaScreens';
+
 export function PublicBuilderStats({
   allTimePoints,
   seasonPoints,
@@ -12,29 +16,30 @@ export function PublicBuilderStats({
   totalScouts?: number;
   totalNftsSold?: number;
 }) {
+  const isDesktop = useMdScreen();
   return (
     <Stack gap={0.5}>
-      <Typography fontWeight={500} color='secondary' variant='subtitle1'>
+      <Typography fontWeight={500} color='secondary' variant={isDesktop ? 'subtitle1' : 'caption'}>
         THIS SEASON (ALL TIME)
       </Typography>
       <Stack flexDirection='row' gap={1} alignItems='center'>
-        <Typography fontWeight={500} variant='h5' color='green.main'>
+        <Typography fontWeight={500} variant={isDesktop ? 'h5' : 'h6'} color='green.main'>
           {seasonPoints || 0}
         </Typography>
         <Image src='/images/profile/scout-game-green-icon.svg' width='25' height='25' alt='scout game icon' />
-        <Typography fontWeight={500} variant='h6' color='green.main'>
+        <Typography fontWeight={500} variant={isDesktop ? 'h6' : 'body1'} color='green.main'>
           ({allTimePoints || 0})
         </Typography>
       </Stack>
-      <Typography fontWeight={500} variant='h5' color='green.main'>
+      <Typography fontWeight={500} variant={isDesktop ? 'h5' : 'h6'} color='green.main'>
         {totalScouts || 0} Scouts
       </Typography>
       <Stack flexDirection='row' gap={1} alignItems='center'>
-        <Typography fontWeight={500} variant='h5' color='green.main'>
+        <Typography fontWeight={500} variant={isDesktop ? 'h5' : 'h6'} color='green.main'>
           {totalNftsSold || 0}
         </Typography>
         <Image src='/images/profile/icons/nft-green-icon.svg' width='25' height='25' alt='nft icon' />
-        <Typography fontWeight={500} variant='h5' color='green.main'>
+        <Typography fontWeight={500} variant={isDesktop ? 'h5' : 'h6'} color='green.main'>
           Sold
         </Typography>
       </Stack>

apps/scoutgame/components/[username]/components/PublicScoutProfile/PublicScoutProfileContainer.tsx

@@ -38,7 +38,7 @@ export function PublicScoutProfileContainer({
         <Stack flexDirection='row'>
           <BackButton />
           <Box width='calc(100% - 50px)'>
-            <UserProfile user={scout} />
+            <UserProfile user={scout} avatarSize={isDesktop ? 'xLarge' : 'large'} />
           </Box>
         </Stack>
       </Paper>
@@ -78,7 +78,7 @@ export function PublicScoutProfileContainer({
           Scouted Builders
         </Typography>
         {scoutedBuilders.length > 0 ? (
-          <BuildersGallery builders={scoutedBuilders} columns={5} />
+          <BuildersGallery builders={scoutedBuilders} columns={5} size={isDesktop ? 'large' : 'small'} />
         ) : (
           <Typography>This Scout hasn't discovered any Builders yet. Check back to see who they find!</Typography>
         )}

apps/scoutgame/components/[username]/components/PublicScoutProfile/PublicScoutProfileStats.tsx

@@ -17,19 +17,27 @@ export function PublicScoutProfileStats({
       <Typography paddingY={1} variant='subtitle1' textAlign='center' color='secondary'>
         THIS SEASON (ALL TIME)
       </Typography>
-      <Stack flexDirection='row' justifyContent='space-between'>
-        <Stack flexDirection='row' gap={1}>
-          <Typography color='orange.main'>{seasonPoints}</Typography>
-          <Image src='/images/profile/scout-game-orange-icon.svg' width='25' height='25' alt='scout game icon' />
-          <Typography color='orange.main' variant='subtitle1'>
+      <Stack flexDirection='row' justifyContent='space-between' gap={2}>
+        <Stack flexDirection='row' gap={0.5}>
+          <Typography color='orange.main' variant='subtitle2'>
+            {seasonPoints}
+          </Typography>
+          <Image src='/images/profile/scout-game-orange-icon.svg' width='20' height='20' alt='scout game icon' />
+          <Typography color='orange.main' variant='subtitle2'>
             ({allTimePoints})
           </Typography>
         </Stack>
-        <Typography color='orange.main'>{buildersScouted} Builders</Typography>
-        <Stack flexDirection='row' gap={1}>
-          <Typography color='orange.main'>{nftsPurchased}</Typography>
-          <Image src='/images/profile/icons/nft-orange-icon.svg' width='25' height='25' alt='nft icon' />
-          <Typography color='orange.main'>Held</Typography>
+        <Typography color='orange.main' variant='subtitle2'>
+          {buildersScouted} Builders
+        </Typography>
+        <Stack flexDirection='row' gap={0.5}>
+          <Typography color='orange.main' variant='subtitle2'>
+            {nftsPurchased}
+          </Typography>
+          <Image src='/images/profile/icons/nft-orange-icon.svg' width='20' height='20' alt='nft icon' />
+          <Typography color='orange.main' variant='subtitle2'>
+            Held
+          </Typography>
         </Stack>
       </Stack>
     </Paper>

apps/scoutgame/components/common/Card/BuilderCard/BuilderCard.tsx

@@ -11,24 +11,19 @@ import { BuilderCardStats } from './BuilderCardStats';
 
 export function BuilderCard({
   builder,
-  user,
   showPurchaseButton = false,
   hideDetails = false,
   showHotIcon = false,
   size = 'medium'
 }: {
-  size?: 'small' | 'medium' | 'large';
-  user?: {
-    id: string;
-    username: string;
-  } | null;
+  size?: 'x-small' | 'small' | 'medium' | 'large';
   builder: BuilderInfo;
   hideDetails?: boolean;
   showPurchaseButton?: boolean;
   showHotIcon?: boolean;
 }) {
   return (
-    <Card sx={{ border: 'none', opacity: builder.isBanned ? 0.25 : 1, width: 'fit-content' }}>
+    <Card sx={{ border: 'none', opacity: builder.isBanned ? 0.25 : 1, width: 'fit-content', height: 'fit-content' }}>
       <BuilderCardNftDisplay
         nftImageUrl={builder.nftImageUrl}
         username={builder.username}

apps/scoutgame/components/common/Card/BuilderCard/BuilderCardNftDisplay.tsx

@@ -3,6 +3,10 @@ import Link from 'next/link';
 
 // Maintain a 3:4 aspect ratio for the NFT display
 const nftDisplaySize = {
+  'x-small': {
+    width: 100,
+    height: 133.33
+  },
   small: {
     width: 150,
     height: 200
@@ -12,8 +16,8 @@ const nftDisplaySize = {
     height: 250
   },
   large: {
-    width: 225,
-    height: 300
+    width: 200,
+    height: 266.67
   }
 };
 
@@ -28,7 +32,7 @@ export function BuilderCardNftDisplay({
   nftImageUrl?: string | null;
   showHotIcon?: boolean;
   children?: React.ReactNode;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'x-small' | 'small' | 'medium' | 'large';
 }) {
   const width = nftDisplaySize[size].width;
   const height = nftDisplaySize[size].height;

apps/scoutgame/components/common/Card/BuilderCard/BuilderCardStats.tsx

@@ -29,7 +29,7 @@ export function BuilderCardStats({
           <Typography variant='body2' component='span' color='green.main'>
             {builderPoints}
           </Typography>
-          <PointsIcon size={15} color='orange' />
+          <PointsIcon size={15} color='green' />
         </Stack>
       )}
       {typeof scoutedBy === 'number' && (

apps/scoutgame/components/common/Carousel/Carousel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Box } from '@mui/material';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
@@ -20,7 +20,7 @@ export type CarouselProps = {
 export function Carousel({ children }: CarouselProps) {
   const isDesktop = useMdScreen();
   const isLarge = useLgScreen();
-  const slidesPerView = isDesktop ? 5 : isLarge ? 6 : 2.2;
+  const slidesPerView = isDesktop ? 5 : isLarge ? 6 : 1.75;
   // Use state and effect to skip pre-rendering
   const [isClientSide, setIsClientSide] = useState(false);
 

apps/scoutgame/components/common/Gallery/BuildersGallery.tsx

@@ -6,23 +6,21 @@ import { BuilderCard } from '../Card/BuilderCard/BuilderCard';
 
 export function BuildersGallery({
   builders,
-  user,
   columns = 6,
   showHotIcon = false,
   size = 'medium'
 }: {
   builders: BuilderInfo[];
   columns?: number;
   showHotIcon?: boolean;
-  user?: { username: string; id: string } | null;
   size?: 'small' | 'medium' | 'large';
 }) {
   return (
     <Box sx={{ flexGrow: 1 }}>
       <Grid container rowSpacing={2} columns={{ xs: 2, md: columns }}>
         {builders.map((builder) => (
           <Grid key={builder.username} size={{ xs: 1 }}>
-            <BuilderCard builder={builder} showPurchaseButton user={user} showHotIcon={showHotIcon} size={size} />
+            <BuilderCard builder={builder} showPurchaseButton showHotIcon={showHotIcon} size={size} />
           </Grid>
         ))}
       </Grid>

apps/scoutgame/components/common/Gallery/ScoutsGallery.tsx

@@ -7,7 +7,7 @@ import { ScoutCard } from '../Card/ScoutCard';
 export function ScoutsGallery({ scouts }: { scouts: ScoutInfo[] }) {
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <Grid container spacing={{ xs: 1, sm: 2 }} columns={{ xs: 3, sm: 6, md: 3 }}>
+      <Grid container spacing={{ xs: 1, sm: 2 }} columns={{ xs: 2, sm: 6, md: 3 }}>
         {scouts.map((scout) => (
           <Grid key={scout.username} size={{ xs: 1 }}>
             <Link href={`/u/${scout.username}`}>

apps/scoutgame/components/common/Icons.tsx

@@ -4,7 +4,12 @@ export function GemsIcon({ size = 20 }: { size?: number }) {
   return <Image width={size} height={size} src='/images/profile/icons/hex-gem-icon.svg' alt='' />;
 }
 
-export function PointsIcon({ size = 20, color }: { size?: number; color?: 'orange' }) {
-  const src = color === 'orange' ? '/images/profile/scout-game-orange-icon.svg' : '/images/profile/scout-game-icon.svg';
+export function PointsIcon({ size = 20, color }: { size?: number; color?: 'orange' | 'green' }) {
+  const src =
+    color === 'orange'
+      ? '/images/profile/scout-game-orange-icon.svg'
+      : color === 'green'
+      ? '/images/profile/scout-game-green-icon.svg'
+      : '/images/profile/scout-game-icon.svg';
   return <Image width={size} height={size} src={src} alt='' />;
 }

apps/scoutgame/components/common/NFTPurchaseForm/ChainSelector.tsx

@@ -91,19 +91,19 @@ function SelectField(
   props: Omit<SelectProps<string>, 'onClick' | 'useTestnets'> & {
     helperMessage?: ReactNode;
     onSelectChain: (chainId: number) => void;
-    ref: Ref<unknown>;
     useTestnets?: boolean;
-  }
+  },
+  ref: Ref<unknown>
 ) {
   const { helperMessage, ...restProps } = props;
 
   const chainOpts = getChainOptions({ useTestnets: props.useTestnets });
 
   return (
-    // @ts-ignore
     <Select<string>
       fullWidth
       displayEmpty
+      ref={ref}
       renderValue={(selected) =>
         chainOpts.find(({ id }) => (selected as unknown as number) === id)?.name || 'Select a Chain'
       }

apps/scoutgame/components/common/NFTPurchaseForm/NFTPurchaseDialog.tsx

@@ -2,12 +2,12 @@
 
 import { BasicModal } from 'components/common/Modal';
 
-import { NFTPurchase } from './NFTPurchaseForm';
+import { NFTPurchaseForm } from './NFTPurchaseForm';
 
 export function NFTPurchaseDialog(props: { open: boolean; onClose: VoidFunction; builderId: string }) {
   return (
     <BasicModal open={props.open} onClose={props.onClose} theme='dark'>
-      <NFTPurchase builderId={props.builderId} />
+      <NFTPurchaseForm builderId={props.builderId} />
     </BasicModal>
   );
 }