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

images + update wagmi

Browse Source
This commit is contained in:
Michel Fromme
2023-07-27 17:09:34 +02:00
parent 650df134d2
commit b7a54f2cdd
7 changed files with 124 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/img/connectors/coinbaseWallet.svg
+13
View File
@@ -0,0 +1,13 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_13571_129878)">
<rect width="40" height="40" fill="#0052FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3312 0H31.6672C36.2704 0 40 4.0128 40 8.9632V31.0368C40 35.9872 36.2704 40 31.6688 40H8.3312C3.7296 40 0 35.9872 0 31.0368V8.9632C0 4.0128 3.7296 0 8.3312 0Z" fill="#0052FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9989 5.79443C27.8453 5.79443 34.2053 12.1544 34.2053 20.0008C34.2053 27.8472 27.8453 34.2072 19.9989 34.2072C12.1525 34.2072 5.79254 27.8472 5.79254 20.0008C5.79254 12.1544 12.1525 5.79443 19.9989 5.79443Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5005 15.459H23.4973C24.0733 15.459 24.5389 15.9614 24.5389 16.579V23.419C24.5389 24.0382 24.0717 24.539 23.4973 24.539H16.5005C15.9245 24.539 15.4589 24.0366 15.4589 23.419V16.579C15.4589 15.9614 15.9261 15.459 16.5005 15.459Z" fill="#0052FF"/>
</g>
<defs>
<clipPath id="clip0_13571_129878">
<rect width="40" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/assets/img/connectors/metaMask.svg
+15
View File
@@ -0,0 +1,15 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="#F7F9FB"/>
<path d="M32.6877 6.6665L22.0555 14.5632L24.0216 9.90427L32.6877 6.6665Z" fill="#E2761B" stroke="#E2761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.1433 6.6665L18.6901 14.638L16.8201 9.90427L8.1433 6.6665ZM28.8628 24.9711L26.0311 29.3095L32.0899 30.9764L33.8317 25.0672L28.8628 24.9711ZM7.0213 25.0672L8.75238 30.9764L14.8112 29.3095L11.9795 24.9711L7.0213 25.0672Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.4697 17.641L12.7814 20.1949L18.7974 20.462L18.5837 13.9972L14.4697 17.641ZM26.3629 17.641L22.1955 13.9224L22.0565 20.462L28.0619 20.1949L26.3629 17.641ZM14.8117 29.3097L18.4234 27.5466L15.3032 25.1103L14.8117 29.3097ZM22.4092 27.5466L26.0316 29.3097L25.5294 25.1103L22.4092 27.5466Z" fill="#E4761B" stroke="#E4761B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.0316 29.3095L22.4091 27.5464L22.6976 29.9079L22.6656 30.9017L26.0316 29.3095ZM14.8116 29.3095L18.1776 30.9017L18.1562 29.9079L18.4233 27.5464L14.8116 29.3095Z" fill="#D7C1B3" stroke="#D7C1B3" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.2319 23.5497L15.2185 22.6628L17.345 21.6904L18.2319 23.5497ZM22.6023 23.5497L23.4892 21.6904L25.6264 22.6628L22.6023 23.5497Z" fill="#233447" stroke="#233447" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.8106 29.3092L15.3236 24.9708L11.9789 25.067L14.8106 29.3092ZM25.5177 24.9708L26.0306 29.3092L28.8623 25.067L25.5177 24.9708ZM28.0609 20.1943L22.0555 20.4615L22.6112 23.5496L23.4981 21.6903L25.6352 22.6627L28.0609 20.1943ZM15.2167 22.6627L17.3538 21.6903L18.2301 23.5496L18.7964 20.4615L12.7804 20.1943L15.2167 22.6627Z" fill="#CD6116" stroke="#CD6116" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.7814 20.1943L15.3032 25.1097L15.2177 22.6627L12.7814 20.1943ZM25.6362 22.6627L25.5294 25.1097L28.0619 20.1943L25.6362 22.6627ZM18.7974 20.4615L18.2311 23.5496L18.9363 27.1935L19.0966 22.3956L18.7974 20.4615ZM22.0565 20.4615L21.768 22.3849L21.8963 27.1935L22.6122 23.5496L22.0565 20.4615Z" fill="#E4751F" stroke="#E4751F" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.613 23.5495L21.8971 27.1933L22.41 27.546L25.5302 25.1096L25.637 22.6626L22.613 23.5495ZM15.2185 22.6626L15.304 25.1096L18.4242 27.546L18.9371 27.1933L18.2319 23.5495L15.2185 22.6626Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.6656 30.9022L22.6976 29.9085L22.4305 29.6734H18.402L18.1562 29.9085L18.1776 30.9022L14.8116 29.3101L15.987 30.2718L18.3699 31.9281H22.4625L24.8561 30.2718L26.0316 29.3101L22.6656 30.9022Z" fill="#C0AD9E" stroke="#C0AD9E" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.409 27.5465L21.8961 27.1938H18.9362L18.4233 27.5465L18.1561 29.908L18.4019 29.6729H22.4304L22.6975 29.908L22.409 27.5465Z" fill="#161616" stroke="#161616" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33.1371 15.0761L34.0454 10.7164L32.6883 6.6665L22.4087 14.2961L26.3624 17.6407L31.951 19.2756L33.1905 17.833L32.6562 17.4484L33.5111 16.6683L32.8486 16.1554L33.7034 15.5036L33.1371 15.0761ZM6.79688 10.7164L7.70516 15.0761L7.12813 15.5036L7.98299 16.1554L7.33116 16.6683L8.18601 17.4484L7.65173 17.833L8.88058 19.2756L14.4692 17.6407L18.4229 14.2961L8.14327 6.6665L6.79688 10.7164Z" fill="#763D16" stroke="#763D16" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31.951 19.2761L26.3624 17.6412L28.0614 20.1951L25.5289 25.1105L28.8628 25.0678H33.8317L31.951 19.2761ZM14.4692 17.6412L8.88061 19.2761L7.0213 25.0678H11.9795L15.3027 25.1105L12.7809 20.1951L14.4692 17.6412ZM22.0561 20.4622L22.4087 14.2966L24.0329 9.90479H16.8201L18.4229 14.2966L18.7969 20.4622L18.9252 22.407L18.9358 27.1942H21.8958L21.9171 22.407L22.0561 20.4622Z" fill="#F6851B" stroke="#F6851B" stroke-width="0.106857" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

