Feat/social share nft page

frontend/package.json

@@ -51,6 +51,7 @@
     "node-stdlib-browser": "^1.2.0",
     "typescript": "^5.1.6",
     "vite": "^4.3.9",
+    "vite-plugin-mkcert": "^1.17.3",
     "vite-plugin-node-stdlib-browser": "^0.2.1",
     "vite-plugin-pwa": "^0.16.5",
     "vitest": "^0.32.2"

frontend/src/components/ChallengesModal/ChallengeItemModal.tsx

@@ -84,6 +84,7 @@ const ChallengeItemModal = ({
   function onDismissMintModal() {
     setMintModalIsOpen(false);
     setItemInfoIsOpen(true);
+    setInfoHeight(initialInfoBreakpoint);
   }
 
   function onClickReject() {
@@ -104,6 +105,7 @@ const ChallengeItemModal = ({
 
   function reduceInfoHeigth() {
     infoSheetModalRef.current?.setCurrentBreakpoint(initialInfoBreakpoint);
+    setInfoHeight(initialInfoBreakpoint);
   }
 
   function setCurrentCard(index: number = -1) {
@@ -142,13 +144,15 @@ const ChallengeItemModal = ({
       }
     }
   }, [selectedChallengeId]);
+
   useEffect(() => {
     if (challenges.length <= 1) {
       setDisableNav(true);
     } else {
       setDisableNav(false);
     }
   }, [challenges]);
+
   useEffect(() => {
     if (infoHeight > initialInfoBreakpoint) {
       setShowArrowDown(true);

frontend/src/components/Mint/MintItemContent.tsx

@@ -114,6 +114,7 @@ const MintItemContent: React.FC<MintItemContentProps> = ({
         );
         //const mintResult ={ status: "success"}
         console.log(selectedGroup, "selected group!");
+        console.log(mintResult, "mintResult!");
         if (mintResult?.status === "success") {
           setPendingMint(false);
           setResult({ success: true, group: selectedGroup });

frontend/src/components/Mint/MintItemResult.tsx

@@ -16,9 +16,13 @@ import {
   IonCol,
   IonIcon,
   IonButton,
+  isPlatform,
 } from "@ionic/react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import GenerateInviteBtn from "../GenerateInvite";
+import SocialShareButton from "../SocialShareButton";
+
+const shareText = `I just minted in MyCollective.tech`;
 
 export interface MintItemResultProps {
   challenge: Challenge;
@@ -32,8 +36,29 @@ const MintItemResult: React.FC<MintItemResultProps> = ({
   collective,
 }: MintItemResultProps) => {
   const [loadingImage, setLoadingImage] = useState(true);
+  const [canUseShare, setCanUseShare] = useState(false);
+  const [shareData, setShareData] = useState<ShareData | undefined>(undefined);
+
+  console.log(result, "result group!!!");
+
+  const handleShare = () => {
+    navigator.share(shareData);
+  };
+  useEffect(() => {
+    if (challenge) {
+      const data = {
+        url:   `${import.meta.env.VITE_CLIENT_PRODUCTION_URL}mint/nft/${challenge.id}`,
+        text: shareText,
+      };
+      if (navigator.canShare && navigator.canShare(data)) {
+        setCanUseShare(true);
+        setShareData(data);
+      } else {
+        setCanUseShare(false);
+      }
+    }
+  }, [challenge]);
 
-  console.log(result?.group, "result group!!!");
   return (
     <>
       {result?.success && result?.group ? (
@@ -97,30 +122,27 @@ const MintItemResult: React.FC<MintItemResultProps> = ({
           </IonRow>
           <IonRow className="ion-justify-content-center">
             <IonCol size="auto">
-              <IonButton fill="clear">
-                <IonIcon
-                  slot="icon-only"
-                  src="/assets/icons/social_twitter.svg"
-                />
-              </IonButton>
-              <IonButton fill="clear">
-                <IonIcon
-                  slot="icon-only"
-                  src="/assets/icons/social_discord.svg"
-                />
-              </IonButton>
-              <IonButton fill="clear">
-                <IonIcon
-                  slot="icon-only"
-                  src="/assets/icons/social_telegram.svg"
-                />
-              </IonButton>
-              <IonButton fill="clear">
-                <IonIcon
-                  slot="icon-only"
-                  src="/assets/icons/social_sound.svg"
-                />
-              </IonButton>
+              {!isPlatform("desktop") && canUseShare ? (
+                <IonButton shape="round" onClick={handleShare}>
+                  Share
+                </IonButton>
+              ) : (
+                <>
+                  <SocialShareButton
+                    socialNetwork="x"
+                    text={shareText}
+                    url={shareData?.url}
+                  />
+                  {/* <SocialShareButton socialNetwork="discord" challengeId={challenge.id}/> */}
+                  <SocialShareButton
+                    socialNetwork="telegram"
+                    text={shareText}
+                    url={shareData?.url}
+                  />
+                  {/* <SocialShareButton socialNetwork="sound" challengeId={challenge.id}/> */}
+                </>
+              )}
+              <></>
             </IonCol>
           </IonRow>
         </IonGrid>

frontend/src/components/SocialShareButton.tsx

@@ -0,0 +1,41 @@
+import { IonButton, IonIcon } from "@ionic/react";
+
+const urls = {
+  x: (text: string, url: string) =>
+    `https://x.com/intent/tweet?text=${text}&url=${url}`,
+  discord: (text: string, url: string) => ``,
+  telegram: (text: string, url: string) =>
+    `https://telegram.me/share/url?text=${text}&url=${url}`,
+  sound: (text: string, url: string) => ``,
+};
+
+const icons = {
+  x: "/assets/icons/social_twitter.svg",
+  discord: "/assets/icons/social_discord.svg",
+  telegram: "/assets/icons/social_telegram.svg",
+  sound: "/assets/icons/social_sound.svg",
+};
+export interface SocialShareButtonProps {
+  socialNetwork: "x" | "discord" | "telegram" | "sound";
+  url?: string;
+  title?: string;
+  text: string;
+}
+
+const SocialShareButton: React.FC<SocialShareButtonProps> = ({
+  url,
+  socialNetwork,
+  text,
+}) => {
+  return (
+    <IonButton
+      fill="clear"
+      href={urls[socialNetwork](text, url || '')}
+      target="_blank"
+    >
+      <IonIcon slot="icon-only" src={icons[socialNetwork]} />
+    </IonButton>
+  );
+};
+
+export default SocialShareButton;

frontend/src/pages/Mint/NFTPage.tsx

@@ -1,3 +1,4 @@
+import Header from "@/components/Header";
 import MintItemScreen from "@/components/Mint/MintItemScreen";
 import { PageLoadingIndicator } from "@/components/PageLoadingIndicator";
 import ApiService from "@/services/ApiService";
@@ -32,6 +33,7 @@ const NFTPage: React.FC<NFTPageProps> = ({ match }) => {
 
   return (
     <IonPage>
+       <Header title="Mint" />
       <IonContent className="ion-padding" color="light">
         {loading ? (
           <PageLoadingIndicator />

frontend/vite.config.ts

@@ -2,11 +2,12 @@ import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import { VitePWA } from "vite-plugin-pwa";
 import path from "path";
-
+import mkcert from 'vite-plugin-mkcert';
 import nodePolyfills from 'vite-plugin-node-stdlib-browser'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: { https: false },
   define: {
     'process.env': {}
   },
@@ -25,6 +26,7 @@ export default defineConfig({
   },
   plugins: [
     nodePolyfills(),
+    mkcert(),
     react(),
 
     VitePWA({