Skip to content

Commit

Permalink
feat(wallet, wallet-dashboard): Remove all links in asset details (#4606
Browse files Browse the repository at this point in the history 
)

* feat(wallet/dashboard): Disable http links (and truncating them) in NFT details of wallet and wallet-dashboard

* feat(wallet/dashboard): Disable http links (and truncating them) in NFT details of wallet and wallet-dashboard
  • Loading branch information
@msarcev
msarcev authored Jan 7, 2025
1 parent 5c27c82 commit bf68fbb
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 57 deletions.
26 changes: 1 addition & 25 deletions apps/core/src/hooks/useNftDetails.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
useIsAssetTransferable,
} from './';
import { formatAddress } from '@iota/iota-sdk/utils';
import { truncateString } from '../utils';

type NftField = { keys: string[]; values: string[] };

Expand All @@ -35,7 +34,7 @@ export function useNftDetails(nftId: string, accountAddress: string | null) {

// Extract either the attributes, or use the top-level NFT fields:
const { keys: metaKeys, values: metaValues } =
(nftFields as NftFields)?.metadata?.fields?.attributes?.fields ||
(nftFields as unknown as NftFields)?.metadata?.fields?.attributes?.fields ||
Object.entries(nftFields ?? {})
.filter(([key]) => key !== 'id')
.reduce<NftField>(
Expand All @@ -54,28 +53,6 @@ export function useNftDetails(nftId: string, accountAddress: string | null) {
objectData.owner.AddressOwner) ||
'';

function formatMetaValue(value: string | object) {
if (typeof value === 'object') {
return {
value: JSON.stringify(value),
valueLink: undefined,
};
} else {
if (value.includes('http')) {
return {
value: value.startsWith('http')
? truncateString(value, 20, 8)
: formatAddress(value),
valueLink: value,
};
}
return {
value: value,
valueLink: undefined,
};
}
}

const isLoading = isNftLoading || isCheckingAssetTransferability || isPendingNftDislpay;

return {
Expand All @@ -89,7 +66,6 @@ export function useNftDetails(nftId: string, accountAddress: string | null) {
isAssetTransferable,
metaKeys,
metaValues,
formatMetaValue,
isContainedInKiosk,
kioskItem,
nftDisplayData,
Expand Down
21 changes: 4 additions & 17 deletions apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
VisualAssetCard,
VisualAssetType,
} from '@iota/apps-ui-kit';
import Link from 'next/link';
import { formatAddress } from '@iota/iota-sdk/utils';
import { DialogLayoutBody, DialogLayoutFooter } from '../../layout';
import { IotaObjectData } from '@iota/iota-sdk/client';
Expand All @@ -38,7 +37,6 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
isAssetTransferable,
metaKeys,
metaValues,
formatMetaValue,
isContainedInKiosk,
kioskItem,
objectData,
Expand Down Expand Up @@ -88,11 +86,7 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
{nftDisplayData?.projectUrl && (
<KeyValueInfo
keyText="Website"
value={
<Link href={nftDisplayData?.projectUrl}>
{nftDisplayData?.projectUrl}
</Link>
}
value={nftDisplayData?.projectUrl}
fullwidth
/>
)}
Expand Down Expand Up @@ -144,21 +138,14 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
<Collapsible defaultOpen title="Attributes">
<div className="flex flex-col gap-xs px-md pb-xs pt-sm">
{metaKeys.map((aKey, idx) => {
const { value, valueLink } = formatMetaValue(
metaValues[idx],
);
return (
<KeyValueInfo
key={idx}
keyText={aKey}
value={
valueLink ? (
<Link key={aKey} href={valueLink || ''}>
{value}
</Link>
) : (
value
)
typeof metaValues[idx] === 'object'
? JSON.stringify(metaValues[idx])
: metaValues[idx]
}
fullwidth
/>
Expand Down
23 changes: 8 additions & 15 deletions apps/wallet/src/ui/app/pages/home/nft-details/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
import { useNFTBasicData, useNftDetails, Collapsible } from '@iota/core';
import { formatAddress } from '@iota/iota-sdk/utils';
import cl from 'clsx';
import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
import { Button, ButtonType, KeyValueInfo } from '@iota/apps-ui-kit';

export function NFTDetailsPage() {
Expand All @@ -23,7 +23,6 @@ export function NFTDetailsPage() {
objectData,
metaKeys,
metaValues,
formatMetaValue,
isContainedInKiosk,
kioskItem,
isAssetTransferable,
Expand Down Expand Up @@ -94,11 +93,7 @@ export function NFTDetailsPage() {
{nftDisplayData?.projectUrl && (
<KeyValueInfo
keyText="Website"
value={
<Link to={nftDisplayData?.projectUrl}>
{nftDisplayData?.projectUrl}
</Link>
}
value={nftDisplayData?.projectUrl}
fullwidth
/>
)}
Expand Down Expand Up @@ -153,19 +148,17 @@ export function NFTDetailsPage() {
<Collapsible defaultOpen title="Attributes">
<div className="flex flex-col gap-xs px-md pb-xs pt-sm">
{metaKeys.map((aKey, idx) => {
const { value, valueLink } =
formatMetaValue(metaValues[idx]);
return (
<KeyValueInfo
key={idx}
keyText={aKey}
value={
<Link
key={aKey}
to={valueLink || ''}
>
{value}
</Link>
typeof metaValues[idx] ===
'object'
? JSON.stringify(
metaValues[idx],
)
: metaValues[idx]
}
fullwidth
/>
Expand Down

0 comments on commit bf68fbb

Please sign in to comment.