bigint umpdate

src/components/SacrificeToken.vue

@@ -1,7 +1,6 @@
 <template>
 	<div class="sacrifice-wrapper card card--glow">
-		<div class="sacrifice-headline">Select Sacrifice</div>
-		<button @click="splashBlood++">splash</button>
+		<div class="sacrifice-headline">Select Sacrifice {{ splashBlood }}</div>
 		<div class="sacrifice-select-tokens">
 			<div class="sacrifice-tokens">
 				<div
@@ -26,20 +25,14 @@
 			</div>
 		</div>
 		<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
-			<div
-				:class="{
-					'sacrifice-from-wrapper': true,
-					'bloodline-border': true,
-					'bloodline-border--variant1': true,
-					purple: true,
-				}"
-			>
+			<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1 purple">
 				<token-input
-					:modelValue="sacrificeStore.sacrificeNumber"
+					:modelValue="sacrificeStore.sacrificeNumber / 10n ** activeToken.decimals"
 					@input="
 						($event) => {
-							sacrificeStore.sacrificeNumber = $event.target.value;
-							processChange($event.target.value);
+							const value = BigInt($event.target.value) * 10n ** 18n;
+							sacrificeStore.sacrificeNumber = value;
+							processChange(value);
 						}
 					"
 					:max="activeWalletToken?.balanceOf"
@@ -66,7 +59,7 @@
 					<template v-slot:message-end v-if="activeWalletToken?.balanceOf">
 						<div class="input-balance tiny-text">
 							Balance:
-							{{ activeWalletToken?.balanceOf }}
+							{{ BigInt(activeWalletToken?.balanceOf) / 10n ** activeToken.decimals }}
 						</div>
 						<div class="input-max tiny-text" @click="addMaxTokens">Max</div>
 					</template>
@@ -232,7 +225,7 @@ const stateComputed = computed(() => {
 	if (
 		sacrificeStore.sacrificeNumber === null ||
 		sacrificeStore.sacrificeNumber === "" ||
-		sacrificeStore.sacrificeNumber === 0
+		sacrificeStore.sacrificeNumber === 0n
 	) {
 		returnState = 0;
 	} else if (sacrificeStore.sacrificeState === 2) {
@@ -275,6 +268,7 @@ onBeforeUnmount(() => {
 
 async function approveToken(amount) {
 	try {
+		console.log("amount", amount);
 		sacrificeStore.sacrificeState = 2;
 		const hash = await tokenStore.approveToken(amount);
 		sacrificeStore.sacrificeState = 3;
@@ -295,11 +289,11 @@ async function approveToken(amount) {
 
 async function addTokens(value) {
 	if (!walletStore.connected || sacrificeStore.sacrificeNumber < activeWalletToken.value?.balanceOf) {
-		sacrificeStore.sacrificeNumber = Number(sacrificeStore.sacrificeNumber) + Number(value);
+		sacrificeStore.sacrificeNumber = BigInt(sacrificeStore.sacrificeNumber) + value;
 	} else {
-		sacrificeStore.sacrificeNumber = Number(sacrificeStore.sacrificeNumber) - Number(value);
-		if (sacrificeStore.sacrificeNumber < 0) {
-			sacrificeStore.sacrificeNumber = 0;
+		sacrificeStore.sacrificeNumber = sacrificeStore.sacrificeNumber - value;
+		if (sacrificeStore.sacrificeNumber < 0n) {
+			sacrificeStore.sacrificeNumber = 0n;
 		}
 	}
 
@@ -330,7 +324,9 @@ function showApprovedToast(value, header, subheader, info) {
 		},
 		// Listen and react to events using callbacks. In this case we listen for
 		// the "click" event emitted when clicking the toast button
-		listeners: {},
+		listeners: {
+			sacrificed: showSplash,
+		},
 	};
 
 	// Render the toast and its contents
@@ -345,9 +341,16 @@ function showApprovedToast(value, header, subheader, info) {
 	});
 }
 
+function showSplash() {
+	splashBlood.value++;
+}
+
 //call function in the store and remove icon,
 async function sacrificeToken() {
-	await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, activeToken.value);
+	var result = await sacrificeStore.sacrificeToken(sacrificeStore.sacrificeNumber, activeToken.value);
+	if (result) {
+		showSplash();
+	}
 	toast.dismiss(approveToast.value);
 }