WEB3DEV

Cover image for Aprenda como criar um Token dApp usando QuickNode.

Aprenda como criar um Token dApp usando QuickNode.

Este guia foi originalmente publicado em https://docs.filebase.com. Confira o site de documentação da Filebase para obter os mais recentes tutoriais Web3 usando o IPFS por meio do Filebase.

Aprenda como criar um Token dApp usando QuickNode.

O que é QuickNode?

QuickNode é uma plataforma que permite implantar dApps e outros aplicativos em mais de 12 diferentes redes blockchain com provisionamento e disponibilidade imediatos. O QuickNode oferece uma variedade de ferramentas e análises poderosas, todas apresentadas por meio de um único painel de controle.

Pré-requisitos:

  • Uma carteira cripto, como a MetaMask .
  • ​Instalar o Node.js e o npm .
  • Baixar e instalar um IDE de sua escolha, como o VSCode .
  • Registrar- se em uma conta gratuita do Filebase.
  • Ter suas Chaves de Acesso Secretas da Filebase. Saiba como visualizar suas chaves de acesso aqui .
  • Crie um bucket na Filebase. Aprenda como criar um bucket aqui .

1. Primeiro, baixe e instale o S3FS-FUSE em seu ambiente local.

Esta ferramenta está disponível em um sistema Linux ou macOS.

2. Configure um arquivo de chave de acesso para uso com o S3FS-FUSE.

Configure um arquivo de credenciais para S3FS em ${HOME}/.passwd-s3fs. Você precisará salvar suas chaves secretas de acesso à Filebase neste arquivo e conceder a ele permissões de proprietário. Você pode fazer isso com os seguintes comandos:

echo ACCESS_KEY_ID:SECRET_ACCESS_KEY > ${HOME}/.passwd-s3fs
chmod 600 ${HOME}/.passwd-s3fs
Enter fullscreen mode Exit fullscreen mode

ACCESS_KEY_ID é sua chave de acesso à Filebase e SECRET_ACCESS_KEY é sua chave secreta da Filebase. Para obter mais informações sobre as chaves de acesso do Filebase, consulte aqui .

3. Monte seu balde.

Você pode montar um bucket Filebase IPFS com o comando:

s3fs mybucket /path/to/mountpoint -o passwd_file=${HOME}/.passwd-s3fs -o url=https://s3.filebase.com
Enter fullscreen mode Exit fullscreen mode
  • mybucket: nome do seu bucket Filebase
  • /caminho/para/ponto de montagem

4. Agora, navegue até o bucket da Filebase montado.

Crie um projeto de react para seu aplicativo:

npx create-react-app my-dapp
Enter fullscreen mode Exit fullscreen mode

Isso criará um novo diretório de projeto chamado my-dapp. Navegue até este diretório com o comando:

cd my-dapp
Enter fullscreen mode Exit fullscreen mode

Antes de podermos instalar o Hardhat, precisaremos remover o arquivo padrão ' README.md ', pois ele causará um conflito durante a inicialização do Hardhat. Use o seguinte comando para remover este arquivo:

rm README.md
Enter fullscreen mode Exit fullscreen mode

5. Instale o Hardhat com o seguinte comando:

npm install --save-dev "hardhat@^2.9.3" "@nomiclabs/hardhat-waffle@^2.0.0" 
"ethereum-waffle@^3.0.0" "chai@^4.2.0" "@nomiclabs/hardhat-ethers@^2.0.0" 
"ethers@^5.0.0"
Enter fullscreen mode Exit fullscreen mode

6. Inicialize o prompt de configuração Hardhat com o comando:

npx hardhat
Enter fullscreen mode Exit fullscreen mode

Selecione 'Criar um projeto básico de amostra' > 'Criar um projeto básico', selecione o diretório atual como a raiz do projeto e selecione 'Y' para incluir um .gitignore.

alt_text

Este comando criou alguns arquivos de projeto, como os diretórios de contratos e scripts.

7. Agora, vamos para o painel do QuickNode . Selecione 'Criar um endpoint':

alt_text

8. Selecione a blockchain Ethereum e, em seguida, selecione a rede Rinkeby.

alt_text

9. Selecione quaisquer complementos, se desejar.

Este tutorial não usa nenhum complemento. Em seguida, selecione 'Continuar'.

alt_text

10. Selecione o nível do seu plano de pagamento e insira suas informações de pagamento. Em seguida, selecione 'Pagar e criar'.

alt_text

11. Depois de criado, copie o URL da API do terminal HTTP:

alt_text

