Vídeo 2 - Desenvolvimento do Home Broker com Next.js

[Música] Olá tudo bem seja muito bem-vindo ao segundo dia da imersão full stack full Psycho eu sou Wesley e se você ainda não assistiu aos vídeos anteriores Eu recomendo que você volte US assista pois hoje a gente vai dar um passo muito importante no nosso projeto prático agora chegou o momento de criarmos o frontend da nossa aplicação usando o nextjs o nextjs é uma das Ferramentas mais poderosas e modernas para o desenvolvimento de interfaces web Ela traz funcionalidades incríveis como server Side rendering static site Generation e oferece uma performance totalmente otimizada além de uma experiência

fluida pro usuário final no vídeo de hoje vamos desenvolver todo o front-end do nosso Home Broker utilizando o nextjs onde poderemos listar e comprar ações visualizar a nossa carteira e acompanhar os gráficos tudo isso totalmente integrado com a nossa api desenvolvida em nestjs além disso iniciaremos a preparação desse frontend para se conectar via websockets permitindo o acesso aos dados em tempo real e atualização dinâmica da interface o Next JS é uma ferramenta Mega Popular que permite a gente criar aplicações utilizando react com um foco Mega grande aí em performance seo e uma arquitetura muito mais

organizada com ele a gente consegue renderizar as nossas páginas no lado do servidor sim o nextjs ele tem uma espécie de um backend pro front end dele e isso faz com que a gente tenha muito mais velocidade para o carregamento das páginas e principalmente aí com mais acessibilidade pro usuário final além disso a gente vai utilizar o ta Wind para estilizar as nossas aplicações de forma Mega prática e assim Mega moderno mesmo a gente vai garantir que a gente tenha uma interface extremamente aí bonita visualmente falando mas também que ela seja muito fácil de a

gente poder customizar o ponto é que ter um front end bem estruturado não é apenas uma questão estética ela é essencial para garantir um sistema totalmente performático e de fácil manutenção a gente sabe que fazer isso da forma certa não é simples porque há inúmeras ferramentas bibliotecas e abordagens diferentes infelizmente muitos desenvolvedores acabam criando aí um monte de solução desnecessária deixando sistemas aí muito mais lentos mais pesados e comprometendo realmente a experiência do usuário final agora o nosso objetivo aqui é evitar exatamente essas armadil Ilhas e mostrar o caminho aí bem correto para que você

possa construir um frontend bem eficiente e limpo eu sei que para alguns trabalhar com frontend reaction nextjs pode ser algo novo desafiador principalmente se você é uma pessoa que nem eu do mundo do backend mas eu quero que você fique aí tranquilo porque a gente vai ser o mais didático possível mostrando aí tudo passo a passo e mesmo que você não tenha experiência PR essa é uma grande oportunidade para você aprender algo novo que certamente vai poder te ajudar na sua carreira ou agora mesmo ou até mesmo no futuro saber um pouco de tudo realmente

é sempre muito bom e eu tenho certeza que você pode se surpreender com que a gente vai construir junto aqui e falando em oportunidades dá só uma olhada nesse depoimento de um dos nossos alunos que realmente conseguiu transformar a sua carreira com que ela aprendeu no nosso curso full pych que a gente vai lançar logo em breve aí trabalho na área de programação há mais de 10 anos eh acabei ficando digamos assim estagnado na minha profissão né acabei me acomodando com as tecnologias que eu conhecia na época né eu me sentia meio que por fora

do que tava acontecendo no no mercado né Foi aí que eu percebi que não adiantava só conhecer uma tecnologia nova eu precisava conhecer técnicas novas abordagem novas e melhorar também a soft Skills né E foi aí que eu percebi que eu precisava algo a mais na na minha carreira e aí que eu conheci o pessoal da full pyle a primeira vez que eu tive contato foi através do YouTube no ano passado mas depois que eu olhei a grade eu fiquei eu tive certeza que seria um curso que agregar bastante né e eu vi que o

que se apresentava ali tinha tudo a ver com com a minha carreira com aquilo que eu precisava e com o momento do com meu profissional hoje sim hoje eu posso dizer que eu tenho essa segurança coisas que antes eu não fazia nem ideia por onde começar hoje eu já sei onde é que eu vou buscar que que eu vou fazer hoje eu me sinto mais seguro nesse sentido eu tive a certeza que seria um curso que agregar bastante né e eu vi que era muito mais simples colocar em prática aquilo que que o mercado tem

a oferecer né E só faltava eu acho que realmente uma didática para que eu pudesse entender a as metodologias o curso full pych ele me dá segurança hoje hoje sim hoje eu posso dizer que eu tenho essa segurança coisas que antes eu não fazia nem ideia por onde começar hoje eu já sei onde é que eu vou buscar o que que eu vou fazer hoje eu me sinto mais seguro nesse sentido é hoje eu tô numa posição de de liderança sou c na empresa a minha dica é vai atrás aprende uma coisa nova porque a

pior coisa que pode acontecer é tu aprender algo novo bom agora que você entendeu o que que a gente vai fazer no dia de hoje bora ir pra tela do computador do luí Carlos porque é ele que vai pilotar o desenvolvimento de todo esse front end juntando nextjs react ta Wind e todos esses conceitos de server Side rendering static site Generation e um monte de coisa então bora lá pra máquina do Luiz salve des beleza Luiz Carlas na área então vamos começar a construir o nosso front end uma vez que já temos a api do

Home Broker api rest prontinha Que bom ter você aqui comigo você continua nessa jornada com a gente aqui na imersão full cycle nós vamos usar agora nextjs react para criar um frontend muito bonito e você vai se surpreender com o resultado E nessa aula vai ser legal porque nós vamos ver as duas aplicações funcionando em conjunto né que até um trava línguas nest E nextjs então simbora lá vamos começar pela configuração de ambiente eu falei muito disso lá na aula um então se você não assistiu Eu recomendo que você assista inclusive lá tem dicas valiosas

pro seu ambiente de trabalho e também pros seus estudos você vai ter um ambiente muito produtivo mas na verdade o que a gente vai precisar aqui nessa aula vai ser o node JS e o DOC que nós já usamos na aula passada então nessa aula que nós vamos montar aqui o nosso frontend as tecnologias utilizadas vão ser essas aqui obviamente para poder trabalhar com frontend nós vamos usar muito JavaScript e typescript na verdade mais typescript do que JavaScript e o reactjs que vai ser o nosso protagonista juntamente com next ele vai permitir que a gente

crie essas aplicações com interfaces ricas através de componentes e nós vamos trabalhar com o novo recurso do react que é o react server components a gente vai conseguir fazer os nossos componentes do lado do servidor e ter uma série de benefícios em cima disso nós vamos falar disso daqui a pouco e como que nós vamos estilizar as nossas páginas eu vou utilizar o twind CSS que é uma biblioteca CSS muito famosa e o flowbite que é uma biblioteca de componentes já prontos com tewi indice SS então a gente já tem ali eh botões componentes de

formulário modal e etc vai ser muito tranquilo para que a gente crie todo o nosso design desse home broker e obviamente aqui vai entrar o websocket depois mas o websocket nós não vamos ver nessa aula tá vai ser na aula seguinte que nós vamos dar continuidade fazer integração com websocket tanto do lado servidor quanto do lado do cliente então nosso desafio nessa aula é justamente criar algumas páginas nós vamos criar a página de listagem dos ativos então o usuário Entra lá vê todos os ativos de disponíveis ele pode escolher algum para poder comprar ele vai

poder ver os ativos da carteira dele e nós falamos isso na aula anterior nós não estamos trabalhando com autenticação Então nós vamos ter uma forma ali para poder facilitar o nosso teste envolvendo a carteira que tem essa relação com os ativos também o usuário vai conseguir ver as ordens de compra daquela cara envolvidas com aquela carteira ali então consigo ver os ativos que eu estou comprando que eu estou vendendo com Qual é o status dele se tá pendente se tá fechado se tá negociando enfim e tem a página de compra e venda de ativos essa

página aqui é interessante porque ela vai ter o formulário você vai poder criar novas ordens de compra e venda e também o gráfico para poder acompanhar as informações daquele ativo que você escolheu em tempo real Então nós vamos utilizar esse camaradinha chamado de nextjs né que tá bombando na comunidade de tecnologia uma das tecnologias mais usadas de forma geral ele foi criado em 2016 e uma coincidência que o criador dele é o mesmo criador do socket io Guilhermo R interessante né Ele é bem reconhecido na comunidade cria várias bibliotecas e outras ferramentas que ajudam demais

principalmente a comunidade aí do JavaScript né então a ideia do Next é que a gente consiga criar aplicações web usando reactjs mas fazendo renderização do lado do Servidor ou seja utilizando o conceito de server Side rendering Essa vai ser a principal ideia dele então quando a gente pega um next da vida aqui tá o funcionamento básico de como que as coisas acontecem quando o usuário acessa a página ele requisita uma página então isso vai lá pro backend do Next que na verdade vai ser um servidor node e aqui vai tá o react rodando do lado

servidor então como eu estou do lado do servidor eu posso acessar bancos de dados posso acessar uma IPI externa qualquer coisa privada que eu quiser É seguro fazer isso então eu já posso pré renderizar um HTML ou renderizar ele 100% e acaba se devolvendo Então essa página pro usuário Então a partir dessa renderização do lado do servidor ao invés do modo natural do react que é jogar toda a responsabilidade pro browser né a gente consegue fazer uma série de otimizações paraa experiência do usuário que está acessando o sistema que tá acessando essa página né E

nem sempre foi assim o Next foi evoluindo ao longo do tempo então esse recurso de server component Inclusive é o suprassumo da evolução que a gente tem tem no momento para que nós consigamos entregar cada vez mais páginas melhores e mais rápidas pro usuário que é isso que ele exatamente quer né então Eh quando nós estamos trabalhando agora de forma atualizada com a versão eh 15 do Next pode ser a 14 também nós trabalhamos com esse conceito então nós temos dois tipos de componentes nós vamos ver isso aqui durante a semana nós temos o componente

