Merge pull request #93 from filecoin-project/bp/update-upload-steps

[UXIT-3481] Update upload steps

Author: barbaraperic

src/components/upload/car-upload-and-ipni-card.tsx

@@ -8,7 +8,6 @@ import { Card } from '../ui/card.tsx'
 import { DownloadButton } from '../ui/download-button.tsx'
 import { TextWithCopyToClipboard } from '../ui/text-with-copy-to-clipboard.tsx'
 import { ProgressCard } from './progress-card.tsx'
-import { ProgressCardCombined } from './progress-card-combined.tsx'
 
 interface CarUploadAndIpniCardProps {
   stepStates: StepState[]
@@ -31,7 +30,7 @@ export const CarUploadAndIpniCard = ({ stepStates, cid, fileName }: CarUploadAnd
 
   const { hasIpniAnnounceFailure } = uploadOutcome
 
-  const { announcingCidsStep, uploadingCarStep } = useStepStates(stepStates)
+  const { creatingCarStep, uploadingCarStep, announcingCidsStep } = useStepStates(stepStates)
 
   const shouldShowCidCard =
     uploadingCarStep?.status === 'completed' &&
@@ -59,7 +58,8 @@ export const CarUploadAndIpniCard = ({ stepStates, cid, fileName }: CarUploadAnd
 
   return (
     <>
-      <ProgressCardCombined stepStates={stepStates} />
+      {creatingCarStep && <ProgressCard stepState={creatingCarStep} />}
+      {uploadingCarStep && <ProgressCard stepState={uploadingCarStep} />}
       {announcingCidsStep && <ProgressCard stepState={announcingCidsStep} />}
     </>
   )

src/components/upload/progress-card-combined.tsx

@@ -4,8 +4,9 @@ export function getStepLabel(step: StepState['step']) {
   switch (step) {
     case 'creating-car':
     case 'checking-readiness':
+      return 'Creating CAR file'
     case 'uploading-car':
-      return 'Preparing service, creating CAR file, and uploading to the Filecoin SP'
+      return 'Uploading to Filecoin SP'
     case 'announcing-cids':
       return 'Announcing IPFS CIDs to IPNI'
     case 'finalizing-transaction':
@@ -15,10 +16,6 @@ export function getStepLabel(step: StepState['step']) {
 
 export function getStepEstimatedTime(step: StepState['step']) {
   switch (step) {
-    case 'creating-car':
-    case 'checking-readiness':
-    case 'uploading-car':
-      return 'Estimated time: ~30 seconds'
     case 'announcing-cids':
       return 'Estimated time: ~30 seconds'
     case 'finalizing-transaction':

src/hooks/use-first-stage-state.ts

@@ -31,13 +31,6 @@ function getFirstStageState(stepStates: StepState[]) {
   )
 }
 
-// Calculate combined progress for the  first stage (creating CAR + checking readiness + uploading)
-export function getFirstStageProgress(stepStates: StepState[]) {
-  const { creatingCar, checkingReadiness, uploadingCar } = getFirstStageState(stepStates)
-  const total = creatingCar.progress + checkingReadiness.progress + uploadingCar.progress
-  return Math.round(total / 3)
-}
-
 export function getFirstStageStatus(stepStates: StepState[]) {
   const firstStageState = getFirstStageState(stepStates)