hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into transaction-history

Browse Source
This commit is contained in:
RcleydsonR 2022-12-30 17:07:54 -03:00
commit 43ba937a07
9 changed files with 463 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/SellerSteps/SellerSearchComponent.vue
View File

@ -2,27 +2,16 @@
import { ref } from "vue";
import CustomButton from "../../components/CustomButton.vue";
import { debounce } from "@/utils/debounce";
import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia";
// Store reference
const etherStore = useEtherStore();
const { walletAddress, depositsAddedList } = storeToRefs(etherStore);
// Reactive state
const tokenValue = ref(0);
const enableSelectButton = ref(false);
const hasLiquidity = ref(true);
const validDecimals = ref(true);
const selectedDeposit = ref();
// Emits
const emit = defineEmits(["tokenBuy"]);
// Blockchain methods
const connectAccount = async () => {};
// Debounce methods
const handleInputEvent = (event: any) => {
const { value } = event.target;
@ -35,8 +24,6 @@ const handleInputEvent = (event: any) => {
return;
}
validDecimals.value = true;
// verifyLiquidity();
};
// Enable button methods
@ -49,31 +36,6 @@ const decimalCount = (num: Number) => {
return 0;
};
// Verify if there is a valid deposit to buy
// const verifyLiquidity = () => {
// enableSelectButton.value = false;
// selectedDeposit.value = null;
// if (!walletAddress.value || tokenValue.value <= 0) return;
// depositsAddedList.value.find((element) => {
// const p2pixTokenValue = blockchain.formatBigNumber(element.args.amount);
// if (
// tokenValue.value!! <= Number(p2pixTokenValue) &&
// tokenValue.value!! != 0 &&
// element.args.seller !== walletAddress.value
// ) {
// enableSelectButton.value = true;
// hasLiquidity.value = true;
// selectedDeposit.value = element;
// return true;
// }
// return false;
// });
// if (!enableSelectButton.value) {
// hasLiquidity.value = false;
// }
// };
</script>
<template>

14
src/components/SellerSteps/SendNetwork.vue
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>

8
src/components/SellerSteps/WantSellComponent.vue
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>

74
src/utils/blockchain.ts
View File

@ -221,7 +221,9 @@ const updateDepositAddedEvents = async () => {
const filterDeposits = p2pContract.filters.DepositAdded(null);
const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
etherStore.setDepositsAddedList(eventsDeposits);
console.log("DEPOSITS", eventsDeposits);
};
const updateLockAddedEvents = async () => {
@ -239,6 +241,7 @@ const updateLockAddedEvents = async () => {
const filterLocks = p2pContract.filters.LockAdded(null);
const eventsLocks = await p2pContract.queryFilter(filterLocks);
etherStore.setLocksAddedList(eventsLocks);
console.log("LOCKS", eventsLocks);
};
const updateLockReleasedEvents = async () => {
@ -253,9 +256,10 @@ const updateLockReleasedEvents = async () => {
const signer = provider.getSigner();
const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
const filterLocks = p2pContract.filters.LockReleased(null);
const eventsLocks = await p2pContract.queryFilter(filterLocks);
etherStore.setLocksReleasedList(eventsLocks);
const filterReleases = p2pContract.filters.LockReleased(null);
const eventsReleases = await p2pContract.queryFilter(filterReleases);
etherStore.setLocksReleasedList(eventsReleases);
console.log("RELEASES", eventsReleases);
};
// Provider methods
@ -284,8 +288,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;
@ -296,20 +299,61 @@ const addDeposit = async (tokenQty: Number, pixKey: string) => {
mockToken.abi,
signer
);
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);
// First get the approval
const deposit = await p2pContract.deposit(
addresses.token,
formatEther(String(tokenQty)),
pixKey,
ethers.utils.formatBytes32String("")
);
await deposit.wait();
await updateWalletStatus();
await updateDepositAddedEvents();
await updateValidDeposits();
};
const mockDeposit = async (tokenQty: Number, pixKey: String) => {
const provider = getProvider();
if (!provider) return;
const signer = provider.getSigner();
const tokenContract = new ethers.Contract(
addresses.token,
mockToken.abi,
signer
);
const apprv = await tokenContract.approve(
addresses.p2pix,
formatEther(String(tokenQty))
);
await apprv.wait();
// Now we make the deposit
const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
const deposit = await p2pContract.deposit(
addresses.token,
formatEther(String(tokenQty)),
pixKey
pixKey,
ethers.utils.formatBytes32String("")
);
await deposit.wait();
@ -379,6 +423,7 @@ const addLock = async (depositId: BigNumber, amount: Number) => {
ethers.constants.AddressZero, // String "0x0000000000000000000000000000000000000000"
0,
formatEther(String(amount)), // BigNumber
[],
[]
);
lock.wait();
@ -419,8 +464,12 @@ const releaseLock = async (
);
const messageToSign = ethers.utils.solidityKeccak256(
["string", "uint256", "uint256"],
[pixKey, formatEther(String(amount)), formatEther(e2eId)]
["string", "uint256", "bytes32"],
[
pixKey,
formatEther(String(amount)),
ethers.utils.formatBytes32String(e2eId),
]
);
const messageHashBytes = ethers.utils.arrayify(messageToSign);
@ -432,7 +481,8 @@ const releaseLock = async (
const release = await p2pContract.release(
lockId,
formatEther(e2eId),
ethers.constants.AddressZero,
ethers.utils.formatBytes32String(e2eId),
sig.r,
sig.s,
sig.v
@ -465,9 +515,11 @@ export default {
listReleaseTransactionByWalletAddress,
listDepositTransactionByWalletAddress,
listLockTransactionByWalletAddress,
approveTokens,
addDeposit,
cancelDeposit,
withdrawDeposit,
mockDeposit,
mapDeposits,
formatBigNumber,
addLock,

22
src/utils/smart_contract_files/MockToken.json
View File

File diff suppressed because one or more lines are too long

344
src/utils/smart_contract_files/P2PIX.json
View File

File diff suppressed because one or more lines are too long

4
src/utils/smart_contract_files/localhost.json
View File

@ -3,6 +3,6 @@
"0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
"0x70997970C51812dc3A010C7d01b50e0d17dc79C8"
],
"p2pix": "0x5FbDB2315678afecb367f032d93F642f64180aa3",
"token": "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512"
"p2pix": "0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0",
"token": "0x5FbDB2315678afecb367f032d93F642f64180aa3"
}

2
src/views/MockView.vue
View File

@ -36,7 +36,7 @@ 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, depositPixKey.value);
blockchain.mockDeposit(depositValue.value, depositPixKey.value);
};
// Get specific deposit data by its ID

48
src/views/SellerView.vue
View File

@ -2,9 +2,9 @@
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";
enum Step {
Search,
@ -15,41 +15,55 @@ enum Step {
const flowStep = ref<Step>(Step.Sell);
const loading = ref<boolean>(false);
const walletConnect = async () => {
flowStep.value = Step.Sell;
};
const offerValue = ref<number>();
const pixKeyBuyer = ref<string>("");
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(Number(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 (err) {
console.log(err);
flowStep.value = Step.Network;
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" />
<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.'"