From f15361599f0c07da92058ea6e8720c52afee8bdc Mon Sep 17 00:00:00 2001 From: Filipe Soccol Date: Wed, 7 Aug 2024 14:09:23 -0300 Subject: [PATCH] Added different types of tokens. --- src/assets/brx.svg | 1 + src/blockchain/__tests__/addresses.spec.ts | 8 +-- src/blockchain/addresses.ts | 52 ++++++++++++--- src/blockchain/buyerMethods.ts | 5 +- src/blockchain/events.ts | 18 ++--- src/blockchain/sellerMethods.ts | 7 +- src/blockchain/wallet.ts | 9 +-- .../BuyConfirmedComponent.vue | 8 ++- .../ListingComponent/ListingComponent.vue | 9 ++- src/components/SearchComponent.vue | 65 +++++++++++++++---- .../SellerSteps/SellerSearchComponent.vue | 18 ++++- src/components/SellerSteps/SendNetwork.vue | 5 +- .../SellerSteps/WantSellComponent.vue | 64 +++++++++++++++--- src/components/TopBar/TopBar.vue | 14 +--- src/model/NetworkEnum.ts | 5 ++ src/store/ether.ts | 9 ++- src/utils/imagesPath.ts | 17 +++++ src/views/ManageBidsView.vue | 5 +- src/views/SellerView.vue | 1 + 19 files changed, 244 insertions(+), 76 deletions(-) create mode 100644 src/assets/brx.svg create mode 100644 src/utils/imagesPath.ts diff --git a/src/assets/brx.svg b/src/assets/brx.svg new file mode 100644 index 0000000..b599951 --- /dev/null +++ b/src/assets/brx.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/blockchain/__tests__/addresses.spec.ts b/src/blockchain/__tests__/addresses.spec.ts index ed768c0..71505a2 100644 --- a/src/blockchain/__tests__/addresses.spec.ts +++ b/src/blockchain/__tests__/addresses.spec.ts @@ -9,7 +9,7 @@ import { } from "../addresses"; import { setActivePinia, createPinia } from "pinia"; -import { NetworkEnum } from "@/model/NetworkEnum"; +import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum"; import { useEtherStore } from "@/store/ether"; describe("addresses.ts types", () => { @@ -32,7 +32,7 @@ describe("addresses.ts functions", () => { it("getTokenAddress Ethereum", () => { const etherStore = useEtherStore(); etherStore.setNetworkName(NetworkEnum.ethereum); - expect(getTokenAddress()).toBe( + expect(getTokenAddress(TokenEnum.BRZ)).toBe( "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00" ); }); @@ -40,13 +40,13 @@ describe("addresses.ts functions", () => { it("getTokenAddress Polygon", () => { const etherStore = useEtherStore(); etherStore.setNetworkName(NetworkEnum.polygon); - expect(getTokenAddress()).toBe( + expect(getTokenAddress(TokenEnum.BRZ)).toBe( "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29" ); }); it("getTokenAddress Default", () => { - expect(getTokenAddress()).toBe( + expect(getTokenAddress(TokenEnum.BRZ)).toBe( "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00" ); }); diff --git a/src/blockchain/addresses.ts b/src/blockchain/addresses.ts index e736dac..df6068c 100644 --- a/src/blockchain/addresses.ts +++ b/src/blockchain/addresses.ts @@ -1,16 +1,53 @@ import { useEtherStore } from "@/store/ether"; -import { NetworkEnum } from "@/model/NetworkEnum"; +import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum"; -const getTokenAddress = (network?: NetworkEnum): string => { +const ethereumTokens: { [key in TokenEnum]: string } = { + BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289", + BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289", +} + +const polygonTokens: { [key in TokenEnum]: string } = { + BRZ: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29", + BRX: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29", +} + +const rootstockTokens: { [key in TokenEnum]: string } = { + BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e", + BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e", +} + +export const getTokenByAddress = (address: string) => { + for (const token of Object.keys(ethereumTokens)) { + if (address === ethereumTokens[token as TokenEnum]) { + return token as TokenEnum; + } + } + + for (const token of Object.keys(polygonTokens)) { + if (address === ethereumTokens[token as TokenEnum]) { + return token as TokenEnum; + } + } + + for (const token of Object.keys(rootstockTokens)) { + if (address === ethereumTokens[token as TokenEnum]) { + return token as TokenEnum; + } + } + + return null; +} + +const getTokenAddress = (token: TokenEnum, network?: NetworkEnum): string => { const etherStore = useEtherStore(); - const possibleTokenAddresses: { [key: string]: string } = { - Ethereum: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289", - Polygon: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29", - Rootstock: "0xfE841c74250e57640390f46d914C88d22C51e82e", + const possibleTokenAddresses: { [key: string]: { [key in TokenEnum]: string } } = { + Ethereum: ethereumTokens, + Polygon: polygonTokens, + Rootstock: rootstockTokens, }; - return possibleTokenAddresses[network ? network : etherStore.networkName]; + return possibleTokenAddresses[network ? network : etherStore.networkName][token]; }; const getP2PixAddress = (network?: NetworkEnum): string => { @@ -27,7 +64,6 @@ const getP2PixAddress = (network?: NetworkEnum): string => { const getProviderUrl = (): string => { const etherStore = useEtherStore(); - const possibleProvidersUrls: { [key: string]: string } = { Ethereum: import.meta.env.VITE_SEPOLIA_API_URL, Polygon: import.meta.env.VITE_MUMBAI_API_URL, diff --git a/src/blockchain/buyerMethods.ts b/src/blockchain/buyerMethods.ts index d44b38b..7d6bd09 100644 --- a/src/blockchain/buyerMethods.ts +++ b/src/blockchain/buyerMethods.ts @@ -7,6 +7,7 @@ import p2pix from "@/utils/smart_contract_files/P2PIX.json"; import { BigNumber, ethers } from "ethers"; import { parseEther } from "ethers/lib/utils"; +import type { TokenEnum } from "@/model/NetworkEnum"; const addLock = async ( seller: string, @@ -84,11 +85,11 @@ const cancelDeposit = async (depositId: BigNumber): Promise => { return cancel; }; -const withdrawDeposit = async (amount: string): Promise => { +const withdrawDeposit = async (amount: string, token: TokenEnum): Promise => { const contract = getContract(); const withdraw = await contract.withdraw( - getTokenAddress(), + getTokenAddress(token), parseEther(String(amount)), [] ); diff --git a/src/blockchain/events.ts b/src/blockchain/events.ts index c42c131..7eaa81d 100644 --- a/src/blockchain/events.ts +++ b/src/blockchain/events.ts @@ -12,7 +12,6 @@ import type { Pix } from "@/model/Pix"; const getNetworksLiquidity = async (): Promise => { const etherStore = useEtherStore(); - const sepoliaProvider = new ethers.providers.JsonRpcProvider( import.meta.env.VITE_SEPOLIA_API_URL, 11155111 @@ -36,7 +35,6 @@ const getNetworksLiquidity = async (): Promise => { p2pix.abi, mumbaiProvider ); - const p2pContractRootstock = new ethers.Contract( getP2PixAddress(NetworkEnum.rootstock), p2pix.abi, @@ -46,22 +44,20 @@ const getNetworksLiquidity = async (): Promise => { etherStore.setLoadingNetworkLiquidity(true); const depositListSepolia = await getValidDeposits( - getTokenAddress(NetworkEnum.ethereum), + getTokenAddress(etherStore.selectedToken, NetworkEnum.ethereum), p2pContractSepolia - ); - - const depositListMumbai = await getValidDeposits( - getTokenAddress(NetworkEnum.polygon), - p2pContractMumbai ); - + // const depositListMumbai = await getValidDeposits( + // getTokenAddress(etherStore.selectedToken, NetworkEnum.polygon), + // p2pContractMumbai + // ); const depositListRootstock = await getValidDeposits( - getTokenAddress(NetworkEnum.rootstock), + getTokenAddress(etherStore.selectedToken, NetworkEnum.rootstock), p2pContractRootstock ); etherStore.setDepositsValidListSepolia(depositListSepolia); - etherStore.setDepositsValidListMumbai(depositListMumbai); + // etherStore.setDepositsValidListMumbai(depositListMumbai); etherStore.setDepositsValidListRootstock(depositListRootstock); etherStore.setLoadingNetworkLiquidity(false); }; diff --git a/src/blockchain/sellerMethods.ts b/src/blockchain/sellerMethods.ts index 1fd1c0e..aeea3c5 100644 --- a/src/blockchain/sellerMethods.ts +++ b/src/blockchain/sellerMethods.ts @@ -5,13 +5,15 @@ import { parseEther } from "ethers/lib/utils"; import { ethers } from "ethers"; import mockToken from "../utils/smart_contract_files/MockToken.json"; +import { useEtherStore } from "@/store/ether"; const approveTokens = async (tokenQty: string): Promise => { const provider = getProvider(); const signer = provider.getSigner(); + const etherStore = useEtherStore(); const tokenContract = new ethers.Contract( - getTokenAddress(), + getTokenAddress(etherStore.selectedToken), mockToken.abi, signer ); @@ -27,9 +29,10 @@ const approveTokens = async (tokenQty: string): Promise => { const addDeposit = async (tokenQty: string, pixKey: string): Promise => { const p2pContract = getContract(); + const etherStore = useEtherStore(); const deposit = await p2pContract.deposit( - getTokenAddress(), + getTokenAddress(etherStore.selectedToken), parseEther(tokenQty), pixKey, true, diff --git a/src/blockchain/wallet.ts b/src/blockchain/wallet.ts index 7a9fdb4..0842525 100644 --- a/src/blockchain/wallet.ts +++ b/src/blockchain/wallet.ts @@ -21,14 +21,14 @@ const updateWalletStatus = async (): Promise => { const signer = provider.getSigner(); const { chainId } = await provider.getNetwork(); - if(!isPossibleNetwork(chainId.toString())){ - window.alert("Invalid chain!:"+chainId); + if (!isPossibleNetwork(chainId.toString())) { + window.alert("Invalid chain!:" + chainId); return; } etherStore.setNetworkName(possibleChains[chainId]); const mockTokenContract = new ethers.Contract( - getTokenAddress(), + getTokenAddress(etherStore.selectedToken), mockToken.abi, signer ); @@ -43,7 +43,8 @@ const updateWalletStatus = async (): Promise => { const listValidDepositTransactionsByWalletAddress = async ( walletAddress: string ): Promise => { - const walletDeposits = await getValidDeposits(getTokenAddress()); + const etherStore = useEtherStore(); + const walletDeposits = await getValidDeposits(getTokenAddress(etherStore.selectedToken)); if (walletDeposits) { return walletDeposits diff --git a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue index 92ec39c..0294d5b 100644 --- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue +++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue @@ -54,7 +54,7 @@ const getWalletTransactions = async () => { const callWithdraw = async (amount: string) => { if (amount) { etherStore.setLoadingWalletTransactions(true); - const withdraw = await withdrawDeposit(amount); + const withdraw = await withdrawDeposit(amount, etherStore.selectedToken); if (withdraw) { console.log("Saque realizado!"); await getWalletTransactions(); @@ -92,13 +92,15 @@ onMounted(async () => { >

Tokens recebidos

-

{{ props.tokenAmount }} BRZ

+

+ {{ props.tokenAmount }} {{ etherStore.selectedToken }} +

Não encontrou os tokens?
Clique no botão abaixo para
- cadastrar o BRZ em sua carteira. + cadastrar o {{ etherStore.selectedToken }} em sua carteira.

diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue index 327c2eb..3ca10d4 100644 --- a/src/components/ListingComponent/ListingComponent.vue +++ b/src/components/ListingComponent/ListingComponent.vue @@ -9,6 +9,7 @@ import { ref, watch, onMounted } from "vue"; import SpinnerComponent from "../SpinnerComponent.vue"; import { decimalCount } from "@/utils/decimalCount"; import { debounce } from "@/utils/debounce"; +import { getTokenByAddress } from "@/blockchain/addresses"; import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue"; const etherStore = useEtherStore(); @@ -175,11 +176,13 @@ showInitialItems(); Saldo disponível

- {{ getRemaining() }} BRZ + {{ getRemaining() }} {{ etherStore.selectedToken }}

{{ - `com ${activeLockAmount.toFixed(2)} BRZ em lock` + `com ${activeLockAmount.toFixed(2)} ${ + etherStore.selectedToken + } em lock` }}
{{ item.amount }} - BRZ + {{ getTokenByAddress(item.token) }}
diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue index 1cc7358..456ca2d 100644 --- a/src/components/SearchComponent.vue +++ b/src/components/SearchComponent.vue @@ -10,13 +10,18 @@ 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 { TokenEnum } from "@/model/NetworkEnum"; // Store reference const etherStore = useEtherStore(); +const selectTokenToggle = ref(false); const { walletAddress, networkName, + selectedToken, depositsValidListSepolia, depositsValidListMumbai, loadingNetworkLiquidity, @@ -66,6 +71,15 @@ const handleInputEvent = (event: any): void => { verifyLiquidity(); }; +const openTokenSelection = (): void => { + selectTokenToggle.value = true; +}; + +const handleSelectedToken = (token: TokenEnum): void => { + etherStore.setSelectedToken(token); + selectTokenToggle.value = false; +}; + // Verify if there is a valid deposit to buy const verifyLiquidity = (): void => { enableConfirmButton.value = false; @@ -150,20 +164,49 @@ watch(walletAddress, (): void => { placeholder="0 " step=".01" /> -
- Token image - BRZ + +
+
+
+ + + {{ token }} + +
+
+
+
+
+
-
(0); const enableSelectButton = ref(false); @@ -58,8 +65,14 @@ const handleInputEvent = (event: any): void => {
- Token image - BRZ + Token image + {{ + etherStore.selectedToken + }}
@@ -94,6 +107,7 @@ const handleInputEvent = (event: any): void => { >
+ @@ -31,7 +32,9 @@ const props = defineProps({ >

Tokens ofertados

-

{{ props.offer }} BRZ

+

+ {{ props.offer }} {{ props.selectedToken }} +

Chave Pix

diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue index 2f61843..744f543 100644 --- a/src/components/SellerSteps/WantSellComponent.vue +++ b/src/components/SellerSteps/WantSellComponent.vue @@ -7,13 +7,16 @@ 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"; // Reactive state const etherStore = useEtherStore(); -const { walletAddress } = storeToRefs(etherStore); +const { walletAddress, selectedToken } = storeToRefs(etherStore); const offer = ref(""); const pixKey = ref(""); +const selectTokenToggle = ref(false); const enableSelectButton = ref(false); const hasLiquidity = ref(true); @@ -52,6 +55,15 @@ const handlePixKeyInputEvent = (event: any): void => { validPixFormat.value = false; }; +const openTokenSelection = (): void => { + selectTokenToggle.value = true; +}; + +const handleSelectedToken = (token: TokenEnum): void => { + etherStore.setSelectedToken(token); + selectTokenToggle.value = false; +}; + const handleButtonClick = async ( offer: string, pixKey: string @@ -94,15 +106,47 @@ const handleButtonClick = async ( placeholder="Digite sua oferta" step=".01" /> -
- Token image - BRZ +
+ +
+
+
+ + + {{ token }} + +
+
+
+
+
+
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 8170760..ac79893 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -5,9 +5,7 @@ import { ref } from "vue"; import { onClickOutside } from "@vueuse/core"; import { NetworkEnum } from "@/model/NetworkEnum"; import { connectProvider, requestNetworkChange } from "@/blockchain/provider"; - -const images = import.meta.glob('@/assets/*.{png,svg}', { eager:true, query:'?url', import: 'default'} ); - +import { getNetworkImage } from "@/utils/imagesPath"; // Store reference const etherStore = useEtherStore(); @@ -54,11 +52,6 @@ const networkChange = async (network: NetworkEnum): Promise => { if (change) etherStore.setNetworkName(network); }; -const getNetworkImage = (networkName: NetworkEnum): string => { - const path = Object.keys(images).find(key => key.endsWith(`${networkName.toLowerCase()}.svg`)); - return path ? images[path] : ''; -}; - onClickOutside(walletAddressRef, () => { menuHoverToggle.value = false; menuOpenToggle.value = false; @@ -273,7 +266,7 @@ onClickOutside(infoMenuRef, () => { >
-
{ width="20" height="20" :src="getNetworkImage(network)" - - /> + /> {{ network }} diff --git a/src/model/NetworkEnum.ts b/src/model/NetworkEnum.ts index 349c248..b1b88d8 100644 --- a/src/model/NetworkEnum.ts +++ b/src/model/NetworkEnum.ts @@ -3,3 +3,8 @@ export enum NetworkEnum { polygon = "Polygon", rootstock = "Rootstock", } + +export enum TokenEnum { + BRZ = 'BRZ', + BRX = 'BRX' +} \ No newline at end of file diff --git a/src/store/ether.ts b/src/store/ether.ts index b38562c..de98fa1 100644 --- a/src/store/ether.ts +++ b/src/store/ether.ts @@ -1,12 +1,16 @@ -import { NetworkEnum } from "@/model/NetworkEnum"; + +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.ethereum, + selectedToken: TokenEnum.BRZ, loadingLock: false, sellerView: false, // Depósitos válidos para compra SEPOLIA @@ -25,6 +29,9 @@ export const useEtherStore = defineStore("ether", { setBalance(balance: string) { this.balance = balance; }, + setSelectedToken(token: TokenEnum) { + this.selectedToken = token; + }, setNetworkName(networkName: NetworkEnum) { this.networkName = networkName; }, diff --git a/src/utils/imagesPath.ts b/src/utils/imagesPath.ts new file mode 100644 index 0000000..607c574 --- /dev/null +++ b/src/utils/imagesPath.ts @@ -0,0 +1,17 @@ +import type { NetworkEnum, TokenEnum } from "@/model/NetworkEnum"; + +export const imagesPath = import.meta.glob('@/assets/*.{png,svg}', { eager: true, query: '?url', import: 'default' }); + +export const getNetworkImage = (networkName: NetworkEnum): string => { + const path = Object.keys(imagesPath).find((key) => + key.endsWith(`${networkName.toLowerCase()}.svg`) + ); + return path ? imagesPath[path] : ""; +}; + +export const getTokenImage = (tokenName: TokenEnum): string => { + const path = Object.keys(imagesPath).find((key) => + key.endsWith(`${tokenName.toLowerCase()}.svg`) + ); + return path ? imagesPath[path] : ""; +}; \ No newline at end of file diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue index 73253fd..8ee3444 100644 --- a/src/views/ManageBidsView.vue +++ b/src/views/ManageBidsView.vue @@ -17,8 +17,7 @@ import type { WalletTransaction } from "@/model/WalletTransaction"; import router from "@/router/index"; const etherStore = useEtherStore(); - -const { walletAddress, networkName } = storeToRefs(etherStore); +const { walletAddress, networkName, selectedToken } = storeToRefs(etherStore); const loadingWithdraw = ref(false); const showAlert = ref(false); @@ -31,7 +30,7 @@ const callWithdraw = async (amount: string) => { loadingWithdraw.value = true; let withdraw; try { - withdraw = await withdrawDeposit(amount); + withdraw = await withdrawDeposit(amount, selectedToken.value); } catch { loadingWithdraw.value = false; } diff --git a/src/views/SellerView.vue b/src/views/SellerView.vue index 76c6242..f4381d6 100644 --- a/src/views/SellerView.vue +++ b/src/views/SellerView.vue @@ -77,6 +77,7 @@ const sendNetwork = async () => {