Merge pull request #214 from ensdomains/dev

Deploy to production

src/api/rootResolver.js

@@ -1,4 +1,4 @@
-import getWeb3, { getAccounts, getNetworkId } from './web3'
+import getWeb3, { getAccounts, getNetworkId, isReadOnly } from './web3'
 import { getAddr } from './registry'
 import merge from 'lodash/merge'
 import fifsResolvers, {
@@ -55,10 +55,11 @@ const resolvers = {
     }
   },
   Query: {
-    web3: async (_, variables, context) => {
+    web3: async () => {
       try {
         return {
           ...(await getWeb3()),
+          isReadOnly: isReadOnly(),
           __typename: 'Web3'
         }
       } catch (e) {
@@ -88,7 +89,6 @@ const resolvers = {
       const data = {
         error: errorObj
       }
-      console.log(data)
       cache.writeData({ data })
       return errorObj
     }

src/api/web3.js

@@ -126,7 +126,7 @@ export async function getNetworkId() {
 
 export async function getBlock() {
   const web3 = await getWeb3()
-  let block =  await web3.eth.getBlock('latest');
+  let block = await web3.eth.getBlock('latest')
   return {
     number: block.number,
     timestamp: block.timestamp

src/components/Forms/Button.js

@@ -111,7 +111,6 @@ const Button = props => {
       className={className}
       type={type}
       onClick={onClick}
-      disabled={type === 'disabled'}
       {...props}
     >
       {children}

src/components/NetworkInformation/NetworkInformation.js

@@ -94,7 +94,7 @@ class NetworkInformation extends Component {
                 <Account data-testid="account" className="account">
                   <ReverseRecord address={accounts[0]} />
                 </Account>
-                <NetworkStatus>{network}</NetworkStatus>
+                <NetworkStatus>{network} Network</NetworkStatus>
               </AccountContainer>
             ) : (
               <NoAccountsModal colour={'#F5A623'} />

src/components/SingleName/DetailsItemEditable.js

@@ -380,46 +380,45 @@ const Editable = ({
   )
 }
 
-class DetailsEditable extends Component {
-  _renderViewOnly() {
-    let { value, keyName, type, deedOwner, isDeedOwner, domain } = this.props
-    if (parseInt(value, 16) === 0) {
-      let [newValue, newType] = getDefaultMessage(keyName)
-      value = newValue
-      type = newType
-      if (
-        keyName === 'Owner' &&
-        domain.parent === 'eth' &&
-        parseInt(deedOwner, 16) !== 0
-      ) {
-        value = 'Pending'
-        if (isDeedOwner) {
-          value += '(You have not finalised)'
-        }
+function ViewOnly({ value, keyName, type, deedOwner, isDeedOwner, domain }) {
+  if (parseInt(value, 16) === 0) {
+    let [newValue, newType] = getDefaultMessage(keyName)
+    value = newValue
+    type = newType
+    if (
+      keyName === 'Owner' &&
+      domain.parent === 'eth' &&
+      parseInt(deedOwner, 16) !== 0
+    ) {
+      value = 'Pending'
+      if (isDeedOwner) {
+        value += '(You have not finalised)'
       }
     }
-    return (
-      <DetailsEditableContainer>
-        <DetailsContent>
-          <DetailsKey>{keyName}</DetailsKey>
-          <DetailsValue data-testid={`details-value-${keyName.toLowerCase()}`}>
-            {type === 'address' ? (
-              <EtherScanLink address={value}>
-                <SingleNameBlockies address={value} imageSize={24} />
-                {value}
-              </EtherScanLink>
-            ) : (
-              value
-            )}
-          </DetailsValue>
-        </DetailsContent>
-      </DetailsEditableContainer>
-    )
-  }
-  render() {
-    const { isOwner } = this.props
-    return isOwner ? <Editable {...this.props} /> : this._renderViewOnly()
   }
+  return (
+    <DetailsEditableContainer>
+      <DetailsContent>
+        <DetailsKey>{keyName}</DetailsKey>
+        <DetailsValue data-testid={`details-value-${keyName.toLowerCase()}`}>
+          {type === 'address' ? (
+            <EtherScanLink address={value}>
+              <SingleNameBlockies address={value} imageSize={24} />
+              {value}
+            </EtherScanLink>
+          ) : type === 'date' ? (
+            formatDate(value)
+          ) : (
+            value
+          )}
+        </DetailsValue>
+      </DetailsContent>
+    </DetailsEditableContainer>
+  )
+}
+
+function DetailsEditable(props) {
+  return props.canEdit ? <Editable {...props} /> : <ViewOnly {...props} />
 }
 
 DetailsEditable.propTypes = {
@@ -429,6 +428,7 @@ DetailsEditable.propTypes = {
   mutation: PropTypes.object.isRequired, //graphql mutation string for making tx
   mutationButton: PropTypes.string, // Mutation button text
   editButton: PropTypes.string, //Edit button text
+  canEdit: PropTypes.bool,
   domain: PropTypes.object.isRequired,
   variableName: PropTypes.string, //can change the variable name for mutation
   refetch: PropTypes.func.isRequired

src/components/SingleName/Name.js

@@ -81,17 +81,23 @@ function isRegistrationOpen(domain, isDeedOwner) {
   return parent === 'eth' && !isDeedOwner && available
 }
 
+function isOwnerOfDomain(domain, account) {
+  if (domain.owner !== EMPTY_ADDRESS) {
+    return domain.owner.toLowerCase() === account.toLowerCase()
+  }
+  return false
+}
+
 function Name({ details: domain, name, pathname, refetch }) {
   const smallBP = useMediaMin('small')
   const percentDone = 0
+
   return (
     <QueryAccount>
       {({ account }) => {
-        let isOwner = false
-        if (domain.owner !== EMPTY_ADDRESS) {
-          isOwner = domain.owner.toLowerCase() === account.toLowerCase()
-        }
+        const isOwner = isOwnerOfDomain(domain, account)
         const isDeedOwner = domain.deedOwner === account
+
         return (
           <NameContainer state={isOwner ? 'Yours' : domain.state}>
             <TopBar percentDone={percentDone}>
@@ -116,6 +122,7 @@ function Name({ details: domain, name, pathname, refetch }) {
                 domain={domain}
                 pathname={pathname}
                 refetch={refetch}
+                readOnly={account === EMPTY_ADDRESS}
               />
             ) : (
               <NameDetails

src/components/SingleName/NameDetails.js

@@ -153,7 +153,7 @@ class NameDetails extends Component {
                       domain={domain}
                       keyName="Registrant"
                       value={domain.registrant}
-                      isOwner={isRegistrant}
+                      canEdit={isRegistrant}
                       type="address"
                       editButton="Transfer"
                       mutationButton="Transfer"
@@ -165,7 +165,7 @@ class NameDetails extends Component {
                       domain={domain}
                       keyName="Controller"
                       value={domain.owner}
-                      isOwner={isOwner || isRegistrant}
+                      canEdit={isOwner || isRegistrant}
                       deedOwner={domain.deedOwner}
                       isDeedOwner={isDeedOwner}
                       type="address"
@@ -181,7 +181,7 @@ class NameDetails extends Component {
                     domain={domain}
                     keyName="Controller"
                     value={domain.owner}
-                    isOwner={isOwner}
+                    canEdit={isOwner}
                     deedOwner={domain.deedOwner}
                     isDeedOwner={isDeedOwner}
                     type="address"
@@ -204,12 +204,12 @@ class NameDetails extends Component {
                   ''
                 )}
                 {domain.expiryTime ? (
-                  domain.isNewRegistrar && isOwner ? (
+                  domain.isNewRegistrar ? (
                     <DetailsItemEditable
                       domain={domain}
                       keyName="Expiration Date"
                       value={domain.expiryTime}
-                      isOwner={isOwner}
+                      canEdit={parseInt(account, 16) !== 0}
                       type="date"
                       editButton="Renew"
                       mutationButton="Renew"
@@ -248,7 +248,7 @@ class NameDetails extends Component {
                   keyName="Resolver"
                   type="address"
                   value={domain.resolver}
-                  isOwner={isOwner}
+                  canEdit={isOwner}
                   domain={domain}
                   editButton="Set"
                   mutationButton="Save"

src/components/SingleName/NameRegister/CTA.js

@@ -4,6 +4,7 @@ import { Mutation } from 'react-apollo'
 
 import { COMMIT, REGISTER } from '../../../graphql/mutations'
 
+import Tooltip from 'components/Tooltip/Tooltip'
 import PendingTx from '../../PendingTx'
 import Button from '../../Forms/Button'
 import { ReactComponent as DefaultPencil } from '../../Icons/SmallPencil.svg'
@@ -37,7 +38,8 @@ function getCTA({
   setTxHash,
   setTimerRunning,
   isAboveMinDuration,
-  refetch
+  refetch,
+  readOnly
 }) {
   const CTAs = {
     PRICE_DECISION: (
@@ -50,10 +52,35 @@ function getCTA({
         }}
       >
         {mutate =>
-          isAboveMinDuration ? (
+          isAboveMinDuration && !readOnly ? (
             <Button data-testid="request-register-button" onClick={mutate}>
               Request to register
             </Button>
+          ) : readOnly ? (
+            <Tooltip
+              text="<p>You are not connected to a web3 browser. Please connect to a web3 browser and try again</p>"
+              position="top"
+              border={true}
+              offset={{ left: -30, top: 10 }}
+            >
+              {({ tooltipElement, showTooltip, hideTooltip }) => {
+                return (
+                  <Button
+                    data-testid="request-register-button"
+                    type="disabled"
+                    onMouseOver={() => {
+                      showTooltip()
+                    }}
+                    onMouseLeave={() => {
+                      hideTooltip()
+                    }}
+                  >
+                    Request to register
+                    {tooltipElement}
+                  </Button>
+                )
+              }}
+            </Tooltip>
           ) : (
             <Button data-testid="request-register-button" type="disabled">
               Request to register
@@ -119,12 +146,12 @@ function getCTA({
 const CTA = ({
   step,
   incrementStep,
-  decrementStep,
   duration,
   label,
   setTimerRunning,
   isAboveMinDuration,
-  refetch
+  refetch,
+  readOnly
 }) => {
   const [txHash, setTxHash] = useState(undefined)
   return (
@@ -138,7 +165,8 @@ const CTA = ({
         setTxHash,
         setTimerRunning,
         isAboveMinDuration,
-        refetch
+        refetch,
+        readOnly
       })}
     </CTAContainer>
   )

src/components/SingleName/NameRegister/NameRegister.js

@@ -18,7 +18,7 @@ const NameRegisterContainer = styled('div')`
   padding: 20px 40px;
 `
 
-const NameRegister = ({ domain, waitTime, refetch }) => {
+const NameRegister = ({ domain, waitTime, refetch, readOnly }) => {
   const [step, dispatch] = useReducer(
     registerReducer,
     registerMachine.initialState
@@ -80,6 +80,7 @@ const NameRegister = ({ domain, waitTime, refetch }) => {
         setTimerRunning={setTimerRunning}
         refetch={refetch}
         isAboveMinDuration={isAboveMinDuration}
+        readOnly={readOnly}
       />
     </NameRegisterContainer>
   )

src/graphql/queries.js

@@ -5,6 +5,7 @@ export const GET_WEB3 = gql`
   query web3 {
     web3 @client {
       accounts
+      isReadOnly
     }
   }
 `