implement first page header with metamask connection
Co-authored-by: geovanne97 <geovannessaraiva97@gmail.com> Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>
This commit is contained in:
RcleydsonR
parent
4ce650f0d2
commit
a2acb72a1b
41
src/App.vue
41
src/App.vue
@ -1,43 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from "vue-router";
|
||||
import HelloWorld from "./components/HelloWorld.vue";
|
||||
import ethers from "./ethers";
|
||||
|
||||
const connectMetaMask = () => {
|
||||
ethers.getProvider().then((web3Provider) => {
|
||||
console.log(web3Provider);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img
|
||||
alt="Vue logo"
|
||||
alt="P2Pix logo"
|
||||
class="logo"
|
||||
src="@/assets/logo.svg"
|
||||
width="125"
|
||||
height="125"
|
||||
width="75"
|
||||
height="75"
|
||||
/>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="flex gap-4">
|
||||
<button type="button" class="p-2 text-gray-50">Quero vender</button>
|
||||
<button
|
||||
type="button"
|
||||
class="p-2 border-amber-400 border-2 rounded text-gray-50"
|
||||
@click="connectMetaMask()"
|
||||
>
|
||||
Conectar carteira
|
||||
</button>
|
||||
</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>
|
||||
</div> -->
|
||||
</header>
|
||||
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
@apply flex flex-row justify-between w-full items-center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
/* nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
@ -66,7 +76,6 @@ nav a:first-of-type {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
@ -87,5 +96,5 @@ nav a:first-of-type {
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
||||
@ -1 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
<svg width="99" height="24" viewBox="0 0 99 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M49.4002 11.9505C49.4002 15.7893 46.9553 18.5084 43.5964 18.5084C41.6313 18.5084 40.1232 17.5487 39.2092 16.132V23.9467H36.6271V5.66678H39.2092V7.81467C40.1232 6.37512 41.6313 5.39258 43.6192 5.39258C46.9096 5.39258 49.4002 8.11172 49.4002 11.9505ZM46.7953 11.9505C46.7953 9.55126 45.2415 7.86037 43.048 7.86037C40.8544 7.86037 39.1863 9.55126 39.1863 11.9505C39.1863 14.3726 40.8544 16.0406 43.048 16.0406C45.2187 16.0406 46.7953 14.3726 46.7953 11.9505Z" fill="#F9FAFB"/>
|
||||
<path d="M63.5671 15.7664V18.2342H51.4338V16.3834L56.0724 12.3161C59.6598 9.18565 60.5738 8.38591 60.5738 6.96921C60.5738 5.57537 59.4999 4.43288 57.5348 4.43288C55.5925 4.43288 54.5186 5.55252 54.1758 7.38051H51.5709C51.9365 4.04443 54.3358 1.96509 57.649 1.96509C61.0536 1.96509 63.1787 4.15868 63.1787 6.85497C63.1787 9.27705 61.4878 10.7166 58.2203 13.5728L55.7068 15.7436L55.6611 15.7664H63.5671Z" fill="#F9FAFB"/>
|
||||
<path d="M78.8994 11.9505C78.8994 15.7893 76.4544 18.5084 73.0955 18.5084C71.1304 18.5084 69.6223 17.5487 68.7083 16.132V23.9467H66.1263V5.66678H68.7083V7.81467C69.6223 6.37512 71.1304 5.39258 73.1183 5.39258C76.4087 5.39258 78.8994 8.11172 78.8994 11.9505ZM76.2945 11.9505C76.2945 9.55126 74.7407 7.86037 72.5471 7.86037C70.3535 7.86037 68.6855 9.55126 68.6855 11.9505C68.6855 14.3726 70.3535 16.0406 72.5471 16.0406C74.7178 16.0406 76.2945 14.3726 76.2945 11.9505Z" fill="#F9FAFB"/>
|
||||
<path d="M84.4747 1.57664C84.4747 2.51349 83.7664 3.19899 82.7838 3.19899C81.847 3.19899 81.1158 2.51349 81.1158 1.57664C81.1158 0.662647 81.847 0 82.7838 0C83.7664 0 84.4747 0.662647 84.4747 1.57664ZM81.5042 5.66677H84.0863V18.2342H81.5042V5.66677Z" fill="#F9FAFB"/>
|
||||
<path d="M95.1913 18.2342L92.1523 13.7328L89.2275 18.2342H86.1199L90.6214 11.7677L86.3713 5.66675H89.456L92.2437 9.87113L94.94 5.66675H98.0476L93.7975 11.8134L98.2761 18.2342H95.1913Z" fill="#F9FAFB"/>
|
||||
<path d="M3.19484 2C4.63831 2 5.85787 2.95965 6.25372 4.27517C7.77317 4.38313 9.22864 5.04289 10.3042 6.1265L16.1101 11.9284C16.1301 11.9484 16.1541 11.9684 16.1741 11.9924L22.5398 18.354C23.3155 19.1338 24.3871 19.5776 25.4827 19.5776C25.4867 19.5776 25.4907 19.5776 25.4947 19.5776H25.8466C26.3264 18.422 27.466 17.6103 28.7975 17.6103C30.5609 17.6103 31.9923 19.0418 31.9923 20.8051C31.9923 22.5685 30.5609 24 28.7975 24C27.374 24 26.1745 23.0723 25.7586 21.7848H25.4987C25.4947 21.7848 25.4867 21.7848 25.4827 21.7848C23.8073 21.7848 22.1679 21.105 20.9884 19.9175L15.1585 14.0876C15.1345 14.0676 15.1065 14.0476 15.0825 14.0236L8.73682 7.67793C8.04107 6.97819 7.10141 6.55034 6.11777 6.47037C5.62595 7.59796 4.50236 8.38567 3.19084 8.38567C1.43148 8.38567 0 6.95819 0 5.19484C0 3.43148 1.43148 2 3.19484 2Z" fill="#F9FAFB"/>
|
||||
<path d="M3.19484 17.6103C4.52635 17.6103 5.66194 18.422 6.14576 19.5776H6.49763C6.50163 19.5776 6.50563 19.5776 6.50963 19.5776C7.60923 19.5776 8.68084 19.1338 9.45255 18.354L13.2512 14.5554L14.8066 16.1109L11.004 19.9135C9.82042 21.101 8.18502 21.7808 6.50963 21.7808C6.50563 21.7808 6.49763 21.7808 6.49363 21.7808H6.23373C5.82188 23.0643 4.61832 23.996 3.19484 23.996C1.43148 23.996 0 22.5645 0 20.8011C0 19.0378 1.43148 17.6103 3.19484 17.6103Z" fill="#F9FAFB"/>
|
||||
<path d="M28.7935 8.38567C27.462 8.38567 26.3264 7.57397 25.8426 6.41839H25.4907C25.4867 6.41839 25.4827 6.41839 25.4787 6.41839C24.3791 6.41839 23.3075 6.86223 22.5358 7.64194L18.7372 11.4406L17.1817 9.88513L20.9843 6.08251C22.1679 4.89495 23.8033 4.21519 25.4787 4.21519C25.4827 4.21519 25.4907 4.21519 25.4947 4.21519H25.7546C26.1705 2.92766 27.374 2 28.7935 2C30.5569 2 31.9883 3.43148 31.9883 5.19484C31.9883 6.95819 30.5569 8.38567 28.7935 8.38567Z" fill="#F9FAFB"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 308 B After Width: | Height: | Size: 3.6 KiB |
@ -4,9 +4,9 @@
|
||||
@tailwind utilities;
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
height: 100vh;
|
||||
|
||||
font-weight: normal;
|
||||
}
|
||||
@ -25,14 +25,4 @@ a,
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,19 +3,16 @@ import { ethers } from "ethers";
|
||||
const getProvider = async (): Promise<ethers.providers.Web3Provider> => {
|
||||
const window_ = window as any;
|
||||
|
||||
if(window_.ethereum){
|
||||
|
||||
const provider = new ethers.providers.Web3Provider(window_.ethereum)
|
||||
if (window_.ethereum) {
|
||||
const provider = new ethers.providers.Web3Provider(window_.ethereum);
|
||||
|
||||
const walletAddress = await provider.send("eth_requestAccounts", []);
|
||||
const balance = await provider.getBalance(walletAddress[0]);
|
||||
console.log(walletAddress);
|
||||
console.log(ethers.utils.formatEther(balance));
|
||||
|
||||
return provider
|
||||
}
|
||||
else
|
||||
console.log("Browser não suporta conexão com metamask")
|
||||
return provider;
|
||||
} else console.log("Browser não suporta conexão com metamask");
|
||||
};
|
||||
|
||||
export default { getProvider };
|
||||
@ -1,17 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import ethers from '../ethers'
|
||||
import ethers from "../ethers";
|
||||
|
||||
const connectMetaMask = () => {
|
||||
ethers.getProvider().then((web3Provider) => {
|
||||
console.log(web3Provider);
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="about">
|
||||
<button class="rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500 mt-4" @click="connectMetaMask()">Conectar metaMask</button>
|
||||
<button
|
||||
class="rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500 mt-4"
|
||||
@click="connectMetaMask()"
|
||||
>
|
||||
Conectar metaMask
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -29,12 +29,8 @@ const submit = () => {
|
||||
|
||||
const pixQrCode = pix({
|
||||
pixKey: pixModel.value.pixKey,
|
||||
merchantName: pixModel.value.name.trim()
|
||||
? pixModel.value.name
|
||||
: "name",
|
||||
merchantCity: pixModel.value.city.trim()
|
||||
? pixModel.value.city
|
||||
: "city",
|
||||
merchantName: pixModel.value.name.trim() ? pixModel.value.name : "name",
|
||||
merchantCity: pixModel.value.city.trim() ? pixModel.value.city : "city",
|
||||
transactionId: pixModel.value.transactionId.trim()
|
||||
? pixModel.value.transactionId
|
||||
: "***",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user