start implementing frontend design
This commit is contained in:
Michel Fromme
+22
-3
@@ -2,13 +2,34 @@
|
||||
import { onMounted } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
import Web3 from "web3";
|
||||
import Navbar from "./components/Navbar.vue";
|
||||
|
||||
import { useWalletStore } from "@/stores/wallet";
|
||||
const walletStore = useWalletStore();
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { useContractStore } from "@/stores/contracts";
|
||||
const tokenStore = useTokenStore();
|
||||
const contractStore = useContractStore();
|
||||
const { memeBurner } = storeToRefs(tokenStore);
|
||||
const { list } = storeToRefs(contractStore);
|
||||
|
||||
onMounted(async () => {
|
||||
var test = await walletStore.isConnected();
|
||||
console.log("test", test);
|
||||
|
||||
let web3 = new Web3("https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN");
|
||||
|
||||
const contract = new web3.eth.Contract(memeBurner.value.config.abi, memeBurner.value.config.contractAddress);
|
||||
list.value.memeBurnerPublic = new web3.eth.Contract(
|
||||
memeBurner.value.config.abi,
|
||||
memeBurner.value.config.contractAddress
|
||||
);
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -19,6 +40,4 @@ onMounted(async () => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
.main
|
||||
</style>
|
||||
<style lang="sass"></style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"contractName": "LiquidityOwner",
|
||||
"contractAddress": "0xF58FC44A2862335F3577253EC544488006aF676A",
|
||||
"contractAddress": "0x0ce1d955f2a2658d6ca1CF61Fa300234fD8A262c",
|
||||
"abi": [
|
||||
{
|
||||
"inputs": [
|
||||
@@ -83,7 +83,7 @@
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256[]",
|
||||
"name": "tokenIds",
|
||||
"name": "liquidityTokenIds",
|
||||
"type": "uint256[]"
|
||||
}
|
||||
],
|
||||
@@ -198,7 +198,7 @@
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256[]",
|
||||
"name": "tokenIds",
|
||||
"name": "positionsToCancel",
|
||||
"type": "uint256[]"
|
||||
},
|
||||
{
|
||||
@@ -240,22 +240,22 @@
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "operator",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "from",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "tokenId",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "bytes",
|
||||
"name": "data",
|
||||
"name": "",
|
||||
"type": "bytes"
|
||||
}
|
||||
],
|
||||
@@ -267,7 +267,7 @@
|
||||
"type": "bytes4"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"stateMutability": "pure",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"contractName": "MemeBurner",
|
||||
"contractAddress": "0x5c7077b0424c0e425B16363AdA59f1D72914C5c5",
|
||||
"contractAddress": "0x6eEAe97975e156400DD1DDD8eFc4CcB167BaAFC3",
|
||||
"abi": [
|
||||
{
|
||||
"inputs": [
|
||||
@@ -146,35 +146,6 @@
|
||||
"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": [
|
||||
{
|
||||
@@ -206,6 +177,59 @@
|
||||
"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",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"contractName": "MemeToken",
|
||||
"contractAddress": "0x0e349D42C125acA39ea58024FFC23ED0fE5feE32",
|
||||
"contractAddress": "0xeC73Ec89897a36E9Ca36B2190964bBd8C46748AD",
|
||||
"abi": [
|
||||
{
|
||||
"inputs": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"contractName": "RewardLocker",
|
||||
"contractAddress": "0x6749F75Ece2755d38f209Da1cBab07A1caD69554",
|
||||
"contractAddress": "0x3bEc26159dbA0A32210eaDF6A938F1BbE8bfDAA0",
|
||||
"abi": [
|
||||
{
|
||||
"inputs": [
|
||||
@@ -15,7 +15,7 @@
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "MemeBurnerAlreadyInitialized",
|
||||
"name": "MemeAltarAlreadyInitialized",
|
||||
"type": "error"
|
||||
},
|
||||
{
|
||||
@@ -23,6 +23,21 @@
|
||||
"name": "MemeTokenAlreadyInitialized",
|
||||
"type": "error"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "RoundIsNotCompletedYet",
|
||||
"type": "error"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "TooEarlyToUnstake",
|
||||
"type": "error"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "Unsynchronized",
|
||||
"type": "error"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
@@ -33,7 +48,7 @@
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": false,
|
||||
"indexed": true,
|
||||
"internalType": "uint256",
|
||||
"name": "amount",
|
||||
"type": "uint256"
|
||||
@@ -42,6 +57,56 @@
|
||||
"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": [
|
||||
@@ -106,23 +171,29 @@
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "_burnedToken",
|
||||
"name": "unstaker",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "claim",
|
||||
"outputs": [
|
||||
},
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "uint256",
|
||||
"name": "claimedAmount",
|
||||
"name": "unstakeRound",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "uint256",
|
||||
"name": "unstakedAmount",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
"name": "UnstakeOrdered",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
@@ -133,7 +204,7 @@
|
||||
},
|
||||
{
|
||||
"internalType": "address[]",
|
||||
"name": "_burnedTokens",
|
||||
"name": "_sacrificedTokens",
|
||||
"type": "address[]"
|
||||
}
|
||||
],
|
||||
@@ -148,81 +219,6 @@
|
||||
"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": [
|
||||
{
|
||||
@@ -251,7 +247,7 @@
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "_burnedToken",
|
||||
"name": "_sacrificedToken",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
@@ -269,32 +265,32 @@
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "_round",
|
||||
"type": "uint256"
|
||||
"internalType": "address",
|
||||
"name": "beneficiary",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "_burnedToken",
|
||||
"type": "address"
|
||||
"internalType": "uint256[]",
|
||||
"name": "roundNumbers",
|
||||
"type": "uint256[]"
|
||||
}
|
||||
],
|
||||
"name": "claim",
|
||||
"name": "getTotalRewardsOf",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "claimedAmount",
|
||||
"name": "totalRewardsAmount",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "_memeBurner",
|
||||
"name": "_memeAltar",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
@@ -323,7 +319,7 @@
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "memeBurner",
|
||||
"name": "memeAltar",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
@@ -347,6 +343,19 @@
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "orderUnstake",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "unstakeRound",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
@@ -356,7 +365,7 @@
|
||||
},
|
||||
{
|
||||
"internalType": "address[]",
|
||||
"name": "burnableTokens",
|
||||
"name": "sacrificableTokens",
|
||||
"type": "address[]"
|
||||
}
|
||||
],
|
||||
@@ -380,7 +389,7 @@
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "_burnedToken",
|
||||
"name": "_sacrificedToken",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
@@ -468,6 +477,11 @@
|
||||
"name": "roundCompleted",
|
||||
"type": "bool"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "totalDefaultRewards",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "totalRewards",
|
||||
@@ -476,6 +490,150 @@
|
||||
],
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 120 KiB |
@@ -1,3 +1,21 @@
|
||||
.bloodline-devider
|
||||
font-size: 42px
|
||||
margin: 24px 0
|
||||
text-align: center
|
||||
|
||||
.bloodline-border
|
||||
padding: 24px 32px
|
||||
border: 4px solid #000000
|
||||
border-radius: 16px
|
||||
|
||||
.bloodline-badge
|
||||
padding: 8px 16px 8px 16px
|
||||
border-radius: 14px
|
||||
background-color: #0F0F0F
|
||||
display: flex
|
||||
.bloodline-badge-icon
|
||||
margin-right: 8px
|
||||
|
||||
.card
|
||||
display: block
|
||||
overflow: hidden
|
||||
@@ -14,3 +32,4 @@
|
||||
border-width: 0
|
||||
border-radius: 4px
|
||||
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
|
||||
@@ -0,0 +1,106 @@
|
||||
.wrapper
|
||||
height: 100%
|
||||
width: 100%
|
||||
position: absolute
|
||||
overflow: hidden
|
||||
div
|
||||
height: 15px
|
||||
width: 15px
|
||||
border: 2px solid rgba(139, 0, 0, 0.7)
|
||||
border-radius: 50px
|
||||
position: absolute
|
||||
top: 10%
|
||||
left: 10%
|
||||
animation: 4s linear infinite
|
||||
|
||||
div .dot
|
||||
height: 10px
|
||||
width: 10px
|
||||
border-radius: 50px
|
||||
background: rgba(138, 62, 62, 0.5)
|
||||
position: absolute
|
||||
top: 20%
|
||||
right: 20%
|
||||
|
||||
.wrapper div
|
||||
&:nth-child(1)
|
||||
top: 20%
|
||||
left: 20%
|
||||
animation: animate 8s linear infinite
|
||||
|
||||
&:nth-child(2)
|
||||
top: 60%
|
||||
left: 55%
|
||||
animation: animate 10s linear infinite
|
||||
|
||||
&:nth-child(3)
|
||||
top: 40%
|
||||
left: 40%
|
||||
animation: animate 3s linear infinite
|
||||
|
||||
&:nth-child(4)
|
||||
top: 66%
|
||||
left: 30%
|
||||
animation: animate 7s linear infinite
|
||||
|
||||
&:nth-child(5)
|
||||
top: 90%
|
||||
left: 10%
|
||||
animation: animate 9s linear infinite
|
||||
|
||||
&:nth-child(6)
|
||||
top: 30%
|
||||
left: 20%
|
||||
animation: animate 5s linear infinite
|
||||
|
||||
&:nth-child(7)
|
||||
top: 70%
|
||||
left: 20%
|
||||
animation: animate 8s linear infinite
|
||||
|
||||
&:nth-child(8)
|
||||
top: 75%
|
||||
left: 30%
|
||||
animation: animate 10s linear infinite
|
||||
|
||||
&:nth-child(9)
|
||||
top: 50%
|
||||
left: 50%
|
||||
animation: animate 6s linear infinite
|
||||
|
||||
&:nth-child(10)
|
||||
top: 45%
|
||||
left: 20%
|
||||
animation: animate 10s linear infinite
|
||||
|
||||
&:nth-child(11)
|
||||
top: 10%
|
||||
left: 90%
|
||||
animation: animate 9s linear infinite
|
||||
|
||||
&:nth-child(12)
|
||||
top: 20%
|
||||
left: 50%
|
||||
animation: animate 7s linear infinite
|
||||
|
||||
&:nth-child(13)
|
||||
top: 20%
|
||||
left: 20%
|
||||
animation: animate 8s linear infinite
|
||||
|
||||
&:nth-child(14)
|
||||
top: 60%
|
||||
left: 5%
|
||||
animation: animate 6s linear infinite
|
||||
|
||||
&:nth-child(15)
|
||||
top: 90%
|
||||
left: 50%
|
||||
animation: animate 9s linear infinite
|
||||
|
||||
@keyframes animate
|
||||
0%
|
||||
transform: scale(0) translateY(0) rotate(70deg)
|
||||
|
||||
100%
|
||||
transform: scale(1.3) translateY(-50px) rotate(360deg)
|
||||
@@ -1,10 +1,12 @@
|
||||
|
||||
.btn
|
||||
&.btn-immortal
|
||||
padding: 6px 24px
|
||||
background-color: $button-background-color
|
||||
background-color: $red
|
||||
color: $button-color
|
||||
font-size: 24px
|
||||
padding: 16px 24px
|
||||
gap: 8px
|
||||
border-radius: 14px
|
||||
&:hover,&:focus,&:active
|
||||
background-color: lighten($button-background-color, 10%),
|
||||
color: darken($button-color, 10%),
|
||||
|
||||
@@ -1,10 +1,22 @@
|
||||
@import 'variables'
|
||||
@import 'buttons'
|
||||
@import 'cards'
|
||||
@import 'base'
|
||||
@import 'wave'
|
||||
@import 'bubbles'
|
||||
|
||||
@font-face
|
||||
font-family: 'Inter'
|
||||
src: url("@/assets/fonts/Inter-Regular.ttf")
|
||||
|
||||
@font-face
|
||||
font-family: 'Vampire'
|
||||
src: url("@/assets/fonts/Vampire.ttf")
|
||||
*
|
||||
box-sizing: border-box
|
||||
body
|
||||
background-color: $secondary
|
||||
color: $color2
|
||||
background-color: #2D2D2D
|
||||
color: $white
|
||||
font-family: 'Inter', sans-serif
|
||||
|
||||
.main
|
||||
padding-top: 120px
|
||||
@@ -30,7 +42,13 @@ body
|
||||
margin-right: auto
|
||||
margin-left: auto
|
||||
@media (min-width: 992px)
|
||||
max-width: 1140px
|
||||
max-width: 800px
|
||||
.section-header-container
|
||||
width: 655px
|
||||
text-align: center
|
||||
font-size: 24px
|
||||
margin-top: 64px
|
||||
margin-bottom: 64px
|
||||
|
||||
h1
|
||||
font-weight: 700
|
||||
|
||||
@@ -8,11 +8,16 @@ $tertiary: #A8A8A8
|
||||
$tertiary-dark: darken($tertiary, 20%)
|
||||
$tertiary-light: lighten($tertiary, 20%)
|
||||
|
||||
$color2: white
|
||||
$color1: black
|
||||
$white: #F9F9FA
|
||||
$black: #0F0F0F
|
||||
$grey: #808080
|
||||
$red: #8B0000
|
||||
$purple: #4B0082
|
||||
|
||||
$button-color: $color2
|
||||
$button-background-color: $color1
|
||||
$darkgrey: #202020
|
||||
|
||||
$button-color: $white
|
||||
$button-background-color: $black
|
||||
:root
|
||||
--primary: #{$primary}
|
||||
--primary-light: #{$primary-light}
|
||||
@@ -23,6 +28,9 @@ $button-background-color: $color1
|
||||
--tertiary: #{$tertiary}
|
||||
--tertiary-light: #{$tertiary-light}
|
||||
--tertiary-dark: #{$tertiary-dark}
|
||||
--grey: #{$grey}
|
||||
--purple: #{$purple}
|
||||
--blood-color: #{$red}
|
||||
// :root
|
||||
// --font-size-text: 16px
|
||||
// --font-size-title: 32px
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
/* Animation
|
||||
|
||||
.parallax > use
|
||||
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite
|
||||
&:nth-child(1)
|
||||
animation-delay: -2s
|
||||
animation-duration: 7s
|
||||
|
||||
&:nth-child(2)
|
||||
animation-delay: -3s
|
||||
animation-duration: 10s
|
||||
|
||||
&:nth-child(3)
|
||||
animation-delay: -4s
|
||||
animation-duration: 13s
|
||||
|
||||
&:nth-child(4)
|
||||
animation-delay: -5s
|
||||
animation-duration: 20s
|
||||
|
||||
@keyframes move-forever
|
||||
0%
|
||||
transform: translate3d(-90px, 0, 0)
|
||||
|
||||
100%
|
||||
transform: translate3d(85px, 0, 0)
|
||||
@@ -1,17 +1,50 @@
|
||||
<template>
|
||||
<div class="blood-chart-wrapper">
|
||||
<div class="blood-chart-element" v-for="(coin, index) 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-coin">
|
||||
<div :class="[{ drop: true, ['variant' + index]: true }]"></div>
|
||||
</div>
|
||||
<div class="blood-chart-coin"></div>
|
||||
<div class="blood-chart-coin-title">{{ coin.name }}</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-body">
|
||||
<div class="blood-chart-bar-wrapper">
|
||||
<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">{{ coin.percentage }}%</div>
|
||||
<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">
|
||||
<svg
|
||||
class="waves"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 24 150 28"
|
||||
preserveAspectRatio="none"
|
||||
shape-rendering="auto"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="gentle-wave"
|
||||
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||
/>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
|
||||
</g>
|
||||
</svg>
|
||||
<div class="wrapper">
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
<div><span class="dot"></span></div>
|
||||
</div>
|
||||
<div class="blood-chart-bar-percentage">{{ coin.percentage }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-footer">
|
||||
<div class="blood-chart-amount">130,4b</div>
|
||||
<div class="blood-chart-coin">$BLOOD</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -20,76 +53,72 @@
|
||||
const dataPoints = [
|
||||
{
|
||||
name: "PEPE",
|
||||
percentage: 34.4,
|
||||
percentage: 62.2,
|
||||
},
|
||||
{
|
||||
name: "Shiba",
|
||||
percentage: 50.4,
|
||||
percentage: 31.2,
|
||||
},
|
||||
{
|
||||
name: "Doge",
|
||||
percentage: 42.4,
|
||||
percentage: 54.5,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.blood-chart-wrapper
|
||||
height: 500px
|
||||
height: 750px
|
||||
display: inline-flex
|
||||
gap: 48px
|
||||
gap: 96px
|
||||
.blood-chart-element
|
||||
height: 100%
|
||||
width: 50px
|
||||
width: 80px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.blood-chart-element-header
|
||||
flex: 0 0 100px
|
||||
.blood-chart-coin
|
||||
height: 50px
|
||||
width: 50px
|
||||
border-radius: 50px
|
||||
height: 80px
|
||||
width: 80px
|
||||
border-radius: 80px
|
||||
background-color: grey
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
position: relative
|
||||
margin-bottom: 16px
|
||||
.blood-chart-coin-title
|
||||
text-align: center
|
||||
margin-bottom: 32px
|
||||
font-size: 24px
|
||||
.blood-chart-element-body
|
||||
background-color: lightgrey
|
||||
background-color: rgba(233, 233, 233, 0.2)
|
||||
flex: 1 1 auto
|
||||
border-radius: 8px 8px 40px 40px
|
||||
.blood-chart-bar-wrapper
|
||||
height: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.blood-chart-bar
|
||||
margin-top: auto
|
||||
background-color: red
|
||||
|
||||
.drop
|
||||
width: 1.1em
|
||||
height: 1.1em
|
||||
border-radius: 0 100% 100% 100%
|
||||
background-color: red
|
||||
position: absolute
|
||||
animation: drop 3s infinite both
|
||||
top: 32px
|
||||
&.variant0
|
||||
left: 14%
|
||||
animation-delay: -5.2s
|
||||
&.variant1
|
||||
left: 39%
|
||||
animation-delay: -.4s
|
||||
|
||||
&.variant2
|
||||
left: 55%
|
||||
animation-delay: -1.5s
|
||||
|
||||
@keyframes drop
|
||||
0%
|
||||
transform: translateY(0) scaleX(.85) rotate(45deg)
|
||||
animation-timing-function: ease-out
|
||||
60%
|
||||
transform: translateY(120%) scaleX(.85) rotate(45deg)
|
||||
animation-timing-function: ease-in
|
||||
80%, 100%
|
||||
transform: translateY(440px) scaleX(.85) rotate(45deg)
|
||||
background-color: var(--blood-color)
|
||||
position: relative
|
||||
border-radius: 8px 8px 40px 40px
|
||||
.blood-chart-bar-percentage
|
||||
font-size: 14px
|
||||
text-align: center
|
||||
margin-top: 16px
|
||||
.waves
|
||||
position: absolute
|
||||
top: -8px
|
||||
width: 100%
|
||||
height: 10px
|
||||
.blood-chart-element-footer
|
||||
margin-top: 32px
|
||||
text-align: center
|
||||
.blood-chart-amount
|
||||
font-size: 24px
|
||||
margin-bottom: 8px
|
||||
.blood-chart-coin
|
||||
font-size: 16px
|
||||
</style>
|
||||
|
||||
+49
-25
@@ -36,9 +36,31 @@ onBeforeUnmount(() => {
|
||||
<img alt="logo" class="logo" src="@/assets/img/vampir.png" />
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="navbar-center"></div>
|
||||
<div class="navbar-text">Bloodline</div>
|
||||
<div class="navbar-center">
|
||||
<div class="navbar-social-links">
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-discord" />
|
||||
</div>
|
||||
<div class="social-bloodline-badge-text">Discord</div>
|
||||
</div>
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-telegram" />
|
||||
</div>
|
||||
<div class="social-bloodline-badge-text">Telegram</div>
|
||||
</div>
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
<font-awesome-icon icon="fa-brands fa-twitter" />
|
||||
</div>
|
||||
<div class="social-bloodline-badge-text">Twitter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<button v-if="!connected" @click="walletStore.connectWallet">connect</button>
|
||||
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
|
||||
<span v-else> {{ address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,39 +74,41 @@ header
|
||||
position: fixed
|
||||
z-index: 3
|
||||
box-sizing: border-box
|
||||
background-color: grey
|
||||
background-color: #202020
|
||||
width: 100%
|
||||
transform: translate3d(0,0,0)
|
||||
transition: transform .3s ease,visibility 0s .3s linear
|
||||
height: 128px
|
||||
&.navbar--hidden
|
||||
transform: translate3d(0,-100%,0)
|
||||
.navbar-inner
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
padding: 0 20px
|
||||
padding: 16px 24px
|
||||
box-sizing: border-box
|
||||
height: 100%
|
||||
align-items: center
|
||||
@media (min-width: 992px)
|
||||
padding: 10px 80px
|
||||
padding: 16px 24px
|
||||
.navbar-text
|
||||
font-family: 'Vampire', sans-serif
|
||||
font-size: 64px
|
||||
letter-spacing: 0.138em
|
||||
.navbar-center
|
||||
display: flex
|
||||
align-items: center
|
||||
.main-menu-links
|
||||
margin-right: 48px
|
||||
&:hover, &:active, &:focus
|
||||
color: lighten(black, 20%)
|
||||
.main-menu-link
|
||||
cursor: pointer
|
||||
margin-left: auto
|
||||
.navbar-social-links
|
||||
display: flex
|
||||
gap: 18px
|
||||
.social-bloodline-badge
|
||||
font-size: 16px
|
||||
padding: 8px 16px 8px 16px
|
||||
border-radius: 14px
|
||||
background-color: #0F0F0F
|
||||
display: flex
|
||||
.social-bloodline-badge-icon
|
||||
margin-right: 8px
|
||||
.navbar-end
|
||||
display: flex
|
||||
align-items: center
|
||||
align-self: center
|
||||
a
|
||||
color: black
|
||||
&:hover,&:focus, &:active
|
||||
color: lighten(black, 20%)
|
||||
|
||||
.navbar-hamburger-open
|
||||
font-size: 35px
|
||||
.parry-twitter
|
||||
font-size: 30px
|
||||
margin-left: 32px
|
||||
flex: 0 0 200px
|
||||
justify-content: flex-end
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="sacrifice-wrapper card">
|
||||
<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">
|
||||
@@ -15,37 +16,53 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
|
||||
<div class="sacrifice-from-wrapper">
|
||||
<div class="sacrifice-from-wrapper bloodline-border">
|
||||
<div class="sarcrifice-from-input">
|
||||
<input type="number" v-model="tokenNumber" /><img src="@/assets/img/vampir.png" alt="vampir" />
|
||||
<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" @click="addTokens(1000000)">+1m</div>
|
||||
<div class="sacrifice-adder-step" @click="addTokens(10000000)">+10m</div>
|
||||
<div class="sacrifice-adder-step" @click="addTokens(100000000)">+100m</div>
|
||||
<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">
|
||||
<div class="sacrifice-divider bloodline-devider">
|
||||
<font-awesome-icon :icon="['fas', 'arrow-down']" />
|
||||
</div>
|
||||
<div class="sacrifice-to-wrapper">
|
||||
<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">2.312.310</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="btn btn-immortal"
|
||||
v-if="activeToken.allowance > 0"
|
||||
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)">
|
||||
@@ -53,16 +70,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect Wallet</div>
|
||||
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-fees-info-wrapper">
|
||||
<div class="sacrifice-feed-info">
|
||||
<div class="sacrifice-fees-state">Disabled</div>
|
||||
<div class="sacrifice-feed-amount">42Gwei</div>
|
||||
</div>
|
||||
<div class="sacrifice-feed-info-text">Increase amount to pay 97% less network fees.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -72,12 +82,13 @@ import { ref, defineProps, watch } from "vue";
|
||||
import { useWalletStore } from "@/stores/wallet";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { storeToRefs } from "pinia";
|
||||
import Helper from "@/utils/helper.js";
|
||||
|
||||
const walletStore = useWalletStore();
|
||||
const { contract, connected } = storeToRefs(walletStore);
|
||||
|
||||
const tokenStore = useTokenStore();
|
||||
const { activeToken } = storeToRefs(tokenStore);
|
||||
const { activeToken, loading } = storeToRefs(tokenStore);
|
||||
|
||||
const props = defineProps({
|
||||
data: Array,
|
||||
@@ -86,14 +97,21 @@ const props = defineProps({
|
||||
watch(
|
||||
activeToken,
|
||||
() => {
|
||||
tokenNumber.value = 0;
|
||||
tokenNumber.value = null;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const tokenNumber = ref(0);
|
||||
const output = ref(0);
|
||||
const approvalData = ref(null);
|
||||
|
||||
const processChange = Helper.debounce((e) => test(e));
|
||||
|
||||
async function test(e) {
|
||||
console.log("hier", e);
|
||||
output.value = await tokenStore.getRewardsFor(parseInt(e.target.value));
|
||||
}
|
||||
function addTokens(value) {
|
||||
tokenNumber.value = tokenNumber.value + value;
|
||||
}
|
||||
@@ -102,8 +120,6 @@ function addTokens(value) {
|
||||
<style lang="sass">
|
||||
|
||||
.sacrifice-wrapper
|
||||
padding: 12px 24px
|
||||
width: 450px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
margin-left: auto
|
||||
@@ -121,8 +137,9 @@ function addTokens(value) {
|
||||
width: 100%
|
||||
justify-content: space-evenly
|
||||
.sacrifice-token
|
||||
width: 50px
|
||||
height: 50px
|
||||
width: 132px
|
||||
height: 132px
|
||||
border-radius: 16px
|
||||
padding: 12px
|
||||
border: 1px solid lightgrey
|
||||
cursor: pointer
|
||||
@@ -138,19 +155,26 @@ function addTokens(value) {
|
||||
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-feed-info
|
||||
display: flex
|
||||
.sacrifice-feed-amount
|
||||
margin-left: auto
|
||||
.sacrifice-fees-img
|
||||
flex: 0 0 15%
|
||||
.sacrifice-fees-body
|
||||
flex: 1 1 auto
|
||||
.sacrifice-fees-body-header
|
||||
font-size: 24px
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: space-between
|
||||
|
||||
.sacrifice-from-to-wrapper
|
||||
.sacrifice-divider
|
||||
text-align: center
|
||||
.sacrifice-from-wrapper,.sacrifice-to-wrapper
|
||||
border: 1px solid black
|
||||
padding: 16px 24px
|
||||
.sarcrifice-from-input
|
||||
display: flex
|
||||
margin-bottom: 8px
|
||||
@@ -171,9 +195,7 @@ function addTokens(value) {
|
||||
display: flex
|
||||
gap: 6px
|
||||
.sacrifice-adder-step
|
||||
padding: 0 12px
|
||||
background-color: var(--tertiary)
|
||||
border: 1px solid var(--tertiary-dark)
|
||||
font-size: 14px
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
<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-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>
|
||||
<div class="claim-button">
|
||||
<div class="btn btn-immortal">Claim</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="sass">
|
||||
.claim
|
||||
display: flex
|
||||
flex-direction: column
|
||||
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
|
||||
</style>
|
||||
+4
-2
@@ -14,10 +14,12 @@ import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
|
||||
/* import specific icons */
|
||||
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faArrowDown, faSpinner ,faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
|
||||
/* add icons to the library */
|
||||
library.add(faArrowDown);
|
||||
library.add(faArrowDown, faDiscord, faTwitter, faTelegram, faSpinner, faPlus);
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import { defineStore } from "pinia";
|
||||
export const useContractStore = defineStore("contracts", {
|
||||
state: () => ({
|
||||
list: {
|
||||
|
||||
}
|
||||
}),
|
||||
getters: {
|
||||
},
|
||||
actions: {
|
||||
}
|
||||
});
|
||||
+34
-13
@@ -1,6 +1,7 @@
|
||||
import { defineStore } from "pinia";
|
||||
import Web3 from "web3";
|
||||
import { useWalletStore } from "./wallet";
|
||||
import { useContractStore } from "./contracts";
|
||||
import Meme1Json from "@/assets/contracts/Meme1.json";
|
||||
import Meme2Json from "@/assets/contracts/Meme2.json";
|
||||
import MemeBurnerJson from "@/assets/contracts/MemeBurner.json";
|
||||
@@ -411,8 +412,9 @@ export const useTokenStore = defineStore("token", {
|
||||
abi: null,
|
||||
balance: null,
|
||||
contract: null,
|
||||
allowance: null
|
||||
allowance: null,
|
||||
},
|
||||
loading: false,
|
||||
memeBurner: {
|
||||
config: MemeBurnerJson,
|
||||
contract: null
|
||||
@@ -440,23 +442,42 @@ export const useTokenStore = defineStore("token", {
|
||||
},
|
||||
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);
|
||||
console.log("this.contract", this.contract);
|
||||
.send({ from: walletStore.address });
|
||||
console.log("approve", approve);
|
||||
this.loading = false;
|
||||
return approve;
|
||||
},
|
||||
async sacrificeToken(amount) {
|
||||
console.log("this.activeToken.", this.activeToken.contractAddress);
|
||||
const walletStore = useWalletStore();
|
||||
console.log("walletStore.address", walletStore.address);
|
||||
var reward = await this.memeBurner.contract.methods
|
||||
.sacrificeMeme(this.activeToken.contractAddress, "400000000000000000")
|
||||
.call({ from: walletStore.address });
|
||||
console.log("reward", reward);
|
||||
},
|
||||
getTokenContract(token) {
|
||||
try {
|
||||
this.loading = true;
|
||||
console.log("this.activeToken.", this.activeToken.contractAddress);
|
||||
const walletStore = useWalletStore();
|
||||
console.log("walletStore.address", walletStore.address);
|
||||
var reward = await this.memeBurner.contract.methods
|
||||
.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) {
|
||||
const contractsStore = useContractStore();
|
||||
var rewards = await contractsStore.list.memeBurnerPublic.methods
|
||||
.getRewardFor(this.activeToken.contractAddress, amount)
|
||||
.call();
|
||||
return rewards
|
||||
},
|
||||
getTokenContract(token) {
|
||||
console.log("token", token);
|
||||
const contractAddress = token.contractAddress;
|
||||
console.log("contractAddress", contractAddress);
|
||||
const activeToken = this.token.find((obj) => obj.contractAddress === contractAddress);
|
||||
console.log("activeToken", activeToken);
|
||||
const web3 = new Web3(window.ethereum);
|
||||
|
||||
+22
-22
@@ -15,17 +15,6 @@ export const useWalletStore = defineStore("wallet", {
|
||||
increment() {
|
||||
this.count++;
|
||||
},
|
||||
async disconnectWallet() {
|
||||
// const permissions = await window.ethereum.request({
|
||||
// method: 'wallet_requestPermissions',
|
||||
// params: [{
|
||||
// eth_accounts: {},
|
||||
// }]
|
||||
// });
|
||||
// console.log("permissions", permissions);
|
||||
this.connected = false;
|
||||
this.address = null;
|
||||
},
|
||||
connectWallet() {
|
||||
console.log("window.ethereum", window.ethereum);
|
||||
// if (window.ethereum) {
|
||||
@@ -33,15 +22,16 @@ export const useWalletStore = defineStore("wallet", {
|
||||
.request({ method: "eth_requestAccounts" })
|
||||
.then((data) => {
|
||||
console.log("data", data);
|
||||
this.address = data[0];
|
||||
this.connected = true;
|
||||
const tokenStore = useTokenStore();
|
||||
if (tokenStore.activeToken.address) {
|
||||
//Token selected but not refreshed
|
||||
this.getTokenBalance(tokenStore.activeToken.address).then(
|
||||
(data) => (tokenStore.activeToken.balance = data)
|
||||
);
|
||||
}
|
||||
this.isConnected();
|
||||
// this.address = data[0];
|
||||
// this.connected = true;
|
||||
// const tokenStore = useTokenStore();
|
||||
// if (tokenStore.activeToken.address) {
|
||||
// //Token selected but not refreshed
|
||||
// this.getTokenBalance(tokenStore.activeToken.address).then(
|
||||
// (data) => (tokenStore.activeToken.balance = data)
|
||||
// );
|
||||
// }
|
||||
// console.log("permissions", permissions);
|
||||
})
|
||||
.catch((error) => {
|
||||
@@ -62,23 +52,33 @@ export const useWalletStore = defineStore("wallet", {
|
||||
},
|
||||
async isConnected() {
|
||||
try {
|
||||
this.loading = true;
|
||||
const accounts = await window.ethereum.request({ method: "eth_accounts" });
|
||||
if (accounts.length) {
|
||||
this.connected = true;
|
||||
|
||||
this.address = accounts[0];
|
||||
console.log(`You're connected to: ${accounts[0]}`);
|
||||
const web3 = new Web3(window.ethereum);
|
||||
const tokenStore = useTokenStore();
|
||||
console.log("tokenStore.activeToken", tokenStore.activeToken);
|
||||
if (tokenStore.activeToken.contractAddress) {
|
||||
tokenStore.activeToken.balance = await this.getTokenBalance(
|
||||
tokenStore.activeToken
|
||||
);
|
||||
tokenStore.activeToken.allowance = await tokenStore.allowance();
|
||||
}
|
||||
tokenStore.memeBurner.contract = new web3.eth.Contract(
|
||||
tokenStore.memeBurner.config.abi,
|
||||
tokenStore.memeBurner.config.contractAddress
|
||||
);
|
||||
} else {
|
||||
this.disconnectWallet();
|
||||
console.log("Metamask is not connected");
|
||||
this.connected = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("error", error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
|
||||
export default class Helper {
|
||||
static debounce(func, timeout = 300) {
|
||||
let timer;
|
||||
return (...args) => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
func.apply(this, args);
|
||||
}, timeout);
|
||||
};
|
||||
}
|
||||
|
||||
static createDebounce() {
|
||||
let timeout = null;
|
||||
return function (fnc, delayMs) {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
fnc();
|
||||
}, delayMs || 500);
|
||||
};
|
||||
}
|
||||
}
|
||||
+69
-50
@@ -2,13 +2,17 @@
|
||||
import { storeToRefs } from "pinia";
|
||||
import SacrificeToken from "@/components/SacrificeToken.vue";
|
||||
import BloodChart from "@/components/BloodChart.vue";
|
||||
import TokenClaim from "@/components/TokenClaim.vue";
|
||||
// import Web3 from "web3";
|
||||
|
||||
// import { useWalletStore } from "@/stores/wallet";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
const tokenStore = useTokenStore();
|
||||
const { token } = storeToRefs(tokenStore);
|
||||
|
||||
import { Navigation } from "swiper";
|
||||
// Import Swiper Vue.js components
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
// let web3 = new Web3(
|
||||
// "https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
|
||||
// );
|
||||
@@ -17,28 +21,37 @@ const { token } = storeToRefs(tokenStore);
|
||||
<template>
|
||||
<main>
|
||||
<div>
|
||||
<sacrifice-token :data="token"></sacrifice-token>
|
||||
<section id="bloodline-header">
|
||||
<div class="header-text">
|
||||
Turn your meme.<br />
|
||||
Join the bloodline scheme.
|
||||
</div>
|
||||
</section>
|
||||
<section id="sacrifice" class="container">
|
||||
<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>
|
||||
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">
|
||||
<div class="cycle">
|
||||
<h2>Cycle 1</h2>
|
||||
<p>Join the eternal cycle of the vampire sacrifice and claim your rewards at each cycle's end.</p>
|
||||
<div class="claim">
|
||||
<div class="claim-button">
|
||||
<div class="btn btn-immortal">Claim</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="theinput">Sacrafice Reward</label>
|
||||
<input type="text" name="whatever" id="theinput" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="theinput">Clan Reward</label>
|
||||
<input type="text" name="whatever" id="theinput" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="cycle card bloodline-wrapper">
|
||||
<token-claim></token-claim>
|
||||
<div>
|
||||
<h2>Bloodline Clan</h2>
|
||||
<p>Become the most powerful clan in a cycle to receive extra rewards.</p>
|
||||
<p>
|
||||
Win extra rewards for you and your clan. Increase the strength of your bloodline by
|
||||
sacrificing more memes.
|
||||
</p>
|
||||
<table class="bonus-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -55,22 +68,41 @@ const { token } = storeToRefs(tokenStore);
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<div class="blood-chart">
|
||||
<blood-chart></blood-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="container section-header-container">
|
||||
<h2>Tutorial</h2>
|
||||
When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
|
||||
<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
|
||||
</div>
|
||||
<section id="tokenomics" class="container">
|
||||
<h2>Tokenomics</h2>
|
||||
<p>100% clan owned. No team %, no pre-mine</p>
|
||||
<img src="@/assets/img/tokenomics.png" alt="tokenomics" />
|
||||
<div class="card">
|
||||
<h2>Tokenomics</h2>
|
||||
<p>100% clan owned. No team %, no pre-mine</p>
|
||||
<img src="@/assets/img/tokenomics.png" alt="tokenomics" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
.blood-chart
|
||||
display: flex
|
||||
justify-content: center
|
||||
.bloodline-wrapper
|
||||
padding: 48px 64px
|
||||
|
||||
.header-text
|
||||
font-size: 64px
|
||||
line-height: 80px
|
||||
font-weight: 600
|
||||
text-align: center
|
||||
margin-bottom: 100px
|
||||
.chart-wrapper-coin
|
||||
display: flex
|
||||
justify-content: space-evenly
|
||||
@@ -81,38 +113,25 @@ const { token } = storeToRefs(tokenStore);
|
||||
background-color: red
|
||||
border-radius: 50px
|
||||
position: relative
|
||||
#cycle-section
|
||||
text-align: center
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
.cycle
|
||||
.claim
|
||||
display: flex
|
||||
flex-direction: column
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
border: 1px solid black
|
||||
padding: 12px 24px
|
||||
width: 300px
|
||||
.claim-button
|
||||
text-align: center
|
||||
label, input
|
||||
display: block
|
||||
input
|
||||
width: 100%
|
||||
.bonus-table
|
||||
border: 1px solid black
|
||||
padding: 8px
|
||||
padding: 0px 16px 0px 16px
|
||||
text-align: left
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
border: 4px solid var(--purple)
|
||||
border-radius: 16px
|
||||
border-spacing: 16px
|
||||
font-size: 24px
|
||||
th
|
||||
padding-right: 16px
|
||||
#tokenomics
|
||||
text-align: center
|
||||
img
|
||||
display: block
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
width: 50%
|
||||
>div
|
||||
text-align: center
|
||||
img
|
||||
display: block
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
.chart-wrapper
|
||||
width: 600px
|
||||
height: 600px
|
||||
|
||||
Reference in New Issue
Block a user