Digital Wallet

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

Mais imagens disponíveis aqui.

Desenvolvido com

---

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