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

Merge branch 'transaction-history' of https://github.com/liftlearning/P2Pix-Front-End into transaction-history

Browse Source
This commit is contained in:
enzoggqs 2022-12-26 17:44:10 -03:00
commit 0d65dbb105
1 changed files with 98 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/TopBar.vue
View File

@ -13,6 +13,9 @@ const { walletAddress, balance } = storeToRefs(etherStore);
const menuOpenToggle = ref<boolean>(false); const menuOpenToggle = ref<boolean>(false);
const menuHoverToggle = ref<boolean>(false); const menuHoverToggle = ref<boolean>(false);
const currencyMenuOpenToggle = ref<boolean>(false);
const currencyMenuHoverToggle = ref<boolean>(false);
//Methods //Methods
const connectMetaMask = () => { const connectMetaMask = () => {
blockchain.connectProvider(); blockchain.connectProvider();
@ -70,15 +73,105 @@ const closeMenu = () => {
Conectar carteira Conectar carteira
</button> </button>
<div v-if="walletAddress" class="account-info"> <div v-if="walletAddress" class="account-info">
<div class="top-bar-info"> <div class="flex flex-col">
<img alt="Ethereum image" src="@/assets/ethereum.svg" /> <div
<span class="default-text"> Ethereum </span> class="group top-bar-info cursor-pointer hover:bg-white"
<img alt="Chevron Down" src="@/assets/chevronDown.svg" /> @click="
[
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
(menuOpenToggle = false),
]
"
@mouseover="currencyMenuHoverToggle = true"
@mouseout="currencyMenuHoverToggle = false"
:style="{
backgroundColor: currencyMenuOpenToggle
? '#F9F9F9'
: currencyMenuHoverToggle
? '#F9F9F9'
: 'transparent',
}"
>
<img alt="Ethereum image" src="@/assets/ethereum.svg" />
<span
class="default-text group-hover:text-black"
:style="{
color: currencyMenuOpenToggle
? '#000000'
: currencyMenuHoverToggle
? '#000000'
: 'rgb(249 250 251)',
}"
>
Ethereum
</span>
<img
class="text-black"
v-if="!currencyMenuHoverToggle && !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 absolute w-full text-black"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10">
<div class="menu-button px-4 rounded-md cursor-pointer">
<div class="flex justify-between">
<img
alt="Ethereum image"
width="20"
height="20"
src="@/assets/ethereum.svg"
/>
<span
class="text-black py-4 text-end font-semibold text-xs"
>
Ethereum
</span>
<img alt="Chevron Down" src="@/assets/chevronDown.svg" />
</div>
<hr />
</div>
<div class="menu-button px-4 rounded-md cursor-pointer">
<div class="flex justify-between">
<img
alt="Ethereum image"
width="20"
height="20"
src="@/assets/polygon.svg"
/>
<span
class="text-black py-4 text-end font-semibold text-xs"
>
Polygon
</span>
<img alt="Chevron Down" src="@/assets/chevronDown.svg" />
</div>
<hr />
</div>
</div>
</div>
</div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
class="top-bar-info cursor-pointer" class="top-bar-info cursor-pointer"
@click="menuOpenToggle = !menuOpenToggle" @click="
[(menuOpenToggle = !menuOpenToggle), (currencyMenuOpenToggle = false)]
"
@mouseover="menuHoverToggle = true" @mouseover="menuHoverToggle = true"
@mouseout="menuHoverToggle = false" @mouseout="menuHoverToggle = false"
:style="{ :style="{