cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new coins + chart swiper

Browse Source
This commit is contained in:
EmberSpirit
2023-09-08 23:56:44 +02:00
parent dfd208e075
commit 44173a36e1
5 changed files with 111 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/img/token/bad.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

public/assets/img/token/bitcoin.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

src/components/BloodChart.vue
+65 -2
View File
@@ -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
+7 -4
View File
@@ -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)
padding: 24px
align-items: center
.sacrifice-inner
padding: 24px
@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
+39 -17
View File
@@ -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",
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,
@@ -159,8 +181,8 @@ export const useTokenStore = defineStore("token", {
return allowance;
},
async approveToken(amount) {
try {
console.log("amount", amount);
try {
console.log("amount", amount);
this.loading = true;
const memeBurnerStore = useMemeburnerStore();
// var approve = await this.contract.methods
@@ -171,13 +193,13 @@ export const useTokenStore = defineStore("token", {
memeBurnerStore.config.contractAddress,
50000000000000000000,
]);
console.log("approveHash", approveHash);
console.log("approveHash", approveHash);
const data = await waitForTransaction({
hash: approveHash,
});
});
this.activeToken.allowance = await this.allowance();
console.log("data", data);
console.log("data", data);
return data;
} catch (error) {
console.error(error);