From 42efb1776ad9f1bc0f83af6633fb353e4fe9efac Mon Sep 17 00:00:00 2001
From: Johnson Chen <chnejohnson@gmail.com>
Date: Tue, 30 Apr 2024 12:13:14 +0800
Subject: [PATCH] format some files

---
 src/App.vue               | 422 ++++++++++++----------
 src/components/Footer.vue |  93 ++---
 src/main.ts               |  42 +--
 src/views/Home.vue        | 733 ++++++++++++++++++++------------------
 4 files changed, 681 insertions(+), 609 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3dac931..a1c79a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,225 +1,253 @@
 <template>
-  <Navbar />
-
-  <div class="main-container background-main">
-
-    <!-- Connect Wallet modal -->
-    <div class="modal fade" id="connectModal" tabindex="-1" aria-labelledby="connectModalLabel" aria-hidden="true">
-      <div class="modal-dialog modal-sm" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Connect your wallet</h5>
-            <button id="closeConnectModal" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true"></span>
-            </button>
-          </div>
-          <div class="modal-body row">
-
-            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
-              <img src="./assets/wallets/metamask.png" class="card-img-top card-img-wallet" alt="MetaMask">
-            </div>
-
-            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
-              <img src="./assets/wallets/bifrost.png" class="card-img-top card-img-wallet" alt="Bifrost">
-            </div> 
-
-            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
-              <img src="./assets/wallets/rabby.png" class="card-img-top card-img-wallet" alt="Rabby">
-            </div> 
-
-            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
-              <img src="./assets/wallets/brave.png" class="card-img-top card-img-wallet" alt="Brave">
-            </div>
-
-            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
-              <img src="./assets/wallets/zerion.png" class="card-img-top card-img-wallet" alt="Zerion">
-            </div>
-
-            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectCoinbase">
-              <img src="./assets/wallets/coinbase.png" class="card-img-top card-img-wallet" alt="Coinbase">
-            </div>
-
-            <!--
+	<Navbar />
+
+	<div class="main-container background-main">
+		<!-- Connect Wallet modal -->
+		<div class="modal fade" id="connectModal" tabindex="-1" aria-labelledby="connectModalLabel" aria-hidden="true">
+			<div class="modal-dialog modal-sm" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title">Connect your wallet</h5>
+						<button
+							id="closeConnectModal"
+							type="button"
+							class="btn-close"
+							data-bs-dismiss="modal"
+							aria-label="Close"
+						>
+							<span aria-hidden="true"></span>
+						</button>
+					</div>
+					<div class="modal-body row">
+						<div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+							<img
+								src="./assets/wallets/metamask.png"
+								class="card-img-top card-img-wallet"
+								alt="MetaMask"
+							/>
+						</div>
+
+						<div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+							<img
+								src="./assets/wallets/bifrost.png"
+								class="card-img-top card-img-wallet"
+								alt="Bifrost"
+							/>
+						</div>
+
+						<div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+							<img src="./assets/wallets/rabby.png" class="card-img-top card-img-wallet" alt="Rabby" />
+						</div>
+
+						<div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+							<img src="./assets/wallets/brave.png" class="card-img-top card-img-wallet" alt="Brave" />
+						</div>
+
+						<div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+							<img src="./assets/wallets/zerion.png" class="card-img-top card-img-wallet" alt="Zerion" />
+						</div>
+
+						<div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectCoinbase">
+							<img
+								src="./assets/wallets/coinbase.png"
+								class="card-img-top card-img-wallet"
+								alt="Coinbase"
+							/>
+						</div>
+
+						<!--
 
             <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
               <img src="./assets/wallets/imtoken.png" class="card-img-top card-img-wallet" alt="imToken">
             </div>
             -->
 
-            <div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
-              <img src="./assets/wallets/trust.png" class="card-img-top card-img-wallet" alt="Trust Wallet">
-            </div>
-            
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- END Connect Wallet modal -->
-
-    <router-view></router-view>
-
-    <Footer />
-  </div>
-  
+						<div class="card col-6 cursor-pointer wallet-img-wrapper" @click="connectMetaMask">
+							<img
+								src="./assets/wallets/trust.png"
+								class="card-img-top card-img-wallet"
+								alt="Trust Wallet"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- END Connect Wallet modal -->
+
+		<router-view></router-view>
+
+		<Footer />
+	</div>
 </template>
 
 <script lang="ts">
