Merge pull request #450 from ensdomains/dev

Deploy Address Page

src/App.js

@@ -14,7 +14,7 @@ import SearchResults from './routes/SearchResults'
 import SingleName from './routes/SingleName'
 import Favourites from './routes/Favourites'
 import About from './routes/About'
-import Address from './routes/Address'
+import Address from './routes/AddressPage'
 import { TestPage } from './routes/Test'
 import Modal from './components/Modal/Modal'
 import Confirm from './components/SingleName/Confirm'

src/api/manager/resolvers.js

@@ -56,9 +56,10 @@ async function getParent(name) {
 
 async function getRegistrarEntry(name) {
   const nameArray = name.split('.')
-  if (nameArray.length > 3 && nameArray[1] !== 'eth') {
+  if (nameArray.length > 3 || nameArray[1] !== 'eth') {
     return {}
   }
+
   const entry = await getEntry(nameArray[0])
   const {
     registrant,

src/components/Address/Address.js

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react'
+import styled from '@emotion/styled'
+import { useQuery } from 'react-apollo'
+
+import { GET_DOMAINS_OWNED_BY_ADDRESS_FROM_SUBGRAPH } from '../../graphql/queries'
+import DomainItem from '../DomainItem/ChildDomainItem'
+import { decryptName } from '../../api/labels'
+import AddressContainer from '../Basic/MainContainer'
+import DefaultTopBar from '../Basic/TopBar'
+import { Title } from '../Typography/Basic'
+import { ExternalButtonLink as DefaultExternalButtonLink } from '../Forms/Button'
+import { getEtherScanAddr } from '../../utils/utils'
+import Loader from '../Loader'
+
+const NoDomainsContainer = styled('div')`
+  display: flex;
+  padding: 40px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: white;
+  box-shadow: 3px 4px 6px 0 rgba(229, 236, 241, 0.3);
+  border-radius: 6px;
+  margin-bottom: 40px;
+
+  h2 {
+    color: #adbbcd;
+    font-weight: 100;
+    margin-bottom: 0;
+    padding: 0;
+    margin-top: 20px;
+    text-align: center;
+    max-width: 500px;
+  }
+
+  p {
+    color: #2b2b2b;
+    font-size: 18px;
+    font-weight: 300;
+    margin-top: 20px;
+    line-height: 1.3em;
+    text-align: center;
+    max-width: 400px;
+  }
+`
+
+const TopBar = styled(DefaultTopBar)`
+  margin-bottom: 40px;
+`
+
+const ExternalButtonLink = styled(DefaultExternalButtonLink)`
+  margin-left: 40px;
+`
+
+const DomainsContainer = styled('div')`
+  margin-top: 20px;
+  padding-bottom: 30px;
+  padding-left: 40px;
+  padding-right: 40px;
+`
+
+function hasNoDomains(data) {
+  return (
+    (data.account &&
+      data.account.domains &&
+      data.account.domains.length === 0) ||
+    data.account === null
+  )
+}
+
+function filterOutReverse(domains) {
+  return domains.filter(domain => domain.parent.name !== 'addr.reverse')
+}
+
+function DomainList({ domains, address }) {
+  const { loading, data, error } = useQuery(
+    GET_DOMAINS_OWNED_BY_ADDRESS_FROM_SUBGRAPH,
+    { variables: { id: address } }
+  )
+
+  if (error) {
+    return 'Error getting domains'
+  }
+
+  if (loading) {
+    return <Loader withWrap large />
+  }
+
+  if (hasNoDomains(data)) {
+    return (
+      <NoDomainsContainer>
+        <h2>This address does not own any domains</h2>
+      </NoDomainsContainer>
+    )
+  }
+
+  return (
+    <DomainsContainer>
+      {filterOutReverse(data.account.domains).map(domain => (
+        <DomainItem name={decryptName(domain.name)} owner={address} />
+      ))}
+    </DomainsContainer>
+  )
+}
+
+export default function Address({ address }) {
+  let [etherScanAddr, setEtherScanAddr] = useState(null)
+
+  useEffect(() => {
+    getEtherScanAddr().then(setEtherScanAddr)
+  }, [])
+
+  return (
+    <AddressContainer>
+      <TopBar>
+        <Title>{address}</Title>
+      </TopBar>
+      {etherScanAddr && (
+        <ExternalButtonLink
+          type="primary"
+          target="_blank"
+          href={`${etherScanAddr}/address/${address}`}
+        >
+          View on EtherScan
+        </ExternalButtonLink>
+      )}
+      <DomainList address={address} />
+    </AddressContainer>
+  )
+}

src/components/Address/index.js

@@ -0,0 +1,2 @@
+import Address from './Address'
+export default Address

src/components/Basic/MainContainer.js

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled'
+import mq from 'mediaQuery'
+
+const MainContainer = styled('div')`
+  background: white;
+  box-shadow: 3px 4px 6px 0 rgba(229, 236, 241, 0.3);
+  border-radius: 0;
+  margin-bottom: 60px;
+  position: relative;
+  overflow: hidden;
+
+  ${mq.small`
+    border-radius: 6px;
+  `}
+
+  &:before {
+    left: 0;
+    top: 0;
+    width: 4px;
+    height: 100%;
+    display: block;
+    content: '';
+    background: ${({ state }) => {
+      switch (state) {
+        case 'Owned':
+          return '#CACACA'
+        case 'Auction':
+        case 'Reveal':
+          return 'linear-gradient(-180deg, #42E068 0%, #52E5FF 100%)'
+        case 'Yours':
+          return '#52e5ff'
+        case 'Open':
+          return '#42E068'
+        default:
+          return '#CACACA'
+      }
+    }};
+    position: absolute;
+  }
+`
+
+export default MainContainer

src/components/Basic/TopBar.js

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled'
+
+const TopBar = styled('div')`
+  padding: 20px 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #ededed;
+  box-shadow: 0 2px 4px 0 rgba(181, 177, 177, 0.2);
+
+  background: ${({ percentDone }) =>
+    percentDone
+      ? `
+  linear-gradient(to right, rgba(128, 255, 128, 0.1) 0%, rgba(82,229,255, 0.1) ${percentDone}%,#ffffff ${percentDone}%)`
+      : 'white'};
+`
+
+export default TopBar

src/components/DomainItem/ChildDomainItem.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import { Link } from 'react-router-dom'
+import { SingleNameBlockies } from '../SingleName/SingleNameBlockies'
+
+const DomainLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 30px 0;
+  color: #2b2b2b;
+  font-size: 22px;
+  font-weight: 100;
+  border-bottom: 1px dashed #d3d3d3;
+
+  &:last-child {
+    border: none;
+  }
+`
+
+export default function ChildDomainItem({
+  name,
+  labelhash,
+  owner,
+  labelName,
+  parent
+}) {
+  return (
+    <DomainLink key={name} to={`/name/${name}`}>
+      <SingleNameBlockies imageSize={24} address={owner} />
+      {labelName !== null
+        ? `${name}`
+        : `[unknown${labelhash.slice(2, 10)}].${parent}`}
+    </DomainLink>
+  )
+}

src/components/Forms/Button.js

@@ -6,6 +6,9 @@ function getButtonStyles({ type }) {
   switch (type) {
     case 'primary':
       return `
+        &:visited {
+          color: white;
+        }
         &:hover {
           cursor: pointer;
           border: 2px solid #2c46a6;

src/components/SingleName/Name.js

@@ -1,70 +1,19 @@
 import React from 'react'
 import styled from '@emotion/styled'
 
-import mq, { useMediaMin } from 'mediaQuery'
+import { useMediaMin } from 'mediaQuery'
 import { EMPTY_ADDRESS } from '../../utils/records'
 
 import { Title } from '../Typography/Basic'
+import TopBar from '../Basic/TopBar'
 import DefaultFavourite from '../AddFavourite/Favourite'
 import NameDetails from './NameDetails'
 import NameRegister from './NameRegister'
 import DNSNameRegister from './DNSNameRegister'
 import ShortName from './ShortName'
 import Tabs from './Tabs'
 import { useAccount } from '../QueryAccount'
-
-const NameContainer = styled('div')`
-  background: white;
-  box-shadow: 3px 4px 6px 0 rgba(229, 236, 241, 0.3);
-  border-radius: 0;
-  margin-bottom: 60px;
-  position: relative;
-  overflow: hidden;
-
-  ${mq.small`
-    border-radius: 6px;
-  `}
-
-  &:before {
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
-    display: block;
-    content: '';
-    background: ${({ state }) => {
-      switch (state) {
-        case 'Owned':
-          return '#CACACA'
-        case 'Auction':
-        case 'Reveal':
-          return 'linear-gradient(-180deg, #42E068 0%, #52E5FF 100%)'
-        case 'Yours':
-          return '#52e5ff'
-        case 'Open':
-          return '#42E068'
-        default:
-          return '#CACACA'
-      }
-    }};
-    position: absolute;
-  }
-`
-
-const TopBar = styled('div')`
-  padding: 20px 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #ededed;
-  box-shadow: 0 2px 4px 0 rgba(181, 177, 177, 0.2);
-
-  background: ${({ percentDone }) =>
-    percentDone
-      ? `
-  linear-gradient(to right, rgba(128, 255, 128, 0.1) 0%, rgba(82,229,255, 0.1) ${percentDone}%,#ffffff ${percentDone}%)`
-      : 'white'};
-`
+import NameContainer from '../Basic/MainContainer'
 
 const Owner = styled('div')`
   color: #ccd4da;

src/components/SingleName/NameDetails.js

@@ -66,7 +66,7 @@ const Records = styled('div')`
   border: 1px solid #ededed;
   box-shadow: inset 0 0 10px 0 rgba(235, 235, 235, 0.5);
   padding-bottom: ${p => (p.hasRecord ? '10px' : '0')};
-  display: ${p => (!p.isOwner && !p.hasRecord ? 'none' : 'block')};
+  display: ${p => (!p.hasRecord ? 'none' : 'block')};
 `
 
 const ExpirationDetailsValue = styled(DetailsValue)`
@@ -601,15 +601,13 @@ function NameDetails({ domain, isOwner, isOwnerOfParent, refetch, account }) {
                 account={account}
               />
               <Records hasRecord={hasAnyRecord(domain)} isOwner={isOwner}>
-                {hasAnyRecord(domain) && isOwner && (
-                  <AddRecord
-                    emptyRecords={emptyRecords}
-                    title="Records"
-                    isOwner={isOwner}
-                    domain={domain}
-                    refetch={refetch}
-                  />
-                )}
+                <AddRecord
+                  emptyRecords={emptyRecords}
+                  title="Records"
+                  isOwner={isOwner}
+                  domain={domain}
+                  refetch={refetch}
+                />
                 {hasAnyRecord(domain) && (
                   <>
                     {!isEmpty(domain.addr) && (