Fix lint

app/address/[address]/layout.tsx

@@ -1,30 +1,30 @@
 'use client';
 
-import { NiftyAssetAccountHeader } from '@/app/components/account/nifty-asset/AssetAccountHeader';
+import { AddressLookupTableAccountSection } from '@components/account/address-lookup-table/AddressLookupTableAccountSection';
+import { isAddressLookupTableAccount } from '@components/account/address-lookup-table/types';
 import { ConfigAccountSection } from '@components/account/ConfigAccountSection';
 import { FeatureAccountSection } from '@components/account/FeatureAccountSection';
 import { MetaplexNFTHeader } from '@components/account/MetaplexNFTHeader';
+import { isNFTokenAccount, parseNFTokenCollectionAccount } from '@components/account/nftoken/isNFTokenAccount';
+import { NFTOKEN_ADDRESS } from '@components/account/nftoken/nftoken';
+import { NFTokenAccountHeader } from '@components/account/nftoken/NFTokenAccountHeader';
+import { NFTokenAccountSection } from '@components/account/nftoken/NFTokenAccountSection';
 import { NonceAccountSection } from '@components/account/NonceAccountSection';
 import { StakeAccountSection } from '@components/account/StakeAccountSection';
 import { SysvarAccountSection } from '@components/account/SysvarAccountSection';
 import { TokenAccountSection } from '@components/account/TokenAccountSection';
 import { UnknownAccountCard } from '@components/account/UnknownAccountCard';
 import { UpgradeableLoaderAccountSection } from '@components/account/UpgradeableLoaderAccountSection';
 import { VoteAccountSection } from '@components/account/VoteAccountSection';
-import { AddressLookupTableAccountSection } from '@components/account/address-lookup-table/AddressLookupTableAccountSection';
-import { isAddressLookupTableAccount } from '@components/account/address-lookup-table/types';
-import { NFTokenAccountHeader } from '@components/account/nftoken/NFTokenAccountHeader';
-import { NFTokenAccountSection } from '@components/account/nftoken/NFTokenAccountSection';
-import { isNFTokenAccount, parseNFTokenCollectionAccount } from '@components/account/nftoken/isNFTokenAccount';
-import { NFTOKEN_ADDRESS } from '@components/account/nftoken/nftoken';
 import { ErrorCard } from '@components/common/ErrorCard';
 import { Identicon } from '@components/common/Identicon';
 import { LoadingCard } from '@components/common/LoadingCard';