-import { ethers } from 'ethers';
-import { useEthers, useWallet, MetaMaskConnector, CoinbaseWalletConnector } from 'vue-dapp';
-import { mapActions, mapGetters, mapMutations } from 'vuex';
-import Navbar from './components/Navbar.vue';
-import Footer from './components/Footer.vue';
-import tldsJson from './abi/tlds.json';
-import tldAbi from './abi/PunkTLD.json';
-import useChainHelpers from "./hooks/useChainHelpers";
+import { ethers } from 'ethers'
+import { useEthers, useWallet, MetaMaskConnector, CoinbaseWalletConnector } from 'vue-dapp'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import Navbar from './components/Navbar.vue'
+import Footer from './components/Footer.vue'
+import tldsJson from './abi/tlds.json'
+import tldAbi from './abi/PunkTLD.json'
+import useChainHelpers from './hooks/useChainHelpers'
 
 export default {
-  components: {
-    Navbar,
-    Footer
-  },
-
-  mounted() {
-    if (!this.isActivated) {
-			if (localStorage.getItem("connected") == "metamask") {
-				this.connectMetaMask();
-			} else if (localStorage.getItem("connected") == "coinbase") {
-				this.connectCoinbase();
+	components: {
+		Navbar,
+		Footer,
+	},
+
+	mounted() {
+		if (!this.isActivated) {
+			if (localStorage.getItem('connected') == 'metamask') {
+				this.connectMetaMask()
+			} else if (localStorage.getItem('connected') == 'coinbase') {
+				this.connectCoinbase()
 			}
 		}
 
-    this.fetchReferrer();
-    this.setTldContract();
-    this.fetchMinterContractData();
-    this.checkIfAdmin();
-
-    // reset localstorage
-    const v2 = localStorage.getItem("punkv1");
-
-    if (!v2) {
-      localStorage.clear();
-      localStorage.setItem("connected", "null");
-      localStorage.setItem("punkv1", "true");
-    }
-  },
-
-  computed: {
-    ...mapGetters("user", ["getUserSelectedName"]),
-  },
-
-  methods: {
-    ...mapActions("user", ["checkIfAdmin", "fetchUserDomainNames", "fetchCanUserBuy"]),
-    ...mapActions("tld", ["fetchMinterContractData"]),
-
-    ...mapMutations("user", ["setUserData"]),
-    ...mapMutations("network", ["setNetworkData"]),
-    ...mapMutations("tld", ["setTldContract"]),
-
-    async connectCoinbase() {
-			await this.connectWith(this.coinbaseConnector);
-			localStorage.setItem("connected", "coinbase"); // store in local storage to autoconnect next time
-			document.getElementById('closeConnectModal').click();
+		this.fetchReferrer()
+		this.setTldContract()
+		this.fetchMinterContractData()
+		this.checkIfAdmin()
+
+		// reset localstorage
+		const v2 = localStorage.getItem('punkv1')
+
+		if (!v2) {
+			localStorage.clear()
+			localStorage.setItem('connected', 'null')
+			localStorage.setItem('punkv1', 'true')
+		}
+	},
+
+	computed: {
+		...mapGetters('user', ['getUserSelectedName']),
+	},
+
+	methods: {
+		...mapActions('user', ['checkIfAdmin', 'fetchUserDomainNames', 'fetchCanUserBuy']),
+		...mapActions('tld', ['fetchMinterContractData']),
+
+		...mapMutations('user', ['setUserData']),
+		...mapMutations('network', ['setNetworkData']),
+		...mapMutations('tld', ['setTldContract']),
+
+		async connectCoinbase() {
+			await this.connectWith(this.coinbaseConnector)
+			localStorage.setItem('connected', 'coinbase') // store in local storage to autoconnect next time
+			document.getElementById('closeConnectModal').click()
 		},
 
 		async connectMetaMask() {
-			await this.connectWith(this.mmConnector);
-			localStorage.setItem("connected", "metamask"); // store in local storage to autoconnect next time
-			document.getElementById('closeConnectModal').click();
+			await this.connectWith(this.mmConnector)
+			localStorage.setItem('connected', 'metamask') // store in local storage to autoconnect next time
+			document.getElementById('closeConnectModal').click()
 		},
 
-    async fetchReferrer() {
-      // check if any referral is present: ?ref=...
-      const urlParams = new URLSearchParams(window.location.search);
-      const referral = urlParams.get('ref');
-
-      // check if domain name or address in the ref field
-      if (referral && referral.split(".").length === 2) { // likely a domain name
-        // split referral into two (domain name and TLD)
-        const domArr = referral.split(".");
-
-        for (let netId in tldsJson) { // iterate through different chains
-          if (tldsJson[netId]["."+domArr[1]]) { // find the correct TLD
-            // get fallback provider based on network ID
-            const fProvider = this.getFallbackProvider(Number(netId));
-            // create TLD contract (only new ABIs)
-            const intfc = new ethers.utils.Interface(tldAbi);
-            const refContract = new ethers.Contract(tldsJson[netId]["."+domArr[1]], intfc, fProvider);
-            // fetch domain holder
-            const refDomainHolder = await refContract.getDomainHolder(domArr[0]);
-
-            if (refDomainHolder !== ethers.constants.AddressZero) {
-              localStorage.setItem("referral", refDomainHolder); // store referral address in local storafe
-            }
-            break;
-          }
-        }
-      } else if (referral && ethers.utils.isAddress(referral)) { // valid address
-        // the last found referral is considered
-        localStorage.setItem("referral", referral); // store referral address in local storafe
-      }
-    }
-  },
-
-  setup() {
-    const { address, chainId, isActivated } = useEthers();
-    const { connectWith } = useWallet();
-    const { getFallbackProvider } = useChainHelpers();
-
-    const coinbaseConnector = new CoinbaseWalletConnector({
-			appName: "ModeChat ID",
-			jsonRpcUrl: "https://mainnet.mode.network/",
-		});
+		async fetchReferrer() {
+			// check if any referral is present: ?ref=...
+			const urlParams = new URLSearchParams(window.location.search)
+			const referral = urlParams.get('ref')
+
+			// check if domain name or address in the ref field
+			if (referral && referral.split('.').length === 2) {
+				// likely a domain name
+				// split referral into two (domain name and TLD)
+				const domArr = referral.split('.')
+
+				for (let netId in tldsJson) {
+					// iterate through different chains
+					if (tldsJson[netId]['.' + domArr[1]]) {
+						// find the correct TLD
+						// get fallback provider based on network ID
+						const fProvider = this.getFallbackProvider(Number(netId))
+						// create TLD contract (only new ABIs)
+						const intfc = new ethers.utils.Interface(tldAbi)
+						const refContract = new ethers.Contract(tldsJson[netId]['.' + domArr[1]], intfc, fProvider)
+						// fetch domain holder
+						const refDomainHolder = await refContract.getDomainHolder(domArr[0])
+
+						if (refDomainHolder !== ethers.constants.AddressZero) {
+							localStorage.setItem('referral', refDomainHolder) // store referral address in local storafe
+						}
+						break
+					}
+				}
+			} else if (referral && ethers.utils.isAddress(referral)) {
+				// valid address
+				// the last found referral is considered
+				localStorage.setItem('referral', referral) // store referral address in local storafe
+			}
+		},
+	},
+
+	setup() {
+		const { address, chainId, isActivated } = useEthers()
+		const { connectWith } = useWallet()
+		const { getFallbackProvider } = useChainHelpers()
+
+		const coinbaseConnector = new CoinbaseWalletConnector({
+			appName: 'ModeChat ID',
+			jsonRpcUrl: 'https://mainnet.mode.network/',
+		})
 
 		const mmConnector = new MetaMaskConnector({
-			appUrl: "https://id.modechat.xyz",
-		});
-
-    return {
-      address, chainId, coinbaseConnector, connectWith, getFallbackProvider, isActivated, mmConnector
-    }
-  },
-
-  watch: {
-    address(newVal, oldVal) {
-      if (newVal) {
-        this.setUserData();
-        this.fetchUserDomainNames(true);
-        this.checkIfAdmin();
-      }
-    },
-
-    chainId(newVal, oldVal) {
-      if (!this.isActivated) {
-        if (localStorage.getItem("connected") == "metamask") {
-          this.connectMetaMask();
-        } else if (localStorage.getItem("connected") == "coinbase") {
-          this.connectCoinbase();
-        }
-      }
-
-      if (this.chainId >= 1) {
-        this.setUserData();
-        this.setNetworkData();
-        this.fetchUserDomainNames(true);
-        this.checkIfAdmin();
-      }
-    },
-
-    isActivated(newVal, oldVal) {
-      if (!localStorage.getItem("connected") && localStorage.getItem("connected") !== "null") {
-        // set this to auto-connect on next visit
-        localStorage.setItem("connected", "metamask");
-      }
-    }
-  },
+			appUrl: 'https://id.modechat.xyz',
+		})
+
+		return {
+			address,
+			chainId,
+			coinbaseConnector,
+			connectWith,
+			getFallbackProvider,
+			isActivated,
+			mmConnector,
+		}
+	},
+
+	watch: {
+		address(newVal, oldVal) {
+			if (newVal) {
+				this.setUserData()
+				this.fetchUserDomainNames(true)
+				this.checkIfAdmin()
+			}
+		},
+
+		chainId(newVal, oldVal) {
+			if (!this.isActivated) {
+				if (localStorage.getItem('connected') == 'metamask') {
+					this.connectMetaMask()
+				} else if (localStorage.getItem('connected') == 'coinbase') {
+					this.connectCoinbase()
+				}
+			}
+
+			if (this.chainId >= 1) {
+				this.setUserData()
+				this.setNetworkData()
+				this.fetchUserDomainNames(true)
+				this.checkIfAdmin()
+			}
+		},
+
+		isActivated(newVal, oldVal) {
+			if (!localStorage.getItem('connected') && localStorage.getItem('connected') !== 'null') {
+				// set this to auto-connect on next visit
+				localStorage.setItem('connected', 'metamask')
+			}
+		},
+	},
 }
 </script>
 
 <style scoped>
 .main-container {
-  padding: 20px;
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
+	padding: 20px;
+	max-width: 100%;
+	margin-left: auto;
+	margin-right: auto;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 4073da4..5e12418 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,84 +1,85 @@
 <template>
-  <div class="container-fluid text-center mt-3">
-    <router-link v-if="isActivated && isNetworkSupported" to="/profile">Profile</router-link>
-    
-    <span v-if="isActivated && isNetworkSupported"> | </span>
+	<div class="container-fluid text-center mt-3">
+		<router-link v-if="isActivated && isNetworkSupported" to="/profile">Profile</router-link>
 
-    <router-link v-if="isActivated && isNetworkSupported" to="/send-tokens">Send Tokens</router-link>
-    <span v-if="isActivated && isNetworkSupported"> | </span>
+		<span v-if="isActivated && isNetworkSupported"> | </span>
 
-    <router-link v-if="isUserMinterAdmin || isUserRoyaltyFeeUpdater || isUserTldAdmin" to="/admin">Admin</router-link>
-    <span v-if="isUserMinterAdmin || isUserRoyaltyFeeUpdater || isUserTldAdmin"> | </span>
+		<router-link v-if="isActivated && isNetworkSupported" to="/send-tokens">Send Tokens</router-link>
+		<span v-if="isActivated && isNetworkSupported"> | </span>
 
-    <a target="_blank" href="https://punk.domains">Powered by Punk Domains</a> |
-    <a target="_blank" href="https://modechat.xyz">Built for Mode Chat</a>
-  </div>
+		<router-link v-if="isUserMinterAdmin || isUserRoyaltyFeeUpdater || isUserTldAdmin" to="/admin"
+			>Admin</router-link
+		>
+		<span v-if="isUserMinterAdmin || isUserRoyaltyFeeUpdater || isUserTldAdmin"> | </span>
 
-  <div class="container-fluid text-center">
+		<a target="_blank" href="https://punk.domains">Powered by Punk Domains</a> |
+		<a target="_blank" href="https://modechat.xyz">Built for Mode Chat</a>
+	</div>
 
-    <a class="icons" href="http://docs.punk.domains" target="_blank"><i class="bi bi-journal-text"></i></a>
+	<div class="container-fluid text-center">
+		<a class="icons" href="http://docs.punk.domains" target="_blank"><i class="bi bi-journal-text"></i></a>
 
-    <a class="icons" target="_blank" href="https://github.com/punk-domains-2/modechat-id-frontend"><i class="bi bi-github"></i></a>
+		<a class="icons" target="_blank" href="https://github.com/punk-domains-2/modechat-id-frontend"
+			><i class="bi bi-github"></i
+		></a>
 
-    <a class="icons" target="_blank" href="https://discord.gg/8dSrwrAQeu"><i class="bi bi-discord"></i></a>
+		<a class="icons" target="_blank" href="https://discord.gg/8dSrwrAQeu"><i class="bi bi-discord"></i></a>
 
-    <a class="icons" target="_blank" href="https://twitter.com/PunkDomains"><i class="bi bi-twitter"></i></a>
-    
-  </div>
+		<a class="icons" target="_blank" href="https://twitter.com/PunkDomains"><i class="bi bi-twitter"></i></a>
+	</div>
 </template>
 
 <script>
-import { useEthers } from 'vue-dapp';
-import { mapGetters } from 'vuex';
+import { useEthers } from 'vue-dapp'
+import { mapGetters } from 'vuex'
 
 export default {
-  name: "Footer",
-
-  computed: {
-    ...mapGetters("network", ["isNetworkSupported"]),
-    ...mapGetters("user", ["isUserMinterAdmin", "isUserTldAdmin", "isUserRoyaltyFeeUpdater"]),
-    
-  },
-
-  setup() {
-    const { isActivated } = useEthers()
-    return { isActivated }
-  },
+	name: 'Footer',
+
+	computed: {
+		...mapGetters('network', ['isNetworkSupported']),
+		...mapGetters('user', ['isUserMinterAdmin', 'isUserTldAdmin', 'isUserRoyaltyFeeUpdater']),
+	},
+
+	setup() {
+		const { isActivated } = useEthers()
+		return { isActivated }
+	},
 }
 </script>
 
 <style scoped>
 a {
-  text-decoration: none;
+	text-decoration: none;
 }
 
 a:hover {
-  text-decoration: underline;
+	text-decoration: underline;
 }
 
 .container-fluid {
-  /*background-color: #24263A;*/
-  background-color: transparent;
-  padding: 20px 0px;
-  border-radius: 10px;
+	/*background-color: #24263A;*/
+	background-color: transparent;
+	padding: 20px 0px;
+	border-radius: 10px;
 }
 
 .icons {
-  margin-left: 15px;
-  margin-right: 15px;
-  font-size: 2em;
+	margin-left: 15px;
+	margin-right: 15px;
+	font-size: 2em;
 }
 
 .polygon {
-  vertical-align: text-bottom;
-  width: 40px;
+	vertical-align: text-bottom;
+	width: 40px;
 }
 
 .polygon svg circle {
-  fill: #DBDFEA;
+	fill: #dbdfea;
 }
 
 .polygon:hover svg circle {
-  fill: white;
+	fill: white;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main.ts b/src/main.ts
index 0a228d5..3b4fc17 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,38 +2,38 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import "bootstrap/dist/css/bootstrap.min.css"
-import "bootstrap"
-import "bootstrap-icons/font/bootstrap-icons.css"
-import Toast, { POSITION, TYPE } from "vue-toastification";
-import "vue-toastification/dist/index.css";
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap'
+import 'bootstrap-icons/font/bootstrap-icons.css'
+import Toast, { POSITION, TYPE } from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
 import './index.css'
 import { VueDapp } from 'vue-dapp'
 
-const app = createApp(App);
+const app = createApp(App)
 
 const options = {
-  timeout: 5000,
-  hideProgressBar: true,
-  closeButton: "button",
-  position:POSITION.TOP_LEFT,
-  toastClassName: "punk-toast-class",
-  closeOnClick: false,
+	timeout: 5000,
+	hideProgressBar: true,
+	closeButton: 'button',
+	position: POSITION.TOP_LEFT,
+	toastClassName: 'punk-toast-class',
+	closeOnClick: false,
 
-  toastDefaults: {
-    // ToastOptions object for each type of toast
-    [TYPE.INFO]: {
-        timeout: false,
-        icon: false
-    }    
-  }
+	toastDefaults: {
+		// ToastOptions object for each type of toast
+		[TYPE.INFO]: {
+			timeout: false,
+			icon: false,
+		},
+	},
 }
 
 app.use(router)
 app.use(store)
 
-app.use(VueDapp);
+app.use(VueDapp)
 
-app.use(Toast, options);
+app.use(Toast, options)
 
 app.mount('#app')
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f5f4c1b..e1773be 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,402 +1,445 @@
 <template>
-  <div class="container text-center">
-    <img class="img-fluid main-img" src="/assets/favicon.svg" />
-
-    <div class="text-align-header mt-5 mb-2">
-      <h1>Mint your {{getTldName}} web3 username!</h1>
-      <p>
-        And use it as username on  
-        <a href="https://modechat.xyz" target="_blank">
-          ModeChat, a decentralized social network on Mode
-        </a>.
-      </p>
-    </div>
-
-    <div class="d-flex justify-content-center domain-input-container mb-3 mt-5">
-      <div class="input-group domain-input input-group-lg input-sizing">
-        <input
-          v-model="chosenDomainName" 
-          placeholder="enter desired name"
-          type="text" 
-          class="form-control text-end border-2 border-end-0 border-light"
-          aria-label="Text input with dropdown button"
-        >
-
-        <span class="input-group-text tld-addon border-2 border-light">
-          <span v-if="loading" class="spinner-border spinner-border-sm mx-1" role="status" aria-hidden="true"></span>
-          <span>{{getTldName}}</span>
-        </span>
-      </div>
-    </div>
-
-    <p class="error">
-      <small v-if="buyNotValid(chosenDomainName).invalid">
-        <em>{{ buyNotValid(chosenDomainName).message }}</em>
-      </small>
-    </p>
-
-    <div class="text-align-header">
-      <p class="mt-5 price-text">
-          Domain price: {{getFormattedPrice(getPrice)}} {{getPaymentTokenName}}
-      </p>
-    </div>
-
-    <!-- Minter contract paused -->
-    <button v-if="isActivated && getMinterPaused && !getMinterLoadingData" class="btn btn-primary btn-lg mt-3 buy-button" :disabled="true">
-      <span v-if="getMinterPaused">Buying paused</span>
-    </button>
-
-    <!-- Minter contract loading data -->
-    <button v-if="isActivated && isNetworkSupported && getMinterLoadingData" class="btn btn-primary btn-lg mt-3 buy-button" :disabled="true">
-      <span class="spinner-border spinner-border-sm mx-1" role="status" aria-hidden="true"></span>
-      <span>Loading data</span>
-    </button>
-
-    <!-- Not eligible -->
-    <button 
-      v-if="isActivated && isNetworkSupported && !getMinterPaused && !getCanUserBuy && !getMinterLoadingData" 
-      class="btn btn-primary btn-lg mt-3 buy-button" 
-      :disabled="waiting || buyNotValid(chosenDomainName).invalid || !hasUserEnoughTokens"
-    >
-      <span>Not eligible</span>
-    </button>
-
-    <!-- Too low ETH balance -->
-    <button 
-      v-if="isActivated && isNetworkSupported && !getMinterPaused && !hasUserEnoughTokens && getCanUserBuy && !getMinterLoadingData" 
-      class="btn btn-primary btn-lg mt-3 buy-button" 
-      :disabled="waiting || buyNotValid(chosenDomainName).invalid || !hasUserEnoughTokens"
-    >
-      <span>Your {{getPaymentTokenName}} balance is too low</span>
-    </button>
-
-    <!-- Buy domain -->
-    <button 
-      v-if="isActivated && isNetworkSupported && getCanUserBuy && !getMinterPaused && hasUserEnoughTokens && !getMinterLoadingData" 
-      class="btn btn-primary btn-lg mt-3 buy-button" 
-      @click="buyDomain" 
-      :disabled="waiting || buyNotValid(chosenDomainName).invalid || !hasUserEnoughTokens"
-    >
-      <span v-if="waiting" class="spinner-border spinner-border-sm mx-1" role="status" aria-hidden="true"></span>
-      <span>Buy domain</span>
-    </button>
-
-    <!-- Connect Wallet -->
-    <button v-if="!isActivated" class="btn btn-primary btn-lg mt-3 btn-Disconnected" data-bs-toggle="modal" data-bs-target="#connectModal">Connect wallet</button>
-
-    <div v-if="isActivated && !isNetworkSupported" class="mt-4">
-      <button class="btn btn-primary btn-lg btn-Disconnected" @click="changeNetwork(this.getTldChainName)">Switch to {{getTldChainName}}</button>
-    </div>
-
-    <div class="row mt-5">
-      <div class="col-md-6 offset-md-3 table-container">
-        <table class="table table-borderless table-ppl">
-          <thead class="table-light">
-            <tr>
-              <th scope="col">Name length</th>
-              <th scope="col">Price</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>1 character</td>
-              <td>{{getFormattedPrice(getMinterTldPrice1)}} {{getPaymentTokenName}}</td>
-            </tr>
-            <tr>
-              <td>2 characters</td>
-              <td>{{getFormattedPrice(getMinterTldPrice2)}} {{getPaymentTokenName}}</td>
-            </tr>
-            <tr>
-              <td>3 characters</td>
-              <td>{{getFormattedPrice(getMinterTldPrice3)}} {{getPaymentTokenName}}</td>
-            </tr>
-            <tr>
-              <td>4 characters</td>
-              <td>{{getFormattedPrice(getMinterTldPrice4)}} {{getPaymentTokenName}}</td>
-            </tr>
-            <tr>
-              <td>5+ characters</td>
-              <td>{{getFormattedPrice(getMinterTldPrice5)}} {{getPaymentTokenName}}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    
-  </div>
-
-  <Referral v-if="isActivated" />
-
+	<div class="container text-center">
+		<img class="img-fluid main-img" src="/assets/favicon.svg" />
+
+		<div class="text-align-header mt-5 mb-2">
+			<h1>Mint your {{ getTldName }} web3 username!</h1>
+			<p>
+				And use it as username on
+				<a href="https://modechat.xyz" target="_blank"> ModeChat, a decentralized social network on Mode </a>.
+			</p>
+		</div>
+
+		<div class="d-flex justify-content-center domain-input-container mb-3 mt-5">
+			<div class="input-group domain-input input-group-lg input-sizing">
+				<input
+					v-model="chosenDomainName"
+					placeholder="enter desired name"
+					type="text"
+					class="form-control text-end border-2 border-end-0 border-light"
+					aria-label="Text input with dropdown button"
+				/>
+
+				<span class="input-group-text tld-addon border-2 border-light">
+					<span
+						v-if="loading"
+						class="spinner-border spinner-border-sm mx-1"
+						role="status"
+						aria-hidden="true"
+					></span>
+					<span>{{ getTldName }}</span>
+				</span>
+			</div>
+		</div>
+
+		<p class="error">
+			<small v-if="buyNotValid(chosenDomainName).invalid">
+				<em>{{ buyNotValid(chosenDomainName).message }}</em>
+			</small>
+		</p>
+
+		<div class="text-align-header">
+			<p class="mt-5 price-text">Domain price: {{ getFormattedPrice(getPrice) }} {{ getPaymentTokenName }}</p>
+		</div>
+
+		<!-- Minter contract paused -->
+		<button
+			v-if="isActivated && getMinterPaused && !getMinterLoadingData"
+			class="btn btn-primary btn-lg mt-3 buy-button"
+			:disabled="true"
+		>
+			<span v-if="getMinterPaused">Buying paused</span>
+		</button>
+
+		<!-- Minter contract loading data -->
+		<button
+			v-if="isActivated && isNetworkSupported && getMinterLoadingData"
+			class="btn btn-primary btn-lg mt-3 buy-button"
+			:disabled="true"
+		>
+			<span class="spinner-border spinner-border-sm mx-1" role="status" aria-hidden="true"></span>
+			<span>Loading data</span>
+		</button>
+
+		<!-- Not eligible -->
+		<button
+			v-if="isActivated && isNetworkSupported && !getMinterPaused && !getCanUserBuy && !getMinterLoadingData"
+			class="btn btn-primary btn-lg mt-3 buy-button"
+			:disabled="waiting || buyNotValid(chosenDomainName).invalid || !hasUserEnoughTokens"
+		>
+			<span>Not eligible</span>
+		</button>
+
+		<!-- Too low ETH balance -->
+		<button
+			v-if="
+				isActivated &&
+				isNetworkSupported &&
+				!getMinterPaused &&
+				!hasUserEnoughTokens &&
+				getCanUserBuy &&
+				!getMinterLoadingData
+			"
+			class="btn btn-primary btn-lg mt-3 buy-button"
+			:disabled="waiting || buyNotValid(chosenDomainName).invalid || !hasUserEnoughTokens"
+		>
+			<span>Your {{ getPaymentTokenName }} balance is too low</span>
+		</button>
+
+		<!-- Buy domain -->
+		<button
+			v-if="
+				isActivated &&
+				isNetworkSupported &&
+				getCanUserBuy &&
+				!getMinterPaused &&
+				hasUserEnoughTokens &&
+				!getMinterLoadingData
+			"
+			class="btn btn-primary btn-lg mt-3 buy-button"
+			@click="buyDomain"
+			:disabled="waiting || buyNotValid(chosenDomainName).invalid || !hasUserEnoughTokens"
+		>
+			<span v-if="waiting" class="spinner-border spinner-border-sm mx-1" role="status" aria-hidden="true"></span>
+			<span>Buy domain</span>
+		</button>
+
+		<!-- Connect Wallet -->
+		<button
+			v-if="!isActivated"
+			class="btn btn-primary btn-lg mt-3 btn-Disconnected"
+			data-bs-toggle="modal"
+			data-bs-target="#connectModal"
+		>
+			Connect wallet
+		</button>
+
+		<div v-if="isActivated && !isNetworkSupported" class="mt-4">
+			<button class="btn btn-primary btn-lg btn-Disconnected" @click="changeNetwork(this.getTldChainName)">
+				Switch to {{ getTldChainName }}
+			</button>
+		</div>
+
+		<div class="row mt-5">
+			<div class="col-md-6 offset-md-3 table-container">
+				<table class="table table-borderless table-ppl">
+					<thead class="table-light">
+						<tr>
+							<th scope="col">Name length</th>
+							<th scope="col">Price</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>1 character</td>
+							<td>{{ getFormattedPrice(getMinterTldPrice1) }} {{ getPaymentTokenName }}</td>
+						</tr>
+						<tr>
+							<td>2 characters</td>
+							<td>{{ getFormattedPrice(getMinterTldPrice2) }} {{ getPaymentTokenName }}</td>
+						</tr>
+						<tr>
+							<td>3 characters</td>
+							<td>{{ getFormattedPrice(getMinterTldPrice3) }} {{ getPaymentTokenName }}</td>
+						</tr>
+						<tr>
+							<td>4 characters</td>
+							<td>{{ getFormattedPrice(getMinterTldPrice4) }} {{ getPaymentTokenName }}</td>
+						</tr>
+						<tr>
+							<td>5+ characters</td>
+							<td>{{ getFormattedPrice(getMinterTldPrice5) }} {{ getPaymentTokenName }}</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+
+	<Referral v-if="isActivated" />
 </template>
 
 <script>
-import { ethers } from 'ethers';
-import { useBoard, useEthers } from 'vue-dapp';
-import { mapActions, mapGetters, mapMutations } from 'vuex';
-import { useToast, TYPE } from "vue-toastification";
-import WaitingToast from "../components/toasts/WaitingToast.vue";
-import Referral from '../components/Referral.vue';
-import useDomainHelpers from "../hooks/useDomainHelpers";
-import useChainHelpers from "../hooks/useChainHelpers";
-import MinterAbi from "../abi/Minter.json";
-import erc20Abi from '../abi/Erc20.json';
+import { ethers } from 'ethers'
+import { useBoard, useEthers } from 'vue-dapp'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import { useToast, TYPE } from 'vue-toastification'
+import WaitingToast from '../components/toasts/WaitingToast.vue'
+import Referral from '../components/Referral.vue'
+import useDomainHelpers from '../hooks/useDomainHelpers'
+import useChainHelpers from '../hooks/useChainHelpers'
+import MinterAbi from '../abi/Minter.json'
+import erc20Abi from '../abi/Erc20.json'
 
 export default {
-  name: "Home",
-
-  data() {
-    return {
-      chosenDomainName: null,
-      chosenAllowance: null,
-      loading: false, // loading data
-      waiting: false, // waiting for TX to complete
-      minterContract: null
-    }
-  },
-
-  components: {
-    Referral
-  },
-
-  computed: {
-    ...mapGetters("user", ["getPaymentTokenAddress", "getPaymentTokenName", "getPaymentTokenAllowance", "getUserBalance", "getCanUserBuy", "getDiscountEligible"]),
-    ...mapGetters("network", ["getBlockExplorerBaseUrl"]),
-    ...mapGetters("tld", ["getTldChainId", "getTldChainName", "getMinterAddress", "getTldContract", "getMinterLoadingData", "getMinterTldPrice1", "getMinterTldPrice2", "getMinterTldPrice3", "getMinterTldPrice4", "getMinterTldPrice5", "getMinterPaused", "getMinterDiscountPercentage", "getTldName"]),
-
-    getPrice() {
-      if (this.chosenDomainName) {
-        if (this.chosenDomainName.match(/./gu).length === 1) {
-          return this.getMinterTldPrice1;
-        } else if (this.chosenDomainName.match(/./gu).length === 2) {
-          return this.getMinterTldPrice2;
-        } else if (this.chosenDomainName.match(/./gu).length === 3) {
-          return this.getMinterTldPrice3;
-        } else if (this.chosenDomainName.match(/./gu).length === 4) {
-          return this.getMinterTldPrice4;
-        }
-      }
-      
-      return this.getMinterTldPrice5;
-    },
-
-    domainLowerCase() {
-      return this.chosenDomainName.toLowerCase();
-    },
-
-    hasUserEnoughTokens() {
-      if (this.address && Number(this.getUserBalance) > 0) {
-        if (Number(this.getUserBalance) >= Number(this.getPrice)) {
-          return true;
-        }
-      }
-
-      return false;
-    },
-
-    isNetworkSupported() {
-      if (this.isActivated) {
-        if (this.chainId === this.getTldChainId) {
-          return true;
-        }
-      }
-
-      return false;
-    }
-  },
-
-  methods: {
-    ...mapActions("user", ["fetchCanUserBuy", "getPaymentTokenDecimals"]),
-    ...mapMutations("user", ["addDomainManually", "setPaymentTokenAllowance"]),
-
-    async buyDomain() {
-      this.waiting = true;
-      const fullDomainName = this.domainLowerCase + this.getTldName;
-
-      // check if domain already minted
-      const existingHolder = await this.getTldContract.getDomainHolder(this.domainLowerCase);
-
-      if (existingHolder !== ethers.constants.AddressZero) {
-        this.toast("Sorry, but this domain name is already taken...", {type: TYPE.ERROR});
-        this.waiting = false;
-        return;
-      }
-
-      // wrapper contract (with signer)
-      const wrapperIntfc = new ethers.utils.Interface(MinterAbi);
-      const minterContractSigner = new ethers.Contract(this.getMinterAddress, wrapperIntfc, this.signer);
-
-      try {
-        let referral = localStorage.getItem("referral");
-
-        if (!referral || !ethers.utils.isAddress(referral)) {
-          referral = ethers.constants.AddressZero;
-        }
-
-        const tx = await minterContractSigner.mint(
-          this.domainLowerCase,
-          this.address,
-          referral,
-          {
-            value: ethers.utils.parseEther(String(this.getPrice))
-          }
-        );
-
-        const toastWait = this.toast(
-          {
-            component: WaitingToast,
-            props: {
-              text: "Please wait for your transaction to confirm. Click on this notification to see transaction in the block explorer."
-            }
-          },
-          {
-            type: TYPE.INFO,
-            onClick: () => window.open(this.getBlockExplorerBaseUrl+"/tx/"+tx.hash, '_blank').focus()
-          }
-        );
-
-        const receipt = await tx.wait();
-
-        if (receipt.status === 1) {
-          this.toast.dismiss(toastWait);
-          this.toast("You have successfully bought the domain!", {
-            type: TYPE.SUCCESS,
-            onClick: () => window.open(this.getBlockExplorerBaseUrl+"/tx/"+tx.hash, '_blank').focus()
-          });
-          this.addDomainManually(fullDomainName);
-          this.waiting = false;
-        } else {
-          this.toast.dismiss(toastWait);
-          this.toast("Transaction has failed.", {
-            type: TYPE.ERROR,
-            onClick: () => window.open(this.getBlockExplorerBaseUrl+"/tx/"+tx.hash, '_blank').focus()
-          });
-          console.log(receipt);
-          this.waiting = false;
-        }
-
-      } catch (e) {
-        console.log(e)
-        this.waiting = false;
-        this.toast(e.message, {type: TYPE.ERROR});
-      }
-
-      this.waiting = false;
-    },
-
-    changeNetwork(networkName) {
-      const networkData = this.switchNetwork(networkName); 
-
-      window.ethereum.request({ 
-        method: networkData.method, 
-        params: networkData.params
-      });
-    },
-
-    getFormattedPrice(price) {
-      // if price is less than 0.001, show 6 decimals etc.
-      if (price < 0.001) {
-        return Number(price).toFixed(4);
-      } else if (price < 0.01) {
-        return Number(price).toFixed(3);
-      } else if (price < 0.1) {
-        return Number(price).toFixed(2);
-      } else if (price < 1) {
-        return Number(price).toFixed(1);
-      } else if (price < 10) {
-        return Number(price).toFixed(1);
-      }
-    }
-
-  },
-
-  setup() {
-    const { open } = useBoard();
-    const { address, chainId, isActivated, signer } = useEthers();
-    const toast = useToast();
-    const { buyNotValid } = useDomainHelpers();
-    const { switchNetwork } = useChainHelpers();
-
-    return { address, buyNotValid, chainId, isActivated, open, signer, switchNetwork, toast }
-  }
+	name: 'Home',
+
+	data() {
+		return {
+			chosenDomainName: null,
+			chosenAllowance: null,
+			loading: false, // loading data
+			waiting: false, // waiting for TX to complete
+			minterContract: null,
+		}
+	},
+
+	components: {
+		Referral,
+	},
+
+	computed: {
+		...mapGetters('user', [
+			'getPaymentTokenAddress',
+			'getPaymentTokenName',
+			'getPaymentTokenAllowance',
+			'getUserBalance',
+			'getCanUserBuy',
+			'getDiscountEligible',
+		]),
+		...mapGetters('network', ['getBlockExplorerBaseUrl']),
+		...mapGetters('tld', [
+			'getTldChainId',
+			'getTldChainName',
+			'getMinterAddress',
+			'getTldContract',
+			'getMinterLoadingData',
+			'getMinterTldPrice1',
+			'getMinterTldPrice2',
+			'getMinterTldPrice3',
+			'getMinterTldPrice4',
+			'getMinterTldPrice5',
+			'getMinterPaused',
+			'getMinterDiscountPercentage',
+			'getTldName',
+		]),
+
+		getPrice() {
+			if (this.chosenDomainName) {
+				if (this.chosenDomainName.match(/./gu).length === 1) {
+					return this.getMinterTldPrice1
+				} else if (this.chosenDomainName.match(/./gu).length === 2) {
+					return this.getMinterTldPrice2
+				} else if (this.chosenDomainName.match(/./gu).length === 3) {
+					return this.getMinterTldPrice3
+				} else if (this.chosenDomainName.match(/./gu).length === 4) {
+					return this.getMinterTldPrice4
+				}
+			}
+
+			return this.getMinterTldPrice5
+		},
+
+		domainLowerCase() {
+			return this.chosenDomainName.toLowerCase()
+		},
+
+		hasUserEnoughTokens() {
+			if (this.address && Number(this.getUserBalance) > 0) {
+				if (Number(this.getUserBalance) >= Number(this.getPrice)) {
+					return true
+				}
+			}
+
+			return false
+		},
+
+		isNetworkSupported() {
+			if (this.isActivated) {
+				if (this.chainId === this.getTldChainId) {
+					return true
+				}
+			}
+
+			return false
+		},
+	},
+
+	methods: {
+		...mapActions('user', ['fetchCanUserBuy', 'getPaymentTokenDecimals']),
+		...mapMutations('user', ['addDomainManually', 'setPaymentTokenAllowance']),
+
+		async buyDomain() {
+			this.waiting = true
+			const fullDomainName = this.domainLowerCase + this.getTldName
+
+			// check if domain already minted
+			const existingHolder = await this.getTldContract.getDomainHolder(this.domainLowerCase)
+
+			if (existingHolder !== ethers.constants.AddressZero) {
+				this.toast('Sorry, but this domain name is already taken...', { type: TYPE.ERROR })
+				this.waiting = false
+				return
+			}
+
+			// wrapper contract (with signer)
+			const wrapperIntfc = new ethers.utils.Interface(MinterAbi)
+			const minterContractSigner = new ethers.Contract(this.getMinterAddress, wrapperIntfc, this.signer)
+
+			try {
+				let referral = localStorage.getItem('referral')
+
+				if (!referral || !ethers.utils.isAddress(referral)) {
+					referral = ethers.constants.AddressZero
+				}
+
+				const tx = await minterContractSigner.mint(this.domainLowerCase, this.address, referral, {
+					value: ethers.utils.parseEther(String(this.getPrice)),
+				})
+
+				const toastWait = this.toast(
+					{
+						component: WaitingToast,
+						props: {
+							text: 'Please wait for your transaction to confirm. Click on this notification to see transaction in the block explorer.',
+						},
+					},
+					{
+						type: TYPE.INFO,
+						onClick: () => window.open(this.getBlockExplorerBaseUrl + '/tx/' + tx.hash, '_blank').focus(),
+					},
+				)
+
+				const receipt = await tx.wait()
+
+				if (receipt.status === 1) {
+					this.toast.dismiss(toastWait)
+					this.toast('You have successfully bought the domain!', {
+						type: TYPE.SUCCESS,
+						onClick: () => window.open(this.getBlockExplorerBaseUrl + '/tx/' + tx.hash, '_blank').focus(),
+					})
+					this.addDomainManually(fullDomainName)
+					this.waiting = false
+				} else {
+					this.toast.dismiss(toastWait)
+					this.toast('Transaction has failed.', {
+						type: TYPE.ERROR,
+						onClick: () => window.open(this.getBlockExplorerBaseUrl + '/tx/' + tx.hash, '_blank').focus(),
+					})
+					console.log(receipt)
+					this.waiting = false
+				}
+			} catch (e) {
+				console.log(e)
+				this.waiting = false
+				this.toast(e.message, { type: TYPE.ERROR })
+			}
+
+			this.waiting = false
+		},
+
+		changeNetwork(networkName) {
+			const networkData = this.switchNetwork(networkName)
+
+			window.ethereum.request({
+				method: networkData.method,
+				params: networkData.params,
+			})
+		},
+
+		getFormattedPrice(price) {
+			// if price is less than 0.001, show 6 decimals etc.
+			if (price < 0.001) {
+				return Number(price).toFixed(4)
+			} else if (price < 0.01) {
+				return Number(price).toFixed(3)
+			} else if (price < 0.1) {
+				return Number(price).toFixed(2)
+			} else if (price < 1) {
+				return Number(price).toFixed(1)
+			} else if (price < 10) {
+				return Number(price).toFixed(1)
+			}
+		},
+	},
+
+	setup() {
+		const { open } = useBoard()
+		const { address, chainId, isActivated, signer } = useEthers()
+		const toast = useToast()
+		const { buyNotValid } = useDomainHelpers()
+		const { switchNetwork } = useChainHelpers()
+
+		return { address, buyNotValid, chainId, isActivated, open, signer, switchNetwork, toast }
+	},
 }
 </script>
 
-
 <style scoped>
 .and {
-  font-size: 1.7em;
-  vertical-align: bottom;
-  padding-left: 0.2em;
-  padding-right: 0.1em;
+	font-size: 1.7em;
+	vertical-align: bottom;
+	padding-left: 0.2em;
+	padding-right: 0.1em;
 }
 
 .buy-button {
-  margin-bottom: 20px;
+	margin-bottom: 20px;
 }
 
 .container {
-  padding-top: 80px;
-  padding-bottom: 50px;
+	padding-top: 80px;
+	padding-bottom: 50px;
 }
 
 .domain-input {
-  width: 50%;
+	width: 50%;
 }
 
 .domain-input > input {
-  color: #0D0F1A;
+	color: #0d0f1a;
 }
 
 .domain-input > input::placeholder {
-  color: #0D0F1A;
-  opacity: 0.7;
+	color: #0d0f1a;
+	opacity: 0.7;
 }
 
 .domain-input-container {
-  margin-top: 40px;
+	margin-top: 40px;
 }
 
 .error {
-  color: #DBDFEA;
+	color: #dbdfea;
 }
 
 .main-img {
-  width: 6em;
+	width: 6em;
 }
 
 th:first-of-type {
-  border-top-left-radius: 10px;
-  border-collapse: separate;
+	border-top-left-radius: 10px;
+	border-collapse: separate;
 }
 th:last-of-type {
-  border-top-right-radius: 10px;
+	border-top-right-radius: 10px;
 }
 tr:last-of-type td:first-of-type {
-  border-bottom-left-radius: 10px;
+	border-bottom-left-radius: 10px;
 }
 tr:last-of-type td:last-of-type {
-  border-bottom-right-radius: 10px;
+	border-bottom-right-radius: 10px;
 }
 
 .table-light {
-  color: #0D0F1A;
+	color: #0d0f1a;
 }
 
 .table-ppl {
-  border: 2px solid white;
-  border-radius: 10px !important;
-  border-collapse: separate;
-  color: white;
+	border: 2px solid white;
+	border-radius: 10px !important;
+	border-collapse: separate;
+	color: white;
 }
 
 .tld-addon {
-  background-color: white;
-  color:#0D0F1A;
+	background-color: white;
+	color: #0d0f1a;
 }
 
 @media only screen and (max-width: 767px) {
-  .domain-input {
-    width: 100%;
-  }
+	.domain-input {
+		width: 100%;
+	}
 }
-</style>
\ No newline at end of file
+</style>