server que ele é 100% renderizado do lado do servidor e o componente client que não significa que ele só é renderizado no Browser ele é pré renderizado no servidor e a parte que o do lado do servidor ele não consegue manipular acaba indo lá pro browser pro browser poder carregar o JavaScript dar toda a interatividade pros componentes que é o natural do react que roda no Browser mas o legal disso é que quando eu faço essa separação então esses componentes server Ele eles não acabam gerando JavaScript que vai lá pro browser então eu acabo tendo

menos JavaScript lá quanto menos JavaScript menor o JS que tem que ser carregado lá consequentemente eu tenho carregamento mais rápido e essa separação aqui permite também que eu faça Cash desses componentes servers então às vezes eu tenho milhares de acessos simultâneos na minha aplicação se aquele componente não precisa mudar D Eu já guardo o HTML dele gerado isso faz com que a gente tenha uma performance inimaginável E além disso a gente vai ter outros benefícios aí para poder eh fazer a geração desses componentes servers Enfim então lembre-se dessa lição né aqui é como se a

gente tivesse lá no Karate Kid com o sor miag o Daniel San E se a gente fosse falar aqui da regra de ouro para que você tenha uma boa aplicação next é você saber de fato quando usar um componente client e saber usar um componente server é saber mesclar os momentos disso na sua aplicação não seja eh já prematuro de jogar tudo para client Como é o comportamento padrão de um react porque você tá perdendo os benefícios da ferramenta tá o que nós devemos entender é que o Next tem um lado back que vai atender

as necessidades do front E aí você pode livrar as suas apis de ter que ficar toda hora se importando com tudo que o front precisa Então nós temos aqui o backend do frontend E você vai ver os benefícios disso ao longo da aula e ao longo da semana também deixo aqui também a documentação do nextjs de uma olhada aqui no showcase para você poder olhar quantas empresas estão utilizando e empresas Andes né a gente tem aqui nik em Open ai tudo que você manipula lá do chat GPT acaba sendo next enfim tá para que a

gente Então trabalhe com next como eu já falei é necessário node JS aí eu vou usar aqui então o npx do node para poder fazer esse comando aqui ó Create next app que é o cli que ele vai puxar para poder gerar novas aplicações next e a você dá o nome pro seu projeto ele vai perguntar aqui se eu quero usar typescript é óbvio que sim também o TN CSS que vai ser a Lib de CSS Quero trabalhar na passa source com APP router com turbo pack não é necessário que é uma forma ali dele

e gerar os bundles e etc uma ferramenta que a própria vercel também criou é que é essa empresa que mantém o Next por trás criada pelo guillerm rout e agora ele vai fazer aqui a instalação Então na verdade para desenvolvimento Eu só preciso do react react Don que eh react no afinal das contas mais separado em duas libs e o Next em si se você já tiver tido uma experiência com react não é necessário você iniciar um next do zero você pode colocar na sua aplicação que você já tem e colocar esse comportamento aí do

lado servidor Beleza então vamos abrir aqui no vs code E o restante das dependências ali é tudo para desenvolvimento mesmo é mais coisas de tailwind do que de Next no no final das contas tem o Wind e typescript então tá aqui a nossa aplicação como rodar o npm Run Dev ele vai rodar aqui na porta 3.000 tem que tomar cuidado depois porque o Next O nestjs roda na porta 3.000 também mas isso aí depois a gente faz a resolução disso então vou rodar aqui um local na porta 3000 ele mostra ali as boas-vindas aí você

pode aprender mais tem exemplos tem aquela página que a gente estava documentação e etc o Next pega tudo que tá aqui na pasta source App ele compila pra pasta PN gera ali o servidor node e vai servindo as coisas daqui é tudo que eu vou fazendo aqui na pastinha app vai causando uma mudança na recompilação ele faz o hot Reload né toda hora fica vigiando os arquivos aqui e recarrega novamente se você fizer alguma coisa errada ele vai apontando tá e eu não quero falar muitos arquivos o projeto tá todo montado né o Next é

legal porque ele te dá esse projeto todo aqui vai adivinhando muitas coisas que você vai fazendo ele segue aqui um padrão e a gente vai vendo isso durante a aula tá aquela página que foi renderizada é essa aqui tá página home é um componente react esse aqui é um componente server a gente pode ver que no código fonte da página veio tudo 100% no react convencional só viria na verdade o b com div e seria montado ali com JavaScript e o componente estaria dentro do próprio javscript aí a diferença justamente pra gente ter um uma

renderização do lado do servidor e aqui esse Class name são as classes né porque esse aqui é o estilo do próprio react de você misturar o código junto com as tags HTML então aqui é o Class name que vai acabar virando o Class com as classes do te Wind Então essas classes utilitárias né porque o trabalha com utility first que é um design utility first é um design pattern para CSS que a gente acaba gerando essas classes utilitárias que tem uma normalmente uma propriedade pode ter mais de uma Mas a questão que a gente não

tem aqueles efeitos em Cascata que tem ser com design de CSS né você vai criando aquela herança afeta um ancestral e acaba quebrando a aplicação Então os Class name vão acabar ficando grandes mas a gente tem classe de tudo que é jeito para que a gente tenha esse ajuda aqui do vest code você tem que instalar a extensão do tewi né então extensões necessárias para essa aula te ind SS que é mantida pela própria equipe da tewi Wind S lint que eu já tinha apontado na aula anterior mantido aqui pela Microsoft porque a gente tem

ex lint ali e ele vai mostrar coisas que a gente tá fazendo no código melhorando a nossa qualidade né de programação eh o prer para alinhamento também é importante tá e rest client que talvez a gente faça algumas chamadas http a gente já fez na aula anterior se precisar criar um arquivo aqui http esse arquivo aqui ajuda bastante tá então show de bola com isso aqui feito nós vamos começar então a desenvolver o nosso projeto é tudo que a gente vai colocar em relação às páginas tem que ficar nessa pasta app é a partir dela

que o Next vai olhar o roteamento O que que está acontecendo Então esse page.on tsx é a página raiz quando eu acessar ali o Barra do meu site o layout tsx é um outro componente que ele vai envolver todas as outras páginas então hml se eu tiver 1 milhão de páginas aqui vai circular elas com HTML com esse B beleza nós podemos usar aquelas classes utilitárias para poder montar todo nosso design a gente vai usar um tema Light n vai ficar tudo bem bacana mas eue Flow gentee visuais então por exemplo eu tenho aqui um

um acordeon eh vou ter beds botões então ele usa as classes utilitárias do tewin facilitando a nossa vida tá então vamos lá pra gente poder usar esse camaradinha aqui nós vamos fazer o npm install Flow byte nós vamos instalar esse typograph que vai cuidar da parte de textos parágrafos para que a gente tenha ali letras mais bonitas e o flow byte react porque tem o flow byte só que funciona sem o react em si então tem a parte dele para react tá agora tem um arquivo aqui que é o twind config que é o arquivo

que o twind configura onde que ele vai olhar essas classes utilitárias porque que ele vai fazer Tem um monte de classe árias ele não vai gerar um CSS de produção com todas ele vai varrer todas as páginas por isso que a gente tem aqui esses tanto de extensões e tal ele vai varrendo ele vai procurando aonde que essas classes utilitárias estão e quais estão sendo utilizadas então ele gera ali um CSS somente com as que estão utilizadas então Eh nesse Manifesto aqui nós vamos importar o flowbite from Flow Byte react T Wind e aqui em

plugins Eu Vou Chamar esse flowbite plugin que ele vai ser um plugin para que o flowbite entre nessa história também e o flow bite typography que vai cuidar ali da questão das Letras então a gente importa aqui do typograph e aqui é só passar ele tá show de bola ele tá chiando aqui porque ele tem uma tipagem Na verdade ele não tem tipagem com o typescript esse arquivo aqui é um arquivo typescript tá então aqui a gente vai colocar que que eu vou esperar um erro falar assim ó Flow Bite typography has not Type que

ele não fica chiando ali com a gente aquele comentário ali diz pro typescript desconsiderar aquela parte não que vai causar erro né mas às vezes a gente vê ali e pensa que tá com um problema pronto eh deu certo agora eu quero chegar aqui nesse Global CSS que é aqui que ele vai importar da base do te Wind E aí ele coloca aqui algumas variáveis de CSS né configurando um tema Dark aqui aí eu vou testar a gente vai ver que a página agora aqui do Next ela vai ficar totalmente Branca né mas até que

o layout ficou bonitinho não ficou feio não beleza o próximo passo vai ser configurar aqui o layout eu quero que a gente tenha o nosso sistema ocupando 100% da largura e altura então é importante configurar aqui o b tá eh eu não vou utilizar nada dessas Fontes que estão aqui que fonte de letra que o Next já coloca Então vou tirar isso aqui isso aqui também aqui ó tá o Global tá sendo importado né depois ele monta toda a aplicação conforme tem que ser aqui eu vou tirar tudo isso aí eu vou colocar a classe

H screen Flex e Flex Call Então nós vamos ocupar 100% da viewport tô utilizando viewport em vez de pixels ou porcentagem E aí o Flex layout com o Call que nós conseguimos organizar a nossa aplicação tá Depois a gente vai fazer outras coisas aqui então agora essa página aqui a gente poderia chamar ela que ela é a home né ela vai ser a listagem de ativos eu vou chamar ela de assets list que aí fica fácil de saber O que que tem dentro dela então tiro toda essa dívida aqui e vamos começar a montar aqui

o nosso design então vou ter uma div que eu tenho que ter um elemento raiz aí vou usar aqui o Flex mais uma vez com Flex Call e a eu quero ter uma T ar que vai ser importante para que a gente use uma classe chamada de Format que ela tá sendo importada ali pelo Flow byte e aqui eu coloco assim ó H1 minha ou ativos né Acho que ativos eu só tô pensando se a gente essa página inicial seria interessante a minha se fosse listar a minha carteira eu acho que eu vou colocar aqui