12. Em seguida, anote a chave privada da sua carteira criptomoedas.

Se você estiver usando a Metamask, siga as instruções encontradas aqui .

13. Navegue até a pasta de contracts do seu projeto.

Remova o arquivo padrão chamado Greeter.sole crie um novo arquivo chamado dApp.sol.

Digite o seguinte conteúdo neste novo arquivo:

//dApp.sol
//SPDX-License-Identifier: UNLICENSED
 pragma solidity ^ 0.7 . 0 ;
contract Token {
    string  public name = "dApp token" ;
    string  public symbol = "DAT" ;
    // A quantidade fixa de tokens armazenados em uma variável de tipo inteiro sem sinal.
    uint256 public totalSupply = 1000000 ;
    // Uma variável de tipo de endereço é usada para armazenar contas ethereum.
    address public owner;
    // Um ​​mapeamento é um mapa de chave/valor. Aqui armazenamos o saldo de cada conta.
    mapping(address => uint256) balances;
    /**
    * Inicialização do contrato.
    *
    * O `constructor` é executado apenas uma vez quando o contrato é criado.
    * O modificador `public` permite que uma função seja chamada de fora do contrato.
    */
    constructor () {
        // O totalSupply é atribuído ao remetente da transação, que é a conta
        // que está implementando o contrato.
        balances[msg.sender] = totalSupply;
        owner = msg.sender;
    }
    /**
    * Uma função para transferir tokens.
     *
    * O modificador `external` torna uma função *apenas* chamada de fora
    * do contrato.
    */ fnction transfer(address to, uint256 amount )external{
         // Verifica se o remetente da transação possui tokens suficientes.
        // Se o primeiro argumento de `require` for avaliado como `false`,então a
        // transação será revertida.
        require (balances[msg.sender] >= amount, "Not enough tokens" );
        // Transfira o valor.
        balances[msg.sender] -= amount;
        balances[a] += amount;
    }
     /**
    * Função somente leitura para recuperar o saldo do token de uma determinada conta.
    *
    * O modificador `view` indica que não modifica o
    * estado do contrato, o que nos permite chamá-lo sem executar uma transação.
    */
    function  balanceOf ( address account ) external view returns ( uint256 )  {
         return balances[account];
    }
}
Enter fullscreen mode Exit fullscreen mode

Este contrato cria um token personalizado que usaremos para seu dApp posteriormente. Substitua o nome público e o símbolo público do token pelo que você quiser.

14. Agora queremos implantar nosso contrato.

Para fazer isso, vamos implantá-lo em um nó HardHat local. Para obter uma lista das contas falsas locais criadas pelo HardHat, execute o comando:

npx hardhat node
Enter fullscreen mode Exit fullscreen mode

A saída do seu console ficará assim:

alt_text

A partir daqui, podemos ver que temos 20 contas de teste para usar.

15. Em seguida, abra o arquivo hardhat.config.js no diretório do seu projeto. Substitua o conteúdo pelo seguinte código:

require("@nomiclabs/hardhat-ethers");

module.exports = {
 defaultNetwork: "rinkeby",
 networks: {
   rinkeby: {
     url: "QUICKNODE_API_URL",
     accounts: "WALLET_PRIVATE_KEY"
   }
 },
 solidity: {
   version: "0.7.0",
   settings: {
     optimizer: {
       enabled: true,
       runs: 200
     }
   }
 },
 paths: {
   sources: "./contracts",
   tests: "./test",
   cache: "./cache",
   artifacts: "./artifacts"
 },
 mocha: {
   timeout: 20000
 }
}
Enter fullscreen mode Exit fullscreen mode

Substitua os seguintes valores:

  • QUICKNODE_API_URL: sua URL de endpoint QuickNode
  • WALLET_PRIVATE_KEY: sua chave privada da carteira criptografada.

16. Crie um novo arquivo em seu diretório de scripts chamado deploy.js. Digite o seguinte código dentro desse arquivo:

//deploy.js
const hre = require("hardhat");
async function main() {
   // ethers está disponível no escopo global
   const [deployer] = await hre.ethers.getSigners();
   console.log(
     "Implantando os contratos com a conta:",
     await deployer.getAddress()
   );

   console.log("Account balance:", (await deployer.getBalance()).toString());

   const Token = await hre.ethers.getContractFactory("Token");
   const token = await Token.deploy();
   await token.deployed();

   console.log("Token address:", token.address);

 }

 main()
   .then(() => process.exit(0))
   .catch((error) => {
     console.error(error);
     process.exit(1);
   });
Enter fullscreen mode Exit fullscreen mode

