Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show reverse record #1035

Merged
merged 8 commits into from
Dec 22, 2020
Merged

Show reverse record #1035

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c5bd4a9
fix-faq-background
makoto Dec 8, 2020
a48c98b
Merge branch 'dev' of https://github.com/ensdomains/ens-app into dev
makoto Dec 10, 2020
1f08c3a
Merge branch 'dev' of https://github.com/ensdomains/ens-app into dev
makoto Dec 11, 2020
9f3d994
Merge branch 'dev' of https://github.com/ensdomains/ens-app into dev
makoto Dec 14, 2020
87442c8
Merge branch 'dev' of https://github.com/ensdomains/ens-app into dev
makoto Dec 21, 2020
6a90633
Display reverse record for non owner
makoto Dec 21, 2020
0f8063f
Remove check button
makoto Dec 21, 2020
ce42f7c
Click link
makoto Dec 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions cypress/integration/reverse.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ describe('Reverse record', () => {
.contains('Search')
.click()

cy.queryByTestId('editable-reverse-record-set', { exact: false }).should(
'exist'
)
cy.queryByText('Reverse record: Set to abittooawesome.eth', {
exact: false,
timeout: 10000
Expand Down Expand Up @@ -44,6 +47,15 @@ describe('Reverse record', () => {
timeout: 10000
}).should('exist')
})
it('Display reverse record not set for non owner', () => {
cy.visit(`${ROOT}/name/otherowner.eth`)
cy.getByTestId('details-value-registrant').within(container => {
cy.get('a').click({ force: true })
})
cy.queryByTestId('readonly-reverse-record-not-set', {
exact: false
}).should('exist')
})

//TODO: Add test for setting reverse record
})
171 changes: 103 additions & 68 deletions src/components/AddReverseRecord.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,12 @@ const Message = styled('div')`
}
`

const ReadOnlyMessage = styled(Message)`
&:hover {
cursor: default;
}
`

