feat: send LSP7/LSP8

.gitignore

@@ -17,8 +17,7 @@ logs
 .fleet
 .idea
 /public/assets/*
-# tailwind config is used just for vs code extension intelisense
-tailwind.config.js
+types/contracts
 
 # Local env files
 .env

app.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
+import { isAddress } from 'web3-utils'
 
 import { fetchProfile } from '@/utils/fetchProfile'
-import { PROVIDERS, STORAGE_KEY } from '@/types/enums'
 import { assertString } from '@/utils/validators'
 
 if (typeof window !== 'undefined') {
-  // @ts-ignore
   import('@lukso/web-components')
 }
 
@@ -119,12 +118,39 @@ onMounted(async () => {
   checkConnectionExpiry()
   await setupConnectedProfile()
   await routerBackProfileLoad()
+
+  try {
+    const profileAddress = useRouter().currentRoute.value.params?.profileAddress
+
+    if (!isAddress(profileAddress)) {
+      navigateTo(notFoundRoute())
+    }
+
+    await setupViewedProfile(profileAddress)
+    await setupViewedAssets(profileAddress)
+  } catch (error) {
+    console.error(error)
+  }
+
+  setStatus('isProfileLoaded', true)
 })
 
 onUnmounted(() => {
   const provider = INJECTED_PROVIDER
   removeProviderEvents(provider)
 })
+
+useHead({
+  bodyAttrs: {
+    class: computed(() => {
+      if (appStore.modal?.isOpen) {
+        return 'overflow-hidden'
+      }
+
+      return ''
+    }),
+  },
+})
 </script>
 
 <template>

components/AppModal.vue

@@ -7,7 +7,7 @@ const loadModalTemplate = () => {
     const templateName = appStore.modal?.template
       ? appStore.modal.template
       : MODAL_DEFAULT_TEMPLATE
-    return import(`./AppModalTemplate${templateName}.vue`)
+    return import(`./ModalTemplate${templateName}.vue`)
   })
 }
 

components/AppNavbar.vue

@@ -2,7 +2,7 @@
 const { profile: connectedProfile, status } = useConnectedProfileStore()
 const { connect, disconnect, isUniversalProfileExtension } =
   useBrowserExtension()
-const { reloadProfile } = useViewedProfileStore()
+const { profile: viewedProfile, reloadProfile } = useViewedProfileStore()
 
 const handleNavigateProfile = async () => {
   try {
@@ -11,7 +11,8 @@ const handleNavigateProfile = async () => {
       reloadProfile(connectedProfile)
       navigateTo(profileRoute(connectedProfile.address))
     } else {
-      navigateTo(homeRoute())
+      assertAddress(viewedProfile.address, 'profile')
+      navigateTo(profileRoute(viewedProfile.address))
     }
   } catch (error) {
     console.error(error)
@@ -61,8 +62,9 @@ const browserSupportExtension = extensionStore.url !== ''
     icon="wallet-outline"
     has-menu
     @on-brand-click="handleNavigationDiscovery"
+    @on-icon-click="handleNavigateProfile"
   >
-    <div class="w-full flex items-center justify-end" slot="desktop">
+    <div class="flex items-center justify-end" slot="desktop">
       <lukso-button
         variant="text"
         custom-class="text-purple-51 hover:text-purple-41 uppercase text-12 nav-apax-12-medium-uppercase font-apax font-500"

components/AssetBalance.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+type Props = {
+  balance: string
+  symbol?: string
+  decimals?: number
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="heading-inter-14-bold pb-2">
+    {{ $formatMessage('asset_balance_title') }}
+  </div>
+  <div
+    class="bg-neutral-100 border border-neutral-90 py-3 px-4 rounded-12 mb-8"
+  >
+    <div class="flex items-center justify-between paragraph-inter-14-regular">
+      {{ $formatNumber(fromWeiWithDecimals(balance, decimals)) }}
+      <div
+        class="paragraph-inter-12-regular text-neutral-60 border-l border-l-neutral-90 pl-3 ml-3"
+      >
+        {{ symbol }}
+      </div>
+    </div>
+  </div>
+</template>

components/AssetCreator.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Asset } from '@/types/assets'
+
+type Props = {
+  asset: Asset
+}
+
+const props = defineProps<Props>()
+
+const handleOpenCreator = (event: Event) => {
+  try {
+    event.stopPropagation()
+    assertAddress(props.asset.creatorAddress)
+    navigateTo(profileRoute(props.asset.creatorAddress))
+  } catch (error) {
+    console.error(error)
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="asset.creatorAddress"
+    class="cursor-pointer shadow-neutral-drop-shadow p-2 pr-6 rounded-4 inline-flex bg-neutral-100 transition hover:scale-105"
+    @click="handleOpenCreator"
+  >
+    <lukso-profile
+      size="x-small"
+      :profile-url="asset.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="asset.creatorName"
+        :address="asset.creatorAddress"
+        size="x-small"
+        class="flex"
+        name-color="neutral-20"
+      ></lukso-username>
+    </div>
+  </div>
+</template>

components/AssetImages.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { ImageMetadata } from '@lukso/lsp-factory.js'
-
 type Props = {
-  images: ImageMetadata[][]
+  images: string[]
 }
 
 defineProps<Props>()
@@ -19,7 +17,7 @@ defineProps<Props>()
         :key="index"
         class="w-14 h-14 rounded-8 bg-cover bg-position-center bg-neutral-90"
         :style="{
-          backgroundImage: `url(${formatUrl(image[0]?.url)})`,
+          backgroundImage: `url(${image})`,
         }"
       ></div>
     </div>

components/AssetListItem.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+type Props = {
+  icon?: string
+  name?: string
+  symbol?: string
+  address?: Address
+  hasIdenticon?: boolean
+  hasSquareIcon?: boolean
+  isSelected?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[max-content,auto] p-2 rounded-12 cursor-pointer hover:bg-neutral-95"
+    :class="{
+      'bg-neutral-95': isSelected,
+    }"
+  >
+    <div class="pr-4 flex items-center">
+      <div
+        class="shadow-neutral-above-shadow-1xl"
+        :class="{
+          'rounded-full': !hasSquareIcon,
+          'rounded-4': hasSquareIcon,
+        }"
+      >
+        <lukso-profile
+          size="small"
+          :profile-url="icon"
+          :profile-address="address"
+          :has-identicon="hasIdenticon ? true : undefined"
+          :is-square="hasSquareIcon ? true : undefined"
+        ></lukso-profile>
+      </div>
+    </div>
+    <div class="grid grid-cols-[auto,max-content] items-center">
+      <div class="flex flex-col text-left">
+        <div class="paragraph-inter-14-semi-bold">
+          {{ name }}
+        </div>
+        <div class="paragraph-inter-12-semi-bold text-neutral-60">
+          {{ symbol }}
+        </div>
+      </div>
+      <lukso-icon
+        v-if="isSelected"
+        name="complete-filled"
+        color="green-54"
+        secondary-color="neutral-100"
+      ></lukso-icon>
+    </div>
+  </div>
+</template>

components/AssetOwnInfo.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { fromWei } from 'web3-utils'
-
 type Props = {
   profile: Profile
   amount?: string
   symbol?: string
+  decimals?: number
 }
 
 defineProps<Props>()
@@ -25,7 +24,9 @@ defineProps<Props>()
         </div>
         <div class="paragraph-inter-12-semi-bold">
           <span v-if="amount">{{
-            $formatNumber(fromWei(amount, 'ether'))
+            $formatNumber(fromWeiWithDecimals(amount, decimals), {
+              maximumFractionDigits: decimals,
+            })
           }}</span>
           <span v-else>0</span>
           <span class="text-neutral-60 ml-1">{{ symbol }}</span>

components/AssetSupply.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 type Props = {
-  supply: string
-  symbol: string
+  tokenSupply: string
+  symbol?: string
+  decimals?: number
 }
 
 defineProps<Props>()
@@ -15,7 +16,7 @@ defineProps<Props>()
     class="bg-neutral-100 border border-neutral-90 py-3 px-4 rounded-12 mb-8"
   >
     <div class="flex items-center justify-between paragraph-inter-14-regular">
-      {{ $formatNumber(supply, { maximumFractionDigits: 20 }) }}
+      {{ $formatNumber(fromWeiWithDecimals(tokenSupply, decimals)) }}
       <div
         class="paragraph-inter-12-regular text-neutral-60 border-l border-l-neutral-90 pl-3 ml-3"
       >

components/ModalTemplateSelectAssets.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Asset } from '@/types/assets'
+
+const { currentNetwork } = useAppStore()
+const { ownedAssets } = storeToRefs(useViewedProfileStore())
+const { profile: connectedProfile } = useConnectedProfileStore()
+const { asset: selectedAsset } = storeToRefs(useSendStore())
+
+type Props = {
+  closeModal: () => void
+}
+
+const props = defineProps<Props>()
+
+const handleSelectLyx = () => {
+  assertAddress(connectedProfile.address, 'profile')
+  navigateTo(sendRoute(connectedProfile.address))
+  props.closeModal()
+}
+
+const handleSelectAsset = (asset: Asset) => {
+  assertAddress(connectedProfile.address, 'profile')
+  navigateTo({
+    path: sendRoute(connectedProfile.address),
+    query: {
+      asset: asset.address,
+    },
+  })
+  props.closeModal()
+}
+</script>
+
+<template>
+  <div class="bg-neutral-98 text-center p-6 rounded-12 flex flex-col">
+    <div
+      class="heading-inter-21-semi-bold flex items-center justify-between pb-6"
+    >
+      {{ $formatMessage('modal_select_assets_title') }}
+      <lukso-icon
+        name="close-lg"
+        class="cursor-pointer"
+        @click="closeModal"
+      ></lukso-icon>
+    </div>
+    <ul class="space-y-2 max-h-72 overflow-y-auto -mr-4">
+      <li class="mr-4">
+        <AssetListItem
+          :icon="ASSET_LYX_ICON_URL"
+          :name="currentNetwork.token.name"
+          :symbol="currentNetwork.token.symbol"
+          :is-selected="selectedAsset?.isNativeToken"
+          @click="handleSelectLyx"
+        />
+      </li>
+      <li v-for="asset in ownedAssets" :key="asset.address" class="mr-4">
+        <AssetListItem
+          :icon="getAssetThumb(asset)"
+          :name="asset.name"
+          :symbol="asset.symbol"
+          :address="asset.address"
+          :has-identicon="true"
+          :has-square-icon="isLsp8(asset)"
+          :is-selected="
+            selectedAsset?.address === asset.address &&
+            selectedAsset?.tokenId === asset.tokenId
+          "
+          @click="handleSelectAsset(asset)"
+        />
+      </li>
+    </ul>
+  </div>
+</template>

components/NftList.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
 const { nfts, assetFilter } = storeToRefs(useViewedProfileStore())
 </script>