WEB3DEV

Cover image for Construa uma assinatura NFT usando o Unlock
Dimitris Carvalho Calixto
Dimitris Carvalho Calixto

Posted on • Atualizado em

Construa uma assinatura NFT usando o Unlock

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

2 . O que é o contrato Lock

3 . Implantando uma Instância do Contrato Lock

4 . Veja seu contrato

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.

Página Explorer

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.

Image

Image

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".

Image

Image

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.

Image

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.

Image

Image

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!

Image

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

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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

  );

Enter fullscreen mode Exit fullscreen mode

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");

Enter fullscreen mode Exit fullscreen mode

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);

    }

  };

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

  );

Enter fullscreen mode Exit fullscreen mode

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.

Oldest comments (0)