pessoal my Wallet tá acho que eu vou começar pela minha carteira que vai ser melhor mas aqui o princípio é o mesmo minha carteira Beleza então agora tá ali minha carteira certo tá aí eu quero também que agora tenha a parte que nós vamos colocar a tabela de de listagem dos ativos aqui vai vir o table mas o table já vai ser um componente do Flow byte a gente importa ali do Flow byte react e essa div que está envolvendo eu quero colocar para que a gente tenha um comportamento responsivo para ter um overflow X

alto preenchendo toda a largura disponível né então e no eixo X quando a telinha tiver muito pequena a tabela só vai ultrapassar com scroll nessa div se eu não colocar isso vai quebrar o design a tabela vai ultrapassar e vai ficar estranho então aqui nessa table nós vamos colocar um table head pro o cabeçalho e um table Body nós temos todos os componentes e não vai ser só para poder usar o flow byte porque a tabela vai ficar bem diferenciada também tá aqui eu vou fazer vou usar o emit que já vem aí no vs

code vou usar o componente table Cell x 4 que vão ser quatro colunas que nós vamos colocar aí que eu importo ele eu vou ter a coluna com o nome do ativo a cotação dele como ten a minha carteira tem a quantidade que eu tenho na minha carteira e ação para comprar ou vender vamos ver como que tá ficando isso aqui olha só Legal né a gente pode ver que no final das contas ele vai transformar numa tabela comum né Mas já tem aqui uma série de classes e etc Inclusive a gente pode até melhorar

essa tabela aqui no table posso colocar um Class name com um h Full para forçar ele sempre a preencher 100% um Max HF para falar que o máximo é 100% e um table fixed aí olha só se eu tiver aqui a minha tabela tá vendo que ela do overflow ali tá entrando em Ação então eu não tenho a minha página além aqui dos 100% né vamos voltar para cá beleza Além disso aqui a gente poderia colocar aqui em cima um Space y5 a gente vai ter cheio dessas classes spaces aqui com vários números que ele

vai fazer no tanto pro eixo X ou Y então no caso do Y ali eu tenho um margem top e Bottom E se eu colocar aqui um C eu vou ter um distanciamento então como eu tô usando os elementos ali vou ter uma distância de um pro outro tá vendo que interessante esse cinco Na verdade ele coloca aqui um cálculo ali usando Rem né que é bem mais eficiente que pixels então trabalhar com tawi dá essa produtividade à medida que você vai acostumando com essas classes e Flex grow aqui também é importante para que ele

ocupe 100% também que vai fazer um Flex grow igual A1 tem o formato agora vem aqui o b Na verdade até aqui no layout a gente pode colocar aqui uma div envolvendo esse Children que onde as páginas são é o filho do Rot layout tem uma classe chamada de container porque ela não ocupa 100% ela vai usar medias caries ali pros tamanhos com o MX alto que vai aplicar uma margem eh ali no eixo X alto pros dois posso colocar inclusive até um PED em X4 Toda vez que você vê X é eixo X Y

eixo Y então aqui um PED left right com um Flex e um Flex grow também que isso aqui sempre vai garantir que a gente tá ocupando 100% agora como é que vai ficar legal vendo e aqui também é o que eu tô com zoom né Daqui a pouco vai entrar aqui em cima um Nav bar vai ficar em cima desse minha carteira show de bola a gente consegue ver que esse componente também é um componente server porque ele vem 100% dele lá ó tá vendo minha carteira quantidade e tal ele já vem totalmente desenhado se

a gente até desativar o JavaScript do browser não iria trazer demérito nenhum ele conseguiria rodar né não tem nenhuma interatividade ainda no meu projeto no preciso de nem de react no momento do lado e do browser ali a gente tem uma aplicação muito comum por enquanto vamos estilizar agora o b onde vão ter os dados então para cada linha que eu tiver tem o table Row então a gente tá usando tudo né do Flow byte então eu tenho a linha e aí eu vou ter aqui o table Cell que eu posso usar oit também vezes

4 que que é a coluna então aqui nós vamos ter é o ativo Pera aí que eu fiz errado aqui que ele não vezes 4 agora sim importa aqui aí eu vou ter aqui o ativo a cotação quantidade e aqui vai ser um botão que também vem lá do flowbite já tá usando bastante coisa que agora dá até para colocar um por linha aqui eu vou colocar comprar barra vender vamos ver como que tá ficando olha só tá voltando para cá nesse botão a gente tem uma cor tem várias cores que eu posso colocar eu

quero que o botão fique Light mesmo depois a gente vai acabar mexendo nele vendo aqui o layout tem uma coisa que eu esqueci porque a tabela e isso tudo aqui tem um estilo melhor tem uma configuração que tá faltando aqui no twind config que eu esqueci que aqui eu tô colocando o Plugin do Flow byte mas aqui em content eu preciso fornecer um Slow bite content para que ele jogue toda a estilização acho que não precisa reiniciar Agora sim ó Eu tinha até mudado ali a cor do botão que tava realmente estranho ele não tinha

nem pego Azul então agora Deu uma mudada ele centralizou as informações Então vou jogar isso aqui paraa Light a gente tem esse design totalmente Light aqui show de bola então agora com isso aqui feito nós já podemos pensar em como fazer a integração lá com nest né Vamos pegar aqui o nest nest API para não confundir ficar confuso a na hora que eu trocar de tela né eu tenho aqui uma extensão chamada de picque Então vou jogar um nest para vermelhinho e aqui eu vou rodar o docker compose Up para subir com o mongo Na

verdade o meu docker desktop nem tá rodando aqui deixa eu iniciar ele ele vai iniciar e a gente vai conseguir rodar ali o comando para poder levantar o Mongo e rodar a nossa api rest aqui Restart integration beleza aí aqui agora então eu venho com doa comose up ele vai rodar o mongo para mim e eu no outro terminal Posso rodar com Start Dev então vou ter aqui mpi rodando na porta 3000 aí que é o problema né Por quê eh eu não posso ter duas aplicações ocupando a mesma porta então agora essa aqui eu

vou colocar um port igual a 3001 porque aí ele já vai rodar na 3001 e aqui eu posso deixar a porta Vamos colocar assim é prioridade da aplicação que foi criada primeiro então se o nest veio primeiro ele que vai ocupar a porta 3.000 nós temos aqui na nossa api vamos pegar aqui os ver se eu tenho os ativos ainda aí se eu tenho carteiras Cadê o meu get wallets aqui ó tenho duas três tenho duas carteiras então tenho carteiras vamos ver se a gente tem ativo nessa primeira aqui então vou passar o ID por

enquanto para cá ó a gente tem um ativo nela Tudo bem então tá ótimo nós vamos fazer essa chamada lá no nosso frontend para poder buscar agora eh o que a gente tem que entender é que todo esse processamento que tá acontecendo aqui nesse componente ele é do lado do servidor né então eh a gente vai fazer a chamada e já montar toda a página 100% dela do lado do servidor eu vou criar aqui uma função para não fazer ali dentro só para poder organizar Export ayc function get my Wallet eu tenho que passar aqui

o Wallet ID E aí eu vou usar o fat api aí aqui já vem outra dica importante sobre o Next e eu posso usar a axios que trabalha dos dois lados tanto do lado Fronte quanto do lado back ali com o JavaScript posso posso usar xpto htp posso Mas você vai est perdendo melhorias que o fet tem que foram implementadas pela versel a gente consegue trabalhar aqui Com cash várias outras coisas tá então é muito recomendado que você use o fet Então a gente vai fazer aqui um http 2 pontos barra barra local host na

porta 3000 Barra e wallets barid né que já vem usar assets ali a gente fez inclusive no final da última aula até um uma mudança ali como o Jon tava sendo gerado então aqui vem a resposta com a wait e eu posso retornar um response Jon então o que que é retornado aqui um Promise n né vai ser ruim usar isso aqui embaixo sem tipagem Então o que eu gosto de fazer nas minhas aplica é por exemplo criar um Model ou arquivos separados e etc para poder modelar como a gente tá recebendo as coisas então

aqui vai ser só um arquivo de tipagem ele é descartado no momento da compilação então a gente pode colocar assim ó Export Type asset que que o ativo tem ele vai ter o ID vindo lá do Mongo o nome o símbolo vai ter o preço que é um número e a gente não pode esquecer da do image url que lá no banco de dados tá só image mas nós formatamos já com o endereço que já vem tá então eu tenho também Wallet Que que tem na Wallet tem o ID que é aquele uid todo a

gente tá usando para tudo assim tem os assets né Vamos pegar aqui que a gente tem no final das contas se eu fizer a chamada a gente só tem um ID os assets que é uma coleção dos assets e do share Então vamos lá e aqui vai ser assets que vai ser uma coleção de Wallet asset não vou colocar os assets direto aqui então Vamos colocar aqui Export Type Wallet asset w Wallet asset vai ter o ID dele também vai ter Qual é a Instância do asset e o shares que é a quantidade Então pronto

aí aqui agora eu posso criar um nome ess que vai ser um Wallet né percebo aqui não uma coleção de wallets mas um Wallet só então eu posso tornar esse componente aqui um ayn e falar que Wallet é igual a get my Wallet passando o ID Mas de onde vem esse ID aí que nós temos que tomar uma decisão como nós não estamos trabalhando com autenticação então e melhor passar esse ID aqui de alguma forma se eu tivesse totalmente autenticado não tinha necessidade nenhuma né o usuário estaria relacionado com a sua carteira e o próprio

sistema iria capturar para poder ficar fácil aqui eu vou colocar um Wallet ID como um Carry parameter E aí nós pegamos essa informação né que fica eh mais fácil eu não quero nem criar aqui um um barra passando esse ID aqui porque afetaria a estrutura do roteamento do Next né porque já facilita se você depois quiser colocar autenticação se eu colocasse um parâmetro daquela forma ali eu teria que colocar assim ó e Wallet ID entre colchetes e colocar um page tsx é assim que o Next identifica as páginas e também faz roteamento a partir do

