hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement header as a TopBar component

Browse Source
This commit is contained in:
RcleydsonR 2022-11-16 01:27:29 -03:00
parent 91283305b9
commit 097837ddee
2 changed files with 58 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/App.vue
View File

@ -1,108 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { storeToRefs } from "pinia"; import TopBar from './components/TopBar.vue';
import { useEtherStore } from "./store/ether";
import ethers from "./utils/ethers";
const etherStore = useEtherStore();
const { walletAddress } = storeToRefs(etherStore);
const connectMetaMask = () => {
ethers.getProvider();
};
</script> </script>
<template> <template>
<header> <TopBar/>
<img
alt="P2Pix logo"
class="logo"
src="@/assets/logo.svg"
width="75"
height="75"
/>
<div class="flex gap-4 items-center">
<button type="button" class="p-2 text-gray-50">Quero vender</button>
<button
type="button"
v-if="!walletAddress"
class="p-2 border-amber-400 border-2 rounded text-gray-50"
@click="connectMetaMask()"
>
Conectar carteira
</button>
<span v-if="walletAddress">
{{ walletAddress[0] }}
</span>
</div>
<!-- <div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/pix">QrCode Pix</RouterLink>
<RouterLink to="/ethers">Ethers</RouterLink>
</nav>
</div> -->
</header>
</template> </template>
<style scoped> <style scoped>
header {
@apply flex flex-row justify-between w-full items-center;
}
.logo {
display: block;
}
/* nav {
width: 100%;
font-size: 12px;
text-align: center;
margin-top: 2rem;
}
nav a.router-link-exact-active {
color: var(--color-text);
}
nav a.router-link-exact-active:hover {
background-color: transparent;
}
nav a {
display: inline-block;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
border: 0;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
nav {
text-align: left;
margin-left: -1rem;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
} */
</style> </style>

56
src/components/TopBar.vue Normal file
View File

@ -0,0 +1,56 @@
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useEtherStore } from "../store/ether";
import ethers from "../utils/ethers";
const etherStore = useEtherStore();
const { walletAddress } = storeToRefs(etherStore);
const connectMetaMask = () => {
ethers.getProvider();
};
const formatWalletAddress = (): string => {
const walletAddressLength = walletAddress.value.length;
const initialText = walletAddress.value.substring(0, 5);
const finalText = walletAddress.value.substring(walletAddressLength - 6, walletAddressLength - 1);
return `${initialText} ... ${finalText}`;
}
</script>
<template>
<header>
<img
alt="P2Pix logo"
class="logo"
src="@/assets/logo.svg"
width="75"
height="75"
/>
<div class="flex gap-4 items-center">
<button type="button" class="p-2 text-gray-50">Quero vender</button>
<button
type="button"
v-if="!walletAddress"
class="p-2 border-amber-400 border-2 rounded text-gray-50"
@click="connectMetaMask()"
>
Conectar carteira
</button>
<span v-if="walletAddress" class="text-gray-50">
{{formatWalletAddress()}}
</span>
</div>
</header>
</template>
<style scoped>
header {
@apply flex flex-row justify-between w-full items-center;
}
.logo {
display: block;
}
</style>