ImmortalClanVue/src/components/ConnectWallet.vue

<template>
	<div class="connect-wallet-wrapper">
		<template v-if="!walletStore.connected">
			<div class="connect-wallet-headline low-mid-text">Connect your wallet</div>
			<div class="connectors-wrapper">
				<div
					class="connectors-element card"
					v-for="connector in walletStore.config?.connectors"
					@click="connectWallet(connector)"
				>
					<div class="connector-icon">
						<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
					</div>
					<div class="connector-name">{{ connector.name }}</div>
				</div>
			</div>
			<div>Are you coming from Binance, Bybit, Kucoin or any other crypto exchange?</div>
			<div>Follow these instructions first.</div>
		</template>

		<template v-else>
			<div class="connected-header">
				<div class="connected-header-avatar">
					<img :src="getblocky(walletStore.address)" alt="avatar" />
				</div>
				<div class="connected-header-address">
					{{ getAddressShortName(walletStore.address) }}
				</div>
				<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 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" @click="badgeClick(token)">
							<div
								class="bloodline-badge-text"
								v-if="tokenStore.memeToken.contractAddress === token.contractAddress"
							>
								Buy
							</div>
							<div v-else class="bloodline-badge-text">Sacrifice</div>
						</div>
					</div>
					<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
				</div>
			</div>
			<stake-component-v1 :variant="3"></stake-component-v1>
		</template>
	</div>
</template>

<script setup>
import { ref, toRaw, onMounted, onUnmounted, getCurrentInstance } from "vue";
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 StakeComponentV1 from "@/components/StakeComponentV1.vue";

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

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

const router = useRouter();

const walletStore = useWalletStoreV2();
const tokenStore = useTokenStore();

const goerliKey = import.meta.env.VITE_GOERLI_KEY;

const fromAddress = ref(null);

const accountSub = ref(null);

const instance = getCurrentInstance();

async function disconnectWallet() {
	console.log("disconnectWallet");
	try {
		instance.parent.emit("update:modelValue", false);
		await disconnect();
		// walletStore.connected = false;
		// walletStore.address = null;
	} catch (error) {
		console.log("error", error);
	}
}

function badgeClick(token) {
	var tokenData = tokenStore.getToken(token.contractAddress);
	tokenStore.activeToken = tokenData;
	// router.push({ name: "home", hash: `#${tokenData.name}` });
	if (tokenStore.memeToken.contractAddress === token.contractAddress) {
		//buy
		window.open(
			"https://app.uniswap.org/swap?inputCurrency=ETH&outputCurrency=0x00E5DAd5dA0FC4Da0baB7f0D99E28C07d8A88ee4&chain=goerli",
			"_blank"
		);
	} else {
		router.push({ name: "home" });
		instance.parent.emit("update:modelValue", false);
	}
}

async function connectWallet(connector) {
	instance.parent.emit("update:modelValue", false);
	await walletStore.connectWallet(toRaw(connector));
}
</script>

<style lang="sass">
.connect-wallet-wrapper
    display: flex
    flex-direction: column
    gap: 24px
    .connectors-wrapper
        display: flex
        flex-direction: column
        gap: 8px
        .connectors-element
            display: flex
            padding: 12px
            border: 1px solid rgba(152, 161, 192, 0.24)
            background: var(--grey, #858585)
            color: var(--midnight-black, #0F0F0F)
            &:hover, &:active, &:focus
                background-color: lighten(#858585, 20%)
                cursor: pointer
            .connector-icon
                border-radius: 12px
                width: 40px
                overflow: hidden
                height: 40px
            .connector-name
                padding: 0 8px
                align-self: center
                font-size: 16px
                @media (min-width: 992px)
                    font-size: 18px





    .connected-header
        margin-bottom: 24px
        display: flex
        gap: 16px
        align-items: center
        .connected-header-avatar
            img
                border-radius: 8px
        .connected-header-logout
            margin-left: auto
            &:hover, &:active, &:focus
                cursor: pointer
            svg
                font-size: 25px

    .connected-tokens-headline
        font-size: 18px
        margin-bottom: 16px
    .connected-tokens
        display: flex
        flex-direction: column
        gap: 16px
        margin-bottom: 24px
        .connected-token
            display: flex
            gap: 16px
            align-items: center
            .connected-token-button
                margin-left: auto
                .bloodline-badge
                    padding: 4px 16px
                    color: black
                    font-size: 14px
                    &:hover, &:active, &:focus
                        cursor: pointer
                        background-color: var(--grey-light)
</style>