Repositório

https://github.com/igormuba/SBDConversion

O que vou aprender?

Ensinarei um pouco de JavaScript e como usá-lo para criar URLs pra API SteemConnect para fazer calls para a blockchain Steem e também usar o JavaScript para manipulação de DOM para criar um link que aparece somente após o usuário digitar seu nome

Concatenação de strings JavaScript
Chamada da API da blockchain Steem pela URL do SteemConnect
manipulação de DOM para mostrar partes ocultas do código

Requisitos

Não é necessário ter nenhum conhecimento prévio, mas saber o seguinte pode ajudá-lo a desenvolver seus próprios aplicativos

Editor de texto (estou usando o VS Code)
Navegador que suporte JavaScript (estou usando o Firefox)
JavaScript
JSON
OAuth ou SteemConnect

Dificuldade

Básico

Conteúdo do tutorial

Aqui vou ensinar como criar um aplicativo muito útil. Quando os preços do SBD são inferiores a um dólar, você pode usar uma função da blockchain ad Steem que converte SBD em Steem como se valesse 1 dólar. Você ganha mais Steem pelos seus SBD! (isso não é sugestão nem dica de investimento e há RISCOS fazendo essa operação, por exemplo, se o preço do Steem sobe ou os preços do SBD sobem, ou ambos, vocês perdem! Este tutorial é para propósitos educacionais de programação apenas!)

Vamos começar criando o arquivo html, na maioria dos editores de código se você abrir um arquivo HTML vazio e digitar doctype ou html e pressionar tab irá preencher o corpo para você, isso é útil pois nosso foco principal não é HTML

Crie um arquivo index.html em uma pasta dedicada

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<title></title>
</head>

<body>
</body>

</html>

Adicionando estilos

Para este tutorial usaremos uma biblioteca CSS chamada Bootstrap para que possamos tornar nosso formulário um pouquinho mais bonito, mas você não precisa, de forma alguma, usá-lo, eu só quero que você comece a se sentir acostumado a importar arquivos CSS para tornar as coisas mais bonitas
Você pode ler mais sobre o bootstrap em http://getbootstrap.com/

Para adicionar a biblioteca de bootstrap em nossa página, basta colocar entre as tags head

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Criando arquivo pra lógica do JS

Na mesma pasta que o index.html, crie uma pasta chamada js (ou qualquer outro padrão que você preferir) e dentro dela crie o app.js (ou qualquer nome que você desejar) para hospedar a lógica JavaScript do aplicativo

A estrutura:

Importanto o js pro index

Dentro do index.html importe a lógica do JavaScript dentro das tags body, bem no finalzinho, para garantir que quando ele é carregado ele tenha acesso a todos os elementos HTML, usando

<script src="js/app.js"></script>

Criando o formulário (com ou sem) bootstrap

Eu gostaria de lhe dar uma breve introdução ao bootstrap.
Eu não uso essa biblioteca para trabalhar pois é muito "manjada", digamos, mas acredito que para criar protótipos e criar aplicativos simples, para mim, é ótimo porque é simples, leve e fácil de usar, também há muita documentação e componentes prontos para usar online!

Vamos aproveitar um desses elementos pré-construídos?

Neste tutorial vamos editar o formulário fornecido pela w3schools em
https://www.w3schools.com/bootstrap/bootstrap_forms.asp

 <form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Pegue esse código e cole dentro das tags do body do HTML

Personalização do formulário

Nós não queremos um formulário de login, então devemos mudar algumas coisas!
Começando removendo o atributo de ação e adicionando a classe formsteem nela para que possamos usar posteriormente na lógica JavaScript
assim

 <form action="/action_page.php">

se torna

 <form class ="formsteem">

e também não queremos um e-mail, mas sim um nome de usuário, então

<label for="email">

vira

<label for="SteemAccount">

e, consequentemente, devemos alterar o ID e o tipo do que anteriormente deveria ser o campo de e-mail!
mude o atributo type = e dê a ele o valor de text ao invés deemail, e o id mude para SteemAccount

No final, o primeiro campo se torna

E ele se parece assim

Mas nós não precisamos de uma senha (ainda), precisamos do valor do SBD, então, novamente, faça as mudanças necessárias

<div class="form-group">
              <label for="SbdAmount">SBD Amount to convert:</label>
              <input type="text" class="form-control" id="SbdAmount">
            </div>
            <button type="submit" class="btn btn-default">Convert</button>

Agora nós definimos as classes, aparência e IDs e só precisamos da lógica!

Pegando o evento click do botão enviar

Para pegar o evento click, no app.js, usaremos a função querySelector

document.querySelector(".formsteem").addEventListener('submit', function(event){
event.preventDefault();
//code logic goes here
});

O acima irá listar o evento submit do formulário. Por padrão, isso recarregaria a página, é por isso que estamos usando a função de evento event.preventDefault ();, não queremos que a página seja recarregada!

Como é a estrutura do URL da chamada de conversão do SBD

A estrutura da URL é a seguinte

https://steemconnect.com/sign/convert?owner=USERNAME&requestid=OPERATION ID&amount=QUANTITY%20SBD

Como você pode ver, precisamos do nome de usuário, da ID da operação e da quantidade. O ID de operação deve ser único, ou seja, não deve haver outra operação em sua conta com o mesmo ID AO MESMO TEMPO.

Nós vamos obter todos os dados necessários com este código

    let username = document.querySelector('#SteemAccount').value;
    let quantity = parseFloat(document.querySelector('#SbdAmount').value);
    let opId = username+quantity;

A primeira linha seleciona o HTML com o ID SteemAccount, o mesmo com o elemento SbdAmount, mas este últo faz o parse dele para float
Então, para o ID exclusivo, você pode usar algum gerador de hash chique e mais complxo! Mas eu não acho que você vai fazer milhares de transações, então eu pensei que criar uma string com o nome de usuário concatenado com o valor sbd deveria ser suficiente.

let url = `https://steemconnect.com/sign/convert?owner=${username}&requestid=${opId}&amount=${quantity}%20SBD`;

Criando um elemento shadow no HTML

De volta ao código html muito brevemente, na parte inferior do código logo acima da tag body de fechamento, adicione uma tag âncora vazia com um ID e um atributo href, para que possamos usar a manipulação DOM para preenchê-lo com o link.

Fazendo o link aparecer depois que o usuário clicar no botão.

A última parte é manipular o documento HTML para fazer o link aparecer.

// makes the shadow anchor tag link to the generated url
document.querySelector('#linkToConversor').href = url;
// inserts text so it can appear
document.querySelector('#linkToConversor').innerHTML = "Click here to go to steemconnect";

Usando o app

Agora, se você quiser converter seu SBD em Steem, você só precisa preencher seu nome de usuário e quantos SBD você deseja converter.
Tenha cuidado, pois da mesma forma que você pode ganhar dinheiro se o Steem cair e o SBD cair, o cenário oposto também pode fazer você perder dinheiro! E MUITO!
@timcliff tem uma excelente explicação (em inglês) sobre como isso funciona e você pode ler mais sobre aqui
https://steemit.com/sbd/@timcliff/how-to-convert-sbd-into-steem-using-steemconnect

Agora vamos usar um truque de JavaScript para colocar as variáveis na string de URL