Merge branch 'list-tokens' of https://github.com/liftlearning/P2Pix-Front-End into list-tokens
This commit is contained in:
EsioFreitas
@@ -1,21 +1,128 @@
|
||||
<script setup lang="ts">
|
||||
import SearchComponent from "../components/SearchComponent.vue";
|
||||
import ValidationComponent from "../components/LoadingComponent.vue";
|
||||
import ListComponent from "@/components/ListComponent.vue";
|
||||
import blockchain from "../utils/blockchain";
|
||||
import { ref } from "vue";
|
||||
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import QrCodeComponent from "../components/QrCodeComponent.vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
enum Step {
|
||||
Search,
|
||||
Buy,
|
||||
List,
|
||||
}
|
||||
|
||||
// States
|
||||
const etherStore = useEtherStore();
|
||||
const { loadingLock, walletAddress, locksAddedList } = storeToRefs(etherStore);
|
||||
const flowStep = ref<Step>(Step.Search);
|
||||
const pixTarget = ref<string>("");
|
||||
const tokenAmount = ref<number>();
|
||||
const lockTransactionHash = ref<string>("");
|
||||
const lockId = ref<string>("");
|
||||
const loadingRelease = ref<Boolean>(false);
|
||||
const lastWalletTransactions = ref<any[] | undefined>([]);
|
||||
|
||||
const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
|
||||
// finish buy screen
|
||||
console.log(selectedDeposit);
|
||||
let depositDetail;
|
||||
const depositId = selectedDeposit["args"]["depositID"];
|
||||
await blockchain
|
||||
.mapDeposits(selectedDeposit["args"]["depositID"])
|
||||
.mapDeposits(depositId)
|
||||
.then((deposit) => (depositDetail = deposit));
|
||||
console.log(tokenValue);
|
||||
console.log(depositDetail);
|
||||
tokenAmount.value = tokenValue;
|
||||
pixTarget.value = depositDetail?.pixTarget;
|
||||
|
||||
// Makes lock with deposit ID and the Amount
|
||||
if (depositDetail) {
|
||||
flowStep.value = Step.Buy;
|
||||
etherStore.setLoadingLock(true);
|
||||
|
||||
await blockchain
|
||||
.addLock(depositId, tokenValue)
|
||||
.then((lock) => {
|
||||
lockTransactionHash.value = lock.hash;
|
||||
})
|
||||
.catch(() => {
|
||||
flowStep.value = Step.Search;
|
||||
});
|
||||
|
||||
etherStore.setLoadingLock(false);
|
||||
}
|
||||
};
|
||||
|
||||
const releaseTransaction = async ({ e2eId }: any) => {
|
||||
flowStep.value = Step.List;
|
||||
loadingRelease.value = true;
|
||||
|
||||
const findLockId = locksAddedList.value.find((element) => {
|
||||
if (element.transactionHash === lockTransactionHash.value) {
|
||||
lockId.value = element.args.lockID;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
if (findLockId) {
|
||||
console.log(
|
||||
pixTarget.value,
|
||||
String(tokenAmount.value),
|
||||
Number(e2eId),
|
||||
lockId.value
|
||||
);
|
||||
|
||||
const release = await blockchain.releaseLock(
|
||||
pixTarget.value,
|
||||
String(tokenAmount.value),
|
||||
Number(e2eId),
|
||||
lockId.value
|
||||
);
|
||||
release.wait();
|
||||
|
||||
lastWalletTransactions.value =
|
||||
await blockchain.listTransactionByWalletAddress(
|
||||
walletAddress.value.toLowerCase()
|
||||
);
|
||||
|
||||
console.log(tokenAmount);
|
||||
|
||||
loadingRelease.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SearchComponent @token-buy="confirmBuyClick" />
|
||||
<SearchComponent
|
||||
v-if="flowStep == Step.Search"
|
||||
@token-buy="confirmBuyClick"
|
||||
/>
|
||||
<div v-if="flowStep == Step.Buy">
|
||||
<QrCodeComponent
|
||||
:pixTarget="pixTarget"
|
||||
:tokenValue="tokenAmount"
|
||||
@pix-validated="releaseTransaction"
|
||||
v-if="!loadingLock"
|
||||
/>
|
||||
<ValidationComponent
|
||||
v-if="loadingLock"
|
||||
:message="'A transação está sendo enviada para a rede'"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="flowStep == Step.List">
|
||||
<ListComponent
|
||||
v-if="!loadingRelease"
|
||||
:tokenAmount="tokenAmount"
|
||||
:last-wallet-transactions="lastWalletTransactions"
|
||||
/>
|
||||
<ValidationComponent
|
||||
v-if="loadingRelease"
|
||||
:message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -5,38 +5,54 @@ import { ref } from "vue";
|
||||
import { useEtherStore } from "../store/ether";
|
||||
import blockchain from "../utils/blockchain";
|
||||
|
||||
// Blockchain Data
|
||||
const etherStore = useEtherStore();
|
||||
const { depositsAddedList } = storeToRefs(etherStore);
|
||||
const { locksAddedList } = storeToRefs(etherStore);
|
||||
|
||||
const { depositList } = storeToRefs(etherStore);
|
||||
|
||||
// Buyer's flow Data
|
||||
const depositValue = ref<Number>();
|
||||
const depositPixKey = ref<string>("");
|
||||
|
||||
// Split tokens between wallets in wallets.json
|
||||
const splitTokens = () => {
|
||||
blockchain.splitTokens();
|
||||
};
|
||||
|
||||
// Formatting methods
|
||||
// Formats wallet address in 0x000...0000 format
|
||||
const formatWalletAddress = (wallet: string): string => {
|
||||
const walletAddressLength = wallet.length;
|
||||
const initialText = wallet.substring(0, 5);
|
||||
const finalText = wallet.substring(
|
||||
walletAddressLength - 4,
|
||||
walletAddressLength
|
||||
);
|
||||
return `${initialText}...${finalText}`;
|
||||
};
|
||||
|
||||
// Deposit methods
|
||||
// Gets value and pix key from user's form to create a deposit in the blockchain
|
||||
const mockDeposit = () => {
|
||||
if (!depositValue.value || !depositPixKey.value) return;
|
||||
blockchain.mockDeposit(depositValue.value.toString(), depositPixKey.value);
|
||||
};
|
||||
|
||||
const countDeposit = () => {
|
||||
blockchain.countDeposit();
|
||||
blockchain.addDeposit(depositValue.value.toString(), depositPixKey.value);
|
||||
};
|
||||
|
||||
// Get specific deposit data by its ID
|
||||
const mapDeposit = (depositId: BigNumber) => {
|
||||
blockchain.mapDeposits(depositId);
|
||||
};
|
||||
|
||||
// Lock methods
|
||||
// Get specific lock data by its ID
|
||||
const mapLock = (lockId: string) => {
|
||||
blockchain.mapLocks(lockId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="flex flex-col gap-4 justify-start items-start w-2/3">
|
||||
<button type="button" class="default-button" @click="countDeposit()">
|
||||
Contar depósitos
|
||||
</button>
|
||||
|
||||
<div class="flex gap-4 w-full justify-between">
|
||||
<input
|
||||
type="number"
|
||||
@@ -65,12 +81,23 @@ const mapDeposit = (depositId: BigNumber) => {
|
||||
<ul class="flex flex-col justify-center items-center gap-4">
|
||||
<li
|
||||
class="text-gray-900 font-semibold text-lg cursor-pointer border-2 border-amber-400 p-2 rounded-md bg-amber-200"
|
||||
v-for="deposit in depositList"
|
||||
:key="deposit['blockNumber']"
|
||||
@click="mapDeposit(deposit['args']['depositID'])"
|
||||
v-for="deposit in depositsAddedList"
|
||||
:key="deposit.blockNumber"
|
||||
@click="mapDeposit(deposit.args.depositID)"
|
||||
>
|
||||
Address:<br />{{ deposit["args"]["0"] }}<br />
|
||||
MRBZ: {{ blockchain.formatEther(deposit["args"]["amount"]) }}
|
||||
Seller:<br />{{ formatWalletAddress(deposit.args.seller) }}<br />
|
||||
MRBZ: {{ blockchain.formatBigNumber(deposit.args.amount) }}
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex flex-col justify-center items-center gap-4">
|
||||
<li
|
||||
class="text-gray-900 font-semibold text-lg cursor-pointer border-2 border-amber-400 p-2 rounded-md bg-amber-200"
|
||||
v-for="lock in locksAddedList"
|
||||
:key="lock.blockNumber"
|
||||
@click="mapLock(lock.args.lockID)"
|
||||
>
|
||||
Buyer:<br />{{ formatWalletAddress(lock.args.buyer) }}<br />
|
||||
MRBZ: {{ blockchain.formatBigNumber(lock.args.amount) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,214 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { pix } from "../utils/QrCodePix";
|
||||
import { ref } from "vue";
|
||||
|
||||
const pixModel = ref({
|
||||
pixKey: "",
|
||||
name: "",
|
||||
city: "",
|
||||
transactionId: "",
|
||||
value: 0,
|
||||
message: "",
|
||||
qrCodePayload: "",
|
||||
});
|
||||
|
||||
const qrCode = ref<string>("");
|
||||
const qrCodePayload = ref<string>("");
|
||||
const toggleModal = ref<boolean>(false);
|
||||
|
||||
const errors = ref({
|
||||
pixRequiredError: false,
|
||||
nameRequiredError: false,
|
||||
cityRequiredError: false,
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
errors.value["pixRequiredError"] = pixModel.value["pixKey"] == "";
|
||||
|
||||
if (errors.value["pixRequiredError"]) return;
|
||||
|
||||
const pixQrCode = pix({
|
||||
pixKey: pixModel.value.pixKey,
|
||||
merchantName: pixModel.value.name.trim() ? pixModel.value.name : "name",
|
||||
merchantCity: pixModel.value.city.trim() ? pixModel.value.city : "city",
|
||||
transactionId: pixModel.value.transactionId.trim()
|
||||
? pixModel.value.transactionId
|
||||
: "***",
|
||||
message: pixModel.value.message,
|
||||
value: pixModel.value["value"],
|
||||
});
|
||||
|
||||
pixQrCode.base64QrCode().then((code: string) => {
|
||||
qrCode.value = code;
|
||||
});
|
||||
|
||||
qrCodePayload.value = pixQrCode.payload();
|
||||
|
||||
toggleModal.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="form-container">
|
||||
<h2 class="text-center font-bold text-emerald-50 text-2xl">
|
||||
pixModel QR Code
|
||||
</h2>
|
||||
<form>
|
||||
<div class="grid gap-4 grid-cols-1 p-2">
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="pixKey" class="form-label">Chave PIX</label>
|
||||
<span v-if="errors['pixRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="pixKey"
|
||||
id="pixKey"
|
||||
class="form-input"
|
||||
v-model="pixModel.pixKey"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="name" class="form-label">Nome do beneficiário</label>
|
||||
<span v-if="errors['nameRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
class="form-input"
|
||||
v-model="pixModel.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<div class="mb-2">
|
||||
<label for="city" class="form-label"
|
||||
>Cidade do beneficiário</label
|
||||
>
|
||||
<span v-if="errors['cityRequiredError']" class="required-error"
|
||||
>(Esse campo é obrigatório)</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
id="city"
|
||||
class="form-input"
|
||||
v-model="pixModel.city"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="value" class="form-label"
|
||||
>Valor de transferência (Opcional)</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
name="value"
|
||||
id="value"
|
||||
class="form-input"
|
||||
v-model="pixModel.value"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="code" class="form-label"
|
||||
>Código da transferência (Opcional)</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="code"
|
||||
id="code"
|
||||
class="form-input"
|
||||
v-model="pixModel.transactionId"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-div">
|
||||
<label for="message" class="form-label">Mensagem (Opcional)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="message"
|
||||
id="message"
|
||||
class="form-input"
|
||||
v-model="pixModel.message"
|
||||
/>
|
||||
</div>
|
||||
<button type="button" class="button" @click="submit">
|
||||
Gerar QR code
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="toggleModal"
|
||||
class="fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50"
|
||||
>
|
||||
<div class="relative mx-auto w-auto max-w-2xl">
|
||||
<div
|
||||
class="bg-white w-[500px] p-2 rounded shadow-2xl flex flex-col justify-center items-center gap-2"
|
||||
>
|
||||
<img v-if="qrCode != ''" :src="qrCode" alt="QR code image" />
|
||||
<div>
|
||||
<span class="text-black font-semibold mr-1">Chave pix:</span>
|
||||
<span class="text-gray-700">{{ pixModel.pixKey }}</span>
|
||||
</div>
|
||||
<div v-if="pixModel.name.trim() != ''">
|
||||
<span class="text-black font-semibold mr-1"
|
||||
>Nome do Beneficiário:</span
|
||||
>
|
||||
<span class="text-gray-700">{{ pixModel.name }}</span>
|
||||
</div>
|
||||
<div v-if="pixModel.value != 0">
|
||||
<span class="text-black font-semibold mr-1"
|
||||
>Valor da transferência:</span
|
||||
>
|
||||
<span class="text-gray-700">{{ pixModel.value }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col w-auto break-all justify-center items-center">
|
||||
<span class="text-black font-semibold mb-2">Código QR Code:</span>
|
||||
<span class="text-gray-700">{{ qrCodePayload }}</span>
|
||||
</div>
|
||||
<button type="button" class="button" @click="toggleModal = false">
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="toggleModal" class="fixed z-40 inset-0 opacity-25 bg-black"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
@apply mt-8 w-full flex justify-center self-center;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: var(--color-background-indigo);
|
||||
@apply rounded-md w-full p-2 w-1/2;
|
||||
}
|
||||
|
||||
.col-div {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
@apply rounded-lg border border-gray-200 p-2 text-black;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@apply font-semibold tracking-wide text-emerald-50;
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500;
|
||||
}
|
||||
|
||||
.required-error {
|
||||
@apply ml-2 text-red-500;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user