nome das pastas né Se eu colocar aqui página 1 agora eu vou ter um barra página um então não quero fazer isso então eu vou fazer aqui o seguinte aqui nessa página que eu estou criando Eu recebo um search patters que vai ser do tipo search PS isso aqui mudou inclusive da versão 14 para 15 é um Promise que vai ter vou colocar Wallet ID com und vou utilizar aqui me cas não aí aqui tá faltando uma chave não que que eu esqueci Ah tá faltando Na verdade o sinal de menor Então é isso aqui

que eu recebo para poder capturar o parâmetro então eu posso pegar o Wallet ID já desconstruido fazendo um a ait no search pars Então esse sech pars ele é uma Promise ele vai fazer lá a captura dele né pega que a gente não tá nem capturando aqui tá então eu passo esse Wallet Aid para cá então vamos fazer um console Log em o Wallet que é o Wallet que eu peguei e eu não posso esquecer de colocar um await aqui né Vamos lá aí eu tenho que vir aqui no nest pegar um ID para poder

brincar então aqui agora vai ser interrogação Wallet ID é igual Deixa eu tirar assim ah na verdade é 3.001 né Eu só coloquei um conso log E aí tem que ficar claro uma uma coisa que tá vendo que o próprio next isso veio a partir da versão 15 ele coloca que esse console log ele foi lá do server ele só jogou aqui por conta que a gente tá em desenvolvimento né mas é um conso log ele fica aqui no terminal também ele só mostrou ali no browser para poder ficar fácil de ver então eu consegui

já capturar essa informação lá então uma vez que eu tenho ele tipado capturei eu posso fazer aqui uma interação de Wallet P assets pmap para poder criar todas as minhas linhas então recebo aqui Wallet asset na verdade dá para fazer direto assim aí aqui tá sobrando essa tem mais um parêntese na verdade e a chave tá ok Deixa eu passar isso aqui para baixo isso aqui fechou com essa fechou com essa pronto a aí ele vai me dar um aviso que eu esqueci de colocar a propriedade aqui porque cada elemento desse ele consegue diferenciar aqui

é o índice ali do elemento que eu estou dentro de um Array né então posso passar aqui sendo qualquer valor único então passo a própria k então aqui ó consigo colocar agora Wallet asset asset p name aqui vai vir em reais né Tá trabalhando dessa forma então Wallet asset P asset pon Price a quantidade vai ser Wallet asset P shares e ainda depois a gente vai usar isso aqui para poder criar um link para poder fazer a compra e a venda né então agora olha só que legal Amazon 194 eu tenho 88170 dessa empresa a

gente olha aqui pro código fonte código fonte veio 100% lá do Servidor então aqui que a gente tá tendo ganho porque eu estou diminuindo JavaScript do browser quanto mais eu diminuir melhor vai ser pro usuário eu consigo criar estratégias para poder otimizar o carregamento das coisas Então pronto já tenho aqui o meu primeiro resultado agora nós vamos dar uma refinada nesse table Row eu quero agora mostrar os ativos de uma forma mais bonita Então eu coloquei aqui algumas imagens na aplicação do nest poderia ser lá no next também não tem problema mas é que eu

tenho imagem aqui do símbolo da Amazon da Sales Force Google coca-cola McDonald's do Mercado Livre Facebook o meta né em a Nvidia eu quero criar aqui a gente tá simbolizando assim né [Música] que as imagens como a gente consulta os ativos ele tá formatando aqui eu tô colocando nessa aplicação enfim Tanto Faz aonde seria colocado Mas eu posso servir essas imagens através desse comando aqui o npx né que sempre busca qualquer biblioteca registrada lá no npm.org vai pegar o serve que é um servidorzinho node que a versel Criou Você pode servir qualquer coisa com ele

aí você passa Men L coloca aqui o endereço tô usando aqui a TCP local host na porta 9000 com a pastinha assets Então agora que ele servir aqui se eu abrir aqui o endereço olha só ele mostra ali um index né da pasta eu tenho acesso a tudo né Então pronto agora voltando para cá aqui nesse nome do ativo eu vou fazer o seguinte aqui nessa coluna eu vou colocar uma div a eu vou ter nessa div interna a imagem si e o símbolo e nessa outra as informações do ativo Tá Na verdade eu tô

falando aqui do símbolo né a gente pode usar um Alt na imagem só para poder então aqui vai ser a imagem e aqui vai ser conteúdo pro caso da imagem eu posso usar usar um componente que inclusive ele já tava na página raiz que é o image do próprio next tá importado aqui ó Então vamos colocar que o Source vai ser o Wallet asset asset pimage URL aí eu posso colocar o alt como símbolo eu quero já determinar uma um tamanho de 30 de altura e largura para ficar bem pequeno e e legal dessa desse

componente de imagem é a otimização que ele vai fazer a gente vai ver isso daqui a pouco né não é apenas Ah tô usando um um componente do Next à toa tá aqui nós vamos colocar dois spans porque spam não tem um um estilo mais forte a gente pode fazer o que quiser então aqui vai Wallet asset P asset pname eu duplico e aí vem o sim a ele vai dar um erro vai falar assim olha inválida propriedade né se local host não está configurado como o endereço de imagens no next config JS n o

que que vai acontecer como ele vai renderizar isso do lado do servidor então ele faz o download da imagem e guarda local para poder fazer uma otimização ele ele transforma qualquer imagem de png JPEG gif pro webp que é um formato de imagens criado pelo Google que é otimizado que é muito o Google utiliza esse formato o tempo inteiro né então ao invés dele ficar buscando sempre nas próximos nos próximos acessos ele só busca o que tá local Então isso é um risco né porque você tá fazendo download pode tá fazendo download de outra coisa

eu preciso passar a configuração aqui de images domain colocando local host como o endereço confiável tá aí agora V aguardar aqui aí nós só temos que ajustar os elementos e a aplicação de classes de CSS né então vamos colocar aqui ã um flex com o Space x de um porque eles vão ficar alinhados na mesma linha né aí aqui na imagem eu vou colocar um content Center porque para ela ficar alinhado juntamente com texto é o content e aqui eu coloco um flex com Flex Call mais um text small que envolve ali um Font size

com menos de um ren olha como é que vai ficar legal ele fica Centralizado porque eu tenho o texto em cima e embaixo né senão ele ia ficar totalmente desalinhado né então show de bola terminamos aqui a nossa primeira parte a gente viu que até agora não temos vai ter né Daqui a pouco mas não temos que ter um JavaScript sendo enviado lá pro front Change e aqui a gente vai entendendo os ganhos né de você ter o uso do continuando usar o próprio react as facilidades todas com typescript e JavaScript aí agora vamos fazer

aqui a próxima página que vai ser muito parecida também que vai ser a listagem dos ativos então eu vou criar aqui uma pastinha de assets copio esse Page para cá aí aqui eu tenho que voltar um diretório para poder pegar mods aí eu quero pegar aqui como é eu vou chamar isso de só ativos eu não quero mudar aqui o padrão mas a diferença que vai ser a mesma tabela Porém não tem a quantidade Mas aí eu posso comprar ou vender então eu tiro esse shares daqu mas a diferença é que agora eu vou buscar

todos os ativos eu não preciso a princípio aqui do ID da carteira então eu posso ter um get wallets ou melhor um get assets né posso ter aqui vou mudar já Mud ali embaixo get assets aqui fica só assets e tiro esse parâmetro daqui não preciso mais de passar o Wallet ID aí aqui eu vou falar que é asset list assets list page Inclusive eu posso até passar page aqui no no anterior porque eu posso ter a página e componentes que são reusados entre as páginas Então na hora de fazer uma pesquisa das páginas é

bom colocar esse page aqui né Beleza eh deixa esse parâmetro aqui por enquanto depois a gente vai acabar falando dele esse Wallet ID mas aqui como que seria a dinâmica eu pego os ativos aqui já vai ser assets de uma vez Então aqui eu tiro essa parte aqui na verdade eu já recebo o né então aqui é só asset imag URL asset o símbolo aqui o nome símbolo e aqui o preço beleza aí agora então eu vou fazer aqui barra assets tá aí ó ele vai Lar todos aqui só lista da minha carteira e aqui

lista todos Olha que legal E aí olhando aqui pras nossas duas páginas né até que não tem muita repetição o desenho aqui do ativo tá replicado isso aqui seria bem ruim seria interessante que a gente criasse um componente separado para reusar nas duas páginas então aqui eu vou criar uma pasta de components v colocar aqui de asset por vou chamar ele de asset show se eu chamar somente de asset depois vai confundir com o tipo que eu tenho ali então não é legal então aqui vai ser um componente a diferença n que isso aqui não

é uma página el tem que ser usado em alguma página então eu recebo aqui os falar que nos parâmetros que todo componente recebe parâmetros eu preciso receber aqui o tipo asset então eu pego isso aqui mando para cá copio aqui então já posso quebrar normalmente que se faz com react quebrar o props aqui em cima tornando mais fácil a manipulação das informações para não ficar fazendo PR da hora né Eh aí aqui eu tenho que importar a imagem que não tá importado Beleza então agora olha só a diferença asset show passando o ativo economizo valiosas

linhas de código aqui né E aqui ele tá chiando porque eu não coloquei a tipagem da ou melhor a tipagem aqui D até errada né aqui ó que tá errado né Aqui tem que ser uma coleção de ativos Na promessa aí eu não preciso mais da imagem aqui o Wallet eu não preciso a sem erro nenhum a não se se Wallet ID que eu vou deixar ele aqui por enquanto e agora a mesma coisa aqui asset show passando Wallet asset p asset f pequeno né na 58 linhas aqui então tiro essa imagem daqui vamos ver

como ficou vai ter diferença nenhuma questão é essa não tem diferença nenhuma mas nós estamos praticando aqui o reúso de código Maravilha outra coisa que a gente pode fazer das páginas aqui pegar as páginas né que a gente tem que fazer fizemos listagem de ativos listagens de ativo na carteira a listagem das ordens Então vamos lá eu posso ter aqui um orders vamos pegar aqui de assets jogar para cá então aqui orders list page e aqui sim eu vou precisar do Wallet ID né porque na hora de fazer a busca eu vou buscar as ordens

