toast rework + fix bugs

src/App.vue

@@ -37,7 +37,6 @@ 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);
@@ -93,7 +92,6 @@ function changeRoute(name) {
 }
 provide("isMobile", isMobile);
 provide("showPanel", showPanel);
-provide("showModal", showModal);
 
 onMounted(async () => {
 	console.log("onmounted");
@@ -144,27 +142,6 @@ onMounted(async () => {
 	<slideout-panel v-model="showPanel">
 		<connect-wallet></connect-wallet>
 	</slideout-panel>
-	<div class="modal-overlay" v-show="showModal">
-		<card-component class="modal-card">
-			<div class="body">
-				<div class="header">
-					<img alt="logo" class="logo" src="/assets/img/vampir.png" />
-				</div>
-				<div class="subheader toast-header">
-					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 toast-body">
-					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>
-		</card-component>
-	</div>
 	<div class="main" :class="{ 'no-scroll': showPanel, mobile: isMobile }">
 		<RouterView />
 	</div>
@@ -283,6 +260,8 @@ onMounted(async () => {
     @media (min-width: 992px)
         background-color: unset
     .modal-card
+        border-radius: 16px
+        padding: 16px
         width: 342px
         text-align: center
         position: absolute