feat(project-detail): redesign detail

This commit is contained in:
Daniel Klein 2024-09-12 08:41:48 +02:00
parent 441bff9017
commit b6e1984046
17 changed files with 843 additions and 687 deletions

View file

@ -20,9 +20,6 @@ defineProps<{
gap-8px
text-16px
font-700
lg:max-w-320px
lg:w-full
lg:justify-end
>
<slot />
{{ title }}

View file

@ -6,8 +6,6 @@
<div
hidden
w-full
max-w-320px
lg:block
/>
<div w-full>
<slot />

View file

@ -75,26 +75,36 @@ const logo = props.project?.logos?.at(0)?.url
<template>
<div
lg:flex
flex
flex-col
gap-y-16px
lg:flex-row
items-center
lg:gap-32px
>
<NuxtImg
lg:max-w-320px
lg:max-h-320px
max-w-200px
max-h-200px
shrink
border="1px app-text-grey"
:src="logo ?? '/no-image-1-1.svg'"
class="bg-app-bg-grey object-cover max-w-full h-full vertical-align[middle] block border-0 w-full h-[300px]"
class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px]"
/>
<div grow>
<div
grow
w-full
>
<div
flex
flex-col
items-center
lg:items-start
justify-between
gap-32px
lg:flex-row
lg:items-center
gap-y="lg:12px 24px"
text-app-text-grey
w-full
>
<div mt-24px>
<div mt-4px>
<NuxtLink
:to="project.links?.web"
target="_blank"
@ -112,139 +122,175 @@ const logo = props.project?.logos?.at(0)?.url
{{ project.name }}
</h1>
<UnoIcon
i-web-openinnew
text-16px
i-ic-twotone-open-in-new
text="22px app-white"
/>
</NuxtLink>
<h2
text="16px app-text-grey"
leading-24px
mt-8px
>
{{ project.project_type ?? '---' }}
</h2>
</div>
<div
border-2px
class="border-app-black bg-app-white text-app-black"
flex
justify-center
lg:grid
grid-cols-10
w-full
items-center
mt-4px
>
<h2
hidden
lg:block
>
Usecases:
</h2>
<p
text-app-white
col-span-9
>
Swap, Mixer
</p>
</div>
<div
grid
grid-cols-2
gap-y-12px
lg:flex
lg:flex-col
order-3
lg:order-2
w-full
>
<div
flex
flex-col
gap-4px
lg:grid
lg:grid-cols-10
lg:items-center
w-full
>
<h2>
Categories:
</h2>
<p
text-app-white
col-span-9
>
Dapp, Network
</p>
</div>
<div
flex
flex-col
gap-4px
lg:grid
lg:grid-cols-10
lg:items-center
w-full
>
<h2>
Ecosystems:
</h2>
<p
text-app-white
col-span-9
>
Ethereum, Secret Network
</p>
</div>
</div>
<div
grid
grid-cols-4
w-full
items-center
order-2
lg:order-3
>
<div
flex
items-center
justify-between
lg:justify-start
lg:gap-24px
col-span-3
>
<div
flex
flex-col
lg:flex-row
items-center
>
<p text="12px lg:16px" leading="16px lg:24px">Openess:</p>
<ProjectRating
:rating="project.ratings.openess"
type="openess"
:score="1"
compact
/>
</div>
<div
flex
flex-col
lg:flex-row
items-center
>
<p text="12px lg:16px" leading="16px lg:24px">Technology:</p>
<ProjectRating
:rating="project.ratings.technology"
type="technology"
:score="2"
compact
/>
</div>
<div
flex
flex-col
lg:flex-row
items-center
>
<p text="12px lg:16px" leading="16px lg:24px">Privacy:</p>
<ProjectRating
:rating="project.ratings.privacy"
type="privacy"
:score="3"
compact
/>
</div>
</div>
<div
flex
items-center
justify-end
w-full
gap-16px
mt--8px lg:mt-0
>
<h2
hidden
lg:block
>
Total Score:
</h2>
<div
flex
items-center
justify-center
px-32px
py-16px
text-32px
border="2px app-white"
text="16px lg:24px app-white"
leading="24px md:32px"
max-h-="32px md:40px"
max-w="84px"
w-full
h-full
font-700
leading-40px
cursor-pointer
whitespace-nowrap
py="2px lg:8px"
lg:py-4px
>
{{ `${calculateScore}%` }}
{{ calculateScore }} %
</div>
</div>
<div
grid
grid-cols-2
gap-16px
my-32px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.links?.github"
title="Github"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon i-web-code />
</template>
{{ project.links?.github ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.project_status?.version"
title="Product readyness"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon i-web-cube />
</template>
{{ project.project_status?.version }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.team?.length"
title="Team"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon i-web-team />
</template>
{{ `${project.team?.length} members` }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.links?.docs"
title="Docs"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon
i-web-docs
text-28px
/>
</template>
{{ project.links?.docs ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.audits"
title="Audit"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon
i-web-audit
text-28px
/>
</template>
{{ project.audits ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.links"
title="Available support"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon
i-web-support
text-28px
/>
</template>
{{ `${availableSupport} channels` }}
</ProjectInfoItem>
</div>
<div
grid
grid-cols-2
gap-16px
my-32px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.network"
tooltip-link="/"
title="Ecosystem"
bold
>
{{ project.blockchain_features?.network }}
</ProjectInfoItem>
<ProjectInfoItem
invisible
title="Last update"
bold
>
17/11/2023 23:22
</ProjectInfoItem>
</div>
</div>
</div>

View file

@ -0,0 +1,36 @@
<script lang="ts" setup>
import type { Project } from '~/types'
defineProps<{
project: Project
}>()
</script>
<template>
<ProjectDetailCategoryDivider
title="HISTORY"
badge-text="3/10"
>
<UnoIcon
i-material-symbols-calendar-month
text-24px
/>
</ProjectDetailCategoryDivider>
<ProjectDetailContainer>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.history?.time"
title="Date of creation"
>
{{ formatDate(project.history?.time) }}
</ProjectInfoItem>
</div>
</ProjectDetailContainer>
</template>

View file

@ -32,13 +32,6 @@ const githubProjectUrl = computed(() => {
md:block
>{{ 'BACK TO LIST' }}</span>
</NavigationButton>
<hr
hidden
md:block
border-t-2px
border-white
w-full
>
<div
flex
gap-16px

View file

@ -12,7 +12,7 @@ defineProps<{
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
i-bi-code-square
text-24px
/>
</ProjectDetailCategoryDivider>
@ -23,25 +23,98 @@ defineProps<{
leading-24px
font-400
>
<h3 text-app-text-grey>
{{ 'Project Description' }}
<h3
text-app-text-grey
mb-8px
>
Project Description
</h3>
<span
<p
text="14px sm:16px"
leading-20px
>{{ project.description ?? '---' }}</span>
>
{{ project.description ?? '---' }}
</p>
</div>
<div
grid
grid-cols="2 lg:4"
mt="24px lg:32px"
text="14px lg:16px"
gap-y-16px
>
<div>
<h3
text-app-text-grey
leading-20px
mb="4px lg:8px"
>
Project Phase
</h3>
<div
flex
items-center
gap-8px
>
<div
h-10px
w-10px
rounded-full
bg-green
/><p leading="20px lg:24px">
Mainnet
</p>
</div>
</div>
<div>
<h3
text-app-text-grey
leading-20px
mb="4px lg:8px"
>
Assets used
</h3>
<p leading="20px lg:24px">
ETH, DAI, USDC, FRAX
</p>
</div>
<div>
<h3
text-app-text-grey
leading-20px
mb="4px lg:8px"
>
Native token
</h3>
<p leading="20px lg:24px">
SCRT
</p>
</div>
<div>
<h3
text-app-text-grey
leading-20px
mb="4px lg:8px"
>
Project launch day
</h3>
<p leading="20px lg:24px">
06/2017
</p>
</div>
</div>
<div mt-24px>
<h3
text="14px sm:16px app-text-grey"
leading-20px
>
{{ 'Infrastructure links' }}
Infrastructure links:
</h3>
<div
grid
grid-cols-2
gap-16px
gap-x-16px
gap-y-12px
mt-8px
lg:grid-cols-4
>
@ -50,18 +123,12 @@ defineProps<{
:to="project.links?.web"
>
<template #prefix>
<UnoIcon i-web-website />
<UnoIcon
i-ic-baseline-language
text="24px app-text-grey"
/>
</template>
{{ 'Website' }}
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.blog"
:to="project.links.blog"
>
<template #prefix>
<UnoIcon i-web-website />
</template>
{{ 'Blog' }}
Website
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.github"
@ -69,12 +136,25 @@ defineProps<{
>
<template #prefix>
<UnoIcon
i-web-github
opacity-30
i-mdi-github
text="24px app-text-grey"
text-27px
/>
</template>
{{ 'Github' }}
Github
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.whitepaper"
:to="project.links?.whitepaper"
>
<template #prefix>
<UnoIcon
i-material-symbols-description
text="24px app-text-grey"
text-27px
/>
</template>
Whitepaper
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.docs"
@ -82,11 +162,38 @@ defineProps<{
>
<template #prefix>
<UnoIcon
i-web-documents
text-24px
i-material-symbols-contract
text="24px app-text-grey"
text-27px
/>
</template>
{{ 'Docs' }}
Docs
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.blog"
:to="project.links.blog"
>
<template #prefix>
<UnoIcon
i-material-symbols-newsmode
text="24px app-text-grey"
text-27px
/>
</template>
Blog
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.forum"
:to="project.links.forum"
>
<template #prefix>
<UnoIcon
i-material-symbols-forum-outline
text="24px app-text-grey"
text-27px
/>
</template>
Forum
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.block_explorer"
@ -94,48 +201,25 @@ defineProps<{
>
<template #prefix>
<UnoIcon
i-web-explorer
opacity-30
i-material-symbols-explore-outline
text="24px app-text-grey"
text-27px
/>
</template>
{{ 'Explorer' }}
Explorer
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.snapshot"
:to="project.links.snapshot"
v-if="project.links?.governance"
:to="project.links.governance"
>
<template #prefix>
<UnoIcon
i-web-snapshot
text-32px
i-material-symbols-how-to-vote-outline
text="24px app-text-grey"
text-27px
/>
</template>
{{ 'Snapshot' }}
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.token"
:to="project.links.token"
>
<template #prefix>
<UnoIcon
i-web-token
text-28px
/>
</template>
{{ 'Token' }}
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.coingecko"
:to="project.links.coingecko"
>
<template #prefix>
<UnoIcon
i-web-coingecko
opacity-30
text-24px
/>
</template>
{{ 'Coingecko' }}
Governance
</ProjectOpenessLink>
</div>
</div>
@ -149,22 +233,22 @@ defineProps<{
<div
grid
grid-cols-2
gap-16px
gap-x-16px
gap-y-12px
mt-8px
lg:grid-cols-4
>
<ProjectOpenessLink
v-if="project.links?.forum"
:to="project.links.forum"
v-if="project.links?.twitter"
:to="project.links.twitter"
>
<template #prefix>
<UnoIcon
i-web-forum
opacity-30
text-28px
i-bi-twitter-x
text="24px app-text-grey"
/>
</template>
{{ 'Forum' }}
Twitter
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.discord"
@ -172,24 +256,23 @@ defineProps<{
>
<template #prefix>
<UnoIcon
i-web-discord
text-27px
i-ic-baseline-discord
text="24px app-text-grey"
/>
</template>
{{ 'Discord' }}
Discord
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.twitter"
:to="project.links.twitter"
v-if="project.links?.telegram"
:to="project.links.telegram"
>
<template #prefix>
<UnoIcon
i-web-twitter_x
opacity-30
text-22px
i-mdi-telegram
text="24px app-text-grey"
/>
</template>
{{ 'Twitter' }}
Telegram
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.lens"
@ -198,10 +281,10 @@ defineProps<{
<template #prefix>
<UnoIcon
i-web-lens
text-32px
text="24px app-text-grey"
/>
</template>
{{ 'Lens' }}
Lens
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.farcaster"
@ -210,89 +293,62 @@ defineProps<{
<template #prefix>
<UnoIcon
i-web-farcaster
text-26px
text="24px app-text-grey"
/>
</template>
{{ 'Farcaster' }}
Farcaster
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.telegram"
:to="project.links.telegram"
</div>
</div>
<ProjectOpenessTeamMembers
v-if="projcet?.team"
:members="project.team.teammembers"
mt-24px
/>
<div mt-32px>
<h3
text="app-text-grey 14px lg:16px"
leading-24px
>
Funding
</h3>
<div
v-if="project.funding"
flex
items-center
justify-between
rounded-full
w-full
bg-app-bg-funding-card
px-24px
py-12px
mt-12px
>
<h3
text="14px lg:16px"
leading="20px lg:24px"
font-700
>
{{ project.funding.name }}
</h3>
<NuxtLink
:to="project.funding.link"
external
target="_blank"
>
<template #prefix>
<UnoIcon
i-web-telegram
opacity-30
text-22px
i-ic-twotone-open-in-new
text="22px app-text-grey"
/>
</template>
{{ 'Telegram' }}
</ProjectOpenessLink>
</NuxtLink>
</div>
</div>
<div mt-24px>
<ProjectOpenessTeamMembers :members="project.team" />
</div>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-26px
lg:grid-cols-4
<h3
v-else
text="app-text-grey 14px lg:16px"
leading-24px
>
<ProjectInfoItem
:check-undefined="project.product_launch_day"
title="Product launch day"
>
{{ project.product_launch_day }}
</ProjectInfoItem>
<ProjectInfoItem
title="Opensource"
bold
:check-undefined="project.blockchain_features?.opensource"
:color=" project.blockchain_features?.opensource ? '#A8FF18' : '#FF0000'"
>
{{ project.blockchain_features?.opensource ? 'Yes' : 'No' }}
</ProjectInfoItem>
</div>
<div
mt-32px
w-full
>
<ProjectInfoItem
:check-undefined="project.funding"
title="Funding"
bold
w-full
>
<template
v-for="fund in project.funding"
:key="fund.name"
>
<div
mt-16px
grid
grid-cols-2
sm:grid-cols-4
>
<span v-if="fund.name">{{ fund.name }}</span>
<span
v-if="fund.time"
font-400
>{{ fund.time }}</span>
<span
v-if="fund.time"
font-400
text-app-text-grey
>{{ fund.type }}</span>
<span
v-if="fund.time"
font-400
>{{ fund.value }}</span>
</div>
</template>
</ProjectInfoItem>
N/A
</h3>
</div>
</ProjectDetailContainer>
</template>

View file

@ -32,58 +32,20 @@ const props = defineProps<{
>
<div
flex
items-center
gap-12px
>
<template v-if="member.link">
<!-- <template v-if="member.link">
<NuxtImg
:src="member.link"
width="48"
height="48"
:alt="member.name"
/>
</template>
<template v-else>
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
opacity="0.2"
cx="24"
cy="24"
r="23.5"
stroke="white"
/>
<g opacity="0.2">
<mask
id="mask0_2200_7716"
style="mask-type:alpha"
maskUnits="userSpaceOnUse"
x="12"
y="12"
width="24"
height="24"
>
<rect
x="12"
y="12"
width="24"
height="24"
fill="#D9D9D9"
/>
</mask>
<g mask="url(#mask0_2200_7716)">
<path
d="M24 24C22.9 24 21.9583 23.6083 21.175 22.825C20.3917 22.0417 20 21.1 20 20C20 18.9 20.3917 17.9583 21.175 17.175C21.9583 16.3917 22.9 16 24 16C25.1 16 26.0417 16.3917 26.825 17.175C27.6083 17.9583 28 18.9 28 20C28 21.1 27.6083 22.0417 26.825 22.825C26.0417 23.6083 25.1 24 24 24ZM16 32V29.2C16 28.6333 16.1458 28.1125 16.4375 27.6375C16.7292 27.1625 17.1167 26.8 17.6 26.55C18.6333 26.0333 19.6833 25.6458 20.75 25.3875C21.8167 25.1292 22.9 25 24 25C25.1 25 26.1833 25.1292 27.25 25.3875C28.3167 25.6458 29.3667 26.0333 30.4 26.55C30.8833 26.8 31.2708 27.1625 31.5625 27.6375C31.8542 28.1125 32 28.6333 32 29.2V32H16Z"
fill="white"
/>
</g>
</g>
</svg>
</template>
</template> -->
<div flex items-center justify-center text-black w="40px lg:48px" h="40px lg:48px" rounded-full bg-app-bg-team-grey>
<div i-heroicons-solid-user text-24px></div>
</div>
<div
flex
flex-col
@ -92,10 +54,6 @@ const props = defineProps<{
text="14px sm:16px"
font-700
>{{ member.name }}</span>
<span
text="14px sm:16px app-text-grey"
font-400
>{{ member.role ?? 'N/A' }}</span>
</div>
</div>
</template>

View file

@ -12,7 +12,7 @@ defineProps<{
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
i-heroicons-solid-eye
text-24px
/>
</ProjectDetailCategoryDivider>
@ -26,11 +26,11 @@ defineProps<{
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.p2p"
bold
title="Peer to Peer (P2P)"
:check-undefined="project.default_privacy"
title="Default privacy"
:color="project.default_privacy ? '#18FF2F' : '#FF0000'"
>
{{ project.blockchain_features?.p2p ? 'YES' : 'NO' }}
{{ project.default_privacy ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.tracebility?.kyc"
@ -40,109 +40,6 @@ defineProps<{
>
{{ project.tracebility?.kyc ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.storage"
bold
title="Decentralized storage"
:color="project.storage?.decentralized ? '#18FF2F' : '#FF0000'"
>
{{ project.storage?.decentralized ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.default_privacy"
title="Default privacy"
:color="project.default_privacy ? '#18FF2F' : '#FF0000'"
>
{{ project.default_privacy ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.revealed_recipient"
:color="project.blockchain_features?.revealed_recipient ? '#FF0000' : '#18FF2F'"
bold
title="Revealed recipient"
>
{{ project.blockchain_features?.revealed_recipient ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.revealed_sender"
:color="project.blockchain_features?.revealed_sender ? '#FF0000' : '#18FF2F'"
bold
title="Revealed sender"
>
{{ project.blockchain_features?.revealed_sender ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.revealed_ammount"
:color="project.blockchain_features?.revealed_ammount ? '#FF0000' : '#18FF2F'"
bold
title="Revealed amount"
>
{{ project.blockchain_features?.revealed_ammount ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.reversability_condition"
bold
title="Reversability"
>
{{ project.blockchain_features?.reversability_condition }}
</ProjectInfoItem>
</div>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.connected_tx"
:color="project.blockchain_features?.connected_tx ? '#FF0000' : '#18FF2F'"
bold
title="Connected Txs"
>
{{ project.blockchain_features?.connected_tx ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.data_masking"
bold
title="Data masking"
>
{{ project.blockchain_features?.data_masking }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.tx_history"
bold
title="Tx history"
>
{{ project.blockchain_features?.tx_history ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div my-24px>
<hr
border-t-2px
border-white
opacity-20
w-80px
>
</div>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.privacy_policy"
:color="project.privacy_policy?.defined ? '#18FF2F' : '#FF0000'"
@ -150,6 +47,31 @@ defineProps<{
title="Privacy Policy"
>
{{ project.privacy_policy?.defined ? 'YES' : 'NO' }}
<NuxtLink
:to="project.privacy_policy?.link"
external
target="_blank"
>
<UnoIcon
i-ic-twotone-open-in-new
text="22px app-text-grey"
/>
</NuxtLink>
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.compliance"
color="#FFB800"
bold
title="Compliance with"
>
{{ project.compliance ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.tracebility?.sign_in_type_requirments"
bold
title="Sign-in requirements"
>
{{ project.tracebility?.sign_in_type_requirments }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.tracebility?.tracked_data"
@ -163,58 +85,6 @@ defineProps<{
>
{{ project.privacy_policy?.data_usage }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.frontend_anonymity"
bold
title="Frontend anonymity"
>
{{ project.blockchain_features?.frontend_anonymity }}
</ProjectInfoItem>
</div>
<div my-24px>
<hr
border-t-2px
border-white
opacity-20
w-80px
>
</div>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
>
<ProjectInfoItem
:check-undefined="project.compliance"
:color="project.compliance ? '#FF0000' : '#18FF2F'"
bold
title="Compliance"
>
{{ project.compliance ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
>
<ProjectInfoItem
:check-undefined="project.tracebility?.sign_in_type_requirments"
bold
title="Sign-in requirements"
>
{{ project.tracebility?.sign_in_type_requirments }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.identity_integration"
title="Identity integrations"
>
{{ project.blockchain_features?.identity_integration }}
</ProjectInfoItem>
</div>
</ProjectDetailContainer>
</template>

View file

@ -0,0 +1,159 @@
<script lang="ts" setup>
import type { OpenessRating, TechnologyRating, PrivacyRating } from '~/types'
// Define props for score
const props = defineProps<{
rating: TechnologyRating | OpenessRating | PrivacyRating
type: string
score: number
compact?: boolean
}>()
// Determine the color by score
const colorByScore = props.score <= 1
? 'bg-app-bg-rating-red'
: props.score === 2
? 'bg-app-bg-rating-orange'
: props.score === 3
? 'bg-app-bg-rating-yellow'
: 'bg-app-bg-rating-green'
const isPopoverVisible = ref(false)
let hideTimeout: ReturnType<typeof setTimeout> | null = null
const showPopover = () => {
if (hideTimeout) {
clearTimeout(hideTimeout)
hideTimeout = null
}
isPopoverVisible.value = true
}
const hidePopover = () => {
hideTimeout = setTimeout(() => {
isPopoverVisible.value = false
}, 100) // Delay of 200ms before hiding
}
function currentRating<T>(): T {
if (props.type === 'privacy')
return props.rating as T
if (props.type === 'technology')
return props.rating as T
return props.rating as T
}
function items(): { label: string, condition: boolean, positive: string, negative: string, link?: string }[] {
if (props.type === 'privacy')
return [
{ label: 'KYC', condition: !!currentRating<PrivacyRating>().no_kyc, positive: 'No', negative: 'Yes' },
{ label: 'Compliance', condition: !!currentRating<PrivacyRating>().no_compliance, positive: 'No', negative: 'OFAC' },
{ label: 'Privacy policy', condition: !!currentRating<PrivacyRating>().policy, positive: 'Link', negative: 'Not available', link: currentRating<PrivacyRating>().policy },
{ label: 'Default privacy', condition: !!currentRating<PrivacyRating>().default_privacy, positive: 'Yes', negative: 'No' },
]
if (props.type === 'technology')
return [
{ label: 'Mainnet', condition: !!currentRating<TechnologyRating>().mainnet, positive: 'Yes', negative: 'No' },
{ label: 'Opensource', condition: !!currentRating<TechnologyRating>().opensource, positive: 'Yes', negative: 'No' },
{ label: 'Asset custody', condition: !!currentRating<TechnologyRating>().assets, positive: 'None', negative: 'Custodial' },
{ label: 'Upgradability', condition: !!currentRating<TechnologyRating>().no_pgradability, positive: 'Disabled', negative: 'Enabled' },
{ label: 'Audits', condition: currentRating<TechnologyRating>().audits >= 1, positive: `${currentRating<TechnologyRating>().audits} ${currentRating<TechnologyRating>().audits > 1 ? 'Audits' : 'Audit'}`, negative: 'None' },
]
return [
{ label: 'Documentation', condition: !!currentRating<OpenessRating>().documentation, positive: 'Link', negative: 'Not available', link: currentRating<OpenessRating>().documentation },
{ label: 'Github', condition: !!currentRating<OpenessRating>().github, positive: 'Link', negative: 'Not available', link: currentRating<OpenessRating>().github },
{ label: 'Socials', condition: !!currentRating<OpenessRating>().socials, positive: 'Link', negative: 'Not available', link: currentRating<OpenessRating>().socials },
{ label: 'Whitepaper', condition: !!currentRating<OpenessRating>().whitepaper, positive: 'Link', negative: 'Not available', link: currentRating<OpenessRating>().whitepaper },
{ label: 'Team', condition: currentRating<OpenessRating>().team >= 1, positive: `${currentRating<OpenessRating>().team} ${currentRating<OpenessRating>().team > 1 ? 'Members' : 'Member'}`, negative: 'Anonymous' },
{ label: 'Funding', condition: currentRating<OpenessRating>().funding >= 1, positive: `${currentRating<OpenessRating>().funding} ${currentRating<OpenessRating>().team > 1 ? 'Investments' : 'Investment'}`, negative: 'Not available' },
]
}
</script>
<template>
<div class="relative">
<!-- Main div that shows rating and triggers the popover on hover -->
<div
flex
items-center
gap-4px
p-12px
hover:bg-app-bg-rating-hover
hover:rounded-8px
@mouseenter="showPopover"
@mouseleave="hidePopover"
>
<!-- Render the score points -->
<div
v-for="point of 5"
:key="point"
w="10px lg:12px"
h="10px lg:12px"
rounded-2px
:class="[point <= score ? colorByScore : 'bg-app-bg-rating-default', compact ? 'h-8px lg:h-10px w-8px lg:w-10px' : 'w-10px lg:w-12px h-10px lg:h-12px']"
/>
</div>
<!-- Popover panel that appears on hover -->
<transition
enter-active-class="transition duration-300 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-200 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<div
v-if="isPopoverVisible"
class="absolute mt-2 p-2 bg-app-bg-rating-hover w-240px shadow-lg rounded"
z-100
style="left: 50%; transform: translateX(-50%);"
flex
flex-col
gap-14px
px-16px
py-10px
@mouseenter="showPopover"
@mouseleave="hidePopover"
>
<div
v-for="item in items()"
:key="item.label"
flex
justify-between
items-center
text-12px
font-700
leading-20px
:class="{ 'text-app-text-rating-negative': !item.condition }"
>
<div
flex
items-center
gap-6px
>
<div
:class="[item.condition ? 'i-ic-sharp-thumb-up' : 'i-ic-sharp-thumb-down']"
text-20px
mt--4px
/>
{{ item.label }}
</div>
<NuxtLink
v-if="item.link"
:to="item.link"
target="_blank"
external
underline
@click.stop
>
Link
</NuxtLink>
<div v-else>
{{ item.condition ? item.positive : item.negative }}
</div>
</div>
</div>
</transition>
</div>
</template>

View file

@ -12,11 +12,32 @@ defineProps<{
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
i-material-symbols-lock-outline
text-24px
/>
</ProjectDetailCategoryDivider>
<ProjectDetailContainer>
<div v-if="project.audits">
<h2
text-18px
text-app-text-grey
my-24px
>
Audits
</h2>
<div flex flex-col gap="12px lg:16px">
<template
v-for="audit in project.audits"
:key="audit.name"
>
<ProjectSecurityAudit
:audit-name="audit.name"
:audit-url="audit.link"
:date="audit.time"
/>
</template>
</div>
</div>
<div
grid
grid-cols-2
@ -26,20 +47,11 @@ defineProps<{
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.asset_custody_type"
bold
title="Asset custody"
:check-undefined="project.technical_spof"
:color="project.technical_spof ? '#FF0000' : '#18FF2F'"
title="Technical dependency"
>
{{ project.blockchain_features?.asset_custody_type }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.upgradability"
title="Upgradability"
>
<b :color="project.blockchain_features?.upgradability?.enabled ? '#FF0000' : '#18FF2F'">
{{ project.blockchain_features?.upgradability?.enabled ? 'YES' : 'NO' }}
</b>
{{ ` ${project.blockchain_features?.upgradability?.type}` }}
{{ project.technical_spof }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.social_trust"
@ -55,47 +67,6 @@ defineProps<{
>
{{ project.third_party_dependency ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.technical_spof"
:color="project.technical_spof ? '#FF0000' : '#18FF2F'"
title="Technical dependency"
>
{{ project.technical_spof }}
</ProjectInfoItem>
</div>
<div my-24px>
<hr
border-t-2px
border-white
opacity-20
w-80px
>
</div>
<div v-if="project.audits">
<h2
text-18px
text-app-text-grey
my-24px
>
Audits
</h2>
<template
v-for="audit in project.audits"
:key="audit.name"
>
<ProjectSecurityAudit
:audit-name="audit.name"
:audit-url="audit.link"
:date="audit.time"
>
<NuxtImg
:src="audit.logo ?? '/no-image-1-1.svg'"
w-64px
h-64px
object-cover
/>
</ProjectSecurityAudit>
</template>
</div>
</ProjectDetailContainer>
</template>

View file

@ -9,36 +9,67 @@ defineProps<{
<template>
<div
flex
items-center
gap-16px
justify-between
lg:grid
lg:grid-cols-2
rounded-full
py-12px px-16px
bg-app-bg-audits-card
>
<slot />
<div
flex
flex-col
text-14px
font-700
leading-24px
grid grid-cols-3
w-full
>
<NuxtLink
hover:underline
flex
items-center
gap-8px
:to="auditUrl"
<h2
text="14px lg:16px"
leading-20px
font-700
col-span="3 lg:2"
>
{{ auditName }}
<UnoIcon
v-if="auditUrl"
i-web-openinnew
text-16px
/>
</NuxtLink>
<span
</h2>
<h2
text-14px
font-400
leading-24px
>{{ date }}</span>
leading-20px
hidden
lg:block
>
Overview of smart contracts
</h2>
</div>
<div
flex
items-center
justify-end
gap="16px lg:80px"
whitespace-nowrap
>
<h2
text-14px
leading-20px
>
{{ formatDate(date) }}
</h2>
<NuxtLink
flex
items-center
gap-4px
:to="auditUrl"
external
target="_blank"
text-14px
text-app-text-grey
leading-20px
hover:underline
><p
hidden
lg:block
>
More info
</p> <UnoIcon
i-ic-twotone-open-in-new
text-22px
/></NuxtLink>
</div>
</div>
</template>

View file

@ -12,7 +12,7 @@ defineProps<{
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
i-material-symbols-deployed-code-outline
text-24px
/>
</ProjectDetailCategoryDivider>
@ -21,100 +21,54 @@ defineProps<{
grid
grid-cols-2
items-start
mt-32px
mt-24px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.opensource"
title="Opensource"
bold
:color="project.blockchain_features?.opensource ? '#18FF2F' : '#FF0000'"
>
{{ project.blockchain_features?.opensource ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.asset_custody_type"
title="Asset custody"
:color="project.blockchain_features?.asset_custody_type === 'non-custody' ? '#18FF2F' : project.blockchain_features?.asset_custody_type === 'multisig' ? '#FFB800' : '#FF0000'"
bold
>
{{ project.blockchain_features?.asset_custody_type.toUpperCase() }}
</ProjectInfoItem>
<ProjectInfoItem
title="Upgradability"
bold
:check-undefined="project.blockchain_features?.upgradability"
:color="project.blockchain_features?.upgradability ? '#FF0000' : '#18FF2F' "
>
{{ project.blockchain_features?.upgradability ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.technology?.type"
title="Technology type"
bold
>
{{ project.technology?.type }}
{{ project.technology.type.toUpperCase() }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.encryption"
title="Encryption"
:check-undefined="project.blockchain_features?.p2p"
title="Peer to Peer (P2P)"
bold
>
{{ project.blockchain_features?.encryption }}
{{ project.blockchain_features?.p2p ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
title="License"
bold
:check-undefined="project.licences"
>
{{ project.licences }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.links?.whitepaper"
title="Whitepaper"
bold
:link="project.links?.whitepaper"
>
{{ project.links?.whitepaper ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div
grid
grid-cols-1
items-start
mt-16px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.project_status"
title="Version"
:check-undefined="project.storage?.decentralized"
title="Decentralized storage"
bold
>
<div
v-if="project.project_status?.live_status"
flex
items-center
gap-12px
>
<UnoIcon
i-web-live
text-10px
class="color-#B5E26B"
/>
<span>{{ `Live on ${project.project_status.version}` }}</span>
</div>
<div
v-else
flex
items-center
gap-12px
>
<UnoIcon
i-web-live
text-10px
class="color-#e26b6b"
/>
<span>{{ 'Offline' }}</span>
</div>
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.technology?.features"
title="Features"
bold
>
{{ project.technology?.features.join(', ') }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.client_diversability"
title="Client diversability"
bold
>
<template
v-for="item in project.client_diversability"
:key="item.name"
>
<NuxtLink :to="item.link">
{{ item.name }}
</NuxtLink><br>
</template>
{{ project.storage?.decentralized ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
</ProjectDetailContainer>

View file

@ -1,7 +1,7 @@
{
"name": "develitesse-nuxt",
"private": true,
"packageManager": "pnpm@9.9.0",
"packageManager": "pnpm@9.10.0",
"scripts": {
"build": "nuxt build",
"cleanup": "nuxt cleanup",
@ -17,8 +17,14 @@
},
"devDependencies": {
"@formkit/auto-animate": "^0.8.2",
"@iconify-json/bi": "^1.2.0",
"@iconify-json/heroicons-outline": "^1.2.0",
"@iconify-json/heroicons-solid": "^1.2.0",
"@iconify-json/ic": "^1.2.0",
"@iconify-json/iconoir": "^1.2.0",
"@iconify-json/material-symbols": "^1.2.1",
"@iconify-json/mdi": "^1.2.0",
"@iconify-json/simple-icons": "^1.2.2",
"@nuxt/devtools": "^1.4.1",
"@nuxt/eslint": "0.5.5",
"@nuxt/image": "^1.8.0",
@ -46,5 +52,8 @@
},
"lint-staged": {
"*": "eslint --fix"
},
"dependencies": {
"moment": "^2.30.1"
}
}

View file

@ -32,7 +32,7 @@ useSeoMeta({
<template>
<div v-if="project">
<div app-container>
<div app-container px-16px>
<div
flex
flex-col
@ -46,6 +46,7 @@ useSeoMeta({
<ProjectTechnology :project="project" />
<ProjectPrivacy :project="project" />
<ProjectSecurity :project="project" />
<ProjectHistory :project="project" />
<!-- <ProjectActivity :project="project" />
<ProjectMarket /> -->
</div>

View file

@ -7,16 +7,38 @@ settings:
importers:
.:
dependencies:
moment:
specifier: ^2.30.1
version: 2.30.1
devDependencies:
'@formkit/auto-animate':
specifier: ^0.8.2
version: 0.8.2
'@iconify-json/bi':
specifier: ^1.2.0
version: 1.2.0
'@iconify-json/heroicons-outline':
specifier: ^1.2.0
version: 1.2.0
'@iconify-json/heroicons-solid':
specifier: ^1.2.0
version: 1.2.0
'@iconify-json/ic':
specifier: ^1.2.0
version: 1.2.0
'@iconify-json/iconoir':
specifier: ^1.2.0
version: 1.2.0
'@iconify-json/material-symbols':
specifier: ^1.2.1
version: 1.2.1
'@iconify-json/mdi':
specifier: ^1.2.0
version: 1.2.0
'@iconify-json/simple-icons':
specifier: ^1.2.2
version: 1.2.2
'@nuxt/devtools':
specifier: ^1.4.1
version: 1.4.1(rollup@4.21.2)(vite@5.4.2(@types/node@20.8.7)(terser@5.22.0))
@ -1088,12 +1110,30 @@ packages:
resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
engines: {node: '>=18.18'}
'@iconify-json/bi@1.2.0':
resolution: {integrity: sha512-kaBV87cQlyeMkBBiMqsf3b43Nsxdk/rYKvR29dnktht57WUyHCnBAuH+ca/bscX856CzRpVX+sYs7arjrJD0qA==}
'@iconify-json/heroicons-outline@1.2.0':
resolution: {integrity: sha512-Qy1sRmQYqih6xRxwCtnX0hXJ4252t83C0CnNWAP3gF0fH0Qmp9RY66LMB0moYGxQxUhsTFIl2nNceSVSBUo8Tg==}
'@iconify-json/heroicons-solid@1.2.0':
resolution: {integrity: sha512-o+PjtMXPr4wk0veDS7Eh6H1BnTJT1vD7HcKl+I7ixdYQC8i1P2zdtk0C2v7C9OjJBMsiwJSCxT4qQ3OzONgyjw==}
'@iconify-json/ic@1.2.0':
resolution: {integrity: sha512-L4+m77xTQB08X3I+3xs1+IrvK+aNcuN/7ODu5aUPznHKLU+/8UYcsjUgNHze6vPOGPQ0AG+kCwvy91EYPXSRxw==}
'@iconify-json/iconoir@1.2.0':
resolution: {integrity: sha512-GbYAERFy9c1laIo1QZon9sBjRkX9rksirehmLIvvohn+W++fpPlvQnzVl0VpY/v2GCvs1pZ42spTKDj0AcofvA==}
'@iconify-json/material-symbols@1.2.1':
resolution: {integrity: sha512-r9yaBzlUmN87aCTSoCNtDCd7R9F0iVDjNPL9QHHhm1WglFJvTUKx9iBC5xcZpP0qN0bg9R5FkM90CndWxEBAnw==}
'@iconify-json/mdi@1.2.0':
resolution: {integrity: sha512-E9/3l5Syg3wfuarorFodhn4s8YorxhH3U3U20LaNBNiqw1kFNIDWhF6HymuzAD35k7RH0OBasJ+ZUyFtVVV6eg==}
'@iconify-json/simple-icons@1.2.2':
resolution: {integrity: sha512-VMgCoMnpvcCJ5b3rTOGPzW5j6959nIdRCk+8FGzK/vAaDd6f9sx65OcKOqP3C75llpybH/iQhk5yrJ/TOdQKeg==}
'@iconify/types@2.0.0':
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@ -1671,9 +1711,6 @@ packages:
'@types/eslint-scope@3.7.6':
resolution: {integrity: sha512-zfM4ipmxVKWdxtDaJ3MP3pBurDXOCoyjvlpE3u6Qzrmw4BPbfm4/ambIeTk/r/J0iq/+2/xp0Fmt+gFvXJY2PQ==}
'@types/eslint@8.44.6':
resolution: {integrity: sha512-P6bY56TVmX8y9J87jHNgQh43h6VVU+6H7oN7hgvivV81K2XY8qJZ5vqPy/HdUoVIelii2kChYVzQanlswPWVFw==}
'@types/eslint@9.6.1':
resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
@ -2821,9 +2858,6 @@ packages:
errx@0.1.0:
resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
es-module-lexer@1.3.1:
resolution: {integrity: sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==}
es-module-lexer@1.5.4:
resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
@ -3827,6 +3861,9 @@ packages:
mlly@1.7.1:
resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
moment@2.30.1:
resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
mri@1.2.0:
resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
engines: {node: '>=4'}
@ -6425,6 +6462,10 @@ snapshots:
'@humanwhocodes/retry@0.3.0': {}
'@iconify-json/bi@1.2.0':
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/heroicons-outline@1.2.0':
dependencies:
'@iconify/types': 2.0.0
@ -6433,6 +6474,26 @@ snapshots:
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/ic@1.2.0':
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/iconoir@1.2.0':
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/material-symbols@1.2.1':
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/mdi@1.2.0':
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/simple-icons@1.2.2':
dependencies:
'@iconify/types': 2.0.0
'@iconify/types@2.0.0': {}
'@iconify/utils@2.1.32':
@ -7223,13 +7284,8 @@ snapshots:
'@types/eslint-scope@3.7.6':
dependencies:
'@types/eslint': 8.44.6
'@types/estree': 1.0.3
'@types/eslint@8.44.6':
dependencies:
'@types/estree': 1.0.3
'@types/json-schema': 7.0.14
'@types/eslint': 9.6.1
'@types/estree': 1.0.5
'@types/eslint@9.6.1':
dependencies:
@ -7947,9 +8003,9 @@ snapshots:
dependencies:
event-target-shim: 5.0.1
acorn-import-assertions@1.9.0(acorn@8.11.2):
acorn-import-assertions@1.9.0(acorn@8.12.1):
dependencies:
acorn: 8.11.2
acorn: 8.12.1
acorn-import-attributes@1.9.5(acorn@8.12.1):
dependencies:
@ -8662,8 +8718,6 @@ snapshots:
errx@0.1.0: {}
es-module-lexer@1.3.1: {}
es-module-lexer@1.5.4: {}
esbuild@0.19.10:
@ -9865,6 +9919,8 @@ snapshots:
pkg-types: 1.2.0
ufo: 1.5.4
moment@2.30.1: {}
mri@1.2.0: {}
mrmime@2.0.0: {}
@ -10793,7 +10849,7 @@ snapshots:
schema-utils@3.3.0:
dependencies:
'@types/json-schema': 7.0.14
'@types/json-schema': 7.0.15
ajv: 6.12.6
ajv-keywords: 3.5.2(ajv@6.12.6)
@ -11141,7 +11197,7 @@ snapshots:
terser-webpack-plugin@5.3.9(esbuild@0.23.1)(webpack@5.89.0(esbuild@0.23.1)):
dependencies:
'@jridgewell/trace-mapping': 0.3.20
'@jridgewell/trace-mapping': 0.3.25
jest-worker: 27.5.1
schema-utils: 3.3.0
serialize-javascript: 6.0.1
@ -11724,16 +11780,16 @@ snapshots:
webpack@5.89.0(esbuild@0.23.1):
dependencies:
'@types/eslint-scope': 3.7.6
'@types/estree': 1.0.3
'@types/estree': 1.0.5
'@webassemblyjs/ast': 1.11.6
'@webassemblyjs/wasm-edit': 1.11.6
'@webassemblyjs/wasm-parser': 1.11.6
acorn: 8.11.2
acorn-import-assertions: 1.9.0(acorn@8.11.2)
browserslist: 4.22.2
acorn: 8.12.1
acorn-import-assertions: 1.9.0(acorn@8.12.1)
browserslist: 4.23.3
chrome-trace-event: 1.0.3
enhanced-resolve: 5.15.0
es-module-lexer: 1.3.1
es-module-lexer: 1.5.4
eslint-scope: 5.1.1
events: 3.3.0
glob-to-regexp: 0.4.1

View file

@ -35,7 +35,8 @@ export const collections = {
open1: '<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="gray" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg>',
matrix: '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><path d="M1.266 1.10241V46.8989H4.5615V48.0014H0V0.00141309H4.5615V1.10391L1.266 1.10241ZM15.3525 15.6179V17.9384H15.414C16.032 17.0459 16.782 16.3679 17.6475 15.8819C18.516 15.3974 19.524 15.1559 20.6475 15.1559C21.726 15.1559 22.7175 15.3674 23.61 15.7814C24.5085 16.2029 25.1805 16.9454 25.6485 17.9999C26.157 17.2499 26.853 16.5854 27.7185 16.0154C28.587 15.4454 29.619 15.1559 30.813 15.1559C31.719 15.1559 32.5545 15.2654 33.3285 15.4919C34.11 15.7094 34.767 16.0619 35.3205 16.5464C35.868 17.0399 36.297 17.6729 36.6105 18.4544C36.915 19.2344 37.071 20.1809 37.071 21.2909V32.7434H32.3775V23.0414C32.3775 22.4699 32.3535 21.9239 32.3055 21.4154C32.2755 20.9549 32.157 20.5094 31.947 20.0954C31.7505 19.7189 31.4475 19.4069 31.071 19.2059C30.6885 18.9779 30.1575 18.8699 29.5005 18.8699C28.836 18.8699 28.305 18.9944 27.8985 19.2434C27.501 19.4939 27.165 19.8374 26.9385 20.2439C26.697 20.6744 26.541 21.1499 26.4765 21.6344C26.3985 22.1579 26.361 22.6829 26.352 23.2064V32.7449H21.6555V23.1434C21.6555 22.6349 21.648 22.1354 21.618 21.6434C21.6015 21.1679 21.5085 20.7074 21.3285 20.2694C21.1725 19.8479 20.877 19.4954 20.5005 19.2614C20.118 19.0109 19.5465 18.8789 18.7965 18.8789C18.57 18.8789 18.2745 18.9254 17.9145 19.0274C17.5545 19.1279 17.196 19.3154 16.86 19.5899C16.5165 19.8719 16.218 20.2694 15.9765 20.7854C15.735 21.2999 15.618 21.9794 15.618 22.8239V32.7539H10.9215V15.6224L15.3525 15.6179ZM46.734 46.8974V1.10091H43.4385V-0.00158691H48V47.9984H43.4385V46.8959L46.734 46.8974Z" fill="white"/></svg>',
news: '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><g opacity="1"><mask id="mask0_2258_10849" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28"><rect width="28" height="28" fill="#D9D9D9"/></mask><g mask="url(#mask0_2258_10849)"><path d="M4.66146 24.5C4.01979 24.5 3.47049 24.2715 3.01354 23.8146C2.5566 23.3576 2.32812 22.8083 2.32812 22.1667V5.83333C2.32812 5.19167 2.5566 4.64236 3.01354 4.18542C3.47049 3.72847 4.01979 3.5 4.66146 3.5H23.3281C23.9698 3.5 24.5191 3.72847 24.976 4.18542C25.433 4.64236 25.6615 5.19167 25.6615 5.83333V22.1667C25.6615 22.8083 25.433 23.3576 24.976 23.8146C24.5191 24.2715 23.9698 24.5 23.3281 24.5H4.66146ZM4.66146 22.1667H23.3281V5.83333H4.66146V22.1667ZM6.99479 19.8333H20.9948V17.5H6.99479V19.8333ZM6.99479 15.1667H11.6615V8.16667H6.99479V15.1667ZM13.9948 15.1667H20.9948V12.8333H13.9948V15.1667ZM13.9948 10.5H20.9948V8.16667H13.9948V10.5Z" fill="white"/></g></g></svg>',
solid_arrow_down: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 5L0 0H10L5 5Z" fill="black"/></svg>',
solid_arrow_up: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 -4.37114e-07L10 5L0 5L5 -4.37114e-07Z" fill="white"/></svg>',
arrow_down: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 5L0 0H10L5 5Z" fill="black"/></svg>',
arrow_up: '<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 -4.37114e-07L10 5L0 5L5 -4.37114e-07Z" fill="white"/></svg>',
thumb_up: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_308_7787" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16"><rect width="16" height="16" fill="#D9D9D9"/></mask><g mask="url(#mask0_308_7787)"><path d="M11.9987 14.0013H5.33203V5.33464L9.9987 0.667969L10.832 1.5013C10.9098 1.57908 10.9737 1.68464 11.0237 1.81797C11.0737 1.9513 11.0987 2.07908 11.0987 2.2013V2.43464L10.3654 5.33464H13.9987C14.3543 5.33464 14.6654 5.46797 14.932 5.73463C15.1987 6.0013 15.332 6.31241 15.332 6.66797V8.0013C15.332 8.07908 15.3237 8.16241 15.307 8.2513C15.2904 8.34019 15.2654 8.42352 15.232 8.5013L13.232 13.2013C13.132 13.4235 12.9654 13.6124 12.732 13.768C12.4987 13.9235 12.2543 14.0013 11.9987 14.0013ZM3.9987 5.33464V14.0013H1.33203V5.33464H3.9987Z" fill="white"/></g></svg>',
},
}

View file

@ -50,9 +50,29 @@ export default defineConfig({
bg: {
grey: '#ffffff33',
dark_grey: '#161616',
rating: {
default: '#494949',
red: '#FF4218',
orange: '#FF9900',
yellow: '#FFE600',
green: '#42FF00',
hover: '#202020',
},
team: {
grey: '#404040',
},
funding: {
card: '#101010',
},
audits: {
card: '#191919',
},
},
text: {
grey: '#909090',
rating: {
negative: '#FFB800',
},
},
},
},