feat: network switch

app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
-import { isAddress } from 'web3-utils'
+import { isAddress, numberToHex } from 'web3-utils'
 
 import { assertString } from '@/utils/validators'
 
@@ -9,8 +9,8 @@ if (typeof window !== 'undefined') {
 }
 
 const web3Store = useWeb3Store()
-const { getNetwork, selectedNetwork, modal } = useAppStore()
-const { isLoadedApp } = storeToRefs(useAppStore())
+const { getNetwork } = useAppStore()
+const { isLoadedApp, selectedChainId, modal } = storeToRefs(useAppStore())
 const { addProviderEvents, removeProviderEvents, disconnect } =
   useBrowserExtension()
 const router = useRouter()
@@ -33,7 +33,7 @@ const setupWeb3Instances = () => {
   }
 
   // for chain interactions through RPC endpoint
-  web3Store.addWeb3(PROVIDERS.RPC, getNetwork(selectedNetwork).rpcHttp)
+  web3Store.addWeb3(PROVIDERS.RPC, getNetwork(selectedChainId.value).rpcHttp)
 }
 
 const routerBackProfileLoad = async () => {
@@ -96,19 +96,28 @@ const setupViewedProfile = async () => {
       if (isAddress(profileAddress)) {
         await fetchProfile(profileAddress)
         await fetchAssets(profileAddress)
-      } else {
-        navigateTo(notFoundRoute())
       }
     }
-  } catch (error) {
+  } catch (error: unknown) {
     console.error(error)
+
+    if (error instanceof EoAError) {
+      navigateTo(notFoundRoute())
+    }
   }
 }
 
