Neste tutorial, criaremos nosso aplicativo Dapp do zero. Este exercício demonstrará como estamos usando create-react-app e pollyfills para criar as decências de nó necessárias para o cliente pioneer.


Direto para o código: https://github.com/BitHighlander/dapp-template

Tecnologias usadas:

- GitHub: GitHub é um sistema de controle de versão de código aberto para rastrear alterações no código-fonte. Ele é usado por milhões de desenvolvedores e empresas para armazenar e compartilhar seu código, gerenciar projetos e colaborar com outros desenvolvedores.
- Create React App: Create React App é uma cadeia de ferramentas do Facebook que ajuda os desenvolvedores a criar rapidamente aplicativos React sem nenhuma configuração de compilação. Ele fornece uma configuração de compilação moderna sem configuração e ajuda os desenvolvedores a se concentrarem na escrita do código.chakra UX framework
- Chakra UI Framework: Chakra UI é uma biblioteca de componentes para React que facilita a criação de interfaces de usuário acessíveis e combináveis. Ele foi desenvolvido pensando na acessibilidade e na usabilidade, permitindo que os desenvolvedores criem aplicativos acessíveis a todos os usuários.
- KeepKey SDK: KeepKey SDK é um kit de desenvolvimento de software de código aberto para construir com a carteira de hardware KeepKey.
- Pioneer API/SDK: O Pioneer API/SDK é um kit de ferramentas para criar aplicativos e serviços de blockchain. Ele fornece ferramentas para os desenvolvedores criarem aplicativos blockchain de maneira rápida e fácil, como carteiras, trocas e dapps.

## Resumo do que este guia cobre

- Criar um aplicativo da Web de react básico.
- Usar o KeepKey SDK para integrar com o KeepKey Desktop.
- Usar Pioneer-SDK para consultar informações de blockchain.

## Primeiro importamos o Pioneer-sdk, e configuramos

const configPioneer = {
        queryKey:'sdk:test-tutorial-medium',
        username:"dash-dapp",
        spec:"https://pioneers.dev/spec/swagger.json"
      }
      let pioneer = new Client(configPioneer.spec,configPioneer)
      pioneer = await pioneer.init()

Estamos definindo a queryKey, nome de usuário e especificação

> Os documentos da Pioneer API podem ser encontrados [aqui](https://pioneers.dev/docs)

Em seguida, usamos o cliente API para consultar as entradas não gastas de um xpub.

> Um xpub é uma chave pública usada em um sistema de carteira determinístico hierárquico, e mais informações podem ser encontradas nesta postagem do blog: https://www.swanbitcoin.com/whats-in-an-xpub/

//get balance DASH
      let data = await pioneer.ListUnspent({network:'DASH',xpub:responsePubkey.xpub})
      data = data.data
      console.log("txData: ",data)

E, finalmente, iteramos sobre essas entradas para calcular um saldo

let balance = 0
      for(let i = 0; i < data.length; i++){
        balance += parseInt(data[i].value)
      }
      console.log("balance: ",balance)
      let balanceNative = balance
      setBalance(balanceNative)

(NOTA) Você pode verificar [“checkpoint-2”](https://github.com/BitHighlander/dash-dapp/tree/checkpoint-1) para continuar o tutorial a partir deste ponto

## Webpack Wizard

Agora, para um pouco de magia! Ao contrário do KeepKey-Desktop, que possui uma API principalmente estática e bem definida e é gerada estaticamente, o servidor Pioneer está mudando rapidamente e usa um módulo que se adapta dinamicamente quando as especificações do OpenAPI mudam. Ele usa um pacote chamado OpenAPI-Generator para gerar um cliente. Isso permite que os desenvolvedores não precisem atualizar o cliente npm local quando as especificações da API mudarem.

openapi-client-axios

O que na verdade, por baixo dos panos, usa um pacote chamado

json-schema-ref-parser

Para baixar e analisar dinamicamente novos arquivos swagger.json sempre que o cliente for executado. Isso permite que o cliente atualize e altere sem que os desenvolvedores precisem atualizar seus pacotes de cliente.

Infelizmente, esses pacotes são construídos para node.js e exigirão que usemos alguma mágica do webpack e tragamos polyfills para suportá-los.

Passo 1. traga o arquivo config-overrides.js

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url"),
        "net": require.resolve("net"),
        // "zlib": require.resolve("zlib"),
        "zlib": require.resolve("browserify-zlib"),
        "path": require.resolve("path"),
        "tls": require.resolve("tls"),
        //@jsdevtools
        fs: false
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

Modifique o próprio Webpack para jogar bem com framer-motion um pacote de UI de chakra

webpack.config.js

module.exports = {
    rules: [
        {
            test: /\.m?js/,
            resolve: {
                fullySpecified: false
            },
        }
    ],
    node: {
        fs: "empty"
    }
};

Passo 2. instalar react-app-rewired

yarn add react-app-rewired

reconfigurar nossos scripts de execução

"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

Execute seu projeto!

yarn start

Veja sua página ao vivo

http://localhost:3000/

Uma transmissão ao vivo da demonstração

https://dapp-template-nine.vercel.app/