Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

work on #19 - trailblazer shows custom tiles for tiles with key actions #20

Merged
merged 1 commit into from
Jun 27, 2023
Merged

work on #19 - trailblazer shows custom tiles for tiles with key actions #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions src/assets/sass/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,3 +412,98 @@ $font-poppins: "Poppins", sans-serif;
height: 100% !important;
}
}

/* Apps Custom Styles
-------------------------------------------------- */

.trailblazer-view {
.base-tile {
.header {
min-height: 65px;
border-bottom: solid 1px;

.title {
max-width: 220px;
margin: auto;
font-size: 1.3rem;
}
}

.body {
display: flex;
min-height: 100px;
justify-content: space-around;
align-items: center;
border-bottom: solid 1px;

.icon {
font-size: 3rem;
}

.item {
max-width: 155px;
}

.action {
text-decoration: none;
background-color: #eeeeee;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #cccccc;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #cccccc;
}
}

.footer {
display: flex;
font-size: 0.8rem;
justify-content: space-around;
min-height: 30px;
align-items: center;

.added {
margin-top: 10px;
}

.platform .icon {
font-size: 2rem;
}
}
}

.base-tile.offer {
}

.base-tile.quest {
.header {
min-height: 45px;
text-align: center;

.title {
max-width: initial;
}
}
}

.base-tile.leaderboard {
.header {
.title {
max-width: initial;
}
}

.body {
.process-error {
color: #ec5720;
}
}
}
}

.dark .trailblazer-view {
.leaderboard .body table {
color: #fff;
}
}
210 changes: 192 additions & 18 deletions src/pages/ItheumTrailblazer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,17 @@ import { SignableMessage } from "@multiversx/sdk-core/out";
import { signMessage } from "@multiversx/sdk-dapp/utils/account";
import { ModalBody } from "react-bootstrap";
import ModalHeader from "react-bootstrap/esm/ModalHeader";
import { FaCalendarCheck, FaHandshake, FaTrophy } from "react-icons/fa";
import {
FaCalendarCheck,
FaHandshake,
FaTrophy,
FaMoneyBillAlt,
FaChessKnight,
FaChartBar,
FaShopify,
FaShoppingCart,
FaFlagCheckered,
} from "react-icons/fa";
import { IoClose } from "react-icons/io5";
import Modal from "react-modal";
import {
Expand Down Expand Up @@ -147,16 +157,187 @@ export const ItheumTrailblazer = () => {
return <Loader />;
}

const getIconForCategory = (category: string) => {
if (category === "Partnership") {
return <FaHandshake />;
} else if (category === "Achievement") {
return <FaTrophy />;
} else {
return <FaCalendarCheck />;
const getIconForCategory = (dataItem: any) => {
switch (dataItem.category) {
case "Partnership":
return <FaHandshake />;
break;
case "Achievement":
return <FaTrophy />;
break;
case "Offer":
return <FaMoneyBillAlt />;
break;
case "Quest":
return <FaChessKnight />;
break;
case "Leaderboard":
return <FaChartBar />;
break;
default:
return <FaCalendarCheck />;
break;
}
};

const getTileForCategory = (dataItem: any) => {
let tileCode: any = null;

switch (dataItem.category) {
case "Offer":
tileCode = (
<div className="base-tile offer">
<div className="header">
<div className="title">
Congratulations! You've unlocked a special offer.
</div>
</div>
<div className="body">
<div className="icon">
<FaShoppingCart />
</div>
<div className="item">{dataItem.title}</div>
<a className="action" href={dataItem.link} target="_blank">
<div>Grab your offer now!</div>
</a>
</div>
<div className="footer">
<div className="added">
Added on: {new Date(dataItem.date).toUTCString()}
</div>
<div className="platform">
Claimable On:{" "}
<span className="icon">
<FaShopify />
</span>
</div>
</div>
</div>
);
break;
case "Quest":
tileCode = (
<div className="base-tile quest">
<div className="header">
<div className="title">Psst! A secret quest is underway.</div>
</div>
<div className="body">
<div className="icon">
<FaFlagCheckered />
</div>
<div className="item">{dataItem.title}</div>
<a className="action" href={dataItem.link} target="_blank">
<div>Join quest!</div>
</a>
</div>
<div className="footer">
<div className="added">
Added on: {new Date(dataItem.date).toUTCString()}
</div>
</div>
</div>
);
break;
case "Leaderboard":
tileCode = (
<div className="base-tile leaderboard">
<div className="header">
<div className="title">Secret Leaderboard</div>
<div className="sub-title">{dataItem.title}</div>
</div>
<div className="body">
{(normalizeLeaderboardData(dataItem.link).processedSuccess ===
false && (
<div className="process-error">
{normalizeLeaderboardData(dataItem.link).processMsg}
</div>
)) || (
<table className="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Address</th>
<th scope="col">Points</th>
</tr>
</thead>
<tbody>
{normalizeLeaderboardData(dataItem.link).tableData.map(
(rowData: any, idx: number) => {
return (
<tr>
<th scope="row">{++idx}</th>
<td>{rowData.leaderAddress}</td>
<td>{rowData.points}</td>
</tr>
);
}
)}
</tbody>
</table>
)}
</div>
<div className="footer">
<div className="added">
Added on: {new Date(dataItem.date).toUTCString()}
</div>
</div>
</div>
);
break;
default:
tileCode = (
<>
<h2>
{dataItem.category} - {new Date(dataItem.date).toUTCString()}
</h2>
<h3>{dataItem.title}</h3>
<a href={dataItem.link} target="_blank">
<h6>See more...</h6>
</a>
</>
);
break;
}

return tileCode;
};

function normalizeLeaderboardData(rawData: string) {
const leaderBoard: {
processedSuccess: boolean;
tableData: any;
processMsg: string;
} = {
processedSuccess: false,
tableData: [],
processMsg: "",
};

try {
const addressPointAry = rawData
.split(":")
.map((i: string) => {
const [leaderAddress, points] = i.split("_");
return { leaderAddress, points: parseInt(points, 10) };
})
.sort(function (x, y) {
return y.points - x.points; // sort in descending order of points
});

leaderBoard.processedSuccess = true;
leaderBoard.tableData = addressPointAry;
} catch (e) {
leaderBoard.processMsg = `ERROR processing leaderBoard. Check console for error details.`;
console.log("----------- ERROR (S) -----------");
console.log("Processing leaderBoard data =", rawData);
console.log("Error =");
console.error(e);
console.log("----------- ERROR (E) -----------");
}

return leaderBoard;
}

return (
<div className="d-flex flex-fill justify-content-center container py-4">
<div className="row w-100">
Expand Down Expand Up @@ -331,22 +512,15 @@ export const ItheumTrailblazer = () => {
<Loader />
</div>
) : (
<div>
<div className="trailblazer-view">
<VerticalTimeline>
{data?.map((_dataItem: any, _index: any) => {
return (
<VerticalTimelineElement
key={_index}
icon={getIconForCategory(_dataItem.category)}
icon={getIconForCategory(_dataItem)}
>
<h2>
{_dataItem.category} -{" "}
{new Date(_dataItem.date).toUTCString()}
</h2>
<h3>{_dataItem.title}</h3>
<a href={_dataItem.link} target="_blank">
<h6>See more...</h6>
</a>
{getTileForCategory(_dataItem)}
</VerticalTimelineElement>
);
})}
Expand Down