Merge pull request #484 from ensdomains/dev

Deploy to production - Text record (#483)
ensdomains · Sep 26, 2019 · 9d4cd8d · 9d4cd8d
2 parents afe3da3 + 03d7a2e
commit 9d4cd8d
Show file tree

Hide file tree

Showing 12 changed files with 449 additions and 22 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,7 @@ cypress.env.json
 cypress/screenshots
 cypress/videos
 ganache.log
+
+# code
+
+ens-app.code-workspace
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "@ensdomains/ethregistrar": "^1.2.2",
     "@ensdomains/react-ens-address": "^0.0.16",
     "@ensdomains/resolver": "^0.1.6",
-    "@ensdomains/ui": "1.1.19",
+    "@ensdomains/ui": "1.1.20",
     "apollo-cache-inmemory": "^1.2.9",
     "apollo-client": "^2.4.5",
     "apollo-link": "^1.2.2",

diff --git a/src/api/manager/resolvers.js b/src/api/manager/resolvers.js
@@ -9,12 +9,14 @@ import {
   getName,
   getNetworkId,
   getAddress,
+  getText,
   claimAndSetReverseRecordName,
   setOwner,
   setResolver,
   setAddress,
   setContent,
   setContenthash,
+  setText,
   registerTestdomain,
   createSubdomain,
   expiryTimes,
@@ -280,7 +282,6 @@ const resolvers = {
       }
     },
     getSubDomains: async (_, { name }, { cache }) => {
-      console.log(name)
       const data = cache.readQuery({ query: GET_ALL_NODES })
       const rawSubDomains = await getSubdomains(name)
       const subDomains = rawSubDomains.map(s => ({
@@ -342,6 +343,14 @@ const resolvers = {
           match: false
         }
       }
+    },
+    getText: async (_, { name, key }) => {
+      const text = await getText(name, key)
+      if (text === '') {
+        return null
+      }
+
+      return text
     }
   },
   Mutation: {
@@ -405,6 +414,14 @@ const resolvers = {
         console.log(e)
       }
     },
+    setText: async (_, { name, key, recordValue }, { cache }) => {
+      try {
+        const tx = await setText(name, key, recordValue)
+        return sendHelper(tx)
+      } catch (e) {
+        console.log(e)
+      }
+    },
     createSubdomain: async (_, { name }, { cache }) => {
       try {
         const tx = await createSubdomain(name)

diff --git a/src/components/SingleName/AddRecord.js b/src/components/SingleName/AddRecord.js
@@ -3,21 +3,20 @@ import styled from '@emotion/styled'
 import { Mutation } from 'react-apollo'
 
 import { validateRecord } from '../../utils/records'
-import DetailsItemInput from './DetailsItemInput'
-
 import { useEditable } from '../hooks'
-
-import SaveCancel from './SaveCancel'
-import DefaultSelect from '../Forms/Select'
-import PendingTx from '../PendingTx'
-
-import { getOldContentWarning } from './warnings'
 import {
   SET_CONTENT,
   SET_CONTENTHASH,
-  SET_ADDRESS
+  SET_ADDRESS,
+  SET_TEXT
 } from '../../graphql/mutations'
+import { getOldContentWarning } from './warnings'
+import TEXT_RECORD_KEYS from './TextRecord/constants'
 
+import DetailsItemInput from './DetailsItemInput'
+import SaveCancel from './SaveCancel'
+import DefaultSelect from '../Forms/Select'
+import PendingTx from '../PendingTx'
 import DefaultAddressInput from '@ensdomains/react-ens-address'
 
 const AddressInput = styled(DefaultAddressInput)`
@@ -75,13 +74,47 @@ function chooseMutation(recordType, contentType) {
       }
     case 'address':
       return SET_ADDRESS
+    case 'text':
+      return SET_TEXT
     default:
       throw new Error('Not a recognised record type')
   }
 }
 
-function Editable({ domain, emptyRecords, refetch }) {
+function TextRecordInput({
+  selectedRecord,
+  updateValue,
+  newValue,
+  selectedKey,
+  setSelectedKey,
+  isValid,
+  isInvalid
+}) {
+  return (
+    <>
+      <Select
+        selectedRecord={selectedKey}
+        handleChange={setSelectedKey}
+        placeholder="Key"
+        options={TEXT_RECORD_KEYS.map(key => ({
+          label: key,
+          value: key
+        }))}
+      />
+      <DetailsItemInput
+        newValue={newValue}
+        dataType={selectedRecord ? selectedRecord.value : null}
+        updateValue={updateValue}
+        isValid={isValid}
+        isInvalid={isInvalid}
+      />
+    </>
+  )
+}
+
+function Editable({ domain, emptyRecords, refetch, setRecordAdded }) {
   const [selectedRecord, selectRecord] = useState(null)
+  const [selectedKey, setSelectedKey] = useState(null)
   const { state, actions } = useEditable()
 
   const handleChange = selectedRecord => {
@@ -117,6 +150,9 @@ function Editable({ domain, emptyRecords, refetch }) {
                 onConfirmed={() => {
                   setConfirmed()
                   refetch()
+                  if (selectedKey) {
+                    setRecordAdded(selectedKey.value)
+                  }
                 }}
               />
             ) : (
@@ -147,6 +183,16 @@ function Editable({ domain, emptyRecords, refetch }) {
                   }
                 }}
               />
+            ) : selectedRecord && selectedRecord.value === 'text' ? (
+              <TextRecordInput
+                selectedRecord={selectedRecord}
+                newValue={newValue}
+                updateValue={updateValue}
+                selectedKey={selectedKey}
+                setSelectedKey={setSelectedKey}
+                isValid={isValid}
+                isInvalid={isInvalid}
+              />
             ) : (
               <DetailsItemInput
                 newValue={newValue}
@@ -163,7 +209,8 @@ function Editable({ domain, emptyRecords, refetch }) {
               mutation={chooseMutation(selectedRecord, domain.contentType)}
               variables={{
                 name: domain.name,
-                recordValue: newValue
+                recordValue: newValue,
+                key: selectedKey && selectedKey.value
               }}
               onCompleted={data => {
                 startPending(Object.values(data)[0])

diff --git a/src/components/SingleName/NameDetails.js b/src/components/SingleName/NameDetails.js
@@ -8,6 +8,7 @@ import DefaultButton from '../Forms/Button'
 import SubDomains from './SubDomains'
 import { DetailsItem, DetailsKey, DetailsValue } from './DetailsItem'
 import RecordsItem from './RecordsItem'
+import TextRecord from './TextRecord'
 import DetailsItemEditable from './DetailsItemEditable'
 import AddRecord from './AddRecord'
 import SetupName from '../SetupName/SetupName'
@@ -227,6 +228,8 @@ function getShouldShowRecords(isOwner, hasResolver, hasRecords) {
 }
 
 function NameDetails({ domain, isOwner, isOwnerOfParent, refetch, account }) {
+  const [loading, setLoading] = useState(undefined)
+  const [recordAdded, setRecordAdded] = useState(0)
   const isDeedOwner = domain.deedOwner === account
   const isRegistrant = domain.registrant === account
   const isPermanentRegistrarDeployed = domain.available !== null
@@ -239,6 +242,10 @@ function NameDetails({ domain, isOwner, isOwnerOfParent, refetch, account }) {
     {
       label: 'Content',
       value: 'content'
+    },
+    {
+      label: 'Text',
+      value: 'text'
     }
   ]
 
@@ -250,16 +257,14 @@ function NameDetails({ domain, isOwner, isOwnerOfParent, refetch, account }) {
     return isEmpty(domain[record.value]) ? true : false
   })
 
-  console.log(domain)
-
   let contentMutation
   if (domain.contentType === 'oldcontent') {
     contentMutation = SET_CONTENT
   } else {
     contentMutation = SET_CONTENTHASH
   }
   const showExplainer = !parseInt(domain.resolver)
-  const [loading, setLoading] = useState(undefined)
+
   const canSubmit =
     domain.isDNSRegistrar &&
     dnssecmode.state === 'SUBMIT_PROOF' && // This is for not allowing the case user does not have record rather than having empty address record.
@@ -631,6 +636,7 @@ function NameDetails({ domain, isOwner, isOwnerOfParent, refetch, account }) {
                   isOwner={isOwner}
                   domain={domain}
                   refetch={refetch}
+                  setRecordAdded={setRecordAdded}
                 />
                 {hasResolver && hasAnyRecord && (
                   <>
@@ -657,6 +663,11 @@ function NameDetails({ domain, isOwner, isOwnerOfParent, refetch, account }) {
                         refetch={refetch}
                       />
                     )}
+                    <TextRecord
+                      domain={domain}
+                      isOwner={isOwner}
+                      recordAdded={recordAdded}
+                    />
                   </>
                 )}
               </Records>

diff --git a/src/components/SingleName/RecordsItem.js b/src/components/SingleName/RecordsItem.js
@@ -29,23 +29,28 @@ const AddressInput = styled(DefaultAddressInput)`
   margin-bottom: 10px;
 `
 
-const RecordsItem = styled(DetailsItem)`
-  border-top: 1px dashed #d3d3d3;
+export const RecordsItem = styled(DetailsItem)`
+  ${p => !p.hasRecord && 'display: none;'}
+  ${p => (p.noBorder ? '' : 'border-top: 1px dashed #d3d3d3;')}
+  display: block;
   padding: 20px;
   flex-direction: column;
 
   background: ${({ editing }) => (editing ? '#F0F6FA' : 'white')};
+  ${mq.medium`
+    display: flex;
+  `}
 `
 
-const RecordsContent = styled('div')`
+export const RecordsContent = styled('div')`
   display: flex;
   justify-content: flex-start;
   align-items: center;
   position: relative;
   ${({ editing }) => editing && 'margin-bottom: 30px'};
 `
 
-const RecordsKey = styled(DetailsKey)`
+export const RecordsKey = styled(DetailsKey)`
   font-size: 12px;
   margin-bottom: 0;
   max-width: 100%;
@@ -56,7 +61,21 @@ const RecordsKey = styled(DetailsKey)`
   `}
 `
 
-const RecordsValue = styled(DetailsValue)`
+export const RecordsSubKey = styled('div')`
+  font-family: Overpass Mono;
+  font-weight: 500;
+  font-size: 14px;
+  color: #adbbcd;
+  letter-spacing: 0;
+
+  ${mq.small`
+    font-size: 16px;
+    max-width: 220px;
+    min-width: 180px;
+  `}
+`
+
+export const RecordsValue = styled(DetailsValue)`
   font-size: 14px;
 `
 
@@ -143,7 +162,7 @@ const Editable = ({
         }}
       >
         {mutation => (
-          <RecordsItem editing={editing}>
+          <RecordsItem editing={editing} hasRecord={true}>
             <RecordsContent editing={editing}>
               <RecordsKey>{keyName}</RecordsKey>
               <RecordsValue editableSmall>