|
| 1 | +/** |
| 2 | + * Copyright 2018 Shift Devices AG |
| 3 | + * Copyright 2022 Shift Crypto AG |
| 4 | + * |
| 5 | + * Licensed under the Apache License, Version 2.0 (the "License"); |
| 6 | + * you may not use this file except in compliance with the License. |
| 7 | + * You may obtain a copy of the License at |
| 8 | + * |
| 9 | + * http://www.apache.org/licenses/LICENSE-2.0 |
| 10 | + * |
| 11 | + * Unless required by applicable law or agreed to in writing, software |
| 12 | + * distributed under the License is distributed on an "AS IS" BASIS, |
| 13 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 14 | + * See the License for the specific language governing permissions and |
| 15 | + * limitations under the License. |
| 16 | + */ |
| 17 | + |
| 18 | +import { useTranslation } from 'react-i18next'; |
| 19 | +import { i18n } from '../../i18n/i18n'; |
| 20 | +import { Guide } from '../../components/guide/guide'; |
| 21 | +import { Entry } from '../../components/guide/entry'; |
| 22 | +import { Button, ButtonLink } from '../../components/forms'; |
| 23 | +import { Header } from '../../components/layout'; |
| 24 | +import { BlockExplorers } from './block-explorers'; |
| 25 | +import * as backendAPI from '../../api/backend'; |
| 26 | +import { getConfig, setConfig } from '../../utils/config'; |
| 27 | +import { CoinCode } from '../../api/account'; |
| 28 | +import { MobileHeader } from './components/mobile-header'; |
| 29 | +import { useCallback, useEffect, useRef, useState } from 'react'; |
| 30 | + |
| 31 | +export const SelectExplorerSettings = () => { |
| 32 | + const { t } = useTranslation(); |
| 33 | + |
| 34 | + const initialConfig = useRef<any>(); |
| 35 | + const [config, setConfigState] = useState<any>(); |
| 36 | + |
| 37 | + const [supportedCoins, setSupportedCoins] = useState<backendAPI.ICoin[]>([]); |
| 38 | + const [allSelections, setAllSelections] = useState<backendAPI.TAvailableExplorers>(); |
| 39 | + |
| 40 | + const [saveDisabled, setSaveDisabled] = useState(true); |
| 41 | + |
| 42 | + const loadConfig = () => { |
| 43 | + getConfig().then(setConfigState); |
| 44 | + }; |
| 45 | + |
| 46 | + |
| 47 | + const updateConfigState = useCallback((newConfig: any) => { |
| 48 | + if (JSON.stringify(initialConfig.current) !== JSON.stringify(newConfig)) { |
| 49 | + setConfigState(newConfig); |
| 50 | + setSaveDisabled(false); |
| 51 | + } else { |
| 52 | + setSaveDisabled(true); |
| 53 | + } |
| 54 | + }, []); |
| 55 | + |
| 56 | + const handleChange = useCallback((selectedTxPrefix: string, coin: CoinCode) => { |
| 57 | + if (config.backend.blockExplorers[coin] && config.backend.blockExplorers[coin] !== selectedTxPrefix) { |
| 58 | + config.backend.blockExplorers[coin] = selectedTxPrefix; |
| 59 | + updateConfigState(config); |
| 60 | + } |
| 61 | + }, [config, updateConfigState]); |
| 62 | + |
| 63 | + const save = async () => { |
| 64 | + setSaveDisabled(true); |
| 65 | + await setConfig(config); |
| 66 | + initialConfig.current = await getConfig(); |
| 67 | + }; |
| 68 | + |
| 69 | + useEffect(() => { |
| 70 | + const fetchData = async () => { |
| 71 | + const coins = await backendAPI.getSupportedCoins(); |
| 72 | + const allExplorerSelection = await backendAPI.getAvailableExplorers(); |
| 73 | + |
| 74 | + // if set alongside config it will 'update' with it, but we want it to stay the same after initialization. |
| 75 | + initialConfig.current = await getConfig(); |
| 76 | + |
| 77 | + setSupportedCoins(coins); |
| 78 | + setAllSelections(allExplorerSelection); |
| 79 | + }; |
| 80 | + |
| 81 | + loadConfig(); |
| 82 | + fetchData().catch(console.error); |
| 83 | + }, []); |
| 84 | + |
| 85 | + if (config === undefined) { |
| 86 | + return null; |
| 87 | + } |
| 88 | + |
| 89 | + return ( |
| 90 | + <div className="contentWithGuide"> |
| 91 | + <div className="container"> |
| 92 | + <div className="innerContainer scrollableContainer"> |
| 93 | + <Header |
| 94 | + hideSidebarToggler |
| 95 | + title={ |
| 96 | + <> |
| 97 | + <h2 className={'hide-on-small'}>{t('settings.expert.explorer.title')}</h2> |
| 98 | + <MobileHeader withGuide title={t('settings.expert.explorer.title')}/> |
| 99 | + </> |
| 100 | + }/> |
| 101 | + <div className="content padded"> |
| 102 | + {supportedCoins.map(coin => { |
| 103 | + return <BlockExplorers |
| 104 | + key={coin.coinCode} |
| 105 | + coin={coin.coinCode} |
| 106 | + explorerOptions={allSelections?.[coin.coinCode] ?? []} |
| 107 | + handleOnChange={handleChange} |
| 108 | + selectedPrefix={config.backend.blockExplorers?.[coin.coinCode]}/>; |
| 109 | + })} |
| 110 | + </div> |
| 111 | + <div className="content padded" style={{ display: 'flex', justifyContent: 'space-between' }}> |
| 112 | + <ButtonLink |
| 113 | + secondary |
| 114 | + className={'hide-on-small'} |
| 115 | + to={'/settings'}> |
| 116 | + {t('button.back')} |
| 117 | + </ButtonLink> |
| 118 | + <Button primary disabled={saveDisabled} onClick={() => save()}>{t('settings.save')}</Button> |
| 119 | + </div> |
| 120 | + </div> |
| 121 | + </div> |
| 122 | + <Guide> |
| 123 | + <Entry key="guide.settingsBlockExplorer.what" entry={t('guide.settingsBlockExplorer.what')} /> |
| 124 | + <Entry key="guide.settingsBlockExplorer.why" entry={t('guide.settingsBlockExplorer.why')} /> |
| 125 | + <Entry key="guide.settingsBlockExplorer.options" entry={t('guide.settingsBlockExplorer.options')} /> |
| 126 | + <Entry key="guide.settings-electrum.instructions" entry={{ |
| 127 | + link: { |
| 128 | + text: t('guide.settingsBlockExplorer.instructions.link.text'), |
| 129 | + url: (i18n.resolvedLanguage === 'de') |
| 130 | + // TODO: DE guide. |
| 131 | + ? 'https://shiftcrypto.support/help/en-us/23-bitcoin/205-how-to-use-a-block-explorer' |
| 132 | + : 'https://shiftcrypto.support/help/en-us/23-bitcoin/205-how-to-use-a-block-explorer' |
| 133 | + }, |
| 134 | + text: t('guide.settingsBlockExplorer.instructions.text'), |
| 135 | + title: t('guide.settingsBlockExplorer.instructions.title') |
| 136 | + }} /> |
| 137 | + </Guide> |
| 138 | + </div> |
| 139 | + ); |
| 140 | +}; |
0 commit comments