update slideoutpanel, open errors tokeninit
This commit is contained in:
EmberSpirit
@@ -1,35 +1,69 @@
|
||||
<template>
|
||||
<h3>Connect Wallet</h3>
|
||||
<div class="connectors-wrapper" v-if="!walletStore.connected">
|
||||
<div class="connectors-element" 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 class="btn btn-immortal" v-else @click="disconnectWallet">disconnect</div>
|
||||
<div>Connected: {{ walletStore.connected }}</div>
|
||||
<div class="connect-wallet-headline">Connect Wallet</div>
|
||||
<div class="connectors-wrapper" v-if="!walletStore.connected">
|
||||
<div
|
||||
class="connectors-element"
|
||||
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 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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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 { getAddressShortName, getblocky } from "@/helper/helper.js";
|
||||
|
||||
import {
|
||||
createConfig,
|
||||
configureChains,
|
||||
mainnet,
|
||||
getAccount,
|
||||
getContract,
|
||||
connect,
|
||||
disconnect,
|
||||
InjectedConnector,
|
||||
watchAccount,
|
||||
} from "@wagmi/core";
|
||||
import { disconnect } from "@wagmi/core";
|
||||
|
||||
const walletStore = useWalletStoreV2();
|
||||
const tokenStore = useTokenStore();
|
||||
|
||||
const goerliKey = import.meta.env.VITE_GOERLI_KEY;
|
||||
|
||||
@@ -39,37 +73,6 @@ const accountSub = ref(null);
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
// config.value = createConfig({
|
||||
// autoConnect: true,
|
||||
// connectors: [
|
||||
// new CoinbaseWalletConnector({
|
||||
// chains,
|
||||
// options: {
|
||||
// appName: "wagmi demo",
|
||||
// },
|
||||
// }),
|
||||
// new MetaMaskConnector({ chains }),
|
||||
// new WalletConnectConnector({
|
||||
// chains,
|
||||
// options: {
|
||||
// projectId: projectId,
|
||||
// showQrModal: true,
|
||||
// metadata: {
|
||||
// name: "Bloodline-App",
|
||||
// description: "TODO Bloodline Description",
|
||||
// url: "https://gitea.loseyourip.com/",
|
||||
// icons: [
|
||||
// "https://gitea.loseyourip.com/assets/img/vampir.png",
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// }),
|
||||
// ],
|
||||
// publicClient,
|
||||
// webSocketPublicClient,
|
||||
// });
|
||||
// console.log("config", config);
|
||||
|
||||
async function disconnectWallet() {
|
||||
console.log("disconnectWallet");
|
||||
try {
|
||||
@@ -88,11 +91,18 @@ async function connectWallet(connector) {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="sass">
|
||||
.connect-wallet-headline
|
||||
font-family: Inter
|
||||
font-size: 18px
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
line-height: normal
|
||||
.connectors-wrapper
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
margin: 24px 0
|
||||
.connectors-element
|
||||
display: flex
|
||||
padding: 12px
|
||||
@@ -109,4 +119,33 @@ async function connectWallet(connector) {
|
||||
.connector-name
|
||||
padding: 0 8px
|
||||
align-self: center
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
.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
|
||||
svg
|
||||
font-size: 25px
|
||||
|
||||
.connected-tokens-headline
|
||||
font-size: 18px
|
||||
// .connected-tokens
|
||||
// .connected-token
|
||||
.connected-stake
|
||||
// .connected-stake-headline
|
||||
.connected-stake-buttons
|
||||
display: flex
|
||||
text-align: center
|
||||
gap: 16px
|
||||
div
|
||||
flex: 1 1 50%
|
||||
font-size: 18px
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user