basead naquela carteira então aqui volta Wallet ID aqui é barra orders a gente vai fazer um barra não tem autenticação né vou passar inclusive isso aqui já tá vou até confirmar aqui no nest que a gente já fez isso no Control Order tá vendo a gente recebe um Carry parameter Wallet ID né então aqui vai ser Wallet ID igual a Wallet ID então aqui embaixo mudar para get orders tudo certinho aqui então aqui eu passo Wallet ID agora o que que a gente vai precisar aqui pras ordas Vamos colocar assim minhas ordens eh eu quero

ativo depois o preço a quantidade que eu estou comprando ou vendendo né quantidade Qual é o tipo dessa ordem se é compra ou venda isso é importante e o status se ela tá pendente se ela tá sendo executada né que é o open se ela já foi totalmente fechada que é o Closed e cotação não tenho e comprar e vender até poderia deixar o botão mas eu não vou deixar aí eu tenho que chegar aqui em Models e fazer A modelagem da minha ordem né então aqui vai ser é o port Type Order Order vai

ter o ID dela eh qual é o ativo Isso aqui vai ser importante né porque na hora que eu pego a Order se eu tiver o ativo lá eu posso montar ele bonitinho com todas as informações tem a quantidade que é o Share O partial Que É O Que Resta que até eu não vou mostrar ali mas vou modelar aqui Qual é o preço que eu estou pagando ou vendendo e vem o Type e o status que a gente pode fazer igualzinho está no nest Então vamos pegar aqui o Order entity copiando esses dois aqui

do mesmo jeito eles vêm antes e aqui vai ser Order Type e Order status e aqui tá até errado né é orders tinha colocado errado aqui então aqui eu pego uma coleção de orders que eu não coloquei Export coloquei é Order Order no singular então tiro o asset daqui beleza Tá então na hora de mostrar o ativo o asset show então aqui vai ser Order P pera aí V mudar aqui para orders aqui em cima mudou para orders então aqui vai ser Order P asset tem que mudar aqui em cima também então Order P asset

Order P Price que é o preço a quantidade é o shares eh tenho o tipo e o status então eu tô colocando aqui mais deixa eu tirar esse buton daqui tô colocando mais dois aí que tá o ponto N poderia colocar o texto aqui diretamente Mas eu posso tornar isso mais bonito aí eu já tenho aqui dois componentes que eles são muito simples Até pra gente poder já adiantar ó o que que eu criei eu criei um Order status que recebe o tipo Order status então eu determinei aqui duas variáveis com Switch Case então ele

vai analisando se tá pendente eu vou usar a cor info se tá Open vou usar warning se tá closed vai ser o sucesso que ela terminou ou falha que é o failure por e tem um componente Bad do Flow byte que ele vai mostrar ali um texto colorido que vai já chamar a atenção do usuário então eu faço a mesma coisa para other Type né E na verdade eu vou até acrescentar aqui uma coisa Colocar assim ó eh Bad aqui e Bad aqui para não confundir com o nome né então no caso do Type como

eu não tenho vários eu usei a próprio operação ternária e esse wfit aqui apenas para falar que não é para ele esticar a largura né ele só preencher o que é necessário então aqui em em Order Qual que é o primeiro Type né eu posso passar o Order Type Bad passando o Type que é Order P Type da mesma forma a gente passa aqui para o status eu mudo para status aqui vai mudar para status também maravilha vamos vir para cá recarregando aqui então aqui eu vou ter que manter o o Wallet ID né e

e aqui o ponto acho que a imagem que veio totalmente zoada por algum teste que a gente fez mas olha só el teve uma de tá pendente as outras estão fechadas agora deixa eu olhar essa imagem aqui que ele deu um monte de zic a gente pode olhar as ordens envolvidas eu nem sei se eu tava fazendo algum outro teste é só atualizar agora preso com número de ordens provavelmente eu devo ter feito um teste ah ele tá mostrando bastante coisa aqui aí também a nós não fizemos uma mudança lá na api que na hora

que eu pego vamos vir aqui ó eh na hora que eu consulto aqui deixa eu voltar esse Wallet ID na hora que eu quiser consultar aqui com um deles aqui que eu tenho que mexer ó eu acredito que Deva ser um asset que Deva existir corretamente né Mas vamos deixar aqui por enquanto aí nós vamos mexer aqui no serviço de Order como nós fizemos lá com Wallet lembra que na hora de pegar Wallet nós eh fizemos com o populate para ele poder acessar a relação Então vai ser assim que a gente vai fazer com o

Order service eh posso fazer no find One find All somente no find All que vai ser necessário né Você pode replicando depois a medida que for necessá só vou fazer aonde que é preciso então aqui ó e eu vou colocar um populate e aqui eu só preciso passar asset nesse momento asset aqui que ele já vai carregar não tem um sub relacionamento como em Wallet Mas é bom a gente já fazer o retorno aqui da dos dados né aqui eu pego essa promessa vale nem a pena copiar Colocar assim Promise então eu retorno aqui um

Order e asset vai ser do tipo asset aí como isso aqui é uma coleção eu preciso falar que isso aqui é um Array né e o tipo asset não tá importado pronto maravilha então agora a gente pode pegar aqui o presenter de Wallet copiar para cá vai virar Order presenter aí aqui eu mudo para Order presenter então eu recebo aqui aquele mesmo tipo que que tá aqui vou copiar esse tipo aqui para cá então aqui vira Order aí eu tenho que importar Order asset já tá importado Então eu tenho aqui os dados tem ID tem

o asset que vai pegar lá o outro já existente aí eu tenho shares é só ir colocando as outras informações aí tem o partial pricing aí tem o Type tem o Status depois vai ter o trade né que são todas as negociações envolvendo a Order mas a gente ainda não tá brincando com ele aqui na verdade precisa ser um ti Jon para já converter pro formato que a gente precisa e que tá chando aqui comigo Ah preciso fazer um New né na verdade era o new que era o problema mas o Jon também tava faltando

então aqui no Controller pro find all coloco ayn recebo orders coloca w então para cada Order que eu tiver eu converto pro New Order presenter passando Order show de bola tá na hora que eu consultar aqui agora eh ele veio vai tem alguma coisa errada aqui que tô consultando aa ele tá marcando que eu tava fazendo algum teste com trades aqui mas de qualquer forma ele não tá pegando por ah ele tá com problema aqui né e eu fiz alguma coisa de errado aqui será no find One não aqui eu só pera aí que eu

fiz alguma coisa errada aqui eu ah não vi que eu tinha feito no lugar errado deixa eu desfazer tudo que eu fiz aqui é o Wallet e aqui que é o set só fiz um Ainda bem que a ideia é guarda as coisas né achei muito estranho então aqui ele importou o correto tá Eh vamos fechar tudo api agora sim e deixa eu consultar a minha ordem aqui também ou melhor minha Wallet tá não quebrei nada preocupação se eu tinha quebrado de Fato né aí agora agora sim veio compra então eu já tinha acrescentado aqui

pra gente poder ver funcionando né as Então já tô conseguindo listar também a gente vê que a página ela ficou bem pequena n que são listagens aqui depois vai ter complexidade acrescentando se os web sockets também é a questão do gráfico show de bola agora pessoal vem a última página que nós vamos criar é que ela vai ter a maior parte da interatividade Então a partir de um ativo que eu vou selecionar aí eu vou ver o formulário de compra e venda e também o gráfico então aqui eu vou criar um parâmetro que eu vou

chamar de asset mais o símbolo que aí eu vou ter o page P tsx em que a gente vai fazer a nossa página Então vamos colocar aqui como é que a gente poderia chamar set dashboard É acho que o nome aceitável seria esse asset dashboard tá E então vamos colocar aqui uma div Rot já de uma vez Então logo no topo eu quero colocar as informações do ativo então aqui eu já vou colocar um asset show e a gente vai passar aqui o ativo né agora de onde que vai vir esse ativo a gente pode

também lembre-se que a gente tá trabalhando sempre do lado do servidor então eu posso ter aqui uma consulta na verdade eu já tenho lá na api voltar aqui para ela eu não consigo consultar um ativo pel símbolo então aqui em cima posso fazer um Export function get asset eu passo o símbolo que é uma string eu posso até pegar da página de listagens aqui então aqui já tá com template string né então vou usar o símbolo aqui e aí eu recebo uma promessa que vai ser do tipo asset então claro que aqui poderia devolver um

nul mas eh eu não vou fazer esse tratamento aqui seriam refinamentos que a gente teria na nossa aplicação tá [Música] eh a questão é como que eu pegar esse parâmetro aqui na página eu recebo duas informações a gente já viu que sech params passado que são os parâmetros da Carry string mas eu tenho parms também parms é para esses parâmetros da Rota Então vou colocar aqui que nós vamos ter um parms que é um Promise E aí eu coloco aqui a tipagem do que eu quero né que eu vou colocar eh o asset Symbol né

que é a mesma coisa do nome aqui que a gente colocou então aqui no começo do componente eu posso quebrar como a gente fez lá no outro eu recebo aqui o asset sbol é igual a a wait params né porque dentro dele tem uma promessa então se eu tenho o símbolo na mão eu consigo pegar o meu ativo fazendo um get asset passando o símbolo se eu tenho o asset na mão melhor a weit aqui né se eu tenho o asset na mão eu passo ele aqui pro meu componente maravilha então começamos aqui a nossa

primeira parte né [Música] Eh vamos só dar uma olhada se a gente consegue fazer isso então eu tenho asset bar amzn e eu não coloquei o theox port né Toda Sport defu na verdade next precisa disso ó temos aqui o nosso primeiro resultado então a gente viu como que usa um parâmetro de Rota com que captura ele e o restante nós já aprendemos a fazer essas chamadas aqui então tudo isso tá sendo processado também do lado do servidor por enquanto a gente tem na verdade zero JavaScript sendo utilizado pelo browser né se eu desativar totalmente

