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

add background image to app

Browse Source
This commit is contained in:
RcleydsonR 2022-11-16 01:30:23 -03:00
parent fefebcf91e
commit 85d76c9e42
5 changed files with 67 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@ -1,11 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import TopBar from './components/TopBar.vue'; import TopBar from "./components/TopBar.vue";
</script> </script>
<template> <template>
<TopBar/> <TopBar />
</template> </template>
<style scoped> <style scoped></style>
</style>

36
src/assets/bg.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 3.9 MiB

4
src/assets/main.css
View File

@ -5,8 +5,10 @@
#app { #app {
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem 4rem;
height: 100vh; height: 100vh;
background-image: url( './bg.svg' );
background-size: cover;
font-weight: normal; font-weight: normal;
} }

9
src/components/TopBar.vue
View File

@ -14,9 +14,12 @@ const connectMetaMask = () => {
const formatWalletAddress = (): string => { const formatWalletAddress = (): string => {
const walletAddressLength = walletAddress.value.length; const walletAddressLength = walletAddress.value.length;
const initialText = walletAddress.value.substring(0, 5); const initialText = walletAddress.value.substring(0, 5);
const finalText = walletAddress.value.substring(walletAddressLength - 6, walletAddressLength - 1); const finalText = walletAddress.value.substring(
walletAddressLength - 6,
walletAddressLength - 1
);
return `${initialText} ... ${finalText}`; return `${initialText} ... ${finalText}`;
} };
</script> </script>
<template> <template>
@ -39,7 +42,7 @@ const formatWalletAddress = (): string => {
Conectar carteira Conectar carteira
</button> </button>
<span v-if="walletAddress" class="text-gray-50"> <span v-if="walletAddress" class="text-gray-50">
{{formatWalletAddress()}} {{ formatWalletAddress() }}
</span> </span>
</div> </div>
</header> </header>

37
src/utils/ethers.ts
View File

@ -1,28 +1,29 @@
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { ethers } from "ethers"; import { ethers } from "ethers";
const connectProvider = async (): Promise<ethers.providers.Web3Provider | null> => { const connectProvider =
const etherStore = useEtherStore(); async (): Promise<ethers.providers.Web3Provider | null> => {
const window_ = window as any; const etherStore = useEtherStore();
const connection = window_.ethereum; const window_ = window as any;
let provider: ethers.providers.Web3Provider | null = null; const connection = window_.ethereum;
let provider: ethers.providers.Web3Provider | null = null;
if (connection) { if (connection) {
provider = new ethers.providers.Web3Provider(connection); provider = new ethers.providers.Web3Provider(connection);
const walletAddress = await provider.send("eth_requestAccounts", []); const walletAddress = await provider.send("eth_requestAccounts", []);
const balance = await provider.getBalance(walletAddress[0]); const balance = await provider.getBalance(walletAddress[0]);
etherStore.setProvider(provider); etherStore.setProvider(provider);
etherStore.setWalletAddress(walletAddress[0]); etherStore.setWalletAddress(walletAddress[0]);
etherStore.setBalance(Number(balance)); etherStore.setBalance(Number(balance));
connection.on('accountsChanged', (accounts: string[]) => { connection.on("accountsChanged", (accounts: string[]) => {
etherStore.setWalletAddress(accounts[0]) etherStore.setWalletAddress(accounts[0]);
}); });
} else console.log("Browser não suporta conexão com metamask"); } else console.log("Browser não suporta conexão com metamask");
return provider; return provider;
}; };
export default { connectProvider }; export default { connectProvider };