𝕏 (Twitter) Descentralizado
Crie um clone do twitter na blockchain
Criando o componente de Botão com Vue
Os componentes irão nos ajudar a deixar o código mais limpo, então a ideia é criá-los antes de começar a desenvolver a lógica para interagir com os contratos inteligentes.
Dica: caso queria entender melhor como funcionam os componentes com Vue, veja na própria documentação oficial.
Para criar o componente de botão, crie um arquivo dentro da pasta src/components chamado XButton.vue e insira o seguinte código:
<script setup>
defineProps({
loading: Boolean,
text: String
})
defineEmits(['click'])
</script>
<template>
<button
@click="$emit('click')"
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
<span v-if="loading">Carregando...</span>
<span v-else>{{ text }}</span>
</button>
</template>
Utilidade: esses componentes são baseados na biblioteca de componentes Tailwind chamada Flowbite.
Criando o componente de campo de texto com Vue
Antes de atualizar o campo de texto, abra o arquivo vite.config.js e atualize com o seguinte código:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
script: {
defineModel: true
}
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
Crie em seguida um outro arquivo dentro da pasta src/components chamado XTextField.vue e cole o seguinte código:
<script setup>
defineProps({
label: String
})
defineOptions({ inheritAttrs: false });
const modelValue = defineModel();
</script>
<template>
<div>
<label
:for="$attrs.name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>{{ label }}</label
>
<input
v-model="modelValue"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
v-bind="$attrs"
/>
</div>
</template>
Criando o componente das publicações com Vue
Por último, crie um arquivo chamado XPost.vue dentro da pasta src/components em que será armazenado as informações das postagens, com o seguinte código:
<script setup>
defineProps({
address: String,
timestamp: String,
message: String,
})
</script>
<template>
<div
class="border border-gray-700 p-4 rounded mb-2"
>
<div class="truncate">Carteira: {{ address }}</div>
<div>Data: {{ timestamp }}</div>
<div>Mensagem: {{ message }}</div>
</div>
</template>
Adicionando os componentes no projeto
Agora você deve abrir o arquivo App.vue e colar o seguinte código:
<script setup>
import XButton from './components/XButton.vue';
import XTextField from './components/XTextField.vue';
import XPost from './components/XPost.vue';
</script>
<template>
<main
class="bg-gray-900 min-h-screen flex items-center justify-center flex-col p-20"
>
<div
class="rounded-md border border-gray-700 text-white bg-gray-800 p-6 mx-auto w-full max-w-[600px]"
>
<h1 class="text-2xl mb-4">𝕏 (Twitter) Descentralizado</h1>
<p class="text-base mb-4">
Esse é um twitter descentralizado, conecte sua sua carteira blockchain e
use seus Ethereums para enviar uma mensagem. Cada post enviado você terá
chance de ganhar um valor de Ethereum de volta.
</p>
<XButton text="Conectar carteira" />
<XTextField label="Post" name="post" class="mb-2" type="text" id="post" placeholder="John" required />
<XButton text="Enviar post" />
<div class="flex items-center">
<span
class="bg-green-100 text-green-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-900 h-fit"
>
Conectado!
</span>
<span class="truncate">
<!-- {{ currentAccount }} -->
</span>
</div>
</div>
<div
class="mt-8 rounded-md border border-gray-700 text-white bg-gray-800 p-6 mx-auto w-full max-w-[600px]"
>
<h1 class="text-white text-lg mb-4">Todos os posts</h1>
<div class="text-center mb-4">Carregando...</div>
<XPost address="123" timestamp="16:54" message="Descrição da mensagem" />
</div>
</main>
</template>
Pronto, mandou muito! Agora só lembrar de rodar o projeto com npm run dev e visualizar as atualizações.
Lembre-se: sempre que terminar uma aula, envie as atualizações para o GitHub como foi ensinado nessa aula aqui.