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

修改mint游戏内NFT，赎回NFT上链

Browse Source
This commit is contained in:
yuyongdong 2024-07-17 15:18:04 +08:00
parent b29c4e55ba
commit 93bffca53e
6 changed files with 142 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/marketplace/Staking.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

137
src/components/assets/cenCard.vue
View File

@ -1,13 +1,14 @@
<template>
<div class="cards">
<div class="card-top" v-if="nftData">
<div class="card-img" @click="toDetail">
<div class="card-img">
<!-- @click="toDetail" -->
<ImgCard :nftData="nftData" />
<!-- <LazyLoadImg :src="nftData.image" :src-placeholder="placeholderImg" alt="图片"/> -->
</div>
<div class="card-name">
<div>
<span v-if="nftData.type == 1">GENESIS HERO</span>
<span v-if="nftData.type == 1">HERO</span>
<span v-if="nftData.type == 11">GOLD CARD</span>
</div>
<div class="no-sell" v-show="nftData.on_sale == 1" @click="cancelNft(nftData)">
@ -32,8 +33,7 @@
</div>
</div>
<div class="card-btn">
<div class="card-sell" v-if="nftData.on_sale == 0" @click="sellNft(nftData)">Mint for NFT</div>
<div class="card-cancel" v-if="nftData.on_sale == 1" @click="cancelNft(nftData)">Mint for NFT</div>
<div class="card-sell" v-if="nftData.on_sale == 0" @click="mintNft(nftData)">Mint for NFT</div>
</div>
<SellDialog :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="sellDataArr" @handleClose="sellHandleClose" />
<LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
@ -53,6 +53,7 @@ import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
import {createModal} from "@/utils/model.util";
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
import { timeFormat } from "@/configs/priceCalculate"
import { Locker } from "@/components/chain/contract/Locker"
const emit = defineEmits(['renewMyNft'])
import {formatPrice} from "@/components/chain/utils"
@ -67,6 +68,14 @@ const props = defineProps({
},
});
const mintNft = async () => {
console.log('-----', toRaw(props.nftData))
return
const locker = new Locker()
let res = await locker.mintNft(toRaw(props.nftData).nft.contract_address,[toRaw(props.nftData).nft.token_id])
console.log(res)
}
// 获取地板价
const floorPrice = ref('0')
const getFloorPrice = async (val) => {
@ -107,69 +116,69 @@ const sellNft = async (val) => {
}
// 取消出售
const cancelNft = async (val) => {
let orderIds = await getNftData(val)
try {
const bc = new BlockChain()
let res = await bc.market.cancelOrder([orderIds.event.data.id])
if(res.result) {
let timer = setTimeout(() => {
message.success('Your item has been unlisted.')
emit('renewMyNft')
clearTimeout(timer);
}, 2000);
}
} catch (e) {
if(e.message.indexOf('rejected') > -1) {
message.error('User rejected the request')
} else {
message.error('Your item has failed to be unlisted.')
}
}
}
// const cancelNft = async (val) => {
// let orderIds = await getNftData(val)
// try {
// const bc = new BlockChain()
// let res = await bc.market.cancelOrder([orderIds.event.data.id])
// if(res.result) {
// let timer = setTimeout(() => {
// message.success('Your item has been unlisted.')
// emit('renewMyNft')
// clearTimeout(timer);
// }, 2000);
// }
// } catch (e) {
// if(e.message.indexOf('rejected') > -1) {
// message.error('User rejected the request')
// } else {
// message.error('Your item has failed to be unlisted.')
// }
// }
// }
const loadingDialogVisible = ref(false)
// 下链使用
const lockToGame = async(type) => {
if(type == 'redeem') {
const confirmResult = await createModal(ConfirmDialog, {
title: '',
message: `Redeem ${props.nftData.detail.gold_coins} Gold to your game account. Do you wish to proceed?`
}).show()
if (confirmResult.errcode == 0) {
loadingDialogVisible.value = true
lockToGameConfirm()
}
} else if(type == 'convert') {
const confirmResult = await createModal(ConfirmDialog, {
title: '',
message: 'After converting, you will be able to use the hero in the game. At the end of Season 1, the hero will automatically be returned to your wallet or Immutable Passport. Do you want to proceed?'
}).show()
if (confirmResult.errcode == 0) {
loadingDialogVisible.value = true
lockToGameConfirm()
}
}
}
const lockToGameConfirm = async () => {
try {
const bc = new BlockChain()
let res = await bc.locker.lock(toRaw(props.nftData).contract_address, [toRaw(props.nftData).token_id])
message.success('lockToGame success')
// router.go(-1)
emit('renewMyNft')
loadingDialogVisible.value = false
// router.push('/assets')
} catch (e) {
if(e.message.indexOf('rejected') > -1) {
message.error('User rejected the request')
} else {
message.error('lockToGame fail.')
}
loadingDialogVisible.value = false
}
}
// const lockToGame = async(type) => {
// if(type == 'redeem') {
// const confirmResult = await createModal(ConfirmDialog, {
// title: '',
// message: `Redeem ${props.nftData.detail.gold_coins} Gold to your game account. Do you wish to proceed?`
// }).show()
// if (confirmResult.errcode == 0) {
// loadingDialogVisible.value = true
// lockToGameConfirm()
// }
// } else if(type == 'convert') {
// const confirmResult = await createModal(ConfirmDialog, {
// title: '',
// message: 'After converting, you will be able to use the hero in the game. At the end of Season 1, the hero will automatically be returned to your wallet or Immutable Passport. Do you want to proceed?'
// }).show()
// if (confirmResult.errcode == 0) {
// loadingDialogVisible.value = true
// lockToGameConfirm()
// }
// }
// }
// const lockToGameConfirm = async () => {
// try {
// const bc = new BlockChain()
// let res = await bc.locker.lock(toRaw(props.nftData).contract_address, [toRaw(props.nftData).token_id])
// message.success('lockToGame success')
// // router.go(-1)
// emit('renewMyNft')
// loadingDialogVisible.value = false
// // router.push('/assets')
// } catch (e) {
// if(e.message.indexOf('rejected') > -1) {
// message.error('User rejected the request')
// } else {
// message.error('lockToGame fail.')
// }
// loadingDialogVisible.value = false
// }
// }
// 获取出售中价格价格
@ -205,7 +214,7 @@ const sellHandleClose = (val) => {
}
onMounted(() => {
cardPrice(toRaw(props.nftData))
// cardPrice(toRaw(props.nftData))
});
</script>

14
src/components/assets/centralization.vue
View File

@ -108,8 +108,8 @@ const getMyAssets = async () => {
return acc
},[])
nftList.value = nftListBox
marketplaceStore.cursorObj = res.page
next_cursor.value = res.page.next_cursor
// marketplaceStore.cursorObj = res.page
// next_cursor.value = res.page.next_cursor
} catch(e) {
console.log(e)
}
@ -126,9 +126,9 @@ const handleScroll = () => {
if (scrollTop + windowHeight == scrollHeight) {
//请求数据接口
// console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
getMyAssets()
}
// if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
// getMyAssets()
// }
return false;
}
}
@ -144,11 +144,11 @@ watch(localWalletStore,() => {
onMounted(() => {
getMyAssets()
window.addEventListener("scroll", handleScroll, true);
// window.addEventListener("scroll", handleScroll, true);
})
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
// window.removeEventListener('scroll', handleScroll)
})
</script>

