diff --git a/src/config/index.ts b/src/config/index.ts index 07ec0b2..84d5248 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -1,5 +1,6 @@ import { default as bridgeTokens } from "src/config/bridgeTokensMap.json"; import { default as addressAliases } from "src/config/addressAliasMap.json"; +import { default as linkedContracts } from "src/config/linkedContractsMap.json"; import { ShardID } from "../types"; interface AddressMap { @@ -15,6 +16,7 @@ const mapKeysToLowerCase = (input: AddressMap): AddressMap => { }; export const bridgeTokensMap: Record = bridgeTokens || {} +export const linkedContractsMap: Record = linkedContracts || {} export const addressAliasMap: AddressMap = mapKeysToLowerCase(addressAliases) || {} const availableShards = (process.env.REACT_APP_AVAILABLE_SHARDS || '') diff --git a/src/config/linkedContractsMap.json b/src/config/linkedContractsMap.json new file mode 100644 index 0000000..9358737 --- /dev/null +++ b/src/config/linkedContractsMap.json @@ -0,0 +1,7 @@ +{ + "0x4d64b78eaf6129fac30ab51e6d2d679993ea9ddd": { + "address": "0x4cd2563118e57b19179d8dc033f2b0c5b5d69ff5", + "name": "1country domains", + "type": "erc1155" + } +} diff --git a/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx b/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx index e091d88..1a207d9 100644 --- a/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx +++ b/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx @@ -11,11 +11,11 @@ import {ERC1155, useERC1155Pool} from "src/hooks/ERC1155_Pool"; import {ERC721, useERC721Pool} from "src/hooks/ERC721_Pool"; import styled from "styled-components"; import HarmonyLogo from '../../assets/Logo.svg'; -import { config } from '../../config' +import { linkedContractsMap, config } from '../../config' import {ERC1155Icon} from "../../components/ui/ERC1155Icon"; import dayjs from "dayjs"; import {CopyBtn} from "../../components/ui/CopyBtn"; -import {OneCountryTLD} from "../../utils/oneCountry"; +import {convertErc721TokenId, OneCountryTLD} from "../../utils/oneCountry"; const AddressLink = styled.a` text-decoration: none; @@ -91,6 +91,8 @@ const NFTImage = (props: NFTImageProps) => { } interface NFTInfoProps { + tokenIDParam: string; + tokenAddressParam: string; isLoading: boolean tokenERC721: ERC721 tokenERC1155: ERC1155 @@ -147,7 +149,7 @@ const MetaDescription = (props: { text: string, domainParseLinks?: string }) => } const NFTDetails = (props: NFTInfoProps) => { - const { tokenERC721, asset, isLoading } = props + const { tokenAddressParam, tokenIDParam, tokenERC721, asset, isLoading } = props const { ownerAddress, tokenID, tokenAddress } = asset // const token = tokenERC721 || tokenERC1155 || {} @@ -244,7 +246,7 @@ const NFTDetails = (props: NFTInfoProps) => { } const NFTInfo = (props: NFTInfoProps) => { - const { tokenERC721, tokenERC1155, asset, isLoading } = props + const { tokenAddressParam, tokenIDParam, tokenERC721, tokenERC1155, asset, isLoading } = props const { meta, tokenID } = asset const EmptyValue = isLoading ? '' : NotAvailable @@ -255,6 +257,11 @@ const NFTInfo = (props: NFTInfoProps) => { : EmptyValue; const erc1155Image = tokenERC1155 && tokenERC1155.meta ? tokenERC1155.meta.image : '' + const linkedContract = linkedContractsMap[tokenAddressParam] + const linkTokenId = linkedContract && linkedContract.address === config.oneCountryNFTContractAddress + ? convertErc721TokenId(tokenIDParam) + : tokenIDParam + return @@ -265,6 +272,13 @@ const NFTInfo = (props: NFTInfoProps) => { {token.name} + {linkedContract && + + + Show this NFT on {linkedContract.name} page + + + } @@ -280,7 +294,6 @@ export function InventoryDetailsPage() { const [inventory, setInventory] = useState({} as any); const [isLoading, setIsLoading] = useState(false) - const { address = '', tokenID = '', @@ -322,6 +335,8 @@ export function InventoryDetailsPage() { { const record = await oneCountry.getRecord(name) return record ? record.renter : '' } + +export const convertErc721TokenId = (erc721TokenId: string) => { + const labelHashReverse = '0x' + BigInt(erc721TokenId).toString(16) + const encodePacked = Web3.utils.encodePacked( + {value: OneCountryTLDNode, type: 'bytes32'}, + {value: labelHashReverse, type: 'bytes32'}, + ) || ''; + return BigInt(keccak256(encodePacked)).toString() +}