Merge pull request kodadot#10201 from hassnian/issue-9982

fix: Wrong share text on farcaster

components/collection/drop/modal/DropConfirmModal.vue

@@ -101,6 +101,7 @@ const mintedNFT = computed<MintedNFT | undefined>(() =>
   claimedNft.value
     ? ({
         ...claimedNft.value,
+        index: Number(claimedNft.value.sn),
         image: sanitizeIpfsUrl(claimedNft.value.image),
         mimeType: 'text/html',
         collection: {

components/collection/drop/modal/shared/SuccessfulDrop.vue

@@ -15,6 +15,7 @@
 <script setup lang="ts">
 import type { ItemMedia } from '@/components/common/successfulModal/SuccessfulItemsMedia.vue'
 import { MintedNFT, MintingSession } from '../../types'
+import { ShareProp } from '@/components/common/successfulModal/SuccessfulModalBody.vue'
 
 const emit = defineEmits(['list'])
 const props = defineProps<{
@@ -26,6 +27,7 @@ const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
+const { getCollectionFrameUrl } = useSocialShare()
 
 const cantList = computed(() => !props.canListNfts)
 const txHash = computed(() => props.mintingSession.txHash ?? '')
@@ -54,16 +56,27 @@ const userProfilePath = computed(
 )
 
 const sharingTxt = computed(() =>
-  $i18n.t('sharing.dropNft', [
-    mintedNft.value?.id,
-    mintedNft.value?.collection.max,
-  ]),
+  singleMint.value
+    ? $i18n.t('sharing.dropNft', [`#${mintedNft.value?.index}`])
+    : $i18n.t('sharing.dropNfts', [
+        props.mintingSession.items.map((item) => `#${item.index}`).join(', '),
+      ]),
 )
 
-const share = computed(() => ({
+const share = computed<ShareProp>(() => ({
   text: sharingTxt.value,
   url: nftFullUrl.value,
   withCopy: singleMint.value,
+  social: {
+    farcaster: {
+      embeds: [
+        getCollectionFrameUrl(
+          urlPrefix.value,
+          mintedNft.value?.collection.id as string,
+        ),
+      ],
+    },
+  },
 }))
 
 const actionButtons = computed(() => ({

components/collection/drop/types.ts

@@ -34,6 +34,7 @@ export type MintedNFT = {
   chain: string
   name: string
   image: string
+  index: number
   collection: { id: string; name: string; max: number }
   mimeType?: string
 }

components/common/successfulModal/ShareSocialsSection.vue

@@ -39,16 +39,23 @@ import { NeoButton, NeoIcon, NeoTooltip } from '@kodadot1/brick'
 const FarcasterIcon = defineAsyncComponent(
   () => import('@/assets/icons/farcaster-icon.svg?component'),
 )
+
+export type SocialMediaProps = {
+  farcaster?: { embeds: string[] }
+}
+
 const props = withDefaults(
   defineProps<{
     text: string
     url: string
     withCopy?: boolean
     showFarcaster?: boolean
+    social?: SocialMediaProps
   }>(),
   {
     withCopy: true,
     showFarcaster: true,
+    social: undefined,
   },
 )
 
@@ -63,6 +70,6 @@ const handleShareOnTelegram = () => {
   shareOnTelegram(props.text, props.url)
 }
 const handleShareOnFarcaster = () => {
-  shareOnFarcaster(props.text, props.url)
+  shareOnFarcaster(props.text, props.social?.farcaster?.embeds ?? [props.url])
 }
 </script>

components/common/successfulModal/SuccessfulModalBody.vue

@@ -11,7 +11,8 @@
     <ShareSocialsSection
       :text="share.text"
       :url="share.url"
-      :with-copy="share.withCopy" />
+      :with-copy="share.withCopy"
+      :social="share.social" />
 
     <slot name="actions">
       <ActionButtons
@@ -25,8 +26,14 @@
 
 <script setup lang="ts">
 import { type ActionButton } from './ActionButtons.vue'
+import { SocialMediaProps } from './ShareSocialsSection.vue'
 
-export type ShareProp = { text: string; url: string; withCopy?: boolean }
+export type ShareProp = {
+  text: string
+  url: string
+  withCopy?: boolean
+  social?: SocialMediaProps
+}
 type ActionButtonWithHandler = ActionButton & { onClick: () => void }
 
 export type ActionButtonsProp = {

components/profile/ProfileDetail.vue

@@ -175,7 +175,7 @@
               </div>
             </NeoDropdownItem>
             <NeoDropdownItem
-              @click="shareOnFarcaster($i18n.t('sharing.profile'), shareURL)">
+              @click="shareOnFarcaster($i18n.t('sharing.profile'), [shareURL])">
               <div class="flex text-nowrap w-max items-center">
                 <FarcasterIcon class="mr-3" />
                 {{ $t('share.farcaster') }}

composables/drop/useGenerativeDropMint.ts

@@ -159,6 +159,7 @@ export const useUpdateMetadata = async () => {
 
       mintedNfts.value.push({
         id: `${drop.value.collection}-${res.nft}`,
+        index: mintNFTs.value[index].index as number,
         chain: res.chain,
         name: metadata.name,
         image: metadata.image,

composables/useSocialShare.ts

@@ -15,44 +15,46 @@ export default function () {
     url: string = fullPathShare.value,
     via: string = 'KodaDot',
   ) => {
-    open(
-      `https://twitter.com/intent/tweet?text=${encodeURIComponent(
-        text,
-      )}&via=${via}&url=${url}`,
-    )
+    const shareUrl = new URL('https://twitter.com/intent/tweet')
+    shareUrl.searchParams.set('text', text)
+    shareUrl.searchParams.set('via', via)
+    shareUrl.searchParams.set('url', url)
+    open(shareUrl.toString())
   }
 
   const shareOnTelegram = (text: string, url: string = fullPathShare.value) => {
-    open(
-      `https://t.me/share/url?url=${encodeURIComponent(
-        url,
-      )}&text=${encodeURIComponent(text)}`,
-    )
+    const shareUrl = new URL('https://t.me/share/url')
+    shareUrl.searchParams.set('url', url)
+    shareUrl.searchParams.set('text', text)
+    open(shareUrl.toString())
   }
 
   const shareOnFarcaster = (
     text: string,
-    url: string = fullPathShare.value,
+    embeds: string[] = [fullPathShare.value],
   ) => {
-    open(
-      `https://warpcast.com/~/compose?text=${encodeURIComponent(
-        text,
-      )}&embeds[]=${url}`,
-    )
+    const url = new URL('https://warpcast.com/~/compose')
+    url.searchParams.set('text', text)
+    embeds.forEach((embed) => url.searchParams.append('embeds[]', embed))
+    open(url.toString())
   }
 
+  const getCollectionFrameUrl = (chain: Prefix, collectionId: string) =>
+    `${URLS.koda.frame}/${chain}/${collectionId}`
+
   const shareCollectionOnFarcaster = (
     chain: Prefix,
     collectionId: string,
     text: string,
   ) => {
-    shareOnFarcaster(text, `${URLS.koda.frame}/${chain}/${collectionId}`)
+    shareOnFarcaster(text, [getCollectionFrameUrl(chain, collectionId)])
   }
 
   return {
     shareOnX,
     shareOnTelegram,
     shareOnFarcaster,
     shareCollectionOnFarcaster,
+    getCollectionFrameUrl,
   }
 }

locales/en.json

@@ -1099,7 +1099,8 @@
     "listedNft": "Check out this awesome NFT I just listed on KodaDot",
     "listedNfts": "Check out these awesome NFTs I just listed on KodaDot:\n {0}",
     "nftWithArtist": "Check out this awesome NFT on {'@'}KodaDot from {'@'}{0}",
-    "dropNft": "I've minted a generative art piece on Koda {'#'}{0}{'/'}{1}",
+    "dropNft": "I've minted {0} generative art piece on Koda!",
+    "dropNfts": "I've minted {0} generative art pieces on Koda!",
     "pack": "Check out this awesome Pack on KodaDot",
     "profile": "Check out this awesome Profile on KodaDot"
   },