29
src/components/assets/myCard.vue
View File

@ -24,19 +24,25 @@
<img :src="icon" alt="">
</div>
</div>
<div v-if="nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
<div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()" class="link-staking" @click="unStake(nftData)">
<img src="@/assets/img/marketplace/Staking.png" alt="">
</div>
<div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
Redeem
</div>
<div v-if="nftData.type == 1 && nftData.on_sale == 0" class="link-below" @click="lockToGame('convert')">
<div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 1 && nftData.on_sale == 0" class="link-below" @click="lockToGame('convert')">
Convert
</div>
<!-- <div>{{ nftData.owner_address.substr(0,6) }}...{{ nftData.owner_address.substr(-6) }}</div> -->
</div>
</div>
<div class="card-btn">
<div class="card-btn" v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase()">
<div class="card-sell" v-if="nftData.on_sale == 0" @click="sellNft(nftData)">List</div>
<div class="card-cancel" v-if="nftData.on_sale == 1" @click="cancelNft(nftData)">Cancel listing</div>
</div>
<div class="card-btn" v-else>
<div class="card-cancel" v-if="nftData.on_sale == 0" @click="unStake(nftData)">Unstake</div>
</div>
<SellDialog :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="sellDataArr" @handleClose="sellHandleClose" />
<LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
</div>
@ -55,6 +61,7 @@ import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
import {createModal} from "@/utils/model.util";
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
import { timeFormat } from "@/configs/priceCalculate"
import { Locker } from "@/components/chain/contract/Locker"
const emit = defineEmits(['renewMyNft'])
import {formatPrice} from "@/components/chain/utils"
@ -68,6 +75,7 @@ const props = defineProps({
required: true,
},
});
const LOCKER_ADDRESS = ref(import.meta.env.VUE_APP_LOCKER_ADDRESS)
// 获取地板价
const floorPrice = ref('0')
@ -188,6 +196,15 @@ const cardPrice = async (val) => {
}
// 赎回
const unStake = async (data) => {
// debugger
console.log(toRaw(data).contract_address,[toRaw(data).token_id])
const locker = new Locker()
// console.log(locker.sendUnlockOrMint)
let res = await locker.sendUnlockOrMint(toRaw(data).contract_address,[toRaw(data).token_id])
console.log(res)
}
// 去详情页面
const toDetail = () => {
@ -297,6 +314,12 @@ onMounted(() => {
margin-left: 10px;
}
}
.link-staking {
img {
width: 140px;
height: 48px;
}
}
.enabled {
justify-content: center;
border: 2px solid #ffd45f;

2
src/components/chain/contract/Locker.js
View File

@ -17,7 +17,9 @@ const lockAddress = import.meta.env.VUE_APP_LOCKER_ADDRESS
export class Locker {
constructor(_chainInstance) {
console.log(_chainInstance)
this.bc = _chainInstance
console.log(this.bc)
}
async lock(nft, tokenIds) {

36
src/views/DetailView.vue
View File

@ -19,7 +19,7 @@
<li>
<div>Price</div>
<div class="time">
<img src="@/assets/img/marketplace/time.png" alt="图片">
<img src="@/assets/img/marketplace/time.png" alt="img">
<div>Time remaining: &nbsp;<StarTimer :getAddress="detailData.event.data.end_at" /></div>
</div>
</li>
@ -31,7 +31,14 @@
</div>
</li>
</div>
<div class="back-time" v-if="localWalletStore.token && LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
<img src="@/assets/img/marketplace/time.png" alt="">
<span>Time remaining : 6d:10h:22m</span>
</div>
<div class="top-right-btns">
<div v-if="localWalletStore.token && LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
<div class="cancel" @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Unstake</div>
</div>
<!--
1、添加购物车
2、移除购物车
@ -198,6 +205,8 @@ const icon = ref('')
const usd = ref('')
const price = ref('')
const loadingDialogVisible = ref(false)
const LOCKER_ADDRESS = ref(import.meta.env.VUE_APP_LOCKER_ADDRESS)
// 登录
const cardLogin = async () => {
@ -317,7 +326,11 @@ const lockToGameConfirm = async () => {
}
loadingDialogVisible.value = false
}
}
// 赎回
const backStaking = () => {
console.log('---')
}
@ -556,6 +569,25 @@ onMounted(() => {
}
}
}
.back-time {
width: 340px;
height: 40px;
line-height: 40px;
background: #272130;
border-radius: 20px;
font-family: 'Poppins';
font-weight: 300;
font-size: 18px;
color: #9A50FF;
display: flex;
align-items: center;
img {
width: 20px;
height: 25px;
margin-right: 6px;
margin-left: 24px;
}
}
.top-right-btns {
div {
display: flex;