Differential D8933 Diff 27145 web/cashtab/mobile/components/OnBoarding/OnBoarding.js

Changeset View

Standalone View

web/cashtab/mobile/components/OnBoarding/OnBoarding.js

This file was added.

				import React, { useState } from 'react';
				import { Text, Button } from 'react-native';
				import { WalletContext } from '../../utils/context';
				import { Modal } from 'antd';
				import { ExclamationCircleOutlined } from '@ant-design/icons';
				import { FontAwesome } from '@expo/vector-icons';
				import { currency } from '../Common/Ticker.js';
				import { Event } from '../../utils/GoogleAnalytics';
				import colorScheme from '../../constants/colorScheme';

				export const OnBoarding = ({ history }) => {
				const ContextValue = React.useContext(WalletContext);
				const { createWallet, validateMnemonic } = ContextValue;
				const [formData, setFormData] = useState({
				dirty: true,
				mnemonic: '',
				});

				const [seedInput, openSeedInput] = useState(false);
				const [isValidMnemonic, setIsValidMnemonic] = useState(false);
				const { confirm } = Modal;

				async function submit() {
				setFormData({
				...formData,
				dirty: false,
				});

				if (!formData.mnemonic) {
				return;
				}
				// Event("Category", "Action", "Label")
				// Track number of created wallets from onboarding
				Event('Onboarding.js', 'Create Wallet', 'Imported');
				createWallet(formData.mnemonic);
				}

				const handleChange = e => {
				const { value, name } = e.target;

				// Validate mnemonic on change
				// Import button should be disabled unless mnemonic is valid
				setIsValidMnemonic(validateMnemonic(value));

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

				function showBackupConfirmModal() {
				confirm({
				title: "Don't forget to back up your wallet",
				icon: <ExclamationCircleOutlined />,
				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!',
				onOk() {
				// Event("Category", "Action", "Label")
				// Track number of created wallets from onboarding
				Event('Onboarding.js', 'Create Wallet', 'New');
				createWallet();
				},
				});
				}

				return (
				<>
				<Text>
				Welcome to CashTab! CashTab is an open source, non-custodial web
				wallet for {currency.name}.
				<br />
				<br />
				Web wallets offer user convenience, but storing large amounts of
				money on a web wallet is not recommended.
				<br />
				<br />
				Create a new wallet below to get started, or import an existing
				wallet using a seed phrase.
				</Text>

				<FontAwesome.Button
				name="plus-square-o"
				onPress={() => showBackupConfirmModal()}
				backgroundColor={colorScheme.primaryButton.backgroundColor}
				>
				<Text
				style={{
				color: colorScheme.primaryButton.textColor,
				textAlign: 'center',
				}}
				>
				New Wallet
				</Text>
				</FontAwesome.Button>

				<FontAwesome.Button
				name="sign-in"
				onPress={() => openSeedInput(!seedInput)}
				backgroundColor={colorScheme.secondaryButton.backgroundColor}
				>
				<Text
				style={{
				color: colorScheme.secondaryButton.textColor,
				textAlign: 'center',
				}}
				>
				Import Wallet
				</Text>
				</FontAwesome.Button>

				{/* {seedInput && (
				<StyledOnboarding>
				<Form style={{ width: 'auto' }}>
				<Form.Item
				validateStatus={
				!formData.dirty && !formData.mnemonic
				? 'error'
				: ''
				}
				help={
				!formData.mnemonic \|\| !isValidMnemonic
				? 'Valid mnemonic seed phrase required'
				: ''
				}
				>
				<Input
				prefix={<LockOutlined />}
				placeholder="mnemonic (seed phrase)"
				name="mnemonic"
				onChange={e => handleChange(e)}
				required
				/>
				</Form.Item>

				<SmartButton
				disabled={!isValidMnemonic}
				onClick={() => submit()}
				>
				Import
				</SmartButton>
				</Form>
				</StyledOnboarding>
				)} */}
				</>
				);
				};