Always use first blockchain from "blockchains" property of instance info object

src/api/instance.ts

@@ -16,7 +16,7 @@ interface ChainMetadata {
   explorer_url: string | null;
 }
 
-interface BlockchainInfo {
+export interface BlockchainInfo {
   chain_id: string;
   chain_metadata: ChainMetadata | null;
   contract_address: string | null;

src/components/Post.vue

@@ -285,7 +285,7 @@ interface PaymentOption {
 
 const router = useRouter()
 const { currentUser, ensureAuthToken } = $(useCurrentUser())
-const { instance, getActorAddress } = $(useInstanceInfo())
+const { getActorAddress, getBlockchainInfo, instance } = $(useInstanceInfo())
 
 /* eslint-disable-next-line no-undef */
 const props = defineProps<{
@@ -307,7 +307,7 @@ let menuVisible = $ref(false)
 let selectedPaymentAddress = $ref<string | null>(null)
 let isWaitingForToken = $ref(false)
 
-const blockchain = $computed(() => instance?.blockchains[0])
+const blockchain = $computed(() => getBlockchainInfo())
 const author = $computed(() => new ProfileWrapper(props.post.account))
 
 function openProfile(event: Event, profile: Mention | Profile) {

src/components/Sidebar.vue

@@ -55,7 +55,7 @@ const {
   endUserSession,
   ensureAuthToken,
 } = $(useCurrentUser())
-const { instance } = $(useInstanceInfo())
+const { getBlockchainInfo } = $(useInstanceInfo())
 const { loadNotifications, getUnreadNotificationCount } = $(useNotifications())
 const { loadTheme } = useTheme()
 
@@ -76,7 +76,7 @@ const unreadNotificationCount = $computed<number>(() => {
 })
 
 function canManageSubscriptions(): boolean {
-  const blockchain = instance?.blockchains[0]
+  const blockchain = getBlockchainInfo()
   const isSubscriptionsFeatureEnabled = Boolean(blockchain?.features.subscriptions)
   return (
     isSubscriptionsFeatureEnabled &&

src/components/SubscriptionEthereum.vue

@@ -137,7 +137,7 @@ const props = defineProps<{
 }>()
 
 const { currentUser } = $(useCurrentUser())
-const { instance } = $(useInstanceInfo())
+const { getBlockchainInfo } = $(useInstanceInfo())
 const { connectWallet: connectEthereumWallet } = useWallet()
 const recipient = new ProfileWrapper(props.profile)
 const recipientEthereumAddress = recipient.getVerifiedEthereumAddress()
@@ -159,7 +159,7 @@ onMounted(() => {
   }
 })
 
-const blockchain = $computed(() => instance?.blockchains[0])
+const blockchain = $computed(() => getBlockchainInfo())
 
 function canConnectWallet(): boolean {
   return (

src/components/SubscriptionSettingsEthereum.vue

@@ -110,7 +110,7 @@ import { ethereumAddressMatch } from "@/utils/ethereum"
 
 const { ensureAuthToken, ensureCurrentUser, setCurrentUser } = $(useCurrentUser())
 const { verifyEthereumAddress } = useEthereumAddressVerification()
-const { instance } = $(useInstanceInfo())
+const { getBlockchainInfo } = $(useInstanceInfo())
 const { connectWallet: connectEthereumWallet, getSigner } = useWallet()
 const subscriptionPrice = $ref<number>(1)
 
@@ -124,7 +124,7 @@ let subscriptionState = $ref<SubscriptionState | null>(null)
 let subscriptions = $ref<Subscription[]>([])
 let subscriberAddress = $ref<string | null>(null)
 
-const blockchain = $computed(() => instance?.blockchains[0])
+const blockchain = $computed(() => getBlockchainInfo())
 const profile = $computed(() => new ProfileWrapper(ensureCurrentUser()))
 
 onMounted(() => {

src/composables/instance.ts

@@ -1,6 +1,6 @@
 import { ref } from "vue"
 
-import { InstanceInfo, getInstanceInfo } from "@/api/instance"
+import { BlockchainInfo, InstanceInfo, getInstanceInfo } from "@/api/instance"
 import { Mention } from "@/api/posts"
 import { Profile } from "@/api/users"
 
@@ -23,9 +23,14 @@ export function useInstanceInfo() {
     return `${profile.username}@${instance.value.uri}`
   }
 
+  function getBlockchainInfo(): BlockchainInfo | null {
+    return instance.value?.blockchains[0] || null
+  }
+
   return {
     instance,
     loadInstanceInfo,
     getActorAddress,
+    getBlockchainInfo,
   }
 }

src/composables/wallet.ts

@@ -17,8 +17,8 @@ function disconnectWallet() {
 }
 
 async function connectWallet(): Promise<void> {
-  const { instance } = useInstanceInfo()
+  const { getBlockchainInfo } = useInstanceInfo()
-  const blockchain = instance.value?.blockchains[0]
+  const blockchain = getBlockchainInfo()
   if (!blockchain) {
     throw new Error("blockchain integration disabled")
   }

src/views/LandingPage.vue

@@ -121,7 +121,7 @@ import {
 
 const router = useRouter()
 const { setCurrentUser, setAuthToken } = useCurrentUser()
-const { instance } = $(useInstanceInfo())
+const { getBlockchainInfo, instance } = $(useInstanceInfo())
 
 const isRegistered = $ref(true)
 const username = $ref("")
@@ -135,7 +135,7 @@ function isWalletRequired(): boolean {
   if (!instance) {
     return false
   }
-  const blockchain = instance?.blockchains[0]
+  const blockchain = getBlockchainInfo()
   return Boolean(blockchain?.features.gate)
 }
 

src/views/PostOverlay.vue

@@ -68,7 +68,11 @@ import { formatDate } from "@/utils/dates"
 const route = useRoute()
 const router = useRouter()
 const { currentUser, authToken } = $(useCurrentUser())
-const { instance, getActorAddress } = $(useInstanceInfo())
+const {
+  getActorAddress,
+  getBlockchainInfo,
+  instance,
+} = $(useInstanceInfo())
 
 let post = $ref<Post | null>(null)
 let token = $ref<TokenMetadata | null>(null)
@@ -99,7 +103,8 @@ const actorAddress = $computed<string>(() => {
 })
 
 const transactionUrl = $computed<string | null>(() => {
-  const explorerUrl = instance?.blockchains[0]?.chain_metadata?.explorer_url
+  const blockchain = getBlockchainInfo()
+  const explorerUrl = blockchain?.chain_metadata?.explorer_url
   if (!explorerUrl || !post?.token_tx_id) {
     return null
   }

src/views/Profile.vue

@@ -306,7 +306,7 @@ const {
   ensureAuthToken,
 } = $(useCurrentUser())
 const { verifyEthereumAddress } = useEthereumAddressVerification()
-const { instance, getActorAddress } = $(useInstanceInfo())
+const { getActorAddress, getBlockchainInfo } = $(useInstanceInfo())
 
 let profile = $ref<ProfileWrapper | null>(null)
 let relationship = $ref<Relationship | null>(null)
@@ -561,7 +561,7 @@ async function onSignActivity() {
 }
 
 function isSubscriptionsFeatureEnabled(): boolean {
-  const blockchain = instance?.blockchains[0]
+  const blockchain = getBlockchainInfo()
   return Boolean(blockchain?.features.subscriptions)
 }
 

src/views/SubscriptionPage.vue

@@ -26,10 +26,10 @@ import { useCurrentUser } from "@/composables/user"
 
 const route = useRoute()
 const { authToken } = $(useCurrentUser())
-const { instance } = $(useInstanceInfo())
+const { getBlockchainInfo } = $(useInstanceInfo())
 let profile = $ref<Profile | null>(null)
 
-const blockchain = $computed(() => instance?.blockchains[0])
+const blockchain = $computed(() => getBlockchainInfo())
 
 onMounted(async () => {
   // Recipient

src/views/SubscriptionsSettings.vue

@@ -16,9 +16,9 @@ import SubscriptionSettingsEthereum from "@/components/SubscriptionSettingsEther
 import SubscriptionSettingsMonero from "@/components/SubscriptionSettingsMonero.vue"
 import { useInstanceInfo } from "@/composables/instance"
 
-const { instance } = $(useInstanceInfo())
+const { getBlockchainInfo } = $(useInstanceInfo())
 
-const blockchain = $computed(() => instance?.blockchains[0])
+const blockchain = $computed(() => getBlockchainInfo())
 
 function isEthereum(): boolean {
   if (!blockchain) {