initial commit
This commit is contained in:
Michel Fromme
@@ -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>
|
||||
Reference in New Issue
Block a user