start implementing frontend design

package-lock.json

@@ -9,11 +9,13 @@
             "version": "0.0.0",
             "dependencies": {
                 "@fortawesome/fontawesome-svg-core": "^6.4.0",
+                "@fortawesome/free-brands-svg-icons": "^6.4.0",
                 "@fortawesome/free-solid-svg-icons": "^6.4.0",
                 "@fortawesome/vue-fontawesome": "^3.0.3",
                 "pinia": "^2.0.36",
                 "pinia-plugin-persistedstate": "^3.1.0",
                 "sass": "^1.62.1",
+                "swiper": "^9.4.1",
                 "vue": "^3.3.2",
                 "vue-router": "^4.2.0",
                 "web3": "^1.7.1"
@@ -531,6 +533,18 @@
                 "node": ">=6"
             }
         },
+        "node_modules/@fortawesome/free-brands-svg-icons": {
+            "version": "6.4.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz",
+            "integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==",
+            "hasInstallScript": true,
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "6.4.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/@fortawesome/free-solid-svg-icons": {
             "version": "6.4.0",
             "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
@@ -4355,6 +4369,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/ssr-window": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+            "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+        },
         "node_modules/statuses": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -4516,6 +4535,27 @@
                 "node": ">=8"
             }
         },
+        "node_modules/swiper": {
+            "version": "9.4.1",
+            "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.1.tgz",
+            "integrity": "sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==",
+            "funding": [
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/swiperjs"
+                },
+                {
+                    "type": "open_collective",
+                    "url": "http://opencollective.com/swiper"
+                }
+            ],
+            "dependencies": {
+                "ssr-window": "^4.0.2"
+            },
+            "engines": {
+                "node": ">= 4.7.0"
+            }
+        },
         "node_modules/tar": {
             "version": "4.4.19",
             "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
@@ -5705,6 +5745,14 @@
                 "@fortawesome/fontawesome-common-types": "6.4.0"
             }
         },
+        "@fortawesome/free-brands-svg-icons": {
+            "version": "6.4.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz",
+            "integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==",
+            "requires": {
+                "@fortawesome/fontawesome-common-types": "6.4.0"
+            }
+        },
         "@fortawesome/free-solid-svg-icons": {
             "version": "6.4.0",
             "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
@@ -8620,6 +8668,11 @@
                 "tweetnacl": "~0.14.0"
             }
         },
+        "ssr-window": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+            "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+        },
         "statuses": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -8740,6 +8793,14 @@
                 }
             }
         },
+        "swiper": {
+            "version": "9.4.1",
+            "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.1.tgz",
+            "integrity": "sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==",
+            "requires": {
+                "ssr-window": "^4.0.2"
+            }
+        },
         "tar": {
             "version": "4.4.19",
             "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",

package.json

@@ -10,11 +10,13 @@
     },
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-brands-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "pinia": "^2.0.36",
         "pinia-plugin-persistedstate": "^3.1.0",
         "sass": "^1.62.1",
+        "swiper": "^9.4.1",
         "vue": "^3.3.2",
         "vue-router": "^4.2.0",
         "web3": "^1.7.1"
@@ -25,4 +27,4 @@
         "eslint-plugin-vue": "^9.11.0",
         "vite": "^4.3.5"
     }
-}
+}

src/App.vue

@@ -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">
+<style lang="sass"></style>
-.main
-</style>

src/assets/contracts/LiquidityOwner.json

@@ -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"
     },
     {

src/assets/contracts/MemeBurner.json

@@ -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",

src/assets/contracts/MemeToken.json

@@ -1,6 +1,6 @@
 {
   "contractName": "MemeToken",
-  "contractAddress": "0x0e349D42C125acA39ea58024FFC23ED0fE5feE32",
+  "contractAddress": "0xeC73Ec89897a36E9Ca36B2190964bBd8C46748AD",
   "abi": [
     {
       "inputs": [

src/assets/contracts/RewardLocker.json

@@ -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",
+      "name": "UnstakeOrdered",
-      "type": "function"
+      "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",
+          "internalType": "address",
-          "name": "_round",
+          "name": "beneficiary",
-          "type": "uint256"
+          "type": "address"
         },
         {
-          "internalType": "address",
+          "internalType": "uint256[]",
-          "name": "_burnedToken",
+          "name": "roundNumbers",
-          "type": "address"
+          "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"
     }
   ]
 }

src/assets/sass/base.sass

@@ -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

src/assets/sass/bubbles.sass

@@ -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)

src/assets/sass/buttons.sass

@@ -1,10 +1,12 @@
 
 .btn
     &.btn-immortal
-        padding: 6px 24px
+        background-color: $red
-        background-color: $button-background-color
         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%),

src/assets/sass/main.sass

@@ -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
+    background-color: #2D2D2D
-    color: $color2
+    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

src/assets/sass/variables.sass

@@ -8,11 +8,16 @@ $tertiary: #A8A8A8
 $tertiary-dark: darken($tertiary, 20%)
 $tertiary-light: lighten($tertiary, 20%)
 
-$color2: white
+$white: #F9F9FA
-$color1: black
+$black: #0F0F0F
+$grey: #808080
+$red: #8B0000
+$purple: #4B0082
 
-$button-color: $color2
+$darkgrey: #202020
-$button-background-color: $color1
+
+$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

src/assets/sass/wave.sass

@@ -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)

src/components/BloodChart.vue

