Merge pull request #883 from streamethorg/speakerPage

Add Zora Success Modal

Author: greatsamist

packages/app/app/speaker/[session]/components/ZoraUploadButton.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { track } from '@vercel/analytics';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import {
   useAccount,
   usePublicClient,
   useWriteContract,
   useSwitchChain,
+  useWaitForTransactionReceipt,
 } from 'wagmi';
 import {
   createCreatorClient,
@@ -23,6 +24,10 @@ import { createThirdwebClient } from 'thirdweb';
 import { createStateAction } from '@/lib/actions/state';
 import { StateType } from 'streameth-new-server/src/interfaces/state.interface';
 import useGenerateThumbnail from '@/lib/hooks/useGenerateThumbnail';
+import { Dialog, DialogContent, DialogFooter } from '@/components/ui/dialog';
+import { DialogTitle } from '@radix-ui/react-dialog';
+import Link from 'next/link';
+import CopyText from '@/components/misc/CopyText';
 
 const BASE_CHAIN_ID = 8453;
 
@@ -67,15 +72,44 @@ const ZoraUploadButton = ({
   variant = 'primary',
 }: {
   session: IExtendedSession;
-  state: IExtendedState | null;
+  state: IExtendedState[];
   variant?: 'primary' | 'outline';
 }) => {
-  const thumbnail = useGenerateThumbnail({ session: session });
+  const thumbnail = useGenerateThumbnail({ session });
   const [isUploading, setIsUploading] = useState(false);
   const publicClient = usePublicClient({ chainId: BASE_CHAIN_ID });
   const { address, isConnected } = useAccount();
-  const { writeContract } = useWriteContract();
+  const { data: hash, writeContract, isError } = useWriteContract();
   const { switchChain } = useSwitchChain();
+  const [isPublishedModal, setIsPublishedModal] = useState(false);
+  const [zoraContractAddress, setZoraContractAddress] = useState('');
+  const { isSuccess } = useWaitForTransactionReceipt({
+    hash,
+  });
+
+  const updateState = async () => {
+    await createStateAction({
+      state: {
+        sessionId: session._id,
+        type: 'nft' as StateType,
+        sessionSlug: session.slug,
+        organizationId: session.organizationId,
+      },
+    });
+  };
+  useEffect(() => {
+    if (isSuccess) {
+      updateState();
+      setIsPublishedModal(true);
+      setIsUploading(false);
+      toast.success('Video successfully uploaded to Zora marketplace on Base');
+    }
+
+    if (isError) {
+      setIsUploading(false);
+      toast.error('Creation failed');
+    }
+  }, [isSuccess, isError]);
 
   const uploadToZora = useCallback(async () => {
     if (!publicClient || !address || !session.assetId) return;
@@ -92,7 +126,7 @@ const ZoraUploadButton = ({
         mediaUrl: downloadUrl,
         thumbnailUrl: coverImageUri,
       });
-
+      console.log('coverImageUri', coverImageUri, 'thumbnailUrl', thumbnail);
       const tokenMetadataUri = await uploadToIPFS(tokenMetadata);
 
       if (BASE_CHAIN_ID !== (await publicClient.getChainId())) {
@@ -124,45 +158,68 @@ const ZoraUploadButton = ({
 
       writeContract(parameters);
 
-      //await createStateAction({
-      //  state: {
-      //    sessionId: session._id,
-      //    type: StateType.zoraNft,
-      //    sessionSlug: session.slug,
-      //    organizationId: session.organizationId,
-      //  },
-      //});
+      setZoraContractAddress(contractAddress);
       console.log('Upload successful. Contract address:', contractAddress);
-      toast.success('Video successfully uploaded to Zora marketplace on Base');
     } catch (error) {
       console.error('Error uploading to Zora:', error);
       toast.error('Failed to upload video to Zora marketplace');
     } finally {
-      setIsUploading(false);
     }
   }, [publicClient, address, session, writeContract, switchChain]);
 
   if (!isConnected) {
     return <ConnectWalletButton />;
   }
 
-  const isDisabled = isUploading || !state;
+  const isDisabled = isUploading || state?.length > 0;
 
   return (
-    <Button
-      onClick={() => {
-        track('Upload to Zora', { location: 'Speaker Page' });
-        uploadToZora();
-      }}
-      disabled={isDisabled}
-      variant={variant}
-    >
-      {isUploading
-        ? 'Uploading...'
-        : state
-          ? 'Upload to Zora'
-          : 'Already Uploaded'}
-    </Button>
+    <>
+      <Button
+        onClick={() => {
+          track('Upload to Zora', { location: 'Speaker Page' });
+          uploadToZora();
+        }}
+        disabled={isDisabled}
+        variant={variant}
+      >
+        {isUploading
+          ? 'Uploading...'
+          : !state[0]
+            ? 'Upload to Zora'
+            : 'Already Uploaded'}
+      </Button>
+      <Dialog open={isPublishedModal} onOpenChange={setIsPublishedModal}>
+        <DialogContent className="lg:min-w-[600px]">
+          <DialogTitle className="font-bold">
+            Upload to Zora Completed
+          </DialogTitle>
+          <p>Video successfully published to Zora</p>
+          <CopyText
+            width="100%"
+            label="Contract Address"
+            text={zoraContractAddress}
+          />
+
+          <Link
+            target="blank"
+            rel="noopener noreferrer"
+            href={`https://zora.co/collect/base:${zoraContractAddress}/1`}
+            className="underline"
+          >
+            View on Zora
+          </Link>
+          <DialogFooter>
+            <Button
+              onClick={() => setIsPublishedModal(false)}
+              variant={'outline'}
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };
 

packages/app/app/speaker/[session]/page.tsx

@@ -58,8 +58,8 @@ const SessionPage = async ({
   if (!videoUrl) return notFound();
 
   const state = (await fetchAllStates({ sessionId: session._id })).filter(
-    (state) => state.type === StateType.zoraNft
-  ) as unknown as IExtendedState;
+    (state) => state.type === StateType.nft
+  ) as IExtendedState[];
 
   const thumbnail = await generateThumbnailAction(session!);
   const youtubeData = cookies().get('youtube_publish')?.value;

packages/app/components/sessions/CollectVideButton.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button } from '../ui/button';
 import { IExtendedNftCollections, IExtendedSession } from '@/lib/types';
 import {
@@ -9,7 +9,6 @@ import {
   useSwitchChain,
   useWaitForTransactionReceipt,
   useWriteContract,
-  usePublicClient,
 } from 'wagmi';
 import { VideoNFTAbi, contractChainID } from '@/lib/contract';
 import { toast } from 'sonner';
@@ -19,29 +18,22 @@ import { CheckCircle2, Loader2 } from 'lucide-react';
 import { type BaseError } from 'wagmi';
 import TransactionHash from '@/app/studio/[organization]/nfts/create/components/TransactionHash';
 import { ConnectWalletButton } from '../misc/ConnectWalletButton';
-import { createCreatorClient } from '@zoralabs/protocol-sdk';
-import { zora } from 'viem/chains';
 
 const CollectVideButton = ({
   video,
   nftCollection,
   variant = 'primary',
   all = false,
-  standalone = false,
 }: {
   video?: IExtendedSession;
   nftCollection: IExtendedNftCollections | null;
   variant?: 'primary' | 'outline';
   all?: boolean;
-  standalone?: boolean;
 }) => {
   const account = useAccount();
   const chain = useChainId();
-  const publicClient = usePublicClient();
   const [isOpen, setIsOpen] = useState(false);
   const [mintError, setMintError] = useState('');
-  const [isUploading, setIsUploading] = useState(false);
-  const [showUploadButton, setShowUploadButton] = useState(false);
 
   const videoNFTContract = {
     address: nftCollection?.contractAddress as `0x${string}`,
@@ -90,7 +82,6 @@ const CollectVideButton = ({
     if (isSuccess) {
       setIsOpen(false);
       toast.success('NFT of the video successfully minted to your wallet');
-      setShowUploadButton(true);
     }
     if (isError) {
       toast.error('NFT of the video failed to mint. Please try again');
@@ -114,7 +105,7 @@ const CollectVideButton = ({
         ),
       });
     } else {
-      setMintError('An error occurred, try again later please');
+      setMintError('An error occurred, try again later');
     }
   };
 
@@ -138,73 +129,6 @@ const CollectVideButton = ({
     }
   };
 
-  const uploadToZora = useCallback(async () => {
-    if (!publicClient || !account.address) return;
-
-    setIsUploading(true);
-    try {
-      const creatorClient = createCreatorClient({
-        chainId: zora.id,
-        publicClient,
-      });
-
-      const { parameters, contractAddress } = await creatorClient.create1155({
-        contract: {
-          name: video?.name || 'Video NFT',
-          uri: 'ipfs://DUMMY/contract.json', // Replace with actual contract metadata URI
-        },
-        token: {
-          tokenMetadataURI: 'ipfs://DUMMY/token.json', // Replace with actual token metadata URI
-          salesConfig: {
-            erc20Name: video?.name || 'Video Token',
-            erc20Symbol: 'VNFT',
-          },
-        },
-        account: account.address,
-      });
-
-      writeContract(parameters);
-
-      toast.success('Session successfully uploaded to Zora marketplace');
-      setShowUploadButton(false);
-    } catch (error) {
-      console.error('Error uploading to Zora:', error);
-      toast.error('Failed to upload session to Zora marketplace');
-    } finally {
-      setIsUploading(false);
-    }
-  }, [publicClient, account.address, video, writeContract]);
-
-  useEffect(() => {
-    if (account.isConnected && standalone) {
-      toast.success('Wallet connected successfully');
-      setShowUploadButton(true);
-    }
-  }, [account.isConnected, standalone]);
-
-  if (standalone) {
-    return (
-      <div>
-        {!account.isConnected ? (
-          <ConnectWalletButton />
-        ) : showUploadButton ? (
-          <Button
-            onClick={uploadToZora}
-            loading={isUploading}
-            variant={variant}
-            className="w-full md:w-36"
-          >
-            Upload to Zora
-          </Button>
-        ) : (
-          <Button disabled variant="outline">
-            Uploaded to Zora
-          </Button>
-        )}
-      </div>
-    );
-  }
-
   return hasMintedSession ? (
     <Button disabled variant={'outline'}>
       Session Collected
@@ -213,15 +137,6 @@ const CollectVideButton = ({
     <div>
       {!account.address ? (
         <ConnectWalletButton />
-      ) : showUploadButton ? (
-        <Button
-          onClick={uploadToZora}
-          loading={isUploading}
-          variant={variant}
-          className="w-full md:w-36"
-        >
-          Upload to Zora
-        </Button>
       ) : (
         <Button
           loading={isMintingNftPending || IsSwitchingChain}

packages/app/components/sessions/SessionInfoBox.tsx

@@ -37,11 +37,7 @@ const DesktopButtons = ({
   return (
     <>
       {video?.nftCollections?.[0] && (
-        <CollectVideButton
-          video={video}
-          nftCollection={nftCollection}
-          standalone={true}
-        />
+        <CollectVideButton video={video} nftCollection={nftCollection} />
       )}
       <div className="flex flex-row space-x-2">
         <ShareButton shareFor="video" />

packages/app/lib/actions/state.ts

@@ -9,7 +9,7 @@ export const createStateAction = async ({ state }: { state: IState }) => {
   if (!authToken) {
     throw new Error('No user session found');
   }
-  console.log('Creating state:', state);
+
   const response = await createState({
     state,
     authToken,

packages/app/lib/services/stateService.ts

@@ -14,6 +14,7 @@ export const createState = async ({
   state: IState;
   authToken: string;
 }): Promise<IState> => {
+  console.log('fe state', state);
   try {
     const response = await fetch(`${apiUrl()}/states`, {
       method: 'POST',

packages/server/src/interfaces/state.interface.ts

@@ -14,7 +14,7 @@ export enum StateStatus {
 }
 
 export enum StateType {
-  zoraNft = 'zora',
+  nft = 'nft',
   event = 'event',
   video = 'video',
 }

packages/server/src/routes/routes.ts

@@ -259,7 +259,7 @@ const models: TsoaRoute.Models = {
     // WARNING: This file was auto-generated with tsoa. Please do not modify it. Re-run tsoa to re-generate this file: https://github.com/lukeautry/tsoa
     "StateType": {
         "dataType": "refEnum",
-        "enums": ["zora","event","video"],
+        "enums": ["nft","event","video"],
     },
     // WARNING: This file was auto-generated with tsoa. Please do not modify it. Re-run tsoa to re-generate this file: https://github.com/lukeautry/tsoa
     "IState": {

packages/server/src/swagger/swagger.json

@@ -424,7 +424,7 @@
         "type": "string"
       },
       "StateType": {
-        "enum": ["zora", "event", "video"],
+        "enum": ["nft", "event", "video"],
         "type": "string"
       },
       "IState": {