Fix contenthash link (#1064)

* fix-faq-background

* Shows eth.link address below the contenthash link

Author: makoto

src/components/Links/ContentHashLink.js

@@ -2,7 +2,6 @@ import React from 'react'
 import styled from '@emotion/styled/macro'
 import { ReactComponent as ExternalLinkIcon } from '../Icons/externalLink.svg'
 import { decodeContenthash, encodeContenthash } from '@ensdomains/ui'
-import useNetworkInfo from '../NetworkInformation/useNetworkInfo'
 
 const ContentHashLinkContainer = styled('a')`
   display: inline-block;
@@ -29,7 +28,6 @@ const DecodedError = styled('div')`
 `
 
 const ContentHashLink = ({ value, contentType, domain }) => {
-  const { networkId } = useNetworkInfo()
   if (contentType === 'oldcontent') {
     return <div>{value}</div>
   }
@@ -40,15 +38,11 @@ const ContentHashLink = ({ value, contentType, domain }) => {
   if (error) {
     return <DecodedError>{error}</DecodedError>
   }
-  const ethUrl =
-    !!domain.name.match('.eth$') && networkId === 1
-      ? `https://${domain.name}.link`
-      : null
   if (protocolType === 'ipfs') {
-    externalLink = ethUrl || `https://dweb.link/ipfs/${decoded}` // using ipfs's secured origin gateway
+    externalLink = `https://dweb.link/ipfs/${decoded}` // using ipfs's secured origin gateway
     url = `ipfs://${decoded}`
   } else if (protocolType === 'ipns') {
-    externalLink = ethUrl || `https://dweb.link/ipns/${decoded}`
+    externalLink = `https://dweb.link/ipns/${decoded}`
     url = `ipns://${decoded}`
   } else if (protocolType === 'bzz') {
     externalLink = `https://swarm-gateways.net/bzz://${decoded}`

src/components/SingleName/NameRegister/EthRegistrationGasPrice.js

@@ -57,16 +57,19 @@ const Input = styled(DefaultInput)`
 
 const EthRegistrationGasPrice = ({ price, ethUsdPrice, gasPrice }) => {
   const { t } = useTranslation()
-  console.log('***gasPrice', gasPrice)
   const ethVal = new EthVal(`${price}`).toEth()
   const registerGasSlow = new EthVal(`${TOGAL_GAS_WEI * gasPrice.slow}`).toEth()
   const registerGasFast = new EthVal(`${TOGAL_GAS_WEI * gasPrice.fast}`).toEth()
   const gasPriceToGweiSlow = new EthVal(`${gasPrice.slow}`).toGwei()
   const gasPriceToGweiFast = new EthVal(`${gasPrice.fast}`).toGwei()
   const totalSlow = ethVal.add(registerGasSlow)
   const totalFast = ethVal.add(registerGasFast)
-  const totalInUsdSlow = totalSlow.mul(ethUsdPrice)
-  const totalInUsdFast = totalFast.mul(ethUsdPrice)
+  let totalInUsdSlow, totalInUsdFast
+  // No price oracle on Goerli
+  if (ethUsdPrice) {
+    totalInUsdSlow = totalSlow.mul(ethUsdPrice)
+    totalInUsdFast = totalFast.mul(ethUsdPrice)
+  }
   return (
     <PriceContainer>
       <TotalValue>

src/components/SingleName/ResolverAndRecords/ContentHash.js

@@ -19,6 +19,8 @@ import CopyToClipBoard from '../../CopyToClipboard/'
 import { useEditable } from '../../hooks'
 import Button from '../../Forms/Button'
 import RequestCertificate from './RequestCertificate'
+import useNetworkInfo from '../../NetworkInformation/useNetworkInfo'
+import { ReactComponent as ExternalLinkIcon } from '../../Icons/externalLink.svg'
 
 export const RecordsItem = styled(DetailsItem)`
   ${p => !p.hasRecord && 'display: none;'}
@@ -135,6 +137,25 @@ const NotSet = styled('div')`
   color: #ccc;
 `
 
+const LinkContainer = styled('a')`
+  display: inline-block;
+  align-items: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  svg {
+    margin-left: 10px;
+    transition: 0.1s;
+    opacity: 0;
+  }
+
+  &:hover {
+    svg {
+      opacity: 1;
+    }
+  }
+`
+
 const Uploadable = ({ startUploading, keyName, value }) => {
   if (value && !value.error) {
     return (
@@ -172,7 +193,7 @@ const ContentHashEditable = ({
 }) => {
   const { t } = useTranslation()
   const { state, actions } = useEditable()
-
+  const { contentType } = domain
   const { authorized, uploading, newValue } = state
 
   const {
@@ -205,14 +226,11 @@ const ContentHashEditable = ({
               value === 'undefined' ? (
                 <NotSet>Not set</NotSet>
               ) : (
-                <>
-                  <ContentHashLink
-                    value={value}
-                    contentType={domain.contentType}
-                    domain={domain}
-                  />
-                  <CopyToClipBoard value={value} />
-                </>
+                <ContentHashLinkWithEthLink
+                  value={value}
+                  contentType={contentType}
+                  domain={domain}
+                />
               )}
             </RecordsValue>
           )}
@@ -322,6 +340,39 @@ const ContentHashEditable = ({
   )
 }
 
+function ContentHashLinkWithEthLink({ value, contentType, domain }) {
+  const { networkId } = useNetworkInfo()
+  const displayEthLink =
+    !!domain.name.match('.eth$') && networkId === 1 && value?.match(/^ip/)
+  return (
+    <>
+      <div>
+        <ContentHashLink
+          value={value}
+          contentType={contentType}
+          domain={domain}
+        />
+        {displayEthLink && (
+          <div>
+            <LinkContainer
+              target="_blank"
+              rel="noopener"
+              href={`https://${domain.name}.link`}
+            >
+              ({`https://${domain.name}.link`})
+              <ExternalLinkIcon />
+            </LinkContainer>
+          </div>
+        )}
+      </div>
+      <div>
+        <CopyToClipBoard value={value} />
+        <div>{displayEthLink && <>&nbsp;</>}</div>
+      </div>
+    </>
+  )
+}
+
 function ContentHashViewOnly({ keyName, value, type, domain, account }) {
   const { name, contentType } = domain
   const { t } = useTranslation()
@@ -333,14 +384,11 @@ function ContentHashViewOnly({ keyName, value, type, domain, account }) {
         <RecordsKey>{t(`c.${keyName}`)}</RecordsKey>
         <RecordsValue>
           {value !== '' ? (
-            <>
-              <ContentHashLink
-                value={value}
-                contentType={contentType}
-                domain={domain}
-              />
-              <CopyToClipBoard value={value} />
-            </>
+            <ContentHashLinkWithEthLink
+              value={value}
+              contentType={contentType}
+              domain={domain}
+            />
           ) : (
             <NotSet>Not set</NotSet>
           )}