explorer-app/components/Project/Create/Categories/Assets.vue
2024-09-19 13:29:51 +02:00

181 lines
4.5 KiB
Vue

<script setup lang="ts">
import type { Project } from '~/types'
const props = defineProps<{
project?: Partial<Project>
}>()
type Token = {
name: string
symbol: string
contract_address: string
token_link: string
}
function useTokens(project?: Partial<Project>) {
const tokens = ref<Token[]>(project?.tokens as Token[] || [])
const newToken = reactive<Token>({
symbol: '',
name: '',
contract_address: '',
token_link: '',
})
function addToken() {
tokens.value.push({ ...newToken })
newToken.symbol = ''
newToken.name = ''
newToken.contract_address = ''
newToken.token_link = ''
}
function removeToken(index: number) {
tokens.value.splice(index, 1)
}
return {
tokens,
newToken,
addToken,
removeToken,
}
}
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 { assets: assetsData } = useData()
const { saveProject } = useProject()
function save() {
saveProject({
assets_used: assetsUsed.value,
have_token: tokens.value.length > 0 && tokens.value.some(token => token.contract_address),
tokens: tokens.value,
})
}
defineExpose({
save,
})
</script>
<template>
<div mt-24px>
<ClientOnly>
<ProjectCreateComponentsSelectChips
v-model="assetsUsed"
label="Assets used"
:options="assetsData?.map(asset => ({ label: asset.name, value: asset.id }))"
placeholder="Add assets"
hint="Most used assets user can use to interact with your project"
can-add-new
/>
</ClientOnly>
<ProjectCreateComponentsCategoryDivider
w-full
title="NATIVE TOKENS"
/>
<ProjectCreateComponentsItem
v-for="token in tokens"
:key="token.name"
@remove="() => removeToken(tokens.indexOf(token))"
>
<template #label>
<div
flex
gap-2px
>
<span
class="text-app-black text-14px font-700"
lg="text-16px"
> {{ token.symbol }}
</span>
<span
v-if="token.name"
class="text-app-black text-14px font-400"
lg="text-16px"
> {{ `(${token.name})` }}
</span>
</div>
</template>
<template #desc>
<NuxtLink
target="_blank"
:to="token.token_link"
hover:text-app-black
class="text-app-black/50 text-16px hidden"
lg="block"
>Link
</NuxtLink>
</template>
</ProjectCreateComponentsItem>
<ProjectCreateComponentsItemAdd
button-label="ADD TOKEN"
@add="addToken()"
>
<template #content>
<div
flex
flex-col
gap-16px
lg="gap-24px"
>
<div
flex
flex-col
gap-8px
lg="flex-row gap-24px"
>
<div
class="w-100%"
flex
flex-col
gap-16px
lg="flex-row gap-24px"
>
<ProjectCreateComponentsInput
v-model="newToken.symbol"
w-full
label="Token symbol"
placeholder="Token symbol"
/>
<ProjectCreateComponentsInput
v-model="newToken.name"
w-full
label="Token name"
placeholder="Token name"
/>
</div>
<span
class="w-100%"
lg="mt-32px left-1/2 self-center"
font-400
italic
lg:text-14px
text-12px
text-app-white
opacity-50
>
{{ 'Does your project have native token? Enter Symbol, name and address' }}
</span>
</div>
<ProjectCreateComponentsInput
v-model="newToken.contract_address"
lg="w-1/2"
label="Token contract address"
placeholder="Contract address"
hint="Enter token contract address"
/>
<ProjectCreateComponentsInput
v-model="newToken.token_link"
lg="w-1/2"
label="URL for explorer"
placeholder="Token explorer URL"
hint="Link to any explorer showing data about your native token"
/>
</div>
</template>
</ProjectCreateComponentsItemAdd>
</div>
</template>