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

initial commit

Browse Source
This commit is contained in:
Michel Fromme
2023-06-10 12:14:46 +02:00
commit 879e30d250
37 changed files with 13394 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BloodChart.vue
+95
View File
@@ -0,0 +1,95 @@
<template>
<div class="blood-chart-wrapper">
<div class="blood-chart-element" v-for="(coin, index) in dataPoints" :key="coin.name">
<div class="blood-chart-element-header">
<div class="blood-chart-coin">
<div :class="[{ drop: true, ['variant' + index]: true }]"></div>
</div>
<div class="blood-chart-coin-title">{{ coin.name }}</div>
</div>
<div class="blood-chart-element-body">
<div class="blood-chart-bar-wrapper">
<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">{{ coin.percentage }}%</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const dataPoints = [
{
name: "PEPE",
percentage: 34.4,
},
{
name: "Shiba",
percentage: 50.4,
},
{
name: "Doge",
percentage: 42.4,
},
];
</script>
<style lang="sass">
.blood-chart-wrapper
height: 500px
display: inline-flex
gap: 48px
.blood-chart-element
height: 100%
width: 50px
display: flex
flex-direction: column
.blood-chart-element-header
flex: 0 0 100px
.blood-chart-coin
height: 50px
width: 50px
border-radius: 50px
background-color: grey
margin-left: auto
margin-right: auto
position: relative
.blood-chart-element-body
background-color: lightgrey
flex: 1 1 auto
.blood-chart-bar-wrapper
height: 100%
display: flex
flex-direction: column
.blood-chart-bar
margin-top: auto
background-color: red
.drop
width: 1.1em
height: 1.1em
border-radius: 0 100% 100% 100%
background-color: red
position: absolute
animation: drop 3s infinite both
top: 32px
&.variant0
left: 14%
animation-delay: -5.2s
&.variant1
left: 39%
animation-delay: -.4s
&.variant2
left: 55%
animation-delay: -1.5s
@keyframes drop
0%
transform: translateY(0) scaleX(.85) rotate(45deg)
animation-timing-function: ease-out
60%
transform: translateY(120%) scaleX(.85) rotate(45deg)
animation-timing-function: ease-in
80%, 100%
transform: translateY(440px) scaleX(.85) rotate(45deg)
</style>
src/components/Navbar.vue
+90
View File
@@ -0,0 +1,90 @@
<script setup>
import { storeToRefs } from "pinia";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useWalletStore } from "@/stores/wallet";
const walletStore = useWalletStore();
const { connected, address } = storeToRefs(walletStore);
const showNavbar = ref(true);
const lastScrollPosition = ref(0);
function onScroll() {
const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
if (currentScrollPosition < 0) {
return;
}
showNavbar.value = currentScrollPosition < lastScrollPosition.value;
lastScrollPosition.value = currentScrollPosition;
}
onMounted(() => {
window.addEventListener("scroll", onScroll);
});
onBeforeUnmount(() => {
window.removeEventListener("scroll");
});
</script>
<template>
<header>
<div class="navbar" :class="{ 'navbar--hidden': !showNavbar }">
<div class="navbar-inner">
<div class="navbar-icon">
<router-link to="/">
<!-- <img alt="Parry logo" class="logo" src="@/assets/img/logo.svg" /> -->
<img alt="logo" class="logo" src="@/assets/img/vampir.png" />
</router-link>
</div>
<div class="navbar-center"></div>
<div class="navbar-end">
<button v-if="!connected" @click="walletStore.connectWallet">connect</button>
<span v-else> {{ address }}</span>
</div>
</div>
</div>
</header>
</template>
<style lang="sass" scoped>
header
.navbar
position: fixed
z-index: 3
box-sizing: border-box
background-color: grey
width: 100%
transform: translate3d(0,0,0)
transition: transform .3s ease,visibility 0s .3s linear
&.navbar--hidden
transform: translate3d(0,-100%,0)
.navbar-inner
display: flex
justify-content: space-between
padding: 0 20px
@media (min-width: 992px)
padding: 10px 80px
.navbar-center
display: flex
align-items: center
.main-menu-links
margin-right: 48px
&:hover, &:active, &:focus
color: lighten(black, 20%)
.main-menu-link
cursor: pointer
.navbar-end
display: flex
align-items: center
align-self: center
a
color: black
&:hover,&:focus, &:active
color: lighten(black, 20%)
.navbar-hamburger-open
font-size: 35px
.parry-twitter
font-size: 30px
margin-left: 32px
</style>
src/components/SacrificeToken.vue
+194
View File
@@ -0,0 +1,194 @@
<template>
<div class="sacrifice-wrapper card">
<div class="sacrifice-headline">Select Token</div>
<div class="sacrifice-select-tokens">
<div class="sacrifice-tokens">
<div
class="sacrifice-token"
:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
v-for="token in props.data"
:key="token.contractAddress"
@click="tokenStore.changeActiveToken(token)"
>
{{ token.name }}
</div>
</div>
</div>
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
<div class="sacrifice-from-wrapper">
<div class="sarcrifice-from-input">
<input type="number" v-model="tokenNumber" /><img src="@/assets/img/vampir.png" alt="vampir" />
</div>
<div class="value-adder">
<div class="sacrifice-adder-step" @click="addTokens(1000000)">+1m</div>
<div class="sacrifice-adder-step" @click="addTokens(10000000)">+10m</div>
<div class="sacrifice-adder-step" @click="addTokens(100000000)">+100m</div>
<div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">Max</div>
</div>
</div>
<div class="sacrifice-divider">
<font-awesome-icon :icon="['fas', 'arrow-down']" />
</div>
<div class="sacrifice-to-wrapper">
<div class="sarcrifice-from-input">
<div class="sacrifice-to-output">
<div class="sacrifice-to-output-coin">{{ activeToken.name }}</div>
<div class="sacrifice-to-output-rewards">2.312.310</div>
</div>
<img src="@/assets/img/vampir.png" alt="vampir" />
</div>
</div>
<div class="sacrifice-buttons-function-wrapper">
<div v-if="connected">
<div
class="btn btn-immortal"
v-if="activeToken.allowance > 0"
@click="approvalData = tokenStore.sacrificeToken(1)"
>
Sacrifce {{ activeToken.name }}
</div>
<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
Approve {{ activeToken.name }}
</div>
</div>
<div v-else>
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect Wallet</div>
</div>
</div>
<div class="sacrifice-fees-info-wrapper">
<div class="sacrifice-feed-info">
<div class="sacrifice-fees-state">Disabled</div>
<div class="sacrifice-feed-amount">42Gwei</div>
</div>
<div class="sacrifice-feed-info-text">Increase amount to pay 97% less network fees.</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from "vue";
import { useWalletStore } from "@/stores/wallet";
import { useTokenStore } from "@/stores/tokens";
import { storeToRefs } from "pinia";
const walletStore = useWalletStore();
const { contract, connected } = storeToRefs(walletStore);
const tokenStore = useTokenStore();
const { activeToken } = storeToRefs(tokenStore);
const props = defineProps({
data: Array,
});
watch(
activeToken,
() => {
tokenNumber.value = 0;
},
{ deep: true }
);
const tokenNumber = ref(0);
const approvalData = ref(null);
function addTokens(value) {
tokenNumber.value = tokenNumber.value + value;
}
</script>
<style lang="sass">
.sacrifice-wrapper
padding: 12px 24px
width: 450px
display: flex
flex-direction: column
margin-left: auto
margin-right: auto
background-color: var(--primary)
.sacrifice-headline
text-align: center
font-size: 36px
.sacrifice-select-tokens
padding: 24px
display: flex
margin-bottom: 32px
.sacrifice-tokens
display: flex
width: 100%
justify-content: space-evenly
.sacrifice-token
width: 50px
height: 50px
padding: 12px
border: 1px solid lightgrey
cursor: pointer
background-color: var(--tertiary)
&:hover,
&:active,
&:focus
background-color: var(--tertiary-dark)
&.sacrifice-token--active
background-color: var(--tertiary-dark)
.sacrifice-buttons-function-wrapper
text-align: center
display: flex
justify-content: center
margin-top: 24px
.sacrifice-fees-info-wrapper
margin-top: 24px
.sacrifice-feed-info
display: flex
.sacrifice-feed-amount
margin-left: auto
.sacrifice-from-to-wrapper
.sacrifice-divider
text-align: center
.sacrifice-from-wrapper,.sacrifice-to-wrapper
border: 1px solid black
padding: 16px 24px
.sarcrifice-from-input
display: flex
margin-bottom: 8px
height: 60px
input
width: 100%
font-size: 32px
img
margin-left: 16px
.sacrifice-to-output
flex: 1 1 auto
text-align: left
.sacrifice-to-output-coin
font-size: 24px
.sacrifice-to-output-rewards
font-size: 42px
.value-adder
display: flex
gap: 6px
.sacrifice-adder-step
padding: 0 12px
background-color: var(--tertiary)
border: 1px solid var(--tertiary-dark)
&:hover,
&:active,
&:focus
background-color: var(--secondary)
border: 1px solid var(--secondary-dark)
cursor: pointer
.sacrifice-adder-balance
margin-left: auto
.sacrifice-adder-max
margin-left: 12px
color: red
&:hover,
&:focus,
&:active
color: darken(red, 10%)
transform: scale(1.1)
transition: transform 0s
</style>
src/components/icons/IconCommunity.vue
+7
View File
@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template>
src/components/icons/IconDocumentation.vue
+7
View File
@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template>
src/components/icons/IconEcosystem.vue
+7
View File
@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template>
src/components/icons/IconSupport.vue
+7
View File
@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template>
src/components/icons/IconTooling.vue
+19
View File
@@ -0,0 +1,19 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
></path>
</svg>
</template>