diff --git a/public/locales/en/app.json b/public/locales/en/app.json index 25dec68db..2bc3d0351 100644 --- a/public/locales/en/app.json +++ b/public/locales/en/app.json @@ -30,7 +30,8 @@ "unselectAll": "Unselect all", "generate": "Generate", "publish": "Publish", - "downloadCar": "Download as CAR" + "downloadCar": "Download as CAR", + "done": "Done" }, "cliModal": { "description": "Paste the following into your terminal to do this task in IPFS via the command line. Remember that you'll need to replace placeholders with your specific parameters." diff --git a/public/locales/en/files.json b/public/locales/en/files.json index e901aab56..3f7e4c19a 100644 --- a/public/locales/en/files.json +++ b/public/locales/en/files.json @@ -122,6 +122,7 @@ "publishUnderKey": "Select key for publishing:", "help": "Go to Settings to learn about IPNS and create more keys.", "publishedUnderKey": "Successfully published under the key:", + "linkCopied": "Link copied!", "sharingPrompt": "Copy the link below and share it with others. The IPNS address will resolve as long as your node remains available on the network once a day to refresh the IPNS record.", "pleaseWait": "Please wait while the initial 20 copies of the updated IPNS record are stored with the help of DHT peers…" } diff --git a/src/components/progress-bar/ProgressBar.js b/src/components/progress-bar/ProgressBar.js index 73de0302e..4af66158c 100644 --- a/src/components/progress-bar/ProgressBar.js +++ b/src/components/progress-bar/ProgressBar.js @@ -18,7 +18,8 @@ ProgressBar.propTypes = { width: PropTypes.string, height: PropTypes.string, br: PropTypes.string, - progress: PropTypes.number.isRequired + time: PropTypes.number, + progress: PropTypes.number } ProgressBar.defaultProps = { diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js index 5f13f1b90..a6d68c3e3 100644 --- a/src/files/modals/publish-modal/PublishModal.js +++ b/src/files/modals/publish-modal/PublishModal.js @@ -8,6 +8,8 @@ import Icon from '../../../icons/StrokeSpeaker' import { connect } from 'redux-bundler-react' import Radio from '../../../components/radio/Radio' import ProgressBar from '../../../components/progress-bar/ProgressBar' +import GlyphCopy from '../../../icons/GlyphCopy' +import GlyphTick from '../../../icons/GlyphTick' import './PublishModal.css' const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGateway, className, doFetchIpnsKeys, doUpdateExpectedPublishTime, expectedPublishTime, ...props }) => { @@ -16,6 +18,7 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate const [selectedKey, setSelectedKey] = useState({ name: '', id: '' }) const [link, setLink] = useState('') const [start, setStart] = useState(null) + const [copied, setCopied] = useState(false) useEffect(() => { setDisabled(selectedKey.name === '' || start !== null) @@ -25,6 +28,13 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate doFetchIpnsKeys() }, [doFetchIpnsKeys]) + useEffect(() => { + if (copied) { + const timeoutId = setTimeout(() => setCopied(false), 2000) + return () => clearTimeout(timeoutId) + } + }, [copied]) + const changeKey = (key) => { setLink('') setError(null) @@ -51,17 +61,34 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate if (link) { return (
-
{t('publishModal.publishedUnderKey')}
- {selectedKey.name}
- {selectedKey.id} +
{t('publishModal.publishedUnderKey')} +
+ {selectedKey.name} +
+
+ {selectedKey.id} +

{t('publishModal.sharingPrompt')}

-
+
+ +
+ { copied + ? <> + {t('publishModal.linkCopied')} + + + : setCopied(true)}> + + + } +
) @@ -96,18 +123,20 @@ const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGate return ( -
{t('publishModal.cidToPublish')}
{file.cid.toString()}
+
+ {t('publishModal.cidToPublish')} +
{file.cid.toString()}
+
{modalBody()}
- - { link - ? - - - : + ? + : <> + + + } diff --git a/test/e2e/ipns.test.js b/test/e2e/ipns.test.js index be44938f5..309c717d8 100644 --- a/test/e2e/ipns.test.js +++ b/test/e2e/ipns.test.js @@ -113,7 +113,7 @@ test.describe('IPNS publishing', () => { await ipfs.swarm.connect(peeraddr) await page.click(publishButton) await page.waitForSelector('text=Successfully published') - await page.click('button:has-text("Copy")') + await page.click('button:has-text("Done")') // confirm IPNS record in local store points at the CID const { id } = (await ipfs.key.list()).filter(k => k.name === keyName)[0] for await (const name of ipfs.name.resolve(`/ipns/${id}`, { recursive: true })) {