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**](https://peakd.com/hive-139531/@sagarkothari88/integrate-aioha-with-your-react-app-from-scratch-vite--tailwind--daisyui) – Fresh React app + AIOHA integration!
- [🧭 **Day 2**](https://peakd.com/hive-139531/@sagarkothari88/integrating-react-router-my-routing-adventures-with-react) – Routing drama & rebellious NavBar
- [🛠️ **Day 3**](https://peakd.com/hive-139531/@sagarkothari88/from-navbar-mess-to-react-router-success-fixing-layouts-routing-and-aioha-in-one-go) – Fixed layouts, Routing & AIOHA
- [🧠 **Day 4**](https://peakd.com/hive-139531/@sagarkothari88/day-4-reactjs-adventures--distriator-progress-usestate-useeffect-and-env-chaos) – useState, useEffect & .env headaches 😅
- [🧹 **Day 5**](https://peakd.com/hive-139531/@sagarkothari88/level-up-your-imports-using-path-aliases-for-cleaner-react--typescript-projects) – Path aliases to clean up path spaghetti 🍝
- [📡 **Day 6**](https://peakd.com/hive-139531/@sagarkothari88/day-6-learning-reactjs-calling-apis-and-creating-context-providers-or-distriator-feature-update) – Create Context Provider & call API
- [🍞 **Day 7**](https://peakd.com/hive-139531/@sagarkothari88/learning-reactjs--vite--ts--aioha-day-7-show-a-toast-message) – Show a toast message
- [🔐 **Day 8**](https://peakd.com/hive-139531/@sagarkothari88/day-8-secure-login-with-aioha-and-localstorage-magic) – Login magic with LocalStorage
- [😂 **Day 9**](https://peakd.com/hive-139531/@sagarkothari88/day-9-toasts-laughs-and-custom-magic) – 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](https://daisyui.com/) like it’s Pinterest, and pick something gorgeous.

---

### 🃏 **The Card That Stole My Heart**
After scrolling... BAM 💘 — this card component caught my eye.

![Beautiful card view](https://files.peakd.com/file/peakd-hive/sagarkothari88/EokWQVx9BZJApPEySbwH1qZfmWWgoFdBAWh3D7wZk4KJhWfSH6MXGka7sVHYL534Wc8.png)

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

![JSX Code snippet for card view](https://files.peakd.com/file/peakd-hive/sagarkothari88/23t752JvVnU26LiSwBW2fwbn7ZWqyg8J9x3AegE4ybgX94QBDcfcYk8UZAKu8T7k6o8nb.png)

---

### 📦 **ClaimBox Component**
- Created `ClaimBox.tsx`
- Grabbed API attributes:  
  - Transaction timestamp 🕒  
  - Business name 🏪  
  - Claimable cashback amount 💵  
  - Transaction amount 💳  

![API response data](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tGXSy37QCRpp7EFnm9firGcz7fgk57P7otThaYmmhKYvG3giBvzsMcQnzvpQJqFcKok.png)

---

### ⏳ **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 ⏱️  

```ts
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](https://peakd.com/hive-139531/@sagarkothari88/day-6-learning-reactjs-calling-apis-and-creating-context-providers-or-distriator-feature-update), 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 💎.

![Loader - no claim - cashback](https://files.peakd.com/file/peakd-hive/sagarkothari88/23t76oPDYmjkX6kNeW331roWc7cQ6C5Q3YUghLgcGH1URAAkK6GLQqB2bKwy1RTj1LDbW.png)

#### 🥁 Drumroll... Tada!

`npm run dev` → Profit.

![Wow wonderful](https://files.peakd.com/file/peakd-hive/sagarkothari88/EoiTmwnQ7RC3dzFW2vUAGcnsopQLty32ZHaDYwHaqYqLgK1qN3Syo8hXWvpfw9t3Ryf.png)

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

| Contribution | To | Hive | Ecosystem |
|--------------|----|------|-----------|
| Hive Witness Node | Hive API Node (in progress) | 3Speak Video Encoder Node Operator (highest number of nodes) | 3Speak Mobile App Developer |
| 3Speak Podcast App Developer | 3Speak Shorts App Developer | 3Speak Support & Maintenance Team | [Distriator Developer](https://distriator.com/) |
| [CheckinWithXYZ](https://checkinwith.xyz/) | [Hive Inbox](https://hive-inbox.the-hive-mobile.app/) | [HiFind](https://hifind.the-hive-mobile.app/) | [Hive Donate App](https://donate.the-hive-mobile.app/) |
| Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration |
| [Hive Stats App](https://stats.the-hive-mobile.app/) | [Vote for Witness App](https://witness.the-hive-mobile.app/) | [HiveFlutterKit](https://hiveflutterkit.sagarkothari88.one/docs/intro) | [New 3Speak App](https://3speak.sagarkothari88.one/#/?tab=home) |

---



### 🙌 Support Back

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

| Vote | For | Witness |
|------|-----|---------|
| [![](https://images.hive.blog/u/sagarkothari88/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | [sagarkothari88](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | @sagarkothari88 |
| [![](https://images.hive.blog/u/threespeak/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | [threespeak](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | @threespeak |

---