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"
					:class="[[connector.id]]"
					v-for="connector in walletStore.config?.connectors"
					@click="connectWallet(connector)"
				>
					<div class="connector-icon">
						<template v-if="connector.id === 'injected'">
							<font-awesome-icon :icon="['fas', 'wallet']" />
						</template>
						<template v-else>
							<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
						</template>
					</div>
					<div class="connector-name">
						<template
							v-if="
								connector.id !== 'metaMask' ||
								(connector.id === 'metaMask' && isMetaMaskInstalled(connector))
							"
						>
							{{ connector.name }}
						</template>
						<template v-else> Install {{ connector.name }} </template>
					</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 / 10n ** tokenStore.getToken(token.contractAddress).decimals"
					></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 TokenNamePrice from "./TokenNamePrice.vue";
import TokenLogo from "./TokenLogo.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 instance = getCurrentInstance();

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

function isMetaMaskInstalled(connector) {
	const metamaskInstalled = connector?.options?.getProvider();
	if (metamaskInstalled) {
		return true;
	}
	return false;
}

//go to the sacrifice-page and select the clicked token
//if contract === bloodline show buy
//we could also show buy, if there is no pepe
function badgeClick(token) {
	var tokenData = tokenStore.getToken(token.contractAddress);
	if (tokenStore.memeToken.contractAddress === token.contractAddress) {
		//buy
		window.open(
			`https://app.uniswap.org/swap?inputCurrency=ETH&outputCurrency=${token.contractAddress}&chain=goerli`,
			"_blank"
		);
	} else {
		router.push({ name: "home" });
		instance.parent.emit("update:modelValue", false);
	}
}

//special case for metaMask, but I think that is the most used wallet
async function connectWallet(connector) {
	if (connector.id === "metaMask" && !isMetaMaskInstalled(connector)) {
		window.open(" https://metamask.io/", "_blank");
		return;
	}
	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
            &.injected
                .connector-icon
                    background-color: white
                    display: flex
                    justify-content: center
                    align-items: center
                    svg
                        font-size: 25px
            .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
            height: 56px
            .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>