Skip to content
This repository was archived by the owner on Oct 30, 2024. It is now read-only.

Main #40

Open
xo13s wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Main #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8ce3a1b
Main
xo13s Sep 17, 2024
e63abde
Update _app.tsx
xo13s Sep 17, 2024
6dc5f1f
Update _app.tsx
xo13s Sep 17, 2024
7785614
Update stake.tsx
xo13s Sep 17, 2024
307b506
Update NFTCard.tsx
xo13s Sep 17, 2024
e13edca
Update index.tsx
xo13s Sep 17, 2024
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
160 changes: 122 additions & 38 deletions components/NFTCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,128 @@
import {
ThirdwebNftMedia,
useContract,
useNFT,
Web3Button,
} from "@thirdweb-dev/react";
import type { FC } from "react";
import {
nftDropContractAddress,
stakingContractAddress,
} from "../consts/contractAddresses";
import styles from "../styles/Home.module.css";
import { client } from "@/app/client";
import { NFT, prepareContractCall } from "thirdweb";
import { MediaRenderer, TransactionButton } from "thirdweb/react";
import { NFT_CONTRACT, STAKING_CONTRACT } from "../utils/contracts";
import { useState } from "react";
import { approve } from "thirdweb/extensions/erc721";

interface NFTCardProps {
tokenId: number;
}
type OwnedNFTsProps = {
nft: NFT;
refetch: () => void;
refecthStakedInfo: () => void;
};

const NFTCard: FC<NFTCardProps> = ({ tokenId }) => {
const { contract } = useContract(nftDropContractAddress, "nft-drop");
const { data: nft } = useNFT(contract, tokenId);
export const NFTCard = ({ nft, refetch, refecthStakedInfo }: OwnedNFTsProps) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [isApproved, setIsApproved] = useState(false);

return (
<>
{nft && (
<div className={styles.nftBox}>
{nft.metadata && (
<ThirdwebNftMedia
metadata={nft.metadata}
className={styles.nftMedia}
return (
<div style={{ margin: "10px" }}>
<MediaRenderer
client={client}
src={nft.metadata.image}
style={{
borderRadius: "10px",
marginBottom: "10px",
height: "200px",
width: "200px"
}}
/>
)}
<h3>{nft.metadata.name}</h3>
<Web3Button
action={(contract) => contract?.call("withdraw", [[nft.metadata.id]])}
contractAddress={stakingContractAddress}
>
Withdraw
</Web3Button>
<p style={{ margin: "0 10px 10px 10px"}}>{nft.metadata.name}</p>
<button
onClick={() => setIsModalOpen(true)}
style={{
border: "none",
backgroundColor: "#333",
color: "#fff",
padding: "10px",
borderRadius: "10px",
cursor: "pointer",
width: "100%"
}}
>Stake</button>
{isModalOpen && (
<div style={{
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.5)",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<div style={{
minWidth: "300px",
backgroundColor: "#222",
padding: "20px",
borderRadius: "10px",
display: "flex",
flexDirection: "column",
alignItems: "center"
}}>
<div style={{
display: "flex",
justifyContent: "flex-end",
width: "100%"
}}>
<button
onClick={() => setIsModalOpen(false)}
style={{
border: "none",
backgroundColor: "transparent",
color: "#fff",
cursor: "pointer"
}}
>Close</button>
</div>
<h3 style={{ margin: "10px 0" }}>You about to stake:</h3>
<MediaRenderer
client={client}
src={nft.metadata.image}
style={{
borderRadius: "10px",
marginBottom: "10px"
}}
/>
{!isApproved ? (
<TransactionButton
transaction={() => (
approve({
contract: NFT_CONTRACT,
to: STAKING_CONTRACT.address,
tokenId: nft.id
})
)}
style={{
width: "100%"
}}
onTransactionConfirmed={() => setIsApproved(true)}
>Approve</TransactionButton>
) : (
<TransactionButton
transaction={() => (
prepareContractCall({
contract: STAKING_CONTRACT,
method: "stake",
params: [[nft.id]]
})
)}
onTransactionConfirmed={() => {
alert("Staked!");
setIsModalOpen(false);
refetch();
refecthStakedInfo();
}}
style={{
width: "100%"
}}
>Stake</TransactionButton>
)}

</div>
</div>
)}
</div>
)}
</>
);
)
};
export default NFTCard;
6 changes: 3 additions & 3 deletions consts/contractAddresses.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const nftDropContractAddress =
"0x86eAf8D635eb11D5CD801c41744F44e50d4fd8d2";
"0x366c5104778bE0580005D77FC3DC3F40c59E6993";
export const tokenContractAddress =
"0x12ea05ba6E8405cBeceB5b51134A821e86858F7E";
"0xB1f5039359192Ca6e3F28C30Dcf4453581E3c9f3";
export const stakingContractAddress =
"0x830Ace54DFbf3a011601bD0Bc1f9806d45D2d0E4";
"0xB9d9a385f741E7Cae75Cb6e0D7E9833a4355A9dF";
Loading