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

fix

Browse Source
This commit is contained in:
huangjinming 2023-07-12 13:41:42 +08:00
parent 6364a44ec0
commit 24d1792640
13 changed files with 141 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CEBG - Anime PUBG on fire!</title> <title>Badge</title>
</head> </head>
<script type="module"> <script type="module">
import {Buffer} from 'buffer'; import {Buffer} from 'buffer';

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/img/badge/LOGO.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/img/home/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
src/assets/video/Genesis0510.mp4
View File

Binary file not shown.

24
src/chain/blockchain.ts
View File

@ -198,12 +198,12 @@ export class Blockchain {
*/ */
private selectChain(): Promise<number> { private selectChain(): Promise<number> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.switchEthereumChain(AVAILABLE_CHAINS[0], (res: any)=>{ this.switchEthereumChain(AVAILABLE_CHAINS[0], (res: any) => {
if (res.err) { if (res.err) {
reject && reject(res.err) reject && reject(res.err);
return return;
} }
resolve && resolve(res.chain) resolve && resolve(res.chain);
}); });
}); });
} }
@ -253,7 +253,7 @@ export class Blockchain {
public async getContractInstance(address: string, abi: any = ERC20ABI) { public async getContractInstance(address: string, abi: any = ERC20ABI) {
if (!this.web3) { if (!this.web3) {
this.connectWallet(true) this.connectWallet(true);
// throw new Error( // throw new Error(
// "Web3 instance is not initialized. Please call `initWeb3` method after user login." // "Web3 instance is not initialized. Please call `initWeb3` method after user login."
// ); // );
@ -333,7 +333,6 @@ export class Blockchain {
localStorage.removeItem("supplyLimit"); localStorage.removeItem("supplyLimit");
localStorage.removeItem("mintableCount"); localStorage.removeItem("mintableCount");
location.reload(); location.reload();
} }
} }
}); });
@ -366,7 +365,7 @@ export class Blockchain {
const onChainChange = (chainId: string) => { const onChainChange = (chainId: string) => {
console.log("switchEthereumChain: ", chainId); console.log("switchEthereumChain: ", chainId);
this.provider.removeListener("chainChanged", onChainChange); this.provider.removeListener("chainChanged", onChainChange);
cb && cb({chain: chainId}); cb && cb({ chain: chainId });
}; };
this.provider.on("chainChanged", onChainChange); this.provider.on("chainChanged", onChainChange);
try { try {
@ -391,7 +390,7 @@ export class Blockchain {
} catch (addError) { } catch (addError) {
console.error("add chain error: ", addError); console.error("add chain error: ", addError);
this.provider.removeListener("chainChanged", onChainChange); this.provider.removeListener("chainChanged", onChainChange);
cb && cb({err: addError}) cb && cb({ err: addError });
} }
} }
@ -467,7 +466,7 @@ export class Blockchain {
); );
const res = await coinInstance.methods.totalSupply().call(); const res = await coinInstance.methods.totalSupply().call();
console.log("totalSupply: ", res); console.log("totalSupply: ", res);
return res return res;
} }
// 获取当前用户可mint的数量 // 获取当前用户可mint的数量
public async getMintableCount(address?: string) { public async getMintableCount(address?: string) {
@ -480,7 +479,7 @@ export class Blockchain {
.getMintableCount(AppModule.accountId) .getMintableCount(AppModule.accountId)
.call(); .call();
console.log("getMintableCount: ", res); console.log("getMintableCount: ", res);
return res return res;
} }
// 获取当前用户的mint总数 // 获取当前用户的mint总数
public async supplyLimit(address: string) { public async supplyLimit(address: string) {
@ -490,7 +489,7 @@ export class Blockchain {
); );
const res = await coinInstance.methods.supplyLimit().call(); const res = await coinInstance.methods.supplyLimit().call();
console.log("supplyLimit: ", res); console.log("supplyLimit: ", res);
return res return res;
} }
/** /**
* @param {string} address * @param {string} address
@ -500,7 +499,8 @@ export class Blockchain {
public async getBalance(address: string, account: string | null) { public async getBalance(address: string, account: string | null) {
account = account || AppModule.accountId; account = account || AppModule.accountId;
const coinInstance: any = await this.getContractInstance(address); const coinInstance: any = await this.getContractInstance(address);
return await coinInstance.methods.balanceOf(account).call(); const res = await coinInstance.methods.balanceOf(account).call();
return res;
} }
public async transferToAccount( public async transferToAccount(

2
src/components/global/ImageTextModal.vue
View File

@ -26,7 +26,7 @@
</div> </div>
<div class="exclusive"> <div class="exclusive">
<div v-if="visible" class="w-[28rem] text-gray-100 text-content"> <div v-if="visible" class="w-[28rem] text-gray-100 text-content">
This is an exclusive badge for CEBG Genesis NFT holders. It will serve This is an exclusive badge for Counter Fire Genesis NFT holders. It will serve
as an identity credential for Genesis NFT holders to participate in as an identity credential for Genesis NFT holders to participate in
all future activities. all future activities.
</div> </div>

153
src/components/home/GenesisContent.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="flex pt-20 pl-2 pb-3"> <div class="pl-2 pb-3 containers">
<div class="card shadow-md rounded cards-container"> <div class="card shadow-md rounded cards-container">
<div></div> <div></div>
<div <div
@ -47,7 +47,9 @@
<img src="@/assets/img/badge/title-boder.png" alt="" /> <img src="@/assets/img/badge/title-boder.png" alt="" />
</div> </div>
<div class="text-content font-poppins-regular"> <div class="text-content font-poppins-regular">
<p>This is an exclusive badge for CEBG Genesis NFT holders.</p> <p>
This is an exclusive badge for Counter Fire Genesis NFT holders.
</p>
<p> <p>
It will serve as an identity credential for Genesis NFT holders to It will serve as an identity credential for Genesis NFT holders to
participate in all future activities. participate in all future activities.
@ -63,12 +65,15 @@
<div class="december-number"> <div class="december-number">
{{ totalSupply || "0" }} / {{ supplyLimit || "0" }} {{ totalSupply || "0" }} / {{ supplyLimit || "0" }}
</div> </div>
<div <div class="claim" @click="handClaimBadge">
:class="mintableCount == 0 ? 'disabled-claim' : 'claim'" <div class="claim-item">
@click="handClaimBadge" {{
> quantity > 0
<div class="claim-item">Claim your Airdorp</div> ? "Airdropped: " + quantity
<div : "You're not eligible for this stage."
}}
</div>
<!-- <div
class="dis-msg" class="dis-msg"
v-show="mintableCount == 0" v-show="mintableCount == 0"
:class="{ :class="{
@ -84,7 +89,7 @@
alt="" alt=""
/> />
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="card shadow-md rounded cards-container"> <div class="card shadow-md rounded cards-container">
@ -137,6 +142,7 @@ const scrollOffset = ref("0%");
const parallaxFactor = 0.135; // 视差滚动系数，可以根据需要调整 const parallaxFactor = 0.135; // 视差滚动系数，可以根据需要调整
const visible = ref(false); const visible = ref(false);
const canClaim = ref(false); const canClaim = ref(false);
const quantity = ref(0);
const isLoading = ref(false); const isLoading = ref(false);
const chain = useChainStore(); const chain = useChainStore();
const totalSupply = ref(0); const totalSupply = ref(0);
@ -164,10 +170,9 @@ function shuffle(array) {
return array; return array;
} }
const statusMessage = computed(() => { const statusMessage = computed(() => {
if (props.claimStatus ==-1 && mintableCount.value == 0) { if (props.claimStatus == -1 && mintableCount.value == 0) {
return "No eligibility to claim"; return "No eligibility to claim";
} else { } else {
switch (props.claimStatus) { switch (props.claimStatus) {
case -1: case -1:
return "Unclaimed"; return "Unclaimed";
@ -322,7 +327,13 @@ const loadDataFromLocalStorage = () => {
const fetchData = async () => { const fetchData = async () => {
try { try {
// 获取总数 // 获取总数
const Address='0x3F13F83E6363D97d0353cAAfACA08B05D9BF3637'
quantity.value = await chain.chainManager.bc.getBalance(
Address,
AppModule.accountId
);
console.log(quantity.value, "quantity.value");
totalSupply.value = await chain.chainManager.bc.totalSupply(); totalSupply.value = await chain.chainManager.bc.totalSupply();
//获取可mint的数量 //获取可mint的数量
@ -337,10 +348,10 @@ const fetchData = async () => {
// } // }
//获取当前用户的mint总数 //获取当前用户的mint总数
supplyLimit.value = await chain.chainManager.bc.supplyLimit(); supplyLimit.value = await chain.chainManager.bc.supplyLimit();
saveDataToLocalStorage(); saveDataToLocalStorage();
const res = await claimInfoStatus(); const res = await claimInfoStatus();
claimStatus.value = res.data[1].status; claimStatus.value = res.data[1].status;
console.log(res.data, "claimInfoStatus2");
} catch (error) { } catch (error) {
// console.error("Error fetching data:", error); // console.error("Error fetching data:", error);
} }
@ -424,6 +435,10 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.containers {
display: flex;
padding-top: 64px;
}
.cards-container { .cards-container {
transition: transform 0.5s ease-out; transition: transform 0.5s ease-out;
} }
@ -802,39 +817,39 @@ p {
color: #8b8b8b; color: #8b8b8b;
margin-bottom: 80px; margin-bottom: 80px;
display: flex; display: flex;
cursor: pointer; // cursor: pointer;
position: relative; position: relative;
border-radius: 12px; border-radius: 12px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #a6a6a6; // border: 1px solid #a6a6a6;
user-select: none; user-select: none;
cursor: not-allowed; //cursor: not-allowed;
// background: #FFEA00; // background: #FFEA00;
.claim-item { .claim-item {
position: relative; position: relative;
padding-right: 20px; padding-right: 20px;
} }
.claim-item::after { // .claim-item::after {
content: ""; // content: "";
display: inline-block; // display: inline-block;
position: absolute; // position: absolute;
top: 50%; // top: 50%;
left: 100%; /* 将图标放在文字的右侧 */ // left: 100%; /* 将图标放在文字的右侧 */
transform: translateY(-50%); /* 垂直居中对齐 */ // transform: translateY(-50%); /* 垂直居中对齐 */
width: 10px; /* 设置图标宽度 */ // width: 10px; /* 设置图标宽度 */
height: 10px; /* 设置图标高度 */ // height: 10px; /* 设置图标高度 */
background-image: url("@/assets/img/badge/grey.png"); // background-image: url("@/assets/img/badge/grey.png");
background-size: contain; // background-size: contain;
background-repeat: no-repeat; // background-repeat: no-repeat;
margin-left: 0px; /* 与文字之间的间距 */ // margin-left: 0px; /* 与文字之间的间距 */
transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */ // transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */
} // }
}
.disabled-claim:hover .claim-item::after {
background-image: url("@/assets/img/badge/grey.png");
margin-left: 10px; /* 在 hover 时向前移动 4px */
} }
// .disabled-claim:hover .claim-item::after {
// background-image: url("@/assets/img/badge/grey.png");
// margin-left: 10px; /* 在 hover 时向前移动 4px */
// }
.claim { .claim {
width: 300px; width: 300px;
height: 64px; height: 64px;
@ -843,52 +858,52 @@ p {
font-family: Arial; font-family: Arial;
font-weight: 400; font-weight: 400;
margin-bottom: 50px; margin-bottom: 50px;
color: #2f2b0b; color: #fffefe;
user-select: none; user-select: none;
display: flex; display: flex;
cursor: pointer; // cursor: pointer;
border-radius: 12px; border-radius: 12px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #ffba00; // background: #ffba00;
// background-size: contain; // background-size: contain;
.claim-item { .claim-item {
position: relative; position: relative;
padding-right: 20px; padding-right: 20px;
} }
.claim-item::after { // .claim-item::after {
content: ""; // content: "";
display: inline-block; // display: inline-block;
position: absolute; // position: absolute;
top: 50%; // top: 50%;
left: 100%; /* 将图标放在文字的右侧 */ // left: 100%; /* 将图标放在文字的右侧 */
transform: translateY(-50%); /* 垂直居中对齐 */ // transform: translateY(-50%); /* 垂直居中对齐 */
width: 10px; /* 设置图标宽度 */ // width: 10px; /* 设置图标宽度 */
height: 10px; /* 设置图标高度 */ // height: 10px; /* 设置图标高度 */
background-image: url("@/assets/img/badge/triangle-black.png"); // background-image: url("@/assets/img/badge/triangle-black.png");
background-size: contain; // background-size: contain;
background-repeat: no-repeat; // background-repeat: no-repeat;
margin-left: 0px; /* 与文字之间的间距 */ // margin-left: 0px; /* 与文字之间的间距 */
transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */ // transition: margin-left 0.3s, background-image 0.3s; /* 添加过渡动画 */
} // }
}
.claim:hover .claim-item::after {
background-image: url("@/assets/img/badge/triangle-black.png");
margin-left: 10px; /* 在 hover 时向前移动 4px */
}
.claim:hover {
width: 300px;
height: 64px;
font-size: 18px;
font-family: Arial;
font-weight: 400;
border-radius: 12px;
color: #0c0c0c;
display: flex;
align-items: center;
justify-content: center;
background: #ffea00;
} }
// .claim:hover .claim-item::after {
// background-image: url("@/assets/img/badge/triangle-black.png");
// margin-left: 10px; /* 在 hover 时向前移动 4px */
// }
// .claim:hover {
// width: 300px;
// height: 64px;
// font-size: 18px;
// font-family: Arial;
// font-weight: 400;
// border-radius: 12px;
// color: #0c0c0c;
// display: flex;
// align-items: center;
// justify-content: center;
// background: #ffea00;
// }
.dis-msg { .dis-msg {
width: 300px; width: 300px;
height: 50px; height: 50px;

6
src/components/layout/FooterBar.vue
View File

@ -36,7 +36,7 @@
<div class="follow-content"> <div class="follow-content">
<div></div> <div></div>
<div class="follow"> <div class="follow">
<a href="https://twitter.com/CEBG_GAME" class="twiter"> <a href="https://twitter.com/_CounterFire" class="twiter">
<!-- <img src="../../assets/img/home/logo/twiter.png" alt="" /> --> <!-- <img src="../../assets/img/home/logo/twiter.png" alt="" /> -->
</a> </a>
<a href="https://t.me/CEBG_official" class="telegram"> <a href="https://t.me/CEBG_official" class="telegram">
@ -298,8 +298,8 @@ function backTop() {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: 92px; width: 188px;
height: 89px; height: 44px;
} }
} }
} }

