JosephFerano/MoonMiners
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show staking countdown, refetch data

Browse Source
This commit is contained in:
Emil Nielsen 2023-03-22 14:44:59 +07:00
parent d110fba3ff
commit a5c2ebb0ea
6 changed files with 77 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/app/Components/StakingSource.tsx
View File

@ -20,23 +20,24 @@ const StakingSource = (props: {
// Check if claimable every second
useEffect(() => {
const handleIsClaimable = props.stakingSource.activeStakes.map((stake) => {
const remainingTime = calculateRemainingTime(
stake.startTime,
stake.durationInMins
);
const updatedActiveStakes = props.stakingSource.activeStakes.map(
(stake) => {
const remainingTime = calculateRemainingTime(
stake.startTime,
stake.durationInMins
);
const obj = {
...stake,
remainingTime: remainingTime,
isClaimable: remainingTime <= 0,
};
const obj = {
...stake,
remainingTime: remainingTime,
};
return obj;
});
return obj;
}
);
const intervalId = setInterval(() => {
setActiveStakes(handleIsClaimable);
setActiveStakes(updatedActiveStakes);
}, 1000);
return () => {
@ -50,8 +51,8 @@ const StakingSource = (props: {
}
};
const handleClaim = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log("Start claiming..");
const handleClaim = (stakingEventId: number) => {
props.claimStake(stakingEventId);
};
const handleSelectChange = (wellId: string, itemId: number) => {
@ -60,37 +61,55 @@ const StakingSource = (props: {
};
const RenderButtonOrCountdown = (props: { stake: IStake }) => {
console.log(props.stake);
if (!props.stake.remainingTime) return <p>Error</p>;
if (!props.stake.unclaimed)
return <p className="text-red-400 font-bold">Claimed</p>;
if (props.stake.remainingTime <= 0) {
return (
<button
onClick={(e) => handleClaim(e)}
onClick={() => handleClaim(props.stake.id)}
className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold text-center"
>
Claim
</button>
);
}
if (true) {
} else {
return (
// I'll fix it
<div className="flex">
<p>{prettifyTime(props.stake.remainingTime).hours} hrs.</p>
<p>{prettifyTime(props.stake.remainingTime).minutes} mins.</p>
<p>{prettifyTime(props.stake.remainingTime).seconds} sec.</p>
<div className="flex block gap-1 p-1 rounded-lg border ">
<span className="bg-white rounded-lg text-black p-1">
{prettifyTime(props.stake.remainingTime).hours == 0
? "00"
: prettifyTime(props.stake.remainingTime).hours}
</span>
<span className="p-1">:</span>
<span className="bg-white rounded-lg text-black p-1">
{prettifyTime(props.stake.remainingTime).minutes.toString()
.length > 0
? prettifyTime(props.stake.remainingTime).minutes
: "0" +
prettifyTime(props.stake.remainingTime).minutes.toString()}
</span>
<span className="p-1">:</span>
<span className="bg-white rounded-lg text-black p-1">
{prettifyTime(props.stake.remainingTime).minutes.toString()
.length > 0
? prettifyTime(props.stake.remainingTime).seconds
: "0" +
prettifyTime(props.stake.remainingTime).seconds.toString()}
</span>
</div>
</div>
);
}
};
const isActive = (item: IInventoryItem): boolean => {
return props.stakingSource.activeStakes.some((obj) => obj.id === item.id);
return props.stakingSource.activeStakes.some(
(obj) => obj.inventoryItemId === item.id
);
};
console.log(activeStakes);
console.log(props.stakingSource);
return (
<CardLayout>
<h3 className="text-xl font-bold mb-2">{props.stakingSource.name}</h3>

2
src/app/Components/StakingSourcesView.tsx
View File

@ -9,6 +9,8 @@ const StakingSourcesView = (props: {
claimStake: (stakingEventId: number) => void;
startStake: (inventoryItemId: number, wellId: number) => void;
}) => {
console.log(props.inventoryItems);
console.log(props.stakingSources);
return (
<div className="bg-slate-800 p-4 rounded-lg text-white">
<h2 className="text-2xl mb-4 font-bold">Your Moons</h2>

32
src/app/page.tsx
View File

@ -69,6 +69,12 @@ export default function Home() {
);
};
const fetchBankAccount = async () => {
const response = await fetch(`/api/user/${userId}/bank-account`);
const bankAccount = await response.json();
setBankAccount(bankAccount);
};
useEffect(() => {
const fetchUser = async (wallet: string) => {
const response = await fetch(`/api/user/login`, {
@ -85,12 +91,6 @@ export default function Home() {
}
};
const fetchBankAccount = async () => {
const response = await fetch(`/api/user/${userId}/bank-account`);
const bankAccount = await response.json();
setBankAccount(bankAccount);
};
fetchUser("abcdefg"); // Public key goes here
// Nico is there a better way of checking if a user is logged in?
if (userId) {
@ -136,7 +136,22 @@ export default function Home() {
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ stakingEventId: stakingEventId }),
});
return await response.json();
if (!response.ok) {
const error = await response.text();
setNotification({ message: error, type: "Error" });
}
if (response.status == 200) {
const data = await response.json();
setNotification({
message: `You've successfully claimed`,
type: "Success",
});
fetchStakes();
fetchStakingSources();
fetchInventoryItems();
fetchBankAccount();
}
};
const startStake = async (inventoryItemId: number, wellId: number) => {
@ -195,7 +210,6 @@ export default function Home() {
if (response.status == 200) {
// Return success message
console.log(data.message);
setNotification({
message: "Item has been purchased",
type: "Success",
@ -231,7 +245,6 @@ export default function Home() {
if (response.status == 200) {
// Return success message
console.log(data);
setNotification({ message: "Item has been upgraded", type: "Success" });
fetchInventoryItems();
}
@ -267,6 +280,7 @@ export default function Home() {
};
if (!userId) return <p>Please login</p>;
//console.log(stakingSources);
return (
<>
{notification && (

5
src/pages/api/user/[userId]/stakes/index.ts
View File

@ -11,6 +11,7 @@ export default async function handler(
if (req.method === "GET") {
const { userId } = req.query;
const db = await dbConnection;
// This is supposed to be activeStakes?
const inventorySql = `
SELECT staking_event.id, staking_source.id as sourceId, resname as resourceType,
inventory_item_id, duration_in_mins, stake_amount, staking_event.created_at,
@ -23,9 +24,9 @@ export default async function handler(
const inventoryItems = await db.all(inventorySql, [userId]);
// Change all keys to camelCase
const updatedInventoryItems = updateAllToCamelCase(inventoryItems)
// const updatedInventoryItems = updateAllToCamelCase(inventoryItems)
return res.status(200).json(updatedInventoryItems);
return res.status(200).json(inventoryItems);
}
} catch (error) {
res.status(500).json(error);

3
src/pages/api/user/[userId]/staking-sources.ts
View File

@ -35,9 +35,10 @@ export default async function handler(
LEFT JOIN claim_event ON staking_event.id = claim_event.staking_event_id
WHERE staking_source.id = ? AND claim_event.staking_event_id IS NULL;`;
const activeStakes = await db.all(stakesSql, [source.id]);
source.activeStakes = activeStakes;
}
return res.status(200).json(stakingSources);
}
if (req.method === "POST") {

2
src/utils/helpers.ts
View File

@ -65,7 +65,7 @@ export const prettifyTime = (remainingTime: number) => {
const hours = Math.floor((remainingTime / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
const seconds = Math.floor((remainingTime / 1000) % 60);
return { hours, minutes, seconds };
return { hours, minutes, seconds }
}
export const generateRandomBase64String = (length: number) => {