Add pinning compliance links

public/locales/en/files.json

@@ -45,6 +45,7 @@
   },
   "pinningModal": {
     "title": "Select where you would like to pin these items.",
+    "complianceLabel": "🔍 Check pinning services' compliance",
     "footer": "Need to add or configure a pinning service? Go to <1>Settings</1>.",
     "localNode": "Local node",
     "totalSize": "Total size: {size}"

public/locales/en/settings.json

@@ -41,7 +41,8 @@
     "apiEndpointPlaceholder": "URL for its API endpoint",
     "secretApiKey": "Secret access token",
     "secretApiKeyHowToLink": "How to generate a new token",
-    "autoUpload": "Auto upload"
+    "autoUpload": "Auto upload",
+    "complianceLabel": "🔍 {nickname} pinning compliance report"
   },
   "autoUploadModal": {
     "title": "Change upload policy for {name}",

src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js

@@ -46,7 +46,7 @@ const PinningManagerModal = ({ t, tReady, onLeave, className, remoteServiceTempl
       </ModalActions>
 
       <Overlay show={!!selectedService} onLeave={onModalClose} hidden>
-        <PinningServiceModal className='outline-0' service={selectedService} onSuccess={onSuccess} onLeave={onModalClose} nickname={selectedServiceInfo.nickname} apiEndpoint={selectedServiceInfo.apiEndpoint} visitServiceUrl={selectedServiceInfo.visitServiceUrl} t={t} />
+        <PinningServiceModal className='outline-0' service={selectedService} onSuccess={onSuccess} onLeave={onModalClose} nickname={selectedServiceInfo.nickname} apiEndpoint={selectedServiceInfo.apiEndpoint} visitServiceUrl={selectedServiceInfo.visitServiceUrl} complianceReportUrl={selectedServiceInfo.complianceReportUrl} t={t} />
       </Overlay>
     </Modal>
   )

src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js

@@ -10,7 +10,7 @@ import { Modal, ModalBody, ModalActions } from '../../modal/Modal'
 import Button from '../../button/Button'
 import './PinningManagerServiceModal.css'
 
-const PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service, tReady, doAddPinningService, nickname, apiEndpoint, visitServiceUrl, secretApiKey, ...props }) => {
+const PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service, tReady, doAddPinningService, nickname, apiEndpoint, visitServiceUrl, secretApiKey, complianceReportUrl, ...props }) => {
   const { register, errors, clearErrors, setError, handleSubmit } = useForm({
     defaultValues: {
       nickname,
@@ -40,6 +40,7 @@ const PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service,
       <form onSubmit={handleSubmit(onSubmit)} onChange={cleanErrors}>
         <ModalBody>
           <p>{ t('pinningServiceModal.title') }</p>
+          {complianceReportUrl && (<a className="mb1 tl f7 charcoal-muted no-underline underline-hover" target="_blank" rel="noreferrer" href={complianceReportUrl}>{t('pinningServiceModal.complianceLabel', { nickname })}</a>) }
 
           <div className='pa2 pinningManagerServiceModalContainer'>
             { service.icon && service.name && (

src/constants/pinning.js

@@ -1,15 +1,36 @@
+// @ts-check
 // This is a list of predefined templates for popular services from the IPFS
 // community.  We are open to reviewing PRs that add more entries here,
 // but only well-established and mission-aligned services will be accepted.
+
+const complianceReportsHomepage = 'https://ipfs-shipyard.github.io/pinning-service-compliance'
+
+/**
+ * @typedef {object} PinningServiceTemplate
+ * @property {string} name
+ * @property {string} icon
+ * @property {string} apiEndpoint
+ * @property {string} visitServiceUrl
+ * @property {string} [complianceReportUrl]
+ */
+
+/**
+ * @type {PinningServiceTemplate[]}
+ */
 const pinningServiceTemplates = [
   {
     name: 'Pinata',
     icon: 'https://dweb.link/ipfs/QmVYXV4urQNDzZpddW4zZ9PGvcAbF38BnKWSgch3aNeViW?filename=pinata.svg',
     apiEndpoint: 'https://api.pinata.cloud/psa',
     visitServiceUrl: 'https://pinata.cloud/documentation#PinningServicesAPI'
   }
-]
+].map((service) => {
+  const domain = new URL(service.apiEndpoint).hostname
+  service.complianceReportUrl = `${complianceReportsHomepage}/${domain}.html`
+  return service
+})
 
 export {
+  complianceReportsHomepage,
   pinningServiceTemplates
 }

src/files/modals/pinning-modal/PinningModal.js

@@ -6,6 +6,7 @@ import Button from '../../../components/button/Button'
 import Checkbox from '../../../components/checkbox/Checkbox'
 import GlyphPin from '../../../icons/GlyphPin'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal'
+import { complianceReportsHomepage } from '../../../constants/pinning'
 import { connect } from 'redux-bundler-react'
 import './PinningModal.css'
 
@@ -69,6 +70,7 @@ export const PinningModal = ({ t, tReady, onCancel, onPinningSet, file, pinningS
             Need to add or configure a pinning service? Go to <a href="#/settings" className="link blue">Settings.</a>
           </Trans>
         </p> */}
+        <a className="mb1 tl f7 charcoal-muted no-underline underline-hover" target="_blank" rel="noreferrer" href={complianceReportsHomepage}>{ t('pinningModal.complianceLabel') }</a>
         <p className="f6 charcoal">{t('pinningModal.totalSize', { size: humanSize(size) })}</p>
       </ModalBody>