contract update

replace static 18n
contract update
2023-10-24 06:31:01 +02:00 · 2023-10-23 22:09:42 +02:00 · 2023-10-23 22:00:09 +02:00 · 2023-10-23 21:58:54 +02:00 · 2023-10-23 21:40:07 +02:00 · 2023-10-23 21:39:39 +02:00
47 changed files with 3625 additions and 2868 deletions
@@ -20,10 +20,12 @@
                "sass": "^1.62.1",
                "swiper": "^9.4.1",
                "viem": "^1.4.1",
+                "vite-svg-loader": "^4.0.0",
                "vue": "^3.3.2",
                "vue-collapsed": "^1.2.8",
                "vue-router": "^4.2.0",
-                "vue-toastification": "^2.0.0-rc.5"
+                "vue-toastification": "^2.0.0-rc.5",
+                "vue3-lottie": "^3.2.0"
            },
            "devDependencies": {
                "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
@@ -1533,6 +1535,14 @@
                "@stablelib/wipe": "^1.0.1"
            }
        },
+        "node_modules/@trysound/sax": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+            "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
        "node_modules/@types/connect": {
            "version": "3.4.35",
            "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -2471,8 +2481,7 @@
        "node_modules/boolbase": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-            "dev": true
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
        },
        "node_modules/borsh": {
            "version": "0.7.0",
@@ -2711,6 +2720,44 @@
                "node": ">= 8"
            }
        },
+        "node_modules/css-select": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+            "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+            "dependencies": {
+                "boolbase": "^1.0.0",
+                "css-what": "^6.1.0",
+                "domhandler": "^5.0.2",
+                "domutils": "^3.0.1",
+                "nth-check": "^2.0.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
+        "node_modules/css-tree": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+            "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+            "dependencies": {
+                "mdn-data": "2.0.30",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+            }
+        },
+        "node_modules/css-what": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+            "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+            "engines": {
+                "node": ">= 6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
        "node_modules/cssesc": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2723,6 +2770,36 @@
                "node": ">=4"
            }
        },
+        "node_modules/csso": {
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+            "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+            "dependencies": {
+                "css-tree": "~2.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/css-tree": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+            "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+            "dependencies": {
+                "mdn-data": "2.0.28",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/mdn-data": {
+            "version": "2.0.28",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+            "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+        },
        "node_modules/csstype": {
            "version": "3.1.2",
            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -2799,6 +2876,57 @@
                "node": ">=6.0.0"
            }
        },
+        "node_modules/dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
+            },
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+            }
+        },
+        "node_modules/domelementtype": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ]
+        },
+        "node_modules/domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dependencies": {
+                "domelementtype": "^2.3.0"
+            },
+            "engines": {
+                "node": ">= 4"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
+            }
+        },
+        "node_modules/domutils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+            "dependencies": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domutils?sponsor=1"
+            }
+        },
        "node_modules/duplexify": {
            "version": "4.1.2",
            "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.2.tgz",
@@ -2847,6 +2975,17 @@
                "once": "^1.4.0"
            }
        },
+        "node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
        "node_modules/es6-promise": {
            "version": "4.2.8",
            "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
@@ -3941,6 +4080,11 @@
            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
            "dev": true
        },
+        "node_modules/lodash-es": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+        },
        "node_modules/lodash.isequal": {
            "version": "4.5.0",
            "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -3964,6 +4108,11 @@
                "loose-envify": "cli.js"
            }
        },
+        "node_modules/lottie-web": {
+            "version": "5.12.2",
+            "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+            "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+        },
        "node_modules/lru-cache": {
            "version": "6.0.0",
            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -3984,6 +4133,11 @@
                "sourcemap-codec": "^1.4.8"
            }
        },
+        "node_modules/mdn-data": {
+            "version": "2.0.30",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
+        },
        "node_modules/micro-ftch": {
            "version": "0.3.1",
            "resolved": "https://registry.npmjs.org/micro-ftch/-/micro-ftch-0.3.1.tgz",
@@ -4103,7 +4257,6 @@
            "version": "2.1.1",
            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
            "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-            "dev": true,
            "dependencies": {
                "boolbase": "^1.0.0"
            },
@@ -4993,6 +5146,37 @@
                "node": ">=8"
            }
        },
+        "node_modules/svgo": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+            "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
+            "dependencies": {
+                "@trysound/sax": "0.2.0",
+                "commander": "^7.2.0",
+                "css-select": "^5.1.0",
+                "css-tree": "^2.2.1",
+                "csso": "^5.0.5",
+                "picocolors": "^1.0.0"
+            },
+            "bin": {
+                "svgo": "bin/svgo"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/svgo"
+            }
+        },
+        "node_modules/svgo/node_modules/commander": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
        "node_modules/swiper": {
            "version": "9.4.1",
            "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.4.1.tgz",
@@ -5370,6 +5554,15 @@
                }
            }
        },
+        "node_modules/vite-svg-loader": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz",
+            "integrity": "sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==",
+            "dependencies": {
+                "@vue/compiler-sfc": "^3.2.20",
+                "svgo": "^3.0.2"
+            }
+        },
        "node_modules/vite/node_modules/@esbuild/android-arm": {
            "version": "0.18.20",
            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -5822,6 +6015,21 @@
                "vue": "^3.0.2"
            }
        },
