update new contracts

src/App.vue

@@ -13,6 +13,7 @@ import { useRoundsStore } from "@/stores/rounds";
 
 import SlideoutPanel from "./components/SlideoutPanel.vue";
 import ConnectWallet from "./components/ConnectWallet.vue";
+import StakeComponent from "@/components/StakeComponent.vue";
 
 import {
 	watchAccount,
@@ -36,6 +37,7 @@ const { memeBurner, token } = storeToRefs(tokenStore);
 const { list } = storeToRefs(contractStore);
 const isMobile = ref(false);
 const showPanel = ref(false);
+const showModal = ref(false);
 const eventWatch = ref(null);
 const netWorkEvent = ref(null);
 const memeSacrificedEvent = ref(null);
@@ -80,6 +82,7 @@ function changeRoute(name) {
 }
 provide("isMobile", isMobile);
 provide("showPanel", showPanel);
+provide("showModal", showModal);
 
 onMounted(async () => {
 	console.log("onmounted");
@@ -130,11 +133,32 @@ onMounted(async () => {
 	<slideout-panel v-model="showPanel">
 		<connect-wallet></connect-wallet>
 	</slideout-panel>
+	<div class="modal-overlay" v-show="showModal">
+		<stake-component class="modal-card">
+			<div class="body">
+				<div class="header">
+					<img alt="logo" class="logo" src="/assets/img/vampir.png" />
+				</div>
+				<div class="subheader low-mid-text">
+					Success!<br />
+					You turned your meme into:
+				</div>
+				<div class="amount-number">
+					<div class="token-amount number-mobile">{{ tokenStore.activeToken.rewards }}</div>
+					<div class="token-name">$Blood</div>
+				</div>
+				<div class="info low-mid-text">
+					You can claim once the current cycle is finished and your clan bonus was calculated
+				</div>
+			</div>
+			<div class="btn btn-immortal" @click="showModal = false">Okay</div>
+		</stake-component>
+	</div>
 	<div class="main" :class="{ 'no-scroll': showPanel, mobile: isMobile }">
 		<RouterView />
 	</div>
 	<div class="footer">
-		<!-- <div class="footer-inner">
+		<div class="footer-inner">
 			<div class="footer-headline">Follow Bloodline</div>
 			<div class="footer-social-links">
 				<div class="social-bloodline-badge">
@@ -153,9 +177,9 @@ onMounted(async () => {
 					</div>
 				</div>
 			</div>
-		</div> -->
+		</div>
 	</div>
-	<div class="mobile-navigation-bar" v-if="isMobile">
+	<div class="mobile-navigation-bar" v-if="isMobile && walletStore.connected">
 		<div @click="changeRoute('home')" :class="{ active: route.name === 'home' }">
 			<font-awesome-icon icon="fa-droplet" />
 		</div>
@@ -172,7 +196,6 @@ onMounted(async () => {
 .footer
     height: auto
     background-color: var(--midnight-black)
-    min-height: 72px
     @media (min-width: 992px)
         height: 450px
         min-height: 450px
@@ -206,6 +229,7 @@ onMounted(async () => {
 
 .mobile-navigation-bar
     height: 72px
+    z-index: 1
     width: 100%
     padding: 16px 48px
     border-radius: 16px 16px 0px 0px
@@ -221,4 +245,36 @@ onMounted(async () => {
         cursor: pointer
         &.active
             color: var(--purple)
+
+.modal-overlay
+    background-color: rgb(15, 15, 15, 0.7)
+    height: 100vh
+    position: fixed
+    left: 0
+    bottom: 0
+    width: 100%
+    z-index: 10
+    .modal-card
+        min-width: 342px
+        text-align: center
+        position: absolute
+        top: 50%
+        left: 50%
+        transform: translate(-50%, -50%)
+        border: 2px solid var(--dark-purple, #4B0082)
+        background: var(--midnight-black, #0F0F0F)
+        z-index: 100
+        gap: 16px
+        .body
+            display: flex
+            flex-direction: column
+            gap: 8px
+            .amount-number
+                display: flex
+                justify-content: center
+                align-items: end
+                gap: 8px
+            img
+                width: 74px
+                height: 74px
 </style>