Repository: sunflower-farmers/sunflower-farmers
File: src/features/island/collectibles/components/Monument.tsx (TypeScript)

Code before:
                      "animate-pulsate": hasCheers,
                    },
                  )}
                  onClick={(e) => {
                    e.stopPropagation();
                    handleHelpProject();
                  }}
                >
                  <div
                    className="relative mr-2"
                    style={{ width: `${PIXEL_SCALE * 20}px` }}
                  >
                    <img className="w-full" src={SUNNYSIDE.icons.disc} />
                    <img
                      className={classNames("absolute")}
                      src={helpIcon}
                      style={{
                        width: `${PIXEL_SCALE * 15}px`,
                        right: `${PIXEL_SCALE * 2}px`,
                        top: `${PIXEL_SCALE * 2}px`,
                      }}
                    />
                  </div>
                </div>
              )}
              {projectPercentage < 100 && (
                <div
                  className="absolute bottom-2 left-1/2"
                  style={{
                    width: `${PIXEL_SCALE * 20}px`,
                  }}
                >
                  <ProgressBar
                    type="quantity"
                    percentage={projectPercentage}
                    formatLength="full"
                    className="ml-1 -translate-x-1/2"
                  />
                </div>
              )}
            </>
          )}
        </PopoverButton>

        <PopoverPanel anchor={{ to: "left start" }} className="flex">
          <SFTDetailPopoverInnerPanel>
            <SFTDetailPopoverLabel name={input.name} />
            <Label type="info" icon={helpIcon} className="ml-2 sm:ml-0">
              {t("cheers.progress", {
                progress: `${projectCheers}/${requiredCheers}`,
              })}

Review comment (suggestion):
```suggestion
              {!isProjectComplete && (
```

I found a strange case where 996/1000 cheers would round up to 100% and hide the progress bar.

`const projectPercentage = Math.round((projectCheers / requiredCheers) * 100);`

To check if is complete, we can use this other bool flag



Code after:
                      "animate-pulsate": hasCheers,
                    },
                  )}
                  onClick={(e) => {
                    e.stopPropagation();
                    handleHelpProject();
                  }}
                >
                  <div
                    className="relative mr-2"
                    style={{ width: `${PIXEL_SCALE * 20}px` }}
                  >
                    <img className="w-full" src={SUNNYSIDE.icons.disc} />
                    <img
                      className={classNames("absolute")}
                      src={helpIcon}
                      style={{
                        width: `${PIXEL_SCALE * 15}px`,
                        right: `${PIXEL_SCALE * 2}px`,
                        top: `${PIXEL_SCALE * 2}px`,
                      }}
                    />
                  </div>
                </div>
              )}
              {!isProjectComplete && (
                <div
                  className="absolute bottom-2 left-1/2"
                  style={{
                    width: `${PIXEL_SCALE * 20}px`,
                  }}
                >
                  <ProgressBar
                    type="quantity"
                    percentage={projectPercentage}
                    formatLength="full"
                    className="ml-1 -translate-x-1/2"
                  />
                </div>
              )}
            </>
          )}
        </PopoverButton>

        <PopoverPanel anchor={{ to: "left start" }} className="flex">
          <SFTDetailPopoverInnerPanel>
            <SFTDetailPopoverLabel name={input.name} />
            <Label type="info" icon={helpIcon} className="ml-2 sm:ml-0">
              {t("cheers.progress", {
                progress: `${projectCheers}/${requiredCheers}`,
              })}