a minha página consegue só mostrar as informações Claro que na hora tiver interatividade com websockets e tudo mais se eu não tiver JavaScript não vai funcionar nada né nessa página aqui eu quero fazer semelhante o que a gente tá fazendo nas outras Então vou copiar essa parte aqui da div com Flex Call Space y5 com Flex grow da mesma forma já aqui eu vou colocar mais uma vez Flex Call no Space 2 Space Y 2 na verdade porque eu quero mostrar também o preço de forma diferenciada então ali eu já tenho uma div pra gente

poder adiantar aqui ó eu vou passar uma div que vai dar um margem left de 05 R vai ficar em e com um texto de 1.5 né Ele é um 2 XL então ele é um tamanho extra large né então aqui eu posso passar o asset price a gente já vai ver uma diferença bacana agora vendo Então tem o meu ativo ali que o mesmo componente que eu estava utilizando já nas outras páginas e agora o preço porque ele tem que ficar em pleno destaque pra pessoa ver o que que está de fato acontecendo Então

agora eu tenho aqui essa div o próximo passo vai ser colocar uma outra div e aqui nós vamos trabalhar com o sistema de Grid isso aqui eu quero até mostrar na prática que eu Wind ajuda a gente a posicionar os elementos também então nós temos aqui deixa pesquisar aqui a parte de Grid tem aqui a parte de Grid colum eh eu posso determinar um Grid ele vai formar aí como se fosse uma tabela mas a gente vai fazer toda esse esse posicionamento com a dives ou qualquer outro elemento funciona com qualquer um e utilizando essas

classes tá então eu vou querer fazer a seguinte de configuração até aproveitar aqui eu já tem isso aqui eu vou usar um um Grid com cinco colunas e esse GAP do aqui é justamente a distância entre as colunas aí eu vou ter uma div Class name com um Call spam do ou seja essa a primeira div aqui vai ocupar duas dessas cinco colunas disponíveis e a outra vai ocupar três então aqui vai ser Qual o spam quando eu coloco o spam eu já ocupo aquilo ali que eu quero inclusive aqui já vai até ficar com

Flex um Flex grow para nos ajudar a trabalhar com o gráfico é justamente ele que vai ficar aqui então ele ocupa três colunas e aqui vai vir a parte do formulário que vai ocupar uma coluna só agora que tá chando aqui não pode encontrar div essa é ótima né os erros malucos ali eu acho que eu coloquei um ponto e vírgula sobrando que ponto é vírgula é esse agora Ah tem um ponto vírgula aqui ó olha só aqui não vai surtir nenhum efeito ainda né mas vai ser essa a separação que nós vamos trabalhar então

aqui nessa parte do formulário vou usar um componente de card do flowbite vai ficar bonito ali a parte que a gente vai colocar E aí eu quero e ter no mesmo lugar o formulário de compra e venda mas eu quero que eles sejam dois formulários diferentes Então vou acabar utilizando aqui o sistema de Abas do Flow byte Então vamos importar aqui ó tabs aí eu posso colocar o tabs item aqui eu acho que o tabs dele é coloco Tabs ponto item aí aqui vai ser o tipo E aí eu tenho que passar aqui vou colocar

aqui essa é a ativa AB bativa e o título Dela pode ser um texto pode ser um um componente vou colocar que vai ser comprar e aqui eu dou um título text Blue aí eu tenho aqui uma faixa de cores aqui um mais escurinho que vai ser um 700 aí eu vou criar uma outra aba que vai ser o Red 700 também que vai ser venda né só para poder porque você tá vendendo seus ativos esse aqui não pode ficar ativo somente um deles pode ficar né então A ideia é essa Olha só como é

que vai ficar a gente seleciona um outro venda tem que tomar cuidado né você tá vendendo seus ativos bem que compra também mas venda Às vezes você pode estar tomando uma decisão errada aí dentro aqui desse tabs ele vai ter o formulário a questão que a gente já vê aqui que existe um erro né ele tá falando um erro esquisito aqui é o que acontece Às vezes que você tá importando uma biblioteca para dentro do Next e essa questão de Abas ali para ele saber qual que tá ativo que não está eh esse componente ele

precisa de ter JavaScript no Browser mas como a gente tá fazendo aqui totalmente server ele encara isso aqui também como um server né E na verdade ele não é um server Então a gente vai ter que informar para ele que esse tabs aqui ele é um client component então pela primeira vez a gente tá criando um mas só fazendo um reentender a gente vai criar aqui ó um tabs test x aí toda vez que eu quiser um client component coloco US client então next já sabe aí eu vou importar o tabs daqui do Flow byte

aí eu rexor ele posso até colocar já o nome tabs item é igual a Tabs pon item Então eu estou reexport como client então aqui em vez de tabs item eu coloco tabs item que é o meu novo a gente vai dar preferência para ele eu tiro ah não aqui eu não preciso tirar eh o tabs normal pode continuar normal então agora ó tá vendo que sumiu o erro ele até tá fun porque antes ele ficava cinza nos dois lados Agora ele só fica cinza no lugar que eu selecionei e até bom verificar de tempos

em tempos a gente não tem nada aqui no console e também se não tem nada mostrando a nãoc os acessos que a gente tá fazendo então tem que tomar muito cuidado com isso porque às vezes você pode est colocando algo bugado aí na sua aplicação você só ven a perceber depois então essa parte aqui tá pronta e agora vai vir o formulário então pensando assim eh nós vamos ter um formulário que vai servir para ambos os casos Por que não já criar um componente de formulário avulso né para que a gente possa reusar que seria

o melhor caso aqui então vamos fazer aqui um Export function Order form a gente vai precisar de propriedade isso aqui é importante né vou precisar do ativo vou precisar do Wallet id e qual é o tipo da minha ordem né se é posso até Colocar assim ó se é Order Type é posso colocar aqui Order Type que Excel né então é só Order Type mesmo tá então pensando que a gente tem aqui duas cores eh azul e vermelho seria interessante que a gente já pensasse nas cores dos Campos que ela fosse sincronizada ali com o

título então eu posso criar aqui uma variável para já me ajudar com isso eu vou olhar assim ó se a propriedade pon Type for igual a Order ponto Order Type P bu então a minha cor de CSS vai ser text Blue 700 aquela mesma que a gente tá usando ali no título caso contrário ela vai ser um text Red 7 eu já posso também criar aqui um um texto Um slated Type para usar é no botão na hora que eu for criar o botão de submeter então a mesma história aqui porém se for buy vai

ser comprar se for C vai ser vender eh aqui tem que colocar igual igual né Beleza então nós vamos criar aqui um form aí essa informação da Wallet ela não precisa aparecer no formulário posso colocar um text input Hidden com o default value tá Não use o Val se você não vai mudar esse valor utilize o default value que o react já disponibiliza Então vai ser aqui props melhor antes disso tenho que colocar o name n name vai ser ID deixa até ver aqui como que a gente tá enviando ess informação ela tátil então fo

bom que eu vi ISO aqui ID aqui aqui ID aí vou fazer a mesma coisa para Wallet então aqui é o Wallet id e o Type também pode ser um Hidden então aqui vem o Type e aqui fica Type beleza aí nós vamos ter agora dois Campos que é a quantidade que eu quero comprar e o preço Então a partir daqui nós vamos colocar uma div pro primeiro campo então tem uma div pro Label e depois o text input que vai aparecer pro usuário do do próprio Flow byte né e a gente coloca as informações

aqui então pro Label Eu tenho um Label também do Flow byte react aí vamos colocar aqui HTML for shares que é a quantidade o valor que vai aparecer vai aparecer pro usuário quantidade e o Class name aparece o Color que ele vai ficar azul ou vermelho aí aqui no text input nós vamos ter o ID que é o mesmo do HTML for pro Label ficar ligado com ele né Isso é já nativo do HTML o name dele também vai ser shares vou falar que ele é requerido o é Number aí aqui a gente pode colocar

o controle né o mínimo tem que ser um E aí se eu quiser ter aquele controlinho que o browser mostra lá para poder subir posso colocar de um em um Eu poderia até colocar fracionado Se eu quisesse né E aí o Def aqui eu vou colocar como um tá bom E aí vem o Color aqui eu já tenho um color diferente então eu vou olhar se props Type foi igual a by que não aqui não vai ser azul e vermelho que a gente coloca se eu quiser azul a cor é info se eu quiser vermelho

é failure tá beleza Então vamos jogar vamos duplicar isso aqui melhor vamos ver como que ficou primeiro depois a gente dá uma olhada Ou melhor como que eu vou ver como que ficou se eu nem estou utilizando a minha página então chegar aqui colocar um Order for aí eu tenho que passar o asset que eu já tenho Wallet ID que é igual ao Wallet Wallet ID também eu deveria receber aqui ó Então vamos pegar o search PMs Olha só agora eu recebo aqui os dois search PMs e o pars Então vai exigir aqui em cima

que eu pegue o Wallet id e faça aqui S PES agora eu posso poderia até melhorar aqui vou colocar no estilo que me case Eu acho que vai ser melhor então vou ter que mudar a tipagem dele aqui aí volto para cá aí aqui vai ser Wallet ID bem que aqui lá na rota eu recebo assim né mas aqui eu posso colocar assim já o Wallet que é o alas eu posso colocar um alas Então uso Wallet ID aqui e aí vem aqui o Type que já é fixo que vai ser Order Type p byy

e agora e passo para cá replico aqui e aqui fica C pronto a gente reaproveita vamos olhar como que ficou tá vendo ó que a cor mudou então uma vez que eu tenho aqui e deixa eu dar uma olhada nisso aqui eu poderia ter uma marzin para baixo né Vamos colocar aqui nessa div ó poderia colocar um MB 2 que é um marg bor 05 com acho que não precisa colocar Block vai ser melhorou Tá bom então que eu faço agora aqui eu duplico esse código então onde tá shares vai ser Price aqui eu coloco

