feat: assets

app.vue

@@ -17,7 +17,7 @@ if (typeof window !== 'undefined') {
 const web3Store = useWeb3Store()
 const appStore = useAppStore()
 const { providerEvents, disconnect } = useBrowserExtension()
-const { setLoading, setAddress, setProfile, reloadProfile } = useProfileStore()
+const { setStatus, setAddress, setProfile, reloadProfile } = useProfileStore()
 const { setIsConnected, setConnectedAddress, setConnectedProfile } =
   useConnectionStore()
 const router = useRouter()
@@ -60,7 +60,7 @@ const setupWalletProfile = async () => {
   try {
     const profileAddress = useRouter().currentRoute.value.params?.profileAddress
 
-    setLoading(true)
+    setStatus('isProfileLoading', true)
     assertAddress(profileAddress, 'wallet')
     setAddress(profileAddress)
     const profile = await fetchProfile(profileAddress)
@@ -69,7 +69,7 @@ const setupWalletProfile = async () => {
     console.error(error)
     // TODO redirect to 404 page once it's added
   } finally {
-    setLoading(false)
+    setStatus('isProfileLoading', false)
   }
 }
 
@@ -125,8 +125,8 @@ onMounted(async () => {
   setupTranslations()
   setupWeb3Instances()
   checkConnectionExpiry()
-  await setupConnectedProfile()
   await setupWalletProfile()
+  await setupConnectedProfile()
   await routerBackProfileLoad()
 })
 </script>

components/lsp8AssetCard.vue → components/nftCard.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { collectibleRoute } from '@/shared/routes'
+import { Nft } from '@/types/assets'
 
 type Props = {
-  asset: Lsp8AssetType
+  asset: Nft
   hasAddress?: boolean
 }
 
@@ -13,9 +14,11 @@ const { profile: viewedProfile } = useProfileStore()
 
 const handleShowAsset = () => {
   try {
-    assertAddress(profile.address, 'profile')
-    assertAddress(props.asset.collectionAddress, 'asset')
-    navigateTo(collectibleRoute(profile.address, props.asset.collectionAddress))
+    assertAddress(profile.address)
+    assertAddress(props.asset.data.collectionAddress)
+    navigateTo(
+      collectibleRoute(profile.address, props.asset.data.collectionAddress)
+    )
   } catch (error) {
     console.error(error)
   }
@@ -25,19 +28,26 @@ const handleShowAsset = () => {
 <template>
   <lukso-card size="small" is-hoverable is-full-width @click="handleShowAsset"
     ><div slot="content">
-      <div class="min-h-[260px] bg-neutral-90 w-100 rounded-t-12"></div>
+      <div
+        class="min-h-[260px] bg-neutral-90 w-100 rounded-t-12 bg-center bg-cover"
+        :style="`background-image: url(${asset.data.image});`"
+      ></div>
       <div class="p-4">
         <div
+          v-if="asset.data.creatorAddress"
           class="shadow-neutral-drop-shadow p-2 pr-6 rounded-4 inline-flex -top-6 relative bg-neutral-100"
         >
-          <lukso-profile size="x-small"></lukso-profile>
+          <lukso-profile
+            size="x-small"
+            :profile-url="asset.data.creatorProfileImage"
+          ></lukso-profile>
           <div class="pl-1">
             <div class="text-neutral-60 paragraph-inter-10-semi-bold">
               {{ $formatMessage('asset_created_by') }}
             </div>
             <lukso-username
-              name="John"
-              address="0x9671Db683406EE0817B1f5cB6A3b3BD111477457"
+              :name="asset.data.creatorName"
+              :address="asset.data.creatorAddress"
               size="x-small"
               class="flex"
               name-color="neutral-20"
@@ -46,10 +56,13 @@ const handleShowAsset = () => {
         </div>
         <div>
           <div class="paragraph-inter-14-semi-bold">
-            {{ asset.collectionName }}
+            {{ asset.data.collectionName }}
           </div>
           <div class="paragraph-inter-12-semi-bold pb-2">
-            1 <span class="text-neutral-60">{{ asset.collectionIcon }}</span>
+            1
+            <span class="text-neutral-60">{{
+              asset.data.collectionSymbol
+            }}</span>
           </div>
           <div class="flex justify-end w-full">
             <lukso-button

components/lsp8AssetList.vue → components/nftsList.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const { assets } = useProfileStore()
+import { storeToRefs } from 'pinia'
+
+const { nfts, assetFilter } = storeToRefs(useProfileStore())
 </script>
 
 <template>
@@ -8,8 +10,8 @@ const { assets } = useProfileStore()
       {{ $formatMessage('collectibles_title') }}
     </h3>
     <div class="grid gap-6 grid-col grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
-      <Lsp8AssetCard
-        v-for="(asset, index) in assets.lsp8Assets"
+      <NftCard
+        v-for="(asset, index) in nfts(assetFilter)"
         :key="index"
         :asset="asset"
         :has-address="true"

components/profile.vue

@@ -3,7 +3,7 @@ const { profile, status } = useProfileStore()
 </script>
 
 <template>
-  <div>
+  <div class="relative">
     <lukso-card
       variant="profile"
       :background-url="profile.backgroundImageUrl"
@@ -12,8 +12,8 @@ const { profile, status } = useProfileStore()
       is-full-width
       custom-class="rounded-24 shadow-neutral-drop-shadow"
       :class="{
-        'opacity-0': status.isLoading,
-        'opacity-100': !status.isLoading,
+        'opacity-0': status.isProfileLoading,
+        'opacity-100': !status.isProfileLoading,
       }"
       class="transition-opacity duration-300"
     >
@@ -30,5 +30,11 @@ const { profile, status } = useProfileStore()
         ></lukso-username>
       </div>
     </lukso-card>
+    <lukso-icon
+      name="progress-indicator-alt"
+      size="x-large"
+      v-if="status.isProfileLoading"
+      class="absolute top-1/2 left-1/2 transform"
+    ></lukso-icon>
   </div>
 </template>

components/lsp7AssetCard.vue → components/tokenCard.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { fromWei } from 'web3-utils'
+
 import { tokenRoute } from '@/shared/routes'
+import { Token, StandardsAbbreviations } from '@/types/assets'
 
 type Props = {
-  asset: Lsp7AssetType
+  asset: Token
   hasAddress?: boolean
 }
 
@@ -26,15 +29,20 @@ const handleShowAsset = () => {
   <lukso-card size="small" is-hoverable is-full-width @click="handleShowAsset"
     ><div slot="content" class="p-4">
       <div class="h-7 flex justify-end items-start">
-        <lukso-tag size="x-small" background-color="lukso-90">LSP7</lukso-tag>
+        <lukso-tag
+          v-if="asset.standard"
+          size="x-small"
+          background-color="lukso-90"
+          >{{ StandardsAbbreviations[asset.standard] }}</lukso-tag
+        >
       </div>
       <div class="flex gap-6">
         <div class="pl-4 flex flex-col items-center">
           <lukso-profile
-            profile-url=""
             size="medium"
             :profile-address="asset.address"
-            :has-identicon="hasAddress"
+            :profile-url="'icon' in asset.data ? asset.data.icon : undefined"
+            :has-identicon="hasAddress ? 'true' : undefined"
           ></lukso-profile>
           <div
             v-if="hasAddress"
@@ -44,11 +52,14 @@ const handleShowAsset = () => {
           </div>
         </div>
         <div class="flex flex-col w-full">
-          <div class="heading-inter-14-bold pb-1">{{ asset.name }}</div>
+          <div class="heading-inter-14-bold pb-1">{{ asset.data.name }}</div>
           <div class="heading-inter-21-semi-bold flex items-center pb-1">
-            {{ $formatNumber(asset.amount)
-            }}<span class="paragraph-inter-14-semi-bold text-neutral-60 ml-2">{{
-              asset.symbol
+            <span v-if="asset.data.amount">{{
+              $formatNumber(fromWei(asset.data.amount, 'ether'))
+            }}</span>
+            <span v-else>0</span>
+            <span class="paragraph-inter-14-semi-bold text-neutral-60 ml-2">{{
+              asset.data.symbol
             }}</span>
           </div>
           <div class="paragraph-inter-12-regular pb-4">$ 123.24</div>

components/tokensList.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
+import { AssetFilter, Token } from '@/types/assets'
+
+const { profile } = useProfileStore()
+const { tokens, assetFilter } = storeToRefs(useProfileStore())
+const lyxAsset = computed<Token>(() => {
+  return {
+    address: '0x0',
+    data: {
+      name: 'LUKSO',
+      symbol: 'LYX',
+      amount: profile.balance,
+      address: '0x0',
+      icon: '/images/lyx-token.jpg',
+    },
+  }
+})
+</script>
+
+<template>
+  <div class="pt-8">
+    <h3 class="heading-inter-17-semi-bold pb-4">
+      {{ $formatMessage('tokens_title') }}
+    </h3>
+    <div class="grid gap-6 grid-col grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
+      <TokenCard v-if="assetFilter === AssetFilter.owned" :asset="lyxAsset" />
+      <TokenCard
+        v-for="(asset, index) in tokens(assetFilter)"
+        :key="index"
+        :asset="asset"
+        :has-address="true"
+      />
+    </div>
+  </div>
+</template>

composables/useBrowserExtension.ts

@@ -55,6 +55,7 @@ const connect = async () => {
     console.error(error)
     disconnect()
 
+    // known errors
     if (error instanceof EoAError) {
       return showModal({
         title: formatMessage('web3_connect_error_title'),