Compare commits
No commits in common. "buy-refactor" and "develop" have entirely different histories.
buy-refact
...
develop
14
README.md
14
README.md
@ -102,17 +102,3 @@ cd P2Pix-Front-End
|
||||
# Run docker-compose up command
|
||||
docker-compose up
|
||||
```
|
||||
|
||||
### Backend Communication
|
||||
|
||||
Backend Repo: `https://gitea.kosmos.org/hueso/helpix`
|
||||
|
||||
Backend Endpoint: `https://api.p2pix.co/release/1279331`
|
||||
|
||||
curl -X POST \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer {api-key}" \
|
||||
-d '{"query": "{ depositAddeds { id seller token amount } }"}' \
|
||||
https://api.studio.thegraph.com/query/113713/p-2-pix/sepolia
|
||||
|
||||
https://api.studio.thegraph.com/query/113713/p-2-pix/1
|
||||
10
package.json
10
package.json
@ -10,7 +10,7 @@
|
||||
"coverage": "vitest run --coverage",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --skipLibCheck --noEmit",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --fix",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
|
||||
"lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -25,8 +25,9 @@
|
||||
"crc": "^3.8.0",
|
||||
"ethers": "^6.13.4",
|
||||
"marked": "^4.2.12",
|
||||
"pinia": "^2.0.23",
|
||||
"qrcode": "^1.5.1",
|
||||
"viem": "^2.31.3",
|
||||
"viem": "2.x",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
"vue": "^3.2.41",
|
||||
"vue-markdown": "^2.2.4",
|
||||
@ -35,6 +36,7 @@
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@pinia/testing": "^0.0.14",
|
||||
"@rushstack/eslint-patch": "^1.1.4",
|
||||
"@types/crc": "^3.8.0",
|
||||
"@types/jest": "^27.0.0",
|
||||
@ -57,9 +59,9 @@
|
||||
"postcss": "^8.4.18",
|
||||
"prettier": "^2.7.1",
|
||||
"tailwindcss": "^3.2.1",
|
||||
"typescript": "~5.8.2",
|
||||
"typescript": "~4.7.4",
|
||||
"vite": "^3.1.8",
|
||||
"vitest": "^0.28.1",
|
||||
"vue-tsc": "^2.2.8"
|
||||
"vue-tsc": "^1.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,16 +2,13 @@
|
||||
import { useRoute } from "vue-router";
|
||||
import TopBar from "@/components/TopBar/TopBar.vue";
|
||||
import SpinnerComponent from "@/components/SpinnerComponent.vue";
|
||||
import ToasterComponent from "@/components/ToasterComponent.vue";
|
||||
import { init, useOnboard } from "@web3-onboard/vue";
|
||||
import injectedModule from "@web3-onboard/injected-wallets";
|
||||
import { Networks } from "./model/Networks";
|
||||
import { NetworkEnum } from "./model/NetworkEnum";
|
||||
import { ref } from "vue";
|
||||
|
||||
const route = useRoute();
|
||||
const injected = injectedModule();
|
||||
const targetNetwork = ref(NetworkEnum.sepolia);
|
||||
|
||||
const web3Onboard = init({
|
||||
wallets: [injected],
|
||||
@ -61,6 +58,5 @@ if (!connectedWallet) {
|
||||
</Transition>
|
||||
</template>
|
||||
</RouterView>
|
||||
<ToasterComponent :targetNetwork="targetNetwork" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -28,9 +28,3 @@ a,
|
||||
.main-container {
|
||||
@apply flex w-full md:max-w-lg flex-col justify-center items-center px-4 sm:px-8 py-4 sm:py-6 gap-4 rounded-lg border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
appearance: textfield;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
@ -19,14 +19,3 @@
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
.resize-enter-active,
|
||||
.resize-leave-active {
|
||||
max-height: 100px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.resize-enter-from,
|
||||
.resize-leave-to {
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
|
||||
import { setActivePinia, createPinia } from "pinia";
|
||||
import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
|
||||
describe("addresses.ts types", () => {
|
||||
it("My addresses.ts types work properly", () => {
|
||||
@ -25,21 +25,30 @@ describe("addresses.ts functions", () => {
|
||||
});
|
||||
|
||||
it("getTokenAddress Ethereum", () => {
|
||||
const user = useUser();
|
||||
user.setNetworkId(11155111);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.sepolia);
|
||||
expect(getTokenAddress(TokenEnum.BRZ)).toBe(
|
||||
"0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
|
||||
);
|
||||
});
|
||||
|
||||
it("getTokenAddress Polygon", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.polygon);
|
||||
expect(getTokenAddress(TokenEnum.BRZ)).toBe(
|
||||
"0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29"
|
||||
);
|
||||
});
|
||||
|
||||
it("getTokenAddress Rootstock", () => {
|
||||
const user = useUser();
|
||||
user.setNetworkId(30);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.rootstock);
|
||||
expect(getTokenAddress(TokenEnum.BRZ)).toBe(
|
||||
"0xfE841c74250e57640390f46d914C88d22C51e82e"
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
it("getTokenAddress Default", () => {
|
||||
expect(getTokenAddress(TokenEnum.BRZ)).toBe(
|
||||
"0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
|
||||
@ -47,16 +56,24 @@ describe("addresses.ts functions", () => {
|
||||
});
|
||||
|
||||
it("getP2PixAddress Ethereum", () => {
|
||||
const user = useUser();
|
||||
user.setNetworkId(11155111);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.sepolia);
|
||||
expect(getP2PixAddress()).toBe(
|
||||
"0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
|
||||
);
|
||||
});
|
||||
|
||||
it("getP2PixAddress Polygon", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.polygon);
|
||||
expect(getP2PixAddress()).toBe(
|
||||
"0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
|
||||
);
|
||||
});
|
||||
|
||||
it("getP2PixAddress Rootstock", () => {
|
||||
const user = useUser();
|
||||
user.setNetworkId(30);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.rootstock);
|
||||
expect(getP2PixAddress()).toBe(
|
||||
"0x98ba35eb14b38D6Aa709338283af3e922476dE34"
|
||||
);
|
||||
@ -69,14 +86,20 @@ describe("addresses.ts functions", () => {
|
||||
});
|
||||
|
||||
it("getProviderUrl Ethereum", () => {
|
||||
const user = useUser();
|
||||
user.setNetworkId(11155111);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.sepolia);
|
||||
expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
|
||||
});
|
||||
|
||||
it("getProviderUrl Polygon", () => {
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.polygon);
|
||||
expect(getProviderUrl()).toBe(import.meta.env.VITE_MUMBAI_API_URL);
|
||||
});
|
||||
|
||||
it("getProviderUrl Rootstock", () => {
|
||||
const user = useUser();
|
||||
user.setNetworkId(30);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.rootstock);
|
||||
expect(getProviderUrl()).toBe(import.meta.env.VITE_ROOTSTOCK_API_URL);
|
||||
});
|
||||
|
||||
@ -85,14 +108,14 @@ describe("addresses.ts functions", () => {
|
||||
});
|
||||
|
||||
it("isPossibleNetwork Returns", () => {
|
||||
const user = useUser();
|
||||
user.setNetworkId(11155111);
|
||||
expect(isPossibleNetwork(0x5 as NetworkEnum)).toBe(true);
|
||||
expect(isPossibleNetwork(5 as NetworkEnum)).toBe(true);
|
||||
expect(isPossibleNetwork(0x13881 as NetworkEnum)).toBe(true);
|
||||
expect(isPossibleNetwork(80001 as NetworkEnum)).toBe(true);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setNetworkId(NetworkEnum.sepolia);
|
||||
expect(isPossibleNetwork(0x5)).toBe(true);
|
||||
expect(isPossibleNetwork(5)).toBe(true);
|
||||
expect(isPossibleNetwork(0x13881)).toBe(true);
|
||||
expect(isPossibleNetwork(80001)).toBe(true);
|
||||
|
||||
expect(isPossibleNetwork(NaN as NetworkEnum)).toBe(false);
|
||||
expect(isPossibleNetwork(0x55 as NetworkEnum)).toBe(false);
|
||||
expect(isPossibleNetwork(NaN)).toBe(false);
|
||||
expect(isPossibleNetwork(0x55)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
|
||||
import { createPublicClient, http } from "viem";
|
||||
import { sepolia, rootstock } from "viem/chains";
|
||||
import { JsonRpcProvider } from "ethers";
|
||||
|
||||
const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
|
||||
[NetworkEnum.sepolia]: {
|
||||
@ -15,53 +14,57 @@ const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
|
||||
};
|
||||
|
||||
export const getTokenByAddress = (address: string) => {
|
||||
const user = useUser();
|
||||
const networksTokens = Tokens[user.networkName.value];
|
||||
for (const [token, tokenAddress] of Object.entries(networksTokens)) {
|
||||
if (tokenAddress.toLowerCase() === address.toLowerCase()) {
|
||||
return token;
|
||||
for (const network of Object.values(NetworkEnum).filter(
|
||||
(v) => !isNaN(Number(v))
|
||||
)) {
|
||||
for (const token of Object.keys(Tokens[network as NetworkEnum])) {
|
||||
if (address === Tokens[network as NetworkEnum][token as TokenEnum]) {
|
||||
return token as TokenEnum;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const getTokenAddress = (
|
||||
token: TokenEnum,
|
||||
network?: NetworkEnum
|
||||
): string => {
|
||||
const user = useUser();
|
||||
return Tokens[network ? network : user.networkName.value][token];
|
||||
const getTokenAddress = (token: TokenEnum, network?: NetworkEnum): string => {
|
||||
const etherStore = useEtherStore();
|
||||
return Tokens[network ? network : etherStore.networkName][token];
|
||||
};
|
||||
|
||||
export const getP2PixAddress = (network?: NetworkEnum): string => {
|
||||
const user = useUser();
|
||||
const getP2PixAddress = (network?: NetworkEnum): string => {
|
||||
const etherStore = useEtherStore();
|
||||
const possibleP2PixAddresses: { [key in NetworkEnum]: string } = {
|
||||
[NetworkEnum.sepolia]: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
|
||||
[NetworkEnum.rootstock]: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
|
||||
};
|
||||
|
||||
return possibleP2PixAddresses[network ? network : user.networkName.value];
|
||||
return possibleP2PixAddresses[network ? network : etherStore.networkName];
|
||||
};
|
||||
|
||||
export const getProviderUrl = (network?: NetworkEnum): string => {
|
||||
const user = useUser();
|
||||
const getProviderUrl = (network?: NetworkEnum): string => {
|
||||
const etherStore = useEtherStore();
|
||||
const possibleProvidersUrls: { [key in NetworkEnum]: string } = {
|
||||
[NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_API_URL,
|
||||
[NetworkEnum.rootstock]: import.meta.env.VITE_RSK_API_URL,
|
||||
};
|
||||
|
||||
return possibleProvidersUrls[network || user.networkName.value];
|
||||
return possibleProvidersUrls[network || etherStore.networkName];
|
||||
};
|
||||
|
||||
export const getProviderByNetwork = (network: NetworkEnum) => {
|
||||
const getProviderByNetwork = (network: NetworkEnum): JsonRpcProvider => {
|
||||
console.log("network", network);
|
||||
const chain = network === NetworkEnum.sepolia ? sepolia : rootstock;
|
||||
return createPublicClient({
|
||||
chain,
|
||||
transport: http(getProviderUrl(network)),
|
||||
});
|
||||
return new JsonRpcProvider(getProviderUrl(network), network);
|
||||
};
|
||||
|
||||
export const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
|
||||
const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
|
||||
return Number(networkChain) in NetworkEnum;
|
||||
};
|
||||
|
||||
export {
|
||||
getTokenAddress,
|
||||
getProviderUrl,
|
||||
isPossibleNetwork,
|
||||
getP2PixAddress,
|
||||
getProviderByNetwork,
|
||||
};
|
||||
|
||||
@ -1,60 +1,97 @@
|
||||
import { getContract } from "./provider";
|
||||
import { getTokenAddress } from "./addresses";
|
||||
import { parseEther } from "viem";
|
||||
import { getContract, getProvider } from "./provider";
|
||||
import { getP2PixAddress, getTokenAddress } from "./addresses";
|
||||
|
||||
import p2pix from "@/utils/smart_contract_files/P2PIX.json";
|
||||
|
||||
import {
|
||||
solidityPackedKeccak256,
|
||||
encodeBytes32String,
|
||||
Signature,
|
||||
Contract,
|
||||
getBytes,
|
||||
Wallet,
|
||||
parseEther,
|
||||
} from "ethers";
|
||||
import type { TokenEnum } from "@/model/NetworkEnum";
|
||||
|
||||
export const addLock = async (
|
||||
sellerAddress: string,
|
||||
tokenAddress: string,
|
||||
const addLock = async (
|
||||
seller: string,
|
||||
token: string,
|
||||
amount: number
|
||||
): Promise<string> => {
|
||||
const { address, abi, wallet, client } = await getContract();
|
||||
const parsedAmount = parseEther(amount.toString());
|
||||
const p2pContract = await getContract();
|
||||
|
||||
const { request } = await client.simulateContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "lock",
|
||||
args: [sellerAddress, tokenAddress, parsedAmount, [], []],
|
||||
});
|
||||
console.log(wallet);
|
||||
const hash = await wallet.writeContract(request);
|
||||
const receipt = await client.waitForTransactionReceipt({ hash });
|
||||
const lock = await p2pContract.lock(
|
||||
seller,
|
||||
token,
|
||||
parseEther(String(amount)), // BigNumber
|
||||
[],
|
||||
[]
|
||||
);
|
||||
|
||||
return receipt.status ? receipt.logs[0].topics[2] : "";
|
||||
const lock_rec = await lock.wait();
|
||||
const [t] = lock_rec.events;
|
||||
|
||||
return String(t.args.lockID);
|
||||
};
|
||||
|
||||
export const withdrawDeposit = async (
|
||||
const releaseLock = async (
|
||||
pixKey: string,
|
||||
amount: number,
|
||||
e2eId: string,
|
||||
lockId: string
|
||||
): Promise<any> => {
|
||||
const mockBacenSigner = new Wallet(
|
||||
"0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"
|
||||
);
|
||||
|
||||
const messageToSign = solidityPackedKeccak256(
|
||||
["bytes32", "uint256", "bytes32"],
|
||||
[pixKey, parseEther(String(amount)), encodeBytes32String(e2eId)]
|
||||
);
|
||||
|
||||
const messageHashBytes = getBytes(messageToSign);
|
||||
const flatSig = await mockBacenSigner.signMessage(messageHashBytes);
|
||||
const provider = getProvider();
|
||||
|
||||
const sig = Signature.from(flatSig);
|
||||
console.log(sig);
|
||||
const signer = await provider.getSigner();
|
||||
const p2pContract = new Contract(getP2PixAddress(), p2pix.abi, signer);
|
||||
|
||||
const release = await p2pContract.release(
|
||||
BigInt(lockId),
|
||||
encodeBytes32String(e2eId),
|
||||
flatSig
|
||||
);
|
||||
await release.wait();
|
||||
|
||||
return release;
|
||||
};
|
||||
|
||||
const cancelDeposit = async (depositId: bigint): Promise<any> => {
|
||||
const contract = await getContract();
|
||||
|
||||
const cancel = await contract.cancelDeposit(depositId);
|
||||
await cancel.wait();
|
||||
|
||||
return cancel;
|
||||
};
|
||||
|
||||
const withdrawDeposit = async (
|
||||
amount: string,
|
||||
token: TokenEnum
|
||||
): Promise<boolean> => {
|
||||
const { address, abi, wallet, client } = await getContract();
|
||||
): Promise<any> => {
|
||||
const contract = await getContract();
|
||||
|
||||
const tokenAddress = getTokenAddress(token);
|
||||
const withdraw = await contract.withdraw(
|
||||
getTokenAddress(token),
|
||||
parseEther(String(amount)),
|
||||
[]
|
||||
);
|
||||
await withdraw.wait();
|
||||
|
||||
const { request } = await client.simulateContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "withdraw",
|
||||
args: [tokenAddress, parseEther(amount), []],
|
||||
});
|
||||
|
||||
const hash = await wallet.writeContract(request);
|
||||
const receipt = await client.waitForTransactionReceipt({ hash });
|
||||
|
||||
return receipt.status;
|
||||
return withdraw;
|
||||
};
|
||||
|
||||
export const releaseLock = async (solicitation: any): Promise<any> => {
|
||||
const { address, abi, wallet, client } = await getContract();
|
||||
|
||||
const { request } = await client.simulateContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "release",
|
||||
args: [solicitation.lockId, solicitation.e2eId],
|
||||
});
|
||||
|
||||
const hash = await wallet.writeContract(request);
|
||||
return client.waitForTransactionReceipt({ hash });
|
||||
};
|
||||
export { cancelDeposit, withdrawDeposit, addLock, releaseLock };
|
||||
|
||||
@ -1,52 +1,53 @@
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { formatEther, toHex, type PublicClient } from "viem";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { Contract, formatEther, Interface } from "ethers";
|
||||
|
||||
import p2pix from "@/utils/smart_contract_files/P2PIX.json";
|
||||
import { getContract } from "./provider";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import { getP2PixAddress, getTokenAddress } from "./addresses";
|
||||
import { getNetworkSubgraphURL, NetworkEnum } from "@/model/NetworkEnum";
|
||||
import {
|
||||
getP2PixAddress,
|
||||
getProviderByNetwork,
|
||||
getTokenAddress,
|
||||
} from "./addresses";
|
||||
import { NetworkEnum } from "@/model/NetworkEnum";
|
||||
import type { UnreleasedLock } from "@/model/UnreleasedLock";
|
||||
import type { Pix } from "@/model/Pix";
|
||||
|
||||
const getNetworksLiquidity = async (): Promise<void> => {
|
||||
const user = useUser();
|
||||
user.setLoadingNetworkLiquidity(true);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setLoadingNetworkLiquidity(true);
|
||||
|
||||
const depositLists: ValidDeposit[][] = [];
|
||||
|
||||
for (const network of Object.values(NetworkEnum).filter(
|
||||
(v) => !isNaN(Number(v))
|
||||
)) {
|
||||
const deposits = await getValidDeposits(
|
||||
getTokenAddress(user.selectedToken.value),
|
||||
Number(network)
|
||||
console.log("getNetworksLiquidity", network);
|
||||
const p2pContract = new Contract(
|
||||
getP2PixAddress(network as NetworkEnum),
|
||||
p2pix.abi,
|
||||
getProviderByNetwork(network as NetworkEnum)
|
||||
);
|
||||
|
||||
depositLists.push(
|
||||
await getValidDeposits(
|
||||
getTokenAddress(etherStore.selectedToken, network as NetworkEnum),
|
||||
network as NetworkEnum,
|
||||
p2pContract
|
||||
)
|
||||
);
|
||||
if (deposits) depositLists.push(deposits);
|
||||
}
|
||||
|
||||
const allDeposits = depositLists.flat();
|
||||
user.setDepositsValidList(allDeposits);
|
||||
user.setLoadingNetworkLiquidity(false);
|
||||
etherStore.setDepositsValidList(depositLists.flat());
|
||||
etherStore.setLoadingNetworkLiquidity(false);
|
||||
};
|
||||
|
||||
const getPixKey = async (seller: string, token: string): Promise<string> => {
|
||||
const { address, abi, client } = await getContract();
|
||||
|
||||
const pixKeyHex = await client.readContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "getPixTarget",
|
||||
args: [seller, token],
|
||||
});
|
||||
|
||||
const p2pContract = await getContract();
|
||||
const pixKeyHex = await p2pContract.getPixTarget(seller, token);
|
||||
// Remove '0x' prefix and convert hex to UTF-8 string
|
||||
const hexString =
|
||||
typeof pixKeyHex === "string" ? pixKeyHex : toHex(pixKeyHex);
|
||||
if (!hexString) throw new Error("PixKey not found");
|
||||
const bytes = new Uint8Array(
|
||||
// @ts-ignore
|
||||
hexString
|
||||
pixKeyHex
|
||||
.slice(2)
|
||||
.match(/.{1,2}/g)
|
||||
.map((byte: string) => parseInt(byte, 16))
|
||||
@ -58,108 +59,67 @@ const getPixKey = async (seller: string, token: string): Promise<string> => {
|
||||
const getValidDeposits = async (
|
||||
token: string,
|
||||
network: NetworkEnum,
|
||||
contractInfo?: { client: any; address: string }
|
||||
contract?: Contract
|
||||
): Promise<ValidDeposit[]> => {
|
||||
let client: PublicClient, address, abi;
|
||||
let p2pContract: Contract;
|
||||
|
||||
if (contractInfo) {
|
||||
({ client, address } = contractInfo);
|
||||
abi = p2pix.abi;
|
||||
if (contract) {
|
||||
p2pContract = contract;
|
||||
} else {
|
||||
({ address, abi, client } = await getContract(true));
|
||||
p2pContract = await getContract(true);
|
||||
}
|
||||
|
||||
// TODO: Remove this once we have a subgraph for rootstock
|
||||
if (network === NetworkEnum.rootstock) return [];
|
||||
|
||||
const body = {
|
||||
query: `
|
||||
{
|
||||
depositAddeds(where: { token: "${token}" }) {
|
||||
seller
|
||||
amount
|
||||
blockTimestamp
|
||||
blockNumber
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
const depositLogs = await fetch(getNetworkSubgraphURL(network), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
// remove doubles from sellers list
|
||||
const depositData = await depositLogs.json();
|
||||
const depositAddeds = depositData.data.depositAddeds;
|
||||
const uniqueSellers = depositAddeds.reduce(
|
||||
(acc: Record<string, boolean>, deposit: any) => {
|
||||
acc[deposit.seller] = true;
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, boolean>
|
||||
const filterDeposits = p2pContract.filters.DepositAdded(null);
|
||||
const eventsDeposits = await p2pContract.queryFilter(
|
||||
filterDeposits
|
||||
// 0,
|
||||
// "latest"
|
||||
);
|
||||
|
||||
if (!contractInfo) {
|
||||
// Get metamask provider contract
|
||||
({ abi, client } = await getContract(true));
|
||||
}
|
||||
|
||||
if (!contract) p2pContract = await getContract(); // get metamask provider contract
|
||||
const depositList: { [key: string]: ValidDeposit } = {};
|
||||
|
||||
const sellersList = Object.keys(uniqueSellers);
|
||||
// Use multicall to batch all getBalance requests
|
||||
const balanceCalls = sellersList.map((seller) => ({
|
||||
address: getP2PixAddress(network),
|
||||
abi,
|
||||
functionName: "getBalance",
|
||||
args: [seller, token],
|
||||
}));
|
||||
for (const deposit of eventsDeposits) {
|
||||
const IPix2Pix = new Interface(p2pix.abi);
|
||||
const decoded = IPix2Pix.parseLog({
|
||||
topics: deposit.topics,
|
||||
data: deposit.data,
|
||||
});
|
||||
// Get liquidity only for the selected token
|
||||
if (decoded?.args.token != token) continue;
|
||||
const mappedBalance = await p2pContract.getBalance(
|
||||
decoded.args.seller,
|
||||
token
|
||||
);
|
||||
let validDeposit: ValidDeposit | null = null;
|
||||
|
||||
const balanceResults = await client.multicall({
|
||||
contracts: balanceCalls as any,
|
||||
});
|
||||
|
||||
// Process results into the depositList
|
||||
sellersList.forEach((seller, index) => {
|
||||
const mappedBalance = balanceResults[index];
|
||||
|
||||
if (!mappedBalance.error && mappedBalance.result) {
|
||||
const validDeposit: ValidDeposit = {
|
||||
if (mappedBalance) {
|
||||
validDeposit = {
|
||||
token: token,
|
||||
blockNumber: 0,
|
||||
remaining: Number(formatEther(mappedBalance.result as bigint)),
|
||||
seller: seller,
|
||||
blockNumber: deposit.blockNumber,
|
||||
remaining: Number(formatEther(mappedBalance)),
|
||||
seller: decoded.args.seller,
|
||||
network,
|
||||
pixKey: "",
|
||||
};
|
||||
depositList[seller + token] = validDeposit;
|
||||
}
|
||||
});
|
||||
if (validDeposit) depositList[decoded.args.seller + token] = validDeposit;
|
||||
}
|
||||
|
||||
return Object.values(depositList);
|
||||
};
|
||||
|
||||
const getUnreleasedLockById = async (
|
||||
lockID: string
|
||||
): Promise<UnreleasedLock> => {
|
||||
const { address, abi, client } = await getContract();
|
||||
const p2pContract = await getContract();
|
||||
const pixData: Pix = {
|
||||
pixKey: "",
|
||||
};
|
||||
|
||||
const lock = await client.readContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "mapLocks",
|
||||
args: [BigInt(lockID)],
|
||||
});
|
||||
const lock = await p2pContract.mapLocks(lockID);
|
||||
|
||||
const pixTarget = lock.pixTarget;
|
||||
const amount = formatEther(lock.amount);
|
||||
const amount = formatEther(lock?.amount);
|
||||
pixData.pixKey = pixTarget;
|
||||
pixData.value = Number(amount);
|
||||
|
||||
|
||||
@ -1,68 +1,27 @@
|
||||
import p2pix from "@/utils/smart_contract_files/P2PIX.json";
|
||||
import { updateWalletStatus } from "./wallet";
|
||||
import { getProviderUrl, getP2PixAddress } from "./addresses";
|
||||
import {
|
||||
createPublicClient,
|
||||
createWalletClient,
|
||||
custom,
|
||||
http,
|
||||
PublicClient,
|
||||
WalletClient,
|
||||
} from "viem";
|
||||
import { sepolia, rootstock } from "viem/chains";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { BrowserProvider, JsonRpcProvider, Contract } from "ethers";
|
||||
|
||||
let publicClient: PublicClient | null = null;
|
||||
let walletClient: WalletClient | null = null;
|
||||
let provider: BrowserProvider | JsonRpcProvider | null = null;
|
||||
|
||||
const getPublicClient: PublicClient | null = (onlyRpcProvider = false) => {
|
||||
if (onlyRpcProvider) {
|
||||
const user = useUser();
|
||||
const rpcUrl = getProviderUrl();
|
||||
return createPublicClient({
|
||||
chain:
|
||||
Number(user.networkName.value) === sepolia.id ? sepolia : rootstock,
|
||||
transport: http(rpcUrl),
|
||||
});
|
||||
const getProvider = (onlyAlchemyProvider: boolean = false) => {
|
||||
if (onlyAlchemyProvider) return new JsonRpcProvider(getProviderUrl()); // alchemy provider
|
||||
return provider;
|
||||
};
|
||||
|
||||
const getContract = async (onlyAlchemyProvider: boolean = false) => {
|
||||
const p = getProvider(onlyAlchemyProvider);
|
||||
try {
|
||||
const signer = await p?.getSigner();
|
||||
return new Contract(getP2PixAddress(), p2pix.abi, signer);
|
||||
} catch (err) {
|
||||
return new Contract(getP2PixAddress(), p2pix.abi, p);
|
||||
}
|
||||
return publicClient;
|
||||
};
|
||||
|
||||
const getWalletClient: WalletClient | null = () => {
|
||||
return walletClient;
|
||||
};
|
||||
|
||||
const getContract = async (onlyRpcProvider = false) => {
|
||||
const client = getPublicClient(onlyRpcProvider);
|
||||
const address = getP2PixAddress();
|
||||
const abi = p2pix.abi;
|
||||
const wallet = getWalletClient();
|
||||
|
||||
const [account] = wallet ? await wallet.getAddresses() : [""];
|
||||
|
||||
return { address, abi, client, wallet, account };
|
||||
};
|
||||
|
||||
const connectProvider = async (p: any): Promise<void> => {
|
||||
console.log("Connecting to wallet provider...");
|
||||
const user = useUser();
|
||||
const chain =
|
||||
Number(user.networkName.value) === sepolia.id ? sepolia : rootstock;
|
||||
|
||||
publicClient = createPublicClient({
|
||||
chain,
|
||||
transport: custom(p),
|
||||
});
|
||||
|
||||
const [account] = await p!.request({ method: "eth_requestAccounts" });
|
||||
|
||||
walletClient = createWalletClient({
|
||||
account,
|
||||
chain,
|
||||
transport: custom(p),
|
||||
});
|
||||
|
||||
provider = new BrowserProvider(p, "any");
|
||||
await updateWalletStatus();
|
||||
};
|
||||
|
||||
export { getPublicClient, getWalletClient, getContract, connectProvider };
|
||||
export { getProvider, getContract, connectProvider };
|
||||
|
||||
@ -1,81 +1,54 @@
|
||||
import { getContract, getPublicClient, getWalletClient } from "./provider";
|
||||
import { getContract, getProvider } from "./provider";
|
||||
import { getTokenAddress, getP2PixAddress } from "./addresses";
|
||||
import { parseEther, toHex } from "viem";
|
||||
|
||||
import { encodeBytes32String, Contract, parseEther } from "ethers";
|
||||
|
||||
import mockToken from "../utils/smart_contract_files/MockToken.json";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { createParticipant } from "@/utils/bbPay";
|
||||
import type { Participant } from "@/utils/bbPay";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
|
||||
const approveTokens = async (participant: Participant): Promise<any> => {
|
||||
const user = useUser();
|
||||
const publicClient = getPublicClient();
|
||||
const walletClient = getWalletClient();
|
||||
const approveTokens = async (tokenQty: string): Promise<any> => {
|
||||
const provider = getProvider();
|
||||
const signer = await provider?.getSigner();
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
if (!publicClient || !walletClient) {
|
||||
throw new Error("Clients not initialized");
|
||||
}
|
||||
|
||||
user.setSeller(participant);
|
||||
const [account] = await walletClient.getAddresses();
|
||||
|
||||
// Get token address
|
||||
const tokenAddress = getTokenAddress(user.selectedToken.value);
|
||||
const tokenContract = new Contract(
|
||||
getTokenAddress(etherStore.selectedToken),
|
||||
mockToken.abi,
|
||||
signer
|
||||
);
|
||||
|
||||
// Check if the token is already approved
|
||||
const allowance = await publicClient.readContract({
|
||||
address: tokenAddress,
|
||||
abi: mockToken.abi,
|
||||
functionName: "allowance",
|
||||
args: [account, getP2PixAddress()],
|
||||
});
|
||||
|
||||
if (allowance < parseEther(participant.offer.toString())) {
|
||||
const approved = await tokenContract.allowance(
|
||||
await signer?.getAddress(),
|
||||
getP2PixAddress()
|
||||
);
|
||||
if (approved < parseEther(tokenQty)) {
|
||||
// Approve tokens
|
||||
const hash = await walletClient.writeContract({
|
||||
address: tokenAddress,
|
||||
abi: mockToken.abi,
|
||||
functionName: "approve",
|
||||
args: [getP2PixAddress(), parseEther(participant.offer.toString())],
|
||||
account,
|
||||
});
|
||||
|
||||
await publicClient.waitForTransactionReceipt({ hash });
|
||||
const apprv = await tokenContract.approve(
|
||||
getP2PixAddress(),
|
||||
parseEther(tokenQty)
|
||||
);
|
||||
await apprv.wait();
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const addDeposit = async (): Promise<any> => {
|
||||
const { address, abi, client } = await getContract();
|
||||
const walletClient = getWalletClient();
|
||||
const user = useUser();
|
||||
const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => {
|
||||
const p2pContract = await getContract();
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
if (!walletClient) {
|
||||
throw new Error("Wallet client not initialized");
|
||||
}
|
||||
const deposit = await p2pContract.deposit(
|
||||
pixKey,
|
||||
encodeBytes32String(""),
|
||||
getTokenAddress(etherStore.selectedToken),
|
||||
parseEther(tokenQty),
|
||||
true
|
||||
);
|
||||
|
||||
const [account] = await walletClient.getAddresses();
|
||||
await deposit.wait();
|
||||
|
||||
const sellerId = await createParticipant(user.seller.value);
|
||||
user.setSellerId(sellerId.id);
|
||||
|
||||
const hash = await walletClient.writeContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "deposit",
|
||||
args: [
|
||||
user.networkId + "-" + sellerId.id,
|
||||
toHex("", { size: 32 }),
|
||||
getTokenAddress(user.selectedToken.value),
|
||||
parseEther(user.seller.value.offer.toString()),
|
||||
true,
|
||||
],
|
||||
account,
|
||||
});
|
||||
|
||||
const receipt = await client.waitForTransactionReceipt({ hash });
|
||||
return receipt;
|
||||
return deposit;
|
||||
};
|
||||
|
||||
export { approveTokens, addDeposit };
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
import { decodeEventLog, formatEther, type Log } from "viem";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import {
|
||||
Contract,
|
||||
formatEther,
|
||||
getAddress,
|
||||
Interface,
|
||||
Log,
|
||||
LogDescription,
|
||||
} from "ethers";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
|
||||
import { getPublicClient, getWalletClient, getContract } from "./provider";
|
||||
import { getTokenAddress } from "./addresses";
|
||||
import { getContract, getProvider } from "./provider";
|
||||
import { getTokenAddress, isPossibleNetwork } from "./addresses";
|
||||
|
||||
import mockToken from "@/utils/smart_contract_files/MockToken.json";
|
||||
import p2pix from "@/utils/smart_contract_files/P2PIX.json";
|
||||
|
||||
import { getValidDeposits } from "./events";
|
||||
@ -12,39 +20,45 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import type { WalletTransaction } from "@/model/WalletTransaction";
|
||||
import type { UnreleasedLock } from "@/model/UnreleasedLock";
|
||||
import type { Pix } from "@/model/Pix";
|
||||
import { getNetworkSubgraphURL } from "@/model/NetworkEnum";
|
||||
|
||||
export const updateWalletStatus = async (): Promise<void> => {
|
||||
const user = useUser();
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const publicClient = getPublicClient();
|
||||
const walletClient = getWalletClient();
|
||||
const provider = await getProvider();
|
||||
const signer = await provider?.getSigner();
|
||||
|
||||
if (!publicClient || !walletClient) {
|
||||
console.error("Client not initialized");
|
||||
const { chainId } = await provider?.getNetwork();
|
||||
if (!isPossibleNetwork(Number(chainId))) {
|
||||
window.alert("Invalid chain!:" + chainId);
|
||||
return;
|
||||
}
|
||||
etherStore.setNetworkId(Number(chainId));
|
||||
|
||||
// Get balance
|
||||
const [account] = await walletClient.getAddresses();
|
||||
const balance = await publicClient.getBalance({ address: account });
|
||||
const mockTokenContract = new Contract(
|
||||
getTokenAddress(etherStore.selectedToken),
|
||||
mockToken.abi,
|
||||
signer
|
||||
);
|
||||
|
||||
user.setWalletAddress(account);
|
||||
user.setBalance(formatEther(balance));
|
||||
const walletAddress = await provider?.send("eth_requestAccounts", []);
|
||||
const balance = await mockTokenContract.balanceOf(walletAddress[0]);
|
||||
|
||||
etherStore.setBalance(formatEther(balance));
|
||||
etherStore.setWalletAddress(getAddress(walletAddress[0]));
|
||||
};
|
||||
|
||||
export const listValidDepositTransactionsByWalletAddress = async (
|
||||
walletAddress: string
|
||||
): Promise<ValidDeposit[]> => {
|
||||
const user = useUser();
|
||||
const etherStore = useEtherStore();
|
||||
const walletDeposits = await getValidDeposits(
|
||||
getTokenAddress(user.selectedToken.value),
|
||||
user.networkName.value
|
||||
getTokenAddress(etherStore.selectedToken),
|
||||
etherStore.networkName
|
||||
);
|
||||
if (walletDeposits) {
|
||||
return walletDeposits
|
||||
.filter((deposit) => deposit.seller == walletAddress)
|
||||
.sort((a: ValidDeposit, b: ValidDeposit) => {
|
||||
.sort((a, b) => {
|
||||
return b.blockNumber - a.blockNumber;
|
||||
});
|
||||
}
|
||||
@ -52,15 +66,10 @@ export const listValidDepositTransactionsByWalletAddress = async (
|
||||
return [];
|
||||
};
|
||||
|
||||
const getLockStatus = async (id: bigint): Promise<number> => {
|
||||
const { address, abi, client } = await getContract();
|
||||
const result = await client.readContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "getLocksStatus",
|
||||
args: [[id]],
|
||||
});
|
||||
return result[1][0];
|
||||
const getLockStatus = async (id: [BigInt]): Promise<number> => {
|
||||
const p2pContract = await getContract();
|
||||
const res = await p2pContract.getLocksStatus([id]);
|
||||
return res[1][0];
|
||||
};
|
||||
|
||||
const filterLockStatus = async (
|
||||
@ -69,38 +78,31 @@ const filterLockStatus = async (
|
||||
const txs: WalletTransaction[] = [];
|
||||
|
||||
for (const transaction of transactions) {
|
||||
try {
|
||||
const decoded = decodeEventLog({
|
||||
abi: p2pix.abi,
|
||||
data: transaction.data,
|
||||
topics: transaction.topics,
|
||||
});
|
||||
|
||||
if (!decoded || !decoded.args) continue;
|
||||
|
||||
// Type assertion to handle the args safely
|
||||
const args = decoded.args as Record<string, any>;
|
||||
|
||||
const tx: WalletTransaction = {
|
||||
token: args.token ? String(args.token) : "",
|
||||
blockNumber: Number(transaction.blockNumber),
|
||||
amount: args.amount ? Number(formatEther(args.amount)) : -1,
|
||||
seller: args.seller ? String(args.seller) : "",
|
||||
buyer: args.buyer ? String(args.buyer) : "",
|
||||
event: decoded.eventName || "",
|
||||
lockStatus:
|
||||
decoded.eventName == "LockAdded" && args.lockID
|
||||
? await getLockStatus(args.lockID)
|
||||
: -1,
|
||||
transactionHash: transaction.transactionHash
|
||||
? transaction.transactionHash
|
||||
: "",
|
||||
transactionID: args.lockID ? args.lockID.toString() : "",
|
||||
};
|
||||
txs.push(tx);
|
||||
} catch (error) {
|
||||
console.error("Error decoding log", error);
|
||||
}
|
||||
const IPix2Pix = new Interface(p2pix.abi);
|
||||
const decoded = IPix2Pix.parseLog({
|
||||
topics: transaction.topics,
|
||||
data: transaction.data,
|
||||
});
|
||||
if (!decoded) continue;
|
||||
const tx: WalletTransaction = {
|
||||
token: decoded.args.token ? decoded.args.token : "",
|
||||
blockNumber: transaction.blockNumber,
|
||||
amount: decoded.args.amount
|
||||
? Number(formatEther(decoded.args.amount))
|
||||
: -1,
|
||||
seller: decoded.args.seller ? decoded.args.seller : "",
|
||||
buyer: decoded.args.buyer ? decoded.args.buyer : "",
|
||||
event: decoded.name,
|
||||
lockStatus:
|
||||
decoded.name == "LockAdded"
|
||||
? await getLockStatus(decoded.args.lockID)
|
||||
: -1,
|
||||
transactionHash: transaction.transactionHash
|
||||
? transaction.transactionHash
|
||||
: "",
|
||||
transactionID: decoded.args.lockID ? decoded.args.lockID.toString() : "",
|
||||
};
|
||||
txs.push(tx);
|
||||
}
|
||||
return txs;
|
||||
};
|
||||
@ -108,395 +110,162 @@ const filterLockStatus = async (
|
||||
export const listAllTransactionByWalletAddress = async (
|
||||
walletAddress: string
|
||||
): Promise<WalletTransaction[]> => {
|
||||
const user = useUser();
|
||||
const p2pContract = await getContract(true);
|
||||
|
||||
// Get the current network for the subgraph URL
|
||||
const network = user.networkName.value;
|
||||
// Get deposits
|
||||
const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
|
||||
const eventsDeposits = await p2pContract.queryFilter(
|
||||
filterDeposits,
|
||||
0,
|
||||
"latest"
|
||||
);
|
||||
console.log("Fetched all wallet deposits");
|
||||
|
||||
// Query subgraph for all relevant transactions
|
||||
const subgraphQuery = {
|
||||
query: `
|
||||
{
|
||||
depositAddeds(where: {seller: "${walletAddress.toLowerCase()}"}) {
|
||||
seller
|
||||
token
|
||||
amount
|
||||
blockTimestamp
|
||||
blockNumber
|
||||
transactionHash
|
||||
}
|
||||
lockAddeds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
|
||||
buyer
|
||||
lockID
|
||||
seller
|
||||
token
|
||||
amount
|
||||
blockTimestamp
|
||||
blockNumber
|
||||
transactionHash
|
||||
}
|
||||
lockReleaseds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
|
||||
buyer
|
||||
lockId
|
||||
e2eId
|
||||
blockTimestamp
|
||||
blockNumber
|
||||
transactionHash
|
||||
}
|
||||
depositWithdrawns(where: {seller: "${walletAddress.toLowerCase()}"}) {
|
||||
seller
|
||||
token
|
||||
amount
|
||||
blockTimestamp
|
||||
blockNumber
|
||||
transactionHash
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
// Get locks
|
||||
const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
|
||||
const eventsAddedLocks = await p2pContract.queryFilter(
|
||||
filterAddedLocks,
|
||||
0,
|
||||
"latest"
|
||||
);
|
||||
console.log("Fetched all wallet locks");
|
||||
|
||||
console.log("Fetching transactions from subgraph");
|
||||
const response = await fetch(getNetworkSubgraphURL(network), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(subgraphQuery),
|
||||
});
|
||||
// Get released locks
|
||||
const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
|
||||
const eventsReleasedLocks = await p2pContract.queryFilter(
|
||||
filterReleasedLocks,
|
||||
0,
|
||||
"latest"
|
||||
);
|
||||
console.log("Fetched all wallet released locks");
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Subgraph data fetched:", data);
|
||||
// Get withdrawn deposits
|
||||
const filterWithdrawnDeposits = p2pContract.filters.DepositWithdrawn([
|
||||
walletAddress,
|
||||
]);
|
||||
const eventsWithdrawnDeposits = await p2pContract.queryFilter(
|
||||
filterWithdrawnDeposits
|
||||
);
|
||||
console.log("Fetched all wallet withdrawn deposits");
|
||||
|
||||
// Convert all transactions to common WalletTransaction format
|
||||
const transactions: WalletTransaction[] = [];
|
||||
const lockStatusFiltered = await filterLockStatus(
|
||||
[
|
||||
...eventsDeposits,
|
||||
...eventsAddedLocks,
|
||||
...eventsReleasedLocks,
|
||||
...eventsWithdrawnDeposits,
|
||||
].sort((a, b) => {
|
||||
return b.blockNumber - a.blockNumber;
|
||||
})
|
||||
);
|
||||
|
||||
// Process deposit added events
|
||||
if (data.data?.depositAddeds) {
|
||||
console.log("Processing deposit events");
|
||||
for (const deposit of data.data.depositAddeds) {
|
||||
transactions.push({
|
||||
token: deposit.token,
|
||||
blockNumber: parseInt(deposit.blockNumber),
|
||||
amount: parseFloat(formatEther(BigInt(deposit.amount))),
|
||||
seller: deposit.seller,
|
||||
buyer: "",
|
||||
event: "DepositAdded",
|
||||
lockStatus: -1,
|
||||
transactionHash: deposit.transactionHash,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Process lock added events
|
||||
if (data.data?.lockAddeds) {
|
||||
console.log("Processing lock events");
|
||||
for (const lock of data.data.lockAddeds) {
|
||||
// Get lock status from the contract
|
||||
const lockStatus = await getLockStatus(BigInt(lock.lockID));
|
||||
|
||||
transactions.push({
|
||||
token: lock.token,
|
||||
blockNumber: parseInt(lock.blockNumber),
|
||||
amount: parseFloat(formatEther(BigInt(lock.amount))),
|
||||
seller: lock.seller,
|
||||
buyer: lock.buyer,
|
||||
event: "LockAdded",
|
||||
lockStatus: lockStatus,
|
||||
transactionHash: lock.transactionHash,
|
||||
transactionID: lock.lockID.toString(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Process lock released events
|
||||
if (data.data?.lockReleaseds) {
|
||||
console.log("Processing release events");
|
||||
for (const release of data.data.lockReleaseds) {
|
||||
transactions.push({
|
||||
token: "", // Subgraph doesn't provide token in this event, we could enhance this later
|
||||
blockNumber: parseInt(release.blockNumber),
|
||||
amount: -1, // Amount not available in this event
|
||||
seller: "",
|
||||
buyer: release.buyer,
|
||||
event: "LockReleased",
|
||||
lockStatus: -1,
|
||||
transactionHash: release.transactionHash,
|
||||
transactionID: release.lockId.toString(),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Process deposit withdrawn events
|
||||
if (data.data?.depositWithdrawns) {
|
||||
console.log("Processing withdrawal events");
|
||||
for (const withdrawal of data.data.depositWithdrawns) {
|
||||
transactions.push({
|
||||
token: withdrawal.token,
|
||||
blockNumber: parseInt(withdrawal.blockNumber),
|
||||
amount: parseFloat(formatEther(BigInt(withdrawal.amount))),
|
||||
seller: withdrawal.seller,
|
||||
buyer: "",
|
||||
event: "DepositWithdrawn",
|
||||
lockStatus: -1,
|
||||
transactionHash: withdrawal.transactionHash,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Sort transactions by block number (newest first)
|
||||
return transactions.sort((a, b) => b.blockNumber - a.blockNumber);
|
||||
return lockStatusFiltered;
|
||||
};
|
||||
|
||||
// get wallet's release transactions
|
||||
export const listReleaseTransactionByWalletAddress = async (
|
||||
walletAddress: string
|
||||
) => {
|
||||
const user = useUser();
|
||||
const network = user.networkName.value;
|
||||
): Promise<LogDescription[]> => {
|
||||
const p2pContract = await getContract(true);
|
||||
|
||||
// Query subgraph for release transactions
|
||||
const subgraphQuery = {
|
||||
query: `
|
||||
{
|
||||
lockReleaseds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
|
||||
buyer
|
||||
lockId
|
||||
e2eId
|
||||
blockTimestamp
|
||||
blockNumber
|
||||
transactionHash
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
|
||||
const eventsReleasedLocks = await p2pContract.queryFilter(
|
||||
filterReleasedLocks,
|
||||
0,
|
||||
"latest"
|
||||
);
|
||||
|
||||
// Fetch data from subgraph
|
||||
const response = await fetch(getNetworkSubgraphURL(network), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(subgraphQuery),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Process the subgraph response into the same format as the previous implementation
|
||||
if (!data.data?.lockReleaseds) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Transform the subgraph data to match the event log decode format
|
||||
return data.data.lockReleaseds
|
||||
.sort((a: any, b: any) => {
|
||||
return parseInt(b.blockNumber) - parseInt(a.blockNumber);
|
||||
return eventsReleasedLocks
|
||||
.sort((a, b) => {
|
||||
return b.blockNumber - a.blockNumber;
|
||||
})
|
||||
.map((release: any) => {
|
||||
try {
|
||||
// Create a structure similar to the decoded event log
|
||||
return {
|
||||
eventName: "LockReleased",
|
||||
args: {
|
||||
buyer: release.buyer,
|
||||
lockID: BigInt(release.lockId),
|
||||
e2eId: release.e2eId,
|
||||
},
|
||||
// Add any other necessary fields to match the original return format
|
||||
blockNumber: BigInt(release.blockNumber),
|
||||
transactionHash: release.transactionHash,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error processing subgraph data", error);
|
||||
return null;
|
||||
}
|
||||
.map((lock) => {
|
||||
const IPix2Pix = new Interface(p2pix.abi);
|
||||
const decoded = IPix2Pix.parseLog({
|
||||
topics: lock.topics,
|
||||
data: lock.data,
|
||||
});
|
||||
return decoded;
|
||||
})
|
||||
.filter((decoded: any) => decoded !== null);
|
||||
.filter((lock) => lock !== null);
|
||||
};
|
||||
|
||||
const listLockTransactionByWalletAddress = async (walletAddress: string) => {
|
||||
const user = useUser();
|
||||
const network = user.networkName.value;
|
||||
const listLockTransactionByWalletAddress = async (
|
||||
walletAddress: string
|
||||
): Promise<LogDescription[]> => {
|
||||
const p2pContract = await getContract(true);
|
||||
|
||||
// Query subgraph for lock added transactions
|
||||
const subgraphQuery = {
|
||||
query: `
|
||||
{
|
||||
lockAddeds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
|
||||
buyer
|
||||
lockID
|
||||
seller
|
||||
token
|
||||
amount
|
||||
blockTimestamp
|
||||
blockNumber
|
||||
transactionHash
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
|
||||
const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
|
||||
|
||||
try {
|
||||
// Fetch data from subgraph
|
||||
const response = await fetch(getNetworkSubgraphURL(network), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(subgraphQuery),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.data?.lockAddeds) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Transform the subgraph data to match the event log decode format
|
||||
return data.data.lockAddeds
|
||||
.sort((a: any, b: any) => {
|
||||
return parseInt(b.blockNumber) - parseInt(a.blockNumber);
|
||||
})
|
||||
.map((lock: any) => {
|
||||
try {
|
||||
// Create a structure similar to the decoded event log
|
||||
return {
|
||||
eventName: "LockAdded",
|
||||
args: {
|
||||
buyer: lock.buyer,
|
||||
lockID: BigInt(lock.lockID),
|
||||
seller: lock.seller,
|
||||
token: lock.token,
|
||||
amount: BigInt(lock.amount),
|
||||
},
|
||||
// Add other necessary fields to match the original format
|
||||
blockNumber: BigInt(lock.blockNumber),
|
||||
transactionHash: lock.transactionHash,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error processing subgraph data", error);
|
||||
return null;
|
||||
}
|
||||
})
|
||||
.filter((decoded: any) => decoded !== null);
|
||||
} catch (error) {
|
||||
console.error("Error fetching from subgraph:", error);
|
||||
}
|
||||
return eventsReleasedLocks
|
||||
.sort((a, b) => {
|
||||
return b.blockNumber - a.blockNumber;
|
||||
})
|
||||
.map((lock) => {
|
||||
const IPix2Pix = new Interface(p2pix.abi);
|
||||
const decoded = IPix2Pix.parseLog({
|
||||
topics: lock.topics,
|
||||
data: lock.data,
|
||||
});
|
||||
return decoded;
|
||||
})
|
||||
.filter((lock) => lock !== null);
|
||||
};
|
||||
|
||||
const listLockTransactionBySellerAddress = async (sellerAddress: string) => {
|
||||
const user = useUser();
|
||||
const network = user.networkName.value;
|
||||
const listLockTransactionBySellerAddress = async (
|
||||
sellerAddress: string
|
||||
): Promise<LogDescription[]> => {
|
||||
const p2pContract = await getContract(true);
|
||||
console.log("Will get locks as seller", sellerAddress);
|
||||
|
||||
// Query subgraph for lock added transactions where seller matches
|
||||
const subgraphQuery = {
|
||||
query: `
|
||||
{
|
||||
lockAddeds(where: {seller: "${sellerAddress.toLowerCase()}"}) {
|
||||
buyer
|
||||
lockID
|
||||
seller
|
||||
token
|
||||
amount
|
||||
blockTimestamp
|
||||
blockNumber
|
||||
transactionHash
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
try {
|
||||
// Fetch data from subgraph
|
||||
const response = await fetch(getNetworkSubgraphURL(network), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(subgraphQuery),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.data?.lockAddeds) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Transform the subgraph data to match the event log decode format
|
||||
return data.data.lockAddeds
|
||||
.sort((a: any, b: any) => {
|
||||
return parseInt(b.blockNumber) - parseInt(a.blockNumber);
|
||||
})
|
||||
.map((lock: any) => {
|
||||
try {
|
||||
// Create a structure similar to the decoded event log
|
||||
return {
|
||||
eventName: "LockAdded",
|
||||
args: {
|
||||
buyer: lock.buyer,
|
||||
lockID: BigInt(lock.lockID),
|
||||
seller: lock.seller,
|
||||
token: lock.token,
|
||||
amount: BigInt(lock.amount),
|
||||
},
|
||||
// Add other necessary fields to match the original format
|
||||
blockNumber: BigInt(lock.blockNumber),
|
||||
transactionHash: lock.transactionHash,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error processing subgraph data", error);
|
||||
return null;
|
||||
}
|
||||
})
|
||||
.filter((decoded: any) => decoded !== null);
|
||||
} catch (error) {
|
||||
console.error("Error fetching from subgraph:", error);
|
||||
return [];
|
||||
}
|
||||
const filterAddedLocks = p2pContract.filters.LockAdded();
|
||||
const eventsReleasedLocks = await p2pContract.queryFilter(
|
||||
filterAddedLocks
|
||||
// 0,
|
||||
// "latest"
|
||||
);
|
||||
return eventsReleasedLocks
|
||||
.map((lock) => {
|
||||
const IPix2Pix = new Interface(p2pix.abi);
|
||||
const decoded = IPix2Pix.parseLog({
|
||||
topics: lock.topics,
|
||||
data: lock.data,
|
||||
});
|
||||
return decoded;
|
||||
})
|
||||
.filter((lock) => lock !== null)
|
||||
.filter(
|
||||
(lock) => lock.args.seller.toLowerCase() == sellerAddress.toLowerCase()
|
||||
);
|
||||
};
|
||||
|
||||
export const checkUnreleasedLock = async (
|
||||
walletAddress: string
|
||||
): Promise<UnreleasedLock | undefined> => {
|
||||
const { address, abi, client } = await getContract();
|
||||
const p2pContract = await getContract();
|
||||
const pixData: Pix = {
|
||||
pixKey: "",
|
||||
};
|
||||
|
||||
const addedLocks = await listLockTransactionByWalletAddress(walletAddress);
|
||||
|
||||
if (!addedLocks.length) return undefined;
|
||||
|
||||
const lockIds = addedLocks.map((lock: any) => lock.args.lockID);
|
||||
|
||||
const lockStatus = await client.readContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "getLocksStatus",
|
||||
args: [lockIds],
|
||||
});
|
||||
|
||||
const lockStatus = await p2pContract.getLocksStatus(
|
||||
addedLocks.map((lock) => lock.args?.lockID)
|
||||
);
|
||||
const unreleasedLockId = lockStatus[1].findIndex(
|
||||
(status: number) => status == 1
|
||||
(lockStatus: number) => lockStatus == 1
|
||||
);
|
||||
|
||||
if (unreleasedLockId !== -1) {
|
||||
const lockID = lockStatus[0][unreleasedLockId];
|
||||
|
||||
const lock = await client.readContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "mapLocks",
|
||||
args: [lockID],
|
||||
});
|
||||
if (unreleasedLockId != -1) {
|
||||
const _lockID = lockStatus[0][unreleasedLockId];
|
||||
const lock = await p2pContract.mapLocks(_lockID);
|
||||
|
||||
const pixTarget = lock.pixTarget;
|
||||
const amount = formatEther(lock.amount);
|
||||
const amount = formatEther(lock?.amount);
|
||||
pixData.pixKey = pixTarget;
|
||||
pixData.value = Number(amount);
|
||||
|
||||
return {
|
||||
lockID,
|
||||
lockID: _lockID,
|
||||
pix: pixData,
|
||||
};
|
||||
}
|
||||
@ -505,37 +274,27 @@ export const checkUnreleasedLock = async (
|
||||
export const getActiveLockAmount = async (
|
||||
walletAddress: string
|
||||
): Promise<number> => {
|
||||
const { address, abi, client } = await getContract(true);
|
||||
const p2pContract = await getContract(true);
|
||||
const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
|
||||
|
||||
if (!lockSeller.length) return 0;
|
||||
|
||||
const lockIds = lockSeller.map((lock: any) => lock.args.lockID);
|
||||
|
||||
const lockStatus = await client.readContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "getLocksStatus",
|
||||
args: [lockIds],
|
||||
});
|
||||
|
||||
const mapLocksRequests = lockStatus[0].map((id: bigint) =>
|
||||
client.readContract({
|
||||
address,
|
||||
abi,
|
||||
functionName: "mapLocks",
|
||||
args: [id],
|
||||
})
|
||||
const lockStatus = await p2pContract.getLocksStatus(
|
||||
lockSeller.map((lock) => lock.args?.lockID)
|
||||
);
|
||||
|
||||
const mapLocksResults = await client.multicall({
|
||||
contracts: mapLocksRequests as any,
|
||||
});
|
||||
const activeLockAmount = await lockStatus[1].reduce(
|
||||
async (sumValue: Promise<number>, currentStatus: number, index: number) => {
|
||||
const currValue = await sumValue;
|
||||
let valueToSum = 0;
|
||||
|
||||
return mapLocksResults.reduce((total: number, lock: any, index: number) => {
|
||||
if (lockStatus[1][index] === 1) {
|
||||
return total + Number(formatEther(lock.amount));
|
||||
}
|
||||
return total;
|
||||
}, 0);
|
||||
if (currentStatus == 1) {
|
||||
const lock = await p2pContract.mapLocks(lockStatus[0][index]);
|
||||
valueToSum = Number(formatEther(lock?.amount));
|
||||
}
|
||||
|
||||
return currValue + valueToSum;
|
||||
},
|
||||
Promise.resolve(0)
|
||||
);
|
||||
|
||||
return activeLockAmount;
|
||||
};
|
||||
|
||||
@ -8,7 +8,8 @@ import {
|
||||
import CustomButton from "@/components/CustomButton/CustomButton.vue";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import type { WalletTransaction } from "@/model/WalletTransaction";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import ListingComponent from "../ListingComponent/ListingComponent.vue";
|
||||
|
||||
@ -18,8 +19,8 @@ const props = defineProps<{
|
||||
isCurrentStep: boolean;
|
||||
}>();
|
||||
|
||||
const user = useUser();
|
||||
const { walletAddress } = useUser();
|
||||
const etherStore = useEtherStore();
|
||||
const { walletAddress } = storeToRefs(etherStore);
|
||||
|
||||
const lastWalletTransactions = ref<WalletTransaction[]>([]);
|
||||
const depositList = ref<ValidDeposit[]>([]);
|
||||
@ -28,7 +29,7 @@ const activeLockAmount = ref<number>(0);
|
||||
// methods
|
||||
|
||||
const getWalletTransactions = async () => {
|
||||
user.setLoadingWalletTransactions(true);
|
||||
etherStore.setLoadingWalletTransactions(true);
|
||||
if (walletAddress.value) {
|
||||
const walletDeposits = await listValidDepositTransactionsByWalletAddress(
|
||||
walletAddress.value
|
||||
@ -47,20 +48,20 @@ const getWalletTransactions = async () => {
|
||||
lastWalletTransactions.value = allUserTransactions;
|
||||
}
|
||||
}
|
||||
user.setLoadingWalletTransactions(false);
|
||||
etherStore.setLoadingWalletTransactions(false);
|
||||
};
|
||||
|
||||
const callWithdraw = async (amount: string) => {
|
||||
if (amount) {
|
||||
user.setLoadingWalletTransactions(true);
|
||||
const withdraw = await withdrawDeposit(amount, user.selectedToken.value);
|
||||
etherStore.setLoadingWalletTransactions(true);
|
||||
const withdraw = await withdrawDeposit(amount, etherStore.selectedToken);
|
||||
if (withdraw) {
|
||||
console.log("Saque realizado!");
|
||||
await getWalletTransactions();
|
||||
} else {
|
||||
console.log("Não foi possível realizar o saque!");
|
||||
}
|
||||
user.setLoadingWalletTransactions(false);
|
||||
etherStore.setLoadingWalletTransactions(false);
|
||||
}
|
||||
};
|
||||
|
||||
@ -92,14 +93,14 @@ onMounted(async () => {
|
||||
<div>
|
||||
<p>Tokens recebidos</p>
|
||||
<p class="text-2xl text-gray-900">
|
||||
{{ props.tokenAmount }} {{ user.selectedToken }}
|
||||
{{ props.tokenAmount }} {{ etherStore.selectedToken }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<p class="text-sm">
|
||||
<b>Não encontrou os tokens? </b><br />Clique no botão abaixo para
|
||||
<br />
|
||||
cadastrar o {{ user.selectedToken }} em sua carteira.
|
||||
cadastrar o {{ etherStore.selectedToken }} em sua carteira.
|
||||
</p>
|
||||
</div>
|
||||
<CustomButton :text="'Cadastrar token'" @buttonClicked="() => {}" />
|
||||
@ -149,6 +150,10 @@ p {
|
||||
@apply font-medium text-base text-gray-900;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { withdrawDeposit } from "@/blockchain/buyerMethods";
|
||||
import { NetworkEnum } from "@/model/NetworkEnum";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import type { WalletTransaction } from "@/model/WalletTransaction";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import SpinnerComponent from "../SpinnerComponent.vue";
|
||||
import { decimalCount } from "@/utils/decimalCount";
|
||||
@ -10,7 +12,7 @@ import { debounce } from "@/utils/debounce";
|
||||
import { getTokenByAddress } from "@/blockchain/addresses";
|
||||
import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
|
||||
|
||||
const user = useUser();
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
// props
|
||||
const props = defineProps<{
|
||||
@ -21,9 +23,8 @@ const props = defineProps<{
|
||||
|
||||
const emit = defineEmits(["depositWithdrawn"]);
|
||||
|
||||
const { loadingWalletTransactions } = user;
|
||||
|
||||
const remaining = ref<number>(0);
|
||||
const { loadingWalletTransactions } = storeToRefs(etherStore);
|
||||
const remaining = ref<number>(0.0);
|
||||
const itemsToShow = ref<WalletTransaction[]>([]);
|
||||
const withdrawAmount = ref<string>("");
|
||||
const withdrawButtonOpacity = ref<number>(0.6);
|
||||
@ -84,7 +85,8 @@ watch(withdrawAmount, (): void => {
|
||||
});
|
||||
|
||||
const getRemaining = (): number => {
|
||||
if (props.validDeposits.length > 0) {
|
||||
if (props.validDeposits instanceof Array) {
|
||||
// Here we are getting only the first element of the list because
|
||||
// in this release only the BRL token is being used.
|
||||
const deposit = props.validDeposits[0];
|
||||
remaining.value = deposit ? deposit.remaining : 0;
|
||||
@ -94,7 +96,7 @@ const getRemaining = (): number => {
|
||||
};
|
||||
|
||||
const getExplorer = (): string => {
|
||||
return user.networkName.value == NetworkEnum.sepolia
|
||||
return etherStore.networkName == NetworkEnum.sepolia
|
||||
? "Etherscan"
|
||||
: "Polygonscan";
|
||||
};
|
||||
@ -105,7 +107,7 @@ const showInitialItems = (): void => {
|
||||
|
||||
const openEtherscanUrl = (transactionHash: string): void => {
|
||||
const networkUrl =
|
||||
user.networkName.value == NetworkEnum.sepolia
|
||||
etherStore.networkName == NetworkEnum.sepolia
|
||||
? "sepolia.etherscan.io"
|
||||
: "mumbai.polygonscan.com";
|
||||
const url = `https://${networkUrl}/tx/${transactionHash}`;
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
import { describe, expect, beforeEach } from "vitest";
|
||||
import { mount } from "@vue/test-utils";
|
||||
import ListingComponent from "../ListingComponent.vue";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
|
||||
import { createPinia, setActivePinia } from "pinia";
|
||||
import { expect } from "vitest";
|
||||
import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
|
||||
import { MockWalletTransactions } from "@/model/mock/WalletTransactionMock";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
|
||||
describe("ListingComponent.vue", () => {
|
||||
beforeEach(() => {
|
||||
useUser().setLoadingWalletTransactions(false);
|
||||
setActivePinia(createPinia());
|
||||
useEtherStore().setLoadingWalletTransactions(false);
|
||||
});
|
||||
|
||||
test("Test Message when an empty array is received", () => {
|
||||
|
||||
@ -1,17 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import { pix } from "@/utils/QrCodePix";
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import CustomButton from "@/components/CustomButton/CustomButton.vue";
|
||||
import CustomModal from "@/components//CustomModal/CustomModal.vue";
|
||||
import api from "@/services/index";
|
||||
|
||||
// props and store references
|
||||
const props = defineProps({
|
||||
pixTarget: String,
|
||||
tokenValue: Number,
|
||||
});
|
||||
|
||||
const windowSize = ref<number>(window.innerWidth);
|
||||
const qrCode = ref<string>("");
|
||||
const qrCodePayload = ref<string>("");
|
||||
const isPixValid = ref<boolean>(false);
|
||||
const isCodeInputEmpty = ref<boolean>(true);
|
||||
const showWarnModal = ref<boolean>(true);
|
||||
const releaseSignature = ref<string>("");
|
||||
const e2eId = ref<string>("");
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["pixValidated"]);
|
||||
|
||||
const pixQrCode = pix({
|
||||
pixKey: props.pixTarget ?? "",
|
||||
value: props.tokenValue,
|
||||
});
|
||||
|
||||
pixQrCode.base64QrCode().then((code: string) => {
|
||||
qrCode.value = code;
|
||||
});
|
||||
|
||||
qrCodePayload.value = pixQrCode.payload();
|
||||
|
||||
const handleInputEvent = async (event: any): Promise<void> => {
|
||||
const { value } = event.target;
|
||||
e2eId.value = value;
|
||||
await validatePix();
|
||||
};
|
||||
|
||||
const validatePix = async (): Promise<void> => {
|
||||
if (e2eId.value == "") {
|
||||
isPixValid.value = false;
|
||||
isCodeInputEmpty.value = true;
|
||||
return;
|
||||
}
|
||||
const sellerPixKey = props.pixTarget;
|
||||
const transactionValue = props.tokenValue;
|
||||
|
||||
if (sellerPixKey && transactionValue) {
|
||||
const body_req = {
|
||||
e2e_id: e2eId.value,
|
||||
pix_key: sellerPixKey,
|
||||
pix_value: transactionValue,
|
||||
};
|
||||
|
||||
isCodeInputEmpty.value = false;
|
||||
|
||||
try {
|
||||
await api.post("validate_pix", body_req);
|
||||
isPixValid.value = true;
|
||||
} catch (error) {
|
||||
isPixValid.value = false;
|
||||
}
|
||||
} else {
|
||||
isCodeInputEmpty.value = false;
|
||||
isPixValid.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
@ -36,7 +94,7 @@ onUnmounted(() => {
|
||||
</span>
|
||||
<span class="text font-medium lg:text-md text-sm max-w-[28rem]">
|
||||
Após realizar o Pix no banco de sua preferência, clique no botão abaixo
|
||||
para liberação dos tokens.
|
||||
para gerar a assinatura para liberação dos tokens.
|
||||
</span>
|
||||
</div>
|
||||
<div class="main-container max-w-md text-black">
|
||||
@ -47,7 +105,7 @@ onUnmounted(() => {
|
||||
<span class="text-center font-bold">Código pix</span>
|
||||
<div class="break-words w-4/5">
|
||||
<span class="text-center text-xs">
|
||||
{{ qrCode }}
|
||||
{{ qrCodePayload }}
|
||||
</span>
|
||||
</div>
|
||||
<img
|
||||
@ -57,11 +115,17 @@ onUnmounted(() => {
|
||||
height="16"
|
||||
class="pt-2 lg:mb-5 cursor-pointer"
|
||||
/>
|
||||
<span class="text-xs text-start hidden sm:inline-block">
|
||||
<strong>ATENÇÃO!</strong> A transação só será processada após inserir
|
||||
o código de autenticação. Caso contrário não conseguiremos comprovar o
|
||||
seu depósito e não será possível transferir os tokens para sua
|
||||
carteira. Confira aqui como encontrar o código no comprovante.
|
||||
</span>
|
||||
</div>
|
||||
<CustomButton
|
||||
:is-disabled="isPixValid == false"
|
||||
:text="'Enviar para a rede'"
|
||||
@button-clicked="emit('pixValidated', releaseSignature)"
|
||||
@button-clicked="emit('pixValidated', e2eId)"
|
||||
/>
|
||||
</div>
|
||||
<CustomModal
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import SpinnerComponent from "@/components/SpinnerComponent.vue";
|
||||
import CustomButton from "@/components/CustomButton/CustomButton.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
|
||||
import { NetworkEnum } from "@/model/NetworkEnum";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import { decimalCount } from "@/utils/decimalCount";
|
||||
import SpinnerComponent from "./SpinnerComponent.vue";
|
||||
import { getTokenImage } from "@/utils/imagesPath";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
|
||||
import { TokenEnum } from "@/model/NetworkEnum";
|
||||
|
||||
// Store reference
|
||||
const user = useUser();
|
||||
const etherStore = useEtherStore();
|
||||
const selectTokenToggle = ref<boolean>(false);
|
||||
|
||||
const {
|
||||
@ -23,7 +24,7 @@ const {
|
||||
selectedToken,
|
||||
depositsValidList,
|
||||
loadingNetworkLiquidity,
|
||||
} = user;
|
||||
} = storeToRefs(etherStore);
|
||||
|
||||
// html references
|
||||
const tokenDropdownRef = ref<any>(null);
|
||||
@ -33,7 +34,6 @@ const tokenValue = ref<number>(0);
|
||||
const enableConfirmButton = ref<boolean>(false);
|
||||
const hasLiquidity = ref<boolean>(true);
|
||||
const validDecimals = ref<boolean>(true);
|
||||
const identification = ref<string>("");
|
||||
const selectedDeposits = ref<ValidDeposit[]>();
|
||||
|
||||
import ChevronDown from "@/assets/chevronDown.svg";
|
||||
@ -51,7 +51,7 @@ const connectAccount = async (): Promise<void> => {
|
||||
|
||||
const emitConfirmButton = async (): Promise<void> => {
|
||||
const deposit = selectedDeposits.value?.find(
|
||||
(d) => d.network === Number(networkName.value)
|
||||
(d) => d.network === networkName.value
|
||||
);
|
||||
if (!deposit) return;
|
||||
deposit.pixKey = await getPixKey(deposit.seller, deposit.token);
|
||||
@ -83,7 +83,7 @@ onClickOutside(tokenDropdownRef, () => {
|
||||
});
|
||||
|
||||
const handleSelectedToken = (token: TokenEnum): void => {
|
||||
user.setSelectedToken(token);
|
||||
etherStore.setSelectedToken(token);
|
||||
selectTokenToggle.value = false;
|
||||
};
|
||||
|
||||
@ -95,25 +95,18 @@ const verifyLiquidity = (): void => {
|
||||
walletAddress.value,
|
||||
depositsValidList.value
|
||||
);
|
||||
|
||||
selectedDeposits.value = selDeposits;
|
||||
hasLiquidity.value = !!selDeposits.find(
|
||||
(d) => d.network === Number(networkName.value)
|
||||
(d) => d.network === networkName.value
|
||||
);
|
||||
enableOrDisableConfirmButton();
|
||||
};
|
||||
|
||||
const enableOrDisableConfirmButton = (): void => {
|
||||
if (!selectedDeposits.value) {
|
||||
enableConfirmButton.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedDeposits.value.find((d) => d.network === networkName.value)) {
|
||||
enableConfirmButton.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
enableConfirmButton.value = true;
|
||||
enableConfirmButton.value =
|
||||
!!selectedDeposits.value &&
|
||||
!!selectedDeposits.value.find((d) => d.network === networkName.value);
|
||||
};
|
||||
|
||||
watch(networkName, (): void => {
|
||||
@ -124,16 +117,6 @@ watch(networkName, (): void => {
|
||||
watch(walletAddress, (): void => {
|
||||
verifyLiquidity();
|
||||
});
|
||||
|
||||
// Add form submission handler
|
||||
const handleSubmit = async (e: Event): Promise<void> => {
|
||||
e.preventDefault();
|
||||
if (walletAddress.value) {
|
||||
await emitConfirmButton();
|
||||
} else {
|
||||
await connectAccount();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -149,7 +132,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
|
||||
tokens após realizar o Pix</span
|
||||
>
|
||||
</div>
|
||||
<form class="main-container" @submit="handleSubmit">
|
||||
<div class="main-container">
|
||||
<div class="backdrop-blur -z-10 w-full h-full"></div>
|
||||
<div
|
||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
|
||||
@ -157,16 +140,14 @@ const handleSubmit = async (e: Event): Promise<void> => {
|
||||
<div class="flex justify-between sm:w-full items-center">
|
||||
<input
|
||||
type="number"
|
||||
name="tokenAmount"
|
||||
class="border-none outline-none text-lg text-gray-900"
|
||||
v-bind:class="{
|
||||
'font-semibold': tokenValue != undefined,
|
||||
'text-xl': tokenValue != undefined,
|
||||
}"
|
||||
@input="debounce(handleInputEvent, 500)($event)"
|
||||
placeholder="0"
|
||||
placeholder="0 "
|
||||
step=".01"
|
||||
required
|
||||
/>
|
||||
<div class="relative overflow-visible">
|
||||
<button
|
||||
@ -271,9 +252,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-center"
|
||||
v-else-if="
|
||||
!hasLiquidity && !loadingNetworkLiquidity && tokenValue > 0
|
||||
"
|
||||
v-else-if="!hasLiquidity && !loadingNetworkLiquidity"
|
||||
>
|
||||
<span class="text-red-500 font-normal text-sm"
|
||||
>Atualmente não há liquidez nas rede selecionada para sua
|
||||
@ -281,33 +260,18 @@ const handleSubmit = async (e: Event): Promise<void> => {
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="identification"
|
||||
maxlength="14"
|
||||
:pattern="'^\\d{11}$|^\\d{14}$'"
|
||||
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
|
||||
placeholder="Digite seu CPF ou CNPJ (somente números)"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<CustomButton
|
||||
v-if="walletAddress"
|
||||
type="submit"
|
||||
text="Confirmar Oferta"
|
||||
/>
|
||||
<CustomButton
|
||||
v-else
|
||||
text="Conectar carteira"
|
||||
v-if="!walletAddress"
|
||||
:text="'Conectar carteira'"
|
||||
@buttonClicked="connectAccount()"
|
||||
/>
|
||||
</form>
|
||||
<CustomButton
|
||||
v-if="walletAddress"
|
||||
:text="'Confirmar compra'"
|
||||
:is-disabled="!enableConfirmButton"
|
||||
@buttonClicked="emitConfirmButton()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -342,10 +306,4 @@ input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
@apply w-full py-3 px-6 rounded-lg font-semibold text-white bg-indigo-600
|
||||
hover:bg-indigo-700 disabled:bg-gray-400 disabled:cursor-not-allowed
|
||||
transition-colors duration-200;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,343 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import CustomButton from "@/components/CustomButton/CustomButton.vue";
|
||||
import { postProcessKey } from "@/utils/pixKeyFormat";
|
||||
import { TokenEnum } from "@/model/NetworkEnum";
|
||||
import { getTokenImage } from "@/utils/imagesPath";
|
||||
import { useOnboard } from "@web3-onboard/vue";
|
||||
import ChevronDown from "@/assets/chevron.svg";
|
||||
|
||||
// Import the bank list
|
||||
import bankList from "@/utils/files/isbpList.json";
|
||||
import type { Participant } from "@/utils/bbPay";
|
||||
|
||||
// Define Bank interface
|
||||
interface Bank {
|
||||
ISPB: string;
|
||||
longName: string;
|
||||
}
|
||||
|
||||
// html references
|
||||
const tokenDropdownRef = ref<any>(null);
|
||||
const formRef = ref<HTMLFormElement | null>(null);
|
||||
|
||||
// Reactive state
|
||||
const user = useUser();
|
||||
const { walletAddress, selectedToken } = user;
|
||||
|
||||
const offer = ref<string>("");
|
||||
const identification = ref<string>("");
|
||||
const account = ref<string>("");
|
||||
const branch = ref<string>("");
|
||||
const accountType = ref<string>("");
|
||||
const selectTokenToggle = ref<boolean>(false);
|
||||
const savingsVariation = ref<string>("");
|
||||
const errors = ref<{ [key: string]: string }>({});
|
||||
|
||||
// Bank selection
|
||||
const bankSearchQuery = ref<string>("");
|
||||
const showBankList = ref<boolean>(false);
|
||||
const selectedBank = ref<Bank | null>(null);
|
||||
|
||||
const filteredBanks = computed(() => {
|
||||
if (!bankSearchQuery.value) return [];
|
||||
return bankList
|
||||
.filter((bank) =>
|
||||
bank.longName.toLowerCase().includes(bankSearchQuery.value.toLowerCase())
|
||||
)
|
||||
.slice(0, 5);
|
||||
});
|
||||
|
||||
const handleBankSelect = (bank: Bank) => {
|
||||
selectedBank.value = bank;
|
||||
bankSearchQuery.value = bank.longName;
|
||||
showBankList.value = false;
|
||||
};
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["approveTokens"]);
|
||||
|
||||
// Methods
|
||||
const connectAccount = async (): Promise<void> => {
|
||||
const { connectWallet } = useOnboard();
|
||||
await connectWallet();
|
||||
};
|
||||
|
||||
const handleSubmit = (e: Event): void => {
|
||||
e.preventDefault();
|
||||
|
||||
const processedIdentification = postProcessKey(identification.value);
|
||||
|
||||
const data: Participant = {
|
||||
offer: offer.value,
|
||||
chainID: user.networkId.value,
|
||||
identification: processedIdentification,
|
||||
bankIspb: selectedBank.value?.ISPB,
|
||||
accountType: accountType.value,
|
||||
account: account.value,
|
||||
branch: branch.value,
|
||||
savingsVariation: savingsVariation.value || "",
|
||||
};
|
||||
|
||||
emit("approveTokens", data);
|
||||
};
|
||||
|
||||
// Token selection
|
||||
const openTokenSelection = (): void => {
|
||||
selectTokenToggle.value = true;
|
||||
};
|
||||
|
||||
const handleSelectedToken = (token: TokenEnum): void => {
|
||||
user.setSelectedToken(token);
|
||||
selectTokenToggle.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page w-full">
|
||||
<div class="text-container">
|
||||
<span
|
||||
class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
|
||||
>
|
||||
Venda cripto e receba em Pix
|
||||
</span>
|
||||
<span
|
||||
class="text font-medium sm:text-base text-xs sm:max-w-[28rem] max-w-[30rem] sm:tracking-normal tracking-wide"
|
||||
>
|
||||
Digite sua oferta, informe a chave Pix, selecione a rede, aprove o envio
|
||||
da transação e confirme sua oferta.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form ref="formRef" @submit="handleSubmit" class="main-container">
|
||||
<!-- Offer input -->
|
||||
<div
|
||||
class="flex justify-between items-center w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10 gap-4"
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
v-model="offer"
|
||||
class="border-none outline-none text-gray-900 sm:w-fit w-3/4 flex-grow"
|
||||
:class="{
|
||||
'!font-medium': offer !== undefined && offer !== '',
|
||||
'text-xl': offer !== undefined && offer !== '',
|
||||
}"
|
||||
min="0.01"
|
||||
max="999999999.99"
|
||||
pattern="\d+(\.\d{0,2})?"
|
||||
placeholder="Digite sua oferta (mínimo R$0,01)"
|
||||
step=".01"
|
||||
required
|
||||
/>
|
||||
<div class="relative overflow-visible">
|
||||
<button
|
||||
ref="tokenDropdownRef"
|
||||
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
|
||||
@click="openTokenSelection()"
|
||||
>
|
||||
<img
|
||||
alt="Token image"
|
||||
class="sm:w-fit w-4"
|
||||
:src="getTokenImage(selectedToken)"
|
||||
/>
|
||||
<span
|
||||
class="text-gray-900 sm:text-lg text-md font-medium"
|
||||
id="token"
|
||||
>
|
||||
{{ selectedToken }}
|
||||
</span>
|
||||
<ChevronDown
|
||||
class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
|
||||
:class="{ 'scale-y-[-1]': selectTokenToggle }"
|
||||
alt="Chevron Down"
|
||||
/>
|
||||
</button>
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-if="selectTokenToggle"
|
||||
class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||
>
|
||||
<div
|
||||
v-for="token in TokenEnum"
|
||||
:key="token"
|
||||
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
||||
@click="handleSelectedToken(token)"
|
||||
>
|
||||
<img
|
||||
:alt="token + ' logo'"
|
||||
width="20"
|
||||
height="20"
|
||||
:src="getTokenImage(token)"
|
||||
/>
|
||||
<span
|
||||
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
||||
>
|
||||
{{ token }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CPF or CNPJ input -->
|
||||
<div
|
||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="identification"
|
||||
maxlength="14"
|
||||
:pattern="'^\\d{11}$|^\\d{14}$'"
|
||||
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
|
||||
:class="{ 'text-xl font-medium': identification }"
|
||||
placeholder="Digite seu CPF ou CNPJ (somente números)"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<!-- Bank selection -->
|
||||
<div
|
||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
|
||||
>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
v-model="bankSearchQuery"
|
||||
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
|
||||
:class="{ 'text-xl font-medium': bankSearchQuery }"
|
||||
placeholder="Buscar banco"
|
||||
@focus="showBankList = true"
|
||||
required
|
||||
/>
|
||||
<div
|
||||
v-if="showBankList && filteredBanks.length > 0"
|
||||
class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-50 max-h-60 overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
v-for="bank in filteredBanks"
|
||||
:key="bank.ISPB"
|
||||
class="px-4 py-2 hover:bg-gray-100 cursor-pointer transition-colors"
|
||||
@click="handleBankSelect(bank)"
|
||||
>
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{{ bank.longName }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">ISPB: {{ bank.ISPB }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="errors.bank" class="text-red-500 text-sm mt-2">{{
|
||||
errors.bank
|
||||
}}</span>
|
||||
</div>
|
||||
<!-- Account and Branch inputs -->
|
||||
<div
|
||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
v-model="account"
|
||||
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
|
||||
:class="{ 'text-xl font-medium': account }"
|
||||
placeholder="Número da conta"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
v-model="branch"
|
||||
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
|
||||
:class="{ 'text-xl font-medium': branch }"
|
||||
placeholder="Agência"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Account Type Selection -->
|
||||
<div
|
||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1">
|
||||
<select
|
||||
v-model="accountType"
|
||||
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
|
||||
required
|
||||
>
|
||||
<option value="" disabled selected>Tipo de conta</option>
|
||||
<option value="1">Conta Corrente</option>
|
||||
<option value="2">Conta Poupança</option>
|
||||
<option value="3">Conta Salário</option>
|
||||
<option value="4">Conta Pré-Paga</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Savings Account Variation -->
|
||||
<Transition name="resize">
|
||||
<input
|
||||
v-if="accountType === '2'"
|
||||
type="text"
|
||||
v-model="savingsVariation"
|
||||
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
|
||||
:class="{ 'text-xl font-medium': savingsVariation }"
|
||||
placeholder="Variação da poupança"
|
||||
required
|
||||
/>
|
||||
</Transition>
|
||||
<!-- Action buttons -->
|
||||
<CustomButton v-if="walletAddress" type="submit" text="Aprovar tokens" />
|
||||
<CustomButton
|
||||
v-else
|
||||
text="Conectar carteira"
|
||||
@buttonClicked="connectAccount()"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-divide {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
}
|
||||
.bottom-position {
|
||||
top: -20px;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.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-white text-center;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input {
|
||||
@apply sm:text-lg text-sm;
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import CustomButton from "@/components/CustomButton/CustomButton.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import { decimalCount } from "@/utils/decimalCount";
|
||||
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { getTokenImage } from "@/utils/imagesPath";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useOnboard } from "@web3-onboard/vue";
|
||||
|
||||
// Store
|
||||
const user = useUser();
|
||||
const { walletAddress } = user;
|
||||
const etherStore = useEtherStore();
|
||||
const { walletAddress } = storeToRefs(etherStore);
|
||||
|
||||
// Reactive state
|
||||
const tokenValue = ref<number>(0);
|
||||
@ -74,10 +76,10 @@ const handleInputEvent = (event: any): void => {
|
||||
<img
|
||||
alt="Token image"
|
||||
class="w-fit"
|
||||
:src="getTokenImage(user.selectedToken.value)"
|
||||
:src="getTokenImage(etherStore.selectedToken)"
|
||||
/>
|
||||
<span class="text-gray-900 text-lg w-fit" id="token">{{
|
||||
user.selectedToken
|
||||
etherStore.selectedToken
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -151,6 +153,10 @@ const handleInputEvent = (event: any): void => {
|
||||
@apply text-white text-center;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
|
||||
@ -6,7 +6,7 @@ const emit = defineEmits(["sendNetwork"]);
|
||||
|
||||
// props and store references
|
||||
const props = defineProps({
|
||||
sellerId: String,
|
||||
pixKey: String,
|
||||
offer: Number,
|
||||
selectedToken: String,
|
||||
});
|
||||
@ -26,7 +26,7 @@ const props = defineProps({
|
||||
os tokens de volta.</span
|
||||
>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<div class="main-container sm:w-1/3">
|
||||
<div
|
||||
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
||||
>
|
||||
@ -39,7 +39,7 @@ const props = defineProps({
|
||||
<div class="my-3">
|
||||
<p>Chave Pix</p>
|
||||
<p class="text-xl text-gray-900 break-words">
|
||||
{{ props.sellerId }}
|
||||
{{ props.pixKey }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
@ -79,6 +79,10 @@ p {
|
||||
@apply font-medium text-base;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
|
||||
263
src/components/SellerSteps/WantSellComponent.vue
Normal file
263
src/components/SellerSteps/WantSellComponent.vue
Normal file
@ -0,0 +1,263 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import CustomButton from "../CustomButton/CustomButton.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import { decimalCount } from "@/utils/decimalCount";
|
||||
import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { connectProvider } from "@/blockchain/provider";
|
||||
import { TokenEnum } from "@/model/NetworkEnum";
|
||||
import { getTokenImage } from "@/utils/imagesPath";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
import { useOnboard } from "@web3-onboard/vue";
|
||||
|
||||
import ChevronDown from "@/assets/chevron.svg";
|
||||
|
||||
// html references
|
||||
const tokenDropdownRef = ref<any>(null);
|
||||
|
||||
// Reactive state
|
||||
const etherStore = useEtherStore();
|
||||
const { walletAddress, selectedToken } = storeToRefs(etherStore);
|
||||
|
||||
const offer = ref<string>("");
|
||||
const pixKey = ref<string>("");
|
||||
const selectTokenToggle = ref<boolean>(false);
|
||||
|
||||
const enableSelectButton = ref<boolean>(false);
|
||||
const hasLiquidity = ref<boolean>(true);
|
||||
const validDecimals = ref<boolean>(true);
|
||||
const validPixFormat = ref<boolean>(true);
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["approveTokens"]);
|
||||
|
||||
// Blockchain methods
|
||||
const connectAccount = async (): Promise<void> => {
|
||||
const { connectWallet } = useOnboard();
|
||||
await connectWallet();
|
||||
};
|
||||
|
||||
// Debounce methods
|
||||
const handleInputEvent = (event: any): void => {
|
||||
const { value } = event.target;
|
||||
|
||||
offer.value = value;
|
||||
|
||||
if (decimalCount(offer.value) > 2) {
|
||||
validDecimals.value = false;
|
||||
enableSelectButton.value = false;
|
||||
return;
|
||||
}
|
||||
validDecimals.value = true;
|
||||
};
|
||||
|
||||
const handlePixKeyInputEvent = (event: any): void => {
|
||||
const { value } = event.target;
|
||||
|
||||
pixKey.value = value;
|
||||
|
||||
if (pixFormatValidation(pixKey.value)) {
|
||||
validPixFormat.value = true;
|
||||
enableSelectButton.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
enableSelectButton.value = false;
|
||||
validPixFormat.value = false;
|
||||
};
|
||||
|
||||
const openTokenSelection = (): void => {
|
||||
selectTokenToggle.value = true;
|
||||
};
|
||||
|
||||
onClickOutside(tokenDropdownRef, () => {
|
||||
selectTokenToggle.value = false;
|
||||
});
|
||||
|
||||
const handleSelectedToken = (token: TokenEnum): void => {
|
||||
etherStore.setSelectedToken(token);
|
||||
selectTokenToggle.value = false;
|
||||
};
|
||||
|
||||
const handleSellClick = async (
|
||||
offer: string,
|
||||
pixKey: string
|
||||
): Promise<void> => {
|
||||
const postProcessedPixKey = postProcessKey(pixKey);
|
||||
emit("approveTokens", { offer, postProcessedPixKey });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page w-full">
|
||||
<div class="text-container">
|
||||
<span
|
||||
class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
|
||||
>Venda cripto e receba em Pix</span
|
||||
>
|
||||
<span
|
||||
class="text font-medium sm:text-base text-xs sm:max-w-[28rem] max-w-[30rem] sm:tracking-normal tracking-wide"
|
||||
>Digite sua oferta, informe a chave Pix, selecione a rede, aprove o
|
||||
envio da transação e confirme sua oferta.</span
|
||||
>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<div class="backdrop-blur -z-10 w-full h-full"></div>
|
||||
<div
|
||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
|
||||
>
|
||||
<div class="flex justify-between items-center">
|
||||
<input
|
||||
type="number"
|
||||
v-model="offer"
|
||||
class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
|
||||
:class="{
|
||||
'!font-medium': offer !== undefined && offer !== '',
|
||||
'text-xl': offer !== undefined && offer !== '',
|
||||
}"
|
||||
@input="debounce(handleInputEvent, 500)($event)"
|
||||
placeholder="Digite sua oferta"
|
||||
step=".01"
|
||||
/>
|
||||
<div class="relative overflow-visible">
|
||||
<button
|
||||
ref="tokenDropdownRef"
|
||||
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
|
||||
@click="openTokenSelection()"
|
||||
>
|
||||
<img
|
||||
alt="Token image"
|
||||
class="sm:w-fit w-4"
|
||||
:src="getTokenImage(selectedToken)"
|
||||
/>
|
||||
<span
|
||||
class="text-gray-900 sm:text-lg text-md font-medium"
|
||||
id="token"
|
||||
>
|
||||
{{ selectedToken }}
|
||||
</span>
|
||||
<ChevronDown
|
||||
class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
|
||||
:class="{ 'scale-y-[-1]': selectTokenToggle }"
|
||||
alt="Chevron Down"
|
||||
/>
|
||||
</button>
|
||||
<transition name="dropdown">
|
||||
<div
|
||||
v-if="selectTokenToggle"
|
||||
class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||
>
|
||||
<div
|
||||
v-for="token in TokenEnum"
|
||||
:key="token"
|
||||
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
||||
@click="handleSelectedToken(token)"
|
||||
>
|
||||
<img
|
||||
:alt="token + ' logo'"
|
||||
width="20"
|
||||
height="20"
|
||||
:src="getTokenImage(token)"
|
||||
/>
|
||||
<span
|
||||
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
||||
>
|
||||
{{ token }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex pt-2 justify-center" v-if="!validDecimals">
|
||||
<span class="text-red-500 font-normal text-sm"
|
||||
>Por favor utilize no máximo 2 casas decimais</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex pt-2 justify-center" v-else-if="!hasLiquidity">
|
||||
<span class="text-red-500 font-normal text-sm"
|
||||
>Atualmente não há liquidez nas redes para sua demanda</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-8 rounded-lg border-y-10"
|
||||
>
|
||||
<div class="flex justify-between w-full items-center">
|
||||
<input
|
||||
@input="debounce(handlePixKeyInputEvent, 500)($event)"
|
||||
type="text"
|
||||
v-model="pixKey"
|
||||
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
|
||||
:class="{
|
||||
'!font-medium': pixKey !== undefined && pixKey !== '',
|
||||
'text-xl': pixKey !== undefined && pixKey !== '',
|
||||
}"
|
||||
placeholder="Digite a chave Pix"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex pt-2 justify-center" v-if="!validPixFormat">
|
||||
<span class="text-red-500 font-normal text-sm"
|
||||
>Por favor utilize telefone, CPF ou CNPJ</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<CustomButton
|
||||
v-if="walletAddress"
|
||||
:text="'Aprovar tokens'"
|
||||
:isDisabled="!validDecimals || !validPixFormat"
|
||||
@buttonClicked="handleSellClick(offer, pixKey)"
|
||||
/>
|
||||
<CustomButton
|
||||
v-if="!walletAddress"
|
||||
:text="'Conectar carteira'"
|
||||
@buttonClicked="connectAccount()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-divide {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
}
|
||||
.bottom-position {
|
||||
top: -20px;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.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-white text-center;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input {
|
||||
@apply sm:text-lg text-sm;
|
||||
}
|
||||
</style>
|
||||
@ -1,82 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import { useOnboard } from "@web3-onboard/vue";
|
||||
import { Networks } from "../model/Networks";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
|
||||
const { connectedWallet } = useOnboard();
|
||||
const user = useUser();
|
||||
const { networkId, networkName } = user;
|
||||
|
||||
const isWrongNetwork = ref(false);
|
||||
const targetNetworkName = computed(() => Networks[networkName.value].chainName);
|
||||
|
||||
const checkNetwork = () => {
|
||||
if (connectedWallet.value) {
|
||||
const chainId = connectedWallet.value.chains[0].id;
|
||||
isWrongNetwork.value = Number(chainId) !== networkId.value;
|
||||
} else {
|
||||
isWrongNetwork.value = false; // No wallet connected yet
|
||||
}
|
||||
};
|
||||
|
||||
const switchNetwork = async () => {
|
||||
try {
|
||||
if (connectedWallet.value && connectedWallet.value.provider) {
|
||||
await connectedWallet.value.provider.request({
|
||||
method: "wallet_switchEthereumChain",
|
||||
params: [
|
||||
{
|
||||
chainId: Networks[networkName.value].chainId,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to switch network:", error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(checkNetwork);
|
||||
watch(connectedWallet, checkNetwork);
|
||||
watch(networkId, checkNetwork, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<transition name="slide-up" appear>
|
||||
<div
|
||||
v-if="isWrongNetwork"
|
||||
class="fixed bottom-0 left-0 right-0 bg-red-500 text-white p-4 flex justify-between items-center z-50"
|
||||
>
|
||||
<div>
|
||||
<span class="font-bold">Wrong network!</span>
|
||||
<span> Please switch to {{ targetNetworkName }}.</span>
|
||||
</div>
|
||||
<button
|
||||
@click="switchNetwork"
|
||||
class="bg-white text-red-500 px-4 py-2 rounded font-bold hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Switch Network
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-up-enter-to,
|
||||
.slide-up-leave-from {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { ref, watch } from "vue";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
import { NetworkEnum } from "@/model/NetworkEnum";
|
||||
import { getNetworkImage } from "@/utils/imagesPath";
|
||||
@ -14,9 +15,10 @@ import LinkedinIcon from "@/assets/linkedinIcon.svg";
|
||||
import GithubIcon from "@/assets/githubIcon.svg";
|
||||
import { connectProvider } from "@/blockchain/provider";
|
||||
|
||||
// Use the new composable
|
||||
const user = useUser();
|
||||
const { walletAddress, sellerView, networkId } = user;
|
||||
// Store reference
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const { walletAddress, sellerView } = storeToRefs(etherStore);
|
||||
|
||||
const menuOpenToggle = ref<boolean>(false);
|
||||
const infoMenuOpenToggle = ref<boolean>(false);
|
||||
@ -36,24 +38,11 @@ const connnectWallet = async (): Promise<void> => {
|
||||
watch(connectedWallet, async (newVal: any) => {
|
||||
connectProvider(newVal.provider);
|
||||
const addresses = await newVal.provider.request({ method: "eth_accounts" });
|
||||
user.setWalletAddress(addresses.shift());
|
||||
etherStore.setWalletAddress(addresses.shift());
|
||||
});
|
||||
|
||||
watch(connectedChain, (newVal: any) => {
|
||||
// Check if connected chain is valid, otherwise default to Sepolia (NetworkEnum.SEPOLIA)
|
||||
if (
|
||||
!newVal ||
|
||||
!Object.values(Networks).some(
|
||||
(network) => Number(network.chainId) === Number(newVal.id)
|
||||
)
|
||||
) {
|
||||
console.log(
|
||||
"Invalid or unsupported network detected, defaulting to Sepolia"
|
||||
);
|
||||
user.setNetworkId(user.networkId.value);
|
||||
return;
|
||||
}
|
||||
user.setNetworkId(newVal?.id);
|
||||
etherStore.setNetworkId(newVal?.id);
|
||||
});
|
||||
|
||||
const formatWalletAddress = (): string => {
|
||||
@ -67,7 +56,7 @@ const formatWalletAddress = (): string => {
|
||||
};
|
||||
|
||||
const disconnectUser = async (): Promise<void> => {
|
||||
user.setWalletAddress("");
|
||||
etherStore.setWalletAddress("");
|
||||
await disconnectWallet({ label: connectedWallet.value?.label || "" });
|
||||
closeMenu();
|
||||
};
|
||||
@ -83,7 +72,7 @@ const networkChange = async (network: NetworkEnum): Promise<void> => {
|
||||
chainId: Networks[network].chainId,
|
||||
wallet: connectedWallet.value?.label || "",
|
||||
});
|
||||
user.setNetworkId(network);
|
||||
etherStore.setNetworkId(network);
|
||||
} catch (error) {
|
||||
console.log("Error changing network", error);
|
||||
}
|
||||
@ -256,7 +245,7 @@ onClickOutside(infoMenuRef, () => {
|
||||
>
|
||||
<img
|
||||
alt="Choosed network image"
|
||||
:src="getNetworkImage(NetworkEnum[user.networkName.value])"
|
||||
:src="getNetworkImage(NetworkEnum[etherStore.networkName])"
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
@ -264,11 +253,7 @@ onClickOutside(infoMenuRef, () => {
|
||||
class="default-text hidden sm:inline-block text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out whitespace-nowrap text-ellipsis overflow-hidden"
|
||||
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
|
||||
>
|
||||
{{
|
||||
Networks[user.networkName.value]
|
||||
? Networks[user.networkName.value].chainName
|
||||
: "Invalid Chain"
|
||||
}}
|
||||
{{ Networks[etherStore.networkName].chainName }}
|
||||
</span>
|
||||
<div
|
||||
class="transition-all duration-500 ease-in-out mt-1"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { describe, it, expect, beforeEach } from "vitest";
|
||||
import { mount } from "@vue/test-utils";
|
||||
/* eslint-disable no-undef */
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import TopBar from "../TopBar.vue";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { useEtherStore } from "../../../store/ether";
|
||||
|
||||
import { createPinia, setActivePinia } from "pinia";
|
||||
|
||||
@ -11,24 +11,24 @@ describe("TopBar.vue", () => {
|
||||
});
|
||||
|
||||
it("should render connect wallet button", () => {
|
||||
const wrapper = mount(TopBar);
|
||||
const wrapper = shallowMount(TopBar);
|
||||
expect(wrapper.html()).toContain("Conectar carteira");
|
||||
});
|
||||
|
||||
it("should render button to change to seller view when in buyer screen", () => {
|
||||
const wrapper = mount(TopBar);
|
||||
const wrapper = shallowMount(TopBar);
|
||||
expect(wrapper.html()).toContain("Quero vender");
|
||||
});
|
||||
|
||||
it("should render button to change to seller view when in buyer screen", () => {
|
||||
const user = useUser();
|
||||
user.setSellerView(true);
|
||||
const wrapper = mount(TopBar);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setSellerView(true);
|
||||
const wrapper = shallowMount(TopBar);
|
||||
expect(wrapper.html()).toContain("Quero comprar");
|
||||
});
|
||||
|
||||
it("should render the P2Pix logo correctly", () => {
|
||||
const wrapper = mount(TopBar);
|
||||
const wrapper = shallowMount(TopBar);
|
||||
const img = wrapper.findAll(".logo");
|
||||
expect(img.length).toBe(2);
|
||||
});
|
||||
|
||||
@ -1,105 +0,0 @@
|
||||
import { ref } from "vue";
|
||||
import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import type { Participant } from "../utils/bbPay";
|
||||
import { NetworkById } from "@/model/Networks";
|
||||
|
||||
const walletAddress = ref("");
|
||||
const balance = ref("");
|
||||
const networkId = ref(11155111);
|
||||
const networkName = ref(NetworkEnum.sepolia);
|
||||
const selectedToken = ref(TokenEnum.BRZ);
|
||||
const loadingLock = ref(false);
|
||||
const sellerView = ref(false);
|
||||
const depositsValidList = ref<ValidDeposit[]>([]);
|
||||
const loadingWalletTransactions = ref(false);
|
||||
const loadingNetworkLiquidity = ref(false);
|
||||
const seller = ref<Participant>({} as Participant);
|
||||
const sellerId = ref("");
|
||||
|
||||
export function useUser() {
|
||||
// Actions become regular functions
|
||||
const setWalletAddress = (address: string) => {
|
||||
walletAddress.value = address;
|
||||
};
|
||||
|
||||
const setBalance = (newBalance: string) => {
|
||||
balance.value = newBalance;
|
||||
};
|
||||
|
||||
const setSelectedToken = (token: TokenEnum) => {
|
||||
selectedToken.value = token;
|
||||
};
|
||||
|
||||
const setNetworkId = (network: string | number) => {
|
||||
networkName.value = NetworkById(network) || NetworkEnum.sepolia;
|
||||
networkId.value = Number(network);
|
||||
};
|
||||
|
||||
const setLoadingLock = (isLoading: boolean) => {
|
||||
loadingLock.value = isLoading;
|
||||
};
|
||||
|
||||
const setSellerView = (view: boolean) => {
|
||||
sellerView.value = view;
|
||||
};
|
||||
|
||||
const setDepositsValidList = (deposits: ValidDeposit[]) => {
|
||||
depositsValidList.value = deposits;
|
||||
};
|
||||
|
||||
const setLoadingWalletTransactions = (isLoading: boolean) => {
|
||||
loadingWalletTransactions.value = isLoading;
|
||||
};
|
||||
|
||||
const setLoadingNetworkLiquidity = (isLoading: boolean) => {
|
||||
loadingNetworkLiquidity.value = isLoading;
|
||||
};
|
||||
|
||||
const setSeller = (newSeller: Participant) => {
|
||||
seller.value = newSeller;
|
||||
};
|
||||
|
||||
const setSellerId = (id: string) => {
|
||||
sellerId.value = id;
|
||||
};
|
||||
|
||||
// Getters become computed or regular functions
|
||||
const getValidDepositByWalletAddress = (address: string) => {
|
||||
return depositsValidList.value
|
||||
.filter((deposit) => deposit.seller == address)
|
||||
.sort((a, b) => b.blockNumber - a.blockNumber);
|
||||
};
|
||||
|
||||
return {
|
||||
// State
|
||||
walletAddress,
|
||||
balance,
|
||||
networkId,
|
||||
networkName,
|
||||
selectedToken,
|
||||
loadingLock,
|
||||
sellerView,
|
||||
depositsValidList,
|
||||
loadingWalletTransactions,
|
||||
loadingNetworkLiquidity,
|
||||
seller,
|
||||
sellerId,
|
||||
|
||||
// Actions
|
||||
setWalletAddress,
|
||||
setBalance,
|
||||
setSelectedToken,
|
||||
setNetworkId,
|
||||
setLoadingLock,
|
||||
setSellerView,
|
||||
setDepositsValidList,
|
||||
setLoadingWalletTransactions,
|
||||
setLoadingNetworkLiquidity,
|
||||
setSeller,
|
||||
setSellerId,
|
||||
|
||||
// Getters
|
||||
getValidDepositByWalletAddress,
|
||||
};
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
import "./assets/main.css";
|
||||
import "./assets/transitions.css";
|
||||
@ -8,5 +9,6 @@ import "./assets/transitions.css";
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(router);
|
||||
app.use(createPinia());
|
||||
|
||||
app.mount("#app");
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
export interface Bank {
|
||||
COMPE: string;
|
||||
ISPB: string;
|
||||
longName: string;
|
||||
}
|
||||
@ -3,15 +3,6 @@ export enum NetworkEnum {
|
||||
rootstock = 31,
|
||||
}
|
||||
|
||||
export const getNetworkSubgraphURL = (network: NetworkEnum | number) => {
|
||||
const networkMap: Record<number, string> = {
|
||||
[NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL || "",
|
||||
[NetworkEnum.rootstock]: import.meta.env.VITE_RSK_SUBGRAPH_URL || "",
|
||||
};
|
||||
|
||||
return networkMap[typeof network === "number" ? network : network] || "";
|
||||
};
|
||||
|
||||
export enum TokenEnum {
|
||||
BRZ = "BRZ",
|
||||
// BRX = 'BRX'
|
||||
|
||||
@ -1,20 +1,5 @@
|
||||
import { NetworkEnum } from "@/model/NetworkEnum";
|
||||
|
||||
export const NetworkById = (
|
||||
chainId: string | number
|
||||
): NetworkEnum | undefined => {
|
||||
const normalizedChainId =
|
||||
typeof chainId === "number" ? chainId : Number(chainId);
|
||||
|
||||
for (const [network, details] of Object.entries(Networks)) {
|
||||
if (Number(details.chainId) === normalizedChainId) {
|
||||
return network as unknown as NetworkEnum;
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const Networks = {
|
||||
[NetworkEnum.sepolia]: {
|
||||
chainId: "0xAA36A7",
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import type { Event } from "ethers";
|
||||
import { vi } from "vitest";
|
||||
|
||||
export const MockEvents = [
|
||||
export const MockEvents: Event[] = [
|
||||
{
|
||||
blockNumber: 1,
|
||||
blockHash: "0x8",
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import type { ValidDeposit } from "../ValidDeposit";
|
||||
import { NetworkEnum } from "@/model/NetworkEnum";
|
||||
|
||||
export const MockValidDeposits: ValidDeposit[] = [
|
||||
{
|
||||
@ -8,7 +7,6 @@ export const MockValidDeposits: ValidDeposit[] = [
|
||||
remaining: 70,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: "123456789",
|
||||
network: NetworkEnum.sepolia,
|
||||
},
|
||||
{
|
||||
blockNumber: 2,
|
||||
@ -16,7 +14,6 @@ export const MockValidDeposits: ValidDeposit[] = [
|
||||
remaining: 200,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: "123456789",
|
||||
network: NetworkEnum.sepolia,
|
||||
},
|
||||
{
|
||||
blockNumber: 3,
|
||||
@ -24,7 +21,6 @@ export const MockValidDeposits: ValidDeposit[] = [
|
||||
remaining: 1250,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: "123456789",
|
||||
network: NetworkEnum.sepolia,
|
||||
},
|
||||
{
|
||||
blockNumber: 4,
|
||||
@ -32,7 +28,6 @@ export const MockValidDeposits: ValidDeposit[] = [
|
||||
remaining: 4000,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: "123456789",
|
||||
network: NetworkEnum.sepolia,
|
||||
},
|
||||
{
|
||||
blockNumber: 5,
|
||||
@ -40,6 +35,5 @@ export const MockValidDeposits: ValidDeposit[] = [
|
||||
remaining: 2000,
|
||||
seller: "mockedSellerAddress",
|
||||
pixKey: "123456789",
|
||||
network: NetworkEnum.sepolia,
|
||||
},
|
||||
];
|
||||
|
||||
14
src/services/index.ts
Normal file
14
src/services/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
||||
import axios from "axios";
|
||||
|
||||
const defaultConfig = {
|
||||
"Content-Type": "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
};
|
||||
|
||||
const api = axios.create({
|
||||
...defaultConfig,
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
});
|
||||
|
||||
export default api;
|
||||
56
src/store/ether.ts
Normal file
56
src/store/ether.ts
Normal file
@ -0,0 +1,56 @@
|
||||
import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useEtherStore = defineStore("ether", {
|
||||
state: () => ({
|
||||
walletAddress: "",
|
||||
balance: "",
|
||||
networkName: NetworkEnum.sepolia,
|
||||
selectedToken: TokenEnum.BRZ,
|
||||
loadingLock: false,
|
||||
sellerView: false,
|
||||
depositsValidList: [] as ValidDeposit[],
|
||||
loadingWalletTransactions: false,
|
||||
loadingNetworkLiquidity: false,
|
||||
}),
|
||||
actions: {
|
||||
setWalletAddress(walletAddress: string) {
|
||||
this.walletAddress = walletAddress;
|
||||
},
|
||||
setBalance(balance: string) {
|
||||
this.balance = balance;
|
||||
},
|
||||
setSelectedToken(token: TokenEnum) {
|
||||
this.selectedToken = token;
|
||||
},
|
||||
setNetworkId(networkName: NetworkEnum) {
|
||||
this.networkName = Number(networkName);
|
||||
},
|
||||
setLoadingLock(isLoadingLock: boolean) {
|
||||
this.loadingLock = isLoadingLock;
|
||||
},
|
||||
setSellerView(sellerView: boolean) {
|
||||
this.sellerView = sellerView;
|
||||
},
|
||||
setDepositsValidList(depositsValidList: ValidDeposit[]) {
|
||||
this.depositsValidList = depositsValidList;
|
||||
},
|
||||
setLoadingWalletTransactions(isLoadingWalletTransactions: boolean) {
|
||||
this.loadingWalletTransactions = isLoadingWalletTransactions;
|
||||
},
|
||||
setLoadingNetworkLiquidity(isLoadingNetworkLiquidity: boolean) {
|
||||
this.loadingNetworkLiquidity = isLoadingNetworkLiquidity;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
getValidDepositByWalletAddress: (state) => {
|
||||
return (walletAddress: string) =>
|
||||
state.depositsValidList
|
||||
.filter((deposit) => deposit.seller == walletAddress)
|
||||
.sort((a, b) => {
|
||||
return b.blockNumber - a.blockNumber;
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -1,77 +0,0 @@
|
||||
import { off } from "process";
|
||||
|
||||
export interface Participant {
|
||||
offer: string;
|
||||
chainID: number;
|
||||
identification: string;
|
||||
bankIspb?: string;
|
||||
accountType: string;
|
||||
account: string;
|
||||
branch: string;
|
||||
savingsVariation?: string;
|
||||
}
|
||||
|
||||
export interface ParticipantWithID extends Participant {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export interface Offer {
|
||||
amount: number;
|
||||
lockId: string;
|
||||
sellerId: string;
|
||||
}
|
||||
|
||||
// Specs for BB Pay Sandbox
|
||||
// https://apoio.developers.bb.com.br/sandbox/spec/665797498bb48200130fc32c
|
||||
|
||||
export const createParticipant = async (participant: Participant) => {
|
||||
console.log("Creating participant", participant);
|
||||
const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/register`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
chainID: participant.chainID,
|
||||
tipoDocumento: 1,
|
||||
numeroDocumento: participant.identification,
|
||||
numeroConta: participant.account,
|
||||
numeroAgencia: participant.branch,
|
||||
tipoConta: participant.accountType,
|
||||
codigoIspb: participant.bankIspb,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
return { ...participant, id: data.id } as ParticipantWithID;
|
||||
};
|
||||
|
||||
export const createSolicitation = async (offer: Offer) => {
|
||||
const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/request`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
amount: offer.amount,
|
||||
pixTarget: offer.sellerId,
|
||||
}),
|
||||
});
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const getSolicitation = async (id: string) => {
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_APP_API_URL}/release/${id}`
|
||||
);
|
||||
|
||||
const obj: any = response.json();
|
||||
|
||||
return {
|
||||
id: obj.numeroSolicitacao,
|
||||
lockId: obj.codigoConciliacaoSolicitacao,
|
||||
amount: obj.valorSolicitacao,
|
||||
qrcode: obj.pix.textoQrCode,
|
||||
status: obj.valorSomatorioPagamentosEfetivados >= obj.valorSolicitacao,
|
||||
signature: obj.assinatura,
|
||||
};
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@ -7,19 +7,10 @@ export const imagesPath = import.meta.glob<string>("@/assets/*.{png,svg}", {
|
||||
});
|
||||
|
||||
export const getNetworkImage = (networkName: string): string => {
|
||||
try {
|
||||
const path = Object.keys(imagesPath).find((key) =>
|
||||
key.endsWith(`${networkName.toLowerCase()}.svg`)
|
||||
);
|
||||
return path ? imagesPath[path] : "";
|
||||
} catch (error) {
|
||||
console.error("Error fetching network image");
|
||||
const path = Object.keys(imagesPath).find((key) =>
|
||||
key.endsWith(`invalidIcon.svg`)
|
||||
);
|
||||
return path ? imagesPath[path] : "";
|
||||
return "";
|
||||
}
|
||||
const path = Object.keys(imagesPath).find((key) =>
|
||||
key.endsWith(`${networkName.toLowerCase()}.svg`)
|
||||
);
|
||||
return path ? imagesPath[path] : "";
|
||||
};
|
||||
|
||||
export const getTokenImage = (tokenName: TokenEnum): string => {
|
||||
|
||||
@ -3,15 +3,15 @@ import SearchComponent from "@/components/SearchComponent.vue";
|
||||
import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
|
||||
import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import QrCodeComponent from "@/components/QrCodeComponent.vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { addLock, releaseLock } from "@/blockchain/buyerMethods";
|
||||
import { updateWalletStatus, checkUnreleasedLock } from "@/blockchain/wallet";
|
||||
import { getNetworksLiquidity } from "@/blockchain/events";
|
||||
import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import { getUnreleasedLockById } from "@/blockchain/events";
|
||||
import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
|
||||
import { getSolicitation } from "@/utils/bbPay";
|
||||
|
||||
enum Step {
|
||||
Search,
|
||||
@ -19,11 +19,11 @@ enum Step {
|
||||
List,
|
||||
}
|
||||
|
||||
const user = useUser();
|
||||
user.setSellerView(false);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setSellerView(false);
|
||||
|
||||
// States
|
||||
const { loadingLock, walletAddress, networkName } = user;
|
||||
const { loadingLock, walletAddress, networkName } = storeToRefs(etherStore);
|
||||
const flowStep = ref<Step>(Step.Search);
|
||||
const pixTarget = ref<string>();
|
||||
const tokenAmount = ref<number>();
|
||||
@ -37,12 +37,14 @@ const confirmBuyClick = async (
|
||||
selectedDeposit: ValidDeposit,
|
||||
tokenValue: number
|
||||
) => {
|
||||
// finish buy screen
|
||||
pixTarget.value = selectedDeposit.pixKey;
|
||||
tokenAmount.value = tokenValue;
|
||||
|
||||
// Makes lock with deposit ID and the Amount
|
||||
if (selectedDeposit) {
|
||||
flowStep.value = Step.Buy;
|
||||
user.setLoadingLock(true);
|
||||
etherStore.setLoadingLock(true);
|
||||
|
||||
await addLock(selectedDeposit.seller, selectedDeposit.token, tokenValue)
|
||||
.then((_lockID) => {
|
||||
@ -53,19 +55,22 @@ const confirmBuyClick = async (
|
||||
flowStep.value = Step.Search;
|
||||
});
|
||||
|
||||
user.setLoadingLock(false);
|
||||
etherStore.setLoadingLock(false);
|
||||
}
|
||||
};
|
||||
|
||||
const releaseTransaction = async (lockId: string) => {
|
||||
const releaseTransaction = async (e2eId: string) => {
|
||||
flowStep.value = Step.List;
|
||||
showBuyAlert.value = true;
|
||||
loadingRelease.value = true;
|
||||
|
||||
const solicitation = await getSolicitation(lockId);
|
||||
|
||||
if (solicitation.status) {
|
||||
const release = await releaseLock(solicitation);
|
||||
if (lockID.value && tokenAmount.value && pixTarget.value) {
|
||||
const release = await releaseLock(
|
||||
pixTarget.value,
|
||||
tokenAmount.value,
|
||||
e2eId,
|
||||
lockID.value
|
||||
);
|
||||
await release.wait();
|
||||
|
||||
await updateWalletStatus();
|
||||
@ -74,6 +79,7 @@ const releaseTransaction = async (lockId: string) => {
|
||||
};
|
||||
|
||||
const checkForUnreleasedLocks = async (): Promise<void> => {
|
||||
console.log("Checking for unreleased locks");
|
||||
const walletLocks = await checkUnreleasedLock(walletAddress.value);
|
||||
if (walletLocks) {
|
||||
lockID.value = walletLocks.lockID;
|
||||
@ -134,8 +140,8 @@ onMounted(async () => {
|
||||
/>
|
||||
<div v-if="flowStep == Step.Buy">
|
||||
<QrCodeComponent
|
||||
:sellerId="String(pixTarget)"
|
||||
:amount="tokenAmount"
|
||||
:pixTarget="String(pixTarget)"
|
||||
:tokenValue="tokenAmount"
|
||||
@pix-validated="releaseTransaction"
|
||||
v-if="!loadingLock"
|
||||
/>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { storeToRefs } from "pinia";
|
||||
import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
|
||||
import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
|
||||
import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import {
|
||||
listValidDepositTransactionsByWalletAddress,
|
||||
listAllTransactionByWalletAddress,
|
||||
@ -15,8 +16,8 @@ import type { WalletTransaction } from "@/model/WalletTransaction";
|
||||
|
||||
import router from "@/router/index";
|
||||
|
||||
const user = useUser();
|
||||
const { walletAddress, networkName, selectedToken } = user;
|
||||
const etherStore = useEtherStore();
|
||||
const { walletAddress, networkName, selectedToken } = storeToRefs(etherStore);
|
||||
const loadingWithdraw = ref<boolean>(false);
|
||||
const showAlert = ref<boolean>(false);
|
||||
|
||||
@ -46,7 +47,7 @@ const callWithdraw = async (amount: string) => {
|
||||
};
|
||||
|
||||
const getWalletTransactions = async () => {
|
||||
user.setLoadingWalletTransactions(true);
|
||||
etherStore.setLoadingWalletTransactions(true);
|
||||
if (walletAddress.value) {
|
||||
console.log("Will fetch all required data...");
|
||||
const walletDeposits = await listValidDepositTransactionsByWalletAddress(
|
||||
@ -69,7 +70,7 @@ const getWalletTransactions = async () => {
|
||||
transactionsList.value = allUserTransactions;
|
||||
}
|
||||
}
|
||||
user.setLoadingWalletTransactions(false);
|
||||
etherStore.setLoadingWalletTransactions(false);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import SellerComponent from "@/components/SellerSteps/SellerComponent.vue";
|
||||
import WantSellComponent from "@/components/SellerSteps/WantSellComponent.vue";
|
||||
import SendNetwork from "@/components/SellerSteps/SendNetwork.vue";
|
||||
import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";
|
||||
|
||||
import { ref } from "vue";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
|
||||
import type { Participant } from "@/utils/bbPay";
|
||||
|
||||
enum Step {
|
||||
Search,
|
||||
@ -15,18 +14,26 @@ enum Step {
|
||||
Network,
|
||||
}
|
||||
|
||||
const user = useUser();
|
||||
user.setSellerView(true);
|
||||
const etherStore = useEtherStore();
|
||||
etherStore.setSellerView(true);
|
||||
|
||||
const flowStep = ref<Step>(Step.Sell);
|
||||
const loading = ref<boolean>(false);
|
||||
|
||||
const offerValue = ref<string>("");
|
||||
const pixKeyBuyer = ref<string>("");
|
||||
const showAlert = ref<boolean>(false);
|
||||
|
||||
// Verificar tipagem
|
||||
const approveOffer = async (args: Participant) => {
|
||||
const approveOffer = async (args: {
|
||||
offer: string;
|
||||
postProcessedPixKey: string;
|
||||
}) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
await approveTokens(args);
|
||||
offerValue.value = args.offer;
|
||||
pixKeyBuyer.value = args.postProcessedPixKey;
|
||||
await approveTokens(args.offer);
|
||||
flowStep.value = Step.Network;
|
||||
loading.value = false;
|
||||
} catch (err) {
|
||||
@ -39,8 +46,8 @@ const approveOffer = async (args: Participant) => {
|
||||
const sendNetwork = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
if (user.seller.value) {
|
||||
await addDeposit();
|
||||
if (offerValue.value && pixKeyBuyer.value) {
|
||||
await addDeposit(String(offerValue.value), pixKeyBuyer.value);
|
||||
flowStep.value = Step.Sell;
|
||||
loading.value = false;
|
||||
showAlert.value = true;
|
||||
@ -56,7 +63,7 @@ const sendNetwork = async () => {
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="flowStep == Step.Sell">
|
||||
<SellerComponent v-if="!loading" @approve-tokens="approveOffer" />
|
||||
<WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
|
||||
<LoadingComponent
|
||||
v-if="loading"
|
||||
:message="'A transação está sendo enviada para a rede.'"
|
||||
@ -69,9 +76,9 @@ const sendNetwork = async () => {
|
||||
/>
|
||||
<div v-if="flowStep == Step.Network">
|
||||
<SendNetwork
|
||||
:sellerId="user.sellerId.value"
|
||||
:offer="Number(user.seller.value.offer)"
|
||||
:selected-token="user.selectedToken.value"
|
||||
:pixKey="pixKeyBuyer"
|
||||
:offer="Number(offerValue)"
|
||||
:selected-token="etherStore.selectedToken"
|
||||
v-if="!loading"
|
||||
@send-network="sendNetwork"
|
||||
/>
|
||||
|
||||
@ -3,8 +3,7 @@
|
||||
"include": [
|
||||
"env.d.ts",
|
||||
"src/**/*",
|
||||
"src/**/*.vue",
|
||||
"scripts"
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
@ -25,9 +24,6 @@
|
||||
"esnext",
|
||||
"dom"
|
||||
],
|
||||
"preserveValueImports": false,
|
||||
"importsNotUsedAsValues": "remove",
|
||||
"verbatimModuleSyntax": false
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
@ -38,4 +34,4 @@
|
||||
"node_modules",
|
||||
"./node_modules"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,17 +10,6 @@ export default defineConfig({
|
||||
build: {
|
||||
target: "esnext",
|
||||
},
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
target: "esnext",
|
||||
define: {
|
||||
global: "globalThis",
|
||||
},
|
||||
supported: {
|
||||
bigint: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
test: {
|
||||
globals: true,
|
||||
environment: "jsdom",
|
||||
@ -36,9 +25,6 @@ export default defineConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
"viem/errors": fileURLToPath(
|
||||
new URL("./node_modules/viem/errors", import.meta.url)
|
||||
),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user