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 } }