diff --git a/.eslintrc b/.eslintrc index 58aa83402..aa612ab4d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -50,6 +50,7 @@ } ], "@typescript-eslint/await-thenable": "error", + "@typescript-eslint/no-non-null-assertion": "warn", "react-hooks/rules-of-hooks": "warn", "react-hooks/exhaustive-deps": "warn" } diff --git a/src/app/pages/Collectibles/CollectiblePage/PropertiesItems.tsx b/src/app/pages/Collectibles/CollectiblePage/PropertiesItems.tsx index 27ed62b0a..575364344 100644 --- a/src/app/pages/Collectibles/CollectiblePage/PropertiesItems.tsx +++ b/src/app/pages/Collectibles/CollectiblePage/PropertiesItems.tsx @@ -15,10 +15,17 @@ interface PropertiesItemsProps { } export const PropertiesItems = memo(({ assetSlug, accountPkh, details }) => { + const { contract, id } = fromFa2TokenSlug(assetSlug); + const { data: balance } = useBalance(assetSlug, accountPkh, { suspense: false }); - const { account: accountExplorerBaseUrl } = useExplorerBaseUrls(); + + const { transaction: explorerBaseUrl } = useExplorerBaseUrls(); + const exploreContractUrl = useMemo( + () => (explorerBaseUrl ? new URL(contract, explorerBaseUrl).href : null), + [explorerBaseUrl, contract] + ); const mintedTimestamp = useMemo(() => { const value = details?.mintedTimestamp; @@ -34,8 +41,6 @@ export const PropertiesItems = memo(({ assetSlug, accountP return `${royalties.toString()}%`; }, [details]); - const { contract, id } = fromFa2TokenSlug(assetSlug); - const itemClassName = 'flex flex-col gap-y-2 p-3 border border-gray-300 rounded-md'; const itemTitleClassName = 'text-xs text-gray-600 leading-5'; const itemValueClassName = 'text-base font-semibold leading-5 break-words'; @@ -72,7 +77,7 @@ export const PropertiesItems = memo(({ assetSlug, accountP className="tracking-tighter" rounded="base" /> - + {exploreContractUrl && } diff --git a/src/app/pages/Home/OtherComponents/Tokens/Tokens.tsx b/src/app/pages/Home/OtherComponents/Tokens/Tokens.tsx index 6b2b29784..cba8892fc 100644 --- a/src/app/pages/Home/OtherComponents/Tokens/Tokens.tsx +++ b/src/app/pages/Home/OtherComponents/Tokens/Tokens.tsx @@ -1,5 +1,6 @@ import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { ChainIds } from '@taquito/taquito'; import { BigNumber } from 'bignumber.js'; import clsx from 'clsx'; import { isEqual } from 'lodash'; @@ -35,7 +36,6 @@ import { toExploreAssetLink } from './utils'; const LOCAL_STORAGE_TOGGLE_KEY = 'tokens-list:hide-zero-balances'; const svgIconClassName = 'w-4 h-4 stroke-current fill-current text-gray-600'; -const LEADING_ASSETS = [TEZ_TOKEN_SLUG, TEMPLE_TOKEN_SLUG]; export const TokensTab: FC = () => { const dispatch = useDispatch(); @@ -57,10 +57,15 @@ export const TokensTab: FC = () => { const slugs = useMemoWithCompare(() => tokens.map(({ tokenSlug }) => tokenSlug).sort(), [tokens], isEqual); + const leadingAssets = useMemo( + () => (chainId === ChainIds.MAINNET ? [TEZ_TOKEN_SLUG, TEMPLE_TOKEN_SLUG] : [TEZ_TOKEN_SLUG]), + [chainId] + ); + const { filteredAssets, searchValue, setSearchValue } = useFilteredAssetsSlugs( slugs, isZeroBalancesHidden, - LEADING_ASSETS + leadingAssets ); const isEnabledAdsBanner = useIsEnabledAdsBannerSelector(); diff --git a/src/lib/temple/front/blockexplorer.ts b/src/lib/temple/front/blockexplorer.ts index c2cefa7b3..81de4fc0f 100644 --- a/src/lib/temple/front/blockexplorer.ts +++ b/src/lib/temple/front/blockexplorer.ts @@ -5,7 +5,11 @@ import { isKnownChainId, TempleChainId } from 'lib/temple/types'; type BlockExplorerId = 'tzkt' | 'tzstats' | 'bcd' | 't4l3nt'; -type BaseUrls = { account?: string; transaction: string; api?: string }; +interface BaseUrls { + account?: string; + transaction: string; + api?: string; +} export type BlockExplorer = { id: BlockExplorerId; @@ -115,8 +119,11 @@ export function useExplorerBaseUrls(): Partial { const chainId = useChainId(); const { explorer } = useBlockExplorer(); - if (chainId && isKnownChainId(chainId)) { - return explorer.baseUrls.get(chainId) ?? {}; - } - return {}; + return useMemo(() => { + if (chainId && isKnownChainId(chainId)) { + return explorer.baseUrls.get(chainId) ?? {}; + } + + return {}; + }, [chainId, explorer]); }