fix: improve explorer links (#3220)

iotaledger · Oct 15, 2024 · 8c1abfe · 8c1abfe
1 parent 3de3b91
commit 8c1abfe
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 73 deletions.
diff --git a/apps/wallet/src/ui/app/components/receipt-card/index.tsx b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
@@ -14,11 +14,18 @@ import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 import { TransactionSummary } from '../../shared/transaction-summary';
 import { StakeTxn } from './StakeTxn';
 import { UnStakeTxn } from './UnstakeTxn';
-import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
-import { CheckmarkFilled } from '@iota/ui-icons';
+import {
+    Button,
+    ButtonType,
+    InfoBox,
+    InfoBoxStyle,
+    InfoBoxType,
+    LoadingIndicator,
+} from '@iota/apps-ui-kit';
+import { ArrowTopRight, CheckmarkFilled } from '@iota/ui-icons';
 import cl from 'clsx';
-import { ExplorerLinkCard } from '../../shared/transaction-summary/cards/ExplorerLink';
 import { GasFees } from '../../pages/approval-request/transaction-request/GasFees';
+import ExplorerLink, { ExplorerLinkType } from '../explorer-link';
 
 interface TransactionStatusProps {
     success: boolean;
@@ -59,8 +66,8 @@ export function ReceiptCard({ txn, activeAddress }: ReceiptCardProps) {
 
     if (!summary) return null;
 
+    const { digest } = summary;
     const stakedTxn = events?.find(({ type }) => type === STAKING_REQUEST_EVENT);
-
     const unstakeTxn = events?.find(({ type }) => type === UNSTAKING_REQUEST_EVENT);
 
     return (
@@ -87,7 +94,22 @@ export function ReceiptCard({ txn, activeAddress }: ReceiptCardProps) {
                 )}
             </div>
             <div className="pt-sm">
-                <ExplorerLinkCard digest={summary?.digest} />
+                <ExplorerLink transactionID={digest ?? ''} type={ExplorerLinkType.Transaction}>
+                    <Button
+                        type={ButtonType.Outlined}
+                        text="View on Explorer"
+                        fullWidth
+                        icon={
+                            digest ? (
+                                <ArrowTopRight />
+                            ) : (
+                                <LoadingIndicator data-testid="loading-indicator" />
+                            )
+                        }
+                        iconAfterText
+                        disabled={!digest}
+                    />
+                </ExplorerLink>
             </div>
         </div>
     );

diff --git a/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx b/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx
@@ -6,7 +6,6 @@ import { useActiveAddress } from '_app/hooks/useActiveAddress';
 import { Collapsible } from '_app/shared/collapse';
 import { ExplorerLink, ExplorerLinkType, Loading, NFTDisplayCard, PageTemplate } from '_components';
 import { useNFTBasicData, useOwnedNFT } from '_hooks';
-import { useExplorerLink } from '_src/ui/app/hooks/useExplorerLink';
 import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
 import { useGetKioskContents, useGetNFTMeta } from '@iota/core';
 import { formatAddress } from '@iota/iota-sdk/utils';
@@ -52,10 +51,6 @@ function NFTDetailsPage() {
     const metaKeys: string[] = metaFields ? metaFields.keys : [];
     const metaValues = metaFields ? metaFields.values : [];
     const { data: nftDisplayData, isPending: isPendingDisplay } = useGetNFTMeta(nftId || '');
-    const objectExplorerLink = useExplorerLink({
-        type: ExplorerLinkType.Object,
-        objectID: nftId || '',
-    });
     const ownerAddress =
         (objectData?.owner &&
             typeof objectData?.owner === 'object' &&
@@ -77,10 +72,6 @@ function NFTDetailsPage() {
         navigate(`/nft-transfer/${nftId}`);
     }
 
-    function handleViewOnExplorer() {
-        window.open(objectExplorerLink || '', '_blank');
-    }
-
     function formatMetaValue(value: string) {
         if (value.includes('http')) {
             return {
@@ -111,11 +102,15 @@ function NFTDetailsPage() {
                                     <div className="flex w-[172px] flex-col items-center gap-xs self-center">
                                         <NFTDisplayCard objectId={nftId!} />
                                         {nftId ? (
-                                            <Button
-                                                type={ButtonType.Ghost}
-                                                onClick={handleViewOnExplorer}
-                                                text="View on Explorer"
-                                            />
+                                            <ExplorerLink
+                                                objectID={nftId}
+                                                type={ExplorerLinkType.Object}
+                                            >
+                                                <Button
+                                                    type={ButtonType.Ghost}
+                                                    text="View on Explorer"
+                                                />
+                                            </ExplorerLink>
                                         ) : null}
                                     </div>
                                     <div className="flex flex-col gap-md">

diff --git a/apps/wallet/src/ui/app/shared/transaction-summary/cards/ExplorerLink.tsx b/apps/wallet/src/ui/app/shared/transaction-summary/cards/ExplorerLink.tsx
diff --git a/.../wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx b/.../wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx
@@ -2,37 +2,33 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ExplorerLinkType } from '_components';
+import { ExplorerLink, ExplorerLinkType } from '_components';
 import { type IotaObjectChangeWithDisplay } from '@iota/core';
 
 import { Card, CardAction, CardActionType, CardBody, CardImage, CardType } from '@iota/apps-ui-kit';
 import { ImageIcon } from '../../../image-icon';
 import { ArrowTopRight } from '@iota/ui-icons';
-import { useExplorerLink } from '_src/ui/app/hooks/useExplorerLink';
 
 export function ObjectChangeDisplay({ change }: { change: IotaObjectChangeWithDisplay }) {
     const display = change?.display?.data;
     const name = display?.name ?? '';
     const objectId = 'objectId' in change && change?.objectId;
-    const explorerHref = useExplorerLink({
-        type: ExplorerLinkType.Object,
-        objectID: objectId?.toString() ?? '',
-    });
 
     if (!display) return null;
 
-    function handleOpen() {
-        const newWindow = window.open(explorerHref!, '_blank', 'noopener,noreferrer');
-        if (newWindow) newWindow.opener = null;
-    }
-
     return (
-        <Card type={CardType.Default} onClick={handleOpen}>
-            <CardImage>
-                <ImageIcon src={display.image_url ?? ''} label={name} fallback="NFT" />
-            </CardImage>
-            <CardBody title={name} subtitle={display.description ?? ''} />
-            {objectId && <CardAction type={CardActionType.Link} icon={<ArrowTopRight />} />}
-        </Card>
+        <ExplorerLink
+            className="text-hero-dark no-underline"
+            objectID={objectId?.toString() ?? ''}
+            type={ExplorerLinkType.Object}
+        >
+            <Card type={CardType.Default} isHoverable>
+                <CardImage>
+                    <ImageIcon src={display.image_url ?? ''} label={name} fallback="NFT" />
+                </CardImage>
+                <CardBody title={name} subtitle={display.description ?? ''} />
+                {objectId && <CardAction type={CardActionType.Link} icon={<ArrowTopRight />} />}
+            </Card>
+        </ExplorerLink>
     );
 }