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

Compare commits

base: hueso:fbe32e78ab1cb97db7eace6482612b35485fc7e0
Branches Tags
hueso:develop
hueso:buy-refactor
hueso:rsk
...
compare: hueso:0a51a80e0c8f2eafaa0d966fc551aa1c07f00643
Branches Tags
hueso:buy-refactor
hueso:develop
hueso:rsk

3 Commits
fbe32e78ab ... 0a51a80e0c

Author SHA1 Message Date
hueso
0a51a80e0c Discord -> LinkedIn
Some checks failed
Deploy FrontEnd / deploy-staging (push) Has been cancelled
Details
Deploy FrontEnd / deploy-production (push) Has been cancelled
Details
CI script / lint (push) Has been cancelled
Details
CI script / build (push) Has been cancelled
Details
CI script / SonarCloud (push) Has been cancelled
Details
2024-07-31 13:08:00 -03:00
hueso
8ad42cc0f2 background optimization 2024-07-31 13:07:40 -03:00
hueso
ae60edd324 Network selection overhaul 2024-07-31 12:32:44 -03:00
4 changed files with 76 additions and 173 deletions
Show Stats Expand all files Collapse all files

34
src/assets/bg.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 MiB

1
src/assets/linkedinIcon.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 501 B

3
src/assets/main.css
View File

@ -9,8 +9,7 @@
padding: 2rem; padding: 2rem;
height: fit-content; height: fit-content;
min-height: 100vh; 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; font-weight: normal;
} }

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

@ -5,9 +5,8 @@ import { ref } from "vue";
import { onClickOutside } from "@vueuse/core"; import { onClickOutside } from "@vueuse/core";
import { NetworkEnum } from "@/model/NetworkEnum"; import { NetworkEnum } from "@/model/NetworkEnum";
import { connectProvider, requestNetworkChange } from "@/blockchain/provider"; import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
import ethereumImage from "@/assets/ethereum.svg";
import polygonImage from "@/assets/polygon.svg"; const images = import.meta.glob<string>('@/assets/*.{png,svg}', { eager:true, query:'?url', import: 'default'} );
import rootstockImage from "@/assets/rootstock.svg";
// Store reference // Store reference
const etherStore = useEtherStore(); const etherStore = useEtherStore();
@ -56,14 +55,8 @@ const networkChange = async (network: NetworkEnum): Promise<void> => {
}; };
const getNetworkImage = (networkName: NetworkEnum): string => { const getNetworkImage = (networkName: NetworkEnum): string => {
let validImages = { const path = Object.keys(images).find(key => key.endsWith(`${networkName.toLowerCase()}.svg`));
Ethereum: ethereumImage, return path ? images[path] : '';
Polygon: polygonImage,
Rootstock: rootstockImage,
Localhost: ethereumImage,
};
return validImages[networkName];
}; };
onClickOutside(walletAddressRef, () => { onClickOutside(walletAddressRef, () => {
@ -134,32 +127,39 @@ onClickOutside(infoMenuRef, () => {
> >
<div class="redirect_button flex mr-4"> <div class="redirect_button flex mr-4">
<div class="mr-6"> <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>
<div class="mr-6"> <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> </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> </div>
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
@ -273,52 +273,19 @@ onClickOutside(infoMenuRef, () => {
> >
<div class="mt-2"> <div class="mt-2">
<div class="bg-white rounded-md z-10"> <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" class="menu-button gap-2 px-4 rounded-md cursor-pointer"
@click="networkChange(NetworkEnum.rootstock)" @click="networkChange(network)"
> >
<img <img
alt="Rootstock image" :alt="network + ' image'"
width="20" width="20"
height="20" height="20"
src="@/assets/rootstock.svg" :src="getNetworkImage(network)"
/> />
<span class="text-gray-900 py-4 text-end font-semibold text-sm"> <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> </span>
</div> </div>
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
@ -456,28 +423,33 @@ onClickOutside(infoMenuRef, () => {
</div> </div>
<div class="menu-button pb-10"> <div class="menu-button pb-10">
<div class="redirect_button flex"> <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> </div>
</div> </div>
@ -490,56 +462,21 @@ onClickOutside(infoMenuRef, () => {
<div class="pl-4 mt-2 h-full"> <div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full"> <div class="bg-white rounded-md z-10 h-full">
<div <div
v-for="network in NetworkEnum"
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2" class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
@click="networkChange(NetworkEnum.rootstock)" @click="networkChange(network)"
> >
<img <img
alt="Rootstock image" :alt="network + 'image'"
width="20" width="20"
height="20" height="20"
src="@/assets/rootstock.svg" :src="getNetworkImage(network)"
/>
/>
<span class="text-gray-900 py-4 text-end font-bold text-sm"> <span class="text-gray-900 py-4 text-end font-bold text-sm">
Rootstock {{ network }}
</span> </span>
</div> </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> </div>
</div> </div>