web3privacy/explorer-app
1
0
Fork 0
mirror of https://github.com/web3privacy/explorer-app.git synced 2024-10-15 16:46:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/v3' into dw/form

Browse source
This commit is contained in:
DomWane 2024-09-18 10:48:08 +02:00
commit 0f9c57a6bc
45 changed files with 1980 additions and 1364 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
.github/workflows/ci.yml vendored
View file

@ -1,77 +1,38 @@
name: CI
on:
push:
branches:
- main
branches: [main, v3]
pull_request:
branches:
- main
- dev
branches: [main, v3]
jobs:
codechecks:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
- uses: actions/cache@v2
- name: Checkout the repository
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
path: ~/.pnpm-store
key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
run_install: false
- name: Install Node.js 20
uses: actions/setup-node@v4
with:
node-version: 20.x
cache: pnpm
- name: Enable Corepack
run: corepack enable
- name: Get pnpm store directory
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
- name: Cache the pnpm lock file
uses: actions/cache@v4
with:
path: ${{ env.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-
- name: Install Dependencies
${{ runner.os }}-pnpm-store-
- name: Install package dependencies
run: pnpm install
- name: Typecheck
run: pnpm run typecheck
- name: Lint
- name: Lint the code
run: pnpm run lint
# build:
# runs-on: ubuntu-latest
# steps:
# - uses: actions/checkout@v3
# - uses: pnpm/action-setup@v2
# - uses: actions/setup-node@v3
# with:
# node-version: 16.x
# cache: pnpm
# - name: Install
# run: pnpm install
# - name: Build
# run: pnpm run build
# test-e2e:
# runs-on: ubuntu-latest
# steps:
# - uses: actions/checkout@v3
# - uses: actions/cache@v3
# with:
# path: |
# ~/.cache
# key: cypress-cache-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
# - uses: pnpm/action-setup@v2
# - uses: pnpm/action-setup@v2
# - uses: actions/setup-node@v3
# with:
# node-version: 16.x
# cache: pnpm
# - name: Install
# run: pnpm install
# - name: Cypress PNPM Patch
# run: cp pnpm-lock.yaml package-lock.json
# - name: Cypress [Hub]
# uses: cypress-io/github-action@v4
# with:
# install-command: echo
# build: pnpm hub:generate
# start: pnpm hub:preview

4
app.config.ts
View file

@ -1,7 +1,7 @@
export default defineAppConfig({
github: {
appId: null,
appId: 0,
privateKey: '',
installationId: null,
installationId: 0,
},
})

353
components/Card.vue
View file

@ -1,10 +1,14 @@
<script lang="ts" setup>
import type { ProjectShallow } from '~/types'
import type { ProjectRating, ProjectShallow } from '~/types'
defineProps<{
const props = defineProps<{
project: ProjectShallow
}>()
const { switcher } = storeToRefs(useData())
const { switcher, ecosystems } = storeToRefs(useData())
const ratings: { label: string, type: string, rating: ProjectRating }[] = (props.project.ratings || []).map(rating => ({ label: rating.name, type: 'rating', rating: rating }))
const ecosystem: { label: string[], type: string } = { label: ecosystems.value.filter(e => (props.project.ecosystem || []).includes(e.id)).map(e => e.icon!), type: 'ecosystem' }
const projectItems: { label: string | string[], type: string, rating?: ProjectRating }[] = [{ label: props.project.usecases || [], type: 'array' }, ...ratings, ecosystem, { label: [props.project.website || '', props.project.github || '', props.project.twitter || ''], type: 'links' }]
</script>
<template>
@ -18,230 +22,179 @@ const { switcher } = storeToRefs(useData())
transition-all
>
<div
relative
max-w="96px lg:200px"
grid
grid-cols="2 lg:10"
w-full
h="96px lg:200px"
:class="switcher ? '' : 'lg:max-w-full! lg:w-full '"
>
<div
col-span="1 lg:2"
flex
items-center
justify-center
gap="12px lg:16px"
relative
w-full
my-auto
h-full
h="48px lg:64px"
:class="switcher ? '' : 'lg:max-w-full! lg:w-full '"
>
<NuxtImg
:src="project?.image || '/no-image-1-1.svg'"
class="w-full h-auto"
max-h="md:196px 96px"
max-h="md:64px 48px"
max-w="md:64px 48px"
self-center
z-10
object-fit
bg="#121212"
/>
<div
flex
flex-col
gap-y-4px
lg:flex-row
justify-center
>
<div
w-fit
flex
items-center
gap-8px
@click.prevent="navigateTo(project.website, { external: true, open: { target: '_blank' } })"
>
<h1
text="14px app-white"
font-700
line-clamp-1
hover:underline
underline-offset-3
leading="20px lg:32px"
>
{{ project.title1 }}
</h1>
</div>
<p
text-12px
leading-16px
lg:hidden
>
{{ project.usecases?.join(', ') }}
</p>
</div>
</div>
<ClientOnly>
<Badge
v-if="project.percentage"
absolute
bottom-0.5
lg:bottom-0
right-0.5
lg:right-0
mr-2px
mb-2px
:text="`${project.percentage}%`"
class="leading-12px! text-12px! lg:text-18px! border-0!"
px="4px! lg:16px!"
py="4px! lg:8px!"
/>
</ClientOnly>
</div>
<div
h="96px lg:200px"
lg:py-24px
lg:pr-24px
flex
flex-col
justify-center
lg:justify-between
lg:gap-24px
w-full
text-white
:class="switcher ? '' : 'lg:p-16px! lg:py-16px!'"
>
<div
w-full
h-fit
flex
flex-col
gap-8px
>
<div
w-fit
flex
items-center
gap-8px
@click.prevent="navigateTo(project.website, { external: true, open: { target: '_blank' } })"
>
<h1
text="18px lg:24px app-white"
font-700
line-clamp-1
hover:underline
underline-offset-3
>
{{ project.title1 }}
</h1>
<UnoIcon
i-web-open
text-16px
/>
</div>
<h2
text="14px app-text-grey"
overflow-hidden
text-ellipsis
line-clamp-2
lg:line-clamp-2
>
{{ project.description }}
</h2>
</div>
<div
w-full
flex
justify-between
>
<div
w-full
max-w-692px
grid
whitespace-nowrap
:class="switcher ? 'grid-cols-5' : 'grid-cols-3'"
gap-24px
lg:grid
hidden
>
<ProjectInfoItem
:check-undefined="project?.github"
:link="project?.github"
title="Github"
bold
text-size="18px"
>
<div
flex
items-center
gap-8px
>
<UnoIcon
i-web-github
text-16px
/>
<span>{{ project?.github ? 'YES' : 'NO' }}</span>
</div>
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.readyness"
title="Readyness"
text-size="18px"
>
<div
flex
items-center
gap-12px
>
<UnoIcon
i-web-live
text-10px
:class="(project.readyness === 'Mainnet') ? 'color-#18FF2F' : (project.readyness === 'Testnet') ? 'color-#FFA800' : (project.readyness === 'Alpha') ? 'color-#FF0000' : ''"
/>
<span :class="(project.readyness === 'Alpha') ? 'color-#FFA800' : 'color-white'">{{ project.readyness }}</span>
</div>
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="true"
title="Team"
text-size="18px"
>
<span v-if="project.team?.length">{{ `${project.team?.length} members` }}</span>
<span
v-else
color="#FF0000"
>{{ 'Anonymous' }}</span>
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project?.docs"
:link="project?.docs"
:color="project?.docs ? '#18FF2F' : '#FF0000'"
title="Docs"
bold
text-size="18px"
>
{{ project?.docs ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.audits"
:link="project?.audits?.[0]?.link ?? undefined"
:color="project?.audits ? '#18FF2F' : '#FF0000'"
title="Audit"
bold
text-size="18px"
>
{{ project.audits ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div
v-for="(projectItem, index) of projectItems"
:key="projectItem.label.toString()"
hidden
lg:flex
items-center
text-14px
leading-24px
:class="{ 'col-span-1 lg:col-span-2': index === 0 }"
>
<p
v-if="projectItem.type === 'array'"
text-app-text-grey
>
{{ (projectItem.label as string[] || []).join(', ') }}
</p>
<div
v-if="projectItem.type === 'links'"
flex
items-center
justify-start
gap-16px
>
<NuxtLink
v-if="projectItem.label[1]"
:to="projectItem.label[1]"
external
target="_blank"
>
<UnoIcon
i-ic-baseline-language
text="24px app-text-grey"
/>
</NuxtLink>
<NuxtLink
v-if="projectItem.label[2]"
:to="projectItem.label[2]"
external
target="_blank"
>
<UnoIcon
i-mdi-github
text="24px app-text-grey"
text-27px
/>
</NuxtLink>
<NuxtLink
v-if="projectItem.label[0]"
:to="projectItem.label[0]"
external
target="_blank"
>
<UnoIcon
i-bi-twitter-x
text="24px app-text-grey"
/>
</NuxtLink>
</div>
<div
v-if="projectItem.type === 'ecosystem'"
flex
items-center
justify-start
gap-2px
>
<NuxtImg
v-for="ecosystem of projectItem.label"
:key="ecosystem"
:src="ecosystem"
w-24px
h-24px
rounded-full
/>
</div>
<ProjectRating
v-if="projectItem.type! === 'rating' && projectItem.rating"
:percentage="projectItem.rating.points"
:rating="projectItem.rating"
:type="projectItem.rating.type"
/>
</div>
<div
flex
items-center
justify-end
w-full
gap-16px
>
<UnoIcon
v-if="project.forum"
i-web-forum
text-28px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.forum, { external: true, open: { target: '_blank' } })"
/>
<UnoIcon
v-if="project.explorer"
i-web-explorer
text-32px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.explorer, { external: true, open: { target: '_blank' } })"
/>
<UnoIcon
v-if="project.twitter"
i-web-twitter_x
text-22px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.twitter, { external: true, open: { target: '_blank' } })"
/>
<UnoIcon
v-if="project.coingecko"
i-web-coingecko
text-24px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.coingecko, { external: true, open: { target: '_blank' } })"
/>
<UnoIcon
v-if="project.newsletter"
i-web-news
text-28px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.newsletter, { external: true, open: { target: '_blank' } })"
block
lg:hidden
i-iconoir-internet
text="24px"
/>
<div
flex
items-center
justify-center
border="2px app-white"
text="14px md:18px"
leading="24px md:32px"
max-h-="28px md:32px"
max-w="48px md:56px"
w-full
font-700
whitespace-nowrap
>
{{ project.percentage }} %
</div>
</div>
</div>
</ClientOnly>
</div>
</NuxtLink>
</template>

29
components/CategorySelectBox.vue
View file

@ -3,8 +3,9 @@ import type { InputOption } from '~/types'
const props = defineProps<{
options: InputOption[]
modelValue: string
modelValue: string | number
count?: number
titleShowCount?: boolean
}>()
const emits = defineEmits(['update:modelValue', 'selected'])
@ -13,7 +14,7 @@ const selectedValue = useVModel(props, 'modelValue', emits)
const isOptionSelected = computed(() => {
return props.options.find(option => option.value === selectedValue.value)
})
function onOptionSelected(value: string) {
function onOptionSelected(value: string | number) {
emits('selected', value)
}
</script>
@ -23,15 +24,18 @@ function onOptionSelected(value: string) {
v-model="selectedValue"
as="div"
>
<div class="relative mt-2 font-700 font-24px">
<div class="relative font-700 font-24px">
<HeadlessListboxButton
class="relative w-full cursor-pointer py-8px p-16px text-left border-2px text-app-white sm:text-sm sm:leading-6"
class="relative cursor-pointer py-6px px-14px text-left border-2px bg-app-white text-app-black sm:text-sm sm:leading-6"
>
<span class="block truncate mr-8px">{{ isOptionSelected?.label }} <span v-if="isOptionSelected?.count" opacity-50>({{ isOptionSelected?.count }})</span></span>
<span class="block truncate mr-8px font">{{ isOptionSelected?.label }} <span
v-if="titleShowCount"
opacity-50
>({{ isOptionSelected?.count }})</span></span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<UnoIcon
i-heroicons-solid-chevron-down
text-app-white
i-ic-baseline-arrow-drop-down
text-app-black
/>
</span>
</HeadlessListboxButton>
@ -42,7 +46,7 @@ function onOptionSelected(value: string) {
leave-to-class="opacity-0"
>
<HeadlessListboxOptions
class="absolute z-100 max-h-60 w-full divide-y-2px border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm"
class="absolute z-100 max-h-60 w-auto border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm"
>
<HeadlessListboxOption
v-for="option in props.options"
@ -53,15 +57,18 @@ function onOptionSelected(value: string) {
@click="onOptionSelected(option.value)"
>
<li
class="w-full relative cursor-pointer select-none py-8px p-16px"
:class="[active ? 'bg-#ffffff1a' : 'text-white']"
class="w-full relative cursor-pointer select-none py-8px p-16px bg-app-black text-app-white"
:class="[active ? 'text-app-white' : 'text-app-white']"
>
<span
class="block truncate"
:class="[selected ? 'font-semibold' : 'font-normal']"
>
{{ option.label }}
<span v-if="option.count" opacity-50>({{ option.count }})</span>
<span
v-if="titleShowCount"
opacity-50
>({{ option.count }})</span>
</span>
</li>
</HeadlessListboxOption>

1
components/EditButton.vue
View file

@ -13,6 +13,7 @@ defineProps<{
>
<UnoIcon
i-heroicons-solid-pencil
text-app-text-grey
text-24px
/>
<slot />

2
components/Project/Create/Categories/Assets.vue
View file

@ -44,7 +44,7 @@ function useTokens(project?: Partial<Project>) {
const { tokens, newToken, addToken, removeToken } = useTokens(props.project)
const assetsUsed = ref<string[]>(Array.isArray(props.project?.assets_used) ? props.project?.assets_used.map(a => a.toLowerCase()) : [])
const { assetsData } = useData()
const { assets: assetsData } = useData()
const { saveProject } = useProject()
function save() {

2
components/Project/Create/Categories/BasicInfo.vue
View file

@ -6,7 +6,7 @@ const props = defineProps<{
project?: Partial<Project>
}>()
const { categoriesData, usecasesData, ecosystemsData } = useData()
const { categories: categoriesData, usecases: usecasesData, ecosystems: ecosystemsData } = useData()
const { saveProject } = useProject()
const validationSchema = yup.object().shape({

2
components/Project/Create/Categories/Privacy.vue
View file

@ -13,7 +13,7 @@ const signRequirements = ref(Array.isArray(props.project?.tracebility?.sign_in_t
const trackedData = ref(props.project?.tracebility?.tracked_data || '')
const dataUsage = ref(props.project?.privacy_policy?.data_usage || '')
const { signInRequirmentsData } = useData()
const { signInRequirments: signInRequirmentsData } = useData()
const { saveProject } = useProject()
function save() {

2
components/Project/Create/Categories/Technology.vue
View file

@ -13,7 +13,7 @@ const encryption = ref(props.project?.blockchain_features?.encryption || '')
const peerToPeer = ref(props.project?.blockchain_features?.p2p)
const decentralizedStorage = ref(props.project?.storage?.decentralized)
const { projectPhaseData, assetCustodyData } = useData()
const { projectPhase: projectPhaseData, assetCustody: assetCustodyData } = useData()
const { saveProject } = useProject()
function save() {

11
components/Project/ProjectActivity.vue
View file

@ -23,11 +23,12 @@ defineProps<{
>
<div mt-32px>
<ProjectActivityLaunch
v-if="project.history"
:network="project.history?.title"
:date="project.history?.time"
:launch-type="project.history?.description"
:to="project.history?.link"
v-for="launch in project.history"
:key="launch.title"
:network="launch.title"
:date="launch.time"
:launch-type="launch.description"
:to="launch.link"
/>
</div>
<div

3
components/Project/ProjectDetailCategoryDivider.vue
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 }}

2
components/Project/ProjectDetailContainer.vue
View file

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

190
components/Project/ProjectGrid.vue
View file

@ -2,15 +2,35 @@
import type { ProjectShallow } from '~/types'
const props = defineProps<{
projects: ProjectShallow[]
projects: { title: string, projects: ProjectShallow[] }[]
}>()
const { switcher } = storeToRefs(useData())
const { switcher, filter } = storeToRefs(useData())
const displayCount = ref(100)
const displayedProjects = computed(() => props.projects.slice(0, displayCount.value))
function showMoreProjects() {
displayCount.value += 50
const totalProjectsCount = props.projects.map(g => g.projects.length).reduce((a, b) => a + b, 0)
function onChangeSort(sortKey: string) {
if (filter.value.sortby === sortKey) {
if (filter.value.sortDirection === 'desc' && filter.value.sortby !== 'score') {
filter.value.sortby = 'score'
filter.value.sortDirection = 'desc'
return
}
filter.value.sortDirection = filter.value.sortDirection === 'asc' ? 'desc' : 'asc'
return
}
filter.value.sortby = sortKey
filter.value.sortDirection = sortKey === 'score' ? 'desc' : 'asc'
}
const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[]>([
{ label: 'Usecase', sortKey: 'usecase' },
{ label: 'Openess', sortKey: 'openess', togglable: true },
{ label: 'Technology', sortKey: 'technology', togglable: true },
{ label: 'Privacy', sortKey: 'privacy', togglable: true },
{ label: 'Ecosystem', sortKey: 'ecosystem' },
{ label: 'Links', sortKey: 'links' },
{ label: 'W3PN Score', sortKey: 'score', togglable: true },
])
</script>
<template>
@ -19,36 +39,138 @@ function showMoreProjects() {
flex-col
items-start
>
<div
v-if="displayedProjects.length"
grid
:class="switcher ? 'grid-cols-1 lg:grid-cols-1' : 'xl:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1'"
gap-16px
text-white
w-full
<template
v-for="group in projects"
:key="group.title"
>
<Card
v-for="project in displayedProjects"
:key="project.id"
:project="project"
/>
</div>
<div v-else>
<div
flex
items-center
gap-x-12px
w-full
mb="8px lg:16px"
mt-22px
>
<h2
text="app-white 16px lg:24px"
font-700
leading="24px lg:32px"
whitespace-nowrap
>
{{ group.projects.length }} {{ group.title }}
</h2>
<div
h-2px
w-full
bg-app-text-grey
/>
<button
type="button"
i-ic-baseline-arrow-drop-down
text="app-text-grey 24px"
/>
</div>
<div
grid
grid-cols="2 lg:10"
w-full
mb-16px
>
<div
flex
items-center
gap-4px
col-span="1 lg:2"
:class="['title' === filter.sortby ? 'text-app-white' : 'text-app-text-grey', 'cursor-pointer']"
@click="onChangeSort('title')"
>
<p
text="12px lg:14px"
leading="16px lg:24px"
whitespace-nowrap
>
Project name
</p>
<button
type="button"
:class="['title' === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-up'
: 'i-ic-baseline-arrow-drop-down'
: 'i-ic-baseline-arrow-drop-down']"
text="20px"
/>
</div>
<div
flex
items-center
justify-end
gap-4px
lg:hidden
>
<p
text="12px lg:14px app-text-grey"
leading="16px lg:24px"
>
Sort by:
</p>
<p
text="12px lg:14px"
leading="16px lg:24px"
font-700
>
Score
</p>
<button
type="button"
i-ic-baseline-arrow-drop-down
text="app-text-grey 20px"
/>
</div>
<div
v-for="(title, index) in cardTitles"
:key="title.label"
lg:flex
items-center
justify-start
last:justify-end
gap-4px
hidden
:class="[title.sortKey === filter.sortby ? 'text-app-white' : 'text-app-text-grey', { 'cursor-pointer': title.togglable, 'col-span-1 lg:col-span-2': index === 0 }]"
@click="onChangeSort(title.sortKey)"
>
<p
text="12px lg:14px "
leading="16px lg:24px"
whitespace-nowrap
>
{{ title.label }}
</p>
<button
v-if="title.togglable"
type="button"
:class="[title.sortKey === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-up'
: 'i-ic-baseline-arrow-drop-down'
: 'i-ic-baseline-arrow-drop-down']"
text=" 20px"
/>
</div>
</div>
<div
grid
:class="switcher ? 'grid-cols-1 lg:grid-cols-1' : 'xl:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1'"
gap-16px
text-white
w-full
>
<Card
v-for="project in group.projects"
:key="project.id"
:project="project"
/>
</div>
</template>
<div v-if="totalProjectsCount === 0">
<h3>No Projects found...</h3>
</div>
<button
v-if="displayedProjects.length < projects.length"
mt-29px
text="14px"
leading-24px
font-700
px-12px
py-4px
border-2px
border-app-white
@click="showMoreProjects"
>
Load more projects
</button>
</div>
</template>

349
components/Project/ProjectHeading.vue
View file

@ -1,17 +1,17 @@
<script lang="ts" setup>
import type { Project, ProjectIndexable } from '~/types'
import type { Project } from '~/types'
const props = defineProps<{
project: Project
}>()
const availableSupport = computed(() => {
const filteredKeys = ['forum', 'discord', 'twitter', 'lens', 'farcaster', 'telegram']
if (typeof props.project.links === 'object' && (props.project.links !== null || props.project.links !== undefined))
return Object.keys(props.project.links).filter(key => filteredKeys.includes(key)).length
// const availableSupport = computed(() => {
// const filteredKeys = ['forum', 'discord', 'twitter', 'lens', 'farcaster', 'telegram']
// if (typeof props.project.links === 'object' && (props.project.links !== null || props.project.links !== undefined))
// return Object.keys(props.project.links).filter(key => filteredKeys.includes(key)).length
return 0
})
// return 0
// })
/**
* From data points
@ -21,78 +21,42 @@ const availableSupport = computed(() => {
- team: anon / public
- audit: yes / no
*/
const calculateScore = computed(() => {
const criterias: { value: keyof ProjectIndexable, key: keyof ProjectIndexable | '' }[] = [
{ value: 'product_readiness', key: '' },
{ value: 'github', key: 'links' },
{ value: 'docs', key: 'links' },
{ value: 'team', key: '' },
{ value: 'audits', key: '' },
]
let matched = 0
for (let i = 0; i < criterias.length; i++) {
let value
// value = ((criterias[i].key ?? props.project[criterias[i].value as keyof typeof props.project]) ?? null === null) ? null : (props.project as ProjectIndexable)[criterias[i].key][criterias[i].value]
const indexableProject = props.project as ProjectIndexable
if (criterias[i].key !== '')
value = (indexableProject[criterias[i].key] as any)?.[criterias[i].value]
else
value = indexableProject?.[criterias[i].value]
if (value === null || value === undefined)
continue
if (fulfilled(value))
matched++
}
return 100 / criterias.length * matched
})
function fulfilled(value: any): boolean {
const type = typeof value
switch (type) {
case 'string':
if (value !== '')
return true
break
case 'object':
if (Object.keys(value!).length > 0)
return true
break
default:
return false
}
return false
}
const logo = props.project?.logos?.at(0)?.url
</script>
<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"
@ -110,139 +74,154 @@ 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
items-center
justify-center
px-32px
py-16px
text-32px
font-700
leading-40px
cursor-pointer
lg:grid
grid-cols-10
w-full
items-center
mt-4px
>
{{ `${calculateScore}%` }}
<h2
hidden
lg:block
>
Usecases:
</h2>
<p
text-app-white
col-span-9
>
Swap, Mixer
</p>
</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"
<div
grid
grid-cols-2
gap-y-12px
lg:flex
lg:flex-col
order-3
lg:order-2
w-full
>
<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"
<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
>
<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
flex
items-center
justify-between
lg:justify-start
lg:gap-24px
col-span-3
>
<div
v-for="rating of project.ratings"
:key="rating.name"
flex
flex-col
lg:flex-row
items-center
>
<p
text="12px lg:16px"
leading="16px lg:24px"
>
{{ rating.name }}:
</p>
<ProjectRating
:rating="rating"
:percentage="rating.points"
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
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
whitespace-nowrap
py="2px lg:8px"
lg:py-4px
>
{{ calculateScore(project) }} %
</div>
</div>
</div>
</div>
</div>
</div>

36
components/Project/ProjectHistory.vue Normal file
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>

7
components/Project/ProjectNavigation.vue
View file

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

355
components/Project/ProjectOpeness.vue
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,63 @@ defineProps<{
<template #prefix>
<UnoIcon
i-web-farcaster
text-26px
text="24px app-text-grey"
/>
</template>
{{ 'Farcaster' }}
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.telegram"
:to="project.links.telegram"
>
<template #prefix>
<UnoIcon
i-web-telegram
opacity-30
text-22px
/>
</template>
{{ 'Telegram' }}
Farcaster
</ProjectOpenessLink>
</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
>
<ProjectInfoItem
:check-undefined="project.product_launch_day"
title="Product launch day"
<ProjectOpenessTeamMembers
v-if="project?.team?.teammembers"
:members="project.team?.teammembers"
mt-24px
/>
<div mt-32px>
<h3
text="app-text-grey 14px lg:16px"
leading-24px
>
{{ 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
Funding
</h3>
<div
v-for="funding of project.funding"
:key="funding.name"
flex
items-center
justify-between
rounded-full
w-full
bg-app-bg-funding-card
px-24px
py-12px
mt-12px
>
<template
v-for="fund in project.funding"
:key="fund.name"
<h3
text="14px lg:16px"
leading="20px lg:24px"
font-700
>
<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>
{{ funding.name }}
</h3>
<NuxtLink
:to="funding.link"
external
target="_blank"
>
<UnoIcon
i-ic-twotone-open-in-new
text="22px app-text-grey"
/>
</NuxtLink>
</div>
<h3
v-if="!project.funding?.length"
text="app-text-grey 14px lg:16px"
leading-24px
>
N/A
</h3>
</div>
</ProjectDetailContainer>
</template>

68
components/Project/ProjectOpenessTeamMembers.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
const props = defineProps<{
members: {
name: string
name?: string
role?: string
link?: string
}[] | undefined
@ -32,58 +32,32 @@ 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
flex
flex-col
@ -92,10 +66,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>

190
components/Project/ProjectPrivacy.vue
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>

131
components/Project/ProjectRating.vue Normal file
View file

@ -0,0 +1,131 @@
<script lang="ts" setup>
import type { ProjectRating } from '~/types'
// Define props for score
const props = defineProps<{
rating: ProjectRating
percentage: number
compact?: boolean
}>()
const colors = [
'#ff0000', // 0-10%
'#ff4500', // 11-20%
'#ff8c00', // 21-30%
'#ffd700', // 31-40%
'#adff2f', // 41-50%
'#7fff00', // 51-60%
'#00ff00', // 61-70%
'#32cd32', // 71-80%
'#00fa9a', // 81-90%
'#00ffff', // 91-100%
]
const backgroundColorByScore = computed(() => {
const normalizedPercentage = Math.min(Math.max(props.percentage, 0), 100)
const colorIndex = Math.floor(normalizedPercentage / 10)
return colors[colorIndex]
})
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
}
</script>
<template>
<div class="relative">
<!-- Main div that shows rating and triggers the popover on hover -->
<div
flex
items-center
p-12px
gap-4px
hover:bg-app-bg-rating-hover
hover:rounded-8px
@mouseenter="showPopover"
@mouseleave="hidePopover"
>
<div
v-for="point of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
:key="point"
:style="`background-color: ${percentage >= point * 10 ? backgroundColorByScore : '#494949'}`"
:class="[compact ? 'h-8px lg:h-10px w-4px lg:w-5px' : 'w-5px lg:w-6px h-10px lg:h-12px', point % 2 === 0 ? 'rounded-l-2px' : 'rounded-r-2px ml--4px', 'bg-app-bg-rating-default']"
/>
</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 rating.items"
:key="item.label"
flex
justify-between
items-center
text-12px
font-700
leading-20px
:class="[item.isValid ? 'text-app-white': 'text-app-text-rating-negative']"
>
<div
flex
items-center
gap-6px
>
<div
:class="[item.isValid ? 'i-ic-sharp-thumb-up' : 'i-ic-sharp-thumb-down']"
text-20px
mt--4px
/>
{{ item.label }}
</div>
<NuxtLink
v-if="item.isValid && item.positive === 'Link'"
:to="item.value"
target="_blank"
external
underline
@click.stop
>
{{ item.positive }}
</NuxtLink>
<div v-else>
{{ item.isValid ? item.positive : item.negative }}
</div>
</div>
</div>
</transition>
</div>
</template>

85
components/Project/ProjectSecurity.vue
View file

@ -12,11 +12,36 @@ 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 +51,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 +71,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>

81
components/Project/ProjectSecurityAudit.vue
View file

@ -9,36 +9,69 @@ 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
>
{{ date ? formatDate(date) : 'N/A' }}
</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>

112
components/Project/ProjectTechnology.vue
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>

9
components/SearchBox.vue
View file

@ -1,6 +1,8 @@
<script setup lang="ts">
import type { InputOption } from '~/types'
defineProps<{ placeholder?: string, includeSort?: boolean }>()
const { filter, switcher } = storeToRefs(useData())
const options: InputOption[] = [
{ label: 'A to Z', value: 'atoz' },
@ -22,8 +24,8 @@ const isSearchFocused = ref(false)
border-2px
flex
items-center
max-w-320px
w-full
h-40px
hover:opacity-100
:class="isSearchFocused ? 'opacity-100' : 'opacity-25'"
>
@ -34,7 +36,7 @@ const isSearchFocused = ref(false)
w-fit
>
<UnoIcon
i-web-search
i-heroicons-solid-magnifying-glass
text-16px
:class="isSearchFocused ? 'opacity-100' : 'opacity-50' "
class="uno-icon"
@ -42,6 +44,7 @@ const isSearchFocused = ref(false)
</div>
<input
v-model="filter.query"
:placeholder="placeholder"
type="text"
bg-transparent
border-transparent
@ -54,7 +57,7 @@ const isSearchFocused = ref(false)
@blur="isSearchFocused = false"
>
</div>
<div>
<div v-if="includeSort">
<div
flex
gap-24px

4
components/SelectBox.vue
View file

@ -42,8 +42,8 @@ const selectedValue = useVModel(props, 'modelValue', emits)
</span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<UnoIcon
i-heroicons-solid-chevron-down
:class="[blackAndWhite ? 'text-app-white' : 'text-app-black']"
i-ic-baseline-arrow-drop-down
:class="[blackAndWhite ? ' text-app-white' : 'text-app-black']"
/>
</span>
</HeadlessListboxButton>

2
components/Tabs.vue
View file

@ -3,7 +3,7 @@ import type { InputOption } from '~/types'
const props = defineProps<{
options: InputOption[]
modelValue: string
modelValue: string | number
}>()
const emits = defineEmits(['update:modelValue'])

231
composables/useData.ts
View file

@ -1,32 +1,49 @@
import type { Category, Project, ProjectShallow } from '~/types'
import type { Category, Project, ProjectRating, ProjectRatingItem, ProjectShallow } from '~/types'
import type { Asset } from '~/types/asset'
import type { Ecosystem } from '~/types/ecosystem'
import type { Feature } from '~/types/feature'
import type { Rank } from '~/types/rank'
import type { Usecase } from '~/types/usecase'
export const useData = defineStore('data', () => {
const assetsData = useState<{ id: string, name: string }[]>('assetsData')
const categoriesData = useState<{ id: string, name: string }[]>('categoriesData')
const featuresData = useState<{ id: string, name: string }[]>('featuresData')
const ecosystemsData = useState<{ id: string, name: string }[]>('ecosystemsData')
const usecasesData = useState<{ id: string, name: string }[]>('usecasesData')
const projectPhaseData = useState<{ id: string, name: string }[]>('projectPhaseData')
const assetCustodyData = useState<{ id: string, name: string }[]>('assetCustodyData')
const signInRequirmentsData = useState<{ id: string, name: string }[]>('signInRequirmenetsData')
const projectPhase = useState<{ id: string, name: string }[]>('projectPhase')
const assetCustody = useState<{ id: string, name: string }[]>('assetCustody')
const signInRequirments = useState<{ id: string, name: string }[]>('signInRequirmenets')
const categories = useState<Category[]>('categories')
const usecases = useState<Usecase[]>('usecases')
const features = useState<Feature[]>('features')
const assets = useState<Asset[]>('assets')
const ecosystems = useState<Ecosystem[]>('ecosystems')
const projects = useState<Project[]>('projects')
const selectedCategoryId = useState(() => 'defi')
const ranks = useState<Rank[]>('ranks')
const selectedCategoryId = useState(() => 'all')
const selectedUsecaseId = useState(() => 'all')
const selectedEcosystemId = useState(() => 'all')
const selectedAssetsUsedId = useState(() => 'all')
const selectedFeaturesId = useState(() => 'all')
const filter = reactive({
query: '',
sortby: 'atoz',
sortby: 'score',
sortDirection: 'desc',
})
const switcher = ref(true)
watch(selectedCategoryId, () => {
if (selectedCategoryId.value !== 'all')
watch([selectedCategoryId, selectedUsecaseId, selectedEcosystemId, selectedAssetsUsedId, selectedFeaturesId], () => {
if (selectedCategoryId.value !== 'all' || selectedUsecaseId.value !== 'all' || selectedEcosystemId.value !== 'all' || selectedAssetsUsedId.value !== 'all' || selectedFeaturesId.value !== 'all')
filter.query = ''
})
watch(filter, () => {
if (filter.query !== '')
if (filter.query !== '') {
selectedCategoryId.value = 'all'
selectedUsecaseId.value = 'all'
selectedEcosystemId.value = 'all'
selectedAssetsUsedId.value = 'all'
selectedFeaturesId.value = 'all'
}
})
const fetchData = async () => {
@ -34,36 +51,35 @@ export const useData = defineStore('data', () => {
const data = await $fetch<{
categories: Category[]
projects: Project[]
assets: { id: string, name: string }[]
features: { id: string, name: string }[]
ecosystems: { id: string, name: string }[]
usecases: { id: string, name: string }[]
project_phase: { id: string, name: string }[]
asset_custody_type: { id: string, name: string }[]
sign_in_type_requirments: { id: string, name: string }[]
usecases: Usecase[]
ecosystems: Ecosystem[]
assets: Asset[]
features: Feature[]
ranks: Rank[]
}>('/api/data')
projects.value = data.projects.filter(p => p.name)
categories.value = data.categories.map((c) => {
c.projectsCount = projects.value.filter(p =>
p.categories?.includes(c.id),
).length
return c
}).filter(c => c.projectsCount > 0)
projects.value = data.projects.map(project => ({
...project,
ratings: generateProjectRating(project),
})).filter(p => p.name)
assetsData.value = data.assets.map(a => ({ id: a.id.toLowerCase(), name: a.name }))
categoriesData.value = data.categories.map(c => ({ id: c.id.toLowerCase(), name: c.name }))
featuresData.value = data.features.map(f => ({ id: f.id.toLowerCase(), name: f.name }))
ecosystemsData.value = data.ecosystems.map(e => ({ id: e.id.toLowerCase(), name: e.name }))
usecasesData.value = data.usecases.map(u => ({ id: u.id.toLowerCase(), name: u.name }))
projectPhaseData.value = data.project_phase.map(p => ({ id: p.id.toLowerCase(), name: p.name }))
assetCustodyData.value = data.asset_custody_type.map(a => ({ id: a.id.toLowerCase(), name: a.name }))
signInRequirmentsData.value = data.sign_in_type_requirments.map(s => ({ id: s.id.toLowerCase(), name: s.name }))
categories.value = data.categories
usecases.value = data.usecases
ecosystems.value = data.ecosystems
assets.value = data.assets
features.value = data.features
ranks.value = data.ranks
projectPhase.value = data.project_phase.map(p => ({ id: p.id.toLowerCase(), name: p.name }))
assetCustody.value = data.asset_custody_type.map(a => ({ id: a.id.toLowerCase(), name: a.name }))
signInRequirments.value = data.sign_in_type_requirments.map(s => ({ id: s.id.toLowerCase(), name: s.name }))
}
catch (e) {
console.error(e)
return false
}
return true
}
@ -82,7 +98,7 @@ export const useData = defineStore('data', () => {
id: project.id,
title1: project.name,
description: project.description ?? 'N/A',
percentage: Math.floor(Math.random() * 91),
percentage: Math.round((project.ratings?.reduce((a, b) => a + b.points, 0) || 0) / 1.5),
forum: project.links?.forum,
explorer: project.links?.block_explorer,
twitter: project.links?.twitter,
@ -97,15 +113,33 @@ export const useData = defineStore('data', () => {
support: availableSupport(),
image: project.logos?.[0]?.url ?? '',
anonymity: true,
categories: project.categories,
usecases: project.usecases,
ecosystem: project.ecosystem,
assets_used: project.assets_used,
ratings: project.ratings,
}
}
const shallowProjects = computed(() => projects.value.map(project => projectToShallow(project)))
const getProjectsByCategory = <T extends ProjectShallow>(id: string, options?: { shallow: boolean }): T[] => {
if (id === 'all')
return projects.value.map(project => projectToShallow(project)) as T[]
else
return projects.value.filter(project => project.categories?.includes(id)).map(project => options?.shallow ? projectToShallow(project) : project) as T[]
const getProjectsByFilters = <T extends ProjectShallow>(options?: { shallow: boolean }): T[] => {
const filteredProjects = projects.value
.filter(project =>
selectedCategoryId.value !== 'all' ? project.categories.includes(selectedCategoryId.value) : true,
)
.filter(project =>
selectedUsecaseId.value !== 'all' ? project.usecases?.map(u => u.toLowerCase()).includes(selectedUsecaseId.value.toLowerCase()) : true,
)
.filter(project =>
selectedEcosystemId.value !== 'all' ? project.ecosystem?.map(e => e.toLowerCase()).includes(selectedEcosystemId.value.toLowerCase()) : true,
)
.filter(project =>
selectedAssetsUsedId.value !== 'all' ? project.assets_used?.map(a => a.toLowerCase()).includes(selectedAssetsUsedId.value.toLowerCase()) : true,
)
.filter(project =>
selectedFeaturesId.value !== 'all' ? project.technology?.features?.map(f => f.toLowerCase()).includes(selectedFeaturesId.value.toLowerCase()) : true,
)
return (filteredProjects.map(project => options?.shallow ? projectToShallow(project) : project) as T[])
}
const getProjectById = <T extends Project | ProjectShallow>(id: string, options?: { shallow: boolean }): T => {
@ -119,7 +153,7 @@ export const useData = defineStore('data', () => {
const query = filter.query.toLowerCase()
const filteredShallowProjects = getProjectsByCategory(selectedCategoryId.value, { shallow: true })
const filteredShallowProjects = getProjectsByFilters({ shallow: true })
.filter((project) => {
return (
project
@ -133,37 +167,126 @@ export const useData = defineStore('data', () => {
return true
}).sort((a, b) => {
if (filter.sortby === 'score')
return b.percentage - a.percentage
if (filter.sortby === 'atoz')
return a.title1.localeCompare(b.title1)
if (filter.sortDirection === 'asc')
return a.percentage - b.percentage
else
return b.percentage - a.percentage
if (filter.sortby === 'title')
if (filter.sortDirection === 'asc')
return a.title1.toLowerCase().localeCompare(b.title1.toLowerCase())
else
return b.title1.toLowerCase().localeCompare(a.title1.toLowerCase())
if (filter.sortby === 'openess' || filter.sortby === 'technology' || filter.sortby === 'privacy') {
const scoreA = a.ratings?.find(r => r.type === filter.sortby)?.points || 0
const scoreB = b.ratings?.find(r => r.type === filter.sortby)?.points || 0
if (filter.sortDirection === 'asc')
return scoreB - scoreA
else
return scoreA - scoreB
}
else
return 0
})
return filteredShallowProjects
})
const groupedProjectsPerCategory = computed(() => {
const groupedProjects = categories.value.map((category) => {
// Find all projects that include this category
const projectsInCategory = filteredProjects.value.filter(project =>
project.categories.includes(category.id),
)
return {
title: category.name,
projects: projectsInCategory,
}
}).sort((a, b) => b.projects.length - a.projects.length)
return groupedProjects
})
const filteredProjectsCount = computed(() => filteredProjects.value.length)
const getNestedField = (project: Project, field: string) => {
const fields = field.split('.')
return fields.reduce((acc: any, curr: string) => {
return acc && acc[curr as keyof typeof acc]
}, project)
}
const generateProjectRating = (project: Project) => {
const projectRatings: ProjectRating[] = ranks.value?.map((rank) => {
let rankPoints = 0
const ratingStats: ProjectRatingItem[] = rank.references?.map((ref) => {
let isValid = false
const field = ref.field.includes('.') ? getNestedField(project, ref.field) : project[ref.field]
let value
let positive
if (ref.condition.minLength) {
value = (field as any[])?.length
if (value) {
isValid = value >= ref.condition.minLength
positive = `${value} ${ref.label.positive}${value > 1 ? 's' : ''}`
}
}
if (ref.condition.equals) {
value = field
if (value)
isValid = value === ref.condition.equals
}
if (ref.condition.exists) {
value = field
if (value)
isValid = !!value
}
rankPoints += isValid ? ref.points : 0
return {
isValid,
label: ref.label.name,
positive: positive ? positive : ref.label.positive,
negative: ref.label.negative,
value,
} as ProjectRatingItem
})
return {
type: rank.id,
name: rank.name,
items: ratingStats,
points: rankPoints,
}
})
return projectRatings
}
return {
selectedCategoryId,
selectedUsecaseId,
selectedEcosystemId,
selectedAssetsUsedId,
selectedFeaturesId,
filter,
switcher,
categories,
assetsData,
categoriesData,
featuresData,
ecosystemsData,
usecasesData,
projectPhaseData,
assetCustodyData,
signInRequirmentsData,
projectPhase,
assetCustody,
signInRequirments,
usecases,
features,
ecosystems,
assets,
projects,
shallowProjects,
groupedProjectsPerCategory,
filteredProjectsCount,
fetchData,
getProjectById,
getProjectsByCategory,
filteredProjects,
projectToShallow,
}

127
layouts/default.vue
View file

@ -1,21 +1,22 @@
<script lang="ts" setup>
import type { InputOption } from '~/types'
const { categories, filteredProjectsCount, selectedCategoryId } = storeToRefs(useData())
const categoriesOptions = ref(categories.value ? categories.value.map(c => ({ label: c.name, value: c.id, count: c.projectsCount })) : [])
const extendedOptions: InputOption[] = [
...categoriesOptions.value,
]
const { categories, usecases, ecosystems, assets, features, filteredProjectsCount, selectedCategoryId, selectedUsecaseId, selectedEcosystemId, selectedAssetsUsedId, selectedFeaturesId } = storeToRefs(useData())
const selectedCategory = computed(() => {
return categories.value.find(c => c.id === selectedCategoryId.value)
})
const availableUsecases = computed(() => {
if (selectedCategoryId.value === 'all')
return usecases.value
return usecases.value.filter(u => selectedCategory.value?.usecases?.includes(u.id))
})
const sortedFilteredCategories = computed(() => ([
categories.value.find(c => c.id === 'defi')!,
...[...categories.value].sort((a, b) => a.name.localeCompare(b.name)).filter(c => c.id !== 'defi'),
]))
const categoryOptions = ref<InputOption[]>(categories.value ? [{ label: 'Category', value: 'all' }, ...categories.value.map(c => ({ label: c.name, value: c.id, count: c.projectsCount }))] : [])
const usecaseOptions = computed<InputOption[]>(() => availableUsecases.value.length ? [{ label: 'Usecase', value: 'all' }, ...availableUsecases.value.map(u => ({ label: u.name, value: u.id }))] : [])
const ecosystemOptions = ref<InputOption[]>(ecosystems.value ? [{ label: 'Ecosystem', value: 'all' }, ...ecosystems.value.map(e => ({ label: e.name, value: e.id }))] : [])
const assetOptions = ref<InputOption[]>(assets.value ? [{ label: 'Asset used', value: 'all' }, ...assets.value.map(a => ({ label: `${a.id.toUpperCase()} (${a.name})`, value: a.id }))] : [])
const featureOptions = ref<InputOption[]>(features.value ? [{ label: 'Feature', value: 'all' }, ...features.value.map(f => ({ label: f.name, value: f.id }))] : [])
const { showBar } = storeToRefs(useNavigaiton())
const swipeEl = ref()
@ -56,77 +57,67 @@ watch([scrollY, top, y], (newValues, oldValues) => {
w-full
xl:gap-32px
>
<div w-fit>
<div
ref="scrollEl"
class="no-scrollbar"
h-100vh
overflow-y-auto
sticky
top-32px
hidden
xl:block
min-w-234px
pb-48px
>
<Category
v-for="category in sortedFilteredCategories"
:key="category.id"
:title="category.name"
:count="category.projectsCount"
:selected="selectedCategoryId === category.id"
@click="[navigateTo(`/category/${category.id}`), selectedCategoryId = category.id]"
/>
</div>
</div>
<div w-full>
<div
flex
flex-col
w-full
>
<div
flex
flex-col
md:flex-row
md:justify-between
md:items-center
gap-16px
w-full
mb="16px md:32px"
>
<SearchBox
flex-1
placeholder:text-app-text-grey
:placeholder="`Search in ${filteredProjectsCount} Projects`"
/>
<div
xl:hidden
block
md:flex-2
flex
items-center
gap-16px
>
<h2
text-14px
font-700
>
Choose category
</h2>
<CategorySelectBox
v-model="selectedCategoryId"
:options="extendedOptions"
:options="categoryOptions"
name="categorySelect"
w-full
@selected="selectedCategoryId === 'all' ? navigateTo(`/`) : navigateTo(`/category/${selectedCategoryId}`)"
/>
<CategorySelectBox
v-if="usecases?.length"
v-model="selectedUsecaseId"
name="usecaseSelect"
:options="usecaseOptions"
w-full
/>
<CategorySelectBox
v-if="ecosystems?.length"
v-model="selectedEcosystemId"
name="ecosystemSelect"
:options="ecosystemOptions"
w-full
/>
<CategorySelectBox
v-if="assets?.length"
v-model="selectedAssetsUsedId"
name="assetsUsedSelect"
:options="assetOptions"
w-full
/>
<CategorySelectBox
v-if="features?.length"
v-model="selectedFeaturesId"
name="featuresSelect"
:options="featureOptions"
w-full
/>
</div>
<SearchBox />
</div>
<div
flex
gap-28px
items-center
my-24px
mt-28px
>
<h2
v-if="selectedCategoryId"
w-max
font-700
text-18px
sm:text-28px
whitespace-nowrap
>
{{ selectedCategoryId === 'all' ? `${filteredProjectsCount} All Projects` : `${filteredProjectsCount ?? 0} ${selectedCategory?.name}` }}
</h2>
<div
h-2px
w="full"
bg-white
/>
</div>
<slot />
</div>

11
package.json
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,9 +17,15 @@
},
"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/eos-icons": "^1.1.10",
"@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",
@ -51,5 +57,8 @@
},
"lint-staged": {
"*": "eslint --fix"
},
"dependencies": {
"moment": "^2.30.1"
}
}

6
pages/category/[id].vue
View file

@ -1,6 +1,6 @@
<script lang="ts" setup>
const dataStore = useData()
const { selectedCategoryId, filteredProjects } = storeToRefs(dataStore)
const { selectedCategoryId, categories, filteredProjects } = storeToRefs(dataStore)
const route = useRoute()
@ -8,8 +8,10 @@ onMounted(() => {
if (route.params.id)
selectedCategoryId.value = route.params.id as string
})
const group = computed(() => [{ title: categories.value.find(c => c.id === selectedCategoryId.value)?.name || '', projects: filteredProjects.value }])
</script>
<template>
<ProjectGrid :projects="filteredProjects" />
<ProjectGrid :projects="group" />
</template>

6
pages/index.vue
View file

@ -7,9 +7,11 @@ useSeoMeta({
ogDescription: 'There are challenges in finding crucial technical details and comparing various privacy-focused projects.',
ogImage: '/web3privacy_eye.webp',
})
const { filteredProjects } = storeToRefs(useData())
const { groupedProjectsPerCategory } = storeToRefs(useData())
</script>
<template>
<ProjectGrid :projects="filteredProjects" />
<div>
<ProjectGrid :projects="groupedProjectsPerCategory" />
</div>
</template>

8
pages/project/[id]/index.vue
View file

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

16
plugins/githubApi.ts
View file

@ -1,16 +0,0 @@
export default defineNuxtPlugin(() => {
const appConfig = useAppConfig()
const githubApi = $fetch.create({
baseURL: 'https://api.github.com',
headers: {
Authorization: `Bearer ${appConfig.github.accessToken}`,
},
})
return {
provide: {
githubApi,
},
}
})

69
pnpm-lock.yaml
View file

@ -7,10 +7,17 @@ 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/eos-icons':
specifier: ^1.1.10
version: 1.2.0
@ -20,6 +27,21 @@ importers:
'@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.1
'@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.3
'@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))
@ -1103,6 +1125,9 @@ 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/eos-icons@1.2.0':
resolution: {integrity: sha512-grdfoS20Z4gWAzNPza7ytguNBWeTOkx4Y6aZHs149t2Z6AhW7zG3VWkkq6M+YuL2G8ugHnBw7ZxgazZ6oiMnIQ==}
@ -1112,6 +1137,21 @@ packages:
'@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.1':
resolution: {integrity: sha512-x55gpORwMGkmmT9UO11rzfMOp40k0ggQnPiOoh9axbyuHrkFMN7pdoCbaXkzqAdShcoI1dLzARbdqXi2sAPJXQ==}
'@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.3':
resolution: {integrity: sha512-KZpqyPkDdyAvrpMz9/FYovwFsr3xrHf9esJeBng3iqNInhuZhF33XO1k6Yf8g2p10ynUW7AYEiGJkYzDi4DENQ==}
'@iconify/types@2.0.0':
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@ -3952,6 +3992,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'}
@ -6582,6 +6625,10 @@ snapshots:
'@humanwhocodes/retry@0.3.0': {}
'@iconify-json/bi@1.2.0':
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/eos-icons@1.2.0':
dependencies:
'@iconify/types': 2.0.0
@ -6594,6 +6641,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.1':
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.3':
dependencies:
'@iconify/types': 2.0.0
'@iconify/types@2.0.0': {}
'@iconify/utils@2.1.32':
@ -10173,6 +10240,8 @@ snapshots:
pkg-types: 1.2.0
ufo: 1.5.4
moment@2.30.1: {}
mri@1.2.0: {}
mrmime@2.0.0: {}

603
server/assets/data.json
View file

@ -1,4 +1,77 @@
{
"categories": [
{
"id": "infrastructure",
"name": "Infrastructure",
"usecases": [
"node",
"rpc-provider",
"infrastructure",
"eth-layer-2",
"research-and-development",
"computing",
"storage",
"data-management",
"other"
]
},
{
"id": "social-and-communications",
"name": "Social & Communications",
"usecases": [
"dao",
"nft-community",
"alliances",
"messaging",
"events",
"other"
]
},
{
"id": "hardware",
"name": "Hardware",
"usecases": [
"wallets",
"node",
"other"
]
},
{
"id": "applications",
"name": "Applications",
"usecases": [
"browser",
"vpn",
"did",
"operation-systems",
"dapps",
"wallets",
"ai",
"kyc-solution",
"other"
]
},
{
"id": "defi",
"name": "Defi",
"usecases": [
"bridge",
"defi",
"mixing-service",
"mixing-management",
"currency",
"other"
]
},
{
"id": "archived-projects",
"name": "Archived projects",
"usecases": [
"legacy-projects",
"deprecated-systems"
]
}
],
"projects": [
{
"id": "01-labs",
@ -15885,181 +15958,6 @@
]
}
],
"assets": [
{
"id": "eth",
"name": "Ethereum"
},
{
"id": "btc",
"name": "Bitcoin"
},
{
"id": "usdc",
"name": "Coinbase stable"
},
{
"id": "usdt",
"name": "Tether"
},
{
"id": "dai",
"name": "MakerDAO stable"
},
{
"id": "atom",
"name": "Cosmos"
},
{
"id": "scrt",
"name": "Secret Network"
},
{
"id": "dot",
"name": "Polkadot"
},
{
"id": "sol",
"name": "Solana"
},
{
"id": "zcash",
"name": "Zcash"
},
{
"id": "xmr",
"name": "Monero"
},
{
"id": "other",
"name": "Other"
}
],
"categories": [
{
"id": "infrastructure",
"name": "Infrastructure",
"usecases": [
"node",
"rpc-provider",
"infrastructure",
"eth-layer-2",
"research-and-development",
"computing",
"storage",
"data-management",
"other"
]
},
{
"id": "social-and-communications",
"name": "Social & Communications",
"usecases": [
"dao",
"nft-community",
"alliances",
"messaging",
"events",
"other"
]
},
{
"id": "hardware",
"name": "Hardware",
"usecases": [
"wallets",
"node",
"other"
]
},
{
"id": "applications",
"name": "Applications",
"usecases": [
"browser",
"vpn",
"did",
"operation-systems",
"dapps",
"wallets",
"ai",
"kyc-solution",
"other"
]
},
{
"id": "defi",
"name": "Defi",
"usecases": [
"bridge",
"defi",
"mixing-service",
"mixing-management",
"currency",
"other"
]
},
{
"id": "archived-projects",
"name": "Archived projects",
"usecases": [
"legacy-projects",
"deprecated-systems"
]
}
],
"ecosystems": [
{
"id": "ethereum",
"name": "Ethereum"
},
{
"id": "bitcoin",
"name": "Bitcoin"
},
{
"id": "solana",
"name": "Solana"
},
{
"id": "cosmos",
"name": "Cosmos"
},
{
"id": "monero",
"name": "Monero"
},
{
"id": "other",
"name": "Other"
}
],
"features": [
{
"id": "no-compliance",
"name": "No compliance"
},
{
"id": "non-kyc",
"name": "Non-KYC"
},
{
"id": "private-by-default",
"name": "Private by default"
},
{
"id": "non-custodial",
"name": "Non custodial"
},
{
"id": "opensource",
"name": "Opensource"
},
{
"id": "live-on-mainnet",
"name": "Live on Mainnet"
}
],
"usecases": [
{
"id": "wallets",
@ -16227,5 +16125,360 @@
"id": "seed",
"name": "Seed"
}
],
"assets": [
{
"id": "eth",
"name": "Ethereum"
},
{
"id": "btc",
"name": "Bitcoin"
},
{
"id": "usdc",
"name": "Coinbase stable"
},
{
"id": "usdt",
"name": "Tether"
},
{
"id": "dai",
"name": "MakerDAO stable"
},
{
"id": "atom",
"name": "Cosmos"
},
{
"id": "scrt",
"name": "Secret Network"
},
{
"id": "dot",
"name": "Polkadot"
},
{
"id": "sol",
"name": "Solana"
},
{
"id": "zcash",
"name": "Zcash"
},
{
"id": "xmr",
"name": "Monero"
},
{
"id": "other",
"name": "Other"
}
],
"features": [
{
"id": "no-compliance",
"name": "No compliance"
},
{
"id": "non-kyc",
"name": "Non-KYC"
},
{
"id": "private-by-default",
"name": "Private by default"
},
{
"id": "non-custodial",
"name": "Non custodial"
},
{
"id": "opensource",
"name": "Opensource"
},
{
"id": "live-on-mainnet",
"name": "Live on Mainnet"
}
],
"ecosystems": [
{
"id": "ethereum",
"name": "Ethereum",
"icon": "https://assets.coingecko.com/coins/images/279/standard/ethereum.png?1696501628"
},
{
"id": "bitcoin",
"name": "Bitcoin",
"icon": "https://assets.coingecko.com/coins/images/1/standard/bitcoin.png?1696501400"
},
{
"id": "solana",
"name": "Solana",
"icon": "https://assets.coingecko.com/coins/images/4128/standard/solana.png?1718769756"
},
{
"id": "cosmos",
"name": "Cosmos",
"icon": "https://assets.coingecko.com/coins/images/1481/standard/cosmos_hub.png?1696502525"
},
{
"id": "monero",
"name": "Monero",
"icon": "https://assets.coingecko.com/coins/images/69/standard/monero_logo.png?1696501460"
},
{
"id": "other",
"name": "Other"
}
],
"ranks": [
{
"id": "openess",
"name": "Openess",
"references": [
{
"field": "team.teammembers",
"label": {
"name": "Team",
"positive": "Member",
"negative": "Anonymous"
},
"condition": {
"minLength": 1
},
"points": 10
},
{
"field": "links.docs",
"label": {
"name": "Documentation",
"positive": "Link",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 10
},
{
"field": "links.github",
"label": {
"name": "Github",
"positive": "Link",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 10
},
{
"field": "links.twitter",
"label": {
"name": "Twitter",
"positive": "Link",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 1
},
{
"field": "links.telegram",
"label": {
"name": "Twitter",
"positive": "Link",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 1
},
{
"field": "links.discord",
"label": {
"name": "Discord",
"positive": "Link",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 1
},
{
"field": "links.lens",
"label": {
"name": "Lens",
"positive": "Link",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 1
},
{
"field": "links.farcaster",
"label": {
"name": "Farcaster",
"positive": "Link",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 1
},
{
"field": "links.whitepaper",
"label": {
"name": "Whitepaper",
"positive": "Link",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 10
},
{
"field": "funding.value",
"label": {
"name": "Funding",
"positive": "Investment",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 10
}
]
},
{
"id": "technology",
"name": "Technology",
"references": [
{
"field": "project_status.mainnet",
"label": {
"name": "Mainnet",
"positive": "Yes",
"negative": "No"
},
"condition": {
"exists": true
},
"points": 10
},
{
"field": "blockchain_features.opensource",
"label": {
"name": "Open Source",
"positive": "Yes",
"negative": "No"
},
"condition": {
"equals": true
},
"points": 20
},
{
"field": "blockchain_features.asset_custody_type",
"label": {
"name": "Non Custody",
"positive": "None",
"negative": "Custodial"
},
"condition": {
"equals": "non-custody"
},
"points": 10
},
{
"field": "blockchain_features.upgradability.enabled",
"label": {
"name": "Upgradability",
"positive": "Disabled",
"negative": "Enabled"
},
"condition": {
"equals": false
},
"points": 10
},
{
"field": "audits",
"label": {
"name": "Audits",
"positive": "Audit",
"negative": "None"
},
"condition": {
"minLength": 1
},
"points": 10
}
]
},
{
"id": "privacy",
"name": "Privacy",
"references": [
{
"field": "privacy_policy.link",
"label": {
"name": "Privacy Policy",
"positive": "Link",
"negative": "Not available"
},
"condition": {
"exists": true
},
"points": 10
},
{
"field": "traceability.kyc",
"label": {
"name": "KYC",
"positive": "No",
"negative": "Yes"
},
"condition": {
"equals": false
},
"points": 10
},
{
"field": "compliance",
"label": {
"name": "Compliance",
"positive": "No",
"negative": "OFAC"
},
"condition": {
"equals": true
},
"points": 5
},
{
"field": "default_privacy",
"label": {
"name": "Default Privacy",
"positive": "YES",
"negative": "No"
},
"condition": {
"equals": true
},
"points": 10
}
]
}
]
}

4
types/asset.ts Normal file
View file

@ -0,0 +1,4 @@
export interface Asset {
id: string
name: string
}

5
types/ecosystem.ts Normal file
View file

@ -0,0 +1,5 @@
export interface Ecosystem {
id: string
name: string
icon?: string
}

4
types/feature.ts Normal file
View file

@ -0,0 +1,4 @@
export interface Feature {
id: string
name: string
}

27
types/project.ts
View file

@ -7,12 +7,13 @@ export interface Project {
id: string
name: string
categories: string[]
usecases: string[]
usecases?: string[]
ecosystem?: string[]
product_readiness?: string
security?: string
have_token?: boolean
token_link?: string
assets_used?: string[]
tokens?: {
name?: string
symbol?: string
@ -38,13 +39,13 @@ export interface Project {
telegram?: string
discord?: string
blog?: string
governance?: string
facebook?: string
block_explorer?: string
whitepaper?: string
github?: string
docs?: string
changelog?: string
governance?: string
forum?: string
snapshot?: string
lens?: string
@ -101,7 +102,6 @@ export interface Project {
audits?: Audit[]
social_trust?: string
technical_spof?: string
assets_used?: string[]
history?: {
title?: string
event_type?: string
@ -126,6 +126,7 @@ export interface Project {
url?: string
[k: string]: unknown
}[]
ratings?: ProjectRating[]
}
export interface ProjectShallow {
@ -147,8 +148,28 @@ export interface ProjectShallow {
audits?: Audit[]
support?: number
anonymity?: boolean
categories: string[]
usecases?: string[]
ecosystem?: string[]
assets_used?: string []
ratings?: ProjectRating[]
}
export interface ProjectIndexable extends Project {
[key: string]: unknown
}
export interface ProjectRating {
type: string
name: string
items: ProjectRatingItem[]
points: number
}
export interface ProjectRatingItem {
isValid: boolean
label: string
positive: string
negative: string
value: any
}

24
types/rank.ts Normal file
View file

@ -0,0 +1,24 @@
import type { Project } from './project'
export interface Rank {
id: string
name: string
references: Reference[]
}
interface Reference {
field: keyof Project
label: {
name: string
positive: string
negative: string
}
condition: Condition
points: number
}
interface Condition {
minLength?: number
exists?: boolean
equals?: boolean | string
}

4
types/usecase.ts Normal file
View file

@ -0,0 +1,4 @@
export interface Usecase {
id: string
name: string
}

3
unocss.config.collections.ts
View file

@ -35,5 +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>',
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>',
},
}

20
unocss.config.ts
View file

@ -51,9 +51,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',
},
},
},
},

50
utils/score.ts Normal file
View file

@ -0,0 +1,50 @@
import type { Project, ProjectIndexable, ProjectShallow } from '~/types'
const fulfilled = (value: any): boolean => {
const type = typeof value
switch (type) {
case 'string':
if (value !== '')
return true
break
case 'object':
if (Object.keys(value!).length > 0)
return true
break
default:
return false
}
return false
}
export const calculateScore = (project: ProjectIndexable | ProjectShallow | Project) => {
const criterias: { value: keyof ProjectIndexable, key: keyof ProjectIndexable | '' }[] = [
{ value: 'product_readiness', key: '' },
{ value: 'github', key: 'links' },
{ value: 'docs', key: 'links' },
{ value: 'team', key: '' },
{ value: 'audits', key: '' },
]
let matched = 0
for (let i = 0; i < criterias.length; i++) {
let value
// value = ((criterias[i].key ?? props.project[criterias[i].value as keyof typeof props.project]) ?? null === null) ? null : (props.project as ProjectIndexable)[criterias[i].key][criterias[i].value]
const indexableProject = project as ProjectIndexable
if (criterias[i].key !== '')
value = (indexableProject[criterias[i].key] as any)?.[criterias[i].value]
else
value = indexableProject?.[criterias[i].value]
// console.log(props.project?.links?.github);
// console.log(Object.keys(props.indexableProject["team"]).length);
if (value === null || value === undefined)
continue
if (fulfilled(value))
matched++
}
return 100 / criterias.length * matched
}

5
utils/text.ts Normal file
View file

@ -0,0 +1,5 @@
import moment from 'moment'
export function formatDate(date: Date | string) {
return moment(date).format('MM / YYYY')
}