Fixed share nft purchase screen (#5101)

charmverse · Dec 5, 2024 · 17aabe4 · 17aabe4
1 parent becb2d0
commit 17aabe4
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 50 deletions.
diff --git a/apps/scoutgame/lib/builders/getLeaderboard.ts b/apps/scoutgame/lib/builders/getLeaderboard.ts
@@ -12,7 +12,7 @@ export type LeaderBoardRow = {
   progress: number;
   gemsCollected: number;
   price: bigint;
-  nftImageUrl?: string;
+  congratsImageUrl?: string | null;
 };
 
 export async function getLeaderboard({
@@ -58,7 +58,8 @@ export async function getLeaderboard({
             select: {
               currentPrice: true,
               season: true,
-              imageUrl: true
+              imageUrl: true,
+              congratsImageUrl: true
             }
           }
         }
@@ -81,7 +82,8 @@ export async function getLeaderboard({
         gemsCollected: weeklyTopBuilder.gemsCollected,
         progress,
         price,
-        nftImageUrl: nft?.imageUrl
+        nftImageUrl: nft?.imageUrl,
+        congratsImageUrl: nft?.congratsImageUrl
       };
     })
     .filter((builder) => builder.gemsCollected > 0);

diff --git a/apps/scoutgame/lib/builders/getPaginatedBuilders.ts b/apps/scoutgame/lib/builders/getPaginatedBuilders.ts
@@ -60,6 +60,7 @@ export async function getPaginatedBuilders({
               select: {
                 currentPrice: true,
                 imageUrl: true,
+                congratsImageUrl: true,
                 nftSoldEvents: {
                   distinct: 'scoutId'
                 }
@@ -92,6 +93,7 @@ export async function getPaginatedBuilders({
         id: stat.user.id,
         rank: stat.rank ?? -1,
         nftImageUrl: stat.user.builderNfts[0]?.imageUrl,
+        congratsImageUrl: stat.user.builderNfts[0]?.congratsImageUrl,
         path: stat.user.path,
         displayName: stat.user.displayName,
         builderPoints: stat.user.userAllTimeStats[0]?.pointsEarnedAsBuilder ?? 0,

diff --git a/...i/src/components/[path]/components/PublicBuilderProfile/PublicBuilderProfileContainer.tsx b/...i/src/components/[path]/components/PublicBuilderProfile/PublicBuilderProfileContainer.tsx
@@ -22,6 +22,7 @@ export type BuilderProfileProps = {
     builderStatus: BuilderStatus;
     price?: bigint;
     nftImageUrl?: string;
+    congratsImageUrl?: string;
   };
   builderActivities: BuilderActivity[];
 } & BuilderStats &

diff --git a/packages/scoutgame-ui/src/components/common/NFTPurchaseDialog/components/NFTPurchaseForm.tsx b/packages/scoutgame-ui/src/components/common/NFTPurchaseDialog/components/NFTPurchaseForm.tsx
@@ -57,7 +57,7 @@ import { NumberInputField } from './NumberField';
 import { SuccessView } from './SuccessView';
 
 export type NFTPurchaseProps = {
-  builder: MinimalUserInfo & { price?: bigint; nftImageUrl?: string | null };
+  builder: MinimalUserInfo & { price?: bigint; congratsImageUrl?: string | null; nftImageUrl?: string | null };
 };
 
 const PRICE_POLLING_INTERVAL = 60000;

diff --git a/packages/scoutgame-ui/src/components/common/NFTPurchaseDialog/components/SuccessView.tsx b/packages/scoutgame-ui/src/components/common/NFTPurchaseDialog/components/SuccessView.tsx
@@ -1,65 +1,82 @@
 'use client';
 
-import { Box, Button, Stack, Typography } from '@mui/material';
+import { Box, IconButton, Stack, Typography } from '@mui/material';
 import Image from 'next/image';
-import Link from 'next/link';
+
+import { useMdScreen } from '../../../../hooks/useMediaScreens';
 
 export function SuccessView({
   builder
 }: {
-  builder: { id: string; displayName: string; nftImageUrl?: string | null; path: string };
+  builder: { id: string; displayName: string; congratsImageUrl?: string | null; path: string };
 }) {
+  const isMd = useMdScreen();
+
+  const handleShare = (platform: 'x' | 'telegram' | 'warpcast') => {
+    const shareUrl = getShareMessage({ builderName: builder.displayName, builderPath: builder.path, platform });
+    window.open(shareUrl, '_blank');
+  };
+  const size = !isMd ? 30 : 42.5;
+
   return (
     <Stack gap={2} textAlign='center' data-test='success-view'>
       <Typography color='secondary' variant='h5' fontWeight={600}>
         Congratulations!
       </Typography>
       <Typography>You scouted {builder.displayName}</Typography>
-      <Box
-        bgcolor='black.dark'
-        width='100%'
-        p={2}
-        display='flex'
-        alignItems='center'
-        flexDirection='column'
-        gap={1}
-        py={12}
+      {builder.congratsImageUrl ? (
+        <Image src={builder.congratsImageUrl} alt={builder.path} width={400} height={400} />
+      ) : (
+        <Image src='/images/no_nft_person.png' alt='no nft image available' width={200} height={200} />
+      )}
+      <Stack
         sx={{
-          background: 'url(/images/nft-mint-bg.png)',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center',
-          backgroundSize: 'cover'
+          justifyContent: 'center',
+          p: {
+            xs: 1,
+            md: 2
+          },
+          alignItems: 'center',
+          backgroundColor: '#D8E1FF'
         }}
       >
-        {builder.nftImageUrl ? (
-          <Image
-            src={builder.nftImageUrl}
-            alt={builder.path}
-            width={200}
-            height={300}
-            style={{ aspectRatio: '1/1.4', width: '50%', height: '50%' }}
-          />
-        ) : (
-          <Image src='/images/no_nft_person.png' alt='no nft image available' width={200} height={200} />
-        )}
-      </Box>
-      <Button
-        LinkComponent={Link}
-        fullWidth
-        href={
-          typeof window !== 'undefined' && 'Telegram' in window
-            ? `https://t.me/share/url?url=${window.location.origin}/u/${builder.path}&text=${encodeURI(
-                `I scouted ${builder.displayName} on Scout Game!`
-              )}`
-            : `https://warpcast.com/~/compose?text=${encodeURI(
-                `I scouted ${builder.displayName} on Scout Game!`
-              )}&embeds[]=${window.location.origin}/u/${builder.path}`
-        }
-        target='_blank'
-        rel='noopener noreferrer'
-      >
-        Share now
-      </Button>
+        <Typography variant={isMd ? 'h6' : 'subtitle1'} color='#000' fontWeight='bold'>
+          Share now
+        </Typography>
+        <Stack flexDirection='row' justifyContent='center'>
+          <IconButton onClick={() => handleShare('x')}>
+            <Image src='/images/logos/x.png' alt='X' width={size} height={size} />
+          </IconButton>
+          <IconButton onClick={() => handleShare('telegram')}>
+            <Image src='/images/logos/telegram.png' alt='Telegram' width={size} height={size} />
+          </IconButton>
+          <IconButton onClick={() => handleShare('warpcast')}>
+            <Image src='/images/logos/warpcast.png' alt='Warpcast' width={size} height={size} />
+          </IconButton>
+        </Stack>
+      </Stack>
     </Stack>
   );
 }
+
+function getShareMessage({
+  builderName,
+  builderPath,
+  platform
+}: {
+  builderName: string;
+  builderPath: string;
+  platform: 'x' | 'telegram' | 'warpcast';
+}) {
+  const embedUrl = `${window.location.origin}/u/${builderPath}`;
+  const shareMessage = `I scouted ${builderName} on Scout Game!`;
+
+  const urls = {
+    x: `https://x.com/intent/tweet?text=${encodeURIComponent(shareMessage)}`,
+    telegram: `https://t.me/share/url?url=${encodeURIComponent(embedUrl)}&text=${encodeURIComponent(shareMessage)}`,
+    warpcast: `https://warpcast.com/~/compose?text=${encodeURIComponent(shareMessage)}&embeds[]=${encodeURIComponent(
+      embedUrl
+    )}`
+  };
+  return urls[platform];
+}
diff --git a/packages/scoutgame/src/builders/getTodaysHotBuilders.ts b/packages/scoutgame/src/builders/getTodaysHotBuilders.ts
@@ -38,7 +38,8 @@ const userSelect = {
     },
     select: {
       currentPrice: true,
-      imageUrl: true
+      imageUrl: true,
+      congratsImageUrl: true
     }
   }
 };
@@ -106,6 +107,7 @@ export async function getTodaysHotBuilders(): Promise<BuilderInfo[]> {
       builderPoints: builder.userSeasonStats[0]?.pointsEarnedAsBuilder || 0,
       price: builder.builderNfts[0]?.currentPrice ?? 0,
       nftImageUrl: builder.builderNfts[0]?.imageUrl,
+      congratsImageUrl: builder.builderNfts[0]?.congratsImageUrl,
       nftsSold: builder.userSeasonStats[0]?.nftsSold || 0,
       builderStatus: builder.builderStatus!,
       rank: builder.userWeeklyStats[0]?.rank || -1,

diff --git a/packages/scoutgame/src/builders/interfaces.ts b/packages/scoutgame/src/builders/interfaces.ts
@@ -24,5 +24,6 @@ export type BuilderInfo = BasicUserInfo &
   BuilderMetrics & {
     builderStatus: BuilderStatus;
     nftImageUrl?: string | null;
+    congratsImageUrl: string | null;
     nftsSoldToScout?: number;
   };
diff --git a/packages/scoutgame/src/scouts/getScoutedBuilders.ts b/packages/scoutgame/src/scouts/getScoutedBuilders.ts
@@ -48,6 +48,7 @@ export async function getScoutedBuilders({ scoutId }: { scoutId: string }): Prom
         },
         select: {
           imageUrl: true,
+          congratsImageUrl: true,
           currentPrice: true
         }
       },
@@ -75,6 +76,7 @@ export async function getScoutedBuilders({ scoutId }: { scoutId: string }): Prom
     return {
       id: builder.id,
       nftImageUrl: builder.builderNfts[0]?.imageUrl,
+      congratsImageUrl: builder.builderNfts[0]?.congratsImageUrl,
       path: builder.path,
       displayName: builder.displayName,
       builderStatus: builder.builderStatus!,

diff --git a/packages/scoutgame/src/social/getBuildersByFid.ts b/packages/scoutgame/src/social/getBuildersByFid.ts
@@ -42,6 +42,7 @@ export async function getBuildersByFid({
           },
           select: {
             imageUrl: true,
+            congratsImageUrl: true,
             currentPrice: true,
             nftSoldEvents: {
               distinct: 'scoutId'
@@ -81,6 +82,7 @@ export async function getBuildersByFid({
       return scouts.map((scout) => ({
         id: scout.id,
         nftImageUrl: scout.builderNfts[0]?.imageUrl,
+        congratsImageUrl: scout.builderNfts[0]?.congratsImageUrl,
         path: scout.path,
         displayName: scout.displayName,
         builderPoints: scout.userAllTimeStats[0]?.pointsEarnedAsBuilder ?? 0,