seller flow + blockchain integration
This commit is contained in:
parent
17d6e86508
commit
0de0046064
@ -11,6 +11,8 @@ const props = defineProps({
|
||||
tokenValue: Number,
|
||||
});
|
||||
|
||||
console.log(props.pixTarget, props.tokenValue);
|
||||
|
||||
const qrCode = ref<string>("");
|
||||
const qrCodePayload = ref<string>("");
|
||||
const isPixValid = ref<boolean>(false);
|
||||
|
@ -4,9 +4,11 @@ import CustomButton from "@/components/CustomButton.vue";
|
||||
// Emits
|
||||
const emit = defineEmits(["sendNetwork"]);
|
||||
|
||||
const sendNetworkHandle = () => {
|
||||
emit("sendNetwork");
|
||||
};
|
||||
// props and store references
|
||||
const props = defineProps({
|
||||
pixKey: String,
|
||||
offer: Number,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -27,12 +29,12 @@ const sendNetworkHandle = () => {
|
||||
>
|
||||
<div>
|
||||
<p>Tokens ofertados</p>
|
||||
<p class="text-2xl text-gray-900">100 BRZ</p>
|
||||
<p class="text-2xl text-gray-900">{{ props.offer }} BRZ</p>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<p>Chave Pix</p>
|
||||
<p class="text-xl text-gray-900 break-words">
|
||||
c02942far7047f6shri5ifh371908973
|
||||
{{ props.pixKey }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
@ -44,7 +46,7 @@ const sendNetworkHandle = () => {
|
||||
</div>
|
||||
<CustomButton
|
||||
:text="'Enviar para a rede'"
|
||||
@buttonClicked="sendNetworkHandle()"
|
||||
@buttonClicked="emit('sendNetwork')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -14,12 +14,6 @@ const validDecimals = ref(true);
|
||||
// Emits
|
||||
const emit = defineEmits(["approveTokens"]);
|
||||
|
||||
// Blockchain methods
|
||||
const approveTokensHandle = async () => {
|
||||
console.log(offer.value, pixKey.value);
|
||||
emit("approveTokens");
|
||||
};
|
||||
|
||||
// Debounce methods
|
||||
const handleInputEvent = (event: any) => {
|
||||
const { value } = event.target;
|
||||
@ -106,7 +100,7 @@ const decimalCount = (num: Number) => {
|
||||
</div>
|
||||
<CustomButton
|
||||
:text="'Aprovar tokens'"
|
||||
@buttonClicked="approveTokensHandle()"
|
||||
@buttonClicked="emit('approveTokens', { offer, pixKey })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -170,7 +170,10 @@ const disconnectUser = () => {
|
||||
<div
|
||||
class="top-bar-info cursor-pointer"
|
||||
@click="
|
||||
[(menuOpenToggle = !menuOpenToggle), (currencyMenuOpenToggle = false)]
|
||||
[
|
||||
(menuOpenToggle = !menuOpenToggle),
|
||||
(currencyMenuOpenToggle = false),
|
||||
]
|
||||
"
|
||||
@mouseover="menuHoverToggle = true"
|
||||
@mouseout="menuHoverToggle = false"
|
||||
|
@ -241,8 +241,7 @@ const getProvider = (): ethers.providers.Web3Provider | null => {
|
||||
};
|
||||
|
||||
// Deposit methods
|
||||
// Gets value and pix key from user's form to create a deposit in the blockchain
|
||||
const addDeposit = async (tokenQty: Number, pixKey: string) => {
|
||||
const approveTokens = async (tokenQty: Number) => {
|
||||
const provider = getProvider();
|
||||
if (!provider) return;
|
||||
|
||||
@ -253,16 +252,23 @@ const addDeposit = async (tokenQty: Number, pixKey: string) => {
|
||||
mockToken.abi,
|
||||
signer
|
||||
);
|
||||
const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
|
||||
// First get the approval
|
||||
const apprv = await tokenContract.approve(
|
||||
addresses.p2pix,
|
||||
formatEther(String(tokenQty))
|
||||
);
|
||||
await apprv.wait();
|
||||
return apprv;
|
||||
};
|
||||
|
||||
// Gets value and pix key from user's form to create a deposit in the blockchain
|
||||
const addDeposit = async (tokenQty: Number, pixKey: String) => {
|
||||
const provider = getProvider();
|
||||
if (!provider) return;
|
||||
|
||||
const signer = provider.getSigner();
|
||||
const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
|
||||
// Now we make the deposit
|
||||
const deposit = await p2pContract.deposit(
|
||||
addresses.token,
|
||||
formatEther(String(tokenQty)),
|
||||
@ -391,6 +397,7 @@ export default {
|
||||
listReleaseTransactionByWalletAddress,
|
||||
listDepositTransactionByWalletAddress,
|
||||
listLockTransactionByWalletAddress,
|
||||
approveTokens,
|
||||
addDeposit,
|
||||
mapDeposits,
|
||||
formatBigNumber,
|
||||
|
@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="page">Histórico de ofertas</div>
|
||||
|
@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="page">Gerenciar Ofertas</div>
|
||||
|
@ -2,9 +2,11 @@
|
||||
import WantSellComponent from "../components/SellerSteps/WantSellComponent.vue";
|
||||
import SendNetwork from "../components/SellerSteps/SendNetwork.vue";
|
||||
import ValidationComponent from "../components/LoadingComponent.vue";
|
||||
import blockchain from "../utils/blockchain";
|
||||
|
||||
import { ref } from "vue";
|
||||
import router from "@/router";
|
||||
import { pix } from "@/utils/QrCodePix";
|
||||
|
||||
enum Step {
|
||||
Search,
|
||||
@ -15,24 +17,40 @@ enum Step {
|
||||
const flowStep = ref<Step>(Step.Sell);
|
||||
const loading = ref<boolean>(false);
|
||||
|
||||
const offerValue = ref<number>();
|
||||
const pixKeyBuyer = ref<string>("");
|
||||
|
||||
const walletConnect = async () => {
|
||||
flowStep.value = Step.Sell;
|
||||
};
|
||||
|
||||
const approveTokens = async () => {
|
||||
// Verificar tipagem
|
||||
const approveOffer = async ({ offer, pixKey }: any) => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
try {
|
||||
offerValue.value = offer;
|
||||
pixKeyBuyer.value = pixKey;
|
||||
await blockchain.approveTokens(offerValue.value);
|
||||
flowStep.value = Step.Network;
|
||||
}, 2000);
|
||||
loading.value = false;
|
||||
} catch {
|
||||
flowStep.value = Step.Sell;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const sendNetwork = async () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
try {
|
||||
if (offerValue.value && pixKeyBuyer.value) {
|
||||
await blockchain.addDeposit(offerValue.value, pixKeyBuyer.value);
|
||||
flowStep.value = Step.Sell;
|
||||
loading.value = false;
|
||||
}
|
||||
} catch {
|
||||
flowStep.value = Step.Network;
|
||||
loading.value = false;
|
||||
router.push("/");
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -42,14 +60,19 @@ const sendNetwork = async () => {
|
||||
@token-buy="walletConnect"
|
||||
/> -->
|
||||
<div v-if="flowStep == Step.Sell">
|
||||
<WantSellComponent v-if="!loading" @approve-tokens="approveTokens" />
|
||||
<WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
|
||||
<ValidationComponent
|
||||
v-if="loading"
|
||||
:message="'A transação está sendo enviada para a rede.'"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="flowStep == Step.Network">
|
||||
<SendNetwork v-if="!loading" @send-network="sendNetwork" />
|
||||
<SendNetwork
|
||||
:pixKey="pixKeyBuyer"
|
||||
:offer="Number(offerValue)"
|
||||
v-if="!loading"
|
||||
@send-network="sendNetwork"
|
||||
/>
|
||||
<ValidationComponent
|
||||
v-if="loading"
|
||||
:message="'A transação está sendo enviada para a rede.'"
|
||||
|
Loading…
x
Reference in New Issue
Block a user