51
src/components/layout/NavBar.vue
View File

@ -1,31 +1,23 @@
<template> <template>
<div> <div>
<div class="nav"> <div class="nav">
<div class="h-[5.625rem] flex items-center justify-between"> <div class="nav-centent">
<div class="h-38 w-38 ml-5 flex items-center justify-center"> <div class="logo">
<img <a href="/">
src="@/assets/img/home/header-logo.png" <img src="@/assets/img/badge/logo.png" alt="Logo" />
alt="Logo" </a>
class="h-38 w-38"
/>
</div> </div>
<div v-if="!chain.logined" class="login-btn bg-button-default">
<div <div
v-if="!chain.logined" class="login-btn-item"
class="w-[18.75rem] login-btn h-[3.75rem] mr-6 flex items-center justify-center bg-button-default"
>
<div
class="text-lg login-btn-item italic text-my-text-color font-poppins-semiBoldItalic decoration-1"
@click="login" @click="login"
> >
Content Content
</div> </div>
</div> </div>
<div v-else class="login-btn bg-button-default dropdown-container">
<div <div
v-else class=" login-btn-item "
class="w-[18.75rem] h-[3.75rem] login-btn mr-6 flex items-center justify-center bg-button-default dropdown-container"
>
<div
class="text-lg italic font-poppins-semiBoldItalic login-btn-item text-my-text-color decoration-1"
> >
{{ formatAddress }} {{ formatAddress }}
</div> </div>
@ -109,6 +101,23 @@ const logout = async () => {
background: url("@/assets/img/badge/nav-bg.png") no-repeat; background: url("@/assets/img/badge/nav-bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.nav-centent {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 18px;
padding-right: 20px;
height: 90px;
.logo {
width: 142px;
height: 54px;
img {
width: 100%;
height: 54px;
}
}
}
.bg-button-default { .bg-button-default {
background-image: url("@/assets/img/badge/login-btn.png"); background-image: url("@/assets/img/badge/login-btn.png");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -133,10 +142,18 @@ const logout = async () => {
} }
.login-btn { .login-btn {
cursor: pointer; cursor: pointer;
width: 300px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
} }
.login-btn-item { .login-btn-item {
position: relative; position: relative;
padding-right: 20px; padding-right: 20px;
color: #34290a;
font-style: italic;
font-family: 'Poppins-SemiBoldItalic';
text-transform: uppercase; text-transform: uppercase;
} }
.login-btn-item::after { .login-btn-item::after {

2
src/configs/allchain.ts
View File

@ -214,7 +214,7 @@ export const AllChains = [
{ {
name: 'Arbitrum One', name: 'Arbitrum One',
type: 'Mainnet', type: 'Mainnet',
rpc: 'https://rpc.ankr.com/arbitrum', rpc: 'https://arbitrum-one.public.blastapi.io',
id: 42161, id: 42161,
symbol: 'ETH', symbol: 'ETH',
explorerurl: 'https://arbiscan.io/' explorerurl: 'https://arbiscan.io/'

2
src/configs/configchain.js
View File

@ -15,7 +15,7 @@ export const ALL_PROVIDERS = [
}, },
]; ];
export const AVAILABLE_CHAINS = env === "production" ? [421613] : [421613]; export const AVAILABLE_CHAINS = env === "production" ? [42161] : [42161];
export const OFFICE_ACCOUNT = export const OFFICE_ACCOUNT =
env === "production" env === "production"