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

update profilepage

Browse Source
This commit is contained in:
EmberSpirit
2023-09-08 23:05:34 +02:00
parent cd773e16c9
commit dfd208e075
26 changed files with 2155 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/img/moon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 798 B

src/App.vue
+37 -15
View File
@@ -19,6 +19,7 @@ import {
watchNetwork,
watchContractEvent,
watchWalletClient,
watchPublicClient,
getAccount,
getNetwork,
getPublicClient,
@@ -85,19 +86,42 @@ onMounted(async () => {
window.addEventListener("resize", handleWindowSizeChange);
handleWindowSizeChange();
// initContracts
const showPanel = ref(false);
const eventWatch = ref(null);
const netWorkEvent = ref(null);
const memeSacrificedEvent = ref(null);
const clientClientEvent = ref(null);
console.log("beforeEach");
const tokenStore = useTokenStore();
const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore();
const roundsStore = useRoundsStore();
const walletStore = useWalletStoreV2();
console.log("walletStore.initialized", walletStore.initialized);
walletStore.initialized = true;
console.log("hier");
// await walletStore.init();
// await tokenStore.initV2();
// await memeBurnerStore.init();
// await rewardLockerStore.init();
// await memeBurnerStore.init();
// await multiCallStore.init();
//Memeburner Contract
console.log("init router");
console.log("roundsStore.currentRound", roundsStore.currentRound);
if (!roundsStore.currentRound) {
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound;
}
//init
// roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
// console.log("roundsStore.currentRound", roundsStore.currentRound);
// roundsStore.activeRound = roundsStore.currentRound;
const { chain, chains } = getNetwork();
console.log("chain", chain?.id);
console.log("chains", chains);
await roundsStore.fillRound(roundsStore.activeRound);
// await walletStore.loadWalletData();
// initContracts
//Memeburner Contract
});
</script>
@@ -110,11 +134,8 @@ onMounted(async () => {
<RouterView />
</div>
<div class="footer">
<div class="footer-inner">
<!-- <div class="footer-inner">
<div class="footer-headline">Follow Bloodline</div>
<!-- $BLOOD is 100%<br />
community owned.<br />
No team %, no pre-mine. -->
<div class="footer-social-links">
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
@@ -132,7 +153,7 @@ onMounted(async () => {
</div>
</div>
</div>
</div>
</div> -->
</div>
<div class="mobile-navigation-bar" v-if="isMobile">
<div @click="changeRoute('home')" :class="{ active: route.name === 'home' }">
@@ -151,6 +172,7 @@ onMounted(async () => {
.footer
height: auto
background-color: var(--midnight-black)
min-height: 72px
@media (min-width: 992px)
height: 450px
min-height: 450px
@@ -186,14 +208,14 @@ onMounted(async () => {
height: 72px
width: 100%
padding: 16px 48px
border-radius: 24px 24px 0px 0px
background: var(--grey, #858585)
border-radius: 16px 16px 0px 0px
box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.25)
background: var(--midnight-black, #0F0F0F)
bottom: -1px
position: fixed
display: flex
justify-content: space-around
align-items: center
color: black
div
font-size: 40px
cursor: pointer
src/assets/contracts/test.json
+992
View File
@@ -0,0 +1,992 @@
{
"contractName": "OurUniV3Pool",
"contractAddress": "0xCc08EECAD5cE5c47bD7B51385b701d00c8Bdfa90",
"abi": [
{
"inputs": [],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"indexed": true,
"internalType": "int24",
"name": "tickLower",
"type": "int24"
},
{
"indexed": true,
"internalType": "int24",
"name": "tickUpper",
"type": "int24"
},
{
"indexed": false,
"internalType": "uint128",
"name": "amount",
"type": "uint128"
},
{
"indexed": false,
"internalType": "uint256",
"name": "amount0",
"type": "uint256"
},
{
"indexed": false,
"internalType": "uint256",
"name": "amount1",
"type": "uint256"
}
],
"name": "Burn",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"indexed": false,
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"indexed": true,
"internalType": "int24",
"name": "tickLower",
"type": "int24"
},
{
"indexed": true,
"internalType": "int24",
"name": "tickUpper",
"type": "int24"
},
{
"indexed": false,
"internalType": "uint128",
"name": "amount0",
"type": "uint128"
},
{
"indexed": false,
"internalType": "uint128",
"name": "amount1",
"type": "uint128"
}
],
"name": "Collect",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "sender",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"indexed": false,
"internalType": "uint128",
"name": "amount0",
"type": "uint128"
},
{
"indexed": false,
"internalType": "uint128",
"name": "amount1",
"type": "uint128"
}
],
"name": "CollectProtocol",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "sender",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"indexed": false,
"internalType": "uint256",
"name": "amount0",
"type": "uint256"
},
{
"indexed": false,
"internalType": "uint256",
"name": "amount1",
"type": "uint256"
},
{
"indexed": false,
"internalType": "uint256",
"name": "paid0",
"type": "uint256"
},
{
"indexed": false,
"internalType": "uint256",
"name": "paid1",
"type": "uint256"
}
],
"name": "Flash",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"internalType": "uint16",
"name": "observationCardinalityNextOld",
"type": "uint16"
},
{
"indexed": false,
"internalType": "uint16",
"name": "observationCardinalityNextNew",
"type": "uint16"
}
],
"name": "IncreaseObservationCardinalityNext",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"internalType": "uint160",
"name": "sqrtPriceX96",
"type": "uint160"
},
{
"indexed": false,
"internalType": "int24",
"name": "tick",
"type": "int24"
}
],
"name": "Initialize",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"internalType": "address",
"name": "sender",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"indexed": true,
"internalType": "int24",
"name": "tickLower",
"type": "int24"
},
{
"indexed": true,
"internalType": "int24",
"name": "tickUpper",
"type": "int24"
},
{
"indexed": false,
"internalType": "uint128",
"name": "amount",
"type": "uint128"
},
{
"indexed": false,
"internalType": "uint256",
"name": "amount0",
"type": "uint256"
},
{
"indexed": false,
"internalType": "uint256",
"name": "amount1",
"type": "uint256"
}
],
"name": "Mint",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"internalType": "uint8",
"name": "feeProtocol0Old",
"type": "uint8"
},
{
"indexed": false,
"internalType": "uint8",
"name": "feeProtocol1Old",
"type": "uint8"
},
{
"indexed": false,
"internalType": "uint8",
"name": "feeProtocol0New",
"type": "uint8"
},
{
"indexed": false,
"internalType": "uint8",
"name": "feeProtocol1New",
"type": "uint8"
}
],
"name": "SetFeeProtocol",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "sender",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"indexed": false,
"internalType": "int256",
"name": "amount0",
"type": "int256"
},
{
"indexed": false,
"internalType": "int256",
"name": "amount1",
"type": "int256"
},
{
"indexed": false,
"internalType": "uint160",
"name": "sqrtPriceX96",
"type": "uint160"
},
{
"indexed": false,
"internalType": "uint128",
"name": "liquidity",
"type": "uint128"
},
{
"indexed": false,
"internalType": "int24",
"name": "tick",
"type": "int24"
}
],
"name": "Swap",
"type": "event"
},
{
"inputs": [
{
"internalType": "int24",
"name": "tickLower",
"type": "int24"
},
{
"internalType": "int24",
"name": "tickUpper",
"type": "int24"
},
{
"internalType": "uint128",
"name": "amount",
"type": "uint128"
}
],
"name": "burn",
"outputs": [
{
"internalType": "uint256",
"name": "amount0",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "amount1",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"internalType": "int24",
"name": "tickLower",
"type": "int24"
},
{
"internalType": "int24",
"name": "tickUpper",
"type": "int24"
},
{
"internalType": "uint128",
"name": "amount0Requested",
"type": "uint128"
},
{
"internalType": "uint128",
"name": "amount1Requested",
"type": "uint128"
}
],
"name": "collect",
"outputs": [
{
"internalType": "uint128",
"name": "amount0",
"type": "uint128"
},
{
"internalType": "uint128",
"name": "amount1",
"type": "uint128"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"internalType": "uint128",
"name": "amount0Requested",
"type": "uint128"
},
{
"internalType": "uint128",
"name": "amount1Requested",
"type": "uint128"
}
],
"name": "collectProtocol",
"outputs": [
{
"internalType": "uint128",
"name": "amount0",
"type": "uint128"
},
{
"internalType": "uint128",
"name": "amount1",
"type": "uint128"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "factory",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "fee",
"outputs": [
{
"internalType": "uint24",
"name": "",
"type": "uint24"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "feeGrowthGlobal0X128",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "feeGrowthGlobal1X128",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"internalType": "uint256",
"name": "amount0",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "amount1",
"type": "uint256"
},
{
"internalType": "bytes",
"name": "data",
"type": "bytes"
}
],
"name": "flash",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint16",
"name": "observationCardinalityNext",
"type": "uint16"
}
],
"name": "increaseObservationCardinalityNext",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint160",
"name": "sqrtPriceX96",
"type": "uint160"
}
],
"name": "initialize",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "liquidity",
"outputs": [
{
"internalType": "uint128",
"name": "",
"type": "uint128"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "maxLiquidityPerTick",
"outputs": [
{
"internalType": "uint128",
"name": "",
"type": "uint128"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"internalType": "int24",
"name": "tickLower",
"type": "int24"
},
{
"internalType": "int24",
"name": "tickUpper",
"type": "int24"
},
{
"internalType": "uint128",
"name": "amount",
"type": "uint128"
},
{
"internalType": "bytes",
"name": "data",
"type": "bytes"
}
],
"name": "mint",
"outputs": [
{
"internalType": "uint256",
"name": "amount0",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "amount1",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"name": "observations",
"outputs": [
{
"internalType": "uint32",
"name": "blockTimestamp",
"type": "uint32"
},
{
"internalType": "int56",
"name": "tickCumulative",
"type": "int56"
},
{
"internalType": "uint160",
"name": "secondsPerLiquidityCumulativeX128",
"type": "uint160"
},
{
"internalType": "bool",
"name": "initialized",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint32[]",
"name": "secondsAgos",
"type": "uint32[]"
}
],
"name": "observe",
"outputs": [
{
"internalType": "int56[]",
"name": "tickCumulatives",
"type": "int56[]"
},
{
"internalType": "uint160[]",
"name": "secondsPerLiquidityCumulativeX128s",
"type": "uint160[]"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "bytes32",
"name": "",
"type": "bytes32"
}
],
"name": "positions",
"outputs": [
{
"internalType": "uint128",
"name": "liquidity",
"type": "uint128"
},
{
"internalType": "uint256",
"name": "feeGrowthInside0LastX128",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "feeGrowthInside1LastX128",
"type": "uint256"
},
{
"internalType": "uint128",
"name": "tokensOwed0",
"type": "uint128"
},
{
"internalType": "uint128",
"name": "tokensOwed1",
"type": "uint128"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "protocolFees",
"outputs": [
{
"internalType": "uint128",
"name": "token0",
"type": "uint128"
},
{
"internalType": "uint128",
"name": "token1",
"type": "uint128"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint8",
"name": "feeProtocol0",
"type": "uint8"
},
{
"internalType": "uint8",
"name": "feeProtocol1",
"type": "uint8"
}
],
"name": "setFeeProtocol",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "slot0",
"outputs": [
{
"internalType": "uint160",
"name": "sqrtPriceX96",
"type": "uint160"
},
{
"internalType": "int24",
"name": "tick",
"type": "int24"
},
{
"internalType": "uint16",
"name": "observationIndex",
"type": "uint16"
},
{
"internalType": "uint16",
"name": "observationCardinality",
"type": "uint16"
},
{
"internalType": "uint16",
"name": "observationCardinalityNext",
"type": "uint16"
},
{
"internalType": "uint8",
"name": "feeProtocol",
"type": "uint8"
},
{
"internalType": "bool",
"name": "unlocked",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "int24",
"name": "tickLower",
"type": "int24"
},
{
"internalType": "int24",
"name": "tickUpper",
"type": "int24"
}
],
"name": "snapshotCumulativesInside",
"outputs": [
{
"internalType": "int56",
"name": "tickCumulativeInside",
"type": "int56"
},
{
"internalType": "uint160",
"name": "secondsPerLiquidityInsideX128",
"type": "uint160"
},
{
"internalType": "uint32",
"name": "secondsInside",
"type": "uint32"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "recipient",
"type": "address"
},
{
"internalType": "bool",
"name": "zeroForOne",
"type": "bool"
},
{
"internalType": "int256",
"name": "amountSpecified",
"type": "int256"
},
{
"internalType": "uint160",
"name": "sqrtPriceLimitX96",
"type": "uint160"
},
{
"internalType": "bytes",
"name": "data",
"type": "bytes"
}
],
"name": "swap",
"outputs": [
{
"internalType": "int256",
"name": "amount0",
"type": "int256"
},
{
"internalType": "int256",
"name": "amount1",
"type": "int256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "int16",
"name": "",
"type": "int16"
}
],
"name": "tickBitmap",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "tickSpacing",
"outputs": [
{
"internalType": "int24",
"name": "",
"type": "int24"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "int24",
"name": "",
"type": "int24"
}
],
"name": "ticks",
"outputs": [
{
"internalType": "uint128",
"name": "liquidityGross",
"type": "uint128"
},
{
"internalType": "int128",
"name": "liquidityNet",
"type": "int128"
},
{
"internalType": "uint256",
"name": "feeGrowthOutside0X128",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "feeGrowthOutside1X128",
"type": "uint256"
},
{
"internalType": "int56",
"name": "tickCumulativeOutside",
"type": "int56"
},
{
"internalType": "uint160",
"name": "secondsPerLiquidityOutsideX128",
"type": "uint160"
},
{
"internalType": "uint32",
"name": "secondsOutside",
"type": "uint32"
},
{
"internalType": "bool",
"name": "initialized",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "token0",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "token1",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
}
]
}
src/assets/sass/base.sass
-23
View File
@@ -1,7 +1,6 @@
.bloodline-devider
font-size: 42px
text-align: center
margin: 16px 0
@media (min-width: 992px)
margin: 24px 0
@@ -33,28 +32,6 @@
&.grey
background-color: var(--grey)
.card
display: block
overflow: hidden
overflow-wrap: break-word
position: relative
padding: 0
text-decoration: none
transition-duration: .28s
transition-property: box-shadow,opacity,background
transition-timing-function: cubic-bezier(.4,0,.2,1)
z-index: 0
border-color: rgba(var(--v-border-color),var(--v-border-opacity))
border-style: solid
border-width: 0
border-radius: 16px
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2),0 1px 1px 0rgba(0, 0, 0, .14),0 1px 3px 0 rgba(0, 0, 0, .12)
background-color: $darkgrey
@media (min-width: 992px)
border-radius: 4px
&.card--variant1
border-radius: 0
.bloodline-token
height: 50px
width: 50px
src/assets/sass/buttons.sass
+9 -10
View File
@@ -1,19 +1,18 @@
.btn
padding: 16px 24px
gap: 8px
border-radius: 14px
&.btn--disabled
background-color: #151515
color: #808080
cursor: not-allowed
&.black
background-color: var(--midnight-black)
&.btn-immortal
background-color: $purple
color: $button-color
font-size: 24px
padding: 16px 24px
gap: 8px
border-radius: 14px
&:hover,&:focus,&:active
background-color: darken($purple, 10%),
cursor: pointer
&.btn--disabled
background-color: #151515
color: #808080
cursor: not-allowed
&.black
background-color: var(--midnight-black)
src/assets/sass/main.sass
+3 -3
View File
@@ -19,7 +19,7 @@ body
font-family: 'Inter', sans-serif
.main
padding-top: 120px
padding-top: 106px
@media (min-width: 992px)
padding-top: 208px
html
@@ -39,8 +39,8 @@ body
.container
margin-right: auto
margin-left: auto
padding-right: 15px
padding-left: 15px
padding-right: 16px
padding-left: 16px
@media (min-width: 992px)
max-width: 800px
src/assets/sass/variables.sass
+42
View File
@@ -16,6 +16,7 @@ $purple: #4B0082
$midnight-black: #0F0F0F
$darkgrey: #202020
$grey2: #2D2D2D
$dark-grey: #2D2D2D
$button-color: $white
$button-background-color: $black
@@ -32,14 +33,55 @@ $button-background-color: $black
--white: #{#F9F9FA}
--grey: #{#858585}
--grey2: #{$grey2}
--dark-grey: #{$dark-grey}
--purple: #{$purple}
--blood-color: #{$red}
--midnight-black: #{$midnight-black}
--black: #{$midnight-black}
--darkgrey: #{$darkgrey}
//fonts
.low-mid-text
font-family: Inter
font-size: 16px
font-style: normal
font-weight: 400
line-height: normal
.mid-mid-text
font-family: Inter
font-size: 18px
font-style: normal
font-weight: 400
line-height: normal
.mid-text
font-family: Inter
font-size: 24px
font-style: normal
font-weight: 400
line-height: normal
.small-text
font-family: Inter
font-size: 14px
font-style: normal
font-weight: 400
line-height: normal
.number-mobile
font-family: Inter
font-size: 24px
font-style: normal
font-weight: 400
line-height: normal
letter-spacing: 4.32px
// :root
// --font-size-text: 16px
// --font-size-title: 32px
// @media (min-width: 992px)
// --font-size-text: 24px
// --font-size-title: 36px
.text-center
text-align: center
.transparent
background-color: transparent
src/components/ClaimComponent.vue
+80
View File
@@ -0,0 +1,80 @@
<template>
<stake-component v-if="walletStore.memeToken?.unclaimedRewards > 0">
<template v-slot:headline> Unclaimed </template>
<template v-slot:body>
<token-name-price
:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
:price="walletStore.memeToken?.unclaimedRewards"
></token-name-price>
<token-logo img="/assets/img/token/bloodline.png" :alt="'todo'"></token-logo>
</template>
<template v-slot:actions>
<Transition name="smooth">
<div class="connected-stake-buttons" v-show="!stakeMenu">
<div class="btn btn-immortal" @click="rewardLockerStore.claimAll">Claim</div>
<div class="btn btn-immortal" @click="openStake">Stake</div>
</div>
</Transition>
<Transition name="smooth">
<stake-menu v-model="tokenNumber" @close="stakeMenu = false" :stake="stake" v-if="stakeMenu">
<template v-slot:body>
<div class="btn btn-immortal stake-button" @click="stakeBloodline">Stake & Claim Rest</div>
<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
Cancel
</div>
</template>
</stake-menu>
</Transition>
<div class="connected-stake-first-round small-text text-center">You can claim, once the cycle is over.</div>
</template>
</stake-component>
<stake-component dense v-else>
<div class="text-center">All Claimed</div>
</stake-component>
</template>
<script setup>
import { ref } from "vue";
import StakeComponent from "@/components/StakeComponent.vue";
import StakeMenu from "@/components/StakeMenu.vue";
import TokenNamePrice from "@/components/TokenNamePrice.vue";
import TokenLogo from "@/components/TokenLogo.vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import { useRewardLockerStore } from "@/stores/rewardlocker";
const rewardLockerStore = useRewardLockerStore();
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const props = defineProps({
stakeonly: {
type: Boolean,
required: false,
default: false,
},
});
const stakeMenu = ref(false);
const stake = ref(null);
const tokenNumber = ref(null);
function openStake() {
stake.value = true;
stakeMenu.value = true;
}
function openUnstake() {
stake.value = false;
stakeMenu.value = true;
}
</script>
<style lang="sass">
// .smooth-enter-active, .smooth-leave-active
// transition: opacity 0.1s
// .smooth-enter, .smooth-leave-to
// height: 0
</style>
src/components/ConnectWallet.vue
+37 -22
View File
@@ -38,14 +38,37 @@
:price="token.balanceOf"
></token-name-price>
<div class="connected-token-button">
<div class="bloodline-badge grey">
<div class="bloodline-badge-text">Sacrifice</div>
<div class="bloodline-badge grey" @click="badgeClick(token)">
<div
class="bloodline-badge-text"
v-if="tokenStore.memeToken.contractAddress === token.contractAddress"
>
Buy
</div>
<div v-else class="bloodline-badge-text">Sacrifice</div>
</div>
</div>
<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
</div>
</div>
<stake-component></stake-component>
<!-- <stake-component>
<template v-slot:headline> Staked </template>
<template v-slot:subheadline>
Stake for a 25% bonus on your sacrifice. Upper limit is your stake.
</template>
<template v-slot:actions>
<div class="connected-stake-buttons" v-if="!stakeMenu">
<div class="btn btn-immortal" @click="openStake">Stake</div>
<div
v-if="walletStore.memeToken?.staked === 0 && !stakeonly"
class="btn btn-immortal btn--disabled"
>
Unstake
</div>
<div v-else-if="!stakeonly" class="btn btn-immortal" @click="openUnstake">Unstake</div>
</div>
</template>
</stake-component> -->
</div>
</template>
@@ -59,9 +82,12 @@ import TokenLogo from "./TokenLogo.vue";
import StakeComponent from "./StakeComponent.vue";
import TokenInput from "./TokenInput.vue";
import { getAddressShortName, getblocky } from "@/helper/helper.js";
import { useRoute, useRouter } from "vue-router";
import { disconnect } from "@wagmi/core";
const router = useRouter();
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
@@ -85,6 +111,14 @@ async function disconnectWallet() {
}
}
function badgeClick(token) {
var tokenData = tokenStore.getToken(token.contractAddress);
tokenStore.activeToken = tokenData;
// router.push({ name: "home", hash: `#${tokenData.name}` });
router.push({ name: "home" });
instance.parent.emit("update:modelValue", false);
}
async function connectWallet(connector) {
instance.parent.emit("update:modelValue", false);
await walletStore.connectWallet(toRaw(connector));
@@ -149,23 +183,4 @@ async function connectWallet(connector) {
padding: 4px 16px
color: black
font-size: 14px
.connected-stake
.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
gap: 16px
div
flex: 1 1 50%
font-size: 18px
</style>
src/components/SacrificeToken.vue
+62 -25
View File
@@ -1,7 +1,6 @@
<template>
<div class="sacrifice-wrapper card bloodline-wrapper">
{{ activeToken.allowance }}
<!-- {{ activeToken.allowance }} -->
<div class="sacrifice-inner">
<div class="sacrifice-headline">Select Sacrifice</div>
<div class="sacrifice-select-tokens">
@@ -72,6 +71,28 @@
<img :src="activeToken.vamp.logo" :alt="activeToken.vamp.name" />
</div>
</div>
<div class="sacrifice-staking-bonus">
<div
class="sacrifice-staking-bonus-inner"
@click="
(e) => {
showStakingMenu = !showStakingMenu;
}
"
>
<div class="mid-mid-text">No Staking Bonus</div>
<div class="icon">
<font-awesome-icon icon="chevron-down" />
</div>
</div>
<stake-component v-if="showStakingMenu" stakeonly class="variant1"></stake-component>
</div>
</div>
<div class="sacrificed-info">
<div class="left low-mid-text">You can claim your $BLOOD when the cycle is finished.</div>
<div class="right">
<img src="/assets/img/moon.png" alt="moon" />
</div>
</div>
<div class="sacrifice-fees-info-wrapper">
<div class="sacrifice-fees-img">
@@ -79,10 +100,10 @@
</div>
<div class="sacrifice-fees-body">
<div class="sacrifice-fees-body-header">
<div class="sacrifice-fees-body-header-title">Gas Support</div>
<div class="sacrifice-fees-body-header-amount">42Gwei</div>
<div class="sacrifice-fees-body-header-title">Gas Subsidy</div>
<div class="sacrifice-fees-body-header-amount">≤30 Gwei</div>
</div>
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
<div class="sacrifice-fees-body-subheader">The clan pays your transaction.</div>
</div>
</div>
<div class="sacrifice-buttons-function-wrapper">
@@ -119,6 +140,7 @@ import { ref, defineProps, watch, inject, computed } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import { useMemeburnerStore } from "@/stores/memeburner";
import StakeComponent from "./StakeComponent.vue";
import { storeToRefs } from "pinia";
import Helper from "@/utils/helper.js";
const isMobile = inject("isMobile");
@@ -146,37 +168,29 @@ watch(
const tokenNumber = ref(0);
const output = ref(0);
const showStakingMenu = ref(false);
const approvalData = ref(null);
const processChange = Helper.debounce((e) => getRewardsFor(e));
const processChange = Helper.debounce((e) => getRewardsFor(e.target.value));
async function getRewardsFor(e) {
if (!e.target.value || isNaN(e.target.value)) {
async function getRewardsFor(value) {
if (!value || isNaN(value)) {
output.value = 0;
return;
}
console.log("activeToken.value.decimals", activeToken.value.decimals);
const rewardsForResult = await memeburnerStore.getRewardFor(
BigInt(e.target.value * Math.pow(10, activeToken.value.decimals))
BigInt(value * Math.pow(10, activeToken.value.decimals))
);
// var test = await memeburnerStore.getRewardsFor(10000);
// console.log("test", test);
// const rewardsForResult = await tokenStore.getRewardsFor(10000);
console.log("rewardsForResult", rewardsForResult);
console.log("tokenStore.memeToken.decimals", tokenStore.memeToken.decimals);
console.log(
"Math.pow(10, tokenStore.memeToken.decimals)",
Math.pow(10, tokenStore.memeToken.decimals)
);
output.value =
rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
output.value = rewardsForResult / BigInt(Math.pow(10, tokenStore.memeToken.decimals));
return output.value;
}
async function addTokens(value) {
tokenNumber.value = tokenNumber.value + value;
output.value = await memeburnerStore.getRewardsFor(
parseInt(tokenNumber.value)
);
tokenNumber.value = Number(tokenNumber.value) + Number(value);
output.value = await getRewardsFor(parseInt(tokenNumber.value));
}
</script>
@@ -188,7 +202,7 @@ async function addTokens(value) {
margin-right: auto
background-color: var(--primary)
.sacrifice-inner
padding: 48px 24px
padding: 24px
@media (min-width: 992px)
padding: 48px 64px
.sacrifice-headline
@@ -232,7 +246,6 @@ async function addTokens(value) {
.sacrifice-buttons-function-wrapper
text-align: center
justify-content: center
margin-top: 24px
display: block
@media (min-width: 992px)
display: flex
@@ -244,7 +257,6 @@ async function addTokens(value) {
color: var(--grey)
border-radius: 16px
padding: 16px 24px
margin-top: 24px
font-size: 16px
.sacrifice-fees-img
flex: 0 0 15%
@@ -260,6 +272,9 @@ async function addTokens(value) {
margin-bottom: 0
.sacrifice-from-to-wrapper
display: flex
flex-direction: column
gap: 16px
.sacrifice-from-wrapper,.sacrifice-to-wrapper
.sarcrifice-from-input
display: flex
@@ -316,4 +331,26 @@ async function addTokens(value) {
// color: darken(red, 10%)
// transform: scale(1.1)
// transition: transform 0s
.sacrificed-info
display: flex
padding: 8px 24px
justify-content: space-between
align-items: center
align-self: stretch
border-radius: 16px
background: var(--midnight-black, #0F0F0F)
text-align: left
.sacrifice-staking-bonus
display: flex
flex-direction: column
padding: 4px 8px
row-gap: 8px
border-radius: 10px
background: var(--midnight-black, #0F0F0F)
.sacrifice-staking-bonus-inner
display: flex
justify-content: space-between
.icon
margin-left: auto
</style>
src/components/StakeComponent.vue
+75 -21
View File
@@ -1,22 +1,34 @@
<!-- zukünftig card component -->
<template>
<div class="connected-stake bloodline-border white">
<div class="connected-stake-headline">Staked</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
class="connected-stake bloodline-border white card"
:class="{ 'card--dense': dense }"
@click="
(e) => {
e.preventDefault();
e.stopPropagation();
}
"
>
<div class="connected-stake-headline mid-mid-text" v-if="slots.headline">
<slot name="headline"></slot>
</div>
<div class="connected-stake-buttons" v-if="!stakeMenu">
<div class="connected-stake-subheadline" v-if="slots.subheadline">
<slot name="subheadline"></slot>
</div>
<div class="connected-stake-body" v-if="slots.body">
<slot name="body"></slot>
</div>
<slot name="actions"></slot>
<slot></slot>
<!-- <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 v-if="walletStore.memeToken?.staked === 0 && !stakeonly" class="btn btn-immortal btn--disabled">
Unstake
</div>
<div v-else-if="!stakeonly" class="btn btn-immortal" @click="openUnstake">Unstake</div>
</div> -->
</div>
</template>
@@ -25,12 +37,23 @@ import { useTokenStore } from "@/stores/tokens";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { ref } from "vue";
import StakeMenu from "./StakeMenu.vue";
import TokenNamePrice from "./TokenNamePrice.vue";
import TokenLogo from "./TokenLogo.vue";
import { useSlots } from "vue";
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const slots = useSlots();
const props = defineProps({
stakeonly: {
type: Boolean,
required: false,
default: false,
},
dense: {
type: Boolean,
required: false,
default: false,
},
});
const stakeMenu = ref(false);
const stake = ref(null);
@@ -46,4 +69,35 @@ function openUnstake() {
}
</script>
<style lang="sass"></style>
<style lang="sass">
.card
padding: 16px 12px
.card--dense
padding: 8px
.connected-stake
background-color: var(--darkgrey)
display: flex
flex-direction: column
gap: 16px
&.variant1
background-color: transparent
border: none
padding: 16px 6px
.connected-stake-headline
text-align: center
.connected-stake-subheadline
text-align: center
.connected-stake-body
display: flex
text-align: left
gap: 16px
.token-logo
margin-left: auto
.connected-stake-buttons
display: flex
text-align: center
gap: 16px
div
flex: 1 1 50%
font-size: 18px
</style>
src/components/StakeComponentV1.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<stake-component>
<template v-slot:headline> Staked </template>
<template v-slot:subheadline> Stake for a 25% bonus on your sacrifice. Upper limit is your stake. </template>
<template v-slot: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>
</template>
<template v-slot:actions>
<div class="connected-stake-buttons" v-if="!stakeMenu">
<div class="btn btn-immortal" @click="openStake">Stake</div>
<div v-if="walletStore.memeToken?.staked === 0 && !stakeonly" class="btn btn-immortal btn--disabled">
Unstake
</div>
<div v-else-if="!stakeonly" class="btn btn-immortal" @click="openUnstake">Unstake</div>
</div>
<Transition name="smooth">
<stake-menu
v-model="tokenNumber"
@close="stakeMenu = false"
:stake="stake"
v-if="stakeMenu & !unstakeMenu"
>
<template v-slot:body>
<div
class="btn btn-immortal stake-button"
@click="rewardLockerStore.stakeBloodline(tokenNumber)"
>
Stake
</div>
<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
Cancel
</div>
</template>
</stake-menu>
<div class="unstake-menu" v-else-if="stakeMenu & unstakeMenu">
<div class="low-mid-text text-center">
To prevent users from farming rewards you can claim your stake next cycle.
</div>
<div class="unstake-menu-actions">
<div class="btn btn-immortal stake-button" v-if="!loading" @click="orderUnstake">
Unstake Next Cycle
</div>
<div class="btn btn--disabled" v-else>Sign Transaction</div>
<div class="btn transparent small-text cancel-button text-center" @click="stakeMenu = false">
Cancel
</div>
</div>
</div>
</Transition>
<!-- todo v-if activeround -->
<div class="connected-stake-first-round small-text text-center">
No $BLOOD on the market. Staking is activated after the first cycle is finished.
</div>
<div class="low-mid-text text-center">You can claim your stake next cycle.</div>
</template>
</stake-component>
</template>
<script setup>
import { ref } from "vue";
import StakeComponent from "@/components/StakeComponent.vue";
import StakeMenu from "@/components/StakeMenu.vue";
import TokenNamePrice from "@/components/TokenNamePrice.vue";
import TokenLogo from "@/components/TokenLogo.vue";
import { useRewardLockerStore } from "@/stores/rewardlocker";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const rewardLockerStore = useRewardLockerStore();
const props = defineProps({
stakeonly: {
type: Boolean,
required: false,
default: false,
},
});
const stakeMenu = ref(false);
const unstakeMenu = ref(false);
const stake = ref(null);
const tokenNumber = ref(null);
const loading = ref(false);
function openStake() {
stake.value = true;
unstakeMenu.value = false;
stakeMenu.value = true;
}
function openUnstake() {
stake.value = false;
unstakeMenu.value = true;
stakeMenu.value = true;
}
async function orderUnstake() {
loading.value = true;
var result = await rewardLockerStore.orderUnstake();
console.log("orderUnstake", result);
loading.value = false;
}
</script>
<style lang="sass">
.unstake-menu
display: flex
flex-direction: column
gap: 16px
.unstake-menu-actions
display: flex
flex-direction: column
gap: 8px
</style>
src/components/StakeMenu.vue
+53 -14
View File
@@ -1,17 +1,37 @@
<template>
<div>
<token-input v-model="tokenNumber">
<div class="stake-menu">
<div class="token-input">
<div class="sarcrifice-from-input">
<input
@input="emit('update:modelValue', Number($event.target.value))"
:value="props.modelValue"
:placeholder="0"
/>
</div>
<div class="value-adder">
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(25)">25%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50)">50%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75)">75%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(100)">100%</div>
</div>
</div>
<!-- <token-input v-model="tokenNumber">
<template v-slot:message>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(25)">25%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(50)">50%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(75)">75%</div>
<div class="stake-adder-step bloodline-badge grey" @click="addTokensPercent(100)">100%</div>
</template>
</token-input>
<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
<div class="btn btn-immortal stake-button" @click="stakeBloodline" v-if="props.stake">Stake</div>
<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake</div>
<div class="btn btn-immortal black cancel-button" @click="emit('close')">Cancel</div>
</token-input> -->
<div class="stake-menu-actions">
<slot name="body">
<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
<div class="btn btn-immortal stake-button" @click="stakeBloodline" v-if="props.stake">Stake</div>
<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake for Next Cycle</div>
<div class="btn btn-immortal black cancel-button" @click="emit('close')">Cancel</div>
</slot>
</div>
</div>
</template>
@@ -32,11 +52,11 @@ const tokenStore = useTokenStore();
const props = defineProps({
stake: Boolean,
modelValue: Number,
});
const emit = defineEmits(["close"]);
const emit = defineEmits(["close", "update:modelValue"]);
const tokenNumber = ref(null);
async function addTokensPercent(value) {
let amount;
if (props.stake) {
@@ -44,11 +64,24 @@ async function addTokensPercent(value) {
} else {
amount = (walletStore.memeToken.staked * value) / 100;
}
tokenNumber.value = amount;
emit("update:modelValue", Number(amount));
}
async function unstakeBloodline() {
alert("todo");
const fromAddress = walletStore.address;
var test1 = await rewardLockerStore.contract.read.unstakeOrdered([4, fromAddress]);
console.log("test1", test1);
var test = true;
if (test) {
return;
}
var hash = await rewardLockerStore.contract.write.orderUnstake();
console.log("hash", hash);
const data = await waitForTransaction({
hash: hash,
});
console.log("data", data);
}
async function stakeBloodline() {
@@ -79,13 +112,19 @@ async function stakeBloodline() {
<style lang="sass">
.btn
&.btn-immortal
&.cancel-button
font-size: 14px
text-align: center
&.stake-button
font-size: 18px
text-align: center
.input-balance
margin: 8px 0
color: var(--grey, #858585)
.stake-menu
display: flex
flex-direction: column
gap: 32px
.stake-menu-actions
display: flex
flex-direction: column
gap: 8px
</style>
src/components/TokenClaim.vue
+5 -8
View File
@@ -20,13 +20,13 @@
</div>
<div class="rewards-list" v-else>
<rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
<rewards-wrapper
<!-- <rewards-wrapper
title="Staking Bonus"
coin="$BLOOD"
amount="0 todo"
info="max: 312m"
image="/assets/img/vampir.png"
/>
/> -->
<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
</div>
<div class="rewards-total-wrapper">
@@ -41,15 +41,12 @@
</div>
<div class="claim-button">
<div v-if="activeRound === currentRound" class="btn btn-immortal btn--disabled">Cycle Active</div>
<div v-else-if="getCurrentRoundData?.rewards_total > 0" class="btn btn-immortal" @click="claimRewards">
Claim
<div class="stake-buttons" v-else-if="getCurrentRoundData?.rewards_total > 0">
<div class="btn btn-immortal" @click="claimRewards">Claim</div>
<div class="btn btn-immortal">Stake</div>
</div>
<div v-else class="btn btn-immortal btn--disabled">Nothing to claim</div>
</div>
<div class="stake-buttons">
<div class="btn btn-immortal">Stake</div>
<div class="btn btn-immortal">Unstake</div>
</div>
</div>
</template>
src/components/TokenInput.vue
-1
View File
@@ -6,7 +6,6 @@
v-model="props.modelValue"
:placeholder="0"
/>
<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
</div>
<div class="value-adder">
<slot class="value-adder" name="message"></slot>
src/components/TokenNamePrice.vue
+2 -6
View File
@@ -1,7 +1,7 @@
<template>
<div class="token-price-wrapper">
<div class="token-name">{{ props.name }}</div>
<div class="token-price">{{ props.price }}</div>
<div class="token-name small-text">{{ props.name }}</div>
<div class="token-price number-mobile">{{ props.price }}</div>
</div>
</template>
@@ -15,9 +15,5 @@ const props = defineProps({
<style lang="sass">
.token-price-wrapper
.token-name
font-size: 14px
margin-bottom: 4px
.token-price
font-size: 24px
letter-spacing: 4.32px
</style>
src/helper/helper.js
+8
View File
@@ -25,6 +25,14 @@ export function getAddressShortName(address) {
return addressBegin + "..." + addressEnd;
}
export function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
return x;
}
export function getblocky(address) {
var blockiesData = blockies
.create({
src/main.js
+104 -3
View File
@@ -1,5 +1,9 @@
import './assets/sass/main.sass'
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useTokenStore } from "@/stores/tokens";
import { useMemeburnerStore } from "@/stores/memeburner";
import { useRewardLockerStore } from "@/stores/rewardlocker";
import { useRoundsStore } from "@/stores/rounds";
import { createApp } from 'vue'
import { createPinia } from 'pinia'
@@ -8,12 +12,17 @@ import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
import {
createConfig,
configureChains,
getAccount,
getAccount,
getNetwork,
getContract,
connect,
disconnect,
InjectedConnector,
watchAccount,
watchAccount,
watchWalletClient,
watchPublicClient,
watchContractEvent,
watchNetwork,
getWalletClient,
fetchBalance,
multicall,
@@ -71,8 +80,12 @@ pinia.use(piniaPluginPersistedstate);
app.use(pinia);
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore();
const roundsStore = useRoundsStore();
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
@@ -82,6 +95,7 @@ const { chains, publicClient, webSocketPublicClient } = configureChains(
[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
);
walletStore.config = createConfig({
autoConnect: true,
connectors: [
@@ -111,6 +125,93 @@ walletStore.config = createConfig({
});
walletStore.publicClient = publicClient;
const networkId = getNetwork()?.chain?.id;
watchWalletClient(
{
chainId: networkId,
},
async (walletClient) => {
walletStore.walletClient = walletClient;
}
);
watchPublicClient(
{
chainId: networkId,
},
(publicClient) => console.log("publicClient", publicClient)
);
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);
}
);
watchAccount(async (account) => {
console.log("watchAccount", account);
// {chainId: }
if (account.address) {
walletStore.address = account.address;
walletStore.connected = true;
let chainObject = walletStore.chain;
if (!walletStore.chain) {
const { chain, chains } = getNetwork();
chainObject = chain;
}
// var walletClient = await getWalletClient({
// account: account.address,
// chainId: chainObject.id,
// });
// walletStore.walletClient = walletClient;
await memeBurnerStore.init();
await tokenStore.initV2();
await rewardLockerStore.init();
await walletStore.loadWalletData();
} else {
walletStore.address = null;
walletStore.connected = false;
walletStore.walletClient = null;
}
});
watchNetwork((network) => {
console.log("network123", network);
if (network.chain) {
walletStore.chain = network.chain;
}
});
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);
}
);
await walletStore.init();
await tokenStore.initV2();
await memeBurnerStore.init();
await rewardLockerStore.init();
await memeBurnerStore.init();
app.use(router)
app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app')
src/router/index.js
+1 -95
View File
@@ -68,102 +68,8 @@ const router = createRouter({
router.beforeEach(async (to, from) => {
//init
const showPanel = ref(false);
const eventWatch = ref(null);
const netWorkEvent = ref(null);
const memeSacrificedEvent = ref(null);
const clientClientEvent = ref(null);
console.log("beforeEach");
const tokenStore = useTokenStore();
const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore();
const roundsStore = useRoundsStore();
const walletStore = useWalletStoreV2();
console.log("walletStore.publicClient", walletStore.publicClient);
if (!walletStore.initialized) {
walletStore.initialized = true
console.log("hier");
await walletStore.init();
await tokenStore.initV2();
await memeBurnerStore.init();
await rewardLockerStore.init();
await memeBurnerStore.init();
console.log("init router");
console.log("roundsStore.currentRound", roundsStore.currentRound);
if (!roundsStore.currentRound) {
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound;
}
//events
eventWatch.value = watchAccount(async (account) => {
console.log("account123", account);
const publicClient = getPublicClient();
console.log("publicClient", publicClient);
// {chainId: }
console.log("walletClient", walletClient);
if (account.address) {
walletStore.address = account.address;
walletStore.connected = true;
let chainObject = walletStore.chain;
if (!walletStore.chain) {
const { chain, chains } = getNetwork();
chainObject = chain;
}
var walletClient = await getWalletClient({
account: account.address,
chainId: chainObject.id,
});
walletStore.walletClient = walletClient;
// walletStore.getTokenBalances()
await memeBurnerStore.init();
console.log("hierabc");
await tokenStore.initV2();
} else {
walletStore.address = null;
walletStore.connected = false;
walletStore.walletClient = null;
}
});
netWorkEvent.value = watchNetwork((network) => {
console.log("network123", network);
if (network.chain) {
walletStore.chain = network.chain;
clientClientEvent.value = watchWalletClient(
{
chainId: network.chain.id,
},
(walletClient) => {
walletStore.walletClient = walletClient;
console.log("wc123", walletClient);
}
);
}
});
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);
}
);
await roundsStore.fillRound(roundsStore.activeRound);
await walletStore.loadWalletData();
}
//middleware
if (to.meta.middleware) {
src/stores/memeburner.js
+3 -2
View File
@@ -79,9 +79,10 @@ export const useMemeburnerStore = defineStore("memeburner", {
this.loading = true;
const amountDecimal = BigInt(amount * Math.pow(10, tokenStore.activeToken.decimals));
console.log("this.contract", this.contract);
console.log("amountDecimal", amountDecimal);
console.log("amountDecimal", amountDecimal.toString());
console.log("tokenStore.activeToken.contractAddress", tokenStore.activeToken.contractAddress);
var hash = await this.contract.write
.sacrificeMeme([tokenStore.activeToken.contractAddress, amountDecimal])
.sacrificeMeme([tokenStore.activeToken.contractAddress, amountDecimal.toString()])
console.log("hash", hash);
const data = await waitForTransaction({
hash: hash,
src/stores/rewardlocker.js
+74 -16
View File
@@ -2,7 +2,9 @@ import { defineStore } from "pinia";
import RewardLockerJson from "@/assets/contracts/RewardLocker.json";
import { useTokenStore } from "./tokens";
import { useWalletStoreV2 } from "./walletV2";
import { multicall, getContract } from "@wagmi/core";
import { useRoundsStore } from "@/stores/rounds";
import { createPermitObject, getSignatureRSV } from "@/helper/blockchain.js";
import { multicall, getContract, signTypedData, getAccount, waitForTransaction } from "@wagmi/core";
export const useRewardLockerStore = defineStore("rewardlocker", {
@@ -14,9 +16,9 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
getters: {},
actions: {
async init() {
console.log("-----------init rewardlocker-------------");
const walletStore = useWalletStoreV2();
this.contract = getContract({
console.log("-----------init rewardlocker-------------");
const walletStore = useWalletStoreV2();
this.contract = getContract({
address: this.config.contractAddress,
abi: this.config.abi,
walletClient: walletStore.walletClient || walletStore.publicClient,
@@ -35,21 +37,21 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
console.log("getRewardsForAllToken");
const tokenStore = useTokenStore();
const walletStore = useWalletStoreV2();
const contracts = [];
const contracts = [];
for (let index = 0; index < tokenStore.sacrificeToken.length; index++) {
const token = tokenStore.sacrificeToken[index];
const token = tokenStore.sacrificeToken[index];
// calls.push(this.contract.methods.rewards(walletStore.address, roundNumber, token.contractAddress));
contracts.push({
...this.contract,
functionName: "rewards",
args: [walletStore.address, roundNumber, token.contractAddress],
});
}
const data = await multicall({
contracts,
});
}
const data = await multicall({
contracts,
});
// const multicallStore = useMultiCallStore();
return data
return data;
},
async getSacrificedTokenCoefficient(roundNumber, sacrificedToken) {
return await this.contract.read.getSacrificedTokenCoefficient([roundNumber, sacrificedToken]);
@@ -57,19 +59,75 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
async lastCompletedRound() {
return await this.contract.read.lastCompletedRound();
},
async claim(round) {
console.log("claim");
async claim(round) {
console.log("claim");
const walletStore = useWalletStoreV2();
// return await this.contract.methods.claim(round).call();
console.log(this.contract.methods.claim(round));
// return await this.contract.methods.claim(round).send({from: walletStore.address, to: this.contractAddress});
return await this.contract.write.claim([round]);
console.log(this.contract.methods.claim(round));
// return await this.contract.methods.claim(round).send({from: walletStore.address, to: this.contractAddress});
return await this.contract.write.claim([round]);
},
async claimAll() {
console.log("claimAll");
const roundsStore = useRoundsStore();
const account = getAccount();
console.log("acocunt", account);
const rounds = await roundsStore.getFinshedRoundNumbers();
return await this.contract.write.claim([[1, 2]]);
},
async getTotalRewardsOf(address, rounds) {
return await this.contract.read.getTotalRewardsOf([address, rounds]);
},
async getTotalRewards(address) {
console.log("this.contract", this.contract);
const roundsStore = useRoundsStore();
const rounds = await roundsStore.getFinshedRoundNumbers();
return await this.contract.read.getTotalRewardsOf([address, rounds]);
},
async getStaked(address) {
return await this.contract.read.staked([address]);
},
async orderUnstake() {
try {
return await this.contract.write.orderUnstake();
} catch (error) {
return;
}
},
async unstake(unstakeRound) {
return await this.contract.write.unstake([unstakeRound]);
},
async stakeBloodline(tokenNumber) {
console.log("tokenNumber", tokenNumber);
const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();
const fromAddress = walletStore.address;
const spender = this.config.contractAddress;
const deadline = Date.now() + 20 * 60;
const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
const value = (tokenNumber * Math.pow(10, decimals)).toString();
const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
console.log("nonce", nonce);
const { types, message, domain, primaryType } = createPermitObject(fromAddress, spender, nonce, deadline, value);
const signature = await signTypedData({
domain: domain,
message: message,
primaryType: primaryType,
types: types,
});
const { r, s, v } = getSignatureRSV(signature);
const hash = await this.contract.write.stakeToBeSecured([value, deadline, v, r, s]);
console.log("hash", hash);
const data = await waitForTransaction({
hash: hash,
});
console.log("data", data);
}
},
});
src/stores/rounds.js
+149 -120
View File
@@ -8,136 +8,165 @@ import { multicall } from "@wagmi/core";
export const useRoundsStore = defineStore("rounds", {
state: () => ({
rounds: [
],
activeRound: null,
currentRound: null
rounds: [],
activeRound: null,
currentRound: null,
}),
getters: {
getRoundWinner() {
const goal = this.getCurrentRoundData?.goal;
const winnerCoin = this.rounds[this.activeRound]?.token.find((token) => token.amount === goal)
if (winnerCoin) {
return winnerCoin;
} else {
return false;
}
},
getCurrentRoundData() {
return this.rounds[this.activeRound];
}
},
actions: {
async init() {
//fill initial round
},
async loadRewardsRounds() {
const walletStore = useWalletStoreV2();
const rewardLockerStore = useRewardLockerStore();
getters: {
getRoundWinner() {
const goal = this.getCurrentRoundData?.goal;
console.log("goal", goal);
if (!goal) {
return;
}
const winnerCoin = this.rounds[this.activeRound]?.token.find((token) => token.amount === goal);
if (winnerCoin) {
return winnerCoin;
} else {
return false;
}
},
getCurrentRoundData() {
console.log("this.rounds", this.rounds);
return this.rounds[this.activeRound];
},
},
actions: {
async init() {
//fill initial round
},
async loadRewardsRounds() {
const walletStore = useWalletStoreV2();
const rewardLockerStore = useRewardLockerStore();
console.log("this.currentRound", this.currentRound);
const contracts = []
for (let index = 0; index < this.currentRound; index++) {
console.log("load round: " + index);
// await this.fillRound(index)
console.log({index, address: walletStore.address});
contracts.push({
console.log("this.currentRound", this.currentRound);
const contracts = [];
for (let index = 0; index < this.currentRound; index++) {
console.log("load round: " + index);
// await this.fillRound(index)
console.log({ index, address: walletStore.address });
contracts.push({
...rewardLockerStore.contract,
functionName: "getTotalRewardsOf",
args: [walletStore.address, [index +1]],
args: [walletStore.address, [index + 1]],
});
}
}
const data = await multicall({
const data = await multicall({
contracts,
});
console.log("data123abc", data);
// var test = await rewardLockerStore.getTotalRewardsOf(walletStore.address, rounds)
for (let index = 0; index < data.length; index++) {
const element = data[index];
if (!this.rounds[index]) {
this.rounds[index] = {};
}
this.rounds[index].round = index + 1
this.rounds[index].rewards_total = element.result
}
},
async updateCurrentRound(sacrificedToken) {
const tokenStore = useTokenStore();
const memeBurnerStore = useMemeburnerStore();
var data = await memeBurnerStore.getSacrificedRound(this.currentRound);
console.log("data123", data);
var tokenIndex = this.rounds[this.currentRound].token.findIndex((tokenData) => tokenData.contractAddress === sacrificedToken);
this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex].result[1];
});
console.log("data123abc", data);
// var test = await rewardLockerStore.getTotalRewardsOf(walletStore.address, rounds)
for (let index = 0; index < data.length; index++) {
const element = data[index];
if (!this.rounds[index]) {
this.rounds[index] = {};
}
this.rounds[index].round = index + 1;
this.rounds[index].rewards_total = element.result;
}
},
async updateCurrentRound(sacrificedToken) {
const tokenStore = useTokenStore();
const memeBurnerStore = useMemeburnerStore();
var data = await memeBurnerStore.getSacrificedRound(this.currentRound);
console.log("data123", data);
var tokenIndex = this.rounds[this.currentRound].token.findIndex(
(tokenData) => tokenData.contractAddress === sacrificedToken
);
this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex].result[1];
},
async fillRound(roundNumber) {
console.log("fillRound");
const memeBurnerStore = useMemeburnerStore();
const tokenStore = useTokenStore();
const walletStore = useWalletStoreV2();
const rewardLockerStore = useRewardLockerStore();
},
async fillRound(roundNumber) {
console.log("fillRound");
const memeBurnerStore = useMemeburnerStore();
const tokenStore = useTokenStore();
const walletStore = useWalletStoreV2();
const rewardLockerStore = useRewardLockerStore();
// if (this.activeRound === this.currentRound) {
// console.log("activeRound is not completed");
// } else
if (!this.rounds[roundNumber]?.goal) {
console.log("round not filled --> fill round");
console.log("vor error");
var data = await memeBurnerStore.getSacrificedRound(roundNumber);
let rewardData = null;
if (walletStore.connected) {
console.log("hier1");
rewardData = await rewardLockerStore.getRewardsForAllToken(roundNumber);
console.log("hier2", rewardData);
}
console.log("rewardData123", rewardData);
// if (this.activeRound === this.currentRound) {
// console.log("activeRound is not completed");
// } else
if (!this.rounds[roundNumber]?.goal) {
console.log("round not filled --> fill round");
console.log("vor error");
var data = await memeBurnerStore.getSacrificedRound(roundNumber)
let rewardData = null;
if (walletStore.connected) {
rewardData = await rewardLockerStore.getRewardsForAllToken(roundNumber);
}
console.log("rewardData123", rewardData);
var goal = await memeBurnerStore.getGoal(roundNumber);
console.log("goal", goal);
var tokenArray = []
var rewards_clan = 0
var rewards_sacrifice = 0
for (let index = 0; index < data.length; index++) {
var tokenData = {};
const token = tokenStore.token[index];
var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(roundNumber, token.contractAddress);
var goal = await memeBurnerStore.getGoal(roundNumber);
console.log("goal", goal);
var tokenArray = [];
var rewards_clan = 0;
var rewards_sacrifice = 0;
for (let index = 0; index < data.length; index++) {
var tokenData = {};
const token = tokenStore.token[index];
var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(
roundNumber,
token.contractAddress
);
tokenData.name = token.name;
tokenData.contractAddress = token.contractAddress;
tokenData.vamplogo = token.vamp.logo;
tokenData.vampname = token.vamp.name;
tokenData.amount = data[index].result[1];
tokenData.getAmountToReachGoal= await memeBurnerStore.getAmountToReachGoal(token.contractAddress);
if (this.currentRound !== roundNumber && walletStore.connected) {
const clanwin = (Number(testcoef) / 10000 - 1) * Number(rewardData[index].result);
const sacrificeRewards = Number(rewardData[index].result) - clanwin;
tokenData.name = token.name;
tokenData.contractAddress = token.contractAddress;
tokenData.vamplogo = token.vamp.logo;
tokenData.vampname = token.vamp.name;
tokenData.amount = data[index].result[1];
tokenData.getAmountToReachGoal = await memeBurnerStore.getAmountToReachGoal(token.contractAddress);
if (this.currentRound !== roundNumber && walletStore.connected) {
const clanwin = (Number(testcoef) / 10000 - 1) * Number(rewardData[index].result);
const sacrificeRewards = Number(rewardData[index].result) - clanwin;
tokenData.rewards_ges = BigInt(rewardData[index].result);
tokenData.rewards_clan = BigInt(clanwin);
tokenData.rewards_sacrifice = BigInt(sacrificeRewards);
tokenData.rewards_ges = BigInt(rewardData[index].result);
tokenData.rewards_clan = BigInt(clanwin);
tokenData.rewards_sacrifice = BigInt(sacrificeRewards);
rewards_clan = rewards_clan + (clanwin / Math.pow(10, token.decimals));
rewards_sacrifice =
rewards_sacrifice + sacrificeRewards / Math.pow(10, token.decimals);
}
tokenArray.push(tokenData);
}
const goalInBLD = await memeBurnerStore.getGoalInBLD(roundNumber);
this.rounds[roundNumber] = {
goal: goal[0],
goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
expirationTimestamp: goal[1],
rewards_clan: BigInt(rewards_clan),
rewards_sacrifice: BigInt(rewards_sacrifice),
rewards_total: BigInt(rewards_clan + rewards_sacrifice),
token: tokenArray,
};
console.log("this.rounds[roundNumber]", this.rounds[roundNumber]);
} else {
console.log("round already filled");
}
console.log("this.rounds123", this.rounds);
},
},
rewards_clan = rewards_clan + clanwin / Math.pow(10, token.decimals);
rewards_sacrifice = rewards_sacrifice + sacrificeRewards / Math.pow(10, token.decimals);
}
tokenArray.push(tokenData);
}
const goalInBLD = await memeBurnerStore.getGoalInBLD(roundNumber);
this.rounds[roundNumber] = {
goal: goal[0],
goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
expirationTimestamp: goal[1],
rewards_clan: BigInt(rewards_clan),
rewards_sacrifice: BigInt(rewards_sacrifice),
rewards_total: BigInt(rewards_clan + rewards_sacrifice),
token: tokenArray,
};
console.log("this.rounds[roundNumber]", this.rounds[roundNumber]);
} else {
console.log("round already filled");
}
console.log("this.rounds123", this.rounds);
},
async getFinshedRoundNumbers() {
const array = [];
const rewardLockerStore = useRewardLockerStore();
const lastCompletedRound = await rewardLockerStore.lastCompletedRound();
for (let index = 1; index <= Number(lastCompletedRound) + 1; index++) {
array.push(index);
}
return array;
},
/**
* function to get finished rounds, active round and the next round to check if there is a round the user called unstakeOrdered.
* with Backend it would be much easier because we could store the event data in the database
*/
async getRoundsNumberWithNext() {
const array = [];
const rewardLockerStore = useRewardLockerStore();
const lastCompletedRound = await rewardLockerStore.lastCompletedRound();
for (let index = 1; index <= Number(lastCompletedRound) + 1; index++) {
array.push(index);
}
return array;
},
},
});
src/stores/tokens.js
+8 -4
View File
@@ -39,7 +39,7 @@ export const useTokenStore = defineStore("token", {
{
abi: MemeToken.abi,
contractAddress: MemeToken.contractAddress,
logo: "/assets/img/token/bloodline.png",
logo: "/assets/img/token/bloodline.png",
},
// {
// name: "$ELON",
@@ -159,7 +159,8 @@ export const useTokenStore = defineStore("token", {
return allowance;
},
async approveToken(amount) {
try {
try {
console.log("amount", amount);
this.loading = true;
const memeBurnerStore = useMemeburnerStore();
// var approve = await this.contract.methods
@@ -168,12 +169,15 @@ export const useTokenStore = defineStore("token", {
console.log("approve");
var approveHash = await this.activeToken.contract.write.approve([
memeBurnerStore.config.contractAddress,
amount,
50000000000000000000,
]);
console.log("approveHash", approveHash);
const data = await waitForTransaction({
hash: approveHash,
});
});
this.activeToken.allowance = await this.allowance();
console.log("data", data);
return data;
} catch (error) {
console.error(error);
src/stores/walletV2.js
+22 -13
View File
@@ -16,6 +16,7 @@ import {
getWalletClient,
fetchBalance,
multicall,
getNetwork,
} from "@wagmi/core";
import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
@@ -40,7 +41,7 @@ export const useWalletStoreV2 = defineStore("walletV2", {
config: null,
chain: null,
token: [],
initialized: false
initialized1: false,
}),
getters: {
sacrificeToken: (state) => state.token.filter((obj) => obj.contractAddress !== MemeToken.contractAddress),
@@ -57,8 +58,9 @@ export const useWalletStoreV2 = defineStore("walletV2", {
console.log("account123abc", account);
if (account.address) {
this.address = account.address;
this.connected = true;
this.connected = true;
}
// await this.isConnected();
// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
// if (this.connected) {
@@ -77,19 +79,23 @@ export const useWalletStoreV2 = defineStore("walletV2", {
// }
// });
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({
chainId: goerli.id,
connector: connector,
});
try {
console.log("connector.name", connector.name);
// if (!account.isConnected) {
const connection = await connect({
chainId: goerli.id,
connector: connector,
});
console.log("connection", connection);
console.log("connection", connection);
} catch (error) {
if (error.message.includes("Connector not found")) {
console.warn("Connector not found");
}
console.error(error);
}
// this.address = connection.account;
},
async getTokenBalance(token) {
@@ -100,7 +106,8 @@ export const useWalletStoreV2 = defineStore("walletV2", {
},
async getTokenBalances() {
console.log("getTokenBalances");
console.log("getTokenBalances");
this.token = []
const tokenStore = useTokenStore();
console.log("tokenStore.token.length", tokenStore.token.length);
var contracts = [];
@@ -138,6 +145,8 @@ export const useWalletStoreV2 = defineStore("walletV2", {
const staked = await rewardlockerStore.getStaked(this.address);
console.log("staked", staked);
this.memeToken.staked = Number(staked / BigInt(Math.pow(10, tokenStore.memeToken.decimals)));
const unclaimedRewards = await rewardlockerStore.getTotalRewards(this.address);
this.memeToken.unclaimedRewards = Number(unclaimedRewards/ BigInt(Math.pow(10, tokenStore.memeToken.decimals)))
}
},
src/views/CycleView.vue
+27 -7
View File
@@ -21,7 +21,7 @@
/>
</div>
<div class="cycle card bloodline-wrapper container">
<div class="bloodline-border">
<div class="bloodline-border" v-if="difference > 0 && roundsStore.currentRound === roundsStore.activeRound">
<table>
<tr>
<td>Sacrifice:</td>
@@ -103,7 +103,11 @@ import { inject, ref, onMounted, onBeforeUnmount } from "vue";
import BloodChart from "@/components/BloodChart.vue";
import TokenClaim from "@/components/TokenClaim.vue";
import { useMemeburnerStore } from "@/stores/memeburner";
import { useRoundsStore } from "@/stores/rounds";
import { useRewardLockerStore } from "@/stores/rewardlocker";
const roundsStore = useRoundsStore();
const days = ref(null);
@@ -111,12 +115,25 @@ const hours = ref(null);
const minutes = ref(null);
const seconds = ref(null);
const timer = ref(null);
const difference = ref(null);
const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore();
const isMobile = inject("isMobile");
onMounted(() => {
onMounted(async () => {
console.log("onmounted", roundsStore.activeRound);
console.log("blatest", roundsStore.getCurrentRoundData.expirationTimestamp);
console.log("roundsStore.activeRound123", roundsStore.activeRound);
// await memeBurnerStore.init();
// await rewardLockerStore.init();
if (!roundsStore.currentRound) {
console.log("test");
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound;
}
await roundsStore.fillRound(roundsStore.activeRound);
const expirationTimestamp = roundsStore.getCurrentRoundData.expirationTimestamp;
timer.value = setInterval(function () {
timeBetweenDates(expirationTimestamp);
@@ -146,12 +163,15 @@ function timeBetweenDates(expirationTimestamp) {
const dateEntered = new Date(Number(expirationTimestamp) * 1000);
if (dateEntered) {
var now = new Date();
var difference = dateEntered.getTime() - now.getTime();
console.log("difference", difference);
if (difference <= 0) {
difference.value = dateEntered.getTime() - now.getTime();
console.log("difference.value", difference.value);
if (difference.value <= 0) {
clearInterval(timer.value);
days.value = "0d";
hours.value = "0h";
minutes.value = "0m";
} else {
var _seconds = Math.floor(difference / 1000);
var _seconds = Math.floor(difference.value / 1000);
var _minutes = Math.floor(_seconds / 60);
var _hours = Math.floor(_minutes / 60);
var _days = Math.floor(_hours / 24);
src/views/ProfileView.vue
+240 -192
View File
@@ -1,33 +1,47 @@
<template>
<div>
<div class="profile-header">Profile</div>
<div class="profile-subheader">
<div class="profile-subheader-logo"><img :src="getblocky(walletStore.address)" alt="" /></div>
<div class="profile-subheader-address">0x12345...812d</div>
<div class="profile-page container">
<div class="profile-header">
<div class="profile-headline">Profile</div>
<div class="profile-subheader">
<div class="profile-subheader-logo"><img :src="getblocky(walletStore.address)" alt="" /></div>
<div class="profile-subheader-address">{{ getAddressShortName(walletStore.address) }}</div>
</div>
</div>
<div class="total-rewards-wrapper">
<div class="total-rewards-headline">Total Rewards</div>
<!-- <div class="total-rewards-wrapper">
<div class="total-rewards-headline mid-text text-center">Total Rewards</div>
<div class="total-rewards-inner">
<div class="claim-header">Unclaimed</div>
<div class="claim-wrapper">
<div class="claim-inner">
<div class="claim-header">Claimed</div>
<div class="claim-body">TODO</div>
</div>
</div>
<div class="claim-hr"></div>
<div class="claim-wrapper">
<div class="claim-inner">
<div class="claim-header">Unclaimed</div>
<div class="claim-body">TODO</div>
<div class="claim-body">
<div class="claim-coin small-text">$Blood</div>
<div class="claim-amount number-mobile">
{{ walletStore.memeToken?.unclaimedRewards }}
</div>
</div>
<img class="bloodline-token" src="/assets/img/vampir.png" alt="vampir" />
</div>
</div>
<div class="total-rewards-buttons">
<div class="btn btn-immortal" @click="rewardLockerStore.claimAll">Claim</div>
<div class="btn btn-immortal">Stake</div>
<div class="btn btn-immortal">Unstake</div>
</div>
<div class="text-center low-mid-text">You can claim, once the cycle is over.</div>
</div>
</div> -->
<div class="total-rewards-wrapper">
<div class="total-rewards-headline mid-text text-center">Total Rewards</div>
<claim-component></claim-component>
</div>
<stake-component-v1></stake-component-v1>
<div class="profile-stake">
<!-- <stake-component>
<template v-slot:headline> Staked </template>
<template v-slot:subheadline>
Stake for a 25% bonus on your sacrifice. Upper limit is your stake.
</template>
</stake-component> -->
</div>
<stake-component></stake-component>
<div class="most-sacrificed-wrapper" v-if="false">
<div class="most-sacrificed-inner">
@@ -72,7 +86,7 @@
</div>
</div>
<div class="cycle-wrapper">
<!-- <div class="cycle-wrapper">
<div class="cycle-inner">
<div class="cycle-headline">Cycles</div>
<div class="cycle-header">
@@ -145,13 +159,13 @@
<div class="sacrifice-reward-header-amount">+200 $BDL</div>
</div>
<table class="sacrifice-coins">
<div class="sacrifice-coin">
<div><img src="/assets/img/winner.png" alt="" /></div>
<div><img src="/assets/img/token/pepevamp.png" alt="" /></div>
<div>$PEPE</div>
<div class="arrow"></div>
<div class="bloodline">1,000 $BDL</div>
</div>
<tr class="sacrifice-coin">
<td><img src="/assets/img/winner.png" alt="" /></td>
<td><img src="/assets/img/token/pepevamp.png" alt="" /></td>
<td>$PEPE</td>
<td class="arrow"></td>
<td class="bloodline">1,000 $BDL</td>
</tr>
</table>
</div>
</div>
@@ -161,7 +175,7 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>
@@ -170,12 +184,18 @@ import { ref, onMounted, computed } from "vue";
import { useRoundsStore } from "@/stores/rounds";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { getblocky } from "@/helper/helper.js";
import { getblocky, getAddressShortName } from "@/helper/helper.js";
import StakeComponent from "@/components/StakeComponent.vue";
import StakeComponentV1 from "@/components/StakeComponentV1.vue";
import ClaimComponent from "@/components/ClaimComponent.vue";
import { useMemeburnerStore } from "@/stores/memeburner";
import { useRewardLockerStore } from "@/stores/rewardlocker";
const roundsStore = useRoundsStore();
const walletStore = useWalletStoreV2();
const rewardLockerStore = useRewardLockerStore();
const memeBurnerStore = useMemeburnerStore();
const activeRound = ref(null);
const openCycleElement = ref(false);
@@ -189,13 +209,22 @@ function openRound(index) {
}
onMounted(async () => {
// await memeBurnerStore.init();
// await rewardLockerStore.init();
console.log("loadRounds");
if (!roundsStore.currentRound) {
console.log("test");
roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
console.log("roundsStore.currentRound", roundsStore.currentRound);
roundsStore.activeRound = roundsStore.currentRound;
}
await roundsStore.loadRewardsRounds();
console.log("roundsStore.rounds", roundsStore.rounds);
});
const rounds = computed(() =>
roundsStore.rounds
const rounds = computed(() => {
var tetst = roundsStore.rounds
.filter((round) => {
if (round.round) {
return true;
@@ -203,187 +232,206 @@ const rounds = computed(() =>
return false;
}
})
.reverse()
);
.reverse();
return tetst;
});
</script>
<style lang="sass">
.profile-header
color: #FFF
text-align: center
font-size: 32px
margin-bottom: 12px
.profile-subheader
.profile-page
display: flex
justify-content: center
gap: 12px
align-items: center
margin-bottom: 24px
.profile-subheader-logo
img
width: 21px
height: 21px
border-radius: 20%
.profile-subheader-address
font-size: 12px
.total-rewards-wrapper
border-radius: 16px
background: #202020
padding: 8px
.total-rewards-headline
color: #FFF
text-align: center
font-size: 24px
margin-bottom: 24px
.total-rewards-inner
border-radius: 16px
border: 2px solid var(--grey, #858585)
background: var(--dark-grey, #202020)
padding: 8px 12px
.claim-wrapper
.claim-inner
flex-direction: column
margin-bottom: 16px
.claim-header
color: var(--white, #F9F9FA)
font-size: 18px
text-align: center
margin-bottom: 16px
.claim-hr
background-color: #858585
margin: 16px 0
height: 1px
.total-rewards-buttons
display: flex
text-align: center
gap: 16px
justify-content: space-between
div
flex: 1 1 auto
font-size: 18px
.most-sacrificed-wrapper
.most-sacrificed-inner
padding: 8px
border-radius: 16px
border: 1px solid var(--grey, #858585)
background: var(--dark-grey, #202020)
gap: 34px
display: flex
justify-content: center
.most-sacrificed-left
display: flex
flex-direction: column
justify-content: center
.most-sacrificed-header
font-size: 24px
.most-sacrificed-subheader
font-size: 12px
.most-sacrificed-right
display: flex
flex-direction: column
.most-sacrificed-coin-logo
img
width: 49px
height: 49px
border-radius: 50%
.total-sacrificed-wrapper
background-color: var(--dark-grey, #202020)
border-radius: 16px
border: 1px solid var(--grey, #858585)
padding: 8px
.total-sacrificed-inner
flex-direction: column
gap: 24px
.profile-header
display: flex
flex-direction: column
align-items: center
gap: 16px
.total-sacrificed-header
font-size: 18px
.total-sacrificed-coins
gap: 8px
.profile-headline
color: #FFF
text-align: center
font-size: 32px
.profile-subheader
display: flex
gap: 27px
.total-sacrificed-coin
justify-content: center
gap: 12px
align-items: center
.profile-subheader-logo
img
width: 21px
height: 21px
border-radius: 20%
.profile-subheader-address
font-size: 12px
.total-rewards-wrapper
border-radius: 16px
background: var(--darkgrey, #202020)
display: flex
flex-direction: column
gap: 24px
padding: 8px
.total-rewards-inner
border-radius: 16px
border: 2px solid var(--grey, #858585)
background: var(--darkgrey, #202020)
padding: 8px 12px
gap: 16px
display: flex
flex-direction: column
.claim-wrapper
.claim-inner
display: flex
flex-direction: row
.claim-header
color: var(--white, #F9F9FA)
font-size: 18px
text-align: center
.claim-body
display: flex
flex-direction: column
gap: 4px
.bloodline-token
margin-left: auto
.claim-hr
background-color: #858585
margin: 16px 0
height: 1px
.total-rewards-buttons
display: flex
text-align: center
gap: 16px
justify-content: space-between
div
flex: 1 1 auto
font-size: 18px
.profile-stake
padding: 0 8px
.most-sacrificed-wrapper
.most-sacrificed-inner
padding: 8px
border-radius: 16px
border: 1px solid var(--grey, #858585)
background: var(--dark-grey, #202020)
gap: 34px
display: flex
justify-content: center
.most-sacrificed-left
display: flex
flex-direction: column
gap: 8px
text-align: center
.total-sacrificed-coin-logo
justify-content: center
.most-sacrificed-header
font-size: 24px
.most-sacrificed-subheader
font-size: 12px
.most-sacrificed-right
display: flex
flex-direction: column
.most-sacrificed-coin-logo
img
height: 49px
width: 49px
height: 49px
border-radius: 50%
.cycle-wrapper
margin-top: 24px
.cycle-inner
.cycle-headline
font-size: 24px
margin-bottom: 8px
text-align: center
.cycle-header
display: flex
justify-content: space-between
padding: 8px 16px
font-size: 18px
.cycle-rounds
gap: 8px
.total-sacrificed-wrapper
background-color: var(--dark-grey, #202020)
border-radius: 16px
border: 1px solid var(--grey, #858585)
padding: 8px
.total-sacrificed-inner
display: flex
flex-direction: column
.cycle-round
border-radius: 16px
border: 3px solid var(--grey, #858585)
background: var(--dark-grey, #202020)
padding: 12px
min-height: 55px
.cycle-round-inner
align-items: center
gap: 16px
.total-sacrificed-header
font-size: 18px
.total-sacrificed-coins
display: flex
gap: 27px
.total-sacrificed-coin
display: flex
font-size: 18px
flex-direction: column
gap: 8px
align-items: center
// .cycle-round-number
.cycle-round-badget
border-radius: 14px
border: 1px solid var(--grey, #858585)
padding: 8px 16px
height: 25px
color: var(--grey, #858585)
text-align: center
font-size: 14px
text-align: center
.total-sacrificed-coin-logo
img
height: 49px
width: 49px
border-radius: 50%
.cycle-wrapper
margin-top: 24px
.cycle-inner
.cycle-headline
font-size: 24px
margin-bottom: 8px
text-align: center
.cycle-header
display: flex
justify-content: space-between
padding: 8px 16px
font-size: 18px
.cycle-rounds
gap: 8px
display: flex
flex-direction: column
.cycle-round
border-radius: 16px
border: 3px solid var(--grey, #858585)
background: var(--dark-grey, #202020)
padding: 12px
min-height: 55px
.cycle-round-inner
display: flex
font-size: 18px
gap: 8px
align-items: center
margin-left: auto
.cycle-round-reward
margin-left: auto
.cycle-round-more
font-size: 16px
.cycle-round-detail
.cycle-round-detail-inner
.sacrifice-reward-wrapper
border-radius: 16px
border: 0.5px solid var(--grey, #858585)
margin-top: 12px
.sacrifice-reward-inner
// .cycle-round-number
.cycle-round-badget
border-radius: 14px
border: 1px solid var(--grey, #858585)
padding: 8px 16px
.sacrifice-reward-header
display: flex
font-size: 18px
justify-content: space-between
margin-bottom: 16px
.sacrifice-coins
margin-left: auto
border-collapse: separate
border-spacing: 0 12px
.sacrifice-coin
td
text-align: right
.arrow
width: 14px
padding: 0 16px
height: 25px
color: var(--grey, #858585)
text-align: center
font-size: 14px
display: flex
align-items: center
margin-left: auto
.cycle-round-reward
margin-left: auto
.cycle-round-more
font-size: 16px
.cycle-round-detail
.cycle-round-detail-inner
.sacrifice-reward-wrapper
border-radius: 16px
border: 0.5px solid var(--grey, #858585)
margin-top: 12px
.sacrifice-reward-inner
padding: 8px 16px
.sacrifice-reward-header
display: flex
font-size: 18px
justify-content: space-between
margin-bottom: 16px
.sacrifice-coins
margin-left: auto
border-collapse: separate
border-spacing: 0 12px
.sacrifice-coin
td
text-align: right
img
height: 40px
width: 40px
border-radius: 50%
.arrow
width: 14px
padding: 0 16px
</style>