feat: private and public gateways (#300)

License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>

Author: hacdias

public/locales/en/explore.json

@@ -30,7 +30,8 @@
     "hashDigest": "Hash digest"
   },
   "ObjectInfo": {
-    "gatewayLink": "View on IPFS Gateway"
+    "publicGateway": "View on Public Gateway",
+    "privateGateway": "View on Local Gateway"
   },
   "base": "base",
   "version": "version",

src/components/ExplorePage.js

@@ -13,7 +13,7 @@ import { explorerTour } from '../lib/tours'
 
 export class ExplorePage extends React.Component {
   render () {
-    let { t, explore, exploreIsLoading, explorePathFromHash, doExploreLink, runTour = false, joyrideCallback, gatewayUrl = 'https://ipfs.io' } = this.props
+    let { t, explore, exploreIsLoading, explorePathFromHash, doExploreLink, runTour = false, joyrideCallback, gatewayUrl, publicGatewayUrl = 'https://dweb.link' } = this.props
 
     if (!explorePathFromHash) {
       // No IPLD path to explore so show the intro page
@@ -70,6 +70,7 @@ export class ExplorePage extends React.Component {
                   format={targetNode.format}
                   onLinkClick={doExploreLink}
                   gatewayUrl={gatewayUrl}
+                  publicGatewayUrl={publicGatewayUrl}
                 />
               )
               : null}

src/components/object-info/ObjectInfo.js

@@ -62,7 +62,7 @@ const DagNodeIcon = ({ type, ...props }) => (
   </svg>
 )
 
-const ObjectInfo = ({ t, tReady, className, type, cid, localPath, size, data, links, format, onLinkClick, gatewayUrl, ...props }) => {
+const ObjectInfo = ({ t, tReady, className, type, cid, localPath, size, data, links, format, onLinkClick, gatewayUrl, publicGatewayUrl, ...props }) => {
   return (
     <section className={`pa4 sans-serif ${className}`} {...props}>
       <h2 className='ma0 lh-title f4 fw4 montserrat pb2' title={type}>
@@ -74,9 +74,16 @@ const ObjectInfo = ({ t, tReady, className, type, cid, localPath, size, data, li
           <a className='dn di-ns no-underline charcoal ml2' href='https://docs.ipfs.io/concepts/glossary/#unixfs' rel='external' target='_external'>UnixFS</a>
         ) : null}
         {format === 'unixfs' && data.type && ['directory', 'file'].some(x => x === data.type) ? (
-          <a className='no-underline avenir ml2 pa2 fw5 f6 blue' href={`${gatewayUrl}/ipfs/${cid}`} rel='external nofollow' target='_external'>
-            {t('ObjectInfo.gatewayLink')}
-          </a>
+          <>
+            {gatewayUrl && gatewayUrl !== publicGatewayUrl && (
+              <a className='no-underline avenir ml2 pa2 fw5 f6 blue' href={`${gatewayUrl}/ipfs/${cid}`} rel='external nofollow' target='_external'>
+                {t('ObjectInfo.privateGateway')}
+              </a>)}
+            {publicGatewayUrl && (
+              <a className='no-underline avenir ml2 pa2 fw5 f6 blue' href={`${publicGatewayUrl}/ipfs/${cid}`} rel='external nofollow' target='_external'>
+                {t('ObjectInfo.publicGateway')}
+              </a>)}
+          </>
         ) : null}
       </h2>
       <div className='f6'>

src/components/object-info/ObjectInfo.stories.js

@@ -24,6 +24,7 @@ storiesOf('IPLD Node Info', module)
       data={dagNodeA.data}
       type='dag-pb'
       gatewayUrl='https://ipfs.io'
+      publicGatewayUrl='https://dweb.link'
       onLinkClick={action('link clicked')}
     />
   ))
@@ -36,6 +37,7 @@ storiesOf('IPLD Node Info', module)
       data={dagNodeB.data}
       type='dag-pb'
       gatewayUrl='https://ipfs.io'
+      publicGatewayUrl='https://dweb.link'
       onLinkClick={action('link clicked')}
     />
   ))
@@ -48,6 +50,7 @@ storiesOf('IPLD Node Info', module)
       data={dagNodeC.data}
       type='dag-pb'
       gatewayUrl='https://ipfs.io'
+      publicGatewayUrl='https://dweb.link'
       onLinkClick={action('link clicked')}
     />
   ))