feat: add shop button to collect on the secondary marketplace (#318)

* Added shop collects button

* Added shop collects button

* Added LensPort marketplace link. Hides shop button when no collects. Reformatting pubId to be cleaner

* Update index.tsx

Remove extra comma

src/components/Watch/CollectVideo/CollectModal.tsx

@@ -30,13 +30,15 @@ type Props = {
   fetchingCollectModule: boolean
   collectModule: LenstubeCollectModule
   collectNow: () => void
+  shopCollects: () => void
 }
 
 const CollectModal: FC<Props> = ({
   showModal,
   setShowModal,
   video,
   collectNow,
+  shopCollects,
   collecting,
   collectModule,
   fetchingCollectModule
@@ -176,7 +178,7 @@ const CollectModal: FC<Props> = ({
                 <span className="text-lg">{collectModule.referralFee} %</span>
               </div>
             ) : null}
-            <div className="flex justify-end">
+            <div className="flex justify-end space-x-2">
               {isAllowed ? (
                 collectModule?.followerOnly && !video.profile.isFollowedByMe ? (
                   <div className="flex-1">
@@ -208,6 +210,9 @@ const CollectModal: FC<Props> = ({
                   }
                 />
               )}
+              {video?.stats.totalAmountOfCollects > 0 ? (
+                <Button onClick={() => shopCollects()}>Shop Collects</Button>
+              ) : null}
             </div>
           </>
         ) : (

src/components/Watch/CollectVideo/index.tsx

@@ -10,6 +10,7 @@ import { Analytics, TRACK } from '@utils/analytics'
 import {
   ERROR_MESSAGE,
   LENSHUB_PROXY_ADDRESS,
+  LENSPORT_MARKETPLACE_URL,
   RELAYER_ENABLED,
   SIGN_IN_REQUIRED_MESSAGE
 } from '@utils/constants'
@@ -157,6 +158,18 @@ const CollectVideo: FC<Props> = ({ video, variant = 'primary' }) => {
     })
   }
 
+  const shopCollects = () => {
+    if (!video) {
+      return
+    }
+    const pubId = video.id ?? video.mirrorOf?.id
+    const decimalProfileId = parseInt(pubId.split('-')[0], 16)
+    const decimalPubId = parseInt(pubId.split('-')[1], 16)
+    const marketplacePublicationId = decimalProfileId + '_' + decimalPubId
+    const marketplaceUrl = `${LENSPORT_MARKETPLACE_URL}/p/${marketplacePublicationId}`
+    window.open(marketplaceUrl)
+  }
+
   const onClickCollect = () => {
     if (!selectedChannelId) return toast.error(SIGN_IN_REQUIRED_MESSAGE)
     return setShowCollectModal(true)
@@ -182,6 +195,7 @@ const CollectVideo: FC<Props> = ({ video, variant = 'primary' }) => {
           showModal={showCollectModal}
           setShowModal={setShowCollectModal}
           collectNow={collectNow}
+          shopCollects={shopCollects}
           collecting={loading}
           collectModule={collectModule}
           fetchingCollectModule={fetchingCollectModule}

src/utils/constants.ts

@@ -110,6 +110,7 @@ export const OPENSEA_MARKETPLACE_URL = IS_MAINNET
 export const RARIBLE_MARKETPLACE_URL = IS_MAINNET
   ? 'https://rarible.com'
   : 'https://testnet.rarible.com'
+export const LENSPORT_MARKETPLACE_URL = 'https://lensport.io'
 
 // misc
 export const GIT_DEPLOYED_COMMIT_SHA =