From 811e75875d50fcbcbdfcad7d2027613ab5d513c1 Mon Sep 17 00:00:00 2001 From: Bankk <106103625+BankkRoll@users.noreply.github.com> Date: Mon, 1 May 2023 10:49:40 -0700 Subject: [PATCH 1/4] Added multiple staking/unstaking Added options to stake and unstake multiple in 1 transaction --- pages/stake.tsx | 78 +++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 66 insertions(+), 12 deletions(-) diff --git a/pages/stake.tsx b/pages/stake.tsx index 8b5eb0e..6c3b308 100644 --- a/pages/stake.tsx +++ b/pages/stake.tsx @@ -36,6 +36,8 @@ const Stake: NextPage = () => { const { data: stakedTokens } = useContractRead(contract, "getStakeInfo", [ address, ]); + const [selectedNfts, setSelectedNfts] = useState([]); + const [selectedNftsToWithdraw, setSelectedNftsToWithdraw] = useState([]); useEffect(() => { if (!contract || !address) return; @@ -48,7 +50,8 @@ const Stake: NextPage = () => { loadClaimableRewards(); }, [address, contract]); - async function stakeNft(id: string) { + + async function stakeNfts(ids: string[]) { if (!address) return; const isApproved = await nftDropContract?.isApproved( @@ -58,13 +61,21 @@ const Stake: NextPage = () => { if (!isApproved) { await nftDropContract?.setApprovalForAll(stakingContractAddress, true); } - await contract?.call("stake", [[id]]); + await contract?.call("stake", [ids]); + setSelectedNfts([]); // clear the selected NFTs after staking } if (isLoading) { return
Loading
; } + async function withdrawNfts(ids: string[]) { + if (!address) return; + await contract?.call("withdraw", [ids]); + setSelectedNftsToWithdraw([]); + } + + return (

Stake Your NFTs

@@ -107,32 +118,75 @@ const Stake: NextPage = () => {
{stakedTokens && stakedTokens[0]?.map((stakedToken: BigNumber) => ( - + onClick={() => { + setSelectedNftsToWithdraw((prevSelectedNfts) => { + const tokenId = stakedToken.toString(); + if (prevSelectedNfts.includes(tokenId)) { + return prevSelectedNfts.filter((id) => id !== tokenId); + } else { + return [...prevSelectedNfts, tokenId]; + } + }); + }} + > + +
))}
+ withdrawNfts(selectedNftsToWithdraw)} + isDisabled={selectedNftsToWithdraw.length === 0} + > + Withdraw Selected NFTs + + +

Your Unstaked NFTs

{ownedNfts?.map((nft) => ( -
+
{ + setSelectedNfts((prevSelectedNfts) => { + if (prevSelectedNfts.includes(nft.metadata.id)) { + return prevSelectedNfts.filter( + (id) => id !== nft.metadata.id + ); + } else { + return [...prevSelectedNfts, nft.metadata.id]; + } + }); + }} + >

{nft.metadata.name}

- stakeNft(nft.metadata.id)} - > - Stake -
))}
+ + stakeNfts(selectedNfts)} + isDisabled={selectedNfts.length === 0} + > + Stake Selected NFTs + )}
From a92c8258908364e33894701f3efcfac81edcdaa4 Mon Sep 17 00:00:00 2001 From: Bankk <106103625+BankkRoll@users.noreply.github.com> Date: Mon, 1 May 2023 10:50:39 -0700 Subject: [PATCH 2/4] Updated card to remove button Updated card to remove button since we use it directly in our `stake.tsx` now --- components/NFTCard.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/components/NFTCard.tsx b/components/NFTCard.tsx index 6282c4c..f167958 100644 --- a/components/NFTCard.tsx +++ b/components/NFTCard.tsx @@ -2,12 +2,10 @@ 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"; @@ -22,7 +20,7 @@ const NFTCard: FC = ({ tokenId }) => { return ( <> {nft && ( -
+
{nft.metadata && ( = ({ tokenId }) => { /> )}

{nft.metadata.name}

- contract?.call("withdraw", [[nft.metadata.id]])} - contractAddress={stakingContractAddress} - > - Withdraw -
)} From 8ca89deb05300cd4cf7c8cfaea002b01407277fd Mon Sep 17 00:00:00 2001 From: Bankk <106103625+BankkRoll@users.noreply.github.com> Date: Mon, 1 May 2023 14:05:02 -0400 Subject: [PATCH 3/4] Update styles to have selected styles Update styles to have selected styles to display when a item is selected --- styles/Home.module.css | 54 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/styles/Home.module.css b/styles/Home.module.css index 55faf9b..0d8163c 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -46,9 +46,48 @@ .nftBox { border-radius: 16px; border: 1px solid #ccc; - width: 19%; min-height: 200px; + height: 300px; padding: 16px; + max-width: 200px; + transition: transform 0.3s ease-in-out, border 0.3s ease-in-out; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 5px; + margin-bottom: 60px; +} + +.nftBox h3 { + height: 60px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.nftMedia { + max-width: 50%; + max-height: 140px; + padding-top: 20px; + padding-bottom: 20px; + border-radius: 15px; + object-fit: contain; +} + +.nftBox .nftMedia { + transition: transform 0.3s ease-in-out; +} + +.selected { + transform: scale(1.1); + border: 1px solid #f213a4; + animation: glowing-border 1.5s infinite; +} + +.selected .nftMedia { + transform: scale(1.1); } .optionSelectBox { @@ -77,6 +116,19 @@ margin-top: 0px; } +/* Keyframes for select border aniamtion*/ +@keyframes glowing-border { + 0% { + box-shadow: 0 0 5px #f213a4; + } + 50% { + box-shadow: 0 0 10px #f213a4, 0 0 20px #8008b7; + } + 100% { + box-shadow: 0 0 5px #f213a4; + } +} + /* Between 1200 and 800 */ @media only screen and (min-width: 800px) and (max-width: 1200px) { .nftBox { From 2c83c53bb037426cba7c5f4a6450c90d213ac61e Mon Sep 17 00:00:00 2001 From: Bankk <106103625+BankkRoll@users.noreply.github.com> Date: Mon, 1 May 2023 15:55:13 -0400 Subject: [PATCH 4/4] Cleanup: Rename variables/functions --- pages/stake.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/pages/stake.tsx b/pages/stake.tsx index 6c3b308..5ad3d22 100644 --- a/pages/stake.tsx +++ b/pages/stake.tsx @@ -36,7 +36,7 @@ const Stake: NextPage = () => { const { data: stakedTokens } = useContractRead(contract, "getStakeInfo", [ address, ]); - const [selectedNfts, setSelectedNfts] = useState([]); + const [selectedNftsToStake, setSelectedNftsToStake] = useState([]); const [selectedNftsToWithdraw, setSelectedNftsToWithdraw] = useState([]); useEffect(() => { @@ -62,7 +62,7 @@ const Stake: NextPage = () => { await nftDropContract?.setApprovalForAll(stakingContractAddress, true); } await contract?.call("stake", [ids]); - setSelectedNfts([]); // clear the selected NFTs after staking + setSelectedNftsToStake([]); } if (isLoading) { @@ -156,11 +156,11 @@ const Stake: NextPage = () => { {ownedNfts?.map((nft) => (
{ - setSelectedNfts((prevSelectedNfts) => { + setSelectedNftsToStake((prevSelectedNfts) => { if (prevSelectedNfts.includes(nft.metadata.id)) { return prevSelectedNfts.filter( (id) => id !== nft.metadata.id @@ -182,8 +182,8 @@ const Stake: NextPage = () => { stakeNfts(selectedNfts)} - isDisabled={selectedNfts.length === 0} + action={() => stakeNfts(selectedNftsToStake)} + isDisabled={selectedNftsToStake.length === 0} > Stake Selected NFTs