const MessageContent = styled('div')`
display: flex;
align-items: center;
Expand Down Expand Up @@ -127,7 +133,7 @@ const Input = styled(DefaultInput)`
margin-bottom: 20px;
`

function AddReverseRecord({ account, name }) {
function AddReverseRecord({ account, name, currentAddress }) {
const { t } = useTranslation()
const { state, actions } = useEditable()
const [newName, setNewName] = useState('')
Expand All @@ -141,12 +147,16 @@ function AddReverseRecord({ account, name }) {
GET_REVERSE_RECORD,
{
variables: {
address: account
address: currentAddress
}
}
)

const delayedQuery = useCallback(_.debounce(q => sendQuery(q), 500), [])
const isAccountMatched =
account &&
currentAddress &&
account.toLowerCase() === currentAddress.toLowerCase()

async function sendQuery(newName) {
const ens = getENS()
Expand All @@ -163,6 +173,83 @@ function AddReverseRecord({ account, name }) {
}
}

function ReverseRecordEditor() {
return (
<>
<Message onClick={editing ? stopEditing : startEditing}>
{getReverseRecord && getReverseRecord.name !== null ? (
<MessageContent data-testid="editable-reverse-record-set">
<Check />
{t('singleName.record.messages.setTo') + getReverseRecord.name}
</MessageContent>
) : (
<div data-testid="editable-reverse-record-not-set">
t('singleName.record.messages.notSet')
</div>
)}
{pending && !confirmed && txHash ? (
<PendingTx
txHash={txHash}
onConfirmed={() => {
setConfirmed()
refetch()
}}
/>
) : (
<RotatingSmallCaret rotated={editing} testid="open-reverse" />
)}
</Message>
{editing && (
<SetReverseContainer>
<Explanation>
<Trans i18nKey="singleName.record.messages.explanation">
The Reverse Resolution translates an address into a name. It
allows Dapps to show in their interfaces '{{ name }}' rather
than the long address '{{ account }}'. If you would like to set
up your reverse for a different account, please switch accounts
in your dapp browser.
</Trans>
</Explanation>
<Account>{account}</Account>
<Input
testId="reverse-input"
valid={isValid}
invalid={isInvalid}
value={newName}
onChange={e => {
setNewName(e.target.value)
delayedQuery(e.target.value)
}}
/>

<Mutation
mutation={SET_NAME}
variables={{
name: newName
}}
onCompleted={data => {
startPending(Object.values(data)[0])
}}
>
{mutation => (
<SaveCancel
mutation={mutation}
stopEditing={stopEditing}
isValid={isValid}
/>
)}
</Mutation>
{isInvalid && (
<ErrorMessage>
Forward resolution must match your account
</ErrorMessage>
)}
</SetReverseContainer>
)}
</>
)
}

const isInvalid = !isValid && newName.length > 0

return (
Expand All @@ -171,73 +258,21 @@ function AddReverseRecord({ account, name }) {
<Loading>Loading reverse record...</Loading>
) : (
<>
<Message onClick={editing ? stopEditing : startEditing}>
{getReverseRecord && getReverseRecord.name !== null ? (
<MessageContent>
<Check />
{t('singleName.record.messages.setTo') + getReverseRecord.name}
</MessageContent>
) : (
t('singleName.record.messages.notSet')
)}
{pending && !confirmed && txHash ? (
<PendingTx
txHash={txHash}
onConfirmed={() => {
setConfirmed()
refetch()
}}
/>
) : (
<RotatingSmallCaret rotated={editing} testid="open-reverse" />
)}
</Message>
{editing && (
<SetReverseContainer>
<Explanation>
<Trans i18nKey="singleName.record.messages.explanation">
The Reverse Resolution translates an address into a name. It
allows Dapps to show in their interfaces '{{ name }}' rather
than the long address '{{ account }}'. If you would like to
set up your reverse for a different account, please switch
accounts in your dapp browser.
</Trans>
</Explanation>
<Account>{account}</Account>
<Input
testId="reverse-input"
valid={isValid}
invalid={isInvalid}
value={newName}
onChange={e => {
setNewName(e.target.value)
delayedQuery(e.target.value)
}}
/>

<Mutation
mutation={SET_NAME}
variables={{
name: newName
}}
onCompleted={data => {
startPending(Object.values(data)[0])
}}
>
{mutation => (
<SaveCancel
mutation={mutation}
stopEditing={stopEditing}
isValid={isValid}
/>
)}
</Mutation>
{isInvalid && (
<ErrorMessage>
Forward resolution must match your account
</ErrorMessage>
{isAccountMatched ? (
<ReverseRecordEditor />
) : (
<ReadOnlyMessage>
{getReverseRecord && getReverseRecord.name !== null ? (
<MessageContent data-testid="readonly-reverse-record-set">
{t('singleName.record.messages.setTo') +
getReverseRecord.name}
</MessageContent>
) : (
<div data-testid="readonly-reverse-record-not-set">
{t('singleName.record.messages.notSet')}
</div>
)}
</SetReverseContainer>
</ReadOnlyMessage>
)}
</>
)}
Expand Down
8 changes: 1 addition & 7 deletions src/components/Address/Address.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,10 +239,6 @@ export default function Address({
calculateIsExpiredSoon(domain.expiryDate)
)

function isAccountMatched(account, address) {
return account && address && account.toLowerCase() === address.toLowerCase()
}

return (
<>
{showOriginBanner && showOriginBannerFlag && (
Expand Down Expand Up @@ -276,9 +272,7 @@ export default function Address({
</EtherScanLink>
)}
</TopBar>
{isAccountMatched(account, address) && (
<AddReverseRecord account={account} />
)}
<AddReverseRecord account={account} currentAddress={address} />
<Controls>
<Filtering
activeFilter={domainType}
Expand Down