add en locale messages for publish-to-storage

apps/remix-ide/src/app/tabs/locales/en/publishToStorage.json

@@ -0,0 +1,19 @@
+{
+  "publishToStorage.title1": "Publish To Storage",
+  "publishToStorage.title1.message": "This contract may be abstract, it may not implement an abstract parent's methods completely or it may not invoke an inherited contract's constructor correctly.",
+  "publishToStorage.title2": "Published {name}'s Metadata and Sources",
+  "publishToStorage.title2.message": "Metadata and sources of \"{name}\" were published successfully.",
+  "publishToStorage.title3": "Swarm Publish Failed",
+  "publishToStorage.title4": "IPFS Settings",
+  "publishToStorage.title4.message1": "You have not set your own custom IPFS settings.",
+  "publishToStorage.title4.message2": "We won’t be providing a public endpoint anymore for publishing your contracts to IPFS.",
+  "publishToStorage.title4.message3": "Instead of that, 4 options are now available:",
+  "publishToStorage.title4.message4": "DEFAULT OPTION: Use the public INFURA node. This will not guarantee your data will persist.",
+  "publishToStorage.title4.message5": "Use your own INFURA IPFS node. This requires a subscription. <a>Learn more</a>",
+  "publishToStorage.title4.message6": "Use any external IPFS which doesn’t require any authentification.",
+  "publishToStorage.title4.message7": "Use your own local ipfs node (which usually runs under http://localhost:5001)",
+  "publishToStorage.title4.message8": "You can update your IPFS settings in the SETTINGS tab.",
+  "publishToStorage.title4.message9": "Now the default option will be used.",
+  "publishToStorage.title5": "IPFS Publish Failed",
+  "publishToStorage.title5.message": "Failed to publish metadata file and sources to {storage}, please check the {storage} gateways is available."
+}

libs/remix-ui/publish-to-storage/src/lib/publish-to-storage.tsx

@@ -1,10 +1,12 @@
 import React, {useEffect, useState} from 'react' // eslint-disable-line
+import {FormattedMessage, useIntl} from 'react-intl'
 import {ModalDialog} from '@remix-ui/modal-dialog' // eslint-disable-line
 import {RemixUiPublishToStorageProps} from './types' // eslint-disable-line
 import {publishToIPFS} from './publishToIPFS'
 import {publishToSwarm} from './publishOnSwarm'
 
 export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
+  const intl = useIntl()
   const {api, storage, contract, resetStorage} = props
   const [modalShown, setModalShown] = useState(false)
   const [state, setState] = useState({
@@ -23,41 +25,47 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
     const storageService = async () => {
       if (contract.metadata === undefined || contract.metadata.length === 0) {
         modal(
-          'Publish To Storage',
-          "This contract may be abstract, it may not implement an abstract parent's methods completely or it may not invoke an inherited contract's constructor correctly."
+          intl.formatMessage({id: 'publishToStorage.title1'}),
+          intl.formatMessage({id: 'publishToStorage.message1'})
         )
       } else {
         if (storage === 'swarm') {
           try {
             const result = await publishToSwarm(contract, api)
 
-            modal(`Published ${contract.name}'s Metadata and Sources`, publishMessage(result.uploaded))
+            modal(intl.formatMessage({id: 'publishToStorage.title2'}, {name: contract.name}), publishMessage(result.uploaded))
           } catch (err) {
-            modal('Swarm Publish Failed', publishMessageFailed(storage, err.message))
+            modal(intl.formatMessage({id: 'publishToStorage.title3'}), publishMessageFailed(storage, err.message))
           }
         } else {
           if (!api.config.get('settings/ipfs-url') && !modalShown) {
             modal(
-              'IPFS Settings',
+              intl.formatMessage({id: 'publishToStorage.title4'}),
               <div>
-                You have not set your own custom IPFS settings.<br></br>
+                <FormattedMessage id="publishToStorage.title4.message1" /><br></br>
                 <br></br>
-                We won’t be providing a public endpoint anymore for publishing your contracts to IPFS.<br></br>Instead of that, 4 options are now available:<br></br>
+                <FormattedMessage id="publishToStorage.title4.message2" /><br></br><FormattedMessage id="publishToStorage.title4.message3" /><br></br>
                 <br></br>
                 <ul className="pl-3">
-                  <li key="ipfs-default">DEFAULT OPTION: Use the public INFURA node. This will not guarantee your data will persist.</li>
+                  <li key="ipfs-default"><FormattedMessage id="publishToStorage.title4.message4" /></li>
                   <li key="infura-options">
-                    Use your own INFURA IPFS node. This requires a subscription.{' '}
-                    <a href="https://infura.io/product/ipfs" target={'_blank'}>
-                      Learn more
-                    </a>
+                    <FormattedMessage 
+                      id="publishToStorage.title4.message5"
+                      values={{
+                        a: (chunks) => (
+                          <a href="https://infura.io/product/ipfs" target={'_blank'}>
+                            {chunks}
+                          </a>
+                        )
+                      }}
+                    />
                   </li>
-                  <li key="ipfs-external">Use any external IPFS which doesn’t require any authentification.</li>
-                  <li key="ipfs-local">Use your own local ipfs node (which usually runs under http://localhost:5001)</li>
+                  <li key="ipfs-external"><FormattedMessage id="publishToStorage.title4.message6" /></li>
+                  <li key="ipfs-local"><FormattedMessage id="publishToStorage.title4.message7" /></li>
                 </ul>
-                You can update your IPFS settings in the SETTINGS tab.
+                <FormattedMessage id="publishToStorage.title4.message8" />
                 <br></br>
-                Now the default option will be used.
+                <FormattedMessage id="publishToStorage.title4.message9" />
               </div>,
               async () => await ipfs(contract, api)
             )
@@ -76,9 +84,9 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
   const ipfs = async (contract, api) => {
     try {
       const result = await publishToIPFS(contract, api)
-      modal(`Published ${contract.name}'s Metadata and Sources`, publishMessage(result.uploaded))
+      modal(intl.formatMessage({id: 'publishToStorage.title2'}, {name: contract.name}), publishMessage(result.uploaded))
     } catch (err) {
-      modal('IPFS Publish Failed', publishMessageFailed(storage, err.message))
+      modal(intl.formatMessage({id: 'publishToStorage.title5'}), publishMessageFailed(storage, err.message))
     }
     setModalShown(true)
   }
@@ -86,7 +94,7 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
   const publishMessage = (uploaded) => (
     <span>
       {' '}
-      Metadata and sources of "{contract.name.toLowerCase()}" were published successfully. <br />
+      <FormattedMessage id="publishToStorage.title2.message" values={{name: contract.name.toLowerCase()}} /> <br />
       <pre>
         <div>
           {uploaded.map((value, index) => (
@@ -101,7 +109,7 @@ export const PublishToStorage = (props: RemixUiPublishToStorageProps) => {
 
   const publishMessageFailed = (storage, err) => (
     <span>
-      Failed to publish metadata file and sources to {storage}, please check the {storage} gateways is available. <br />
+      <FormattedMessage id="publishToStorage.title5.message" values={{storage}} /> <br />
       {err}
     </span>
   )