-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
frontend: implement block explorer selection
Add a setting that lets users configure their preferred block explorer. Only whitelisted block explorers are available options. The frontend decides which selections to show (e.g only BTC or BTC and ETH) based on the accounts that are present.
- Loading branch information
Showing
8 changed files
with
294 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| /** | ||
| * Copyright 2022 Shift Crypto AG | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { CoinCode } from '@/api/account'; | ||
| import { TBlockExplorer } from '@/api/backend'; | ||
| import { SingleDropdown } from './components/dropdowns/singledropdown'; | ||
|
|
||
| type TOption = { | ||
| label: string; | ||
| value: string; | ||
| } | ||
|
|
||
| type TProps = { | ||
| coin: CoinCode; | ||
| explorerOptions: TBlockExplorer[]; | ||
| handleOnChange: (value: string, coin: CoinCode) => void | ||
| selectedPrefix: string; | ||
| }; | ||
|
|
||
| export const BlockExplorers = ({ coin, explorerOptions, handleOnChange, selectedPrefix }: TProps) => { | ||
| const options: TOption[] = explorerOptions.map(explorer => { | ||
| return { label: explorer.name, value: explorer.url }; | ||
| }); | ||
|
|
||
| const fullCoinName = new Map<CoinCode, string>([ | ||
| ['btc', 'Bitcoin'], | ||
| ['tbtc', 'Testnet Bitcoin'], | ||
| ['ltc', 'Litecoin'], | ||
| ['tltc', 'Testnet Litecoin'], | ||
| ['eth', 'Ethereum'], | ||
| ['goeth', 'Goerli Ethereum'], | ||
| ['sepeth', 'Sepolia Ethereum'], | ||
| ]); | ||
|
|
||
| // find the index of the currently selected explorer. will be -1 if none is found. | ||
| const activeExplorerIndex = explorerOptions.findIndex(explorer => explorer.url === selectedPrefix); | ||
|
|
||
| return ( | ||
| options.length > 0 && | ||
| <div> | ||
| <h2>{fullCoinName.get(coin)}</h2> | ||
| <SingleDropdown | ||
| options={options} | ||
| handleChange={value => handleOnChange(value, coin)} | ||
| value={options[activeExplorerIndex > 0 ? activeExplorerIndex : 0]} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
39 changes: 39 additions & 0 deletions
39
frontends/web/src/routes/settings/components/advanced-settings/select-explorer-setting.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * Copyright 2023 Shift Crypto AG | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { useNavigate } from 'react-router'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { ChevronRightDark } from '@/components/icon'; | ||
| import { SettingsItem } from '@/routes/settings/components/settingsItem/settingsItem'; | ||
|
|
||
| export const SelectExplorerSetting = () => { | ||
| const { t } = useTranslation(); | ||
| const navigate = useNavigate(); | ||
|
|
||
| return ( | ||
| <SettingsItem | ||
| settingName={t('settings.expert.explorer.title')} | ||
| onClick={() => navigate('/settings/select-explorer')} | ||
| secondaryText={t('settings.expert.explorer.description')} | ||
| extraComponent={ | ||
| <ChevronRightDark | ||
| width={24} | ||
| height={24} | ||
| /> | ||
| } | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| /** | ||
| * Copyright 2018 Shift Devices AG | ||
| * Copyright 2022 Shift Crypto AG | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { useCallback, useEffect, useRef, useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { CoinCode, IAccount } from '@/api/account'; | ||
| import * as backendAPI from '@/api/backend'; | ||
| import { i18n } from '@/i18n/i18n'; | ||
| import { Guide } from '@/components/guide/guide'; | ||
| import { Entry } from '@/components/guide/entry'; | ||
| import { Button, ButtonLink } from '@/components/forms'; | ||
| import { Header } from '@/components/layout'; | ||
| import { getConfig, setConfig } from '@/utils/config'; | ||
| import { MobileHeader } from './components/mobile-header'; | ||
| import { BlockExplorers } from './block-explorers'; | ||
|
|
||
| type TSelectExplorerSettingsProps = { | ||
| accounts: IAccount[]; | ||
| } | ||
|
|
||
| export const SelectExplorerSettings = ({ accounts }: TSelectExplorerSettingsProps) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const initialConfig = useRef<any>(); | ||
| const [config, setConfigState] = useState<any>(); | ||
|
|
||
| const availableCoins = new Set(accounts.map(account => account.coinCode)); | ||
| const [allSelections, setAllSelections] = useState<backendAPI.TAvailableExplorers>(); | ||
|
|
||
| const [saveDisabled, setSaveDisabled] = useState(true); | ||
|
|
||
| const loadConfig = () => { | ||
| getConfig().then(setConfigState); | ||
| }; | ||
|
|
||
|
|
||
| const updateConfigState = useCallback((newConfig: any) => { | ||
| if (JSON.stringify(initialConfig.current) !== JSON.stringify(newConfig)) { | ||
| setConfigState(newConfig); | ||
| setSaveDisabled(false); | ||
| } else { | ||
| setSaveDisabled(true); | ||
| } | ||
| }, []); | ||
|
|
||
| const handleChange = useCallback((selectedTxPrefix: string, coin: CoinCode) => { | ||
| if (config.backend.blockExplorers[coin] && config.backend.blockExplorers[coin] !== selectedTxPrefix) { | ||
| config.backend.blockExplorers[coin] = selectedTxPrefix; | ||
| updateConfigState(config); | ||
| } | ||
| }, [config, updateConfigState]); | ||
|
|
||
| const save = async () => { | ||
| setSaveDisabled(true); | ||
| await setConfig(config); | ||
| initialConfig.current = await getConfig(); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const fetchData = async () => { | ||
| const allExplorerSelection = await backendAPI.getAvailableExplorers(); | ||
|
|
||
| // if set alongside config it will 'update' with it, but we want it to stay the same after initialization. | ||
| initialConfig.current = await getConfig(); | ||
|
|
||
| setAllSelections(allExplorerSelection); | ||
| }; | ||
|
|
||
| loadConfig(); | ||
| fetchData().catch(console.error); | ||
| }, []); | ||
|
|
||
| if (config === undefined) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="contentWithGuide"> | ||
| <div className="container"> | ||
| <div className="innerContainer scrollableContainer"> | ||
| <Header | ||
| hideSidebarToggler | ||
| title={ | ||
| <> | ||
| <h2 className={'hide-on-small'}>{t('settings.expert.explorer.title')}</h2> | ||
| <MobileHeader withGuide title={t('settings.expert.explorer.title')}/> | ||
| </> | ||
| }/> | ||
| <div className="content padded"> | ||
| { Array.from(availableCoins).map(coin => { | ||
| return <BlockExplorers | ||
| key={coin} | ||
| coin={coin} | ||
| explorerOptions={allSelections?.[coin] ?? []} | ||
| handleOnChange={handleChange} | ||
| selectedPrefix={config.backend.blockExplorers?.[coin]}/>; | ||
| }) } | ||
| </div> | ||
| <div className="content padded" style={{ display: 'flex', justifyContent: 'space-between' }}> | ||
| <ButtonLink | ||
| secondary | ||
| className={'hide-on-small'} | ||
| to={'/settings'}> | ||
| {t('button.back')} | ||
| </ButtonLink> | ||
| <Button primary disabled={saveDisabled} onClick={() => save()}>{t('settings.save')}</Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Guide> | ||
| <Entry key="guide.settingsBlockExplorer.what" entry={t('guide.settingsBlockExplorer.what', { returnObjects: true })} /> | ||
| <Entry key="guide.settingsBlockExplorer.why" entry={t('guide.settingsBlockExplorer.why', { returnObjects: true })} /> | ||
| <Entry key="guide.settingsBlockExplorer.options" entry={t('guide.settingsBlockExplorer.options', { returnObjects: true })} /> | ||
| <Entry key="guide.settings-electrum.instructions" entry={{ | ||
| link: { | ||
| text: t('guide.settingsBlockExplorer.instructions.link.text'), | ||
| url: (i18n.resolvedLanguage === 'de') | ||
| // TODO: DE guide. | ||
| ? 'https://shiftcrypto.support/help/en-us/23-bitcoin/205-how-to-use-a-block-explorer' | ||
| : 'https://shiftcrypto.support/help/en-us/23-bitcoin/205-how-to-use-a-block-explorer' | ||
| }, | ||
| text: t('guide.settingsBlockExplorer.instructions.text'), | ||
| title: t('guide.settingsBlockExplorer.instructions.title') | ||
| }} /> | ||
| </Guide> | ||
| </div> | ||
| ); | ||
| }; |