cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update slideoutpanel, open errors tokeninit

Browse Source
This commit is contained in:
EmberSpirit
2023-08-05 12:03:19 +02:00
parent 6c4933a6a8
commit ceac2a1083
26 changed files with 10440 additions and 16822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectWallet.vue
+94 -55
View File
@@ -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>
src/components/Navbar.vue
+24 -8
View File
@@ -2,6 +2,8 @@
import { storeToRefs } from "pinia";
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { getblocky } from "@/helper/helper.js";
const emit = defineEmits(["showPanel"]);
const walletStore = useWalletStoreV2();
@@ -13,8 +15,7 @@ const showNavbar = ref(true);
const lastScrollPosition = ref(0);
function onScroll() {
const currentScrollPosition =
window.pageYOffset || document.documentElement.scrollTop;
const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
if (currentScrollPosition < 0) {
return;
}
@@ -67,10 +68,13 @@ onBeforeUnmount(() => {
<div v-if="!isMobile">
<!-- <div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
<div v-if="!address" class="btn btn-immortal" @click="showPanel = true">connect</div>
<span v-else @click="showPanel = true"> {{ address }}</span>
<span v-else @click="showPanel = true"> test</span>
</div>
<div v-else class="hamburger-menu" @click="showPanel = true">
<font-awesome-icon :icon="['fas', 'bars']" />
<div v-else @click="showPanel = true">
<div class="login-icon" v-if="!address">
<font-awesome-icon :icon="['fas', 'fa-arrow-right-to-bracket']" />
</div>
<div v-else><img :src="getblocky(address)" alt="avatar" /></div>
</div>
</div>
</div>
@@ -133,7 +137,19 @@ header
.navbar-end
display: flex
margin-left: auto
.hamburger-menu
color: var(--purple)
font-size: 42px
.login-icon
color: var(--white)
background-color: var(--purple)
padding: 8px
font-size: 25px
border-radius: 8px
width: 44px
height: 44px
display: flex
justify-content: center
align-items: center
img
width: 32px
height: 32px
border-radius: 8px
</style>
src/components/SlideoutPanel.vue
+12 -14
View File
@@ -1,12 +1,11 @@
<template>
<div class="slideout-overlay" :class="{'open': props.modelValue}" @click="showPanel = false">
<div :class="{'slideout-wrapper': true, 'open': props.modelValue}" >
<div class="slideout-panel" @click="testClick">
<slot></slot>
</div>
</div>
</div>
<div class="slideout-overlay" :class="{ open: props.modelValue }" @click="showPanel = false">
<div :class="{ 'slideout-wrapper': true, open: props.modelValue }">
<div class="slideout-panel" @click="testClick">
<slot></slot>
</div>
</div>
</div>
</template>
<script setup>
@@ -28,7 +27,6 @@ function testClick(e) {
<style lang="sass">
.slideout-overlay
background-color: rgba(0,0,0,.5)
z-index: 100
&.open
height: 100%
@@ -39,13 +37,13 @@ function testClick(e) {
height: 100vh
position: fixed
display: flex
border: 1px solid rgba(152, 161, 192, 0.24)
box-shadow: rgba(0, 0, 0, 0.24) 12px 16px 24px, rgba(0, 0, 0, 0.24) 12px 8px 12px, rgba(0, 0, 0, 0.32) 4px 4px 8px
background-color: #2D2D2D
background-color: var(--midnight-black, #0F0F0F)
border-radius: 16px
transition: margin-bottom 250ms ease 0s
width: 100%
margin-bottom: -100vh
bottom: 0
overflow: auto
@media (min-width: 992px)
margin-right: -300px
transition: margin-right 250ms ease 0s
@@ -59,7 +57,7 @@ function testClick(e) {
.slideout-panel
width: 100%
height: 100%
padding: 24px
padding: 24px 24px 16px 24px
@media (min-width: 992px)
width: 300px
.slideout-icon
@@ -68,4 +66,4 @@ function testClick(e) {
background-color: lighten(#2D2D2D, 20%)
svg
font-size: 30px
</style>
</style>
src/components/TokenClaim.vue
+6 -13
View File
@@ -18,12 +18,7 @@
/>
</div>
<div class="rewards-list" v-else>
<rewards-wrapper
title="Total Sacrafice Reward"
coin="$BLOOD"
amount="0"
image="/assets/img/vampir.png"
/>
<rewards-wrapper title="Total Sacrafice Reward" coin="$BLOOD" amount="0" image="/assets/img/vampir.png" />
<rewards-wrapper
title="Total Stake Reward"
coin="$BLOOD"
@@ -41,11 +36,10 @@
</div>
<div v-else class="btn btn-immortal btn--disabled">Nothing to claim</div>
</div>
<div class="stake-buttons">
<div class="stake-buttons">
<div class="btn btn-immortal">Stake</div>
<div class="btn btn-immortal">Unstake</div>
</div>
</div>
</div>
</template>
@@ -54,17 +48,16 @@ import { storeToRefs } from "pinia";
import RewardsWrapper from "@/components/RewardsWrapper.vue";
import { inject, ref, onMounted } from "vue";
import { useRewardLockerStore } from "@/stores/rewardlocker";
import { useWalletStore } from "@/stores/wallet";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { useRoundsStore } from "@/stores/rounds";
const clanRewards = ref(0);
const rewards = ref(0);
const isMobile = inject("isMobile");
const rewardLockerStore = useRewardLockerStore();
const walletStore = useWalletStore();
const walletStore = useWalletStoreV2();
const roundStore = useRoundsStore();
const { address } = storeToRefs(walletStore);
const { activeRound, currentRound, getCurrentRoundData } =
storeToRefs(roundStore);
const { activeRound, currentRound, getCurrentRoundData } = storeToRefs(roundStore);
onMounted(async () => {});
src/components/TokenNamePrice.vue
+23
View File
@@ -0,0 +1,23 @@
<template>
<div class="token-price-wrapper">
<div class="token-name">{{ props.name }}</div>
<div class="token-price">{{ props.price }}</div>
</div>
</template>
<script setup>
const props = defineProps({
name: String,
price: Number,
});
</script>
<style lang="sass">
.token-price-wrapper
.token-name
font-size: 14px
margin-bottom: 4px
.token-price
font-size: 24px
letter-spacing: 4.32px
</style>