diff --git a/src/components/Links/ContentHashLink.js b/src/components/Links/ContentHashLink.js index f5e3b98dc..638891df1 100644 --- a/src/components/Links/ContentHashLink.js +++ b/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
{value}
} @@ -40,15 +38,11 @@ const ContentHashLink = ({ value, contentType, domain }) => { if (error) { return {error} } - 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}` diff --git a/src/components/SingleName/NameRegister/EthRegistrationGasPrice.js b/src/components/SingleName/NameRegister/EthRegistrationGasPrice.js index 9ef6ad02e..a51221b92 100644 --- a/src/components/SingleName/NameRegister/EthRegistrationGasPrice.js +++ b/src/components/SingleName/NameRegister/EthRegistrationGasPrice.js @@ -57,7 +57,6 @@ 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() @@ -65,8 +64,12 @@ const EthRegistrationGasPrice = ({ price, ethUsdPrice, gasPrice }) => { 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 ( diff --git a/src/components/SingleName/ResolverAndRecords/ContentHash.js b/src/components/SingleName/ResolverAndRecords/ContentHash.js index 6b6eb9b54..5e440b103 100644 --- a/src/components/SingleName/ResolverAndRecords/ContentHash.js +++ b/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' ? ( Not set ) : ( - <> - - - + )} )} @@ -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 ( + <> +
+ + {displayEthLink && ( +
+ + ({`https://${domain.name}.link`}) + + +
+ )} +
+
+ +
{displayEthLink && <> }
+
+ + ) +} + 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 }) { {t(`c.${keyName}`)} {value !== '' ? ( - <> - - - + ) : ( Not set )}