fix: protocols in domain fields (#856)

Some accounts such as the issuers of NFTs put fully formatted urls in
the domain field. Since _"https://"_ is prepended to the value of that
field, an invalid URI is created. The change adds _"https://"_ only if a
protocol is not detected.

Closes #714

Author: sohammk08

src/containers/shared/components/DomainLink.tsx

@@ -7,14 +7,27 @@ export interface Props {
   domain: string
 }
 
+// Matches a protocol (e.g. 'http://' or 'https://') at the start of a string.
+const PROTOCOL_REGEX = /^([a-z][a-z0-9+\-.]*):\/\//
+
 const DomainLink = (props: Props) => {
   const { className, decode = false, domain } = props
+
+  // If decode is true, decode the domain
+  const decodedDomain = decode ? decodeHex(domain) : domain
+
+  // Use the test method to check for the protocol
+  const domainHasProtocol = PROTOCOL_REGEX.test(decodedDomain)
+
+  // If decoded domain does not have a protocol, add one ; otherwise, don't
+  const href = domainHasProtocol ? decodedDomain : `https://${decodedDomain}`
+
   return (
     <a
-      className={classnames(`domain`, className)}
+      className={classnames('domain', className)}
       rel="noopener noreferrer"
       target="_blank"
-      href={`https://${decode ? decodeHex(domain) : domain}`}
+      href={href}
     >
       {decode ? decodeHex(domain) : domain}
     </a>

src/containers/shared/components/test/DomainLink.test.tsx

@@ -38,4 +38,13 @@ describe('DomainLink', () => {
     expect(wrapper.find('a').props().href).toEqual('https://sologenic.com')
     wrapper.unmount()
   })
+  it('handles domain link with domain provided in HEX-encoded format', () => {
+    const url = 'https://example.com'
+    const urlInHex = '68747470733A2F2F6578616D706C652E636F6D'
+    const wrapper = mount(<DomainLink decode domain={urlInHex} />)
+    expect(wrapper.find('a').props().className).toEqual('domain')
+    expect(wrapper.find('a').text()).toEqual(url)
+    expect(wrapper.find('a').props().href).toEqual(url)
+    wrapper.unmount()
+  })
 })