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

Add startStake to stakingOverview

Browse Source
This commit is contained in:
Emil Nielsen 2023-03-22 08:55:00 +07:00
parent a21facaa6f
commit 6b7cf87fcf
7 changed files with 95 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
database.db
View File

Binary file not shown.

34
src/app/Components/SelectDropdown.tsx
View File

@ -1,9 +1,15 @@
import React, { useState, ChangeEvent } from "react";
import React, { useState, useEffect, ChangeEvent } from "react";
import { ISelectDropdownProps } from "typings";
const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
const [selectedValue, setSelectedValue] = useState("");
useEffect(() => {
if (!props.isActive) {
setSelectedValue("");
}
}, [props.isActive]);
const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
setSelectedValue(event.target.value);
if (props.onChange) {
@ -12,20 +18,18 @@ const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
};
return (
<div>
<select
value={selectedValue}
onChange={handleChange}
className="text-black block w-full p-2 border border-gray-300 rounded-lg"
>
<option value="">Select an option</option>
{props.options.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</select>
</div>
<select
value={selectedValue}
onChange={handleChange}
className="text-black flex-1 p-2 border border-gray-300 rounded-lg"
>
<option value="">Select an option</option>
{props.options.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</select>
);
};

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

@ -12,8 +12,11 @@ const StakingSource = (props: {
stakingSource: IStakingSource;
inventoryItems: IInventoryItem[] | null | undefined;
claimStake: (stakingEventId: number) => void;
startStake: (inventoryItemId: number, wellId: number) => void;
}) => {
const [activeStakes, setActiveStakes] = useState<IStake[]>([]);
const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
const [selectedWellId, setSelectedWellId] = useState<number | null>(null);
// Check if claimable every second
useEffect(() => {
@ -42,16 +45,18 @@ const StakingSource = (props: {
});
const handleStartMining = () => {
console.log("Start mining..");
if (selectedItemId && selectedWellId) {
props.startStake(selectedItemId, selectedWellId);
}
};
const handleClaim = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log("Start claiming..");
};
const handleSelectChange = (selectedValue: string) => {
console.log(selectedValue);
// Render a staking button
const handleSelectChange = (wellId: string, itemId: number) => {
setSelectedWellId(Number(wellId));
setSelectedItemId(itemId);
};
const RenderButtonOrCountdown = (props: { stake: IStake }) => {
@ -80,7 +85,7 @@ const StakingSource = (props: {
}
};
const isChecked = (item: IInventoryItem): boolean => {
const isActive = (item: IInventoryItem): boolean => {
return props.stakingSource.activeStakes.some((obj) => obj.id === item.id);
};
@ -121,18 +126,33 @@ const StakingSource = (props: {
{props.inventoryItems &&
props.inventoryItems.map(
(item, id) =>
!isChecked(item) && (
<div key={id} className="border border-white p-2">
<p>{item.storeItem.name}</p>
<SelectDropdown
options={props.stakingSource.resourceWells.map(
(well): IOption => ({
value: well.resourceType,
label: well.resourceType,
})
!isActive(item) && (
<div key={id} className="border border-white p-2 mb-2">
<p>
{item.storeItem.name} ID{item.storeItem.id}
</p>
<div className="flex">
<SelectDropdown
options={props.stakingSource.resourceWells.map(
(well): IOption => ({
value: well.id,
label: `${well.resourceType} - ID# ${well.id}`,
})
)}
onChange={(value) => handleSelectChange(value, item.id)}
isActive={selectedItemId === item.id}
/>
{selectedItemId === item.id ? (
<button
onClick={handleStartMining}
className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center"
>
Stake
</button>
) : (
<></>
)}
onChange={handleSelectChange}
/>
</div>
</div>
)
)}

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

@ -7,6 +7,7 @@ const StakingSourcesView = (props: {
stakingSources: IStakingSource[] | null;
inventoryItems: IInventoryItem[] | null | undefined;
claimStake: (stakingEventId: number) => void;
startStake: (inventoryItemId: number, wellId: number) => void;
}) => {
return (
<div className="bg-slate-800 p-4 rounded-lg text-white">
@ -18,6 +19,7 @@ const StakingSourcesView = (props: {
stakingSource={stakingSource}
inventoryItems={props.inventoryItems}
claimStake={props.claimStake}
startStake={props.startStake}
/>
))}
</div>

53
src/app/page.tsx
View File

@ -28,7 +28,7 @@ export default function Home() {
const [lightBoxIsActive, setLightBoxIsActive] = useState(false);
const [userId, setUserId] = useState<number | null>(null);
const [notification, setNotification] = useState<Notification | null>(null);
const [notificationTime, setNotificationTime] = useState(3);
const [notificationTime, setNotificationTime] = useState(30);
const [storeItems, setStoreItems] = useState(gameConfig.store);
const isOwned = (storeItemId: string) => {
@ -52,6 +52,23 @@ export default function Home() {
setInventoryItems(DBInventoryItems);
};
const fetchStakingSources = async () => {
const response = await fetch(`/api/user/${userId}/staking-sources`);
const sources = await response.json();
setStakingSources(sources);
};
const fetchStakes = async () => {
const response = await fetch(`/api/user/${userId}/stakes`);
const stakes = await response.json();
setUserStakes(
stakes.map((stake: IStake) => ({
...stake,
unclaimed: stake.unclaimed == 1,
}))
);
};
useEffect(() => {
const fetchUser = async (wallet: string) => {
const response = await fetch(`/api/user/login`, {
@ -74,23 +91,6 @@ export default function Home() {
setBankAccount(bankAccount);
};
const fetchStakingSources = async () => {
const response = await fetch(`/api/user/${userId}/staking-sources`);
const sources = await response.json();
setStakingSources(sources);
};
const fetchStakes = async () => {
const response = await fetch(`/api/user/${userId}/stakes`);
const stakes = await response.json();
setUserStakes(
stakes.map((stake: IStake) => ({
...stake,
unclaimed: stake.unclaimed == 1,
}))
);
};
fetchUser("abcdefg"); // Public key goes here
// Nico is there a better way of checking if a user is logged in?
if (userId) {
@ -121,7 +121,7 @@ export default function Home() {
if (notificationTime === 0) {
setNotification(null);
clearInterval(intervalId);
setNotificationTime(3);
setNotificationTime(30);
}
return () => {
@ -148,7 +148,19 @@ export default function Home() {
wellId: wellId,
}),
});
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 staked`,
type: "Success",
});
fetchStakes();
fetchStakingSources();
}
};
// Which object is it?
@ -279,6 +291,7 @@ export default function Home() {
stakingSources={stakingSources}
inventoryItems={inventoryItems}
claimStake={claimStake}
startStake={startStake}
/>
<InventoryItemView
stakingSources={stakingSources}

4
src/pages/api/user/[userId]/stakes/start.ts
View File

@ -17,6 +17,7 @@ export default async function handler(
inventoryItemId,
wellId,
} = req.body;
console.log(`Start take: inventoryItemId: ${inventoryItemId} | wellId: ${wellId}`)
const db = await dbConnection;
try {
@ -25,11 +26,12 @@ export default async function handler(
staking_event.created_at as stakeTime, duration_in_mins, stake_amount
FROM inventory_item
LEFT JOIN staking_event ON inventory_item_id = inventory_item.id
WHERE inventory_item.store_item_id = ? AND inventory_item.user_id = ?
WHERE inventory_item.id = ? AND inventory_item.user_id = ?
ORDER BY staking_event.created_at;
`;
const invItem = await db.get(inventorySql, [inventoryItemId, userId]);
const well = await db.get(`
SELECT resource_well.id, resname, source_id, supply as wellId FROM resource_well
INNER JOIN staking_source ON source_id = staking_source.id

3
typings.d.ts vendored
View File

@ -131,11 +131,12 @@ type PhantomRequestMethod =
// Generic stuff
export interface IOption {
value: string,
value: number,
label: string
}
export interface ISelectDropdownProps {
options: IOption[];
onChange?: (value: string) => void;
isActive: boolean
}