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> <script setup>
import { onMounted } from "vue"; import { onMounted, onUnmounted, provide, ref } from "vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import Web3 from "web3"; import Web3 from "web3";
@@ -9,10 +9,37 @@ import { useWalletStore } from "@/stores/wallet";
const walletStore = useWalletStore(); const walletStore = useWalletStore();
import { useTokenStore } from "@/stores/tokens"; import { useTokenStore } from "@/stores/tokens";
import { useContractStore } from "@/stores/contracts"; import { useContractStore } from "@/stores/contracts";
import { useMemeburnerStore } from "@/stores/memeburner";
import { useRewardLockerStore } from "@/stores/rewardlocker";
const tokenStore = useTokenStore(); const tokenStore = useTokenStore();
const contractStore = useContractStore(); const contractStore = useContractStore();
const memeBurnerStore = useMemeburnerStore();
const rewardLockerStore = useRewardLockerStore();
const { memeBurner } = storeToRefs(tokenStore); const { memeBurner } = storeToRefs(tokenStore);
const { list } = storeToRefs(contractStore); 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 () => { onMounted(async () => {
var test = await walletStore.isConnected(); var test = await walletStore.isConnected();
@@ -25,11 +52,36 @@ onMounted(async () => {
memeBurner.value.config.abi, memeBurner.value.config.abi,
memeBurner.value.config.contractAddress 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); console.log("list", list.value);
const currentRound = await contract.methods.currentRound().call(); const currentRound = await contract.methods.currentRound().call();
const rounds = await contract.methods.rounds("0x0e349D42C125acA39ea58024FFC23ED0fE5feE32").call(); const rounds = await contract.methods.rounds("0x0e349D42C125acA39ea58024FFC23ED0fE5feE32").call();
console.log("currentRound", currentRound); console.log("currentRound", currentRound);
console.log("rounds", rounds); 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> </script>
@@ -38,6 +90,22 @@ onMounted(async () => {
<div class="main"> <div class="main">
<RouterView /> <RouterView />
</div> </div>
<div class="footer">
<div class="footer-inner">
$BLOOD is 100%<br />
community owned.<br />
No team %, no pre-mine.
</div>
</div>
</template> </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", "contractName": "LiquidityOwner",
"contractAddress": "0x0ce1d955f2a2658d6ca1CF61Fa300234fD8A262c", "contractAddress": "0xF58FC44A2862335F3577253EC544488006aF676A",
"abi": [ "abi": [
{ {
"inputs": [ "inputs": [
@@ -83,7 +83,7 @@
"inputs": [ "inputs": [
{ {
"internalType": "uint256[]", "internalType": "uint256[]",
"name": "liquidityTokenIds", "name": "tokenIds",
"type": "uint256[]" "type": "uint256[]"
} }
], ],
@@ -198,7 +198,7 @@
"inputs": [ "inputs": [
{ {
"internalType": "uint256[]", "internalType": "uint256[]",
"name": "positionsToCancel", "name": "tokenIds",
"type": "uint256[]" "type": "uint256[]"
}, },
{ {
@@ -240,22 +240,22 @@
"inputs": [ "inputs": [
{ {
"internalType": "address", "internalType": "address",
"name": "", "name": "operator",
"type": "address" "type": "address"
}, },
{ {
"internalType": "address", "internalType": "address",
"name": "", "name": "from",
"type": "address" "type": "address"
}, },
{ {
"internalType": "uint256", "internalType": "uint256",
"name": "", "name": "tokenId",
"type": "uint256" "type": "uint256"
}, },
{ {
"internalType": "bytes", "internalType": "bytes",
"name": "", "name": "data",
"type": "bytes" "type": "bytes"
} }
], ],
@@ -267,7 +267,7 @@
"type": "bytes4" "type": "bytes4"
} }
], ],
"stateMutability": "pure", "stateMutability": "nonpayable",
"type": "function" "type": "function"
}, },
{ {
src/assets/contracts/MemeBurner.json
+30 -54
View File
@@ -1,6 +1,6 @@
{ {
"contractName": "MemeBurner", "contractName": "MemeBurner",
"contractAddress": "0x6eEAe97975e156400DD1DDD8eFc4CcB167BaAFC3", "contractAddress": "0x5c7077b0424c0e425B16363AdA59f1D72914C5c5",
"abi": [ "abi": [
{ {
"inputs": [ "inputs": [
@@ -146,6 +146,35 @@
"name": "MemeSacrificed", "name": "MemeSacrificed",
"type": "event" "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": [ "inputs": [
{ {
@@ -177,59 +206,6 @@
"stateMutability": "view", "stateMutability": "view",
"type": "function" "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": [], "inputs": [],
"name": "liquidityAmountLimit", "name": "liquidityAmountLimit",
src/assets/contracts/MemeToken.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"contractName": "MemeToken", "contractName": "MemeToken",
"contractAddress": "0xeC73Ec89897a36E9Ca36B2190964bBd8C46748AD", "contractAddress": "0x0e349D42C125acA39ea58024FFC23ED0fE5feE32",
"abi": [ "abi": [
{ {
"inputs": [ "inputs": [
src/assets/contracts/RewardLocker.json
+116 -274
View File
@@ -1,6 +1,6 @@
{ {
"contractName": "RewardLocker", "contractName": "RewardLocker",
"contractAddress": "0x3bEc26159dbA0A32210eaDF6A938F1BbE8bfDAA0", "contractAddress": "0x6749F75Ece2755d38f209Da1cBab07A1caD69554",
"abi": [ "abi": [
{ {
"inputs": [ "inputs": [
@@ -15,7 +15,7 @@
}, },
{ {
"inputs": [], "inputs": [],
"name": "MemeAltarAlreadyInitialized", "name": "MemeBurnerAlreadyInitialized",
"type": "error" "type": "error"
}, },
{ {
@@ -23,21 +23,6 @@
"name": "MemeTokenAlreadyInitialized", "name": "MemeTokenAlreadyInitialized",
"type": "error" "type": "error"
}, },
{
"inputs": [],
"name": "RoundIsNotCompletedYet",
"type": "error"
},
{
"inputs": [],
"name": "TooEarlyToUnstake",
"type": "error"
},
{
"inputs": [],
"name": "Unsynchronized",
"type": "error"
},
{ {
"anonymous": false, "anonymous": false,
"inputs": [ "inputs": [
@@ -48,7 +33,7 @@
"type": "address" "type": "address"
}, },
{ {
"indexed": true, "indexed": false,
"internalType": "uint256", "internalType": "uint256",
"name": "amount", "name": "amount",
"type": "uint256" "type": "uint256"
@@ -57,56 +42,6 @@
"name": "ClaimedReward", "name": "ClaimedReward",
"type": "event" "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, "anonymous": false,
"inputs": [ "inputs": [
@@ -171,29 +106,23 @@
"type": "event" "type": "event"
}, },
{ {
"anonymous": false,
"inputs": [ "inputs": [
{ {
"indexed": true,
"internalType": "address", "internalType": "address",
"name": "unstaker", "name": "_burnedToken",
"type": "address" "type": "address"
}, }
],
"name": "claim",
"outputs": [
{ {
"indexed": true,
"internalType": "uint256", "internalType": "uint256",
"name": "unstakeRound", "name": "claimedAmount",
"type": "uint256"
},
{
"indexed": true,
"internalType": "uint256",
"name": "unstakedAmount",
"type": "uint256" "type": "uint256"
} }
], ],
"name": "UnstakeOrdered", "stateMutability": "nonpayable",
"type": "event" "type": "function"
}, },
{ {
"inputs": [ "inputs": [
@@ -204,7 +133,7 @@
}, },
{ {
"internalType": "address[]", "internalType": "address[]",
"name": "_sacrificedTokens", "name": "_burnedTokens",
"type": "address[]" "type": "address[]"
} }
], ],
@@ -219,6 +148,81 @@
"stateMutability": "nonpayable", "stateMutability": "nonpayable",
"type": "function" "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": [ "inputs": [
{ {
@@ -247,7 +251,31 @@
}, },
{ {
"internalType": "address", "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" "type": "address"
} }
], ],
@@ -266,31 +294,7 @@
"inputs": [ "inputs": [
{ {
"internalType": "address", "internalType": "address",
"name": "beneficiary", "name": "_memeBurner",
"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",
"type": "address" "type": "address"
}, },
{ {
@@ -319,7 +323,7 @@
}, },
{ {
"inputs": [], "inputs": [],
"name": "memeAltar", "name": "memeBurner",
"outputs": [ "outputs": [
{ {
"internalType": "address", "internalType": "address",
@@ -343,19 +347,6 @@
"stateMutability": "view", "stateMutability": "view",
"type": "function" "type": "function"
}, },
{
"inputs": [],
"name": "orderUnstake",
"outputs": [
{
"internalType": "uint256",
"name": "unstakeRound",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "function"
},
{ {
"inputs": [ "inputs": [
{ {
@@ -365,7 +356,7 @@
}, },
{ {
"internalType": "address[]", "internalType": "address[]",
"name": "sacrificableTokens", "name": "burnableTokens",
"type": "address[]" "type": "address[]"
} }
], ],
@@ -389,7 +380,7 @@
}, },
{ {
"internalType": "address", "internalType": "address",
"name": "_sacrificedToken", "name": "_burnedToken",
"type": "address" "type": "address"
}, },
{ {
@@ -477,11 +468,6 @@
"name": "roundCompleted", "name": "roundCompleted",
"type": "bool" "type": "bool"
}, },
{
"internalType": "uint256",
"name": "totalDefaultRewards",
"type": "uint256"
},
{ {
"internalType": "uint256", "internalType": "uint256",
"name": "totalRewards", "name": "totalRewards",
@@ -490,150 +476,6 @@
], ],
"stateMutability": "view", "stateMutability": "view",
"type": "function" "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 .bloodline-devider
font-size: 42px font-size: 42px
margin: 24px 0
text-align: center text-align: center
margin: 16px 0
@media (min-width: 992px)
margin: 24px 0
.bloodline-border .bloodline-border
padding: 24px 32px padding: 16px
border: 4px solid #000000
border-radius: 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 .bloodline-badge
padding: 8px 16px 8px 16px padding: 8px 16px 8px 16px
@@ -30,6 +41,20 @@
border-color: rgba(var(--v-border-color),var(--v-border-opacity)) border-color: rgba(var(--v-border-color),var(--v-border-opacity))
border-style: solid border-style: solid
border-width: 0 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) 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 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
&.btn-immortal &.btn-immortal
background-color: $red
background-color: $purple
color: $button-color color: $button-color
font-size: 24px font-size: 24px
padding: 16px 24px padding: 16px 24px
gap: 8px gap: 8px
border-radius: 14px border-radius: 14px
@media (min-width: 992px)
background-color: $red
&:hover,&:focus,&:active &:hover,&:focus,&:active
background-color: lighten($button-background-color, 10%), background-color: lighten($button-background-color, 10%),
color: darken($button-color, 10%), color: darken($button-color, 10%),
src/assets/sass/main.sass
+12 -9
View File
@@ -37,18 +37,12 @@ body
margin-top: auto margin-top: auto
.container .container
padding-right: 15px
padding-left: 15px
margin-right: auto margin-right: auto
margin-left: auto margin-left: auto
@media (min-width: 992px) @media (min-width: 992px)
max-width: 800px max-width: 800px
.section-header-container padding-right: 15px
width: 655px padding-left: 15px
text-align: center
font-size: 24px
margin-top: 64px
margin-bottom: 64px
h1 h1
font-weight: 700 font-weight: 700
@@ -57,7 +51,16 @@ h1
@media (min-width: 992px) @media (min-width: 992px)
font-size: 60px font-size: 60px
@media (min-width: 1200px) @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 .page-head
margin-bottom: 80px margin-bottom: 80px
.page-body .page-body
src/assets/sass/variables.sass
+5 -1
View File
@@ -13,8 +13,9 @@ $black: #0F0F0F
$grey: #808080 $grey: #808080
$red: #8B0000 $red: #8B0000
$purple: #4B0082 $purple: #4B0082
$midnight-black: #0F0F0F
$darkgrey: #202020 $darkgrey: #202020
$grey2: #2D2D2D
$button-color: $white $button-color: $white
$button-background-color: $black $button-background-color: $black
@@ -29,8 +30,11 @@ $button-background-color: $black
--tertiary-light: #{$tertiary-light} --tertiary-light: #{$tertiary-light}
--tertiary-dark: #{$tertiary-dark} --tertiary-dark: #{$tertiary-dark}
--grey: #{$grey} --grey: #{$grey}
--grey2: #{$grey2}
--purple: #{$purple} --purple: #{$purple}
--blood-color: #{$red} --blood-color: #{$red}
--midnight-black: #{$midnight-black}
--darkgrey: #{$darkgrey}
// :root // :root
// --font-size-text: 16px // --font-size-text: 16px
// --font-size-title: 32px // --font-size-title: 32px
src/components/BloodChart.vue
+25 -7
View File
@@ -2,7 +2,9 @@
<div class="blood-chart-wrapper"> <div class="blood-chart-wrapper">
<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name"> <div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
<div class="blood-chart-element-header"> <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 class="blood-chart-coin-title">{{ coin.name }}</div>
</div> </div>
<div class="blood-chart-element-body"> <div class="blood-chart-element-body">
@@ -50,18 +52,25 @@
</template> </template>
<script setup> <script setup>
function getImageUrl(url) {
return new URL(url, import.meta.url).href;
}
const dataPoints = [ const dataPoints = [
{ {
name: "PEPE", name: "$PEPE",
percentage: 62.2, percentage: 62.2,
icon: "/src/assets/img/token/pepevamp.png",
}, },
{ {
name: "Shiba", name: "$SHIB",
percentage: 31.2, percentage: 31.2,
icon: "/src/assets/img/token/shibvamp.png",
}, },
{ {
name: "Doge", name: "$ELON",
percentage: 54.5, percentage: 54.5,
icon: "/src/assets/img/token/elonvamp.png",
}, },
]; ];
</script> </script>
@@ -69,8 +78,14 @@ const dataPoints = [
<style lang="sass"> <style lang="sass">
.blood-chart-wrapper .blood-chart-wrapper
height: 750px height: 750px
width: 100%
justify-content: space-around
display: inline-flex display: inline-flex
@media (min-width: 992px)
gap: 96px gap: 96px
width: unset
justify-content: unset
.blood-chart-element .blood-chart-element
height: 100% height: 100%
width: 80px width: 80px
@@ -82,19 +97,22 @@ const dataPoints = [
height: 80px height: 80px
width: 80px width: 80px
border-radius: 80px border-radius: 80px
background-color: grey
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
position: relative position: relative
margin-bottom: 16px margin-bottom: 16px
overflow: hidden
.blood-chart-coin-title .blood-chart-coin-title
text-align: center text-align: center
margin-bottom: 32px margin-bottom: 32px
font-size: 16px
@media (min-width: 992px)
font-size: 24px font-size: 24px
.blood-chart-element-body .blood-chart-element-body
background-color: rgba(233, 233, 233, 0.2) background-color: rgba(233, 233, 233, 0.2)
flex: 1 1 auto flex: 1 1 auto
border-radius: 8px 8px 40px 40px border-radius: 8px 8px 40px 40px
text-align: left
.blood-chart-bar-wrapper .blood-chart-bar-wrapper
height: 100% height: 100%
display: flex display: flex
@@ -103,14 +121,14 @@ const dataPoints = [
margin-top: auto margin-top: auto
background-color: var(--blood-color) background-color: var(--blood-color)
position: relative position: relative
border-radius: 8px 8px 40px 40px border-radius: 0 0 40px 40px
.blood-chart-bar-percentage .blood-chart-bar-percentage
font-size: 14px font-size: 14px
text-align: center text-align: center
margin-top: 16px margin-top: 16px
.waves .waves
position: absolute position: absolute
top: -8px top: -10px
width: 100% width: 100%
height: 10px height: 10px
.blood-chart-element-footer .blood-chart-element-footer
src/components/Navbar.vue
+26 -5
View File
@@ -1,9 +1,10 @@
<script setup> <script setup>
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { useWalletStore } from "@/stores/wallet"; import { useWalletStore } from "@/stores/wallet";
const walletStore = useWalletStore(); const walletStore = useWalletStore();
const { connected, address } = storeToRefs(walletStore); const { connected, address } = storeToRefs(walletStore);
const isMobile = inject("isMobile");
const showNavbar = ref(true); const showNavbar = ref(true);
const lastScrollPosition = ref(0); const lastScrollPosition = ref(0);
@@ -37,7 +38,7 @@ onBeforeUnmount(() => {
</router-link> </router-link>
</div> </div>
<div class="navbar-text">Bloodline</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="navbar-social-links">
<div class="social-bloodline-badge"> <div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon"> <div class="social-bloodline-badge-icon">
@@ -60,9 +61,14 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<div v-if="!isMobile">
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
<span v-else> {{ address }}</span> <span v-else> {{ address }}</span>
</div> </div>
<div v-else class="hamburger-menu">
<font-awesome-icon :icon="['fas', 'bars']" />
</div>
</div>
</div> </div>
</div> </div>
</header> </header>
@@ -78,6 +84,8 @@ header
width: 100% width: 100%
transform: translate3d(0,0,0) transform: translate3d(0,0,0)
transition: transform .3s ease,visibility 0s .3s linear transition: transform .3s ease,visibility 0s .3s linear
height: 82px
@media (min-width: 992px)
height: 128px height: 128px
&.navbar--hidden &.navbar--hidden
transform: translate3d(0,-100%,0) transform: translate3d(0,-100%,0)
@@ -89,10 +97,18 @@ header
align-items: center align-items: center
@media (min-width: 992px) @media (min-width: 992px)
padding: 16px 24px padding: 16px 24px
.navbar-icon
img
height: 50px
width: 50px
.navbar-text .navbar-text
font-family: 'Vampire', sans-serif font-family: 'Vampire', sans-serif
font-size: 64px font-size: 36px
margin-left: 16px
letter-spacing: 0.138em letter-spacing: 0.138em
line-height: 73.107px
@media (min-width: 992px)
font-size: 64px
.navbar-center .navbar-center
display: flex display: flex
margin-left: auto margin-left: auto
@@ -105,10 +121,15 @@ header
border-radius: 14px border-radius: 14px
background-color: #0F0F0F background-color: #0F0F0F
display: flex display: flex
&:hover,&:active,&:focus
background-color: lighten(#0F0F0F, 10%)
cursor: pointer
.social-bloodline-badge-icon .social-bloodline-badge-icon
margin-right: 8px margin-right: 8px
.navbar-end .navbar-end
display: flex display: flex
flex: 0 0 200px margin-left: auto
justify-content: flex-end .hamburger-menu
color: var(--purple)
font-size: 42px
</style> </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
+90 -35
View File
@@ -1,7 +1,9 @@
<template> <template>
<div class="sacrifice-wrapper card bloodline-wrapper"> <div class="sacrifice-wrapper card bloodline-wrapper">
{{ activeToken.allowance }} {{ activeToken.allowance }}
<div class="sacrifice-headline">Select Token</div>
<div class="sacrifice-inner">
<div class="sacrifice-headline">Select Sacrifice</div>
<div class="sacrifice-select-tokens"> <div class="sacrifice-select-tokens">
<div class="sacrifice-tokens"> <div class="sacrifice-tokens">
<div <div
@@ -11,36 +13,44 @@
:key="token.contractAddress" :key="token.contractAddress"
@click="tokenStore.changeActiveToken(token)" @click="tokenStore.changeActiveToken(token)"
> >
{{ token.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> </div>
</div> </div>
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress"> <div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
<div class="sacrifice-from-wrapper bloodline-border"> <div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1">
<div class="sarcrifice-from-input"> <div class="sarcrifice-from-input">
<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" /><img <input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" />
src="@/assets/img/vampir.png" <div class="sacrifice-logo">
alt="vampir" <img src="@/assets/img/vampir.png" alt="vampir" />
/> </div>
</div> </div>
<div class="value-adder"> <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(10000000)">+10m</div>
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</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-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">Max</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> </div>
<div class="sacrifice-divider bloodline-devider"> <div class="sacrifice-divider bloodline-devider">
<font-awesome-icon :icon="['fas', 'arrow-down']" /> <font-awesome-icon :icon="['fas', 'arrow-down']" />
</div> </div>
<div class="sacrifice-to-wrapper bloodline-border"> <div class="sacrifice-to-wrapper bloodline-border bloodline-border--variant1">
<div class="sarcrifice-from-input"> <div class="sarcrifice-from-input">
<div class="sacrifice-to-output"> <div class="sacrifice-to-output">
<div class="sacrifice-to-output-coin">{{ activeToken.name }}</div> <div class="sacrifice-to-output-coin">$BLOOD</div>
<div class="sacrifice-to-output-rewards">{{ output }}</div> <div class="sacrifice-to-output-rewards">{{ output }}</div>
</div> </div>
<img src="@/assets/img/vampir.png" alt="vampir" /> <div class="sacrifice-logo">
<img :src="activeToken.vamp.logo" :alt="activeToken.vamp.name" />
</div>
</div> </div>
</div> </div>
<div class="sacrifice-fees-info-wrapper"> <div class="sacrifice-fees-info-wrapper">
@@ -75,14 +85,16 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from "vue"; import { ref, defineProps, watch, inject } from "vue";
import { useWalletStore } from "@/stores/wallet"; import { useWalletStore } from "@/stores/wallet";
import { useTokenStore } from "@/stores/tokens"; import { useTokenStore } from "@/stores/tokens";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import Helper from "@/utils/helper.js"; import Helper from "@/utils/helper.js";
const isMobile = inject("isMobile");
const walletStore = useWalletStore(); const walletStore = useWalletStore();
const { contract, connected } = storeToRefs(walletStore); const { contract, connected } = storeToRefs(walletStore);
@@ -115,6 +127,10 @@ async function test(e) {
function addTokens(value) { function addTokens(value) {
tokenNumber.value = tokenNumber.value + value; tokenNumber.value = tokenNumber.value + value;
} }
function getImageUrl(url) {
return new URL(url, import.meta.url).href;
}
</script> </script>
<style lang="sass"> <style lang="sass">
@@ -125,71 +141,111 @@ function addTokens(value) {
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
background-color: var(--primary) background-color: var(--primary)
.sacrifice-inner
padding: 48px 24px
@media (min-width: 992px)
padding: 48px 64px
.sacrifice-headline .sacrifice-headline
text-align: center text-align: center
font-size: 24px
margin-bottom: 32px
@media (min-width: 992px)
font-size: 36px font-size: 36px
.sacrifice-select-tokens .sacrifice-select-tokens
padding: 24px
display: flex display: flex
margin-bottom: 32px margin-bottom: 32px
.sacrifice-tokens .sacrifice-tokens
display: flex display: flex
width: 100% width: 100%
justify-content: space-between
@media (min-width: 992px)
justify-content: space-evenly justify-content: space-evenly
.sacrifice-token .sacrifice-token
width: 132px
height: 132px
border-radius: 16px border-radius: 16px
padding: 12px padding: 12px
border: 1px solid lightgrey
cursor: pointer cursor: pointer
background-color: var(--tertiary) background-color: #0F0F0F
text-align: center
@media (min-width: 992px)
padding: 0
background-color: unset
&:hover, &:hover,
&:active, &:active,
&:focus &:focus
background-color: var(--tertiary-dark) background-color: var(--tertiary-dark)
&.sacrifice-token--active &.sacrifice-token--active
background-color: var(--tertiary-dark) 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 .sacrifice-buttons-function-wrapper
text-align: center text-align: center
display: flex
justify-content: center justify-content: center
margin-top: 24px margin-top: 24px
display: block
@media (min-width: 992px)
display: flex
.btn .btn
padding: 16px 64px padding: 16px 64px
.sacrifice-fees-info-wrapper .sacrifice-fees-info-wrapper
display: flex display: flex
border: 2px dashed var(--grey) border: 2px dashed var(--grey)
color: var(--grey)
border-radius: 16px border-radius: 16px
padding: 16px 24px padding: 16px 24px
margin-top: 24px margin-top: 24px
font-size: 16px
.sacrifice-fees-img .sacrifice-fees-img
flex: 0 0 15% flex: 0 0 15%
.sacrifice-fees-body .sacrifice-fees-body
flex: 1 1 auto flex: 1 1 auto
.sacrifice-fees-body-header .sacrifice-fees-body-header
font-size: 24px
display: flex display: flex
flex-direction: row flex-direction: row
justify-content: space-between justify-content: space-between
margin-bottom: 8px
@media (min-width: 992px)
font-size: 24px
margin-bottom: 0
.sacrifice-from-to-wrapper .sacrifice-from-to-wrapper
.sacrifice-from-wrapper,.sacrifice-to-wrapper .sacrifice-from-wrapper,.sacrifice-to-wrapper
.sarcrifice-from-input .sarcrifice-from-input
display: flex display: flex
margin-bottom: 8px margin-bottom: 8px
height: 60px // height: 60px
input input
width: 100% width: 100%
height: 45px
font-size: 24px
border-radius: 16px
padding: 0 16px
@media (min-width: 992px)
font-size: 32px font-size: 32px
img height: auto
.sacrifice-logo
margin-left: 16px margin-left: 16px
img
width: 45px
height: 45px
border-radius: 50%
@media (min-width: 992px)
height: auto
width: auto
.sacrifice-to-output .sacrifice-to-output
flex: 1 1 auto flex: 1 1 auto
text-align: left text-align: left
.sacrifice-to-output-coin .sacrifice-to-output-coin
font-size: 16px
@media (min-width: 992px)
font-size: 24px font-size: 24px
.sacrifice-to-output-rewards .sacrifice-to-output-rewards
font-size: 24px
@media (min-width: 992px)
font-size: 42px font-size: 42px
.value-adder .value-adder
display: flex display: flex
@@ -200,17 +256,16 @@ function addTokens(value) {
&:active, &:active,
&:focus &:focus
background-color: var(--secondary) background-color: var(--secondary)
border: 1px solid var(--secondary-dark)
cursor: pointer cursor: pointer
.sacrifice-adder-balance // .sacrifice-adder-balance
margin-left: auto // margin-left: auto
.sacrifice-adder-max // .sacrifice-adder-max
margin-left: 12px // margin-left: 12px
color: red // color: red
&:hover, // &:hover,
&:focus, // &:focus,
&:active // &:active
color: darken(red, 10%) // color: darken(red, 10%)
transform: scale(1.1) // transform: scale(1.1)
transition: transform 0s // transition: transform 0s
</style> </style>
src/components/TokenClaim.vue
+28 -32
View File
@@ -1,57 +1,53 @@
<template> <template>
<div class="claim bloodline-border"> <div class="claim bloodline-border">
<div class="rewards-wrapper"> <div class="rewards-wrapper" v-if="!isMobile">
<div class="rewards-headline">Sacrafice Reward</div> <rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
<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-divider bloodline-devider"> <div class="rewards-divider bloodline-devider">
<font-awesome-icon icon="fa-solid fa-plus" /> <font-awesome-icon icon="fa-solid fa-plus" />
</div> </div>
<div class="rewards-headline">Clan Reward</div> <rewards-wrapper title="Clan Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
<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>
<div class="claim-button"> <div class="claim-button">
<div class="btn btn-immortal">Claim</div> <div class="btn btn-immortal">Claim</div>
</div> </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> </div>
</template> </template>
<script setup></script> <script setup>
import RewardsWrapper from "@/components/RewardsWrapper.vue";
import { inject } from "vue";
const isMobile = inject("isMobile");
</script>
<style lang="sass"> <style lang="sass">
.claim .claim
display: flex display: flex
padding: 32px 20px
flex-direction: column flex-direction: column
@media (min-width: 992px)
padding: 32px 40px padding: 32px 40px
.claim-button .claim-button
text-align: center text-align: center
margin-top: 32px margin-top: 32px
.rewards-wrapper .rewards-wrapper
width: 100% margin-bottom: 16px
.rewards-headline
font-size: 24px
padding: 0 0 4px 8px
.rewards-divider .rewards-divider
text-align: center 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
</style> </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 { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */ /* 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"; import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
/* add icons to the library */ /* 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) 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
+32 -8
View File
@@ -397,15 +397,39 @@ 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, abi: Meme1Json.abi,
contractAddress: Meme1Json.contractAddress, 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, abi: Meme2Json.abi,
contractAddress: Meme2Json.contractAddress, 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: { activeToken: {
address: null, address: null,
@@ -417,8 +441,8 @@ export const useTokenStore = defineStore("token", {
loading: false, loading: false,
memeBurner: { memeBurner: {
config: MemeBurnerJson, config: MemeBurnerJson,
contract: null contract: null,
} },
}), }),
getters: {}, getters: {},
actions: { actions: {
@@ -430,13 +454,14 @@ export const useTokenStore = defineStore("token", {
if (walletStore.connected) { if (walletStore.connected) {
this.activeToken.balance = await walletStore.getTokenBalance(token); this.activeToken.balance = await walletStore.getTokenBalance(token);
this.activeToken.allowance = await this.allowance(); this.activeToken.allowance = await this.allowance();
} }
}, },
async allowance() { async allowance() {
const walletStore = useWalletStore(); const walletStore = useWalletStore();
console.log("walletStore.address", walletStore.address); console.log("walletStore.address", walletStore.address);
const allowance = await this.contract.methods.allowance(walletStore.address, MemeBurnerJson.contractAddress).call(); const allowance = await this.contract.methods
.allowance(walletStore.address, MemeBurnerJson.contractAddress)
.call();
console.log("allowance", allowance); console.log("allowance", allowance);
return allowance; return allowance;
}, },
@@ -462,7 +487,6 @@ export const useTokenStore = defineStore("token", {
console.log("reward", reward); console.log("reward", reward);
} catch (error) { } catch (error) {
error.log(error); error.log(error);
} finally { } finally {
this.loading = false; this.loading = false;
} }
@@ -472,7 +496,7 @@ export const useTokenStore = defineStore("token", {
var rewards = await contractsStore.list.memeBurnerPublic.methods var rewards = await contractsStore.list.memeBurnerPublic.methods
.getRewardFor(this.activeToken.contractAddress, amount) .getRewardFor(this.activeToken.contractAddress, amount)
.call(); .call();
return rewards return rewards;
}, },
getTokenContract(token) { getTokenContract(token) {
console.log("token", token); console.log("token", token);
src/stores/wallet.js
-1
View File
@@ -9,7 +9,6 @@ export const useWalletStore = defineStore("wallet", {
address: null, address: null,
}), }),
getters: { getters: {
double: (state) => state.count * 2,
}, },
actions: { actions: {
increment() { increment() {
src/views/HomeView.vue
+159 -16
View File
@@ -1,4 +1,5 @@
<script setup> <script setup>
import { ref, computed, inject } from "vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import SacrificeToken from "@/components/SacrificeToken.vue"; import SacrificeToken from "@/components/SacrificeToken.vue";
import BloodChart from "@/components/BloodChart.vue"; import BloodChart from "@/components/BloodChart.vue";
@@ -8,11 +9,36 @@ import TokenClaim from "@/components/TokenClaim.vue";
import { useTokenStore } from "@/stores/tokens"; import { useTokenStore } from "@/stores/tokens";
const tokenStore = useTokenStore(); const tokenStore = useTokenStore();
const { token } = storeToRefs(tokenStore); const { token } = storeToRefs(tokenStore);
import { Navigation } from "swiper";
// Import Swiper Vue.js components // Import Swiper Vue.js components
const swiperInstance = ref();
import { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css"; import "swiper/css";
import "swiper/css/navigation"; 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( // let web3 = new Web3(
// "https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN" // "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> <sacrifice-token :data="token"></sacrifice-token>
</section> </section>
<swiper :slides-per-view="1" :navigation="true" :space-between="50"> <div class="container section-header-container">
<swiper-slide>Slide 1</swiper-slide> <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 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide> <swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide> <swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide> <swiper-slide>Slide 5</swiper-slide>
</swiper> </swiper>
<div class="container section-header-container"> <div class="slider-wrapper">
<h2>Bloodline Cycle</h2> <font-awesome-icon
Become the most powerful clan each cycle and claim extra rewards.<br />Claim and trade your $BLOOD at :class="{ 'slider-prev': true, disabled: currentSlide === rounds[0].round }"
each cycle's end. @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>
<section id="cycle-section" class="container">
<div class="cycle card bloodline-wrapper"> <div class="cycle card bloodline-wrapper">
<div class="bloodline-inner">
<token-claim></token-claim> <token-claim></token-claim>
<div> </div>
<h2>Bloodline Clan</h2>
<div class="bloodline-clan">
<h3>Bloodline Clan</h3>
<p> <p>
Win extra rewards for you and your clan. Increase the strength of your bloodline by Win extra rewards for you and your clan. Increase the strength of your bloodline by
sacrificing more memes. sacrificing more memes.
</p> </p>
<table class="bonus-table"> <table class="bonus-table" v-if="!isMobile">
<tbody> <tbody>
<tr> <tr>
<th scope="row">1st</th> <th scope="row">1st</th>
@@ -68,9 +117,34 @@ import "swiper/css/navigation";
</tr> </tr>
</tbody> </tbody>
</table> </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"> <div class="blood-chart">
<blood-chart></blood-chart> <blood-chart></blood-chart>
</div> </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>
</div> </div>
</section> </section>
@@ -83,7 +157,8 @@ import "swiper/css/navigation";
<div class="card"> <div class="card">
<h2>Tokenomics</h2> <h2>Tokenomics</h2>
<p>100% clan owned. No team %, no pre-mine</p> <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> </div>
</section> </section>
</div> </div>
@@ -92,17 +167,26 @@ import "swiper/css/navigation";
<style lang="sass"> <style lang="sass">
.blood-chart .blood-chart
margin-top: 56px
display: flex display: flex
justify-content: center justify-content: center
.bloodline-wrapper margin-bottom: 80px
padding: 48px 64px
.header-text .header-text
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 font-size: 64px
margin-top: 0px
line-height: unset
text-shadow: unset
line-height: 80px line-height: 80px
font-weight: 600 font-weight: 600
text-align: center
margin-bottom: 100px
.chart-wrapper-coin .chart-wrapper-coin
display: flex display: flex
justify-content: space-evenly justify-content: space-evenly
@@ -126,6 +210,7 @@ import "swiper/css/navigation";
th th
padding-right: 16px padding-right: 16px
#tokenomics #tokenomics
background-color: var(--darkgrey)
>div >div
text-align: center text-align: center
img img
@@ -149,4 +234,62 @@ import "swiper/css/navigation";
margin-top: auto margin-top: auto
text-align: center text-align: center
padding-top: 10px 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> </style>