Merge branch 'develop'

.node-version

@@ -0,0 +1 @@
+v18.17.0

README.md

@@ -6,11 +6,11 @@ Wallet that will let you see the Tokens ([LSP7](https://docs.lukso.tech/standard
 
 ## 🚀 Deployments
 
-### Preview:
+### Preview
 
 When you create a PR, a preview URL will be appended to the PR discussion.
 
-### Staging:
+### Staging
 
 Branch: `develop`
 
@@ -78,3 +78,8 @@ yarn unlink ../tools-web-components/package
 ```
 
 > Make sure you remove link before pushing, otherwise it won't build in Cloudflare.
+
+### Releasing
+
+We use [Release Please](https://github.com/googleapis/release-please) to automate release process. Just merge your feature PR into `develop` branch and new release PR with changelog will be created. You can stack multiple PRs into release.
+Once you are ready to release just merge release PR into `main` branch.

app.vue

@@ -3,10 +3,6 @@ import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
 
 import { fetchProfile } from '@/utils/fetchProfile'
 import { PROVIDERS, STORAGE_KEY } from '@/types/enums'
-import {
-  CONNECTION_EXPIRY_CHECK_INTERVAL_MS,
-  INJECTED_PROVIDER,
-} from '@/shared/config'
 import { assertString } from '@/utils/validators'
 
 if (typeof window !== 'undefined') {
@@ -17,9 +13,11 @@ if (typeof window !== 'undefined') {
 const web3Store = useWeb3Store()
 const appStore = useAppStore()
 const { providerEvents, disconnect } = useBrowserExtension()
-const { reloadProfile } = useProfileStore()
-const { setConnectedAddress, setConnectedProfile, setStatus } =
-  useConnectionStore()
+const {
+  setProfile: setConnectedProfile,
+  setStatus,
+  profile: connectedProfile,
+} = useConnectedProfileStore()
 const router = useRouter()
 
 const setupTranslations = () => {
@@ -53,7 +51,7 @@ const setupConnectedProfile = async () => {
       setStatus('isConnected', true)
       setStatus('isProfileLoading', true)
       const profile = await fetchProfile(connectedAddress)
-      setConnectedAddress(connectedAddress)
+      connectedProfile.address = connectedAddress
       setConnectedProfile(profile)
     }
   } catch (error) {
@@ -82,8 +80,8 @@ const routerBackProfileLoad = async () => {
         assertAddress(toProfileAddress, 'profile')
 
         if (toProfileAddress !== fromProfileAddress) {
-          const profile = await fetchProfile(toProfileAddress)
-          reloadProfile(profile)
+          await setupViewedProfile(toProfileAddress)
+          await setupViewedAssets(toProfileAddress)
         }
       } catch (error) {
         console.error(error)
@@ -125,6 +123,6 @@ onMounted(async () => {
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-    <Modal />
+    <AppModal />
   </div>
 </template>

components/connect-or-install-button.vue → components/AppButtonConnectOrInstall.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { connect, isUniversalProfileExtension } = useBrowserExtension()
-const { status } = useConnectionStore()
+const { status } = useConnectedProfileStore()
 
 const handleConnect = async () => {
   connect()

components/modal.vue → components/AppModal.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { MODAL_DEFAULT_TEMPLATE } from '@/shared/config'
-
 const appStore = useAppStore()
 const modalTemplateComponent = shallowRef()
 
@@ -9,7 +7,7 @@ const loadModalTemplate = () => {
     const templateName = appStore.modal?.template
       ? appStore.modal.template
       : MODAL_DEFAULT_TEMPLATE
-    return import(`./modal-templates/${templateName}.vue`)
+    return import(`./AppModalTemplate${templateName}.vue`)
   })
 }
 

components/navbar.vue → components/AppNavbar.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { homeRoute, profileRoute, sendRoute } from '@/shared/routes'
-import { IS_TESTNET } from '@/shared/config'
-
-const { profile: connectedProfile, status } = useConnectionStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
 const { connect, disconnect, isUniversalProfileExtension } =
   useBrowserExtension()
-const { reloadProfile } = useProfileStore()
+const { reloadProfile } = useViewedProfileStore()
 
 const handleNavigateProfile = async () => {
   try {
@@ -78,7 +75,7 @@ const browserSupportExtension = extensionStore.url !== ''
       >
         {{ $formatMessage('header_my_profile') }}
       </lukso-button>
-      <ProfileDropdown v-if="status.isConnected" />
+      <AppNavbarProfileDropdown v-if="status.isConnected" />
       <lukso-button
         v-else-if="isUniversalProfileExtension()"
         variant="secondary"

components/profile-dropdown.vue → components/AppNavbarProfileDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { profile } = useConnectionStore()
+const { profile } = useConnectedProfileStore()
 const { disconnect } = useBrowserExtension()
 
 const DROPDOWN_TRIGGER_TAG_NAME = 'LUKSO-PROFILE'

components/nft-list.vue → components/NftList.vue

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

components/nftCard.vue → components/NftListCard.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { nftRoute, sendRoute } from '@/shared/routes'
 import { Nft } from '@/types/assets'
 
 type Props = {
@@ -9,8 +8,8 @@ type Props = {
 
 const props = defineProps<Props>()
 
-const { profile: connectedProfile, status } = useConnectionStore()
-const { profile: viewedProfile } = useProfileStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
+const { profile: viewedProfile } = useViewedProfileStore()
 
 const handleShowAsset = () => {
   try {

components/profile-header.vue → components/ProfileHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
-const { profile: connectedProfile } = useConnectionStore()
+const { profile: connectedProfile } = useConnectedProfileStore()
 const { receiver } = storeToRefs(useSendStore())
 </script>
 

components/send-draft.vue → components/SendDraft.vue

@@ -3,7 +3,7 @@ import { fromWei, isAddress } from 'web3-utils'
 import { storeToRefs } from 'pinia'
 import BigNumber from 'bignumber.js'
 
-const { profile: connectedProfile } = useConnectionStore()
+const { profile: connectedProfile } = useConnectedProfileStore()
 const { asset, receiverAddress, receiver, receiverError, amount, onSend } =
   storeToRefs(useSendStore())
 const isReceiverLoading = ref<boolean>(false)
@@ -174,13 +174,15 @@ const handleSend = () => {
         class="w-full mt-4"
         :loading="isReceiverLoading"
         :disabled="
-          !receiverAddress || receiverError || !amount ? true : undefined
+          !receiverAddress || receiverError || !Number(amount)
+            ? true
+            : undefined
         "
         @click="handleSend"
         is-full-width
         >{{
           $formatMessage('send_button', {
-            amount: $formatNumber(amount || '0'),
+            amount: !!Number(amount) ? $formatNumber(amount || '') : '',
             symbol: asset?.symbol || '',
           })
         }}</lukso-button

components/send-pending.vue → components/SendPending.vue

@@ -7,7 +7,7 @@ const { amount, asset } = storeToRefs(useSendStore())
 <template>
   <lukso-card variant="with-header" is-full-width>
     <div slot="header" class="px-6 py-10 flex flex-col">
-      <ProfileHeader />
+      <SendProfileHeader />
     </div>
     <div slot="content" class="p-8 flex flex-col items-center">
       <div class="heading-inter-17-semi-bold">

components/send-success.vue → components/SendSuccess.vue

@@ -10,7 +10,7 @@ const handleSendMore = () => {
 <template>
   <lukso-card variant="with-header" is-full-width>
     <div slot="header" class="px-6 py-10 flex flex-col">
-      <ProfileHeader />
+      <SendProfileHeader />
     </div>
     <div slot="content" class="p-8 flex flex-col items-center">
       <div class="heading-inter-17-semi-bold">

components/tokens-list.vue → components/TokenList.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia'
 
 import { AssetFilter } from '@/types/assets'
 
-const { tokens, assetFilter } = storeToRefs(useProfileStore())
+const { tokens, assetFilter } = storeToRefs(useViewedProfileStore())
 </script>
 
 <template>
@@ -12,8 +12,8 @@ const { tokens, assetFilter } = storeToRefs(useProfileStore())
       {{ $formatMessage('tokens_title') }}
     </h3>
     <div class="grid gap-6 grid-col grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
-      <LyxCard v-if="assetFilter === AssetFilter.owned" />
-      <TokenCard
+      <TokenListLyxCard v-if="assetFilter === AssetFilter.owned" />
+      <TokenListCard
         v-for="(asset, index) in tokens(assetFilter)"
         :key="index"
         :asset="asset"

components/token-card.vue → components/TokenListCard.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { fromWei } from 'web3-utils'
 
-import { sendRoute, tokenRoute } from '@/shared/routes'
 import { Token, StandardsAbbreviations } from '@/types/assets'
 
 type Props = {
@@ -12,8 +11,8 @@ type Props = {
 
 const props = defineProps<Props>()
 
-const { profile: connectedProfile, status } = useConnectionStore()
-const { profile: viewedProfile } = useProfileStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
+const { profile: viewedProfile } = useViewedProfileStore()
 
 const handleShowAsset = () => {
   if (!props.isOpenable) {

components/lyx-card.vue → components/TokenListLyxCard.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { fromWei } from 'web3-utils'
 
-import { sendRoute } from '@/shared/routes'
-
-const { profile: connectedProfile, status } = useConnectionStore()
-const { profile: viewedProfile } = useProfileStore()
+const { profile: connectedProfile, status } = useConnectedProfileStore()
+const { profile: viewedProfile } = useViewedProfileStore()
 const appStore = useAppStore()
 
 const handleSendAsset = () => {
@@ -19,9 +17,9 @@ const handleSendAsset = () => {
 
 <template>
   <lukso-card size="small" is-full-width
-    ><div slot="content" class="p-4">
-      <div class="flex gap-6 pt-4">
-        <div class="pl-4 flex flex-col items-center">
+    ><div slot="content" class="p-4 pt-11 flex flex-col justify-center">
+      <div class="flex gap-6">
+        <div class="flex flex-col items-center">
           <div class="border border-neutral-90 rounded-full p-0.5">
             <lukso-profile
               size="medium"
@@ -41,20 +39,20 @@ const handleSendAsset = () => {
             }}</span>
           </div>
           <div class="paragraph-inter-12-regular pb-4 hidden">$ 123.24</div>
-          <div class="flex justify-end w-full pt-4">
-            <lukso-button
-              v-if="
-                status.isConnected &&
-                viewedProfile.address === connectedProfile.address
-              "
-              size="small"
-              variant="secondary"
-              @click="handleSendAsset"
-              >{{ $formatMessage('button_send') }}</lukso-button
-            >
-          </div>
         </div>
       </div>
+      <div class="flex justify-end w-full pt-4">
+        <lukso-button
+          v-if="
+            status.isConnected &&
+            viewedProfile.address === connectedProfile.address
+          "
+          size="small"
+          variant="secondary"
+          @click="handleSendAsset"
+          >{{ $formatMessage('button_send') }}</lukso-button
+        >
+      </div>
     </div>
   </lukso-card>
 </template>

components/profile.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { profile } = useProfileStore()
+const { profile } = useViewedProfileStore()
 
 const handleCopyAddress = () => {
   try {
@@ -24,21 +24,23 @@ const handleCopyAddress = () => {
           :profile-url="profile.profileImageUrl"
           :profile-address="profile.address"
           class="mb-4"
+          has-identicon
         >
         </lukso-profile>
         <lukso-username
-          v-if="profile.name"
-          :name="profile.name"
+          :name="profile.name || $formatMessage('profile_default_name')"
           size="large"
           address-color="neutral-100"
-          name-color="neutral-100"
+          max-width="350"
+          :name-color="profile.backgroundImageUrl ? 'neutral-100' : ''"
         ></lukso-username>
         <lukso-username
           :address="profile.address"
-          :size="profile.name ? 'small' : 'large'"
+          size="small"
           slice-by="40"
-          address-color="neutral-100"
-          name-color="neutral-100"
+          :address-color="
+            profile.backgroundImageUrl ? 'neutral-100' : 'neutral-20'
+          "
           class="cursor-pointer"
           @click="handleCopyAddress"
         ></lukso-username>