Como criar um aplicativo para aluguel de bicicletas na Binance

1. Boas-vindas e visão geral do projeto: Olá a todos e bem-vindos ao meu curso. Neste curso, vamos construir um aplicativo descentralizado de aluguel de bicicletas na rede de testes de cadeia inteligente financeira, vamos começar codificando um contrato inteligente e colocando toda essa lógica juntos. Em seguida, vamos implantá-lo para a cadeia inteligente financeira testando-o. Em seguida, construiremos nossa interface do usuário. Então, vamos usar o React. Vamos construir uma página inicial em uma página de painel. E, finalmente, vamos conectar esse front-end com o contrato inteligente implantado para que possamos interagir com o blockchain fazer transações e extrair dados em todas essas coisas boas. E às vezes é melhor vê-lo em ação. Então, aqui está uma olhada no aplicativo final em uma explicação de como ele funciona. Ok, então aqui está o aplicativo. Então imagine que você tem muitas trilhas de bicicleta no centro da cidade, e você compra um pequeno espaço de escritório e coloca um monte de bicicletas nele e monta um negócio de aluguel de bicicletas. Mas em vez de aceitar dinheiro ou cartão de débito ou o que quer que seja, você vai aceitar B&B. Então, se eu quisesse entrar lá e alugar uma bicicleta, eu viria a este aplicativo. Se essa fosse minha primeira vez, eu primeiro conectaria minha carteira. Então clique em Conectar carteira e conecte sua carteira. E então eu clicaria em escolher minha bicicleta. E aqui temos um formulário. Diz: Bem-vindo, insira seu primeiro e sobrenome para se registrar. Você tem que se registrar como locatário no contrato inteligente para verificar as bicicletas. Então, vou colocar o teste Travis e clicar em Enviar. Em seguida, confirmarei a transação no MetaMask. E a propósito, eu olho para essas baixas taxas de gasolina, isso é como US $0,20. Então, confirme. Assim que isso for feito, ele exibirá meu painel porque serei locatário no contrato inteligente. Por isso, diz bem-vindo, Travis ou qualquer que seja o seu nome. Aqui estão suas estatísticas. Portanto, há crédito B & B. Então, posso adicionar crédito à minha conta. Meu valor devido, minha quantidade de minutos de viagem, se eu verificar uma bicicleta e o status da minha bicicleta estiver vermelha, o que significa que não tenho nenhuma bicicleta verificada. Agora temos dois formulários. Um para creditar sua conta, um para pagar suas dívidas e temos três bicicletas para escolher. E eu posso vir aqui e verificar uma bicicleta e verificar o antibiótico. Então, vamos em frente e creditar nossa conta. Vou adicionar 0,2 B & B para creditar minha conta. Então, meu total é de 0,2 com algumas taxas mínimas de gasolina. Então clique em Confirmar. E quando essa transação for concluída, terei crédito de 0 a B e B. Então agora estou pronto para conferir minha bicicleta. Tenho algum crédito aqui. E eu quero verificar, digamos que eu quero conferir esta bicicleta do meio. Então clique em checkout e confirme isso. E o que vai acontecer aqui é meu status de bicicleta ficará verde, o que significa que tenho uma bicicleta verificada atualmente. Na minha viagem, os minutos começarão a se totalizar e eu poderei levar minha bicicleta para um passeio. E ainda estamos pendentes. Lá vamos nós. Meu status de bicicleta é verde. A bicicleta é gratuita para levar para um passeio. Vou voltar em cerca de sete ou oito minutos e vamos verificar a bicicleta de volta e mostrarei o resto do aplicativo. Ok, então já se passaram cerca de oito minutos, então vamos verificar a bicicleta de volta. Então, vou vir aqui e clicar em check-in e confirmar a transação. Agora, o que vai acontecer é que meu status de bicicleta voltará para vermelho, o que significa que não foi verificado. Meu B & B do será totalizado em meus minutos de viagem também serão totais. Então meu status de bicicleta é vermelho. Meu B & B tenho 0,005 B&B nos meus minutos de viagem ou às oito. Então agora posso pagar meu B & B, fazer 0,005 BNB. E clique em enviar. Confirme isso. Agora, uma vez que eu pagar meu saldo, isso vai para 0. Meus minutos de viagem vão para 0 e meu status de bicicleta voltará. Na verdade, poderei verificar uma bicicleta novamente. Porque se você tiver um saldo, você não poderá verificar uma bicicleta porque você tem que pagar seu saldo nesse tipo de manter o dono livre de ter que perseguir as pessoas. Esta é uma maneira que o proprietário não precisa estar super envolvido com seus clientes. Ele só precisa fornecer a bicicleta. Porque se você não pagar seu saldo, você pode conferir outra bicicleta. Agora, em nosso contrato inteligente, também temos muitos cheques para garantir que os locatários não façam coisas que não gostariam de tentar pagar quando eu não tenho um valor devido. Então, se eu clicar em Enviar, ele deve gerar um erro. Eu deveria ter um slide de erro aqui em cima, dando-me algum tipo de mensagem de erro. Sim, a execução foi revertida. Você não tem nada devido neste momento? Se eu tentar fazer outra coisa como verificar antibiótico que nunca verifiquei, também devo receber uma mensagem. Por favor, confira uma bicicleta primeiro. E essa é basicamente a essência do aplicativo. Além disso, no final do curso, há uma lição bônus na qual criamos o painel de controle de um proprietário. Neste painel, ele mostrará o valor total do contrato, o valor que são os proprietários, o botão que dá a capacidade para o proprietário retirar seu valor. Agora você pode estar se perguntando, como um dono ganha dinheiro com isso? Então, se alguém entrar aqui e creditar sua conta com US$10, ele realmente credita o contrato inteligente com US$10, mas esses US $10 são atribuídos a eles. Então, quando eles pagam, ele realmente sai de seu crédito nesse valor que eles pagam, na verdade, se torna os proprietários. Então toda vez que alguém paga seu Mountain Dew, isso se transfere para o dono. Portanto, estaremos criando no final como um painel de bônus e proprietários , onde eles podem realmente visualizar esse valor e retirar esse valor. Então eu me diverti muito construindo isso e sei que você também vai. Então, quem deve fazer esse curso? Veremos se algum desses cenários atrai você. Número um, talvez você esteja procurando um projeto sólido da Web três para adicionar ao seu portfólio. Então, talvez você esteja aprendendo o desenvolvimento de blockchain e queira conseguir esse emprego e entrar nessa indústria, mas precisa de alguns projetos sólidos para adicionar ao seu portfólio. Então este curso é para você. Talvez você tenha feito o desenvolvimento de blockchain com um tório ou na Máquina Virtual Ethereum. E você está se perguntando como ele funciona com B&B ou como você pode usar o BNB e o remix, ou como você implanta na rede de testes BSC, então você achará este curso benéfico. Ou talvez você só queira o pacote inteiro. Você quer aprender a criar um contrato inteligente, como implantá-lo e como interagir com ele de uma biblioteca como o React. Ou talvez você esteja interessado em ver como podemos exibir erros de solidez no front-end para informar nosso usuário quando ele cometeu um erro. Ou talvez você esteja interessado em como um aplicativo como esse proporcionaria renda sustentável para o proprietário. Se algum desses apelar para você, então eu acho que você está no lugar certo. Agora, existem alguns pré-requisitos. Número um, você deve ter conhecimento básico de desenvolvimento web. Portanto, você provavelmente deveria ter aprendido HTML e CSS e ter construído algumas páginas da Web fáceis. Número dois, você deve ter um entendimento básico do JavaScript e reagir. Então, vamos usar um reagente neste curso e isso será esperado. Não vai ser loucura como se não usássemos Redux e temos todas essas coisas elaboradas. Vamos tentar mantê-lo simples, mas você ainda deve ter esse conhecimento básico. E então, finalmente, você deve ter uma compreensão da blockchain e como ela funciona, que eu suponho que você faça ou você não estaria aqui. E no que diz respeito à solidez, você não precisa saber solidez para fazer este curso porque eu tenho uma lição opcional com um primer de solidez para você se atualizar se você não souber disso. Acho que você vai se divertir tanto quanto eu construí este aplicativo. Então, vamos começar. 2. Como criar nosso contrato inteligente: Ok, então se você for para remix.ethereum.org, vamos usar o IDE de re-mix como deveríamos. Altere meu espaço de trabalho para o espaço de trabalho padrão. Clique em contratos e crie um novo. Basta clicar com o botão direito em novo arquivo E vamos chamá-lo de corrente de bicicleta porque eu não sou muito bom em inventar nomes, mas cadeia de bicicletas, blockchain, meio cativante. Então, como sempre com solidez, você vai colocá-lo em seu identificador de licença. Então isso é comentado identificador de licença SPD MIT, o que significa jantar de código aberto, declaração de pragma, solidez pragma. Então vamos fazer 0 ponto 0 ponto 0 porque esse é um bom número. E vamos dizer contrato e chamamos essa corrente de bicicleta. E aqui vamos nós. Não é emocionante ter uma nova tela para codon? De qualquer forma, tive algumas reclamações e um vídeo anterior que não era grande o suficiente. Posso tornar essa parte do código maior, mas não isso aqui. Então, tenha paciência comigo. Então, como costumamos fazer, vamos começar isso com algum pseudocódigo e isso vai ser algo assim. Adicione-se como locatário porque você tem que se adicionar como alguém que pode alugar uma bicicleta, checkout bike. Você irá e verificará a bicicleta. Verifique em uma bicicleta. Então você confira a bicicleta, você anda por aí e depois a verifica novamente. Obtenha a duração total do uso da bicicleta. Então, quanto tempo você ficou na bicicleta? E então queremos coisas como obter saldo do contrato só porque é bom ter essas informações e, especificamente, obter equilíbrio dos locatários. E então, com essa duração total, precisamos ser capazes de definir o valor devido, como quanto o aluguel ou O's. Então defina o valor devido. E acho que este é um bom começo. Vamos começar, isso irá a partir daqui. E estou tendo esse erro aqui. É porque eu não coloquei um ponto e vírgula por trás disso. Estive em JavaScript nos últimos dias, então tenha cuidado comigo se eu esquecer o ponto e vírgula. Tudo bem, adicione-se como locatário. E, na verdade, antes de fazermos isso, uma coisa que eu gosto de fazer é definir um dono. Então, se quem implanta o contrato inteligente, esse é o proprietário no caso de querer restringir as coisas a si mesmos. Então, para fazer isso, vamos colocar uma variável aqui em cima, uma variável de armazenamento do proprietário do tipo de endereço. Criaremos um construtor. E definiremos o proprietário para o remetente do ponto de mensagem. E o que isso faz é que esse construtor é executado quando é implantado pela primeira vez. Então, quando este contrato for implantado pela primeira vez, o remetente que será a pessoa que o implantará será definido como o proprietário. Agora, contratos inteligentes são imutáveis. Eles estão na cadeia de blocos, eles não podem ser alterados. Portanto, esse construtor é executado uma vez e o proprietário será definido. Então, vamos colocar isso antes do pseudocódigo. Então, aqui está o primeiro. Adicione-se como locatário. Então, criaremos uma estrutura chamada locatário e definiremos algumas propriedades. Então, primeiro, endereço, endereço da carteira a pagar. Como cada locatário tem um endereço de carteira, tudo na Web três é um endereço de carteira. Podemos identificar a pessoa que podemos pagar a pessoa, a pessoa pode pagar outras pessoas. E esse é um tipo de endereço e nós o definimos como pagável. A propósito, se você é como, eu não faço ideia do que é essa coisa, esse pragma neste pagável. Eu criei um vídeo do YouTube há pouco tempo. Tem cerca de uma hora de duração. Chama-se solidez Learn em uma hora. Se você quiser ir e verificar isso primeiro, vou explicar a você que todos os tipos de dados não abordariam é o que é um pagável. E vamos analisar coisas como funções e loops e criaremos um contrato inteligente bem fácil para que eu possa ensinar como o Solidity funciona. Então, se você não tem ideia do que estou fazendo, vá assistir isso, então volte a isso. Acho que será muito benéfico para você. Vou colocar um link abaixo para isso. E, novamente, é um vídeo gratuito do YouTube. Então eles têm um endereço de carteira. Em seguida, vamos fazer String FirstName. E, claro, String LastName. Porque mesmo sendo um endereço de carteira, queremos algum tipo de personalidade por trás disso. Então vamos definir um par de booleanos que bool possa alugar, eles podem alugar, eles podem alugar? Não estão autorizados a alugar. Você verá como isso funciona em um minuto. Bool ativo, eles estão ativos? Eles estão atualmente na bicicleta quando verificam? Haverá ativo quando eles o verificarem novamente, eles não estarão ativos. Equilíbrio. Eles podem enviar dinheiro para o saldo para cobrir as taxas. E depois mais algumas ONUs. Portanto, o valor devido é o valor que eles têm que pagar. Então eles tiram a bicicleta e isso custa tantos minutos em um total até esse valor. Isso é o que se deve. E então você começou um fim para que possamos acompanhar o horário de início e término para que possamos obter esse período de tempo. Você acabou. E é isso. Isso é tudo o que eu quero com meu locatário. E criamos isso em uma estrutura que é como um objeto. Se você assistiu ao meu Learn solidez em um vídeo de uma hora, o que fizemos lá foi que criamos uma série de locatários e, em seguida, fizemos um loop para encontrar o índice que queríamos. Sempre que quiséssemos um locatário específico, procurávamos o endereço da carteira, obtivemos esse índice. Saberíamos que o locatário é. Neste vídeo, faremos algo diferente. Não vamos usar uma matriz. Vamos usar um mapa, que eu acho que o torna muito mais fácil. E você não precisa lidar com loops, que às vezes, se houver muitos deles ou se houver uma quantidade desconhecida de loops, isso pode causar altas taxas de gás. Então, vamos fazer uma coisa chamada mapeamento. É como um dicionário, é um par de chave-valor. Faça o mapeamento e a chave será o endereço. O valor será o locatário. Vai torná-lo público, e vamos chamá-lo de locatários. Assim, podemos procurar um locatário pelo endereço da carteira. Não teremos que percorrer nada. Podemos apenas dizer, aqui está o endereço da carteira, me dê o locatário. E, finalmente, podemos fazer essa função de locatário de anúncios para parâmetros de ar. Serão os parâmetros do locatário. Então, vamos dizer endereço. Na verdade, provavelmente é mais fácil copiar isso, colá-lo, porque vamos colocar exatamente a mesma coisa que os parâmetros. Retire esses ponto-e-vírgulas e coloque vírgulas. E, a propósito, esse é o Comando D. Se você selecionar algo e fizer o Comando D em um Mac, basta selecionar a próxima instância e seguida, alterar todas elas de uma só vez. E eu não mudei este. E então eu posso pegar como o espaço em branco e acertar o backspace. E lá vamos nós, colocamos um espaço entre eles e eles estão todos em uma linha. Então, todos eles correspondem às propriedades e ao locatário. Isso é tudo o que é. Em seguida, tire essa vírgula à direita e coloque meus colchetes encaracolados. E, a partir daqui, queremos adicionar esse locatário ao nosso mapeamento. E para adicionar a um mapeamento, basta fazer locatários, certo? Porque eles estão mapeando é chamado de locatários. E entre parênteses, você coloca o endereço da carteira porque essa é a nossa chave. Os endereços são fundamentais. Neste, a propósito, é o tipo, o tipo é endereço. Em nossa carteira, o endereço será a chave. O valor será o locatário. Então, para adicionar algo a um mapa, basta usar como endereço de carteira de locatários igual a um ou algo nele adiciona uma chave de endereço de carteira em um valor de um. Mas em vez de um, queremos um locatário. Vamos adicionar um locatário com os mesmos valores acima. Endereço da carteira, nome próprio. Lastname pode alugar. Ativo, equilíbrio. E deixe-me ligar. Eles têm um envoltório do Word Wrap e o editor não parece ser. Oh, lá vamos nós. Eu tive que cortá-lo e cortar. Mas está aqui em baixo nessas opções. Equilíbrio, comece um fim. Esses são nossos parâmetros. Então, vamos usar este Add rent ou função. Vamos colocar todos os parâmetros que queremos e isso nos criará um novo locatário. Neste mapa. Só vai, é como um empurrão. Em JavaScript. Estamos apenas empurrando um locatário para esse mapeamento ou dicionário ou o que você quiser chamá-lo. Agora eu tenho um erro. O que está acontecendo aqui? Nenhuma visibilidade especificada. E sim, queremos tornar isso público. Temos outro erro e a localização dos dados deve ser a memória é chamada de dados. Portanto, as strings têm que ser a memória são chamadas de dados, que vamos usar memória. E isso deve limpar o erro. Incrível. Então esse é o nosso aluguel de anúncios ou função. Se eu abrir a guia de implantação aqui e apenas escolher a VM JavaScript. Clique em Implantar. Podemos testar isso. Então, adicione locatário. Então deixe-me colocar meus valores aqui. Então, vou escolher apenas um endereço aqui e o endereço da conta que você tem muitos para escolher. Você pode usar um como proprietário e os outros não são proprietários, mas agora não importa. Então, vou copiar o primeiro, colá-lo aqui. Agora FirstName, vou colocar Travis. Lastname. Vamos colocar o teste. E então pode alugar. Tão verdade, todos podem alugar antecipadamente ativo, falso. E então os próximos quatro serão 0, então 0000. Então, vamos tentar adicionar um locatário. Aqui embaixo. Parece que foi bem sucedido. E se eu escolher locatários e colocar o endereço da minha carteira, que é a nossa chave, podemos procurá-lo clicando em locatários. E lá estou eu. Aqui estão todos os valores do locatário que acabei de adicionar, então tudo está bem. Agora, feche isso e continue. Tudo bem, então o próximo pseudocódigo é conferir uma bicicleta. Então, vamos fazer uma função chamada checkout. E vamos passar um endereço. Como eu disse, você vai ver isso muito porque eu vou verificar uma bicicleta e quando eu passar o endereço da minha carteira para que ela possa identificar, sou eu verificando a moto. E eu quero torná-lo público. E dentro dela, quero virar algumas das minhas propriedades do locatário, dois valores diferentes. Então, quando eu verificar algo, quero definir ativo como verdadeiro, certo? Então. Endereço da carteira dos locatários, ponto ativo. Portanto, esta é a largura do locatário, esse endereço de carteira no mapeamento, ponto ativo é igual a true. Então isso é, ei, acabei de verificar uma bicicleta. Atualmente, estou ativo. A próxima coisa que vou fazer é gravar esse carimbo de data/hora. Assim, os locatários ponto do endereço da carteira inicial é igual ao bloco, carimbo de data/hora do ponto. Agora, isso costumava ser usado para digitar agora. Mas agora, em solidez, você usa carimbo de data/hora de ponto de bloco. Então isso vai nos dar um carimbo de data/hora e isso é em parte conversor. Então, é um carimbo de data/hora Unix não é como um mês, ano. É um carimbo de data/hora Unix único, que é um uint8, que todas as datas em Solidity RUN. Então, vamos definir a hora de início. E também queremos, se você pensar nisso, se eles verificarem uma bicicleta, precisamos definir o aluguel de latas como false. Começa, ei, eu posso alugar. Não há restrições para mim, mas uma vez que eu verifico uma bicicleta, preciso definir que pode alugar como falso porque já tenho uma bicicleta fora. Deixe-me selecionar isso, colá-lo e fazer pode alugar falso, essa pessoa não pode alugar uma bicicleta porque já tem uma. E acho que isso é bom. Então agora podemos conferir uma bicicleta. Agora, vamos verificar uma função de bicicleta, check-in, endereço, carteira, endereço, público. E vamos fazer algo semelhante aqui. Precisamos virar ativo de volta para false porque eles não estão mais na moto. Precisamos definir a hora de término. Agora, definimos a hora de início, precisamos definir a hora de término. Então, o carimbo de data/hora está bloqueado, isso nos dará o carimbo de data/hora para o check-in. Então, finalmente, queremos definir o valor devido. Então lembre-se, eles têm essa propriedade devida. Isso é o quanto eles devem com base em quanto tempo eles tiveram a bicicleta fora. Faremos isso em alguns minutos. Então, vou colocá-lo para fazer aqui, para definir o valor devido. E isso é verificar em uma bicicleta para que possamos adicionar um locatário, podemos verificar a bicicleta e podemos verificar o backend da bicicleta. Em seguida, obtenha a duração total do uso da bicicleta. E vamos criar uma função para isso. Chamaremos a função de obter duração total e endereço, endereço da carteira. Estamos passando o endereço da carteira para um identificador. Público nisso retorna um U e, portanto, ele retornará para nós um total, a duração total como um inteiro, um U e um inteiro não assinado. Então, a primeira coisa que podemos fazer é subtrair a hora de término do horário de início. Lembre-se que está em um carimbo de data/hora Unix, para que possamos subtrair os dois. Mas vou criar outra função para fazer isso. Portanto, não tenho que puxar muitos parâmetros aqui. Vou chamar esse tempo de tempo do locatário. Você começa a formiga, você acabou. E vou manter isso interno ao contrato. E não faz nada disso, não altera o contrato, são realmente tocam qualquer variável fora dessa função. Então eu posso rotulá-lo como puro. Se ele interagisse com outras variáveis, eu poderia fazer isso como visualização, mas puro significa que não estou tocando em nenhuma variável. Estou fazendo todo o meu trabalho aqui na função porque estou passando esses dois valores. E isso retorna um uint8. E é tão fácil quanto dizer retorno, fim menos início. Então, de volta à minha função aqui. Posso dizer que u e timespan são iguais ao locatário, tempo de tempo, endereço da carteira dos locatários, ponto inicial. E veremos outro parâmetro. Vou colocar minha hora de início na minha enzima. Então, vai ser a mesma coisa. Mas o timestamp final, o ND, que deve ter a diferença entre os dois. E então isso é em segundos. Então eu quero colocar isso em minutos. Então eu posso fazer o tempo de tempo uint8 e minutos é igual ao tempo de tempo dividido por 60. 60 segundos em um minuto. Isso deve fazer isso. E, em seguida, retorne tempo e minutos. E eu tenho um erro aqui que diz que mutabilidade do estado da função pode ser restrita à visualização. Então eu posso colocar aqui uma vista. Portanto, não é tão baixo quanto puro. Pure nem lê outras variáveis. Ele só lida com esta visualização de função lerá outras variáveis, mas não alterará o blockchain de forma alguma. Então, se eu precisasse mudar um valor ou algo assim, ele me diria que eu tenho que remover a visualização. Isso é tudo o que é. Novamente, se você quiser um mergulho profundo sobre essas coisas, confira essa solidez e 60 minutos onde eu passo por todas essas coisas em detalhes. Vamos bom. Então, temos a duração total do porquê das filas. Então, temos o tempo, a duração total em minutos, e podemos passar para o próximo pedaço de pseudocódigo. Portanto, esses são apenas métodos simples que podemos fazer uso. Então, como obter o saldo do contrato, podemos fazer saldo de função de retorno público de visão, um uint8. Em tudo o que fazemos é devolver, endereço. Esse saldo de pontos. Agora isso parece feio e você provavelmente é como, para que serve isso? Bem, isso se refere ao contrato devolvido, ao saldo dos contratos e isso é meio convenção. Você verá isso em solidez. Apenas aceite, memorize-o e, se você precisar, use-o. Então eu posso obter o saldo sempre que você devolver o saldo de pontos de endereço deste, é o contrato. E então, para obter o equilíbrio dos locatários, vamos fazer essa única função, equilíbrio do locatário. E queremos saber qual Renner. Então, vamos abordar carteira, endereço. Retornos de exibição pública. Você acaba. E só queremos devolver o saldo desse locatário em particular. Então, locatários, endereço de carteira, ponto e vírgula. Então, temos locatários equilibrados, temos o saldo do contrato, duração total do uso da bicicleta. A próxima coisa que queremos fazer é definir, é definir o valor devido. Agora, para isso, há várias maneiras de fazer isso. O que vou fazer é dizer a cada cinco minutos eles têm a bicicleta. Vou cobrar 0,005 B&B. Então, preço B & B USD. Tudo bem, então 0,05 é US $2. Então, a cada cinco minutos você vai pagar US$2. Então, vou usar esse 0,005 BNB. E uma coisa que você pode estar perguntando, se você ainda não pediu é, ei, isso é remix.ethereum.org. O que estamos fazendo com B e B? Bem, a cadeia inteligente binária usa a mesma quantidade de decimais que um teorema. O teorema tem esse sistema decimal 18 para que ele seja capaz de ter pequenas partes fracionárias de um éter. E é a mesma coisa na cadeia inteligente ByteDance. São 18 decimais. Na cadeia de baionetas, é, acho que oito, mas a cadeia inteligente de biomassa é 18. Então, tecnicamente, podemos fazer qualquer coisa aqui em éter. E ele será transferido para a cadeia financeira quando vamos implantar isso. Na verdade, estamos quando vamos testá-lo , você verá aqui em um minuto. Então isso significa que posso pegar esse 0,005 e mover aquela casa decimal 18 e assumir que é assim. Qual caminho é como dez a 1800 de um éter? É um número menor, o que significa que tem mais zeros. É uma maneira de dividir seu éter em quantidades fracionárias. Podemos supor que isso é o mesmo no BNB e eu vou mostrar. Tudo isso fará sentido para você aqui em um minuto. Então, vamos escrever um conjunto de funções. Faça isso, vamos definir o valor devido de um endereço específico. Isso vai ser interno. Estamos configurando isso internamente. Não queremos que ninguém mais mexa com isso. Vamos colocar tempo de tempo, minutos iguais a obter a duração total. Então estamos chamando essa função para obter o tempo e minutos totais. Vamos pegar isso. Em seguida, vamos dividir isso em incrementos de cinco minutos. Então, se houver 20 minutos na bicicleta, ela só conta como quatro minutos porque estamos contando apenas intervalos de cinco minutos. Então cinco minutos Você vai ser cobrado 0,005 B&B. O segundo cinco minutos, 0,005 B&B. Então eu vou dividir isso incrementos de 555 minutos é igual minutos de tempo dividido por cinco. Então isso significa que se você estiver lá fora novamente por dez minutos, será dez dividido por cinco, que é dois. Você será cobrado o ponto O um, O, B e B. Agora queremos definir essa propriedade do. Assim, o endereço da carteira dos locatários dot du equivale a incrementos de cinco minutos vezes. Agora, aqui está o que vamos mover o decimal, 0,05 B & B por incrementos de cinco minutos. Vou dizer que comece aqui com meu decimal e diga 12345678910111213141516171818 casas decimais. Então, são cinco. Vamos ver. Deixe-me colocar vírgulas só para deixar claro. Vírgula lá, vírgula lá, vírgula lá. Vírgula lá, vírgula lá. Então, temos 3691215 zeros, 515 zeros. Novamente, se mudarmos isso de volta, temos 123456789101112131415161718. E então colocamos r dot E temos 0,005. Isso é tudo o que é. Estamos apenas codificando isso em 0,05. Você pode querer puxar o preço mais recente e fazer algum tipo de matemática. A coisa sobre a solidez é que eles não fazem ponto fixo para fora da caixa. Você tem que fazer algum tipo de matemática louca para obter um decimal. Então, vou apenas manter os números decimais fora disso e não tentar ser como 0,005 dividido pelo dólar americano ou algo louco assim. Vamos apenas definir em 0,05 a cada cinco minutos. Alguns colocam ponto e vírgula. E temos um problema. É porque eu coloquei unidade em vez de você e o que faço o tempo todo. E contagem de argumentos errada para função chamada obter duração total. Temos que passar o endereço da carteira porque precisamos saber de quem a duração. E isso é definido o valor devido. Agora podemos visitar isso para que temos aqui em cima. Então, quando eles verificarem a bicicleta de volta, queremos definir esse valor. Então, podemos simplesmente ligar para o conjunto devido no endereço da carteira. E isso definirá essa variável assim que eles verificarem a bicicleta. E vamos salvar isso. Acho que estamos perto de poder testá-lo. Precisamos colocar algumas declarações obrigatórias aqui, mas vamos fazer um teste. Na verdade, antes de fazermos, há mais uma coisa que eu quero acrescentar, e isso é apenas para verificar algo que podemos usar, acho que no front-end. E é apenas uma função chamada pode alugar uma bicicleta. Esta é apenas uma maneira de dizer, Ei, eles podem alugar uma bicicleta sem ter que ir e olhar as propriedades do struct. Podemos simplesmente chamá-lo aqui e obter um verdadeiro ou falso de volta. Então, endereço, enquanto estiver no endereço. Exibição pública retorna bool, turn locatários, endereço da carteira, ponto pode alugar. Então, está apenas nos dizendo verdadeiro ou falso. O que esse conjunto S? Isso é tudo. Vamos testar isso. Isso vai ser muito divertido. Acho que enquanto estamos fazendo isso, você verá todas essas condições de coisas que queremos proteger. Eles não deveriam ser capazes de fazer isso. Eles não deveriam ser capazes de fazer isso. E isso nos fará criar declarações requeridas. Então, vamos testá-lo. Vamos testá-lo localmente primeiro antes de fazermos qualquer coisa na cadeia ByteDance. Então você vem aqui e vamos escolher JavaScript VM. Novamente, como antes, vou escolher o primeiro endereço e torná-lo o proprietário porque estamos implantando-o e clique em, Implantar e abrir isso. Então, primeiro, vamos adicionar um locatário. E vamos torná-lo não o dono. Vamos escolher a segunda pessoa e copiar. Então, vou colocar o endereço. Aqui estão todos os meus parâmetros aqui. E você também pode encontrá-los aqui com o locatário. Mas vou colocar o endereço da minha carteira. O baú Travis pode alugar. Verdade? Porque eu posso falar. Eu não tenho uma bicicleta fora. Falso ativo e, em seguida, sem equilíbrio, nada é devido, sem horário inicial e sem fim. Para adicionar locatário. E venha aqui, escolha o endereço da minha carteira. Venha aqui e veja que tenho um locatário aqui. Ótimo. Posso alugar uma bicicleta? Verdade? Posso alugar uma bicicleta. Obtenha a duração total 0. E para ser honesto, não devemos ser capazes de verificar se as motos saíram, então vamos colocar uma condição nisso em um minuto. Mas vamos em frente e confira a bicicleta. Vou verificar. E então, quando eu clico em locatários aqui, deve dizer, pode alugar falso porque não queremos ser capazes de alugar enquanto tivermos desverificado. Ele deve dizer ativo, verdadeiro. E deve haver uma hora de início. Então, vou executar isso de novo. Lá você tem ele pode alugar falso, ativo é verdade e aqui está minha hora de início. Agora configuramos isso em incrementos de cinco minutos e eu poderia mudar isso, mas vou esperar os cinco minutos e voltar. Vou pausar isso, voltar depois de cinco minutos e vamos verificar a bicicleta de volta, ver como isso funciona. Tudo bem, já se passaram cerca de cinco minutos. Então, vou verificar a bicicleta de volta. Então, vou escolher o check-in, clique em check-in. E agora, se eu verificar, verifique meu locatário aqui ele deve ter um n tempo. ativo deve ir para falso e o aluguel pode permanecer falso porque eles não pagaram e devemos ter um valor devido. Então, vamos clicar nos locatários, e lá vamos nós. Então, temos uma hora de início, temos um n tempo. Não estamos mais ativos e não podemos alugar. Ótimo. Também temos um Mountain Dew, e serão cinco com todos os zeros, que vai ser algo um éter. Mas, novamente, ele vai se traduzir para B&B quando chegarmos lá. Então, vamos verificar algumas dessas outras coisas. Posso alugar uma bicicleta falsa. Ou o saldo do locatário, quanto eu tenho equilibrado lá. Eu não coloquei nada nele. Então, deve dizer 0. saldo do contrato é 0 e minha duração total agora deve ser de seis minutos. Sim, é um seis. Então isso foi calculado corretamente. Tivemos a bicicleta por seis minutos. Agora, a próxima coisa que gostaríamos de fazer é poder pagar nosso saldo porque agora, posso verificar uma bicicleta ? Não, não posso. Porque eu tenho um devido equilíbrio e acabei perceber que não estabelecemos nenhuma maneira de fazer um pagamento. Então, precisamos ser capazes de enviar dinheiro para o nosso saldo para pagar isso. Então, vamos fechar o contrato e juntar isso. Então, esse é outro que eu esqueci totalmente. Então, vamos colocar outro comentário de pseudocódigo aqui e apenas dizer fazer um pagamento. E, na verdade, antes de fazermos essa função, percebi que também não definimos nenhuma maneira de depositar dinheiro. Então o fluxo é assim. O locatário vai depositar dinheiro em seu saldo. Então, uma das propriedades aqui é equilibrada. Eles vão depositar dinheiro no saldo para que já haja dinheiro lá dentro. É como pré-pagar. Mas o dinheiro, quando você depositar, vai para todo o contrato e, em seguida, o valor que você coloca vai para você. Então, se dez pessoas colocarem US $10, serão $100 no contrato, mas US$10 creditados a cada pessoa. E então, à medida que essas pessoas fizerem pagamentos, dinheiro será deduzido de seu saldo para que, esse dinheiro e o contrato total se tornem os proprietários. Espero que isso faça sentido. Acho que será assim que escrevermos isso. Então, vamos fazer isso. Deposite muito rápido. Função composta, depósito, endereço, carteira, endereço, pagável, público e locatários. E só para te mostrar isso, eu posso fechar isso e simplesmente deixá-lo dentro. Isso depositará dinheiro no contrato porque ele é pago. Posso chamar essa função de depósito e enviar dinheiro. E ele vai depositar no contrato. Vai fazer isso de qualquer maneira. Mas também queremos adicioná-lo ao saldo dos locatários. Então, queremos fazer saldo do endereço da carteira dos locatários mais o valor do ponto da mensagem. Agora, a mensagem é uma dessas variáveis globais, como tínhamos aqui, o que eu não mencionei. Eu provavelmente deveria ter remetente de pontos de mensagem, que está enviando este remetente de ponto de mensagem. Também temos um valor de ponto de mensagem. Qual é o valor que estou enviando? Então, quando eu chamar essa função de depósito, vou enviar um valor para ela e ele pode ser retirado em sua mensagem global, variável, valor de ponto de mensagem. Isso é tudo o que é. Então, estamos depositando dinheiro no contrato, mas também vai creditar especificamente a essa pessoa. Então, estamos depositando dinheiro no contrato, mas também vamos creditar esse endereço de carteira ou essa pessoa. Agora, para fazer o pagamento, vamos criar uma função chamada fazer pagamento. Endereço, endereço da carteira. Isso é público a pagar. E o que vamos fazer aqui é que vamos fazer locatários, endereço de carteira, saldo de pontos, e vamos tirar dinheiro do saldo. Portanto, menos é igual ao valor do ponto da mensagem. Então, digamos que você é o único locatário, você coloca US $10 para o seu saldo. Portanto, há US $10 no contrato, mas esses US $10 estão no seu saldo. Então, o que você está fazendo quando está fazendo um pagamento, você está apenas retirando esse valor do seu saldo. Então, há US $10 no contrato e tudo está atribuído a mim. E eu monto minha bicicleta por US $10. Quando tira esses US $10 do meu saldo, esses US $10 não são mais meus. Não tenho saldo sobrando. Esses US $10 pertencem ao proprietário. E é assim que a propriedade se desenrola, como o dono deles é pago. Portanto, não estamos enviando dinheiro para o contrato, estamos realmente removendo dinheiro do nosso saldo. E também há algumas outras coisas que queremos verificar, como Vamos me ver apenas copiar isso. E também há algumas outras coisas que queremos fazer. Como se quiséssemos sentar, podemos alugar de volta à verdade. Porque agora eles podem correr novamente. Ei, há saldos pagos, eles são livres para alugar novamente. E vou só copiar isso mais algumas vezes. O valor devido será 0 porque eles pagaram o valor devido. A hora de início será 0. No fim do tempo vai estar de volta às 0. Então, tudo está meio fresco novamente. Você tem coisas pagas, você é capaz de alugar. Você não tem tempo no relógio. Vá pegar uma mordida, e acho que é isso. Acho que é tudo o que precisamos. Vamos em frente agora antes de implantá-lo e colocá-lo em algumas declarações requeridas, algumas verificações para ter certeza de que não estamos permitindo coisas que não deveríamos. E do jeito que você deve fazer isso, eu já fiz isso, então vou adicioná-los e explicá-los. Mas a maneira como você normalmente faz isso é pegar isso aqui e implantá-lo. E então você vai clicar em botões e testar coisas e você vai, Ei, espere um minuto, eles têm um equilíbrio. Eles não devem ser capazes de fazer check-out ou ei, eles não devem ser capazes de fazer um pagamento porque não têm nada. Você tem que ter cheques como este? Então, à medida que você está testando e clicando nos botões, você criará as declarações require, mas vou seguir em frente e colocá-las e explicá-las. Então, vamos até a função de checkout primeiro, há duas coisas que queremos verificar. Primeiro, queremos ter certeza de que eles não têm um equilíbrio do. Se eles tiverem um saldo devido quando não devem ser capazes de fazer o check-out novamente, isso mantém as pessoas pagando suas contas. Caso contrário, eles continuam verificando a bicicleta e não fazem nenhum pagamento porque não vamos aplicá-la. Estamos tentando ser descentralizados aqui. Então, o que é que eles simplesmente não conseguirão verificar a menos que paguem o saldo. Então, precisamos verificar isso. E também precisamos verificar se eles podem alugar que eles podem alugar imóveis estão definidos como verdadeiros. Então, fazemos isso com declarações require. E o que é legal sobre as declarações exigem é que eles reverterão a transação antes que os gases se estendam, o que é bem arrumado. Você não explode o gás e depois faz com que ele falhe e depois perde seu dinheiro. Para fazer isso, você coloca require e , em seguida, você define sua condição de que você está exigindo os locatários ponto do endereço da carteira do ponto façam e queremos fazer para ser igual a 0. Não queremos nenhum valor, queremos que eles paguem a conta? Se isso não for verdade, podemos colocar uma vírgula e , em seguida, algum tipo de mensagem. Você tem um ponto-e-vírgula de saldo pendente e vamos colocar o outro. Vamos fazer uma cópia e em vez de fazer, vamos verificá-la. O aluguel pode alugar deve ser igual a verdade? Isso é o que exigimos. Exigimos que eles possam alugar. Se não, vamos colocar uma mensagem. Você não pode alugar neste momento. Isso é tudo para checkout. Agora, para o check-in, queremos verificar se eles estão ativos porque se você não estiver ativo, você não tem uma bicicleta, certo? Então, se você apenas clicar em check-in e não tiver uma bicicleta com check-out, ela deve lançar um erro. Então, vou copiar essa declaração require. Vou colocar isso aqui e fazer ativo. Então, ativo deve ser verdade, o que significa que eles têm a bicicleta ativamente verificada. Caso contrário, as mensagens, confira uma bicicleta primeiro. Agora vamos descer para obter a duração total e queremos colocar um cheque aqui. Queremos verificar se ativo é falso, o que significa que eles verificaram sua bicicleta. Eles não conseguem a duração a menos que tenham verificado a bicicleta. E se isso não for verdade, então vamos dizer que a bicicleta está atualmente verificada. Então, finalmente, nesta função de pagamento, agora provavelmente há mais que você poderia colocar aqui. Como alguém nos comentários do YouTube disse, Ei, você esqueceu esse cheque. Bem, há muitos cheques e coisas que você poderia colocar. Este vai para produção. Queremos ter certeza de que há muitos cheques em vigor. Mas a última coisa que quero fazer é fazer o pagamento. Quero ter certeza de que tenho um Mountain Dew que pode fazer é mais do que 0. Se eu estiver fazendo um pagamento, não tenho nada a pagar. Qual é o ponto? Também quero verificar se meu saldo é maior do que o valor estou pagando por tentar pagar dez dólares e só ter oito, isso não vai funcionar. Então eu preciso fazer essa verificação também. Para exigir declarações aqui. O primeiro verificará se du é maior que 0. Isso não é verdade. Vou colocar, você não tem nada devido neste momento. O próximo, queremos verificar se o saldo é maior que o valor do ponto da mensagem. Então lembre-se que isso é um pagamento, as pessoas estão enviando dinheiro. Queremos que nosso saldo seja maior do que a quantidade de dinheiro que está sendo enviada. Aqui, vamos colocar, você não tem fundos suficientes para cobrir o pagamento. Por favor, faça um depósito. Você não pode pagar diretamente, você tem que depositar dinheiro e depois transferir esse dinheiro é pagamentos e economizar isso. E acho que terminamos e estamos prontos para fazer alguns testes. Então, primeiro vamos testá-lo nesta VM JavaScript. Em seguida, vamos implantá-lo na cadeia inteligente financeira. Uma última coisa que devemos fazer para testar esta duração total aqui. Não definimos em incrementos de cinco minutos. Então lembre-se da última vez que testamos, tivemos que esperar cinco minutos para que pudéssemos obter um número para preencher. Bem, vamos mudar isso apenas para algo codificado, como retorna seis minutos, então não precisamos esperar novamente. Retorna seis e teremos que retirá-los porque não gosta de variáveis não utilizadas. Então, salve isso. Então, desta vez, vamos ter seis minutos. Não temos que esperar. Podemos fazer o check-out, fazer imediatamente e poder testar. Então, vamos implantar isso. Alguém para escolher o primeiro endereço é meu dono. Vá e copie o endereço e implante-o. No segundo endereço será um dos meus inquilinos. Então adicione o endereço. primeiro nome é Travis, sobrenome é teste, que não é meu sobrenome a propósito, eu posso dizer que é verdadeiro. E quais são os outros? O ativo é falso. 0 saldo 0, faça 00, horário início e término. Vou acrescentar que o locatário deve poder vir aqui, colocar o endereço e ver o locatário. Ótimo. Agora vamos conferir alguém para conferir uma bicicleta. Clique em checkout. E meus valores aqui em baixo devem mudar de acordo. Os locatários de cliques têm uma hora de início. Agora ativo e não posso alugar porque tenho uma bicicleta fora. Ótimo. Vamos fazer algumas outras verificações. Então pode alugar uma bicicleta é falso, obter duração total deve me dar um erro. Então, se eu clicar nisso, ele reverteu e diz que a bicicleta está atualmente com check-out. Então essa é essa declaração requerida aqui. A bicicleta está atualmente verificada porque ativa, o requisito é que ativo é falso, mas ativista verdadeiro, então ele lança um erro. Então isso funciona. Um outro cheques que temos, verificaremos esse. Então confira que você tem um saldo pendente. Você pode executá-lo desta vez. Vou verificar todos esses em um minuto. Então, vamos verificar novamente. Verifique novamente. E se obtivermos nossa duração, deve ser de seis minutos porque lembre-se que definimos isso manualmente. Então, aqui estão seis minutos. Agora que fizemos o check-in, devemos ser capazes de vir aqui para locatários e ver as mudanças. Então clique nisso. Pode alugar como falso, posso conferir outra bicicleta. Por quê? Porque eu tenho um valor devido, 3. Como finalizar nosso contrato inteligente: Ok, então antes de passarmos para a próxima seção, precisamos adicionar algumas outras funções aqui no contrato inteligente. E sei disso porque fui frente e construí o front-end e percebi que precisávamos de algumas outras coisas para nos ajudar. Então, vamos adicionar três funções aqui. O primeiro será chamado Get do em tudo o que faz é obter a montagem dupla para um endereço de locatário, endereço de carteira , uma função pública, é uma visão e ele retorna você e nós vamos apenas retornar o endereço da carteira dos locatários, ponto fazer. Então, o valor que o locatário tem que fazer. Em seguida, vamos conseguir o locatário real. Então, vamos pegar o locatário e ele vai devolver quatro informações para nós sobre esses inquilinos. Então, é basicamente como devolver o aluguel ou objeto, mas sem a parte Uinta, partes dele. Então, é assim. Função, obtenha locatário. Vamos passar novamente o endereço da carteira. É público para ver e retorna para as coisas. Então, memória de string, FirstName, memória de string, LastName. Bull pode alugar. Em touro ativo. Isso é tudo o que queremos saber neste caso. Então aqui vamos dizer FirstName é igual ao nome do ponto do endereço da carteira dos locatários. Opa. Então eu vou copiar isso mais três vezes em um Mac, que é a opção Shift. E, em seguida, para copiar a linha em que você está. E vou usar o Command D para selecionar ambas as instâncias do FirstName e do LastName. E então eu vou mudar este também, posso alugar neste muito ativo. E tudo o que estamos fazendo é apenas retornar essas propriedades daquele locatário. E, finalmente, vamos criar uma função chamada locatário existe. E ele vai devolver um bool, quer esse aluguel ou exista ou não. Então, precisamos saber se esse locatário precisa se adicionar ao contrato inteligente ou se ele já foi adicionado. Portanto, podemos dizer que o locatário de função existe endereço enquanto no endereço, exibição pública e retorna um bool. Aqui precisamos verificar se esse endereço da carteira existe ou não. Portanto, podemos dizer se os locatários enquanto estiverem no ponto do endereço enquanto estiver na propriedade endereçada, se esse endereço de carteira não for igual ao endereço 0. Agora você pode ser como o endereço 0? O que isso deveria ser? Bem, aqui está uma boa explicação. Portanto, com mapeamentos em Solidity, não há como verificar diretamente se algo existe. Tudo é definido como seu valor padrão até que seja alterado. Isso significa que cada inteiro começa com 0, cada string começa com uma citação. Cada array começa assim e a solidez não tem conceito de nulo como outras linguagens. Então o que eles estão dizendo é, se você se lembra do re-mix, vamos, vamos puxar isso para cima. Basta comentar isso já que não terminamos. Então, vamos vir aqui e implantar nosso contrato. Vou clicar em Implantar e abrir isso. Então, e se eu for aos locatários e apenas colocar um endereço e clicar no botão. Bem, você verá que tudo está em seu estado padrão. Não há nada, como o postal dizendo que não há nada nulo e solidez. Vai ter esses, será o valor do que seria basicamente, então o saldo é 0, fazer é 0. Todos esses serão 0. Os touros serão falsos. Quero dizer, é apenas o valor padrão, não é nulo. E você verá aqui o endereço da carteira são os zeros, zeros, zeros. Há, estes são todo o caminho. E isso equivale ao endereço 0. Acho que também poderíamos fazer o endereço 000 ou algo assim. Mas o endereço 0 diz, ei, se essa pessoa estiver nos locatários não tem isso, então eles devem existir. Isso é tudo o que é. Não quero me aprofundar muito nisso. Espero que isso faça sentido, mas é uma boa maneira de verificar se uma chave está em um mapeamento. Então deixe-me fechar isso e voltar a isso. Se o endereço da carteira do ponto do endereço da carteira dos locatários não for igual a um endereço em branco, o que significa que eles existem. Então vamos voltar a verdade. Else retorna false. Depois, há alguns ajustes que eu quero fazer. Então, se subirmos para obter a duração total, quero remover essa declaração require porque ela é simplesmente desnecessária. Então, removemos essa instrução require. Agora eu quero colocar uma condição. Portanto, se a hora de início dos locatários for 0 ou se a hora de início for 0, o que significa que eles verificaram a moto, mas não a verificaram novamente. Ou se, por algum motivo, eles apenas tiverem uma enzima que provavelmente nunca acontecerá, eu quero retornar 0 porque eles estão, eles são verificados, o tempo não está completo. Então, se eles quiserem obter a duração total antes verificarem a bicicleta e não conseguem fazer isso. Você tem que verificar a bicicleta e primeiro fazer esse cálculo. Então, vou vir aqui e fazer se o endereço da carteira dos locatários começar o ponto for igual a 0. Ou se eu vou copiar e colar isso só porque é mais rápido para mim. Se a hora de término for igual a 0, então eu simplesmente quero retornar 0. Você tem 0 tempo de tempo em minutos. Else. Você vai fazer tudo isso. Já tínhamos uma cópia e colamos. É isso. Seu contrato está pronto para ir. Temos nosso contrato e remixagem, e a partir daqui podemos compilá-lo, podemos implantá-lo, podemos obter a ABI e todas essas coisas importantes. Mas ninguém realmente quer fazer isso do re-mix porque isso é baseado em navegador. Acho que ele o salva no navegador, mas pode ser perdido. E você quer todo o seu código normalmente juntos e deseja controlá-lo de versão no GitHub e coisas assim. Então, vamos mover isso para um novo projeto. E vou mostrar a vocês como podemos usar algo chamado capacete para inicializar todo esse ecossistema para gerenciar esse contrato inteligente. Você vai adorar isso. Então vá em frente e abra seu terminal e vamos criar uma pasta para nosso aplicativo. Então, vou para a minha área de trabalho e vou fazer um diretório MKDIR. Vou chamá-lo de aplicativo de aluguel de bicicletas. Pressione Enter. E então eu vou fazer o cd nele. E ponto de código para abri-lo no código VS. Ou você pode arrastar a pasta para dentro, ou você pode clicar com o botão direito do mouse ou fazer o que quiser, basta abri-lo no VS Code. Agora, o que vou fazer é ir para o hard hat.org. Então vá para hardhead.org. E o que isso é novamente, está no ambiente de desenvolvimento do teorema. Ele permite que você execute solidez localmente, depure, teste. Isso lhe dá flexibilidade e todas essas outras coisas boas. Mas o que você verá em um minuto, todas as grandes coisas que ele faz. Então vá em frente na parte superior aqui e clique em Começar. E vamos seguir esses passos porque eles são escritos muito bem. Então, instalação, precisamos fazer um capacete de instalação do NPM. Portanto, certifique-se de que você não tem JS instalado. Se você não fizer isso, basta ir ao NodeJS e Google e clicar no NodeJS e basta baixar a versão LTS. Uma vez feito isso, você terá o NPM, você terá no Bx, você terá nó, tudo o que precisa. Então, vamos usar esse comando. E vamos começar criando um diretório chamado contrato. Vou entrar no diretório do contrato. Então eu vou fazer npm nele, y dash y. Então npm init dash y. O que isso faz é que isso cria um pacote JSON, para que possamos instalar pacotes npm no dash y apenas faz a instalação padrão. Então clique em Enter e ele deve configurar tudo para você e você deve ter em sua pasta de contrato um arquivo package.json. Então agora podemos executar nosso comando, que é npm install save-dev hardhat. Então clique em Enter para instalar o cabeçote rígido. Depois que isso for feito, faremos isso Guia de início rápido. Este início rápido vai fazer é inicializar um projeto de amostra que vamos usar. Para fazer isso. Você acabou de correr com capacete de px. Então copie isso. Tudo bem, então vou colar isso no capacete NP x, clique em Enter. E isso nos dará algumas opções. Então, vamos escolher criar um exemplo de projetos básicos. Então, o primeiro aqui, a raiz do projeto hardhat será a pasta do contrato, então estamos bem lá. Sim, eu quero ser ignorado. E diz, você deseja instalar esse exemplo de dependências de projetos com NPM que você precisará instalar. Então clique, certifique-se de que há um y e pressione Enter. Ele instalará alguns pacotes que nos ajudam a testar e conversar com o contrato e todas essas coisas enquanto ele está instalando. Vamos ver o que vem a seguir. Então, isso nos dará alguns exemplos aqui de como executar tarefas. Assim, você pode executar em px hardhat para executar tarefas. Então você pode verificar, você pode imprimir a lista de contas. Você pode compilar seu contrato. Você pode executar um nó, fazer testes, muitas coisas boas. Existe um hardhat config js que permite configurar suas implantações. Vamos entrar nisso em um minuto. Você pode executar em contas hardhat px para mostrar todas as contas com as quais você pode trabalhar. Isso, ele praticamente cria 20 contas para você usar. Você pode compilar seus contratos executando npm hardhead compile. Você pode testar executando o NPS Hall no teste. E muitas coisas ótimas. Vamos passar por isso. Tudo bem, isso está feito. Então, se você olhar em nossa pasta agora temos uma pasta Contratos, que eles nos dão uma demonstração chamada Greeter dot soul. É claro que temos nossos scripts de módulos de nó. Esse será nosso script de implantação. Vamos entrar nisso em um minuto. Você pode executar testes. Não vamos fazer muitos testes porque simplesmente não queremos fazer esse curso super longo, então provavelmente vamos pular o teste. E aqui está nossa configuração. E é claro que eles estão empacotados JSON. Vamos primeiro copiar ou contratar aqui. Então, vamos clicar com o botão direito do mouse na pasta do contrato. Crie um arquivo chamado Bike Rental dot soul. Na verdade, acho que chamamos essa alma de ponto de corrente de bicicleta. E vou tirar meu contrato da solidez, destacar tudo e colar aqui e salvá-lo. Você provavelmente deseja instalar o, embora eu não saiba se você precisa, mas você pode querer instalar a extensão de solidez. Acho que tenho isso instalado. Sim, eu tenho a extensão de solidez. Então está gritando comigo porque não gosta da versão. Nossos compiladores atuais 0 dot phi dot 0. Assim, posso abrir meu piloto de comando e escolher Alterar versão do compilador do workspace. Vou mudá-lo para 080, que posso selecionar aqui, e geralmente leva cinco segundos ou refrigerante para limpar. Sim, lá vamos nós. Esclarecido. Então meu contrato está aqui. E, na verdade, podemos dar uma olhada em como isso funciona. Então, se formos cumprimentar ou não a alma, você vê que temos um contrato chamado Greeter. Temos nosso construtor e temos duas funções. Temos uma função de saudação que retorna uma saudação e, em seguida, temos uma função de saudação definida que permite alterar a saudação. Então aqui está o contrato. E, em seguida, se você for para scripts e script de exemplo, ele será configurado para implantar esses contratos. Então você vê aqui todos os ótimos comentários que obtemos o contrato para implantar. Então, obtenha uma fábrica contratada chamada saudador, que é o contrato. E então ele implanta esses objetos. Portanto, esse é o objeto cumprimentador que representa o contrato. E então ele implanta esse objeto com hello hard hat como parâmetro. Então, se você voltar ao cumprimentador, verá no construtor que você passa em uma saudação, o que quiser que seja sua saudação padrão. O script de exemplo implantará isso e aguardará o cumprimentador implantado. Em seguida, ele imprime cumprimentador implantado qualquer endereço de contrato para o qual o implante. Então, há o contrato do avaliador, veja como o cumprimentador é implantado. Testes de amostra. Então, o teste que eles dão é que o cumprimentador deve retornar a nova saudação assim que for alterada. Nisso faz a mesma coisa, cria um objeto cumprimentador, objeto de contrato. Ele zombou de implantá-lo com o parâmetro HelloWorld e, em seguida, espera, não espera declaração, certificando-se de que esse contrato tenha HelloWorld como está sendo cumprimentado, então ele define o saudação a algo diferente, e então espera que seja algo diferente. Então esse é o teste e deve passar a saudação original e a saudação de alteração. Então, na configuração hardhat, você realmente não precisa configurar nada para implantação local e veremos isso em um minuto. Então é assim que funciona. E agora que sabemos como funciona, vamos excluir esse cumprimentador, não alma em reproduzir tudo isso para o nosso contrato. Então, exclua a alma dos pontos de saudação. Então vamos para o script de amostra e vamos mudar isso para a cadeia de bicicletas e obter corrente de bicicleta e cumprimentador de fábrica contratada. Vamos fazer corrente de bicicleta minúscula. E então queremos implantar esse objeto que agora é a corrente de bicicleta não cumprimentadora. Mude isso para a cadeia de bicicletas, implante e não enviamos nada com a implantação deles. Então, vamos tirar isso. Mude isso para corrente de bicicleta minúscula. No console, a corrente de bicicleta de log implantada no endereço do ponto da corrente da bicicleta. Espero que isso tenha feito sentido. Estamos apenas alterando essas variáveis para implantar nosso contrato e não o cumprimentador. Então, isso deve ser bom. Vá para testes de amostra. Na verdade, vamos comentar isso. E é isso. Então agora podemos fazer em px hardhat, compilar, para compilar nosso contrato. E quando fizermos isso, teremos uma nova pasta com seus artefatos compilados pelo ar. Então você verá agora que temos uma pasta de artefatos. Se você abrir isso, há algumas informações de compilação. Não precisamos nos preocupar com isso. E se você abrir a pasta Contratos, há outra pasta chamada bike chain dots soul com dois arquivos. No arquivo em que estamos interessados é o ponto de corrente de bicicleta json. E aqui temos algumas informações importantes teremos que usar para vincular nosso front-end. Uma delas é a ABI. Agora, a ABI descreve todas as funções. Isso está disponível em nosso contrato para nós ligarmos. Nosso contrato está lá fora na cadeia de blocos e a ABI diz ao nosso aplicativo quais funções ele pode chamar. Então você verá aqui o construtor e verá equilíbrio de função, adicionar, adicionar locatário, saldo de aluguel ou todas as funções que criamos. Isso é o que a ABI é. Teremos que colocar isso em nosso projeto em um minuto. Então, abaixo, temos esse lindo código de aparência, e este é o bytecode. Este é o executável que vive na Máquina Virtual Ethereum. Então, quando implantarmos, isso vai ser algumas informações importantes lá. Mas não temos que acompanhar isso. Em toda vez que você fizer uma alteração em seu contrato, você terá que executar essa compilação de capacete de segurança do NPM. E tudo o que ele vai fazer é recompilar, atualizar os artefatos. Falamos sobre compilar nossos contratos e testar os contratos. Agora vamos dar uma olhada na implantação. Então, o que vamos fazer neste curso é que vamos implantá-lo na cadeia inteligente financeira. Mas digamos que você não queria sair para uma rede de teste, mas você só quer que ela faça tudo localmente. Bem, aqui está como você faria isso. Assim, podemos usar esse script de exemplo para implantar. Então aqui você verá em px hardhat executado no script R. Ele dirá que implantar um cumprimentador com saudação, saudação implantada neste endereço de contrato. Mas você vê aqui que um capacete sempre gerará uma instância na memória por padrão. Então, esta será uma instância na memória. Mas também é possível executar hardhead de forma independente que clientes externos como o MetaMask possam se conectar a ele. Isso pode ser MetaMask, seu front-end dapp ou um script. Então você pode fazer isso no nó hardhat px. E o que isso faz é que isso cria um nó autônomo que é executado em seu computador. Então, se eu digitar o nó hardhat px, pressione Enter, ele vai fazer algumas coisas legais. Então, um, vai me dar esses 20 endereços, mas vai me dar as chaves privadas para esses endereços, o que é muito legal e vai me dar 10 mil. Em. O que posso fazer agora é abrir um MetaMask. E vamos levar essa primeira conta. Então, ele pegou a chave privada desta primeira conta e acessou o MetaMask. E, na verdade, antes de fazer isso, você precisará adicionar o endpoint do host local 8545 ao MetaMask. Então, se você for para a rede de anúncios e adicionar uma nova rede, eu já a tenho. Mas eu tenho aqui localhost 8545. Então, o nome da rede será localhost 8545. nova URL de RPC será a barra de dois pontos HTTP dois pontos do host local 854 ou cinco. ID da cadeia é 1337. E, a propósito, se você não tiver o nó em execução, isso lhe dará um erro. Mas de qualquer forma, é 1337. O símbolo da moeda será IV. E então você pode deixar este em branco. E, em seguida, clique em Salvar. E isso realmente salvará essa rede de host local para você brincar. Agora posso copiar essa chave privada e, em seguida, ir para Importar conta e definir a chave privada, clique em Importar. E agora tenho 10 mil para jogar com uma conta dois. E eu posso realmente detalhes da conta. Posso mudar isso para teste de capacete local ou algo parecido. Seja qual for. Então você deseja deixar esse nó em execução. Tenho que deixar isso funcionando. Se você parou, isso não vai funcionar mais. Então você quer ir para outro terminal. E vamos executar este próximo comando, o capacete NPS run. Então, vamos implantar esse script, mas vamos usar o host local da rede. Assim, você pode dizer ao Rink de rede de TI OB ou qualquer teste que você queira usar. Você só precisa configurá-lo em sua configuração. Mas vamos usar a rede host local. E eu não sei. Acho que isso só vem por padrão. Não vejo isso aqui. Mas de qualquer forma, vamos pegar isso e implantá-lo. Em outro termo que vamos lembrar, deixe isso funcionando em outro terminal, execute isso. Oh, isso não é bom. Certifique-se de que você está na pasta de contratos. Certifique-se de que você está na pasta do contrato porque quando você altera os terminais, ela o chuta de volta para a raiz. Então execute isso novamente. E lá está ele. Cadeia de bicicletas implantada neste endereço de contrato. Esse contrato inteligente foi implantado em seu nó que está sendo executado aqui. Então, ao criar seu aplicativo front-end, basta usar essa conta. Quero dizer, você terá que colocar seu contrato para se vestir e coisas assim, mas você usará essa conta e então você pode testar tudo localmente. Você tem muita Eva. É muito divertido. Mas, na verdade, queremos dar um passo adiante e usar a rede de testes de cadeia inteligente de finanças. Então, isso estará ao vivo na rede de teste. E então, se por algum motivo você quisesse levá-lo ao vivo e produção, ou quer saber como chegar à produção. É muito simples a partir daí. Então, vamos fazer isso agora. Então, vou fechar este navegador. Não preciso mais disso. Não preciso desse nó em execução. E vou fechar este terminal e limpar isso. Ok, então esse foi o cenário de desenvolvimento em seu ambiente host local. Então, ele gira um nó autônomo para você trabalhar. Você pode implantá-lo nesse nó e, em seguida, conversar com ele com clientes externos, como o MetaMask. Ótima opção. Mas, novamente, queremos sair para uma rede de teste. Queremos tornar essa coisa legítima e ter uma ideia real sobre isso, não um anfitrião local. As coisas realmente não estão acontecendo. Situação. Agora, há várias maneiras de se conectar à cadeia inteligente ByteDance. Mas muitos desenvolvedores usam um serviço de terceiros para isso porque permite acesso rápido e permite que você dimensione se você quisesse levar seu aplicativo para produção. Portanto, existem serviços como interferer, que é popular. alquimia é muito popular, mas ambos se concentram mais em um teorema, não em finanças. Vamos usar um serviço hoje chamado Morales. Morales nos permitirá falar diretamente com a rede de testes de cadeia inteligente Biodefense. Tem muitas, muitas outras coisas que você pode se aprofundar também, mas oferece acesso rápido. Ele permite que você dimensione. Ele só tem uma plataforma construída para esse tipo de coisa. Então, se você for para Morales.io e clicar em se inscrever gratuitamente, é totalmente gratuito. Você acabou de colocar seu endereço de e-mail, criar uma senha. Acho que vai lhe enviar um e-mail para confirmar e você estará pronto. Então, vou entrar e colocar minha senha. Depois de chegar aqui, você quer ir para nós rápidos e clicar na rede BSC em pontos. Aqui você tem um conjunto de endpoints. Você tem a rede principal, o arquivo de rede principal, o conjunto de testes e o arquivo de rede de teste. O que queremos é a rede de teste. Então copie isso. E vamos voltar ao nosso projeto e vamos adicionar a isso. Então coloque uma vírgula aqui. E então é aqui que podemos definir nossas diferentes redes. Assim, podemos fazer testes na rede principal, host local, como o que acabamos de fazer. Podemos colocar algumas informações lá, quaisquer redes que quisermos usar. Então, vamos chamar essa rede de teste. E há duas propriedades que precisamos, URL e contas. Para o URL, vamos colar exatamente o que copiamos de Morales. Então, para contas, vamos pegar nossa conta do MetaMask. Então, se você abrir o MetaMask e ir para a rede de testes BSC. Agora, se você não tiver isso, clique em novamente, redes e rede de anúncios. E você vai querer adicionar uma nova rede para a rede de testes BSC. E essa informação está bem aqui. Portanto, o nome da rede é BSC test net. O novo URL de RPC é https dois pontos de barra de dados de barra. Na verdade, basta digitar pela cadeia Nance Smart para o MetaMask ou algo assim. E isso dirá conectar o MetaMask para financiar a cadeia inteligente. Aqui, você receberá os valores aqui, rede de teste. Então, aqui está o URL do RPC. Aqui está o ID da cadeia, que é 97, símbolo é B&B no Block Explorer URL é este. Portanto, certifique-se de copiar esses N. Então, novamente, vá para Configurações redes em uma rede, copie esses valores e pressione Salvar. E então você deve ter uma opção chamada rede de teste BSC. E o que você quer fazer é provavelmente criar uma nova conta. Você não quer usar uma de suas contas normais. Tenho um chamado teste BSC. Para criar uma nova conta, basta clicar neste círculo e criar uma conta e , em seguida, dar um nome a ela e clicar em Criar e ele cria um para você. Mas o que você quer fazer agora é garantir que esta seja uma conta que você não usará para mais nada, é claro. Mas o que você quer fazer agora é acessar os detalhes da conta. E então você deseja exportar a chave privada. Então clique em Exportar chave privada. E eu consegui, você tem que colocar sua senha MetaMask. Então deixe-me pegar isso. Então digite sua senha MetaMask e clique em Confirmar, e ela mostrará sua chave privada. Então copie isso. Copie isso. Em seguida, volte para o código VS e essas serão suas contas. Mas veja que é plural. O fato de ser plural significa que você tem que colocá-lo em uma matriz. Então, vou colocar suas citações e depois colá-las assim. Agora, é claro que não queremos isso em nosso arquivo de configuração. Queremos colocá-lo em um arquivo ENV. Então, vamos para o contrato e criar um novo arquivo. Vai ser chamado de ponto ENV. E teremos um valor chamado URL. E pegaremos esse URL. E, na verdade, é igual e cole isso. E então você quer, então outra chamada para contagens é igual. E aqui é onde você deseja colar sua chave privada. Então vá em frente e cole sua chave privada aqui e salve-a. Agora vamos voltar ao arquivo de configuração e queremos usar um pacote chamado dot ENV. Então, npm instale o ponto ENV. E sempre esqueço como isso funciona. Dot ENV, ES6. Sim, então vamos importar ponto ENV. E depois que fizermos isso, podemos usá-lo, pois o NodeJS usa essas variáveis de ambiente que são processadas pelo nome do ambiente ENV ponto. Então, no topo, faremos a configuração ENV de ponto de importação e, em seguida, devemos ser capazes de dizer URL de ponto ENV dot de processo. Então, aqui na matriz, vamos dizer processar env ponto, contas de ponto e salvá-lo. E agora devemos ser capazes de implantar. Temos tudo o que precisamos. Vamos experimentá-lo. Em capacete bx dot. Na verdade, recebi a Sugestão Automática. Então, o capacete NPS executa scripts barra de amostra script.js, dash, dash, dash network. Agora não queremos host local, queremos o que temos aqui em cima, que é a rede de testes. Portanto, devemos ser capazes de apagar que na rede que queremos usar é a rede de teste. Se quiséssemos, se quiséssemos definir outra coisa, apenas colocamos toda a rede principal e o mesmo tipo de coisa. Em seguida, podemos implantar a rede principal, se quisermos, mas vamos implantar para testar a rede e clicar em Enter. E diz que não é possível usar instrução de importação fora de um módulo. Tudo bem. Vamos voltar e pegar o outro, que é a declaração require. Para colocar exigir lá e tentar novamente. Lá vamos nós. Cadeia de bicicletas implantada neste endereço de contrato. E se formos a testes de varredura do BSC, net in, confirme isso, vamos perfurar nosso endereço ou endereço de contrato. Lá está, idade de trinta e cinco segundos ou contrato. Aqui está nosso bytecode. Vá para eventos. Acho que não temos nenhum evento. Transações, sem transações. Incrível. Implantamos nosso contrato na rede de testes de cadeia inteligente financeira. Então acabamos com a parte do contrato. Se tivermos que fazer alguma alteração novamente, vamos recompilá-la e reimplantá-la. Ele nos dará um novo endereço de contrato e nós apenas atualizaremos isso no front-end. Então, parabéns, você acabou com seu contrato. Agora é hora de começar no front-end. 4. Configuração do projeto e criação do FrontEnd: Tudo bem, agora vamos nos concentrar no front-end. E o que normalmente faríamos com o aplicativo React é que usaríamos o aplicativo Create React para inicializar um projeto, mas vamos usar algo diferente chamado vite. Agora, o vite é exatamente como o aplicativo Create React, mas é mais rápido e tem outras personalizações, mas não vamos nos preocupar com isso. Então, deve ser como um por um o mesmo. Devemos ser capazes de usar isso e fazer todas as coisas que faríamos no aplicativo Create React. Então, se você for para vite, é um byte, js dot dev. E clique em Começar. E então desça para, vamos fazer fio criar vite. Sinta-se à vontade para fazer npm, se quiser. Eu só prefiro fios. E na sua pasta raiz, basta colar isso e pressionar Enter yarn, criar mordida. E vai inicializar um projeto React. Então, nome do projeto, vamos chamá-lo de cliente. Porque este será o front-end do nosso aplicativo. E, em seguida, selecione uma estrutura. Claro que vamos escolher o react. Então eu não quero usar o TypeScript. Então, basta escolher react. E lá vamos nós. Feito. Então, se você fechar seu contrato, verá que agora você tem uma pasta de cliente. E se você olhar para ele, é quase exatamente o mesmo que o aplicativo Create React. Então, vamos pegar o CSS do aplicativo e excluí-lo. E o favicon e o logotipo, exclua-os. Então, no aplicativo JSX, vamos excluir toda essa div de entrada. Olá só para ver que funciona. E para executar isso, se olharmos para o pacote JSON, é, o script é surdo. Assim, podemos fazer um yarn run dev ou npm run dev. Qualquer um deles. Claro que tenho que estar na pasta certa. Portanto, certifique-se de ver o final da pasta do cliente. Execute isso novamente. E, claro, temos que instalar o Yarn ou instalar o NPM para instalar pacotes R. Tudo bem, vamos tentar isso de novo. Você não é o Yarn install Yarn run dev e vá para localhost. 3 mil falharam na entrada. Certo, então excluímos alguns arquivos. Precisamos excluir as importações também ir para o aplicativo JSX, excluir esta importante declaração de logotipo. Não temos um CSS de aplicativo, você pode excluí-lo, salvá-lo. E acho que é isso. JS principal. Sim, isso é bom. Se abrirmos nosso aplicativo . Lá vamos nós. Sim, diz olá, então nossos aplicativos estão funcionando bem. Então, a primeira coisa que vou fazer, vamos usar um pensamento sobre qual estrutura CSS devemos usar com isso. Na verdade, vamos usar a interface do usuário do chakra porque acho que podemos realmente aumentar isso rapidamente com isso. Agora eu não usei muito. Então, se você também não o usou, estamos no mesmo barco, mas é muito fácil. Então, vamos visitar o site primeiro. UI de Chakra. E estou no Brave, não quero estar no Brave. Deixe-me fechar isso. Chakra Ui.com. Chakra-Ui.com e, em seguida, clique em Começar. Eu consideraria usar o Tailwind, mas fiz um tutorial de dois ventos de cauda uma vez no passado e era tão, tantas aulas para acompanhar. Acho que será muito mais fácil com isso. Então, vamos começar e chegamos a esta primeira página de etapas. Vamos rolar para baixo até a página do aplicativo Create React. Clique nisso. E vemos aqui que, se estivermos usando o aplicativo Create React, podemos executar o comando que inicializa essa estrutura CSS com ele. Não estamos usando o aplicativo Create React, mesmo que seja muito semelhante. Então, precisamos fazer isso manualmente. Então venha aqui para a instalação manual. Clique em yarn ou em VM e vamos instalá-lo. Portanto, pare seu servidor e cole esse comando e vamos instalar a interface do usuário do chakra. Há alguns outros pacotes, emoção e quadro ou movimento. Em seguida, vamos querer fazer essa configuração do provedor. Portanto, precisamos adicionar esse provedor envolvendo nosso componente de aplicativo. Então, vou usar essa instrução de importação primeiro. Vou copiá-lo e ir para o JS principal. Vamos colar isso aqui acima do seu CSS de índice. Em seguida, queremos embrulhar o aplicativo. E eu só vou pegar essa coisa toda e substituí-la. Também vamos usar ícones. Então, se você for para Componentes e em algum lugar, há ícones. Vamos apenas procurar por isso. Mídia e ícones procuram esta seção e clique no ícone, vai querer instalar este pacote de ícones para copiá-lo e instalá-lo. Então cole isso aqui e instale seu pacote de ícones. E enquanto isso está instalando o que queremos fazer por uma questão de tempo, já que este não é realmente um curso CSS, interface do chakra tem muitos componentes que você pode basicamente copiar e colar. Você pode copiar e ajustá-lo para como quiser. Não queremos fazer as coisas do zero aqui. Não queremos reinventar a roda. Então, se você for para o chakra UI Navbar, isso o levará a uma página que tem muitos componentes pré-fabricados. Portanto, há as seções da página, formulários de navegação, componentes, muitas coisas que já estão juntas. Agora, essa página às vezes, por algum motivo, não carrega, como esse conteúdo não carrega. Então eu quero essa primeira barra de navegação porque é a mais simples. Então, basta clicar nesta seta para abri-la em uma nova página para obter uma prévia de como ela se parece. Então, sim, isso é o que parece. Aqui está o seu logotipo, Aqui estão alguns itens de navegação. Eles têm submenus e , em seguida, um login e se inscreve. Vamos correr com isso. Então, vamos voltar a esta página e clicar no código. Vamos usar a subnavegação de largura e o CTA. Clique em Código e clique em Copiar. E então vamos criar um novo componente. Então, vamos ao código-fonte, criar uma nova pasta chamada componentes e criar um novo arquivo chamado nav bar dot js X. E eu vou colar isso nessa coisa toda. E vou encontrar a função principal com isso, que é com subnavegação. Vou mudá-lo apenas para navbar. Ele já é exportado como padrão, portanto, não precisamos adicionar isso na parte inferior. E nós temos alguns erros. O que está acontecendo? Oh, isso parece que é TypeScript, então só precisamos nos ajustar para isso. Então, vamos até o fundo e remova todos esses tipos. Então, remova isso da matriz de itens NAB. E não precisamos fazer interface porque isso não é TypeScript. Encontre o próximo erro. Remova esse tipo em item de navegação móvel. Continue subindo na sub-rede da área de trabalho. Remova isso. E acho que estamos no claro. Portanto, devemos ser capazes de salvar isso e executar o fio do servidor aéreo, executar dev. E devemos ver que essa barra de navegação deve ser tão fácil. É claro que não o fazemos porque não o adicionamos ao componente do aplicativo. Então isso é uma barra de navegação. Então, vamos voltar ao aplicativo. Então APA, JSX e, em seguida, na parte superior, vamos importá-lo, importar navbar de barra de barra de barra de barra de pontos. E então aqui podemos simplesmente mudar esse olá e substituí-lo por navbar e salvá-lo. E nós deveríamos ter um navbar. Lá vamos nós. Parece ótimo. Agora não precisamos de todas essas coisas, tudo o que vamos manter como a seção de logotipo. Vamos colocar qualquer que seja o nome do nosso aplicativo. E precisamos que não precisamos fazer login e se inscrever, só precisamos conectar a carteira. Então, vamos fazer alguns ajustes para que possamos nos livrar. Vamos ver, encontrar trabalho. Então, aqui estão os itens da barra de navegação. Então, vamos nos livrar dos designers de contratação. Vamos nos livrar do Learn Design e dessas subnavegações. Vamos nos livrar do bom trabalho. Vamos nos livrar do rótulo de inspiração. E acabamos com uma matriz vazia. Salve e veja se está tudo bem. Sim, livrou-se de nossos itens de navegação. Tudo bem, item de navegação móvel. Vamos nos livrar disso totalmente porque não temos nenhum item de navegação. Vai ficar bem de qualquer forma. Então, vou apagar isso. Vou apagar o mobile nav. Livre-se disso. E tenho certeza que isso é referenciado em algum lugar. Então, vamos encontrá-lo. Mobile nav Lá está. Então, vou me livrar de toda essa seção lá. E acho que isso cobre isso. Vamos salvá-lo e garantir que está tudo bem. Ainda está bem. Vamos encontrar o sinal aqui. Faça login e inscreva-se. Apenas se livrar do sinal M. E basta mudar a inscrição para conectar a carteira. Nós realmente não queremos esse rosa. Queremos até 500. E o pairar, vamos fazer também cerceta, mas um pouco mais leve, então sim, vamos fazê-lo até 300. E em vez do logotipo, vamos colocar uma corrente de bicicleta. Acho que é isso que chamamos de cadeia de bicicletas do aplicativo. E vamos fazer a direita antes dessa tag de fechamento. Vamos adicionar um peso de fonte igual a 900. Vamos torná-lo grande. E tamanho da fonte. Vai ser X grande. Então, salve isso e veja o que parece. Corrente de bicicleta. Então queremos tornar esse fundo um pouco mais escuro. Então, aqui em cima, onde é usado o valor do modo de cor, ele é definido como branco. Vamos colocar cinza 200. Salve isso e dê uma olhada. E isso parece ótimo. E se o reduzirmos para celular, temos esse pequeno ícone de hambúrguer, que eu realmente não quero. Veja se podemos descobrir onde isso está. Botão de ícone, provavelmente isso. Vamos nos livrar disso completamente. E economize. É. Parece que nossos botões desapareceram, então ainda há algo móvel acontecendo. Hum, provavelmente tem algo a ver com os desktops sub NAB. Vamos nos livrar do subnav. E, na verdade, vamos nos livrar do desktop nav porque não precisamos de nenhum desses itens de navegação. Então, vamos nos livrar disso também. E isso cairia aqui na área de trabalho. Agora, vamos nos livrar disso e salvá-lo e ver o que temos. Tudo bem, e o botão ainda está desaparecendo. E parece ver este botão aqui com esta base de exibição MD. Isso é responsivo como consultas de mídia. Então, na base, que eu acho que é o menor, não diz nada. Vamos tirar isso e deixar o meio. Tenha sempre em linha flexível e isso deve corrigi-lo. Sim, lá vamos nós. E isso se move, mas eu não estou realmente preocupado com isso. Podemos corrigi-lo mais tarde, se necessário. Isso parece bom. Então, corrente de bicicleta e temos nossa carteira de conexão. Vejo como isso foi fácil de configurar, basta colar o exemplo e ajustá-lo como quiser. Em seguida, vamos colocar um grande herói aqui que nos aponta para a página do painel. Então, se voltarmos aos nossos modelos de chakra, há em algum lugar herói de seções de página de herói aqui. Isso é o que queremos. Vou escolher este primeiro aqui. Há outras opções se você quiser ir com elas, vou escolher esta primeira, e desculpe, vá para código, copie. E vamos criar um componente para isso chamado herói ponto JSX. Vou colá-lo como antes, e vamos mudar o nome da função principal , o herói. Vamos criar mais um componente chamado home. Então home dot js X. E esta será a nossa página inicial. Nós só teremos duas páginas neste aplicativo, então vamos fazê-lo assim. E para casa, digamos que const home seja igual a retornar um para casa. Vamos colocar em casa para devolver alguma coisa. Na verdade. Vamos tê-lo. Claro, devolva nosso herói. Herói. Certifique-se de fazer sua declaração de importação na parte superior. E aqui na parte inferior, vou exportar a casa padrão. E vamos voltar ao nosso herói e ajustar isso para que ele funcione. E, na verdade, vamos colocar em casa aqui por enquanto. Eu não quero isso aqui, mas vamos colocá-lo aqui para que possamos ver o que parece ao construí-lo. E, novamente, certifique-se de importar na parte superior. E não gosta que não tenhamos um elemento pai envolvendo esses elementos. Então, vou envolvê-lo com esses elementos em branco. Ótimo, e temos alguns erros porque precisamos ajustar algumas coisas e heróis. Então, a primeira coisa é que diz import hid from next head, que se parece ao lado de JS. Portanto, esses modelos usam tecnologias diferentes. Não estamos usando ao lado de js. Vou remover isso. E, na verdade, vou remover a parte da cabeça. Não precisamos disso. E tudo o resto parece bom. Vamos salvá-lo e meio que ver o que parece. É, como já está pronto para ir aqui, mas precisamos mudar esse texto. Então, vamos encontrar nosso texto aqui em cima e diz que ganhe dinheiro, e vamos dizer, alugue sua próxima bicicleta. E então este texto aqui, vamos dizer com cripto. Então, para este texto, vamos digitar conectar sua carteira, escolher sua bicicleta e você vai para as corridas. Quando você devolvê-lo. Você pode facilmente pagar sua tarifa com B & B. E vamos ativar o envoltório de palavras. E todos nós gostamos dessas taxas de gasolina de B&B porque realmente economizamos isso e damos uma olhada. Seu próximo espaço em branco com criptografia, e aqui está nossa declaração. E vamos realmente fazer essa correspondência com nosso botão lá em cima. Vamos fazer toda essa partida verde e há um Get Started e a partir de 15, vamos abordar isso também. Então, a primeira coisa que vou fazer, alugue seu próximo espaço em branco. Vamos colocar isso como cerceta. Queremos usar cerceta, não verde. Então aqui embaixo, comece, digamos que escolha minha bicicleta. E novamente, defina isso para cerceta. E estes aqui em cima, o plano de fundo até o esquema de cores Vamos fazer TOO também ver como isso se parece. Então, isso saiba mais. Nós realmente não precisamos disso. Então, apenas se livrar desse botão inteiro. Depois, há a partir de US $15 por mês. Vamos colocar o aluguel sem nenhum custo adiantado. E nós deveríamos terminar com isso. Escolha minha moto alugada sabe custar adiantado, então devemos ser capazes de clicar nisso. E isso deve nos levar ao painel. E isso funcionou sem nenhum custo. Está um pouco próximo. Vamos voltar e ver se podemos mover isso. Então, vamos colocar o topo. Queremos colocá-lo como 25 em vez de 15. Acho que isso é bom. Sim, tudo bem. Corria sem nenhum custo adiantado. Você pode tirar a bicicleta , você pode escrevê-la e você só precisa pagar quando eles voltarem. Então, agora queremos poder clicar neste botão e ir para a página do painel. Então, para isso, vamos precisar do roteador React. Então, vou para o Google tão rápido. Roteador React. Leia a instalação do documento e só precisamos do fio ou NPM Yarn adicionar o roteador React dom às seis. Então, vamos adicionar isso. Interrompeu meu servidor, execute-o, inicie o backup do meu servidor. E vamos ao aplicativo JSX e adicionaremos tudo isso aqui. Então, precisamos fazer uma importação. Na verdade, provavelmente posso obtê-lo na página. Importar roteador do navegador. Vamos seguir em frente e pegar isso, salva algum tipo de digitação. Vamos fazer isso como um roteador. Acho que isso é convenção. Vamos importar rota, rota e rotas do roteador React, dom. Nesta instrução de retorno, vamos colocar um componente de roteador, R. maiúsculo Vamos envolver tudo nesse componente do roteador. Vou manter meu navbar lá. Vou retirar para casa. E dentro desse roteador, quero definir minhas rotas. Então, rotas. E então, dentro disso, vamos colocar duas rotas, uma para uma página inicial, uma para nossa página do painel. Então, o primeiro é a rota. Em seguida, faça o caminho exato igual a barra, que é a página inicial deles. elemento mais fino é o componente doméstico e seu fechamento automático. E, em seguida, basta copiar isso. E o segundo caminho será o painel. O elemento será um painel que ainda não criamos. Vamos em um minuto, provavelmente vai dar um erro , mas está tudo bem. Deixe-me apenas formatar isso. Sim. Acho que é isso. Isso é bom e não precisamos disso. Isso sobra do Bootstrap inicial. Portanto, temos um roteador dentro dele, temos rotas e temos duas rotas definidas. Agora podemos voltar ao nosso herói para onde um botão está bem aqui. E como este é um botão, você não pode realmente fazer um link. Então, vamos apenas fazer um onclick. Vamos ter alguns parênteses e vamos chamar handle click. E, como argumento, vamos passar no painel. Então vamos definir isso. Então, vamos subir aqui para a nossa função de herói. E, na verdade, antes disso, precisamos importar a navegação, que é um recurso do Roteador React dom, que nos permite navegar para caminhos diferentes. Então, importamos, usamos navegar a partir do roteador React, dom. Agora precisamos definir esse gancho. Então, deixe navegar igual a usar navegar. E agora vamos criar nossa função Const, lidar com cliques iguais. Vamos passar por qualquer caminho como parâmetro. E vamos ligar para navegar. Esta é uma convenção do Roteador React seis, a propósito, use navegou no gancho e estamos apenas definindo-o como navegar e vamos usá-lo aqui. Então navegue caminho no caminho sendo o que eu passar. E se você olhar aqui, eu passo em painéis. Portanto, isso deve navegar por nós, nos direcionar para a rota do painel. Então, salve isso e não temos rotas de painel. Então, vamos para o novo arquivo e criar um novo componente. Ponto do painel JSX. E eu só vou copiar para casa e colá-lo aqui e mudar de casa para Dashboard. E eu não preciso dessa importação de heróis. Temos que corrigir a ortografia, e eu também não preciso desse componente aqui. Vou colocar um H um que diz painel. Então, vamos verificar nosso componente doméstico. Temos nosso herói. Então isso vai mostrar seu herói. Neste componente inicial será chamado sempre que vamos para a página inicial com base em nossas rotas, lembre-se das rotas que criamos. Portanto, devemos poder agora acessar nosso aplicativo e ir para a página inicial. Então localhost 3 mil atualiza e não está funcionando. O que esquecemos de fazer? O painel não está definido. Claro que não está definido. Não o importamos no topo. Veja que estamos usando o componente , mas não o importamos. Portanto, só precisamos adicionar uma instrução de importação painel de importação do painel de componentes. Salve e nossa página inicial deve ser essa. Lá vamos nós. Então, temos nossa barra de navegação, temos um botão Connect Wallet, com o qual lidaremos mais tarde. Temos um bom herói e se clicarmos em escolher minha bicicleta, ela deve nos levar para a página do painel. Impressionante, nossa página inicial está terminada. Então, apenas para recapitular, temos nosso JSX principal, que está envolvido com esta interface de usuário de chakra, para que possamos usá-lo em qualquer lugar por esse provedor de chakra. aplicativo deles JSX, temos a rota em andamento. Portanto, nossa página inicial, a rota da página inicial exibirá o componente inicial. Nossa rota do painel exibirá o componente do painel. E então temos uma barra de navegação, que é nossa barra de navegação chamada no aplicativo aqui. Porque queremos que isso também esteja em um roteador. Temos nosso componente doméstico, que está exibindo nosso herói. Porque é isso que está na página inicial. Temos nosso herói, que acabamos de olhar. E então temos um painel o qual vamos pular para o próximo. No painel, poderemos exibir todas as estatísticas. Seremos capazes de escolher a bicicleta deles e interagir com a carteira. É aqui que toda a magia vai acontecer. Então, vamos seguir em frente e construir isso. 5. Como criar o painel: Tudo bem, então a próxima coisa que queremos fazer é construir nossa página do painel. Agora, aqui está o que é suposto parecer. Então, vamos ter essa declaração de boas-vindas e teremos algumas estatísticas aqui. Esse será o nosso painel, terá um formulário que permite que você pague What's du terá um formulário para creditar sua conta, terá uma seleção de bicicletas aqui. Então, temos três tipos diferentes de bicicletas. Algumas descrições sobre cada bicicleta e a capacidade de verificar em cheque e uma bicicleta, é isso que vamos construir. Então, primeiro, vamos criar o painel de estatísticas. Então, vou voltar a esses modelos de chakra e tenho esta seção de Página chamada estatística. E nós só vamos puxá-lo diretamente de lá. Então, estamos usando a chamada estatísticas com ícone. Vai ficar assim. E então clique no código e copie isso. Então, vou criar um novo componente para isso. Vou chamá-lo de totais atuais ponto JSX e apenas colar nesse código. E eu acho que isso também é TypeScript, então teremos que remover tipos. Então, removeremos isso, removeremos a interface. E acho que isso é tudo o que temos que fazer. Então, agora vamos importar isso para nosso componente de painel, que será o componente pai desses componentes filhos. Então importe o total atual. E minha inteligência não está chegando está me dizendo que não a exportamos. Então, vamos verificar isso novamente. Cartão de estatísticas de função. Na verdade, nem sequer chamamos isso. Então, exporte a função padrão, vamos chamar esses totais atuais. E vamos tentar isso de novo. Volte para o painel. Importe totais atuais dos totais atuais. Está na mesma pasta. E então, em vez desse H1, vamos exibir os totais atuais e ver como isso se parece. E temos um filtro de erro resolvido ícones react, BS dos totais atuais, JSX o arquivo existe? E parece que eles estão usando o pacote NPM de ícones do React. Vamos nos certificar de que é um pacote. Ícones do React. E sim, para que possamos clicar nisso e instalá-lo. Então aqui, npm install, React, dash ícones. Vou usar fios como venho fazendo. Instalação do Yarn, ícones React. Oops, adicionar fios, reagir ícones. E vamos instalar, e devemos ser bons depois disso. Agora vou executar meu servidor novamente e atualizar. E lá vamos nós. Temos nossas três estatísticas, mas queremos quatro e queremos ajustá-las um pouco. Então, queremos que o primeiro tenha um ícone de carteira. Segundo, um ícone de dinheiro. Vamos trabalhar nisso. Então, vamos rolar para baixo até o cartão de estatísticas, componentes de chocolate ou UI. E você verá aqui que diz como ícone BS pessoa, F phi server, go location. O que faz tudo isso? Bem, podemos voltar para reagir ícones e procurar isso. Então eu quero uma carteira. Qual deles usamos aqui? Parece isso. Parece que usamos essa conta de esboço MD. Agora você pode dizer de qual biblioteca elas vêm pelas duas primeiras letras ou três letras. Então, se você vir como IO enquanto estiver nítido, provavelmente são esses ícones de íons. Se você vir MD, provavelmente é Material Design em nosso olho é como um ícone de remixagem. Então, quando você realmente clica nisso, ele copia esse nome para sua área de transferência. Você quer ir até aqui e ver onde diz barra BS slash FI. Estas são as diferentes bibliotecas aqui. Portanto, não vamos MD porque esta é uma conta de esboço do Md em MD is Material Design. Vou copiar isso e importar o nome do meu ícone copiado da barra de ícones do React MD. E devemos ser bons lá. Então, vou descer e mudar o primeiro. Vou alterar o ícone para a carteira de saldo da conta de esboço MD. E chamamos isso de crédito B e B, crédito B & B. E digamos que 0,05. Incrível, parece bom. Em seguida, temos esse símbolo de dinheiro. Então, vou aos meus ícones do react e digitar dinheiro. Talvez. Sim, aqui está, RI, dinheiro, círculo de dólares e é RIs, então é ícone remixado. Então clique nele e role de volta para o topo. E provavelmente posso começar a substituí-los porque não vou usá-los. Então eu vou colar isso aqui e é RI, e eu vou vir aqui e colá-lo no próximo. Então cole isso. E então eu vou mudá-lo para B e B fazer. Então, B & B faz. E eu vou colocar 0.001 apenas para enchimento. Então nosso próximo ícone é este relógio. E serão minutos de pedalada. Então, vou voltar ao meu ícone react e digitar o relógio. Nós vamos com este, círculo de relógio ai contorno. É IA. Então, precisamos ter certeza de colocar isso. Mas esse é o meu terceiro. E mude isso para minutos de pedalada. Vou deixar esses sete. Isso é bom comigo. Então precisamos adicionar mais um. Então, se você procurar aqui, a grade simples é configurada para uma base de três colunas e depois uma em telas pequenas. Mas precisamos mudar isso para quatro. Então, teremos quatro colunas porque gostaríamos de ícones. E então eu vou copiar isso e salvá-lo para ter certeza de que está certo. Não é o círculo do relógio do esboço da IA não é definido, é claro. Então, vamos subir aqui e colar isso. E isso é um dy. Então podemos nos livrar deste e salvá-lo e ele deve funcionar. Agora, lá vamos nós. Portanto, temos nosso crédito B & B ou B&B fazer uma carona minutos. E então o último diz status da bicicleta e, na verdade, é uma cor. Então, o que podemos fazer é, antes de tudo, fazer o mesmo status de bicicleta. E então não precisamos desses dois, então vou comentar esses dois. Precisamos adicionar uma variável de cor de fundo para que possamos aparecer e dar uma olhada na estatística pai real. E então veremos aqui que na verdade há prompts sendo passados. Portanto, a estatística e o ícone do título estão correlacionados a cada cartão de estatísticas tem uma estatística e um ícone de título. E então, aqui em cima, estamos realmente transmitindo essa informação. Então, tudo o que realmente precisamos fazer é adicionar outro suporte aqui chamado cor BG para cor de fundo. Então, vamos passar isso. E estes são destruídos, então não precisamos ir adereços ponto cor BG. Na verdade, podemos apenas usar a variável. Podemos adicionar outro atributo aqui que diz que cor de fundo é igual a cor BG. Então, seja o que for que passamos como adereço, ele vai mudá-lo para essa cor de fundo. Incrível. Agora vamos descer. E este último, vamos dizer que a cor bg é igual. E vamos seguir em frente e apenas fazer vermelho por enquanto. Salve e veja se isso funcionou. Sim, aqui temos isso agora. As cores de fundo vermelhas. Portanto, nenhum dos outros obtém uma cor de fundo porque isso não está sendo passado. Só está sendo passado . E este último. O que podemos fazer é tornar isso condicional, como se o locatário tivesse uma bicicleta verificada e queremos que isso seja verde. Então, vamos revisitar isso quando começarmos a juntar toda a lógica. Então eu acho que acabamos lá com o pequeno painel deles. Na verdade, temos que mudar esse texto. Então, vamos alterá-lo para dar as boas-vindas ao seu nome. Aqui estão suas estatísticas e tornarão seu nome dinâmico mais tarde. Se você vier aqui, bem aqui. Bem-vindo. Travis. Aqui estão suas estatísticas. Incrível. Então, novamente, estamos apenas construindo a interface do usuário. Não temos nada dinâmico acontecendo. Estamos apenas fazendo com que pareça bonito. Então, em seguida, na nossa lista, temos esses dois formulários, pagamos seu devido e creditamos sua conta. Então, vamos voltar a esses modelos de chakra e ver se conseguimos encontrar algo. Aqui estão os formulários. E eu realmente não quero usá-los. Quero algo simples. E quando faço fóruns e reajo, gosto de usar o formulário de gancho do React, que é uma biblioteca que eu acho muito fácil, acho que é mais fácil do que alguns dos outros lá fora. Se você fizer o formulário de gancho React e a interface do usuário do chakra, você deve ter um bom exemplo com o qual podemos trabalhar. Então isso é, na verdade, do site do chakra. Então, novamente, fui ao Google, digitei em forma de gancho React e interface de usuário de chakra. E você vai obter esse URL, interface do usuário de chakra. Além disso, o gancho React para eles. Então clique nisso. E vamos pegar, vamos apenas copiar isso aqui e ver o que parece. Então, vamos criar um novo componente. Vamos chamá-lo de formulário de pagamento. Esta é a fórmula pe com ponto JSX. E cole isso e, em seguida, encontre nossa função principal chamada Hook form e troque-a para pagar por eles. E então, em nosso painel, e na verdade eu acho que vou incluir isso nos totais atuais em meio que mantê-los juntos porque vamos adicionar esses valores a esse painel. Então, vou colocá-los no fundo aqui. E o que vou fazer é criar um componente flexível. E vou justificar o conteúdo para o centro. E vou alinhar itens também ao centro. Entre eles, vou colocar o formulário de pagamento. Um formulário. Se eu pressionar Enter, acho que ele o importa automaticamente para mim. Caso contrário, certifique-se de chegar ao topo e importar o formulário de pagamento de um formulário. Na minha formatação está tudo desativado. Deixe-me formatar isso. Lá vamos nós. E vamos ver o que isso parece. Então, vou salvá-lo e tenho um problema. Falha ao resolver, React hook para ele. Certo. Sim. Portanto, temos que instalar esta biblioteca. Então deixe-me matar meu servidor e fazer fio. Adicionar, Reagir, forma de gancho. Acho que é isso que dizemos. Ou você pode fazer npm install, formulário de gancho React. Vamos instalar isso primeiro. Tudo bem, execute seu servidor novamente. Vamos dar uma olhada. Tudo bem, bom. Então, temos uma pequena forma aqui que apenas diz FirstName. Ele tem uma entrada de texto para seu nome e, em seguida, um botão de envio. Então está tudo bem. Vamos ajustar um pouco para dizer que pague o devido e depois receba um pagamento. Então, se rolarmos para baixo, veremos aqui este é o nosso formulário. Temos um rótulo de formulário que diz FirstName. Temos uma entrada que tem alguns atributos. Nome do ID, nome do espaço reservado, este registro, como registros, esse valor com o formulário de gancho. Você verá como isso funciona em um minuto e , em seguida, definirá alguns requisitos. Portanto, este é um campo obrigatório, comprimento mínimo deve ser quatro. E, em seguida, há essa mensagem de erro que pode surgir se esses requisitos não forem atendidos. Então, vamos ajustar isso antes de chegarmos ao controle de forma. Hum, eu só vou fazer bem acima do controle do formulário aqui. E deixe-me formatar isso porque também não gosto do formato, logo acima deste controle de formulário na instrução return. Vamos fazer um componente de texto. Isso é do componente Chakra UI Text. E dentro disso, vamos colocar uma fonte. A família de fontes é igual ao cabeçalho e ao tamanho da fonte. Como queremos que isso seja maior, vamos fazer um peso extra grande e a fonte. Vamos fazer 600. E então vamos colocar alguma margem na parte inferior. Então nb é igual a quatro. E deixe-me trazer isso de volta. E entre isso, vamos colocar o pagamento do seu fazer. Então, vamos ter isso acima do formulário ou acima da entrada. Então tudo o que precisamos fazer aqui realmente é mudar todas essas ocorrências de nome para algo como pagamento. Então, vamos mudar isso dois erros inválidos, pagamento por ponto. Vamos retirar o rótulo completamente porque não precisamos dele, porque temos o texto acima do controle de formulário aqui. Para a entrada, faremos pagamento de ID, espaço reservado, Vamos colocar pagamento, pagamento de P capital. Vamos registrar esse valor, seja lá o que for inserido, vamos registrá-lo como pagamento. E isso é muito legal. Como se você fizesse um monte de entradas aqui, ele criará uma matriz de pares de valores-chave do que você enviar em seu formulário. Então, vai dizer dois pontos de pagamento, seja lá o que entrarmos no fórum, ele faz todo o trabalho para nós. Obrigatório. Sim, é necessário. Não vou ter um comprimento mínimo. Então, vou tirar isso. Então aqui embaixo setas nome do ponto, vou colocar pagamento e erros nome de ponto, mensagem de ponto, alterar o pagamento. A propósito, você poderia deixar isso como nome. Só dirá na saída, ele terá a chave do nome em vez do pagamento. Isso é meio confuso. Então, estamos fazendo o pagamento em vez disso. Incrível. E tem algum gancho embutido, está enviando, acho que cria um spinner ou algo assim. Mas aqui está o botão Enviar. Então, vamos ver o que isso se parece. Na verdade, antes de fazermos isso, vamos subir aqui e ver a função onsubmit. Então, eles até incluem esse formulário emenvio do identificador de envio, no envio. Este é um formulário de gancho React. Convenção aqui, mas você verá aqui em cima no envio, temos uma nova promessa. Agora, eu não quero esse setTimeout. É apenas colocar como um preenchimento para nós que depois de três segundos ele mostrará quaisquer valores que fazemos para que pareça real. Eu realmente não quero isso. Vou tirar isso. Vou manter esse JSON stringify. Mas vou tirar isso. E vou fazer disso uma função de seta ES6. Portanto, const onsubmit é igual a valores. Então vou fazer disso uma pia. E tudo o que vou fazer é registrar os valores no console, console.log. E vamos ver se isso funciona. Opa, eu preciso deles. Então, JSON estringifica esses valores , salve isso e vamos dar um giro. Mas é claro que temos um erro porque sempre temos um erro. Falha ao construir texto, use o novo operador. Então, acho que é porque não importamos esse componente de texto. Então, vamos adicionar texto à nossa importação, importação de interface do usuário de chakra. E o que mais usamos? Acho que não usamos mais nada, então isso deve funcionar. Salve isso. E aqui vamos nós. Pague seu fazer. Deixe-me limpar o console e devemos ver nosso valor surgir. Então, vou colocar olá e enviar. Aí está, pagamento. Olá, valor-chave. Então isso é bom, mas não queremos que as pessoas coloquem cordas aqui. Queremos que eles coloquem apenas números e não apenas números, mas números decimais porque estamos lidando com B & B. Então, para fazer isso, nós realmente viemos aqui e definimos o tipo como número. E então, como queremos ser capazes de usar decimais, podemos adicionar o atributo step e simplesmente salvar isso. E agora podemos fazer como um 0.001, clicar em Enviar e ele é enviado corretamente. E se tentarmos enviar sem nada, ele dirá que isso é necessário. Isso é obrigatório. Não vou deixar que façamos isso. Isso é o que há de bom nos formulários de gancho React. Gosta de todas essas coisas para você. E quando você se acostumar a usá-lo, é uma ótima biblioteca. E caso você esteja se perguntando qual é esse passo, se eu removê-lo e tentar colocar esse número, posso colocar em 0,01, mas quando eu clicar em Enviar, ele diz, insira um valor válido. Os valores mais próximos são 01, então você só pode usar números inteiros. Você não pode usar esse decimal. Portanto, temos que permitir essa funcionalidade de etapa. Então passo é igual a NE. Agora que isso funciona, vamos frente e adicionar o outro, que é o crédito da sua conta, onde você pode adicionar crédito ao seu saldo. Então, vamos fazer exatamente a mesma coisa. Na verdade, posso simplesmente copiar este formulário de página. Vou criar um novo componente e chamá-lo adicionar duas formas balanceadas que JSX colam isso em nossa outra forma e apenas faça alguns ajustes. Então, em vez de pagar sua conta, colocaremos crédito na sua conta. Então, em vez de pagamento, faremos saldo de crédito. Então, vou selecionar todos esses na verdade, e fazer saldo de crédito. Então, para o espaço reservado, quero ver e acho que é isso. Vamos garantir que isso funcione. Temos o tipo e o passo lá que precisarão. Vamos salvar isso e atualizar esta página. E, claro, precisamos adicionar o formulário à nossa página. Você vai para os totais atuais e escreve um formulário de pagamento inferior, adiciona, adiciona ao saldo. E, na verdade, precisamos alterar esses nomes de função que são pagos. Adicione ao formulário equilibrado. Então precisamos adicioná-lo aos nossos totais atuais, certo? Formulário de pagamento inferior. Precisamos adicionar o componente. Certifique-se de importá-lo nas principais mentes para fazê-lo automaticamente e equilibrar a forma. Então, há meu componente e ele é importado aqui. Agora vamos conferir. Ótimo. Tenho o pagador devido e credito sua conta. Agora esses dois parecem presos juntos, veja o quão perto eles estão. Vamos dar-lhes alguma separação entre si e com o conteúdo acima dele. Vou para o formulário PE. E logo acima deste formulário, vou adicionar conteúdo flex justify igual ao Center. E isso é apenas os itens de alinhamento do Flexbox no próprio centro de chakras. Então vamos colocar algum preenchimento, então P é igual a cinco. E então eu vou colocar alguma margem superior igual a dez. E preciso fazer a mesma coisa nos outros. Então, vou copiar o primeiro bit. Certifique-se de descer até o fundo e fechar isso. E também tenho que colocar minha etiqueta de fechamento lá e também garantir que você importou no topo. Portanto, certifique-se de colocar flex para importar isso da biblioteca de chakra. E então queremos fazer o mesmo no anúncio para um formulário equilibrado. Então, logo acima do formulário, cole no flex com a etiqueta de fechamento e venha para a parte inferior para colar isso. E, em seguida, aqui em cima, adicionado na importação. Vamos dar uma olhada nisso. Lá vamos nós. Então eles têm algum espaço entre eles e eles têm algum espaço acima e abaixo. Agora, logo abaixo disso, vamos colocar três motos. Então, estamos realmente criando o que o chakra chama de pilha aqui. Estamos empilhando isso em cima disso, além disso. Então, eu quero colocar uma pilha no componente do painel. E aqui acima disso, vou escrever pilha como caixa, caixas e outra convenção de chakra. O texto alinha o centro. Tudo está centrado. E então vamos fazer algumas coisas responsivas aqui. E acho que copiei isso de algum outro lugar do projeto. Como eu disse, não quero passar muito tempo em CSS porque não é por isso que estamos aqui. Estamos tentando construir isso rapidamente para que possamos chegar às coisas divertidas do blockchain. Então espaçamento base oito. E isso é apenas ditos em telas pequenas, usando oito no meio é 14. Então, MD 14. E então o preenchimento PY y, que é o preenchimento superior e inferior. Vamos colocar a base 20 e MD 36. E faremos uma etiqueta de fechamento. E na parte inferior, em totais atuais, cole essa tag de fechamento. E então, no topo, você precisa importar a pilha. Imports pilha da barra da interface do usuário chakra dash reagem. Então, basta usar essa instrução de importação e salvá-la. E agora temos um erro. A caixa não está definida, então precisamos importar a caixa também. Salve isso. Lá vamos nós. Agora você vê que nossos rótulos, caixas de texto e botões estão todos centralizados de acordo porque fizemos essa pilha e tudo nessa pilha precisa ser centralizado. Então isso parece ótimo. Então, logo abaixo disso, vamos colocar esta fileira de bicicletas. Então, uma descrição e, em seguida, esses dois botões, e estaremos prontos para chegar às coisas divertidas. Então, aqui nos totais atuais, vou colocar flex, justificar conteúdo igual a Center e alinhar itens também é igual ao centro. E minha tag de fechamento vou colocar abaixo na minha tag de fechamento, vou colocar diretamente abaixo disso. Entre eles. Vou adicionar esses componentes de bicicleta. Então, vou colocar a bicicleta por enquanto. E vamos ter três motos. Então vá até os componentes, clique com o botão direito do mouse em criar um novo arquivo e vamos chamá-lo de bike dot JSX. Bicicleta Const é igual a bicicleta de retorno H1 de bicicleta. Vamos exportar essa bicicleta padrão de exportação. E então, em nosso painel, vamos adicionar três dessas bicicletas e não se esqueça de importá-la no topo. Importe bicicleta da bicicleta. Vamos adicionar três desses e garantir que ele funcione. Confira isso. E a caixa não está definida no painel. Ele é definido. Vamos salvar isso novamente. Talvez eu só precise me refrescar. Ok, flex não está definido, então não se esqueça de adicionar flex aqui também. Aqui vamos nós, bicicleta, bicicleta, bicicleta. Então, precisamos substituí-los por imagens. Tenho três imagens para você usar. Estará abaixo deste vídeo ou em algum lugar, onde quer que o conteúdo do curso esteja. E o que posso fazer é abrir, bem, vou criar uma pasta chamada ativos. Deixe-me abrir isso no Finder e abrir outro. E deixe-me encontrar o meu. Então, vou colar nesses três itens. Bicicleta um, bicicleta e bicicleta três. Tudo bem, então para a nossa bicicleta, o que vamos fazer é criar uma caixa. Lembre-se disso, todos eles são flexionados. Então, cada um terá esse componente de caixa. E então o tamanho da caixa é igual a grande margem x, que é esquerda ou direita. Vamos colocar dois. Então, há algum espaço entre ele. Feche isso. E entre a caixa, faremos uma imagem que será nossa fonte de imagem igual a bicicleta, margem, fundo igual a dez. Nesta moto, na verdade, vai ser um adereço. Então, em vez de adereços, vamos destruí-lo e colocar bicicleta. Vamos passar isso como um adereço. Vamos fechar essa imagem. É fechamento automático. Em seguida, faremos um componente de texto. E aqui você pode colocar um pouco de Lorem Ipsum. Você pode encontrar alguns detalhes da bicicleta, se quiser. Só vou fazer o gerador Lorem Ipsum por enquanto. E eu vou apenas copiar esse bit. Mais uma vez. Você pode colocar o que quiser lá, colá-lo. E eu vou colocar um envoltório de palavras. Então, se você acessar o código VS até Exibir e clicar em quebra de palavras. Então, há alguns textos que estarão sob a imagem. Então vou empilhar alguns botões. Então, vou fazer uma pilha. espaçamento é igual a 0, direção é igual a rho, alinhar, centralizar, justificar centro. E então a margem superior é igual a cinco. Dentro da pilha, queremos colocar um botão. Lembre-se de que usamos um botão no herói. Então, vou apenas copiar isso. Vá aqui e copie este botão. Isso tornará a vida mais fácil do que nós digitar tudo isso. Volte para a bicicleta e cole isso. Então, meu botão mudará esse texto para dizer checkout. E vamos colocar outro abaixo dele. Portanto, copie isso novamente e altere isso para fazer check-in e remover o onclick. Não queremos lidar com isso ainda. Vou formatar meu documento e salvá-lo. E, na verdade, vamos fazer isso antes marcarmos o botão Importar da interface do usuário do rastreador, caixa de importação, imagem, pilha de texto. E acho que é isso. Também queremos, bem, não poderemos ver nossas imagens ainda porque estamos passando pelas motos. Vamos lidar com isso antes de verificarmos nosso site. Portanto, nossa bicicleta é uma criança para painel. Então, aqui é onde precisamos definir nossa imagem de bicicleta. Então, aqui em cima eu posso importar bicicleta. Um de eu acho que são ativos de ponto, ponto barra barra bicicleta um ponto JPEG porque acho que o nome da imagem, copie isso duas vezes. E troque a bicicleta um para bicicleta para trocar de bicicleta 12 por três. Então agora podemos pegá-los e passá-los como adereços. Então podemos dizer que a bicicleta é igual a bicicleta um. Bicicleta é igual a bicicleta para bicicleta é igual a bicicleta três. Então estamos passando em cada bicicleta individual e estamos recebendo como um suporte no componente da bicicleta. Incrível, vamos dar uma olhada nisso e ver se funciona. Ótimo. Então nossas imagens estão aqui. Eles devem ser responsivos. Estamos usando o Flex. Sim, eles são responsivos. E temos algum texto que podemos voltar e ajustar como você quiser. E temos botões de checkout e check-in. Agora eles são circulares e não têm espaço entre eles, então vamos consertar isso. Então, sob o botão, não precisamos desse esquema de cores, cerceta, vamos colocar m igual a dois para colocar alguma margem lá. tamanho da fonte é igual a pequeno. peso da fonte é igual a 600. E então esse plano de fundo deve ser um total de 500. Remova o arredondado e remova este preenchimento x. e, em seguida, para passar o mouse, vamos torná-lo um 300. Então, é um pouco mais leve quando você passa o mouse sobre ele. Então, vou pegar tudo isso e colá-lo aqui embaixo. Vou colar isso aqui e salvá-lo. E agora ele deve parecer muito melhor, exceto que o texto é preto. Vamos deixar o texto branco. A cor é igual a branco. Para combinar com todo o resto. Certifique-se de fazer isso no outro botão para salvá-lo e boom, está com boa aparência. Agora devemos fazer esta corrente de bicicleta, este logotipo aqui em cima, vá para a página inicial quando você clicar nela. Então, vamos para a barra de navegação de cabeçalho, desculpe. Vamos descobrir onde está isso, corrente de bicicleta, e vamos fazer disso um elo. Então, vamos colocar o link. Porque lembre-se de que o Roteador React configura um link para barra, que é nossa página inicial. E então vamos colocar a corrente de bicicleta entre isso. E isso será vinculado à página inicial. Então, salve-o. E agora atualize. E agora, quando passarmos o mouse sobre ele, veremos que é um link. Podemos clicar nele. E isso não nos leva à página inicial. Algo deu errado. Oh, eu vejo o que está acontecendo. Está importando o link da interface do chakra. E, na verdade, precisamos importá-lo do roteador React dom, importar o link do roteador React dom. Isso é o que está acontecendo. Portanto, não precisamos desse link aqui. Vamos tirar isso e como isso deve funcionar. Sim, aqui vamos nós. Cadeia de bicicleta e você vê abaixo localhost 3 mil vem aqui em baixo. Se clicarmos nele, vamos para a página inicial. Tão incrível. Acho que acabamos com a interface do usuário e podemos realmente começar agora e a lógica. Então, se eu estiver na minha página inicial, posso conectar a carteira , o botão lá, posso escolher minha bicicleta para ir ao painel, que configuramos aqui. O painel dá crédito ao meu B&B. B&b faça minutos de passeio no status da minha bicicleta. Tenho permissão para pagar meu pagamento, crédito, minha conta. Posso escolher uma bicicleta aqui, check-out, check-in. E acho que estou bem. A única coisa que resta é quando, quando um novo usuário entra nesta página, ele não quer ver seu painel porque ainda não entrou como locatário no contrato inteligente. Então, se eu chegar a este aplicativo e nunca o usei, preciso me registrar como locatário. Lembre-se que temos que adicionar aluguel ou função. Então, quando eles chegam aqui pela primeira vez, precisa haver um formulário que eles possam se adicionar como locatário, mas ainda não colocamos nenhuma lógica para determinar isso. Então, vamos adiar. E à medida que começamos a lógica, quando realmente somos capazes determinar se elas são ou não. Vamos adicionar nesse formulário. Tão ótimo trabalho promovendo essa interface do usuário. Sei que você está mais animado interagir com o contrato inteligente e construir essa lógica , conectar-se à carteira e fazer transações, todas essas coisas divertidas. Mas tivemos que tirar isso do caminho e agora está fora do caminho. E vamos nos divertir ainda mais na próxima seção. 6. Conectando o MetaMask e falando com nosso contrato: Ok, então agora para a parte divertida, vamos conectar nossa aplicação ao contrato inteligente e começar a falar com a blockchain. Então, antes de entrarmos no front-end, precisamos voltar para a pasta do contrato aqui. E lembre-se quando compilamos este contrato, ele criou esta pasta de artefatos e uma pasta Contratos, uma pasta de alma de pontos de corrente de bicicleta neste arquivo JSON com um monte de dados. E lembre-se que falamos sobre o bytecode e a ABI. A ABI novamente, é uma maneira de dizer ao seu aplicativo quais funções ou métodos ele pode chamar, quais funções podem chamar e você é contrato inteligente e algumas outras informações a ver com isso. Precisamos incluir isso em nosso projeto, este ABI. Então pegue toda a matriz e role para baixo até o final dela e inclua os colchetes e copie-a. E agora vamos criar em nossa pasta do cliente um arquivo na pasta de origem chamado config dot json. E vamos criar apenas alguns JSON regulares. Então, colchetes encaracolados aqui, vamos colocar a ABI como chave e tem um valor. Vamos colar nessa matriz. E vou formatá-lo. E esse será o nosso ABI. Agora, além disso, precisamos poder agora, além disso, precisamos de endereço de contrato aéreo , como onde implantamos nosso contrato também. Então, vou adicionar outra chave aqui depois disso. Então, coloque uma vírgula e digite o endereço do contrato. E o valor será o endereço para o qual implantamos. E não me lembro o que foi quando fiz isso. Então, vou implantá-lo novamente. Vou voltar para a pasta raiz, cd na minha pasta de contrato e executar NP x hardhat, executar scripts slash sample script.js. Vamos definir esse sinalizador de rede para a rede de testes. Lembre-se que definimos em nossa configuração de hardhat, na verdade, config hardhat essas redes, esse objeto de redes e recriamos uma chamada rede de teste. Então é isso que estamos fazendo. Estamos implantando a execução desse script de exemplo ou esse script de implantação na rede de teste. Então, vou apertar Enter e deixar essa implantação e, em seguida, vou pegar o endereço do contrato que foi implantado para lá, é a cadeia de bicicletas implantada neste endereço. Vou copiá-lo, voltar para minha configuração JSON e colar isso como um valor para o endereço do contrato e salvá-lo em nosso contrato, podemos guardá-lo por enquanto. Então abra o backup da pasta do cliente. E nós vamos, e vamos voltar a isso. Então, o que vamos fazer a seguir é que precisamos de uma maneira de armazenar o estado. E eu realmente não quero lidar com redox porque este é um projeto pequeno e Redux é um pouco complicado. Então, vamos usar algo muito mais fácil chamado de Context API. E isso faz parte do reagente vem com o React e nos permite gerenciar o estado. Então, se você já trabalhou com reagiu antes, sabe que passamos adereços para crianças e, às vezes, isso pode ficar fora de controle e estamos passando backup de eventos para os pais e isso é apenas louco. Então, o que essa API de contexto faz é como Redux na medida em que gerencia o estado. Mas o que isso faz, o que isso nos beneficia é que podemos envolver todo o nosso projeto neste provedor e, em seguida, qualquer componente dentro desse provedor pode acessar o estado. Então, o estado será global e você pode acessá-lo em qualquer lugar. Você acabou de trazer esse contexto, para acessá-lo. Então, vamos configurar isso e isso realmente vai controlar como todas as nossas funções com as quais conversamos com esse contrato inteligente. Portanto, se você for para a origem e clicar com o botão direito do mouse e criar uma nova pasta, e nós a chamaremos de contexto. Whoops, crie um. Vamos clicar com o botão direito do mouse na pasta de origem, criar uma nova pasta chamada contexto. Por algum motivo , simplesmente não vai. Deixe-me fazer isso. Aqui está, contexto. Então, vamos clicar com o botão direito do mouse na pasta de origem e criar uma nova pasta chamada contextos. E dentro dessa pasta criará um arquivo chamado blockchain context dot js X. E daqui vamos importar algumas coisas. Então importe, reaja e use o estado porque vamos usá-lo do React. Em seguida, vamos importar isso. Config JSON. Então, vamos importar essa ABI e o endereço do contrato, e vamos estruturá-lo para que possamos acessar ambos individualmente. Então importe ABI, endereço do contrato de. E então eu acho que é ponto, ponto barra configuração JSON. Bom. Então, em seguida, vamos ser, em seguida, vamos usar um pacote chamado ethers js. Agora, muitas pessoas usam a Web três js. Este pacote nos permite falar com o blockchain, mas sou o próximo, vamos usar um pacote chamado ethers JS. Agora, muitas pessoas que conheço usam Web três JS. Eu gosto de éteres, JS cada vez mais familiarizados com isso. Então, vou usar isso neste pacote nos permite conversar com nosso contrato inteligente na cadeia de blocos. Por isso, é muito fácil de instalar. Venha aqui. Deixe-me voltar para minha pasta de clientes. No Yarn executado, adicione éteres, ETA GRS. E enquanto isso estiver instalando, vou importar éteres. Éteres. Muito fácil. Ótimo. Em seguida, vamos criar um contexto e vamos exportá-lo como contextos blockchain. Então, vamos colocar Export. Em seguida. Na verdade, vamos criar esse contexto. Estamos falando sobre a API de contexto. Vamos criar isso agora e vamos defini-lo como uma variável e exportá-lo. Assim, podemos colocar o contexto de exportação, const, blockchain igual a React dot create context. E é isso. Em seguida, criaremos nosso componente. Exportar. Em seguida, criaremos nosso componente de provedor. E se você não sabe como usar isso, basta fazer o Google. E é muito fácil. Você pode ler e ser pego em alguns minutos. E lembre-se que usaria a variação de ganchos, que é muito mais fácil na minha opinião. Vamos exportar, const blockchain provider é igual. E vamos destruir nossos filhos em vez de adereços. E isso parece bom. Então, o que vamos retornar aqui, a chave para isso tudo é retornar esse provedor de pontos de contexto blockchain. Então, vamos fazer contextos blockchain ponto e você verá que eles têm provedor de consumidores. Não precisamos de consumidores. Estamos usando ganchos, mas há muitas coisas que você poderia usar aqui. Vamos usar o provedor. E é obrigatório que você coloque um valor lá, o que não temos no momento. Então, vou deixar isso em branco. Na verdade, deixe-me colocar isso na próxima linha. Vamos retornar aqui o componente-chave neste provedor. Então, vamos retornar, ponto de contexto blockchain, e você vê que há um consumidor e um provedor. Se você ler sobre a API de contexto, você lerá sobre ambos estavam usando ganchos. Então, vamos usar o provedor. E nós vamos fornecer, na verdade, deixe-me fechar isso. Vamos fornecer aqui um valor que temos que fornecer. Mas ainda não temos nada . Vou deixar isso em branco. E então, entre elas, colocarão as crianças porque é isso que estamos passando . Então, salve isso. E então temos esse provedor aqui. Mas precisamos ir ao nosso JSX principal e envolver todo o aplicativo neste provedor. Então, vou primeiro importá-lo. Importar o provedor de blockchain contextos de barra de pontos reduzem o contexto de blockchain. E então vamos embrulhar essa coisa toda. Então, aqui em baixo, posso dizer provedor de blockchain e colocá-lo fora do chakra ou provedor de UI e de todo o aplicativo. E salve isso. Agora, esses valores que passamos, todos os valores que passarmos aqui estarão disponíveis para todos os componentes que trouxerem nesse contexto. Espero que isso faça sentido. Tudo bem, então vamos em seguida para os éteres, documentação JS. Éteres. Vamos apenas digitar éteres JS na pesquisa do Google e, em seguida, basta clicar em começar. Vamos seguir essas instruções. Então, como você instala? Já fizemos isso. Já o importamos. Não estamos usando tags de script, então continue. Então, aqui está a chave para todo esse pacote. Na minha opinião, são três coisas. Você tem que fornecer um signatário e um contrato. Então, o provedor agradece, somente leitura. Então, um provedor é uma classe que eu provedor em éteres. Não vamos confundir isso com o provedor Blockchain ou a Context API. Isso é separado. Um provedor em éteres é uma classe que fornece uma abstração para uma conexão com a rede Ethereum. Ele fornece acesso somente leitura à cadeia de blocos e seu status. Lembre-se de que quando você acha provedor pensa em acesso somente leitura ao blockchain. Agora, um signatário é uma classe que, de alguma forma direta ou indiretamente, tem acesso a uma chave privada. Lembre-se, colocamos sua chave privada uma chave privada que pode assinar mensagens e transações para autorizar a rede a cobrar sua conta ou executar operações. Então, quando você pensa em provedor, você pensa somente leitura, quando acha que o signatário pensa chave privada e assina mensagens, cria transações, faz alterações diretamente no blockchain. Então você precisará do signatário para isso. Você tem que o signatário somente leitura do provedor pode agir e fazer coisas. Então você tem o provedor que é somente leitura e o signatário que é capaz de transacionar e fazer transações. E então você tem esse contrato. E vamos falar sobre isso a seguir. Contratos e abstração, que representa uma conexão com um contrato específico na rede Ethereum. Contrato inteligente que implantamos para que os aplicativos possam usá-lo como um objeto JavaScript normal. Então, vamos criar esse objeto de contrato e vamos chamar todas as nossas funções a partir dele. Portanto, a primeira tarefa aqui é conectar nossa carteira ao nosso aplicativo e fazemos isso por meio do MetaMask. Portanto, não se esqueça de baixar o MetaMask se você não o tiver, basta ir para o MetaMask. Não sei por que é ponto Zendesk. Se você não tiver baixado e configurá-lo, há um milhão de artigos sobre como fazer isso. Mas suponho que, desde que você está fazendo esse curso, você já tem o MetaMask, mas apenas o Google MetaMask e vá para Download e é um navegador. Portanto, certifique-se de ter o MetaMask baixado e configurado. Aqui está uma amostra de éteres de como falar. Então, aqui está os éteres assumem a interação com o MetaMask. Então lembre-se que há um provedor, há um signatário. O provedor é a conexão com a rede Ethereum. Então, o provedor realmente será MetaMask. E então o signatário segura sua chave privada e consigna coisas. Lembre-se de que inserimos nossa chave privada quando a implantamos. E lembre-se que nossa chave privada está nesse arquivo ENV. E usamos isso quando implantamos o contrato e, em seguida, nossas carteiras combinarão com essa chave privada. Você usará a mesma conta que você usa para seu contrato. Tudo bem, então vamos dar uma olhada nisso. Vamos em frente e copiá-lo porque vamos usá-lo. Certo? Então, olhando aqui, os comentários são realmente úteis. Essa documentação é muito boa, na minha opinião. Mas primeiro você tem esse provedor e eles passaram por fornecer um wraps, um provedor padrão de três web, que é o que MetaMask injeta Como janela ponto um teorema em cada página. Então, nesta página do navegador, MetaMask injeta algo chamado janela ponto um teorema em cada página. Então, quando configuramos esse provedor, usamos, instanciamos um novo provedor de três web, que é fornecido por éteres. Então, fazemos um novo éteres adotar provedores de largura de ponto três provedor e passamos basicamente o teorema de dados da janela MetaMask é o objeto MetaMask. Então, isso vai ser um provedor. Dizemos isso sob a variável provedor. Então, podemos realmente usar o provedor para enviar isso. E, em seguida, podemos usar o método de envio para solicitar permissão para conectar contas de usuário. Então, finalmente, podemos pegar esse provedor e ligar, colocar o signatário nele e salvá-lo como nosso Signatário. Na verdade, vamos copiar isso e colá-lo em nossos aplicativos. Então copie isso. E aqui no topo, basta colá-lo. E vou remover todos esses comentários. Uma coisa que vou fazer é eliminar esses provedores aguardam. E vamos adicionar isso em uma função real porque só queremos que isso aconteça quando clicarmos nos botões Conectar carteira. Então, tire isso. Temos um provedor, temos nosso signatário. Agora precisamos do contrato. Agora é aqui que vai fazer todo o sentido para você. Portanto, se você continuar indo para contratos, ele diz que o objeto de contrato facilita o uso um contrato onchange como objetos JavaScript normais com o tapete, com os métodos mapeados para codificação e decodificação de dados para você. Isso é ótimo. Este objeto de contrato faz com que seja justo, esse objeto de contrato faz com que possamos tratar todas essas funções de contrato inteligente é apenas objetos JavaScript. Então, se você continuar rolando, eles lhe dão o melhor exemplo aqui. Então copie essa coisa toda e cole-a em seu aplicativo. Então eu vou descer aqui, copiar isso, e vamos trabalhar com este um por um e isso fará sentido para você. Então, em vez do endereço dy, nós não estamos lidando com di nós só estamos lidando com B & B. Então, basta mudar isso para endereço e nós apenas colocamos, o que você acha? Bem, se você subir, lembre-se que estamos importando a ABI e o endereço do contrato. Portanto, nosso endereço pode ser vestido contratado. Agora morra ABI, onde novamente não estamos usando die, então mude isso para ABI. E o que você acha que isso poderia ser? Bem, ABI. Mas o problema é que nós meio que confundimos o JavaScript. Abi está acinzentado, o que significa que não vai funcionar. Então, vamos mudar isso para contratar a ABI. Contrato ABI. Então vamos colocar aqui contrato ABI. Então, temos nosso endereço definido. Temos a ABI. Novamente, esse é um bom comentário. O contrato ERC-20 ABI, que é uma interface de contrato comum para não colocar isso. Então, vamos nos livrar desse comentário. E, finalmente, temos o objeto real. Novamente, mude isso para contrato. Em seguida, instancia um novo contrato. Então, em vez de endereço dy colocará endereço, em vez de dy ABI, colocar contrato ABI. E então passamos em nosso provedor. Mas, na verdade, vou passar meu Signer porque vou fazer muitas transações. Incrível. Então, salve isso. Temos todas as nossas informações aqui para falar com ela. Contrato inteligente. Agora vamos executar o aplicativo air. Então, fio, execute dev. E vamos fazer localhost 3 mil. E aqui está nosso aplicativo. Então, vamos fazer yarn run dev para executar nosso servidor e abrir localhost 3 mil. E temos alguns erros, bom. Tudo bem, então vamos fazer yarn, executar dev to startup ou um servidor. Isso vai ser no anfitrião local, 3 mil. Então, vamos abrir isso. Oops, a atualização aberta saudita. E temos um erro ou o módulo solicitado não fornece um contrato de exportação nomeado ABI. Então, algo está errado com isso. Vocês provavelmente chamam isso, mas está importando ABI porque em nossa configuração JSON, está sob a chave da ABI, então temos que manter isso. Então, vamos fazer isso. Vamos mudar o IVA, a variável para contratar ABI e deixar o que estamos importando como ABI. E então nós mudamos aqui. Agora, o problema é que estamos importando o contrato ABI, o que está errado porque em seu Config JSON, é uma chave da ABI. Então, temos que importar ABI. E então chamaremos esse contrato constante ABI igual a ABI, que é o que estamos importando. E então aqui em baixo nós acertamos, então tivemos todos os tipos de erros lá. Você provavelmente pegou. Mas certifique-se de fazer essas alterações. Importe ABI, salve-a como uma variável chamada ABI de contrato e, em seguida, passe isso para o seu contrato. Vamos salvá-lo e ver se isso o corrige . Sim, lá vamos nós. Então, agora o que queremos fazer é quando clicamos nesta carteira de conexão, queremos que ela abra o MetaMask e solicite sua permissão para conectar a carteira à nossa conta. Solicita permissão para se conectar a uma das contas. Então, vamos criar uma função para isso, certo, sob isso, vou dizer const, connect wallet igual vai ser assíncrono. Vamos fazer uma declaração de try-catch. Try-catch. Aqui, vamos dizer se o teorema dos dados da janela, então, se isso, esse objeto MetaMask não existir, então vamos apenas retornar um alerta e um alerta. Instale o MetaMask. Em seguida, faremos contas const. Queremos obter as contas do MetaMask, então aguarde o envio do ponto do provedor. Lembre-se em éteres JS, se eu ainda tiver isso. Esse foi o nosso exemplo, um ponto do provedor de peso pecou. E o que queremos é yf solicitar contas. Isso é o que estamos chamando-os apenas por chutes. Vamos consolar contas de log de pontos. E o primeiro, porque essa será a que estamos usando atualmente, a conta corrente. E vamos deixá-lo lá e ver que estamos consolando isso ou estamos registrando isso corretamente. E então aqui embaixo na captura, faremos o erro console.log. E, na verdade, vou fazer um lançamento aqui novo erro. E vamos apenas dizer que não, um objeto teorema. E não consigo soletrar a palavra lançar. Lá vamos nós. Então, queremos chamar isso quando o botão conectar Wallet for pressionado. Então, como trabalhamos com esse provedor é que pegamos esse nome de função, chegamos aqui e passamos isso como valor, conecte a carteira. E então, onde está o botão que? Bem, o botão se formos e componentes, o botão é uma barra de navegação. Então, no topo do navbar, vamos importar o provedor. Portanto, importe contextos de blockchain de contextos blockchain de barra de contexto . Portanto, certifique-se de importá-lo. Então, porque estamos usando ganchos. Podemos vir aqui e digitar const. E que função estamos fornecendo e o provedor conectará carteira igual ao contexto de uso, contexto blockchain. Agora você pode criar vários contextos em seu aplicativo. Você pode ter como um contexto de usuário em um contexto de transação e coisas assim. Então, tudo o que estamos fazendo aqui para isso. Componente é que estamos apenas disponibilizando esse contexto blockchain. E estamos trazendo a carteira Connect. E então, aqui em baixo, onde temos nosso botão que diz Carteira Connect, vamos adicionar um onclick. Onclick é igual à carteira de conexão para chamar essa função. E é assim que é fácil. Então, vamos salvá-lo e verificar se funciona. Abra o aplicativo e há um erro. Portanto, o erro é usado, contexto não está definido. Então, temos que vir aqui. E onde não estamos sequer. E basta fazer uma importação. Use o contexto do React em, lembre-se de quando você tem um arquivo JSX agora no React, lembre-se de quando tiver, então certifique-se de importar isso. Vamos salvá-lo e tentar novamente. E assim, quando clicamos neste botão conectar à Wallet, ele deve abrir o MetaMask assim. E eu quero conectar minha conta de teste BSC. Então, vou clicar em Avançar. Agora, se eu selecionei vários, ele colocará todos os quatro nisso. É por isso que estamos escolhendo o primeiro. Mas eu só vou clicar em um porque isso é tudo o que eu realmente faço. Acerte Próximo. Então, se eu clicar em Connect wallet, ele exibirá o MetaMask como deveria. E vou selecionar a conta que quero conectar. Agora. Eu poderia coletar conexão. Agora ele pode conectar vários. E é por isso que temos as contas 0, porque é uma série de contas na primeira será sua conta corrente. Mas vou selecionar um e clicar em Avançar e conectar. E ele conectará minha carteira MetaMask ao meu aplicativo. Ótimo, então estamos conectados. Se abrirmos o MetaMask, vemos que essa pequena luz conectada é verde. Mas o problema é que não o conhecemos em nosso aplicativo. Ele só diz enquanto ainda está. Então, vou desconectar e vamos consertar isso. Então, desconecte essa conta e, em seguida, vamos voltar e fazer algo melhor com ela. Então, de volta ao contexto blockchain. Vamos criar algum estado para armazenar essa conta corrente. Então, vou chegar ao topo e fazer conta corrente const. Conjunto. Conta atual é igual ao estado de uso. E isso é apenas React Hooks. Eles usam o estado. E tudo o que está dizendo é a conta corrente será a variável que mantém meu estado definido. Conta corrente é o que eu uso para definir esse estado aqui em baixo, onde eu consolei a conta. Também vou salvar isso no estado da conta atual. E você faz isso dizendo definir conta corrente, contas 0. Então isso vai salvá-lo em, então isso vai salvá-lo lá. Então, isso vai salvá-lo como conta corrente. Mas isso realmente não nos ajuda porque precisamos passar essa conta corrente pelo provedor aéreo. Então, venha aqui e coloque uma vírgula e coloque conta corrente para que possamos passá-la ao nosso provedor e depois voltar para a barra de navegação. E também queremos trazer isso na conta corrente, disponibilizá-lo para o nosso componente. Então, aqui em baixo, podemos fazer alguma lógica. Então, diremos que se não houver conta corrente, anote o ponto de exclamação e, em seguida, vamos apenas dizer connect wallet. Isso significa que nada está conectado porque não há uma conta corrente que ainda não tenha sido definida. Então, senão, vamos exibir o endereço da nossa carteira, mas vamos cortá-lo para que seja como os primeiros cinco caracteres, ponto, ponto, ponto e depois os últimos quatro caracteres. A maioria dos aplicativos faz isso. Então, vamos fazer isso também. E podemos dizer que vamos usar um modelo literal. Assim como os dois backticks, chaves encaracoladas de cifrão. E vamos colocar a fatia de pontos da conta corrente. Em seguida, 0 a cinco, então os primeiros cinco caracteres. E então vamos colocar ponto, ponto, ponto. E é por isso que usamos esses modelos literais porque podemos misturar variáveis com valores de string como ponto, ponto, ponto. E logo depois disso, faremos o cifrão. Chaves curly no tipo conta corrente, no tipo conta corrente, fatia de pontos. E desta vez vamos até o fim e contaremos todos os personagens e depois pegaremos os últimos quatro. Assim, podemos fazer isso dizendo o comprimento dos pontos da conta corrente. Isso obterá o comprimento disso enquanto estiver no endereço menos quatro. E é isso que vamos cortar. Então, vamos salvar isso e experimentá-lo. Atualizar. E agora vamos conectar a carteira. Certifique-se de se desconectar para poder se conectar novamente. Escolha sua conta, clique em Avançar. E quando eu clicar em Connect, ele deve dizer armazene isso no estado e, em seguida, atualize meu componente para mostrar o endereço da minha carteira. Então clique em Conectar. Olhe isso já. Há o endereço da minha carteira, 0 x seis a 73 pontos, ponto B F6. Mas ainda temos um problema. Se eu atualizar, ele vai desaparecer. Agora diz carteira Connect, mesmo que eu ainda esteja conectado. Vamos desconectar e corrigir isso. Para corrigir isso, precisaremos de outra função no contexto blockchain para verificar se a conexão sem fio está conectada. Então, veja como nos conectamos. Mas quando o aplicativo carrega pela primeira vez, precisamos verificar se ele está conectado ou não. Se for, precisamos armazenar o estado. Vamos criar outra função. E, na verdade, vou apenas copiar isso. E vamos chamar isso. Verifique se a carteira está conectada. E ainda faremos isso. Verificaremos se o objeto MetaMask está lá. Faremos contas. Mas neste momento, em vez de contas de solicitação de sublinhado, na verdade, vamos apenas fazer contas sublinhadas. Então, isso solicitará as contas, não permissão para usar as contas, mas apenas as contas em geral. Então, se houver algo conectado, ele vai aparecer aqui. E então faremos algo aqui como se o comprimento do ponto das contas for verdadeiro. Portanto, se houver vinculado nas contas, definiremos contas de conta corrente 0. Else console.log. Não, nenhuma conta encontrada. E se livrar desses dois. Desta vez não vou lançar um erro. Mas, novamente, tudo o que estamos fazendo é obter as contas conectadas. E então, se houver algum, definirá o estado. Se não, vamos apenas consolá-lo. Então, saberemos. Portanto, este não queremos passar para o provedor porque não precisamos dele em nenhum outro lugar. Na verdade, precisamos disso quando a página é carregada pela primeira vez. Então eu vou vir aqui e adicionar um efeito de usuário Hooke. E usar ganchos de efeito permitem que você execute. E usar ganchos de efeito permitem que você execute funções uma vez que algo carrega ou uma vez que algo mude. Então, no final disso, você pode fazer vírgula, seja lá o que for. Como se você estiver assistindo a uma variável sempre que essa variável mudar, essa coisa será executada novamente. Mas vamos colocar colchetes vazios aqui estão vazios. Colchetes vazios aqui, o que significa que ele será executado quando o componente for carregado pela primeira vez, terminar de carregar. Na verdade, vamos fazer esse checkup enquanto isso estiver conectado lá. Isso será executado quando a página for carregada pela primeira vez. Novamente, quando a página for carregada pela primeira vez, ela verificará se uma carteira está conectada. Em caso afirmativo, ele definirá o estado. Então, vamos salvar isso e experimentá-lo novamente. E, a propósito, toda vez que você carrega, a propósito, toda vez que você economiza. A propósito, toda vez que salvo, ele só lança esses erros malucos. Vou te mostrar como consertar isso em um minuto. Mas vamos apenas atualizar e testar isso. Então clique em Conectar carteira. Vou conectá-lo novamente, conectar e ele define meu endereço. E agora, se eu atualizar, ele permanece. É bom ir. Se eu for para a próxima página, ela ainda está lá. Eu vou para a primeira página ainda está lá. Então isso cuidou disso. Agora, assim como eu estava dizendo, se eu salvar isso de novo, e voltar, minha página está completamente destruída. E para ser honesto, não sei o que está acontecendo. Por algum motivo, o vite JS está fazendo um carregamento de página, está fazendo uma recarga de página em vez da recarga a quente. Não sei se é um inseto ou talvez algo que eu negligenciei. Mas outras pessoas estão reclamando online. Acho que isso é uma coisa nova. E se eu soubesse disso, teria usado o aplicativo Create React, mas na verdade é uma solução muito fácil. Esse cara acabou de listá-lo aqui. E o que precisamos fazer é ir para nossa configuração vite e apenas adicionar essa configuração de servidor. Então, se você for, se o seu não está fazendo isso, não se preocupe com isso. Mas se for ir para vite, config js e apenas adicione isso, coloque uma vírgula depois disso, e faça o servidor h EMR true, que é a recarga do módulo quente, que é o que deveria acontecer de qualquer forma eu pensava. E depois assista. Use sondagem. Verdade? E é isso. Agora salve-o. E provavelmente quero reiniciar meu servidor só porque é uma configuração. Muitas vezes precisamos que eu vou reiniciá-lo e isso deve cuidar do problema. Então, deixe-me atualizar agora deixe-me salvar e ver se ele lança esse erro. Vou vir aqui e clicar em Salvar algumas vezes. E ainda há um erro. O que está acontecendo? Servidor ASMR true, Assista, use sondagem, true. Tudo bem, o servidor foi reiniciado. Então deixe-me salvá-lo. Está tudo bem. Salve novamente. Salve aqui. Salve aqui novamente. Na verdade, parece que está acontecendo no meu arquivo do provedor. Então, se eu vier aqui para o JSX principal e clicar em Salvar, então está tudo bem. Mas se eu for ao meu provedor e fizer isso, salve-o, isso estraga tudo. Bem, vou tentar descobrir a resposta para isso no futuro. Eu. Voltaremos e lhe diremos como corrigi-lo. Mas isso realmente não importa. Somente em desenvolvimento, como se você vier aqui e clicar, isso nunca acontece. Isso só acontece com esta recarga de módulo quente branco. Então eu vou descobrir isso e vou postá-lo aqui daqui a pouco. Tudo bem, então a última coisa que queremos fazer neste vídeo é que queremos tentar falar com nosso contrato para garantir que estabelecemos isso. E assim que tivermos no próximo vídeo, vamos avançar a toda velocidade e configurar tudo. Então, vamos voltar aos nossos contextos blockchain. E vamos criar uma função que obtenha o saldo de seu contrato inteligente. Então, se você se lembra, temos em nossa pasta de contratos e nosso contrato, lembre-se de que temos uma função chamada saldo que retorna o saldo dos contratos. Vamos tentar chamar isso e ver se ele funciona. Então eu vou para o meu contexto blockchain e apenas fazer const, obter equilíbrio igual, igual a um coletor. E vamos fazer uma try-catch. Erro no log de pontos do console. Aqui em cima, em tentativa, vamos dizer equilíbrio const. E lembre-se que temos esse objeto de contrato que nos permite conversar com nosso contrato inteligente. Vamos dizer contrato. Vamos fazer uma espera porque temos uma função assíncrona. E, em seguida, contrate pontos o saldo de pontos porque esse é o nome da função de contrato inteligente. Então, logo depois disso, vamos salvar isso em nosso estado. Então. Na verdade, vamos apenas consolá-lo para Ashley. Vamos fazer login no console. Então, console.log equilibra e veja se isso aparece. Volte para o projeto e recarregue a página, e ela deve estar aparecendo em nosso console. Leva um minuto para chamá-lo de realmente não, isso não vai funcionar. Então logo depois disso vamos definir o estado, vamos colocá-lo no estado. Então podemos colocar isso no console para ver se ele funciona. Vamos subir aqui e criar uma nova variável de estado, constante, equilíbrio, equilíbrio SET. E você vê o padrão aqui. Há a palavra e, em seguida, definir a palavra é igual ao estado de uso. E então, aqui em baixo, vamos definir o equilíbrio em equilíbrio. Então vou saldo console.log. E isso não está sendo usado em nenhum lugar, então não será chamado. Não há nada disso vai funcionar. Mas só para testá-lo, vamos descer aqui e chamar ficar equilibrado. Quando a página é carregada. Vamos salvá-lo e atualizar nossa página. E olhe para isso. Recebemos devolvidos o que é chamado de grande número. Um grande número é a quantidade de erro ou a quantidade de ar com 18 zeros nele. É por isso que se chama um grande número. C aqui em 0 x 00 é grande número verdadeiro. Então, o grande número é ótimo. É ótimo fazer o trabalho no contrato, mas não é legível. Como se não quiséssemos olhar e ser como se eu tivesse 1 trilhão algo de éter. Queremos dizer que tenho 0,001 ou 0,01, B&B ou o que quer que seja. Portanto, há uma função auxiliar. Se você for para éteres, JS e digitar utilitários e digitar utilitários. E isso não foi útil. Digite éteres, dot js utils e clique em utilitários. E então você deve ver e, em seguida, digitar um grande número. Aí está. E você deveria ver aqui embaixo, eu acho que se chama éter parse. Sim, aqui vamos nós. Então, existem essas conversões. Utilitários de ponto éter, unidades de formato de ponto, unidades análise de éter em formato éteres. E tudo isso faz é apenas converter esse valor para nós, como o que vamos usar é o formato éter. E isso simplesmente não é uma boa página. Deixe-me, deixe-me copiar e colar isso. Éteres ponto js. Aqui vamos nós. Cordas de éter e pesa. O que vamos usar é chamado de éter de formato. E é quando você tem jeito e quer mostrá-lo como éter regular ou B & B regular ou o que quer que esteja acostumado a ver como a quantidade legível por humanos. Então, formatou a quantidade de caminho em uma string decimal representando a quantidade de éter. Isso é o que vamos usar. Para fazer isso, vamos digitar. Então, para fazer isso, precisamos estabelecer o equilíbrio. Então, para fazer isso, precisamos colocar em vez de equilíbrio, precisamos colocar éteres, ponto util, utils dot format éter. E então passamos na balança. E isso vai defini-lo para este formato legível em éter ou B & B, não da forma como formatação 180. Então, vamos salvá-lo e agora ele deve estar mostrando 0. Vamos atualizar a página. Ainda diz grande número. Vamos salvá-lo novamente. Eu não sei, talvez meu estado Ainda esteja mostrando grande número e isso é provavelmente porque estou chamando equilíbrio, que é isso. Oh, sim, é que ainda está mostrando grande número. Acho que meu problema é que eu nomeei esse saldo e então também defini, meu estado está equilibrado, o que estou usando aqui. Então, provavelmente está usando esse número original. Vamos mudar isso para um balanço de saldo de apenas colocar. E agora temos certeza de que esta é nossa variável de estado aqui e não essa. Então isso é meu mal. Então, vamos chamar o saldo variável de formato que e, em seguida, pegar as variáveis de estado. Então, salve-o e agora deve ser bom. Então atualize a página. Na parte tentativa disso, vamos dizer const, equilíbrio de iguais. E vamos usar nosso objeto de contrato. Lembre-se que é assim que vamos chamar todas essas funções de contrato inteligente farão o saldo de pontos do contrato, porque você se lembra que se você voltar ao nosso contrato, temos uma função chamada balance of poderíamos chamar a duração total ou definir fazer e vamos fazer tudo isso. Mas, por enquanto, vamos testar este. Então, vamos chamá-lo. Então, diremos saldo de pontos de contrato de. Então logo abaixo disso, vamos definir outra variável de estado para manter esse valor. Vamos voltar aqui e digitar, logo abaixo deste put const, balance, SET balance é igual ao estado de uso. Agora você vê o padrão aqui. primeira é a variável e a segunda começa com set, porque essa é a variável que você usa. Isso é o que você usa para definir essa primeira variável. Então, podemos salvar isso agora em nosso estado. Então, logo abaixo disso, diremos saldo SET. Equilíbrio neste bloco try, vamos conseguir o saldo. Então, vamos fazer uma const, saldo de contrato é igual e vamos usar nosso objeto de contrato porque é assim que falamos com essas funções em nosso contrato inteligente. Agora vamos usar esse objeto de contrato que criamos aqui porque é assim que vamos interagir com o contrato inteligente deles. Então, diremos ponto de contrato. E se você se lembrar, se você voltar para os contratos, você se lembra que temos uma função chamada saldo que retorna o saldo do contrato. Também definimos fazer e obter a duração total. Vamos usar todos esses. Mas, por enquanto, vamos usar esse equilíbrio de. Então, faremos o saldo de pontos do contrato de. E então aqui vamos salvar esse valor em nosso estado. Então, vamos voltar e definir uma nova variável de estado. Então, const, vamos chamá-lo de saldo e, em seguida, saldo SET. Você vê o padrão aqui. Há a variável state e, em seguida, você a define com a segunda, é igual ao estado de uso. Então, de volta aqui, diremos SALDO SET para o saldo do contrato. E vamos salvar isso. Atire. Neste bloco de tentativa, o que vamos fazer é obter o saldo. Então, diremos const. Vamos chamá-lo de saldo de contrato igual à espera porque esta é uma função assíncrona. E então lembre-se aqui que temos esse objeto de contrato. Isso é o que vamos usar para interagir com o contrato deles. Então, vamos fazer ponto de contrato em qual função queremos chamar? Bem, se voltarmos aos nossos contratos, queremos chama 7. Como criar o formulário Adicionar locatário: Agora vamos começar a usar nosso painel aqui, onde podemos começar a preenchê-los dinamicamente. Atualmente, apenas temos valores estáticos, mas precisamos ser capazes de preenchê-los. Precisamos ser capazes de fazer um pagamento e creditar nossa conta. E a propósito, aqui em cima temos crédito e, em seguida, o pagamento aqui, é para trás. Vamos trocar isso rapidamente. Se formos para os totais atuais na parte inferior, basta trocar esses dois componentes, adicionar o formulário equilibrado antes de pagar por eles. Isso consertará isso. Mas antes de fazermos tudo isso, precisamos criar um formulário como este, do jeito que este painel está atualmente, pressupõe que o locatário já se adicionou como locatário, mas ainda não o fizemos . Isso novamente é apenas texto estático. Então, precisamos colocar um formulário aqui para exibir se o aluguel ou não se adicionou como locatário. E se eles já tiverem, mostraremos o painel e seus valores atuais. Se tentarmos entrar em crédito ao locatário e verificar seus minutos de viagem e tudo isso, não funcionará porque lembre-se de que temos essa função em nosso contrato aqui que diz Adicionar locatário. Precisamos adicionar locatário ao nosso mapeamento de locatários aqui. Então é isso que eles precisam fazer. Essencialmente, eles precisam preencher o formulário para se adicionar como locatário, o que permite que eles verifiquem uma bicicleta. Logo antes de fazermos isso, temos uma coisa a abordar. Então, no vídeo anterior, você, uma coisa que você deve ter notado é sempre que eu estava trabalhando no arquivo de contexto blockchain dele e eu fiz uma mudança ou o que quer que eu estivesse fazendo. E eu fui clicar em Command S para salvá-lo, ele realmente travou minha página. Então deixe-me apertar o Comando S, volte e você verá minhas páginas travarem. Se eu abrir o console, você verá um monte de erros relacionados ao gancho de contextos usados. Agora, a razão para isso é porque no contexto de blockchain de ar no topo onde criamos os contextos, deixamos o argumento nulo ou parâmetro. Não, devemos colocar algo aqui e vamos colocar uma corda vazia. E vou salvar isso. E agora vamos testá-lo novamente. Então, deixe-me atualizar isso. E vou vir aqui e salvá-lo algumas vezes. E você deve ver que minha página está boa. Então isso é um erro da minha parte. Vá para o contexto de criação de ponto React e certifique-se de colocar um valor. Nesse caso, vamos colocar uma string vazia. Tudo bem? Então, vamos criar um novo formulário. Vamos chamá-lo de aluguel ou formar ponto JSX. E novamente, vamos assumir uma dessas outras formas. Vamos tentar o anúncio para um formulário equilibrado. E vamos apenas copiar e colar isso. E então iremos até o nome da função e chamaremos de aluguel ou formulário. Tudo bem, e então nós rolamos para baixo, você vê esse crédito em sua conta. Queremos mudar isso para algo diferente e eu realmente vou subir aqui acima do flex. E vou colocar um campo de texto. E no TextField vou colocar como atributos, a família da fonte é igual a título. tamanho da fonte é igual a 600 ou, na verdade, x grande. E então o peso da fonte é igual a 600. Tudo bem, e certifique-se de colocar a etiqueta de fechamento. E então, dentro disso, vamos colocar alguns textos. Vamos dizer bem-vindo. E então vou colocar uma quebra de linha. E insira seu nome e sobrenome para se registrar. Você pode ser como, este não é um aplicativo descentralizado? Por que queremos o sobrenome ou mesmo o nome de alguém? Mas é apenas um conceito que criei quando fiz o aplicativo. Se você quiser alterá-lo, sinta-se à vontade para alterá-lo. E você verá que temos esse erro porque nós, porque não podemos ter várias tags e um retorno, resolvemos isso fazendo isso abrir e fechar tags vazias. Então coloque isso na parte superior e um fechamento na parte inferior em todos também. Então, temos nossos textos aqui. Temos um flex e , em seguida, temos nossa forma. No formulário, na verdade, queremos apenas o FirstName e o LastName porque can rent lembre-se será definido como verdadeiro porque eles estão apenas criando sua conta. Claro, eles podem alugar. Ativo será definido como falso porque eles ainda não têm uma bicicleta. Em seguida, a hora de início, hora de término, o saldo e o valor devido serão 0. Então, isso será definido no back-end, ou fora do fórum ou fora da capacidade dos usuários de alterar isso. Então, só precisamos de um nome e sobrenome. Então, já temos uma entrada. Então eu formei o controle. Vamos fazer isso. Vamos realmente fazer um rótulo aqui. Portanto, o rótulo do formulário em HTML quatro é igual a FirstName. E vamos colocar o FirstName aqui. Este é apenas um rótulo. E então temos nossa entrada, nossa mensagem de erro. E então vamos copiar e colar outro desses. Portanto, outra mensagem de erro e entrada de rótulo de formulário. Então, logo abaixo da mensagem de erro, cole outro. E vamos configurar esses dois. Então HTML para FirstName. Então, vamos novamente colocar FirstName, retirar esse número de tipo na etapa qualquer porque queremos caracteres. Espaço reservado, FirstName. E então em todos os lugares há um saldo de crédito, basta fazer o FirstName. E então, no segundo, queremos o sobrenome aqui, altere isso para LastName, LastName, retire o número na etapa. espaço reservado será o LastName. Registrar é o LastName. E lembre-se que eu te disse que esse registro, e eu vou fazer isso não aquele caso de camelo. Quero fazer tudo minúsculo para combinar com os outros. Mas lembre-se que eu te falei sobre esse registro. Na verdade, ele registra a entrada que você está colocando nos campos e a coloca nesse objeto que é enviado para onde quer que você esteja enviando o formulário, é bem legal. Isso é tudo o que eu tenho que fazer. Então, LastName, altere esses dois para LastName. E então, aqui em cima, onde diz controle de formulário, há um cheque de inválido. Quero verificar se há erros. Nome e gritos, e erros sobrenome. Então aqui temos uma mensagem de erro. Então, se houver um erro neste ou neste, e realmente o definimos para, e então ambos precisam ser livres de erros para serem aprovados. Então você não pode colocar um campo. Então você não pode colocar valores em um e não no outro. E para este, queremos um comprimento mínimo. Então, vamos fazer o comprimento dos homens valor quatro. E a mensagem vai ter o comprimento mínimo deve ser quatro. Vamos colocar isso no próximo. Vamos salvá-lo. E aqui em cima, onde diz creditar sua conta, tire todo esse texto porque os textos deles estarão acima dele. Em seguida, no ar emenvie. Vamos registrar os valores do console. Então, vamos, acho que estamos bem. Na verdade, vamos ver o que isso parece. Portanto, não colocamos nenhuma condição aqui se eu atualizar e, na verdade, nem sequer a adicionamos à página. Então, isso realmente vai para os totais atuais, eu acho. Não, ele vai para o painel. Então, aqui, onde diz os totais atuais. Vamos apenas comentar isso por enquanto. Só para ver o que isso parece. Vamos puxar um formulário de locatário e garantir que você o importe, salve isso e vamos dar uma olhada no que isso se parece. Sim, então aqui está FirstName, LastName. Então, vou adicionar um pouco de espaço abaixo do primeiro para fazer com que pareça um pouco melhor. Então, se eu for ao painel, na verdade ele vai ser aluguel ou formulário. Então, neste segundo rótulo de formulário, vou fazer margem superior igual a quatro. Vamos fazer três. Veja o que isso se parece. Três não são suficientes. Vamos tentar cinco. Tudo bem, então bem-vindo, por favor, coma éter. Eu coloquei éter. Por favor, insira seu nome e sobrenome para se registrar. Então, vamos tentar Travis e depois testar. E se eu pressionar Enviar, ele deve fazer login no console. Aí está, FirstName Travis, sobrenome, teste. É tão fácil com o formulário de gancho React. Incrível. Então, agora precisamos de uma maneira de saber se um locatário existe ou não. E se você se lembrar, em nosso contrato, se formos para a alma do ponto da corrente de bicicleta, criamos que este locatário existe em tudo o que faz é retornar verdadeiro se houver um endereço de carteira para aquele locatário e falso se não, vamos usar isso para determinar e isso nos ajudará a virar entre o formulário aéreo em nosso painel. Tão bons contextos de blockchain. E exatamente de onde paramos neste Fique equilibrado. E, na verdade, você não precisa chamar o get balance porque ninguém realmente precisa obter o saldo do contrato, exceto o proprietário. Portanto, não queremos essa cor, mas você pode deixá-la aqui em Obter balanceamento, vamos criar uma nova função chamada get renter existe. Então, vamos verificar e ver se o locatário existe. Uma pia. E vamos fazer uma tentativa de pegar. E o problema, vamos apenas consolá-lo. Então, aqui em cima, vamos fazer duas coisas. Vamos verificar se eles existem. E se eles existirem, vamos obter as informações deles. Então lembre-se em nosso contrato aqui, temos uma função chamada locatário existe. E o que isso faz é que ele retorna verdadeiro se eles tiverem um endereço de carteira e nosso mapeamento. Então, ele retorna verdadeiro se eles existirem em false, se não o fizerem. Se isso retornar verdadeiro, então iremos em frente e chamaremos essa função get renter para que possamos obter as informações dos locatários armazenadas em nosso estado e fazer tudo o que precisamos com ela. Então, na verdade, teremos duas funções aqui. Começaremos com a obtenção de locatário existe. E, na verdade, não sei por que o nomeei que o locatário de verificação existe faz mais sentido. Então, aqui vamos dizer que o locatário const é igual a aguardar ponto do contrato, e chamamos que o locatário de função existe. Veja aqui o contrato inteligente. locatário de ponto de contrato existe. E precisamos passar o endereço da carteira aérea. E se você se lembrar aqui, estamos salvando isso no estado em uma variável chamada conta corrente. Então, copie isso, venha aqui e passe isso. E então queremos definir esse estado. Então, queremos definir o estado, quer eles existam ou não. Gosto de manter as coisas no estado caso eu precise disso. Acho que em outras páginas precisaremos saber se isso é verdadeiro ou falso. Então, vamos criar uma variável de estado. Portanto, existe o locatário, locatário definido existe igual ao estado dos EUA. E vamos colocar aqui definido locatário existe. locatário passará isso. Incrível. E como eu disse, se eles existirem, queremos ir em frente e obter suas informações. Então, logo abaixo disso, vou dizer que se locatário, então se o locatário existir, se isso for verdade, então vamos chamar uma função chamada get renter. E vamos colocar um peso sobre ele. Então, logo abaixo disso, vou colocar const, conseguir locatário. Vamos criar essa função é igual a uma pia, gritos, é igual a uma seta de pia. Então faremos esse try-catch, mas vou copiar isso para economizar tempo. E ponto contratado. Agora, o que a função deles é chamada para isso? Chama-se obter locatário e passamos um endereço de carteira. Então, aqui, pegue o locatário, passamos um endereço de carteira e, em seguida, vamos definir o estado. Vamos salvar os valores do locatário no estado deles. Então, vamos subir aqui e criar um novo. Const, locatário, locatário definido é igual ao estado U. E aqui em baixo, vamos colocar locatário, locatário para salvá-lo em nosso estado. Então podemos remover isso. Então, agora, quando esse componente carrega, esse contexto é carregado queríamos chamar o locatário de verificação existe porque queremos saber isso antecipadamente. Então, precisamos pegar isso e incluí-lo em nosso efeito de usuário. Então, é chamado quando isso carrega. E então essa renderização de verificação existe, salva, salva que verdadeiro ou falso na variável de estado do locatário existe. Para que possamos vir aqui e passar para o nosso provedor, o locatário existe. Então isso nos dirá verdadeiro ou falso. E então vamos salvar isso e voltaremos para obter as informações do locatário. Mas só queremos saber agora verdadeiro ou falso se eles existem. Vamos enviar isso para o nosso provedor. E então, em nosso painel, será possível testar se devemos mostrar o formulário ou o painel. Então, aqui em cima, vamos dizer const, locatário existe igual a contextos de uso, contexto blockchain, e certifique-se de trazer isso. Você importa contextos de uso do React e também importa os contextos blockchain também. Agora podemos vir aqui e dizer, então precisamos verificar algumas coisas aqui. Queremos verificar se o locatário existe. Queremos exibir um spinner. contrário, se o locatário existir é verdadeiro. Queremos exibir o painel. Caso contrário, exiba o formulário deles. Então, se definirmos que o valor padrão do locatário existe se definirmos isso como falso ou algo assim, isso não seria bom porque isso nos diria sempre para mostrar o formulário porque aluguel deles ou não existem. Então mostre o formulário. Mas nós realmente queremos que ele gire antes de definir qualquer coisa. Então, queremos girar antes que ele determine, Ei, é falso ou ei, é verdade. Então, podemos realmente fazer isso com o operador ternário. E muitas pessoas não gostam disso. Não me importo porque vejo muito e estou acostumado com isso. Mas podemos fazer como um if else, else com ternário ou se else-if else. E podemos fazer isso assim. Portanto, existe um locatário é igual a nulo. Em seguida, ShowSpinner. Eu só vou colocar isso entre aspas por enquanto. contrário, se o locatário existir for verdadeiro, então mostre os totais atuais. Caso contrário, mostre o aluguel ou o formulário. Então eu sei que isso pode parecer meio estranho para você. Se o locatário existir igual a nulo, então mostre o spinner. E geralmente é como outra coisa. Mas você pode dizer senão se o locatário existe é verdadeiro, então quando você coloca esse ponto de interrogação aqui, então mostra os totais atuais, caso contrário, mostrar aluguel ou formulário. Portanto, isso verifica três condições, nulas, falsas e verdadeiras. Então, em vez do ShowSpinner, isso não vai fazer nada. Vamos instalar algum tipo de pacote giratório. Vou aqui e reagir ao spinner. Spinners. Vamos com isso. Então o fio adiciona, reaja aos spinners. Inicie meu servidor. Instale isso. Incrível. Então, aqui vamos exibir um spinner. E como fazemos isso? Então, vamos usar este carregador de clipes. Então copie isso. Este é um pequeno clipe Loder deste spinners do React. Vou colá-lo no topo. O que mais? Parece que. Precisamos definir um carregamento variável de estado e definir o carregamento. E isso, por padrão , será verdade. Então, isso será carregado quando iniciarmos a página. Então isso provavelmente vai se correlacionar com o nosso spinner de alguma forma. Então aqui está nosso carregador de clipes. Há uma propriedade de cor com a qual não queremos mexer, ou CSS ou tamanho, talvez queiramos mexer com o tamanho, mas aqui está o carregamento igual a carregamento. Então, vamos copiar isso e colocá-lo no spinner de clipe de erro. E, na verdade, eu só vou copiar essa coisa toda. E vamos retirar o que não precisamos para copiar isso e colá-lo aqui. E vamos tirar a cor. E vamos retirar CSS igual a substituição. E acho que 150 serão grandes. Então, vamos fazer 75. E então retire esse pseudocódigo e salve-o e veja como isso se parece. Então, vamos iniciar nosso aplicativo. Fios run dev. E vamos atualizar. Temos um grande erro. O estado de uso não está definido, sim, então precisamos trazer o estado dos EUA. Há contextos usados. Basta adicionar o estado de uso, salvá-lo. Incrível. Então parece que temos um spinner e não está resolvendo nada. E então parece que ainda estamos mostrando o formulário. Queremos nos livrar desse formulário porque ele não deveria estar aparecendo. E então queremos centralizar esse spinner. Então, centralizar o spinner é muito fácil. Acabamos de pegar este carregador de clipes e apenas envolvê-lo neste componente do Chakra UI Center. Então, basta colocar o Center e colocá-lo no início e depois a etiqueta de fechamento no final do carregador de clipes. E então esquecemos de remover o aluguel ou o formulário aqui embaixo e, em seguida, vamos em frente e remova os totais atuais comentados. Agora vamos salvá-lo e ver o que acontece. Então, ela atualizou a página e está apenas girando. Isso nos diz que algo está errado porque deve resolver como aluguel ou existe deve mudar nessa condição. Ela não deveria mais mostrar este carregador de clipes. Na verdade, ele deve mostrar os totais atuais ou aluguel ou o formulário depois de resolver. Então, há algum outro problema acontecendo. E você pode ver que aqui, temos um erro. Esse erro diz que o resolvedor ou o endereço não está configurado para o nome DNS. Isso é como um dos erros mais vagos dos éteres JS. Isso pode significar um milhão de coisas, mas eu sei em nosso contexto, provavelmente significa que em nosso contexto blockchain, quando estamos usando essa conta corrente, isso provavelmente significa que essa conta corrente ainda não está definido quando estamos chamando isso. E podemos determinar isso colocando um log de console aqui, conta corrente. E, na verdade, vou colocar backticks e dizer conta corrente. E então conta corrente só para sabermos o que é isso. Vamos salvá-lo e ver o que ele nos dá a conta corrente. Então olhe para isso. A conta corrente está em branco. Então é exatamente isso que está acontecendo. E para ser honesto, não sei a correção no momento. Tenho que me aprofundar nisso para ver o porquê, mas vou descobrir e avisarei aqui no próximo vídeo. Mas uma solução rápida para nós agora é vir aqui para o efeito dos EUA e adicionar a conta corrente aqui. Agora usaria efeito é usado o efeito é chamado quando o componente carrega. Ele também pode ser chamado novamente quando esses valores mudam qualquer coisa nessa matriz. Então eu posso ter conta corrente, posso ter locatário e todas essas outras coisas. Quando esses valores mudam. Ou atualizado de alguma forma, fará com que a chamada que eles usem efeito novamente. Se colocarmos a conta corrente aqui, se essa função for chamada, não haverá conta corrente e ela lançará um erro. Bem, quando a conta corrente for resolvida, ela voltará e chamará isso novamente, o que chamará essas duas funções. Mais uma vez. Embora ocorra um erro, ele voltará e o chamará novamente assim que for resolvido. Então, vamos fazer isso por enquanto só para que possamos continuar em movimento. Vou te dar a correção aqui daqui a pouco, mas se você salvar isso agora ele deve funcionar bem. Então atualize. E lá vamos nós. E então você vê que a conta corrente está em branco aqui, mas ela a mostra novamente com o endereço. Então esse é o problema acontecendo. Vamos abordar isso daqui a pouco. Mas aqui diz: Bem-vindo, por favor, insira seu primeiro e sobrenome para mostrar que as coisas estão funcionando. Se atualizarmos novamente, são giros e então ele mostra, Ei, o locatário não existe. Então está fazendo uma chamada, está retornando falso e mostrando nossa forma. Então agora vamos configurá-lo para que possamos realmente se registrar como locatário. Então, logo abaixo de obter locatário, precisamos fazer uma chamada para nos registrarmos como locatários. Então, vamos voltar ao nosso contrato para descobrir que acho que chamamos isso de adicionar locatário aqui adiciona locatário. Isso é o que precisamos chamar. Então, vamos voltar aqui e vamos criar uma nova função. Vou copiar e colar isso. Vou chamá-lo de adicionar locatário. E locatário. E então vamos adicionar locatário de pontos de contrato porque essa é uma função de contrato inteligente. Então, neste anúncio aluguel ou função, se você voltar para o contrato inteligente, estamos passando tudo enquanto no endereço, primeiro nome, sobrenome pode alugar ativo, iniciar no saldo do tempo e fazer. Então. Vamos passar isso diretamente para nossa função aqui em cima. Então, coloque o endereço da carteira, o nome próprio, LastName pode alugar, ativar , equilibrar, iniciar e terminar. Então, vamos passar tudo isso quando for chamado. E assim, aqui, no locatário do anúncio, vamos passar essas informações. Então eu posso realmente pegar isso, copiá-lo e colá-lo aqui. Então, quando estamos fazendo chamadas para o contrato, podemos usar esse bom método chamado peso. Então você pode ver um peso, adicionar peso do locatário. E o que isso faz é parar por aí até que a transação seja concluída. Então ele fica aqui e espera. E então, quando a transação terminar, ela continua a executar o código. Então, vamos apenas testar isso por log do console, alugar ou adicionar. Na verdade, podemos fazer algumas coisas divertidas. Podemos adicionar o FirstName. E logo abaixo disso, vamos querer obter as informações do locatário. Portanto, temos essa função chamada get renter que define a variável de estado dos locatários com as informações dos locatários em que get locatário é chamado por esse check rent ou existe. Então, tudo o que temos que fazer aqui é apenas chamar cheque aluguel ou existe. E isso verificará se eles existem em preencher nosso estado com essas informações dos locatários. Então, vamos salvar isso. Não queremos que isso seja chamado quando a página for carregada. Então, vamos pegar toda a função e passá-la para o nosso provedor. Salve isso e, em seguida, iremos para um formulário de locatário. E queremos trazer essas informações do provedor que declaram informações para um componente de formulário de locatário. E você já fez isso um monte, você sabe como fazer isso. É tão simples quanto const. Adicione iguais ao locatário, use contextos de contexto e blockchain. E certifique-se de importar contextos de uso do React e importar o contexto blockchain. E então, quando formos para onsubmit, vamos chamar esse locatário de adição. Agora lembre-se, estamos recebendo apenas o FirstName e o LastName do formulário. E isso porque pode alugar quando um locatário criou pode alugar é verdade porque obviamente eles são capazes de alugar. Ativo será falso porque eles ainda não têm uma bicicleta. Eles estão apenas se inscrevendo. O saldo será 0. O valor devido é 0, e a hora de início e término vamos ser zeros. Assim, eles sempre podem ser configurados daqui para que a pessoa que preenche o formulário não precise colocar informações inúteis. Então, no nosso onsubmit, vamos fazer isso. Estamos passando os valores. Vamos dizer valores. Pode alugar igual a verdade. E o que estamos fazendo aqui é definir mais valores em um objeto. Então deixe-me copiar e colar isso algumas vezes. Valores, ativo igual a 0, valores, saldo é igual a 0. Os valores começam e terminam. Tudo é igual a 0. Oh, desculpe, ativo é falso. Em seguida, zeros, zeros, zeros. Então, estamos preenchendo isso porque eles sempre serão padrão. Então também precisamos passar o endereço da carteira. E não queremos que o usuário tenha passar um tempo esse endereço e não o colocamos no fórum, então precisamos incluir isso também. Assim, podemos trazer a conta corrente aqui a partir dos contextos blockchain. E podemos fazer esse operador spread para criar um novo objeto de valores. Portanto, const novos valores objeto. O que faremos é ter o endereço da carteira. Opa. O que faremos é criar um objeto. O primeiro valor chave no objeto será o endereço da carteira, que será igual à conta corrente. Então podemos simplesmente espalhar os valores. Neste objeto. Este é o operador spread. E o que isso faz é que ele apenas adiciona todos esses valores, os que eles enviaram, incluindo esses dois, esse objeto. É muito legal. Se consolarmos, faça logout do novo objeto de valores. Vamos ver o que isso parece. Um novo, vamos colocar Travis teste, enviar e olhar para isso. Temos um objeto que tem endereço de carteira, FirstName, LastName pode alugar, ativo em todas essas outras coisas. Portanto, temos nossos principais valores e estamos prontos para usá-los. Mas não queremos ter que ser como novos valores objeto ponto carteira endereço novos valores objeto ponto pode alugar. Então, vamos agora usar a estruturação D para retirá-las. Então o endereço da carteira const, FirstName, LastName, pode alugar. Balanço ativo. Comece em e, em seguida, é igual a novos valores objeto. Esta é apenas a estruturação. Ele extrai todos esses valores para que não precisemos usar essa notação de pontos. E, finalmente, o último passo é que chamaremos de espera aérea, adicionar locatário passará tudo isso. Novamente, se não fizéssemos essa reestruturação, teríamos que fazer assim. Novos valores objeto dot wallet aborda novos valores ou objetos. Então isso é apenas um atalho. Você pode fazer isso. Mas acho que isso parece muito mais limpo. Então, novamente, estamos passando nossos valores. Estamos adicionando esses padrões a ele. Estamos adicionando nosso endereço de carteira na criação um novo objeto onde D estruturando os valores dele. E então nós os estamos passando para nossa função adicionar locatário. Incrível, vamos experimentar isso e ver se ele adiciona um locatário. Então, vou dizer Travis test e clique em Enviar. E isso deve trazer o MetaMask. Temos um erro. A propriedade não é possível ler tem comprimento de leitura indefinido. Então adicione locatário. Sim, há algum problema aqui. Então, vamos voltar para aqui em vez de. Mas espere, adicione aluguel ou vamos fazer um console.log. Salve isso e veja o que ele diz. Teste Travis. Temos alguns zeros falsos verdadeiros indefinidos. Tudo bem, então o sobrenome é indefinido. Parece que esse é o problema sempre endereço da carteira, FirstName. último nome é indefinido. Vamos ver o que está acontecendo. Então, se formos ao nosso formulário de renderização aqui embaixo. Sim, eu sabia que fiz isso por sentimento. Lastname. É como a última capital N. Aqui está o nome próprio sem a capital N. Eu vou colocar esses fins de capital de volta só para ser consistente. Então, vamos destacar tudo isso. E faça o FirstName. E, em seguida, destaque todos os sobrenomes. E faça da mesma forma, capital N. E então, aqui em cima, precisamos ter certeza de que temos as coisas certas. E esses mudam esses dois nomes, sobrenome e salvam isso. E agora devemos ser bons. Vamos tentar consolá-lo novamente. Travis teste, envie e temos endereço da carteira Testes Travis true-false 0000. Tudo bem, estamos bem. Vamos mudar isso de volta para aguardar, adicionar locatário e tentar novamente. Atualize apenas para ter certeza de que eu tenho tudo claro. Travis testa e clique em Enviar. Isso deve trazer o MetaMask. E aqui vamos nós. Olhe para essa baixa taxa de gás. Isso é ótimo. Gosto disso. Agora. Vou apertar Confirmar. E vamos ver. Provavelmente está pendente. Está pendente agora e veja como isso ainda está girando. Essa é a forma de gancho React. O gancho está enviando que eles adicionaram ao formulário que mantém esse gancho girando até que esteja completo. Agora, olhe para isso. Uma vez que fomos adicionados, ele detectou a alteração e agora mostra nosso painel. Isso não é incrível? Isso é ótimo. Agora, se eu atualizar, verei meu painel em vez disso. Então eu peguei a roda giratória e lá está o meu painel. Incrível. Então, novamente, novamente, apenas para recapitular isso, essa questão era que deveríamos ter usado esse caso de camelo, minúsculas, primeira palavra e depois maiúsculas, todas as outras palavras. Isso estragou nosso sobrenome. Então, acabamos de voltar e mudamos todos esses CamelCase. Altere os primeiros nomes para CamelCase. Então aqui em cima, apenas certificando-se de que estamos passando a versão CamelCase. Tão ótimo trabalho. Parece que um painel está funcionando. Ele pode dizer se somos locatários ou não uma renderização. Então, no próximo vídeo, vamos começar a preencher esses campos dinamicamente. Seremos capazes de creditar nossa conta, pagar nossos saldos e verificar as bicicletas. Então, vamos fazer um grande empurrão no próximo vídeo. E isso nos aproximará do final do nosso aplicativo. 8. Populando o painel final otimizado: Tudo bem, então eu reimplanto meu contrato só para poder testar que tudo está funcionando novamente. Então vou colocar o teste Travis e vou me adicionar como locatário. Então, vou clicar em Enviar. Metamask surgirá e eu confirmarei. E uma vez feito isso, ele deve mostrar meu painel. Portanto, está pendente no momento. Lá vamos nós. Painéis para cima. Então, antes de pressionarmos todos esses valores, o que na verdade não demorará tanto quanto você pensaria porque eles são contratos inteligentes fizeram todo o trabalho. Antes de realmente fazermos isso, há duas coisas que eu quero abordar. Primeiro, temos um pequeno bug. Então, se eu abrir minhas ferramentas de desenvolvimento, então se eu vier aqui para o MetaMask desconecte minha carteira. Então, desconecte e atualize. Você verá que o spinner continuará girando, girando, girando e girando. E nada carregará. Precisamos consertar isso. E a maneira como corrigimos isso é chegamos ao painel e lembramos que colocamos isso se else-if else ternary aqui. Bem, precisamos adicionar mais uma condição. Portanto, se o problema for, se o locatário existir é nulo, então o girador gira. Mas se não tivermos uma conta conectada, o locatário existe, será não. Então, o spinner sempre girará até conectarmos uma carteira. Então, para corrigir isso, colocamos outra condição aqui. Colocamos a conta corrente final. O que isso faz é que, se a renderização existir seja nula e houver uma conta corrente, mostre o spinner. Portanto, se não houver uma conta corrente, ela não mostrará o spinner porque ambos não correspondem. E então ele seguirá para verificar se o locatário existe, que não vai, e mostrará o formulário do locatário. Então, basta adicionar essa conta corrente e salvá-la. Vamos tentar novamente. Então, deixe-me atualizar. E, na verdade, preciso trazer isso. Então, aqui em meu contexto, preciso dizer conta corrente para que eu possa acessá-la. Então, vou salvá-lo. E devemos ser bons agora. Sim, lá vamos nós. Minha carteira não está conectada e está mostrando meu formulário. Agora isso não vai fazer nada. Se eu preenchê-lo, ele lançará um erro. Se eu colocar algo assim, isso vai lançar um erro porque obviamente não temos uma carteira conectada. Não podemos falar com o blockchain ou com o contrato inteligente. Então, vamos em frente e conectar a carteira dela. Conecte-se. E agora meu painel será exibido. Agora, a segunda coisa que queremos resolver é o problema que estávamos tendo no último vídeo. Agora lembre-se, sempre que chamamos a conta corrente nessas funções, o valor ainda não havia sido preenchido no estado, então ele lançaria um erro. E nós combatemos isso adicionando conta corrente em nosso efeito de usuário. Então, quando isso mudasse, chamaria de efeito Hughes novamente. Então, obteríamos nosso valor. Portanto, lembre-se de que temos conta corrente em branco e, em seguida, recebemos um erro porque estamos chamando um valor que ainda não existe neles e que é preenchido, então ele funciona. Então, falamos sobre isso em nosso último vídeo e vamos consertar isso agora. Não queremos lançar um erro toda vez antes de ele realmente ser executado. Então, a maneira como vou resolvê-lo neste aplicativo é apenas envolvê-lo em uma declaração if. Então, em qualquer lugar em que quisermos obter a conta corrente, como aqui, vou me livrar desse registro do console em qualquer lugar que desejamos obter essa conta corrente. Vou embrulhar em uma conta corrente se. Então, se isso existir, só execute isso. Vou para minha próxima função que usa conta corrente. E também vou embrulhar isso. Se a conta corrente fizer isso, faça essas coisas. Acho que esses são os únicos dois no momento. O que isso faz é quando isso carrega e vem aqui e tenta obter o locatário ou realmente verificar se o locatário existe e ele chama renderização existe na conta atual ainda não está definido nos lançamentos esse erro. Desta vez, ele verificará se essa conta atual está definida primeiro. Não será, então vai pular isso. E então aqui embaixo no efeito dos EUA quando ele é chamado, lembre-se de que passamos aqui. Então, sempre que isso mudar, ele chamará o efeito Hughes novamente. Sempre que isso acontecer, ele chamará essa função novamente. E desta vez vai funcionar. Agora, se o salvarmos e voltarmos e atualizarmos, não recebemos esse erro, apenas recebemos isso. Algo não é mais suportado. E reagir 18, o que não é grande coisa, tenho que investigar isso. Mas também temos esse erro favicon, que podemos corrigir indo para index.html e apenas tirando o favicon. Acho que preciso parar ou reiniciar meu servidor para que isso entre em vigor. Então, deixe-me atualizar e esse erro desapareceu. Então, acho que estamos prontos para começar aqui. A primeira coisa que vamos fazer é preencher esse crédito BNB. Então isso é balanço aéreo, o balanço dos locatários. Então, se voltarmos ao nosso contrato e rolarmos para baixo, temos essa função chamada equilíbrio do locatário. Isso é o que vamos chamar que vai verificar o saldo aéreo ou crédito Air BnB que colocamos no saldo da conta ERA da Renner. Vamos voltar aos contextos blockchain. E vamos fazer const, pegue. Um saldo de locatário é igual a um coletor. Vamos fazer um try-catch no erro de log de pontos do console de erros. Então aqui vamos dizer que o equilíbrio constante é igual à espera. Use nosso objeto de contrato e chame o saldo de aluguel ou função. Vamos passar na conta corrente. E vamos envolver isso novamente em uma declaração if. Se a conta corrente, então só faça essas coisas. E então vamos definir o estado. Então, vamos vir aqui e criar um estado para isso. Então vamos dizer aluguel, aluguel ou saldo. Conjunto. saldo locatário é igual ao estado de uso. Aqui vamos definir o saldo do locatário. Defina o saldo do locatário para equilibrar Na verdade, precisamos formatar isso porque ele vai voltar. Então, precisamos formatar isso como fizemos com o outro saldo que fizemos no início. Então, para fazer isso, você coloca éteres ponto utils, éter de formato de ponto. E passaremos em equilíbrio. Precisamos que isso seja chamado quando o contexto for carregado. Então, vamos adicioná-lo ao nosso efeito de usuário. Vamos chamar isso e ele vai definir os estados. Então, precisamos passar essa variável de estado para o nosso provedor. Então, vamos colocar o equilíbrio do locatário. E agora isso deve estar disponível para usarmos em outro lugar. Então, precisamos ir ao nosso painel. Na verdade, os totais atuais são para onde precisamos ir. Totais atuais. Precisamos trazer contextos aéreos. Então, vamos fazer const. saldo do locatário é igual. Use contexto, blockchain, contexto. Incrível. Agora, certifique-se de importar isso na parte superior. Portanto, devemos ter o contexto Blockchain e deveríamos ter usado contextos importantes. Isso está disponível aqui em baixo. Agora, em nosso cartão de estatísticas, podemos alterar esse número estático para alugar ou saldo. Então, vamos salvar isso. E vamos atualizar a página. E temos 0, o que tem que estar certo porque não temos um valor padrão definido. Mas, para verificar isso, vamos em frente e fazer esse crédito de seu formulário de conta funcionar para que possamos seguir em frente e creditar nossa conta e garantir que ela altere esse valor aqui de acordo com quanto temos no contrato inteligente. Então, vamos pular para o formulário Adicionar ao balanceado. Na verdade, precisamos começar nos contextos blockchain. Vamos vir aqui para o fundo. E vamos ligar, se olharmos em nosso contrato inteligente, vamos chamar a função de depósito. Veja se podemos encontrar esse depósito. Aqui está. Vamos chamar essa função de depósito. Passamos o endereço da nossa carteira em seu pagamento. O fato de ser pago significa que também podemos enviar uma quantidade de éter ou B & B ou o que quer que estejamos enviando que será enviado em um objeto, o que mostrarei em um minuto. Portanto, temos depósito, também é pago e adicionará isso ao contrato inteligente, mas credite a conta dos locatários que está neste endereço da carteira. Então, vamos chamar essa função de depósito. Vamos voltar ao contexto blockchain. E eu só vou copiar essa função. E vou chamá-lo de depósito. E eu posso remover isso se vamos apenas remover isso Totalmente. Então pense nisso. Agora estamos entrando em um decimal e queremos convertê-lo em peso ou dez para 1800. Porque em nosso contrato inteligente, queremos lidar com formas não decimais porque a solidez ainda não suporta decimais. Então, precisamos converter isso de outra forma. Então, temos usado Format éter para convertê-lo de maneira para decimais. Agora precisamos usar uma função de utilitário para converter de decimais para pesar. Essa função é chamada de éter de análise. Então aqui vamos chegar quando eu disser valor de B & B. Então, o valor que vamos passar. E, na verdade, vamos colocar isso como um parâmetro. Valor. Então o valor B & B é igual a meios de ponto éteres. Vamos formatar esse valor de duas vias. Então precisamos chamar éter parse. E passaremos o valor. Uma vez que tenhamos isso, então podemos chamar nossa função de depósito Const, depósito igual a aguardar. função interna do ponto do contrato é chamada de depósito. E vamos passar o endereço da nossa carteira, que é conta corrente. E não precisamos envolver isso em um if porque isso não carrega no carregamento da página, ele só o procura quando clicamos no botão. Então, nesse ponto , ele estará bem carregado. E depois da conta corrente, é aqui que podemos passar o valor de quanto estamos enviando para o contrato. E eu disse que isso era um objeto. Então, vamos criar um aparelho encaracolado. E para a chave colocará valor. Para o valor, vamos colocar o valor b e b porque estamos passando esse valor aqui. E então há esse método adorável chamado peso, onde quando estamos fazendo essa transação, iniciamos a transação e queremos esperar até que essa transação seja concluída antes de passarmos para a próxima coisa. Então, para fazer isso, acabamos de colocar o depósito aguardado, que é o que definimos acima do peso do ponto. E isso aguardará até que a transação seja concluída. Em seguida, queremos atualizar o saldo, o balanceamento dos locatários. Assim que creditarmos a conta, queremos atualizar esse número na página. E para fazer isso, é muito fácil. Acabamos de chamar obter saldo do locatário. Mais uma vez. Este depósito, isso não é chamado quando a página é carregada. Só é chamado quando enviamos esse formulário. Então, vamos aqui e enviar essa função para o depósito do provedor de ar. E então vamos pular para o nosso formulário Adicionar ao balanceado. Aqui, vamos para o onsubmit e valores é o que estamos recebendo. Vamos verificar e ver novamente o que isso envia. Então clique em Salvar. Vamos ver como esse log para o console se parece, o teste e ele está sendo um pouco lento. Lá vamos nós. Então, se eu colocar 0.1 e enviá-lo, Ele enviará um objeto com uma chave de saldo de crédito e um valor de 0,1, não precisamos desse saldo de crédito, só queremos o número. Então, vamos para a estrutura D que indo const crédito, saldo de crédito é igual a valores. Então podemos chamar aguardar deformação de depósito. O que foi isso? Aguarde depósito, saldo de crédito. E isso deve ser tudo o que precisamos fazer. Então, vamos salvar isso e dar uma chance. Eu sempre gosto de atualizar minha página só para ter certeza de que estou começando de novo. Então, antes de fazer isso, certifique-se de ter alguns testes B&B em sua conta. Então, se eu abrir o meu, eu tenho 1,96. Se você não tiver nenhum, basta ir para a torneira de teste B e B no Google. Clique no teste net.finance.org e, em seguida, envie-se um B&B. Você pode enviar um B & B por dia. Aqui você acabou de colocar o endereço da sua carteira. Clique em me dar BNB e clique no único BNB e ele o enviará em cinco minutos. É muito legal. Mas já consegui meu fim por hoje , então não posso mais enviar. Então, vou creditar minha conta com 0.1 B&B. Então, se eu clicar em Enviar, teremos um erro. O depósito não está definido. Isso está em nosso formulário de anúncio para equilibrar é provavelmente porque não o trouxemos. Sim, não podemos chamar depósito porque não trouxemos nosso contexto. Então volte para o topo. Depósito é igual a contextos de uso. E vou passar no contexto blockchain e garantir que você importe esses dois. O meu faz isso automaticamente? Já te disse isso um milhão de vezes, mas só estou tentando lembrá-lo. Então, agora vamos tentar novamente. Atualize a página. E vou creditar meu balanceado com 0.1 B&B. Clique em enviar e vou esperar pelo MetaMask. Tudo bem, então meu total, então é um gás muito pequeno v, é por isso que eu gosto de BNB. É 0,0043 B & B. E tack isso no meu 0.01. É muito pouco gás. Então, vamos confirmá-lo. Quando fizermos isso, ele vai esperar. Lembre-se que chamamos esse método de peso, ele vai esperar. E, quando isso for feito, ele deve atualizar o crédito do Airbnb. Então clique em Confirmar que o assistirá aqui. Atualmente, está ao cubo. Agora está pendente. Em nossa rotação giratória por causa dessa forma de gancho React , gancho embutido, acho que é chamado está enviando, mas você verá agora que nosso crédito B & B é 0,01 ou 0,1 B & B. Vamos ver o quanto isso é. 0.1. B&b tem 38 dólares. Ótimo. Gostei desse equilíbrio. Isso está funcionando. Agora vamos para B e B preencham isso. Então, vamos voltar ao contexto blockchain. E vou copiar e colar isso para o próximo. Se olharmos em nosso contrato, temos uma função chamada get du. Então é isso que vamos chamar de get fazer. Não estamos passando nada. E então eu vou remover isso rapidamente em uma conta corrente if. Então faremos isso kannst du equals aguardar contrato ponto obter, fazer conta corrente. E então vamos definir o estado. Isso vai ser um padrão recorrente para as próximas funções. Então eu irei aqui e criarei uma variável de estado chamada do e, em seguida, defino du igual ao estado U. Então eu posso vir aqui e definir, fazer, e vou defini-lo para o valor devido que definimos logo acima disso. Portanto, não confunda isso com a variável state faz. E queremos chamar isso de get do quando os contextos forem carregados. Então, pegue du. E então isso definirá as variáveis de estado devido. Portanto, queremos passar isso para nossos provedores para que possamos usá-lo em nosso painel. Então, basta passar e salvar isso, vá para o painel, não para os totais atuais do painel. E depois passe, faça aqui. Então, vamos passar por causa do nosso contexto. E então, no segundo em que é 0,01, vamos passar o devido e salvá-lo e ver se isso nos dá uma quantia una através de nós um grande erro. E diz que os objetos não são válidos como um filho do React, o que isso significa é que ele está retornando um grande número, que é um objeto. Então, na verdade, precisamos analisá-lo, esquecemos disso. Então, em vez de, em vez de fazer, precisamos colocar éteres, utilitários de ponto, éter em formato de ponto. Faça, e isso deve corrigi-lo. Isso nos dará nossa quantia decimal. E já está lá. Olhei para 0, atualize novamente, 0, legal. E vamos testar isso em um minuto. Vamos seguir em frente e fazer uma configuração de minutos de viagem. Então, e os minutos de passeio? Onde está isso em nosso contrato? Então, se voltarmos ao nosso contrato, temos essa função chamada obter duração total. Então, vamos chamar isso, ele retorna 0 se eles ainda não tiverem verificado sua bicicleta ou não o verificaram. Eu disse que retorna a quantidade de tempo que eles estavam na bicicleta. Então, se eles tiverem uma hora de início e término, isso vai calculá-lo aqui. Então, precisamos chamar isso de duração total. Então, novamente, vou copiar isso e colá-lo. Na verdade, vou chamar isso de obter duração total. E vamos deixar essa declaração se. E vamos fazer exatamente a mesma coisa aqui. Vamos dizer que a duração total const é igual a aguardar ponto do contrato obter a duração total, que é uma função em nosso contrato como acabamos de ver. E depois passe na conta corrente. E então vamos definir o estado. Então, vamos subir aqui. E logo abaixo disso, basta colocar const, duração, definir a duração igual ao estado de uso. E volte aqui e vamos defini-lo. Defina a duração para a duração total. E isso, na verdade, vai ser uma corda. Queremos lançá-lo para um número. Então, vamos salvar isso. E também queremos obter isso quando a página carregada porque ela está em um painel. Então, começamos a usar o Effect, obter a duração total nessa configuração da duração. Então, vamos passar o valor do estado de duração para o provedor. E então, assim como fizemos antes, vamos pular para os totais atuais e adicioná-lo aqui, duração para trazê-lo. E então aqui em baixo minutos de passeio em vez de sete, vamos colocar a duração. Salve isso. Atualize minha página e temos Ryan minutos de 0. Agora vamos definir esse status de bicicleta. Então, a maneira como eu o fiz foi que isso vai ficar vermelho até você verificar a bicicleta. Se a bicicleta estiver ativamente verificada, ela mudará para verde. Como Hey, você está pronto para ir, curtir sua bicicleta. Uma vez que sua bicicleta é verificada , suas costas ficam vermelhas. Vermelho significa que quando sua bicicleta é devolvida, você não pode verificar outra até pagar seu saldo. Agora você pode querer distinguir entre quando eles pagam o saldo, quando eles verificam a bicicleta novamente. Você pode fazer isso se quiser. Vou deixá-lo vermelho apenas por simplicidade. Então, para fazer isso, precisamos vir aqui e ver, sim, estamos definindo essa cor de fundo para vermelho. O que queremos fazer é descobrir se eles estão ativos ou não. Se eles estiverem ativos, queremos configurá-lo para verde, caso contrário, lido . Então, vamos voltar. Acho que já temos isso no ar. Temos um erro. Adicione locatário. Não, não temos algum lugar aqui. Traga o locatário aqui está. Verificamos se o locatário existe, se o fizerem, chamamos get locatário em preenchimento que locatários a variável de estado C onde diz Set renter. Então, devemos ser capazes de vir aqui e apenas passar o valor do locatário. Então, o locatário e isso deve nos lembrar quando adicionamos um locatário, ele nos dá o endereço da carteira, FirstName, LastName pode alugar saldo ativo, todas essas coisas boas. Então, devemos ter isso disponível. Portanto, deve ser tão fácil quanto passar as informações do locatário, chegar aos nossos totais atuais e adicionar locatário aos nossos contextos. E então, em vez de vermelho aqui, diremos o ponto do locatário ativo. Se isso for verdade, então queremos mudar isso para verde. Caso contrário, vermelho. Salve isso. Vamos testá-lo. Então, temos um grande erro aqui. Ele diz que não é possível ler propriedades de indefinido. E o que isso geralmente significa é que ainda não havia povoado. Portanto, ele está verificando essa variável de estado antes de ser preenchida. Então, o que podemos fazer também é fazer um check-in para o locatário para garantir que locatário também esteja disponível. Portanto, o locatário e o locatário estão ativos somente em verde mais lido. Então, se salvarmos isso, devemos ser bons. Atualizar o status da bicicleta é vermelho. Agora, quando verificarmos, isso deve ficar verde. Em seguida, precisamos que este formulário funcione para que possamos pagar o valor devido. Uma vez que fizermos isso e adicionamos nossas motos testarão que tudo isso funciona. Então, vamos fazer isso em seguida. Então, de volta aos contextos blockchain. E vou copiar isso novamente, colá-lo abaixo dele. E eu vou chamar isso de fazer pagamento. E vamos passar um valor. Porque lembre-se que isso é pago. Vamos enviar uma quantia com isso. E vamos dar uma olhada na função em nosso contrato. Então, em algum lugar, deve ser onde estamos fazendo nosso pagamento. Aqui, faça o pagamento. Então aqui está nossa função de pagamento. Lembre-se de que ele o subtrai do nosso saldo, por isso faz um pagamento ao contrato e subtrai esse valor do nosso balanceado que ele define pode alugar de volta para verdade, porque agora você pode alugar uma bicicleta novamente. Ele define devido a 0 e inicia e termina de volta para zeros. Então, ele meio que faz seu pagamento e atualiza você como você estava no início. Então, vamos vir aqui e vamos chamar a função fazer pagamento. E dentro dessa conta corrente. E não precisamos da conta atual porque, novamente, ela só é executada quando pressionamos o botão. Então, vou fazer como fiz aqui em cima. Vou copiar tanto isso. Na verdade, vou copiar tudo. Cole-o. E então o valor B & B, esse é o valor que estou enviando. E então vou chamar o depósito porque estamos depositando dinheiro, estamos fazendo um pagamento. Mas em vez de chamar a função de depósito, chamaremos a função make payment. Passaremos o endereço da nossa carteira e o valor que estamos enviando, esperaremos até que isso seja feito. Então precisamos fazer várias coisas aqui. Então lembre-se em nossa função de contrato, estamos fazendo um monte de coisas. Estamos subtraindo do nosso saldo. Estamos mudando pode alugar de volta para verdade em todos esses dois zeros. Então, precisamos atualizar algumas coisas. Certo, sob isso, vamos chamar um locatário de peso. Porque precisamos atualizar nosso locatário. Eles têm novos valores agora, o pode alugar o saldo. Tudo isso é atualizado. Então, precisamos atualizar o locatário. Precisamos atualizar o aluguel ou o saldo do get. Precisa atualizar isso porque nosso saldo vai mudar. Precisamos atualizar a duração porque tivemos um motim de dez minutos. Precisamos disso para voltar para 0, então precisamos atualizar isso. Então aguarde, obtenha a duração total. E, finalmente, precisamos atualizar o valor devido. Então aguarde, faça, porque isso também será 0. E isso só é executado quando pressionamos um botão. Então, vamos passar a função para o provedor. E então vamos para o formulário de pagamento. E traga nosso contexto. Pode, fazer o pagamento igual a usar o contexto. Em nosso contexto estão os contextos blockchain. Então, novamente, certifique-se de importar ambos , então no ar em nossa cúpula. Então, vamos tentar nosso Enviar primeiro, ver se ele funciona. Então pague suas dívidas 0,1 enviar, e lá está. Então, novamente, queremos estruturar isso para obter o 0.1. Para fazer isso, diremos pagamento const. Acho que é isso que usamos aqui. Sim, o pagamento D é igual valores e, em seguida, podemos chamar aguardar, fazer o pagamento. Pagamento, pagamento. Deixe-me salvá-lo e poderíamos experimentá-lo, mas não temos nenhum Mountain Dew. Então, vamos também saltar para as nossas bicicletas e fazer esses botões funcionarem. Então, de volta ao contexto blockchain, vamos adicionar duas funções. Um será chamado de checkout, const, check-out é igual a uma pia. E o outro será chamado de check-in. Então, vamos verificar a bicicleta. Vamos verificar de volta na bicicleta. E faremos uma tentativa de pegar. Console.log o erro. Aqui. Nós diremos que se a conta corrente fizer esse cheque, então só execute isso fará essa verificação. Se isso for verdade, só execute isso. Então, vamos começar com o checkout const igual a aguardar ponto do contrato. E vamos ver o que temos. Portanto, temos um checkout e temos um check-in. E você observará no checkout, provavelmente queremos atualizar o locatário porque ele terá novos valores. E depois no check-in, há muita coisa acontecendo. Estamos alterando alguns valores do locatário, mas também estamos definindo o valor devido. Então, estamos calculando quanto é devido e vamos definir isso. Precisamos atualizar esses valores. Então contratos, ponto, check-out, conta corrente. Vamos aguardar o término da transação , peso do ponto de checkout. E então vamos chamar get locatário para atualizar isso. Aqui embaixo. Eu vou realmente copiar isso, colá-lo. Aqui. Vamos dizer check-in, check-in pontos de contrato. Então vamos aguardar o check-in. Então vamos ligar para obter locatário. Vamos chamar get devido a atualizar esse valor e obter duração total porque precisamos redefinir isso para 0. Nestes, como os outros são botões que você pressiona. Então, vamos passar as funções reais para o nosso provedor. E eu realmente não preciso disso se a conta atual porque é um botão pressionado, isso não vai acontecer no carregamento da página. Então, vamos movê-los de volta e salvá-lo. E vou passar no checkout e fazer o check-in para o meu provedor. E depois vamos para a bicicleta do painel. Agora vai ser de bicicleta. Lá vamos nós. Então, vamos trazer o contexto para o nosso componente de bicicleta. Então const, confira, verifique n iguais, use contextos, contextos blockchain, trazendo suas importações. E vou salvá-lo. Agora há uma coisa sobre a qual devemos falar. Uma coisa que você pode fazer com seu contrato é quando você verificar esta bicicleta, você pode salvá-la no seu contrato ou em seu estado ou algo assim. Então você pode exibir aqui o tipo de bicicleta também que você verificou. Eu não queria tornar isso muito complicado e queria deixar algumas coisas para você ser criativo e criar seu próprio aplicativo com isso. Mas todos esses checkout e check-ins farão a mesma coisa. Então, se eu verificar esta bicicleta, é o mesmo que verificar esta bicicleta. Não temos que diferenciar qual bicicleta estamos verificando. Então, vai ser o mesmo e cada um desses componentes de bicicleta. Para o checkout, vou adicionar um clique ao clicar. É igual ao checkout. E para este botão, o botão de check-in, adicionarei um check-in ao clicar , chamando minha função de check-in. E então salvamos isso. E acho que somos bons para isso. Podemos realmente experimentá-lo. Então atualize minha página. E vou tentar verificar uma bicicleta. Agora há muitas coisas que vão acontecer aqui que podemos testar. Então, primeiro, vou verificar esta bicicleta. Tudo bem. E me cobra uma taxa de gasolina muito minúscula. Preço B&b. Vamos ver o quanto isso realmente é. É como 27, gás v é $0,20. Fico feliz por termos usado para o BnB, mesmo que seja testemunho. Então deixe-me voltar para o MetaMask. Deixe-me confirmar. Então, o que vai acontecer aqui é que quando eu confirmo, esse status deve ficar verde. E deve definir um monte de coisas que dissemos em nosso contrato como, pode alugar deve ser falso, hora de início do ar deve ser documentada, deve haver um carimbo de data/hora para isso e todos que, você sabe, o contrato tão bem quanto eu, você sabe, o que vai acontecer. Para que eu possa clicar em Confirmar. Agora está pendente. Quando o pendente estiver pronto, isso deve ficar verde, então cuidado com isso. Isso é feito. E somos verdes. Olhe para isso. Ou a bicicleta é verificada. E o que queremos fazer agora é esperar cerca de seis minutos, algo ao longo de cinco minutos, e então vamos verificar novamente e ver que tudo acontece corretamente. Então é 1157 aqui. Então eu vou voltar como 1203 e vamos voltar a entrar naquele momento. Devemos ter minutos de passeio de seis minutos. Devemos ter uma quantidade de B&B. Lembre-se de 0,05 a cada cinco minutos. E a partir daí devemos poder pagar ou pagar isso até 0 e fazer com que nosso crédito B reflita a diferença. Então eu te vejo de volta em cerca de cinco minutos. Tudo bem, então está quase na hora de verificar o back-end da minha bicicleta. Antes de fazer isso, vou verificar minhas variáveis de estado apenas para ver que as coisas mudaram corretamente. Então vá para componentes. Você verá que o aluguel pode ser realmente falso agora porque ele foi verificado, então isso funcionou bem. E então é verdade, ativo é verdade. Esses funcionaram muito bem. E tudo está funcionando corretamente. Tudo bem, então já se passaram cerca de 78 minutos. Então o que vamos fazer é verificar a bicicleta de volta. Quando fazemos isso e esta transação terminar, eu deveria ter o status da minha bicicleta deve ir ler meus minutos de viagem devem ser preenchidos com quanto tempo eu estava na bicicleta no meu B & B deve ser povoado também. Então, vamos tentar isso. Então, vou clicar em check-in e confirmá-lo no MetaMask. E vamos verificar esse status. Então isso está pendente. Quando isso for feito, devemos ter valores preenchidos. Tudo bem, ótimo. Então, o status da bicicleta voltou para vermelho. Eu estava fora sete minutos no meu B & B fazer é 0,005, o que é certo. Se eu tivesse 12 minutos, eu teria 0,01. Lembre-se de que são 0,005 a cada cinco minutos. Tão ótimo. Então, o teste final aqui é que posso pagar o valor devido e redefinir isso e deduzi-lo do meu crédito B & B. Nosso estado agora é pode alugar ainda é falso porque eu não paguei minhas dívidas. E ativo é falso porque não sou mais ativo na moto. Então, vamos colocar na montagem do 0.005 e vamos tentar pagá-lo. Então envie e estamos fazendo um pagamento de 0,005 e, em seguida, taxas de gás. Então aperte Confirmar e isso vai estar pendente, mas uma vez que isso for feito, meus homens de carona, deve ser em 0. Meu B & B deve ser 0 e meu crédito deve ser deduzido o valor que paguei. Acabou de passar por Reimann, é 0. B&b não é nada. E o crédito B & B é muito assim. Então 0,01 menos 0,05 é 0,095. Então, ainda tenho algum crédito. Ainda posso verificar que outra bicicleta em nosso aplicativo está funcionando maravilhosamente. Então, no próximo vídeo, faremos uma pequena limpeza e vamos adicionar alguns recursos de segurança que não adicionamos desde o início. Depois que isso for feito ou a Apple terminar. Você será capaz de mostrar todo o seu trabalho. Vejo você no próximo vídeo. 9. Como otimizar as verificações de UI e segurança: Neste vídeo, vamos dar os retoques finais em nosso aplicativo. encerrar as coisas, vamos começar exibindo essas mensagens requeridas em nosso front-end. Então, se você se lembra, em nosso contrato inteligente, temos essas declarações requeridas de que, se não forem verdadeiras, então cuspimos esta mensagem. Precisamos exibi-los no front-end. Então, vamos trabalhar nisso. Depois disso, vamos implementar alguns recursos de segurança para que os locatários não possam interferir nas informações de outros locatários e também algumas coisas de proprietários que são realmente importantes. Então, passe por esta lição porque vai haver muita diversão. E, como sempre antes de começarmos com eles, precisamos corrigir alguns bugs. Vamos consertar um simples adiantado e outro mais tarde no vídeo. No primeiro, é assim. Então, se você abrir seu contexto de blockchain, e já deve ter notado isso. Se você abrir seu contexto de blockchain e salvá-lo, esse painel muda para o formulário de locatários de anúncios, que significa que estamos perdendo nosso estado de alguma forma. Então, se você for para o contexto blockchain e salvá-lo, verá que, ei, agora temos o formulário adicionar locatários. Se você for ao seu painel e apenas fizer um console.log, locatário existe, você verá o problema. Então, salve isso. E vou atualizar a página. E vou salvar meu contexto blockchain. Assim que você fizer isso, você vê aqui no console que diz Hot updated, o que significa que Vijay S é Hot Reload aconteceu e então esse valor é indefinido. Você vê logo acima que é verdade. Mas assim que essa recarga acontecer, ela é indefinida. Agora eu tentei encontrar uma boa solução para isso, e estou convencido de que só precisa ser algum bug JS byte ou algum problema com Vijay S que eu simplesmente não conheço, mas tenho uma solução fácil para nós, um que não nos impactará muito. Tem a ver com um plugin que Vijay S usa. Então, se você entrar na pasta raiz e ir para vite dot config dot js. Existe esse plugin react plugin. Então, estamos importando aqui e estamos usando-o aqui com o React. Agora, dentro disso, só precisamos desativar a atualização mais rápida. E você faz isso escrevendo um objeto de chave, atualização rápida, valor falso. Então, estamos desativando a atualização rápida. Se salvarmos isso e agora atualizarmos esta página, realmente atualizamos de qualquer maneira. Você não deveria mais ter esse problema. Então, vou para o contexto de blockchain, contexto, e vou salvá-lo aqui. E vou salvá-lo na minha página, apenas atualiza sem perder o estado. Então, essa é uma solução simples. Adicione isso em seu arquivo de configuração e podemos avançar. Agora, apenas uma palavra de cautela se você estiver fazendo alterações na interface do usuário e quiser vê-las instantaneamente, acho que você precisará reativar isso, mas atualmente terminamos as alterações na interface do usuário. Então você não precisa se preocupar com isso, mas só queria anotar isso. Mais uma vez. Se você encontrar uma solução, por favor me avise. Ou se eu encontrar um nesse meio tempo, vou colá-lo abaixo deste vídeo. Tudo bem, então primeiro, como eu disse, queremos adicionar essas mensagens de erro quando tivermos erros. Então, se voltarmos ao nosso contrato, você se lembra que temos essas declarações requeridas que dizem coisas como Você não tem nada para isso desta vez, você não tem fundos suficientes para cobrir pagamento, coisas assim. Portanto, se o usuário tentar fazer algo que não tem permissão para fazer, ele deve exibir uma mensagem de erro. Então, por exemplo, se eu tentasse pagar, poderia fazer quando eu não tiver nada devido. Então 0.1 e enviá-lo, recebo esse erro aqui no console. Aqui está esse objeto. Por isso, diz mensagem de código, pilha de dados. Tudo isso bom. Então, se abrirmos isso, você verá que temos esse objeto de dados. E se abrirmos isso, há uma mensagem lá dentro que diz que a execução foi revertida. Você não tem nada devido neste momento. Isso é o que queremos exibir na página. Então, para fazer isso, só precisamos pegar esses valores específicos. Então, se eu for fazer o pagamento, que é o que estamos chamando agora, nos meus contextos blockchain. Em vez de erro console.log, vamos dizer Dados de ponto de erro. Lembre-se de que era a mensagem de ponto do objeto. Então, salve isso e vamos tentar novamente. Deixe-me atualizar 0.1 e enviar, e eu deveria ver a mensagem aqui. Execução revertida. Você não tem nada devido neste momento. Então, agora só precisamos exibi-lo na página. Bem, um dos meus pacotes favoritos e react é toast desafiar. Testify é usado para alertar o usuário sobre determinadas ações. E há um milhão de maneiras que ele pode ser exibido. Ele pode deslizar na página. Ele pode fazer tudo isso, mas vamos manter isso simples. Então, se você for testemunhar, reaja deve haver um pacote NPM, mas reaja para testemunhar. É muito fácil de configurar. Você pode ver aqui todas as diferentes mensagens que você pode usar. Você pode fazer spinners. Você pode colocar ícones nele. Você tem cores diferentes, muitas opções. Então, para instalá-lo, basta obter um fio e reagir a justificar ou instalar o NPM. Portanto, pare seu servidor, instale-o e inicie o backup do servidor. No que vamos fazer é exibi-lo através do mesmo contexto aqui, os contextos blockchain. Normalmente, você gostaria de criar um novo contexto para isso. Como um contexto de torradeira phi. Configure isso e use-o apenas para alertar sobre mensagens e erros. Mas se eu começar a fazer isso, teremos mais uma hora de vídeo apenas configurando mensagens de erro. Então, vamos fazer isso fácil aqui. Mas se você estivesse em um projeto maior e quisesse colocar mais tempo nele, é claro que alguém gostaria de usar um contexto separado. Então, se analisarmos nossa documentação para o React testemunhar, vou clicar na demonstração e na documentação. E você verá aqui, vamos apenas verificar a torrada de posicionamento. Na verdade, vamos para o próximo porque isso não é muito útil. Mas o que você precisa fazer aqui é que você precisa colocar este contêiner de torradas no, na página que você deseja exibi-lo. E então você pode chamar a função toast. Então você pode ver isso melhor aqui. Então, Toast dot success, e então você tem sua notificação, o que quiser dizer, e então você escolhe sua posição na página para exibi-la. Você pode fazer um brinde para acessar um erro, um mandado e informações, ou algum tipo de brinde personalizado. Então, vamos começar colocando este contêiner de torradas. Bem, na verdade, isso é importado. Vamos colocar isso na página de totais atuais porque temos os dois formulários lá. Aquele em que creditamos nossa conta, aquela em que fazemos um pagamento. Então vá para os totais atuais. Então, na parte superior, você quer apenas colocar essa instrução de importação, importar contêiner de torradas. Então vou pegar esse exemplo. E vou rolar para baixo e depois na parte inferior. Então aqui está minha função de totais atuais na parte inferior abaixo da caixa, para que eu não tenha nenhum tipo de estilo com ela. Vou colocar que o fechamento automático do contêiner dos pés está definido para oito segundos. Vou mudá-lo para, vamos fazer 3 mil por três segundos. E então temos vários pais aqui. Então, precisamos colocar uma etiqueta vazia. Um na parte superior, um na parte inferior. Meu contêiner de brinde está nessa página. Então, quando é chamado, ele deve ser exibido nessa página. Agora vou voltar aos contextos blockchain, e vou chamá-lo aqui com aquela chamada de erro de ponto torrado. Então, vou voltar ao erro de ponto de posicionamento e brindar. Então, vou tirar esta mensagem de log de pontos do console e substituí-la por esse erro de ponto de torrada, que novamente você encontrará na parte de torrada de posicionamento desta página. Então, para minha notificação de erro, vou colocar dados de ponto de erro, mensagem de ponto. E eu queria entrar no canto superior direito. Então, vamos salvar isso. Agora há mais uma coisa que você tem que fazer. Você precisa importar o CSS ou ele não parecerá adequado ou mesmo funcionará corretamente. Então, basta ir para começar a instalação. E eles não mencionam isso aqui com a instalação, mas você o verá importado aqui. Então, copie isso. E queremos importar isso na página de totais de corrente aérea porque é aí que estamos exibindo esse contêiner de torradas. Então, no topo, traga isso para dentro, salve-o. E vamos experimentar isso. Então, vou atualizar a página só porque gosto de fazer isso. Agora vou colocar apenas o número um e enviar. E vamos ver se recebemos uma mensagem de brinde. Não temos, porque o brinde não está definido. Então, vamos voltar ao nosso exemplo e garantir que pegamos brinde de importação de reatores para disparar. De volta ao contexto de blockchain aéreo, coloque isso no topo. Importar brinde. remover o contêiner de torradas porque não estamos usando isso aqui. Estamos apenas usando dedos dos pés porque estamos chamando o erro do brinde. Então, salve isso e vamos tentar novamente. Então atualize. Tudo bem, e eu vou colocar o número um e enviar, e você deve ver algo aparecer no canto superior direito. Aí está ele. Execução revertida. Você não tem nada devido neste momento. Parece que está pendurado lá por um segundo, mas é suposto desaparecer em três segundos. Mas isso é ótimo. Então, alguém entra e envia isso permitirá que eles saibam que você não tem nada a ver com esta vez. Vamos adicionar um ao nosso formulário de crédito. Então get du colocará a mesma coisa lá. Você pode personalizá-los como quiser. Há um milhão de maneiras de fazer isso. Você vai para isso. Onde está nos reatores desafiam Demo. Há como todos os tipos de coisas que você pode ver o erro de aviso de sucesso da informação. Mas sim, você pode selecionar qual deles você quer ver. E, em seguida, clique em Mostrar brinde e ele mostrará como é. Temas diferentes. Aqui está o tema escuro e o tema de cores. Muito legal se você estiver usando, se você estiver usando promessas, você pode dizer promessas pendentes e depois promessa resolvida. Muitas coisas ótimas. Então, vou pegar isso e adicioná-lo ao formulário de crédito. Então, o depósito. E vou salvar isso e, na verdade, isso não vai erro. Não sei se temos alguma coisa para a torta. Não temos nada para depósito. Mas vamos encontrar outra coisa. Faça o pagamento, receba o locatário , faça check-in e check-out, pois ambos exigem extratos. Vamos voltar. Então, vou remover isso do depósito. Ele irá para o check-in e check-out e adicionará lá. Incrível. Então, se eu tentei verificar em uma bicicleta que não tenho, acho que vou receber um erro. Deixe-me confirmar isso. Check in. Por favor, confira uma bicicleta primeiro. Sim, vamos ver se conseguimos algo lá. Então eu vou escolher, na verdade, deixe-me refrescar apenas para o meu hábito e ir para o check-in. E lá está ele. Por favor, confira uma bicicleta primeiro. Incrível. Então, temos mensagens e nos sentimos à vontade para ajustar isso, como você quiser colocá-lo em um lado diferente, adicionar algumas cores diferentes, fazer um tema escuro, o que quer que seja. Então eu acho que as coberturas de ar exigem declarações. Temos checkout, temos que fazer o check-in adquirir exige, temos que fazer o pagamento. E é isso. Então isso é reagir à justificação ter adicionado. Agora, a próxima coisa que queremos fazer é adicionar alguns recursos de segurança ao ar Smart Contract. Então, teoricamente, se eu tiver endereço de carteira pública de outra pessoa e puder inseri-lo em algumas dessas funcionalidades. Então eu posso conferir uma bicicleta para outra pessoa responsável, dinheiro para a conta de outra pessoa. Posso fazer coisas com a conta de outras pessoas. Não há nenhum cheque para dizer, ei, você só pode interagir com seu endereço. E eu não acho que, em geral nada no front-end você possa fazer isso como eu não acho que posso vir aqui e clicar em checkout e adicionar o endereço da carteira de outra pessoa. Mas ainda assim você quer colocar esses cheques lá. E eu acho que é bom passar por isso só para que você veja que se você for para o contrato da cadeia de bicicletas, deixe-me dar um exemplo. Se eu for ao checkout e souber o endereço da carteira de outra pessoa, posso colocar o endereço deles e verificar uma bicicleta e depois deixá-la funcionando por uma semana e depois verificá-la novamente. E então eles tinham esse enorme equilíbrio eles não tinham parte de correr para cima? Então, gostaríamos apenas de colocar um cheque que diz, ei, você só pode executar essas ações em sua conta específica. E é muito fácil de fazer. Acabamos de inserir um modificador. Então, logo abaixo de Adicionar locatário, vou dizer modificador. Opa. Vou dizer que modificador é locatário. E então eu vou passar um endereço enquanto estiver no endereço. E então você coloca esses colchetes e diz que requer remetente de ponto de mensagem é igual ao endereço da carteira nele. Isso não é verdade. Você dirá que só pode gerenciar sua conta. Então, logo abaixo disso, você tem esse ponto e vírgula de sublinhado. E o que isso significa é continuar com o resto da função. Então, como isso funciona é aqui em baixo. Para esta função de checkout, você adicionaria aqui o locatário. Este é um modificador e você passaria no endereço while at. Nessa é uma maneira limpa de adicionar uma instrução requerida repetível duas funções. Então, quando esta função for executada, ela vai verificar primeiro, se for locatário, ela passará no endereço da carteira e vai dizer, faz o remetente da mensagem, o pessoa que faz essa chamada, corresponda ao endereço da carteira, o que significa que ela só pode modificar sua própria conta. Então, quando você cria um modificador, basta colocá-lo na função. E vou te mostrar como isso funciona em um minuto quando jogamos em remix. Mas precisamos adicionar isso a tudo o que estamos adicionando um endereço de carteira também. Então, vou colocá-lo aqui no check-in. Você só pode verificar em uma bicicleta com seu endereço. aluguel ou o tempo de ninguém mais é interno. Não precisamos nos preocupar com isso. Obtenha a duração total. Você só quer ter sua própria duração. E como este retorna algo, vamos colocar isso logo após o público. E então este também retorna algo e é público. Mas este é o saldo do contrato. Só queremos que o dono faça isso e vamos lidar com isso a seguir. Mas obtenha equilíbrio dos locatários, você só pode obter seu próprio saldo. Coloque isso após o valor devido ao conjunto público. Isso é interno, sem problema. Chamá-lo fora do contrato, pode alugar uma bicicleta, colocá-la lá, depositar. Você só pode depositar através de seu próprio endereço, mesmo que as pessoas gostem que você deposite no deles. Faça o pagamento. Agarre isso no final. Coloque-o lá. Obter locatário. Você só pode obter suas próprias informações. E o locatário existe, coloque-o lá também. Então, tudo isso está fazendo novamente, em vez de colocar uma instrução require repetidamente em cada um deles, estamos apenas colocando esse modificador nesta instrução de função aqui antes das chaves, estamos apenas adicionando esse modificador. Você está modificando a função para atender a esses requisitos. Tudo bem, então esse é o modificador do locatário. Agora temos mais duas coisas e estaremos todos feitos. Primeiro, temos que corrigir um bug. Em segundo lugar, precisamos falar sobre o proprietário. O proprietário deve ser capaz de ver quanto dinheiro é realmente dele ou dela. E eles devem ser capazes retirar os ganhos que eles obtiveram com essas transações. Então, vamos corrigir o bug primeiro. Agora você se lembra que falamos sobre a logística por trás do contrato inteligente. Se alguém depositar dinheiro, ele vai para o contrato inteligente, mas credita sua conta. Então, se alguém colocar US $10 lá, a única pessoa que colocou dinheiro, eles colocaram US $10. Há US$10 no Contrato Inteligente, mas todos os dez são creditados em sua conta. Agora, eles gastam US$5 em uma bicicleta e fazem um pagamento, então ainda há US $10 no contrato, mas apenas cinco deles são creditados com eles. Bem, cometemos um erro ao efetuar o pagamento. Quando fazemos um pagamento, estamos apenas subtraindo esse valor do saldo. Na verdade, não estamos enviando dinheiro para o contrato. Estamos apenas subtraindo-o do saldo no dinheiro que sobrou é o dinheiro dos proprietários. Portanto, não podemos pagar aqui e não podemos usar o valor do ponto da mensagem. Na verdade, nós, na verdade, nos contextos blockchain, quando fazemos um pagamento, estamos enviando dinheiro, esse valor BNB. Então isso é um erro. Não devemos fazer isso. Deveríamos apenas subtrair do crédito. No contrato inteligente, há alguns ajustes que precisamos fazer. Primeiro, retire a pagar porque não há mais uma função a pagar. Segundo, vamos colocar um segundo, vamos colocar um U e uma quantidade. Então, vamos enviar uma quantia. Quando fazemos um pagamento, precisamos enviar um valor que realmente será deduzido do nosso saldo. Então, temos uma quantia aqui. E então vamos mudar esse valor de ponto de mensagem para valor porque não estamos realmente enviando dinheiro, estamos apenas deduzindo do nosso saldo. E isso deve ser tudo. Então, quando executarmos o pagamento, vamos testar isso em um minuto. Vamos enviar um valor e esse valor será deduzido do nosso saldo. Então, como removemos o fator a pagar adicionou um parâmetro de valor uint8, precisamos atualizar nossa função de contexto blockchain aqui e fazer o pagamento. Estamos passando esse objeto de valor, que é como você lida com uma função a pagar. É assim que passamos um valor para uma função a pagar. A única diferença porque estamos trazendo o valor agora como um uint8 e não esse valor a pagar, só precisamos substituir esse objeto valor B & B como o segundo parâmetro ou o segundo argumento. Portanto, certifique-se de atualizar isso no contexto blockchain e depois voltar para o seu contrato. Agora isso segue está perfeitamente no dono. O proprietário, se alguém tiver US$10 e pagar US$5 em sua conta, ele tem US$5 sobras nos outros cinco realmente pertence ao proprietário. Então, precisamos permitir que o proprietário do contrato que basicamente administrará a loja de bicicletas verifique seu saldo. Como quanto custam os lucros deles? Quanto do dinheiro, todo o dinheiro no contrato inteligente, quanto disso é ousado, com base em pessoas cobrindo contas e fazendo pagamentos e recriando sua conta e tudo isso. Então, há algumas maneiras de fazer isso. Pensei nisso. Então, usamos mapeamentos. Você não pode percorrer um mapeamento. Pensei em talvez quando adicionamos um locatário para criar uma matriz e apenas temos uma matriz de endereços que podemos percorrer. Mas realmente não queremos percorrer as coisas porque podemos acabar tendo centenas, talvez milhares de inquilinos e isso vai ser monstruoso taxas de gasolina. Se conseguirmos percorrer 11000 locatários, acho que a melhor maneira de resolver isso é criar uma nova variável chamada uint8, saldo do proprietário. Então, temos saldo de dono. E se você pensar sobre isso, o único tempo que o dinheiro entrará saldo do proprietário é quando as pessoas fazem pagamentos. Novamente, se eu tiver US $10 no contrato inteligente e tudo isso é meu e eu fizer um pagamento de US $5, meu saldo cai para cinco e os outros cinco pertencem ao proprietário. Então, essa é realmente a única vez que precisamos adicionar ao saldo do proprietário. Então, aqui em baixo, onde fazemos o pagamento, vamos adicionar mais uma coisa abaixo disso. Vai ser. Saldo do proprietário mais o valor igual. Então isso será creditado a esse saldo de dono. E então faça backup aqui onde temos o saldo de, queremos que isso seja chamado apenas pelo proprietário. Então, vamos criar outro modificador, modificador, único proprietário. E não temos nenhum parâmetro lá. E podemos exigir que o remetente do ponto de mensagem seja igual ao proprietário. Porque esse é um endereço de carteira. E você não tem permissão para acessar isso. E então faremos nosso ponto e vírgula de sublinhado para executar o resto da função. E usaremos apenas o proprietário no balanço aéreo de aqui no proprietário. Se quisermos adicionar mais duas funções relacionadas ao proprietário, uma para obter sua função de equilíbrio equilibrado ou seu saldo, obtenha o saldo do proprietário. E vamos ver público e vamos torná-lo apenas proprietário e devolver um uint8. E aqui vamos devolver o saldo do proprietário. E então queremos fazer mais uma função para o proprietário retirar o dinheiro. Agora você pode ser como, cara, isso é, isso é arriscado porque o dono pode simplesmente arrancar o dinheiro de todos e correr com ele. Mas isso não é verdade porque o saldo do proprietário é apenas o dinheiro na conta que não é creditado às pessoas. Então, vamos fazer a função. Retirada, saldo do proprietário. Isso vai ser pago e público. E vamos dizer transferência de pontos do proprietário, saldo do proprietário. Agora você vê que temos esse erro aqui. E diz que Enviar e transferir só estão disponíveis para objetos do tipo endereço a pagar e não endereço. Agora podemos corrigir isso apenas lançando este proprietário S a pagar. Então, finalmente, precisamos definir o saldo do proprietário de volta para 0 porque estamos transferindo esse saldo de proprietário, que está configurado no topo. Você foi saldo do dono. Estamos transferindo esse valor para nossa carteira. Agora precisamos definir isso de volta para 0. Portanto, o saldo do proprietário é igual a 0. E com isso, acho que acabamos. Então selecione essa coisa toda e copie-a e vamos colá-la no remix para que possamos testá-la. Vou colá-lo aqui e compilá-lo. E, em seguida, faça isso maior. Tudo bem, então vamos implantar o contrato. E eu vou, vou implantar usando a primeira conta que será o dono. Então clique em Implantar. Em seguida, vamos adicionar um locatário. Então, vou escolher a segunda pessoa. Copie e coloque-o no endereço da carteira. Quer colocar o teste Travis? O aluguel é verdade. Ativistas falsos. Zeros, zeros, zeros 0. Então, clicaremos em Adicionar locatário. E vou ir em frente e verificar uma bicicleta para aquele locatário. A bicicleta é verificada. E agora vou para a terceira conta. Então, será o segundo locatário que copiará isso. Cole-o aqui. E vou colocar algo como Tracy. E vou ir em frente e conferir uma bicicleta. Bem, eu preciso adicioná-los primeiro. Portanto, certifique-se de ter o endereço certo para essa terceira pessoa e adicione o locatário. E depois vou verificar uma bicicleta para aquele locatário. Incrível. Então, temos carimbos de data/hora, poderemos verificá-lo aqui em um minuto. Mas vamos em frente enquanto estamos aqui e depositar algum dinheiro. Então, vou escolher um éter e escolherei o segundo locatário. E eles vão depositar um éter no contrato inteligente. Então, aqui, onde diz depositar, certifique-se de que este é um éter e clique em depositar. Incrível. Então eles depositaram um éter. Se eu verificar o locatário aqui, você verá que eles têm uma hora de início, então as motos saíram e elas têm um saldo. Agora, o que acontece se eu tentar mudar para o terceiro o segundo locatário aqui. E depositar usando o primeiro endereço dos locatários, devo receber um erro. Então clique em depositar. Aqui vamos nós. Você só pode gerenciar sua conta. Então isso é que o modificador de locatário está funcionando. Isso é incrível. E esse é o caso de uso. Então, se estou depositando dinheiro, mas estou fazendo isso de uma carteira diferente da minha na conta de outra pessoa. Isso não deve ser permitido. Isso funciona. Então, vamos realmente mudar para a pessoa certa. Então, vamos realmente pegar o endereço dessa pessoa e depositar um éter também. Então, vou clicar em depositar. E eu não mudei o endereço, então certifique-se de mudar o endereço. Então clique em depositar. Certo. Então, temos que locatários com duas bicicletas verificadas em cada um. locatário depositou dinheiro. Então, em mais alguns minutos, voltarei e verificaremos a bicicleta de volta e terminaremos as coisas. Tudo bem, então antes de verificarmos esses back-end, vamos realmente mudar para o proprietário. E, na verdade, agora, na verdade, antes de voltarmos , verifique os bytes de volta, vamos tentar obter o saldo do contrato com um dos locatários. Então clique em saldo de e você recebe um erro. Você não tem permissão para acessar isso. Obtenha o saldo do proprietário. Você não tem permissão para acessar isso. Então agora vamos mudar para o proprietário e ver o que é isso. Se conseguirmos o equilíbrio , temos um éter, pensei que tinha depositado outro. Vamos verificar nossos locatários e ver. O primeiro locatário ganhou. O segundo locatário não tem nenhum, então não devo ter clicado em depositar para o outro Enter. Então deixe-me fazer isso muito rápido. Ou talvez eu não tenha depositado nada e talvez eu não tenha selecionado o 1 oitavo. Então, vamos colocá-lo no outro locatário que termina em dB. Certifique-se de escolher esse locatário. E, em seguida, coloque esse éter em um e clique em depositar. Um interruptor Alpha de volta para o proprietário. Posso verificar o saldo disso para Eve. Então deixe-me realmente colocar isso aqui para acompanhar. O contrato tem que sair. O saldo do proprietário é 0. O proprietário tem 0. Aluguel ou um tem, tem, tem um éter em laranja são dois, tem um éter também. Ok, então é onde estamos e vamos testar isso. Vamos verificar essas bicicletas de volta. Então, vou escolher esta primeira renderização. Vou verificá-los de volta. Check in. E esse locatário agora tem um Mountain Dew. Então vou verificar a outra renderização. Verifique-os. E então eles devem ter a mesma quantidade. Faça incrível. Em um GAN ou saldo. Mais uma vez, deixe-me voltar para o dono. O saldo deve ser o mesmo e o saldo do proprietário ainda deve ser 0. Então, vamos ver o que acontece quando fazemos um pagamento. Fazemos um pagamento que o saldo do contrato inteligente não deve mudar. Ele deve apenas trocar as mãos para o saldo do proprietário. Então este locatário aqui, aluguel ou dois O's, tanto cinco para muitos zeros. Então, vamos copiar isso e fazer esse pagamento. Então, vou pegar esse valor. Eles têm cinco, fazem quantos zeros, não precisamos vir aqui e adicionar esse valor aqui em cima. Porque agora, na função make payment aceitamos como segundo argumento. Então vou colocar isso e, em seguida, o primeiro argumento foi o endereço da carteira deles. Então, vamos seguir em frente e fazer o pagamento. Portanto, faça o pagamento e só posso gerenciar minha conta. Então, deixe-me mudar para a conta certa. Aqui vamos nós. Vou seguir em frente e fazer o pagamento. E você vê agora do que quando clico em locatários, eles não têm nada a ver. Mas eles tinham que cinco no entanto, muitos zeros deduzidos de seu saldo. Agora esse valor, que cinco, no entanto muitos devem agora fazer parte do saldo do proprietário. Então deixe-me voltar para o dono. Na verdade, deixe-me fazer essas mudanças aqui. Então, o saldo agora para aluguel ou um é tanto 995. Eles tiveram cinco tudo o que for deduzido dele. E se eu mudar para o dono agora, eu deveria ter essa quantia em minha posse. Então mudei para o proprietário. Vou clicar no saldo do e é o mesmo, nada mudou. Foi o que consertamos porque antes estávamos adicionando ao saldo e deduzindo da contagem de Eric, o que é errado. Então, o saldo do ainda é o mesmo. Obtenha o saldo do proprietário, vamos clicar nisso e há esse valor. Então agora o dono tem tanto. E se você adicionar isso com aluguel ou um, voltamos a este para quantos zeros, então sabemos que está funcionando, tudo está funcionando muito bem. E acho que é isso. Nós testamos que é locatário. Testamos apenas os contratos de proprietário e EHR funcionando bem. Então, agora tudo o que temos que fazer é que eles são contratos inteligentes mudados, temos que realmente reimplantá-lo. Então, vamos fazer isso para obter um novo contrato. Isso é muito simples. Basta voltar para o aplicativo, parar o servidor, sair da pasta do cliente para a pasta do contrato. Antes de reimplantarmos, na verdade temos que compilar esse novo contrato. E, de fato, deixe-me copiá-lo daqui apenas para ter certeza de que tenho as últimas alterações. Então copie isso no meu contrato, salve-o e precisamos recompilar, atualizar esta pasta de artefatos com novas ABIs de bytecode, todas essas coisas boas. Então, basta fazer NP x, capacete, compilar. Impressionante compilado um arquivo Solidity com sucesso. Agora vá para sua pasta de artefatos, contrai por alma de pontos de corrente e escolha o ponto de corrente de bicicleta json. A primeira coisa que queremos fazer é pegar toda essa ABI novamente a partir do colchete dois, copiar e colá-lo em nosso ponto de configuração json em nossa pasta do cliente. Pegue tudo isso e cole isso. Então precisamos atualizar o endereço do contrato. Então, primeiro precisamos implantá-lo. Então isso é NP x hardhat run e, em seguida, os scripts cortam o exemplo script.js. E, em seguida, para sua rede, escolha test net para reimplantar. Então clique em Enter. Quando fazemos isso, temos um novo contrato. Em um novo aplicativo. Basicamente. Lá está a corrente de bicicleta implantada neste endereço. Então, copie isso e cole-o no endereço do contrato. Salve e você está bem. Então cd dot dot cd client e , em seguida, yarn execute dev e devemos ter um novo aplicativo. Vou para localhost 3 mil e, na verdade, vou desconectar minha carteira dela para começar, para desconectar essa conta e atualizar a página. Escolha minha bicicleta e diz: Bem-vindo, por favor, insira seu nome e sobrenome. Então deixe-me conectar minha carteira primeiro. Conecte-se. Tudo bem. Digite meu nome para se registrar como locatário. Teste Travis. Enviar. Implante isso. Incrível. Vamos creditar a conta com o 0.1 B & B. Aí está. 0,1 apenas por chutes. Vamos tentar verificar em uma bicicleta que nunca verificamos e recebemos esse aviso aqui. Por favor, confira uma bicicleta primeiro. Isso ainda está funcionando. Agora vamos conferir uma bicicleta e confirmar. E uma vez feito isso, devemos ficar verdes aqui porque suas motos foram verificadas. Ainda pendente. Aí está ele. Somos verdes. Então, parece que nosso aplicativo está funcionando muito bem. Temos nosso painel em ordem. Agora temos cheques para que as pessoas só possam modificar suas próprias contas. E temos mensagens aparecendo para exibir erros que recebemos de instruções require. E isso é tudo que tenho para você. Espero que você tenha gostado muito desse curso. Se você está procurando mais coisas para fazer aqui, uma coisa que seria divertida é colocar um item de navegação aqui, como um item de menu que diz admin, que aparece se o proprietário fizer login. Como eu pensei em fazer isso, mas não quero manter o curso indo e indo e indo. Você já percorreu um longo caminho. Mas se digamos que desde que sou o proprietário, eu implanto esse endereço de contrato, sou o proprietário. E já temos as funções em vigor em um contrato inteligente. Assim, você pode colocar um ou você pode querer adicionar uma função chamada is owner. E então você pode verificar como se essa pessoa é a proprietária. caso afirmativo, coloque um item de menu de administração aqui e quando você clicar nele, haverá dois formulários. Um em que você pode clicar e verificar seu saldo, um em que você pode retirar o saldo e você deve saber 100 por cento como fazer isso porque fizemos isso aqui e fizemos isso aqui. E no contrato inteligente que já está em vigor, já construímos a função. Acabamos de atualizar o contrato e reimplantá-lo, então ele está lá. Então esse é o meu desafio para você. Isso será muito divertido de acompanhar. Mas, neste momento, temos um aplicativo totalmente funcional. Fizemos muito trabalho. Você deve parabenizar-se. Sinta-se à vontade para ajustar isso para torná-lo mais limpo. Adicione mais alguns recursos a ele, alguns CSS melhores, o que quer que você queira fazer, empurre-o para o GitHub e mostre para o mundo. Mais uma vez. Obrigado por pegar este curso e seguir comigo enquanto eu juntei essa coisa. Se você gostou, considere deixar um comentário ou me enviar uma mensagem, me dizendo se você gostou ou se você tem alguma coisa, gostaria de ver feito melhor no futuro. Adoraria ouvi-lo. Então, novamente, obrigado por passar por este curso comigo. Agora fale com você mais tarde. 10. Recursos bônus do Proprietário: Então, aqui está um projeto de bônus para você. O que vamos fazer é criar um painel para o proprietário. O proprietário seria capaz de visualizar o saldo do contrato, seu saldo, o saldo do proprietário e seria capaz de retirar o saldo do proprietário. Então, parece assim. Estou logado como não o proprietário. E se eu for ao administrador do traço, vou ter uma página que diz que o acesso negado. Então, o que você quer fazer é criar uma rota chamada slash admin. E se você não for o proprietário, basta ver o acesso negado. Agora, se você é o dono, deixe-me desconectar isso. E vou conectar a conta do proprietário. Agora, você deve ver um painel. Portanto, esta página é como o painel que temos aqui. Há um título, há alguns cartões de estatísticas e, em seguida, há um formulário. Então é a mesma coisa aqui. Então, se eu voltar ao administrador, tenho um título, ele tem alguns cartões de estatísticas e, em seguida, tenho um formulário sem campos de texto é apenas um botão. E o que faremos aqui é que teremos o saldo do proprietário, teremos o saldo total do contrato. E então, quando retirarmos, retire esse saldo do proprietário para nossa carteira. E como o saldo do proprietário faz parte de todo o saldo do contrato, devemos ver essa mudança para 0,18. Então, vamos experimentar isso. Então, está processando. Tudo bem, então retirei meu 0,01 B&B no saldo do meu contrato agora é 0,18. Então esse é o seu desafio. Se você está meio esgotado do projeto, você tem trabalhado duro nisso e está pronto e nem quer lidar com isso, não se preocupe com isso. É bônus. Mas eu acho que é importante se você puder, fazer isso porque um, um proprietário precisa ser pago, certo? Ele está construindo receita com esses alugueres de bicicletas. Ele precisa ser capaz de ser pago por isso. Segundo, esta é uma ótima oportunidade para você tomar tudo o que aprendeu neste curso e fazer algo sem qualquer assistência. Então pegue todas essas habilidades que você aprendeu e tente fazer isso sozinho. Agora, abaixo deste vídeo, coloquei alguns passos para ajudá-lo. Como alguns passos que você deve tomar para fazer isso. E, finalmente, postei um link para o branch no GitHub com essas alterações de código que você pode verificar, mas não veja isso até terminar. Tente tentar isso. De qualquer forma. Acho que você vai achar muito divertido. Então, tenha nisso.