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

update responsive design

Browse Source
This commit is contained in:
Michel Fromme
2023-06-25 17:00:16 +02:00
parent db41b03456
commit fdf96948a5
31 changed files with 879 additions and 603 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+70 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { onMounted } from "vue";
import { onMounted, onUnmounted, provide, ref } from "vue";
import { storeToRefs } from "pinia";
import Web3 from "web3";
@@ -9,10 +9,37 @@ import { useWalletStore } from "@/stores/wallet";
const walletStore = useWalletStore();
import { useTokenStore } from "@/stores/tokens";
import { useContractStore } from "@/stores/contracts";
import { useMemeburnerStore } from "@/stores/memeburner";
import { useRewardLockerStore } from "@/stores/rewardlocker";
const tokenStore = useTokenStore();
const contractStore = useContractStore();
const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore();
const { memeBurner } = storeToRefs(tokenStore);
const { list } = storeToRefs(contractStore);
const isMobile = ref(false);
isMobile.value = isMobileFunc();
onMounted(() => {
window.addEventListener("resize", handleWindowSizeChange);
handleWindowSizeChange();
});
onUnmounted(() => {
window.removeEventListener("resize", handleWindowSizeChange);
});
const handleWindowSizeChange = () => {
isMobile.value = isMobileFunc();
// your code
};
function isMobileFunc() {
if (screen.width <= 760) {
return true;
} else {
return false;
}
}
provide("isMobile", isMobile);
onMounted(async () => {
var test = await walletStore.isConnected();
@@ -25,11 +52,36 @@ onMounted(async () => {
memeBurner.value.config.abi,
memeBurner.value.config.contractAddress
);
//Memeburner Contract
memeBurnerStore.contract = new web3.eth.Contract(
memeBurnerStore.config.abi,
memeBurnerStore.config.contractAddress
);
var getGoal = await memeBurnerStore.getGoal(2);
console.log("getGoal", getGoal);
console.log("memeBurnerStore.contract", memeBurnerStore.contract);
console.log("list", list.value);
const currentRound = await contract.methods.currentRound().call();
const rounds = await contract.methods.rounds("0x0e349D42C125acA39ea58024FFC23ED0fE5feE32").call();
console.log("currentRound", currentRound);
console.log("rounds", rounds);
rewardLockerStore.contract = new web3.eth.Contract(
rewardLockerStore.config.abi,
rewardLockerStore.config.contractAddress
);
var lastCompletedRound = await rewardLockerStore.lastCompletedRound();
console.log("lastCompletedRound", lastCompletedRound);
var getwards = await rewardLockerStore.getRewards(
walletStore.address,
1,
"0x4435ABC578136e2Eca50b5EFf950F17CAF42485b"
);
console.log("getwards", getwards);
});
</script>
@@ -38,6 +90,22 @@ onMounted(async () => {
<div class="main">
<RouterView />
</div>
<div class="footer">
<div class="footer-inner">
$BLOOD is 100%<br />
community owned.<br />
No team %, no pre-mine.
</div>
</div>
</template>
<style lang="sass"></style>
<style lang="sass">
.footer
height: 450px
min-height: 450px
background-color: var(--grey2)
.footer-inner
padding: 24px
font-size: 24px
text-align: center
</style>
src/assets/contracts/LiquidityOwner.json
+8 -8
View File
@@ -1,6 +1,6 @@
{
"contractName": "LiquidityOwner",
"contractAddress": "0x0ce1d955f2a2658d6ca1CF61Fa300234fD8A262c",
"contractAddress": "0xF58FC44A2862335F3577253EC544488006aF676A",
"abi": [
{
"inputs": [
@@ -83,7 +83,7 @@
"inputs": [
{
"internalType": "uint256[]",
"name": "liquidityTokenIds",
"name": "tokenIds",
"type": "uint256[]"
}
],
@@ -198,7 +198,7 @@
"inputs": [
{
"internalType": "uint256[]",
"name": "positionsToCancel",
"name": "tokenIds",
"type": "uint256[]"
},
{
@@ -240,22 +240,22 @@
"inputs": [
{
"internalType": "address",
"name": "",
"name": "operator",
"type": "address"
},
{
"internalType": "address",
"name": "",
"name": "from",
"type": "address"
},
{
"internalType": "uint256",
"name": "",
"name": "tokenId",
"type": "uint256"
},
{
"internalType": "bytes",
"name": "",
"name": "data",
"type": "bytes"
}
],
@@ -267,7 +267,7 @@
"type": "bytes4"
}
],
"stateMutability": "pure",
"stateMutability": "nonpayable",
"type": "function"
},
{
src/assets/contracts/MemeBurner.json
+30 -54
View File
@@ -1,6 +1,6 @@
{
"contractName": "MemeBurner",
"contractAddress": "0x6eEAe97975e156400DD1DDD8eFc4CcB167BaAFC3",
"contractAddress": "0x5c7077b0424c0e425B16363AdA59f1D72914C5c5",
"abi": [
{
"inputs": [
@@ -146,6 +146,35 @@
"name": "MemeSacrificed",
"type": "event"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "goal",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "achieved",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "amountOfAsset",
"type": "uint256"
}
],
"name": "_calculateLinearDecreasingReward",
"outputs": [
{
"internalType": "uint256",
"name": "reward",
"type": "uint256"
}
],
"stateMutability": "pure",
"type": "function"
},
{
"inputs": [
{
@@ -177,59 +206,6 @@
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "memeToSacrifice",
"type": "address"
},
{
"internalType": "uint256",
"name": "amountToSacrifice",
"type": "uint256"
}
],
"name": "getRewardFor",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "roundNumber",
"type": "uint256"
},
{
"internalType": "address",
"name": "meme",
"type": "address"
}
],
"name": "getSacrificedMeme",
"outputs": [
{
"internalType": "bool",
"name": "participation",
"type": "bool"
},
{
"internalType": "uint256",
"name": "amountAchieved",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "liquidityAmountLimit",
src/assets/contracts/MemeToken.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"contractName": "MemeToken",
"contractAddress": "0xeC73Ec89897a36E9Ca36B2190964bBd8C46748AD",
"contractAddress": "0x0e349D42C125acA39ea58024FFC23ED0fE5feE32",
"abi": [
{
"inputs": [
src/assets/contracts/RewardLocker.json
+116 -274
View File
@@ -1,6 +1,6 @@
{
"contractName": "RewardLocker",
"contractAddress": "0x3bEc26159dbA0A32210eaDF6A938F1BbE8bfDAA0",
"contractAddress": "0x6749F75Ece2755d38f209Da1cBab07A1caD69554",
"abi": [
{
"inputs": [
@@ -15,7 +15,7 @@
},
{
"inputs": [],
"name": "MemeAltarAlreadyInitialized",
"name": "MemeBurnerAlreadyInitialized",
"type": "error"
},
{
@@ -23,21 +23,6 @@
"name": "MemeTokenAlreadyInitialized",
"type": "error"
},
{
"inputs": [],
"name": "RoundIsNotCompletedYet",
"type": "error"
},
{
"inputs": [],
"name": "TooEarlyToUnstake",
"type": "error"
},
{
"inputs": [],
"name": "Unsynchronized",
"type": "error"
},
{
"anonymous": false,
"inputs": [
@@ -48,7 +33,7 @@
"type": "address"
},
{
"indexed": true,
"indexed": false,
"internalType": "uint256",
"name": "amount",
"type": "uint256"
@@ -57,56 +42,6 @@
"name": "ClaimedReward",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "staker",
"type": "address"
},
{
"indexed": true,
"internalType": "uint256",
"name": "stakedRound",
"type": "uint256"
},
{
"indexed": true,
"internalType": "uint256",
"name": "stakedAmount",
"type": "uint256"
}
],
"name": "RewardStaked",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "unstaker",
"type": "address"
},
{
"indexed": true,
"internalType": "uint256",
"name": "unstakeRound",
"type": "uint256"
},
{
"indexed": true,
"internalType": "uint256",
"name": "unstakedAmount",
"type": "uint256"
}
],
"name": "RewardUnstaked",
"type": "event"
},
{
"anonymous": false,
"inputs": [
@@ -171,29 +106,23 @@
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "unstaker",
"name": "_burnedToken",
"type": "address"
},
}
],
"name": "claim",
"outputs": [
{
"indexed": true,
"internalType": "uint256",
"name": "unstakeRound",
"type": "uint256"
},
{
"indexed": true,
"internalType": "uint256",
"name": "unstakedAmount",
"name": "claimedAmount",
"type": "uint256"
}
],
"name": "UnstakeOrdered",
"type": "event"
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
@@ -204,7 +133,7 @@
},
{
"internalType": "address[]",
"name": "_sacrificedTokens",
"name": "_burnedTokens",
"type": "address[]"
}
],
@@ -219,6 +148,81 @@
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address[]",
"name": "_burnedTokens",
"type": "address[]"
}
],
"name": "claim",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_round",
"type": "uint256"
}
],
"name": "claim",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_round",
"type": "uint256"
},
{
"internalType": "address[]",
"name": "_burnedTokens",
"type": "address[]"
}
],
"name": "claim",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "claim",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
@@ -247,7 +251,31 @@
},
{
"internalType": "address",
"name": "_sacrificedToken",
"name": "_burnedToken",
"type": "address"
}
],
"name": "claim",
"outputs": [
{
"internalType": "uint256",
"name": "claimedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_round",
"type": "uint256"
},
{
"internalType": "address",
"name": "_burnedToken",
"type": "address"
}
],
@@ -266,31 +294,7 @@
"inputs": [
{
"internalType": "address",
"name": "beneficiary",
"type": "address"
},
{
"internalType": "uint256[]",
"name": "roundNumbers",
"type": "uint256[]"
}
],
"name": "getTotalRewardsOf",
"outputs": [
{
"internalType": "uint256",
"name": "totalRewardsAmount",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "_memeAltar",
"name": "_memeBurner",
"type": "address"
},
{
@@ -319,7 +323,7 @@
},
{
"inputs": [],
"name": "memeAltar",
"name": "memeBurner",
"outputs": [
{
"internalType": "address",
@@ -343,19 +347,6 @@
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "orderUnstake",
"outputs": [
{
"internalType": "uint256",
"name": "unstakeRound",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
@@ -365,7 +356,7 @@
},
{
"internalType": "address[]",
"name": "sacrificableTokens",
"name": "burnableTokens",
"type": "address[]"
}
],
@@ -389,7 +380,7 @@
},
{
"internalType": "address",
"name": "_sacrificedToken",
"name": "_burnedToken",
"type": "address"
},
{
@@ -477,11 +468,6 @@
"name": "roundCompleted",
"type": "bool"
},
{
"internalType": "uint256",
"name": "totalDefaultRewards",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "totalRewards",
@@ -490,150 +476,6 @@
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
},
{
"internalType": "uint256",
"name": "deadline",
"type": "uint256"
},
{
"internalType": "uint8",
"name": "v",
"type": "uint8"
},
{
"internalType": "bytes32",
"name": "r",
"type": "bytes32"
},
{
"internalType": "bytes32",
"name": "s",
"type": "bytes32"
}
],
"name": "stakeToBeSecured",
"outputs": [
{
"internalType": "uint256",
"name": "stakedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256[]",
"name": "_rounds",
"type": "uint256[]"
},
{
"internalType": "address[]",
"name": "_sacrificedTokens",
"type": "address[]"
}
],
"name": "stakeToBeSecured",
"outputs": [
{
"internalType": "uint256",
"name": "stakedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
}
],
"name": "stakeToBeSecured",
"outputs": [
{
"internalType": "uint256",
"name": "stakedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"name": "staked",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "unstakeRound",
"type": "uint256"
}
],
"name": "unstake",
"outputs": [
{
"internalType": "uint256",
"name": "unstakedAmount",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
},
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"name": "unstakeOrdered",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
}
]
}
src/assets/img/token/elon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

src/assets/img/token/elonMobile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

src/assets/img/token/elonvamp.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

src/assets/img/token/pepe.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

src/assets/img/token/pepeMobile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

src/assets/img/token/pepevamp.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

src/assets/img/token/shib.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

src/assets/img/token/shibMobile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

src/assets/img/token/shibvamp.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

src/assets/img/tokenomics_footer.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

src/assets/sass/base.sass
+29 -4
View File
@@ -1,12 +1,23 @@
.bloodline-devider
font-size: 42px
margin: 24px 0
text-align: center
margin: 16px 0
@media (min-width: 992px)
margin: 24px 0
.bloodline-border
padding: 24px 32px
border: 4px solid #000000
padding: 16px
border-radius: 16px
border: 2px solid #000
&.bloodline-border--variant1
border: 4px solid var(--midnight-black)
@media (min-width: 992px)
border: 4px solid #000
@media (min-width: 992px)
padding: 24px 32px
border: 4px solid #000
&.purple
border-color: var(--purple)
.bloodline-badge
padding: 8px 16px 8px 16px
@@ -30,6 +41,20 @@
border-color: rgba(var(--v-border-color),var(--v-border-opacity))
border-style: solid
border-width: 0
border-radius: 4px
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
@media (min-width: 992px)
height: auto
width: auto
.bloodline-container
padding: 0 24px
src/assets/sass/buttons.sass
+4 -1
View File
@@ -1,12 +1,15 @@
.btn
&.btn-immortal
background-color: $red
background-color: $purple
color: $button-color
font-size: 24px
padding: 16px 24px
gap: 8px
border-radius: 14px
@media (min-width: 992px)
background-color: $red
&:hover,&:focus,&:active
background-color: lighten($button-background-color, 10%),
color: darken($button-color, 10%),
src/assets/sass/main.sass
+12 -9
View File
@@ -37,18 +37,12 @@ body
margin-top: auto
.container
padding-right: 15px
padding-left: 15px
margin-right: auto
margin-left: auto
@media (min-width: 992px)
max-width: 800px
.section-header-container
width: 655px
text-align: center
font-size: 24px
margin-top: 64px
margin-bottom: 64px
padding-right: 15px
padding-left: 15px
h1
font-weight: 700
@@ -57,7 +51,16 @@ h1
@media (min-width: 992px)
font-size: 60px
@media (min-width: 1200px)
h2
font-size: 40px
font-weight: 200
@media (min-width: 992px)
font-size: 40px
h3
font-size: 32px
font-weight: 200
@media (min-width: 992px)
font-size: 40px
.page-head
margin-bottom: 80px
.page-body
src/assets/sass/variables.sass
+5 -1
View File
@@ -13,8 +13,9 @@ $black: #0F0F0F
$grey: #808080
$red: #8B0000
$purple: #4B0082
$midnight-black: #0F0F0F
$darkgrey: #202020
$grey2: #2D2D2D
$button-color: $white
$button-background-color: $black
@@ -29,8 +30,11 @@ $button-background-color: $black
--tertiary-light: #{$tertiary-light}
--tertiary-dark: #{$tertiary-dark}
--grey: #{$grey}
--grey2: #{$grey2}
--purple: #{$purple}
--blood-color: #{$red}
--midnight-black: #{$midnight-black}
--darkgrey: #{$darkgrey}
// :root
// --font-size-text: 16px
// --font-size-title: 32px
src/components/BloodChart.vue
+27 -9
View File
@@ -2,7 +2,9 @@
<div class="blood-chart-wrapper">
<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
<div class="blood-chart-element-header">
<div class="blood-chart-coin"></div>
<div class="blood-chart-coin">
<img :src="getImageUrl(coin.icon)" alt="logo" />
</div>
<div class="blood-chart-coin-title">{{ coin.name }}</div>
</div>
<div class="blood-chart-element-body">
@@ -50,18 +52,25 @@
</template>
<script setup>
function getImageUrl(url) {
return new URL(url, import.meta.url).href;
}
const dataPoints = [
{
name: "PEPE",
name: "$PEPE",
percentage: 62.2,
icon: "/src/assets/img/token/pepevamp.png",
},
{
name: "Shiba",
name: "$SHIB",
percentage: 31.2,
icon: "/src/assets/img/token/shibvamp.png",
},
{
name: "Doge",
name: "$ELON",
percentage: 54.5,
icon: "/src/assets/img/token/elonvamp.png",
},
];
</script>
@@ -69,8 +78,14 @@ const dataPoints = [
<style lang="sass">
.blood-chart-wrapper
height: 750px
width: 100%
justify-content: space-around
display: inline-flex
gap: 96px
@media (min-width: 992px)
gap: 96px
width: unset
justify-content: unset
.blood-chart-element
height: 100%
width: 80px
@@ -82,19 +97,22 @@ const dataPoints = [
height: 80px
width: 80px
border-radius: 80px
background-color: grey
margin-left: auto
margin-right: auto
position: relative
margin-bottom: 16px
overflow: hidden
.blood-chart-coin-title
text-align: center
margin-bottom: 32px
font-size: 24px
font-size: 16px
@media (min-width: 992px)
font-size: 24px
.blood-chart-element-body
background-color: rgba(233, 233, 233, 0.2)
flex: 1 1 auto
border-radius: 8px 8px 40px 40px
text-align: left
.blood-chart-bar-wrapper
height: 100%
display: flex
@@ -103,14 +121,14 @@ const dataPoints = [
margin-top: auto
background-color: var(--blood-color)
position: relative
border-radius: 8px 8px 40px 40px
border-radius: 0 0 40px 40px
.blood-chart-bar-percentage
font-size: 14px
text-align: center
margin-top: 16px
.waves
position: absolute
top: -8px
top: -10px
width: 100%
height: 10px
.blood-chart-element-footer
src/components/Navbar.vue
+29 -8
View File
@@ -1,9 +1,10 @@
<script setup>
import { storeToRefs } from "pinia";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { useWalletStore } from "@/stores/wallet";
const walletStore = useWalletStore();
const { connected, address } = storeToRefs(walletStore);
const isMobile = inject("isMobile");
const showNavbar = ref(true);
const lastScrollPosition = ref(0);
@@ -37,7 +38,7 @@ onBeforeUnmount(() => {
</router-link>
</div>
<div class="navbar-text">Bloodline</div>
<div class="navbar-center">
<div class="navbar-center" v-if="!isMobile">
<div class="navbar-social-links">
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
@@ -60,8 +61,13 @@ onBeforeUnmount(() => {
</div>
</div>
<div class="navbar-end">
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
<span v-else> {{ address }}</span>
<div v-if="!isMobile">
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
<span v-else> {{ address }}</span>
</div>
<div v-else class="hamburger-menu">
<font-awesome-icon :icon="['fas', 'bars']" />
</div>
</div>
</div>
</div>
@@ -78,7 +84,9 @@ header
width: 100%
transform: translate3d(0,0,0)
transition: transform .3s ease,visibility 0s .3s linear
height: 128px
height: 82px
@media (min-width: 992px)
height: 128px
&.navbar--hidden
transform: translate3d(0,-100%,0)
.navbar-inner
@@ -89,10 +97,18 @@ header
align-items: center
@media (min-width: 992px)
padding: 16px 24px
.navbar-icon
img
height: 50px
width: 50px
.navbar-text
font-family: 'Vampire', sans-serif
font-size: 64px
font-size: 36px
margin-left: 16px
letter-spacing: 0.138em
line-height: 73.107px
@media (min-width: 992px)
font-size: 64px
.navbar-center
display: flex
margin-left: auto
@@ -105,10 +121,15 @@ header
border-radius: 14px
background-color: #0F0F0F
display: flex
&:hover,&:active,&:focus
background-color: lighten(#0F0F0F, 10%)
cursor: pointer
.social-bloodline-badge-icon
margin-right: 8px
.navbar-end
display: flex
flex: 0 0 200px
justify-content: flex-end
margin-left: auto
.hamburger-menu
color: var(--purple)
font-size: 42px
</style>
src/components/RewardsWrapper.vue
+53
View File
@@ -0,0 +1,53 @@
<template>
<div class="rewards-wrapper">
<div class="rewards-header">
<div class="rewards-header-title">
{{ props.title }}
</div>
<div class="rewards-header-info">{{ props.info }}</div>
</div>
<div class="rewards-sacrifice-wrapper bloodline-border bloodline-border--variant1">
<div class="rewards-body">
<div class="rewards-coin">$BLOOD</div>
<div class="rewards-amount">0</div>
</div>
<img class="bloodline-token" :src="props.image" alt="vampir" />
</div>
</div>
</template>
<script setup>
const props = defineProps({
title: String,
info: String,
image: String,
});
</script>
<style lang="sass">
.rewards-header
font-size: 16px
padding: 8px
display: flex
@media (min-width: 992px)
font-size: 24px
.rewards-header-info
margin-left: auto
.rewards-sacrifice-wrapper, .rewards-clan-wrapper
display: flex
.rewards-body
align-self: center
.rewards-coin
font-size: 16px
@media (min-width: 992px)
font-size: 24px
.rewards-amount
font-size: 24px
margin-top: 8px
@media (min-width: 992px)
font-size: 40px
margin-top: 0
img
margin-left: auto
align-self: center
</style>
src/components/SacrificeToken.vue
+185 -130
View File
@@ -1,76 +1,87 @@
<template>
<div class="sacrifice-wrapper card bloodline-wrapper">
{{ activeToken.allowance }}
<div class="sacrifice-headline">Select Token</div>
<div class="sacrifice-select-tokens">
<div class="sacrifice-tokens">
<div
class="sacrifice-token"
:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
v-for="token in props.data"
:key="token.contractAddress"
@click="tokenStore.changeActiveToken(token)"
>
{{ token.name }}
</div>
</div>
</div>
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
<div class="sacrifice-from-wrapper bloodline-border">
<div class="sarcrifice-from-input">
<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" /><img
src="@/assets/img/vampir.png"
alt="vampir"
/>
</div>
<div class="value-adder">
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000)">+1m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
<div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">Max</div>
</div>
</div>
<div class="sacrifice-divider bloodline-devider">
<font-awesome-icon :icon="['fas', 'arrow-down']" />
</div>
<div class="sacrifice-to-wrapper bloodline-border">
<div class="sarcrifice-from-input">
<div class="sacrifice-to-output">
<div class="sacrifice-to-output-coin">{{ activeToken.name }}</div>
<div class="sacrifice-to-output-rewards">{{ output }}</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
</div>
<div class="sacrifice-fees-info-wrapper">
<div class="sacrifice-fees-img">
<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
</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>
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
</div>
</div>
<div class="sacrifice-buttons-function-wrapper">
<div v-if="connected">
<div class="sacrifice-inner">
<div class="sacrifice-headline">Select Sacrifice</div>
<div class="sacrifice-select-tokens">
<div class="sacrifice-tokens">
<div
class="btn btn-immortal"
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
@click="approvalData = tokenStore.sacrificeToken(1)"
class="sacrifice-token"
:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
v-for="token in props.data"
:key="token.contractAddress"
@click="tokenStore.changeActiveToken(token)"
>
<font-awesome-icon v-if="loading" icon="spinner" spin />
Sacrifce {{ activeToken.name }}
</div>
<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
Approve {{ activeToken.name }}
<div class="sacrifice-token-logo">
<img v-if="isMobile" :src="token.logoMobile" alt="token logo" />
<img v-if="!isMobile" :src="token.logo" alt="token logo" />
</div>
<div class="sacrifice-token-name">{{ token.name }}</div>
</div>
</div>
<div v-else>
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
</div>
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1">
<div class="sarcrifice-from-input">
<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" />
<div class="sacrifice-logo">
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
</div>
<div class="value-adder">
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
<!-- <div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">
Max
</div> -->
</div>
</div>
<div class="sacrifice-divider bloodline-devider">
<font-awesome-icon :icon="['fas', 'arrow-down']" />
</div>
<div class="sacrifice-to-wrapper bloodline-border bloodline-border--variant1">
<div class="sarcrifice-from-input">
<div class="sacrifice-to-output">
<div class="sacrifice-to-output-coin">$BLOOD</div>
<div class="sacrifice-to-output-rewards">{{ output }}</div>
</div>
<div class="sacrifice-logo">
<img :src="activeToken.vamp.logo" :alt="activeToken.vamp.name" />
</div>
</div>
</div>
<div class="sacrifice-fees-info-wrapper">
<div class="sacrifice-fees-img">
<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
</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>
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
</div>
</div>
<div class="sacrifice-buttons-function-wrapper">
<div v-if="connected">
<div
class="btn btn-immortal"
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
@click="approvalData = tokenStore.sacrificeToken(1)"
>
<font-awesome-icon v-if="loading" icon="spinner" spin />
Sacrifce {{ activeToken.name }}
</div>
<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
Approve {{ activeToken.name }}
</div>
</div>
<div v-else>
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
</div>
</div>
</div>
</div>
@@ -78,11 +89,12 @@
</template>
<script setup>
import { ref, defineProps, watch } from "vue";
import { ref, defineProps, watch, inject } from "vue";
import { useWalletStore } from "@/stores/wallet";
import { useTokenStore } from "@/stores/tokens";
import { storeToRefs } from "pinia";
import Helper from "@/utils/helper.js";
const isMobile = inject("isMobile");
const walletStore = useWalletStore();
const { contract, connected } = storeToRefs(walletStore);
@@ -115,6 +127,10 @@ async function test(e) {
function addTokens(value) {
tokenNumber.value = tokenNumber.value + value;
}
function getImageUrl(url) {
return new URL(url, import.meta.url).href;
}
</script>
<style lang="sass">
@@ -125,72 +141,112 @@ function addTokens(value) {
margin-left: auto
margin-right: auto
background-color: var(--primary)
.sacrifice-headline
text-align: center
font-size: 36px
.sacrifice-select-tokens
padding: 24px
display: flex
margin-bottom: 32px
.sacrifice-tokens
display: flex
width: 100%
justify-content: space-evenly
.sacrifice-token
width: 132px
height: 132px
border-radius: 16px
padding: 12px
border: 1px solid lightgrey
cursor: pointer
background-color: var(--tertiary)
&:hover,
&:active,
&:focus
background-color: var(--tertiary-dark)
&.sacrifice-token--active
background-color: var(--tertiary-dark)
.sacrifice-buttons-function-wrapper
text-align: center
display: flex
justify-content: center
margin-top: 24px
.btn
padding: 16px 64px
.sacrifice-fees-info-wrapper
display: flex
border: 2px dashed var(--grey)
border-radius: 16px
padding: 16px 24px
margin-top: 24px
.sacrifice-fees-img
flex: 0 0 15%
.sacrifice-fees-body
flex: 1 1 auto
.sacrifice-fees-body-header
font-size: 24px
.sacrifice-inner
padding: 48px 24px
@media (min-width: 992px)
padding: 48px 64px
.sacrifice-headline
text-align: center
font-size: 24px
margin-bottom: 32px
@media (min-width: 992px)
font-size: 36px
.sacrifice-select-tokens
display: flex
margin-bottom: 32px
.sacrifice-tokens
display: flex
width: 100%
justify-content: space-between
@media (min-width: 992px)
justify-content: space-evenly
.sacrifice-token
border-radius: 16px
padding: 12px
cursor: pointer
background-color: #0F0F0F
text-align: center
@media (min-width: 992px)
padding: 0
background-color: unset
&:hover,
&:active,
&:focus
background-color: var(--tertiary-dark)
&.sacrifice-token--active
background-color: var(--tertiary-dark)
.sacrifice-token-name
padding: 5px 26px
font-size: 16px
@media (min-width: 992px)
font-size: 24px
.sacrifice-buttons-function-wrapper
text-align: center
justify-content: center
margin-top: 24px
display: block
@media (min-width: 992px)
display: flex
flex-direction: row
justify-content: space-between
.btn
padding: 16px 64px
.sacrifice-fees-info-wrapper
display: flex
border: 2px dashed var(--grey)
color: var(--grey)
border-radius: 16px
padding: 16px 24px
margin-top: 24px
font-size: 16px
.sacrifice-fees-img
flex: 0 0 15%
.sacrifice-fees-body
flex: 1 1 auto
.sacrifice-fees-body-header
display: flex
flex-direction: row
justify-content: space-between
margin-bottom: 8px
@media (min-width: 992px)
font-size: 24px
margin-bottom: 0
.sacrifice-from-to-wrapper
.sacrifice-from-wrapper,.sacrifice-to-wrapper
.sarcrifice-from-input
display: flex
margin-bottom: 8px
height: 60px
// height: 60px
input
width: 100%
font-size: 32px
height: 45px
font-size: 24px
border-radius: 16px
padding: 0 16px
@media (min-width: 992px)
font-size: 32px
height: auto
.sacrifice-logo
margin-left: 16px
img
margin-left: 16px
width: 45px
height: 45px
border-radius: 50%
@media (min-width: 992px)
height: auto
width: auto
.sacrifice-to-output
flex: 1 1 auto
text-align: left
.sacrifice-to-output-coin
font-size: 24px
font-size: 16px
@media (min-width: 992px)
font-size: 24px
.sacrifice-to-output-rewards
font-size: 42px
font-size: 24px
@media (min-width: 992px)
font-size: 42px
.value-adder
display: flex
gap: 6px
@@ -200,17 +256,16 @@ function addTokens(value) {
&:active,
&:focus
background-color: var(--secondary)
border: 1px solid var(--secondary-dark)
cursor: pointer
.sacrifice-adder-balance
margin-left: auto
.sacrifice-adder-max
margin-left: 12px
color: red
&:hover,
&:focus,
&:active
color: darken(red, 10%)
transform: scale(1.1)
transition: transform 0s
// .sacrifice-adder-balance
// margin-left: auto
// .sacrifice-adder-max
// margin-left: 12px
// color: red
// &:hover,
// &:focus,
// &:active
// color: darken(red, 10%)
// transform: scale(1.1)
// transition: transform 0s
</style>
src/components/TokenClaim.vue
+32 -36
View File
@@ -1,57 +1,53 @@
<template>
<div class="claim bloodline-border">
<div class="rewards-wrapper">
<div class="rewards-headline">Sacrafice Reward</div>
<div class="rewards-sacrifice-wrapper bloodline-border">
<div class="rewards-body">
<div class="rewards-coin">$BLOOD</div>
<div class="rewards-amount">0</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
<div class="rewards-wrapper" v-if="!isMobile">
<rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
<div class="rewards-divider bloodline-devider">
<font-awesome-icon icon="fa-solid fa-plus" />
</div>
<div class="rewards-headline">Clan Reward</div>
<div class="rewards-clan-wrapper bloodline-border">
<div class="rewards-body">
<div class="rewards-coin">$BLOOD</div>
<div class="rewards-amount">0</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
<rewards-wrapper title="Clan Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
<div class="claim-button">
<div class="btn btn-immortal">Claim</div>
</div>
</div>
<div class="rewards-list" v-else>
<rewards-wrapper
title="Total Sacrafice Reward"
coin="$BLOOD"
amount="0"
image="/src/assets/img/vampir.png"
/>
<rewards-wrapper
title="Total Stake Reward"
coin="$BLOOD"
amount="0"
info="max: 312m"
image="/src/assets/img/vampir.png"
/>
<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
</div>
</div>
</template>
<script setup></script>
<script setup>
import RewardsWrapper from "@/components/RewardsWrapper.vue";
import { inject } from "vue";
const isMobile = inject("isMobile");
</script>
<style lang="sass">
.claim
display: flex
padding: 32px 20px
flex-direction: column
padding: 32px 40px
@media (min-width: 992px)
padding: 32px 40px
.claim-button
text-align: center
margin-top: 32px
.rewards-wrapper
width: 100%
.rewards-headline
font-size: 24px
padding: 0 0 4px 8px
.rewards-divider
text-align: center
.rewards-sacrifice-wrapper, .rewards-clan-wrapper
display: flex
.rewards-body
align-self: center
.rewards-coin
font-size: 24px
.rewards-amount
font-size: 40px
img
margin-left: auto
.rewards-wrapper
margin-bottom: 16px
.rewards-divider
text-align: center
</style>
src/helper/helper.js
+4
View File
@@ -0,0 +1,4 @@
export function getImageUrl(url) {
return new URL(url, import.meta.url).href;
}
src/main.js
+2 -2
View File
@@ -14,12 +14,12 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faArrowDown, faSpinner ,faPlus } from "@fortawesome/free-solid-svg-icons";
import { faArrowDown, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars } from "@fortawesome/free-solid-svg-icons";
import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
/* add icons to the library */
library.add(faArrowDown, faDiscord, faTwitter, faTelegram, faSpinner, faPlus);
library.add(faArrowDown, faDiscord, faTwitter, faTelegram, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars);
const app = createApp(App)
src/stores/memeburner.js
+18
View File
@@ -0,0 +1,18 @@
import { defineStore } from "pinia";
import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
export const useMemeburnerStore = defineStore("memeburner", {
state: () => ({
config: MemeBurnerJson,
contract: null,
}),
getters: {},
actions: {
async getCurrentRound() {
return await this.contract.methods.currentRound().call();
},
async getGoal(roundnumber) {
return await this.contract.methods.rounds(roundnumber).call();
},
},
});
src/stores/rewardlocker.js
+24
View File
@@ -0,0 +1,24 @@
import { defineStore } from "pinia";
import RewardLockerJson from "@/assets/contracts/RewardLocker.json";
export const useRewardLockerStore = defineStore("rewardlocker", {
state: () => ({
config: RewardLockerJson,
contract: null,
}),
getters: {},
actions: {
/*
* @param {*} walletAddress
* @param {*} roundNumber
* @param {*} tokenAddress
* @returns Rewards for specific token and specific round
*/
async getRewards(walletAddress, roundNumber, tokenAddress) {
return await this.contract.methods.rewards(walletAddress, roundNumber, tokenAddress).call();
},
async lastCompletedRound() {
return await this.contract.methods.lastCompletedRound().call();
},
},
});
src/stores/tokens.js
+68 -44
View File
@@ -397,28 +397,52 @@ export const useTokenStore = defineStore("token", {
// ],
// },
{
name: "Meme1",
name: "$PEPE",
logo: "/src/assets/img/token/pepe.png",
logoMobile: "/src/assets/img/token/pepeMobile.png",
vamp: {
logo: "/src/assets/img/token/pepevamp.png",
name: "$PEPE Vamp Token",
},
backgroundColor: "#4b8501",
abi: Meme1Json.abi,
contractAddress: Meme1Json.contractAddress,
},
{
name: "Meme2",
name: "$SHIB",
logo: "/src/assets/img/token/shib.png",
logoMobile: "/src/assets/img/token/shibMobile.png",
vamp: {
logo: "/src/assets/img/token/shibvamp.png",
name: "$SHIBA Vamp Token",
},
abi: Meme2Json.abi,
contractAddress: Meme2Json.contractAddress,
},
{
name: "$ELON",
logo: "/src/assets/img/token/elon.png",
logoMobile: "/src/assets/img/token/elonMobile.png",
vamp: {
logo: "/src/assets/img/token/shibvamp.png",
name: "$ELON Vamp Token",
},
abi: null,
contractAddress: null,
},
],
activeToken: {
address: null,
abi: null,
balance: null,
contract: null,
allowance: null,
contract: null,
allowance: null,
},
loading: false,
memeBurner: {
config: MemeBurnerJson,
contract: null,
},
loading: false,
memeBurner: {
config: MemeBurnerJson,
contract: null
}
}),
getters: {},
actions: {
@@ -428,31 +452,32 @@ export const useTokenStore = defineStore("token", {
this.contract = new web3.eth.Contract(token.abi, token.contractAddress);
const walletStore = useWalletStore();
if (walletStore.connected) {
this.activeToken.balance = await walletStore.getTokenBalance(token);
this.activeToken.allowance = await this.allowance();
this.activeToken.balance = await walletStore.getTokenBalance(token);
this.activeToken.allowance = await this.allowance();
}
},
async allowance() {
const walletStore = useWalletStore();
console.log("walletStore.address", walletStore.address);
const allowance = await this.contract.methods.allowance(walletStore.address, MemeBurnerJson.contractAddress).call();
console.log("allowance", allowance);
return allowance;
},
async approveToken(amount) {
},
async allowance() {
const walletStore = useWalletStore();
this.loading = true;
console.log("walletStore.address", walletStore.address);
const allowance = await this.contract.methods
.allowance(walletStore.address, MemeBurnerJson.contractAddress)
.call();
console.log("allowance", allowance);
return allowance;
},
async approveToken(amount) {
const walletStore = useWalletStore();
this.loading = true;
var approve = await this.contract.methods
.approve(this.memeBurner.config.contractAddress, amount)
.send({ from: walletStore.address });
console.log("approve", approve);
this.loading = false;
return approve;
.send({ from: walletStore.address });
console.log("approve", approve);
this.loading = false;
return approve;
},
async sacrificeToken(amount) {
try {
this.loading = true;
async sacrificeToken(amount) {
try {
this.loading = true;
console.log("this.activeToken.", this.activeToken.contractAddress);
const walletStore = useWalletStore();
console.log("walletStore.address", walletStore.address);
@@ -460,24 +485,23 @@ export const useTokenStore = defineStore("token", {
.sacrificeMeme(this.activeToken.contractAddress, "400000000000000000")
.send({ from: walletStore.address });
console.log("reward", reward);
} catch (error) {
error.log(error);
} finally {
this.loading = false;
}
},
async getRewardsFor(amount) {
} catch (error) {
error.log(error);
} finally {
this.loading = false;
}
},
async getRewardsFor(amount) {
const contractsStore = useContractStore();
var rewards = await contractsStore.list.memeBurnerPublic.methods
var rewards = await contractsStore.list.memeBurnerPublic.methods
.getRewardFor(this.activeToken.contractAddress, amount)
.call();
return rewards
},
getTokenContract(token) {
console.log("token", token);
.call();
return rewards;
},
getTokenContract(token) {
console.log("token", token);
const contractAddress = token.contractAddress;
console.log("contractAddress", contractAddress);
console.log("contractAddress", contractAddress);
const activeToken = this.token.find((obj) => obj.contractAddress === contractAddress);
console.log("activeToken", activeToken);
const web3 = new Web3(window.ethereum);
src/stores/wallet.js
-1
View File
@@ -9,7 +9,6 @@ export const useWalletStore = defineStore("wallet", {
address: null,
}),
getters: {
double: (state) => state.count * 2,
},
actions: {
increment() {
src/views/HomeView.vue
+162 -19
View File
@@ -1,4 +1,5 @@
<script setup>
import { ref, computed, inject } from "vue";
import { storeToRefs } from "pinia";
import SacrificeToken from "@/components/SacrificeToken.vue";
import BloodChart from "@/components/BloodChart.vue";
@@ -8,11 +9,36 @@ import TokenClaim from "@/components/TokenClaim.vue";
import { useTokenStore } from "@/stores/tokens";
const tokenStore = useTokenStore();
const { token } = storeToRefs(tokenStore);
import { Navigation } from "swiper";
// Import Swiper Vue.js components
const swiperInstance = ref();
import { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
const modules = [Navigation];
const isMobile = inject("isMobile");
function onSwiper(swiper) {
swiperInstance.value = swiper;
}
const rounds = [{ round: 1 }, { round: 2 }, { round: 3 }];
const currentSlide = ref(1);
const currentIndex = computed(() => {
return rounds.findIndex((obj) => obj.round === currentSlide.value);
});
function prevSlide() {
if (currentSlide.value !== rounds[0].round) {
currentSlide.value--;
}
}
function nextSlide() {
if (currentSlide.value < rounds[rounds.length - 1].round) {
currentSlide.value++;
}
}
// let web3 = new Web3(
// "https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
// );
@@ -31,28 +57,51 @@ import "swiper/css/navigation";
<sacrifice-token :data="token"></sacrifice-token>
</section>
<swiper :slides-per-view="1" :navigation="true" :space-between="50">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
</swiper>
<div class="container section-header-container">
<h2>Bloodline Cycle</h2>
<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.
</div>
<section id="cycle-section" class="container">
<swiper
:slides-per-view="1"
:navigation="true"
:space-between="50"
@swiper="onSwiper"
:modules="modules"
class="cycle-slider"
>
<swiper-slide>Cycle 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
</swiper>
<div class="slider-wrapper">
<font-awesome-icon
:class="{ 'slider-prev': true, disabled: currentSlide === rounds[0].round }"
@click="prevSlide"
:icon="['fas', 'caret-left']"
/>
<div class="slider-text">Cycle {{ currentSlide }}</div>
<font-awesome-icon
:class="{ 'slider-next': true, disabled: currentSlide === rounds[rounds.length - 1].round }"
@click="nextSlide"
:icon="['fas', 'caret-right']"
/>
</div>
<div class="cycle card bloodline-wrapper">
<token-claim></token-claim>
<div>
<h2>Bloodline Clan</h2>
<div class="bloodline-inner">
<token-claim></token-claim>
</div>
<div class="bloodline-clan">
<h3>Bloodline Clan</h3>
<p>
Win extra rewards for you and your clan. Increase the strength of your bloodline by
sacrificing more memes.
</p>
<table class="bonus-table">
<table class="bonus-table" v-if="!isMobile">
<tbody>
<tr>
<th scope="row">1st</th>
@@ -68,9 +117,34 @@ import "swiper/css/navigation";
</tr>
</tbody>
</table>
<div class="bloodline-container" v-else>
<div class="bloodline-border purple">
Get up to +100% Clan Bonus <br />on your sacrifice.
</div>
</div>
<div class="blood-chart">
<blood-chart></blood-chart>
</div>
<div class="cycle-end-wrapper">
<div class="cycle-end-inner">
<h2>Cycle End</h2>
<div class="cycle-end-text">A cycle ends when only one of these goals is reached.</div>
<div class="bloodline-border">
<table>
<tr>
<td>Sacrifice:</td>
<td class="divider"></td>
<td>200b $BLOOD</td>
</tr>
<tr>
<td>Time left:</td>
<td class="divider"></td>
<td>23h 59m</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
@@ -83,7 +157,8 @@ import "swiper/css/navigation";
<div class="card">
<h2>Tokenomics</h2>
<p>100% clan owned. No team %, no pre-mine</p>
<img src="@/assets/img/tokenomics.png" alt="tokenomics" />
<img v-if="isMobile" src="@/assets/img/tokenomics_footer.png" alt="tokenomics" />
<img v-else src="@/assets/img/tokenomics.png" alt="tokenomics" />
</div>
</section>
</div>
@@ -92,17 +167,26 @@ import "swiper/css/navigation";
<style lang="sass">
.blood-chart
margin-top: 56px
display: flex
justify-content: center
.bloodline-wrapper
padding: 48px 64px
margin-bottom: 80px
.header-text
font-size: 64px
line-height: 80px
font-weight: 600
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
font-size: 32px
text-align: center
margin-top: 64px
margin-bottom: 100px
@media (min-width: 992px)
font-size: 64px
margin-top: 0px
line-height: unset
text-shadow: unset
line-height: 80px
font-weight: 600
.chart-wrapper-coin
display: flex
justify-content: space-evenly
@@ -126,6 +210,7 @@ import "swiper/css/navigation";
th
padding-right: 16px
#tokenomics
background-color: var(--darkgrey)
>div
text-align: center
img
@@ -149,4 +234,62 @@ import "swiper/css/navigation";
margin-top: auto
text-align: center
padding-top: 10px
.cycle-slider
text-align: center
.swiper-button-next
right: 30%
.swiper-button-prev
left: 30%
.slider-wrapper
display: flex
justify-content: center
font-size: 24px
user-select: none
.slider-text
margin: 0 24px
margin-top: auto
margin-bottom: auto
.slider-prev, .slider-next
color: #3B0067
font-size: 40px
cursor: pointer
&.disabled
opacity: .35
pointer-events: none
.section-header-container
text-align: center
font-size: 24px
margin-top: 64px
margin-bottom: 64px
@media (min-width: 992px)
width: 655px
.bloodline-wrapper
.bloodline-inner
padding: 4px
@media (min-width: 992px)
padding: 20px
.bloodline-clan
text-align: center
.cycle-end-wrapper
.cycle-end-inner
text-align: center
font-size: 24px
padding: 0 24px 48px 24px
.cycle-end-text
margin-bottom: 32px
table
width: 100%
tr
td
text-align: left
&.divider
width: 10px
h2
font-size: 40px
</style>