\n }\n return (\n \n {\n showIcon\n ? doOpenCliTutorModal(true)} className='dib fill-link pointer mh2' style={{ height: 44 }}/>\n :
\n }\n doOpenCliTutorModal(false)}>\n doOpenCliTutorModal(false)} t={t} command={command}\n downloadConfig={() => downloadConfig(config)}/>\n \n \n )\n }\n\n return null\n}\n\nCliTutorialModal.propTypes = {\n onLeave: PropTypes.func.isRequired,\n t: PropTypes.func.isRequired,\n command: PropTypes.string.isRequired\n}\n\nCliTutorialModal.defaultProps = {\n className: ''\n}\n\nexport default connect(\n 'doOpenCliTutorModal',\n 'selectIsCliTutorModalOpen',\n 'selectIsCliTutorModeEnabled',\n CliTutorMode\n)\n","import React from 'react'\n\nconst GlyphPin = props => (\n \n \n)\n\nexport default GlyphPin\n","/* global ace */\n// modified from https://github.com/thlorenz/brace/blob/master/theme/solarized_dark.js\nace.define('ace/theme/ipfs_dark', ['require', 'exports', 'module', 'ace/lib/dom'], function (acequire, exports, module) {\n exports.isDark = true\n exports.cssClass = 'ace-ipfs-dark'\n exports.cssText = `\n .ace-ipfs-dark .ace_gutter {\n background: #0b3a53;\n color: #9ad4db;\n }\n .ace-ipfs-dark .ace_print-margin {\n width: 1px;\n background: #69c4cd;\n }\n .ace-ipfs-dark {\n background-color: #0b3a53;\n color: #9ad4db;\n }\n .ace-ipfs-dark .ace_entity.ace_other.ace_attribute-name,\n .ace-ipfs-dark .ace_storage {\n color: #f7f8fa;\n }\n .ace-ipfs-dark .ace_rparen,\n .ace-ipfs-dark .ace_lparen {\n color: #9ad4db;\n }\n .ace-ipfs-dark .ace_cursor,\n .ace-ipfs-dark .ace_string.ace_regexp {\n color: #ea5037\n }\n .ace-ipfs-dark .ace_marker-layer .ace_active-line,\n .ace-ipfs-dark .ace_marker-layer .ace_selection {\n background: rgba(255, 255, 255, 0.1)\n }\n .ace-ipfs-dark.ace_multiselect .ace_selection.ace_start {\n box-shadow: 0 0 3px 0px #244e66;\n }\n .ace-ipfs-dark .ace_marker-layer .ace_step {\n background: rgb(102, 82, 0)\n }\n .ace-ipfs-dark .ace_marker-layer .ace_bracket {\n margin: -1px 0 0 -1px;\n border: 1px solid rgba(147, 161, 161, 0.50)\n }\n .ace-ipfs-dark .ace_gutter-active-line {\n background-color: #244e66\n }\n .ace-ipfs-dark .ace_marker-layer .ace_selected-word {\n border: 1px solid #244e66\n }\n .ace-ipfs-dark .ace_invisible {\n color: rgba(147, 161, 161, 0.50)\n }\n .ace-ipfs-dark .ace_keyword,\n .ace-ipfs-dark .ace_meta,\n .ace-ipfs-dark .ace_support.ace_class,\n .ace-ipfs-dark .ace_support.ace_type {\n color: #0aca9f\n }\n .ace-ipfs-dark .ace_constant.ace_character,\n .ace-ipfs-dark .ace_constant.ace_other {\n color: #f36149\n }\n .ace-ipfs-dark .ace_constant.ace_language {\n color: #f9a13e\n }\n .ace-ipfs-dark .ace_constant.ace_numeric {\n color: #f39021\n }\n .ace-ipfs-dark .ace_fold {\n background-color: #69c4cd;\n border-color: #93A1A1\n }\n .ace-ipfs-dark .ace_entity.ace_name.ace_function,\n .ace-ipfs-dark .ace_entity.ace_name.ace_tag,\n .ace-ipfs-dark .ace_support.ace_function,\n .ace-ipfs-dark .ace_variable,\n .ace-ipfs-dark .ace_variable.ace_language {\n color: #edf0f4\n }\n .ace-ipfs-dark .ace_string {\n color: #0aca9f\n }\n .ace-ipfs-dark .ace_comment {\n font-style: italic;\n color: #657B83\n }\n .ace-ipfs-dark .ace_indent-guide {\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNg0Db1ZVCxc/sPAAd4AlUHlLenAAAAAElFTkSuQmCC) right repeat-y\n }`\n\n var dom = acequire('../lib/dom')\n dom.importCssString(exports.cssText, exports.cssClass)\n})\n","import i18n from '../i18n'\n// languages.json generated from our locale dir via https://github.com/olizilla/lol\nimport languages from './languages.json'\n\nexport const getCurrentLanguage = () => {\n return getLanguage(i18n.language)\n}\n\nexport const getLanguage = (localeCode) => {\n if (!localeCode) return 'Unknown'\n\n const info = languages[localeCode]\n\n if (!info) {\n // if we haven't got the info in the `languages.json` we split it to get the language\n const lang = languages[localeCode.split('-')[0]]\n // if we have the language we add it, else we fallback to english (Web UI default lang)\n return (lang && lang.nativeName) || languages.en.englishName\n }\n\n return info.nativeName\n}\n","import React from 'react'\n\nconst StrokeSpeaker = props => (\n \n \n)\n\nexport default StrokeSpeaker\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'redux-bundler-react'\nimport i18n, { localesList } from '../../../i18n'\n\n// Components\nimport { Modal, ModalBody, ModalActions } from '../../modal/Modal'\nimport SpeakerIcon from '../../../icons/StrokeSpeaker'\nimport Button from '../../button/Button'\n\nconst LanguageModal = ({ t, tReady, onLeave, link, className, isIpfsDesktop, doDesktopUpdateLanguage, ...props }) => {\n const handleClick = (lang) => {\n i18n.changeLanguage(lang)\n if (isIpfsDesktop) {\n doDesktopUpdateLanguage(lang)\n }\n onLeave()\n }\n\n return (\n \n \n {t('languageModal.description')}
\n \n { localesList.map((lang) =>\n handleClick(lang.locale)}>\n { lang.nativeName }\n \n )}\n
\n \n {t('languageModal.translationProjectIntro')}{t('languageModal.translationProjectLink')} \n
\n \n\n \n {t('app:actions.close')} \n \n \n )\n}\n\nLanguageModal.propTypes = {\n onLeave: PropTypes.func.isRequired,\n t: PropTypes.func.isRequired,\n tReady: PropTypes.bool\n}\n\nLanguageModal.defaultProps = {\n className: ''\n}\n\nexport default connect(\n 'selectIsIpfsDesktop',\n 'doDesktopUpdateLanguage',\n LanguageModal\n)\n","import React, { Component, Fragment } from 'react'\nimport { getCurrentLanguage } from '../../lib/i18n'\n\n// Components\nimport Button from '../button/Button'\nimport Overlay from '../overlay/Overlay'\nimport LanguageModal from './language-modal/LanguageModal'\n\nclass LanguageSelector extends Component {\n state = { isLanguageModalOpen: false }\n\n onLanguageEditOpen = () => this.setState({ isLanguageModalOpen: true })\n\n onLanguageEditClose = () => this.setState({ isLanguageModalOpen: false })\n\n render () {\n const { t } = this.props\n\n return (\n \n \n
\n {getCurrentLanguage()}\n
\n
\n {t('app:actions.change')}\n \n
\n \n \n )\n }\n}\n\nexport default LanguageSelector\n","import React from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport { connect } from 'redux-bundler-react'\nimport { withTranslation, Trans } from 'react-i18next'\nimport { useForm } from 'react-hook-form'\n\n// Components\nimport { Modal, ModalBody, ModalActions } from '../../modal/Modal'\nimport Button from '../../button/Button'\nimport './PinningManagerServiceModal.css'\n\nconst PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service, tReady, doAddPinningService, nickname, apiEndpoint, visitServiceUrl, secretApiKey, ...props }) => {\n const { register, errors, clearErrors, setError, handleSubmit } = useForm({\n defaultValues: {\n nickname,\n apiEndpoint,\n secretApiKey: null\n }\n })\n const inputClass = 'w-100 lh-copy f5 ph2 pv1 input-reset ba b--black-20 br1 focus-outline'\n const onSubmit = async data => {\n try {\n await doAddPinningService(data)\n onSuccess()\n } catch (error) {\n console.error(error)\n setError('apiValidation', {\n type: 'manual',\n message: error.message\n })\n }\n }\n const cleanErrors = () => {\n clearErrors('apiValidation')\n }\n\n return (\n \n \n \n )\n}\n\nPinningManagerServiceModal.propTypes = {\n className: PropTypes.string,\n nickname: PropTypes.string,\n apiEndpoint: PropTypes.string,\n t: PropTypes.func.isRequired,\n onLeave: PropTypes.func.isRequired,\n onSuccess: PropTypes.func.isRequired\n}\n\nPinningManagerServiceModal.defaultProps = {\n className: '',\n nickname: null,\n apiEndpoint: null\n}\n\nconst ErrorMsg = ({ text }) => ({text}
)\n\nexport default connect(\n 'doAddPinningService',\n withTranslation('settings')(PinningManagerServiceModal)\n)\n","import React, { useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'redux-bundler-react'\nimport { withTranslation, Trans } from 'react-i18next'\nimport PinningServiceModal from '../pinning-manager-service-modal/PinningManagerServiceModal'\nimport './PinningManagerModal.css'\n\n// Components\nimport { Modal, ModalBody, ModalActions } from '../../modal/Modal'\nimport Button from '../../button/Button'\nimport Overlay from '../../overlay/Overlay'\n\nconst PinningManagerModal = ({ t, tReady, onLeave, className, remoteServiceTemplates, pinningServicesDefaults, ...props }) => {\n const [selectedService, setSelectedService] = useState(false)\n\n const onCustomModalOpen = () => setSelectedService({ type: 'CUSTOM' })\n const onModalClose = () => setSelectedService(false)\n const onSuccess = () => {\n setSelectedService(false)\n onLeave()\n }\n\n const selectedServiceInfo = pinningServicesDefaults[selectedService.name] || {}\n\n return (\n \n \n { t('pinningModal.title') }
\n \n { remoteServiceTemplates.map(({ icon, name }) => (\n
setSelectedService({ name, icon })}>\n { name }
\n \n ))}\n
\n \n Don’t see your pinning service provider? Add a custom one. \n \n
\n \n\n \n {t('actions.cancel')} \n \n\n \n \n \n )\n}\n\nPinningManagerModal.propTypes = {\n t: PropTypes.func.isRequired,\n onLeave: PropTypes.func.isRequired\n}\n\nPinningManagerModal.defaultProps = {\n className: ''\n}\n\nexport default connect(\n 'selectRemoteServiceTemplates',\n 'selectPinningServicesDefaults',\n withTranslation('settings')(PinningManagerModal)\n)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'redux-bundler-react'\nimport { withTranslation } from 'react-i18next'\n\n// Components\nimport { Modal, ModalBody, ModalActions } from '../../modal/Modal'\nimport Button from '../../button/Button'\n\nconst AutoUploadModal = ({ name, service, t, onLeave, doSetAutoUploadForService, className, ...props }) => {\n const onToggle = () => {\n doSetAutoUploadForService(name)\n onLeave()\n }\n\n return (\n \n \n { t('autoUploadModal.title', { name }) }
\n {t('autoUploadModal.description')}
\n \n\n \n {service.autoUpload ? t('actions.disable') : t('actions.enable') } \n {t('actions.cancel')} \n \n \n )\n}\n\nAutoUploadModal.propTypes = {\n t: PropTypes.func.isRequired,\n onLeave: PropTypes.func.isRequired\n}\n\nAutoUploadModal.defaultProps = {\n className: ''\n}\n\nexport default connect(\n 'doSetAutoUploadForService',\n withTranslation('settings')(AutoUploadModal)\n)\n","import { memo, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nconst Portal = ({ id, children, zIndex }) => {\n const el = useRef(document.getElementById(id) || document.createElement('div'))\n const [dynamic] = useState(!el.current.parentElement)\n\n useEffect(() => {\n if (dynamic) {\n el.current.id = id\n zIndex && (el.current.style.zIndex = zIndex)\n document.body.appendChild(el.current)\n }\n return () => {\n if (dynamic && el.current.parentElement) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n el.current.parentElement.removeChild(el.current)\n }\n }\n }, [dynamic, id, zIndex])\n return createPortal(children, el.current)\n}\nexport default memo(Portal)\n","import React, { useRef, useState, useLayoutEffect, useEffect } from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport { DropdownMenu } from '@tableflip/react-dropdown'\nimport Portal from '../../helpers/Portal'\n\n/**\n * Shows a context menu with specified children elements relative to a target element\n *\n * Important: Child elements should contain role=\"listitem\" to allow for better acessibiity\n * @component\n * @example\n * \n * 1 \n * 2 \n * \n */\nconst ContextMenu = ({ className, children, target, visible, arrowAlign, arrowMarginRight, onDismiss }) => {\n const containerRef = useRef()\n const [coordinates, setCoordinates] = useState({})\n\n useLayoutEffect(() => {\n const calculateCoordinates = () => {\n if (!target?.current) return\n const { top, left, width, height } = target.current.getBoundingClientRect()\n setCoordinates({ top, left, width, height })\n }\n\n calculateCoordinates()\n\n const event = window.addEventListener('scroll', () => {\n requestAnimationFrame(() => calculateCoordinates())\n })\n\n return () => window.removeEventListener('scroll', event)\n }, [target, visible])\n\n useEffect(() => {\n if (!target?.current) return\n\n const firstButton = target.current.querySelector('[role=\"menuitem\"]')\n firstButton && firstButton.focus()\n }, [target, visible])\n\n if (!visible || !target || !target.current) return null\n\n const offsetLeft = getOffsetLeftByArrowAlignment(arrowAlign, { ...coordinates, arrowMarginRight })\n\n return (\n \n \n
\n \n {children}\n
\n \n \n )\n}\n\nContextMenu.propTypes = {\n arrowAlign: PropTypes.string,\n children: PropTypes.arrayOf(PropTypes.element).isRequired,\n visible: PropTypes.bool,\n target: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),\n onDismiss: PropTypes.func,\n arrowMarginRight: PropTypes.number\n}\n\nContextMenu.defaultProps = {\n arrowMarginRight: 13\n}\n\nconst getOffsetLeftByArrowAlignment = (arrowAlign, { width, arrowMarginRight }) => {\n switch (arrowAlign) {\n case 'right':\n return width + (arrowMarginRight * 2)\n default:\n return 0\n }\n}\n\nexport default ContextMenu\n","import React from 'react'\nimport classNames from 'classnames'\n\nconst ContextMenuItem = ({ className, children, ...props }) => (\n \n { children }\n \n)\n\nexport default ContextMenuItem\n","import React from 'react'\n\nconst StrokeCancel = props => (\n \n \n)\n\nexport default StrokeCancel\n","import React from 'react'\n\nconst StrokeExternalLink = props => (\n \n \n)\n\nexport default StrokeExternalLink\n","import React from 'react'\n\nconst StrokeCloud = props => (\n \n \n)\n\nexport default StrokeCloud\n","import React, { Fragment, useEffect, useState, useMemo, useRef } from 'react'\nimport { connect } from 'redux-bundler-react'\nimport { AutoSizer, Table, Column, SortDirection } from 'react-virtualized'\nimport { sortByProperty } from '../../lib/sort'\n\n// Components\nimport Button from '../button/Button'\nimport Overlay from '../overlay/Overlay'\nimport PinningModal from './pinning-manager-modal/PinningManagerModal'\nimport AutoUploadModal from './auto-upload-modal/AutoUploadModal'\nimport GlyphPin from '../../icons/GlyphPin'\nimport ContextMenu from '../context-menu/ContextMenu'\nimport ContextMenuItem from '../context-menu/ContextMenuItem'\nimport GlyphDots from '../../icons/GlyphDots'\nimport StrokeCancel from '../../icons/StrokeCancel'\nimport StrokeExternalLink from '../../icons/StrokeExternalLink'\nimport StrokeCloud from '../../icons/StrokeCloud'\n\nimport './PinningManager.css'\n\nconst ROW_HEIGHT = 50\nconst HEADER_HEIGHT = 32\n\nexport const PinningManager = ({ pinningServices, ipfsReady, arePinningServicesSupported, doFetchPinningServices, doPinsStatsGet, doRemovePinningService, pinsSize, numberOfPins, t }) => {\n const [isModalOpen, setModalOpen] = useState(false)\n const [isToggleModalOpen, setToggleModalOpen] = useState(false)\n const onModalOpen = () => setModalOpen(true)\n const onModalClose = () => setModalOpen(false)\n const onToggleModalOpen = (name) => setToggleModalOpen(name)\n const onToggleModalClose = () => setToggleModalOpen(false)\n\n const [sortSettings, setSortSettings] = useState({\n sortBy: 'addedAt',\n sortDirection: SortDirection.ASC\n })\n useEffect(() => {\n (async () => {\n try {\n ipfsReady && await doPinsStatsGet()\n } catch (e) {\n console.error('doPinsStatsGet error', e)\n }\n })()\n }, [doPinsStatsGet, ipfsReady])\n\n useEffect(() => {\n ipfsReady && doFetchPinningServices()\n }, [ipfsReady, doFetchPinningServices])\n\n const localPinning = useMemo(() =>\n ({ name: t('localPinning'), type: 'LOCAL', totalSize: pinsSize, numberOfPins }),\n [numberOfPins, pinsSize, t])\n\n const sortedServices = useMemo(() =>\n (pinningServices || []).sort(sortByProperty(sortSettings.sortBy, sortSettings.sortDirection === SortDirection.ASC ? 1 : -1)),\n [pinningServices, sortSettings.sortBy, sortSettings.sortDirection])\n\n const sortedList = useMemo(() => [localPinning, ...sortedServices], [localPinning, sortedServices])\n return (\n \n \n
\n
\n {({ width }) => (\n sortedList[index]}\n rowClassName='bb b--light-gray mt2'\n sort={(...sortArgs) => setSortSettings(...sortArgs)}\n sortBy={sortSettings.sortBy}\n sortDirection={sortSettings.sortDirection}>\n } className='charcoal truncate f6 pl2' /> */}\n } className='charcoal truncate f6 pl2' />\n \n
\n { arePinningServicesSupported &&\n (
\n \n + {t('actions.addService')} \n
\n )}\n
\n {\n onToggleModalClose()\n doFetchPinningServices()\n }} t={t} name={isToggleModalOpen} service={sortedServices.find(s => s.name === isToggleModalOpen)} />\n \n\n \n {\n onModalClose()\n doFetchPinningServices()\n }} t={t} />\n \n \n )\n}\n\nPinningManager.defaultProps = {\n pinningServices: []\n}\n\nconst serviceOnline = (s) => (s.type === 'LOCAL' || s.online)\n\nconst Icon = ({ rowData, index }) => {\n const colors = ['aqua', 'link', 'yellow', 'teal', 'red', 'green', 'navy', 'gray', 'charcoal']\n const color = colors[index % colors.length]\n const iconClass = `mr2 pr1 fill-${color} flex-shrink-0`\n\n if (rowData.icon) {\n return \n \n { rowData.name } \n
\n)\n\n// const SizeCell = ({ rowData, t }) => (\n// { !rowData.totalSize\n// ? `${(t('app:terms:loading'))}...`\n// : humanSize(rowData.totalSize || 0, {\n// round: rowData.totalSize >= 1073741824 ? 1 : 0, spacer: ''\n// })}
\n// )\nconst NumberOfPinsCell = ({ rowData, t }) => {\n if (rowData.numberOfPins < 0) {\n return {t('errors.failedToFetch')}
\n }\n return = 0 ? '' : 'gray'}>{rowData.numberOfPins >= 0 ? rowData.numberOfPins : `${(t('app:terms:loading'))}...`}
\n}\nconst AutoUploadCell = ({ autoUpload, visitServiceUrl, name, doRemovePinningService, t, type, onToggleModalOpen }) => (\n \n
{ typeof autoUpload !== 'undefined' ? t('autoUploadPolicy.' + autoUpload) : '-' }
\n { type !== 'LOCAL' &&
}\n
\n
setContextVisibility(true)} ref={buttonRef} aria-label={t('showOptions')}>\n \n
setContextVisibility(false)} arrowAlign=\"right\">\n { showAutoUpload && (\n onToggleModalOpen(name) }>\n {autoUpload ? t('pinningServices.removeAutoUpload') : t('pinningServices.addAutoUpload')} \n )\n }\n { visitServiceUrl && (\n \n setContextVisibility(false) }>\n {t('visitService')} \n \n )\n }\n \n {t('remove')} \n \n \n
\n {t('experiments')} \n {tkey('description')}
\n \n {experiments.map(({ key, actionUrls, enabled, blocked }) => {\n return (\n
\n {tkey('title', key)} \n {tkey('description', key)}
\n doExpToggleAction(key, enabled)}\n checked={enabled}\n label={{tkey('label', key)} }\n />\n {actionUrls && (\n \n {actionUrls.map((action, i) => (\n
0 &&\n 'bl b1 pl2 b--light-gray'}`}\n href={action.url}\n >\n {tkey(action.key)}\n \n ))}\n \n )\n } else {\n return null\n }\n}\n\nexport default connect(\n 'selectExperiments',\n 'doExpToggleAction',\n Experiments\n)\n","import React from 'react'\nimport { Helmet } from 'react-helmet'\nimport { connect } from 'redux-bundler-react'\nimport { withTranslation, Trans } from 'react-i18next'\nimport ReactJoyride from 'react-joyride'\n// Tour\nimport { settingsTour } from '../lib/tours'\nimport withTour from '../components/tour/withTour'\nimport { getJoyrideLocales } from '../helpers/i8n'\n// Components\nimport Tick from '../icons/GlyphSmallTick'\nimport Box from '../components/box/Box'\nimport Button from '../components/button/Button'\nimport LanguageSelector from '../components/language-selector/LanguageSelector'\nimport PinningManager from '../components/pinning-manager/PinningManager'\nimport AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle'\nimport ApiAddressForm from '../components/api-address-form/ApiAddressForm'\nimport PublicGatewayForm from '../components/public-gateway-form/PublicGatewayForm'\nimport JsonEditor from './editor/JsonEditor'\nimport Experiments from '../components/experiments/ExperimentsPanel'\nimport Title from './Title'\nimport CliTutorMode from '../components/cli-tutor-mode/CliTutorMode'\nimport Checkbox from '../components/checkbox/Checkbox'\nimport ComponentLoader from '../loader/ComponentLoader.js'\nimport StrokeCode from '../icons/StrokeCode'\nimport { cliCmdKeys, cliCommandList } from '../bundles/files/consts'\n\nconst PAUSE_AFTER_SAVE_MS = 3000\n\nexport const SettingsPage = ({\n t, tReady, isIpfsConnected, ipfsPendingFirstConnection, isIpfsDesktop,\n isConfigBlocked, isLoading, isSaving, arePinningServicesSupported,\n hasSaveFailed, hasSaveSucceded, hasErrors, hasLocalChanges, hasExternalChanges,\n config, onChange, onReset, onSave, editorKey, analyticsEnabled, doToggleAnalytics,\n toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, doToggleCliTutorMode, command\n}) => (\n \n
\n {t('title')} | IPFS \n \n\n {/* Enable a full screen loader after updating to a new IPFS API address.\n * Will not show on consequent retries after a failure.\n */}\n { ipfsPendingFirstConnection\n ?
\n
\n : null }\n\n { isIpfsDesktop\n ? null\n :
\n \n
{t('app:terms.apiAddress')} \n
\n If your node is configured with a custom API address , including a port other than the default 5001, enter it here.
\n \n
\n
}\n\n
\n \n
{t('app:terms.publicGateway')} \n
\n Choose which public gateway you want to use to open your files.
\n \n
\n
\n\n
\n {t('pinningServices.title')} \n \n { arePinningServicesSupported\n ? t('pinningServices.description')\n : t('pinningServices.noPinRemoteDescription')\n } {t('learnMoreLink')} \n
\n \n\n
\n \n
{t('language')} \n \n\n
\n\n
\n \n
{t('cliTutorMode')} \n
{t('cliToggle.label')}}/>\n \n Enable this option to display a \"view code\"
\n \n \n\n { isIpfsConnected &&\n (
\n \n
{t('config')} \n
\n
\n { config ? (\n
\n \n \n {t('app:actions.reset')}\n \n
\n ) : null }\n
\n
\n )}\n\n
\n
\n { hasSaveSucceded && !hasSaveFailed ? (\n \n {t('configApiNotAvailable')}\n
\n )\n } else if (!isIpfsConnected) {\n return (\n \n {t('ipfsDaemonOffline')}\n
\n )\n } else if (!config) {\n return (\n \n { isLoading ? t('fetchingSettings') : t('settingsUnavailable') }\n
\n )\n } else if (hasExternalChanges) {\n return (\n \n \n The settings have changed, please click Reset to update the editor contents\n \n
\n )\n } else if (hasSaveFailed) {\n return (\n \n {t('errorOccured')}\n {t('checkConsole')} \n
\n )\n } else if (hasSaveSucceded) {\n return (\n \n {t('changesSaved')}\n {t('settingsWillBeUsedNextTime')} \n
\n )\n }\n return (\n \n {t('ipfsConfigDescription')} {t('ipfsConfigHelp')} \n
\n )\n}\n\nexport class SettingsPageContainer extends React.Component {\n state = {\n // valid json?\n hasErrors: false,\n // we edited it\n hasLocalChanges: false,\n // something else edited it\n hasExternalChanges: false,\n // mutable copy of the config\n editableConfig: this.props.config,\n // reset the editor on reset\n editorKey: Date.now()\n }\n\n onChange = (value) => {\n this.setState({\n hasErrors: !this.isValidJson(value),\n hasLocalChanges: this.props.config !== value,\n editableConfig: value\n })\n }\n\n onReset = () => {\n this.setState({\n hasErrors: false,\n hasLocalChanges: false,\n hasExternalChanges: false,\n editableConfig: this.props.config,\n editorKey: Date.now()\n })\n }\n\n onSave = () => {\n this.props.doSaveConfig(this.state.editableConfig)\n }\n\n isValidJson (str) {\n try {\n JSON.parse(str)\n return true\n } catch (err) {\n return false\n }\n }\n\n isRecent (msSinceEpoch) {\n return msSinceEpoch > Date.now() - PAUSE_AFTER_SAVE_MS\n }\n\n componentDidUpdate (prevProps) {\n if (this.props.configSaveLastSuccess !== prevProps.configSaveLastSuccess) {\n setTimeout(() => this.onReset(), PAUSE_AFTER_SAVE_MS)\n }\n if (prevProps.config !== this.props.config) {\n // no previous config, or we just saved.\n if (!prevProps.config || this.isRecent(this.props.configSaveLastSuccess)) {\n return this.setState({\n editableConfig: this.props.config\n })\n }\n // uh oh... something else edited the config while we were looking at it.\n if (this.props.config !== this.state.editableConfig) {\n return this.setState({\n hasExternalChanges: true\n })\n }\n }\n }\n\n render () {\n const {\n t, tReady, isConfigBlocked, ipfsConnected, configIsLoading, configLastError, configIsSaving, arePinningServicesSupported,\n configSaveLastSuccess, configSaveLastError, isIpfsDesktop, analyticsEnabled, doToggleAnalytics, toursEnabled,\n handleJoyrideCallback, isCliTutorModeEnabled, doToggleCliTutorMode, ipfsPendingFirstConnection\n } = this.props\n const { hasErrors, hasLocalChanges, hasExternalChanges, editableConfig, editorKey } = this.state\n const hasSaveSucceded = this.isRecent(configSaveLastSuccess)\n const hasSaveFailed = this.isRecent(configSaveLastError)\n const isLoading = configIsLoading || (!editableConfig && !configLastError)\n\n return (\n \n { children }\n
\n)\n\nModalActions.propTypes = {\n justify: PropTypes.string,\n className: PropTypes.string\n}\n\nModalActions.defaultProps = {\n justify: 'between',\n className: ''\n}\n\nexport const ModalBody = ({ className, Icon, title, children, ...props }) => (\n \n { Icon && (\n
\n {
\n )}\n\n
{title}
\n\n {children}\n
\n { onCancel &&\n
\n )\n}\n\nModal.propTypes = {\n onCancel: PropTypes.func\n}\n\nModal.defaultProps = {\n onCancel: null,\n className: ''\n}\n\nexport default Modal\n","import React from 'react'\nimport { connect } from 'redux-bundler-react'\nimport { STATUS } from 'react-joyride'\n\nconst withTour = WrappedComponent => {\n class WithTour extends React.Component {\n handleJoyrideCallback = (data) => {\n const { doDisableTours } = this.props\n const { action, status } = data\n\n if (action === 'close' || [STATUS.FINISHED].includes(status)) {\n doDisableTours()\n }\n }\n\n render () {\n return \n
{ title }
\n
\n {children}\n
\n
\n )\n\n return (\n \n {children}\n \n )\n}\n\nOverlay.propTypes = {\n show: PropTypes.bool.isRequired,\n onLeave: PropTypes.func.isRequired\n}\n\nOverlay.defaultProps = {\n className: ''\n}\n\nexport default Overlay\n","import React from 'react'\n\nconst StrokeCode = props => (\n \n \n)\n\nexport default StrokeCode\n","import React from 'react'\n\nconst StrokeDownload = props => (\n \n \n)\n\nexport default StrokeDownload\n"],"sourceRoot":""}