Neste manual, vamos implantar uma instância do contrato Lock criado pelo Protocolo Unlock e depois integrar este contrato em um aplicativo simples! Este contrato permite que você crie NFTs com limite de tempo para assinaturas recorrentes, bilhetes, token gating e certificações com vencimento.
Sumário
1 . O que é o Protocolo Unlock
3 . Implantando uma Instância do Contrato Lock
5 . Construindo uma Assinatura em sua aplicação
6 . Encerrando
O que é o Protocolo Unlock
Unlock é um protocolo de código aberto para associações como os NFTs com limite de tempo construído sobre a Ethereum. Ele simplifica os benefícios de associação para comunidades online e ajuda os criadores a monetizar o conteúdo sem depender de um intermediário. O Unlock facilita a incorporação de assinaturas e filiações em seus projetos.
O que é o contrato Lock
O contrato Lock é um contrato de adesão criado pela Unlock e implantado usando o Release, no qual você mesmo pode implantar uma instância. Ele cria NFTs com limite de tempo que podem ser usados para adesões, assinaturas, bilhetes ou certificações.
Implantando uma Instância do Contrato Lock
Para começar, você pode visualizar e implantar contratos e protocolos pré-construídos com gás otimizado e auditados na página Explorar.
Encontre e clique no contrato Lock. Aqui, você verá alguns exemplos de possíveis casos de uso, as notas da versão, as funções e eventos do contrato, o código fonte e a ABI. Você também pode ver quais extensões foram incluídas neste contrato.
Na parte superior esquerda de sua tela, selecione a versão que você gostaria de implantar; para este exemplo, usaremos a v11.0.10, e clicaremos em Deploy Now para implantar uma instância no contrato Lock. Você precisará então especificar o seguinte:
- O
_lockcreator. O criador de um Bloqueio (Lock) se torna o único LockManager por padrão. Neste exemplo, use o endereço de sua carteira de teste. - A duração da associação:
_expirationDuration. Esta é medida em segundos; neste exemplo, nossa duração será de 1 hora ou 3600 segundos. - O endereço do contrato do token:
_tokenAddress, que será definido como o endereço zero. - O preço:
_keyprice - O número de associações:
_maxNumberOfKeys - O nome de seu contrato, por exemplo, "Meu contrato Lock".
Inicialmente, vamos querer implantar nosso contrato para uma rede de teste. Para este exemplo, estaremos utilizando a rede de teste Goerli. Verifique se você tem fundos GoerliETH suficientes em sua carteira de teste, depois clique em Deploy Now novamente para implantar seu contrato.
Veja seu contrato
Usando o Painel de Controle, você pode ver seu contrato recém-implantado! Usando a aba Explorer, você pode ler e modificar o estado e as propriedades de seu contrato.
As outras guias permitem que você veja todos os NFTs cunhados, os eventos acionados no contrato e o código fonte.
Na aba Código, você verá trechos de código para ajudá-lo a usar o SDK para interagir com seu contrato e incorporá-lo em seus projetos.
Aqui, você pode aprender como ler dados de seu contrato. Use o menu suspenso para selecionar a função de leitura que você gostaria de integrar, selecione seu idioma preferido, e você está pronto para ir!
Da mesma forma, você pode escrever dados em seu contrato usando o SDK.
Construindo uma Assinatura em sua aplicação
Primeiramente, queremos criar um projeto Next.js com Typescript usando este modelo da thirdweb. Crie uma pasta de projeto, navegue até essa pasta dentro de seu terminal e execute:
npx thirdweb create --template next-typescript-starter
Isto o levará a nomear seu projeto. Uma vez que você tenha feito isso, abra o projeto em seu editor de código.
Dentro de pages/_app.tsx, mude a chainId, que é Mainnet por padrão, para Goerli, pois testaremos nosso aplicativo na rede de testes Goerli.
import type { AppProps } from "next/app";
import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
import "../styles/globals.css";
// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mainnet;
function MyApp({ Component, pageProps }: AppProps) {
return (
<ThirdwebProvider desiredChainId={activeChainId}>
<Component {...pageProps} />
</ThirdwebProvider>
);
}
export default MyApp;
Vamos agora navegar para pages/index.tsx. Inicialmente, vamos remover o código desnecessário para que seu arquivo tenha este aspecto:
import { ConnectWallet } from "@thirdweb-dev/react";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
const Home: NextPage = () => {
return (
<div className={styles.connect}>
<ConnectWallet />
</div>
);
};
export default Home;
Para obter o endereço da carteira do usuário, acrescente o seguinte:
const address = useAddress();
Em seguida, precisamos verificar se o endereço existe e se uma carteira está conectada. Se existir e se eles ainda não estiverem subscritos, vamos exibir um Web3Button chamado subscribe, detalhes de uso podem ser encontrados nesse guia, e um botão ConnectWallet para permitir que o usuário desconecte sua carteira, ambos componentes UI da Thirdweb. Se uma carteira não estiver conectada, mostraremos apenas um botão ConnectWallet.
Para se conectar ao nosso contrato Lock, copie o endereço do contrato do Painel de Controle e salve-o em uma variável. Você pode então recuperar o contrato Lock que implantamos utilizando a seguinte função:
const { contract } = useContract(contractAddress);
Claramente, precisamos determinar se o usuário tem uma assinatura ativa, pois mesmo que o usuário tenha adquirido uma assinatura anteriormente, ela pode ter expirado. Para determinar se o usuário tem uma assinatura ativa, há uma função no contrato Lock chamada getHasValidKey(<endereço>). Para chamar esta função de leitura, usaremos a seguinte função:
const { data: subscribed, isLoading } = useContractRead(
contract,
"getHasValidKey",
address
);
Para obter a duração de uma assinatura, há outra função de leitura no contrato chamada expirationDuration, que chamaremos da mesma forma:
const { data: expirationDuration, isLoading: expirationLoading } =
useContractRead(contract, "expirationDuration");
A lógica final que precisamos implementar é a compra de uma assinatura com um clique. Para isso, chamaremos a função escrita purchase(<value>, <recipient>, <referrer>, <keyManager>, <data>). Usaremos a função useContractWrite para permitir que os usuários chamem purchase ao clicar no botão de assinatura:
const { mutateAsync: purchase } = useContractWrite(contract, "purchase");
const call = async () => {
try {
const data = await purchase([
[0],
[address],
["0x0000000000000000000000000000000000000000"],
[address],
[0],
]);
console.info("contract call success", data);
} catch (err) {
console.error("contract call failure", err);
}
};
A função call vincula a ação de um usuário clicando no botão de inscrição ao método:
<Web3Button
contractAddress={contractAddress}
className={styles.mainButton}
colorMode="dark"
accentColor="#F213A4"
action={call}
>
Assinar
</Web3Button>
Agora precisamos implementar esta lógica, lidar com os estados de carregamento, usar algumas opções de renderização condicional e adicionar algum estilo aos nossos componentes:
<div className={styles.container}>
<h1 className={styles.h1}>Unlock Protocol Example</h1>
<div className={styles.pageContainer}>
<p className={styles.explain}>
An example project demonstrating how you can use{" "}
<a
href="https://unlock-protocol.com/"
target="_blank"
rel="noopener noreferrer"
className={styles.purple}
>
Unlock
</a>
's Contrato de Lock público para criar NFTs de assinatura com{" "}
<a
href="https://thirdweb.com/"
target="_blank"
rel="noopener noreferrer"
className={styles.purple}
>
thirdweb
</a>
</p>
</div>
{address ? (
isLoading ? (
<h1 className={styles.h1}>Loading...</h1>
) : (
<div className={styles.spacerTop}>
{subscribed ? (
<div className={styles.spacerTop}>
{expirationLoading ? (
<h1 className={styles.h1}>Loading...</h1>
) : (
<p className={styles.h1}>
Obrigado por se inscrever! Sua assinatura é válida para um
total de{" "}
{new Date(expirationDuration.toNumber() * 1000)
.toISOString()
.slice(11, 16)}{" "}
hour(s)!
</p>
)}
</div>
) : (
<Web3Button
contractAddress={contractAddress}
className={styles.mainButton}
colorMode="dark"
accentColor="#F213A4"
action={call}
>
Assinar
</Web3Button>
)}
<div className={`${styles.mainButton} ${styles.spacerTop}`}>
<ConnectWallet />
</div>
</div>
)
) : (
<div className={styles.spacerTop}>
<ConnectWallet />
</div>
)}
</div>
);
E voilà! Agora temos nosso contrato totalmente integrado em nosso front-end para que uma assinatura possa ser criada com o clique de um botão! Também mostramos a duração da assinatura aos nossos usuários para informá-los de quando eles precisarão renovar.
Por favor, visite o repositório no GitHub para ter uma visão completa do código finalizado.
Encerrando
Parabéns 🎉 - você criou com sucesso seu primeiro modelo de assinatura na cadeia com o Unlock! Você implantou seu contrato Lock e o integrou em um front-end pronto para ser usado em seus projetos.
Se você tiver alguma dúvida, ficar preso a qualquer momento, ou quiser compartilhar conosco seus incríveis projetos, visite nosso Discord, onde você pode falar diretamente com alguém da equipe da thirdweb!
Artigo escrito no por Ciara Nightingale . A versão original pode ser encontrada aqui. Traduzido e adaptado por Dimitris Calixto.
Top comments (0)