diff --git a/web/cashtab/src/components/OnBoarding/OnBoarding.js b/web/cashtab/src/components/OnBoarding/OnBoarding.js index ee93a636e..c2886eee0 100644 --- a/web/cashtab/src/components/OnBoarding/OnBoarding.js +++ b/web/cashtab/src/components/OnBoarding/OnBoarding.js @@ -1,137 +1,152 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { WalletContext } from '@utils/context'; import { Input, Form, Modal } from 'antd'; import { ExclamationCircleOutlined, PlusSquareOutlined, ImportOutlined, LockOutlined, } from '@ant-design/icons'; import StyledOnboarding from '@components/Common/StyledOnBoarding'; import PrimaryButton, { SecondaryButton, SmartButton, } from '@components/Common/PrimaryButton'; import { currency } from '@components/Common/Ticker.js'; import { Event } from '@utils/GoogleAnalytics'; export const WelcomeText = styled.p` color: #444; width: 100%; font-size: 16px; margin-bottom: 60px; text-align: left; `; +export const WelcomeLink = styled.a` + text-decoration: underline; + color: #ff8d00; +`; + 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: , 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 ( <> +

Welcome to Cashtab!

- Welcome to Cashtab! Cashtab is an open source, non-custodial web - wallet for {currency.name}. -
-
- Web wallets offer user convenience, but storing large amounts of - money on a web wallet is not recommended. + Cashtab is an{' '} + + open source, + {' '} + non-custodial web wallet for {currency.name}.

- Create a new wallet below to get started, or import an existing - wallet using a seed phrase. + Want to learn more?{' '} + + Check out the Cashtab documentation. +
showBackupConfirmModal()}> New Wallet openSeedInput(!seedInput)}> Import Wallet {seedInput && (
} placeholder="mnemonic (seed phrase)" name="mnemonic" autoComplete="off" onChange={e => handleChange(e)} required /> submit()} > Import
)} ); }; diff --git a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap b/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap index 4ae96d9cf..2defbd14c 100644 --- a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap +++ b/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap @@ -1,488 +1,508 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Wallet with BCH balances 1`] = ` Array [
0.06047469 BCHA
,
$ NaN USD
,
Copied
qzagy4 7mvh6qxkvcn3acjnz73rkhkc6y7cpt zgcqy6
,
BCHA
SLPA
, View Transactions , ] `; exports[`Wallet with BCH balances and tokens 1`] = ` Array [
0.06047469 BCHA
,
$ NaN USD
,
Copied
qzagy4 7mvh6qxkvcn3acjnz73rkhkc6y7cpt zgcqy6
,
BCHA
SLPA
, View Transactions ,

SLPA Tokens

identicon of tokenId bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba
6.001 TBS
, ] `; exports[`Wallet without BCH balance 1`] = ` Array [
🎉 Congratulations on your new wallet! 🎉
Start using the wallet immediately to receive BCHA payments, or load it up with BCHA to send to others
,
0 BCHA
,
Copied
qzagy4 7mvh6qxkvcn3acjnz73rkhkc6y7cpt zgcqy6
,
BCHA
SLPA
, ] `; exports[`Without wallet defined 1`] = ` Array [ +

+ Welcome to Cashtab! +

,

- Welcome to Cashtab! Cashtab is an open source, non-custodial web wallet for + Cashtab is an + + + open source, + + + non-custodial web wallet for Bitcoin ABC .

- Web wallets offer user convenience, but storing large amounts of money on a web wallet is not recommended. -
-
- Create a new wallet below to get started, or import an existing wallet using a seed phrase. + Want to learn more? + + + Check out the Cashtab documentation. +

, , , ] `;