seller flow + blockchain integration

This commit is contained in:
brunoedcf 2022-12-23 15:51:13 -03:00
parent 17d6e86508
commit 0de0046064
8 changed files with 61 additions and 32 deletions

View File

@ -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);

View File

@ -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>

View File

@ -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>

View File

@ -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"

View File

@ -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,

View File

@ -1,5 +1,4 @@
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<template>
<div class="page">Histórico de ofertas</div>

View File

@ -1,5 +1,4 @@
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<template>
<div class="page">Gerenciar Ofertas</div>

View File

@ -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.'"