update m issues + e frontend improvements

package-lock.json

@@ -20,6 +20,7 @@
                 "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",
@@ -1534,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",
@@ -2472,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==",
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
-            "dev": true
         },
         "node_modules/borsh": {
             "version": "0.7.0",
@@ -2712,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",
@@ -2724,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",
@@ -2800,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",
@@ -2848,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",
@@ -3995,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",
@@ -4114,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"
             },
@@ -5004,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",
@@ -5381,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",

package.json

@@ -21,6 +21,7 @@
         "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",

src/App.vue

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

src/assets/img/cycle-icon.svg

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

src/assets/img/home-icon.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>

src/assets/img/profile-icon.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>

src/assets/sass/buttons.sass

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

src/assets/sass/main.sass

@@ -34,8 +34,6 @@ body
     display: flex
     flex-direction: column
     height: 100vh
-    .footer
-        margin-top: auto
 
 .container
     margin-right: auto

src/assets/sass/variables.sass

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

src/components/BloodChart.vue

@@ -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" />
@@ -72,7 +73,7 @@
 				</div>
 				<div class="blood-chart-element-footer">
 					<div class="blood-chart-amount">
-						{{ formatNumber(coin.amountInBLD / 10n ** tokenStore.memeToken.decimals) }}
+						{{ formatNumber(coin.amountInBLD, 10n ** tokenStore.memeToken.decimals) }}
 					</div>
 					<div>$BLOOD</div>
 				</div>
@@ -95,7 +96,7 @@
 
 <script setup>
 import { computed, ref, inject, onMounted } from "vue";
-import { getPercentage, compactNumber, formatNumber } from "@/helper/helper.js";
+import { getPercentage, formatNumber } from "@/helper/helper.js";
 import { useCycleStore } from "@/stores/cycles";
 
 import { useMemeburnerStore } from "@/stores/memeburner";
@@ -111,6 +112,8 @@ import "swiper/css/pagination";
 const cycleStore = useCycleStore();
 const tokenStore = useTokenStore();
 
+const isMobile = inject("isMobile");
+
 const props = defineProps({
 	data: Object,
 });