public/assets/img/connectors/walletConnect.svg
+5
View File
@@ -0,0 +1,5 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="#3396FF"/>
<path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#3396FF"/>
<path d="M12.2327 14.8836C16.5225 10.7003 23.4779 10.7003 27.7677 14.8836L28.284 15.3871C28.4985 15.5962 28.4985 15.9353 28.284 16.1445L26.5179 17.8668C26.4106 17.9713 26.2368 17.9713 26.1295 17.8668L25.419 17.1739C22.4263 14.2555 17.5741 14.2555 14.5813 17.1739L13.8204 17.9159C13.7132 18.0205 13.5393 18.0205 13.4321 17.9159L11.666 16.1936C11.4514 15.9845 11.4514 15.6453 11.666 15.4362L12.2327 14.8836ZM31.4203 18.4454L32.9922 19.9782C33.2067 20.1874 33.2067 20.5265 32.9922 20.7356L25.9045 27.6473C25.69 27.8565 25.3422 27.8565 25.1277 27.6473L20.0973 22.742C20.0437 22.6896 19.9568 22.6896 19.9031 22.742L14.8728 27.6473C14.6583 27.8565 14.3106 27.8565 14.096 27.6473L7.00816 20.7355C6.79367 20.5264 6.79367 20.1873 7.00816 19.9782L8.58004 18.4453C8.79454 18.2362 9.1423 18.2362 9.35679 18.4453L14.3873 23.3508C14.4409 23.4031 14.5278 23.4031 14.5814 23.3508L19.6117 18.4453C19.8262 18.2361 20.1739 18.2361 20.3885 18.4453L25.4189 23.3508C25.4726 23.4031 25.5595 23.4031 25.6131 23.3508L30.6436 18.4454C30.858 18.2362 31.2058 18.2362 31.4203 18.4454Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

