diff --git a/src/apps/popup/pages/deploy-details/components/action-rows/associated-action-rows.tsx b/src/apps/popup/pages/deploy-details/components/action-rows/associated-action-rows.tsx index 083aa1f86..0048c47ca 100644 --- a/src/apps/popup/pages/deploy-details/components/action-rows/associated-action-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/action-rows/associated-action-rows.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; -import { DeployIcon, getBlockExplorerContractUrl } from '@src/constants'; +import { DeployIcon, getBlockExplorerContractPackageUrl } from '@src/constants'; import { SimpleContainer } from '@popup/pages/deploy-details/components/common'; @@ -32,7 +32,7 @@ export const AssociatedActionRows = ({ const { casperLiveUrl } = useSelector(selectApiConfigBasedOnActiveNetwork); - const link = getBlockExplorerContractUrl( + const link = getBlockExplorerContractPackageUrl( casperLiveUrl, contractPackageHash || '' ); diff --git a/src/apps/popup/pages/deploy-details/components/action-rows/cspr-market-action-rows.tsx b/src/apps/popup/pages/deploy-details/components/action-rows/cspr-market-action-rows.tsx index 2db0f6773..37022e69e 100644 --- a/src/apps/popup/pages/deploy-details/components/action-rows/cspr-market-action-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/action-rows/cspr-market-action-rows.tsx @@ -42,7 +42,7 @@ export const CsprMarketActionRows = ({ deploy }: CsprMarketActionRowsProps) => { { if (isOfferAction) { return ( - + {Number(deploy.formattedDecimalAmount) ? ( + + ) : null} { label="for" isApprove /> - + ); } diff --git a/src/apps/popup/pages/deploy-details/components/common.tsx b/src/apps/popup/pages/deploy-details/components/common.tsx index 89865cd82..d6e612618 100644 --- a/src/apps/popup/pages/deploy-details/components/common.tsx +++ b/src/apps/popup/pages/deploy-details/components/common.tsx @@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; -import { getBlockExplorerContractUrl, getContractNftUrl } from '@src/constants'; +import { getBlockExplorerContractPackageUrl } from '@src/constants'; import { isEqualCaseInsensitive } from '@src/utils'; import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors'; @@ -85,7 +85,7 @@ export const ActionContainerWithLink = ({ }: ActionContainerWithLinkProps) => { const { casperLiveUrl } = useSelector(selectApiConfigBasedOnActiveNetwork); - const link = getBlockExplorerContractUrl( + const link = getBlockExplorerContractPackageUrl( casperLiveUrl, contractPackageHash || '' ); @@ -129,7 +129,10 @@ export const NftInfoRow = ({ selectApiConfigBasedOnActiveNetwork ); - const link = getBlockExplorerContractUrl(casperLiveUrl, publicKey || ''); + const link = getBlockExplorerContractPackageUrl( + casperLiveUrl, + publicKey || '' + ); const getCollectionName = useCallback(() => { if ( @@ -240,7 +243,10 @@ export const ContractInfoRow = ({ const { casperLiveUrl } = useSelector(selectApiConfigBasedOnActiveNetwork); // Fetch the live Casper network URL from Redux store. // Assuming 'publicKey' is the public key of the contract. // Replace 'casperLiveUrl' with the actual live Casper network URL. // Fetch the contract details using the public key. // Display the contract name, icon, and additional information. // If the contract details are not found, display a - const link = getBlockExplorerContractUrl(casperLiveUrl, publicKey || ''); + const link = getBlockExplorerContractPackageUrl( + casperLiveUrl, + publicKey || '' + ); return ( diff --git a/src/apps/popup/pages/deploy-details/components/deploy-details-result.tsx b/src/apps/popup/pages/deploy-details/components/deploy-details-result.tsx index 5b20b34b4..5b5e97a7c 100644 --- a/src/apps/popup/pages/deploy-details/components/deploy-details-result.tsx +++ b/src/apps/popup/pages/deploy-details/components/deploy-details-result.tsx @@ -65,6 +65,16 @@ export const DeployDetailsResult = ({ deploy }: DeployDetailsResultProps) => { return null; } + const showResultRow = Boolean( + deploy.status !== 'error' && + (deploy.transfersActionsResult.length || + (isNftDeploy(deploy) && deploy.nftActionsResult.length) || + (isCep18Deploy(deploy) && deploy.cep18ActionsResult.length) || + isAssociatedKeysDeploy(deploy)) + ); + + if (!showResultRow) return null; + if (isAssociatedKeysDeploy(deploy)) { return ( @@ -87,40 +97,23 @@ export const DeployDetailsResult = ({ deploy }: DeployDetailsResultProps) => { fiatAmount={action.fiatAmount} /> ))} + {isCep18Deploy(deploy) && + deploy.cep18ActionsResult.map((action, id) => ( + + ))} + {(isNftDeploy(deploy) || isCasperMarketDeploy(deploy)) && + deploy.nftActionsResult.map((action, id) => ( + + ))} ); } - - if ( - (isNftDeploy(deploy) || isCasperMarketDeploy(deploy)) && - deploy.nftActionsResult.length - ) { - return ( - - {deploy.nftActionsResult.map((action, id) => ( - - ))} - - ); - } - - if (isCep18Deploy(deploy) && deploy.cep18ActionsResult.length) { - return ( - - {deploy.cep18ActionsResult.map((action, id) => ( - - ))} - - ); - } - - return null; }; diff --git a/src/apps/popup/pages/deploy-details/components/result-rows/nft-result-rows.tsx b/src/apps/popup/pages/deploy-details/components/result-rows/nft-result-rows.tsx index ab888eefa..ee5bf8d61 100644 --- a/src/apps/popup/pages/deploy-details/components/result-rows/nft-result-rows.tsx +++ b/src/apps/popup/pages/deploy-details/components/result-rows/nft-result-rows.tsx @@ -8,7 +8,6 @@ import { } from '@src/constants'; import { - ContractInfoRow, NftInfoRow, SimpleContainer } from '@popup/pages/deploy-details/components/common'; @@ -56,8 +55,8 @@ export const NftResultRows = ({ defaultSvg={DeployIcon.NFTDefault} /> - + ); } diff --git a/src/constants.ts b/src/constants.ts index 6205cc5af..bf9341746 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -29,11 +29,19 @@ export const MAX_DELEGATORS = 1200; export const PENDING_DEPLOY_REFETCH_INTERVAL = 5 * 1000; -export const getBlockExplorerAccountUrl = (baseUrl: string, hash: string) => - `${baseUrl}/account/${hash}`; +export const getBlockExplorerAccountUrl = ( + casperLiveUrl: string, + publicKey: string +) => { + const path = publicKey?.includes('uref') ? 'uref' : 'account'; + + return `${casperLiveUrl}/${path}/${publicKey}`; +}; -export const getBlockExplorerContractUrl = (baseUrl: string, hash: string) => - `${baseUrl}/contract-package/${hash}`; +export const getBlockExplorerContractPackageUrl = ( + casperLiveUrl: string, + contractPackageHash: string +) => `${casperLiveUrl}/contract-package/${contractPackageHash}`; export const getBlockExplorerDeployUrl = ( casperLiveUrl: string, diff --git a/src/libs/layout/header/header-view-in-explorer.tsx b/src/libs/layout/header/header-view-in-explorer.tsx index 3f8696aca..322af0201 100644 --- a/src/libs/layout/header/header-view-in-explorer.tsx +++ b/src/libs/layout/header/header-view-in-explorer.tsx @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import { getBlockExplorerAccountUrl, - getBlockExplorerContractUrl, + getBlockExplorerContractPackageUrl, getBlockExplorerDeployUrl, getContractNftUrl } from '@src/constants'; @@ -69,7 +69,7 @@ export function HeaderViewInExplorer({ if (token) { setHrefToTokenOnCasperLive( - getBlockExplorerContractUrl( + getBlockExplorerContractPackageUrl( casperLiveUrl, token.contract_package_hash ) diff --git a/src/libs/ui/components/account-info-row/account-info-row.tsx b/src/libs/ui/components/account-info-row/account-info-row.tsx index 2c05469fd..2931037c6 100644 --- a/src/libs/ui/components/account-info-row/account-info-row.tsx +++ b/src/libs/ui/components/account-info-row/account-info-row.tsx @@ -1,10 +1,13 @@ import { Maybe } from 'casper-wallet-core/src/typings/common'; -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; -import { getBlockExplorerAccountUrl } from '@src/constants'; +import { + getBlockExplorerAccountUrl, + getBlockExplorerContractPackageUrl +} from '@src/constants'; import { isEqualCaseInsensitive } from '@src/utils'; import { selectAllContacts } from '@background/redux/contacts/selectors'; @@ -44,6 +47,8 @@ export const AccountInfoRow = ({ iconSize = 16, isAction = false }: AccountInfoRowProps) => { + const [linkUrl, setLinkUrl] = useState(''); + const { t } = useTranslation(); const accounts = useSelector(selectVaultAccounts); @@ -55,7 +60,25 @@ export const AccountInfoRow = ({ csprMarketContractHash } = useSelector(selectApiConfigBasedOnActiveNetwork); - const link = getBlockExplorerAccountUrl(casperLiveUrl, publicKey || ''); + useEffect(() => { + if ( + publicKey && + (isEqualCaseInsensitive(publicKey, csprStudioCep47ContractHash) || + isEqualCaseInsensitive(publicKey, csprMarketContractHash)) + ) { + setLinkUrl( + getBlockExplorerContractPackageUrl(casperLiveUrl, publicKey || '') + ); + } else { + setLinkUrl(getBlockExplorerAccountUrl(casperLiveUrl, publicKey || '')); + } + }, [ + auctionPoolContractHash, + casperLiveUrl, + csprMarketContractHash, + csprStudioCep47ContractHash, + publicKey + ]); const accountLabel = useMemo( () => accounts.find(acc => acc.publicKey === publicKey)?.name, @@ -101,7 +124,7 @@ export const AccountInfoRow = ({ <> diff --git a/src/libs/ui/components/deploy-plate/components/native-transfer-deploy-rows.tsx b/src/libs/ui/components/deploy-plate/components/native-transfer-deploy-rows.tsx index 2217fd638..2366ddcda 100644 --- a/src/libs/ui/components/deploy-plate/components/native-transfer-deploy-rows.tsx +++ b/src/libs/ui/components/deploy-plate/components/native-transfer-deploy-rows.tsx @@ -40,7 +40,13 @@ export const NativeTransferDeployRows = ({ ); } - // + if (isCep18Deploy(deploy)) { return (