Differential D19604 Diff 58737 cashtab/src/components/BackupWallet/BackupWallet.tsx

Changeset View

Standalone View

cashtab/src/components/BackupWallet/BackupWallet.tsx

	// Copyright (c) 2024 The Bitcoin developers			// Copyright (c) 2024 The Bitcoin developers
	// Distributed under the MIT software license, see the accompanying			// Distributed under the MIT software license, see the accompanying
	// file COPYING or http://www.opensource.org/licenses/mit-license.php.			// file COPYING or http://www.opensource.org/licenses/mit-license.php.

	import React, { useState, useContext } from 'react';			import { useState, useContext } from 'react';
	import { WalletContext, isWalletContextLoaded } from 'wallet/context';			import { WalletContext, isWalletContextLoaded } from 'wallet/context';
	import styled from 'styled-components';			import styled from 'styled-components';
	import CopyToClipboard from 'components/Common/CopyToClipboard';			import CopyToClipboard from 'components/Common/CopyToClipboard';
	import Seed from 'components/Common/Seed';			import Seed from 'components/Common/Seed';
	import Switch from 'components/Common/Switch';			import Switch from 'components/Common/Switch';
	import { getUserLocale } from 'helpers';			import { getUserLocale } from 'helpers';
	import { Alert, Info, PageHeader } from 'components/Common/Atoms';			import { Alert, Info } from 'components/Common/Atoms';
	import { WalletIcon } from 'components/Common/CustomIcons';			import { ReactComponent as WarningIcon } from 'assets/warning.svg';
				import {
				SettingsPageHeaderLink,
				BackIcon,
				} from 'components/Configure/Configure';

	const BackupFlex = styled.div`			const BackupFlex = styled.div`
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: ${props => props.theme.primaryText};			color: ${props => props.theme.primaryText};
	background: ${props => props.theme.primaryBackground};
	padding: 20px;			padding: 20px;
	padding-bottom: 60px;			padding-bottom: 60px;
	border-radius: 10px;			width: 100%;
	@media (max-width: 768px) {
	border-radius: 0px;
	}
	`;			`;
	const FlexRow = styled.div`			const FlexRow = styled.div`
	display: flex;			display: flex;
	align-items: center;			align-items: center;
	justify-content: center;			justify-content: center;
	margin: 40px 0 0px;			margin: 40px 0 0px;
	background: ${props => props.theme.secondaryBackground};			background: ${props => props.theme.inputBackground};
	padding: 20px;			padding: 20px;
	border-radius: 10px;			border-radius: 10px;
	border: 1px solid ${props => props.theme.border};			border: 1px solid ${props => props.theme.border};
	`;			`;
	const SwitchRow = styled.div`			const SwitchRow = styled.div`
	display: flex;			display: flex;
	align-items: center;			align-items: center;
	justify-content: center;			justify-content: center;
	width: 100%;			width: 100%;
	gap: 12px;			gap: 12px;
	margin-top: 20px;			margin-top: 20px;
	`;			`;
	const SwitchLabel = styled.div``;			const SwitchLabel = styled.div``;

				const AlertContent = styled.div`
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				svg {
				flex-shrink: 0;
				width: 24px;
				height: 24px;
				margin-top: 2px;
				fill: #d8c705;
				}
				`;

	const BackupWallet = () => {			const BackupWallet = () => {
	const ContextValue = useContext(WalletContext);			const ContextValue = useContext(WalletContext);
	if (!isWalletContextLoaded(ContextValue)) {			if (!isWalletContextLoaded(ContextValue)) {
	// Confirm we have all context required to load the page			// Confirm we have all context required to load the page
	return null;			return null;
	}			}
	const { ecashWallet, getWalletByAddress } = ContextValue;			const { ecashWallet, getWalletByAddress } = ContextValue;
	if (!ecashWallet) {			if (!ecashWallet) {
	return null;			return null;
	}			}

	const userLocale = getUserLocale(navigator);			const userLocale = getUserLocale(navigator);
	const [showSeed, setShowSeed] = useState(false);			const [showSeed, setShowSeed] = useState(false);

	const storedActiveWallet = getWalletByAddress(ecashWallet.address);			const storedActiveWallet = getWalletByAddress(ecashWallet.address);
	if (!storedActiveWallet) {			if (!storedActiveWallet) {
	return null;			return null;
	}			}

	return (			return (
	<BackupFlex>			<BackupFlex>
	<PageHeader>			<SettingsPageHeaderLink
	Wallet Backup <WalletIcon />			to="/configure"
	</PageHeader>			aria-label="Back to settings"
				>
				<BackIcon aria-hidden="true" />
				Wallet Backup
				</SettingsPageHeaderLink>
	<Info>			<Info>
	ℹ️ Your seed phrase is the only way to restore your wallet.			ℹ️ Your seed phrase is the only way to restore your wallet.
	Write it down. Keep it safe.			Write it down. Keep it safe.
	</Info>			</Info>

	<Alert className="notranslate">			<Alert className="notranslate">
				<AlertContent>
				<WarningIcon title="Warning" aria-hidden="true" />
	<b>			<b>
	⚠️ NEVER SHARE YOUR SEED PHRASE			NEVER SHARE YOUR SEED PHRASE
	{!userLocale.includes('en-') && (			{!userLocale.includes('en-') && (
	<>			<>
	<br />			<br />
	<br />			<br />
	⚠️ STORE YOUR SEED PHRASE IN ENGLISH			STORE YOUR SEED PHRASE IN ENGLISH
	</>			</>
	)}			)}
	</b>			</b>
				</AlertContent>
	</Alert>			</Alert>

	<SwitchRow>			<SwitchRow>
	<Switch			<Switch
	name="send-confirmations-switch"			name="send-confirmations-switch"
	checked={showSeed}			checked={showSeed}
	handleToggle={() => setShowSeed(!showSeed)}			handleToggle={() => setShowSeed(!showSeed)}
	/>			/>
	Show All 19 Lines