preço preço em Reais Price beleza a mesma coisa aí eu posso se eu quiser dar um espaço aqui ser um bom motivo né para uma uma BR Class a pronto um BR ali e por último colocar mais um BR e um botão Então esse botão aqui vai ser do tipo submit E aí a cor aqui já as cores são diferentes também não dá para usar o Color lá de cima se a gente verificar aqui o ig a Order Type bu então a cor do azul é Blue que padrão né do componente e a cor vermelha

é fail mas aí aqui a gente usa o translated Type que tava lá em cima que vai ser venda ou compra vender ou comprar né poderia colocar na Frão vai ficar estranho confirm venda ou compra confirmar compra ou venda Maravilha Então olha aqui top aí tem o Card em volta tudo bonitinho E aí restou aqui a parte do gráfico que nós vamos montar naquela div que já está criada aqui então eh estou na página errada essa aqui ó então o gráfico vem aqui eu já tenho um componente de gráfico de financeiro que eu uso nos

meus projetos que é esse aqui e não vale a pena a gente construir ele do zero porque senão a gente fica focado em questões de gráfico né o intuito da semana não é esse mas eu vou explicar exatamente eh como que é a lógica aqui primeiro a gente usa uma biblioteca chamada de Light hawe sharts eu vou instalar ela aqui com o npm instal essa biblioteca é a mesma utilizada pelo um dos se não for o mais famoso um dos mais famosos sites de acompanhamento de mercados que é o trading View né se eu quiser

pegar aqui por exemplo Ibovespa Bitcoin etc eh ele me dá esse gráfico bonito aqui n pessoas que são especialistas da área financeira devem fazer aqui eh piruetas com esse gráfico né Eh eu sou apenas um um amador nisso aqui mas enfim eh Então esse Light a lightway charts permite que a gente faça isso e qual que é a ideia desse componente primeira coisa eh a gente vai precisar de fazer manipulações no Browser com gráfico Óbvio Então tá vendo ó Então somente esse componente que vai ser um Client eu posso usar um client dentro de um

server como nós estamos fazendo na própria página aqui de dashboard do arquivo com o próprio tabs item a gente fez essa mudança aqui né então não tem problema nenhum um server usar um client tá aí a lógica aqui é o seguinte como eu tenho uma Lib que não tem nada a ver com react etc tem que tomar cuidado na hora de manipular as informações porque a gente sabe que uma função de componente ela é re executada várias vezes de acordo com a necessidade do react para poder renderizar os elementos na tela Então esse componente ele

vai trabalhar com três propriedades eu posso passar um Reda que vai ser um título bonitinho ali que é um pode ser uma div um componente qual qualquer que eu passar dados iniciais se eu quiser que é esse tipo area data e aqui é o tipo do time que é é é o valor ali que a linha do tempo que ele vai acabar formando e a referência desse próprio componente por quê eh na hora que eu usar ele né Por exemplo shart component eu vou poder passar aqui uma referência aí o componente pi pode pegar essa

referência e chamar métodos para poder fazer mudanças internas é assim que é uma das formas da gente manipular um componente filho é a forma dele expor as funcionalidades dele então primeiro a Instância do gráfico desse Light a sharts é guardada nesse Hook do react melhor esse aqui não é o Hook é o Hook da div que a gente vai plotar o gráfico tá então tem essa dizinha aqui ó o gráfico o o gráfico vai ser plotado aqui ae tá com esse Flow grow para ele preencher tudo e aqui vem o header o posicionamento do header

usando position Absolute ali com top zero né porque o gráfico é montado a gente tá colocando uma div Intrusa ali no meio então por isso que eu criei uma div relativa com Absolute eu posso usar ali todos os pixels que eu tenho disponível ten que jogar se eu quiser jogar ele no topo né top zero left zero para ele ficar alinhado acima e a esquerda então aqui a forma que eu tô pegando a referência a referência ela serve para várias coisas então pego a referência da div e guardo aqui aí eu crio a referência do

gráfico essa referência aqui que vai ser exposta pro mundo externo tá aí nela eu quero criar um Api para poder e criar a Instância do gráfico isso aqui eu tô utilizando um design patter singleton porque você vê que se esse método for chamado e não tiver nada na varzinha api ele vai criar a Instância do gráfico com Create shart isso aqui é um método lá do Light a sharts né ele cria aqui o gráfico esse height e wi f e o height com zero é que o gráfico preenche tudo o time scale com time visible

que ele vai usar minutos e segundos na linha do tempo porque senão ele usa somente dia tá então eu chamo aqui esse Fit content para ele alinhar todo o conteúdo Mas a questão é que se eu chamar ele mais de uma vez ele vai já ter criado e ele só retorna a Instância esse free aqui serve para poder fazer a remoção dele se for necessário aí eu crio uma outra referência toda a informação que eu quero guardar que ela quer vai ficar fora aqui do react ela fica numa referência então a série ali dos dados

que eu estô iniciando com nu também fica numa referência beleza aí eh eu estou pegando aqui essa referência e usando esse Hook esse tanto esse use esse use imperative handle são hooks do react esse use imperative handle que vai permitir que eu exponha o que eu quero na verdade eu não vou expor a como um todo mas olha só eu recebo aqui como parâmetro a uma referência que é desse tipo aqui que eu tô expondo somente esse método update que é para poder acrescentar noos valores do gráfico na hora que eu estou vendo assistindo um

ativo eu não vou recebendo as mudanças dos preços Então vou usar esse método update para jogar um novo valor no gráfico Então esse US imperative handle vai jogar esse update nesse ref para que ele fique disponível lá no ancestral tá E aí eu utilizo aqui o update desse series he aqui esse series tá sendo criado aqui embaixo quando eu tiver os dados sendo recebidos por esse componente eu não sou obrigado a passadeira eu estou criando essa Instância da linha do tempo tá esse use effect ele lida com os eit do componente então toda vez que

o componente mudar ele vai ser executado ele vai ver se o deira e anterior é diferente do novo Dea porque o componente vai mudando né eu posso receber uma informação diferente aqui então o deira vai acabar não mudando que a gente só vai passar um Dea Inicial Eu já aproveito para poder criar essa Instância e para poder jogar os dados ou nada que o gráfico vai ficar vazio se eu quiser cá a princípio aqui ó eu já deixei alguns dados eu posso comentar né para poder plotar ali algumas informações aí essa parte aqui ela apenas

um adicional que ela serve quando você redimensionar a tela ele reajusta o gráfico então ele coloca aqui um evento resize para poder executar isso aqui né então ele fica pegando ali Qual é a largura do elemento que tá envolvendo o gráfico então ele pega a nova largura e joga então faz o gráfico ser reajustado esse evento aqui do Window res size é toda vez que você modifica o tamanho do browser então é justamente isso que a gente tem se eu quiser já jogar esse gráfico aqui eh olha só eu posso jogar esse shart component aí

ele vai me exigir aqui passar um header E no caso do header a gente pode passar vamos passar só um um xpto por enquanto ele exige mais o ref né eu tenho que passar um rzinho aqui se eu tiver que passar um ref eu tenho que mudar essa página inteira e vamos pensar que esse gráfico é um gráfico genérico eu poderia criar um isso esse gráfico somente para essa página eu tô criando aqui não lá em components um asset chart component que vai ser o gráfico somente para esse ativo Então vamos criar aqui um asset

chart component eu vou receber aqui vamos colocar as propriedades eu receberia a Instância do ativo acho que tá bom a princípio e aqui eu vou retornar somente o chart component que o chart component É genérico né então aqui eh eu poderia criar a minha referência Vamos colocar assim ó shart he vai ser use he que eu vou pegar lá o shart component He que é a Instância do que eu estou a referência do que eu estou expondo pro mundo externo que eu recebo aqui isso aqui esse ref é algo do próprio react né e inclusive

agora da versão 19 ficou mais fácil que não tem que usar um tal de F Head Isso aí até complicava para poder explicar então eu passo esse ref aqui olha só passo esse ou melhor shart né E agora posso passar o header né o header poderia usar mais uma vez o asset show por não aí eu passo aqui o prop poder desconstruir lá em cima eu tô passando direto H aqui tá faltando não pera aí o que que tá faltando aqui fechar o componente opa ai ã alguma coisa que eu quebrei aqui de sintaxe que

é aqui aí pronto em questão de dados eu não tenho não sou obrigado a passar então eu posso agora abstrair quando eu uso esse US he eu tenho que passar aqui o US client então ten outro que é client mas aí é o gráfico específico para o asset e aqui vai vir a lógica do websocket ETC que vai exigir JavaScript pro Browser então a minha página tá protegida né aqui ó só passo o asset chart component passando o ativo tá vendo ó essa página que continua server mas somente esse trecho que é client Então estou

reduzindo tanto de JavaScript que vai lá pro browser se eu fosse apressado se eu jogasse um cente aqui que não tem problema poderia ser mas aí vai mudar a forma eu não vou poder usar a consulta do ativo dessa forma né Aí eu teria que fazer a consulta do ativo que iria lá pro browser mais responsabilidade pro browser mais JavaScript para ele porque quando eu tenho essa parte de pegar acessar api eh do lado do servidor a gente até não vai focar nisso nesse evento porque a gente não não tem muito como trabalhar com Cash

né depois a gente pode discutir isso aqui mas essas chamadas para api elas podem ter Cash E se eu ver que uma informação ali não vai mudar durante um tempo então eu posso manter um Cash durante um tempo eu posso ter um Cash sobre demanda e a gente já mostrou isso em outros eventos tem conteúdo sobre isso no canal também mas de qualquer forma então a gente só tem esse componente aqui vamos ver o que que vai rolar agora né vamos ver aqui Inclusive eu tenho que rodar minha aplicação de novo que ela não tá

rodando npm Run Dev aí deixa ele recarregar ó tá vendo Então meu gráfico já tá aqui a gente ainda não eh pegou a informação mesmo do ativo né não criamos nada poder ficar atualizando mas já tá no jeito porque quando eu tiver o evento do websocket aqui eu faço um chart have current update Então esse método ele tá criado no componente filho então Ó você cria uma você recebe uma referência você recebe uma referência aqui nesse caso a gente criou uma referência para poder guardar as questões do gráfico e aí a referência recebida Que expõe

