new coins + chart swiper

src/components/BloodChart.vue

@@ -1,5 +1,57 @@
 <template>
-	<div class="blood-chart-wrapper" v-if="props.data">
+	<swiper class="blood-chart-wrapper" :slidesPerView="'auto'" :centeredSlides="false" :spaceBetween="35">
+		<swiper-slide class="blood-chart-element" v-for="coin in props.data.token" :key="coin.name">
+			<div class="blood-chart-element-header">
+				<div class="blood-chart-coin">
+					<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
+				</div>
+				<div class="blood-chart-coin-title">{{ coin.name }}</div>
+			</div>
+			<div class="blood-chart-element-body">
+				<div class="blood-chart-bar-wrapper">
+					<svg
+						class="waves"
+						xmlns="http://www.w3.org/2000/svg"
+						xmlns:xlink="http://www.w3.org/1999/xlink"
+						viewBox="0 24 150 28"
+						preserveAspectRatio="none"
+						shape-rendering="auto"
+					>
+						<defs>
+							<path
+								id="gentle-wave"
+								d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+							/>
+						</defs>
+						<g class="parallax">
+							<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
+							<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
+							<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
+							<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
+						</g>
+					</svg>
+					<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
+						<div class="wrapper">
+							<div><span class="dot"></span></div>
+							<div><span class="dot"></span></div>
+							<div><span class="dot"></span></div>
+							<div><span class="dot"></span></div>
+							<div><span class="dot"></span></div>
+							<div><span class="dot"></span></div>
+						</div>
+						<div class="blood-chart-bar-percentage">{{ getPercentage(coin.amount, props.data.goal) }}%</div>
+					</div>
+				</div>
+			</div>
+			<div class="blood-chart-element-footer">
+				<div class="blood-chart-amount">
+					{{ compactNumber(coin.amount) }}
+				</div>
+				<div class="blood-chart-coin">$BLOOD</div>
+			</div>
+		</swiper-slide>
+	</swiper>
+	<!-- <div class="blood-chart-wrapper" v-if="props.data">
 		<div class="blood-chart-element" v-for="coin in props.data.token" :key="coin.name">
 			<div class="blood-chart-element-header">
 				<div class="blood-chart-coin">
@@ -50,13 +102,20 @@
 				<div class="blood-chart-coin">$BLOOD</div>
 			</div>
 		</div>
-	</div>
+	</div> -->
 </template>
 
 <script setup>
 import { getPercentage, compactNumber } from "@/helper/helper.js";
 import { useMemeburnerStore } from "@/stores/memeburner";
+import { Swiper, SwiperSlide } from "swiper/vue";
 
+// Import Swiper styles
+import "swiper/css";
+
+import "swiper/css/pagination";
+
+// import required modules
 const memeBurnerStore = useMemeburnerStore();
 
 const props = defineProps({
@@ -149,4 +208,8 @@ function getImageUrl(url) {
                 margin-bottom: 8px
             .blood-chart-coin
                 font-size: 16px
+
+
+.swiper-slide
+    width: 80px
 </style>

src/components/SacrificeToken.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="sacrifice-wrapper card bloodline-wrapper">
+	<div class="sacrifice-wrapper bloodline-wrapper">
 		<!-- {{ activeToken.allowance }} -->
 		<div class="sacrifice-inner">
 			<div class="sacrifice-headline">Select Sacrifice</div>
@@ -201,8 +201,9 @@ async function addTokens(value) {
     margin-left: auto
     margin-right: auto
     background-color: var(--primary)
-    .sacrifice-inner
     padding: 24px
+    align-items: center
+    .sacrifice-inner
         @media (min-width: 992px)
             padding: 48px 64px
         .sacrifice-headline
@@ -217,7 +218,9 @@ async function addTokens(value) {
         .sacrifice-tokens
             display: flex
             width: 100%
-            justify-content: space-between
+            justify-content: center
+            flex-wrap: wrap
+            gap: 12px
             @media (min-width: 992px)
                 justify-content: space-evenly
 
@@ -238,9 +241,9 @@ async function addTokens(value) {
                     border-color: var(--purple)
 
                 .sacrifice-token-name
-                    padding: 5px 26px
                     font-size: 16px
                     @media (min-width: 992px)
+                        padding: 5px 26px
                         font-size: 24px
 
         .sacrifice-buttons-function-wrapper

src/stores/tokens.js

@@ -36,22 +36,44 @@ export const useTokenStore = defineStore("token", {
 				abi: Meme2Json.abi,
 				contractAddress: Meme2Json.contractAddress,
 			},
+			{
+				name: "$ELON",
+				logo: "/assets/img/token/elon.png",
+				logoMobile: "/assets/img/token/elonMobile.png",
+				vamp: {
+					logo: "/assets/img/token/elonvamp.png",
+					name: "$ELON Vamp Token",
+				},
+				abi: Meme2Json.abi,
+				contractAddress: Meme2Json.contractAddress,
+			},
+			{
+				name: "$BITCOIN",
+				logo: "/assets/img/token/bitcoin.png",
+				logoMobile: "/assets/img/token/bitcoin.png",
+				vamp: {
+					logo: "/assets/img/token/bitcoin.png",
+					name: "$ELON Vamp Token",
+				},
+				abi: Meme2Json.abi,
+				contractAddress: Meme2Json.contractAddress,
+			},
+			{
+				name: "$BAD",
+				logo: "/assets/img/token/bad.png",
+				logoMobile: "/assets/img/token/bad.png",
+				vamp: {
+					logo: "/assets/img/token/bad.png",
+					name: "$ELON Vamp Token",
+				},
+				abi: Meme2Json.abi,
+				contractAddress: Meme2Json.contractAddress,
+			},
 			{
 				abi: MemeToken.abi,
 				contractAddress: MemeToken.contractAddress,
 				logo: "/assets/img/token/bloodline.png",
 			},
-			// {
-			// 	name: "$ELON",
-			// 	logo: "/assets/img/token/elon.png",
-			// 	logoMobile: "/assets/img/token/elonMobile.png",
-			// 	vamp: {
-			// 		logo: "/assets/img/token/shibvamp.png",
-			// 		name: "$ELON Vamp Token",
-			// 	},
-			// 	abi: null,
-			// 	contractAddress: null,
-			// },
 		],
 		activeToken: {
 			address: null,