+        "node_modules/vue3-lottie": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.2.0.tgz",
+            "integrity": "sha512-PtNXbv7iD4XGmK8CXd71aLWmILIR6P6VzLMDw6ZzmDAeuJZuJ0MdOVnn50LOARgq+cOFJsn/2z+7tZh0F9T9qw==",
+            "dependencies": {
+                "lodash-es": "^4.17.21",
+                "lottie-web": "5.12.2"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "vue": "^3.2"
+            }
+        },
        "node_modules/web3-eth-abi": {
            "version": "1.10.1",
            "resolved": "https://registry.npmjs.org/web3-eth-abi/-/web3-eth-abi-1.10.1.tgz",
@@ -21,10 +21,12 @@
        "sass": "^1.62.1",
        "swiper": "^9.4.1",
        "viem": "^1.4.1",
+        "vite-svg-loader": "^4.0.0",
        "vue": "^3.3.2",
        "vue-collapsed": "^1.2.8",
        "vue-router": "^4.2.0",
-        "vue-toastification": "^2.0.0-rc.5"
+        "vue-toastification": "^2.0.0-rc.5",
+        "vue3-lottie": "^3.2.0"
    },
    "devDependencies": {
        "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
@@ -16,6 +16,10 @@ import ConnectWallet from "./components/ConnectWallet.vue";
 import BloodSplash from "./components/BloodSplash.vue";
 import { getNetwork, fetchTransaction } from "@wagmi/core";

+import profileIcon from "@/assets/img/profile-icon.svg?component";
+import cycleIcon from "@/assets/img/cycle-icon.svg?component";
+import homeIcon from "@/assets/img/home-icon.svg?component";
+
 const isMobile = ref(false);
 const showPanel = ref(false);
 const splashBlood = ref(0);
@@ -101,7 +105,7 @@ onMounted(async () => {

 	<div class="footer">
 		<div class="footer-inner">
-			<div class="footer-headline">Join Bloodline</div>
+			<div class="footer-headline" v-if="!isMobile">Join Bloodline</div>

 			<div class="footer-social-links">
 				<div class="social-bloodline-badge">
@@ -119,18 +123,29 @@ onMounted(async () => {
 						<font-awesome-icon icon="fa-brands fa-twitter" />
 					</div>
 				</div>
+				<div class="social-bloodline-badge">
+					<div class="social-bloodline-badge-icon">
+						<font-awesome-icon icon="fa-solid fa-blog" />
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
 	<div class="mobile-navigation-bar" v-if="isMobile">
 		<div @click="changeRoute('home')" :class="{ active: route.name === 'home' }">
-			<font-awesome-icon icon="fa-droplet" />
+			<!-- <font-awesome-icon icon="fa-droplet" /> -->
+			<!-- <img src="/assets/img/sacrifice-icon.png" alt="sacrifice-icon" /> -->
+			<homeIcon />
 		</div>
 		<div @click="changeRoute('cycle')" :class="{ active: route.name === 'cycle' }">
-			<font-awesome-icon icon="fa-moon" />
+			<!-- <font-awesome-icon icon="fa-moon" /> -->
+			<!-- <img src="/assets/img/cycle-icon.png" alt="cycle-icon" /> -->
+			<cycleIcon />
 		</div>
 		<div @click="changeRoute('profile')" :class="{ active: route.name === 'profile' }">
-			<font-awesome-icon icon="fa-person" />
+			<!-- <img src="/assets/img/profile-icon.svg  " alt="profile-icon" /> -->
+			<profileIcon />
+			<!-- <font-awesome-icon icon="fa-person" /> -->
 		</div>
 	</div>
 </template>
@@ -139,22 +154,30 @@ onMounted(async () => {

 .footer
    height: auto
-    background-color: var(--midnight-black)
+    background-color: #2D2D2D
+    padding-bottom: 72px
    @media (min-width: 992px)
+        background-color: var(--midnight-black)
        height: 150px
        min-height: 150px
        display: flex
        flex-direction: column
        justify-content: center
+        padding-bottom: unset
+        margin-top: auto
    .footer-inner
-        padding: 16px 0 24px 0
+        padding: 24px 0
        font-size: 24px
        display: flex
        flex-direction: column
        gap: 16px
        align-items: center
+        border-top: 1px solid #000
        @media (min-width: 992px)
+            padding: 16px 0 24px 0
            justify-content: center
+            border-top: unset
+            background-color: transparent
        .footer-headline
            font-size: 16px
        .footer-social-links
@@ -201,8 +224,14 @@ onMounted(async () => {
    div
        font-size: 40px
        cursor: pointer
+        -webkit-tap-highlight-color: transparent
+
+
        &.active
-            color: var(--purple)
+            svg
+                path
+                    color: var(--purple)
+                    fill: var(--purple)

 .modal-overlay
    background-color: rgb(15, 15, 15, 0.7)
@@ -228,7 +257,7 @@ onMounted(async () => {
        z-index: 100
        gap: 16px
        @media (min-width: 992px)
-            top: 142px
+            top: 10%
            right: 24px
            left: unset
            transform: unset
@@ -260,4 +289,10 @@ body:hover::-webkit-scrollbar-thumb

 .toast-header, .toast-body
    font-size: 16px
+
+.Vue-Toastification__container
+    &.bloodline-toast-container
+        &.top-right
+            @media (min-width: 992px)
+                top: 100px
 </style>
@@ -1,6 +1,6 @@
 {
  "contractName": "Bloodline",
-  "contractAddress": "0x51bF3df58D123e8EA43fb2189f18027FD36a08Af",
+  "contractAddress": "0x16351Cd1f3F1eb010758ff9FCf7013f48B0f5495",
  "abi": [
    {
      "inputs": [
@@ -1,6 +1,6 @@
 {
  "contractName": "LiquidityOwner",
-  "contractAddress": "0xF8bc4Ce13263DD4e12070e3192be50310eF7C95a",
+  "contractAddress": "0x460f41499B6dA662ce289b57ba62A75FBd753b5c",
  "abi": [
    {
      "inputs": [
@@ -132,6 +132,35 @@
      "stateMutability": "pure",
      "type": "function"
    },
+    {
+      "inputs": [
+        {
+          "internalType": "int24",
+          "name": "tick",
+          "type": "int24"
+        },
+        {
+          "internalType": "int24",
+          "name": "tickLower",
+          "type": "int24"
+        },
+        {
+          "internalType": "int24",
+          "name": "tickUpper",
+          "type": "int24"
+        }
+      ],
+      "name": "_liquidityCanBeProvided",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
    {
      "inputs": [
        {
@@ -169,6 +198,54 @@
      "stateMutability": "view",
      "type": "function"
    },
+    {
+      "inputs": [
+        {
+          "internalType": "int24",
+          "name": "tickCycle",
+          "type": "int24"
+        }
+      ],
+      "name": "calculateTicksForRange1",
+      "outputs": [
+        {
+          "internalType": "int24",
+          "name": "tickLower",
+          "type": "int24"
+        },
+        {
+          "internalType": "int24",
+          "name": "tickUpper",
+          "type": "int24"
+        }
+      ],
+      "stateMutability": "pure",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "int24",
+          "name": "tickCycle",
+          "type": "int24"
+        }
+      ],
+      "name": "calculateTicksForRange2",
+      "outputs": [
+        {
+          "internalType": "int24",
+          "name": "tickLower",
+          "type": "int24"
+        },
+        {
+          "internalType": "int24",
+          "name": "tickUpper",
+          "type": "int24"
+        }
+      ],
+      "stateMutability": "pure",
+      "type": "function"
+    },
    {
      "inputs": [
        {
@@ -211,6 +288,25 @@
      "stateMutability": "view",
      "type": "function"
    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "name": "cycleTicks",
+      "outputs": [
+        {
+          "internalType": "int24",
+          "name": "",
+          "type": "int24"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
    {
      "inputs": [],
      "name": "memeAltar",
@@ -1,6 +1,6 @@
 {
  "contractName": "MemeAltar",
-  "contractAddress": "0xE4F42F3f8B0E57b1054D457fe3b49a1A10B1aCEa",
+  "contractAddress": "0xAa72C9dB8332c28b4ebcC36D927e967EFC98D78C",
  "abi": [
    {
      "inputs": [
@@ -53,6 +53,11 @@
      "name": "CycleCompletedRegistrationFailed",
      "type": "error"
    },
+    {
+      "inputs": [],
+      "name": "GoalCannotBeZero",
+      "type": "error"
+    },
    {
      "inputs": [],
      "name": "InsufficientOutputAmount",
@@ -215,42 +220,16 @@
      "anonymous": false,
      "inputs": [
        {
-          "components": [
-            {
-              "internalType": "uint40",
-              "name": "b1",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "m1",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "b2",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "m2",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "b3",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "m4",
-              "type": "uint40"
-            }
-          ],
-          "indexed": false,
-          "internalType": "struct MemeAltar.BM",
-          "name": "_bm",
-          "type": "tuple"
+          "indexed": true,
+          "internalType": "uint64",
+          "name": "b",
+          "type": "uint64"
+        },
+        {
+          "indexed": true,
+          "internalType": "uint64",
+          "name": "m",
+          "type": "uint64"
        }
      ],
      "name": "NewBM",
@@ -309,41 +288,14 @@
    {
      "inputs": [
        {
-          "components": [
-            {
-              "internalType": "uint40",
-              "name": "b1",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "m1",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "b2",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "m2",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "b3",
-              "type": "uint40"
-            },
-            {
-              "internalType": "uint40",
-              "name": "m4",
-              "type": "uint40"
-            }
-          ],
-          "internalType": "struct MemeAltar.BM",
-          "name": "newBM",
-          "type": "tuple"
+          "internalType": "uint64",
+          "name": "newB",
+          "type": "uint64"
+        },
+        {
+          "internalType": "uint64",
+          "name": "newM",
+          "type": "uint64"
        }
      ],
      "name": "adjustBM",
@@ -410,12 +362,12 @@
    },
    {
      "inputs": [],
-      "name": "bloodline",
+      "name": "b",
      "outputs": [
        {
-          "internalType": "contract Bloodline",
+          "internalType": "uint64",
          "name": "",
-          "type": "address"
+          "type": "uint64"
        }
      ],
      "stateMutability": "view",
@@ -423,37 +375,12 @@
    },
    {
      "inputs": [],
-      "name": "bm",
+      "name": "bloodline",
      "outputs": [
        {
-          "internalType": "uint40",
-          "name": "b1",
-          "type": "uint40"
-        },
-        {
-          "internalType": "uint40",
-          "name": "m1",
-          "type": "uint40"
-        },
-        {
-          "internalType": "uint40",
-          "name": "b2",
-          "type": "uint40"
-        },
-        {
-          "internalType": "uint40",
-          "name": "m2",
-          "type": "uint40"
-        },
-        {
-          "internalType": "uint40",
-          "name": "b3",
-          "type": "uint40"
-        },
-        {
-          "internalType": "uint40",
-          "name": "m4",
-          "type": "uint40"
+          "internalType": "contract Bloodline",
+          "name": "",
+          "type": "address"
        }
      ],
      "stateMutability": "view",
@@ -662,9 +589,9 @@
      "name": "issuancePrice",
      "outputs": [
        {
-          "internalType": "uint256",
+          "internalType": "uint128",
          "name": "",
-          "type": "uint256"
+          "type": "uint128"
        }
      ],
      "stateMutability": "view",
@@ -683,6 +610,19 @@
      "stateMutability": "view",
      "type": "function"
    },
+    {
+      "inputs": [],
+      "name": "m",
+      "outputs": [
+        {
+          "internalType": "uint64",
+          "name": "",
+          "type": "uint64"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    },
    {
      "inputs": [
        {
@@ -1,6 +1,6 @@
 {
  "contractName": "RewardLocker",
-  "contractAddress": "0x2952253374973DE0ffbFe35269Ca13FaF28B935F",
+  "contractAddress": "0x8b15b2CB5b019472C31aEf487BF700037c321F85",
  "abi": [
    {
      "inputs": [
@@ -0,0 +1,5 @@
+{
+  "contractName": "WETH",
+  "contractAddress": "0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6",
+  "contractAddressMainnet": "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2"
+}
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5332 0.223612C14.5688 -0.68935 16.3324 1.37298 15.6956 3.16362C13.5347 9.2395 14.8624 16.1404 19.3476 20.6276C23.8556 25.1377 30.7963 26.4633 36.8868 24.2619C38.659 23.6213 40.6637 25.369 39.7876 27.3579C39.7616 27.4167 39.7355 27.4752 39.7091 27.534C38.1498 30.9948 35.6553 34.2494 32.4281 36.4315C28.9883 38.7574 24.9319 40 20.7803 40H20.7783C15.9506 39.9948 11.2749 38.3095 7.5529 35.2332C3.83085 32.1569 1.2942 27.8809 0.377993 23.1382C-0.538209 18.3955 0.22314 13.4818 2.53147 9.23928C4.71976 5.21736 8.39949 2.09189 12.4733 0.250546L12.5332 0.223612Z" fill="#F9F9FA"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="30" height="40" viewBox="0 0 30 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4808 0.762253C16.1401 0.28454 15.5867 0 14.9994 0C14.4107 0 13.8586 0.283234 13.5153 0.762253C9.85024 5.87744 0.667969 19.3317 0.667969 25.6686C0.667969 33.5835 7.08316 40 14.9981 40C22.9143 40 29.3308 33.5835 29.3308 25.6686C29.3321 19.3317 20.1459 5.87744 16.4808 0.762253Z" fill="#F9F9FA"/>
+</svg>
@@ -0,0 +1,12 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1478_31440)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8333 12C11.8333 7.58797 15.498 7.6 19.9997 7.6C24.5035 7.6 28.1661 7.58797 28.1661 12C28.1661 16.412 24.5035 20 19.9997 20C15.498 20 11.8333 16.412 11.8333 12ZM39.9114 35.2719C38.4271 28.5539 33.7845 23.5959 27.674 21.3459C30.912 18.7919 32.8005 14.6619 32.1063 10.1399C31.302 4.89386 26.8472 0.695954 21.4697 0.0839537C14.0464 -0.762046 7.75014 4.89797 7.75014 12C7.75014 15.78 9.53858 19.1479 12.3274 21.3459C6.21487 23.5959 1.57433 28.5539 0.088048 35.2719C-0.450933 37.7139 1.558 40 4.10795 40H35.8915C38.4434 40 40.4524 37.7139 39.9114 35.2719Z" fill="#F9F9FA"/>
+<path d="M17.2809 18.8008L16.4813 16.4008L15.2025 15.2008L19.3594 15.2008L18.0813 16.4008L17.2809 18.8008Z" fill="#F9F9FA"/>
+<path d="M23.359 18.8008L22.5594 16.4008L21.2806 15.2008L25.4375 15.2008L24.1594 16.4008L23.359 18.8008Z" fill="#F9F9FA"/>
+</g>
+<defs>
+<clipPath id="clip0_1478_31440">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -20,5 +20,6 @@
        &[disabled], &.btn--disabled
            background-color: darken($purple, 10%)
            cursor: not-allowed
+            color: var(--white-dark)
        &:hover,&:focus,&:active
            background-color: darken($purple, 10%),
@@ -34,8 +34,6 @@ body
    display: flex
    flex-direction: column
    height: 100vh
-    .footer
-        margin-top: auto

 .container
    margin-right: auto
@@ -9,6 +9,7 @@ $tertiary-dark: darken($tertiary, 20%)
 $tertiary-light: lighten($tertiary, 20%)

 $white: #F9F9FA
+$white-dark: darken($white, 20%)
 $black: #0F0F0F
 $grey: #858585
 $grey-light: lighten($grey, 20%)
@@ -31,7 +32,8 @@ $button-background-color: $black
    --tertiary: #{$tertiary}
    --tertiary-light: #{$tertiary-light}
    --tertiary-dark: #{$tertiary-dark}
-    --white: #{#F9F9FA}
+    --white: #{$white}
+    --white-dark: #{$white-dark}
    --grey: #{$grey}
    --grey-light: #{$grey-light}
    --grey2: #{$grey2}
@@ -99,6 +101,14 @@ $button-background-color: $black
    line-height: normal
    // @media (min-width: 992px)
    //     font-size: 30px
+.sub-header-2
+    font-family: Inter
+    font-style: normal
+    font-weight: 400
+    line-height: normal
+    font-size: 24px
+    @media (min-width: 992px)
+        font-size: 32px

 // :root
 //     --font-size-text: 16px
@@ -14,14 +14,15 @@
 			:slidesPerView="3"
 			:centeredSlides="false"
 			:initial-slide="0"
-			:spaceBetween="IsMobile ? 35 : 0"
+			:spaceBetween="0"
 			@swiper="onSwiper"
 		>
 			<swiper-slide class="blood-chart-element" v-for="coin in token" :key="coin.name">
 				<div class="blood-chart-element-header">
 					<div class="blood-chart-coin">
 						<template v-if="cycleStore.getCycleWinner.contractAddress === coin.contractAddress">
-							<img :src="coin.vampwinner2" alt="logo" />
+							<img class="logo" :src="coin.vamplogo" alt="logo" />
+							<img class="crown" src="/assets/img/winnerCrown.png" alt="" />
 						</template>
 						<template v-else>
 							<img :src="coin.vamplogo" alt="logo" />
@@ -71,8 +72,13 @@
 					</div>
 				</div>
 				<div class="blood-chart-element-footer">
-					<div class="blood-chart-amount">
-						{{ formatNumber(coin.amountInBLD / 10n ** tokenStore.memeToken.decimals) }}
+					<div
+						class="blood-chart-amount"
+						:title="formatBigIntDivision(coin.amountInBLD, 10n ** tokenStore.memeToken.decimals)"
+					>
+						{{
+							compactNumber(formatBigIntDivision(coin.amountInBLD, 10n ** tokenStore.memeToken.decimals))
+						}}
 					</div>
 					<div>$BLOOD</div>
 				</div>
@@ -95,7 +101,7 @@

 <script setup>
 import { computed, ref, inject, onMounted } from "vue";
-import { getPercentage, compactNumber, formatNumber } from "@/helper/helper.js";
+import { getPercentage, formatNumber, compactNumber, formatBigIntDivision } from "@/helper/helper.js";
 import { useCycleStore } from "@/stores/cycles";

 import { useMemeburnerStore } from "@/stores/memeburner";
@@ -111,6 +117,8 @@ import "swiper/css/pagination";
 const cycleStore = useCycleStore();
 const tokenStore = useTokenStore();

+const isMobile = inject("isMobile");
+
 const props = defineProps({
 	data: Object,
 });
@@ -125,13 +133,15 @@ function onSwiper(swiper) {
 	swiperInstance.value = swiper;
 }

-const token = computed(() => props.data?.token);
+const token = computed(() => {
+	return props.data?.token.sort((a, b) => (a.amount > b.amount ? -1 : b.amount > a.amount ? 1 : 0));
+});

-//start with visual 5% of the filled bar, because otherwise the percentage number is not visible
+//start with visual 8% of the filled bar, because otherwise the percentage number is not visible
 function getPercentageBloodChart(amount, goal) {
-	let returnNumber = 5;
-	if ((Number(amount) / Number(goal)) * 100 < 5) {
-		returnNumber = 5;
+	let returnNumber = 8;
+	if ((Number(amount) / Number(goal)) * 100 < 8) {
+		returnNumber = 8;
 	} else {
 		returnNumber = (Number(amount) / Number(goal)) * 100;
 	}
@@ -146,11 +156,13 @@ function getPercentageBloodChart(amount, goal) {
    justify-content: center
    // margin-bottom: 80px
    position: relative
+    margin-top: 24px
 .blood-chart
-    height: 750px
+    height: 560px
    width: 100%
    justify-content: space-around
    display: inline-flex
+    overflow: unset
    @media (min-width: 992px)
        gap: 32px
        width: unset
@@ -172,21 +184,31 @@ function getPercentageBloodChart(amount, goal) {
                margin-right: auto
                position: relative
                margin-bottom: 16px
-                overflow: hidden
+                // overflow: hidden
                height: 80px
                width: 80px
                @media (min-width: 992px)
                    height: 72px
                    width: 72px
                img
-                    height: 100%
-                    width: 100%
+                    &.logo
+                        height: 100%
+                        width: 100%
+                        border: 1px solid yellow
+                        border-radius: 50%
+
+                img
+                    &.crown
+                        position: absolute
+                        top: -10px
+                        transform: translate(-50%, -50%)
+                        left: 50%
            .blood-chart-coin-title
                text-align: center
                margin-bottom: 32px
        .blood-chart-element-body
            background-color: rgba(233, 233, 233, 0.2)
-            flex: 0 0 500px
+            flex: 1 1 100%
            width: 60px
            border-radius: 8px 8px 40px 40px
            text-align: left
@@ -69,7 +69,6 @@ const props = defineProps({
        display: flex
        text-align: left
        gap: 16px
-        height: 56px
        .token-logo
            margin-left: auto
    .connected-stake-buttons
@@ -4,12 +4,12 @@
 		<template v-slot:body>
 			<token-name-price
 				:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
-				:price="walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals"
+				:price="formatNumber(walletStore.unclaimedRewards, 10n ** tokenStore.memeToken.decimals)"
 			></token-name-price>
 			<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline logo'"></token-logo>
 		</template>
 		<template v-slot:actions>
-			<template v-if="walletStore.memeToken?.unclaimedRewards > 0">
+			<template v-if="walletStore.unclaimedRewards > 0n">
 				<Transition name="smooth">
 					<div class="connected-stake-buttons" v-show="!stakeMenu">
 						<div class="btn btn-immortal mid-mid-text" @click="claimAll" v-if="stateStake === 0">Claim</div>
@@ -19,19 +19,32 @@
 						<div class="btn btn-immortal stake-button" disabled v-else-if="stateStake === 3">
 							<loading-component></loading-component>
 						</div>
-						<div class="btn btn-immortal mid-mid-text" @click="openStake">Stake</div>
+						<div class="btn btn-immortal mid-mid-text" @click="openStake" v-if="stateStake === 0">
+							Stake
+						</div>
 					</div>
 				</Transition>
 				<Transition name="smooth">
 					<stake-menu
 						v-model="tokenNumber"
 						@close="stakeMenu = false"
-						:amount="walletStore.memeToken?.unclaimedRewards"
+						:amount="walletStore.unclaimedRewards"
 						:stake="stake"
-						v-if="stakeMenu && walletStore.memeToken?.unclaimedRewards"
+						v-if="stakeMenu"
 					>
 						<template v-slot:body>
-							<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 0">
+							<div
+								class="btn btn-immortal stake-button"
+								disabled
+								v-if="
+									tokenNumber > 0 &&
+									BigInt(tokenNumber) * 10n ** tokenStore.memeToken.decimals >
+										walletStore.unclaimedRewards
+								"
+							>
+								Insufficient Balance
+							</div>
+							<div class="btn btn-immortal stake-button" disabled v-else-if="stateClaimComp === 0">
 								Enter Amount
 							</div>
 							<div
@@ -41,10 +54,10 @@
 							>
 								Stake & Claim Rest
 							</div>
-							<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 2">
+							<div class="btn btn-immortal stake-button" disabled v-else-if="stateClaimComp === 2">
 								Sign Transaction
 							</div>
-							<div class="btn btn-immortal stake-button" disabled v-if="stateClaimComp === 3">
+							<div class="btn btn-immortal stake-button" disabled v-else-if="stateClaimComp === 3">
 								<loading-component></loading-component>
 							</div>
 							<div
@@ -55,20 +68,20 @@
 							</div>
 						</template>
 						<template v-slot:message-end>
-							<div class="input-balance" v-if="walletStore.memeToken?.unclaimedRewards">
+							<div class="input-balance">
 								Balance:
-								{{
-									formatNumber(
-										walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals
-									)
-								}}
+								{{ formatNumber(walletStore.unclaimedRewards, 10n ** tokenStore.memeToken.decimals) }}
 							</div>
 						</template>
 					</stake-menu>
 				</Transition>
-				<div class="connected-stake-first-round small-text text-center">
-					You can claim, once the cycle is over.
+			</template>
+			<template v-else-if="cycleStore.rewardsSacrificeCurrentCycle > 0n">
+				<div class="connected-stake-buttons">
+					<div class="btn btn-immortal mid-mid-text btn--disabled">Claim</div>
+					<div class="btn btn-immortal mid-mid-text btn--disabled">Stake</div>
 				</div>
+				<div class="text-center">You can claim, once the cycle is over</div>
 			</template>
 			<template v-else>
 				<div class="btn btn-immortal mid-mid-text text-center" @click="router.push({ name: 'home' })">
@@ -90,6 +103,7 @@ import { waitForTransaction } from "@wagmi/core";
 import LoadingComponent from "@/components/LoadingComponent.vue";
 import StakeSuccessToast from "@/components/toasts/StakeSuccessToast.vue";

+import { useCycleStore } from "@/stores/cycles";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
@@ -102,6 +116,8 @@ const toast = useToast();
 const rewardLockerStore = useRewardLockerStore();
 const walletStore = useWalletStoreV2();
 const tokenStore = useTokenStore();
+const cycleStore = useCycleStore();
+
 const router = useRouter();

 const props = defineProps({
@@ -132,10 +148,8 @@ function openStake() {

 async function stakeAndClaimAllCycles() {
 	try {
-		const unclaimedRewards = walletStore.memeToken?.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
 		stateClaim.value = 2;
-		console.log("unclaimedRewards", unclaimedRewards);
-		const coefficient = BigInt(10000 * tokenNumber.value) / unclaimedRewards;
+		const coefficient = BigInt(10000 * tokenNumber.value) / walletStore.unclaimedRewards;
 		var hash = await rewardLockerStore.stakeAndClaimAllCycles(coefficient);
 		stateClaim.value = 3;
 		const data = await waitForTransaction({
@@ -150,9 +164,9 @@ async function stakeAndClaimAllCycles() {
 		//
 		console.log("rewardData", rewardData);
 		//ClaimedReward (address staker, uint256 reward)
-		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatNumber(BigInt(rewardData.topics[2]), 10n ** tokenStore.memeToken.decimals);
 		showSuccessToast(
-			formatNumber(outputClaim),
+			outputClaim,
 			"Success!",
 			"You just claimed and staked",
 			"Join the next cycle to increase your rewards and win with your clan"
@@ -181,9 +195,9 @@ async function claimAll() {
 		//
 		console.log("rewardData", rewardData);
 		//ClaimedReward (address staker, uint256 reward)
-		const outputClaim = rewardData.topics[2] / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatNumber(BigInt(rewardData.topics[2]), 10n ** tokenStore.memeToken.decimals);
 		showSuccessToast(
-			formatNumber(outputClaim),
+			outputClaim,
 			"Success!",
 			"You just claimed",
 			"Join the next cycle to increase your rewards and win with your clan."
@@ -213,7 +227,7 @@ const stateClaimComp = computed(() => {
 		tokenNumber.value === null ||
 		tokenNumber.value === "" ||
 		tokenNumber.value === 0 ||
-		tokenNumber.value > walletStore.memeToken?.unclaimedRewards
+		BigInt(tokenNumber.value) > walletStore.unclaimedRewards / 10n ** tokenStore.memeToken.decimals
 	) {
 		returnState = 0;
 	} else if (stateClaim.value === 2) {
@@ -11,22 +11,19 @@
 				>
 					<div class="connector-icon">
 						<template v-if="connector.id === 'injected'">
-							<font-awesome-icon :icon="['fas', 'wallet']" />
+							<template v-if="connector.name === 'MetaMask'">
+								<img :src="`/assets/img/connectors/metaMask.svg`" :alt="`${connector.name} Logo`" />
+							</template>
+							<template v-else>
+								<font-awesome-icon :icon="['fas', 'wallet']" />
+							</template>
 						</template>
 						<template v-else>
 							<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
 						</template>
 					</div>
 					<div class="connector-name">
-						<template
-							v-if="
-								connector.id !== 'metaMask' ||
-								(connector.id === 'metaMask' && isMetaMaskInstalled(connector))
-							"
-						>
-							{{ connector.name }}
-						</template>
-						<template v-else> Install {{ connector.name }} </template>
+						{{ connector.name }}
 					</div>
 				</div>
 			</div>
@@ -39,7 +36,7 @@
 				<div class="connected-header-avatar">
 					<img :src="getblocky(walletStore.address)" alt="avatar" />
 				</div>
-				<div class="connected-header-address">
+				<div class="connected-header-address" :title="walletStore.address">
 					{{ getAddressShortName(walletStore.address) }}
 				</div>
 				<div class="connected-header-logout" @click="disconnectWallet">
@@ -51,7 +48,9 @@
 				<div class="connected-token" v-for="token in walletStore.token">
 					<token-name-price
 						:name="tokenStore.getToken(token.contractAddress).name"
-						:price="token.balanceOf / 10n ** tokenStore.getToken(token.contractAddress).decimals"
+						:price="
+							formatNumber(token.balanceOf, 10n ** tokenStore.getToken(token.contractAddress).decimals)
+						"
 					></token-name-price>
 					<div class="connected-token-button">
 						<div class="bloodline-badge grey" @click="badgeClick(token)">
@@ -80,7 +79,7 @@ import TokenNamePrice from "./TokenNamePrice.vue";
 import TokenLogo from "./TokenLogo.vue";
 import StakeComponentV1 from "@/components/StakeComponentV1.vue";

-import { getAddressShortName, getblocky } from "@/helper/helper.js";
+import { getAddressShortName, getblocky, formatNumber } from "@/helper/helper.js";
 import { useRoute, useRouter } from "vue-router";

 import { disconnect } from "@wagmi/core";
@@ -131,10 +130,7 @@ function badgeClick(token) {

 //special case for metaMask, but I think that is the most used wallet
 async function connectWallet(connector) {
-	if (connector.id === "metaMask" && !isMetaMaskInstalled(connector)) {
-		window.open(" https://metamask.io/", "_blank");
-		return;
-	}
+	console.log("connector", connector);
 	instance.parent.emit("update:modelValue", false);
 	await walletStore.connectWallet(toRaw(connector));
 }
@@ -209,7 +205,6 @@ async function connectWallet(connector) {
            display: flex
            gap: 16px
            align-items: center
-            height: 56px
            .connected-token-button
                margin-left: auto
                .bloodline-badge
@@ -1,7 +1,8 @@
 <template>
 	<div class="rewards-wrapper">
 		<div class="rewards-headline low-mid-text">
-			{{ props.title }}
+			<div class="rewards-title">{{ props.title }}</div>
+			<div class="rewards-sub-title" v-if="props.subTitle">{{ props.subTitle }}</div>
 		</div>
 		<div class="rewards-inner">
 			<token-name-price name="$BLOOD" :price="props.amount"></token-name-price>
@@ -16,6 +17,7 @@ import TokenLogo from "@/components/TokenLogo.vue";

 const props = defineProps({
 	title: String,
+	subTitle: String,
 	info: String,
 	amount: [String, Number],
 	image: String,
@@ -33,6 +35,5 @@ const props = defineProps({
        padding: 0 6px 6px 6px
        border-bottom: 1px solid var(--grey, #858585)
        justify-content: space-between
-        height: 56px
        box-sizing: content-box
 </style>
@@ -1,6 +1,6 @@
 <template>
 	<div class="sacrifice-wrapper card card--glow">
-		<div class="sacrifice-headline">Select Sacrifice {{ splashBlood }}</div>
+		<div class="sacrifice-headline">Select Sacrifice</div>
 		<div class="sacrifice-select-tokens">
 			<div class="sacrifice-tokens">
 				<div
@@ -30,7 +30,7 @@
 					:modelValue="sacrificeStore.sacrificeNumber / 10n ** activeToken.decimals"
 					@input="
 						($event) => {
-							const value = BigInt($event.target.value) * 10n ** 18n;
+							const value = BigInt($event.target.value) * 10n ** activeToken.decimals;
 							sacrificeStore.sacrificeNumber = value;
 							processChange(value);
 						}
@@ -56,10 +56,10 @@
 							<template v-else> -{{ steps.name }} </template>
 						</div>
 					</template>
-					<template v-slot:message-end v-if="activeWalletToken?.balanceOf">
+					<template v-slot:message-end v-if="activeWalletToken?.balanceOf >= 0">
 						<div class="input-balance tiny-text">
 							Balance:
-							{{ BigInt(activeWalletToken?.balanceOf) / 10n ** activeToken.decimals }}
+							{{ formatNumber(activeWalletToken?.balanceOf, 10n ** activeToken.decimals) }}
 						</div>
 						<div class="input-max tiny-text" @click="addMaxTokens">Max</div>
 					</template>
@@ -77,7 +77,10 @@
 				}"
 			>
 				<div class="sacrifice-to-body">
-					<token-name-price name="$BLOOD" :price="`≈${formatNumber(output)}`"></token-name-price>
+					<token-name-price
+						name="$BLOOD"
+						:price="`≈${formatNumber(output, 10n ** activeToken.decimals)}`"
+					></token-name-price>
 					<token-logo :img="activeToken.vamp.logo" :size="64" :alt="activeToken.vamp.name"></token-logo>
 				</div>

@@ -97,7 +100,9 @@
 						>
 							No Staking Bonus
 						</div>
-						<div class="mid-mid-text" v-else>+ {{ stakingOutput }} Staking Bonus</div>
+						<div class="mid-mid-text" v-else>
+							+ {{ formatNumber(stakingOutput, 10n ** activeToken.decimals) }} Staking Bonus
+						</div>
 						<div class="icon">
 							<font-awesome-icon icon="chevron-down" />
 						</div>
@@ -243,6 +248,7 @@ const stateComputed = computed(() => {
 });
 const processChange = debounce(async (value) => {
 	const rewardValue = await sacrificeStore.getRewardsFor(value, activeToken.value);
+	console.log("rewardValue", rewardValue);
 	output.value = rewardValue.output;
 	stakingOutput.value = rewardValue.staking;
 });
@@ -278,7 +284,7 @@ async function approveToken(amount) {
 		console.log("data", data);
 		activeToken.value.allowance = await tokenStore.allowance();
 		sacrificeStore.sacrificeState = 1;
-		approveToast.value = showApprovedToast();
+		showApprovedToast();
 	} catch (error) {
 		console.error(error);
 		throw new Error(error);
@@ -322,10 +328,8 @@ function showApprovedToast(value, header, subheader, info) {
 			subheader: subheader,
 			info: info,
 		},
-		// Listen and react to events using callbacks. In this case we listen for
-		// the "click" event emitted when clicking the toast button
 		listeners: {
-			sacrificed: showSplash,
+			// sacrificed: showSplash,
 		},
 	};

@@ -333,10 +337,10 @@ function showApprovedToast(value, header, subheader, info) {
 	return toast(content, {
 		position: "top-right",
 		icon: false,
+		timeout: 5000,
 		closeOnClick: false,
 		// toastClassName: "modal-overlay",
 		hideProgressBar: true,
-		timeout: false,
 		toastClassName: "approve-toast toast-card",
 	});
 }
@@ -347,6 +351,7 @@ function showSplash() {

 //call function in the store and remove icon,
 async function sacrificeToken() {
+	console.log("activeToken.value", activeToken.value);
 	var result = await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, activeToken.value);
 	if (result) {
 		showSplash();
@@ -358,8 +363,8 @@ async function changeActiveToken(token) {
 	console.log("changeActiveToken");
 	tokenStore.activeToken = token;
 	if (walletStore.connected) {
-		//TODO, wenn connected, dann all diese Daten laden?
-		tokenStore.activeToken.balance = await walletStore.getTokenBalance(token);
+		// //TODO, wenn connected, dann all diese Daten laden?
+		// tokenStore.activeToken.balance = await walletStore.getTokenBalance(token);
 		tokenStore.activeToken.allowance = Number(await tokenStore.allowance());
 	}
 	var rewards = await sacrificeStore.getRewardsFor(sacrificeStore.sacrificeNumber, token);
@@ -483,6 +488,7 @@ async function changeActiveToken(token) {
        .value-adder
            display: flex
            gap: 6px
+            flex-wrap: wrap
            .sacrifice-adder-step
                font-size: 12px
                align-items: center
@@ -513,7 +519,6 @@ async function changeActiveToken(token) {
        .sacrifice-to-body
            display: flex
            justify-content: space-between
-            height: 56px
 .sacrificed-info
    display: flex
    padding: 8px 24px
@@ -31,56 +31,61 @@
 			<div class="connected-stake-body">
 				<slot name="body">
 					<token-name-price
-						v-if="walletStore.memeToken?.staked"
-						:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
-						:price="formatNumber(walletStore.memeToken?.staked / 10n ** tokenStore.memeToken.decimals)"
+						name="$BLOOD staked"
+						:price="formatNumber(walletStore.staked, 10n ** tokenStore.memeToken.decimals)"
 					></token-name-price>
 					<token-logo img="/assets/img/token/bloodline.png" :alt="'bloodline-token'"></token-logo>
-					<token-name-price class="stake-reward" name="Extra Reward" price="+25%"></token-name-price>
+					<token-name-price :variant="true" class="stake-reward" name="Bonus" price="+25%"></token-name-price>
 				</slot>
 			</div>
 			<slot name="actions">
 				<div class="connected-stake-buttons" v-if="!stakeMenu">
-					<div class="mid-mid-text text-center" disabled v-if="!walletStore.connected">
-						Please Connect Your Wallet
-					</div>
-					<div
-						class="btn btn-immortal mid-mid-text"
-						disabled
-						v-if="walletStore.connected && cycleStore.currentCycle === 1"
-					>
-						Stake
-					</div>
-					<div
-						class="btn btn-immortal mid-mid-text"
-						v-else-if="walletStore.connected && cycleStore.currentCycle > 1"
-						@click="openStake"
-					>
-						Stake
-					</div>
-					<div
-						v-if="
-							walletStore.connected &&
-							((walletStore.memeToken?.staked === 0 && !stakeonly) || cycleStore.currentCycle === 1)
-						"
-						class="btn btn-immortal btn--disabled mid-mid-text"
-					>
-						Unstake
-					</div>
-					<div
-						v-else-if="walletStore.connected && !stakeonly"
-						class="btn btn-immortal mid-mid-text"
-						@click="openUnstake"
-					>
-						Unstake
-					</div>
+					<template v-if="!walletStore.connected">
+						<div class="mid-mid-text text-center" disabled>Please Connect Your Wallet</div>
+					</template>
+					<template v-else-if="walletStore.connected && !ableToUnstake">
+						<div class="btn btn-immortal mid-mid-text" disabled v-if="cycleStore.currentCycle === 1">
+							Stake
+						</div>
+						<div
+							class="btn btn-immortal mid-mid-text"
+							v-else-if="cycleStore.currentCycle > 1"
+							@click="openStake"
+						>
+							Stake
+						</div>
+						<div
+							v-if="(walletStore.memeToken?.staked === 0n && !stakeonly) || cycleStore.currentCycle === 1"
+							class="btn btn-immortal btn--disabled mid-mid-text"
+						>
+							Unstake
+						</div>
+						<div v-else-if="!stakeonly" class="btn btn-immortal mid-mid-text" @click="openUnstake">
+							Order Unstake
+						</div>
+					</template>
+					<template v-else-if="walletStore.connected && ableToUnstake">
+						<div
+							class="btn btn-immortal mid-mid-text text-center"
+							v-if="unstakeState === 0 && walletStore.orderedUnstakedAmount > 0n && ableToUnstake"
+							@click="unstake"
+						>
+							Claim Unstaked $BLOOD
+						</div>
+						<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 1">
+							Sign Transaction
+						</div>
+						<div class="btn btn--disabled mid-mid-text text-center" v-else-if="unstakeState === 2">
+							<loading-component></loading-component>
+						</div>
+					</template>
 				</div>
 				<Transition name="smooth">
 					<stake-menu
 						v-model="tokenNumber"
 						@close="stakeMenu = false"
 						:stake="stake"
-						:amount="walletStore.memeToken?.balanceOf"
+						:amount="walletStore.balanceOf"
 						v-if="stakeMenu & !unstakeMenu"
 					>
 						<template v-slot:body>
@@ -105,7 +110,8 @@
 						</template>
 						<template v-slot:message-end>
 							<div class="input-balance">
-								Balance: {{ walletStore.memeToken?.balanceOf / 10n ** tokenStore.memeToken.decimals }}
+								Balance:
+								{{ formatNumber(walletStore.balanceOf, 10n ** tokenStore.memeToken.decimals) }}
 							</div>
 						</template>
 					</stake-menu>
@@ -133,9 +139,17 @@
 						</div>
 					</div>
 				</Transition>
-				<div class="connected-stake-first-round small-text text-center" v-if="cycleStore.currentCycle === 0">
+				<div class="connected-stake-first-round small-text text-center" v-if="cycleStore.currentCycle === 1">
 					No $BLOOD on the market. Staking is activated after the first cycle is finished.
 				</div>
+				<div
+					class="connected-stake-first-round small-text text-center"
+					v-if="walletStore.orderedUnstakedAmount > 0n && !ableToUnstake"
+				>
+					You can claim
+					{{ formatNumber(walletStore.orderedUnstakedAmount, 10n ** tokenStore.memeToken.decimals) }}
+					$BLOOD next cycle.
+				</div>
 			</slot>
 			<slot></slot>
 		</div>
@@ -196,6 +210,7 @@ const loading = ref(false);
 * state 4 staked
 */
 const state = ref(0);
+const unstakeState = ref(0);

 function openStake() {
 	stake.value = true;
@@ -209,6 +224,31 @@ function openUnstake() {
 	stakeMenu.value = true;
 }

+async function unstake() {
+	try {
+		unstakeState.value = 1;
+		const hash = await rewardLockerStore.unstake();
+		unstakeState.value = 2;
+		const data = await waitForTransaction({
+			hash: hash,
+		});
+		var rewardData = data.logs.find((logObject) => {
+			return logObject.topics.find(
+				(topic) => topic === "0xb89343427f692590c388d6346a8e42ea497eb6682a04db1a53f77ea81771ca91"
+			);
+		});
+		console.log("rewardData", rewardData);
+
+		const outputClaim = formatNumber(BigInt(rewardData.topics[3]), 10n ** tokenStore.memeToken.decimals);
+		showSuccessToast(outputClaim, "Success!", "You just unstaked");
+		await walletStore.loadWalletData();
+	} catch (error) {
+		console.error("unstake", error);
+	} finally {
+		unstakeState.value = 0;
+	}
+}
+
 async function orderUnstake() {
 	try {
 		state.value = 2;
@@ -220,22 +260,18 @@ async function orderUnstake() {
 		state.value = 4;
 		var rewardData = data.logs.find((logObject) => {
 			return logObject.topics.find(
-				(topic) => topic === "0xd0813ff03c470dcc7baa9ce36914dc2febdfd276d639deffaac383fd3db42ba3"
+				(topic) => topic === "0xf86340d97020c624010a208b733db95795281fbc45cb6e6a40d161f91fa3e4a0"
 			);
 		});
 		console.log("rewardData", rewardData);

-		const outputClaim = Number(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
-		showSuccessToast(
-			formatNumber(outputClaim),
-			"Success!",
-			"You just unstaked",
-			"You can claim your stake next cycle."
-		);
-		await walletStore.loadWalletData();
+		const outputClaim = formatNumber(BigInt(rewardData.topics[3]), 10n ** tokenStore.memeToken.decimals);
+		showSuccessToast(outputClaim, "Success!", "You just unstaked", "You can claim your stake next cycle.");
+		stakeMenu.value = false;
 	} catch (error) {
 		console.error("orderUnstake", error);
 	} finally {
+		await walletStore.loadWalletData();
 		state.value = 0;
 	}
 }
@@ -257,17 +293,17 @@ async function stakeToken() {
 		//
 		console.log("rewardData", rewardData);

-		const outputClaim = BigInt(rewardData.topics[3]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatNumber(BigInt(rewardData.topics[3]), 10n ** tokenStore.memeToken.decimals);
 		console.log("data", data);
 		state.value = 0;
-		await walletStore.loadWalletData();
 		showSuccessToast(
-			formatNumber(outputClaim),
+			outputClaim,
 			"Success!",
 			"You just staked",
 			"Your next sacrifice will get an extra staking bonus as a reward."
 		);
-		//reload data
+		await walletStore.loadWalletData();
+		stakeMenu.value = false;
 	} catch (error) {
 		console.error(error);
 		throw new Error(error);
@@ -276,6 +312,15 @@ async function stakeToken() {
 	}
 }

+const ableToUnstake = computed(() => {
+	var cycleList = walletStore.memeToken?.orderedUnstakedCycles?.findIndex((obj) => obj.result > 0n);
+	console.log("cycleList", cycleList);
+	if (cycleList && cycleList > -1 && cycleList + 1 <= cycleStore.currentCycle) {
+		return true;
+	}
+	return false;
+});
+
 const stateStake = computed(() => {
 	let returnState = 0;
 	if (state.value === 2) {
@@ -14,7 +14,13 @@
 		<div class="stake-menu-actions">
 			<slot name="body">
 				<div class="input-balance">Balance: {{ walletStore.memeToken.balanceOf }}</div>
-				<div class="btn btn-immortal stake-button" @click="stakeBloodline" v-if="props.stake">Stake</div>
+				<div
+					class="btn btn-immortal stake-button"
+					@click="rewardLockerStore.stakeBloodline(tokenNumber)"
+					v-if="props.stake"
+				>
+					Stake
+				</div>
 				<div class="btn btn-immortal stake-button" @click="unstakeBloodline" v-else>Unstake for Next Cycle</div>
 				<div class="btn btn-immortal black" @click="emit('close')">Cancel</div>
 			</slot>
@@ -30,6 +36,7 @@ import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useRewardLockerStore } from "@/stores/rewardlocker";
 import { useTokenStore } from "@/stores/tokens";
 import { createPermitObject, getSignatureRSV } from "@/helper/blockchain.js";
+import { formatNumber } from "@/helper/helper.js";

 import { signTypedData } from "@wagmi/core";

@@ -39,8 +46,8 @@ const tokenStore = useTokenStore();

 const props = defineProps({
 	stake: Boolean,
-	modelValue: Number,
-	amount: Number,
+	modelValue: [Number, BigInt],
+	amount: [Number, BigInt],
 });

 const emit = defineEmits(["close", "update:modelValue"]);
@@ -48,18 +55,19 @@ const emit = defineEmits(["close", "update:modelValue"]);
 async function addTokensPercent(value) {
 	console.log("value", value);
 	console.log("props.amount", props.amount);
-	console.log(walletStore.memeToken.balanceOf / 10n ** tokenStore.memeToken.decimals);
 	let amount;
 	if (props.amount !== undefined || props.amount !== null) {
-		console.log("props.amount", props.amount);
-		amount = ((props.amount / 10n ** tokenStore.memeToken.decimals) * value) / 100n;
+		//todo function to calculate correct bigInt value (maybe use string and split)
+		amount = (BigInt(props.amount) * value) / 100n;
 	} else if (props.stake) {
-		amount = ((walletStore.memeToken.balanceOf / 10n ** tokenStore.memeToken.decimals) * value) / 100n;
+		amount = (walletStore.memeToken.balanceOf * value) / 100n;
 	} else {
-		amount = ((walletStore.memeToken.staked / 10n ** tokenStore.memeToken.decimals) * value) / 100n;
+		amount = (walletStore.memeToken.staked * value) / 100n;
 	}
+	console.log("amount123", amount);
+	amount = amount / 10n ** tokenStore.memeToken.decimals;
 	console.log("amount", amount);
-	emit("update:modelValue", Number(amount));
+	emit("update:modelValue", amount);
 }

 async function unstakeBloodline() {
@@ -21,37 +21,40 @@
 		</div> -->
 		<div class="rewards-list">
 			<rewards-wrapper
-				v-if="getCurrentCycleData?.rewards_sacrifice !== undefined"
 				title="Sacrafice Reward"
 				coin="$BLOOD"
-				:amount="formatNumber(getCurrentCycleData?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals)"
+				:amount="formatNumber(rewardsSacrifice, 10n ** tokenStore.memeToken.decimals)"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
-				v-if="getCurrentCycleData?.rewards_staking !== undefined"
 				title="Staking Bonus"
 				coin="$BLOOD"
-				:amount="formatNumber(getCurrentCycleData?.rewards_staking / 10n ** tokenStore.memeToken.decimals)"
-				info="max: 312m"
+				:amount="formatNumber(rewardsStaking, 10n ** tokenStore.memeToken.decimals)"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
-				v-if="getCurrentCycleData?.rewards_clan !== undefined"
 				title="Clan Bonus"
+				:subTitle="rewardsClan > 0 ? clanBonusPercentage : null"
 				coin="$BLOOD"
-				:amount="formatNumber(getCurrentCycleData?.rewards_clan / 10n ** tokenStore.memeToken.decimals)"
-				image="/assets/img/vampir.png"
+				:amount="formatNumber(rewardsClan, 10n ** tokenStore.memeToken.decimals)"
+				:image="
+					activeCycle === currentCycle || !cycleStore.getCurrentCycleData?.winner.vamplogo
+						? '/assets/img/token/notoken.png'
+						: cycleStore.getCurrentCycleData?.winner.vamplogo
+				"
 			/>
 		</div>
 		<div class="rewards-total-wrapper">
 			<div class="rewards-total-headline sub-header">Total Reward</div>
-			<div class="rewards-total-inner bloodline-border bloodline-border--variant1">
+			<div
+				class="rewards-total-inner bloodline-border bloodline-border--variant1"
+				:class="{ purple: rewardsTotal > 0n && activeCycle !== currentCycle }"
+			>
 				<token-name-price
-					v-if="getCurrentCycleData?.rewards_total !== undefined"
 					name="$BLOOD"
-					:price="formatNumber(getCurrentCycleData?.rewards_total / 10n ** tokenStore.memeToken.decimals)"
+					:price="formatNumber(rewardsTotal, 10n ** tokenStore.memeToken.decimals)"
 				></token-name-price>
-				<token-logo img="/assets/img/vampir.png" :alt="'vampire'"></token-logo>
+				<token-logo img="/assets/img/vampir.png" :size="64" :alt="'vampire'"></token-logo>
 			</div>
 		</div>
 		<div class="claim-button">
@@ -59,17 +62,34 @@
 				<button class="btn btn-immortal sub-header" @click="showPanel = true">Connect</button>
 			</template>
 			<template v-else-if="activeCycle === currentCycle">
-				<button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">Sacrifice</button>
+				<template v-if="rewardsSacrifice > 0n">
+					<div class="stake-buttons">
+						<button class="btn btn-immortal sub-header btn--disabled">Claim</button>
+						<button class="btn btn-immortal sub-header btn--disabled">Stake</button>
+					</div>
+					<div>You can claim once the current cycle is finished and the clan bonus calculated</div>
+				</template>
+				<template v-else>
+					<button class="btn btn-immortal sub-header" @click="router.push({ name: 'home' })">
+						Sacrifice
+					</button>
+				</template>
 			</template>
-			<template v-else-if="getCurrentCycleData?.rewards_total > 0">
+			<template v-else-if="rewardsTotal > 0">
 				<Transition name="smooth">
 					<div class="stake-buttons" v-show="!stakeMenu">
-						<div class="btn btn-immortal" v-if="stateClaimedComp === 0" @click="claimRewards">Claim</div>
-						<div class="btn btn-immortal" disabled v-if="stateClaimedComp === 2">Sign Transaction</div>
-						<div class="btn btn-immortal" disabled v-if="stateClaimedComp === 3">
+						<div class="btn btn-immortal sub-header" v-if="stateClaimedComp === 0" @click="claimRewards">
+							Claim
+						</div>
+						<div class="btn btn-immortal sub-header" disabled v-if="stateClaimedComp === 2">
+							Sign Transaction
+						</div>
+						<div class="btn btn-immortal sub-header" disabled v-if="stateClaimedComp === 3">
 							<loading-component></loading-component>
 						</div>
-						<div class="btn btn-immortal" @click="openStake">Stake</div>
+						<div class="btn btn-immortal sub-header" v-if="stateClaimedComp === 0" @click="openStake">
+							Stake
+						</div>
 					</div>
 				</Transition>
 				<Transition name="smooth">
@@ -77,24 +97,36 @@
 						v-model="tokenNumber"
 						@close="stakeMenu = false"
 						:stake="stake"
-						:amount="getCurrentCycleData?.rewards_total"
+						:amount="rewardsTotal"
 						v-if="stakeMenu"
 					>
 						<template v-slot:body>
-							<div class="btn btn-immortal stake-button" disabled v-if="stateStakeClaimComp === 0">
+							<div
+								class="btn btn-immortal sub-header stake-button"
+								disabled
+								v-if="stateStakeClaimComp === 0"
+							>
 								Enter Amount
 							</div>
 							<div
-								class="btn btn-immortal stake-button"
+								class="btn btn-immortal sub-header stake-button"
 								v-else-if="stateStakeClaimComp === 1"
 								@click="stakeAndClaim"
 							>
 								Stake & Claim Rest
 							</div>
-							<div class="btn btn-immortal stake-button" disabled v-if="stateStakeClaimComp === 2">
+							<div
+								class="btn btn-immortal sub-header stake-button"
+								disabled
+								v-if="stateStakeClaimComp === 2"
+							>
 								Sign Transaction
 							</div>
-							<div class="btn btn-immortal stake-button" disabled v-if="stateStakeClaimComp === 3">
+							<div
+								class="btn btn-immortal sub-header stake-button"
+								disabled
+								v-if="stateStakeClaimComp === 3"
+							>
 								<loading-component></loading-component>
 							</div>
 							<div
@@ -128,7 +160,7 @@ import { waitForTransaction } from "@wagmi/core";
 import LoadingComponent from "@/components/LoadingComponent.vue";
 import TokenNamePrice from "@/components/TokenNamePrice.vue";
 import TokenLogo from "@/components/TokenLogo.vue";
-import { formatNumber } from "@/helper/helper.js";
+import { formatNumber, formatBigIntDivision } from "@/helper/helper.js";
 import { showSuccessToast } from "@/helper/toast.js";

 const showPanel = inject("showPanel");
@@ -139,7 +171,8 @@ const tokenStore = useTokenStore();
 const cycleStore = useCycleStore();
 const router = useRouter();

-const { activeCycle, currentCycle, getCurrentCycleData } = storeToRefs(cycleStore);
+const { activeCycle, currentCycle, getCurrentCycleData, rewardsSacrifice, rewardsStaking, rewardsClan, rewardsTotal } =
+	storeToRefs(cycleStore);

 const stakeMenu = ref(false);
 const stake = ref(null);
@@ -149,13 +182,16 @@ const stateStakeClaim = ref(0);

 async function stakeAndClaim() {
 	try {
+		console.log("stakeAndClaim");
 		console.log(tokenNumber.value);
-		console.log(getCurrentCycleData.value.rewards_total);
-		const coefficient = (10000 * tokenNumber.value) / getCurrentCycleData.value.rewards_total;
+		console.log(rewardsTotal.value);
 		stateStakeClaim.value = 2;
+		console.log("hier1");
+		const coefficient = (10000n * BigInt(tokenNumber.value)) / rewardsTotal.value;
 		var hash = await rewardLockerStore.stakeAndClaimCycle(coefficient, cycleStore.activeCycle);
-		console.log("hash");
+		console.log("hier2");
 		stateStakeClaim.value = 3;
+		console.log("hash");
 		const data = await waitForTransaction({
 			hash: hash,
 		});
@@ -176,23 +212,25 @@ async function stakeAndClaim() {
 		//
 		console.log("rewardData", rewardData);
 		console.log("stakeData", stakeData);
-		const outputClaim = Number(rewardData?.topics[2]) / 10 ** tokenStore.memeToken.decimals;
-		const outputStaked = Number(stakeData?.topics[3]) / 10 ** tokenStore.memeToken.decimals;
+		const outputClaim = BigInt(rewardData?.topics[2]);
+		const outputStaked = BigInt(stakeData?.topics[3]);
 		showSuccessToast(
-			formatNumber(outputClaim + outputStaked),
+			formatNumber(outputClaim + outputStaked, 10n ** tokenStore.memeToken.decimals),
 			"Success!",
 			"You just claimed and staked",
 			"Join the next cycle to increase your rewards and win with your clan."
 		);
 		tokenNumber.value = 0;
 		stakeMenu.value = false;
-		await cycleStore.fillCycle(activeCycle.value, true);
 		await walletStore.loadWalletData();
 	} catch (error) {
 		console.error("stakeAndClaim", error);
 	} finally {
 		const walletStore = useWalletStoreV2();
 		await walletStore.loadWalletData();
+		console.log("finally1");
+		await cycleStore.fillCycle(activeCycle.value, true);
+		console.log("finally2");
 		stateStakeClaim.value = 1;
 	}
 }
@@ -225,9 +263,9 @@ async function claimRewards() {
 		//
 		console.log("rewardData", rewardData);

-		const outputClaim = BigInt(rewardData.topics[2]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = formatNumber(BigInt(rewardData.topics[2]), 10n ** tokenStore.memeToken.decimals);
 		showSuccessToast(
-			formatNumber(outputClaim),
+			outputClaim,
 			"Success!",
 			"You just claimed",
 			"Join the next cycle to increase your rewards and win with your clan."
@@ -241,6 +279,16 @@ async function claimRewards() {
 	}
 }

+const clanBonusPercentage = computed(() => {
+	return (
+		(
+			(formatBigIntDivision(rewardsClan.value, 10n ** tokenStore.memeToken.decimals, 8) /
+				formatBigIntDivision(rewardsTotal.value, 10n ** tokenStore.memeToken.decimals, 8)) *
+			100
+		).toFixed(2) + "%"
+	);
+});
+
 const stateClaimedComp = computed(() => {
 	let returnState = 0;
 	if (stateClaim.value === 2) {
@@ -254,19 +302,19 @@ const stateClaimedComp = computed(() => {
 const stateStakeClaimComp = computed(() => {
 	console.log("stateStakeClaimComp");
 	let returnState = 0;
-	if (
-		tokenNumber.value === null ||
-		tokenNumber.value === "" ||
-		tokenNumber.value === 0 ||
-		tokenNumber.value > walletStore.memeToken?.unclaimedRewards
-	) {
-		returnState = 0;
-	} else if (stateStakeClaim.value === 2) {
+	if (stateStakeClaim.value === 2) {
 		returnState = 2;
 	} else if (stateStakeClaim.value === 3) {
 		returnState = 3;
 	} else if (tokenNumber.value !== null || tokenNumber.value !== "" || tokenNumber.value > 0) {
 		returnState = 1;
+	} else if (
+		tokenNumber.value === null ||
+		tokenNumber.value === "" ||
+		tokenNumber.value === 0 ||
+		BigInt(tokenNumber.value) > walletStore.unclaimedRewards / 10n ** tokenStore.memeToken.decimals
+	) {
+		returnState = 0;
 	}
 	return returnState;
 });
@@ -284,6 +332,9 @@ const stateStakeClaimComp = computed(() => {
        text-align: left
    .claim-button
        text-align: center
+        display: flex
+        flex-direction: column
+        gap: 24px
    .stake-buttons
        display: flex
        text-align: center
@@ -307,7 +358,6 @@ const stateStakeClaimComp = computed(() => {
        justify-content: space-between
        text-align: left
        box-sizing: content-box
-        height: 56px
        .rewards-left
            display: flex
            flex-direction: column
@@ -7,6 +7,7 @@
 					:value="props.modelValue"
 					:placeholder="0"
 					type="number"
+					pattern="\d*"
 				/>
 				<div class="value-adder">
 					<slot class="value-adder" name="message"></slot>
@@ -14,7 +15,7 @@
 				</div>
 			</div>
 			<div class="right-side">
-				<token-logo :img="props.logo" :alt="'vampir'"></token-logo>
+				<token-logo v-if="props.logo" :img="props.logo" :alt="'vampir'"></token-logo>
 			</div>
 		</div>
 	</div>
@@ -26,7 +27,7 @@ import TokenLogo from "@/components/TokenLogo.vue";
 const props = defineProps({
 	modelValue: [String, Number],
 	logo: String,
-	max: Number,
+	max: [BigInt, Number],
 });

 const emit = defineEmits(["update:modelValue"]);
@@ -1,7 +1,9 @@
 <template>
 	<div class="token-price-wrapper">
-		<div class="token-name small-text">{{ props.name }}</div>
-		<div class="token-price sub-header">{{ props.price }}</div>
+		<div class="token-name tiny-text">{{ props.name }}</div>
+		<div class="token-price" :class="{ 'sub-header-2': !props.variant, 'sub-header': props.variant }">
+			{{ props.price }}
+		</div>
 	</div>
 </template>

@@ -9,6 +11,11 @@
 const props = defineProps({
 	name: String,
 	price: [Number, String],
+	variant: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
 });
 </script>

@@ -1,18 +1,6 @@
 <template>
 	<div class="approve-card">
-		<div class="left-side low-mid-text">
-			Transaction<br />
-			Successful
-		</div>
-		<div class="right-side">
-			<div class="btn btn-immortal tiny-text" v-if="stateComputed === 1" @click="sacrificeClick">
-				Sacrifice 🩸
-			</div>
-			<div class="btn btn-immortal tiny-text" disabled v-if="stateComputed === 2">Sign Transaction</div>
-			<div class="btn btn-immortal tiny-text" disabled v-if="stateComputed === 3">
-				<loading-component></loading-component>
-			</div>
-		</div>
+		<div class="left-side low-mid-text">Transaction Successful</div>
 	</div>
 </template>
 <script setup>
@@ -44,41 +32,6 @@ const splashBlood = inject("splashBlood");
 function closeToast() {
 	toast.dismiss(id);
 }
-
-const stateComputed = computed(() => {
-	let returnState = 0;
-	if (
-		sacrificeStore.sacrificeNumber === null ||
-		sacrificeStore.sacrificeNumber === "" ||
-		sacrificeStore.sacrificeNumber === 0
-	) {
-		returnState = 0;
-	} else if (sacrificeStore.sacrificeState === 2) {
-		returnState = 2;
-	} else if (sacrificeStore.sacrificeState === 3) {
-		returnState = 3;
-	} else if (
-		sacrificeStore.sacrificeNumber !== null ||
-		sacrificeStore.sacrificeNumber !== "" ||
-		sacrificeStore.sacrificeNumber > 0
-	) {
-		returnState = 1;
-	}
-	return returnState;
-});
-
-async function sacrificeClick() {
-	try {
-		var result = await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, tokenStore.activeToken);
-		if (result) {
-			emit("sacrificed");
-		}
-	} catch (error) {
-		console.error("error", error);
-	} finally {
-		closeToast();
-	}
-}
 </script>
 <style lang="sass">
 .Vue-Toastification__container
@@ -10,7 +10,7 @@
 			</div>
 			<div class="amount-number">
 				<div class="token-amount number-mobile">{{ props.value }}</div>
-				<div class="token-name">$Blood</div>
+				<div class="token-name">$BLOOD</div>
 			</div>
 			<div class="info toast-body">
 				{{ props.info }}
@@ -0,0 +1,86 @@
+<template>
+	<div class="network-switch-card">
+		<div>Please switch Network to</div>
+		<div>
+			<b>{{ props.network.chains[0].name }}</b>
+		</div>
+	</div>
+</template>
+<script setup>
+import LoadingComponent from "@/components/LoadingComponent.vue";
+import { getCurrentInstance, computed, watch, inject } from "vue";
+import { useTokenStore } from "@/stores/tokens";
+import { useSacrificeStore } from "@/stores/sacrifice";
+
+import CardComponent from "@/components/CardComponent.vue";
+import { useToast } from "vue-toastification";
+
+const emit = defineEmits(["sacrificed"]);
+
+const props = defineProps({
+	network: Object,
+});
+
+const toast = useToast();
+const tokenStore = useTokenStore();
+const sacrificeStore = useSacrificeStore();
+
+const instance = getCurrentInstance();
+const id = instance.attrs["toast-id"];
+const splashBlood = inject("splashBlood");
+
+function closeToast() {
+	toast.dismiss(id);
+}
+
+const stateComputed = computed(() => {
+	let returnState = 0;
+	if (
+		sacrificeStore.sacrificeNumber === null ||
+		sacrificeStore.sacrificeNumber === "" ||
+		sacrificeStore.sacrificeNumber === 0
+	) {
+		returnState = 0;
+	} else if (sacrificeStore.sacrificeState === 2) {
+		returnState = 2;
+	} else if (sacrificeStore.sacrificeState === 3) {
+		returnState = 3;
+	} else if (
+		sacrificeStore.sacrificeNumber !== null ||
+		sacrificeStore.sacrificeNumber !== "" ||
+		sacrificeStore.sacrificeNumber > 0
+	) {
+		returnState = 1;
+	}
+	return returnState;
+});
+
+async function sacrificeClick() {
+	try {
+		var result = await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, tokenStore.activeToken);
+		if (result) {
+			emit("sacrificed");
+		}
+	} catch (error) {
+		console.error("error", error);
+	} finally {
+		closeToast();
+	}
+}
+</script>
+<style lang="sass">
+.Vue-Toastification__container
+    .Vue-Toastification__toast--default
+        &.approve-toast
+            background: transparent
+        &.toast-card
+            padding: 24px 16px
+            border-radius: 10px
+            border: 2px solid var(--dark-purple, #4B0082)
+            background: var(--midnight-black, #0F0F0F)
+            .Vue-Toastification__toast-component-body
+                .network-switch-card
+                    display: flex
+                    flex-direction: column
+                    display: flex
+</style>
@@ -1,31 +1,42 @@

-export function getImageUrl(url) {
-    return new URL(url, import.meta.url).href;
-}
-
 export function getPercentage(amount, goal) {
    return ((Number(amount) / Number(goal)) * 100).toFixed(2);
 }

-
 export function compactNumber(number) {
-    return Intl.NumberFormat("en-US", {
+	return Intl.NumberFormat("en-US", {
 		notation: "compact",
 		maximumFractionDigits: 2,
-	}).format(parseInt(number));
+	}).format(number);
 }


-export function formatNumber(number) {
-    const options = {
-		style: "decimal",
-		minimumFractionDigits: 0,
-		maximumFractionDigits: 0,
-    };
+export function formatNumber(nominator, denominator) {
+    let number = formatBigIntDivision(nominator, denominator);
+    number = InsertCommaNumber(number).toString();
+
+    return number;
+}
+
+export function formatBigIntDivision(nominator, denominator, digits = 2) {
+	console.log("nominator", nominator);
+	console.log("denominator", denominator);
+	if (!nominator) {
+		return 0n
+	}
+	let integer = Number(nominator / denominator);
+	// pick how much digits after point to show
+	const fraction = (nominator % denominator).toString().substring(0, digits);
+	// output type number
+    return Number(integer + "." + fraction);
+}
+
+
+export function InsertCommaNumber(number) {
    if (!number) {
        return 0
    }
-	const formattedWithOptions = number.toLocaleString("en-US", options);
+	const formattedWithOptions = number.toLocaleString("en-US");
    return formattedWithOptions;
 }

@@ -37,13 +48,6 @@ export function getAddressShortName(address) {
 }


-export function numberWithCommas(x, ) {
-	x = x.toString();
-	var pattern = /(-?\d+)(\d{3})/;
-	while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
-	return x;
-}
-
 export function getblocky(address) {
 	var blockiesData = blockies
 		.create({
@@ -74,4 +78,4 @@ export function createDebounce() {
            fnc();
        }, delayMs || 500);
    };
-}
+}
@@ -38,13 +38,15 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

 /* import specific icons */
-import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket, faDroplet, faMoon, faPerson, faWallet } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowRight, faSpinner, faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp, faArrowRightToBracket, faArrowRightFromBracket, faDroplet, faMoon, faPerson, faWallet, faBlog } from "@fortawesome/free-solid-svg-icons";

 import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";

 import Toast from "vue-toastification";
 // Import the CSS or use your own!
 import "vue-toastification/dist/index.css";
+import SwitchNetworkToast from "@/components/toasts/SwitchNetworkToast.vue";
+import { useToast } from "vue-toastification";

 /* add icons to the library */
 library.add(
@@ -63,10 +65,11 @@ library.add(
 	faArrowRightFromBracket,
 	faChevronDown,
 	faChevronUp,
-    faDroplet,
-    faMoon,
-    faPerson,
-    faWallet
+	faDroplet,
+	faMoon,
+	faPerson,
+	faWallet,
+	faBlog
 );

 var logging = localStorage.getItem("LOGGING");
@@ -91,9 +94,39 @@ app.use(pinia);

 app.use(Toast, {
 	transition: "Vue-Toastification__fade",
+	containerClassName: "bloodline-toast-container",
 });


+
+function showSwitchNetworkToast(network) {
+	const toast = useToast();
+
+	// Define the content object with the component, props and listeners
+	const content = {
+		component: SwitchNetworkToast,
+		// Any prop can be passed, but don't expect them to be reactive
+		props: {
+			network
+		},
+		// Listen and react to events using callbacks. In this case we listen for
+		// the "click" event emitted when clicking the toast button
+		listeners: {},
+	};
+
+	// Render the toast and its contents
+	return toast(content, {
+		position: "top-right",
+		icon: false,
+		closeOnClick: false,
+		// toastClassName: "modal-overlay",
+		hideProgressBar: true,
+		timeout: false,
+		toastClassName: "approve-toast toast-card",
+	});
+}
+
+
 try {
    const walletStore = useWalletStoreV2();
 	const tokenStore = useTokenStore();
@@ -106,7 +139,8 @@ try {
 	const projectId = "d8e5ecb0353c02e21d4c0867d4473ac5";
 	console.log("hier chains");
 	const { chains, publicClient, webSocketPublicClient } = configureChains(
-		[goerli, mainnet],
+		// [goerli, mainnet],
+		[goerli],
 		[alchemyProvider({ apiKey: goerliKey }), publicProvider()]
 	);

@@ -119,7 +153,7 @@ try {
 					appName: "wagmi demo",
 				},
 			}),
-			new MetaMaskConnector({ chains }),
+			// new MetaMaskConnector({ chains }),
 			new InjectedConnector({
 				chains,
 				getProvider: () => (typeof window !== "undefined" ? window.myInjectedWallet : undefined),
@@ -164,9 +198,9 @@ try {
 		},
 		async (log) => {
 			console.log("CycleCompleted", log);
-			await cycleStore.fillCycle(cycleStore.currentCycle);
+			await cycleStore.fillCycle(cycleStore.currentCycle, true);
 			cycleStore.currentCycle++;
-            await cycleStore.fillCycle(cycleStore.currentCycle);
+            await cycleStore.fillCycle(cycleStore.currentCycle, true);
 		}
 	);

@@ -193,8 +227,7 @@ try {
 			await tokenStore.initV2();
 			await rewardLockerStore.init();
            await walletStore.loadWalletData();
-            // console.log("cycleStore.currentCycle", cycleStore.currentCycle);
-		    // await cycleStore.fillCycle(cycleStore.currentCycle);
+		    await cycleStore.fillCycle(cycleStore.currentCycle, true);
 			await uniswapStore.init();
 		} else {
 			walletStore.address = null;
@@ -203,11 +236,25 @@ try {
 		}
 	});

-	watchNetwork((network) => {
+    watchNetwork((network) => {
+        if (!network.chain?.network) {
+            return;
+        }
+        const chainAllowed = network.chains?.find((obj) => {
+            return obj.network === network.chain.network;
+        });
+        if (!chainAllowed) {
+            console.log("chain not allowed", network.chain);
+            showSwitchNetworkToast(network);
+            return
+        } else {
+            console.log("chain allowed", network.chain);
+        }
 		if (network.chain) {
 			walletStore.chain = network.chain;
 		}
-	});
+    });
+    


 	await walletStore.init();
@@ -12,9 +12,9 @@ export const useCycleStore = defineStore("cycles", {
 		activeCycle: null,
 		currentCycle: null,
 	}),
-    getters: {
-        //cycle winner is the token who reached the goal
-        //todo winner is now in the cycle object, no reason for that function anymore
+	getters: {
+		//cycle winner is the token who reached the goal
+		//todo winner is now in the cycle object, no reason for that function anymore
 		getCycleWinner() {
 			const goal = this.getCurrentCycleData?.goal;
 			if (!goal) {
@@ -30,9 +30,46 @@ export const useCycleStore = defineStore("cycles", {
 		getCurrentCycleData() {
 			return this.cycles[this.activeCycle];
 		},
+		rewardsSacrifice() {
+			const tokenStore = useTokenStore();
+			if (!this.cycles[this.activeCycle]?.rewards_sacrifice) {
+				return 0n;
+			}
+			return this.cycles[this.activeCycle]?.rewards_sacrifice;
+		},
+		rewardsSacrificeCurrentCycle() {
+			const tokenStore = useTokenStore();
+			if (!this.cycles[this.currentCycle]?.rewards_sacrifice) {
+				return 0n;
+			}
+			return this.cycles[this.currentCycle]?.rewards_sacrifice;
+		},
+		rewardsStaking() {
+			const tokenStore = useTokenStore();
+			if (!this.cycles[this.activeCycle]?.rewards_staking) {
+				return 0n;
+			}
+			return this.cycles[this.activeCycle]?.rewards_staking;
+				
+		},
+		rewardsClan() {
+			const tokenStore = useTokenStore();
+			if (!this.cycles[this.activeCycle]?.rewards_clan) {
+				return 0n;
+			}
+			return this.cycles[this.activeCycle]?.rewards_clan;
+		},
+		rewardsTotal() {
+			const tokenStore = useTokenStore();
+			if (!this.cycles[this.activeCycle]?.rewards_total) {
+				return 0n;
+			}
+			return this.cycles[this.activeCycle]?.rewards_total;
+			
+		},
 	},
 	actions: {
-        //todo check if still needed
+		//todo check if still needed
 		// async loadRewardsCycles() {
 		// 	const walletStore = useWalletStoreV2();
 		// 	const rewardLockerStore = useRewardLockerStore();
@@ -56,29 +93,30 @@ export const useCycleStore = defineStore("cycles", {
 		// 		const element = data[index];
 		// 		if (!this.cycles[index]) {
 		// 			this.cycles[index] = {};
-        //         }
+		//         }
 		// 	}
 		// },
-        //todo check if needed, or use fillcycle
-        async updateCurrentCycle(sacrificedToken) {
-            console.log("updateCurrentCycle");
+		//todo check if needed, or use fillcycle
+		async updateCurrentCycle(sacrificedToken) {
+			console.log("updateCurrentCycle");
 			const memeBurnerStore = useMemeburnerStore();
-            var data = await memeBurnerStore.getSacrificedCycle(this.currentCycle);
-            console.log("this.currentCycle", this.currentCycle);
-            console.log("this.cycles", this.cycles);
-            if (this.cycles[this.currentCycle]) {
-                var tokenIndex = this.cycles[this.currentCycle].token.findIndex(
+			const rewardLockerStore = useRewardLockerStore();
+			var data = await memeBurnerStore.getSacrificedCycle(this.currentCycle);
+			var tokenTotalSacrificed = await rewardLockerStore.getTotalSacrificeRewardsForAllToken(this.currentCycle);
+			console.log("this.currentCycle", this.currentCycle);
+			console.log("this.cycles", this.cycles);
+			if (this.cycles[this.currentCycle]) {
+				var tokenIndex = this.cycles[this.currentCycle].token.findIndex(
 					(tokenData) => tokenData.contractAddress === sacrificedToken
 				);
-				this.cycles[this.currentCycle].token[tokenIndex].amount =
-					data[tokenIndex].result[1];
-            }
-				
-        },
-        /**
-         * main function to fill a round, will not be filled when already loaded
-         * you can use the refillcycle to overwrite information, because if you claim or stake the values will change
-         */
+				this.cycles[this.currentCycle].token[tokenIndex].amount = data[tokenIndex].result[1];
+				this.cycles[this.currentCycle].token[tokenIndex].amountInBLD = tokenTotalSacrificed[tokenIndex].result;
+			}
+		},
+		/**
+		 * main function to fill a round, will not be filled when already loaded
+		 * you can use the refillcycle to overwrite information, because if you claim or stake the values will change
+		 */
 		async fillCycle(cycleNumber, refillCycle = false) {
 			console.log("fillCycle", cycleNumber);
 			const memeBurnerStore = useMemeburnerStore();
@@ -97,22 +135,22 @@ export const useCycleStore = defineStore("cycles", {
 					rewardData = await rewardLockerStore.getRewardsForAllToken(cycleNumber);
 				}

-                console.log("hier");
+				console.log("hier");
 				//getTotalSacrificeRewardsForToken multicall for all tokens
 				const tokenTotalSacrificed = await rewardLockerStore.getTotalSacrificeRewardsForAllToken(cycleNumber);
-                console.log("hier1");
+				console.log("hier1");
 				var goal = await memeBurnerStore.getGoal(cycleNumber);
-                console.log("hier123");
+				console.log("hier123");
 				var tokenArray = [];
 				var rewards_clan = 0n;
 				var rewards_sacrifice = 0n;
 				var rewards_staking = 0n;
-                
-                console.log("hier123");
+
+				console.log("hier123");
 				for (let index = 0; index < data.length; index++) {
 					var tokenData = {};
-                    const token = tokenStore.token[index];
-                    //why no multicall? todo
+					const token = tokenStore.token[index];
+					//why no multicall? todo
 					var coefficent = await rewardLockerStore.getSacrificedTokenCoefficient(
 						cycleNumber,
 						token.contractAddress
@@ -124,31 +162,29 @@ export const useCycleStore = defineStore("cycles", {
 					tokenData.vampwinner = token.vamp.winner;
 					tokenData.vampwinner2 = token.vamp.winner2;
 					tokenData.vampname = token.vamp.name;
-					tokenData.amount = data[index].result[1]
-					tokenData.amountInBLD = tokenTotalSacrificed[index].result
+					tokenData.amount = data[index].result[1];
+					tokenData.amountInBLD = tokenTotalSacrificed[index].result;

-                    if (walletStore.connected) {
-                        //if user is connected fill user specific data for the token
+					if (walletStore.connected) {
+						//if user is connected fill user specific data for the token
 						const sacrificeClanReward = rewardData[index].result[1];
 						let clanwin = 0n;
 						if (cycleNumber !== this.currentCycle) {
-							clanwin = (coefficent / 10000n - 1n) * sacrificeClanReward;
+							clanwin = (sacrificeClanReward * coefficent) / 10000n - sacrificeClanReward;
 							console.log("clanwin", clanwin);
 						}
 						const sacrificeRewards = sacrificeClanReward;

-						tokenData.rewards_ges = 
-							rewardData[index].result[1]  +
-								rewardData[index].result[0] 
+						tokenData.rewards_ges = rewardData[index].result[1] + rewardData[index].result[0];

-						tokenData.rewards_clan = clanwin
+						tokenData.rewards_clan = clanwin;

-						tokenData.rewards_staking = rewardData[index].result[0]
-						tokenData.rewards_sacrifice = sacrificeRewards
+						tokenData.rewards_staking = rewardData[index].result[0];
+						tokenData.rewards_sacrifice = sacrificeRewards;

-                        console.log("rewards_clan", rewards_clan);
-                        console.log("tokenData.rewards_clan", tokenData.rewards_clan);
-                        console.log("tokenData.rewards_sacrifice", tokenData.rewards_sacrifice);
+						console.log("rewards_clan", rewards_clan);
+						console.log("tokenData.rewards_clan", tokenData.rewards_clan);
+						console.log("tokenData.rewards_sacrifice", tokenData.rewards_sacrifice);
 						rewards_clan = rewards_clan + tokenData.rewards_clan;
 						rewards_sacrifice = rewards_sacrifice + tokenData.rewards_sacrifice;
 						rewards_staking = rewards_staking + tokenData.rewards_staking;
@@ -156,13 +192,13 @@ export const useCycleStore = defineStore("cycles", {
 					tokenArray.push(tokenData);
 				}

-				const goalDecimal = goal[0]
+				const goalDecimal = goal[0];
 				const winner = tokenArray.find((token) => token.amount === goalDecimal);
-                const goalInBLD = await memeBurnerStore.getGoalInBLOOD(cycleNumber);
-                //replace vamplogo cause it will automatically change the token for the cycle view (new design)
-				if (winner) {
-					winner.vamplogo = winner.vampwinner;
-				}
+				const goalInBLD = await memeBurnerStore.getGoalInBLOOD(cycleNumber);
+				//replace vamplogo cause it will automatically change the token for the cycle view (new design)
+				// if (winner) {
+				// 	winner.vamplogo = winner.vampwinner;
+				// }
 				this.cycles[cycleNumber] = {
 					goal: goal[0],
 					goalInBLD: goalInBLD,
@@ -183,10 +219,11 @@ export const useCycleStore = defineStore("cycles", {
 		async getFinshedCycleNumbers() {
 			const array = [];
 			const rewardLockerStore = useRewardLockerStore();
-            const lastCompletedCycle = await rewardLockerStore.lastCompletedCycle();
-			for (let index = 0; index <= Number(lastCompletedCycle); index++) {
+			const lastCompletedCycle = await rewardLockerStore.lastCompletedCycle();
+			for (let index = 1; index <= Number(lastCompletedCycle); index++) {
 				array.push(index);
-            }
+			}
+			console.log("array123", array);
 			return array;
 		},
 	},
@@ -81,12 +81,10 @@ export const useMemeburnerStore = defineStore("memeburner", {
 				}
 				this.loading = true;

-				// TODO: store all integer values as one type: BigInt
-				const amountDecimal = BigInt(amount) * 10n ** BigInt(tokenStore.activeToken.decimals);
 				var hash = await this.contract.write.sacrificeMeme([
 					tokenStore.activeToken.contractAddress,
-                    amountDecimal.toString(),
-                    minETH.toString()
+                    amount,
+                    minETH
 				]);
 				return hash;
 			} catch (error) {
@@ -99,11 +97,10 @@ export const useMemeburnerStore = defineStore("memeburner", {
        async sacrificeMemeAndBuyBLOOD(amount, minBLOOD) {
 			const tokenStore = useTokenStore();

-            const amountDecimal = BigInt(amount) * 10n ** BigInt(tokenStore.activeToken.decimals);
            var hash = await this.contract.write.sacrificeMemeAndBuyBLOOD([
 				tokenStore.activeToken.contractAddress,
-				amountDecimal.toString(),
-				minBLOOD.toString()
+				amount,
+				minBLOOD,
 			]);
            return hash;
        },
@@ -32,7 +32,7 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		 */
 		async getRewards(walletAddress, cycleNumber, tokenAddress) {
 			try {
-				return await this.contract.read.rewards([walletAddress, cycleNumber, tokenAddress]);
+				return await this.contract.read.getRewards([walletAddress, cycleNumber, tokenAddress]);
 			} catch (error) {
 				console.error("getRewards", error);
 			}
@@ -50,9 +50,9 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 					functionName: "getRewards",
 					args: [walletStore.address, cycleNumber, token.contractAddress],
 				});
-            }
+			}
 			const data = await multicall({
-                contracts,
+				contracts,
 			});
 			return data;
 		},
@@ -80,16 +80,15 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		async getSacrificedTokenCoefficient(cycleNumber, sacrificedToken) {
 			return await this.contract.read.getSacrificedTokenCoefficient([cycleNumber, sacrificedToken]);
 		},
-        async getStakeRewardForSacrificeReward(sacrificedToken, reward) {
-            const walletStore = useWalletStoreV2();
-            const cycleStore = useCycleStore();
-            return await this.contract.read.getStakeRewardForSacrificeReward([
+		async getStakeRewardForSacrificeReward(sacrificedToken, reward) {
+			const walletStore = useWalletStoreV2();
+			const cycleStore = useCycleStore();
+			return await this.contract.read.getStakeRewardForSacrificeReward([
 				walletStore.address,
 				sacrificedToken,
 				reward,
 			]);
-            
-        },
+		},
 		async lastCompletedCycle() {
 			return await this.contract.read.lastCompletedCycle();
 		},
@@ -120,8 +119,15 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 		async orderUnstake() {
 			return await this.contract.write.orderUnstake();
 		},
-		async unstake(unstakeCycle) {
-			return await this.contract.write.unstake([unstakeCycle]);
+        async unstake() {
+            const walletStore = useWalletStoreV2();
+			const cycleStore = useCycleStore();
+            var cycleList = walletStore.memeToken.orderedUnstakedCycles.findIndex((obj) => obj.result > 0n);
+            if (cycleList && cycleList + 1 <= cycleStore.currentCycle) {
+				console.log("cycleList", cycleList);
+				const hash = await this.contract.write.unstake([cycleList + 1]);
+				return hash;
+            }
 		},
 		async stakeBloodline(tokenNumber) {
 			console.log("tokenNumber", tokenNumber);
@@ -130,7 +136,7 @@ export const useRewardLockerStore = defineStore("rewardlocker", {

 			const fromAddress = walletStore.address;
 			const spender = this.config.contractAddress;
-			const deadline = Date.now() + 20 * 60;
+			const deadline = BigInt(Date.now()) / 1000n + 1200n;
 			const decimals = tokenStore.getToken(walletStore.memeToken.contractAddress).decimals;
 			const value = BigInt(tokenNumber) * 10n ** decimals;
 			const nonce = await tokenStore.memeToken.contract.read.nonces([fromAddress]);
@@ -160,9 +166,6 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			const tokenStore = useTokenStore();
 			const addresses = tokenStore.sacrificeToken.map((obj) => obj.contractAddress);
 			const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, [cycle], addresses]);
-			const data = await waitForTransaction({
-				hash: hash,
-			});
 			return hash;
 		},
 		async stakeAndClaimAllCycles(stakeCoefficient) {
@@ -174,5 +177,23 @@ export const useRewardLockerStore = defineStore("rewardlocker", {
 			const hash = await this.contract.write.stakeAndClaim([stakeCoefficient, cycles, addresses]);
 			return hash;
 		},
+		async unstakeOrdered() {
+            const cycleStore = useCycleStore();
+            const walletStore = useWalletStoreV2();
+
+            const contracts = [];
+            for (let index = 1; index < cycleStore.currentCycle + 2; index++) {
+				contracts.push({
+					...this.contract,
+					functionName: "unstakeOrdered",
+					args: [index, walletStore.address],
+				});
+			}
+			const data = await multicall({
+				contracts,
+            });
+            console.log("data123", data);
+            return data;
+		},
 	},
 });
@@ -19,18 +19,17 @@ export const useSacrificeStore = defineStore("sacrifice", {
 	getters: {},
 	actions: {
 		async sacrificeToken(amount, token) {
-            console.log("sacrificeToken", { amount, token });
-            
+			console.log("sacrificeToken", { amount, token });
+
 			const memeburnerStore = useMemeburnerStore();
 			const walletStore = useWalletStoreV2();
-            const tokenStore = useTokenStore();
-            const cycleStore = useCycleStore();
-
+			const tokenStore = useTokenStore();
+			const cycleStore = useCycleStore();

 			try {
 				this.sacrificeState = 2;
-                const getRewards = await this.getRewardsFor(amount, token);
-                console.log("getRewards", getRewards);
+				const getRewards = await this.getRewardsFor(amount, token);
+				console.log("getRewards", getRewards);
 				let hash = null;
 				if (getRewards.variant === "sacrifice") {
 					console.log("sacrifice");
@@ -53,71 +52,74 @@ export const useSacrificeStore = defineStore("sacrifice", {
 				// 	return logObject.topics.find(
 				// 		(topic) => topic === "0x5e60ccd3c81486143d815dce24867a494d7fee585a0a44282cf479b19a5186ee"
 				// 	);
-                // });
+				// });

-                var rewardData = data.logs.filter((logObject) => {
+				var rewardData = data.logs.filter((logObject) => {
 					return logObject.topics.find(
 						(topic) => topic === "0x5e60ccd3c81486143d815dce24867a494d7fee585a0a44282cf479b19a5186ee"
 					);
 				});
-                console.log("rewardData", rewardData);
-                //output
-				const outputSacrifice = rewardData.reduce((x, y) => {
-					return x + BigInt(y.data) / 10n ** token.decimals;
+				console.log("rewardData", rewardData);
+				//output
+				let outputSacrifice = rewardData.reduce((x, y) => {
+					return x + BigInt(y.data);
 				}, 0n);
-                console.log("outputSacrifice", outputSacrifice);
+				outputSacrifice = formatNumber(outputSacrifice, 10n ** token.decimals);
+				console.log("outputSacrifice", outputSacrifice);
 				token.allowance = await tokenStore.allowance();
-                this.sacrificeState = 4;
+				this.sacrificeState = 4;

 				showSuccessToast(
-					formatNumber(outputSacrifice),
+					outputSacrifice,
 					"Success!",
 					"You turned your meme into:",
 					"You can claim once the current cycle is finished and your clan bonus was calculated."
-                );
-                await walletStore.loadWalletData();
-                console.log("cycleStore.currentCycle", cycleStore.currentCycle);
+				);
+				await walletStore.loadWalletData();
+				console.log("cycleStore.currentCycle", cycleStore.currentCycle);
 				await cycleStore.fillCycle(cycleStore.currentCycle, true);
-                return true;
-            } catch (error) {
-                //we should show the user an issue
-                throw new Error(error);
-            } finally {
+				return true;
+			} catch (error) {
+				//we should show the user an issue
+				throw new Error(error);
+			} finally {
 				this.sacrificeState = 0;
-            }
+			}
 		},
-        async getRewardsFor(value, token) {
-            console.log("getRewardsFor", {value, token});
+		async getRewardsFor(amount, token) {
+			console.log("getRewardsFor", { amount, token });
 			const memeburnerStore = useMemeburnerStore();
 			const uniswapStore = useUniswapStore();
-            const walletStore = useWalletStoreV2();
-            const rewardLockerStore = useRewardLockerStore();
-			// what is value here? i thought amount and value are same
-			const amountDecimal = BigInt(value) * 10n ** BigInt(token.decimals == undefined ? 18n : token.decimals);
-			let output = 0;
-			const amountETHBase = await memeburnerStore.getAmountETHBase(amountDecimal);
-			// take 99.5% of amount ETH got for selling meme, 0.5% allowed slippage
-			const minETH = amountETHBase[1] * 995n / 1000n;
+			const walletStore = useWalletStoreV2();
+			const rewardLockerStore = useRewardLockerStore();
+			let output = 0n;

 			let minBLOOD;

 			try {
-				if (!value || isNaN(value)) {
+				if (!amount) {
 					this.sacrificeState = 0;
-					return output;
-                }
+					return {
+						output: 0n,
+					};
+				}
+				const amountETHBase = await memeburnerStore.getAmountETHBase(amount);
+				// take 99.5% of amount ETH got for selling meme, 0.5% allowed slippage
+				const minETH = (amountETHBase[1] * 995n) / 1000n;

-				const rewardsForResult = await memeburnerStore.getRewardFor(amountDecimal);
+				const rewardsForResult = await memeburnerStore.getRewardFor(amount);
 				const rewardsForResultSum = rewardsForResult[0] + rewardsForResult[1];
 				// quote blood amount against ETH base amount
-				var quoteRewards = await uniswapStore.quoteExactInputSingle(amountDecimal, amountETHBase[0]);
+				var quoteRewards = await uniswapStore.quoteExactInputSingle(amountETHBase[0]);

 				let variant = "sacrifice";
+				// here you are setting only variant, let's show by default rewardsForResultSum
+				output = rewardsForResultSum;
 				if (quoteRewards.result) {
 					// take 99.5% of quoted amount, 0.5% allowed slippage
-					minBLOOD = quoteRewards.amount * 995n / 1000n;
+					minBLOOD = (quoteRewards.amount * 995n) / 1000n;

-					if (quoteRewards.amount * 95n / 100n > rewardsForResultSum) {
+					if ((quoteRewards.amount * 95n) / 100n > rewardsForResultSum) {
 						variant = "buy";
 						console.log("use Buy-function", {
 							quoteRewardsNumber: quoteRewards.amount,
@@ -129,18 +131,10 @@ export const useSacrificeStore = defineStore("sacrifice", {
 							rewardsForResultSum,
 						});
 					}
-				} else {
-					/**
-					 * case 4
-					 * quoter threw an error
-					 */
-					//
-					output = rewardsForResultSum;
 				}
 				console.log("variant", variant);
-				console.log("amountDecimal", amountDecimal);
-				// TODO: when token.allowance become BigInt with decimals, value must be amountDecimal
-				if (!walletStore.connected || (walletStore.connected && token.allowance < value)) {
+				console.log("amount", amount);
+				if (!walletStore.connected || (walletStore.connected && token.allowance < amount)) {
 					/**
 					 * case 1
 					 * user is not logged in or Allowance is less than Input, then I show getRewardsForSacrifice Value
@@ -148,15 +142,23 @@ export const useSacrificeStore = defineStore("sacrifice", {
 					 */
 					output = rewardsForResultSum;
 					if (variant === "buy") {
-						output = quoteRewards.amount
+						output = quoteRewards.amount;
 					}
-				} else if (walletStore.connected && variant === "sacrifice") {
+				} else if (walletStore.connected && variant === "sacrifice" && token.allowance >= amount) {
 					/**
 					 * case 2
 					 * user is logged in and allowance is greater or equal input and variant is sacrifice
 					 */
-					output = rewardsForResultSum;
-				} else if (walletStore.connected && variant === "buy") {
+					 // in this case you should use eth_call, so you are showing exact reward in cases of completing cycles
+ 					 const amountSacrifice = await readContract({
+  						address: memeburnerStore.contract.address,
+  						abi: memeburnerStore.contract.abi,
+  						functionName: "sacrificeMeme",
+  						args: [token.contractAddress, amount.toString(), minETH.toString()],
+  						account: walletStore.address,
+  					});
+ 					output = amountSacrifice;
+				} else if (walletStore.connected && variant === "buy" && token.allowance >= amount) {
 					/**
 					 * case 3
 					 * user is logged in and allowance is greater or equal input and variant is buy
@@ -166,7 +168,7 @@ export const useSacrificeStore = defineStore("sacrifice", {
 						address: memeburnerStore.contract.address,
 						abi: memeburnerStore.contract.abi,
 						functionName: "sacrificeMeme",
-						args: [token.contractAddress, amountDecimal.toString(), minETH.toString()],
+						args: [token.contractAddress, amount.toString(), minETH.toString()],
 						account: walletStore.address,
 					});

@@ -174,11 +176,11 @@ export const useSacrificeStore = defineStore("sacrifice", {
 						address: memeburnerStore.contract.address,
 						abi: memeburnerStore.contract.abi,
 						functionName: "sacrificeMemeAndBuyBLOOD",
-						args: [token.contractAddress, amountDecimal.toString(), minBLOOD.toString()],
+						args: [token.contractAddress, amount.toString(), minBLOOD.toString()],
 						account: walletStore.address,
 					});

-					if (amountBuy * 95n / 100n > amountSacrifice) {
+					if ((amountBuy * 95n) / 100n > amountSacrifice) {
 						variant = "buy";
 						output = amountBuy;
 						console.log("use buy after comparison sacrificeMemeAndBuyBLOOD and sacrificeMeme");
@@ -187,20 +189,25 @@ export const useSacrificeStore = defineStore("sacrifice", {
 						output = amountSacrifice;
 						console.log("use sacrifice after comparison sacrificeMemeAndBuyBLOOD and sacrificeMeme");
 					}
-                }
-                //potential staking rewards
-                let stakingRewardsNumber = 0;
-                if (output > 0 && walletStore.connected) {
+				}
+				//potential staking rewards
+				let stakingRewardsNumber = 0;
+				if (output > 0 && walletStore.connected) {
 					const stakingReward = await rewardLockerStore.getStakeRewardForSacrificeReward(
 						token.contractAddress,
 						output
 					);
-					stakingRewardsNumber = stakingReward / 10n ** token.decimals
-                }
-                const outputNumber = output / 10n ** BigInt(token.decimals);
-				return { output: outputNumber, variant: variant, minETH: minETH, minBLOOD: minBLOOD, staking: stakingRewardsNumber };
+					stakingRewardsNumber = stakingReward;
+				}
+				return {
+					output: output,
+					variant: variant,
+					minETH: minETH,
+					minBLOOD: minBLOOD,
+					staking: stakingRewardsNumber,
+				};
 			} catch (error) {
-                console.error("getRewardsFor", error);
+				console.error("getRewardsFor", error);
 			}
 		},
 	},
@@ -58,15 +58,15 @@ export const useTokenStore = defineStore("token", {
 				addSteps: [
 					{
 						amount: 1000000000000000000000000n,
-						name: "10m",
+						name: "1m",
 					},
 					{
 						amount: 10000000000000000000000000n,
-						name: "100m",
+						name: "10m",
 					},
 					{
 						amount: 100000000000000000000000000n,
-						name: "1b",
+						name: "100m",
 					},
 				],
 			},
@@ -121,7 +121,8 @@ export const useTokenStore = defineStore("token", {
 			// 	abi: Meme5Json.abi,
 			// 	contractAddress: Meme5Json.contractAddress,
 			// },
-			{
+            {
+                name: "$BLOOD",
 				abi: BloodlineJson.abi,
 				contractAddress: BloodlineJson.contractAddress,
 				logo: "/assets/img/token/bloodline.png",
@@ -161,16 +162,16 @@ export const useTokenStore = defineStore("token", {
 					});

 					contracts.push({ ...token.contract, functionName: "decimals" });
-					contracts.push({ ...token.contract, functionName: "name" });
+					// contracts.push({ ...token.contract, functionName: "name" });
 					contracts.push({ ...token.contract, functionName: "symbol" });
 					contracts.push({ ...token.contract, functionName: "totalSupply" });
 					const data = await multicall({
 						contracts,
                    });
 					token.decimals = BigInt(data[0].result);
-					token.name = data[1].result;
-					token.symbol = data[2].result;
-					token.totalSupply = data[3].result;
+					// token.name = data[1].result;
+					token.symbol = data[1].result;
+					token.totalSupply = data[2].result;
 				}
 			} catch (error) {
 				console.error("initV2", error);
@@ -1,23 +1,17 @@
 import { defineStore } from "pinia";
 import { useWalletStoreV2 } from "@/stores/walletV2";
 import QuoterJson from "@/assets/contracts/Quoter.json";
-import UniswapPoolJson from "@/assets/contracts/UniswapPool.json";
+import WethJson from "@/assets/contracts/WETH.json";
 import BloodlineJson from "@/assets/contracts/Bloodline.json";
-import { useMemeburnerStore } from "@/stores/memeburner";
-import { useTokenStore } from "@/stores/tokens";

 import { getContract, multicall } from "@wagmi/core";

 export const useUniswapStore = defineStore("uniswap", {
 	state: () => ({
 		quoateV3Contract: {},
-		quoateV2Contract: {},
-		uniswapPoolContract: {},
-		poolData: {
-			token0: null,
-			token1: null,
-			fee: null,
-		},
+		tokenIn: WethJson.contractAddress,
+		tokenOut: BloodlineJson.contractAddress,
+		fee: 10000n,
 	}),
 	getters: {},
 	actions: {
@@ -31,38 +25,25 @@ export const useUniswapStore = defineStore("uniswap", {
 				walletClient: walletStore.walletClient || walletStore.publicClient,
 			});

-			this.uniswapPoolContract = getContract({
-				address: UniswapPoolJson.contractAddress,
-				abi: UniswapPoolJson.abi,
-				walletClient: walletStore.walletClient || walletStore.publicClient,
-			});
-
-			this.getPoolData();
 		},

-        async quoteExactInputSingle(amount, ethBase) {
+        async quoteExactInputSingle(ethBase) {
 			try {
                console.log("quoteExactInputSingle");
-                const memeBurnerStore = useMemeburnerStore();
-                const tokenStore = useTokenStore();
-                
-                const tokenOut = tokenStore.memeToken.contractAddress;
-				// tokenIn - WETH
-				const tokenIn = BigInt(this.poolData.token0) == BigInt(tokenOut) ? this.poolData.token1 : this.poolData.token0;
 				console.log("quoteExactInputSingle-parameter", {
-					tokenIn: tokenIn, // WETH
-					tokenOut: tokenOut, // BLOOD
-					fee: this.poolData.fee,
+					tokenIn: this.tokenIn, // WETH
+					tokenOut: this.tokenOut, // BLOOD
+					fee: this.fee,
 					amountEthBase: ethBase,
-					pricelimit: 0, //sqrtPriceLimitX96
+					pricelimit: 0n, //sqrtPriceLimitX96
 				});

 				const quotedAmountOut = await this.quoateV3Contract.read.quoteExactInputSingle([
-					tokenIn, //weth
-					tokenOut, //bloodline
-					this.poolData.fee,
+					this.tokenIn, //weth
+					this.tokenOut, //bloodline
+					this.fee,
 					ethBase,
-					0, //sqrtPriceLimitX96
+					0n, //sqrtPriceLimitX96
                ]);
                console.log("quotedAmountOut", quotedAmountOut);
 				return {result: true, amount: quotedAmountOut};
@@ -70,31 +51,6 @@ export const useUniswapStore = defineStore("uniswap", {

                return { result: false, amount: null };
            }
-		},
-		async getPoolData() {
-			console.log("getPoolData");
-			const contracts = [];
-			contracts.push(
-				{
-					...this.uniswapPoolContract,
-					functionName: "token0",
-				},
-				{
-					...this.uniswapPoolContract,
-					functionName: "token1",
-				},
-				{
-					...this.uniswapPoolContract,
-					functionName: "fee",
-				}
-			);
-			const data = await multicall({
-				contracts,
-			});
-			this.poolData.token0 = data[0].result;
-			this.poolData.token1 = data[1].result;
-            this.poolData.fee = data[2].result;
-            console.log("this.poolData", this.poolData);
-		},
-	},
+		}
+	}
 });
@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { markRaw } from "vue";
 import { useTokenStore } from "./tokens";
 import { useRewardLockerStore } from "./rewardlocker";
-
+import { formatNumber } from "@/helper/helper.js";
 import {
 	createConfig,
 	configureChains,
@@ -15,7 +15,7 @@ import {
 	getWalletClient,
 	fetchBalance,
 	multicall,
-    getNetwork,
+	getNetwork,
 } from "@wagmi/core";

 import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
@@ -26,7 +26,6 @@ import { goerli, mainnet } from "@wagmi/core/chains";
 import { publicProvider } from "@wagmi/core/providers/public";
 import { alchemyProvider } from "@wagmi/core/providers/alchemy";

-
 export const useWalletStoreV2 = defineStore("walletV2", {
 	state: () => ({
 		alchemy: null,
@@ -38,35 +37,61 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 		walletClient: null,
 		config: null,
 		chain: null,
-        token: [],
+		token: [],
 	}),
 	getters: {
-        sacrificeToken: (state) => state.token.filter((obj) => {
-			const tokenStore = useTokenStore();
-            
-            return obj.contractAddress !== tokenStore.memeToken.contractAddress;
-        }),
-        memeToken: (state) => state.token.find((obj) => {
-			const tokenStore = useTokenStore();
-            
-            return obj.contractAddress === tokenStore.memeToken.contractAddress;
-        }),
+		sacrificeToken: (state) =>
+			state.token.filter((obj) => {
+				const tokenStore = useTokenStore();
+
+				return obj.contractAddress !== tokenStore.memeToken.contractAddress;
+			}),
+		memeToken: (state) =>
+			state.token.find((obj) => {
+				const tokenStore = useTokenStore();
+
+				return obj.contractAddress === tokenStore.memeToken.contractAddress;
+			}),
+		unclaimedRewards() {
+			if (!this.memeToken?.unclaimedRewards) {
+				return 0n;
+			}
+			return this.memeToken.unclaimedRewards;
+		},
+		orderedUnstakedAmount() {
+			if (!this.memeToken?.orderedUnstakedAmount) {
+				return 0n;
+			}
+			return this.memeToken?.orderedUnstakedAmount;
+		},
+		staked() {
+			if (!this.memeToken?.staked) {
+				return 0n;
+			}
+			return this.memeToken?.staked;
+		},
+		balanceOf() {
+			if (!this.memeToken?.balanceOf) {
+				return 0n;
+			} else {
+				return this.memeToken?.balanceOf;
+			}
+		},
 	},
 	actions: {
 		async init() {
 			console.log("wallet init");
-			
-             const account = getAccount();

-				if (account.address) {
-					this.address = account.address;
-                    this.connected = true;
-				}
-                
+			const account = getAccount();
+
+			if (account.address) {
+				this.address = account.address;
+				this.connected = true;
+			}
 		},
 		async connectWallet(connector) {
 			try {
-                console.log("connector.name", connector.name);
+				console.log("connector.name", connector.name);
 				// if (!account.isConnected) {
 				const connection = await connect({
 					chainId: goerli.id,
@@ -74,12 +99,12 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				});

 				console.log("connection", connection);
-            } catch (error) {
-                if (error.message.includes("Connector not found")) {
+			} catch (error) {
+				if (error.message.includes("Connector not found")) {
 					console.warn("Connector not found");
 				}
-                console.error(error);
-            }
+				console.error(error);
+			}
 			// this.address = connection.account;
 		},
 		async getTokenBalance(token) {
@@ -87,8 +112,8 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 			return result;
 		},
 		async getTokenBalances() {
-            console.log("getTokenBalances");
-            this.token = []
+			console.log("getTokenBalances");
+			this.token = [];
 			const tokenStore = useTokenStore();
 			var contracts = [];
 			for (let index = 0; index < tokenStore.token.length; index++) {
@@ -100,29 +125,34 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				contracts,
 			});
 			for (let index = 0; index < tokenStore.token.length; index++) {
-                const token = tokenStore.token[index];
+				const token = tokenStore.token[index];
 				this.token.push({
 					contractAddress: token.contractAddress,
-					balanceOf: data[index].result
+					balanceOf: data[index].result,
 				});
 			}
-        },
-        async loadWalletData() {
-            if (!this.connected) {
-                return
-            }
-            console.log("loadWalletData");
+		},
+		async loadWalletData() {
+			if (!this.connected) {
+				return;
+			}
+			console.log("loadWalletData");
 			const rewardlockerStore = useRewardLockerStore();
-            
-            await this.getTokenBalances();
-            //MemeToken Staked
-            const tokenStore = useTokenStore();
-            this.memeToken.staked = await rewardlockerStore.getStaked(this.address);
-            const unclaimedRewardsArray = await rewardlockerStore.getTotalRewards(this.address);
-            const unclaimedRewards = unclaimedRewardsArray[0] + unclaimedRewardsArray[1];
-            this.memeToken.unclaimedRewards = unclaimedRewards 

-        }
+			await this.getTokenBalances();
+			//MemeToken Staked
+			const tokenStore = useTokenStore();
+			this.memeToken.staked = await rewardlockerStore.getStaked(this.address);
+			const unclaimedRewardsArray = await rewardlockerStore.getTotalRewards(this.address);
+			const unclaimedRewards = unclaimedRewardsArray[0] + unclaimedRewardsArray[1];
+			this.memeToken.unclaimedRewards = unclaimedRewards;
+			this.memeToken.orderedUnstakedCycles = await rewardlockerStore.unstakeOrdered();
+
+			console.log("this.memeToken.orderedUnstakedCycles", this.memeToken.orderedUnstakedCycles);
+			this.memeToken.orderedUnstakedAmount = this.memeToken.orderedUnstakedCycles.reduce((x, y) => {
+				return x + y.result;
+			}, 0n);
+		},
 	},
 	// persist: true,
 });
@@ -2,8 +2,9 @@
 	<div class="cycle-page">
 		<div class="cycle-header container container--variant1">
 			<div class="bloodline-page-headline header" ref="observerElement">Bloodline Cycle</div>
-			<div class="bloodline-page-description low-mid-text">
-				Claim and trade your $BDL at each cycle's end. Become the most powerful bloodline and win extra rewards.
+			<div class="bloodline-page-description mid-mid-text">
+				Claim and trade your $BLOOD at each cycle's end. Become the most powerful bloodline and win extra
+				rewards.
 			</div>
 		</div>
 		<div class="slider-wrapper" :class="{ sticking: sticking }" ref="target">
@@ -28,7 +29,7 @@
 				<template v-if="difference > 0">
 					<div class="round-finish-info-key">Sacrifice Goal:</div>
 					<div class="round-finish-info-value">
-						{{ cycleStore.getCurrentCycleData?.goalInBLD / 10n ** tokenStore.memeToken.decimals }} $BDL
+						{{ cycleStore.getCurrentCycleData?.goalInBLD / 10n ** tokenStore.memeToken.decimals }} $BLOOD
 					</div>
 					<div class="round-finish-info-key">Time left:</div>
 					<div class="round-finish-info-value">{{ days }} {{ hours }} {{ minutes }}</div>
@@ -40,12 +41,15 @@
 			<template v-if="cycleStore.currentCycle !== cycleStore.activeCycle">
 				<div class="bloodline-border bloodline-border purple cycle-winner" v-if="cycleStore.getCycleWinner">
 					<div class="cycle-winner-left">
-						<div class="cycle-winner-headline">Clan Winner</div>
-						<div class="cycle-winner-subheadline">+25% Clan Bonus</div>
+						<div class="cycle-winner-headline">Cycle Winner</div>
+						<div class="cycle-winner-subheadline">
+							+ Clan Bonus on {{ cycleStore.getCycleWinner.name }} Sacrifice
+						</div>
 					</div>
 					<div class="cycle-winner-right">
 						<div class="cycle-winner-logo">
-							<img :src="cycleStore.getCycleWinner.vampwinner" alt="" />
+							<img class="logo" :src="cycleStore.getCycleWinner.vamplogo" alt="" />
+							<img class="crown" src="/assets/img/winnerCrown.png" alt="" />
 						</div>
 						<div class="cycle-winner-name">{{ cycleStore.getCycleWinner.name }}</div>
 					</div>
@@ -79,7 +83,12 @@
 				<div class="bloodline-container">
 					<div class="bloodline-border purple">Get up to +25% Clan Bonus on your sacrifice.</div>
 				</div>
-				<blood-chart :data="cycleStore.cycles[cycleStore.activeCycle]"></blood-chart>
+				<template v-if="!cycleStore.cycles[cycleStore.activeCycle]">
+					<Vue3Lottie :animationData="ChartLoading" :height="400" :width="400" />
+				</template>
+				<template v-else>
+					<blood-chart :data="cycleStore.cycles[cycleStore.activeCycle]"></blood-chart>
+				</template>
 			</div>
 		</div>
 	</div>
@@ -98,6 +107,9 @@ import LoadingComponent from "@/components/LoadingComponent.vue";
 import { useCycleStore } from "@/stores/cycles";
 import { useRewardLockerStore } from "@/stores/rewardlocker";

+import { Vue3Lottie } from "vue3-lottie";
+import ChartLoading from "@/assets/lottie/ChartLoading.json";
+
 const cycleStore = useCycleStore();
 const tokenStore = useTokenStore();

@@ -261,24 +273,35 @@ function timeBetweenDates(expirationTimestamp) {
        .cycle-winner-headline
            font-size: 24px
        .cycle-winner-subheadline
-            font-size: 12px
+            font-size: 14px
    .cycle-winner-right
        display: flex
        flex-direction: column
        justify-content: space-between
        align-items: center
        .cycle-winner-logo
-            height: 48px
-            width: 48px
+            height: 72px
+            width: 72px
            position: relative
            img
-                height: 72px
-                width: 72px
-                border-radius: 50%
-                position: absolute
-                left: 50%
-                top: 10px
-                transform: translate(-50%, -50%)
+                &.logo
+                    height: 100%
+                    width: 100%
+                    border: 1px solid yellow
+                    border-radius: 50%
+            img
+                &.crown
+                    position: absolute
+                    top: -10px
+                    transform: translate(-50%, -50%)
+                    left: 50%
+                // height: 72px
+                // width: 72px
+                // border-radius: 50%
+                // position: absolute
+                // left: 50%
+                // top: 10px
+                // transform: translate(-50%, -50%)
            &.inactive
                img
                    height: 100%
@@ -66,6 +66,7 @@ function openTutorialFunc(e) {
    text-align: center
    margin-top: 24px
    margin-bottom: 48px
+    padding: 0 12px
    @media (min-width: 992px)
        font-size: 48px
        margin-top: 0px
@@ -73,6 +74,7 @@ function openTutorialFunc(e) {
        text-shadow: unset
        line-height: 80px
        font-weight: 600
+        padding: 0

 .chart-wrapper-coin
    display: flex
@@ -106,8 +108,7 @@ function openTutorialFunc(e) {
            margin-right: auto
            pointer-events: none
            user-select: none
-            @media (min-width: 992px)
-                width: 100%
+            width: 100%
 .chart-wrapper
    width: 600px
    height: 600px
@@ -129,7 +130,7 @@ function openTutorialFunc(e) {


 #section-header-container
-    margin: 72px 0
+    margin: 48px 0
    scroll-margin: 150px
    .tutorial-header
        display: flex
@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
+import svgLoader from "vite-svg-loader";

 import { defineConfig } from 'vite'
 import GlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
@@ -9,7 +10,7 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
 	base: "./",
-	plugins: [vue()],
+	plugins: [vue(), svgLoader()],
 	optimizeDeps: {
 		esbuildOptions: {
 			plugins: [
Author	SHA1	Message	Date
EmberSpirit	7d1e7dcbf5	contract update	2023-10-24 06:31:01 +02:00
EmberSpirit	cc3fb88d1e	replace static 18n	2023-10-23 22:09:42 +02:00
EmberSpirit	fcf6133a47	contract update	2023-10-23 22:00:09 +02:00
EmberSpirit	32db2d291c	update bloodchart compact number	2023-10-23 21:58:54 +02:00
EmberSpirit	1b799b8825	Merge branch 'fix/simplifyUniswap' into development	2023-10-23 21:40:07 +02:00
EmberSpirit	99ff2cb166	merge pull request	2023-10-23 21:39:39 +02:00
EmberSpirit	6e58bc6319	update m issues + e frontend improvements	2023-10-23 21:35:38 +02:00
butterscotch	74dd5b7e0a	sacrifice.js getRewards fixes	2023-10-23 20:45:24 +03:00
butterscotch	bc3b7eac67	simplified uniswap.js	2023-10-23 01:01:34 +03:00
EmberSpirit	44df04cc23	fix issues e + new contracts	2023-10-22 21:37:15 +02:00
EmberSpirit	bf76e55fb5	update m issues + digit change numbers	2023-10-22 17:14:00 +02:00
EmberSpirit	fa4fa54033	bloodchart crown fix	2023-10-19 20:47:32 +02:00
EmberSpirit	167ad941bc	update m issues + e issues	2023-10-19 20:30:27 +02:00
EmberSpirit	cfaf527b95	bloodchart resize	2023-10-19 11:46:43 +02:00
EmberSpirit	f45128ceb9	update visual fixes	2023-10-18 23:26:29 +02:00
EmberSpirit	32ababbb39	update bigint + smaller style issues fixes	2023-10-17 22:19:52 +02:00
EmberSpirit	fedcd0314d	Merge branch 'feat/sacrificeChoice' into development	2023-10-17 18:18:03 +02:00