hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Total overhaul

Browse Source
This commit is contained in:
Filipe Soccol
2024-11-07 11:35:15 -03:00
parent 9205909f9f
commit 659db5ef04
35 changed files with 1404 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
View File

@@ -146,7 +146,7 @@ p {
@apply text-white text-center;
}
.blur-container-row {
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
}
.blur-container {
@@ -165,22 +165,4 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>

5
src/components/CustomAlert/CustomAlert.vue
View File

@@ -38,9 +38,9 @@ switch (props.type) {
<div
class="modal-overlay sm:h-12 h-full inset-0 absolute backdrop-blur-sm sm:backdrop-blur-none"
>
<div class="modal px-12 pl-72 text-center sm:flex justify-between hidden">
<div class="modal px-12 text-center sm:flex justify-between hidden">
<div class="flex items-center">
<p class="text-black tracking-tighter leading-tight my-2">
<p class="text-black tracking-tighter leading-tight py-2">
{{ alertText }}
</p>
<button v-if="props.type === 'redirect'" @click="$emit('go-to-lock')">
@@ -110,7 +110,6 @@ switch (props.type) {
border-radius: 10px;
align-items: center;
white-space: nowrap;
padding-left: v-bind(alertPaddingLeft);
}
.modal-mobile {

12
src/components/ListingComponent/ListingComponent.vue
View File

@@ -96,7 +96,7 @@ const getRemaining = (): number => {
};
const getExplorer = (): string => {
return etherStore.networkName == NetworkEnum.ethereum
return etherStore.networkName == NetworkEnum.sepolia
? "Etherscan"
: "Polygonscan";
};
@@ -107,7 +107,7 @@ const showInitialItems = (): void => {
const openEtherscanUrl = (transactionHash: string): void => {
const networkUrl =
etherStore.networkName == NetworkEnum.ethereum
etherStore.networkName == NetworkEnum.sepolia
? "sepolia.etherscan.io"
: "mumbai.polygonscan.com";
const url = `https://${networkUrl}/tx/${transactionHash}`;
@@ -190,7 +190,7 @@ showInitialItems();
>
<img
alt="info image"
src="@/assets/info.svg"
src="@/assets/info.svg?url"
aria-describedby="tooltip"
ref="reference"
@mouseover="showInfoTooltip = true"
@@ -216,7 +216,7 @@ showInitialItems();
>
<img
alt="Withdraw image"
src="@/assets/withdraw.svg"
src="@/assets/withdraw.svg?url"
class="w-3 h-3 sm:w-4 sm:h-4"
/>
<span class="last-release-info">Sacar</span>
@@ -263,7 +263,7 @@ showInitialItems();
>
<img
alt="Withdraw image"
src="@/assets/withdraw.svg"
src="@/assets/withdraw.svg?url"
class="w-3 h-3 sm:w-4 sm:h-4"
/>
<span class="last-release-info">Sacar</span>
@@ -318,7 +318,7 @@ showInitialItems();
<span class="last-release-info">{{ getExplorer() }}</span>
<img
alt="Redirect image"
src="@/assets/redirect.svg"
src="@/assets/redirect.svg?url"
class="w-3 h-3 sm:w-4 sm:h-4"
/>
</div>

2
src/components/LoadingComponent/LoadingComponent.vue
View File

@@ -24,7 +24,7 @@ const props = defineProps({
>
<img
alt="Polygon image"
src="@/assets/validating.svg"
src="@/assets/validating.svg?url"
width="96"
height="48"
/>

28
src/components/QrCodeComponent.vue
View File

@@ -110,12 +110,12 @@ onUnmounted(() => {
</div>
<img
alt="Copy PIX code"
src="@/assets/copyPix.svg"
src="@/assets/copyPix.svg?url"
width="16"
height="16"
class="pt-2 lg:mb-5 cursor-pointer"
/>
<span class="text-xs text-start lg-view">
<span class="text-xs text-start hidden md: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
@@ -139,7 +139,7 @@ onUnmounted(() => {
<div class="flex items-center h-8">
<img
alt="Invalid Icon"
src="@/assets/invalidIcon.svg"
src="@/assets/invalidIcon.svg?url"
width="14"
class="cursor-pointer align-middle inline-block"
/>
@@ -152,7 +152,7 @@ onUnmounted(() => {
<div class="flex items-center h-8">
<img
alt="Valid Icon"
src="@/assets/validIcon.svg"
src="@/assets/validIcon.svg?url"
width="14"
class="cursor-pointer align-middle inline-block"
/>
@@ -222,7 +222,7 @@ h2 {
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-6;
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-6 max-w-screen-sm;
}
input[type="number"] {
@@ -233,22 +233,4 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>

49
src/components/SearchComponent.vue
View File

@@ -4,7 +4,6 @@ import CustomButton from "@/components/CustomButton/CustomButton.vue";
import { debounce } from "@/utils/debounce";
import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia";
import { connectProvider } from "@/blockchain/provider";
import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
import { NetworkEnum } from "@/model/NetworkEnum";
import type { ValidDeposit } from "@/model/ValidDeposit";
@@ -38,24 +37,25 @@ const enableWalletButton = ref<boolean>(false);
const hasLiquidity = ref<boolean>(true);
const validDecimals = ref<boolean>(true);
const selectedSepoliaDeposit = ref<ValidDeposit>();
const selectedMumbaiDeposit = ref<ValidDeposit>();
const selectedRootstockDeposit = ref<ValidDeposit>();
import ChevronDown from "@/assets/chevronDown.svg";
import { useOnboard } from "@web3-onboard/vue";
// Emits
const emit = defineEmits(["tokenBuy"]);
// Blockchain methods
const connectAccount = async (): Promise<void> => {
await connectProvider();
enableOrDisableConfirmButton();
const { connectWallet } = useOnboard();
await connectWallet();
};
const emitConfirmButton = (): void => {
const selectedDeposit =
networkName.value == NetworkEnum.ethereum
networkName.value == NetworkEnum.sepolia
? selectedSepoliaDeposit.value
: selectedMumbaiDeposit.value;
: selectedRootstockDeposit.value;
emit("tokenBuy", selectedDeposit, tokenValue.value);
};
@@ -92,7 +92,7 @@ const handleSelectedToken = (token: TokenEnum): void => {
const verifyLiquidity = (): void => {
enableConfirmButton.value = false;
selectedSepoliaDeposit.value = undefined;
selectedMumbaiDeposit.value = undefined;
selectedRootstockDeposit.value = undefined;
selectedRootstockDeposit.value = undefined;
if (tokenValue.value <= 0) {
@@ -105,14 +105,14 @@ const verifyLiquidity = (): void => {
walletAddress.value,
depositsValidListSepolia.value
);
selectedMumbaiDeposit.value = verifyNetworkLiquidity(
selectedRootstockDeposit.value = verifyNetworkLiquidity(
tokenValue.value,
walletAddress.value,
depositsValidListMumbai.value
);
enableOrDisableConfirmButton();
if (selectedSepoliaDeposit.value || selectedMumbaiDeposit.value) {
if (selectedSepoliaDeposit.value || selectedRootstockDeposit.value) {
hasLiquidity.value = true;
enableWalletButton.value = true;
} else {
@@ -122,10 +122,10 @@ const verifyLiquidity = (): void => {
};
const enableOrDisableConfirmButton = (): void => {
if (selectedSepoliaDeposit.value && networkName.value == NetworkEnum.ethereum)
if (selectedSepoliaDeposit.value && networkName.value == NetworkEnum.sepolia)
enableConfirmButton.value = true;
else if (
selectedMumbaiDeposit.value &&
selectedRootstockDeposit.value &&
networkName.value == NetworkEnum.polygon
)
enableConfirmButton.value = true;
@@ -183,21 +183,24 @@ watch(walletAddress, (): void => {
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>
<img
class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
:class="{'scale-y-[-1]': selectTokenToggle}"
<span
class="text-gray-900 sm:text-lg text-md font-medium"
id="token"
>{{ selectedToken }}</span
>
<ChevronDown
class="pr-4 sm:pr-0 transition-all duration-500 ease-in-out invert"
:class="{ 'scale-y-[-1]': selectTokenToggle }"
alt="Chevron Down"
src="@/assets/chevronDownBlack.svg"
/>
</button>
<div
v-if="selectTokenToggle"
class="mt-2 w-[100px] text-gray-900 absolute"
>
<div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
<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"
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
@@ -233,10 +236,10 @@ watch(walletAddress, (): void => {
<div class="flex gap-2">
<img
alt="Polygon image"
src="@/assets/polygon.svg"
src="@/assets/polygon.svg?svg"
width="24"
height="24"
v-if="selectedMumbaiDeposit"
v-if="selectedRootstockDeposit"
/>
<img
alt="Ethereum image"
@@ -313,7 +316,7 @@ watch(walletAddress, (): void => {
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10;
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 max-w-screen-sm;
}
input[type="number"] {

20
src/components/SellerSteps/SellerSearchComponent.vue
View File

@@ -4,12 +4,14 @@ 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";
import { storeToRefs } from "pinia";
import { useOnboard } from "@web3-onboard/vue";
// Store
const etherStore = useEtherStore();
const { walletAddress } = storeToRefs(etherStore);
// Reactive state
const tokenValue = ref<number>(0);
@@ -20,6 +22,12 @@ const validDecimals = ref<boolean>(true);
// Emits
const emit = defineEmits(["tokenBuy"]);
// Blockchain methods
const connectAccount = async (): Promise<void> => {
const { connectWallet } = useOnboard();
await connectWallet();
};
// Debounce methods
const handleInputEvent = (event: any): void => {
const { value } = event.target;
@@ -84,13 +92,13 @@ const handleInputEvent = (event: any): void => {
<div class="flex gap-2">
<img
alt="Polygon image"
src="@/assets/polygon.svg"
src="@/assets/polygon.svg?url"
width="24"
height="24"
/>
<img
alt="Ethereum image"
src="@/assets/ethereum.svg"
src="@/assets/ethereum.svg?url"
width="24"
height="24"
/>
@@ -109,9 +117,15 @@ const handleInputEvent = (event: any): void => {
</div>
<CustomButton
v-if="walletAddress"
:text="'Conectar carteira'"
@buttonClicked="emit('tokenBuy')"
/>
<CustomButton
v-if="!walletAddress"
:text="'Conectar carteira'"
@buttonClicked="connectAccount()"
/>
</div>
</div>
</template>

2
src/components/SellerSteps/SendNetwork.vue
View File

@@ -76,7 +76,7 @@ p {
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 sm:w-1/3;
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
}
.last-deposit-info {

30
src/components/SellerSteps/WantSellComponent.vue
View File

@@ -10,6 +10,7 @@ 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";
// html references
const tokenDropdownRef = ref<any>(null);
@@ -30,6 +31,12 @@ 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;
@@ -72,14 +79,12 @@ const handleSelectedToken = (token: TokenEnum): void => {
selectTokenToggle.value = false;
};
const handleButtonClick = async (
const handleSellClick = async (
offer: string,
pixKey: string
): Promise<void> => {
const postProcessedPixKey = postProcessKey(pixKey);
if (walletAddress.value)
emit("approveTokens", { offer, postProcessedPixKey });
else await connectProvider();
emit("approveTokens", { offer, postProcessedPixKey });
};
</script>
@@ -130,11 +135,10 @@ const handleButtonClick = async (
id="token"
>{{ selectedToken }}</span
>
<img
class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
<ChevronDown
class="pr-4 sm:pr-0 transition-all duration-500 ease-in-out invert"
:class="{ 'scale-y-[-1]': selectTokenToggle }"
alt="Chevron Down"
src="@/assets/chevronDownBlack.svg"
/>
</button>
<div
@@ -200,9 +204,15 @@ const handleButtonClick = async (
</div>
</div>
<CustomButton
:text="walletAddress ? 'Aprovar tokens' : 'Conectar Carteira'"
v-if="walletAddress"
:text="'Aprovar tokens'"
:isDisabled="!validDecimals || !validPixFormat"
@buttonClicked="handleButtonClick(offer, pixKey)"
@buttonClicked="handleSellClick(offer, pixKey)"
/>
<CustomButton
v-if="!walletAddress"
:text="'Conectar carteira'"
@buttonClicked="connectAccount()"
/>
</div>
</div>
@@ -232,7 +242,7 @@ const handleButtonClick = async (
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 w-auto;
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 max-w-screen-sm;
}
input[type="number"] {

329
src/components/TopBar/TopBar.vue
View File

@@ -1,33 +1,51 @@
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useEtherStore } from "@/store/ether";
import { ref } from "vue";
import { ref, watch } from "vue";
import { onClickOutside } from "@vueuse/core";
import { NetworkEnum } from "@/model/NetworkEnum";
import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
import { getNetworkImage } from "@/utils/imagesPath";
import { Networks } from "@/model/Networks";
import { useOnboard } from "@web3-onboard/vue";
import ChevronDown from "@/assets/chevronDown.svg";
import Account from "@/assets/account.svg";
import TwitterIcon from "@/assets/twitterIcon.svg";
import LinkedinIcon from "@/assets/linkedinIcon.svg";
import GithubIcon from "@/assets/githubIcon.svg";
import { connectProvider } from "@/blockchain/provider";
// Store reference
const etherStore = useEtherStore();
const { walletAddress, sellerView } = storeToRefs(etherStore);
const menuOpenToggle = ref<boolean>(false);
const menuHoverToggle = ref<boolean>(false);
const infoMenuOpenToggle = ref<boolean>(false);
const currencyMenuOpenToggle = ref<boolean>(false);
const currencyMenuHoverToggle = ref<boolean>(false);
const infoMenuRef = ref<any>(null);
const walletAddressRef = ref<any>(null);
const currencyRef = ref<any>(null);
//Methods
const { connectedWallet, connectedChain, setChain, disconnectWallet } =
useOnboard();
const connnectWallet = async (): Promise<void> => {
await connectProvider();
const { connectWallet } = useOnboard();
await connectWallet();
};
watch(connectedWallet, async (newVal: any) => {
connectProvider(newVal.provider);
const addresses = await newVal.provider.request({ method: "eth_accounts" });
etherStore.setWalletAddress(addresses.shift());
});
watch(connectedChain, (newVal: any) => {
etherStore.setNetworkId(newVal?.id);
});
const formatWalletAddress = (): string => {
const walletAddressLength = walletAddress.value.length;
const initialText = walletAddress.value.substring(0, 5);
@@ -38,10 +56,10 @@ const formatWalletAddress = (): string => {
return `${initialText}...${finalText}`;
};
const disconnectUser = (): void => {
const disconnectUser = async (): Promise<void> => {
etherStore.setWalletAddress("");
await disconnectWallet({ label: connectedWallet.value?.label || "" });
closeMenu();
window.location.reload();
};
const closeMenu = (): void => {
@@ -50,18 +68,23 @@ const closeMenu = (): void => {
const networkChange = async (network: NetworkEnum): Promise<void> => {
currencyMenuOpenToggle.value = false;
const change = await requestNetworkChange(network);
if (change) etherStore.setNetworkName(network);
try {
await setChain({
chainId: Networks[network].chainId,
wallet: connectedWallet.value?.label || "",
});
etherStore.setNetworkId(network);
} catch (error) {
console.log("Error changing network", error);
}
};
onClickOutside(walletAddressRef, () => {
menuHoverToggle.value = false;
menuOpenToggle.value = false;
});
onClickOutside(currencyRef, () => {
currencyMenuOpenToggle.value = false;
currencyMenuHoverToggle.value = false;
});
onClickOutside(infoMenuRef, () => {
@@ -74,17 +97,17 @@ onClickOutside(infoMenuRef, () => {
<RouterLink :to="'/'" class="default-button">
<img
alt="P2Pix logo"
class="logo lg-view"
src="@/assets/logo.svg"
width="75"
class="logo hidden md:inline-block"
width="200"
height="75"
src="@/assets/logo.svg?url"
/>
<img
alt="P2Pix logo"
class="logo sm-view w-10/12"
src="@/assets/logo2.svg"
class="logo inline-block md:hidden w-10/12"
width="40"
height="40"
src="@/assets/logo2.svg?url"
/>
</RouterLink>
@@ -92,7 +115,7 @@ onClickOutside(infoMenuRef, () => {
<div class="flex flex-col">
<div
v-show="infoMenuOpenToggle"
class="mt-10 absolute w-full text-gray-900 lg-view"
class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10 -left-32 w-52">
@@ -120,41 +143,43 @@ onClickOutside(infoMenuRef, () => {
<div
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
>
<div class="redirect_button flex mr-4">
<div class="mr-6">
<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">
<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>
<div class="redirect_button">
<a
href="https://www.twitter.com/doiim"
target="_blank"
rel="noreferrer"
>
<TwitterIcon
alt="Twitter"
width="20"
height="20"
class="cursor-pointer"
/>
</a>
<a
href="https://www.linkedin.com/company/doiim/"
target="_blank"
rel="noreferrer"
>
<LinkedinIcon
alt="LinkedIn"
width="20"
height="20"
class="cursor-pointer"
/>
</a>
<a
href="https://www.github.com/doiim"
target="_blank"
rel="noreferrer"
>
<GithubIcon
alt="Github"
width="20"
height="20"
class="cursor-pointer"
/>
</a>
</div>
</div>
<div class="w-full flex justify-center">
@@ -165,7 +190,7 @@ onClickOutside(infoMenuRef, () => {
</div>
<div
ref="infoMenuRef"
class="default-button lg-view cursor-pointer"
class="default-button hidden md:inline-block cursor-pointer"
@click="
[
(infoMenuOpenToggle = !infoMenuOpenToggle),
@@ -189,27 +214,27 @@ onClickOutside(infoMenuRef, () => {
<RouterLink
:to="'/faq'"
v-if="!walletAddress"
class="default-button sm-view"
class="default-button inline-block md:hidden"
>
FAQ
</RouterLink>
<RouterLink
:to="sellerView ? '/' : '/seller'"
class="default-button sm:whitespace-normal whitespace-nowrap lg-view"
class="default-button sm:whitespace-normal whitespace-nowrap hidden md:inline-block"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</RouterLink>
<RouterLink
:to="sellerView ? '/' : '/seller'"
v-if="!walletAddress"
class="default-button sm:whitespace-normal whitespace-nowrap sm-view"
class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</RouterLink>
<div class="flex flex-col" v-if="walletAddress">
<div
ref="currencyRef"
class="group top-bar-info cursor-pointer hover:bg-white h-10"
class="group top-bar-info cursor-pointer h-10"
@click="
[
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
@@ -217,15 +242,6 @@ onClickOutside(infoMenuRef, () => {
(infoMenuOpenToggle = false),
]
"
@mouseover="currencyMenuHoverToggle = true"
@mouseout="currencyMenuHoverToggle = false"
:style="{
backgroundColor: currencyMenuOpenToggle
? '#F9F9F9'
: currencyMenuHoverToggle
? '#F9F9F9'
: 'transparent',
}"
>
<img
alt="Choosed network image"
@@ -233,38 +249,18 @@ onClickOutside(infoMenuRef, () => {
height="24"
width="24"
/>
<span
class="default-text group-hover:text-gray-900 lg-view"
:style="{
color: currencyMenuOpenToggle
? '#000000'
: currencyMenuHoverToggle
? '#000000'
: 'rgb(249 250 251)',
}"
>
<span class="default-text hidden md:inline-block">
{{ Networks[etherStore.networkName].chainName }}
</span>
<img
class="text-gray-900"
v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle"
<ChevronDown
class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
:class="{ 'scale-y-[-1]': currencyMenuOpenToggle }"
alt="Chevron Down"
src="@/assets/chevronDown.svg"
/>
<img
v-if="currencyMenuOpenToggle"
alt="Chevron Up"
src="@/assets/chevronUp.svg"
/>
<img
v-if="currencyMenuHoverToggle && !currencyMenuOpenToggle"
alt="Chevron Down Black"
src="@/assets/chevronDownBlack.svg"
/>
</div>
<div
v-show="currencyMenuOpenToggle"
class="mt-10 pl-3 absolute w-full text-gray-900 lg-view"
class="mt-10 pl-3 absolute w-full text-gray-900 hidden md:inline-block"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10">
@@ -294,7 +290,7 @@ onClickOutside(infoMenuRef, () => {
<button
type="button"
v-if="!walletAddress"
class="border-amber-500 border-2 rounded default-button lg-view"
class="border-amber-500 border-2 rounded default-button hidden md:inline-block"
@click="connnectWallet()"
>
Conectar carteira
@@ -302,7 +298,7 @@ onClickOutside(infoMenuRef, () => {
<button
type="button"
v-if="!walletAddress"
class="border-amber-500 border-2 rounded default-button sm-view"
class="border-amber-500 border-2 rounded default-button inline-block md:hidden"
@click="connnectWallet()"
>
Conectar
@@ -319,65 +315,39 @@ onClickOutside(infoMenuRef, () => {
(infoMenuOpenToggle = false),
]
"
@mouseover="menuHoverToggle = true"
@mouseout="menuHoverToggle = false"
:style="{
backgroundColor: menuOpenToggle
? '#F9F9F9'
: menuHoverToggle
? '#F9F9F9'
: 'transparent',
}"
>
<img alt="Account image" src="@/assets/account.svg" />
<span
class="default-text"
:style="{
color: menuOpenToggle
? '#000000'
: menuHoverToggle
? '#000000'
: 'rgb(249 250 251)',
}"
>
<Account alt="Account image" />
<span class="default-text">
{{ formatWalletAddress() }}
</span>
<img
class="text-gray-900"
v-if="!menuHoverToggle && !menuOpenToggle"
<ChevronDown
class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
:class="{ 'scale-y-[-1]': menuOpenToggle }"
alt="Chevron Down"
src="@/assets/chevronDown.svg"
/>
<img
v-if="menuOpenToggle"
alt="Chevron Up"
src="@/assets/chevronUp.svg"
/>
<img
v-if="menuHoverToggle && !menuOpenToggle"
alt="Chevron Down Black"
src="@/assets/chevronDownBlack.svg"
/>
</div>
<div
v-show="menuOpenToggle"
class="mt-10 absolute w-full text-gray-900 lg-view"
class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
>
<div class="pl-4 mt-2">
<div class="bg-white rounded-md z-10">
<div class="menu-button" @click="closeMenu()">
<RouterLink to="/manage_bids" class="redirect_button">
Gerenciar Ofertas
</RouterLink>
</div>
<RouterLink
onclick="closeMenu()"
to="/manage_bids"
class="redirect_button menu-button"
>
Gerenciar Ofertas
</RouterLink>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div class="menu-button" @click="disconnectUser">
<RouterLink to="/" class="redirect_button">
Desconectar
</RouterLink>
</div>
<button
onclick="disconnectUser()"
class="redirect_button menu-button"
>
Desconectar
</button>
</div>
</div>
</div>
@@ -386,7 +356,7 @@ onClickOutside(infoMenuRef, () => {
</div>
<div
v-show="menuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 sm-view"
class="mobile-menu fixed w-4/5 text-gray-900 inline-block md:hidden"
>
<div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full">
@@ -417,48 +387,41 @@ onClickOutside(infoMenuRef, () => {
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div class="menu-button pb-10">
<div class="redirect_button flex">
<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 class="redirect_button mx-10">
<a
href="https://www.twitter.com/doiim/"
target="_blank"
rel="noreferrer"
>
<TwitterIcon alt="Twitter" width="20" height="20" />
</a>
<a
href="https://www.linkedin.com/company/doiim/"
target="_blank"
rel="noreferrer"
>
<LinkedinIcon alt="LinkedIn" width="20" height="20" />
</a>
<a
href="https://github.com/doiim/"
target="_blank"
rel="noreferrer"
>
<GithubIcon alt="Github" width="20" height="20" />
</a>
</div>
</div>
</div>
</div>
<div
v-show="currencyMenuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 sm-view"
class="mobile-menu fixed w-4/5 text-gray-900 inline-block sm:hidden"
>
<div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full">
<div
v-for="(chainData, network) in Networks"
:key="network"
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
@click="networkChange(network)"
>
@@ -500,38 +463,20 @@ header {
}
.redirect_button {
@apply py-5 text-gray-900 sm:font-semibold font-bold sm:text-xs text-sm w-full;
@apply py-5 px-4 text-gray-900 flex sm:font-semibold font-bold sm:text-xs text-sm justify-between;
}
.menu-button {
@apply flex sm:text-center sm:justify-center hover:bg-gray-200 ml-8 sm:ml-0;
@apply flex sm:text-center sm:justify-center hover:bg-gray-200 hover:rounded-lg w-full;
}
a:hover {
@apply bg-gray-200 rounded;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
.mobile-menu {
margin-top: 1400px;
bottom: 0px;
height: auto;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>