/digital-wallet

Uma aplicação web que simula um portal de carteira virtual escrita em ReactJS. No portal é possível fazer negociação de criptomoedas e acessar históricos de transações.

Primary LanguageTypeScript

Digital Wallet

alt text

Sobre


Digital Wallet (ou MyWallet) é uma aplicação web desenvolvida em ReactJS com o objetivo de simular um portal para negociação e gerenciamento de sua carteira digital.

A ideia é que o usuário possa criar uma conta, acessar sua carteria e imediatamento começar a negociar. Para isso, ao criar uma conta já é disponibilizado para o usuário R$100.000,00 (ficcionais) de crédito em sua carteira.

Os bancos de dados de usuários, carteiras e histórico de transações estão abstraídos localmente no navegador, dessa forma a todo momento as informações salvas podem ser acessadas em seu localStorage.

Ainda, nesta aplicação é possível fazer negociações com 3 moedas: Real (BRL), Bitcoin (BTC) e BinanceDollar(BUSD). Dessa forma podemos: comprar criptomoedas (BTC/BUSD) com Real; vender criptomoedas, recebendo em Real; e negociar as criptomoedas entre si, aplicando as taxas de conversão combinadas.

Link para este repositório: https://github.com/igorbeduin/digital-wallet

Instalação e Execução


Clone este repositório:

git clone https://github.com/igorbeduin/digital-wallet
cd digital-wallet

Instale as dependências:

yarn install

Execute localmente (development):

yarn start

Funcionalidades


  • Cadastro de usuário;

    No início da aplicação é criado um usuário padrão username&password=admin
    
  • Login e logout de usuário;

  • Visualização de seus créditos na carteira separados por moeda;

  • Visualização em tempo real das cotações de BTC e BUSD (atualizadas a cada 10s);

    Os valores de BTC e BUSD são obtidos através APIs públicas:
      https://www.mercadobitcoin.net/api/BTC/ticker, pelo atributo { ticker: { last } }
      https://economia.awesomeapi.com.br/all/USD-BRL, pelo atributo { USD: { bid } } 
    
  • Comprar Bitcoins, usando Real

  • Vender Bitcoins, recebendo em Real

  • Comprar BUSDs, usando Real

  • Vender BUSDs, recebendo em Real

  • Trocar BUSDs por Bitcoins

  • Trocar Bitcoins por BUSDs

  • Visualizar extrato de negociações com suas descrições, separado por moeda

Design


O portal foi desenvolvido se baseando na ideia de Dashboard, com uma barra de navegação entre paginas e cards de funcionalidades.

Todas as paginas e componentes foram pensados de forma responsiva seguindo o princípio de "mobile-first" do TailwindCSS. Assim, as classes são padronizadas para telas pequenas e mudam especificamente para breakpoints de telas grandes.

Navegando nas Telas

alt text alt text alt text alt text alt text alt text alt text alt text

Mais imagens disponíveis aqui.

Desenvolvido com


  • ReactJs
  • TailwindCSS
  • Typescript
  • FontAwesome
  • Axios
  • ReactToastify
  • ReactRouter
  • Eslint