update contracts+ desktop version
This commit is contained in:
EmberSpirit
+104
-115
@@ -1,75 +1,58 @@
|
||||
<template>
|
||||
<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 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 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">
|
||||
<div class="connected-header-avatar">
|
||||
<img :src="getblocky(walletStore.address)" alt="avatar" />
|
||||
<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-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 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 v-else class="bloodline-badge-text">Sacrifice</div>
|
||||
</div>
|
||||
<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
|
||||
</div>
|
||||
<token-logo :img="tokenStore.getToken(token.contractAddress).logo" :alt="'test'"></token-logo>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <stake-component>
|
||||
<template v-slot:headline> Staked </template>
|
||||
<template v-slot:subheadline>
|
||||
Stake for a 25% bonus on your sacrifice. Upper limit is your stake.
|
||||
</template>
|
||||
<template v-slot:actions>
|
||||
<div class="connected-stake-buttons" v-if="!stakeMenu">
|
||||
<div class="btn btn-immortal" @click="openStake">Stake</div>
|
||||
<div
|
||||
v-if="walletStore.memeToken?.staked === 0 && !stakeonly"
|
||||
class="btn btn-immortal btn--disabled"
|
||||
>
|
||||
Unstake
|
||||
</div>
|
||||
<div v-else-if="!stakeonly" class="btn btn-immortal" @click="openUnstake">Unstake</div>
|
||||
</div>
|
||||
</template>
|
||||
</stake-component> -->
|
||||
<stake-component-v1></stake-component-v1>
|
||||
<stake-component-v1 :variant="3"></stake-component-v1>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -129,65 +112,71 @@ 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
|
||||
.connect-wallet-wrapper
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
margin: 24px 0
|
||||
.connectors-element
|
||||
gap: 24px
|
||||
.connectors-wrapper
|
||||
display: flex
|
||||
padding: 12px
|
||||
border: 1px solid rgba(152, 161, 192, 0.24)
|
||||
background-color: #202020
|
||||
&:hover, &:active, &:focus
|
||||
background-color: lighten(#202020, 20%)
|
||||
cursor: pointer
|
||||
.connector-icon
|
||||
border-radius: 12px
|
||||
width: 40px
|
||||
overflow: hidden
|
||||
height: 40px
|
||||
.connector-name
|
||||
padding: 0 8px
|
||||
align-self: center
|
||||
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
|
||||
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
|
||||
|
||||
.connected-header
|
||||
margin-bottom: 24px
|
||||
display: flex
|
||||
gap: 16px
|
||||
align-items: center
|
||||
.connected-token-button
|
||||
.connected-header-avatar
|
||||
img
|
||||
border-radius: 8px
|
||||
.connected-header-logout
|
||||
margin-left: auto
|
||||
.bloodline-badge
|
||||
padding: 4px 16px
|
||||
color: black
|
||||
font-size: 14px
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user