import React, { useContext, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { addUrlProtocolPrefix } from '../../../../app/scripts/lib/util'; import { MetaMetricsEventCategory, MetaMetricsEventName, } from '../../../../shared/constants/metametrics'; import { COINGECKO_LINK, CRYPTOCOMPARE_LINK, PRIVACY_POLICY_LINK, } from '../../../../shared/lib/ui-utils'; import { BUTTON_SIZES, BUTTON_VARIANT, Box, Button, PickerNetwork, Text, TextField, } from '../../../components/component-library'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { TextColor, TextVariant, } from '../../../helpers/constants/design-system'; import { ONBOARDING_PIN_EXTENSION_ROUTE } from '../../../helpers/constants/routes'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { getAllNetworks, getCurrentNetwork } from '../../../selectors'; import { setCompletedOnboarding, setIpfsGateway, setUseCurrencyRateCheck, setUseMultiAccountBalanceChecker, setUsePhishDetect, setUse4ByteResolution, setUseTokenDetection, setUseAddressBarEnsResolution, showModal, toggleNetworkMenu, setIncomingTransactionsPreferences, } from '../../../store/actions'; import IncomingTransactionToggle from '../../../components/app/incoming-trasaction-toggle/incoming-transaction-toggle'; import { Setting } from './setting'; export default function PrivacySettings() { const t = useI18nContext(); const dispatch = useDispatch(); const history = useHistory(); const { incomingTransactionsPreferences } = useSelector( (state) => state.metamask, ); const [usePhishingDetection, setUsePhishingDetection] = useState(true); const [turnOn4ByteResolution, setTurnOn4ByteResolution] = useState(true); const [turnOnTokenDetection, setTurnOnTokenDetection] = useState(true); const [turnOnCurrencyRateCheck, setTurnOnCurrencyRateCheck] = useState(true); const [ isMultiAccountBalanceCheckerEnabled, setMultiAccountBalanceCheckerEnabled, ] = useState(true); const [ipfsURL, setIPFSURL] = useState(''); const [addressBarResolution, setAddressBarResolution] = useState(true); const [ipfsError, setIPFSError] = useState(null); const trackEvent = useContext(MetaMetricsContext); const currentNetwork = useSelector(getCurrentNetwork); const allNetworks = useSelector(getAllNetworks); const handleSubmit = () => { dispatch(setUsePhishDetect(usePhishingDetection)); dispatch(setUse4ByteResolution(turnOn4ByteResolution)); dispatch(setUseTokenDetection(turnOnTokenDetection)); dispatch( setUseMultiAccountBalanceChecker(isMultiAccountBalanceCheckerEnabled), ); dispatch(setUseCurrencyRateCheck(turnOnCurrencyRateCheck)); dispatch(setCompletedOnboarding()); dispatch(setUseAddressBarEnsResolution(addressBarResolution)); if (ipfsURL && !ipfsError) { const { host } = new URL(addUrlProtocolPrefix(ipfsURL)); dispatch(setIpfsGateway(host)); } trackEvent({ category: MetaMetricsEventCategory.Onboarding, event: MetaMetricsEventName.OnboardingWalletAdvancedSettings, properties: { show_incoming_tx: incomingTransactionsPreferences, use_phising_detection: usePhishingDetection, turnon_token_detection: turnOnTokenDetection, }, }); history.push(ONBOARDING_PIN_EXTENSION_ROUTE); }; const handleIPFSChange = (url) => { setIPFSURL(url); try { const { host } = new URL(addUrlProtocolPrefix(url)); if (!host || host === 'gateway.ipfs.io') { throw new Error(); } setIPFSError(null); } catch (error) { setIPFSError(t('onboardingAdvancedPrivacyIPFSInvalid')); } }; return ( <>