enhancement: fix explorer link for ethereum network

packages/desktop/components/ContactAddressCard.svelte

@@ -3,9 +3,9 @@
     import { IContact, IContactAddress, IContactAddressMap, setSelectedContactNetworkAddress } from '@core/contact'
     import { localize } from '@core/i18n'
     import { resetLedgerPreparedOutput, resetShowInternalVerificationPopup } from '@core/ledger'
-    import { ExplorerEndpoint, getDefaultExplorerUrl, getNameFromNetworkId, NetworkId } from '@core/network'
+    import { ExplorerEndpoint, getExplorerUrl, getNameFromNetworkId, getNetwork, NetworkId } from '@core/network'
     import { Router } from '@core/router'
-    import { buildUrl, truncateString } from '@core/utils'
+    import { truncateString } from '@core/utils'
     import { SendFlowType, setSendFlowParameters, SubjectType } from '@core/wallet'
     import { closeDrawer } from '@desktop/auxiliary/drawer'
     import { openPopup, PopupId } from '@desktop/auxiliary/popup'
@@ -21,11 +21,11 @@
     export let contact: IContact
     export let contactAddressMap: IContactAddressMap
 
-    const explorer = getDefaultExplorerUrl(networkId, ExplorerEndpoint.Address)
+    const hasExplorer = !!getNetwork(networkId)?.explorerUrl
 
     function onExplorerClick(address: string): void {
-        const url = buildUrl({ origin: explorer.baseUrl, pathname: `${explorer.endpoint}/${address}` })
-        openUrlInBrowser(url?.href)
+        const url = getExplorerUrl(networkId, ExplorerEndpoint.Address, address)
+        openUrlInBrowser(url)
     }
 
     function onQrCodeClick(contactAddress: IContactAddress): void {
@@ -72,25 +72,25 @@
                     </Copyable>
                 </div>
                 <div class="flex flex-row space-x-1">
-                    {#if explorer.baseUrl}
+                    {#if hasExplorer}
                         <IconButton
                             size="sm"
                             icon={IconName.Globe}
                             tooltip={localize('general.viewOnExplorer')}
                             on:click={() => onExplorerClick(contactAddress.address)}
                         />
                     {/if}
                     <IconButton
                         size="sm"
                         icon={IconName.QrCode}
                         tooltip={localize('general.viewQrCode')}
                         on:click={() => onQrCodeClick(contactAddress)}
                     />
                     {#if features.contacts.sendTo.enabled}
                         <IconButton
                             icon={IconName.Send}
                             tooltip={localize('actions.send')}
                             on:click={() => onSendClick(contactAddress.address)}
                         />
                     {/if}
                 </div>

packages/desktop/components/NetworkCard.svelte

@@ -11,30 +11,29 @@
         ExplorerEndpoint,
         Network,
         NetworkNamespace,
-        getDefaultExplorerUrl,
+        getExplorerUrl,
         setSelectedNetworkForNetworkDrawer,
     } from '@core/network'
     import { ProfileType } from '@core/profile'
     import { checkActiveProfileAuth } from '@core/profile/actions'
     import { activeProfile } from '@core/profile/stores'
-    import { buildUrl, truncateString } from '@core/utils'
+    import { truncateString } from '@core/utils'
     import { NetworkAvatar, NetworkStatusPill } from '@ui'
     import { NetworkConfigRoute, networkConfigRouter } from '@views/dashboard/drawers'
 
     export let network: Network
 
     let address: string | undefined
-    const explorer = getDefaultExplorerUrl(network.id, ExplorerEndpoint.Address)
 
     $: health = network.health
     $: address = getAddressFromAccountForNetwork($selectedAccount as IAccountState, network.id)
 
     function onExplorerClick(): void {
-        if (!explorer || !address) {
+        if (!address) {
             return
         }
-        const url = buildUrl({ origin: explorer.baseUrl, pathname: `${explorer.endpoint}/${address}` })
-        openUrlInBrowser(url?.href)
+        const url = getExplorerUrl(network.id, ExplorerEndpoint.Address, address)
+        openUrlInBrowser(url)
     }
 
     function onCardClick(): void {
@@ -107,7 +106,7 @@
                 {/if}
             </div>
             <div class="flex flex-row space-x-1">
-                {#if explorer?.baseUrl && address}
+                {#if network.explorerUrl && address}
                     <IconButton
                         size="sm"
                         icon={IconName.Globe}

packages/desktop/components/popup/popups/EvmActivityDetailsPopup.svelte

@@ -6,13 +6,13 @@
     import { openUrlInBrowser } from '@core/app'
     import { localize } from '@core/i18n'
     import { ExplorerEndpoint } from '@core/network'
-    import { getDefaultExplorerUrl } from '@core/network/utils'
+    import { getExplorerUrl } from '@core/network/utils'
     import { NftStandard } from '@core/nfts'
     import { Nft } from '@core/nfts/interfaces'
     import { ownedNfts, selectedNftId, getNftByIdForAccount } from '@core/nfts/stores'
     import { CollectiblesRoute, DashboardRoute, collectiblesRouter, dashboardRouter } from '@core/router'
     import { getTokenFromSelectedAccountTokens } from '@core/token/stores'
-    import { buildUrl, setClipboard, truncateString } from '@core/utils'
+    import { setClipboard, truncateString } from '@core/utils'
     import { TokenTransferData } from '@core/wallet/types'
     import { closePopup } from '@desktop/auxiliary/popup'
     import { EvmActivityInformation, TransactionAssetSection } from '@ui'
@@ -31,10 +31,12 @@
         }
     }
 
-    $: explorerUrl = getExplorerUrl(activity)
-    function getExplorerUrl(_activity: EvmActivity): string | undefined {
-        const { baseUrl, endpoint } = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Transaction)
-        return buildUrl({ origin: baseUrl, pathname: `${endpoint}/${_activity?.transactionId}` })?.href
+    $: explorerUrl = buildExplorerUrl(activity)
+    function buildExplorerUrl(_activity: EvmActivity): string | undefined {
+        if (_activity.type === EvmActivityType.BalanceChange) {
+            return
+        }
+        return getExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Transaction, _activity?.transactionId)
     }
 
     $: nft = getNft(activity)

packages/desktop/components/popup/popups/EvmTransactionFromDappPopup.svelte

@@ -5,7 +5,7 @@
     import { CallbackParameters } from '@auxiliary/wallet-connect/types'
     import { sendAndPersistTransactionFromEvm, signEvmTransaction } from '@core/wallet/actions'
     import { getSelectedAccount, selectedAccount } from '@core/account/stores'
-    import { ExplorerEndpoint, IEvmNetwork, getDefaultExplorerUrl } from '@core/network'
+    import { ExplorerEndpoint, IEvmNetwork, getExplorerUrl } from '@core/network'
     import { DappInfo, TransactionAssetSection } from '@ui'
     import PopupTemplate from '../PopupTemplate.svelte'
     import { EvmTransactionData } from '@core/layer-2/types'
@@ -22,7 +22,7 @@
     import { Nft } from '@core/nfts'
     import { Alert, Link, Table, Text } from '@bloomwalletio/ui'
     import { PopupId, closePopup, modifyPopupState, openPopup } from '@desktop/auxiliary/popup'
-    import { buildUrl, truncateString } from '@core/utils'
+    import { truncateString } from '@core/utils'
     import { openUrlInBrowser } from '@core/app'
     import { StardustActivityType } from '@core/activity'
     import { BASE_TOKEN_ID } from '@core/token/constants'
@@ -166,9 +166,8 @@
     }
 
     function onExplorerClick(contractAddress: string): void {
-        const { baseUrl, endpoint } = getDefaultExplorerUrl(evmNetwork.id, ExplorerEndpoint.Address)
-        const url = buildUrl({ origin: baseUrl, pathname: `${endpoint}/${contractAddress}` })
-        openUrlInBrowser(url?.href)
+        const url = getExplorerUrl(evmNetwork.id, ExplorerEndpoint.Address, contractAddress)
+        openUrlInBrowser(url)
     }
 </script>
 

packages/desktop/components/popup/popups/StardustActivityDetailsPopup.svelte

@@ -12,10 +12,10 @@
     import { openUrlInBrowser } from '@core/app'
     import { localize } from '@core/i18n'
     import { ExplorerEndpoint } from '@core/network'
-    import { getDefaultExplorerUrl } from '@core/network/utils'
+    import { getExplorerUrl } from '@core/network/utils'
     import { getNftByIdForAccount, ownedNfts, selectedNftId } from '@core/nfts/stores'
     import { CollectiblesRoute, DashboardRoute, collectiblesRouter, dashboardRouter } from '@core/router'
-    import { buildUrl, setClipboard, truncateString } from '@core/utils'
+    import { setClipboard, truncateString } from '@core/utils'
     import { claimActivity, rejectActivity } from '@core/wallet'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
     import { StardustActivityInformation, TransactionAssetSection } from '@ui'
@@ -45,16 +45,12 @@
         }
     }
 
-    $: explorerUrl = getExplorerUrl(activity)
-    function getExplorerUrl(_activity: StardustActivity): string | undefined {
+    $: explorerUrl = buildExplorerUrl(activity)
+    function buildExplorerUrl(_activity: StardustActivity): string | undefined {
         if (activity?.direction === ActivityDirection.Genesis) {
-            const { baseUrl, endpoint } = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Output)
-            const url = buildUrl({ origin: baseUrl, pathname: `${endpoint}/${_activity?.outputId}` })
-            return url?.href
+            return getExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Output, _activity?.outputId)
         } else {
-            const { baseUrl, endpoint } = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Transaction)
-            const url = buildUrl({ origin: baseUrl, pathname: `${endpoint}/${_activity?.transactionId}` })
-            return url?.href
+            return getExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Transaction, _activity?.transactionId)
         }
     }
 

packages/desktop/views/dashboard/collectibles/components/Erc721CollectibleDetails.svelte

@@ -3,23 +3,21 @@
     import { type IItem } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { IErc721Nft } from '@core/nfts'
-    import { ExplorerEndpoint, EvmNetworkId, getDefaultExplorerUrl } from '@core/network'
+    import { ExplorerEndpoint, EvmNetworkId, getExplorerUrl } from '@core/network'
     import CollectibleDetails from './CollectibleDetails.svelte'
-    import { buildUrl } from '@core/utils'
 
     export let nft: IErc721Nft
 
     const { standard, networkId, contractMetadata, tokenId, metadata, mediaUrl } = nft
     const address = contractMetadata.address
-    const explorerEndpoint = getExplorerEndpoint(networkId)
+    const explorerUrl = buildExplorerUrl(networkId)
 
-    function getExplorerEndpoint(networkId: EvmNetworkId): string | undefined {
-        const { baseUrl, endpoint } = getDefaultExplorerUrl(networkId, ExplorerEndpoint.Token)
-        const url = buildUrl({
-            origin: baseUrl,
-            pathname: tokenId ? `${endpoint}/${address}/instance/${tokenId}` : address,
-        })
-        return url?.href
+    function buildExplorerUrl(networkId: EvmNetworkId): string | undefined {
+        if (tokenId) {
+            return getExplorerUrl(networkId, ExplorerEndpoint.Token, `${address}/instance/${tokenId}`)
+        } else {
+            return getExplorerUrl(networkId, ExplorerEndpoint.Address, address)
+        }
     }
 
     let details: IItem[] = []
@@ -64,4 +62,4 @@
     ]
 </script>
 
-<CollectibleDetails {nft} {details} attributes={metadata.attributes} {explorerEndpoint} />
+<CollectibleDetails {nft} {details} attributes={metadata.attributes} explorerEndpoint={explorerUrl} />

packages/desktop/views/dashboard/collectibles/components/Irc27CollectibleDetails.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
     import { type IItem } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
-    import { ExplorerEndpoint, getActiveNetworkId, getDefaultExplorerUrl } from '@core/network'
+    import { ExplorerEndpoint, getActiveNetworkId, getExplorerUrl } from '@core/network'
     import { IIrc27Nft } from '@core/nfts'
     import { getBaseToken } from '@core/profile/actions'
     import { formatTokenAmount } from '@core/token'
     import { getBech32AddressFromAddressTypes, getHexAddressFromAddressTypes } from '@core/wallet'
     import { AddressType } from '@iota/sdk/out/types'
     import { NetworkLabel } from '@ui'
     import CollectibleDetails from './CollectibleDetails.svelte'
-    import { buildUrl } from '@core/utils/url'
 
     export let nft: IIrc27Nft
 
     const { id, issuer, nftAddress, metadata, storageDeposit, mediaUrl } = nft ?? {}
     const { standard, version, issuerName, collectionName } = nft?.metadata || {}
 
-    const explorerEndpoint = getExplorerEndpoint()
+    // We don't use `nft.networkId` on this one, as for IRC27 nfts we still want the L1 explorer
+    const explorerUrl = getExplorerUrl(getActiveNetworkId(), ExplorerEndpoint.Nft, id)
 
     const issuerAddress = getBech32AddressFromAddressTypes(issuer)
     const collectionId = getHexAddressFromAddressTypes(issuer)
@@ -83,17 +83,6 @@
             copyable: true,
         },
     ]
-
-    function getExplorerEndpoint(): string | undefined {
-        // We don't use `nft.networkId` on this one, as for IRC27 nfts we still want the L1 explorer
-        const { baseUrl, endpoint } = getDefaultExplorerUrl(getActiveNetworkId(), ExplorerEndpoint.Nft)
-        const url = buildUrl({
-            origin: baseUrl,
-            pathname: `${endpoint}/${id}`,
-        })
-
-        return url?.href
-    }
 </script>
 
-<CollectibleDetails {nft} {details} attributes={nft.metadata?.attributes} {explorerEndpoint} />
+<CollectibleDetails {nft} {details} attributes={nft.metadata?.attributes} explorerEndpoint={explorerUrl} />

packages/shared/src/components/activities/evm/info/EvmSmartContractInformation.svelte

@@ -3,15 +3,13 @@
     import { localize } from '@core/i18n'
     import { EvmContractCallActivity, EvmTokenMintingActivity, EvmTokenTransferActivity } from '@core/activity'
     import { openUrlInBrowser } from '@core/app'
-    import { ExplorerEndpoint, getDefaultExplorerUrl } from '@core/network'
-    import { buildUrl } from '@core/utils'
+    import { ExplorerEndpoint, getExplorerUrl } from '@core/network'
 
     export let activity: EvmContractCallActivity | EvmTokenTransferActivity | EvmTokenMintingActivity
 
-    $: explorer = getDefaultExplorerUrl(activity.destinationNetworkId, ExplorerEndpoint.Address)
     function onExplorerClick(address: string): void {
-        const url = buildUrl({ origin: explorer.baseUrl, pathname: `${explorer.endpoint}/${address}` })
-        openUrlInBrowser(url?.href)
+        const url = getExplorerUrl(activity.destinationNetworkId, ExplorerEndpoint.Address, address)
+        openUrlInBrowser(url)
     }
 </script>
 

packages/shared/src/components/activities/stardust/info/StardustAliasInformation.svelte

@@ -2,17 +2,15 @@
     import { Table } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { StardustAliasActivity } from '@core/activity'
-    import { getDefaultExplorerUrl } from '@core/network/utils'
+    import { getExplorerUrl } from '@core/network/utils'
     import { ExplorerEndpoint } from '@core/network/enums'
     import { openUrlInBrowser } from '@core/app/utils'
