Differential D11602 Diff 34535 web/cashtab/src/components/Configure/Configure.js

Changeset View

Standalone View

web/cashtab/src/components/Configure/Configure.js

Show First 20 Lines • Show All 50 Lines • ▼ Show 20 Lines
import { ReactComponent as Trashcan } from 'assets/trashcan.svg';		import { ReactComponent as Trashcan } from 'assets/trashcan.svg';
import { ReactComponent as Edit } from 'assets/edit.svg';		import { ReactComponent as Edit } from 'assets/edit.svg';
import { Event } from 'utils/GoogleAnalytics';		import { Event } from 'utils/GoogleAnalytics';
import ApiError from 'components/Common/ApiError';		import ApiError from 'components/Common/ApiError';
import CopyToClipboard from 'components/Common/CopyToClipboard';		import CopyToClipboard from 'components/Common/CopyToClipboard';
import { formatSavedBalance } from 'utils/formatting';		import { formatSavedBalance } from 'utils/formatting';
import { isValidXecAddress } from 'utils/validation';		import { isValidXecAddress } from 'utils/validation';
import { convertToEcashPrefix } from 'utils/cashMethods';		import { convertToEcashPrefix } from 'utils/cashMethods';
		import useWindowDimensions from 'hooks/useWindowDimensions';
		import { isMobile, isIOS, isSafari } from 'react-device-detect';
import { currency } from 'components/Common/Ticker.js';		import { currency } from 'components/Common/Ticker.js';
const { Panel } = Collapse;		const { Panel } = Collapse;

const SettingsLinkCtn = styled.div`		const SettingsLinkCtn = styled.div`
color: ${props => props.theme.lightWhite};		color: ${props => props.theme.lightWhite};
`;		`;

const SettingsLink = styled.a`		const SettingsLink = styled.a`
▲ Show 20 Lines • Show All 362 Lines • ▼ Show 20 Lines

const StyledSpacer = styled.div`		const StyledSpacer = styled.div`
height: 1px;		height: 1px;
width: 100%;		width: 100%;
background-color: ${props => props.theme.lightWhite};		background-color: ${props => props.theme.lightWhite};
margin: 60px 0 50px;		margin: 60px 0 50px;
`;		`;

		const HideableTextContainer = styled.div``;
		const AutoCameraTextCtn = styled.div`
		display: flex;
		white-space: nowrap;
		gap: 3px;
		`;

const GeneralSettingsItem = styled.div`		const GeneralSettingsItem = styled.div`
display: flex;		display: flex;
align-items: center;		align-items: center;
justify-content: space-between;		justify-content: space-between;
.ant-switch svg {		.ant-switch svg {
fill: #717171;		fill: #717171;
}		}
.title {		.title {
Show All 9 Lines	.ant-switch-checked {
background-color: ${props => props.theme.eCashBlue};		background-color: ${props => props.theme.eCashBlue};
svg {		svg {
fill: ${props => props.theme.contrast};		fill: ${props => props.theme.contrast};
}		}
}		}
.SendConfirm {		.SendConfirm {
color: ${props => props.theme.lightWhite};		color: ${props => props.theme.lightWhite};
}		}
		${AutoCameraTextCtn} {
		color: ${props => props.theme.lightWhite};
		${HideableTextContainer} {
		@media (max-width: 500px) {
		display: none;
		}
		}
		}
`;		`;

const Configure = () => {		const Configure = () => {
const ContextValue = React.useContext(WalletContext);		const ContextValue = React.useContext(WalletContext);
const authentication = React.useContext(AuthenticationContext);		const authentication = React.useContext(AuthenticationContext);
const { wallet, apiError } = ContextValue;		const { wallet, apiError } = ContextValue;
const location = useLocation();		const location = useLocation();

▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Lines	const Configure = () => {
const [showManualAddContactModal, setShowManualAddContactModal] =		const [showManualAddContactModal, setShowManualAddContactModal] =
useState(false);		useState(false);
const [manualContactName, setManualContactName] = useState('');		const [manualContactName, setManualContactName] = useState('');
const [manualContactAddress, setManualContactAddress] = useState('');		const [manualContactAddress, setManualContactAddress] = useState('');
const [manualContactNameIsValid, setManualContactNameIsValid] =		const [manualContactNameIsValid, setManualContactNameIsValid] =
useState(null);		useState(null);
const [manualContactAddressIsValid, setManualContactAddressIsValid] =		const [manualContactAddressIsValid, setManualContactAddressIsValid] =
useState(null);		useState(null);
		const { width } = useWindowDimensions();

		const scannerSupported = width < 769 && isMobile && !(isIOS && !isSafari);

useEffect(() => {		useEffect(() => {
// Update savedWallets every time the active wallet changes		// Update savedWallets every time the active wallet changes
updateSavedWallets(wallet);		updateSavedWallets(wallet);
}, [wallet]);		}, [wallet]);

useEffect(async () => {		useEffect(async () => {
const detectedBrowserLang = navigator.language;		const detectedBrowserLang = navigator.language;
▲ Show 20 Lines • Show All 361 Lines • ▼ Show 20 Lines	const renameContactByName = async contactObj => {
);		);
}		}
};		};

const handleSendModalToggle = checkedState => {		const handleSendModalToggle = checkedState => {
changeCashtabSettings('sendModal', checkedState);		changeCashtabSettings('sendModal', checkedState);
};		};

		const handleCameraOverride = checkedState => {
		changeCashtabSettings('autoCameraOn', checkedState);
		};

const getContactNameByAddress = contactAddress => {		const getContactNameByAddress = contactAddress => {
if (!contactAddress) {		if (!contactAddress) {
return;		return;
}		}

// filter contact from local contact list array		// filter contact from local contact list array
const filteredContactList = contactListArray.filter(		const filteredContactList = contactListArray.filter(
element => element.address === contactAddress,		element => element.address === contactAddress,
▲ Show 20 Lines • Show All 880 Lines • ▼ Show 20 Lines	return (
checkedChildren={<CheckOutlined />}		checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}		unCheckedChildren={<CloseOutlined />}
checked={		checked={
cashtabSettings ? cashtabSettings.sendModal : false		cashtabSettings ? cashtabSettings.sendModal : false
}		}
onChange={handleSendModalToggle}		onChange={handleSendModalToggle}
/>		/>
</GeneralSettingsItem>		</GeneralSettingsItem>
		{scannerSupported && (
		<GeneralSettingsItem>
		<AutoCameraTextCtn>
		<LockFilled /> Auto-open camera{' '}
		<HideableTextContainer>
		on send
		</HideableTextContainer>
		</AutoCameraTextCtn>
		<Switch
		size="small"
		checkedChildren={<CheckOutlined />}
		unCheckedChildren={<CloseOutlined />}
		checked={
		cashtabSettings
		? cashtabSettings.autoCameraOn
		: false
		}
		onChange={handleCameraOverride}
		/>
		</GeneralSettingsItem>
		)}
<StyledSpacer />		<StyledSpacer />
<SettingsLinkCtn>		<SettingsLinkCtn>
[		[
<SettingsLink		<SettingsLink
type="link"		type="link"
href="https://docs.cashtab.com/docs/"		href="https://docs.cashtab.com/docs/"
target="_blank"		target="_blank"
rel="noreferrer"		rel="noreferrer"
Show All 11 Lines