🎯 ReactJS Adventures: Designing a Cashback ClaimBox for Distriator 💵 🚀

Hello Hive Community Members 👋,

The Distriator app is getting a ReactJS glow-up ✨ — and if things go right, we might finally say goodbye to that bloated Flutter build 🪦.
As always, everything is open source (because sharing is caring ❤️), so if you missed the earlier drama, here’s your binge-worthy recap 📺👇.

---

📜 Epic Learning Journey Recap

Missed a day? Here’s the trail of my glorious ReactJS misadventures:

• 📚 Day 1 – Fresh React app + AIOHA integration!
• 🧭 Day 2 – Routing drama & rebellious NavBar
• 🛠️ Day 3 – Fixed layouts, Routing & AIOHA
• 🧠 Day 4 – useState, useEffect & .env headaches 😅
• 🧹 Day 5 – Path aliases to clean up path spaghetti 🍝
• 📡 Day 6 – Create Context Provider & call API
• 🍞 Day 7 – Show a toast message
• 🔐 Day 8 – Login magic with LocalStorage
• 😂 Day 9 – Toasts, laughs & custom tricks
• 🆕 Day 10 – Handle user account switch + fresh JWT Token
• 🆕 Day 11 – Integrating API for cashback details

---

💵 Day 12: Designing the Cashback ClaimBox

This time, we’re showing users a beautiful, irresistible “Claim Cashback” card 💌 whenever their cashback is ready to be grabbed.

💭 Thought Process

Originally: “Let’s just put a box in the center with a button.”
Brain: ❌ “Nope, don’t reinvent the wheel.”
Solution: Scroll through DaisyUI like it’s Pinterest, and pick something gorgeous.

---

🃏 The Card That Stole My Heart

After scrolling... BAM 💘 — this card component caught my eye.

JSX? Barely 10 lines 🤯. Copy. Paste. Let’s roll.

---

📦 ClaimBox Component

• Created ClaimBox.tsx
• Grabbed API attributes:
  • Transaction timestamp 🕒
  • Business name 🏪
  • Claimable cashback amount 💵
  • Transaction amount 💳

---

⏳ Timer Logic

Cashback = claimable for 2 hours after transaction.
We:

1. Grab timestamp
2. Add 2 hrs
3. Show countdown (HH:MM:SS)
4. Update every 1 sec ⏱️

function formatSecondsToHHMMSS(totalSeconds: number): string {
  if (totalSeconds < 0) return '';
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = parseInt((totalSeconds % 60).toFixed(0));
  const pad = (num: number) => String(num).padStart(2, "0");
  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}

🏪 Getting Business Info

Using the Business Provider to get:

• Profile Image 📷
• Display Name 🏷️

In this post, we discussed about implementing business provider. From that provider, we'll access businesses. From list of businesses, we'll get business display name & business profile image.

Step 1. Import business provider

import { useBusinesses } from "@/context/BusinessesContext";

Step 2. Declare business provider variable

const { businesses } = useBusinesses();

Step 3. Get Business Profile Display Image

  const getBusinessImage = (username: string) => {
    const filteredItems = businesses.filter(
      (b) => b.distriator?.owner === username
    );
    if (filteredItems.length > 0) {
      return (
        filteredItems[0].profile?.displayImage ||
        "https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
      );
    } else {
      return "https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp";
    }
  };

Step 4. Get Business Profile Display Name

  const getBusinessName = (username: string) => {
    const filteredItems = businesses.filter(
      (b) => b.distriator?.owner === username
    );
    if (filteredItems.length > 0) {
      return filteredItems[0].profile?.displayName || "Business Name";
    } else {
      return "Business Name";
    }
  };

🎨 Final ClaimBox UI

  return (
    <div className="card bg-base-100 w-96 shadow-sm">
      <figure>
        <img 
          src={getBusinessImage(claim.business)} 
          alt={`${getBusinessName(claim.business)}`} />
      </figure>
      <div className="card-body">
        <h2 className="card-title">{claim.claimValue} Cashback</h2>
        <p>
          Your recent spent of {claim.amount}, at {getBusinessName(claim.business)}, is eligible for claiming a cashback
        </p>
        <div className="card-actions justify-end items-center">
          <span className="text-lg font-bold text-red-600 animate-blink">
            Time Left {timeText}
          </span>
          <button className="btn btn-primary">Claim Now!</button>
        </div>
      </div>
    </div>
  );

📍 Centering the Magic

Show loader if loading, “No claim available” if empty, else ClaimBox 💎.

🥁 Drumroll... Tada!

npm run dev → Profit.

Looks wonderful, right? 😍

🛠 Open Source Goodness

• Github Repository Link: https://github.com/sag333ar/react-distriator
• Review Last commit changes: https://github.com/sag333ar/react-distriator/commit/33d842e2f0cb697d8b4d61c44c7c8a1d98be9a2e
• Snapshot: https://github.com/sag333ar/react-distriator/tree/33d842e2f0cb697d8b4d61c44c7c8a1d98be9a2e

🤔 Why Flutter? Why Me?

After this, I questioned my life choices… Flutter? Native apps? When ReactJS makes it this simple? 🙃
But hey, lesson learned — and we now have ClaimBox integrated 🎯.

🐝 Power to Hive

• 🚀 Hive to the moon (and beyond!)
• ❤️ Power to Hive community
• 💪 Power to Hive blockchain

Thanks for reading! Drop your feedback & see you in the next one ✌️.

---

📝 Final Note

• I asked ChatGPT/AI to help optimize this post to make it more readable and viewer-friendly.
• Here is the link where you can find both original content & improvements made by AI
• https://chatgpt.com/share/689a853f-e634-8000-8a8a-7a1929030940

---

🚀 My Contributions to ♦️ Hive Ecosystem

---

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

---