diff --git a/src/components/SearchErrors/SearchErrors.js b/src/components/SearchErrors/SearchErrors.js
index f1355139c..3146f80e8 100644
--- a/src/components/SearchErrors/SearchErrors.js
+++ b/src/components/SearchErrors/SearchErrors.js
@@ -23,7 +23,7 @@ const errorData = {
.split('.')
.splice(-1, 1)} is not currently a support tld.`,
long: searchTerm =>
- `We currently only support .eth and .xyz domains. Support for future domains are planned in the future`
+ `We currently only support .eth, .xyz and .art domains. Support for future domains are planned in the future`
},
tooShort: {
short: searchTerm => (
diff --git a/src/components/SingleName/ResolverAndRecords/ArtRecords.js b/src/components/SingleName/ResolverAndRecords/ArtRecords.js
new file mode 100644
index 000000000..0cb57e3cc
--- /dev/null
+++ b/src/components/SingleName/ResolverAndRecords/ArtRecords.js
@@ -0,0 +1,131 @@
+import React from 'react'
+import { Query } from 'react-apollo'
+import styled from '@emotion/styled'
+
+import Loader from '../../Loader'
+
+import {
+ RecordsContent,
+ RecordsItem,
+ RecordsKey,
+ RecordsValue
+} from './RecordsItem'
+
+const Records = styled('div')`
+ border-radius: 6px;
+ border: 1px solid #ededed;
+ box-shadow: inset 0 0 10px 0 rgba(235, 235, 235, 0.5);
+ padding-bottom: 10px;
+ display: block;
+ margin-bottom: 20px;
+`
+
+const RecordsHeader = styled('div')`
+ background: #f0f6fa;
+`
+
+const RecordsTitle = styled('h3')`
+ font-family: Overpass;
+ font-weight: 700;
+ font-size: 12px;
+ color: #adbbcd;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+ margin: 0;
+ padding: 10px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`
+
+function isArt(name) {
+ return !!name.match(/\.art$/)
+}
+
+function getArtRecordLabel(key) {
+ const recordLabels = {
+ title: 'Title',
+ maker: 'Maker',
+ type: 'Type of Object',
+ subject: 'Subject',
+ period: 'Period',
+ dimensions: 'Measurements',
+ materials: 'Materials & Techniques',
+ markings: 'Inscriptions & Markings',
+ features: 'Features',
+ reference: 'Reference'
+ }
+
+ return recordLabels[key]
+}
+
+function isEmpty(records) {
+ if (!records.length) {
+ return true
+ }
+
+ return records.filter(record => record.value).length === 0
+}
+
+function decodeRecords(values) {
+ let parsed = {}
+ try {
+ parsed = JSON.parse(values)
+ } catch (e) {}
+
+ return Object.keys(parsed).reduce(
+ (decoded, key) =>
+ decoded.concat({
+ label: getArtRecordLabel(key),
+ value: parsed[key]
+ }),
+ []
+ )
+}
+
+function ArtRecordItem({ value, label }) {
+ if (!value) return null
+
+ return (
+
+
+ {label}
+
+ {value}
+
+
+
+ )
+}
+
+export default function ArtRecords({ domain, query }) {
+ if (!isArt(domain.name)) return null
+
+ return (
+
+ {({ loading, data }) => {
+ if (loading) return
+
+ const { getText: encodedArtRecords } = data
+
+ if (!encodedArtRecords) return null
+
+ const records = decodeRecords(encodedArtRecords)
+
+ if (isEmpty(records)) return null
+
+ return (
+
+
+ Art records
+
+
+ {records.map((r, i) => (
+
+ ))}
+
+ )
+ }}
+
+ )
+}
diff --git a/src/components/SingleName/ResolverAndRecords/ResolverAndRecords.js b/src/components/SingleName/ResolverAndRecords/ResolverAndRecords.js
index ceb4629e1..b9880309b 100644
--- a/src/components/SingleName/ResolverAndRecords/ResolverAndRecords.js
+++ b/src/components/SingleName/ResolverAndRecords/ResolverAndRecords.js
@@ -22,6 +22,7 @@ import RecordsItem from './RecordsItem'
import TextRecord from './TextRecord'
import Address from './Address'
import ResolverMigration from './ResolverMigration'
+import ArtRecords from './ArtRecords'
const RecordsWrapper = styled('div')`
border-radius: 6px;
@@ -304,6 +305,8 @@ export default function ResolverAndRecords({
duringMigration={duringMigration}
/>
)}
+
+ {hasResolver && }
>
)
}
diff --git a/src/constants/tlds.json b/src/constants/tlds.json
index 8507b8812..91326271d 100644
--- a/src/constants/tlds.json
+++ b/src/constants/tlds.json
@@ -13,5 +13,8 @@
},
"luxe": {
"supported": true
+ },
+ "art": {
+ "supported": true
}
}