update menu

src/components/ConnectWallet.vue

@@ -11,6 +11,12 @@
 			</div>
 			<div class="connector-name">{{ connector.name }}</div>
 		</div>
+		<div>
+			Are you coming from Binance, Poloniex, Kucoin or any other CEX?<br />
+			<br />
+			You don't have a wallet yet?<br /><br />
+			Follow these instructions first.
+		</div>
 	</div>
 	<div v-else>
 		<div class="connected-header">
@@ -20,35 +26,44 @@
 			<div class="connected-header-address">
 				{{ getAddressShortName(walletStore.address) }}
 			</div>
-			<div class="connected-header-logout">
+			<div class="connected-header-logout" @click="disconnectWallet">
 				<font-awesome-icon :icon="['fas', 'fa-arrow-right-from-bracket']" />
 			</div>
 		</div>
 		<div class="connected-tokens-headline">Your Tokens</div>
 		<div class="connected-tokens">
-			^
-			<div class="connected-token" v-for="token in tokenStore.token">
-				<token-name-price :name="token.name" price="31,310"></token-name-price>
-				<div class="connected-token-button"></div>
-				<div class="connected-token-logo"></div>
+			<div class="connected-token" v-for="token in walletStore.token">
+				<token-name-price
+					:name="tokenStore.getToken(token.contractAddress).name"
+					:price="token.balanceOf"
+				></token-name-price>
+				<div class="connected-token-button">
+					<div class="bloodline-badge grey">
+						<div class="bloodline-badge-text">Sacrifice</div>
+					</div>
+				</div>
+				<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
 			</div>
 		</div>
 		<div class="connected-stake bloodline-border white">
 			<div class="connected-stake-headline">Staked</div>
-			<div>$BLD 1,0000</div>
-			<div class="connected-stake-buttons">
-				<div class="btn btn-immortal">Stake</div>
-				<div class="btn btn-immortal">Unstake</div>
+			<div class="connected-stake-subheadline">Increase your sacrifice reward by staking.</div>
+			<div class="connected-stake-body">
+				<token-name-price
+					:name="tokenStore.getToken(walletStore.memeToken?.contractAddress).name"
+					:price="walletStore.memeToken.staked"
+				></token-name-price>
+				<token-logo img="/assets/img/token/bloodline.png" :alt="'test'"></token-logo>
+				<token-name-price class="stake-reward" name="Extra Reward" price="+20%"></token-name-price>
 			</div>
+			<div class="connected-stake-buttons" v-if="!stakeMenu">
+				<div class="btn btn-immortal" @click="openStake">Stake</div>
+				<div class="btn btn-immortal" @click="openUnstake">Unstake</div>
+			</div>
+			<Transition>
+				<stake-menu @close="stakeMenu = false" :stake="stake" v-if="stakeMenu"></stake-menu>
+			</Transition>
 		</div>
-
-		<div class="btn btn-immortal" @click="disconnectWallet">disconnect</div>
-	</div>
-	<div>
-		Are you coming from Binance, Poloniex, Kucoin or any other CEX?<br />
-		<br />
-		You don't have a wallet yet?<br /><br />
-		Follow these instructions first.
 	</div>
 </template>
 
@@ -58,13 +73,17 @@ import { useWalletStoreV2 } from "@/stores/walletV2";
 import { useTokenStore } from "@/stores/tokens";
 import Meme1Json from "@/assets/contracts/Meme1.json";
 import TokenNamePrice from "./TokenNamePrice.vue";
+import TokenLogo from "./TokenLogo.vue";
+import TokenInput from "./TokenInput.vue";
+import StakeMenu from "./StakeMenu.vue";
 import { getAddressShortName, getblocky } from "@/helper/helper.js";
 
 import { disconnect } from "@wagmi/core";
 
 const walletStore = useWalletStoreV2();
 const tokenStore = useTokenStore();
-
+const stakeMenu = ref(false);
+const stake = ref(null);
 const goerliKey = import.meta.env.VITE_GOERLI_KEY;
 
 const fromAddress = ref(null);
@@ -89,6 +108,16 @@ async function connectWallet(connector) {
 	instance.parent.emit("update:modelValue", false);
 	await walletStore.connectWallet(toRaw(connector));
 }
+
+function openStake() {
+	stake.value = true;
+	stakeMenu.value = true;
+}
+
+function openUnstake() {
+	stake.value = false;
+	stakeMenu.value = true;
+}
 </script>
 
 <style lang="sass">
@@ -137,10 +166,30 @@ async function connectWallet(connector) {
 
 .connected-tokens-headline
     font-size: 18px
-// .connected-tokens
-//     .connected-token
+.connected-tokens
+    .connected-token
+        display: flex
+        gap: 16px
+        padding: 16px 8px
+        align-items: center
+        .connected-token-button
+            margin-left: auto
+            .bloodline-badge
+                padding: 4px 16px
+                color: black
+                font-size: 14px
+
 .connected-stake
-    // .connected-stake-headline
+    .connected-stake-headline
+        margin-bottom: 8px
+    .connected-stake-subheadline
+        margin-bottom: 16px
+    .connected-stake-body
+        display: flex
+        gap: 16px
+        margin-bottom: 16px
+        .stake-reward
+            margin-left: auto
     .connected-stake-buttons
         display: flex
         text-align: center

src/components/Navbar.vue

@@ -95,8 +95,8 @@ header
         height: 82px
         @media (min-width: 992px)
             height: 128px
-        &.navbar--hidden
-            transform: translate3d(0,-100%,0)
+        // &.navbar--hidden
+        //     transform: translate3d(0,-100%,0)
         .navbar-inner
             display: flex
             padding: 16px 24px