Differential D10970 Diff 32402 web/cashtab/src/components/OnBoarding/OnBoarding.js

Changeset View

Standalone View

web/cashtab/src/components/OnBoarding/OnBoarding.js

Show All 10 Lines
} from '@ant-design/icons';		} from '@ant-design/icons';
import PrimaryButton, {		import PrimaryButton, {
SecondaryButton,		SecondaryButton,
SmartButton,		SmartButton,
} from '@components/Common/PrimaryButton';		} from '@components/Common/PrimaryButton';
import { currency } from '@components/Common/Ticker.js';		import { currency } from '@components/Common/Ticker.js';
import { Event } from '@utils/GoogleAnalytics';		import { Event } from '@utils/GoogleAnalytics';

		export const WelcomeCtn = styled.div`
		margin-top: 20px;
		padding: 0px 30px;
		color: ${props => props.theme.contrast};
		h2 {
		color: ${props => props.theme.contrast};
		}
		`;

export const WelcomeText = styled.p`		export const WelcomeText = styled.p`
color: ${props => props.theme.wallet.text.secondary};
width: 100%;		width: 100%;
font-size: 16px;		font-size: 16px;
margin-bottom: 60px;		margin-bottom: 60px;
text-align: left;		text-align: left;
`;		`;

export const WelcomeLink = styled.a`		export const WelcomeLink = styled.a`
text-decoration: underline;		text-decoration: underline;
color: ${props => props.theme.primary};		color: ${props => props.theme.eCashBlue};
		:hover {
		color: ${props => props.theme.eCashPurple} !important;
		text-decoration: underline !important;
		}
`;		`;

const OnBoarding = () => {		const OnBoarding = () => {
const ContextValue = React.useContext(WalletContext);		const ContextValue = React.useContext(WalletContext);
const { createWallet, validateMnemonic } = ContextValue;		const { createWallet, validateMnemonic } = ContextValue;
const [formData, setFormData] = useState({		const [formData, setFormData] = useState({
dirty: true,		dirty: true,
mnemonic: '',		mnemonic: '',
Show All 27 Lines	const handleChange = e => {

setFormData(p => ({ ...p, [name]: value }));		setFormData(p => ({ ...p, [name]: value }));
};		};

function showBackupConfirmModal() {		function showBackupConfirmModal() {
confirm({		confirm({
title: "Don't forget to back up your wallet",		title: "Don't forget to back up your wallet",
icon: <ExclamationCircleOutlined />,		icon: <ExclamationCircleOutlined />,
		cancelButtonProps: { style: { display: 'none' } },
content: `Once your wallet is created you can back it up by writing down your 12-word seed. You can find your seed on the Settings page. If you are browsing in Incognito mode or if you clear your browser history, you will lose any funds that are not backed up!`,		content: `Once your wallet is created you can back it up by writing down your 12-word seed. You can find your seed on the Settings page. If you are browsing in Incognito mode or if you clear your browser history, you will lose any funds that are not backed up!`,
okText: 'Okay, make me a wallet!',		okText: 'Okay, make me a wallet!',
onOk() {		onOk() {
// Event("Category", "Action", "Label")		// Event("Category", "Action", "Label")
// Track number of created wallets from onboarding		// Track number of created wallets from onboarding
Event('Onboarding.js', 'Create Wallet', 'New');		Event('Onboarding.js', 'Create Wallet', 'New');
createWallet();		createWallet();
},		},
});		});
}		}

return (		return (
<>		<WelcomeCtn>
<h2>Welcome to Cashtab!</h2>		<h2>Welcome to Cashtab!</h2>
<WelcomeText>		<WelcomeText>
Cashtab is an{' '}		Cashtab is an{' '}
<WelcomeLink		<WelcomeLink
href="https://github.com/bitcoin-abc/bitcoin-abc"		href="https://github.com/bitcoin-abc/bitcoin-abc"
target="_blank"		target="_blank"
rel="noreferrer"		rel="noreferrer"
>		>
▲ Show 20 Lines • Show All 49 Lines • ▼ Show 20 Lines	return (
disabled={!isValidMnemonic}		disabled={!isValidMnemonic}
onClick={() => submit()}		onClick={() => submit()}
>		>
Import		Import
</SmartButton>		</SmartButton>
</Form>		</Form>
</AntdFormWrapper>		</AntdFormWrapper>
)}		)}
</>		</WelcomeCtn>
);		);
};		};

export default OnBoarding;		export default OnBoarding;