Discord -> LinkedIn

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-size: cover;
+  background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%);
   font-weight: normal;
 }
 

src/blockchain/addresses.ts

@@ -5,7 +5,7 @@ const getTokenAddress = (network?: NetworkEnum): string => {
   const etherStore = useEtherStore();
 
   const possibleTokenAddresses: { [key: string]: string } = {
-    Ethereum: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
+    Ethereum: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
     Polygon: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
     Rootstock: "0xfE841c74250e57640390f46d914C88d22C51e82e",
   };
@@ -17,7 +17,7 @@ const getP2PixAddress = (network?: NetworkEnum): string => {
   const etherStore = useEtherStore();
 
   const possibleP2PixAddresses: { [key: string]: string } = {
-    Ethereum: "0x2414817FF64A114d91eCFA16a834d3fCf69103d4",
+    Ethereum: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
     Polygon: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
     Rootstock: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
   };
@@ -29,7 +29,7 @@ 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 +38,13 @@ const getProviderUrl = (): string => {
 };
 
 const possibleChains: { [key: string]: NetworkEnum } = {
-  "0x5": NetworkEnum.ethereum,
-  "5": NetworkEnum.ethereum,
-  "0x13881": NetworkEnum.polygon,
+  "11155111": NetworkEnum.ethereum,
   "80001": NetworkEnum.polygon,
   "31": NetworkEnum.rootstock,
 };
 
 const network2Chain: { [key: string]: string } = {
-  Ethereum: "0x5",
+  Ethereum: "0xAA36A7",
   Polygon: "0x13881",
   Localhost: "0x7a69",
   Rootstock: "0x1f",

src/blockchain/events.ts

@@ -13,10 +13,10 @@ import type { Pix } from "@/model/Pix";
 const getNetworksLiquidity = async (): Promise<void> => {
   const etherStore = useEtherStore();
 
-  const goerliProvider = new ethers.providers.JsonRpcProvider(
-    import.meta.env.VITE_GOERLI_API_URL,
-    5
-  ); // goerli provider
+  const sepoliaProvider = new ethers.providers.JsonRpcProvider(
+    import.meta.env.VITE_SEPOLIA_API_URL,
+    11155111
+  ); // sepolia provider
   const mumbaiProvider = new ethers.providers.JsonRpcProvider(
     import.meta.env.VITE_MUMBAI_API_URL,
     80001
@@ -26,10 +26,10 @@ 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),
@@ -44,21 +44,23 @@ const getNetworksLiquidity = async (): Promise<void> => {
   );
 
   etherStore.setLoadingNetworkLiquidity(true);
-  const depositListGoerli = await getValidDeposits(
+
+  const depositListSepolia = await getValidDeposits(
     getTokenAddress(NetworkEnum.ethereum),
-    p2pContractGoerli
-  );
+    p2pContractSepolia
+  ); 
 
   const depositListMumbai = await getValidDeposits(
     getTokenAddress(NetworkEnum.polygon),
     p2pContractMumbai
   );
 
-  etherStore.setDepositsValidListGoerli(depositListGoerli);
   const depositListRootstock = await getValidDeposits(
     getTokenAddress(NetworkEnum.rootstock),
     p2pContractRootstock
   );
+
+  etherStore.setDepositsValidListSepolia(depositListSepolia);
   etherStore.setDepositsValidListMumbai(depositListMumbai);
   etherStore.setDepositsValidListRootstock(depositListRootstock);
   etherStore.setLoadingNetworkLiquidity(false);

src/components/ListingComponent/ListingComponent.vue

@@ -107,7 +107,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");

src/components/SearchComponent.vue

@@ -17,7 +17,7 @@ const etherStore = useEtherStore();
 const {
   walletAddress,
   networkName,
-  depositsValidListGoerli,
+  depositsValidListSepolia,
   depositsValidListMumbai,
   loadingNetworkLiquidity,
 } = storeToRefs(etherStore);
@@ -28,7 +28,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 +45,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);
 };
@@ -69,7 +69,7 @@ const handleInputEvent = (event: any): void => {
 // 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 +78,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 +90,7 @@ const verifyLiquidity = (): void => {
   );
 
   enableOrDisableConfirmButton();
-  if (selectedGoerliDeposit.value || selectedMumbaiDeposit.value) {
+  if (selectedSepoliaDeposit.value || selectedMumbaiDeposit.value) {
     hasLiquidity.value = true;
     enableWalletButton.value = true;
   } else {
@@ -100,7 +100,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 &&
@@ -185,7 +185,7 @@ watch(walletAddress, (): void => {
               src="@/assets/ethereum.svg"
               width="24"
               height="24"
-              v-if="selectedGoerliDeposit"
+              v-if="selectedSepoliaDeposit"
             />
           </div>
         </div>

src/components/TopBar/TopBar.vue

@@ -5,9 +5,8 @@ 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 polygonImage from "@/assets/polygon.svg";
-import rootstockImage from "@/assets/rootstock.svg";
+
+const images = import.meta.glob<string>('@/assets/*.{png,svg}', { eager:true, query:'?url', import: 'default'} );
 
 // Store reference
 const etherStore = useEtherStore();
@@ -56,14 +55,8 @@ const networkChange = async (network: NetworkEnum): Promise<void> => {
 };
 
 const getNetworkImage = (networkName: NetworkEnum): string => {
-  let validImages = {
-    Ethereum: ethereumImage,
-    Polygon: polygonImage,
-    Rootstock: rootstockImage,
-    Localhost: ethereumImage,
-  };
-
-  return validImages[networkName];
+  const path = Object.keys(images).find(key => key.endsWith(`${networkName.toLowerCase()}.svg`));
+  return path ? images[path] : '';
 };
 
 onClickOutside(walletAddressRef, () => {
@@ -134,32 +127,39 @@ onClickOutside(infoMenuRef, () => {
               >
                 <div class="redirect_button flex mr-4">
                   <div class="mr-6">
-                    <img
-                      alt="Twitter"
-                      width="20"
-                      height="20"
-                      src="@/assets/twitterIcon.svg"
-                      class="cursor-pointer"
-                      onclick="location.href = 'https://www.twitter.com/doiim';"
-                    />
+                    <a href="https://www.twitter.com/doiim">
+                      <img
+                        alt="Twitter"
+                        width="20"
+                        height="20"
+                        src="@/assets/twitterIcon.svg"
+                        class="cursor-pointer"
+                      />
+                    </a>
                   </div>
                   <div class="mr-6">
-                    <img
-                      alt="Discord"
-                      width="20"
-                      height="20"
-                      src="@/assets/discordIcon.svg"
-                      class="cursor-pointer"
-                    />
+                    <a href="https://www.linkedin.com/company/doiim/">
+                      <img
+                        alt="LinkedIn"
+                        width="20"
+                        height="20"
+                        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">
@@ -273,52 +273,19 @@ onClickOutside(infoMenuRef, () => {
         >
           <div class="mt-2">
             <div class="bg-white rounded-md z-10">
-              <div
+              <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
-                </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
+                  {{ network }}
                 </span>
               </div>
               <div class="w-full flex justify-center">
@@ -456,28 +423,33 @@ onClickOutside(infoMenuRef, () => {
           </div>
           <div class="menu-button pb-10">
             <div class="redirect_button flex">
-              <img
-                alt="Twitter"
-                width="20"
-                height="20"
-                src="@/assets/twitterIcon.svg"
-                class="mr-6"
-                onclick="location.href = 'https://www.twitter.com/doiim';"
-              />
-              <img
-                alt="Discord"
-                width="20"
-                height="20"
-                src="@/assets/discordIcon.svg"
-                class="mr-6"
-              />
-              <img
-                alt="Github"
-                width="20"
-                height="20"
-                src="@/assets/githubIcon.svg"
-                onclick="location.href = 'https://github.com/doiim';"
-              />
+              <a href="https://www.twitter.com/doiim/">
+                <img
+                  alt="Twitter"
+                  width="20"
+                  height="20"
+                  src="@/assets/twitterIcon.svg"
+                  class="mr-6"
+                  onclick="location.href = 'https://www.twitter.com/doiim';"
+                />
+              </a>
+              <a href="https://www.linkedin.com/company/doiim/">
+                <img
+                  alt="LinkedIn"
+                  width="20"
+                  height="20"
+                  src="@/assets/linkedinIcon.svg"
+                  class="mr-6"
+                />
+              </a>
+              <a href="https://github.com/doiim/">
+                <img
+                  alt="Github"
+                  width="20"
+                  height="20"
+                  src="@/assets/githubIcon.svg"
+                />
+              </a>
             </div>
           </div>
         </div>
@@ -490,56 +462,21 @@ 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/store/ether.ts

@@ -9,8 +9,8 @@ export const useEtherStore = defineStore("ether", {
     networkName: NetworkEnum.ethereum,
     loadingLock: false,
     sellerView: false,
-    // Depósitos válidos para compra GOERLI
-    depositsValidListGoerli: [] as ValidDeposit[],
+    // Depósitos válidos para compra SEPOLIA
+    depositsValidListSepolia: [] as ValidDeposit[],
     // Depósitos válidos para compra MUMBAI
     depositsValidListMumbai: [] as ValidDeposit[],
     // Depósitos válidos para compra ROOTSTOCK
@@ -34,8 +34,8 @@ export const useEtherStore = defineStore("ether", {
     setSellerView(sellerView: boolean) {
       this.sellerView = sellerView;
     },
-    setDepositsValidListGoerli(depositsValidList: ValidDeposit[]) {
-      this.depositsValidListGoerli = depositsValidList;
+    setDepositsValidListSepolia(depositsValidList: ValidDeposit[]) {
+      this.depositsValidListSepolia = depositsValidList;
     },
     setDepositsValidListMumbai(depositsValidList: ValidDeposit[]) {
       this.depositsValidListMumbai = depositsValidList;
@@ -54,7 +54,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;