Merge pull request #265 from ArtemKolodko/linked_nft_page

Add linked NFT page (OneCountry)

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<string, string> = bridgeTokens || {}
+export const linkedContractsMap: Record<string, { address: string; name: string; type: string; }> = linkedContracts || {}
 export const addressAliasMap: AddressMap = mapKeysToLowerCase(addressAliases) || {}
 
 const availableShards = (process.env.REACT_APP_AVAILABLE_SHARDS || '')

src/config/linkedContractsMap.json

@@ -0,0 +1,7 @@
+{
+  "0x4d64b78eaf6129fac30ab51e6d2d679993ea9ddd": {
+    "address": "0x4cd2563118e57b19179d8dc033f2b0c5b5d69ff5",
+    "name": "1country domains",
+    "type": "erc1155"
+  }
+}

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 <Box>
     <Box>
       <Box style={{ minHeight: '28px' }}>
@@ -265,6 +272,13 @@ const NFTInfo = (props: NFTInfoProps) => {
         <AddressLink href={`/address/${token.address}`}>
           <Text color={'brand'} size={'small'}>{token.name}</Text>
         </AddressLink>
+        {linkedContract &&
+          <Box>
+            <AddressLink href={`/inventory/${linkedContract.type}/${linkedContract.address}/${linkTokenId}`}>
+                <Text color={'brand'} size={'medium'}>Show this NFT on {linkedContract.name} page</Text>
+            </AddressLink>
+          </Box>
+        }
       </Box>
       <Box margin={{ top: '24px' }}>
         <NFTDetails {...props} />
@@ -280,7 +294,6 @@ export function InventoryDetailsPage() {
   const [inventory, setInventory] = useState<IUserERC721Assets>({} as any);
   const [isLoading, setIsLoading] = useState(false)
 
-
   const {
     address = '',
     tokenID = '',
@@ -322,6 +335,8 @@ export function InventoryDetailsPage() {
           </NFTContainer>
           <DetailsWrapper>
             <NFTInfo
+              tokenAddressParam={address.toLowerCase()}
+              tokenIDParam={tokenID}
               isLoading={isLoading}
               tokenERC721={token721}
               tokenERC1155={token1155}

src/utils/oneCountry.ts

@@ -1,8 +1,11 @@
 import { DCEns } from 'one-country-sdk'
 import Web3 from "web3";
 import { config } from '../config'
+import {keccak256} from "./getAddress/keccak256";
 
 export const OneCountryTLD = '.country'
+const OneCountryTLDNode = '0xad4be81514036b9f6ff6c5f69394daacc516c82bd6dc4756d7f6ef1b3f9ea717'
+
 
 const { oneCountryContractAddress, shardUrls } = config
 const provider = new Web3.providers.HttpProvider(shardUrls[0] || '')
@@ -12,3 +15,12 @@ export const getAddressByName = async (name: string) => {
     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()
+}