From ac64b623ce2a061dfd46d2cea12cdda88bc3853f Mon Sep 17 00:00:00 2001
From: artemkolodko <temakolodko@gmail.com>
Date: Tue, 28 Mar 2023 15:39:51 +0100
Subject: [PATCH 1/2] Add linked NFT page

---
 src/config/index.ts                           |  2 ++
 src/config/linkedContractsMap.json            |  7 ++++++
 .../InventoryDetailsPage.tsx                  | 22 ++++++++++++++++---
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/config/linkedContractsMap.json

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<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 || '')
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..f8d9350 100644
--- a/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx
+++ b/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx
@@ -11,7 +11,7 @@ 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";
@@ -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 || {}
@@ -155,12 +157,25 @@ const NFTDetails = (props: NFTInfoProps) => {
 
   const EmptyValue = isLoading ? '' : NotAvailable
   const tokenStandard = tokenID ? tokenERC721 ? 'ERC721' : 'ERC1155' : EmptyValue
+  const linkedContract = linkedContractsMap[tokenAddressParam.toLowerCase()]
 
   return <Box round={'8px'} border={{ color: 'border' }} style={{ boxShadow: '0 0.5rem 1.2rem rgb(189 197 209 / 20%)' }}>
     <Box pad={'16px'} border={{ side: 'bottom' }}>
       <Text weight={'bold'}>Details</Text>
     </Box>
     <Box pad={'16px'} border={{ side: 'bottom'}} gap={'16px'}>
+      {linkedContract &&
+          <DetailsRow>
+              <DetailsProp>
+                  Linked page:
+              </DetailsProp>
+              <Box>
+                  <AddressLink href={`/inventory/${linkedContract.type}/${linkedContract.address}/${tokenIDParam}`}>
+                      <Text color={'brand'} size={'small'}>{linkedContract.name} NFT</Text>
+                  </AddressLink>
+              </Box>
+          </DetailsRow>
+      }
       <DetailsRow>
         <DetailsProp>
           <Text size={'small'}>Owner:</Text>
@@ -280,7 +295,6 @@ export function InventoryDetailsPage() {
   const [inventory, setInventory] = useState<IUserERC721Assets>({} as any);
   const [isLoading, setIsLoading] = useState(false)
 
-
   const {
     address = '',
     tokenID = '',
@@ -322,6 +336,8 @@ export function InventoryDetailsPage() {
           </NFTContainer>
           <DetailsWrapper>
             <NFTInfo
+              tokenAddressParam={address}
+              tokenIDParam={tokenID}
               isLoading={isLoading}
               tokenERC721={token721}
               tokenERC1155={token1155}

From 226413f250e05c7ebb44502f349cba32f7b5ce3e Mon Sep 17 00:00:00 2001
From: artemkolodko <temakolodko@gmail.com>
Date: Tue, 28 Mar 2023 17:42:57 +0100
Subject: [PATCH 2/2] OneCountry ENS: convert erc721 to erc1155 tokenId

---
 .../InventoryDetailsPage.tsx                  | 31 +++++++++----------
 src/utils/oneCountry.ts                       | 12 +++++++
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx b/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx
index f8d9350..1a207d9 100644
--- a/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx
+++ b/src/pages/InventoryDetailsPage/InventoryDetailsPage.tsx
@@ -15,7 +15,7 @@ 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;
@@ -157,25 +157,12 @@ const NFTDetails = (props: NFTInfoProps) => {
 
   const EmptyValue = isLoading ? '' : NotAvailable
   const tokenStandard = tokenID ? tokenERC721 ? 'ERC721' : 'ERC1155' : EmptyValue
-  const linkedContract = linkedContractsMap[tokenAddressParam.toLowerCase()]
 
   return <Box round={'8px'} border={{ color: 'border' }} style={{ boxShadow: '0 0.5rem 1.2rem rgb(189 197 209 / 20%)' }}>
     <Box pad={'16px'} border={{ side: 'bottom' }}>
       <Text weight={'bold'}>Details</Text>
     </Box>
     <Box pad={'16px'} border={{ side: 'bottom'}} gap={'16px'}>
-      {linkedContract &&
-          <DetailsRow>
-              <DetailsProp>
-                  Linked page:
-              </DetailsProp>
-              <Box>
-                  <AddressLink href={`/inventory/${linkedContract.type}/${linkedContract.address}/${tokenIDParam}`}>
-                      <Text color={'brand'} size={'small'}>{linkedContract.name} NFT</Text>
-                  </AddressLink>
-              </Box>
-          </DetailsRow>
-      }
       <DetailsRow>
         <DetailsProp>
           <Text size={'small'}>Owner:</Text>
@@ -259,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
@@ -270,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' }}>
@@ -280,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} />
@@ -336,7 +335,7 @@ export function InventoryDetailsPage() {
           </NFTContainer>
           <DetailsWrapper>
             <NFTInfo
-              tokenAddressParam={address}
+              tokenAddressParam={address.toLowerCase()}
               tokenIDParam={tokenID}
               isLoading={isLoading}
               tokenERC721={token721}
diff --git a/src/utils/oneCountry.ts b/src/utils/oneCountry.ts
index 26517fa..ae1b412 100644
--- a/src/utils/oneCountry.ts
+++ b/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()
+}