src/App.vue
+32 -4
View File
@@ -17,6 +17,9 @@ import ConnectWallet from "./components/ConnectWallet.vue";
import { import {
watchAccount, watchAccount,
watchNetwork, watchNetwork,
watchContractEvent,
getAccount,
getNetwork,
getPublicClient, getPublicClient,
getWalletClient, getWalletClient,
} from "@wagmi/core"; } from "@wagmi/core";
@@ -34,6 +37,7 @@ const isMobile = ref(false);
const showPanel = ref(false); const showPanel = ref(false);
const eventWatch = ref(null); const eventWatch = ref(null);
const netWorkEvent = ref(null); const netWorkEvent = ref(null);
const memeSacrificedEvent = ref(null);
isMobile.value = isMobileFunc(); isMobile.value = isMobileFunc();
onUnmounted(() => { onUnmounted(() => {
@@ -74,6 +78,14 @@ onMounted(async () => {
// await multiCallStore.init(); // await multiCallStore.init();
//Memeburner Contract //Memeburner Contract
const account = getAccount();
console.log("account", account);
if (account.address) {
walletStore.address = account.address;
walletStore.connected = true;
}
//init //init
roundsStore.currentRound = parseInt( roundsStore.currentRound = parseInt(
await memeBurnerStore.getCurrentRound() await memeBurnerStore.getCurrentRound()
@@ -85,7 +97,7 @@ onMounted(async () => {
//events //events
eventWatch.value = watchAccount(async (account) => { eventWatch.value = watchAccount(async (account) => {
console.log("account123", account); console.log("account123", account);
const publicClient = await getPublicClient(); const publicClient = getPublicClient();
console.log("publicClient", publicClient); console.log("publicClient", publicClient);
// {chainId: } // {chainId: }
@@ -93,8 +105,13 @@ onMounted(async () => {
if (account.address) { if (account.address) {
walletStore.address = account.address; walletStore.address = account.address;
walletStore.connected = true; walletStore.connected = true;
let chainObject = walletStore.chain;
if (!walletStore.chain) {
const { chain, chains } = getNetwork();
chainObject = chain;
}
var walletClient = await getWalletClient({ var walletClient = await getWalletClient({
chainId: walletStore.chain.id, chainId: chainObject.id,
}); });
walletStore.walletClient = walletClient; walletStore.walletClient = walletClient;
await memeBurnerStore.init(); await memeBurnerStore.init();
@@ -109,10 +126,21 @@ onMounted(async () => {
console.log("network123", network); console.log("network123", network);
if (network.chain) { if (network.chain) {
walletStore.chain = network.chain; walletStore.chain = network.chain;
} else {
walletStore.chain = null;
} }
}); });
memeSacrificedEvent.value = watchContractEvent(
{
address: memeBurnerStore.config.contractAddress,
abi: memeBurnerStore.config.abi,
eventName: "MemeSacrificed",
},
async (log) => {
console.log("memeSacrificedEvent", log);
const token = log[0].args.sacrificedToken;
await roundsStore.updateCurrentRound(token);
}
);
}); });
</script> </script>
src/components/ConnectWallet.vue
+5 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<h3>Connect Wallet</h3> <h3>Connect Wallet</h3>
<div class="connectors-wrapper"> <div class="connectors-wrapper" v-if="!walletStore.connected">
<div class="connectors-element" v-for="connector in walletStore.config?.connectors" @click="connectWallet(connector)"> <div class="connectors-element" v-for="connector in walletStore.config?.connectors" @click="connectWallet(connector)">
<div class="connector-icon"> <div class="connector-icon">
<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`"> <img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`">
@@ -8,7 +8,7 @@
<div class="connector-name">{{ connector.name }}</div> <div class="connector-name">{{ connector.name }}</div>
</div> </div>
</div> </div>
<div @click="disconnectWallet">disconnect</div> <div class="btn btn-immortal" v-else @click="disconnectWallet">disconnect</div>
<div>Connected: {{ walletStore.connected }}</div> <div>Connected: {{ walletStore.connected }}</div>
</template> </template>
@@ -73,7 +73,10 @@ const instance = getCurrentInstance();
async function disconnectWallet() { async function disconnectWallet() {
console.log("disconnectWallet"); console.log("disconnectWallet");
try { try {
instance.parent.emit("update:modelValue", false);
await disconnect(); await disconnect();
// walletStore.connected = false;
// walletStore.address = null;
} catch (error) { } catch (error) {
console.log("error", error); console.log("error", error);
} }
src/stores/rounds.js
+18 -17
View File
@@ -22,13 +22,13 @@ export const useRoundsStore = defineStore("rounds", {
async init() { async init() {
//fill initial round //fill initial round
}, },
async updateCurrentRound(sacrificedToken, sacrificedAmount) { async updateCurrentRound(sacrificedToken) {
const tokenStore = useTokenStore(); const tokenStore = useTokenStore();
const memeBurnerStore = useMemeburnerStore(); const memeBurnerStore = useMemeburnerStore();
var data = await memeBurnerStore.getSacrificedRound(this.currentRound) var data = await memeBurnerStore.getSacrificedRound(this.currentRound);
console.log("data123", data); console.log("data123", data);
var tokenIndex = this.rounds[this.currentRound].token.findIndex((tokenData) => tokenData.contractAddress === sacrificedToken); var tokenIndex = this.rounds[this.currentRound].token.findIndex((tokenData) => tokenData.contractAddress === sacrificedToken);
this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex][1]; this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex].result[1];
}, },
async fillRound() { async fillRound() {
@@ -46,7 +46,7 @@ export const useRoundsStore = defineStore("rounds", {
console.log("vor error"); console.log("vor error");
var data = await memeBurnerStore.getSacrificedRound(this.activeRound) var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
let rewardData = null; let rewardData = null;
if (await walletStore.isConnected()) { if (walletStore.connected) {
rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound); rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
} }
console.log("rewardData123", rewardData); console.log("rewardData123", rewardData);
@@ -54,8 +54,8 @@ export const useRoundsStore = defineStore("rounds", {
var goal = await memeBurnerStore.getGoal(this.activeRound); var goal = await memeBurnerStore.getGoal(this.activeRound);
console.log("goal", goal); console.log("goal", goal);
var tokenArray = [] var tokenArray = []
var rewards_clan = BigInt(0); var rewards_clan = 0
var rewards_sacrifice = BigInt(0); var rewards_sacrifice = 0
for (let index = 0; index < data.length; index++) { for (let index = 0; index < data.length; index++) {
var tokenData = {}; var tokenData = {};
const token = tokenStore.token[index]; const token = tokenStore.token[index];
@@ -70,15 +70,16 @@ export const useRoundsStore = defineStore("rounds", {
tokenData.amount = data[index].result[1]; tokenData.amount = data[index].result[1];
tokenData.getAmountToReachGoal= await memeBurnerStore.getAmountToReachGoal(token.contractAddress); tokenData.getAmountToReachGoal= await memeBurnerStore.getAmountToReachGoal(token.contractAddress);
if (this.currentRound !== this.activeRound && walletStore.connected) { if (this.currentRound !== this.activeRound && walletStore.connected) {
console.log("rewarddata", rewardData); const clanwin = (Number(testcoef) / 10000 - 1) * Number(rewardData[index].result);
const clanwin = BigInt((testcoef / 10000 - 1) * rewardData[index]); const sacrificeRewards = Number(rewardData[index].result) - clanwin;
const sacrificeRewards = BigInt(rewardData[index]) - clanwin;
tokenData.rewards_ges = rewardData[index]; tokenData.rewards_ges = BigInt(rewardData[index].result);
tokenData.rewards_clan = clanwin; tokenData.rewards_clan = BigInt(clanwin);
tokenData.rewards_sacrifice = sacrificeRewards; tokenData.rewards_sacrifice = BigInt(sacrificeRewards);
rewards_clan = rewards_clan + BigInt(clanwin / BigInt(Math.pow(10, token.decimals)));
rewards_clan = rewards_clan + (clanwin / Math.pow(10, token.decimals));
rewards_sacrifice = rewards_sacrifice =
rewards_sacrifice + BigInt(sacrificeRewards / BigInt(Math.pow(10, token.decimals))); rewards_sacrifice + sacrificeRewards / Math.pow(10, token.decimals);
} }
tokenArray.push(tokenData); tokenArray.push(tokenData);
} }
@@ -87,9 +88,9 @@ export const useRoundsStore = defineStore("rounds", {
goal: goal[0], goal: goal[0],
goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)), goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
expirationTimestamp: goal[1], expirationTimestamp: goal[1],
rewards_clan: rewards_clan, rewards_clan: BigInt(rewards_clan),
rewards_sacrifice: rewards_sacrifice, rewards_sacrifice: BigInt(rewards_sacrifice),
rewards_total: rewards_clan + rewards_sacrifice, rewards_total: BigInt(rewards_clan + rewards_sacrifice),
token: tokenArray, token: tokenArray,
}; };
console.log("this.rounds[this.activeRound]", this.rounds[this.activeRound]); console.log("this.rounds[this.activeRound]", this.rounds[this.activeRound]);
src/stores/walletV2.js
+35 -35
View File
@@ -129,42 +129,42 @@ export const useWalletStoreV2 = defineStore("walletV2", {
const result = await token.contract.read.balanceOf([this.address]); const result = await token.contract.read.balanceOf([this.address]);
return result; return result;
}, },
async isConnected() { // async isConnected() {
try { // try {
this.loading = true; // this.loading = true;
if (!window.ethereum) { // if (!window.ethereum) {
console.warn("Metamask not installed"), (this.connected = false); // console.warn("Metamask not installed"), (this.connected = false);
return; // return;
}
const accounts = await window.ethereum.request({ method: "eth_accounts" });
if (accounts.length) {
this.connected = true;
this.address = accounts[0];
console.log(`You're connected to: ${accounts[0]}`);
// const web3 = new Web3(window.ethereum);
// const tokenStore = useTokenStore();
// console.log("tokenStore.activeToken", tokenStore.activeToken);
// if (tokenStore.activeToken.contractAddress) {
// tokenStore.activeToken.balance = await this.getTokenBalance(
// tokenStore.activeToken
// );
// tokenStore.activeToken.allowance = await tokenStore.allowance();
// } // }
// tokenStore.memeBurner.contract = new web3.eth.Contract( // const accounts = await window.ethereum.request({ method: "eth_accounts" });
// tokenStore.memeBurner.config.abi, // if (accounts.length) {
// tokenStore.memeBurner.config.contractAddress // this.connected = true;
// ); // this.address = accounts[0];
} else { // console.log(`You're connected to: ${accounts[0]}`);
console.log("Metamask is not connected"); // // const web3 = new Web3(window.ethereum);
this.connected = false; // // const tokenStore = useTokenStore();
} // // console.log("tokenStore.activeToken", tokenStore.activeToken);
} catch (error) { // // if (tokenStore.activeToken.contractAddress) {
console.log("error", error); // // tokenStore.activeToken.balance = await this.getTokenBalance(
} finally { // // tokenStore.activeToken
this.loading = false; // // );
return this.connected; // // tokenStore.activeToken.allowance = await tokenStore.allowance();
} // // }
}, // // tokenStore.memeBurner.contract = new web3.eth.Contract(
// // tokenStore.memeBurner.config.abi,
// // tokenStore.memeBurner.config.contractAddress
// // );
// } else {
// console.log("Metamask is not connected");
// this.connected = false;
// }
// } catch (error) {
// console.log("error", error);
// } finally {
// this.loading = false;
// return this.connected;
// }
// },
}, },
persist: true, persist: true,
}); });