add background image to app

src/App.vue

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

src/assets/main.css

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

src/components/TopBar.vue

@@ -14,9 +14,12 @@ const connectMetaMask = () => {
 const formatWalletAddress = (): string => {
   const walletAddressLength = walletAddress.value.length;
   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}`;
-}
+};
 </script>
 
 <template>
@@ -39,7 +42,7 @@ const formatWalletAddress = (): string => {
         Conectar carteira
       </button>
       <span v-if="walletAddress" class="text-gray-50">
-        {{formatWalletAddress()}}
+        {{ formatWalletAddress() }}
       </span>
     </div>
   </header>

src/utils/ethers.ts

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