+import { Asset, ASSET_PROGRAM_ID, ExtensionType, getExtension, getInternalAssetAccountDataSerializer } from '@nifty-oss/asset';
 import {
     Account,
     AccountsProvider,
-    TokenProgramData,
     isTokenProgramData,
+    TokenProgramData,
     useAccountInfo,
     useFetchAccountInfo,
     useMintAccountInfo,
@@ -46,9 +46,9 @@ import useSWRImmutable from 'swr/immutable';
 import { Base58EncodedAddress } from 'web3js-experimental';
 
 import { NiftyAssetAccountCard } from '@/app/components/account/nifty-asset/AssetAccountCard';
+import { NiftyAssetAccountHeader } from '@/app/components/account/nifty-asset/AssetAccountHeader';
 import { isNiftyAssetAccount } from '@/app/components/account/nifty-asset/types';
 import { FullTokenInfo, getFullTokenInfo } from '@/app/utils/token-info';
-import { ASSET_PROGRAM_ID, Asset, ExtensionType, getAssetAccountDataSerializer, getExtension } from '@nifty-oss/asset';
 
 const IDENTICON_WIDTH = 64;
 
@@ -532,7 +532,7 @@ function getTabs(pubkey: PublicKey, account: Account): TabComponent[] {
 
     const isNiftyAsset = account && isNiftyAssetAccount(account.owner, account.data.raw);
     if (isNiftyAsset && account.data.raw) {
-        const asset = account && (getAssetAccountDataSerializer().deserialize(account.data.raw)[0] as Asset);
+        const asset = account && (getInternalAssetAccountDataSerializer().deserialize(account.data.raw)[0] as Asset);
 
         if (asset.extensions.length > 0) {
             const metadata = getExtension(asset, ExtensionType.Metadata);

app/address/[address]/nifty-asset-extensions/page-client.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { NiftyAssetExtensionsCard } from '@/app/components/account/nifty-asset/AssetExtensionsCard';
 import { ParsedAccountRenderer } from '@components/account/ParsedAccountRenderer';
 import { fromWeb3JsPublicKey } from '@metaplex-foundation/umi-web3js-adapters';
-import { Asset, deserializeAsset, getAssetAccountDataSerializer } from '@nifty-oss/asset';
+import { Asset, getInternalAssetAccountDataSerializer } from '@nifty-oss/asset';
 import React from 'react';
 
+import { NiftyAssetExtensionsCard } from '@/app/components/account/nifty-asset/AssetExtensionsCard';
+
 type Props = Readonly<{
     params: {
         address: string;
@@ -18,7 +19,7 @@ function NiftyAssetExtensionsCardRenderer({
 }: React.ComponentProps<React.ComponentProps<typeof ParsedAccountRenderer>['renderComponent']>) {
     const data = account?.data.raw;
     const address = account?.pubkey;
-    const asset = data && (getAssetAccountDataSerializer().deserialize(data)[0] as Asset);
+    const asset = data && (getInternalAssetAccountDataSerializer().deserialize(data)[0] as Asset);
 
     if (asset && address) {
         asset.publicKey = fromWeb3JsPublicKey(address);

app/address/[address]/nifty-asset-metadata/page-client.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { NiftyAssetMetadataCard } from '@/app/components/account/nifty-asset/AssetMetadataCard';
 import { ParsedAccountRenderer } from '@components/account/ParsedAccountRenderer';
-import { Asset, ExtensionType, getAssetAccountDataSerializer, getExtension } from '@nifty-oss/asset';
+import { Asset, ExtensionType, getExtension, getInternalAssetAccountDataSerializer } from '@nifty-oss/asset';
 import React from 'react';
 
+import { NiftyAssetMetadataCard } from '@/app/components/account/nifty-asset/AssetMetadataCard';
+
 type Props = Readonly<{
     params: {
         address: string;
@@ -16,7 +17,7 @@ function NiftyAssetMetadataCardRenderer({
     onNotFound,
 }: React.ComponentProps<React.ComponentProps<typeof ParsedAccountRenderer>['renderComponent']>) {
     const data = account?.data.raw;
-    const asset = data && getAssetAccountDataSerializer().deserialize(data);
+    const asset = data && getInternalAssetAccountDataSerializer().deserialize(data);
 
     if (asset) {
         const metadata = asset && getExtension(asset[0] as Asset, ExtensionType.Metadata);

app/address/[address]/nifty-asset-ruleset/page-client.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { NiftyAssetRuleSetCard } from '@/app/components/account/nifty-asset/AssetRuleSetCard';
 import { ParsedAccountRenderer } from '@components/account/ParsedAccountRenderer';
-import { Asset, ExtensionType, getAssetAccountDataSerializer, getExtension } from '@nifty-oss/asset';
+import { Asset, ExtensionType, getExtension, getInternalAssetAccountDataSerializer } from '@nifty-oss/asset';
 import React from 'react';
 
+import { NiftyAssetRuleSetCard } from '@/app/components/account/nifty-asset/AssetRuleSetCard';
+
 type Props = Readonly<{
     params: {
         address: string;
@@ -16,7 +17,7 @@ function NiftyAssetRuleSetCardRenderer({
     onNotFound,
 }: React.ComponentProps<React.ComponentProps<typeof ParsedAccountRenderer>['renderComponent']>) {
     const data = account?.data.raw;
-    const asset = data && (getAssetAccountDataSerializer().deserialize(data)[0] as Asset);
+    const asset = data && (getInternalAssetAccountDataSerializer().deserialize(data)[0] as Asset);
 
     return asset && getExtension(asset, ExtensionType.Royalties) ? (
         <NiftyAssetRuleSetCard asset={asset} />

app/components/account/nifty-asset/AssetAccountCard.tsx

@@ -2,7 +2,7 @@ import { Address } from '@components/common/Address';
 import { SolBalance } from '@components/common/SolBalance';
 import { TableCardBody } from '@components/common/TableCardBody';
 import { toWeb3JsPublicKey } from '@metaplex-foundation/umi-web3js-adapters';
-import { Asset, Delegate, DelegateRole, State, getAssetAccountDataSerializer } from '@nifty-oss/asset';
+import { Asset, Delegate, DelegateRole, getInternalAssetAccountDataSerializer, State } from '@nifty-oss/asset';
 import { Account } from '@providers/accounts';
 import { useCluster } from '@providers/cluster';
 import { addressLabel } from '@utils/tx';
@@ -12,7 +12,7 @@ export function NiftyAssetAccountCard({ account }: { account: Account }) {
 
     const label = addressLabel(account.pubkey.toBase58(), cluster);
     const data = account.data.raw;
-    const asset = data && (getAssetAccountDataSerializer().deserialize(data)[0] as Asset);
+    const asset = data && (getInternalAssetAccountDataSerializer().deserialize(data)[0] as Asset);
 
     return (
         <div className="card">

app/components/account/nifty-asset/AssetAccountHeader.tsx

@@ -5,23 +5,24 @@ import {
     Blob,
     Creator,
     ExtensionType,
-    Standard,
-    getAssetAccountDataSerializer,
     getExtension,
+    getInternalAssetAccountDataSerializer,
+    Standard,
 } from '@nifty-oss/asset';
 import { Account } from '@providers/accounts';
 import { PublicKey } from '@solana/web3.js';
 import { useClusterPath } from '@utils/url';
 import Link from 'next/link';
-import React, { Suspense, createRef, useState } from 'react';
+import React, { createRef, Suspense, useState } from 'react';
 import { AlertOctagon, Check, ChevronDown } from 'react-feather';
 import useAsyncEffect from 'use-async-effect';
+
 import { LoadingArtPlaceholder } from '../../common/LoadingArtPlaceholder';
 import { KNOWN_IMAGE_EXTENSIONS } from './types';
 
 export function NiftyAssetAccountHeader({ account }: { account: Account }) {
     const data = account.data.raw;
-    const asset = data && getAssetAccountDataSerializer().deserialize(data);
+    const asset = data && getInternalAssetAccountDataSerializer().deserialize(data);
 
     if (asset) {
         return (
@@ -65,24 +66,22 @@ export function NiftyAssetHeader({ address, asset }: { address: PublicKey; asset
         }
     }
 
-    if (metadata?.uri && metadata.uri.length > 0) {
-        React.useEffect(() => {
+    React.useEffect(() => {
+        if (metadata?.uri && metadata.uri.length > 0) {
             fetchMetadataImage(metadata.uri);
-        }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    } else {
-        React.useEffect(() => {
+        } else {
             setOnChainImage(hasOnChainImage);
-        }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    }
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     // check for creators
 
     const creators = getExtension(asset, ExtensionType.Creators);
     const dropdownRef = createRef<HTMLButtonElement>();
 
-    if (creators) {
-        useAsyncEffect(
-            async isMounted => {
+    useAsyncEffect(
+        async isMounted => {
+            if (creators) {
                 if (!dropdownRef.current) {
                     return;
                 }
@@ -91,15 +90,15 @@ export function NiftyAssetHeader({ address, asset }: { address: PublicKey; asset
                     return;
                 }
                 return new Dropdown(dropdownRef.current);
-            },
-            dropdown => {
-                if (dropdown) {
-                    dropdown.dispose();
-                }
-            },
-            [dropdownRef]
-        );
-    }
+            }
+        },
+        dropdown => {
+            if (creators && dropdown) {
+                dropdown.dispose();
+            }
+        },
+        [dropdownRef]
+    );
 
     // check for grouping
 

app/components/account/nifty-asset/AssetExtensionsCard.tsx

@@ -1,11 +1,13 @@
 'use client';
 
-import { useClusterPath } from '@/app/utils/url';
 import { TableCardBody } from '@components/common/TableCardBody';
 import { toWeb3JsPublicKey } from '@metaplex-foundation/umi-web3js-adapters';
 import { Asset, ExtensionType, getExtension } from '@nifty-oss/asset';
 import Link from 'next/link';
 import { AlertOctagon, Check, ExternalLink } from 'react-feather';
+
+import { pickClusterParams, useClusterPath } from '@/app/utils/url';
+
 import { Address } from '../../common/Address';
 import { Copyable } from '../../common/Copyable';
 import { HexData } from '../../common/HexData';
@@ -19,25 +21,25 @@ export function NiftyAssetExtensionsCard({ asset }: { asset: Asset }) {
             <div className="card-header align-items-center">
                 <h3 className="card-header-title">Extensions</h3>
             </div>
-            {getAttributes(asset)}
-            {getBlob(asset)}
-            {getBucket(asset)}
-            {getCreators(asset)}
-            {getGrouping(asset)}
-            {getLinks(asset)}
-            {getManager(asset)}
-            {getMetadata(asset)}
-            {getProperties(asset)}
-            {getProxy(asset)}
-            {getRoyalties(asset)}
+            <AttributesPanel asset={asset} />
+            <BlobPanel asset={asset} />
+            <BucketPanel asset={asset} />
+            <CreatorsPanel asset={asset} />
+            <GroupingPanel asset={asset} />
+            <LinksPanel asset={asset} />
+            <ManagerPanel asset={asset} />
+            <MetadataPanel asset={asset} />
+            <PropertiesPanel asset={asset} />
+            <ProxyPanel asset={asset} />
+            <RoyaltiesPanel asset={asset} />
         </div>
     );
 }
 
 /**
  * Attributes extension.
  */
-function getAttributes(asset: Asset) {
+function AttributesPanel({asset} : {asset: Asset;}) {
     const attributes = getExtension(asset, ExtensionType.Attributes);
 
     if (!attributes) {
@@ -72,7 +74,7 @@ function getAttributes(asset: Asset) {
 /**
  * Blob extension.
  */
-function getBlob(asset: Asset) {
+function BlobPanel({asset} : {asset: Asset;}) {
     const blob = getExtension(asset, ExtensionType.Blob);
 
     if (!blob) {
@@ -120,7 +122,7 @@ function getBlob(asset: Asset) {
 /**
  * Bucket extension.
  */
-function getBucket(asset: Asset) {
+function BucketPanel({asset} : {asset: Asset;}) {
     const bucket = getExtension(asset, ExtensionType.Bucket);
 
     if (!bucket) {
@@ -145,7 +147,7 @@ function getBucket(asset: Asset) {
 /**
  * Creators extension.
  */
-function getCreators(asset: Asset) {
+function CreatorsPanel({asset} : {asset: Asset;}) {
     const creators = getExtension(asset, ExtensionType.Creators);
 
     if (!creators) {
@@ -164,7 +166,6 @@ function getCreators(asset: Asset) {
         );
 
         creators.values.forEach(({ address, verified, share }) => {
-            const creatorPath = useClusterPath({ pathname: `/address/${address}` });
             creatorRows.push(
                 <tr>
                     <td>
@@ -197,7 +198,7 @@ function getCreators(asset: Asset) {
 /**
  * Grouping extension.
  */
-function getGrouping(asset: Asset) {
+function GroupingPanel({asset} : {asset: Asset;}) {
     const grouping = getExtension(asset, ExtensionType.Grouping);
 
     if (!grouping) {
@@ -245,7 +246,7 @@ function getGrouping(asset: Asset) {
 /**
  * Links extension.
  */
-function getLinks(asset: Asset) {
+function LinksPanel({asset} : {asset: Asset;}) {
     const links = getExtension(asset, ExtensionType.Links);
 
     if (!links) {
@@ -285,7 +286,7 @@ function getLinks(asset: Asset) {
 /**
  * Manager extension.
  */
-function getManager(asset: Asset) {
+function ManagerPanel({asset} : {asset: Asset;}) {
     const manager = getExtension(asset, ExtensionType.Manager);
 
     if (!manager) {
@@ -321,7 +322,7 @@ function getManager(asset: Asset) {
 /**
  * Metadata extension.
  */
-function getMetadata(asset: Asset) {
+function MetadataPanel({asset} : {asset: Asset;}) {
     const metadata = getExtension(asset, ExtensionType.Metadata);
 
     if (!metadata) {
@@ -376,7 +377,7 @@ function getMetadata(asset: Asset) {
 /**
  * Properties extension.
  */
-function getProperties(asset: Asset) {
+function PropertiesPanel({asset} : {asset: Asset;}) {
     const properties = getExtension(asset, ExtensionType.Properties);
 
     if (!properties) {
@@ -411,7 +412,7 @@ function getProperties(asset: Asset) {
 /**
  * Proxy extension.
  */
-function getProxy(asset: Asset) {
+function ProxyPanel({asset} : {asset: Asset;}) {
     const proxy = getExtension(asset, ExtensionType.Proxy);
 
     if (!proxy) {
@@ -459,15 +460,14 @@ function getProxy(asset: Asset) {
 /**
  * Royalties extension.
  */
-function getRoyalties(asset: Asset) {
+function RoyaltiesPanel({asset} : {asset: Asset;}) {
+    const addressPath = useClusterPath({ pathname: `/address/${asset.publicKey.toString()}/nifty-asset-ruleset` });
     const royalties = getExtension(asset, ExtensionType.Royalties);
 
     if (!royalties) {
         return null;
     }
 
-    const addressPath = useClusterPath({ pathname: `/address/${asset.publicKey.toString()}/nifty-asset-ruleset` });
-
     return (
         <div className="inner-cards">
             <div className="card-header align-items-center">

app/components/account/nifty-asset/AssetMetadataCard.tsx

@@ -18,11 +18,11 @@ export function NiftyAssetMetadataCard({ asset }: { asset: Asset }) {
         }
     }
 
-    if (metadata?.uri) {
-        React.useEffect(() => {
+    React.useEffect(() => {
+        if (metadata?.uri) {
             fetchMetadataImage(metadata.uri);
-        }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    }
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps    
 
     return (
         <>

app/components/account/nifty-asset/types.ts

@@ -1,6 +1,6 @@
+import { fromWeb3JsPublicKey } from '@metaplex-foundation/umi-web3js-adapters';
 import { ASSET_PROGRAM_ID, Discriminator } from '@nifty-oss/asset';
 import { PublicKey } from '@solana/web3.js';
-import { fromWeb3JsPublicKey } from '@metaplex-foundation/umi-web3js-adapters';
 
 export const KNOWN_IMAGE_EXTENSIONS = ['image/png', 'image/jpeg', 'image/gif', 'image/svg+xml'];