@@ -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="blood-chart-coin"></div>
-					<div :class="[{ drop: true, ['variant' + index]: true }]"></div>
-				</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
+                height: 80px
-                width: 50px
+                width: 80px
-                border-radius: 50px
+                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
+                    background-color: var(--blood-color)
-
+                    position: relative
-.drop
+                    border-radius: 8px 8px 40px 40px
-    width: 1.1em
+                    .blood-chart-bar-percentage
-    height: 1.1em
+                        font-size: 14px
-    border-radius: 0 100% 100% 100%
+                        text-align: center
-    background-color: red
+                        margin-top: 16px
-    position: absolute
+                    .waves
-    animation: drop 3s infinite both
+                        position: absolute
-    top: 32px
+                        top: -8px
-    &.variant0
+                        width: 100%
-        left: 14%
+                        height: 10px
-        animation-delay: -5.2s
+        .blood-chart-element-footer
-    &.variant1
+            margin-top: 32px
-        left: 39%
+            text-align: center
-        animation-delay: -.4s
+            .blood-chart-amount
-
+                font-size: 24px
-    &.variant2
+                margin-bottom: 8px
-        left: 55%
+            .blood-chart-coin
-        animation-delay: -1.5s
+                font-size: 16px
-
-@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)
 </style>

src/components/Navbar.vue

@@ -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: 16px 24px
-            padding: 0 20px
+            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
+                margin-left: auto
-                .main-menu-links
+                .navbar-social-links
-                    margin-right: 48px
+                    display: flex
-                    &:hover, &:active, &:focus
+                    gap: 18px
-                        color: lighten(black, 20%)
+                    .social-bloodline-badge
-                    .main-menu-link
+                        font-size: 16px
-                        cursor: pointer
+                        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
+                flex: 0 0 200px
-                align-self: center
+                justify-content: flex-end
-                a
-                    color: black
-                    &:hover,&:focus, &:active
-                        color: lighten(black, 20%)
-
-                .navbar-hamburger-open
-                    font-size: 35px
-                .parry-twitter
-                    font-size: 30px
-                    margin-left: 32px
 </style>

src/components/SacrificeToken.vue

@@ -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 bloodline-badge" @click="addTokens(1000000)">+1m</div>
-					<div class="sacrifice-adder-step" @click="addTokens(10000000)">+10m</div>
+					<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
-					<div class="sacrifice-adder-step" @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-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
+            width: 132px
-            height: 50px
+            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
+        .sacrifice-fees-img
-            display: flex
+            flex: 0 0 15%
-            .sacrifice-feed-amount
+        .sacrifice-fees-body
-                margin-left: auto
+            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
+                font-size: 14px
-                background-color: var(--tertiary)
-                border: 1px solid var(--tertiary-dark)
                 &:hover,
                 &:active,
                 &:focus

src/components/TokenClaim.vue

@@ -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>

src/main.js

@@ -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)
 

src/stores/contracts.js

@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+export const useContractStore = defineStore("contracts", {
+    state: () => ({
+        list: {
+            
+        }
+	}),
+	getters: {
+	},
+    actions: {
+    }
+});

src/stores/tokens.js

@@ -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 });
+                .send({ from: walletStore.address });
-			console.log("approve", approve);
+            console.log("approve", approve);
-			console.log("this.contract", this.contract);
+            this.loading = false;
+            return approve;
 		},
         async sacrificeToken(amount) {
-            console.log("this.activeToken.", this.activeToken.contractAddress);
+            try {
-			const walletStore = useWalletStore();
+                this.loading = true;
-            console.log("walletStore.address", walletStore.address);
+				console.log("this.activeToken.", this.activeToken.contractAddress);
-			var reward = await this.memeBurner.contract.methods
+				const walletStore = useWalletStore();
-				.sacrificeMeme(this.activeToken.contractAddress, "400000000000000000")
+				console.log("walletStore.address", walletStore.address);
-				.call({ from: walletStore.address });
+				var reward = await this.memeBurner.contract.methods
-            console.log("reward", reward);
+					.sacrificeMeme(this.activeToken.contractAddress, "400000000000000000")
-		},
+					.send({ from: walletStore.address });
-		getTokenContract(token) {
+				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);

src/stores/wallet.js

@@ -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.isConnected();
-                    this.connected = true;
+                    // this.address = data[0];
-                      const tokenStore = useTokenStore();
+                    // this.connected = true;
-						if (tokenStore.activeToken.address) {
+                    //   const tokenStore = useTokenStore();
-							//Token selected but not refreshed
+					// 	if (tokenStore.activeToken.address) {
-							this.getTokenBalance(tokenStore.activeToken.address).then(
+					// 		//Token selected but not refreshed
-								(data) => (tokenStore.activeToken.balance = data)
+					// 		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;
             }
 
         }

src/utils/helper.js

@@ -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);
+        };
+    }
+}

src/views/HomeView.vue

@@ -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">
+				<div class="cycle card bloodline-wrapper">
-					<h2>Cycle 1</h2>
+					<token-claim></token-claim>
-					<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>
 						<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>
+				<div class="card">
-				<p>100% clan owned. No team %, no pre-mine</p>
+					<h2>Tokenomics</h2>
-				<img src="@/assets/img/tokenomics.png" alt="tokenomics" />
+					<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
+    >div
-    img
+        text-align: center
-        display: block
+        img
-        margin-left: auto
+            display: block
-        margin-right: auto
+            margin-left: auto
-        width: 50%
+            margin-right: auto
 .chart-wrapper
     width: 600px
     height: 600px