Merge branch 'develop' into create_menu
This commit is contained in:
Enzo Gabriel
@@ -1,65 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import SearchComponent from "../components/SearchComponent.vue";
|
||||
import ValidationComponent from "../components/ValidationComponent.vue";
|
||||
import ValidationComponent from "../components/LoadingComponent.vue";
|
||||
import ListComponent from "@/components/ListComponent.vue";
|
||||
import blockchain from "../utils/blockchain";
|
||||
import { ref } from "vue";
|
||||
|
||||
// (TO DO) Tirar isso tudo daqui
|
||||
import p2pix from "../utils/smart_contract_files/P2PIX.json";
|
||||
import addresses from "../utils/smart_contract_files/localhost.json";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { ethers } from "ethers";
|
||||
import QrCodeComponent from "../components/QrCodeComponent.vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
enum Step {
|
||||
Search,
|
||||
Buy,
|
||||
List,
|
||||
}
|
||||
|
||||
// States
|
||||
const etherStore = useEtherStore();
|
||||
const { loadingLock } = storeToRefs(etherStore);
|
||||
const { loadingLock, walletAddress, locksAddedList } = storeToRefs(etherStore);
|
||||
const flowStep = ref<Step>(Step.Search);
|
||||
const pixTarget = ref<string>("");
|
||||
const tokens = ref<number>();
|
||||
const tokenAmount = ref<number>();
|
||||
const lockTransactionHash = ref<string>("");
|
||||
const lockId = ref<string>("");
|
||||
const loadingRelease = ref<Boolean>(false);
|
||||
const lastWalletReleaseTransactions = 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(depositId)
|
||||
.then((deposit) => (depositDetail = deposit));
|
||||
tokens.value = tokenValue;
|
||||
pixTarget.value = depositDetail?.pixTarget;
|
||||
const depositDetail = selectedDeposit;
|
||||
const depositId = selectedDeposit.depositID;
|
||||
pixTarget.value = selectedDeposit.pixKey;
|
||||
tokenAmount.value = tokenValue;
|
||||
// depositId is BigNumber type object
|
||||
tokenAmount.value = tokenValue;
|
||||
|
||||
pixTarget.value = String(depositDetail?.pixTarget);
|
||||
|
||||
// Makes lock with deposit ID and the Amount
|
||||
if (depositDetail) {
|
||||
flowStep.value = Step.Buy;
|
||||
etherStore.setLoadingLock(true);
|
||||
|
||||
await blockchain.addLock(depositId, tokenValue).catch(() => {
|
||||
flowStep.value = Step.Search;
|
||||
});
|
||||
await blockchain
|
||||
.addLock(depositId, tokenValue)
|
||||
.then((lock) => {
|
||||
lockTransactionHash.value = lock.hash;
|
||||
})
|
||||
.catch(() => {
|
||||
flowStep.value = Step.Search;
|
||||
});
|
||||
|
||||
// (TO DO) Tirar isso daqui
|
||||
const window_ = window as any;
|
||||
const connection = window_.ethereum;
|
||||
let provider: ethers.providers.Web3Provider | null = null;
|
||||
if (!connection) return;
|
||||
provider = new ethers.providers.Web3Provider(connection);
|
||||
const signer = provider.getSigner();
|
||||
const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
const filterLocks = p2pContract.filters.LockAdded(null);
|
||||
const eventsLocks = await p2pContract.queryFilter(filterLocks);
|
||||
etherStore.setLocksAddedList(eventsLocks);
|
||||
etherStore.setLoadingLock(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Data to QRCode
|
||||
// Chave Pix = depositDetail.pixTarget
|
||||
// Valor = tokenValue
|
||||
const releaseTransaction = async ({ e2eId }: any) => {
|
||||
flowStep.value = Step.List;
|
||||
loadingRelease.value = true;
|
||||
|
||||
const findLock = locksAddedList.value.find((element) => {
|
||||
if (element.transactionHash === lockTransactionHash.value) {
|
||||
lockId.value = element.args.lockID;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
if (findLock && tokenAmount.value) {
|
||||
const release = await blockchain.releaseLock(
|
||||
pixTarget.value,
|
||||
tokenAmount.value,
|
||||
e2eId,
|
||||
lockId.value
|
||||
);
|
||||
release.wait();
|
||||
|
||||
lastWalletReleaseTransactions.value =
|
||||
await blockchain.listReleaseTransactionByWalletAddress(
|
||||
walletAddress.value.toLowerCase()
|
||||
);
|
||||
|
||||
await blockchain.updateWalletStatus();
|
||||
loadingRelease.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -72,10 +95,26 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
|
||||
<div v-if="flowStep == Step.Buy">
|
||||
<QrCodeComponent
|
||||
:pixTarget="pixTarget"
|
||||
:tokenValue="tokens"
|
||||
:tokenValue="tokenAmount"
|
||||
@pix-validated="releaseTransaction"
|
||||
v-if="!loadingLock"
|
||||
/>
|
||||
<ValidationComponent 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"
|
||||
:last-wallet-release-transactions="lastWalletReleaseTransactions"
|
||||
:tokenAmount="tokenAmount"
|
||||
@make-another-transaction="flowStep = Step.Search"
|
||||
/>
|
||||
<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>
|
||||
|
||||
|
||||
98
src/views/ListView.vue
Normal file
98
src/views/ListView.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import CustomButton from "@/components/CustomButton.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="text-container">
|
||||
<span class="text font-extrabold text-5xl max-w-[50rem]"
|
||||
>Os tokens já foram transferidos <br />
|
||||
para a sua carteira!
|
||||
</span>
|
||||
</div>
|
||||
<div class="blur-container">
|
||||
<div
|
||||
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
||||
>
|
||||
<div>
|
||||
<p>Tokens recebidos</p>
|
||||
<p class="text-2xl text-gray-900">100 BRZ</p>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<p>
|
||||
<b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
|
||||
cadastrar o BRZ em sua carteira.
|
||||
</p>
|
||||
</div>
|
||||
<CustomButton
|
||||
:text="'Cadastrar token na carteira'"
|
||||
@buttonClicked="() => {}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blur-container-row">
|
||||
<button
|
||||
type="button"
|
||||
class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 w-full"
|
||||
@click="() => {}"
|
||||
>
|
||||
Fazer nova transação
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="border-amber-500 border-2 rounded default-button text-white p-2"
|
||||
@click="() => {}"
|
||||
>
|
||||
Desconectar
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-container mt-10">
|
||||
<span class="text font-extrabold text-3xl max-w-[50rem]"
|
||||
>Últimas transações
|
||||
</span>
|
||||
</div>
|
||||
<div class="blur-container">
|
||||
<div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
|
||||
<p>100 BRZ</p>
|
||||
<p>20 out 2022</p>
|
||||
<p>Etherscan</p>
|
||||
</div>
|
||||
<div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
|
||||
<p>100 BRZ</p>
|
||||
<p>20 out 2022</p>
|
||||
<p>Etherscan</p>
|
||||
</div>
|
||||
<p class="text-white mt-2 cursor-pointer">Carregar mais</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
@apply flex flex-col items-center justify-center w-full mt-16;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
@apply flex flex-col items-center justify-center gap-4;
|
||||
}
|
||||
|
||||
.text {
|
||||
@apply text-gray-800 text-center;
|
||||
}
|
||||
.blur-container-row {
|
||||
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
|
||||
}
|
||||
|
||||
.blur-container {
|
||||
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
</style>
|
||||
@@ -7,6 +7,7 @@ import blockchain from "../utils/blockchain";
|
||||
|
||||
// Blockchain Data
|
||||
const etherStore = useEtherStore();
|
||||
const { depositsValidList } = storeToRefs(etherStore);
|
||||
const { depositsAddedList } = storeToRefs(etherStore);
|
||||
const { locksAddedList } = storeToRefs(etherStore);
|
||||
|
||||
@@ -15,7 +16,7 @@ const depositValue = ref<Number>();
|
||||
const depositPixKey = ref<string>("");
|
||||
|
||||
// Split tokens between wallets in wallets.json
|
||||
const splitTokens = () => {
|
||||
const splitTokens = async () => {
|
||||
blockchain.splitTokens();
|
||||
};
|
||||
|
||||
@@ -35,23 +36,20 @@ const formatWalletAddress = (wallet: string): string => {
|
||||
// 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.addDeposit(depositValue.value.toString(), depositPixKey.value);
|
||||
blockchain.addDeposit(depositValue.value, depositPixKey.value);
|
||||
};
|
||||
|
||||
// Get specific deposit data by its ID
|
||||
const mapDeposit = (depositId: BigNumber) => {
|
||||
blockchain.mapDeposits(depositId);
|
||||
const deposit = blockchain.mapDeposits(depositId);
|
||||
return deposit;
|
||||
};
|
||||
|
||||
// Lock methods
|
||||
// (TO DO) Releases lock by specific ID and other additional data
|
||||
const releaseLock = () => {
|
||||
blockchain.releaseLock();
|
||||
};
|
||||
|
||||
// Get specific lock data by its ID
|
||||
const mapLock = (lockId: string) => {
|
||||
blockchain.mapLocks(lockId);
|
||||
const lock = blockchain.mapLocks(lockId);
|
||||
return lock;
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -81,10 +79,6 @@ const mapLock = (lockId: string) => {
|
||||
<button type="button" class="default-button" @click="splitTokens()">
|
||||
Dividir tokens
|
||||
</button>
|
||||
|
||||
<button type="button" class="default-button" @click="releaseLock()">
|
||||
Release Lock
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul class="flex flex-col justify-center items-center gap-4">
|
||||
@@ -95,7 +89,7 @@ const mapLock = (lockId: string) => {
|
||||
@click="mapDeposit(deposit.args.depositID)"
|
||||
>
|
||||
Seller:<br />{{ formatWalletAddress(deposit.args.seller) }}<br />
|
||||
MRBZ: {{ blockchain.formatEther(deposit.args.amount) }}
|
||||
MRBZ: {{ blockchain.formatBigNumber(deposit.args.amount) }}
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex flex-col justify-center items-center gap-4">
|
||||
@@ -106,7 +100,18 @@ const mapLock = (lockId: string) => {
|
||||
@click="mapLock(lock.args.lockID)"
|
||||
>
|
||||
Buyer:<br />{{ formatWalletAddress(lock.args.buyer) }}<br />
|
||||
MRBZ: {{ blockchain.formatEther(lock.args.amount) }}
|
||||
MRBZ: {{ blockchain.formatBigNumber(lock.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="valid in depositsValidList"
|
||||
:key="valid.depositID"
|
||||
@click="mapDeposit(valid.depositID)"
|
||||
>
|
||||
Buyer:<br />{{ formatWalletAddress(valid.seller) }}<br />
|
||||
MRBZ: {{ valid.remaining }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
60
src/views/SellerView.vue
Normal file
60
src/views/SellerView.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import WantSellComponent from "../components/SellerSteps/WantSellComponent.vue";
|
||||
import SendNetwork from "../components/SellerSteps/SendNetwork.vue";
|
||||
import ValidationComponent from "../components/LoadingComponent.vue";
|
||||
|
||||
import { ref } from "vue";
|
||||
import router from "@/router";
|
||||
|
||||
enum Step {
|
||||
Search,
|
||||
Sell,
|
||||
Network,
|
||||
}
|
||||
|
||||
const flowStep = ref<Step>(Step.Sell);
|
||||
const loading = ref<boolean>(false);
|
||||
|
||||
const walletConnect = async () => {
|
||||
flowStep.value = Step.Sell;
|
||||
};
|
||||
|
||||
const approveTokens = async () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
flowStep.value = Step.Network;
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const sendNetwork = async () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
router.push("/");
|
||||
}, 2000);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <SellerSearchComponent
|
||||
v-if="flowStep == Step.Search"
|
||||
@token-buy="walletConnect"
|
||||
/> -->
|
||||
<div v-if="flowStep == Step.Sell">
|
||||
<WantSellComponent v-if="!loading" @approve-tokens="approveTokens" />
|
||||
<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" />
|
||||
<ValidationComponent
|
||||
v-if="loading"
|
||||
:message="'A transação está sendo enviada para a rede.'"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user