@@ -125,13 +128,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;
+	let returnNumber = 8;
-	if ((Number(amount) / Number(goal)) * 100 < 5) {
+	if ((Number(amount) / Number(goal)) * 100 < 8) {
-		returnNumber = 5;
+		returnNumber = 8;
 	} else {
 		returnNumber = (Number(amount) / Number(goal)) * 100;
 	}
@@ -146,11 +151,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 +179,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%
+                    &.logo
-                    width: 100%
+                        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

src/components/CardComponent.vue

@@ -69,7 +69,6 @@ const props = defineProps({
         display: flex
         text-align: left
         gap: 16px
-        height: 56px
         .token-logo
             margin-left: auto
     .connected-stake-buttons

src/components/ClaimComponent.vue

@@ -4,12 +4,12 @@
 		<template v-slot:body>
 			<token-name-price
 				:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
-				:price="formatNumber(walletStore.unclaimedRewards)"
+				: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.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,7 +19,9 @@
 						<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">
@@ -31,7 +33,18 @@
 						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
@@ -57,14 +70,18 @@
 						<template v-slot:message-end>
 							<div class="input-balance">
 								Balance:
-								{{ formatNumber(walletStore.unclaimedRewards) }}
+								{{ formatNumber(walletStore.unclaimedRewards, 10n ** tokenStore.memeToken.decimals) }}
 							</div>
 						</template>
 					</stake-menu>
 				</Transition>
-				<div class="connected-stake-first-round small-text text-center">
+			</template>
-					You can claim, once the cycle is over.
+			<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' })">
@@ -86,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";
@@ -98,6 +116,8 @@ const toast = useToast();
 const rewardLockerStore = useRewardLockerStore();
 const walletStore = useWalletStoreV2();
 const tokenStore = useTokenStore();
+const cycleStore = useCycleStore();
+
 const router = useRouter();
 
 const props = defineProps({
@@ -128,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) / walletStore.unclaimedRewards;
-		const coefficient = BigInt(10000 * tokenNumber.value) / unclaimedRewards;
 		var hash = await rewardLockerStore.stakeAndClaimAllCycles(coefficient);
 		stateClaim.value = 3;
 		const data = await waitForTransaction({
@@ -146,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"
@@ -177,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."
@@ -209,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) {

src/components/ConnectWallet.vue

@@ -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
+						{{ connector.name }}
-							v-if="
-								connector.id !== 'metaMask' ||
-								(connector.id === 'metaMask' && isMetaMaskInstalled(connector))
-							"
-						>
-							{{ connector.name }}
-						</template>
-						<template v-else> Install {{ connector.name }} </template>
 					</div>
 				</div>
 			</div>
@@ -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)) {
+	console.log("connector", connector);
-		window.open(" https://metamask.io/", "_blank");
-		return;
-	}
 	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

src/components/RewardsWrapper.vue

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

src/components/SacrificeToken.vue

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

src/components/StakeComponentV1.vue

@@ -31,56 +31,61 @@
 			<div class="connected-stake-body">
 				<slot name="body">
 					<token-name-price
-						v-if="walletStore.memeToken?.staked"
+						name="$BLOOD staked"
-						:name="tokenStore.getToken(walletStore.memeToken?.contractAddress)?.name"
+						:price="formatNumber(walletStore.staked, 10n ** tokenStore.memeToken.decimals)"
-						:price="formatNumber(walletStore.memeToken?.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">
+					<template v-if="!walletStore.connected">
-						Please Connect Your Wallet
+						<div class="mid-mid-text text-center" disabled>Please Connect Your Wallet</div>
-					</div>
+					</template>
-					<div
+					<template v-else-if="walletStore.connected && !ableToUnstake">
-						class="btn btn-immortal mid-mid-text"
+						<div class="btn btn-immortal mid-mid-text" disabled v-if="cycleStore.currentCycle === 1">
-						disabled
+							Stake
-						v-if="walletStore.connected && cycleStore.currentCycle === 1"
+						</div>
-					>
+						<div
-						Stake
+							class="btn btn-immortal mid-mid-text"
-					</div>
+							v-else-if="cycleStore.currentCycle > 1"
-					<div
+							@click="openStake"
-						class="btn btn-immortal mid-mid-text"
+						>
-						v-else-if="walletStore.connected && cycleStore.currentCycle > 1"
+							Stake
-						@click="openStake"
+						</div>
-					>
+						<div
-						Stake
+							v-if="(walletStore.memeToken?.staked === 0n && !stakeonly) || cycleStore.currentCycle === 1"
-					</div>
+							class="btn btn-immortal btn--disabled mid-mid-text"
-					<div
+						>
-						v-if="
+							Unstake
-							walletStore.connected &&
+						</div>
-							((walletStore.memeToken?.staked === 0 && !stakeonly) || cycleStore.currentCycle === 1)
+						<div v-else-if="!stakeonly" class="btn btn-immortal mid-mid-text" @click="openUnstake">
-						"
+							Order Unstake
-						class="btn btn-immortal btn--disabled mid-mid-text"
+						</div>
-					>
+					</template>
-						Unstake
+					<template v-else-if="walletStore.connected && ableToUnstake">
-					</div>
+						<div
-					<div
+							class="btn btn-immortal mid-mid-text text-center"
-						v-else-if="walletStore.connected && !stakeonly"
+							v-if="unstakeState === 0 && walletStore.orderedUnstakedAmount > 0n && ableToUnstake"
-						class="btn btn-immortal mid-mid-text"
+							@click="unstake"
-						@click="openUnstake"
+						>
-					>
+							Claim Unstaked $BLOOD
-						Unstake
+						</div>
-					</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="balanceOf"
+						:amount="walletStore.balanceOf"
 						v-if="stakeMenu & !unstakeMenu"
 					>
 						<template v-slot:body>
@@ -104,7 +109,10 @@
 							</div>
 						</template>
 						<template v-slot:message-end>
-							<div class="input-balance">Balance: {{ formatNumber(balanceOf) }}</div>
+							<div class="input-balance">
+								Balance:
+								{{ formatNumber(walletStore.balanceOf, 10n ** tokenStore.memeToken.decimals) }}
+							</div>
 						</template>
 					</stake-menu>
 					<div class="unstake-menu" v-else-if="stakeMenu & unstakeMenu">
@@ -131,11 +139,16 @@
 						</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-else>
+				<div
-					You can claim your stake next cycle
+					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>
@@ -197,6 +210,7 @@ const loading = ref(false);
  * state 4 staked
  */
 const state = ref(0);
+const unstakeState = ref(0);
 
 function openStake() {
 	stake.value = true;
@@ -210,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;
@@ -221,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;
+		const outputClaim = formatNumber(BigInt(rewardData.topics[3]), 10n ** tokenStore.memeToken.decimals);
-		showSuccessToast(
+		showSuccessToast(outputClaim, "Success!", "You just unstaked", "You can claim your stake next cycle.");
-			formatNumber(outputClaim),
+		stakeMenu.value = false;
-			"Success!",
-			"You just unstaked",
-			"You can claim your stake next cycle."
-		);
-		await walletStore.loadWalletData();
 	} catch (error) {
 		console.error("orderUnstake", error);
 	} finally {
+		await walletStore.loadWalletData();
 		state.value = 0;
 	}
 }
@@ -258,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);
@@ -277,12 +312,13 @@ async function stakeToken() {
 	}
 }
 
-const balanceOf = computed(() => {
+const ableToUnstake = computed(() => {
-	if (!walletStore.memeToken?.balanceOf) {
+	var cycleList = walletStore.memeToken?.orderedUnstakedCycles?.findIndex((obj) => obj.result > 0n);
-		return 0n;
+	console.log("cycleList", cycleList);
-	} else {
+	if (cycleList && cycleList > -1 && cycleList + 1 <= cycleStore.currentCycle) {
-		return walletStore.memeToken?.balanceOf / 10n ** tokenStore.memeToken.decimals;
+		return true;
 	}
+	return false;
 });
 
 const stateStake = computed(() => {

src/components/StakeMenu.vue

@@ -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";
 
@@ -50,15 +57,17 @@ async function addTokensPercent(value) {
 	console.log("props.amount", props.amount);
 	let amount;
 	if (props.amount !== undefined || props.amount !== null) {
-		console.log("props.amount", props.amount);
+		//todo function to calculate correct bigInt value (maybe use string and split)
-		amount = (props.amount * value) / 100n;
+		amount = (BigInt(props.amount) * value) / 100n;
 	} else if (props.stake) {
 		amount = (walletStore.memeToken.balanceOf * value) / 100n;
 	} else {
 		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() {

src/components/TokenClaim.vue

@@ -23,30 +23,38 @@
 			<rewards-wrapper
 				title="Sacrafice Reward"
 				coin="$BLOOD"
-				:amount="formatNumber(rewardsSacrifice)"
+				:amount="formatNumber(rewardsSacrifice, 10n ** tokenStore.memeToken.decimals)"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
 				title="Staking Bonus"
 				coin="$BLOOD"
-				:amount="formatNumber(rewardsStaking)"
+				:amount="formatNumber(rewardsStaking, 10n ** tokenStore.memeToken.decimals)"
 				image="/assets/img/vampir.png"
 			/>
 			<rewards-wrapper
 				title="Clan Bonus"
+				:subTitle="rewardsClan > 0 ? clanBonusPercentage : null"
 				coin="$BLOOD"
-				:amount="formatNumber(rewardsClan)"
+				:amount="formatNumber(rewardsClan, 10n ** tokenStore.memeToken.decimals)"
-				image="/assets/img/vampir.png"
+				: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"
-				:class="{ purple: rewardsTotal > 0 && activeCycle !== currentCycle }"
+				:class="{ purple: rewardsTotal > 0n && activeCycle !== currentCycle }"
 			>
-				<token-name-price name="$BLOOD" :price="formatNumber(rewardsTotal)"></token-name-price>
+				<token-name-price
-				<token-logo img="/assets/img/vampir.png" :alt="'vampire'"></token-logo>
+					name="$BLOOD"
+					:price="formatNumber(rewardsTotal, 10n ** tokenStore.memeToken.decimals)"
+				></token-name-price>
+				<token-logo img="/assets/img/vampir.png" :size="64" :alt="'vampire'"></token-logo>
 			</div>
 		</div>
 		<div class="claim-button">
@@ -54,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="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 sub-header" v-if="stateClaimedComp === 0" @click="claimRewards">
-						<div class="btn btn-immortal" disabled v-if="stateClaimedComp === 2">Sign Transaction</div>
+							Claim
-						<div class="btn btn-immortal" disabled v-if="stateClaimedComp === 3">
+						</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">
@@ -76,20 +101,32 @@
 						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
@@ -123,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");
@@ -175,10 +212,10 @@ async function stakeAndClaim() {
 		//
 		console.log("rewardData", rewardData);
 		console.log("stakeData", stakeData);
-		const outputClaim = BigInt(rewardData?.topics[2]) / 10n ** tokenStore.memeToken.decimals;
+		const outputClaim = BigInt(rewardData?.topics[2]);
-		const outputStaked = BigInt(stakeData?.topics[3]) / 10n ** tokenStore.memeToken.decimals;
+		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."
@@ -226,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."
@@ -242,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) {
@@ -265,7 +312,7 @@ const stateStakeClaimComp = computed(() => {
 		tokenNumber.value === null ||
 		tokenNumber.value === "" ||
 		tokenNumber.value === 0 ||
-		tokenNumber.value > walletStore.unclaimedRewards
+		BigInt(tokenNumber.value) > walletStore.unclaimedRewards / 10n ** tokenStore.memeToken.decimals
 	) {
 		returnState = 0;
 	}
@@ -285,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
@@ -308,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

src/components/TokenInput.vue

@@ -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="/assets/img/vampir.png" :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"]);

src/components/TokenNamePrice.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="token-price-wrapper">
-		<div class="token-name small-text">{{ props.name }}</div>
+		<div class="token-name tiny-text">{{ props.name }}</div>
-		<div class="token-price sub-header">{{ props.price }}</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>
 

src/components/toasts/ApprovedToast.vue

@@ -1,18 +1,6 @@
 <template>
 	<div class="approve-card">
-		<div class="left-side low-mid-text">
+		<div class="left-side low-mid-text">Transaction Successful</div>
-			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>
 </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

src/components/toasts/StakeSuccessToast.vue

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

src/components/toasts/SwitchNetworkToast.vue

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

src/helper/helper.js

@@ -1,31 +1,35 @@
 
-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) {
+export function formatNumber(nominator, denominator) {
-    return Intl.NumberFormat("en-US", {
+    let number = formatBigIntDivision(nominator, denominator);
-		notation: "compact",
+    number = InsertCommaNumber(number).toString();
-		maximumFractionDigits: 2,
+
-	}).format(parseInt(number));
+    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 formatNumber(number) {
+export function InsertCommaNumber(number) {
-    const options = {
-		style: "decimal",
-		minimumFractionDigits: 0,
-		maximumFractionDigits: 0,
-    };
     if (!number) {
         return 0
     }
-	const formattedWithOptions = number.toLocaleString("en-US", options);
+	const formattedWithOptions = number.toLocaleString("en-US");
     return formattedWithOptions;
 }
 
@@ -37,13 +41,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({

src/main.js

@@ -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,
+	faDroplet,
-    faMoon,
+	faMoon,
-    faPerson,
+	faPerson,
-    faWallet
+	faWallet,
+	faBlog
 );
 
 var logging = localStorage.getItem("LOGGING");
@@ -95,6 +98,35 @@ app.use(Toast, {
 });
 
 
+
+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();
@@ -107,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()]
 	);
 
@@ -120,7 +153,7 @@ try {
 					appName: "wagmi demo",
 				},
 			}),
-			new MetaMaskConnector({ chains }),
+			// new MetaMaskConnector({ chains }),
 			new InjectedConnector({
 				chains,
 				getProvider: () => (typeof window !== "undefined" ? window.myInjectedWallet : undefined),
@@ -194,8 +227,7 @@ try {
 			await tokenStore.initV2();
 			await rewardLockerStore.init();
             await walletStore.loadWalletData();
-            // console.log("cycleStore.currentCycle", cycleStore.currentCycle);
+		    await cycleStore.fillCycle(cycleStore.currentCycle, true);
-		    // await cycleStore.fillCycle(cycleStore.currentCycle);
 			await uniswapStore.init();
 		} else {
 			walletStore.address = null;
@@ -204,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();

src/stores/cycles.js

@@ -35,28 +35,37 @@ export const useCycleStore = defineStore("cycles", {
 			if (!this.cycles[this.activeCycle]?.rewards_sacrifice) {
 				return 0n;
 			}
-			return this.cycles[this.activeCycle]?.rewards_sacrifice / 10n ** tokenStore.memeToken.decimals;
+			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 / 10n ** tokenStore.memeToken.decimals;
+			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 / 10n ** tokenStore.memeToken.decimals;
+			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 / 10n ** tokenStore.memeToken.decimals;
+			return this.cycles[this.activeCycle]?.rewards_total;
+			
 		},
 	},
 	actions: {
@@ -91,7 +100,9 @@ export const useCycleStore = defineStore("cycles", {
 		async updateCurrentCycle(sacrificedToken) {
 			console.log("updateCurrentCycle");
 			const memeBurnerStore = useMemeburnerStore();
+			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]) {
@@ -99,6 +110,7 @@ export const useCycleStore = defineStore("cycles", {
 					(tokenData) => tokenData.contractAddress === sacrificedToken
 				);
 				this.cycles[this.currentCycle].token[tokenIndex].amount = data[tokenIndex].result[1];
+				this.cycles[this.currentCycle].token[tokenIndex].amountInBLD = tokenTotalSacrificed[tokenIndex].result;
 			}
 		},
 		/**
@@ -158,7 +170,7 @@ export const useCycleStore = defineStore("cycles", {
 						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;
@@ -184,9 +196,9 @@ export const useCycleStore = defineStore("cycles", {
 				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) {
+				// if (winner) {
-					winner.vamplogo = winner.vampwinner;
+				// 	winner.vamplogo = winner.vampwinner;
-				}
+				// }
 				this.cycles[cycleNumber] = {
 					goal: goal[0],
 					goalInBLD: goalInBLD,
@@ -208,9 +220,10 @@ export const useCycleStore = defineStore("cycles", {
 			const array = [];
 			const rewardLockerStore = useRewardLockerStore();
 			const lastCompletedCycle = await rewardLockerStore.lastCompletedCycle();
-			for (let index = 0; index <= Number(lastCompletedCycle); index++) {
+			for (let index = 1; index <= Number(lastCompletedCycle); index++) {
 				array.push(index);
 			}
+			console.log("array123", array);
 			return array;
 		},
 	},

src/stores/memeburner.js

@@ -97,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(),
+				amount,
-				minBLOOD.toString()
+				minBLOOD,
 			]);
             return hash;
         },

src/stores/rewardlocker.js

@@ -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) {
+		async getStakeRewardForSacrificeReward(sacrificedToken, reward) {
-            const walletStore = useWalletStoreV2();
+			const walletStore = useWalletStoreV2();
-            const cycleStore = useCycleStore();
+			const cycleStore = useCycleStore();
-            return await this.contract.read.getStakeRewardForSacrificeReward([
+			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) {
+        async unstake() {
-			return await this.contract.write.unstake([unstakeCycle]);
+            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]);
@@ -171,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;
+		},
 	},
 });

src/stores/sacrifice.js

@@ -19,20 +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 tokenStore = useTokenStore();
-            const cycleStore = useCycleStore();
+			const cycleStore = useCycleStore();
-
 
 			try {
-                this.sacrificeState = 2;
+				this.sacrificeState = 2;
-                console.log("hier");
+				const getRewards = await this.getRewardsFor(amount, token);
-                const getRewards = await this.getRewardsFor(amount, token);
+				console.log("getRewards", getRewards);
-                console.log("hier1");
-                console.log("getRewards", getRewards);
 				let hash = null;
 				if (getRewards.variant === "sacrifice") {
 					console.log("sacrifice");
@@ -55,70 +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);
+				console.log("rewardData", rewardData);
-                //output
+				//output
-				const outputSacrifice = rewardData.reduce((x, y) => {
+				let outputSacrifice = rewardData.reduce((x, y) => {
-					return x + BigInt(y.data) / 10n ** token.decimals;
+					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();
+				await walletStore.loadWalletData();
-                console.log("cycleStore.currentCycle", cycleStore.currentCycle);
+				console.log("cycleStore.currentCycle", cycleStore.currentCycle);
 				await cycleStore.fillCycle(cycleStore.currentCycle, true);
-                return true;
+				return true;
-            } catch (error) {
+			} catch (error) {
-                //we should show the user an issue
+				//we should show the user an issue
-                throw new Error(error);
+				throw new Error(error);
-            } finally {
+			} finally {
 				this.sacrificeState = 0;
-            }
+			}
 		},
-        async getRewardsFor(amount, token) {
+		async getRewardsFor(amount, token) {
-            console.log("getRewardsFor", {amount, token});
+			console.log("getRewardsFor", { amount, token });
 			const memeburnerStore = useMemeburnerStore();
 			const uniswapStore = useUniswapStore();
-            const walletStore = useWalletStoreV2();
+			const walletStore = useWalletStoreV2();
-            const rewardLockerStore = useRewardLockerStore();
+			const rewardLockerStore = useRewardLockerStore();
-			let output = 0;
+			let output = 0n;
 
 			let minBLOOD;
 
-            try {
+			try {
-                
 				if (!amount) {
 					this.sacrificeState = 0;
-					return output;
+					return {
+						output: 0n,
+					};
 				}
-                const amountETHBase = await memeburnerStore.getAmountETHBase(amount);
+				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(amount);
 				const rewardsForResultSum = rewardsForResult[0] + rewardsForResult[1];
 				// quote blood amount against ETH base amount
-				var quoteRewards = await uniswapStore.quoteExactInputSingle(amount, 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,
@@ -130,13 +131,6 @@ export const useSacrificeStore = defineStore("sacrifice", {
 							rewardsForResultSum,
 						});
 					}
-				} else {
-					/**
-					 * case 4
-					 * quoter threw an error
-					 */
-					//
-					output = rewardsForResultSum;
 				}
 				console.log("variant", variant);
 				console.log("amount", amount);
@@ -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;
+					// in this case you should use eth_call, so you are showing exact reward in cases of completing cycles
-				} else if (walletStore.connected && variant === "buy") {
+					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
@@ -178,7 +180,7 @@ export const useSacrificeStore = defineStore("sacrifice", {
 						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
+				//potential staking rewards
-                let stakingRewardsNumber = 0;
+				let stakingRewardsNumber = 0;
-                if (output > 0 && walletStore.connected) {
+				if (output > 0 && walletStore.connected) {
 					const stakingReward = await rewardLockerStore.getStakeRewardForSacrificeReward(
 						token.contractAddress,
 						output
 					);
-					stakingRewardsNumber = stakingReward / 10n ** token.decimals
+					stakingRewardsNumber = stakingReward;
-                }
+				}
-                const outputNumber = output / 10n ** BigInt(token.decimals);
+				return {
-				return { output: outputNumber, variant: variant, minETH: minETH, minBLOOD: minBLOOD, staking: stakingRewardsNumber };
+					output: output,
+					variant: variant,
+					minETH: minETH,
+					minBLOOD: minBLOOD,
+					staking: stakingRewardsNumber,
+				};
 			} catch (error) {
-                console.error("getRewardsFor", error);
+				console.error("getRewardsFor", error);
 			}
 		},
 	},

src/stores/tokens.js

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

src/stores/walletV2.js

@@ -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,
@@ -54,11 +53,29 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				return obj.contractAddress === tokenStore.memeToken.contractAddress;
 			}),
 		unclaimedRewards() {
-            const tokenStore = useTokenStore();
+			if (!this.memeToken?.unclaimedRewards) {
-            if (!this.memeToken?.unclaimedRewards) {
+				return 0n;
-                return 0n;
+			}
-            }
+			return this.memeToken.unclaimedRewards;
-            return this.memeToken.unclaimedRewards / 10n ** tokenStore.memeToken.decimals;
+		},
+		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: {
@@ -129,6 +146,12 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 			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,

src/views/CycleView.vue

@@ -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">
+			<div class="bloodline-page-description mid-mid-text">
-				Claim and trade your $BDL at each cycle's end. Become the most powerful bloodline and win extra rewards.
+				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-headline">Cycle Winner</div>
-						<div class="cycle-winner-subheadline">+25% Clan Bonus</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>
@@ -269,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
+            height: 72px
-            width: 48px
+            width: 72px
             position: relative
             img
-                height: 72px
+                &.logo
-                width: 72px
+                    height: 100%
-                border-radius: 50%
+                    width: 100%
-                position: absolute
+                    border: 1px solid yellow
-                left: 50%
+                    border-radius: 50%
-                top: 10px
+            img
-                transform: translate(-50%, -50%)
+                &.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%

src/views/HomeView.vue

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

vite.config.js

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

yarn.lock

@@ -726,6 +726,11 @@
     "@stablelib/random" "^1.0.2"
     "@stablelib/wipe" "^1.0.1"
 
+"@trysound/sax@0.2.0":
+  "integrity" "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
+  "resolved" "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz"
+  "version" "0.2.0"
+
 "@types/connect@^3.4.33":
   "integrity" "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ=="
   "resolved" "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz"
@@ -797,7 +802,7 @@
     "@vue/compiler-core" "3.3.4"
     "@vue/shared" "3.3.4"
 
-"@vue/compiler-sfc@3.3.4":
+"@vue/compiler-sfc@^3.2.20", "@vue/compiler-sfc@3.3.4":
   "integrity" "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ=="
   "resolved" "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz"
   "version" "3.3.4"
@@ -1543,6 +1548,11 @@
   "resolved" "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
   "version" "2.20.3"
 
+"commander@^7.2.0":
+  "integrity" "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+  "resolved" "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz"
+  "version" "7.2.0"
+
 "concat-map@0.0.1":
   "integrity" "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
   "resolved" "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -1571,11 +1581,50 @@
     "shebang-command" "^2.0.0"
     "which" "^2.0.1"
 
+"css-select@^5.1.0":
+  "integrity" "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg=="
+  "resolved" "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz"
+  "version" "5.1.0"
+  dependencies:
+    "boolbase" "^1.0.0"
+    "css-what" "^6.1.0"
+    "domhandler" "^5.0.2"
+    "domutils" "^3.0.1"
+    "nth-check" "^2.0.1"
+
+"css-tree@^2.2.1":
+  "integrity" "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw=="
+  "resolved" "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz"
+  "version" "2.3.1"
+  dependencies:
+    "mdn-data" "2.0.30"
+    "source-map-js" "^1.0.1"
+
+"css-tree@~2.2.0":
+  "integrity" "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="
+  "resolved" "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz"
+  "version" "2.2.1"
+  dependencies:
+    "mdn-data" "2.0.28"
+    "source-map-js" "^1.0.1"
+
+"css-what@^6.1.0":
+  "integrity" "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+  "resolved" "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz"
+  "version" "6.1.0"
+
 "cssesc@^3.0.0":
   "integrity" "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
   "resolved" "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   "version" "3.0.0"
 
+"csso@^5.0.5":
+  "integrity" "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ=="
+  "resolved" "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz"
+  "version" "5.0.5"
+  dependencies:
+    "css-tree" "~2.2.0"
+
 "csstype@^3.1.1":
   "integrity" "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
   "resolved" "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
@@ -1625,6 +1674,36 @@
   dependencies:
     "esutils" "^2.0.2"
 
+"dom-serializer@^2.0.0":
+  "integrity" "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="
+  "resolved" "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz"
+  "version" "2.0.0"
+  dependencies:
+    "domelementtype" "^2.3.0"
+    "domhandler" "^5.0.2"
+    "entities" "^4.2.0"
+
+"domelementtype@^2.3.0":
+  "integrity" "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+  "resolved" "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz"
+  "version" "2.3.0"
+
+"domhandler@^5.0.2", "domhandler@^5.0.3":
+  "integrity" "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="
+  "resolved" "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz"
+  "version" "5.0.3"
+  dependencies:
+    "domelementtype" "^2.3.0"
+
+"domutils@^3.0.1":
+  "integrity" "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA=="
+  "resolved" "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz"
+  "version" "3.1.0"
+  dependencies:
+    "dom-serializer" "^2.0.0"
+    "domelementtype" "^2.3.0"
+    "domhandler" "^5.0.3"
+
 "duplexify@^4.1.2":
   "integrity" "sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw=="
   "resolved" "https://registry.npmjs.org/duplexify/-/duplexify-4.1.2.tgz"
@@ -1665,6 +1744,11 @@
   dependencies:
     "once" "^1.4.0"
 
+"entities@^4.2.0":
+  "integrity" "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+  "resolved" "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
+  "version" "4.5.0"
+
 "es6-promise@^4.0.3":
   "integrity" "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
   "resolved" "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz"
@@ -2468,6 +2552,16 @@
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+"mdn-data@2.0.28":
+  "integrity" "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+  "resolved" "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz"
+  "version" "2.0.28"
+
+"mdn-data@2.0.30":
+  "integrity" "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
+  "resolved" "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz"
+  "version" "2.0.30"
+
 "micro-ftch@^0.3.1":
   "integrity" "sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg=="
   "resolved" "https://registry.npmjs.org/micro-ftch/-/micro-ftch-0.3.1.tgz"
@@ -2544,7 +2638,7 @@
   "resolved" "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
   "version" "3.0.0"
 
-"nth-check@^2.1.1":
+"nth-check@^2.0.1", "nth-check@^2.1.1":
   "integrity" "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="
   "resolved" "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz"
   "version" "2.1.1"
@@ -2996,7 +3090,7 @@
   dependencies:
     "atomic-sleep" "^1.0.0"
 
-"source-map-js@^1.0.2", "source-map-js@>=0.6.2 <2.0.0":
+"source-map-js@^1.0.1", "source-map-js@^1.0.2", "source-map-js@>=0.6.2 <2.0.0":
   "integrity" "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
   "resolved" "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   "version" "1.0.2"
@@ -3091,6 +3185,18 @@
   dependencies:
     "has-flag" "^4.0.0"
 
+"svgo@^3.0.2":
+  "integrity" "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ=="
+  "resolved" "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz"
+  "version" "3.0.2"
+  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"
+
 "swiper@^9.4.1":
   "integrity" "sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA=="
   "resolved" "https://registry.npmjs.org/swiper/-/swiper-9.4.1.tgz"
@@ -3252,6 +3358,14 @@
     "isomorphic-ws" "5.0.0"
     "ws" "8.12.0"
 
+"vite-svg-loader@^4.0.0":
+  "integrity" "sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA=="
+  "resolved" "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz"
+  "version" "4.0.0"
+  dependencies:
+    "@vue/compiler-sfc" "^3.2.20"
+    "svgo" "^3.0.2"
+
 "vite@^4.0.0", "vite@^4.3.5":
   "integrity" "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA=="
   "resolved" "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz"