enhancement: open urls on click in activitydetails in browser (#2010)

* Open foundry and alias in browser * open metadata uris in browser * open alias addresses in browser * update ui kit * add onclick handlers on nft metadata --------- Co-authored-by: Tuditi <[email protected]>
bloomwalletio · Feb 29, 2024 · 17ff5e6 · 17ff5e6
1 parent e53915e
commit 17ff5e6
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 36 deletions.
diff --git a/packages/desktop/components/popup/popups/ActivityDetailsPopup.svelte b/packages/desktop/components/popup/popups/ActivityDetailsPopup.svelte
@@ -41,7 +41,7 @@
             ? getNftByIdFromAllAccountNfts($selectedAccountIndex, activity?.nftId)
             : undefined
     $: nftIsOwned = nft ? $ownedNfts.some((_onMountnft) => _onMountnft.id === nft?.id) : false
-    $: explorerUrl = setExplorerUrl(activity)
+    $: explorerUrl = getExplorerUrl(activity)
 
     let title: string = localize('popups.activityDetails.title.fallback')
     $: void setTitle(activity)
@@ -60,7 +60,7 @@
         $collectiblesRouter.setBreadcrumb(nft?.name)
     }
 
-    function setExplorerUrl(_activity: Activity): string | undefined {
+    function getExplorerUrl(_activity: Activity): string | undefined {
         if (activity?.direction === ActivityDirection.Genesis) {
             const explorerUrl = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Output)
             return explorerUrl ? `${explorerUrl}/${_activity?.outputId}` : undefined

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <[email protected]>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.20.8",
+        "@bloomwalletio/ui": "0.20.9",
         "@ethereumjs/rlp": "4.0.1",
         "@ethereumjs/tx": "5.2.1",
         "@ethereumjs/util": "9.0.2",

diff --git a/packages/shared/src/components/molecules/ActivityInformation.svelte b/packages/shared/src/components/molecules/ActivityInformation.svelte
@@ -78,9 +78,9 @@
         <AliasActivityInformation {activity} />
     {:else if selectedTab.key === PopupTab.Nft && activity.type === ActivityType.Nft}
         <NftActivityInformation {activity} />
-    {:else if selectedTab.key === PopupTab.Foundry}
+    {:else if selectedTab.key === PopupTab.Foundry && activity.type === ActivityType.Foundry}
         <FoundryActivityInformation {activity} />
-    {:else if selectedTab.key === PopupTab.Token}
+    {:else if selectedTab.key === PopupTab.Token && activity.type === ActivityType.Foundry}
         <TokenActivityInformation {activity} />
     {:else if selectedTab.key === PopupTab.NftMetadata && activity.type === ActivityType.Nft}
         <NftMetadataInformation {activity} />

diff --git a/packages/shared/src/components/molecules/activity-info/AliasActivityInformation.svelte b/packages/shared/src/components/molecules/activity-info/AliasActivityInformation.svelte
@@ -2,29 +2,34 @@
     import { Table } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { AliasActivity } from '@core/activity'
+    import { getDefaultExplorerUrl } from '@core/network/utils'
+    import { ExplorerEndpoint } from '@core/network/enums'
+    import { openUrlInBrowser } from '@core/app/utils'
 
     export let activity: AliasActivity
+
+    function onAddressClick(address: string) {
+        const explorerUrl = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Address)
+        openUrlInBrowser(`${explorerUrl}/${address}`)
+    }
 </script>
 
 <Table
     items={[
         {
             key: localize('general.aliasId'),
             value: activity.aliasId,
-            copyable: true,
-            truncate: true,
+            onClick: () => onAddressClick(activity.aliasId),
         },
         {
             key: localize('general.governorAddress'),
             value: activity.governorAddress,
-            copyable: true,
-            truncate: true,
+            onClick: () => onAddressClick(activity.governorAddress),
         },
         {
             key: localize('general.stateControllerAddress'),
             value: activity.stateControllerAddress,
-            copyable: true,
-            truncate: true,
+            onClick: () => onAddressClick(activity.stateControllerAddress),
         },
     ]}
 />
diff --git a/packages/shared/src/components/molecules/activity-info/FoundryActivityInformation.svelte b/packages/shared/src/components/molecules/activity-info/FoundryActivityInformation.svelte
@@ -1,9 +1,22 @@
 <script lang="ts">
     import { Table } from '@bloomwalletio/ui'
     import { FoundryActivity } from '@core/activity'
+    import { openUrlInBrowser } from '@core/app'
     import { localize } from '@core/i18n'
+    import { ExplorerEndpoint } from '@core/network/enums'
+    import { getDefaultExplorerUrl } from '@core/network/utils'
 
     export let activity: FoundryActivity
+
+    function onAliasClick(aliasAddress: string) {
+        const explorerUrl = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Address)
+        openUrlInBrowser(`${explorerUrl}/${aliasAddress}`)
+    }
+
+    function onTokenClick(tokenId: string) {
+        const explorerUrl = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Foundry)
+        openUrlInBrowser(`${explorerUrl}/${tokenId}`)
+    }
 </script>
 
 <Table
@@ -12,25 +25,25 @@
             key: localize('popups.nativeToken.property.aliasAddress'),
             value: activity.aliasAddress,
             truncate: { firstCharCount: 10, endCharCount: 10 },
-            copyable: true,
+            onClick: () => onAliasClick(activity.aliasAddress),
         },
         {
             key: localize('popups.nativeToken.property.tokenId'),
             value: activity.tokenTransfer?.tokenId,
             truncate: { firstCharCount: 10, endCharCount: 10 },
-            copyable: true,
+            onClick: () => onTokenClick(activity.tokenTransfer?.tokenId ?? ''),
         },
         {
             key: localize('popups.nativeToken.property.maximumSupply'),
-            value: activity.maximumSupply,
+            value: String(activity.maximumSupply),
         },
         {
             key: localize('popups.nativeToken.property.mintedTokens'),
-            value: activity.mintedTokens,
+            value: String(activity.mintedTokens),
         },
         {
             key: localize('popups.nativeToken.property.meltedTokens'),
-            value: activity.meltedTokens,
+            value: String(activity.meltedTokens),
         },
     ]}
 />
diff --git a/packages/shared/src/components/molecules/activity-info/NftActivityInformation.svelte b/packages/shared/src/components/molecules/activity-info/NftActivityInformation.svelte
@@ -2,38 +2,50 @@
     import { Table } from '@bloomwalletio/ui'
     import { selectedAccountIndex } from '@core/account/stores'
     import { NftActivity } from '@core/activity'
+    import { openUrlInBrowser } from '@core/app/utils'
     import { localize } from '@core/i18n'
+    import { ExplorerEndpoint } from '@core/network/enums'
+    import { getDefaultExplorerUrl } from '@core/network/utils'
+    import { NftStandard } from '@core/nfts'
     import { getNftByIdFromAllAccountNfts } from '@core/nfts/actions'
     import { getBech32AddressFromAddressTypes, getHexAddressFromAddressTypes } from '@core/wallet'
-    import { AddressType } from '@iota/sdk/out/types'
+    import { type Address, AddressType } from '@iota/sdk/out/types'
 
     export let activity: NftActivity
 
     $: nft = getNftByIdFromAllAccountNfts($selectedAccountIndex, activity?.nftId)
+    $: issuer = nft?.standard === NftStandard.Irc27 ? nft?.issuer : undefined
+
+    function onNftIdClick(nftId: string) {
+        const explorerUrl = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Nft)
+        openUrlInBrowser(`${explorerUrl}/${nftId}`)
+    }
+
+    function onIssuerClick(issuer: Address) {
+        const explorerUrl = getDefaultExplorerUrl(activity?.sourceNetworkId, ExplorerEndpoint.Address)
+        openUrlInBrowser(`${explorerUrl}/${getBech32AddressFromAddressTypes(issuer)}`)
+    }
 </script>
 
 <Table
     items={[
         {
             key: localize('general.nftId'),
             value: activity?.nftId,
-            truncate: { firstCharCount: 10, endCharCount: 10 },
-            copyable: true,
+            onClick: () => onNftIdClick(activity?.nftId),
         },
         {
             key: localize('general.issuerAddress'),
-            value:
-                nft?.issuer?.type === AddressType.Ed25519 ? getBech32AddressFromAddressTypes(nft?.issuer) : undefined,
-            truncate: { firstCharCount: 10, endCharCount: 10 },
-            copyable: true,
+            value: issuer?.type === AddressType.Ed25519 ? getBech32AddressFromAddressTypes(issuer) : undefined,
+            onClick: () => issuer && onIssuerClick(issuer),
         },
         {
             key: localize('general.collectionId'),
-            value: [AddressType.Nft, AddressType.Alias].includes(nft?.issuer?.type)
-                ? getHexAddressFromAddressTypes(nft?.issuer)
-                : undefined,
-            truncate: { firstCharCount: 10, endCharCount: 10 },
-            copyable: true,
+            value:
+                issuer && [AddressType.Nft, AddressType.Alias].includes(issuer?.type)
+                    ? getHexAddressFromAddressTypes(issuer)
+                    : undefined,
+            onClick: () => issuer && onIssuerClick(issuer),
         },
     ]}
 />
diff --git a/packages/shared/src/components/molecules/activity-info/NftMetadataInformation.svelte b/packages/shared/src/components/molecules/activity-info/NftMetadataInformation.svelte
@@ -2,6 +2,7 @@
     import { Table } from '@bloomwalletio/ui'
     import { selectedAccountIndex } from '@core/account/stores'
     import { NftActivity } from '@core/activity'
+    import { openUrlInBrowser } from '@core/app/utils'
     import { localize } from '@core/i18n'
     import { getNftByIdFromAllAccountNfts } from '@core/nfts/actions'
     import { NftStandard } from '@core/nfts/enums'
@@ -31,7 +32,7 @@
                 {
                     key: localize('general.uri'),
                     value: metadata.uri,
-                    copyable: true,
+                    onClick: () => openUrlInBrowser(metadata?.uri ?? ''),
                 },
                 {
                     key: localize('general.description'),
@@ -68,7 +69,7 @@
                 {
                     key: localize('general.image'),
                     value: metadata.image,
-                    copyable: true,
+                    onClick: () => openUrlInBrowser(metadata?.image ?? ''),
                 },
                 {
                     key: localize('general.description'),

diff --git a/packages/shared/src/components/molecules/activity-info/TokenActivityInformation.svelte b/packages/shared/src/components/molecules/activity-info/TokenActivityInformation.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Table } from '@bloomwalletio/ui'
     import { FoundryActivity } from '@core/activity'
+    import { openUrlInBrowser } from '@core/app/utils'
     import { localize } from '@core/i18n'
     import { IIrc30Metadata } from '@core/token'
     import { getPersistedToken } from '@core/token/stores'
@@ -35,7 +36,7 @@
             {
                 key: localize('popups.nativeToken.property.url'),
                 value: metadata.url || undefined,
-                copyable: true,
+                onClick: () => openUrlInBrowser(metadata?.url ?? ''),
             },
             {
                 key: localize('popups.nativeToken.property.logo'),
@@ -45,7 +46,7 @@
             {
                 key: localize('popups.nativeToken.property.logoUrl'),
                 value: metadata.logoUrl || undefined,
-                copyable: true,
+                onClick: () => openUrlInBrowser(metadata?.logoUrl ?? ''),
             },
         ]}
     />

diff --git a/packages/shared/src/lib/core/network/constants/explorer-endpoints.constant.ts b/packages/shared/src/lib/core/network/constants/explorer-endpoints.constant.ts
@@ -5,18 +5,21 @@ export const EXPLORER_ENDPOINTS: Readonly<{ [key in SupportedNetworkId]: { [key
         [ExplorerEndpoint.Transaction]: ExplorerEndpoint.Transaction,
         [ExplorerEndpoint.Output]: ExplorerEndpoint.Output,
         [ExplorerEndpoint.Nft]: ExplorerEndpoint.Nft,
+        [ExplorerEndpoint.Foundry]: ExplorerEndpoint.Foundry,
         [ExplorerEndpoint.Address]: 'addr',
     },
     [SupportedNetworkId.Shimmer]: {
         [ExplorerEndpoint.Transaction]: ExplorerEndpoint.Transaction,
         [ExplorerEndpoint.Output]: ExplorerEndpoint.Output,
         [ExplorerEndpoint.Nft]: ExplorerEndpoint.Nft,
+        [ExplorerEndpoint.Foundry]: ExplorerEndpoint.Foundry,
         [ExplorerEndpoint.Address]: 'addr',
     },
     [SupportedNetworkId.Testnet]: {
         [ExplorerEndpoint.Transaction]: ExplorerEndpoint.Transaction,
         [ExplorerEndpoint.Output]: ExplorerEndpoint.Output,
         [ExplorerEndpoint.Nft]: ExplorerEndpoint.Nft,
+        [ExplorerEndpoint.Foundry]: ExplorerEndpoint.Foundry,
         [ExplorerEndpoint.Address]: 'addr',
     },
     [SupportedNetworkId.ShimmerEvm]: {

diff --git a/packages/shared/src/lib/core/network/enums/explorer-endpoint.enum.ts b/packages/shared/src/lib/core/network/enums/explorer-endpoint.enum.ts
@@ -1,5 +1,6 @@
 export enum ExplorerEndpoint {
     Address = 'address',
+    Foundry = 'foundry',
     Nft = 'nft',
     Token = 'token',
     Transaction = 'transaction',

diff --git a/yarn.lock b/yarn.lock
@@ -343,10 +343,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/[email protected].8":
-  version "0.20.8"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.8/c315895a962b23263da7fe5e91ddff0eb61fb9db#c315895a962b23263da7fe5e91ddff0eb61fb9db"
-  integrity sha512-jwailq9C48f4R+ID3wnzzC+A7KKSMI6TUM/HAX7St/qwhruK583wof05ci6JAkEnJKkj4Y6pGE5i4eHB+s48aQ==
+"@bloomwalletio/[email protected].9":
+  version "0.20.9"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.9/a388d219d644c1029a6bcbf239cb7149fa23e20f#a388d219d644c1029a6bcbf239cb7149fa23e20f"
+  integrity sha512-GNej31d/rRZmEnSKDgmWOgMUbfDV/N4oToyD7tniTHK7Q5sPyqp+QaD9kwsXfWPw/yi0UJp1igLEcWll+88Ong==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"