fix: add better IPFS support (#879)

## High Level Overview of Change

This PR uses `DomainLink` in the account header and adds better IPFS
support.

### Context of Change

I tried clicking on an IPFS link and I had to rewrite the URL in order
to actually see the data.

### Type of Change

- [x] Bug fix (non-breaking change which fixes an issue)
- [x] Refactor (non-breaking change that only restructures code)

### TypeScript/Hooks Update

N/A

## Before / After

<!--
If just refactoring / back-end changes, this can be just an in-English
description of the change at a technical level.
If a UI change, screenshots should be included.
-->

## Test Plan

CI passes.

src/containers/Accounts/AccountHeader/index.tsx

@@ -12,6 +12,7 @@ import SocketContext from '../../shared/SocketContext'
 import InfoIcon from '../../shared/images/info.svg'
 import { useLanguage } from '../../shared/hooks'
 import Currency from '../../shared/components/Currency'
+import DomainLink from '../../shared/components/DomainLink'
 
 const CURRENCY_OPTIONS = {
   style: 'currency',
@@ -267,7 +268,7 @@ const AccountHeader = (props: AccountHeaderProps) => {
             {info.domain && (
               <li>
                 <span className="label"> {t('domain')}: </span>
-                <a href={`http://${info.domain}`}>{info.domain}</a>
+                <DomainLink domain={info.domain} />
               </li>
             )}
             {info.emailHash && (

src/containers/shared/components/DomainLink.tsx

@@ -20,7 +20,11 @@ const DomainLink = (props: Props) => {
   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}`
+  let href = domainHasProtocol ? decodedDomain : `https://${decodedDomain}`
+
+  if (href.startsWith('ipfs://')) {
+    href = href.replace('ipfs://', 'https://ipfs.io/ipfs/')
+  }
 
   return (
     <a

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

@@ -9,6 +9,7 @@ describe('DomainLink', () => {
     expect(wrapper.find('a').props().href).toEqual('https://bithomp.com')
     wrapper.unmount()
   })
+
   it('handles domain link with decoded domain parameter', () => {
     const wrapper = mount(
       <DomainLink decode domain="736F6C6F67656E69632E636F6D" />,
@@ -18,13 +19,15 @@ describe('DomainLink', () => {
     expect(wrapper.find('a').props().href).toEqual('https://sologenic.com')
     wrapper.unmount()
   })
+
   it('handles domain link with domain parameter and classname', () => {
     const wrapper = mount(<DomainLink className="test" domain="bithomp.com" />)
     expect(wrapper.find('a').props().className).toEqual('domain test')
     expect(wrapper.find('a').text()).toEqual('bithomp.com')
     expect(wrapper.find('a').props().href).toEqual('https://bithomp.com')
     wrapper.unmount()
   })
+
   it('handles domain link with decoded domain parameter and classname', () => {
     const wrapper = mount(
       <DomainLink
@@ -38,6 +41,7 @@ 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'
@@ -47,4 +51,14 @@ describe('DomainLink', () => {
     expect(wrapper.find('a').props().href).toEqual(url)
     wrapper.unmount()
   })
+
+  it('handles IPFS domain link', () => {
+    const wrapper = mount(<DomainLink domain="ipfs://random/metadata.json" />)
+    expect(wrapper.find('a').props().className).toEqual('domain')
+    expect(wrapper.find('a').text()).toEqual('ipfs://random/metadata.json')
+    expect(wrapper.find('a').props().href).toEqual(
+      'https://ipfs.io/ipfs/random/metadata.json',
+    )
+    wrapper.unmount()
+  })
 })