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

update menu

Browse Source
This commit is contained in:
EmberSpirit
2023-08-14 18:34:12 +02:00
parent ceac2a1083
commit 7d33f225ce
13 changed files with 290 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+32 -7
View File
@@ -106,6 +106,9 @@ onMounted(async () => {
chainId: chainObject.id,
});
walletStore.walletClient = walletClient;
// walletStore.getTokenBalances()
await memeBurnerStore.init();
console.log("hierabc");
await tokenStore.initV2();
@@ -151,11 +154,12 @@ onMounted(async () => {
await rewardLockerStore.init();
await memeBurnerStore.init();
//init
// roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
// console.log("roundsStore.currentRound", roundsStore.currentRound);
// roundsStore.activeRound = roundsStore.currentRound;
// await roundsStore.fillRound(roundsStore.activeRound);
// init
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound;
await roundsStore.fillRound(roundsStore.activeRound);
await walletStore.loadWalletData();
});
</script>
@@ -169,9 +173,30 @@ onMounted(async () => {
</div>
<div class="footer">
<div class="footer-inner">
$BLOOD is 100%<br />
Follow Bloodline
<!-- $BLOOD is 100%<br />
community owned.<br />
No team %, no pre-mine.
No team %, no pre-mine. -->
<div class="footer-social-links">
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" />
</div>
<div class="social-bloodline-badge-text">Discord</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-telegram" />
</div>
<div class="social-bloodline-badge-text">Telegram</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-twitter" />
</div>
<div class="social-bloodline-badge-text">Twitter</div>
</div>
</div>
</div>
</div>
</template>
src/assets/sass/base.sass
+2
View File
@@ -26,6 +26,8 @@
display: flex
.bloodline-badge-icon
margin-right: 8px
&.grey
background-color: var(--grey)
.card
display: block
src/assets/sass/buttons.sass
+2
View File
@@ -15,3 +15,5 @@
background-color: #151515
color: #808080
cursor: not-allowed
&.black
background-color: var(--midnight-black)
src/assets/sass/variables.sass
+1
View File
@@ -35,6 +35,7 @@ $button-background-color: $black
--purple: #{$purple}
--blood-color: #{$red}
--midnight-black: #{$midnight-black}
--black: #{$midnight-black}
--darkgrey: #{$darkgrey}
// :root
// --font-size-text: 16px
src/components/ConnectWallet.vue
+71 -22
View File
@@ -11,6 +11,12 @@
</div>
<div class="connector-name">{{ connector.name }}</div>
</div>
<div>
Are you coming from Binance, Poloniex, Kucoin or any other CEX?<br />
<br />
You don't have a wallet yet?<br /><br />
Follow these instructions first.
</div>
</div>
<div v-else>
<div class="connected-header">
@@ -20,35 +26,44 @@
<div class="connected-header-address">
{{ getAddressShortName(walletStore.address) }}
</div>
<div class="connected-header-logout">
<div class="connected-header-logout" @click="disconnectWallet">
<font-awesome-icon :icon="['fas', 'fa-arrow-right-from-bracket']" />
</div>
</div>
<div class="connected-tokens-headline">Your Tokens</div>
<div class="connected-tokens">
^
<div class="connected-token" v-for="token in tokenStore.token">
<token-name-price :name="token.name" price="31,310"></token-name-price>
<div class="connected-token-button"></div>
<div class="connected-token-logo"></div>
<div class="connected-token" v-for="token in walletStore.token">
<token-name-price
:name="tokenStore.getToken(token.contractAddress).name"
:price="token.balanceOf"
></token-name-price>
<div class="connected-token-button">
<div class="bloodline-badge grey">
<div class="bloodline-badge-text">Sacrifice</div>
</div>
</div>
<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
</div>
</div>
<div class="connected-stake bloodline-border white">
<div class="connected-stake-headline">Staked</div>
<div>$BLD 1,0000</div>
<div class="connected-stake-buttons">
<div class="btn btn-immortal">Stake</div>
<div class="btn btn-immortal">Unstake</div>
<div class="connected-stake-subheadline">Increase your sacrifice reward by staking.</div>
<div class="connected-stake-body">
<token-name-price
:name="tokenStore.getToken(walletStore.memeToken?.contractAddress).name"
:price="walletStore.memeToken.staked"
></token-name-price>
<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price>
</div>
<div class="connected-stake-buttons" v-if="!stakeMenu">
<div class="btn btn-immortal" @click="openStake">Stake</div>
<div class="btn btn-immortal" @click="openUnstake">Unstake</div>
</div>
<Transition>
<stake-menu @close="stakeMenu = false" :stake="stake" v-if="stakeMenu"></stake-menu>
</Transition>
</div>
<div class="btn btn-immortal" @click="disconnectWallet">disconnect</div>
</div>
<div>
Are you coming from Binance, Poloniex, Kucoin or any other CEX?<br />
<br />
You don't have a wallet yet?<br /><br />
Follow these instructions first.
</div>
</template>
@@ -58,13 +73,17 @@ import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import Meme1Json from "@/assets/contracts/Meme1.json";
import TokenNamePrice from "./TokenNamePrice.vue";
import TokenLogo from "./TokenLogo.vue";
import TokenInput from "./TokenInput.vue";
import StakeMenu from "./StakeMenu.vue";
import { getAddressShortName, getblocky } from "@/helper/helper.js";
import { disconnect } from "@wagmi/core";
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const stakeMenu = ref(false);
const stake = ref(null);
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
const fromAddress = ref(null);
@@ -89,6 +108,16 @@ async function connectWallet(connector) {
instance.parent.emit("update:modelValue", false);
await walletStore.connectWallet(toRaw(connector));
}
function openStake() {
stake.value = true;
stakeMenu.value = true;
}
function openUnstake() {
stake.value = false;
stakeMenu.value = true;
}
</script>
<style lang="sass">
@@ -137,10 +166,30 @@ async function connectWallet(connector) {
.connected-tokens-headline
font-size: 18px
// .connected-tokens
// .connected-token
.connected-tokens
.connected-token
display: flex
gap: 16px
padding: 16px 8px
align-items: center
.connected-token-button
margin-left: auto
.bloodline-badge
padding: 4px 16px
color: black
font-size: 14px
.connected-stake
// .connected-stake-headline
.connected-stake-headline
margin-bottom: 8px
.connected-stake-subheadline
margin-bottom: 16px
.connected-stake-body
display: flex
gap: 16px
margin-bottom: 16px
.stake-reward
margin-left: auto
.connected-stake-buttons
display: flex
text-align: center
src/components/Navbar.vue
+2 -2
View File
@@ -95,8 +95,8 @@ header
height: 82px
@media (min-width: 992px)
height: 128px
&.navbar--hidden
transform: translate3d(0,-100%,0)
// &.navbar--hidden
// transform: translate3d(0,-100%,0)
.navbar-inner
display: flex
padding: 16px 24px
src/helper/helper.js
+1 -1
View File
@@ -35,4 +35,4 @@ export function getblocky(address) {
.toDataURL();
return blockiesData;
}
}
src/stores/memeburner.js
+2 -2
View File
@@ -53,8 +53,8 @@ export const useMemeburnerStore = defineStore("memeburner", {
console.log("getSacrificedRound", roundnumber);
const tokenStore = useTokenStore();
const contracts = [];
for (let index = 0; index < tokenStore.token.length; index++) {
const token = tokenStore.token[index];
for (let index = 0; index < tokenStore.sacrificeToken.length; index++) {
const token = tokenStore.sacrificeToken[index];
console.log("token.contractAddress", token.contractAddress);
console.log("roundnumber", roundnumber);
// contracts.push(this.contract.methods.getSacrificedMeme(roundnumber, token.contractAddress));
src/stores/rewardlocker.js
+6 -3
View File
@@ -35,9 +35,9 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
console.log("getRewardsForAllToken");
const tokenStore = useTokenStore();
const walletStore = useWalletStoreV2();
const contracts = [];
for (let index = 0; index < tokenStore.token.length; index++) {
const token = tokenStore.token[index];
const contracts = [];
for (let index = 0; index < tokenStore.sacrificeToken.length; index++) {
const token = tokenStore.sacrificeToken[index];
// calls.push(this.contract.methods.rewards(walletStore.address, roundNumber, token.contractAddress));
contracts.push({
...this.contract,
@@ -68,5 +68,8 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
async getTotalRewardsOf(address, rounds) {
return await this.contract.read.getTotalRewardsOf([address, rounds]);
},
async getStaked(address) {
return await this.contract.read.staked([address]);
},
},
});
src/stores/rounds.js
+4 -1
View File
@@ -44,6 +44,7 @@ export const useRoundsStore = defineStore("rounds", {
console.log("round not filled --> fill round");
console.log("vor error");
var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
console.log("databla", data);
let rewardData = null;
if (walletStore.connected) {
rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
@@ -82,7 +83,9 @@ export const useRoundsStore = defineStore("rounds", {
}
tokenArray.push(tokenData);
}
const goalInBLD = await memeBurnerStore.getGoalInBLD(this.activeRound);
const goalInBLD = await memeBurnerStore.getGoalInBLD(this.activeRound);
console.log("goalInBLD", goalInBLD);
console.log("tokenStore.memeToken.decimals", tokenStore.memeToken.decimals);
this.rounds[this.activeRound] = {
goal: goal[0],
goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
src/stores/tokens.js
+75 -57
View File
@@ -24,7 +24,6 @@ export const useTokenStore = defineStore("token", {
backgroundColor: "#4b8501",
abi: Meme1Json.abi,
contractAddress: Meme1Json.contractAddress,
ethcontract: null,
},
{
name: "$SHIB",
@@ -37,6 +36,11 @@ export const useTokenStore = defineStore("token", {
abi: Meme2Json.abi,
contractAddress: Meme2Json.contractAddress,
},
{
abi: MemeToken.abi,
contractAddress: MemeToken.contractAddress,
logo: "/assets/img/token/bloodline.png",
},
// {
// name: "$ELON",
// logo: "/assets/img/token/elon.png",
@@ -57,64 +61,79 @@ export const useTokenStore = defineStore("token", {
allowance: null,
},
loading: false,
memeToken: {
config: {
abi: MemeToken.abi,
contractAddress: MemeToken.contractAddress,
},
},
// memeToken: getTpelm
}),
getters: {},
actions: {
getters: {
memeToken: (state) => state.token.find((obj) => obj.contractAddress === MemeToken.contractAddress),
sacrificeToken: (state) => state.token.filter((obj) => obj.contractAddress !== MemeToken.contractAddress),
},
actions: {
getToken(address) {
console.log("address", address);
const token = this.token.find((obj) => obj.contractAddress === address);
return token;
},
async initV2() {
console.log("-----------init token-------------");
const contracts = [];
const walletStore = useWalletStoreV2();
console.log("-----------init token-------------");
const walletStore = useWalletStoreV2();
for (let index = 0; index < this.token.length; index++) {
const token = this.token[index];
console.log("token123abc", token);
var test = getContract({
const contracts = [];
const token = this.token[index];
console.log("token123abc", token);
token.contract = getContract({
address: token.contractAddress,
abi: token.abi,
// walletClient: walletStore.publicClient,
});
console.log("test", test);
console.log("token.contract", token.contract);
var decimals = await test.read.decimals();
console.log("decimals", decimals);
token.contract = test;
// contracts.push({...token.contract, functionName: "decimals"})
}
abi: token.abi,
walletClient: walletStore.walletClient || walletStore.publicClient,
});
//MemeToken init
// this.memeToken.contract = getContract({
contracts.push({ ...token.contract, functionName: "decimals" });
contracts.push({ ...token.contract, functionName: "name" });
contracts.push({ ...token.contract, functionName: "symbol" });
contracts.push({ ...token.contract, functionName: "totalSupply" });
const data = await multicall({
contracts,
});
token.decimals = data[0].result;
token.name = data[1].result;
token.symbol = data[2].result;
token.totalSupply = data[3].result;
}
// MemeToken init
// this.memeToken.contract = getContract({
// address: this.memeToken.config.contractAddress,
// abi: this.memeToken.config.abi,
// walletClient: walletStore.walletClient || walletStore.publicClient,
// });
// contracts.push({ ...this.memeToken.contract, functionName: "decimals" });
// const contracts = [];
// contracts.push({ ...this.memeToken.contract, functionName: "decimals" });
// contracts.push({ ...this.memeToken.contract, functionName: "name" });
// contracts.push({ ...this.memeToken.contract, functionName: "symbol" });
// contracts.push({ ...this.memeToken.contract, functionName: "totalSupply" });
// const data = await multicall({
// contracts,
// });
// this.memeToken.decimals = data[0].result;
// this.memeToken.name = data[1].result;
// this.memeToken.symbol = data[2].result;
// this.memeToken.totalSupply = data[3].result;
// contracts.push({ ...this.memeToken.contract, functionName: "decimals" });
// const data = await multicall({
// contracts,
// });
// //multicall decimal
// for (let index = 0; index < this.token.length; index++) {
// const token = this.token[index];
// token.decimals = data[index].result
// }
// //multicall decimal
// for (let index = 0; index < this.token.length; index++) {
// const token = this.token[index];
// token.decimals = data[index].result
// }
// this.memeToken.decimals = data[this.token.length].result;
// this.memeToken.decimals = data[this.token.length].result;
},
async changeActiveToken(token) {
console.log("changeActiveToken");
async changeActiveToken(token) {
console.log("changeActiveToken");
this.activeToken = token;
const walletStore = useWalletStoreV2();
if (walletStore.connected) {
//TODO, wenn connected, dann all diese Daten laden?
const walletStore = useWalletStoreV2();
if (walletStore.connected) {
//TODO, wenn connected, dann all diese Daten laden?
this.activeToken.balance = await walletStore.getTokenBalance(token);
this.activeToken.allowance = await this.allowance();
}
@@ -126,17 +145,17 @@ export const useTokenStore = defineStore("token", {
// var allowance = await this.contract.methods
// .allowance(walletStore.address, memeBurnerStore.config.contractAddress)
// .call();
console.log("this.activeToken.contract", this.activeToken.contract);
var allowance = await this.activeToken.contract.read.allowance([
console.log("this.activeToken.contract", this.activeToken.contract);
var allowance = await this.activeToken.contract.read.allowance([
walletStore.address,
memeBurnerStore.config.contractAddress,
]);
// var decimals = await this.contract.methods.decimals().call();
// console.log("decimals", decimals);
const decimals = this.activeToken.decimals;
const decimals = this.activeToken.decimals;
allowance = BigInt(allowance / BigInt(Math.pow(10, decimals)));
console.log("allowance", allowance);
allowance = BigInt(allowance / BigInt(Math.pow(10, decimals)));
console.log("allowance", allowance);
return allowance;
},
async approveToken(amount) {
@@ -146,25 +165,24 @@ export const useTokenStore = defineStore("token", {
// var approve = await this.contract.methods
// .approve(memeBurnerStore.config.contractAddress, amount)
// .send({ from: walletStore.address});
console.log("approve");
console.log("approve");
var approveHash = await this.activeToken.contract.write.approve([
memeBurnerStore.config.contractAddress,
amount,
]);
console.log("approveHash", approvehash);
const data = await waitForTransaction({
hash: approveHash,
});
return data;
});
return data;
} catch (error) {
console.error(error);
} finally {
this.loading = false;
}
},
async nonces(userAddress) {
return this.memeToken.contract.read.nonces([userAddress])
}
async nonces(userAddress) {
return this.memeToken.contract.read.nonces([userAddress]);
},
},
});
src/stores/walletV2.js
+77 -76
View File
@@ -1,6 +1,8 @@
import { defineStore } from "pinia";
import { markRaw } from "vue";
import { useTokenStore } from "./tokens";
import { useRewardLockerStore } from "./rewardlocker";
import MemeToken from "@/assets/contracts/MemeToken.json";
import {
createConfig,
@@ -11,8 +13,9 @@ import {
disconnect,
InjectedConnector,
watchAccount,
getWalletClient,
fetchBalance
getWalletClient,
fetchBalance,
multicall,
} from "@wagmi/core";
import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
@@ -30,27 +33,29 @@ export const useWalletStoreV2 = defineStore("walletV2", {
alchemy: null,
connected: false,
address: null,
provider: null,
client: null,
publicClient: null,
walletClient: null,
config: null,
chain: null,
provider: null,
client: null,
publicClient: null,
walletClient: null,
config: null,
chain: null,
token: [],
}),
getters: {},
actions: {
async init() {
console.log("wallet init");
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
getters: {
sacrificeToken: (state) => state.token.filter((obj) => obj.contractAddress !== MemeToken.contractAddress),
memeToken: (state) => state.token.find((obj) => obj.contractAddress === MemeToken.contractAddress),
},
actions: {
async init() {
console.log("wallet init");
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
const { chains, publicClient, webSocketPublicClient } = configureChains(
[goerli, mainnet],
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
);
);
this.config = createConfig({
autoConnect: true,
connectors: [
@@ -77,71 +82,67 @@ export const useWalletStoreV2 = defineStore("walletV2", {
],
publicClient,
webSocketPublicClient,
});
this.publicClient = publicClient;
console.log("this.config", this.config);
const walletClient = await getWalletClient();
console.log("walletClient", walletClient);
});
this.publicClient = publicClient;
console.log("this.config", this.config);
const walletClient = await getWalletClient();
console.log("walletClient", walletClient);
},
async connectWallet(connector) {
console.log("connector.name", connector.name);
// if (!account.isConnected) {
const connection = await connect({
async connectWallet(connector) {
console.log("connector.name", connector.name);
// if (!account.isConnected) {
const connection = await connect({
chainId: goerli.id,
connector: connector,
});
console.log("connection", connection);
// this.address = connection.account;
});
console.log("connection", connection);
// this.address = connection.account;
},
async getTokenBalance(token) {
console.log("token", token);
console.log("address", this.address);
// const result = await token.contract.read.balanceOf([this.address]);
// return result;
async getTokenBalance(token) {
console.log("token", token);
console.log("address", this.address);
const result = await token.contract.read.balanceOf([this.address]);
return result;
},
async getTokenBalances() {
console.log("getTokenBalances");
const tokenStore = useTokenStore();
console.log("tokenStore.token.length", tokenStore.token.length);
var contracts = [];
for (let index = 0; index < tokenStore.token.length; index++) {
const token = tokenStore.token[index];
contracts.push({ ...token.contract, functionName: "balanceOf", args: [this.address] });
}
const data = await multicall({
contracts,
});
console.log("data", data);
for (let index = 0; index < tokenStore.token.length; index++) {
const token = tokenStore.token[index];
const balanceOfDecimal = data[index].result / BigInt(Math.pow(10, token.decimals));
this.token.push({
contractAddress: token.contractAddress,
balanceOf: Number(balanceOfDecimal),
});
}
},
async getTokenBalances() {
//todo
async loadWalletData() {
const rewardlockerStore = useRewardLockerStore();
await this.getTokenBalances();
//MemeToken Staked
const tokenStore = useTokenStore();
const staked = await rewardlockerStore.getStaked(this.address);
this.memeToken.staked = Number(staked / BigInt(Math.pow(10, tokenStore.memeToken.decimals)));
}
// async isConnected() {
// try {
// this.loading = true;
// if (!window.ethereum) {
// console.warn("Metamask not installed"), (this.connected = false);
// 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(
// // 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,
});
src/views/HomeView.vue
+15 -8
View File
@@ -9,7 +9,6 @@ import { useTokenStore } from "@/stores/tokens";
import { useRoundsStore } from "@/stores/rounds";
const tokenStore = useTokenStore();
const roundsStore = useRoundsStore();
const { token } = storeToRefs(tokenStore);
const { getCurrentRoundData } = storeToRefs(roundsStore);
const { currentRound, activeRound, rounds } = storeToRefs(roundsStore);
@@ -84,13 +83,13 @@ function timeBetweenDates() {
</div>
</section>
<section id="sacrifice" class="container">
<sacrifice-token :data="token"></sacrifice-token>
<sacrifice-token :data="tokenStore.sacrificeToken"></sacrifice-token>
</section>
<div class="container section-header-container">
<h3>Bloodline Cycle</h3>
Become the most powerful clan each cycle and claim extra rewards.<br />Claim and trade your $BLOOD at
each cycle's end.
<h3>Cycle</h3>
Become the most powerful clan each cycle and claim extra rewards.Claim and trade your $BLOOD at each
cycle's end.
</div>
<section id="cycle-section" class="container">
<div class="slider-wrapper">
@@ -169,13 +168,13 @@ function timeBetweenDates() {
</div>
</section>
<div class="container section-header-container">
<h2>Tutorial</h2>
<h3>Tutorial</h3>
When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
</div>
<section id="tokenomics" class="container">
<div class="card">
<h2>Tokenomics</h2>
<h3>Tokenomics</h3>
<p>100% clan owned. No team %, no pre-mine</p>
<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
@@ -262,6 +261,13 @@ function timeBetweenDates() {
justify-content: center
font-size: 24px
user-select: none
position: sticky
top: 82px
z-index: 3
background: #2D2D2D
padding: 16px 0
@media (min-width: 992px)
position: unset
.slider-text
margin: 0 24px
margin-top: auto
@@ -278,7 +284,8 @@ function timeBetweenDates() {
.section-header-container
text-align: center
font-size: 24px
font-size: 16px
padding: 0 24px
margin-top: 64px
margin-bottom: 64px
@media (min-width: 992px)