Repository: sunflower-farmers/sunflower-farmers
File: src/features/flowerDashboard/FlowerDashboard.tsx (TypeScript)

Code before:
    ? data.tokenInfo.priceUsd * TOTAL_SUPPLY
    : 0;

  return (
    <div className="bg-[#181425] w-full h-full safe-area-inset-top safe-area-inset-bottom">
      <Panel className="inset-0 fixed pointer-events-auto flex flex-col overflow-y-auto scrollable">
        <div className="relative flex w-full justify-between pr-10 items-center  mr-auto h-[70px] mb-2">
          <div
            className="absolute inset-0 w-full h-full -z-0 rounded-sm"
            // Repeating pixel art image background
            style={{
              backgroundImage: `url(${SUNNYSIDE.announcement.flowerBanner})`,

              imageRendering: "pixelated",
              backgroundSize: "320px",
              backgroundPosition: "center",
            }}
          />
          <div className="absolute inset-0 w-full h-full bg-black opacity-50 -z-0 rounded-sm" />
          <div className="z-10 pl-4">
            <p className="text-lg text-white z-10 text-shadow">
              {t("flowerDashboard.title")}
            </p>
            <span className="text-xs text-white z-10 text-shadow">
              {t("last.updated")}{" "}
              {data?.lastUpdated
                ? getRelativeTime(data?.lastUpdated, now)
                : "..."}
            </span>
          </div>

          {isInternalRoute && (
            <img
              src={SUNNYSIDE.icons.close}
              className="flex-none cursor-pointer absolute right-2"
              onClick={handleClose}
              style={{
                width: `${PIXEL_SCALE * 11}px`,
                height: `${PIXEL_SCALE * 11}px`,
              }}
            />
          )}
        </div>
        {/* In Game Flower Stats */}
        {isLoading && <Loading />}
        {!isLoading && (
          <div className="flex flex-col">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
              <InnerPanel className="relative">
                <div className="flex w-full space-x-3 p-1">
                  <div className="flex items-start justify-center w-8">

Review comment (suggestion):
For something like this, I think it would be better to pull this out into its own component so that the whole dashboard isn't updating every second. Something like:

```ts
<LastUpdatedAt lastUpdated={data?.lastUpdated} />
```

Then inside that component you could have the live ticker. That way its only rerendering a very small part of the component.

Code after:

  return (
    <div className="bg-[#181425] w-full h-full safe-area-inset-top safe-area-inset-bottom">
      <Panel className="inset-0 fixed pointer-events-auto flex flex-col overflow-y-auto scrollable">
        <div className="relative flex w-full justify-between pr-10 items-center  mr-auto h-[70px] mb-2">
          <div
            className="absolute inset-0 w-full h-full -z-0 rounded-sm"
            // Repeating pixel art image background
            style={{
              backgroundImage: `url(${SUNNYSIDE.announcement.flowerBanner})`,

              imageRendering: "pixelated",
              backgroundSize: "320px",
              backgroundPosition: "center",
            }}
          />
          <div className="absolute inset-0 w-full h-full bg-black opacity-50 -z-0 rounded-sm" />
          <div className="z-10 pl-4">
            <p className="text-lg text-white z-10 text-shadow">
              {t("flowerDashboard.title")}
            </p>
            <span className="text-xs text-white z-10 text-shadow">
              <LastUpdatedAt lastUpdated={data?.lastUpdated} />
            </span>
          </div>

          {isInternalRoute && (
            <img
              src={SUNNYSIDE.icons.close}
              className="flex-none cursor-pointer absolute right-2"
              onClick={handleClose}
              style={{
                width: `${PIXEL_SCALE * 11}px`,
                height: `${PIXEL_SCALE * 11}px`,
              }}
            />
          )}
        </div>
        {/* In Game Flower Stats */}
        {isLoading && <Loading />}
        {!isLoading && (
          <div className="flex flex-col">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
              <InnerPanel className="relative">
                <div className="flex w-full space-x-3 p-1">
                  <div className="flex items-start justify-center w-8">
                    <img
                      src={flowerToken}
                      alt="Flower Token"
                      className="img-highlight w-full object-contain"
                    />