17. Antes de implantarmos este contrato, precisamos de alguns fundos da Rinkeby.

Primeiro, certifique-se de que sua carteira criptografada esteja configurada para usar a rede Rinkeby. Se você estiver usando a Metamask, siga as instruções encontradas aqui .

18. Em seguida, vá até a torneira Rinkeby e solicite alguns fundos de teste:

alt_text

Depois que a transação for concluída, você deve ter 0,1ETH para usar:

alt_text

19. Em seguida, é hora de implantar nosso contrato. Para fazer isso, use o seguinte comando:

npx hardhat run –network rinkeby scripts/deploy.js
Enter fullscreen mode Exit fullscreen mode

alt_text

Anote este endereço de token.

20. Clique na sua extensão Metamask. Selecione 'Importar tokens':

alt_text

21. Digite o Endereço do Contrato de Token.

O símbolo do token deve ser preenchido automaticamente após adicionar o endereço do contrato. Role para baixo até 'Token Decimal'. Neste tutorial, nosso contrato usa um decimal de 0.

alt_text

22. Confirme se deseja importar seu token para a Metamask:

alt_text

23. Uma vez importado, você verá o saldo do seu token em sua carteira:

alt_text

24. Em seguida, inicie seu aplicativo react com o comando:

npx start
Enter fullscreen mode Exit fullscreen mode

25. Navegue até o aplicativo react em execução em localhost:3000:

alt_text

26. Edite o src/App.js arquivo. Substitua o conteúdo existente pelo seguinte código:

import './App.css';
import {ethers} from 'ethers'
import { useState } from 'react';
import TokenArtifact from "./artifacts/contracts/dApp.sol/Token.json"
const tokenAddress = "CONTRACT_ADDRESS"

function App() {
const [tokenData, setTokenData] = useState({})
const [amount, setAmount] = useState()
const [userAccountId, setUserAccountId] = useState()

async function requestAccount() {
 await window.ethereum.request({ método: 'eth_requestAccounts' });
}

const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
async function _intializeContract(init) {
// Primeiro inicializamos ethers criando um provedor usando window.ethereum
  // Quando, inicializamos o contrato usando esse provedor e o token
  // artefato. Você pode fazer a mesma coisa com seus contratos. 
 const contract = new ethers.Contract(
   tokenAddress,
   TokenArtifact.abi,
   init
 );

 return contract
}
async function _getTokenData() {
 const contract = await _intializeContract(signer)
 const name = await contract.name();
 const symbol = await contract.symbol();
 const tokenData = {name, symbol}
 setTokenData(tokenData);
}
async function senddAppToken() {
 if (typeof window.ethereum !== 'undefined') {
   await requestAccount()
   const contract = await _intializeContract(signer)
   const transaction = await contract.transfer(userAccountId, amount);
   await transaction.wait();
   console.log(`${amount} dAppToken has been sent to ${userAccountId}`);
 }
}
async function getBalance() {
 if (typeof window.ethereum !== 'undefined') {
   const contract = await _intializeContract(signer)
   const [account] = await window.ethereum.request({ method: 'eth_requestAccounts' })
   const balance = await contract.balanceOf(account);
   console.log("Account Balance: ", balance.toString());
 }
}
 return (
   <div className="App">
     <header className="App-header">
     <button onClick={_getTokenData}>get token data</button>
     <h1>{tokenData.name}</h1>
     <h1>{tokenData.symbol}</h1>
     <button onClick={getBalance}>Get Balance</button>
     <button onClick={senddAppToken}>Send dAppToken</button>
     <input onChange={e => setUserAccountId(e.target.value)} placeholder="Account ID" />
       <input onChange={e => setAmount(e.target.value)} placeholder="Amount" />
     </header>
   </div>
 );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

Substitua ' CONTRACT_ADDRESS ' pelo endereço do contrato do seu Token da etapa 19. Uma vez salvo, ficará assim:

alt_text

Usando este aplicativo, você poderá obter o saldo atual da carteira do token dApp em nossa carteira, enviar tokens dApp para outras carteiras, como as carteiras de teste, obtiver os endereços anteriores e obter dados do token dApp.

Este front-end de React do nosso aplicativo pode ser personalizado ao seu gosto e pode incluir outros scripts, funções ou até mesmo imagens e animações.

Quer saber mais sobre o Filebase? Você pode se inscrever para uma conta gratuita hoje para começar a usar o IPFS.

Esse artigo foi escrito por Jessie Mongeon e traduzido por Arnaldo Campos. Seu original pode ser lido aqui.

Top comments (0)