as funcionalidades E aí você pode fazer o que você quiser na verdade não precisa sempre usar uma outra referência porque aqui a gente tem duas referências para poder lidar com gráfico a referência do gráfico e a referência da linha o histórico ali dos dados né então para poder atualizar precisa pegar o histórico e fazer um update nele que no final da contas o histórico é criado a partir do próprio gráfico tem outra coisa que a gente tem que fazer aqui para poder finalizar essa primeira parte que é colocar o navar nós vamos ter uma janela

de navegação aqui eu já vou usar esse componente pronto e vamos focar somente na lógica dele e na explicação obviamente para navar funcionar seria colocar esse Nav aqui no L né poderia colocar aqui div etc etc etc né E pode acontecer do navbar olha só ele é um componente não é uma página ele precisar de acessar parâmetro de Rota ou às vezes paret veja que o layout ele só recebe o Children esse layout aqui também é construído ele não vai nenhum código pro browser ele é um server component também porque ele não tem o US

client lá em cima a gente já entendeu isso né então no caso do navbar eh vai ser também um outro componente client exatamente por conta de uma necessidade que a gente tem Olha só eu quero ter um Nav bar que tá usando aqui o Nav bar link que é o componente do flowbite ali para ter um link e ele tá envolvido com link do Next isso é importante também tá o Next tem dois componentes que você deve usar link imagem porque esse link ele tem alguns Melhoramentos também em cada uma das páginas eu tô forçando

a passagem do Wallet ID porque se a gente precisar fazer alguma manipulação beleza né então eu vou esse Wallet ID é sempre o parâmetro de Rota sempre vou precisar pegá-lo como ele isso aqui não é uma página eu não consigo ter acesso ao search parms aqui mas se eu transformar ele num componente client aí eu tenho um web um react rook do Next que me dá acesso aos parâmetros de Rota Então eu estou usando esse use search param aí aqui é diferente né eu faço a captura com get então eu pego o valor e jogo

aqui pros Três aí no caso desse link aqui eh esse P HF com o Legacy behavior eh significa que ele vai passar a esse HF pro porque o link que vai ser renderizado no final das contas é esse aqui então às vezes você tem o seu link com a sua estilização você não vai usar porque isso aqui acabaria gerando uma Âncora eu não posso ter uma Âncora dentro da outra então aqui eu só tô falando olha Eh Na verdade o link é esse aqui controla ele passa o HF para ele então você define no link

do Next E o restante dos elementos aqui são para que a gente Ten o Nav bar né tem o componente Nav Bar do Flow byte e aqui eu estou mudando o nome dele porque o nosso componente já chama Flow bte Flow byte né ou melhor nosso componente já chama Nav bar então não poderia importar aqui o Nav bar aí tem a parte de colocar o Brand que vem a imagenzinha aí eu coloquei lá imagem do Next com a classe e essa parte aqui vai lá pro canto esse Order aqui é apenas para ordenar os elementos

então tô como eu tô colocando uma Order 2 é a forma do Nav B de trabalhar né essa parte aqui vai ficar centralizada e essa aqui é a última parte tá então deixa eu pegar aqui a minha imagenzinha que é o logo vou colocar aqui ó na pasta pública que é o símbolo da full cycle né a gente vai ter o full cycle Invest então eu passo ele para cá então olha só eu tenho o layout que é server component mas o meu navar que tem Dependência em questão de Rota eu transformei somente ele no

client então aí agora nós temos aqui a carteira ativos e Order eu coloquei somente o ID da carteira não tem nenhuma outra informação temos usuário autenticado né para não ter muitos caracteres eu coloquei apenas os primeiros então no momento nós só temos três componentes client aquele tabs item o chart Na verdade são quatro né é esse esse aqui o chart component e o navbar todos os outros são server então nós estamos diminuindo em muito o JavaScript que vai lá pro browser diminuindo o tamanho do JS melhorando a velocidade de carregamento né agora pessoal quero fazer

aqui a última e questão porque às vezes para poder testar pode ser um pouco chato a gente pode matar lá o banco de dados E aí muda o Wallet ID tem que ficar copiando por exemplo se eu chegar aqui e agora recarregar ele não vai conseguir mostrar os ativos da minha carteira porque não tem carteira nenhuma a gente pode pensar que é um erro né aí seria interessante que a gente mostrasse os todos os Wallet né para poder ficar mais fácil então acabei criando aqui um componente server chamado de Wallet list então ele pega na

verdade aqui só chamar isso de wallets eu varro lá todas as wallets na api e mostro vou mostrar aqui eu não encontrei nenhuma Wallet nenhuma Wallet encontrada não acho que melhor eh nenhuma Wallet escolhida que é isso que a gente tá fazendo escolher uma Wallet aí ele mostra as carteiras existentes que apenas fazendo uma interação aí com as wallets já temos aqui a tipagem então o que que nós podemos fazer agora nas páginas eh pegando aqui a pág Inicial Eu não recebo lá o Wallet ID então se eu não tiver Wallet ID na verdade eu

retorno aqui um Wallet list é porque eu consigo renderizar também às vezes eu posso est passando uma Wallet ID lá no endereço Ela já foi apagada posso fazer aqui também se eu não tiver uma Wallet eu retorno também o Wallet list então Wallet não nenhuma Wallet escolhida aí aqui ele já mostra para poder fazer o acesso inclusive uma coisa que faltou aqui na hora de fazer a compra ó aqui eu posso falar que o componente de botão tem esse propriedade S eu passo como um link do Next a em vez de ser um botão ali

no HTML vai ser o link e aqui eu defino o endereço que vai ser barra assets mais o asset melhor Wallet asset asset Symbol prontinho agora eu posso escolher a carteira aí comprar e vender ele redireciona para lá e tudo fica linkado né tava faltando essa partezinha aqui então eu posso pegar esse trecho e jogar ele pras minhas três páginas eh aqui porque sempre eu vou precisar né de que se é o mesmo na listagem de ativos que eu não preciso da carteira mas na hora que eu for clicar tá vendo ó na hora que

eu for clicar se eu tiver se não tiver selecionado ali aí eu não consigo ir pras outras também então Eh vamos colocar esse trecho aqui a gente poderia se quisesse criar uma função mas aqui é só para quebrar o galho porque a gente não tem autenticação né então agora em vez de mostrar aist não ele não for selecionar nada ele deveria pera aí qual página que eu alterei acho que eu alterei a de listagem de assets é exatamente essa aqui agora aqui o ponto do a gente pode fazer aqui uma outra mudança que é criar

uma pasta de caris isso aqui é um padrão também que muita gente que trabalha com next utiliza que a gente começa a reutilizar isso aqui ó Então vamos começar a mudar tudo para um arquivo de car. test que são as consultas que nós estamos fazendo então aqui models aí quando a gente precisar de get assets aí pega lá do arquivo qu outras páginas podem reutilizar também então aqui esse get my Wallet a e a gente pega aqui da outra página tira essa responsabilidade da página em si passa para cá I get my Wallet get my

Wallet pronto então agora é que tá estranho que eu tô pegando nu ele ainda não tá eu tô na listagem de ativos se eu não tiver ele retorna se eu não tiver ele retorna Aí depois ele pega de qualquer forma vamos fazer aqui essa mudança para orders também então eu jogo isso aqui para cá então aqui o get my Wallet e o get orders também não pode ir lá para aquele arquivo então caries depois também se a gente quiser separar um pro arquivo ou usar outros padrões e não tem problema mas isso vai ser reusado

né em outras páginas é bom que a gente não coloque na página diretamente Pronto agora o que é engraçado quando eu clico na carteira A não ser que ele não compilou porque vamos ver só pode ter um erro de typescript aqui o que é estranho ele tá dando erro aqui por conta que a carteira tá igual a nul deixa eu ver uma coisa em relação ao aqui quando a gente faz um find aqui seria interessante fazer o seguinte se eu não tiver Wallet eu faço um New not found Exception aí eu posso passar aqui Wallet

not found aí quando eu consultar ela a gente pode fazer uma validação aqui eh se eu ver aqui pelo menos poderia criar uma outra validação mais específica mas aí eu ver que não é OK pelo menos n eu já retorno nu aqui para que a gente possa fazer a validação Agora sim aí ele mostra a listagem aí eu vi minha carteira agora vem aqui os ativos dos ativos se eu não passar nada ele vai me exigir a carteira também da mesma forma aqui com Ah eu tenho que passar aqui também Wallet ID né então pera

aí aqui na listagem Global aqui vem Wallet ID então Wallet ID é igual a Wallet ID Agora sim aí seleciono lá Se eu tentar acessar 100 ele não renderiza pelo menos não deveria renderizar pera aí então tem alguma coisa faltando aqui ah não na verdade não é aqui né ah a gente faltou replicar para para cá não repliquei para cá então tá certo então aqui ficou o Wallet ID maiúsculo que a gente tá usando Então passa para cá tá vendo como a gente vai reutilizando as coisas aí ó eu não consigo sem aí agora el

mostra a carteira eu vou para orders vamos aqui pra carteira comprar tá aí toda a nossa parte já integrada com o nest o front end Tá OK agora falta fazer integração com o restante sistema web sockets e a gente vai fazer isso ainda então nós vamos voltar no front chend para poder dar colocar a Cerejinha do bolo muito bem então finalizamos aqui o front Change ou melhor quase finalizamos porque na próxima aula vai ter a parte de web sockets para colocar a Cerejinha do bolo mas o código fonte tá disponível para vocês eu venho falando

disso aqui Aproveite esse é o seu momento pratique pegue o código fonte vá além do que está na aula também use esse momento para você poder dar aquele salto que você precisa na sua carreira veja nextjs e react são um das tecnologias mais utilizadas no mercado se você saber isso é um diferencial enorme pra sua carreira tá Então continue firme na jornada com a gente não desista é isso aí pessoal grande abraço até mais para vocês tchau [Música]