start implementing frontend design

src/components/SacrificeToken.vue

@@ -1,5 +1,6 @@
 <template>
-	<div class="sacrifice-wrapper card">
+	<div class="sacrifice-wrapper card bloodline-wrapper">
+		{{ activeToken.allowance }}
 		<div class="sacrifice-headline">Select Token</div>
 		<div class="sacrifice-select-tokens">
 			<div class="sacrifice-tokens">
@@ -15,37 +16,53 @@
 			</div>
 		</div>
 		<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
-			<div class="sacrifice-from-wrapper">
+			<div class="sacrifice-from-wrapper bloodline-border">
 				<div class="sarcrifice-from-input">
-					<input type="number" v-model="tokenNumber" /><img src="@/assets/img/vampir.png" alt="vampir" />
+					<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" /><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-step bloodline-badge" @click="addTokens(1000000)">+1m</div>
+					<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
+					<div class="sacrifice-adder-step bloodline-badge" @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">
+			<div class="sacrifice-divider bloodline-devider">
 				<font-awesome-icon :icon="['fas', 'arrow-down']" />
 			</div>
-			<div class="sacrifice-to-wrapper">
+			<div class="sacrifice-to-wrapper bloodline-border">
 				<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 class="sacrifice-to-output-rewards">{{ output }}</div>
 					</div>
 					<img src="@/assets/img/vampir.png" alt="vampir" />
 				</div>
 			</div>
+			<div class="sacrifice-fees-info-wrapper">
+				<div class="sacrifice-fees-img">
+					<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
+				</div>
+				<div class="sacrifice-fees-body">
+					<div class="sacrifice-fees-body-header">
+						<div class="sacrifice-fees-body-header-title">Gas Support</div>
+						<div class="sacrifice-fees-body-header-amount">42Gwei</div>
+					</div>
+					<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
+				</div>
+			</div>
 			<div class="sacrifice-buttons-function-wrapper">
 				<div v-if="connected">
 					<div
 						class="btn btn-immortal"
-						v-if="activeToken.allowance > 0"
+						v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
 						@click="approvalData = tokenStore.sacrificeToken(1)"
 					>
+						<font-awesome-icon v-if="loading" icon="spinner" spin />
 						Sacrifce {{ activeToken.name }}
 					</div>
 					<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
@@ -53,16 +70,9 @@
 					</div>
 				</div>
 				<div v-else>
-					<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect Wallet</div>
+					<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</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>
@@ -72,12 +82,13 @@ import { ref, defineProps, watch } from "vue";
 import { useWalletStore } from "@/stores/wallet";
 import { useTokenStore } from "@/stores/tokens";
 import { storeToRefs } from "pinia";
+import Helper from "@/utils/helper.js";
 
 const walletStore = useWalletStore();
 const { contract, connected } = storeToRefs(walletStore);
 
 const tokenStore = useTokenStore();
-const { activeToken } = storeToRefs(tokenStore);
+const { activeToken, loading } = storeToRefs(tokenStore);
 
 const props = defineProps({
 	data: Array,
@@ -86,14 +97,21 @@ const props = defineProps({
 watch(
 	activeToken,
 	() => {
-		tokenNumber.value = 0;
+		tokenNumber.value = null;
 	},
 	{ deep: true }
 );
 
 const tokenNumber = ref(0);
+const output = ref(0);
 const approvalData = ref(null);
 
+const processChange = Helper.debounce((e) => test(e));
+
+async function test(e) {
+	console.log("hier", e);
+	output.value = await tokenStore.getRewardsFor(parseInt(e.target.value));
+}
 function addTokens(value) {
 	tokenNumber.value = tokenNumber.value + value;
 }
@@ -102,8 +120,6 @@ function addTokens(value) {
 <style lang="sass">
 
 .sacrifice-wrapper
-    padding: 12px 24px
-    width: 450px
     display: flex
     flex-direction: column
     margin-left: auto
@@ -121,8 +137,9 @@ function addTokens(value) {
         width: 100%
         justify-content: space-evenly
         .sacrifice-token
-            width: 50px
-            height: 50px
+            width: 132px
+            height: 132px
+            border-radius: 16px
             padding: 12px
             border: 1px solid lightgrey
             cursor: pointer
@@ -138,19 +155,26 @@ function addTokens(value) {
         display: flex
         justify-content: center
         margin-top: 24px
+        .btn
+            padding: 16px 64px
     .sacrifice-fees-info-wrapper
+        display: flex
+        border: 2px dashed var(--grey)
+        border-radius: 16px
+        padding: 16px 24px
         margin-top: 24px
-        .sacrifice-feed-info
-            display: flex
-            .sacrifice-feed-amount
-                margin-left: auto
+        .sacrifice-fees-img
+            flex: 0 0 15%
+        .sacrifice-fees-body
+            flex: 1 1 auto
+            .sacrifice-fees-body-header
+                font-size: 24px
+                display: flex
+                flex-direction: row
+                justify-content: space-between
 
 .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
@@ -171,9 +195,7 @@ function addTokens(value) {
             display: flex
             gap: 6px
             .sacrifice-adder-step
-                padding: 0 12px
-                background-color: var(--tertiary)
-                border: 1px solid var(--tertiary-dark)
+                font-size: 14px
                 &:hover,
                 &:active,
                 &:focus