+const setupNetwork = async () => {
+  const { getChainId } = useWeb3(PROVIDERS.INJECTED)
+
+  selectedChainId.value = numberToHex(await getChainId()) as string
+}
+
 onMounted(async () => {
   setupTranslations()
   setupWeb3Instances()
   checkConnectionExpiry()
+  await setupNetwork()
   await routerBackProfileLoad()
   await setupViewedProfile()
 
@@ -125,7 +134,7 @@ onUnmounted(() => {
 useHead({
   bodyAttrs: {
     class: computed(() => {
-      if (modal?.isOpen) {
+      if (modal.value?.isOpen) {
         return 'overflow-hidden'
       }
 

components/AppNavbar.vue

@@ -3,7 +3,7 @@ const { connect, disconnect, isUniversalProfileExtension } =
   useBrowserExtension()
 const { viewedProfile } = useViewedProfile()
 const { connectedProfile } = useConnectedProfile()
-const { isConnecting, isConnected } = storeToRefs(useAppStore())
+const { isConnecting, isConnected, isTestnet } = storeToRefs(useAppStore())
 
 const handleNavigateProfile = async () => {
   try {
@@ -59,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"

components/SendCardProfileSearch.vue

@@ -6,7 +6,10 @@ import { IndexedProfile } from '@/models/profile'
 
 const SEARCH_COMPONENT_TAG_NAME = 'LUKSO-SEARCH'
 
-const { search } = useAlgoliaSearch<IndexedProfile>(INDEX_NAME)
+const { currentNetwork } = storeToRefs(useAppStore())
+const { search } = useAlgoliaSearch<IndexedProfile>(
+  currentNetwork.value.indexName
+)
 const { receiver, receiverError } = storeToRefs(useSendStore())
 const { isEoA } = useWeb3(PROVIDERS.RPC)
 const isSearchingReceiver = ref<boolean>(false)

composables/useBrowserExtension.ts

@@ -1,3 +1,5 @@
+import { ProviderAPI } from '@/types/provider'
+
 const openStoreLink = () => {
   const storeLink = browserInfo().storeLink
 
@@ -100,18 +102,28 @@ const handleAccountsChanged = async (accounts: string[]) => {
   }
 }
 
+const handleChainChanged = (network: { chainId: string }) => {
+  const { selectedChainId } = storeToRefs(useAppStore())
+
+  selectedChainId.value = network.chainId
+  disconnect()
+  navigateTo(homeRoute())
+}
+
 const handleDisconnect = () => {
   location.reload()
 }
 
-const addProviderEvents = async (provider: any) => {
+const addProviderEvents = async (provider: ProviderAPI) => {
   provider?.on?.('accountsChanged', handleAccountsChanged)
   provider?.on?.('disconnect', handleDisconnect)
+  provider?.on?.('chainChanged', handleChainChanged)
 }
 
-const removeProviderEvents = async (provider: any) => {
-  provider?.removeListener?.('accountsChanged', handleAccountsChanged)
-  provider?.removeListener?.('disconnect', handleAccountsChanged)
+const removeProviderEvents = async (provider: ProviderAPI) => {
+  provider?.off?.('accountsChanged', handleAccountsChanged)
+  provider?.off?.('disconnect', handleDisconnect)
+  provider?.off?.('chainChanged', handleChainChanged)
 }
 
 const isUniversalProfileExtension = () => {

composables/useWeb3.ts

@@ -62,5 +62,8 @@ export default function useWeb3(providerName: string) {
           console.log(JSON.stringify(payload, null, 2))
         })
     },
+    getChainId: async () => {
+      return await getWeb3().eth.getChainId()
+    },
   }
 }

models/asset.ts

@@ -1,16 +1,18 @@
-import { Item, Model } from 'pinia-orm'
+import { Item } from 'pinia-orm'
 import { LinkMetadata } from '@lukso/lsp-smart-contracts'
 
 import { Profile } from '@/models/profile'
 import { InterfaceId } from '@/types/assets'
 import { Image } from '@/models/image'
+import { BaseModel } from '@/models/base'
 
-export class AssetModel extends Model {
+export class AssetModel extends BaseModel {
   static entity = 'assets'
   static primaryKey = ['address', 'tokenId']
 
   static fields() {
     return {
+      ...super.fields(),
       address: this.attr(null),
       name: this.string(''),
       symbol: this.string(''),

models/base.ts

@@ -0,0 +1,16 @@
+import { Model } from 'pinia-orm'
+
+export class BaseModel extends Model {
+  static fields() {
+    return {
+      chainId: this.attr(null),
+    }
+  }
+
+  declare chainId?: string
+
+  static creating(model: Model) {
+    const { selectedChainId } = storeToRefs(useAppStore())
+    model.chainId = selectedChainId.value
+  }
+}

models/creator.ts

@@ -1,14 +1,16 @@
-import { Item, Model } from 'pinia-orm'
+import { Item } from 'pinia-orm'
 
 import { Profile } from '@/models/profile'
 import { Asset } from '@/models/asset'
+import { BaseModel } from '@/models/base'
 
-export class CreatorModel extends Model {
+export class CreatorModel extends BaseModel {
   static entity = 'creators'
   static primaryKey = ['profileId', 'assetId', 'tokenId']
 
   static fields() {
     return {
+      ...super.fields(),
       isVerified: this.attr(false),
 
       // foreign keys

models/image.ts

@@ -1,11 +1,14 @@
-import { Item, Model } from 'pinia-orm'
+import { Item } from 'pinia-orm'
 
-export class ImageModel extends Model {
+import { BaseModel } from '@/models/base'
+
+export class ImageModel extends BaseModel {
   static entity = 'images'
   static primaryKey = 'hash'
 
   static fields() {
     return {
+      ...super.fields(),
       width: this.number(0),
       height: this.number(0),
       hashFunction: this.string(''),

models/profile.ts

@@ -1,14 +1,16 @@
-import { Item, Model } from 'pinia-orm'
+import { Item } from 'pinia-orm'
 import { LSP3ProfileMetadata, LinkMetadata } from '@lukso/lsp-smart-contracts'
 
 import { Image } from '@/models/image'
+import { BaseModel } from '@/models/base'
 
-export class ProfileModel extends Model {
+export class ProfileModel extends BaseModel {
   static entity = 'profiles'
   static primaryKey = 'address'
 
   static fields() {
     return {
+      ...super.fields(),
       address: this.attr(null),
       name: this.string(''),
       balance: this.string(''),

pages/[profileAddress]/send.vue

@@ -166,7 +166,6 @@ const updateLyxBalance = async () => {
   useRepo(ProfileModel)
     .where('address', connectedProfile.value.address)
     .update({ balance })
-  // TODO check if this update is needed
 }
 </script>
 

repositories/asset.ts

@@ -5,10 +5,13 @@ import { InterfaceId } from '@/types/assets'
 
 export class AssetRepository extends Repository<AssetModel> {
   async loadAssets(addresses: Address[], profileAddress: Address) {
+    const { selectedChainId } = storeToRefs(useAppStore())
+
     await Promise.all(
       addresses.map(async assetAddress => {
         const storageAsset = this.repo(AssetModel)
           .where('address', assetAddress)
+          .where('chainId', selectedChainId.value)
           .get()
 
         if (storageAsset && storageAsset.length > 0) {
@@ -42,6 +45,7 @@ export class AssetRepository extends Repository<AssetModel> {
 
   async getOwnedTokens() {
     const { viewedProfile } = useViewedProfile()
+    const { selectedChainId } = storeToRefs(useAppStore())
 
     if (!viewedProfile.value?.receivedAssetIds) {
       return []
@@ -50,11 +54,13 @@ export class AssetRepository extends Repository<AssetModel> {
     return this.repo(AssetModel)
       .where('standard', 'LSP7DigitalAsset')
       .where('address', viewedProfile.value.receivedAssetIds)
+      .where('chainId', selectedChainId.value)
       .get()
   }
 
   async getIssuedTokens() {
     const { viewedProfile } = useViewedProfile()
+    const { selectedChainId } = storeToRefs(useAppStore())
 
     if (!viewedProfile.value?.issuedAssetIds) {
       return []
@@ -63,11 +69,13 @@ export class AssetRepository extends Repository<AssetModel> {
     return this.repo(AssetModel)
       .where('standard', 'LSP7DigitalAsset')
       .where('address', viewedProfile.value.issuedAssetIds)
+      .where('chainId', selectedChainId.value)
       .get()
   }
 
   async getOwnedNfts() {
     const { viewedProfile } = useViewedProfile()
+    const { selectedChainId } = storeToRefs(useAppStore())
 
     if (!viewedProfile.value?.receivedAssetIds) {
       return []
@@ -76,11 +84,13 @@ export class AssetRepository extends Repository<AssetModel> {
     return this.repo(AssetModel)
       .where('standard', 'LSP8IdentifiableDigitalAsset')
       .where('address', viewedProfile.value.receivedAssetIds)
+      .where('chainId', selectedChainId.value)
       .get()
   }
 
   async getIssuedNfts() {
     const { viewedProfile } = useViewedProfile()
+    const { selectedChainId } = storeToRefs(useAppStore())
 
     if (!viewedProfile.value?.issuedAssetIds) {
       return []
@@ -89,11 +99,13 @@ export class AssetRepository extends Repository<AssetModel> {
     return this.repo(AssetModel)
       .where('standard', 'LSP8IdentifiableDigitalAsset')
       .where('address', viewedProfile.value.issuedAssetIds)
+      .where('chainId', selectedChainId.value)
       .get()
   }
 
   getOwnedAssets() {
     const { viewedProfile } = useViewedProfile()
+    const { selectedChainId } = storeToRefs(useAppStore())
 
     if (!viewedProfile.value?.receivedAssetIds) {
       return []
@@ -102,6 +114,7 @@ export class AssetRepository extends Repository<AssetModel> {
     return this.repo(AssetModel)
       .where('address', viewedProfile.value.receivedAssetIds)
       .where('standard', (standard: InterfaceId) => standard)
+      .where('chainId', selectedChainId.value)
       .get()
   }
 
@@ -124,18 +137,27 @@ export class AssetRepository extends Repository<AssetModel> {
   }
 
   getAssetAndImages(address: Address, tokenId = '') {
+    const { selectedChainId } = storeToRefs(useAppStore())
     const primaryKey = this.primaryKey(address, tokenId)
-    const asset = this.repo(AssetModel).find(primaryKey)
+    const asset = this.repo(AssetModel)
+      .where('chainId', selectedChainId.value)
+      .find(primaryKey)
 
     if (!asset) {
       return
     }
 
-    const icon = asset?.iconId && this.repo(ImageModel).find(asset.iconId)
+    const icon =
+      asset?.iconId &&
+      this.repo(ImageModel)
+        .where('chainId', selectedChainId.value)
+        .find(asset.iconId)
     const images =
       asset?.imageIds &&
       asset.imageIds.length &&
-      this.repo(ImageModel).find(asset.imageIds)
+      this.repo(ImageModel)
+        .where('chainId', selectedChainId.value)
+        .find(asset.imageIds)
 
     return {
       ...asset,
@@ -145,12 +167,21 @@ export class AssetRepository extends Repository<AssetModel> {
   }
 
   setBalance(address: Address, balance: string) {
-    this.repo(AssetModel).where('address', address).update({ balance })
+    const { selectedChainId } = storeToRefs(useAppStore())
+
+    this.repo(AssetModel)
+      .where('address', address)
+      .where('chainId', selectedChainId.value)
+      .update({ balance })
   }
 
   removeAsset(address: Address, tokenId = '') {
+    const { selectedChainId } = storeToRefs(useAppStore())
     const primaryKey = this.primaryKey(address, tokenId)
-    this.repo(AssetModel).destroy(primaryKey)
+
+    this.repo(AssetModel)
+      .where('chainId', selectedChainId.value)
+      .destroy(primaryKey)
   }
 
   private primaryKey(address: Address, tokenId = '') {