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

6
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;
} }

7
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>

7
src/utils/ethers.ts
View File

@ -1,7 +1,8 @@
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 =
async (): Promise<ethers.providers.Web3Provider | null> => {
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const window_ = window as any; const window_ = window as any;
const connection = window_.ethereum; const connection = window_.ethereum;
@ -17,8 +18,8 @@ const connectProvider = async (): Promise<ethers.providers.Web3Provider | null>
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");