chore: rework into Pinia ORM (#120)

app.vue

@@ -2,62 +2,38 @@
 import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
 import { isAddress } from 'web3-utils'
 
-import { fetchProfile } from '@/utils/fetchProfile'
 import { assertString } from '@/utils/validators'
 
 if (typeof window !== 'undefined') {
   import('@lukso/web-components')
 }
 
 const web3Store = useWeb3Store()
-const { getNetwork, selectedNetwork, modal } = useAppStore()
+const { getNetwork } = useAppStore()
+const { isLoadedApp, selectedChainId, modal } = storeToRefs(useAppStore())
 const { addProviderEvents, removeProviderEvents, disconnect } =
   useBrowserExtension()
-const {
-  setProfile: setConnectedProfile,
-  setStatus,
-  profile: connectedProfile,
-} = useConnectedProfileStore()
 const router = useRouter()
 
 const setupTranslations = () => {
   useIntl().setupIntl(defaultConfig)
 }
 
-const setupWeb3Instances = () => {
+const setupWeb3Instances = async () => {
   const provider = INJECTED_PROVIDER
 
   if (provider) {
     // for chain interactions through wallet
     web3Store.addWeb3(PROVIDERS.INJECTED, provider)
-    addProviderEvents(provider)
+    await addProviderEvents(provider)
     // expose web3 instance to global scope for console access
     window.web3 = web3Store.getWeb3(PROVIDERS.INJECTED)
   } else {
     console.error('No browser extension provider found')
   }
 
   // for chain interactions through RPC endpoint
-  web3Store.addWeb3(PROVIDERS.RPC, getNetwork(selectedNetwork).rpcHttp)
-}
-
-const setupConnectedProfile = async () => {
-  try {
-    const connectedAddress = getItem(STORAGE_KEY.CONNECTED_ADDRESS)
-
-    if (connectedAddress) {
-      assertAddress(connectedAddress, 'profile')
-      setStatus('isConnected', true)
-      setStatus('isProfileLoading', true)
-      const profile = await fetchProfile(connectedAddress)
-      connectedProfile.address = connectedAddress
-      setConnectedProfile(profile)
-    }
-  } catch (error) {
-    console.error(error)
-  } finally {
-    setStatus('isProfileLoading', false)
-  }
+  web3Store.addWeb3(PROVIDERS.RPC, getNetwork(selectedChainId.value).rpcHttp)
 }
 
 const routerBackProfileLoad = async () => {
@@ -70,20 +46,17 @@ const routerBackProfileLoad = async () => {
       const fromProfileAddress = from.params?.profileAddress
       const toProfileAddress = to.params?.profileAddress
 
-      if (!fromProfileAddress || !toProfileAddress) {
-        return next()
-      }
-
-      try {
-        assertString(toProfileAddress)
-        assertAddress(toProfileAddress, 'profile')
-
-        if (toProfileAddress !== fromProfileAddress) {
-          await loadViewedProfile(toProfileAddress)
-          await loadViewedAssets(toProfileAddress)
+      if (toProfileAddress) {
+        try {
+          assertString(toProfileAddress)
+          assertAddress(toProfileAddress, 'profile')
+          if (toProfileAddress !== fromProfileAddress) {
+            await fetchProfile(toProfileAddress)
+            await fetchAssets(toProfileAddress)
+          }
+        } catch (error) {
+          console.error(error)
         }
-      } catch (error) {
-        console.error(error)
       }
       next()
     }
@@ -100,9 +73,6 @@ const checkConnectionExpiry = () => {
 
       if (expiryDateParsed < Date.now()) {
         disconnect()
-        // we store address as this is "soft" disconnect that won't trigger request account on connection
-        connectedProfile.address &&
-          setItem(STORAGE_KEY.RECONNECT_ADDRESS, connectedProfile.address)
       }
     } catch (error) {}
   }
@@ -124,26 +94,38 @@ const setupViewedProfile = async () => {
 
     if (profileAddress) {
       if (isAddress(profileAddress)) {
-        await loadViewedProfile(profileAddress)
-        await loadViewedAssets(profileAddress)
+        await fetchProfile(profileAddress)
+        await fetchAssets(profileAddress)
       } else {
         navigateTo(notFoundRoute())
       }
     }
-  } catch (error) {
+  } catch (error: unknown) {
     console.error(error)
+
+    if (error instanceof EoAError) {
+      navigateTo(notFoundRoute()) // TODO we might want to inform user about EoA instead showing 404
+    }
   }
 }
 
+const setupNetwork = async () => {
+  const chainId = (await INJECTED_PROVIDER?.request({
+    method: 'eth_chainId',
+  })) as string
+
+  selectedChainId.value = chainId
+}
+
 onMounted(async () => {
   setupTranslations()
-  setupWeb3Instances()
+  await setupNetwork()
+  await setupWeb3Instances()
   checkConnectionExpiry()
-  await setupConnectedProfile()
-  await setupViewedProfile()
   await routerBackProfileLoad()
+  await setupViewedProfile()
 
-  setStatus('isProfileLoaded', true)
+  isLoadedApp.value = true
 
   await setupCurrencies()
 })
@@ -156,7 +138,7 @@ onUnmounted(() => {
 useHead({
   bodyAttrs: {
     class: computed(() => {
-      if (modal?.isOpen) {
+      if (modal.value?.isOpen) {
         return 'overflow-hidden'
       }
 

components/AppAvatar.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import makeBlockie from 'ethereum-blockies-base64'
 
+import { Profile } from '@/models/profile'
+
 type Props = {
   isLoading?: boolean
   isEoa?: boolean
   isError?: boolean
-  address?: Address
-  profile?: Profile | Receiver
+  profile?: Profile
 }
 
 defineProps<Props>()
@@ -27,21 +28,21 @@ defineProps<Props>()
   </div>
   <div v-else-if="isEoa" class="flex flex-col items-center">
     <lukso-profile
-      v-if="address"
+      v-if="profile?.address"
       size="large"
-      :profile-url="makeBlockie(address)"
+      :profile-url="makeBlockie(profile.address)"
       class="mb-2"
     ></lukso-profile>
     <lukso-username
-      :address="address"
+      :address="profile?.address"
       size="small"
       slice-by="4"
     ></lukso-username>
   </div>
   <div v-else class="flex flex-col items-center">
     <lukso-profile
       size="large"
-      :profile-url="profile?.profileImageUrl"
+      :profile-url="profile?.profileImage?.base64"
       :profile-address="profile?.address"
       has-identicon
       class="mb-2"
@@ -53,7 +54,7 @@ defineProps<Props>()
     ></lukso-username>
     <lukso-username
       v-else-if="profile?.address"
-      :address="profile?.address"
+      :address="profile.address"
       size="small"
       slice-by="4"
     ></lukso-username>

components/AppButtonConnectOrInstall.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { connect, isUniversalProfileExtension } = useBrowserExtension()
-const { status } = useConnectedProfileStore()
+const { isConnecting } = storeToRefs(useAppStore())
 
 const handleConnect = async () => {
   connect()
@@ -27,7 +27,7 @@ const browserSupportExtension = extensionStore.url !== ''
     variant="landing"
     custom-class="mt-6"
     is-full-width
-    :disabled="status.isConnecting ? true : undefined"
+    :disabled="isConnecting ? true : undefined"
   >
     {{ $formatMessage('connect_or_install_button_connect') }}
   </lukso-button>

components/AppNavbar.vue

@@ -1,28 +1,29 @@
 <script setup lang="ts">
-const { profile: connectedProfile, status } = useConnectedProfileStore()
 const { connect, disconnect, isUniversalProfileExtension } =
   useBrowserExtension()
-const { profile: viewedProfile, reloadProfile } = useViewedProfileStore()
+const { viewedProfile } = useViewedProfile()
+const { connectedProfile } = useConnectedProfile()
+const { isConnecting, isConnected, isTestnet } = storeToRefs(useAppStore())
 
 const handleNavigateProfile = async () => {
   try {
-    if (status.isConnected) {
-      assertAddress(connectedProfile.address, 'profile')
-      reloadProfile(connectedProfile)
-      navigateTo(profileRoute(connectedProfile.address))
+    if (isConnected.value) {
+      assertAddress(connectedProfile.value?.address, 'profile')
+      navigateTo(profileRoute(connectedProfile.value.address))
     } else {
-      assertAddress(viewedProfile.address, 'profile')
-      navigateTo(profileRoute(viewedProfile.address))
+      assertAddress(viewedProfile.value?.address, 'profile')
+      navigateTo(profileRoute(viewedProfile.value.address))
     }
   } catch (error) {
     console.error(error)
+    navigateTo(homeRoute())
   }
 }
 
 const handleNavigateSend = () => {
   try {
-    assertAddress(connectedProfile.address, 'profile')
-    navigateTo(sendRoute(connectedProfile.address))
+    assertAddress(connectedProfile.value?.address, 'profile')
+    navigateTo(sendRoute(connectedProfile.value.address))
   } catch (error) {
     console.error(error)
   }
@@ -58,7 +59,7 @@ const browserSupportExtension = extensionStore.url !== ''
   <lukso-navbar
     is-sticky
     :title="$formatMessage('header_title')"
-    :is-testnet="IS_TESTNET"
+    :is-testnet="isTestnet ? true : undefined"
     icon="wallet-outline"
     has-menu
     @on-brand-click="handleNavigationDiscovery"
@@ -73,28 +74,28 @@ const browserSupportExtension = extensionStore.url !== ''
         {{ $formatMessage('header_discovery') }}
       </lukso-button>
       <lukso-button
-        v-if="status.isConnected"
+        v-if="isConnected"
         variant="text"
         custom-class="text-purple-51 hover:text-purple-41 uppercase text-12 nav-apax-12-medium-uppercase font-apax font-500"
         @click="handleNavigateSend"
       >
         {{ $formatMessage('header_send') }}
       </lukso-button>
       <lukso-button
-        v-if="status.isConnected"
+        v-if="isConnected"
         variant="text"
         custom-class="text-purple-51 hover:text-purple-41 uppercase text-12 nav-apax-12-medium-uppercase font-apax font-500"
         @click="handleNavigateProfile"
       >
         {{ $formatMessage('header_my_profile') }}
       </lukso-button>
-      <AppNavbarProfileDropdown v-if="status.isConnected" />
+      <AppNavbarProfileDropdown v-if="isConnected" />
       <lukso-button
         v-else-if="isUniversalProfileExtension()"
         variant="secondary"
         custom-class="text-purple-51 hover:text-purple-41 uppercase text-12 nav-apax-12-medium-uppercase font-apax font-500"
         @click="handleConnect"
-        :is-loading="status.isConnecting ? true : undefined"
+        :is-loading="isConnecting ? true : undefined"
         :loading-text="$formatMessage('header_connect')"
       >
         {{ $formatMessage('header_connect') }}
@@ -119,23 +120,23 @@ const browserSupportExtension = extensionStore.url !== ''
           {{ $formatMessage('header_discovery') }}
         </lukso-button>
         <lukso-button
-          v-if="status.isConnected"
+          v-if="isConnected"
           variant="text"
           custom-class="text-purple-51 hover:text-purple-41 uppercase text-12 nav-apax-12-medium-uppercase font-apax font-500"
           @click="handleNavigateSend"
         >
           {{ $formatMessage('header_send') }}
         </lukso-button>
         <lukso-button
-          v-if="status.isConnected"
+          v-if="isConnected"
           variant="text"
           custom-class="text-purple-51 hover:text-purple-41 uppercase text-12 nav-apax-12-medium-uppercase font-apax font-500"
           @click="handleNavigateProfile"
         >
           {{ $formatMessage('header_my_profile') }}
         </lukso-button>
         <lukso-button
-          v-if="status.isConnected"
+          v-if="isConnected"
           variant="text"
           custom-class="text-purple-51 text-12 hover:text-purple-41 uppercase nav-apax-12-medium-uppercase font-apax font-500"
           @click="handleDisconnect"

components/AppNavbarProfileDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { profile } = useConnectedProfileStore()
+const { connectedProfile } = useConnectedProfile()
 const { disconnect } = useBrowserExtension()
 
 const DROPDOWN_TRIGGER_TAG_NAME = 'LUKSO-PROFILE'
@@ -35,10 +35,10 @@ onMounted(() => {
   <div class="cursor-pointer relative">
     <lukso-profile
       size="small"
-      :profile-url="profile.profileImageUrl"
+      :profile-url="connectedProfile?.profileImage?.base64"
       @click="handleToggleDropdown"
-      :profile-address="profile.address"
-      :data-profile-address="profile.address"
+      :profile-address="connectedProfile?.address"
+      :data-profile-address="connectedProfile?.address"
       has-identicon
     ></lukso-profile>
 

components/AssetBalance.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 type Props = {
-  balance: string
+  balance?: string
   symbol?: string
   decimals?: number
 }
@@ -16,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(fromWeiWithDecimals(balance, decimals)) }}
+      {{ $formatNumber(fromWeiWithDecimals(balance || '', decimals)) }}
       <div
         class="paragraph-inter-12-regular text-neutral-60 border-l border-l-neutral-90 pl-3 ml-3"
       >