Neste guia, mostraremos como criar e implantar um contrato inteligente de apostas ERC1155 NFT, onde as pessoas podem apostar em suas edições de NFTs e ganhar tokens ERC20 como recompensa.
Passaremos por:
Criando a Edição ERC1155 do contrato inteligente
Criando o Token ERC20 do contrato inteligente
Criando o contrato inteligente de aposta
Criando um aplicativo web para interagir com o contrato
Vamos começar!
Implante uma edição do contrato inteligente
Se você ainda não possui um contrato inteligente de coleção NFT ERC1155, vá para a página Explore e selecione o contrato inteligente Edition Drop:
Nesta página, clique na versão mais recente de Deploy Now:
Uma lista de opções será aberta para preencher os metadados do contrato NFT Drop que você implementará. Configure seu contrato inteligente com um image, name, description, etc., e configure qual endereço da carteira receberá os fundos das vendas primária e secundária:
Estou usando a rede de teste Polygon Mumbai, mas você pode escolher qualquer rede que preferir.
Quando estiver pronto, clique em Deploy Now!
Depois que seu contrato inteligente for implantado, você estará pronto para:
A cunhagem preguiçosa dos NFTs que estão prontas para os usuários cunharem a partir do NFTs tab.
Configurar suas condições de reivindicação, definição de preço, data de lançamento, quantidade etc.
Não abordaremos esses tópicos em detalhes neste guia, fique à vontade para usar a documentação na página do Edition Drop se precisar de mais informações!
Implante um contrato inteligente de token ERC20
Em seguida, vamos implantar um contrato inteligente de token ERC20, que representa os usuários de token que serão recompensados por apostar seus NFTs!
Se você ainda não possui um contrato inteligente ERC20, vá para a página Explore e clique no contrato Token.
Clique Deploy Now para iniciar o fluxo de implantação:
Certifique-se de implantar isso na mesma rede que sua coleção NFT.
Sorteio de fornecimento de token ERC20
O caminho do contrato inteligente [EditionStake.sol](https://github.com/thirdweb-dev/contracts/blob/main/contracts/staking/EditionStake.sol) funciona para que implantemos a transferência de tokens para o usuário quando reivindicam suas recompensas.
Por esse motivo, precisamos fornecer ao contrato inteligente de aposta um suprimento de tokens para que ele seja transferido.
Para fazer isso, primeiro vamos cunhar alguns tokens em nosso contrato inteligente ERC20 e transferi-los para o contrato de aposta.
Vá para a guia Tokens e clique em Mint.
Entre com um valor e clique em Mint tokens:
Implante uma edição que comprometa o contrato inteligente
Passaremos para a parte emocionante e implantaremos o próprio contrato de aposta!
Vá para o Página de contrato inteligente EditionStake, e clique em Deploy Now:
Agora você precisará fornecer alguma configuração para o seu contrato de apostas.
Você pode usar as informações abaixo de cada campo para ajudá-lo a entender com quais valores você precisa preenchê-los.
Quando estiver pronto, clique em Deploy Now para enviar seu contrato inteligente!
Depósito do Token ERC20
Volte ao seu contrato inteligente ERC20 e aprove os tokens para o seu endereço de contrato inteligente de aposta recém-implantado para gastar.
Vá até a guia explorar no seu Token do contrato e clique na função approve. Vamos permitir que o contrato de aposta gaste ( uma quantidade ) de tokens para que possa pagar recompensas aos jogadores.
Digite seu endereço de contrato de aposta e uma quantia que você acha adequada, clique em Execute e aprove a transação.
Finalmente, vá para a guia explorar do contrato de Aposta .
Aqui, você verá uma função depositRewardTokens. Essa é a função que usaremos para fornecer nosso contrato de apostas com fundos para distribuir como recompensa.
Adicione a quantidade de tokens que deseja depositar no endereço do contrato de aposta.
Uma vez feito, clique em executar e você estará pronto!
Criando um Aplicativo Web de Aposta
Agora, vamos criar um aplicativo Web de aposta NFT, onde os usuários possam conectar suas carteiras, depositar / retirar NFTs e reivindicar recompensas.
Antes de começarmos, você pode acessar o código fonte completo para este modelo no GitHub.
https://github.com/thirdweb-example/edition-staking-app
Usando o CLI, crie um novo projeto Next.js & TypeScript com o React SDK pré-configurado para você, usando o seguinte comando:
npx thirdweb create app --next --ts
Por padrão, a rede é Ethereum Mainnet, você precisará alterá-la para a rede na qual implantou seus contratos inteligentes para dentro do arquivo _app.tsx.
// Este é o chainId para seu dApp funcionar.
const activeChainId = ChainId.Mumbai;
Mostrando NFTs de Carteira Conectada
Primeiro, mostraremos os NFTs que a pessoa possui e permitiremos que as apostem com um botão. Vamos editar a página index.tsx para adicionar essa lógica.
Obtendo os próprios NFTs:
const address = useAddress();
const { contract: editionDropContract } = useContract(
<your-edition-drop-contract-address-here>,
"edition-drop"
);
const { data: ownedNfts } = useOwnedNFTs(editionDropContract, address);
Renderizando-os na interface do usuário:
<div>
{ownedNfts?.map((nft) => (
<div key={nft.metadata.id.toString()}>
<ThirdwebNftMedia metadata={nft.metadata} />
<h3>{nft.metadata.name}</h3>
<Web3Button
contractAddress={stakingContractAddress}
action={() => stakeNft(nft.metadata.id)}
>
Stake
</Web3Button>
</div>
))}
</div>
Estamos usando o componente [ThirdwebNftMedia](https://portal.thirdweb.com/ui-components/nft-renderer') da thirdweb para exibir o NFT.
Em seguida, precisamos criar uma função stakeNft que levará o usuário a apostar no NFT, primeiro solicitando que ele conceda o approval (aprovação) para o endereço do contrato de aposta, para transferir NFTs da carteira do usuário ( da coleção NFT ).
const { contract, isLoading } = useContract(stakingContractAddress);
async function stakeNft(id: string) {
if (!address) return;
const isApproved = await editionDropContract?.isApproved(
address,
stakingContractAddress
);
if (!isApproved) {
await editionDropContract?.setApprovalForAll(stakingContractAddress, true);
}
await contract?.call("stake", id, 1);
}
O terceiro parâmetro no await contract?.call("stake", id, 1); é a quantidade do token que você deseja que seus usuários apostem. Você pode fazer disso um valor dinâmico e aceitar a entrada do usuário; por simplicidade, estamos codificando com dificuldade 1 aqui.
Mostrando os NFTs apostados
Agora que apostamos em nosso NFT, também precisamos exibir as NFTs que o usuário apostou até agora. Para fazer isso, criaremos um novo componente.
Então, crie um novo arquivo components/NFTCard.tsx e adicione o seguinte:
import {
ThirdwebNftMedia,
useContract,
useNFT,
Web3Button,
} from "@thirdweb-dev/react";
import type { FC } from "react";
import {
editionDropContractAddress,
stakingContractAddress,
} from "../consts/contractAddresses";
import styles from "../styles/Home.module.css";
interface NFTCardProps {
tokenId: number;
}
const NFTCard: FC<NFTCardProps> = ({ tokenId }) => {
const { contract } = useContract(editionDropContractAddress, "edition-drop");
const { data: nft } = useNFT(contract, tokenId);
return (
<>
{nft && (
<div className={styles.nftBox}>
{nft.metadata && (
<ThirdwebNftMedia
metadata={nft.metadata}
className={styles.nftMedia}
/>
)}
<h3>{nft.metadata.name}</h3>
<Web3Button
action={(contract) =>
contract?.call("withdraw", nft.metadata.id, 1)
}
contractAddress={stakingContractAddress}
>
Withdraw
</Web3Button>
</div>
)}
</>
);
};
export default NFTCard;
Isso nos dá um belo cartão para mostrar nossos NFTs apostados, cada cartão mostra a imagem do NFT, o nome do NFT e também um botãoWithdraw(retirada) que permite ao usuário abandonar a aposta.
Agora, em pages/stake.tsx transformaremos cada token apostado nesse componente da seguinte maneira:
const { data: stakedTokens } = useContractRead(
contract,
"getStakeInfo",
address
);
<div>
{stakedTokens &&
stakedTokens[0]?.map((stakedToken: BigNumber) => (
<NFTCard tokenId={stakedToken.toNumber()} key={stakedToken.toString()} />
))}
</div>
Ótimo! Agora, temos os NFTs apostados e os NFTs não apostados do usuário.
Mostrar recompensas reivindicadas
const [claimableRewards, setClaimableRewards] = useState<BigNumber>();
useEffect(() => {
if (!contract || !address) return;
async function loadClaimableRewards() {
const stakeInfo = await contract?.call("getStakeInfoForToken", 0, address);
setClaimableRewards(stakeInfo[1]);
}
loadClaimableRewards();
}, [address, contract]);
Isso receberá o stakeInfo do contrato e depois definirá as recompensas.
Para renderiza-lo, precisamos formatá-lo assim:
<p>
{!claimableRewards
? "Loading..."
: ethers.utils.formatUnits(claimableRewards, 18)}
</p>
Reivindicando recompensas
Para permitir que os usuários reivindiquem as recompensas, criaremos um botão e anexaremos uma função a ele.
<Web3Button
action={(contract) => contract.call("claimRewards", 0)}
contractAddress={stakingContractAddress}
>
Claim Rewards
</Web3Button>
Conclusão
Este guia nos ensinou como permitir que seus usuários apostem NFTs ERC1155 que possuam e recebam recompensas por apostá-las!
Se você fez isso também, dê um tapinha nas costas e compartilhe conosco no Discord da thirdweb! Se você quiser dar uma olhada no código, confira o Repositório GitHub.
Este artigo foi escrito por Avneesh Agarwal e traduzido por Adriano P. de Araujo. O original em inglês pode ser encontrado aqui.
Latest comments (0)