huangjinming/CounterFireGames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

staking

Browse Source
This commit is contained in:
yuyongdong 2024-09-10 17:21:12 +08:00
parent 05fa656683
commit c976b7b5ce
7 changed files with 377 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/chain/contract/Staking.js
View File

@ -16,6 +16,7 @@ export class Staking {
}
async execMethod({provider, address, method, params}) {
console.log(provider, address, method, params)
this.bc.checkAndChangeChain(chainId, provider);
const contract = new Contract(address, routerAbi, provider.getSigner());
const tx = await contract[method](...params);

3
src/components/home/HeroCard.vue
View File

@ -37,9 +37,8 @@
<!-- :spaceBetween="-45" -->
<Swiper
:slidesPerView="5"
:slidesPerView="2"
:modules="modules"
:loop="true"
@slideChange="onSlideChange"
:autoplay="{ delay: 3200, disableOnInteraction: false }"
:navigation="navigation"

170
src/components/staking/cecDialog.vue
View File

@ -7,60 +7,182 @@
:footer="null"
:getContainer="() => $refs.cecModal"
:maskClosable="false"
destroyOnClose>
destroyOnClose
>
<div class="top-close" @click="handleCancel">
<img src="@/assets/img/marketplace/Close_counter.png" alt />
</div>
</a-modal>
<div class="cec-dialog-content">
<div class="content-title">
<h1>{{ props.dialogText.title }}</h1>
<p>{{ props.dialogText.tips }}</p>
</div>
<div class="content-amount">
<li>
<div class="left">
<span>{{ props.dialogText.typeLabel }}</span>
<p>
<input type="text" placeholder="0">
</p>
</div>
<div class="left">
<span>MAX: 1114</span>
<p>{{ props.dialogText.typeName }}</p>
</div>
</li>
<li v-if="props.dialogText.conversion">
<div class="left">
<span>{{ props.dialogText.conversion }}</span>
<p>{{ props.dialogText.typeName }}</p>
</div>
<div class="left">
<span>&nbsp;</span>
<p>{{ props.dialogText.conversionName }}</p>
</div>
</li>
</div>
<div class="content-btn" @click="eventBtn">
Approve
</div>
</div>
</a-modal>
</div>
</template>
<script setup>
import { ref } from "vue"
import {ref} from "vue";
const props = defineProps({
cecDialogVisible: {
type: Boolean,
required: true,
},
dialogText: {
type: Object,
required: true,
},
buyDataArr: {
type: Array,
required: true,
},
});
const emit = defineEmits(["handleClose"]);
const handleOk = (e) => {
const emit = defineEmits(["handleClose", "eventBtn"]);
const handleCancel = (e) => {
emit("handleClose");
};
const eventBtn = () => {
emit("eventBtn");
}
</script>
<style lang="scss" scoped>
:deep(.cecDialog) {
width: 800px !important;
// height: 468px;
.ant-modal-content {
height: 100%;
padding: 0px;
background: #1a1821;
border: 1px solid #b966ff;
box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
border-radius: 100px;
}
}
.cec-dialog {
:deep(.cecDialog) {
.ant-modal-content {
padding: 0px;
background: #1a1821;
border: 1px solid #b966ff;
box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
border-radius: 100px;
.buy-dialog {
.top-close {
position: absolute;
top: -23px;
right: -23px;
width: 106px;
height: 106px;
cursor: pointer;
img {
width: 100%;
height: 100%;
.top-close {
position: absolute;
top: -23px;
right: -23px;
width: 106px;
height: 106px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.cec-dialog-content {
color: #fff;
margin-top: 40px;
.content-title {
width: 700px;
margin: 0 auto;
padding: 0 40px;
border-bottom: 1px solid #3d4057;
h1 {
font-family: "Anton";
font-weight: 400;
font-size: 48px;
}
p {
}
}
.content-amount {
width: 700px;
margin: 0 auto;
margin-top: 20px;
padding: 0 40px;
li {
display: flex;
align-items: center;
justify-content: space-between;
>div {
span {
display: inline-block;
margin-bottom: 20px;
color: #b966ff;
font-size: 16px;
}
p {
font-size: 28px;
font-family: 'Poppins';
input {
border: 0;
background: #2d2738;
padding-left: 20px;
box-sizing: border-box;
border-radius: 20px;
}
input::input-placeholder {
color: #fff;
}
input::-webkit-input-placeholder {
//兼容WebKit browsers（Chrome的内核）
color: #fff;
}
input::-moz-placeholder {
//Mozilla Firefox 4 to 18
color: #fff;
}
input::-moz-placeholder {
//Mozilla Firefox 19+
color: #fff;
}
input::-ms-input-placeholder {
//Internet Explorer 10+
color: #fff;
}
}
}
.buy-dialog-content {}
}
}
.content-btn {
width: 300px;
height: 60px;
line-height: 60px;
margin: 0 auto;
text-align: center;
color: #000;
font-family: "Poppins";
background: #fec25d;
cursor: pointer;
border-radius: 20px;
margin-top: 120px;
margin-bottom: 40px;
}
}
}
</style>

25
src/components/staking/conversion.vue
View File

@ -45,7 +45,7 @@
<div class="amount">101.75</div>
<div class="btns">
<div class="btn">
<span @click="cecDialogVisible = true">Staking</span>
<span @click="stakingModal">Staking</span>
</div>
<div class="btn">
<span @click="cecDialogVisible = true">Disarm</span>
@ -56,7 +56,8 @@
</div>
</div>
</div>
<stakingDialog :cecDialogVisible="cecDialogVisible" @handleClose="handleClose" />
<stakingDialog :cecDialogVisible="cecDialogVisible" :dialogText="dialogUnstakeText" @handleClose="handleClose" @eventBtn="unStaked" />
<stakingDialog :cecDialogVisible="cecDialogVisible" :dialogText="dialogUnstakeText" @handleClose="handleClose" @eventBtn="disarmCli" />
</div>
</template>
@ -68,6 +69,26 @@ const cecDialogVisible = ref(false)
const handleClose = () => {
cecDialogVisible.value = false
}
const dialogUnstakeText = ref({
title: "Unstake CEC",
typeLabel: "Unstake",
tips: "1111",
typeName: "es CEC",
conversion: "Reveres conversion esCEC",
conversionName: "CEC"
})
const stakingModal = () => {
cecDialogVisible.value = true
}
const unStaked = () => {
console.log("unStaked")
}
const disarmCli = () => {
alert('---')
}
</script>
<style lang="scss" scoped>

23
src/components/staking/header.vue
View File

@ -13,8 +13,8 @@
</div>
</div>
<div class="right">
<div>CEC</div>
<p>{{ cecInfoData.cecBalance }}</p>
<div>CEC </div>
<p>{{cecInfoData.cecBalance != 0 ? priceCalculated(cecInfoData.cecBalance,18) : 0 }}</p>
</div>
</li>
<li>
@ -99,7 +99,7 @@
</div>
</div>
<div class="staking-header-right">
<div class="logo">
<div class="logo" @click="vipDialogVisible = true">
<div>
<img src="@/assets/img/staking/VIP5.png" alt="">
</div>
@ -110,16 +110,21 @@
<div class="amount">2150/5000</div>
</div>
</div>
<VipDialog :vipDialogVisible="vipDialogVisible" @handleClose="vipHandleClose" @vipDialogCli="vipHandleClose" />
</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import VipDialog from "@/components/staking/vipDialog.vue";
import { priceCalculated } from "@/configs/priceCalculate"
import {walletStore} from "@/store/wallet";
import { BlockChain } from "@/components/chain/BlockChain"
const localWalletStore = walletStore()
const vipDialogVisible = ref(false)
const cecInfoData = ref({
cecBalance: 0,
CecStaked: 0,
@ -170,12 +175,12 @@ const getCecData = async () => {
// esCecCollection: 0,
let address = localWalletStore.address
let timer = setInterval( async () => {
cecInfoData.value.cecBalance = parseInt(await bc.erc20.balanceOf(address))
cecInfoData.value.CecStaked = parseInt(await bc.staking.queryCECStaked())
cecInfoData.value.esCecStaked = parseInt(await bc.staking.queryEsCECStaked())
cecInfoData.value.cecBalance = parseInt(await bc.erc20.balanceOf(address)).toString()
cecInfoData.value.esCecBalance = parseInt(await bc.erc20.esCecBalanceOf(address)).toString()
cecInfoData.value.CecStaked = parseInt(await bc.staking.queryCECStaked(address)).toString()
cecInfoData.value.esCecStaked = parseInt(await bc.staking.queryEsCECStaked(address)).toString()
// let ClaimableByCEC = await bc.staking.queryCumulativeByCEC()
// let ClaimableByEsCEC = await bc.staking.queryClaimableByEsCEC()
console.log( cecInfoData.value.cecBalance,cecInfoData.value.CecStaked)
clearInterval(timer);
}, 2000);
// let cec = await bc.staking.queryCECStaked()
@ -186,6 +191,10 @@ const getCecData = async () => {
}
const vipHandleClose = () => {
vipDialogVisible.value = false
}
onMounted(() => {
getCecData()

25
src/components/staking/index.vue
View File

@ -130,11 +130,36 @@
</div>
</div>
</div>
<stakingDialog :cecDialogVisible="cecDialogVisible" :dialogText="dialogUnstakeText" @handleClose="handleClose" @eventBtn="unCecStaked" />
</div>
</template>
<script setup>
import {ref} from "vue";
import stakingDialog from "./cecDialog.vue"
import { BlockChain } from "@/components/chain/BlockChain"
const bc = new BlockChain();
const cecDialogVisible = ref(false)
const handleClose = () => {
cecDialogVisible.value = false
}
const dialogUnstakeText = ref({
title: "Unstake CEC",
typeLabel: "Unstake",
// tips: "1111",
typeName: "es CEC",
// conversion: "Reveres conversion esCEC",
// conversionName: "CEC"
})
const unCecStaked = async () => {
console.log((1*1e18).toString())
let res = await bc.staking.stakeCec((1*1e18).toString())
console.log(res)
}
</script>
<style lang="scss" scoped>

203
src/components/staking/vipDialog.vue
View File

@ -20,8 +20,19 @@
</div>
<div class="vip-info">
<h1>VIP 5</h1>
<p>VIP status is normal</p>
<p><span>VIP points rules</span></p>
<p class="vip-status">VIP status is normal</p>
<div class="vip-rules">
<span>VIP points rules</span>
<div class="vip-rules-box">
<div class="vip-rules-box-tit">
VIP growth value description
</div>
<p>1. The growth value is not accumulated. According to the CEC being pledged, 1 CEC pledged = 1 point of VIP growth value.</p>
<p>2. When the number of CEC currently pledged by the user is less than the growth value, it will enter the recession mechanism.</p>
<p>3. Decline mechanism: VIP growth value decreases over time until it equals the number of CEC currently pledged by the user.
wait. When the number of CEC pledged by the user is greater than or equal to the growth value, the decline mechanism will be exited.</p>
</div>
</div>
</div>
</div>
<div class="vip-top-right" @click="toStake">
@ -33,23 +44,26 @@
<span>2501/3000</span>
</div>
<div class="vip-swiper">
<!-- :autoplay="{ delay: 3200, disableOnInteraction: true }"
:navigation="navigation" -->
<Swiper
:modules="modules"
:slidesPerView="2"
:modules="modules"
:loop="true"
@slideChange="onSlideChange"
:autoplay="{ delay: 3200, disableOnInteraction: false }"
:initialSlide="vipGrade"
:centeredSlides="false"
:navigation="navigation"
@slideChange="onSlideChange"
class="mySwiper"
:centeredSlides="true"
>
<SwiperSlide v-for="(slide, index) in vipList" :key="index">
<!-- 插入每个slide的内容 -->
<div
>{{index}}
<!-- <img v-if="selectHeroIdenx != index" :src="slide.imgUrl" alt="Character Image" />
<img v-else :src="slide.imgUrlActive" alt="Character Image" /> -->
:class="vipGrade == index ? 'vip-card' : ''"
>
<div class="vip-tit">{{ slide.title }}</div>
<p v-html="slide.text1"></p>
<p v-html="slide.text2"></p>
<p v-html="slide.text3"></p>
</div>
</SwiperSlide>
</Swiper>
@ -86,26 +100,37 @@ const props = defineProps({
},
});
const vipGrade = ref(0);
const vipList = ref([
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
title: "VIP1 Privileges",
text1: "1.Have all VIP4 privileges ",
text2: "2. <span>9.2%</span> off in game mall ",
text3: "3. Gold inc <span>5%</span>",
},
{
title: "VIP2 Privileges",
text1: "1.Have all VIP4 privileges ",
text2: "2. <span>9.2%</span> off in game mall ",
text3: "3. Gold inc <span>5%</span>",
},
{
title: "VIP3 Privileges",
text1: "1.Have all VIP4 privileges ",
text2: "2. <span>9.2%</span> off in game mall ",
text3: "3. Gold inc <span>5%</span>",
},
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
text1: "1.Have all VIP4 privileges ",
text2: "2. <span>9.2%</span> off in game mall ",
text3: "3. Gold inc <span>5%</span>",
},
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
},
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
},
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
title: "VIP5 Privileges",
text1: "1.Have all VIP4 privileges ",
text2: "2. <span>9.2%</span> off in game mall ",
text3: "3. Gold inc <span>5%</span>",
}
])
@ -118,10 +143,9 @@ const toStake = () => {
emit("vipDialogCli");
}
const selectHeroIdenx = ref(0);
const onSlideChange = (swiper) => {
// console.log("Slide changed to index:", swiper.realIndex);headeyop
selectHeroIdenx.value = swiper.realIndex;
console.log("Slide changed to index:", swiper.realIndex);
// swiper.realIndex = vipGrade.value
};
</script>
@ -184,13 +208,16 @@ const onSlideChange = (swiper) => {
line-height: 42px;
margin-bottom: 12px;
}
p {
.vip-status {
height: 18px;
font-family: 'Poppins';
font-weight: 400;
font-size: 22px;
color: #9950FD;
margin-bottom: 12px;
}
.vip-rules {
position: relative;
span {
font-family: 'Poppins';
font-weight: 400;
@ -199,8 +226,39 @@ const onSlideChange = (swiper) => {
text-decoration-line: underline;
cursor: pointer;
}
&:last-child {
margin-bottom: 0;
.vip-rules-box {
display: none;
position: absolute;
top: -85px;
right: -745px;
width: 825px;
padding: 30px 40px;
height: 346px;
background: #1A1821;
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
border-radius: 20px;
border: 1px solid #B966FF;
z-index: 9;
.vip-rules-box-tit {
font-family: 'Poppins-Regular';
font-weight: 400;
font-size: 20px;
border-bottom: 1px solid #ACA3C6;
padding-bottom: 5px;
}
p {
margin-top: 10px;
line-height: 1.8;
font-family: 'Poppins-Regular';
font-weight: 400;
font-size: 16px;
color: #B29DD1;
}
}
&:hover {
.vip-rules-box {
display: block;
}
}
}
}
@ -248,26 +306,95 @@ const onSlideChange = (swiper) => {
}
.vip-swiper {
width: 1068px;
height: 80px;
height: 367px;
margin: 0 auto;
color: #fff;
position: relative;
overflow: hidden;
.mySwiper {
width: 983px !important;
overflow: hidden;
.swiper-wrapper {
width: 983px;
.swiper-slide {
width: 473px;
width: 474px !important;
height: 367px;
margin-left: 20px;
background: #24212E;
border-radius: 20px;
border: 1px solid #BB7FFF;
div {
margin-right: 20px;
position: relative;
overflow: hidden;
>div {
width: 100%;
height: 100%;
background: #1a1821;
border: 1px solid #2A2736;
border-radius: 20px;
.vip-tit {
height: 53px;
line-height: 53px;
padding-left: 39px;
margin-bottom: 20px;
border-radius: 20px 20px 0px 0px;
background: #2A2736;
font-family: 'Poppins';
font-weight: bold;
font-size: 24px;
color: #B29DD1;
}
p {
padding-left: 39px;
font-weight: 400;
font-size: 18px;
font-family: 'Poppins-Regular';
color: #7A6F9D;
:deep span {
color: #BB7FFF;
}
}
}
.vip-card {
background: #24212E;
border: 2px solid #BB7FFF;
.vip-tit {
background: #BB7FFF;
color: #1A1821;
}
p {
color: #fff;
:deep span {
color: #BB7FFF;
}
}
}
}
}
}
}
.swiper-button-prev {
width: 23px;
height: 48px;
position: absolute;
left: -0px;
}
.swiper-button-prev::after {
content: "";
background: url("@/assets/img/staking/VIP_arrow.png") no-repeat;
background-size: 100% 100%;
width: 23px;
height: 43px;
}
.swiper-button-next {
width: 23px;
transform: rotateY(180deg);
position: absolute;
right: -0px;
}
.swiper-button-next::after {
content: "";
background: url("@/assets/img/staking/VIP_arrow.png") no-repeat;
background-size: 100% 100%;
width: 23px;
height: 43px;
}
}
}
</style>