From 7ce33c3a8778e568bcef22eb6d97ce4a55e750c2 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Fri, 2 Feb 2024 18:10:44 +0700
Subject: [PATCH] feat: improve share on x to include link with screenshot of
 image

---
 src/components/leaderboard/ProgressModal.tsx | 48 +++++++++++---------
 src/components/spaces/ViewSpacePage.tsx      | 11 +++--
 2 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/components/leaderboard/ProgressModal.tsx b/src/components/leaderboard/ProgressModal.tsx
index 91a7a18ce..10d84338e 100644
--- a/src/components/leaderboard/ProgressModal.tsx
+++ b/src/components/leaderboard/ProgressModal.tsx
@@ -180,7 +180,7 @@ function ProgressPanel({
 
   const spaceHandleOrId = profile?.struct.handle || profile?.id
 
-  const shareOnPolkaverse = async () => {
+  const generateImage = async (onSuccess: (image: string) => void) => {
     const element = document.getElementById('progress-image')
     if (!element) return
 
@@ -208,12 +208,7 @@ function ProgressPanel({
         if (!cid) throw new Error('Failed to save image to IPFS')
 
         progressModalStorage.close()
-        window.open(
-          fullUrl(
-            `${defaultSpaceIdToPost}/posts/new?image=${encodeURIComponent(resolveIpfsUrl(cid))}`,
-          ),
-          '_blank',
-        )
+        onSuccess(resolveIpfsUrl(cid))
       } catch (err: any) {
         controlledMessage({
           message: 'Failed to generate reward image',
@@ -226,6 +221,30 @@ function ProgressPanel({
     })
   }
 
+  const shareOnPolkaverse = () => {
+    generateImage(image => {
+      window.open(
+        fullUrl(`${defaultSpaceIdToPost}/posts/new?image=${encodeURIComponent(image)}`),
+        '_blank',
+      )
+    })
+  }
+
+  const shareOnX = () => {
+    generateImage(image => {
+      openNewWindow(
+        twitterShareUrl(
+          spaceHandleOrId
+            ? `/${spaceHandleOrId}?customImage=${encodeURIComponent(image)}`
+            : `/accounts/${myAddress}`,
+          `I earned #SUB ${
+            isUsingLastWeekData ? 'last week for my activity' : 'yesterday'
+          } on @SubsocialChain! 🥳\n\nFollow me here and join The Creator Economy!`,
+        ),
+      )
+    })
+  }
+
   return (
     <>
       <DiamondIcon className={styles.DiamondIcon} />
@@ -283,20 +302,7 @@ function ProgressPanel({
           className='GapNormal mt-4'
           style={{ display: 'grid', gridTemplateColumns: defaultSpaceIdToPost ? '1fr 1fr' : '1fr' }}
         >
-          <Button
-            type='default'
-            size='large'
-            onClick={() =>
-              openNewWindow(
-                twitterShareUrl(
-                  spaceHandleOrId ? `/${spaceHandleOrId}` : `/accounts/${myAddress}`,
-                  `I earned #SUB ${
-                    isUsingLastWeekData ? 'last week for my activity' : 'yesterday'
-                  } on @SubsocialChain! 🥳\n\nFollow me here and join The Creator Economy!`,
-                ),
-              )
-            }
-          >
+          <Button type='default' size='large' loading={loading} onClick={() => shareOnX()}>
             Share on X
           </Button>
           {defaultSpaceIdToPost && (
diff --git a/src/components/spaces/ViewSpacePage.tsx b/src/components/spaces/ViewSpacePage.tsx
index cc86a1ea6..e5a842628 100644
--- a/src/components/spaces/ViewSpacePage.tsx
+++ b/src/components/spaces/ViewSpacePage.tsx
@@ -15,11 +15,14 @@ import { loadSpaceOnNextReq } from './helpers/loadSpaceOnNextReq'
 import { ViewSpace } from './ViewSpace'
 import { ViewSpaceProps } from './ViewSpaceProps'
 
-type Props = ViewSpaceProps & HasStatusCode
+type Props = ViewSpaceProps &
+  HasStatusCode & {
+    customImage?: string
+  }
 
 const InnerViewSpacePage: FC<Props> = props => {
   const myAddress = useMyAddress()
-  const { spaceData } = props
+  const { spaceData, customImage } = props
 
   useFetchMyPermissionsBySpaceId(spaceData?.id)
 
@@ -45,7 +48,7 @@ const InnerViewSpacePage: FC<Props> = props => {
         meta={{
           title,
           desc: `Latest news and updates from ${name} on Polkaverse.`,
-          image,
+          image: customImage || image,
           canonical: spaceUrl(spaceData.struct),
         }}
         withSidebar
@@ -89,6 +92,7 @@ getInitialPropsWithRedux(ViewSpacePage, async props => {
   const sortedPostIds = descSort(postIds)
 
   const pageIds = getPageOfIds(sortedPostIds, query)
+  const customImage = query.customImage as string | undefined
 
   await dispatch(
     fetchPosts({
@@ -106,6 +110,7 @@ getInitialPropsWithRedux(ViewSpacePage, async props => {
     spaceData: data,
     posts,
     postIds: sortedPostIds,
+    customImage,
   }
 })