add Rootstock tests

src/assets/brx.svg

@@ -0,0 +1 @@
+<svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" fill="#efb914" fill-rule="nonzero" r="16"/><path d="M21.002 9.855A7.947 7.947 0 0124 15.278l-2.847-.708a5.357 5.357 0 00-3.86-3.667c-2.866-.713-5.76.991-6.465 3.806s1.05 5.675 3.917 6.388a5.373 5.373 0 005.134-1.43l2.847.707a7.974 7.974 0 01-5.2 3.385L16.716 27l-2.596-.645.644-2.575a8.28 8.28 0 01-1.298-.323l-.643 2.575-2.596-.646.81-3.241c-2.378-1.875-3.575-4.996-2.804-8.081s3.297-5.281 6.28-5.823L15.323 5l2.596.645-.644 2.575a8.28 8.28 0 011.298.323l.643-2.575 2.596.646z" fill="#fff"/></g></svg>

src/assets/linkedinIcon.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"/></svg>

src/assets/main.css

@@ -9,8 +9,7 @@
   padding: 2rem;
   height: fit-content;
   min-height: 100vh;
-  background-image: url( './bg.svg' );
+  background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%);
-  background-size: cover;
   font-weight: normal;
 }
 

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,22 @@ 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 Rootstock", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.rootstock);
+    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
+      "0xfE841c74250e57640390f46d914C88d22C51e82e"
+    );
+  });
+
+
   it("getTokenAddress Default", () => {
-    expect(getTokenAddress()).toBe(
+    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
     );
   });
@@ -67,6 +76,14 @@ describe("addresses.ts functions", () => {
     );
   });
 
