Merge branch 'search-tokens' into list-tokens
This commit is contained in:
RcleydsonR
commit
e7ca40c30f
@ -6,21 +6,28 @@ import { useEtherStore } from "@/store/ether";
|
||||
import { storeToRefs } from "pinia";
|
||||
import blockchain from "../utils/blockchain";
|
||||
|
||||
// Store reference
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const { walletAddress, depositList } = storeToRefs(etherStore);
|
||||
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 () => {
|
||||
await blockchain.connectProvider();
|
||||
verifyLiquidity();
|
||||
};
|
||||
|
||||
// Debounce methods
|
||||
const handleInputEvent = (event: any) => {
|
||||
const { value } = event.target;
|
||||
|
||||
@ -36,6 +43,8 @@ const handleInputEvent = (event: any) => {
|
||||
verifyLiquidity();
|
||||
};
|
||||
|
||||
// Enable button methods
|
||||
// Check if has more than 2 decimal places
|
||||
const decimalCount = (num: Number) => {
|
||||
const numStr = String(num);
|
||||
if (numStr.includes(".")) {
|
||||
@ -43,35 +52,36 @@ 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;
|
||||
|
||||
depositList.value.forEach((deposit) => {
|
||||
const p2pixTokenValue = blockchain.verifyDepositAmmount(
|
||||
deposit.args.amount
|
||||
);
|
||||
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
|
||||
tokenValue.value!! != 0 &&
|
||||
element.args.seller !== walletAddress.value
|
||||
) {
|
||||
enableSelectButton.value = true;
|
||||
hasLiquidity.value = true;
|
||||
selectedDeposit.value = deposit;
|
||||
return;
|
||||
selectedDeposit.value = element;
|
||||
console.log(
|
||||
"Selected is :",
|
||||
blockchain.formatBigNumber(element.args.amount)
|
||||
);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
if (!enableSelectButton.value) {
|
||||
hasLiquidity.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const emit = defineEmits(["tokenBuy"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -3,10 +3,12 @@ import { storeToRefs } from "pinia";
|
||||
import { useEtherStore } from "../store/ether";
|
||||
import blockchain from "../utils/blockchain";
|
||||
|
||||
// Store reference
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const { walletAddress, balance } = storeToRefs(etherStore);
|
||||
|
||||
//Methods
|
||||
const connectMetaMask = () => {
|
||||
blockchain.connectProvider();
|
||||
};
|
||||
@ -15,8 +17,8 @@ const formatWalletAddress = (): string => {
|
||||
const walletAddressLength = walletAddress.value.length;
|
||||
const initialText = walletAddress.value.substring(0, 5);
|
||||
const finalText = walletAddress.value.substring(
|
||||
walletAddressLength - 5,
|
||||
walletAddressLength - 1
|
||||
walletAddressLength - 4,
|
||||
walletAddressLength
|
||||
);
|
||||
return `${initialText}...${finalText}`;
|
||||
};
|
||||
|
||||
@ -4,7 +4,14 @@ export const useEtherStore = defineStore("ether", {
|
||||
state: () => ({
|
||||
walletAddress: "",
|
||||
balance: "",
|
||||
depositList: [{}],
|
||||
// Depósitos válidos para compra
|
||||
depositsValidList: [{}],
|
||||
// Depósitos adicionados na blockchain
|
||||
depositsAddedList: [{}],
|
||||
// Depósitos expirados na blockchain
|
||||
depositsExpiredList: [{}],
|
||||
// Locks adicionados na blockchain
|
||||
locksAddedList: [{}],
|
||||
}),
|
||||
actions: {
|
||||
setWalletAddress(walletAddress: string) {
|
||||
@ -13,8 +20,17 @@ export const useEtherStore = defineStore("ether", {
|
||||
setBalance(balance: string) {
|
||||
this.balance = balance;
|
||||
},
|
||||
setDepositList(depositList: any[]) {
|
||||
this.depositList = depositList;
|
||||
setDepositsValidList(depositsValidList: any[]) {
|
||||
this.depositsValidList = depositsValidList;
|
||||
},
|
||||
setDepositsAddedList(depositsAddedList: any[]) {
|
||||
this.depositsAddedList = depositsAddedList;
|
||||
},
|
||||
setDepositsExpiredList(depositsExpiredList: any[]) {
|
||||
this.depositsExpiredList = depositsExpiredList;
|
||||
},
|
||||
setLocksAddedList(locksAddedList: any[]) {
|
||||
this.locksAddedList = locksAddedList;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,13 +1,70 @@
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { BigNumber, ethers } from "ethers";
|
||||
|
||||
// smart contract imports
|
||||
// Smart contract imports
|
||||
import mockToken from "./smart_contract_files/MockToken.json";
|
||||
import p2pix from "./smart_contract_files/P2PIX.json";
|
||||
import addresses from "./smart_contract_files/localhost.json";
|
||||
|
||||
// Mock wallets import
|
||||
import { wallets } from "./smart_contract_files/wallets.json";
|
||||
|
||||
// Provider methods
|
||||
const connectProvider = async () => {
|
||||
const etherStore = useEtherStore();
|
||||
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 tokenContract = new ethers.Contract(
|
||||
addresses.token,
|
||||
mockToken.abi,
|
||||
signer
|
||||
);
|
||||
|
||||
const walletAddress = await provider.send("eth_requestAccounts", []);
|
||||
const balance = await tokenContract.balanceOf(walletAddress[0]);
|
||||
|
||||
etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress[0]));
|
||||
etherStore.setBalance(String(balance));
|
||||
|
||||
const p2pEvents = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
|
||||
const filterDeposits = p2pEvents.filters.DepositAdded(null);
|
||||
const eventsDeposits = await p2pEvents.queryFilter(filterDeposits);
|
||||
console.log("Deposits Added: ", eventsDeposits);
|
||||
etherStore.setDepositsAddedList(eventsDeposits);
|
||||
|
||||
const filterLocks = p2pEvents.filters.LockAdded(null);
|
||||
const eventsLocks = await p2pEvents.queryFilter(filterLocks);
|
||||
console.log("Locks Added: ", eventsLocks);
|
||||
etherStore.setLocksAddedList(eventsLocks);
|
||||
|
||||
const filterExpiredLocks = p2pEvents.filters.LockReturned(null);
|
||||
const eventsExpiredLocks = await p2pEvents.queryFilter(filterExpiredLocks);
|
||||
console.log("Expired Locks: ", eventsExpiredLocks);
|
||||
etherStore.setDepositsExpiredList(eventsExpiredLocks);
|
||||
|
||||
// (TO DO) Filter valid deposits
|
||||
|
||||
connection.on("accountsChanged", (accounts: string[]) => {
|
||||
updateWalletStatus(accounts[0]);
|
||||
});
|
||||
};
|
||||
|
||||
const getProvider = (): ethers.providers.Web3Provider | null => {
|
||||
const window_ = window as any;
|
||||
const connection = window_.ethereum;
|
||||
|
||||
if (!connection) return null;
|
||||
|
||||
return new ethers.providers.Web3Provider(connection);
|
||||
};
|
||||
|
||||
// Wallet methods
|
||||
// Update wallet state (balance and address)
|
||||
const updateWalletStatus = async (walletAddress: string) => {
|
||||
const etherStore = useEtherStore();
|
||||
const provider = getProvider();
|
||||
@ -19,39 +76,10 @@ const updateWalletStatus = async (walletAddress: string) => {
|
||||
const balance = await contract.balanceOf(walletAddress);
|
||||
|
||||
etherStore.setBalance(String(balance));
|
||||
etherStore.setWalletAddress(walletAddress);
|
||||
};
|
||||
|
||||
const connectProvider = async () => {
|
||||
const etherStore = useEtherStore();
|
||||
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 contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
|
||||
|
||||
const walletAddress = await provider.send("eth_requestAccounts", []);
|
||||
const balance = await contract.balanceOf(walletAddress[0]);
|
||||
|
||||
etherStore.setWalletAddress(walletAddress[0]);
|
||||
etherStore.setBalance(String(balance));
|
||||
|
||||
const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
|
||||
const filter = p2pContract.filters.DepositAdded(null);
|
||||
const events = await p2pContract.queryFilter(filter);
|
||||
|
||||
console.log(events);
|
||||
etherStore.setDepositList(events);
|
||||
|
||||
connection.on("accountsChanged", (accounts: string[]) => {
|
||||
updateWalletStatus(accounts[0]);
|
||||
});
|
||||
etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress));
|
||||
};
|
||||
|
||||
// Split tokens between wallets in wallets.json
|
||||
const splitTokens = async () => {
|
||||
const etherStore = useEtherStore();
|
||||
const provider = getProvider();
|
||||
@ -70,13 +98,14 @@ const splitTokens = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
|
||||
// Deposit methods
|
||||
// Gets value and pix key from user's form to create a deposit in the blockchain
|
||||
const addDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
|
||||
const etherStore = useEtherStore();
|
||||
const provider = getProvider();
|
||||
|
||||
if (!provider) return;
|
||||
|
||||
const signer = provider.getSigner();
|
||||
|
||||
const tokenContract = new ethers.Contract(
|
||||
addresses.token,
|
||||
mockToken.abi,
|
||||
@ -84,14 +113,14 @@ const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
|
||||
);
|
||||
const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
|
||||
// first get the approval
|
||||
// First get the approval
|
||||
const apprv = await tokenContract.approve(
|
||||
addresses.p2pix,
|
||||
ethers.utils.parseEther(tokenQty)
|
||||
);
|
||||
await apprv.wait();
|
||||
|
||||
// deposit
|
||||
// Now we make the deposit
|
||||
const deposit = await p2pContract.deposit(
|
||||
addresses.token,
|
||||
ethers.utils.parseEther(tokenQty),
|
||||
@ -101,63 +130,91 @@ const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
|
||||
|
||||
updateWalletStatus(etherStore.walletAddress);
|
||||
|
||||
const filter = p2pContract.filters.DepositAdded(null);
|
||||
const events = await p2pContract.queryFilter(filter);
|
||||
const p2pEvents = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
const filter = p2pEvents.filters.DepositAdded(null);
|
||||
const events = await p2pEvents.queryFilter(filter);
|
||||
|
||||
console.log(events);
|
||||
|
||||
etherStore.setDepositList(events);
|
||||
};
|
||||
|
||||
const countDeposit = async () => {
|
||||
const provider = getProvider();
|
||||
if (!provider) return;
|
||||
|
||||
const signer = provider.getSigner();
|
||||
const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
|
||||
const count = await contract.depositCount();
|
||||
|
||||
console.log(Number(count));
|
||||
etherStore.setDepositsAddedList(events);
|
||||
};
|
||||
|
||||
// Get specific deposit data by its ID
|
||||
const mapDeposits = async (depositId: BigNumber) => {
|
||||
const provider = getProvider();
|
||||
|
||||
if (!provider) return;
|
||||
|
||||
const signer = provider.getSigner();
|
||||
const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
|
||||
const deposit = await contract.mapDeposits(depositId);
|
||||
const deposit = await contract.mapDeposits(depositId.toNumber());
|
||||
|
||||
console.log(deposit);
|
||||
return deposit;
|
||||
};
|
||||
|
||||
// Lock methods
|
||||
// Gets value from user's form to create a lock in the blockchain
|
||||
const addLock = async (depositId: Number, amount: Number) => {
|
||||
const etherStore = useEtherStore();
|
||||
const provider = getProvider();
|
||||
|
||||
if (!provider) return;
|
||||
const signer = provider.getSigner();
|
||||
const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
|
||||
// Make lock
|
||||
await p2pContract.lock(
|
||||
depositId,
|
||||
etherStore.walletAddress,
|
||||
ethers.constants.AddressZero,
|
||||
0,
|
||||
ethers.utils.parseEther(amount.toString()),
|
||||
[]
|
||||
);
|
||||
|
||||
const filterLocks = p2pContract.filters.LockAdded(null);
|
||||
const eventsLocks = await p2pContract.queryFilter(filterLocks);
|
||||
etherStore.setLocksAddedList(eventsLocks);
|
||||
};
|
||||
|
||||
// Get specific lock data by its ID
|
||||
const mapLocks = async (lockId: string) => {
|
||||
const provider = getProvider();
|
||||
|
||||
if (!provider) return;
|
||||
|
||||
const signer = provider.getSigner();
|
||||
const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
const lock = await contract.mapLocks(lockId);
|
||||
|
||||
console.log(lock);
|
||||
return lock;
|
||||
};
|
||||
|
||||
// Releases lock by specific ID and other additional data
|
||||
// (TO DO)
|
||||
const releaseLock = async () => {
|
||||
return;
|
||||
};
|
||||
|
||||
// Formatting methods
|
||||
const formatEther = (balance: string) => {
|
||||
const formatted = ethers.utils.formatEther(balance);
|
||||
return formatted;
|
||||
};
|
||||
|
||||
const verifyDepositAmmount = (ammountBigNumber: BigNumber): string => {
|
||||
return ethers.utils.formatEther(ammountBigNumber);
|
||||
};
|
||||
|
||||
const getProvider = (): ethers.providers.Web3Provider | null => {
|
||||
const window_ = window as any;
|
||||
const connection = window_.ethereum;
|
||||
|
||||
if (!connection) return null;
|
||||
|
||||
return new ethers.providers.Web3Provider(connection);
|
||||
const formatBigNumber = (num: BigNumber) => {
|
||||
const formattedNum = ethers.utils.formatEther(num);
|
||||
return formattedNum;
|
||||
};
|
||||
|
||||
export default {
|
||||
connectProvider,
|
||||
formatEther,
|
||||
splitTokens,
|
||||
mockDeposit,
|
||||
countDeposit,
|
||||
addDeposit,
|
||||
mapDeposits,
|
||||
verifyDepositAmmount,
|
||||
formatBigNumber,
|
||||
addLock,
|
||||
mapLocks,
|
||||
releaseLock,
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -13,6 +13,12 @@ enum Step {
|
||||
const flowStep = ref<Step>(Step.Search)
|
||||
const tokenAmmount = ref()
|
||||
|
||||
// (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";
|
||||
|
||||
const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
|
||||
// finish buy screen
|
||||
console.log(selectedDeposit);
|
||||
@ -20,10 +26,38 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
|
||||
await blockchain
|
||||
.mapDeposits(selectedDeposit["args"]["depositID"])
|
||||
.then((deposit) => (depositDetail = deposit));
|
||||
|
||||
console.log(tokenValue);
|
||||
tokenAmmount.value = tokenValue
|
||||
flowStep.value = Step.List
|
||||
console.log(depositDetail);
|
||||
console.log(depositDetail);
|
||||
|
||||
// Makes lock with deposit ID and the Amount
|
||||
// if (depositDetail) {
|
||||
// const lock = await blockchain.addLock(
|
||||
// depositDetail.args.depositID,
|
||||
// tokenValue
|
||||
// );
|
||||
// console.log(lock);
|
||||
|
||||
// // (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 etherStore = useEtherStore();
|
||||
// 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);
|
||||
|
||||
// Data to QRCode
|
||||
// Chave Pix = depositDetail.pixTarget
|
||||
// Valor = tokenValue
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -5,38 +5,59 @@ 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
|
||||
// (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);
|
||||
};
|
||||
</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"
|
||||
@ -60,17 +81,32 @@ const mapDeposit = (depositId: BigNumber) => {
|
||||
<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">
|
||||
<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.formatEther(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.formatEther(lock.args.amount) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user