-    import { buildUrl } from '@core/utils/url'
 
     export let activity: StardustAliasActivity
 
     function onAddressClick(address: string) {
-        const { baseUrl, endpoint } = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Address) ?? ''
-        const url = buildUrl({ origin: baseUrl, pathname: `${endpoint}/${address}` })
-        openUrlInBrowser(url?.href)
+        const url = getExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Address, address)
+        openUrlInBrowser(url)
     }
 </script>
 

packages/shared/src/components/activities/stardust/info/StardustFoundryInformation.svelte

@@ -4,21 +4,18 @@
     import { openUrlInBrowser } from '@core/app'
     import { localize } from '@core/i18n'
     import { ExplorerEndpoint } from '@core/network/enums'
-    import { getDefaultExplorerUrl } from '@core/network/utils'
-    import { buildUrl } from '@core/utils'
+    import { getExplorerUrl } from '@core/network/utils'
 
     export let activity: StardustFoundryActivity
 
     function onAliasClick(aliasAddress: string) {
-        const { baseUrl, endpoint } = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Address)
-        const url = buildUrl({ origin: baseUrl, pathname: `${endpoint}/${aliasAddress}` })
-        openUrlInBrowser(url?.href)
+        const url = getExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Address, aliasAddress)
+        openUrlInBrowser(url)
     }
 
     function onTokenClick(tokenId: string) {
-        const { baseUrl, endpoint } = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Foundry)
-        const url = buildUrl({ origin: baseUrl, pathname: `${endpoint}/${tokenId}` })
-        openUrlInBrowser(url?.href)
+        const url = getExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Foundry, tokenId)
+        openUrlInBrowser(url)
     }
 </script>
 

packages/shared/src/components/activities/stardust/info/StardustGenericInformation.svelte

@@ -4,9 +4,8 @@
     import { openUrlInBrowser } from '@core/app'
     import { time } from '@core/app/stores'
     import { getFormattedTimeStamp, localize } from '@core/i18n'
-    import { ExplorerEndpoint, getDefaultExplorerUrl, getNetwork } from '@core/network'
+    import { ExplorerEndpoint, getExplorerUrl, getNetwork } from '@core/network'
     import { formatTokenAmount } from '@core/token'
-    import { buildUrl } from '@core/utils'
     import { getTimeDifference } from '@core/utils/time'
     import { NetworkLabel, ExpiredPill, TimelockPill, UnclaimedPill } from '@ui'
 
@@ -21,13 +20,14 @@
     $: formattedMaxGasFee = formatAmount(BigInt(gasLimit ?? 0))
     $: formattedTransactionFee = formatAmount(activity.transactionFee ?? BigInt(0))
 
-    $: explorer = getDefaultExplorerUrl(activity.sourceNetworkId, ExplorerEndpoint.Transaction) ?? ''
+    $: hasExplorer = !!getNetwork(activity.sourceNetworkId)?.explorerUrl
     function onTransactionIdClick(): void {
-        const url = buildUrl({
-            origin: explorer.baseUrl,
-            pathname: `${explorer.endpoint}/${activity.asyncData?.claimingTransactionId}`,
-        })
-        openUrlInBrowser(url?.href)
+        const url = getExplorerUrl(
+            activity.sourceNetworkId,
+            ExplorerEndpoint.Transaction,
+            activity.asyncData?.claimingTransactionId
+        )
+        openUrlInBrowser(url)
     }
 
     function formatAmount(amount: bigint | undefined): string | undefined {
@@ -129,7 +129,7 @@
             value: activity.asyncData?.claimingTransactionId,
             copyable: true,
             truncate: { firstCharCount: 12, endCharCount: 12 },
-            onClick: explorer.baseUrl ? onTransactionIdClick : undefined,
+            onClick: hasExplorer ? onTransactionIdClick : undefined,
         },
     ]}
 />