+  it("getP2PixAddress Rootstock", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.rootstock);
+    expect(getP2PixAddress()).toBe(
+      "0x98ba35eb14b38D6Aa709338283af3e922476dE34"
+    );
+  });
+
   it("getP2PixAddress Default", () => {
     expect(getP2PixAddress()).toBe(
       "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
@@ -85,6 +102,12 @@ describe("addresses.ts functions", () => {
     expect(getProviderUrl()).toBe(import.meta.env.VITE_MUMBAI_API_URL);
   });
 
+  it("getProviderUrl Rootstock", () => {
+    const etherStore = useEtherStore();
+    etherStore.setNetworkName(NetworkEnum.rootstock);
+    expect(getProviderUrl()).toBe(import.meta.env.VITE_ROOTSTOCK_API_URL);
+  });
+
   it("getProviderUrl Default", () => {
     expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
   });

src/blockchain/addresses.ts

@@ -1,23 +1,60 @@
 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 } = {
+  const possibleTokenAddresses: { [key: string]: { [key in TokenEnum]: string } } = {
-    Ethereum: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
+    Ethereum: ethereumTokens,
-    Polygon: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
+    Polygon: polygonTokens,
-    Rootstock: "0xfE841c74250e57640390f46d914C88d22C51e82e",
+    Rootstock: rootstockTokens,
   };
 
-  return possibleTokenAddresses[network ? network : etherStore.networkName];
+  return possibleTokenAddresses[network ? network : etherStore.networkName][token];
 };
 
 const getP2PixAddress = (network?: NetworkEnum): string => {
   const etherStore = useEtherStore();
 
   const possibleP2PixAddresses: { [key: string]: string } = {
-    Ethereum: "0x2414817FF64A114d91eCFA16a834d3fCf69103d4",
+    Ethereum: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
     Polygon: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
     Rootstock: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
   };
@@ -27,9 +64,8 @@ const getP2PixAddress = (network?: NetworkEnum): string => {
 
 const getProviderUrl = (): string => {
   const etherStore = useEtherStore();
-
   const possibleProvidersUrls: { [key: string]: string } = {
-    Ethereum: import.meta.env.VITE_GOERLI_API_URL,
+    Ethereum: import.meta.env.VITE_SEPOLIA_API_URL,
     Polygon: import.meta.env.VITE_MUMBAI_API_URL,
     Rootstock: import.meta.env.VITE_RSK_API_URL,
   };
@@ -38,15 +74,13 @@ const getProviderUrl = (): string => {
 };
 
 const possibleChains: { [key: string]: NetworkEnum } = {
-  "0x5": NetworkEnum.ethereum,
+  "11155111": NetworkEnum.ethereum,
-  "5": NetworkEnum.ethereum,
-  "0x13881": NetworkEnum.polygon,
   "80001": NetworkEnum.polygon,
   "31": NetworkEnum.rootstock,
 };
 
 const network2Chain: { [key: string]: string } = {
-  Ethereum: "0x5",
+  Ethereum: "0xAA36A7",
   Polygon: "0x13881",
   Localhost: "0x7a69",
   Rootstock: "0x1f",

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<any> => {
   return cancel;
 };
 
-const withdrawDeposit = async (amount: string): Promise<any> => {
+const withdrawDeposit = async (amount: string, token: TokenEnum): Promise<any> => {
   const contract = getContract();
 
   const withdraw = await contract.withdraw(
-    getTokenAddress(),
+    getTokenAddress(token),
     parseEther(String(amount)),
     []
   );

src/blockchain/events.ts

@@ -12,11 +12,10 @@ import type { Pix } from "@/model/Pix";
 
 const getNetworksLiquidity = async (): Promise<void> => {
   const etherStore = useEtherStore();
-
+  const sepoliaProvider = new ethers.providers.JsonRpcProvider(
-  const goerliProvider = new ethers.providers.JsonRpcProvider(
+    import.meta.env.VITE_SEPOLIA_API_URL,
-    import.meta.env.VITE_GOERLI_API_URL,
+    11155111
-    5
+  ); // sepolia provider
-  ); // goerli provider
   const mumbaiProvider = new ethers.providers.JsonRpcProvider(
     import.meta.env.VITE_MUMBAI_API_URL,
     80001
@@ -26,17 +25,16 @@ const getNetworksLiquidity = async (): Promise<void> => {
     31
   ); // rootstock provider
 
-  const p2pContractGoerli = new ethers.Contract(
+  const p2pContractSepolia = new ethers.Contract(
     getP2PixAddress(NetworkEnum.ethereum),
     p2pix.abi,
-    goerliProvider
+    sepoliaProvider
   );
   const p2pContractMumbai = new ethers.Contract(
     getP2PixAddress(NetworkEnum.polygon),
     p2pix.abi,
     mumbaiProvider
   );
-
   const p2pContractRootstock = new ethers.Contract(
     getP2PixAddress(NetworkEnum.rootstock),
     p2pix.abi,
@@ -44,22 +42,22 @@ const getNetworksLiquidity = async (): Promise<void> => {
   );
 
   etherStore.setLoadingNetworkLiquidity(true);
-  const depositListGoerli = await getValidDeposits(
-    getTokenAddress(NetworkEnum.ethereum),
-    p2pContractGoerli
-  );
 
-  const depositListMumbai = await getValidDeposits(
+  const depositListSepolia = await getValidDeposits(
-    getTokenAddress(NetworkEnum.polygon),
+    getTokenAddress(etherStore.selectedToken, NetworkEnum.ethereum),
-    p2pContractMumbai
+    p2pContractSepolia
   );
-
+  // const depositListMumbai = await getValidDeposits(
-  etherStore.setDepositsValidListGoerli(depositListGoerli);
+  //   getTokenAddress(etherStore.selectedToken, NetworkEnum.polygon),
+  //   p2pContractMumbai
+  // );
   const depositListRootstock = await getValidDeposits(
-    getTokenAddress(NetworkEnum.rootstock),
+    getTokenAddress(etherStore.selectedToken, NetworkEnum.rootstock),
     p2pContractRootstock
   );
-  etherStore.setDepositsValidListMumbai(depositListMumbai);
+
+  etherStore.setDepositsValidListSepolia(depositListSepolia);
+  // etherStore.setDepositsValidListMumbai(depositListMumbai);
   etherStore.setDepositsValidListRootstock(depositListRootstock);
   etherStore.setLoadingNetworkLiquidity(false);
 };

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<any> => {
   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<any> => {
 
 const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => {
   const p2pContract = getContract();
+  const etherStore = useEtherStore();
 
   const deposit = await p2pContract.deposit(
-    getTokenAddress(),
+    getTokenAddress(etherStore.selectedToken),
     parseEther(tokenQty),
     pixKey,
     true,

src/blockchain/wallet.ts

@@ -21,14 +21,14 @@ const updateWalletStatus = async (): Promise<void> => {
   const signer = provider.getSigner();
 
   const { chainId } = await provider.getNetwork();
-  if(!isPossibleNetwork(chainId.toString())){
+  if (!isPossibleNetwork(chainId.toString())) {
-    window.alert("Invalid chain!:"+chainId);
+    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<void> => {
 const listValidDepositTransactionsByWalletAddress = async (
   walletAddress: string
 ): Promise<ValidDeposit[]> => {
-  const walletDeposits = await getValidDeposits(getTokenAddress());
+  const etherStore = useEtherStore();
+  const walletDeposits = await getValidDeposits(getTokenAddress(etherStore.selectedToken));
 
   if (walletDeposits) {
     return walletDeposits

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 () => {
       >
         <div>
           <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
+          <p class="text-2xl text-gray-900">
+            {{ 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 BRZ em sua carteira.
+            cadastrar o {{ etherStore.selectedToken }} em sua carteira.
           </p>
         </div>
         <CustomButton :text="'Cadastrar token'" @buttonClicked="() => {}" />

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();
@@ -107,7 +108,7 @@ const showInitialItems = (): void => {
 const openEtherscanUrl = (transactionHash: string): void => {
   const networkUrl =
     etherStore.networkName == NetworkEnum.ethereum
-      ? "goerli.etherscan.io"
+      ? "sepolia.etherscan.io"
       : "mumbai.polygonscan.com";
   const url = `https://${networkUrl}/tx/${transactionHash}`;
   window.open(url, "_blank");
@@ -175,11 +176,13 @@ showInitialItems();
             Saldo disponível
           </p>
           <p class="text-xl leading-7 font-semibold text-gray-900">
-            {{ getRemaining() }} BRZ
+            {{ getRemaining() }} {{ etherStore.selectedToken }}
           </p>
           <div class="flex gap-2 w-32 sm:w-56" v-if="activeLockAmount != 0">
             <span class="text-xs font-normal text-gray-400" ref="infoText">{{
-              `com ${activeLockAmount.toFixed(2)} BRZ em lock`
+              `com ${activeLockAmount.toFixed(2)} ${
+                etherStore.selectedToken
+              } em lock`
             }}</span>
             <div
               class="absolute mt-[2px] md-view"
@@ -282,7 +285,7 @@ showInitialItems();
             class="text-xl sm:text-xl leading-7 font-semibold text-gray-900"
           >
             {{ item.amount }}
-            BRZ
+            {{ getTokenByAddress(item.token) }}
           </span>
         </div>
         <div>

src/components/SearchComponent.vue

@@ -10,14 +10,19 @@ 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<boolean>(false);
 
 const {
   walletAddress,
   networkName,
-  depositsValidListGoerli,
+  selectedToken,
+  depositsValidListSepolia,
   depositsValidListMumbai,
   loadingNetworkLiquidity,
 } = storeToRefs(etherStore);
@@ -28,7 +33,7 @@ const enableConfirmButton = ref<boolean>(false);
 const enableWalletButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(true);
 const validDecimals = ref<boolean>(true);
-const selectedGoerliDeposit = ref<ValidDeposit>();
+const selectedSepoliaDeposit = ref<ValidDeposit>();
 const selectedMumbaiDeposit = ref<ValidDeposit>();
 const selectedRootstockDeposit = ref<ValidDeposit>();
 
@@ -45,7 +50,7 @@ const connectAccount = async (): Promise<void> => {
 const emitConfirmButton = (): void => {
   const selectedDeposit =
     networkName.value == NetworkEnum.ethereum
-      ? selectedGoerliDeposit.value
+      ? selectedSepoliaDeposit.value
       : selectedMumbaiDeposit.value;
   emit("tokenBuy", selectedDeposit, tokenValue.value);
 };
@@ -66,10 +71,19 @@ 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;
-  selectedGoerliDeposit.value = undefined;
+  selectedSepoliaDeposit.value = undefined;
   selectedMumbaiDeposit.value = undefined;
   selectedRootstockDeposit.value = undefined;
 
@@ -78,10 +92,10 @@ const verifyLiquidity = (): void => {
     return;
   }
 
-  selectedGoerliDeposit.value = verifyNetworkLiquidity(
+  selectedSepoliaDeposit.value = verifyNetworkLiquidity(
     tokenValue.value,
     walletAddress.value,
-    depositsValidListGoerli.value
+    depositsValidListSepolia.value
   );
   selectedMumbaiDeposit.value = verifyNetworkLiquidity(
     tokenValue.value,
@@ -90,7 +104,7 @@ const verifyLiquidity = (): void => {
   );
 
   enableOrDisableConfirmButton();
-  if (selectedGoerliDeposit.value || selectedMumbaiDeposit.value) {
+  if (selectedSepoliaDeposit.value || selectedMumbaiDeposit.value) {
     hasLiquidity.value = true;
     enableWalletButton.value = true;
   } else {
@@ -100,7 +114,7 @@ const verifyLiquidity = (): void => {
 };
 
 const enableOrDisableConfirmButton = (): void => {
-  if (selectedGoerliDeposit.value && networkName.value == NetworkEnum.ethereum)
+  if (selectedSepoliaDeposit.value && networkName.value == NetworkEnum.ethereum)
     enableConfirmButton.value = true;
   else if (
     selectedMumbaiDeposit.value &&
@@ -150,20 +164,49 @@ watch(walletAddress, (): void => {
             placeholder="0  "
             step=".01"
           />
-          <div
+          <div class="relative">
-            class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
+            <button
-          >
+              class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
-            <img
+              @click="openTokenSelection()"
-              alt="Token image"
-              class="sm:w-fit w-4"
-              src="@/assets/brz.svg"
-            />
-            <span class="text-gray-900 sm:text-lg text-md w-fit" id="brz"
-              >BRZ</span
             >
+              <img
+                alt="Token image"
+                class="sm:w-fit w-4"
+                :src="getTokenImage(selectedToken)"
+              />
+              <span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{
+                selectedToken
+              }}</span>
+            </button>
+            <div
+              v-if="selectTokenToggle"
+              class="mt-2 w-[100px] text-gray-900 lg-view absolute"
+            >
+              <div class="bg-white rounded-md z-10">
+                <div
+                  v-for="token in TokenEnum"
+                  class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
+                  @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 class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-
         <div class="custom-divide py-2 mb-2"></div>
         <div
           class="flex justify-between"
@@ -185,7 +228,7 @@ watch(walletAddress, (): void => {
               src="@/assets/ethereum.svg"
               width="24"
               height="24"
-              v-if="selectedGoerliDeposit"
+              v-if="selectedSepoliaDeposit"
             />
           </div>
         </div>

src/components/SellerSteps/SellerSearchComponent.vue

@@ -4,6 +4,13 @@ import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 
+import { TokenEnum } from "@/model/NetworkEnum";
+import { useEtherStore } from "@/store/ether";
+import { getTokenImage } from "@/utils/imagesPath";
+
+// Store
+const etherStore = useEtherStore();
+
 // Reactive state
 const tokenValue = ref<number>(0);
 const enableSelectButton = ref<boolean>(false);
@@ -58,8 +65,14 @@ const handleInputEvent = (event: any): void => {
           <div
             class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
           >
-            <img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
+            <img
-            <span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
+              alt="Token image"
+              class="w-fit"
+              :src="getTokenImage(etherStore.selectedToken)"
+            />
+            <span class="text-gray-900 text-lg w-fit" id="token">{{
+              etherStore.selectedToken
+            }}</span>
           </div>
         </div>
 
@@ -94,6 +107,7 @@ const handleInputEvent = (event: any): void => {
           >
         </div>
       </div>
+
       <CustomButton
         :text="'Conectar carteira'"
         @buttonClicked="emit('tokenBuy')"

src/components/SellerSteps/SendNetwork.vue

@@ -8,6 +8,7 @@ const emit = defineEmits(["sendNetwork"]);
 const props = defineProps({
   pixKey: String,
   offer: Number,
+  selectedToken: String,
 });
 </script>
 
@@ -31,7 +32,9 @@ const props = defineProps({
       >
         <div>
           <p>Tokens ofertados</p>
-          <p class="text-2xl text-gray-900">{{ props.offer }} BRZ</p>
+          <p class="text-2xl text-gray-900">
+            {{ props.offer }} {{ props.selectedToken }}
+          </p>
         </div>
         <div class="my-3">
           <p>Chave Pix</p>

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<string>("");
 const pixKey = ref<string>("");
+const selectTokenToggle = ref<boolean>(false);
 
 const enableSelectButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(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"
           />
-          <div
+          <div class="relative">
-            class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
+            <button
-          >
+              class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
-            <img
+              @click="openTokenSelection()"
-              alt="Token image"
+            >
-              class="sm:w-fit w-4"
+              <img
-              src="@/assets/brz.svg"
+                alt="Token image"
-            />
+                class="sm:w-fit w-4"
-            <span class="text-gray-900 w-fit" id="brz"> BRZ </span>
+                :src="getTokenImage(selectedToken)"
+              />
+              <span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{
+                selectedToken
+              }}</span>
+            </button>
+            <div
+              v-if="selectTokenToggle"
+              class="mt-2 w-[100px] text-gray-900 lg-view absolute"
+            >
+              <div class="bg-white rounded-md z-10">
+                <div
+                  v-for="token in TokenEnum"
+                  class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
+                  @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 class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 

src/components/TopBar/TopBar.vue

@@ -5,10 +5,7 @@ import { ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
-import ethereumImage from "@/assets/ethereum.svg";
+import { getNetworkImage } from "@/utils/imagesPath";
-import polygonImage from "@/assets/polygon.svg";
-import rootstockImage from "@/assets/rootstock.svg";
-
 // Store reference
 const etherStore = useEtherStore();
 
@@ -55,17 +52,6 @@ const networkChange = async (network: NetworkEnum): Promise<void> => {
   if (change) etherStore.setNetworkName(network);
 };
 
-const getNetworkImage = (networkName: NetworkEnum): string => {
-  let validImages = {
-    Ethereum: ethereumImage,
-    Polygon: polygonImage,
-    Rootstock: rootstockImage,
-    Localhost: ethereumImage,
-  };
-
-  return validImages[networkName];
-};
-
 onClickOutside(walletAddressRef, () => {
   menuHoverToggle.value = false;
   menuOpenToggle.value = false;
@@ -134,32 +120,39 @@ onClickOutside(infoMenuRef, () => {
               >
                 <div class="redirect_button flex mr-4">
                   <div class="mr-6">
-                    <img
+                    <a href="https://www.twitter.com/doiim">
-                      alt="Twitter"
+                      <img
-                      width="20"
+                        alt="Twitter"
-                      height="20"
+                        width="20"
-                      src="@/assets/twitterIcon.svg"
+                        height="20"
-                      class="cursor-pointer"
+                        src="@/assets/twitterIcon.svg"
-                      onclick="location.href = 'https://www.twitter.com/doiim';"
+                        class="cursor-pointer"
-                    />
+                      />
+                    </a>
                   </div>
                   <div class="mr-6">
-                    <img
+                    <a href="https://www.linkedin.com/company/doiim/">
-                      alt="Discord"
+                      <img
-                      width="20"
+                        alt="LinkedIn"
-                      height="20"
+                        width="20"
-                      src="@/assets/discordIcon.svg"
+                        height="20"
-                      class="cursor-pointer"
+                        src="@/assets/linkedinIcon.svg"
-                    />
+                        class="cursor-pointer"
+                        href="https://www.linkedin.com/company/doiim/"
+                      />
+                    </a>
+                  </div>
+                  <div class="mr-6">
+                    <a href="https://www.github.com/doiim">
+                      <img
+                        alt="Github"
+                        width="20"
+                        height="20"
+                        src="@/assets/githubIcon.svg"
+                        class="cursor-pointer"
+                      />
+                    </a>
                   </div>
-                  <img
-                    alt="Github"
-                    width="20"
-                    height="20"
-                    src="@/assets/githubIcon.svg"
-                    class="cursor-pointer"
-                    onclick="location.href = 'https://github.com/doiim';"
-                  />
                 </div>
               </div>
               <div class="w-full flex justify-center">
@@ -274,51 +267,18 @@ onClickOutside(infoMenuRef, () => {
           <div class="mt-2">
             <div class="bg-white rounded-md z-10">
               <div
+                v-for="network in NetworkEnum"
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-                @click="networkChange(NetworkEnum.rootstock)"
+                @click="networkChange(network)"
               >
                 <img
-                  alt="Rootstock image"
+                  :alt="network + ' image'"
                   width="20"
                   height="20"
-                  src="@/assets/rootstock.svg"
+                  :src="getNetworkImage(network)"
                 />
                 <span class="text-gray-900 py-4 text-end font-semibold text-sm">
-                  Rootstock
+                  {{ network }}
-                </span>
-              </div>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-              <div
-                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-                @click="networkChange(NetworkEnum.ethereum)"
-              >
-                <img
-                  alt="Ethereum image"
-                  width="20"
-                  height="20"
-                  src="@/assets/ethereum.svg"
-                />
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
-                  Ethereum
-                </span>
-              </div>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-              <div
-                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-                @click="networkChange(NetworkEnum.polygon)"
-              >
-                <img
-                  alt="Polygon image"
-                  width="20"
-                  height="20"
-                  src="@/assets/polygon.svg"
-                />
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
-                  Polygon
                 </span>
               </div>
               <div class="w-full flex justify-center">
@@ -456,28 +416,33 @@ onClickOutside(infoMenuRef, () => {
           </div>
           <div class="menu-button pb-10">
             <div class="redirect_button flex">
-              <img
+              <a href="https://www.twitter.com/doiim/">
-                alt="Twitter"
+                <img
-                width="20"
+                  alt="Twitter"
-                height="20"
+                  width="20"
-                src="@/assets/twitterIcon.svg"
+                  height="20"
-                class="mr-6"
+                  src="@/assets/twitterIcon.svg"
-                onclick="location.href = 'https://www.twitter.com/doiim';"
+                  class="mr-6"
-              />
+                  onclick="location.href = 'https://www.twitter.com/doiim';"
-              <img
+                />
-                alt="Discord"
+              </a>
-                width="20"
+              <a href="https://www.linkedin.com/company/doiim/">
-                height="20"
+                <img
-                src="@/assets/discordIcon.svg"
+                  alt="LinkedIn"
-                class="mr-6"
+                  width="20"
-              />
+                  height="20"
-              <img
+                  src="@/assets/linkedinIcon.svg"
-                alt="Github"
+                  class="mr-6"
-                width="20"
+                />
-                height="20"
+              </a>
-                src="@/assets/githubIcon.svg"
+              <a href="https://github.com/doiim/">
-                onclick="location.href = 'https://github.com/doiim';"
+                <img
-              />
+                  alt="Github"
+                  width="20"
+                  height="20"
+                  src="@/assets/githubIcon.svg"
+                />
+              </a>
             </div>
           </div>
         </div>
@@ -490,56 +455,20 @@ onClickOutside(infoMenuRef, () => {
       <div class="pl-4 mt-2 h-full">
         <div class="bg-white rounded-md z-10 h-full">
           <div
+            v-for="network in NetworkEnum"
             class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
-            @click="networkChange(NetworkEnum.rootstock)"
+            @click="networkChange(network)"
           >
             <img
-              alt="Rootstock image"
+              :alt="network + 'image'"
               width="20"
               height="20"
-              src="@/assets/rootstock.svg"
+              :src="getNetworkImage(network)"
             />
             <span class="text-gray-900 py-4 text-end font-bold text-sm">
-              Rootstock
+              {{ network }}
             </span>
           </div>
-          <div class="w-full flex justify-center pb-12">
-            <hr class="w-4/5" />
-          </div>
-          <div
-            class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
-            @click="networkChange(NetworkEnum.ethereum)"
-          >
-            <img
-              alt="Ethereum image"
-              width="20"
-              height="20"
-              src="@/assets/ethereum.svg"
-            />
-            <span class="text-gray-900 py-4 text-end font-bold text-sm">
-              Ethereum
-            </span>
-          </div>
-          <div class="w-full flex justify-center">
-            <hr class="w-4/5" />
-          </div>
-          <div
-            class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
-            @click="networkChange(NetworkEnum.polygon)"
-          >
-            <img
-              alt="Polygon image"
-              width="20"
-              height="20"
-              src="@/assets/polygon.svg"
-            />
-            <span class="text-gray-900 py-4 text-end font-bold text-sm">
-              Polygon
-            </span>
-          </div>
-          <div class="w-full flex justify-center pb-12">
-            <hr class="w-4/5" />
-          </div>
         </div>
       </div>
     </div>

src/model/NetworkEnum.ts

@@ -3,3 +3,8 @@ export enum NetworkEnum {
   polygon = "Polygon",
   rootstock = "Rootstock",
 }
+
+export enum TokenEnum {
+  BRZ = 'BRZ',
+  BRX = 'BRX'
+}

src/store/ether.ts

@@ -1,16 +1,20 @@
-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 GOERLI
+    // Depósitos válidos para compra SEPOLIA
-    depositsValidListGoerli: [] as ValidDeposit[],
+    depositsValidListSepolia: [] as ValidDeposit[],
     // Depósitos válidos para compra MUMBAI
     depositsValidListMumbai: [] as ValidDeposit[],
     // Depósitos válidos para compra ROOTSTOCK
@@ -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;
     },
@@ -34,8 +41,8 @@ export const useEtherStore = defineStore("ether", {
     setSellerView(sellerView: boolean) {
       this.sellerView = sellerView;
     },
-    setDepositsValidListGoerli(depositsValidList: ValidDeposit[]) {
+    setDepositsValidListSepolia(depositsValidList: ValidDeposit[]) {
-      this.depositsValidListGoerli = depositsValidList;
+      this.depositsValidListSepolia = depositsValidList;
     },
     setDepositsValidListMumbai(depositsValidList: ValidDeposit[]) {
       this.depositsValidListMumbai = depositsValidList;
@@ -54,7 +61,7 @@ export const useEtherStore = defineStore("ether", {
   getters: {
     getValidDepositByWalletAddress: (state) => {
       return (walletAddress: string) =>
-        state.depositsValidListGoerli
+        state.depositsValidListSepolia
           .filter((deposit) => deposit.seller == walletAddress)
           .sort((a, b) => {
             return b.blockNumber - a.blockNumber;

src/utils/imagesPath.ts

@@ -0,0 +1,17 @@
+import type { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
+
+export const imagesPath = import.meta.glob<string>('@/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] : "";
+};

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, selectedToken } = storeToRefs(etherStore);
-const { walletAddress, networkName } = storeToRefs(etherStore);
 const loadingWithdraw = ref<boolean>(false);
 const showAlert = ref<boolean>(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;
     }

src/views/SellerView.vue

@@ -77,6 +77,7 @@ const sendNetwork = async () => {
     <SendNetwork
       :pixKey="pixKeyBuyer"
       :offer="Number(offerValue)"
+      :selected-token="etherStore.selectedToken"
       v-if="!loading"
       @send-network="sendNetwork"
     />