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
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
- 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
Isso criará um novo diretório de projeto chamado my-dapp
. Navegue até este diretório com o comando:
cd my-dapp
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
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"
6. Inicialize o prompt de configuração Hardhat com o comando:
npx hardhat
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.
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':
8. Selecione a blockchain Ethereum e, em seguida, selecione a rede Rinkeby.
9. Selecione quaisquer complementos, se desejar.
Este tutorial não usa nenhum complemento. Em seguida, selecione 'Continuar'.
10. Selecione o nível do seu plano de pagamento e insira suas informações de pagamento. Em seguida, selecione 'Pagar e criar'.
11. Depois de criado, copie o URL da API do terminal HTTP:
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.sol
e 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];
}
}
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
A saída do seu console ficará assim:
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
}
}
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);
});
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:
Depois que a transação for concluída, você deve ter 0,1ETH para usar:
19. Em seguida, é hora de implantar nosso contrato. Para fazer isso, use o seguinte comando:
npx hardhat run –network rinkeby scripts/deploy.js
Anote este endereço de token.
20. Clique na sua extensão Metamask. Selecione 'Importar tokens':
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.
22. Confirme se deseja importar seu token para a Metamask:
23. Uma vez importado, você verá o saldo do seu token em sua carteira:
24. Em seguida, inicie seu aplicativo react com o comando:
npx start
25. Navegue até o aplicativo react em execução em localhost:3000
:
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;
Substitua ' CONTRACT_ADDRESS ' pelo endereço do contrato do seu Token da etapa 19. Uma vez salvo, ficará assim:
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)