diff --git a/web/cashtab/extension/src/components/App.js b/web/cashtab/extension/src/components/App.js
--- a/web/cashtab/extension/src/components/App.js
+++ b/web/cashtab/extension/src/components/App.js
@@ -1,17 +1,18 @@
import React, { useState } from 'react';
import 'antd/dist/antd.less';
import { Spin } from 'antd';
-import { CashLoadingIcon } from '@components/Common/CustomIcons';
+import {
+ CashLoadingIcon,
+ HomeIcon,
+ SendIcon,
+ ReceiveIcon,
+ SettingsIcon,
+} from '@components/Common/CustomIcons';
import '../index.css';
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
import { theme } from '@assets/styles/theme';
-import {
- FolderOpenFilled,
- CaretRightOutlined,
- SettingFilled,
- AppstoreAddOutlined,
-} from '@ant-design/icons';
-import Wallet from '@components/Wallet/Wallet';
+import Home from '@components/Home/Home';
+import Receive from '@components/Receive/Receive';
import Tokens from '@components/Tokens/Tokens';
import Send from '@components/Send/Send';
import SendToken from '@components/Send/SendToken';
@@ -21,7 +22,6 @@
import './App.css';
import { WalletContext } from '@utils/context';
import { isValidStoredWallet } from '@utils/cashMethods';
-import WalletLabel from '@components/Common/WalletLabel.js';
import {
Route,
Redirect,
@@ -33,30 +33,61 @@
import PopOut from '@assets/popout.svg';
const GlobalStyle = createGlobalStyle`
+ *::placeholder {
+ color: ${props => props.theme.forms.placeholder} !important;
+ }
+ *::selection {
+ background: ${props => props.theme.eCashBlue} !important;
+ }
+ .ant-modal-content, .ant-modal-header, .ant-modal-title {
+ background-color: ${props => props.theme.modal.background} !important;
+ color: ${props => props.theme.modal.color} !important;
+ }
+ .ant-modal-content svg {
+ fill: ${props => props.theme.modal.color};
+ }
+ .ant-modal-footer button {
+ background-color: ${props =>
+ props.theme.modal.buttonBackground} !important;
+ color: ${props => props.theme.modal.color} !important;
+ border-color: ${props => props.theme.modal.border} !important;
+ :hover {
+ background-color: ${props => props.theme.eCashBlue} !important;
+ }
+ }
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button, #cropControlsConfirm{
- border-radius: 8px;
- background-color: ${props => props.theme.modals.buttons.background};
- color: ${props => props.theme.wallet.text.secondary};
- font-weight: bold;
+ border-radius: 3px;
+ border-radius: 3px;
+ background-color: ${props =>
+ props.theme.modal.buttonBackground} !important;
+ color: ${props => props.theme.modal.color} !important;
+ border-color: ${props => props.theme.modal.border} !important;
+ :hover {
+ background-color: ${props => props.theme.eCashBlue} !important;
+ }
+ text-shadow: none !important;
+ text-shadow: none !important;
}
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover, #cropControlsConfirm:hover {
- color: ${props => props.theme.primary};
- transition: color 0.3s;
- background-color: ${props => props.theme.modals.buttons.background};
+ color: ${props => props.theme.contrast};
+ transition: all 0.3s;
+ background-color: ${props => props.theme.eCashBlue};
+ border-color: ${props => props.theme.eCashBlue};
}
- .selectedCurrencyOption {
+ .selectedCurrencyOption, .ant-select-dropdown {
text-align: left;
- color: ${props => props.theme.wallet.text.secondary} !important;
- background-color: ${props => props.theme.contrast} !important;
+ color: ${props => props.theme.contrast} !important;
+ background-color: ${props =>
+ props.theme.collapses.expandedBackground} !important;
}
.cashLoadingIcon {
- color: ${props => props.theme.primary} !important;
+ color: ${props => props.theme.eCashBlue} !important;
font-size: 48px !important;
}
.selectedCurrencyOption:hover {
color: ${props => props.theme.contrast} !important;
- background-color: ${props => props.theme.primary} !important;
+ background-color: ${props => props.theme.eCashBlue} !important;
}
#addrSwitch, #cropSwitch {
.ant-switch-checked {
@@ -72,27 +103,42 @@
background-color: ${props => props.theme.forms.border} !important;
}
.ant-slider-track {
- background-color: ${props => props.theme.primary} !important;
+ background-color: ${props => props.theme.eCashBlue} !important;
+ }
+ .ant-descriptions-bordered .ant-descriptions-row {
+ background: ${props => props.theme.contrast};
+ }
+ .ant-modal-confirm-content, .ant-modal-confirm-title {
+ color: ${props => props.theme.contrast} !important;
}
`;
const CustomApp = styled.div`
text-align: center;
font-family: 'Gilroy', sans-serif;
- background-color: ${props => props.theme.app.background};
+ font-family: 'Poppins', sans-serif;
+ background-color: ${props => props.theme.backgroundColor};
+ background-size: 100px 171px;
+ background-image: ${props => props.theme.backgroundImage};
+ background-attachment: fixed;
`;
const Footer = styled.div`
z-index: 2;
- background-color: ${props => props.theme.footer.background};
- border-radius: 20px;
+ height: 80px;
+ border-top: 1px solid rgba(255, 255, 255, 0.5);
+ background-color: ${props => props.theme.footerBackground};
position: fixed;
bottom: 0;
width: 500px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 50px;
@media (max-width: 768px) {
width: 100%;
+ padding: 0 20px;
}
- border-top: 1px solid ${props => props.theme.wallet.borders.color};
`;
export const NavButton = styled.button`
@@ -101,34 +147,22 @@
outline: none;
}
cursor: pointer;
- padding: 24px 12px 12px 12px;
- margin: 0 28px;
- @media (max-width: 475px) {
- margin: 0 20px;
- }
- @media (max-width: 420px) {
- margin: 0 12px;
- }
- @media (max-width: 350px) {
- margin: 0 8px;
- }
- background-color: ${props => props.theme.footer.background};
+ padding: 0;
+ background: none;
border: none;
- font-size: 12px;
- font-weight: bold;
- .anticon {
- display: block;
- color: ${props => props.theme.footer.navIconInactive};
- font-size: 24px;
- margin-bottom: 6px;
+ font-size: 10px;
+ svg {
+ fill: ${props => props.theme.contrast};
+ width: 26px;
+ height: auto;
}
${({ active, ...props }) =>
active &&
- `
- color: ${props.theme.primary};
- .anticon {
- color: ${props.theme.primary};
- }
+ `
+ color: ${props.theme.navActive};
+ svg {
+ fill: ${props.theme.navActive};
+ }
`}
`;
@@ -138,20 +172,17 @@
justify-content: center;
width: 100%;
min-height: 100vh;
- background-image: ${props => props.theme.app.sidebars};
- background-attachment: fixed;
`;
export const WalletCtn = styled.div`
position: relative;
width: 500px;
- background-color: ${props => props.theme.footerBackground};
min-height: 100vh;
- padding: 10px 30px 120px 30px;
- background: ${props => props.theme.wallet.background};
- -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
- -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
- box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
+ padding: 0 0 100px;
+ background: ${props => props.theme.walletBackground};
+ -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
+ -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
+ box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
@media (max-width: 768px) {
width: 100%;
-webkit-box-shadow: none;
@@ -163,27 +194,9 @@
export const HeaderCtn = styled.div`
display: flex;
align-items: center;
- justify-content: center;
- width: 100%;
- padding: 20px 0 30px;
- margin-bottom: 20px;
justify-content: space-between;
- border-bottom: 1px solid ${props => props.theme.wallet.borders.color};
-
- a {
- color: ${props => props.theme.wallet.text.secondary};
-
- :hover {
- color: ${props => props.theme.primary};
- }
- }
-
- @media (max-width: 768px) {
- a {
- font-size: 12px;
- }
- padding: 10px 0 20px;
- }
+ width: 100%;
+ padding: 15px;
`;
export const CashTabLogo = styled.img`
@@ -244,10 +257,16 @@
{/*Note that the extension does not support biometric security*/}
{/*Hence is not pulled in*/}
-
-
+
+
+
+
history.push('/wallet')}
>
-
- Wallet
+
history.push('/tokens')}
+ active={selectedKey === 'send'}
+ onClick={() => history.push('/send')}
>
-
- eTokens
+
-
history.push('/send')}
+ active={selectedKey === 'receive'}
+ onClick={() => history.push('receive')}
>
-
- Send
+
history.push('/configure')}
>
-
- Settings
+
) : null}
diff --git a/web/cashtab/public/cashtab_bg.png b/web/cashtab/public/cashtab_bg.png
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@Alert Circle
\ No newline at end of file
diff --git a/web/cashtab/src/assets/cashtab_xec.png b/web/cashtab/src/assets/cashtab_xec.png
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@Cog
\ No newline at end of file
diff --git a/web/cashtab/src/assets/flask.svg b/web/cashtab/src/assets/flask.svg
new file mode 100644
--- /dev/null
+++ b/web/cashtab/src/assets/flask.svg
@@ -0,0 +1 @@
+Flask
\ No newline at end of file
diff --git a/web/cashtab/src/assets/fonts/Poppins-Bold.ttf b/web/cashtab/src/assets/fonts/Poppins-Bold.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@
+
+
+
+
+
+
diff --git a/web/cashtab/src/assets/receive.svg b/web/cashtab/src/assets/receive.svg
new file mode 100644
--- /dev/null
+++ b/web/cashtab/src/assets/receive.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/cashtab/src/assets/send.svg b/web/cashtab/src/assets/send.svg
new file mode 100644
--- /dev/null
+++ b/web/cashtab/src/assets/send.svg
@@ -0,0 +1 @@
+Send
\ No newline at end of file
diff --git a/web/cashtab/src/assets/styles/theme.js b/web/cashtab/src/assets/styles/theme.js
--- a/web/cashtab/src/assets/styles/theme.js
+++ b/web/cashtab/src/assets/styles/theme.js
@@ -1,69 +1,45 @@
export const theme = {
- primary: '#00ABE7',
- brandSecondary: '#CD0BC3',
+ eCashBlue: '#00ABE7',
+ eCashPurple: '#ff21d0',
+ darkBlue: '#273498',
contrast: '#fff',
- app: {
- sidebars: `url("/cashtab_bg.png")`,
- background: '#fbfbfd',
- },
- wallet: {
- background: '#fff',
- encryption: '#DC143C',
- text: {
- primary: '#273498',
- secondary: '#273498',
- },
- switch: {
- activeCash: {
- shadow: 'inset 8px 8px 16px #0074C2, inset -8px -8px 16px #273498',
- },
- activeToken: {
- background: '#CD0BC3',
- shadow: 'inset 5px 5px 11px #FF21D0, inset -5px -5px 11px #CD0BC3',
- },
- inactive: {
- background: 'linear-gradient(145deg, #eeeeee, #c8c8c8)',
- },
- },
- borders: { color: '#e2e2e2' },
- shadow: 'rgba(0, 0, 0, 1)',
- },
- tokenListItem: {
- background: '#ffffff',
- color: '',
- boxShadow:
- 'rgb(136 172 243 / 25%) 0px 10px 30px,rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px',
- border: '#e9eaed',
- hoverBorder: '#231F20',
- },
- footer: {
- background: '#fff',
- navIconInactive: '#949494',
+ backgroundImage: `url("/cashtab_bg.png")`,
+ backgroundColor: '#d5d5d7',
+ walletBackground: '#152b45',
+ walletInfoContainer: '#255173',
+ footerBackground: '#152b45',
+ navActive: '#00ABE7',
+ encryptionRed: '#DC143C',
+ genesisGreen: '#00e781',
+ receivedMessage: 'rgba(0,171,231,0.2)',
+ sentMessage: 'rgba(255, 255, 255, 0.1)',
+ lightWhite: 'rgba(255,255,255,0.4)',
+ dropdownText: '#000',
+ shadow: 'rgba(0, 0, 0, 0.4)',
+ switchButtonActiveText: '#fff',
+ advancedCollapse: {
+ background: '#255173',
+ color: '#fff',
+ icon: '#fff',
+ expandedBackground: 'rgba(0,0,0,0.2)',
},
forms: {
error: '#FF21D0',
- border: '#e7edf3',
- text: '#001137',
- addonBackground: '#f4f4f4',
- addonForeground: '#3e3f42',
- selectionBackground: '#fff',
- darkLabel: '#0074c2',
- lightLabel: '#c0c0c0',
- },
- icons: { outlined: '#273498' },
- modals: {
- buttons: { background: '#fff' },
+ border: '#17171f',
+ text: '#fff',
+ addonBackground: '#255173',
+ addonForeground: '#fff',
+ selectionBackground: '#255173',
+ placeholder: 'rgba(255,255,255,0.3)',
+ highlightBox: '#00ABE7',
},
+ icons: { outlined: '#fff' },
settings: {
delete: '#CD0BC3',
- background: '#eee',
+ background: 'rgba(0,0,0,0.4)',
},
qr: {
- copyBorderCash: '#00ABE7',
- copyBorderToken: '#FF21D0',
background: '#fff',
- token: '#231F20',
- shadow: 'rgb(136 172 243 / 25%) 0px 10px 30px, rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px',
},
buttons: {
primary: {
@@ -74,23 +50,22 @@
disabledOverlay: 'rgba(255, 255, 255, 0.5)',
},
secondary: {
- background: '#e9eaed',
- color: '#444',
+ background: '#4b67e1',
+ color: '#fff',
hoverShadow: '0px 3px 10px -5px rgba(0, 0, 0, 0.75)',
disabledOverlay: 'rgba(255, 255, 255, 0.5)',
},
},
collapses: {
- background: '#fbfcfd',
- expandedBackground: '#fff',
- border: '#eaedf3',
- color: '#3e3f42',
+ background: '#255173',
+ expandedBackground: '#26415a',
+ border: '#17171f',
+ color: '#fff',
},
- generalSettings: {
- item: {
- icon: '#949494',
- title: '#949494',
- },
- background: '#fff',
+ modal: {
+ background: '#255173',
+ border: '#17171f',
+ color: '#fff',
+ buttonBackground: '#26415a',
},
};
diff --git a/web/cashtab/src/components/App.css b/web/cashtab/src/components/App.css
--- a/web/cashtab/src/components/App.css
+++ b/web/cashtab/src/components/App.css
@@ -2,6 +2,20 @@
@import '~@fortawesome/fontawesome-free/css/all.css';
@import url('https://fonts.googleapis.com/css?family=Khula&display=swap&.css');
+@font-face {
+ font-family: 'Poppins';
+ src: local('Poppins'),
+ url(../assets/fonts/Poppins-Regular.ttf) format('truetype');
+ font-weight: normal;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: local('Poppins'),
+ url(../assets/fonts/Poppins-Bold.ttf) format('truetype');
+ font-weight: 700;
+}
+
/* Hide scrollbars but keep functionality*/
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
diff --git a/web/cashtab/src/components/App.js b/web/cashtab/src/components/App.js
--- a/web/cashtab/src/components/App.js
+++ b/web/cashtab/src/components/App.js
@@ -1,17 +1,18 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import 'antd/dist/antd.less';
-import { Modal, Spin } from 'antd';
-import { CashLoadingIcon } from '@components/Common/CustomIcons';
+import { Spin } from 'antd';
+import {
+ CashLoadingIcon,
+ HomeIcon,
+ SendIcon,
+ ReceiveIcon,
+ SettingsIcon,
+} from '@components/Common/CustomIcons';
import '../index.css';
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
import { theme } from '@assets/styles/theme';
-import {
- FolderOpenFilled,
- CaretRightOutlined,
- SettingFilled,
- AppstoreAddOutlined,
-} from '@ant-design/icons';
-import Wallet from '@components/Wallet/Wallet';
+import Home from '@components/Home/Home';
+import Receive from '@components/Receive/Receive';
import Tokens from '@components/Tokens/Tokens';
import Send from '@components/Send/Send';
import SendToken from '@components/Send/SendToken';
@@ -21,7 +22,6 @@
import './App.css';
import { WalletContext } from '@utils/context';
import { isValidStoredWallet } from '@utils/cashMethods';
-import WalletLabel from '@components/Common/WalletLabel.js';
import {
Route,
Redirect,
@@ -31,36 +31,64 @@
} from 'react-router-dom';
// Easter egg imports not used in extension/src/components/App.js
import TabCash from '@assets/tabcash.png';
-import ABC from '@assets/logo_topright.png';
import { checkForTokenById } from '@utils/tokenMethods.js';
// Biometric security import not used in extension/src/components/App.js
import ProtectableComponentWrapper from './Authentication/ProtectableComponentWrapper';
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyle`
+ *::placeholder {
+ color: ${props => props.theme.forms.placeholder} !important;
+ }
+ *::selection {
+ background: ${props => props.theme.eCashBlue} !important;
+ }
+ .ant-modal-content, .ant-modal-header, .ant-modal-title {
+ background-color: ${props => props.theme.modal.background} !important;
+ color: ${props => props.theme.modal.color} !important;
+ }
+ .ant-modal-content svg {
+ fill: ${props => props.theme.modal.color};
+ }
+ .ant-modal-footer button {
+ background-color: ${props =>
+ props.theme.modal.buttonBackground} !important;
+ color: ${props => props.theme.modal.color} !important;
+ border-color: ${props => props.theme.modal.border} !important;
+ :hover {
+ background-color: ${props => props.theme.eCashBlue} !important;
+ }
+ }
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button, #cropControlsConfirm {
- border-radius: 8px;
- background-color: ${props => props.theme.modals.buttons.background};
- color: ${props => props.theme.wallet.text.secondary};
- font-weight: bold;
+ border-radius: 3px;
+ background-color: ${props =>
+ props.theme.modal.buttonBackground} !important;
+ color: ${props => props.theme.modal.color} !important;
+ border-color: ${props => props.theme.modal.border} !important;
+ :hover {
+ background-color: ${props => props.theme.eCashBlue} !important;
+ }
+ text-shadow: none !important;
}
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover, #cropControlsConfirm:hover {
- color: ${props => props.theme.primary};
- transition: color 0.3s;
- background-color: ${props => props.theme.modals.buttons.background};
+ color: ${props => props.theme.contrast};
+ transition: all 0.3s;
+ background-color: ${props => props.theme.eCashBlue};
+ border-color: ${props => props.theme.eCashBlue};
}
- .selectedCurrencyOption {
+ .selectedCurrencyOption, .ant-select-dropdown {
text-align: left;
- color: ${props => props.theme.wallet.text.secondary} !important;
- background-color: ${props => props.theme.contrast} !important;
+ color: ${props => props.theme.contrast} !important;
+ background-color: ${props =>
+ props.theme.collapses.expandedBackground} !important;
}
.cashLoadingIcon {
- color: ${props => props.theme.primary} !important;
+ color: ${props => props.theme.eCashBlue} !important;
font-size: 48px !important;
}
.selectedCurrencyOption:hover {
color: ${props => props.theme.contrast} !important;
- background-color: ${props => props.theme.primary} !important;
+ background-color: ${props => props.theme.eCashBlue} !important;
}
#addrSwitch, #cropSwitch {
.ant-switch-checked {
@@ -76,27 +104,40 @@
background-color: ${props => props.theme.forms.border} !important;
}
.ant-slider-track {
- background-color: ${props => props.theme.primary} !important;
+ background-color: ${props => props.theme.eCashBlue} !important;
+ }
+ .ant-descriptions-bordered .ant-descriptions-row {
+ background: ${props => props.theme.contrast};
+ }
+ .ant-modal-confirm-content, .ant-modal-confirm-title {
+ color: ${props => props.theme.contrast} !important;
}
`;
const CustomApp = styled.div`
text-align: center;
- font-family: 'Gilroy', sans-serif;
- background-color: ${props => props.theme.app.background};
+ font-family: 'Poppins', sans-serif;
+ background-color: ${props => props.theme.backgroundColor};
+ background-size: 100px 171px;
+ background-image: ${props => props.theme.backgroundImage};
+ background-attachment: fixed;
`;
const Footer = styled.div`
z-index: 2;
- background-color: ${props => props.theme.footer.background};
- border-radius: 20px 20px 0 0;
+ height: 80px;
+ border-top: 1px solid rgba(255, 255, 255, 0.5);
+ background-color: ${props => props.theme.footerBackground};
position: fixed;
bottom: 0;
width: 500px;
- box-shadow: rgb(136 172 243 / 25%) 0px 10px 30px,
- rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 50px;
@media (max-width: 768px) {
width: 100%;
+ padding: 0 20px;
}
`;
@@ -106,33 +147,21 @@
outline: none;
}
cursor: pointer;
- padding: 24px 12px 12px 12px;
- margin: 0 28px;
- @media (max-width: 475px) {
- margin: 0 20px;
- }
- @media (max-width: 420px) {
- margin: 0 12px;
- }
- @media (max-width: 350px) {
- margin: 0 8px;
- }
- background-color: ${props => props.theme.footer.background};
+ padding: 0;
+ background: none;
border: none;
- font-size: 10.5px;
- font-weight: bold;
- .anticon {
- display: block;
- color: ${props => props.theme.footer.navIconInactive};
- font-size: 24px;
- margin-bottom: 6px;
+ font-size: 10px;
+ svg {
+ fill: ${props => props.theme.contrast};
+ width: 26px;
+ height: auto;
}
${({ active, ...props }) =>
active &&
`
- color: ${props.theme.primary};
- .anticon {
- color: ${props.theme.primary};
+ color: ${props.theme.navActive};
+ svg {
+ fill: ${props.theme.navActive};
}
`}
`;
@@ -143,20 +172,17 @@
justify-content: center;
width: 100%;
min-height: 100vh;
- background-image: ${props => props.theme.app.sidebars};
- background-attachment: fixed;
`;
export const WalletCtn = styled.div`
position: relative;
width: 500px;
- background-color: ${props => props.theme.footerBackground};
min-height: 100vh;
- padding: 10px 30px 120px 30px;
- background: ${props => props.theme.wallet.background};
- -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
- -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
- box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
+ padding: 0 0 100px;
+ background: ${props => props.theme.walletBackground};
+ -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
+ -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
+ box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
@media (max-width: 768px) {
width: 100%;
-webkit-box-shadow: none;
@@ -170,24 +196,7 @@
align-items: center;
justify-content: center;
width: 100%;
- padding: 20px 0 30px;
- margin-bottom: 20px;
- justify-content: space-between;
-
- a {
- color: ${props => props.theme.wallet.text.secondary};
-
- :hover {
- color: ${props => props.theme.primary};
- }
- }
-
- @media (max-width: 768px) {
- a {
- font-size: 12px;
- }
- padding: 10px 0 20px;
- }
+ padding: 15px 0;
`;
export const CashTabLogo = styled.img`
@@ -263,21 +272,18 @@
)}
{/*End component not included in extension as desktop only*/}
- {/*Begin component not included in extension as replaced by open in tab link*/}
-
-
-
- {/*Begin component not included in extension as replaced by open in tab link*/}
-
-
+
+
+
+
history.push('/wallet')}
>
-
- Wallet
+
history.push('/tokens')}
+ active={selectedKey === 'send'}
+ onClick={() => history.push('/send')}
>
-
- eTokens
+
-
history.push('/send')}
+ active={selectedKey === 'receive'}
+ onClick={() => history.push('receive')}
>
-
- Send
+
history.push('/configure')}
>
-
- Settings
+
) : null}
diff --git a/web/cashtab/src/components/Authentication/SignIn.js b/web/cashtab/src/components/Authentication/SignIn.js
--- a/web/cashtab/src/components/Authentication/SignIn.js
+++ b/web/cashtab/src/components/Authentication/SignIn.js
@@ -8,11 +8,11 @@
const StyledSignIn = styled.div`
h2 {
- color: ${props => props.theme.wallet.text.primary};
+ color: ${props => props.theme.contrast};
font-size: 25px;
}
p {
- color: ${props => props.theme.wallet.text.secondary};
+ color: ${props => props.theme.darkBlue};
}
`;
diff --git a/web/cashtab/src/components/Authentication/SignUp.js b/web/cashtab/src/components/Authentication/SignUp.js
--- a/web/cashtab/src/components/Authentication/SignUp.js
+++ b/web/cashtab/src/components/Authentication/SignUp.js
@@ -8,12 +8,14 @@
} from '@components/Common/PrimaryButton';
const StyledSignUp = styled.div`
+ padding: 0px 30px;
+ margin-top: 20px;
h2 {
- color: ${props => props.theme.wallet.text.primary};
+ color: ${props => props.theme.contrast};
font-size: 25px;
}
p {
- color: ${props => props.theme.wallet.text.secondary};
+ color: ${props => props.theme.contrast};
}
`;
diff --git a/web/cashtab/src/components/Common/Alerts.js b/web/cashtab/src/components/Common/Alerts.js
deleted file mode 100644
--- a/web/cashtab/src/components/Common/Alerts.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Alert } from 'antd';
-
-const TokenIconAlert = () => {
- return (
- <>
-
- >
- );
-};
-
-export default TokenIconAlert;
diff --git a/web/cashtab/src/components/Common/Atoms.js b/web/cashtab/src/components/Common/Atoms.js
--- a/web/cashtab/src/components/Common/Atoms.js
+++ b/web/cashtab/src/components/Common/Atoms.js
@@ -11,33 +11,55 @@
svg {
width: 50px;
height: 50px;
- fill: ${props => props.theme.primary};
+ fill: ${props => props.theme.eCashBlue};
}
`;
-export const BalanceHeaderWrap = styled.div`
- color: ${props => props.theme.wallet.text.primary};
- width: 100%;
- font-size: 30px;
- font-weight: bold;
+export const SidePaddingCtn = styled.div`
+ padding: 0px 30px;
@media (max-width: 768px) {
- font-size: 23px;
+ padding: 0px 15px;
}
`;
+export const FormLabel = styled.label`
+ font-size: 16px;
+ margin-bottom: 5px;
+ text-align: left;
+ width: 100%;
+ display: inline-block;
+ color: ${props => props.theme.contrast};
+`;
+
+export const WalletInfoCtn = styled.div`
+ background: ${props => props.theme.walletInfoContainer};
+ width: 100%;
+ padding: 40px 20px;
+`;
+
export const BalanceHeaderFiatWrap = styled.div`
- color: ${props => props.theme.wallet.text.secondary};
+ color: ${props => props.theme.contrast};
width: 100%;
- font-size: 18px;
- margin-bottom: 20px;
- font-weight: bold;
+ font-size: 16px;
@media (max-width: 768px) {
font-size: 16px;
}
`;
+export const BalanceHeaderWrap = styled.div`
+ color: ${props => props.theme.contrast};
+ width: 100%;
+ font-size: 28px;
+ margin-bottom: 0px;
+ font-weight: bold;
+ line-height: 1.4em;
+ @media (max-width: 768px) {
+ font-size: 24px;
+ }
+`;
+
export const ZeroBalanceHeader = styled.div`
- color: ${props => props.theme.wallet.text.primary};
+ color: ${props => props.theme.contrast};
width: 100%;
font-size: 14px;
margin-bottom: 5px;
@@ -52,11 +74,10 @@
`;
export const ConvertAmount = styled.div`
- color: ${props => props.theme.wallet.text.secondary};
+ color: ${props => props.theme.contrast};
width: 100%;
font-size: 14px;
margin-bottom: 10px;
- font-weight: bold;
@media (max-width: 768px) {
font-size: 12px;
}
diff --git a/web/cashtab/src/components/Common/BalanceHeaderFiat.js b/web/cashtab/src/components/Common/BalanceHeaderFiat.js
--- a/web/cashtab/src/components/Common/BalanceHeaderFiat.js
+++ b/web/cashtab/src/components/Common/BalanceHeaderFiat.js
@@ -7,8 +7,8 @@
return (
{settings
- ? `${currency.fiatCurrencies[settings.fiatCurrency].symbol} `
- : '$ '}
+ ? `${currency.fiatCurrencies[settings.fiatCurrency].symbol}`
+ : '$'}
{parseFloat((balance * fiatPrice).toFixed(2)).toLocaleString()}{' '}
{settings
? `${currency.fiatCurrencies[
diff --git a/web/cashtab/src/components/Common/CustomIcons.js b/web/cashtab/src/components/Common/CustomIcons.js
--- a/web/cashtab/src/components/Common/CustomIcons.js
+++ b/web/cashtab/src/components/Common/CustomIcons.js
@@ -11,6 +11,12 @@
} from '@ant-design/icons';
import { Image } from 'antd';
import { currency } from '@components/Common/Ticker';
+import { ReactComponent as Send } from '@assets/send.svg';
+import { ReactComponent as Receive } from '@assets/receive.svg';
+import { ReactComponent as Genesis } from '@assets/flask.svg';
+import { ReactComponent as Unparsed } from '@assets/alert-circle.svg';
+import { ReactComponent as Home } from '@assets/home.svg';
+import { ReactComponent as Settings } from '@assets/cog.svg';
export const CashLoadingIcon = ;
@@ -44,7 +50,7 @@
color: ${props => props.theme.icons.outlined} !important;
`;
export const ThemedQrcodeOutlined = styled(QrcodeOutlined)`
- color: ${props => props.theme.icons.outlined} !important;
+ color: ${props => props.theme.walletBackground} !important;
`;
export const ThemedSettingOutlined = styled(SettingOutlined)`
color: ${props => props.theme.icons.outlined} !important;
@@ -63,7 +69,7 @@
svg {
width: 50px;
height: 50px;
- fill: ${props => props.theme.primary};
+ fill: ${props => props.theme.eCashBlue};
}
`;
@@ -72,3 +78,12 @@
);
+
+export const ReceiveIcon = () => ;
+export const GenesisIcon = () => ;
+export const UnparsedIcon = () => ;
+export const HomeIcon = () => ;
+export const SettingsIcon = () => ;
+export const SendIcon = styled(Send)`
+ transform: rotate(-35deg);
+`;
diff --git a/web/cashtab/src/components/Common/EnhancedInputs.js b/web/cashtab/src/components/Common/EnhancedInputs.js
--- a/web/cashtab/src/components/Common/EnhancedInputs.js
+++ b/web/cashtab/src/components/Common/EnhancedInputs.js
@@ -27,7 +27,7 @@
font-weight: bold;
color: ${props => props.theme.forms.text};
opacity: 1;
- height: 50px;
+ height: 45px;
}
textarea.ant-input,
.ant-select-selection {
@@ -43,11 +43,18 @@
}
.ant-input-affix-wrapper {
background-color: ${props => props.theme.forms.selectionBackground};
- border: 1px solid ${props => props.theme.wallet.borders.color} !important;
+ border: 1px solid ${props => props.theme.forms.border} !important;
+ }
+ .ant-input-wrapper .anticon-qrcode {
+ color: ${props => props.theme.forms.addonForeground} !important;
+ }
+ input.ant-input::placeholder,
+ .ant-select-selection::placeholder {
+ color: ${props => props.theme.forms.placeholder} !important;
}
.ant-select-selector {
- height: 60px !important;
- border: 1px solid ${props => props.theme.wallet.borders.color} !important;
+ height: 55px !important;
+ border: 1px solid ${props => props.theme.forms.border} !important;
background-color: ${props =>
props.theme.forms.selectionBackground}!important;
}
@@ -62,6 +69,10 @@
border-color: ${props => props.theme.forms.error} !important;
}
+ .ant-input:hover {
+ border-color: ${props => props.theme.forms.highlightBox};
+ }
+
.ant-form-item-has-error .ant-input,
.ant-form-item-has-error .ant-input-affix-wrapper,
.ant-form-item-has-error .ant-input:hover,
@@ -78,7 +89,7 @@
}
.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
- line-height: 60px;
+ line-height: 55px;
text-align: left;
color: ${props => props.theme.forms.text};
font-weight: bold;
@@ -197,8 +208,8 @@
}
autoComplete="off"
{...inputProps}
diff --git a/web/cashtab/src/components/Common/PrimaryButton.js b/web/cashtab/src/components/Common/PrimaryButton.js
--- a/web/cashtab/src/components/Common/PrimaryButton.js
+++ b/web/cashtab/src/components/Common/PrimaryButton.js
@@ -1,15 +1,17 @@
import styled from 'styled-components';
const PrimaryButton = styled.button`
- border: none;
+ border: 2px solid ${props => props.theme.eCashBlue};
color: ${props => props.theme.buttons.primary.color};
- background-image: ${props => props.theme.buttons.primary.backgroundImage};
+ background: none;
+ font-weight: bold;
+ background-color: ${props => props.theme.eCashBlue};
transition: all 0.5s ease;
background-size: 200% auto;
font-size: 18px;
width: 100%;
padding: 20px 0;
- border-radius: 4px;
+ border-radius: 0px;
margin-bottom: 20px;
cursor: pointer;
:hover {
@@ -61,26 +63,18 @@
background-image: 'none';
color: ${props.theme.buttons.secondary.color};
background: ${props.theme.buttons.secondary.background};
- :hover {
- -webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- -moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75);
- }
+ opacity: 0.3;
svg {
fill: ${props.theme.buttons.secondary.color};
}
`
: `
- background-image: ${props.theme.buttons.primary.backgroundImage};
- color: ${props.theme.buttons.primary.color};
- :hover {
- background-position: right center;
- -webkit-box-shadow: ${props.theme.buttons.primary.hoverShadow};
- -moz-box-shadow: ${props.theme.buttons.primary.hoverShadow};
- box-shadow: ${props.theme.buttons.primary.hoverShadow};
- }
+ opacity: 1;
+ background-image: 'none';
+ color: ${props.theme.buttons.secondary.color};
+ background: ${props.theme.buttons.secondary.background};
svg {
- fill: ${props.theme.buttons.primary.color};
+ fill: ${props.theme.buttons.secondary.color};
}
`}
diff --git a/web/cashtab/src/components/Common/QRCode.js b/web/cashtab/src/components/Common/QRCode.js
--- a/web/cashtab/src/components/Common/QRCode.js
+++ b/web/cashtab/src/components/Common/QRCode.js
@@ -8,16 +8,15 @@
export const StyledRawQRCode = styled(RawQRCode)`
cursor: pointer;
- border-radius: 26px;
+ border-radius: 10px;
background: ${props => props.theme.qr.background};
- box-shadow: ${props => props.theme.qr.shadow};
margin-bottom: 10px;
path:first-child {
fill: ${props => props.theme.qr.background};
}
:hover {
border-color: ${({ xec = 0, ...props }) =>
- xec === 1 ? props.theme.primary : props.theme.qr.token};
+ xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
}
@media (max-width: 768px) {
border-radius: 18px;
@@ -32,12 +31,10 @@
width: 100%;
text-align: center;
background-color: ${({ xec = 0, ...props }) =>
- xec === 1 ? props.theme.primary : props.theme.qr.token};
+ xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
border: 1px solid;
border-color: ${({ xec = 0, ...props }) =>
- xec === 1
- ? props.theme.qr.copyBorderCash
- : props.theme.qr.copyBorderToken};
+ xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
color: ${props => props.theme.contrast};
position: absolute;
top: 65px;
@@ -49,8 +46,9 @@
`;
const PrefixLabel = styled.span`
text-align: right;
- font-size: 14px;
font-weight: bold;
+ color: ${({ xec = 0, ...props }) =>
+ xec === 1 ? props.theme.eCashBlue : props.theme.eCashPurple};
@media (max-width: 768px) {
font-size: 12px;
}
@@ -66,7 +64,7 @@
`;
const AddressHighlightTrim = styled.span`
font-weight: bold;
- font-size: 14px;
+ color: ${props => props.theme.contrast};
@media (max-width: 768px) {
font-size: 12px;
}
@@ -82,14 +80,11 @@
`;
const CustomInput = styled.div`
- font-size: 12px;
- color: ${({ xec = 0, ...props }) =>
- xec === 1
- ? props.theme.wallet.text.secondary
- : props.theme.brandSecondary};
+ font-size: 14px;
+ color: ${props => props.theme.lightWhite};
text-align: center;
cursor: pointer;
- margin-bottom: 0px;
+ margin-bottom: 10px;
padding: 6px 0;
font-family: 'Roboto Mono', monospace;
border-radius: 5px;
@@ -109,7 +104,7 @@
-ms-user-select: none;
user-select: none;
cursor: pointer;
- color: ${props => props.theme.wallet.text.primary};
+ color: ${props => props.theme.contrast};
padding: 10px 0;
background: transparent;
margin-bottom: 15px;
@@ -120,7 +115,7 @@
}
input::selection {
background: transparent;
- color: ${props => props.theme.wallet.text.primary};
+ color: ${props => props.theme.contrast};
}
@media (max-width: 768px) {
font-size: 10px;
@@ -220,10 +215,7 @@
/>
{address && (
-
+
-
+
{address.slice(0, prefixLength)}
diff --git a/web/cashtab/src/components/Common/StyledCollapse.js b/web/cashtab/src/components/Common/StyledCollapse.js
--- a/web/cashtab/src/components/Common/StyledCollapse.js
+++ b/web/cashtab/src/components/Common/StyledCollapse.js
@@ -6,7 +6,6 @@
border: 1px solid ${props => props.theme.collapses.border} !important;
.ant-collapse-content {
- border: 1px solid ${props => props.theme.collapses.border};
border-top: none;
background-color: ${props =>
props.theme.collapses.expandedBackground} !important;
@@ -39,7 +38,7 @@
}
`
: `
- background: ${props.theme.primary} !important;
+ background: ${props.theme.eCashBlue} !important;
.ant-collapse-header {
font-size: 18px;
font-weight: bold;
@@ -55,6 +54,10 @@
`;
export const AdvancedCollapse = styled(Collapse)`
+ .ant-collapse-content {
+ background-color: ${props =>
+ props.theme.advancedCollapse.expandedBackground} !important;
+ }
${({ disabled = false, ...props }) =>
disabled === true
? `
@@ -72,17 +75,18 @@
}
`
: `
- background: ${props.theme.primary} !important;
+ background: ${props.theme.advancedCollapse.background} !important;
.ant-collapse-header {
font-size: 18px;
font-weight: bold;
- color: ${props.theme.contrast} !important;
+ color: ${props.theme.advancedCollapse.color} !important;
svg {
- color: ${props.theme.contrast} !important;
+ color: ${props.theme.advancedCollapse.icon} !important;
}
}
.ant-collapse-arrow {
font-size: 18px;
}
+
`}
`;
diff --git a/web/cashtab/src/components/Common/WalletLabel.js b/web/cashtab/src/components/Common/WalletLabel.js
--- a/web/cashtab/src/components/Common/WalletLabel.js
+++ b/web/cashtab/src/components/Common/WalletLabel.js
@@ -3,10 +3,9 @@
import styled from 'styled-components';
const WalletName = styled.h4`
- font-size: 20px;
- font-weight: bold;
+ font-size: 16px;
display: inline-block;
- color: ${props => props.theme.primary};
+ color: ${props => props.theme.lightWhite};
margin-bottom: 0px;
@media (max-width: 400px) {
font-size: 16px;
diff --git a/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap b/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap
--- a/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap
+++ b/web/cashtab/src/components/Common/__tests__/__snapshots__/StyledCollapse.test.js.snap
@@ -2,7 +2,7 @@
exports[`Render StyledCollapse component 1`] = `
`;
diff --git a/web/cashtab/src/components/Configure/Configure.js b/web/cashtab/src/components/Configure/Configure.js
--- a/web/cashtab/src/components/Configure/Configure.js
+++ b/web/cashtab/src/components/Configure/Configure.js
@@ -13,6 +13,7 @@
ExclamationCircleFilled,
} from '@ant-design/icons';
import { WalletContext, AuthenticationContext } from '@utils/context';
+import { SidePaddingCtn } from '@components/Common/Atoms';
import { StyledCollapse } from '@components/Common/StyledCollapse';
import {
AntdFormWrapper,
@@ -38,13 +39,13 @@
const SettingsLink = styled.a`
text-decoration: underline;
- color: ${props => props.theme.primary};
+ color: ${props => props.theme.eCashBlue};
:visited {
text-decoration: underline;
- color: ${props => props.theme.primary};
+ color: ${props => props.theme.eCashBlue};
}
:hover {
- color: ${props => props.theme.brandSecondary};
+ color: ${props => props.theme.eCashPurple};
}
`;
@@ -77,7 +78,7 @@
h3 {
font-size: 16px;
- color: ${props => props.theme.wallet.text.secondary};
+ color: ${props => props.theme.darkBlue};
margin: 0;
text-align: center;
white-space: nowrap;
@@ -111,7 +112,7 @@
}
div {
font-size: 13px;
- color: ${props => props.theme.wallet.text.secondary};
+ color: ${props => props.theme.darkBlue};
margin: 0;
text-align: center;
white-space: nowrap;
@@ -143,6 +144,19 @@
button {
cursor: pointer;
+ background: transparent;
+ border: 1px solid #fff;
+ box-shadow: none;
+ color: #fff;
+ border-radius: 3px;
+ opacity: 0.6;
+ transition: all 200ms ease-in-out;
+
+ :hover {
+ opacity: 1;
+ background: ${props => props.theme.eCashBlue};
+ border-color: ${props => props.theme.eCashBlue};
+ }
@media (max-width: 768px) {
font-size: 14px;
@@ -150,16 +164,16 @@
}
svg {
- stroke: ${props => props.theme.wallet.text.secondary};
- fill: ${props => props.theme.wallet.text.secondary};
+ stroke: ${props => props.theme.eCashBlue};
+ fill: ${props => props.theme.eCashBlue};
width: 25px;
height: 25px;
margin-right: 20px;
cursor: pointer;
:first-child:hover {
- stroke: ${props => props.theme.primary};
- fill: ${props => props.theme.primary};
+ stroke: ${props => props.theme.eCashBlue};
+ fill: ${props => props.theme.eCashBlue};
}
:hover {
stroke: ${props => props.theme.settings.delete};
@@ -177,7 +191,7 @@
h3 {
font-size: 16px;
display: inline-block;
- color: ${props => props.theme.wallet.text.secondary};
+ color: ${props => props.theme.darkBlue};
margin: 0;
text-align: left;
font-weight: bold;
@@ -188,7 +202,7 @@
h4 {
font-size: 16px;
display: inline-block;
- color: ${props => props.theme.primary} !important;
+ color: ${props => props.theme.eCashBlue} !important;
margin: 0;
text-align: right;
}
@@ -200,18 +214,21 @@
const StyledConfigure = styled.div`
h2 {
- color: ${props => props.theme.wallet.text.primary};
+ color: ${props => props.theme.contrast};
font-size: 25px;
}
+ svg {
+ fill: ${props => props.theme.eCashBlue};
+ }
p {
- color: ${props => props.theme.wallet.text.secondary};
+ color: ${props => props.theme.darkBlue};
}
`;
const StyledSpacer = styled.div`
height: 1px;
width: 100%;
- background-color: ${props => props.theme.wallet.borders.color};
+ background-color: ${props => props.theme.lightWhite};
margin: 60px 0 50px;
`;
@@ -219,20 +236,23 @@
display: flex;
align-items: center;
justify-content: space-between;
+ .ant-switch svg {
+ fill: #717171;
+ }
.title {
- color: ${props => props.theme.generalSettings.item.title};
+ color: ${props => props.theme.contrast};
}
.anticon {
- color: ${props => props.theme.generalSettings.item.icon};
+ color: ${props => props.theme.contrast};
}
.ant-switch {
- background-color: ${props => props.theme.generalSettings.item.icon};
- .anticon {
- color: ${props => props.theme.generalSettings.background};
- }
+ background-color: #bdbdbd;
}
.ant-switch-checked {
- background-color: ${props => props.theme.primary};
+ background-color: ${props => props.theme.eCashBlue};
+ svg {
+ fill: ${props => props.theme.contrast};
+ }
}
`;
@@ -477,274 +497,291 @@
};
return (
-
- {walletToBeRenamed !== null && (
- cancelRenameWallet()}
- >
-
-
- }
- placeholder="Enter new wallet name"
- name="newName"
- value={newWalletName}
- onChange={e => handleWalletNameInput(e)}
- />
-
-
-
-
- )}
- {walletToBeDeleted !== null && (
- cancelDeleteWallet()}
- >
-
-
- }
- placeholder={`Type "delete ${walletToBeDeleted.name}" to confirm`}
- name="walletToBeDeletedInput"
- value={confirmationOfWalletToBeDeleted}
- onChange={e => handleWalletToDeleteInput(e)}
- />
-
-
-
-
- )}
-
- Backup your wallet
-
-
- {showTranslationWarning && (
+
+
+ {walletToBeRenamed !== null && (
+ cancelRenameWallet()}
+ >
+
+
+ }
+ placeholder="Enter new wallet name"
+ name="newName"
+ value={newWalletName}
+ onChange={e => handleWalletNameInput(e)}
+ />
+
+
+
+
+ )}
+ {walletToBeDeleted !== null && (
+ cancelDeleteWallet()}
+ >
+
+
+ }
+ placeholder={`Type "delete ${walletToBeDeleted.name}" to confirm`}
+ name="walletToBeDeletedInput"
+ value={confirmationOfWalletToBeDeleted}
+ onChange={e =>
+ handleWalletToDeleteInput(e)
+ }
+ />
+
+
+
+
+ )}
+
+ Backup your wallet
+
- )}
- {wallet && wallet.mnemonic && (
-
-
-
- {wallet && wallet.mnemonic ? wallet.mnemonic : ''}
-
-
-
- )}
-
-
- Manage Wallets
-
- {apiError ? (
-
- ) : (
- <>
- updateSavedWalletsOnCreate()}>
- New Wallet
-
- openSeedInput(!seedInput)}>
- Import Wallet
-
- {seedInput && (
- <>
-
- Copy and paste your mnemonic seed phrase below
- to import an existing wallet
-
-
-
- }
- type="email"
- placeholder="mnemonic (seed phrase)"
- name="mnemonic"
- autoComplete="off"
- onChange={e => handleChange(e)}
- required
- />
-
- submit()}
- >
- Import
-
-
-
- >
- )}
- >
- )}
- {savedWallets && savedWallets.length > 0 && (
- <>
+ {showTranslationWarning && (
+
+ )}
+ {wallet && wallet.mnemonic && (
-
-
- {wallet.name}
- Currently active
-
-
- {savedWallets.map(sw => (
-
-
-
- {sw.name}
-
-
-
-
- [
- {sw && sw.state
- ? formatSavedBalance(
- sw.state.balances
- .totalBalance,
- )
- : 'N/A'}{' '}
- XEC]
-
-
-
-
- showPopulatedRenameWalletModal(
- sw,
- )
- }
- />
-
- showPopulatedDeleteWalletModal(
- sw,
- )
- }
- />
-
- updateSavedWalletsOnLoad(sw)
- }
- >
- Activate
-
-
-
- ))}
-
+
+
+ {wallet && wallet.mnemonic
+ ? wallet.mnemonic
+ : ''}
+
- >
- )}
-
-
- Fiat Currency
-
-
-
- changeCashtabSettings('fiatCurrency', fiatCode)
- }
- />
-
-
-
- General Settings
-
-
-
- Lock App
-
- {authentication ? (
- }
- unCheckedChildren={ }
- checked={
- authentication.isAuthenticationRequired &&
- authentication.credentialId
- ? true
- : false
- }
- // checked={false}
- onChange={handleAppLockToggle}
- />
+ )}
+
+
+ Manage Wallets
+
+ {apiError ? (
+
) : (
- }>
- Not Supported
-
+ <>
+ updateSavedWalletsOnCreate()}
+ >
+ New Wallet
+
+ openSeedInput(!seedInput)}
+ >
+ Import Wallet
+
+ {seedInput && (
+ <>
+
+ Copy and paste your mnemonic seed phrase
+ below to import an existing wallet
+
+
+
+ }
+ type="email"
+ placeholder="mnemonic (seed phrase)"
+ name="mnemonic"
+ autoComplete="off"
+ onChange={e => handleChange(e)}
+ required
+ />
+
+ submit()}
+ >
+ Import
+
+
+
+ >
+ )}
+ >
)}
-
- [
-
- Documentation
-
- ]
-
+ {savedWallets && savedWallets.length > 0 && (
+ <>
+
+
+
+
+ {wallet.name}
+
+ Currently active
+
+
+ {savedWallets.map(sw => (
+
+
+
+ {sw.name}
+
+
+
+
+ [
+ {sw && sw.state
+ ? formatSavedBalance(
+ sw.state.balances
+ .totalBalance,
+ )
+ : 'N/A'}{' '}
+ XEC]
+
+
+
+
+ showPopulatedRenameWalletModal(
+ sw,
+ )
+ }
+ />
+
+ showPopulatedDeleteWalletModal(
+ sw,
+ )
+ }
+ />
+
+ updateSavedWalletsOnLoad(
+ sw,
+ )
+ }
+ >
+ Activate
+
+
+
+ ))}
+
+
+
+ >
+ )}
+
+
+ Fiat Currency
+
+
+
+ changeCashtabSettings('fiatCurrency', fiatCode)
+ }
+ />
+
+
+
+ General Settings
+
+
+
+ Lock App
+
+ {authentication ? (
+ }
+ unCheckedChildren={ }
+ checked={
+ authentication.isAuthenticationRequired &&
+ authentication.credentialId
+ ? true
+ : false
+ }
+ // checked={false}
+ onChange={handleAppLockToggle}
+ />
+ ) : (
+ }>
+ Not Supported
+
+ )}
+
+ [
+
+ Documentation
+
+ ]
+
+
);
};
diff --git a/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap b/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
--- a/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
+++ b/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
@@ -2,347 +2,323 @@
exports[`Configure with a wallet 1`] = `
-
-
-
-
-
-
- Backup your wallet
-
-
-
+
-
-
-
-
+
+
+
+
+ Backup your wallet
+
+
+
+
+
+
+
-
- Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe.
+
+
+ Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe.
+
-
-
-
-
-
-
-
- Click to reveal seed phrase
+
+
+
+
+ Click to reveal seed phrase
+
-
-
-
-
-
-
-
-
- Manage Wallets
-
-
-
-
+
+
-
-
-
-
- New Wallet
-
-
-
+
+
+
+ Manage Wallets
+
+
-
-
-
-
- Import Wallet
-
-
-
-
+
+
+
+
+ New Wallet
+
+
-
-
-
-
- Fiat Currency
-
-
+
+
+
+
+ Import Wallet
+
-
+
+
-
-
-
-
- US Dollar ($)
-
-
-
+
+ Fiat Currency
+
+
+
-
-
-
-
+
+
+ US Dollar ($)
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
- General Settings
-
-
+ className="sc-jAaTju gLeerB"
+ />
+
- Lock App
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ [
+
+ Documentation
+
+ ]
-
- [
-
- Documentation
-
- ]
`;
exports[`Configure without a wallet 1`] = `
-
-
-
-
-
-
- Backup your wallet
-
-
-
+
-
-
-
-
+
+
+
+
+ Backup your wallet
+
+
+
+
+
+
+
-
- Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe.
+
+
+ Your seed phrase is the only way to restore your wallet. Write it down. Keep it safe.
+
-
-
-
-
-
-
-
-
- Manage Wallets
-
-
-
-
+
+
-
-
-
-
- New Wallet
-
-
-
+
+
+
+ Manage Wallets
+
+
-
-
-
-
- Import Wallet
-
-
-
-
+
+
+
+
+ New Wallet
+
+
-
-
-
-
- Fiat Currency
-
-
+
+
+
+
+ Import Wallet
+
-
+
+
-
-
-
-
- US Dollar ($)
-
-
-
+
+ Fiat Currency
+
+
+
-
-
-
-
+
+
+ US Dollar ($)
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
- General Settings
-
-
+ className="sc-jAaTju gLeerB"
+ />
+
- Lock App
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ [
+
+ Documentation
+
+ ]
-
- [
-
- Documentation
-
- ]
`;
diff --git a/web/cashtab/src/components/Home/Home.js b/web/cashtab/src/components/Home/Home.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab/src/components/Home/Home.js
@@ -0,0 +1,257 @@
+import React from 'react';
+import styled from 'styled-components';
+import { WalletContext } from '@utils/context';
+import OnBoarding from '@components/OnBoarding/OnBoarding';
+import { currency } from '@components/Common/Ticker.js';
+import { Link } from 'react-router-dom';
+import TokenList from './TokenList';
+import TxHistory from './TxHistory';
+import ApiError from '@components/Common/ApiError';
+import BalanceHeader from '@components/Common/BalanceHeader';
+import BalanceHeaderFiat from '@components/Common/BalanceHeaderFiat';
+import {
+ LoadingCtn,
+ WalletInfoCtn,
+ SidePaddingCtn,
+} from '@components/Common/Atoms';
+import { getWalletState } from '@utils/cashMethods';
+import WalletLabel from '@components/Common/WalletLabel.js';
+
+export const Tabs = styled.div`
+ margin: auto;
+ display: inline-block;
+ text-align: center;
+ width: 100%;
+ margin: 20px 0;
+`;
+
+export const TabLabel = styled.button`
+ :focus,
+ :active {
+ outline: none;
+ }
+ color: ${props => props.theme.lightWhite};
+ border: none;
+ background: none;
+ font-size: 18px;
+ cursor: pointer;
+ margin: 0 20px;
+ padding: 0;
+
+ @media (max-width: 400px) {
+ font-size: 16px;
+ }
+
+ ${({ active, ...props }) =>
+ active &&
+ `
+ color: ${props.theme.contrast};
+ border-bottom: 2px solid ${props.theme.eCashBlue}
+
+ `}
+ ${({ token, ...props }) =>
+ token &&
+ `
+ border-color:${props.theme.eCashPurple}
+ `}
+`;
+
+export const TabPane = styled.div`
+ color: ${props => props.theme.contrast};
+ ${({ active }) =>
+ !active &&
+ `
+ display: none;
+ `}
+`;
+
+export const Links = styled(Link)`
+ color: ${props => props.theme.darkBlue};
+ width: 100%;
+ font-size: 16px;
+ margin: 10px 0 20px 0;
+ border: 1px solid ${props => props.theme.darkBlue};
+ padding: 14px 0;
+ display: inline-block;
+ border-radius: 3px;
+ transition: all 200ms ease-in-out;
+ svg {
+ fill: ${props => props.theme.darkBlue};
+ }
+ :hover {
+ color: ${props => props.theme.eCashBlue};
+ border-color: ${props => props.theme.eCashBlue};
+ svg {
+ fill: ${props => props.theme.eCashBlue};
+ }
+ }
+ @media (max-width: 768px) {
+ padding: 10px 0;
+ font-size: 14px;
+ }
+`;
+
+export const ExternalLink = styled.a`
+ color: ${props => props.theme.darkBlue};
+ width: 100%;
+ font-size: 16px;
+ margin: 0 0 20px 0;
+ border: 1px solid ${props => props.theme.darkBlue};
+ padding: 14px 0;
+ display: inline-block;
+ border-radius: 3px;
+ transition: all 200ms ease-in-out;
+ svg {
+ fill: ${props => props.theme.darkBlue};
+ transition: all 200ms ease-in-out;
+ }
+ :hover {
+ color: ${props => props.theme.eCashBlue};
+ border-color: ${props => props.theme.eCashBlue};
+ svg {
+ fill: ${props => props.theme.eCashBlue};
+ }
+ }
+ @media (max-width: 768px) {
+ padding: 10px 0;
+ font-size: 14px;
+ }
+`;
+
+export const AddrSwitchContainer = styled.div`
+ text-align: center;
+ padding: 6px 0 12px 0;
+`;
+
+const CreateToken = styled(Link)`
+ color: ${props => props.theme.contrast};
+ border: 1px solid ${props => props.theme.contrast};
+ padding: 8px 15px;
+ border-radius: 5px;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ display: inline-block;
+ width: 100%;
+ :hover {
+ background: ${props => props.theme.eCashPurple};
+ border-color: ${props => props.theme.eCashPurple};
+ color: ${props => props.theme.contrast};
+ }
+`;
+
+const WalletInfo = () => {
+ const ContextValue = React.useContext(WalletContext);
+ const { wallet, fiatPrice, apiError, cashtabSettings } = ContextValue;
+ const walletState = getWalletState(wallet);
+ const { balances, parsedTxHistory, tokens } = walletState;
+ const [activeTab, setActiveTab] = React.useState('txHistory');
+
+ const hasHistory = parsedTxHistory && parsedTxHistory.length > 0;
+
+ return (
+ <>
+
+
+
+
+
+ {apiError && }
+
+
+
+ setActiveTab('txHistory')}
+ >
+ Transactions
+
+ setActiveTab('tokens')}
+ >
+ eTokens
+
+
+
+
+
+ {!hasHistory && (
+ <>
+
+ 🎉
+
+ Congratulations on your new wallet!{' '}
+
+ 🎉
+
+ Start using the wallet immediately to receive{' '}
+ {currency.ticker} payments, or load it up with{' '}
+ {currency.ticker} to send to others
+ >
+ )}
+
+
+
+ Create eToken
+
+ {tokens && tokens.length > 0 ? (
+
+ ) : (
+
+ Tokens sent to your {currency.tokenTicker} address
+ will appear here
+
+ )}
+
+
+ >
+ );
+};
+
+const Home = () => {
+ const ContextValue = React.useContext(WalletContext);
+ const { wallet, previousWallet, loading } = ContextValue;
+
+ return (
+ <>
+ {loading ? (
+
+ ) : (
+ <>
+ {(wallet && wallet.Path1899) ||
+ (previousWallet && previousWallet.path1899) ? (
+
+ ) : (
+
+ )}
+ >
+ )}
+ >
+ );
+};
+
+export default Home;
diff --git a/web/cashtab/src/components/Wallet/TokenList.js b/web/cashtab/src/components/Home/TokenList.js
rename from web/cashtab/src/components/Wallet/TokenList.js
rename to web/cashtab/src/components/Home/TokenList.js
diff --git a/web/cashtab/src/components/Home/TokenListItem.js b/web/cashtab/src/components/Home/TokenListItem.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab/src/components/Home/TokenListItem.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import makeBlockie from 'ethereum-blockies-base64';
+import { Img } from 'react-image';
+import { currency } from '@components/Common/Ticker';
+
+const TokenIcon = styled.div`
+ height: 32px;
+ width: 32px;
+ margin-right: 10px;
+`;
+
+const TokenNameCtn = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+const Wrapper = styled.div`
+ display: flex;
+ align-items: center;
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
+ color: ${props => props.theme.contrast};
+ padding: 10px 0;
+ justify-content: space-between;
+ h4 {
+ font-size: 16px;
+ color: ${props => props.theme.contrast};
+ margin: 0;
+ font-weight: bold;
+ }
+ :hover {
+ h4 {
+ color: ${props => props.theme.eCashPurple};
+ }
+ }
+`;
+
+const TokenListItem = ({ ticker, balance, tokenId }) => {
+ return (
+
+
+
+ {currency.tokenIconsUrl !== '' ? (
+
+ }
+ />
+ ) : (
+
+ )}
+
+ {ticker}
+
+
+ {balance}
+
+ );
+};
+
+TokenListItem.propTypes = {
+ ticker: PropTypes.string,
+ balance: PropTypes.string,
+ tokenId: PropTypes.string,
+};
+
+export default TokenListItem;
diff --git a/web/cashtab/src/components/Wallet/Tx.js b/web/cashtab/src/components/Home/Tx.js
rename from web/cashtab/src/components/Wallet/Tx.js
rename to web/cashtab/src/components/Home/Tx.js
--- a/web/cashtab/src/components/Wallet/Tx.js
+++ b/web/cashtab/src/components/Home/Tx.js
@@ -3,27 +3,51 @@
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {
- ArrowUpOutlined,
- ArrowDownOutlined,
- ExperimentOutlined,
- ExclamationOutlined,
-} from '@ant-design/icons';
+ SendIcon,
+ ReceiveIcon,
+ GenesisIcon,
+ UnparsedIcon,
+} from '@components/Common/CustomIcons';
import { currency } from '@components/Common/Ticker';
import makeBlockie from 'ethereum-blockies-base64';
import { Img } from 'react-image';
import { fromLegacyDecimals } from '@utils/cashMethods';
import { formatBalance, formatDate } from '@utils/formatting';
-const SentTx = styled(ArrowUpOutlined)`
- color: ${props => props.theme.secondary} !important;
+
+const TxIcon = styled.div`
+ svg {
+ width: 20px;
+ height: 20px;
+ }
+ height: 40px;
+ width: 40px;
+ border: 1px solid #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 100px;
`;
-const ReceivedTx = styled(ArrowDownOutlined)`
- color: ${props => props.theme.primary} !important;
+
+const SentTx = styled(TxIcon)`
+ svg {
+ margin-right: -3px;
+ }
+ fill: ${props => props.theme.contrast};
`;
-const GenesisTx = styled(ExperimentOutlined)`
- color: ${props => props.theme.primary} !important;
+const ReceivedTx = styled(TxIcon)`
+ svg {
+ fill: ${props => props.theme.eCashBlue};
+ }
+ border-color: ${props => props.theme.eCashBlue};
`;
-const UnparsedTx = styled(ExclamationOutlined)`
- color: ${props => props.theme.primary} !important;
+const GenesisTx = styled(TxIcon)`
+ border-color: ${props => props.theme.genesisGreen};
+ svg {
+ fill: ${props => props.theme.genesisGreen};
+ }
+`;
+const UnparsedTx = styled(TxIcon)`
+ color: ${props => props.theme.eCashBlue} !important;
`;
const DateType = styled.div`
text-align: left;
@@ -32,48 +56,125 @@
font-size: 0.8rem;
}
`;
-const OpReturnType = styled.span`
+
+const LeftTextCtn = styled.div`
text-align: left;
- width: 300%;
- max-height: 200px;
- padding: 3px;
- margin: auto;
- word-break: break-word;
- padding-left: 13px;
- padding-right: 30px;
- /* invisible scrollbar */
- overflow: hidden;
- height: 100%;
- margin-right: -50px; /* Maximum width of scrollbar */
- padding-right: 50px; /* Maximum width of scrollbar */
- overflow-y: scroll;
- ::-webkit-scrollbar {
- display: none;
+ display: flex;
+ align-items: left;
+ flex-direction: column;
+ margin-left: 10px;
+ h3 {
+ color: ${props => props.theme.contrast};
+ font-size: 14px;
+ font-weight: 700;
+ margin: 0;
+ }
+ .genesis {
+ color: ${props => props.theme.genesisGreen};
+ }
+ .received {
+ color: ${props => props.theme.eCashBlue};
+ }
+ h4 {
+ font-size: 12px;
+ color: ${props => props.theme.lightWhite};
+ margin: 0;
}
`;
+
+const RightTextCtn = styled.div`
+ text-align: right;
+ display: flex;
+ align-items: left;
+ flex-direction: column;
+ margin-left: 10px;
+ h3 {
+ color: ${props => props.theme.contrast};
+ font-size: 14px;
+ font-weight: 700;
+ margin: 0;
+ }
+ .genesis {
+ color: ${props => props.theme.genesisGreen};
+ }
+ .received {
+ color: ${props => props.theme.eCashBlue};
+ }
+ h4 {
+ font-size: 12px;
+ color: ${props => props.theme.lightWhite};
+ margin: 0;
+ }
+`;
+const OpReturnType = styled.div`
+ text-align: right;
+ width: 100%;
+ padding: 10px;
+ border-radius: 5px;
+ background: ${props => props.theme.sentMessage};
+ margin-top: 15px;
+ h4 {
+ color: ${props => props.theme.lightWhite};
+ margin: 0;
+ font-size: 12px;
+ display: inline-block;
+ }
+ p {
+ color: ${props => props.theme.contrast};
+ margin: 0;
+ font-size: 14px;
+ margin-bottom: 10px;
+ overflow-wrap: break-word;
+ }
+ a {
+ color: ${props => props.theme.contrast};
+ margin: 0;
+ font-size: 10px;
+ border: 1px solid ${props => props.theme.contrast};
+ border-radius: 5px;
+ padding: 2px 10px;
+ opacity: 0.6;
+ }
+ a:hover {
+ opacity: 1;
+ border-color: ${props => props.theme.eCashBlue};
+ color: ${props => props.theme.contrast};
+ background: ${props => props.theme.eCashBlue};
+ }
+ ${({ received, ...props }) =>
+ received &&
+ `
+ text-align: left;
+ background: ${props.theme.receivedMessage};
+ `}
+`;
const SentLabel = styled.span`
font-weight: bold;
color: ${props => props.theme.secondary} !important;
`;
const ReceivedLabel = styled.span`
font-weight: bold;
- color: ${props => props.theme.primary} !important;
+ color: ${props => props.theme.eCashBlue} !important;
+`;
+const GenesisLabel = styled.span`
+ font-weight: bold;
+ color: ${props => props.theme.genesisGreen} !important;
`;
const CashtabMessageLabel = styled.span`
text-align: left;
font-weight: bold;
- color: ${props => props.theme.primary} !important;
+ color: ${props => props.theme.eCashBlue} !important;
white-space: nowrap;
`;
const EncryptionMessageLabel = styled.span`
- text-align: left;
font-weight: bold;
- color: ${props => props.theme.wallet.encryption};
+ font-size: 12px;
+ color: ${props => props.theme.encryptionRed};
white-space: nowrap;
`;
const UnauthorizedDecryptionMessage = styled.span`
text-align: left;
- color: ${props => props.theme.wallet.encryption};
+ color: ${props => props.theme.encryptionRed};
white-space: nowrap;
font-style: italic;
`;
@@ -84,49 +185,46 @@
white-space: nowrap;
`;
const ReplyMessageLabel = styled.span`
- color: ${props => props.theme.primary} !important;
-`;
-const TxIcon = styled.div`
- svg {
- width: 32px;
- height: 32px;
- }
- height: 32px;
- width: 32px;
- @media screen and (max-width: 500px) {
- svg {
- width: 24px;
- height: 24px;
- }
- height: 24px;
- width: 24px;
- }
+ color: ${props => props.theme.eCashBlue} !important;
`;
const TxInfo = styled.div`
- padding: 12px;
- font-size: 1rem;
text-align: right;
-
- color: ${props =>
- props.outgoing ? props.theme.secondary : props.theme.primary};
+ display: flex;
+ align-items: left;
+ flex-direction: column;
+ margin-left: 10px;
+ flex-grow: 2;
+ h3 {
+ color: ${props => props.theme.contrast};
+ font-size: 14px;
+ font-weight: 700;
+ margin: 0;
+ }
+ .genesis {
+ color: ${props => props.theme.genesisGreen};
+ }
+ .received {
+ color: ${props => props.theme.eCashBlue};
+ }
+ h4 {
+ font-size: 12px;
+ color: ${props => props.theme.lightWhite};
+ margin: 0;
+ }
@media screen and (max-width: 500px) {
font-size: 0.8rem;
}
`;
-const TxFiatPrice = styled.span`
- font-size: 0.8rem;
-`;
+
const TokenInfo = styled.div`
- display: grid;
- grid-template-rows: 50%;
- grid-template-columns: 24px auto;
- padding: 12px;
- font-size: 1rem;
+ display: flex;
+ flex-grow: 1;
+ justify-content: flex-end;
color: ${props =>
- props.outgoing ? props.theme.secondary : props.theme.primary};
+ props.outgoing ? props.theme.secondary : props.theme.eCashBlue};
@media screen and (max-width: 500px) {
font-size: 0.8rem;
@@ -150,19 +248,13 @@
grid-row-end: span 2;
align-self: center;
`;
-const TokenTxAmt = styled.div`
- padding-left: 12px;
+const TokenTxAmt = styled.h3`
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
-const TokenName = styled.div`
- padding-left: 12px;
- font-size: 0.8rem;
- @media screen and (max-width: 500px) {
- font-size: 0.6rem;
- }
+const TokenName = styled.h4`
text-align: right;
white-space: nowrap;
overflow: hidden;
@@ -170,27 +262,12 @@
`;
const TxWrapper = styled.div`
- display: grid;
- grid-template-columns: 36px 30% 50%;
-
- justify-content: space-between;
+ display: flex;
align-items: center;
- padding: 15px 25px;
- border-radius: 16px;
- background: ${props => props.theme.tokenListItem.background};
- margin-bottom: 12px;
- box-shadow: ${props => props.theme.tokenListItem.boxShadow};
-
- :hover {
- transform: translateY(-2px);
- box-shadow: rgb(136 172 243 / 25%) 0px 10px 30px,
- rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px;
- transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
- }
- @media screen and (max-width: 500px) {
- grid-template-columns: 24px 30% 50%;
- padding: 12px 12px;
- }
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
+ color: ${props => props.theme.contrast};
+ padding: 10px 0;
+ flex-wrap: wrap;
`;
const Tx = ({ data, fiatPrice, fiatCurrency }) => {
@@ -208,9 +285,10 @@
<>
{unparsedTx ? (
-
-
-
+
+
+
+
Unparsed
@@ -220,36 +298,40 @@
) : (
-
- {data.outgoingTx ? (
- <>
- {data.tokenTx &&
- data.tokenInfo.transactionType === 'GENESIS' ? (
-
- ) : (
-
- )}
- >
- ) : (
-
- )}
-
-
+ {data.outgoingTx ? (
+ <>
+ {data.tokenTx &&
+ data.tokenInfo.transactionType === 'GENESIS' ? (
+
+
+
+ ) : (
+
+
+
+ )}
+ >
+ ) : (
+
+
+
+ )}
+
+
{data.outgoingTx ? (
<>
{data.tokenTx &&
data.tokenInfo.transactionType === 'GENESIS' ? (
- Genesis
+ Genesis
) : (
- Sent
+ Sent
)}
>
) : (
- Received
+ Received
)}
-
- {txDate}
-
+ {txDate}
+
{data.tokenTx ? (
{data.tokenTx && data.tokenInfo ? (
@@ -286,11 +368,11 @@
)}
{data.outgoingTx ? (
- <>
+
{data.tokenInfo.transactionType ===
'GENESIS' ? (
<>
-
+
+{' '}
{data.tokenInfo.qtyReceived.toString()}
@@ -325,10 +407,10 @@
>
)}
- >
+
) : (
- <>
-
+
+
+{' '}
{data.tokenInfo.qtyReceived.toString()}
@@ -337,7 +419,7 @@
{data.tokenInfo.tokenName}
- >
+
)}
>
) : (
@@ -349,16 +431,19 @@
{data.outgoingTx ? (
<>
- -{' '}
- {formatBalance(
- fromLegacyDecimals(data.amountSent),
- )}{' '}
- {currency.ticker}
-
+
+ -
+ {formatBalance(
+ fromLegacyDecimals(
+ data.amountSent,
+ ),
+ )}{' '}
+ {currency.ticker}
+
{fiatPrice !== null &&
!isNaN(data.amountSent) && (
-
- -{' '}
+
+ -
{
currency.fiatCurrencies[
fiatCurrency
@@ -373,23 +458,24 @@
currency.fiatCurrencies
.fiatCurrency
}
-
+
)}
>
) : (
<>
- +{' '}
- {formatBalance(
- fromLegacyDecimals(
- data.amountReceived,
- ),
- )}{' '}
- {currency.ticker}
-
+
+ +
+ {formatBalance(
+ fromLegacyDecimals(
+ data.amountReceived,
+ ),
+ )}{' '}
+ {currency.ticker}
+
{fiatPrice !== null &&
!isNaN(data.amountReceived) && (
-
- +{' '}
+
+ +
{
currency.fiatCurrencies[
fiatCurrency
@@ -404,7 +490,7 @@
currency.fiatCurrencies
.fiatCurrency
}
-
+
)}
>
)}
@@ -413,16 +499,11 @@
)}
{data.opReturnMessage && (
<>
-
-
+
{data.isCashtabMessage ? (
-
- Cashtab Message
-
+ Cashtab Message
) : (
-
- External Message
-
+ External Message
)}
{data.isEncryptedMessage ? (
@@ -434,15 +515,19 @@
{/*unencrypted OP_RETURN Message*/}
{data.opReturnMessage &&
- !data.isEncryptedMessage
- ? data.opReturnMessage
- : ''}
+ !data.isEncryptedMessage ? (
+ {data.opReturnMessage}
+ ) : (
+ ''
+ )}
{/*encrypted and wallet is authorized to view OP_RETURN Message*/}
{data.opReturnMessage &&
data.isEncryptedMessage &&
- data.decryptionSuccess
- ? data.opReturnMessage
- : ''}
+ data.decryptionSuccess ? (
+ {data.opReturnMessage}
+ ) : (
+ ''
+ )}
{/*encrypted but wallet is not authorized to view OP_RETURN Message*/}
{data.opReturnMessage &&
data.isEncryptedMessage &&
@@ -462,11 +547,7 @@
},
}}
>
-
-
-
- Reply To Message
-
+ Reply To Message
) : (
''
diff --git a/web/cashtab/src/components/Wallet/TxHistory.js b/web/cashtab/src/components/Home/TxHistory.js
rename from web/cashtab/src/components/Wallet/TxHistory.js
rename to web/cashtab/src/components/Home/TxHistory.js
diff --git a/web/cashtab/src/components/Wallet/__mocks__/walletAndBalancesMock.js b/web/cashtab/src/components/Home/__mocks__/walletAndBalancesMock.js
rename from web/cashtab/src/components/Wallet/__mocks__/walletAndBalancesMock.js
rename to web/cashtab/src/components/Home/__mocks__/walletAndBalancesMock.js
diff --git a/web/cashtab/src/components/Wallet/__tests__/Wallet.test.js b/web/cashtab/src/components/Home/__tests__/Home.test.js
rename from web/cashtab/src/components/Wallet/__tests__/Wallet.test.js
rename to web/cashtab/src/components/Home/__tests__/Home.test.js
--- a/web/cashtab/src/components/Wallet/__tests__/Wallet.test.js
+++ b/web/cashtab/src/components/Home/__tests__/Home.test.js
@@ -2,7 +2,7 @@
import renderer from 'react-test-renderer';
import { ThemeProvider } from 'styled-components';
import { theme } from '@assets/styles/theme';
-import Wallet from '../Wallet';
+import Home from '../Home';
import {
walletWithBalancesAndTokens,
walletWithBalancesMock,
@@ -28,7 +28,7 @@
const component = renderer.create(
-
+
,
);
@@ -41,7 +41,7 @@
const component = renderer.create(
-
+
,
);
@@ -54,7 +54,7 @@
const component = renderer.create(
-
+
,
);
@@ -67,7 +67,7 @@
const component = renderer.create(
-
+
,
);
@@ -83,7 +83,7 @@
const component = renderer.create(
-
+
,
);
diff --git a/web/cashtab/src/components/Home/__tests__/__snapshots__/Home.test.js.snap b/web/cashtab/src/components/Home/__tests__/__snapshots__/Home.test.js.snap
new file mode 100644
--- /dev/null
+++ b/web/cashtab/src/components/Home/__tests__/__snapshots__/Home.test.js.snap
@@ -0,0 +1,481 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP @generated
+
+exports[`Wallet with BCH balances 1`] = `
+Array [
+
+
+ MigrationTestAlpha
+
+
+ 0
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
+
+
,
+
+
+
+ Transactions
+
+
+ eTokens
+
+
+
+
+
+ 🎉
+
+ Congratulations on your new wallet!
+
+
+ 🎉
+
+
+ Start using the wallet immediately to receive
+
+ XEC
+ payments, or load it up with
+
+ XEC
+ to send to others
+
+
+
,
+]
+`;
+
+exports[`Wallet with BCH balances and tokens 1`] = `
+Array [
+
+
+ MigrationTestAlpha
+
+
+ 0
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
+
+
,
+
+
+
+ Transactions
+
+
+ eTokens
+
+
+
+
+
+ 🎉
+
+ Congratulations on your new wallet!
+
+
+ 🎉
+
+
+ Start using the wallet immediately to receive
+
+ XEC
+ payments, or load it up with
+
+ XEC
+ to send to others
+
+
+
,
+]
+`;
+
+exports[`Wallet with BCH balances and tokens and state field 1`] = `
+Array [
+
+
+ MigrationTestAlpha
+
+
+ 0.06
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
+
+
,
+
+
+
+ Transactions
+
+
+ eTokens
+
+
+
+
+
+ 🎉
+
+ Congratulations on your new wallet!
+
+
+ 🎉
+
+
+ Start using the wallet immediately to receive
+
+ XEC
+ payments, or load it up with
+
+ XEC
+ to send to others
+
+
+
,
+]
+`;
+
+exports[`Wallet without BCH balance 1`] = `
+Array [
+
+
+ MigrationTestAlpha
+
+
+ 0
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
+
+
,
+
+
+
+ Transactions
+
+
+ eTokens
+
+
+
+
+
+ 🎉
+
+ Congratulations on your new wallet!
+
+
+ 🎉
+
+
+ Start using the wallet immediately to receive
+
+ XEC
+ payments, or load it up with
+
+ XEC
+ to send to others
+
+
+
,
+]
+`;
+
+exports[`Without wallet defined 1`] = `
+
+`;
diff --git a/web/cashtab/src/components/OnBoarding/OnBoarding.js b/web/cashtab/src/components/OnBoarding/OnBoarding.js
--- a/web/cashtab/src/components/OnBoarding/OnBoarding.js
+++ b/web/cashtab/src/components/OnBoarding/OnBoarding.js
@@ -16,8 +16,16 @@
import { currency } from '@components/Common/Ticker.js';
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`
- color: ${props => props.theme.wallet.text.secondary};
width: 100%;
font-size: 16px;
margin-bottom: 60px;
@@ -26,7 +34,11 @@
export const WelcomeLink = styled.a`
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 = () => {
@@ -70,6 +82,7 @@
confirm({
title: "Don't forget to back up your wallet",
icon: ,
+ 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!`,
okText: 'Okay, make me a wallet!',
onOk() {
@@ -82,7 +95,7 @@
}
return (
- <>
+
Welcome to Cashtab!
Cashtab is an{' '}
@@ -148,7 +161,7 @@
)}
- >
+
);
};
diff --git a/web/cashtab/src/components/Receive/Receive.js b/web/cashtab/src/components/Receive/Receive.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab/src/components/Receive/Receive.js
@@ -0,0 +1,137 @@
+import React from 'react';
+import styled from 'styled-components';
+import { WalletContext } from '@utils/context';
+import OnBoarding from '@components/OnBoarding/OnBoarding';
+import { QRCode } from '@components/Common/QRCode';
+import { currency } from '@components/Common/Ticker.js';
+import { LoadingCtn } from '@components/Common/Atoms';
+
+export const ReceiveCtn = styled.div`
+ width: 100%;
+ margin-top: 100px;
+ h2 {
+ color: ${props => props.theme.contrast};
+ margin: 0 0 20px;
+ }
+`;
+
+export const SwitchBtnCtn = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ align-content: space-between;
+ margin-bottom: 15px;
+ .nonactiveBtn {
+ color: ${props => props.theme.walletBackground};
+ background: ${props => props.theme.contrast} !important;
+ opacity: 0.7;
+ box-shadow: none !important;
+ }
+ .slpActive {
+ background: ${props => props.theme.eCashPurple} !important;
+ }
+`;
+
+export const SwitchBtn = styled.div`
+ font-weight: bold;
+ display: inline-block;
+ cursor: pointer;
+ color: ${props => props.theme.switchButtonActiveText};
+ font-size: 14px;
+ padding: 6px 0;
+ width: 100px;
+ margin: 0 1px;
+ text-decoration: none;
+ background: ${props => props.theme.eCashBlue};
+ user-select: none;
+ :first-child {
+ border-radius: 100px 0 0 100px;
+ }
+ :nth-child(2) {
+ border-radius: 0 100px 100px 0;
+ }
+`;
+
+const WalletInfo = () => {
+ const ContextValue = React.useContext(WalletContext);
+ const { wallet } = ContextValue;
+ const [isCashAddress, setIsCashAddress] = React.useState(true);
+
+ const handleChangeAddress = () => {
+ setIsCashAddress(!isCashAddress);
+ };
+
+ return (
+
+ Receive {isCashAddress ? 'XEC' : 'eToken'}
+ {wallet && ((wallet.Path245 && wallet.Path145) || wallet.Path1899) && (
+ <>
+ {wallet.Path1899 ? (
+ <>
+
+ >
+ ) : (
+ <>
+
+ >
+ )}
+ >
+ )}
+
+
+ handleChangeAddress()}
+ className={isCashAddress ? null : 'nonactiveBtn'}
+ >
+ {currency.ticker}
+
+ handleChangeAddress()}
+ className={isCashAddress ? 'nonactiveBtn' : 'slpActive'}
+ >
+ {currency.tokenTicker}
+
+
+
+ );
+};
+
+const Receive = () => {
+ const ContextValue = React.useContext(WalletContext);
+ const { wallet, previousWallet, loading } = ContextValue;
+
+ return (
+ <>
+ {loading ? (
+
+ ) : (
+ <>
+ {(wallet && wallet.Path1899) ||
+ (previousWallet && previousWallet.path1899) ? (
+
+ ) : (
+
+ )}
+ >
+ )}
+ >
+ );
+};
+
+export default Receive;
diff --git a/web/cashtab/src/components/Send/__tests__/Send.test.js b/web/cashtab/src/components/Receive/__tests__/Receive.test.js
copy from web/cashtab/src/components/Send/__tests__/Send.test.js
copy to web/cashtab/src/components/Receive/__tests__/Receive.test.js
--- a/web/cashtab/src/components/Send/__tests__/Send.test.js
+++ b/web/cashtab/src/components/Receive/__tests__/Receive.test.js
@@ -2,14 +2,13 @@
import renderer from 'react-test-renderer';
import { ThemeProvider } from 'styled-components';
import { theme } from '@assets/styles/theme';
-import Send from '@components/Send/Send';
-import BCHJS from '@psf/bch-js';
+import Receive from '@components/Receive/Receive';
import {
walletWithBalancesAndTokens,
walletWithBalancesMock,
walletWithoutBalancesMock,
walletWithBalancesAndTokensWithCorrectState,
-} from '../../Wallet/__mocks__/walletAndBalancesMock';
+} from '../../Home/__mocks__/walletAndBalancesMock';
import { BrowserRouter as Router } from 'react-router-dom';
let realUseContext;
@@ -42,11 +41,10 @@
test('Wallet without BCH balance', () => {
useContextMock.mockReturnValue(walletWithoutBalancesMock);
- const testBCH = new BCHJS();
const component = renderer.create(
-
+
,
);
@@ -56,11 +54,10 @@
test('Wallet with BCH balances', () => {
useContextMock.mockReturnValue(walletWithBalancesMock);
- const testBCH = new BCHJS();
const component = renderer.create(
-
+
,
);
@@ -70,11 +67,10 @@
test('Wallet with BCH balances and tokens', () => {
useContextMock.mockReturnValue(walletWithBalancesAndTokens);
- const testBCH = new BCHJS();
const component = renderer.create(
-
+
,
);
@@ -84,11 +80,10 @@
test('Wallet with BCH balances and tokens and state field', () => {
useContextMock.mockReturnValue(walletWithBalancesAndTokensWithCorrectState);
- const testBCH = new BCHJS();
const component = renderer.create(
-
+
,
);
@@ -102,11 +97,10 @@
balances: { totalBalance: 0 },
loading: false,
});
- const testBCH = new BCHJS();
const component = renderer.create(
-
+
,
);
diff --git a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap b/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap
rename from web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap
rename to web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap
--- a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap
+++ b/web/cashtab/src/components/Receive/__tests__/__snapshots__/Receive.test.js.snap
@@ -1,40 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP @generated
exports[`Wallet with BCH balances 1`] = `
-Array [
-
-
- 🎉
-
- Congratulations on your new wallet!
-
-
- 🎉
-
-
- Start using the wallet immediately to receive
-
- XEC
- payments, or load it up with
-
- XEC
- to send to others
-
,
-
- 0
-
+
+
+ Receive
XEC
- ,
+
ecash:
qzagy47m
vh6qxkvcn3acjnz73rkhkc6y7c
cxkrr6zd
-
,
+
,
-]
+
+
`;
exports[`Wallet with BCH balances and tokens 1`] = `
-Array [
-
-
- 🎉
-
- Congratulations on your new wallet!
-
-
- 🎉
-
-
- Start using the wallet immediately to receive
-
- XEC
- payments, or load it up with
-
- XEC
- to send to others
-
,
-
- 0
-
+
+
+ Receive
XEC
- ,
+
ecash:
qzagy47m
vh6qxkvcn3acjnz73rkhkc6y7c
cxkrr6zd
-
,
+
,
-]
+
+
`;
exports[`Wallet with BCH balances and tokens and state field 1`] = `
-Array [
-
- 0.06
-
+
+
+ Receive
XEC
- ,
-
- $
- NaN
-
- USD
-
,
+
ecash:
qzagy47m
vh6qxkvcn3acjnz73rkhkc6y7c
cxkrr6zd
-
,
+
,
-]
+
+
`;
exports[`Wallet without BCH balance 1`] = `
-Array [
-
-
- 🎉
-
- Congratulations on your new wallet!
-
-
- 🎉
-
-
- Start using the wallet immediately to receive
-
- XEC
- payments, or load it up with
-
- XEC
- to send to others
-
,
-
- 0
-
+
+
+ Receive
XEC
- ,
+
ecash:
qzagy47m
vh6qxkvcn3acjnz73rkhkc6y7c
cxkrr6zd
-
,
+
,
-]
+
+
`;
exports[`Without wallet defined 1`] = `
-Array [
+
`;
diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js
--- a/web/cashtab/src/components/Send/Send.js
+++ b/web/cashtab/src/components/Send/Send.js
@@ -40,6 +40,9 @@
ZeroBalanceHeader,
ConvertAmount,
AlertMsg,
+ WalletInfoCtn,
+ SidePaddingCtn,
+ FormLabel,
} from '@components/Common/Atoms';
import {
getWalletState,
@@ -54,29 +57,33 @@
import { PlusSquareOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { CopyToClipboard } from 'react-copy-to-clipboard';
-
-const StyledSpacer = styled.div`
- height: 1px;
- width: 100%;
- background-color: ${props => props.theme.wallet.borders.color};
- margin: 60px 0 50px;
-`;
+import WalletLabel from '@components/Common/WalletLabel.js';
const SignMessageLabel = styled.div`
text-align: left;
- color: ${props => props.theme.forms.darkLabel};
-`;
-const RecipientModeLabel = styled.div`
- color: ${props => props.theme.forms.lightLabel};
+ color: ${props => props.theme.forms.text};
`;
+
const TextAreaLabel = styled.div`
text-align: left;
- color: ${props => props.theme.forms.darkLabel};
+ color: ${props => props.theme.forms.text};
padding-left: 1px;
`;
+const AmountPreviewCtn = styled.div`
+ margin-top: -30px;
+`;
+
+const SendInputCtn = styled.div`
+ .ant-form-item-with-help {
+ margin-bottom: 32px;
+ }
+`;
+
const LocaleFormattedValue = styled.h3`
- color: ${props => props.theme.forms.text};
+ color: ${props => props.theme.contrast};
+ font-weight: bold;
+ margin-bottom: 0;
`;
// Note jestBCH is only used for unit tests; BCHJS must be mocked for jest
const SendBCH = ({ jestBCH, passLoadingStatus }) => {
@@ -623,380 +630,408 @@
{currency.ticker} to {formData.address}?
- {!balances.totalBalance ? (
-
- You currently have 0 {currency.ticker}
-
- Deposit some funds to use this feature
-
- ) : (
- <>
-
- {fiatPrice !== null && (
-
+
+ {!balances.totalBalance ? (
+
+ You currently have 0 {currency.ticker}
+
+ Deposit some funds to use this feature
+
+ ) : (
+ <>
+
- )}
- >
- )}
-
-
-
-
+
+
+
+ setShowConfirmMsgToSign(false)}
+ >
+ Message: {msgToSign}
+
+
+
+
+
+
- Signature:
+ Message:
handleOnSigCopy()}
+ name="signMessage"
+ onChange={e => handleSignMsgChange(e)}
+ showCount
+ maxLength={150}
/>
-
- {sigCopySuccess}
-
-
-
-
+
+
+ Address:
+
+
+
+
+ setShowConfirmMsgToSign(true)
+ }
+ disabled={!signMessageIsValid}
+ >
+
+ Sign Message
+
+
+
+
+ Signature:
+
+ handleOnSigCopy()}
+ />
+
+
+ {sigCopySuccess}
+
+
+
+
+
>
);
};
diff --git a/web/cashtab/src/components/Send/SendToken.js b/web/cashtab/src/components/Send/SendToken.js
--- a/web/cashtab/src/components/Send/SendToken.js
+++ b/web/cashtab/src/components/Send/SendToken.js
@@ -2,7 +2,6 @@
import PropTypes from 'prop-types';
import { WalletContext } from '@utils/context';
import { Form, message, Row, Col, Alert, Descriptions, Popover } from 'antd';
-import TokenIconAlert from '@components/Common/Alerts.js';
import PrimaryButton, {
SecondaryButton,
} from '@components/Common/PrimaryButton';
@@ -11,6 +10,7 @@
DestinationAddressSingle,
} from '@components/Common/EnhancedInputs';
import useBCH from '@hooks/useBCH';
+import { SidePaddingCtn } from '@components/Common/Atoms';
import BalanceHeader from '@components/Common/BalanceHeader';
import { Redirect } from 'react-router-dom';
import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -33,9 +33,8 @@
const AntdDescriptionsCss = css`
.ant-descriptions-item-label,
.ant-descriptions-item-content {
- background-color: ${props =>
- props.theme.tokenListItem.background} !important;
- color: ${props => props.theme.tokenListItem.color};
+ background-color: ${props => props.theme.contrast} !important;
+ color: ${props => props.theme.dropdownText};
}
`;
const AntdDescriptionsWrapper = styled.div`
@@ -248,12 +247,11 @@
<>
{!token && }
{token && (
- <>
+
-
- >
+
)}
>
);
diff --git a/web/cashtab/src/components/Send/__tests__/Send.test.js b/web/cashtab/src/components/Send/__tests__/Send.test.js
--- a/web/cashtab/src/components/Send/__tests__/Send.test.js
+++ b/web/cashtab/src/components/Send/__tests__/Send.test.js
@@ -9,7 +9,7 @@
walletWithBalancesMock,
walletWithoutBalancesMock,
walletWithBalancesAndTokensWithCorrectState,
-} from '../../Wallet/__mocks__/walletAndBalancesMock';
+} from '../../Home/__mocks__/walletAndBalancesMock';
import { BrowserRouter as Router } from 'react-router-dom';
let realUseContext;
diff --git a/web/cashtab/src/components/Send/__tests__/SendToken.test.js b/web/cashtab/src/components/Send/__tests__/SendToken.test.js
--- a/web/cashtab/src/components/Send/__tests__/SendToken.test.js
+++ b/web/cashtab/src/components/Send/__tests__/SendToken.test.js
@@ -7,7 +7,7 @@
import {
walletWithBalancesAndTokens,
walletWithBalancesAndTokensWithCorrectState,
-} from '../../Wallet/__mocks__/walletAndBalancesMock';
+} from '../../Home/__mocks__/walletAndBalancesMock';
import { BrowserRouter as Router } from 'react-router-dom';
let realUseContext;
diff --git a/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap
--- a/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap
+++ b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap
@@ -3,453 +3,467 @@
exports[`Wallet with BCH balances 1`] = `
Array [
- You currently have 0
- XEC
-
- Deposit some funds to use this feature
+
+ MigrationTestAlpha
+
+
+ You currently have 0
+ XEC
+
+ Deposit some funds to use this feature
+
,
-
-
-
- Switch to multiple recipients
-
-
-
-
-
-
-
+
+ Amount
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ XEC
+
+
+
-
+ >
+
+
+
+
+
+
+
- XEC
-
-
-
-
-
-
-
+ max
-
+
-
-
-
- 0
-
- XEC
-
-
- =
-
- $ NaN USD
-
-
+
+ 0
+
+ XEC
+
+
+ =
+
+ $ NaN USD
+
+
+
+
+ Send
+
+
+
-
-
-
-
-
- Advanced
+
+
+
+
+ Advanced
+
-
-
-
- Send
-
-
-
+
+
- ,
-
- Signatures
-
,
-
-
-
-
-
-
- Sign Message
+
+
+
+
+ Sign Message
+
,
@@ -459,453 +473,467 @@
exports[`Wallet with BCH balances and tokens 1`] = `
Array [
- You currently have 0
- XEC
-
- Deposit some funds to use this feature
+
+ MigrationTestAlpha
+
+
+ You currently have 0
+ XEC
+
+ Deposit some funds to use this feature
+
,
-
-
-
- Switch to multiple recipients
-
-
-
-
-
-
-
+
+ Amount
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ XEC
+
+
+
-
+ >
+
+
+
+
+
+
+
- XEC
-
-
-
-
-
-
-
+ max
-
+
-
-
-
- 0
-
- XEC
-
-
- =
-
- $ NaN USD
-
-
+
+ 0
+
+ XEC
+
+
+ =
+
+ $ NaN USD
+
+
+
+
+ Send
+
+
+
-
-
-
-
-
- Advanced
+
+
+
+
+ Advanced
+
-
-
-
- Send
-
-
-
+
+
- ,
-
- Signatures
-
,
-
-
-
-
-
-
- Sign Message
+
+
+
+
+ Sign Message
+
,
@@ -915,461 +943,475 @@
exports[`Wallet with BCH balances and tokens and state field 1`] = `
Array [
- 0.06
-
- XEC
-
,
-
- $
- NaN
-
- USD
+
+ MigrationTestAlpha
+
+
+ 0.06
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
+
,
-
-
-
- Switch to multiple recipients
-
-
-
-
-
-
-
+
+ Amount
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ XEC
+
+
+
-
+ >
+
+
+
+
+
+
+
- XEC
-
-
-
-
-
-
-
+ max
-
+
-
-
-
- 0
-
- XEC
-
-
- =
-
- $ NaN USD
-
-
+
+ 0
+
+ XEC
+
+
+ =
+
+ $ NaN USD
+
+
+
+
+ Send
+
+
+
-
-
-
-
-
- Advanced
+
+
+
+
+ Advanced
+
-
-
-
- Send
-
-
-
+
+
- ,
-
- Signatures
-
,
-
-
-
-
-
-
- Sign Message
+
+
+
+
+ Sign Message
+
,
@@ -1379,453 +1421,467 @@
exports[`Wallet without BCH balance 1`] = `
Array [
- You currently have 0
- XEC
-
- Deposit some funds to use this feature
+
+ MigrationTestAlpha
+
+
+ You currently have 0
+ XEC
+
+ Deposit some funds to use this feature
+
,
-
-
-
- Switch to multiple recipients
-
-
-
-
-
-
-
+
+ Amount
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ XEC
+
+
+
-
+ >
+
+
+
+
+
+
+
- XEC
-
-
-
-
-
-
-
+ max
-
+
-
-
-
- 0
-
- XEC
-
-
- =
-
- $ NaN USD
-
-
+
+ 0
+
+ XEC
+
+
+ =
+
+ $ NaN USD
+
+
+
+
+ Send
+
+
+
-
-
-
-
-
- Advanced
+
+
+
+
+ Advanced
+
-
-
-
- Send
-
-
-
+
+
- ,
-
- Signatures
-
,
-
-
-
-
-
-
- Sign Message
+
+
+
+
+ Sign Message
+
,
@@ -1835,453 +1891,462 @@
exports[`Without wallet defined 1`] = `
Array [
- You currently have 0
- XEC
-
- Deposit some funds to use this feature
+
+ You currently have 0
+ XEC
+
+ Deposit some funds to use this feature
+
,
-
-
-
- Switch to multiple recipients
-
-
-
-
-
-
-
+
+ Amount
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ XEC
+
+
+
-
+ >
+
+
+
+
+
+
+
- XEC
-
-
-
-
-
-
-
+ max
-
+
-
-
-
- 0
-
- XEC
-
-
- =
-
- $ NaN USD
-
-
+
+ 0
+
+ XEC
+
+
+ =
+
+ $ NaN USD
+
+
+
+
+ Send
+
+
+
-
-
-
-
-
- Advanced
+
+
+
+
+ Advanced
+
-
-
-
- Send
-
-
-
+
+
- ,
-
- Signatures
-
,
-
-
-
-
-
-
- Sign Message
+
+
+
+
+ Sign Message
+
,
diff --git a/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap b/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap
--- a/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap
+++ b/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap
@@ -3,61 +3,16 @@
exports[`Wallet with BCH balances and tokens 1`] = `null`;
exports[`Wallet with BCH balances and tokens and state field 1`] = `
-Array [
+
6.001
TBS
-
,
-
-
-
-
-
-
-
-
-
-
-
- If you would like to request an icon for an eToken that has already been created, please email icons@e.cash.
-
-
-
-
,
+
@@ -273,7 +228,7 @@
}
>
Send
@@ -282,8 +237,8 @@
-
,
-]
+
+
`;
exports[`Without wallet defined 1`] = `null`;
diff --git a/web/cashtab/src/components/Tokens/CreateTokenForm.js b/web/cashtab/src/components/Tokens/CreateTokenForm.js
--- a/web/cashtab/src/components/Tokens/CreateTokenForm.js
+++ b/web/cashtab/src/components/Tokens/CreateTokenForm.js
@@ -1,4 +1,5 @@
import React, { useState, useCallback } from 'react';
+import styled from 'styled-components';
import PropTypes from 'prop-types';
import { AntdFormWrapper } from '@components/Common/EnhancedInputs';
import { TokenCollapse } from '@components/Common/StyledCollapse';
@@ -36,7 +37,7 @@
Switch,
} from 'antd';
const { Panel } = Collapse;
-import { TokenParamLabel } from '@components/Common/Atoms';
+import { TokenParamLabel, FormLabel } from '@components/Common/Atoms';
import {
createTokenNotification,
tokenIconSubmitSuccess,
@@ -48,6 +49,16 @@
import getResizedImage from '@utils/icons/resizeImage';
const { Dragger } = Upload;
+export const CreateTokenCtn = styled.div`
+ margin-top: 20px;
+ h3 {
+ color: ${props => props.theme.contrast};
+ }
+ .ant-form-item {
+ margin-bottom: 0px;
+ }
+`;
+
const CreateTokenForm = ({
BCH,
getRestUrl,
@@ -472,15 +483,10 @@
: newTokenDocumentUrl}
- <>
-
-
+
+ Create a Token
+ {!disabled && (
+ <>
+ Token Name
+ Ticker
+ Decimals
+ Supply
+ Document URL
+ Add Image
+
setShowConfirmCreateToken(true)}
disabled={!tokenGenesisDataIsValid}
+ style={{ marginTop: '30px' }}
>
Create eToken
-
-
- >
+ >
+ )}
+
>
);
};
diff --git a/web/cashtab/src/components/Tokens/Tokens.js b/web/cashtab/src/components/Tokens/Tokens.js
--- a/web/cashtab/src/components/Tokens/Tokens.js
+++ b/web/cashtab/src/components/Tokens/Tokens.js
@@ -2,16 +2,18 @@
import PropTypes from 'prop-types';
import { WalletContext } from '@utils/context';
import { fromSmallestDenomination, getWalletState } from '@utils/cashMethods';
-import TokenIconAlert from '@components/Common/Alerts.js';
-
import CreateTokenForm from '@components/Tokens/CreateTokenForm';
import { currency } from '@components/Common/Ticker.js';
-import TokenList from '@components/Wallet/TokenList';
import useBCH from '@hooks/useBCH';
import BalanceHeader from '@components/Common/BalanceHeader';
import BalanceHeaderFiat from '@components/Common/BalanceHeaderFiat';
-import { ZeroBalanceHeader, AlertMsg } from '@components/Common/Atoms';
+import {
+ AlertMsg,
+ WalletInfoCtn,
+ SidePaddingCtn,
+} from '@components/Common/Atoms';
import ApiError from '@components/Common/ApiError';
+import WalletLabel from '@components/Common/WalletLabel.js';
const Tokens = ({ jestBCH, passLoadingStatus }) => {
/*
@@ -31,7 +33,7 @@
const { wallet, apiError, fiatPrice, cashtabSettings } =
React.useContext(WalletContext);
const walletState = getWalletState(wallet);
- const { balances, tokens } = walletState;
+ const { balances } = walletState;
const { getBCH, getRestUrl, createToken } = useBCH();
@@ -39,70 +41,55 @@
const BCH = jestBCH ? jestBCH : getBCH();
return (
<>
- {!balances.totalBalance ? (
- <>
-
- You need some {currency.ticker} in your wallet to create
- tokens.
-
-
- >
- ) : (
- <>
-
- {fiatPrice !== null && !isNaN(balances.totalBalance) && (
-
- )}
- >
- )}
-
- {apiError && }
-
- {balances.totalBalanceInSatoshis < currency.dustSats && (
-
- You need at least{' '}
- {fromSmallestDenomination(currency.dustSats).toString()}{' '}
- {currency.ticker} (
- {cashtabSettings
- ? `${
- currency.fiatCurrencies[
+
+
+
+
+
+
+ {apiError && }
+
+ {balances.totalBalanceInSatoshis < currency.dustSats && (
+
+ You need at least{' '}
+ {fromSmallestDenomination(currency.dustSats).toString()}{' '}
+ {currency.ticker} (
+ {cashtabSettings
+ ? `${
+ currency.fiatCurrencies[
+ cashtabSettings.fiatCurrency
+ ].symbol
+ }`
+ : '$'}
+ {(
+ fromSmallestDenomination(
+ currency.dustSats,
+ ).toString() * fiatPrice
+ ).toFixed(4)}{' '}
+ {cashtabSettings
+ ? `${currency.fiatCurrencies[
cashtabSettings.fiatCurrency
- ].symbol
- }`
- : '$'}
- {(
- fromSmallestDenomination(currency.dustSats).toString() *
- fiatPrice
- ).toFixed(4)}{' '}
- {cashtabSettings
- ? `${currency.fiatCurrencies[
- cashtabSettings.fiatCurrency
- ].slug.toUpperCase()}`
- : 'USD'}
- ) to create a token
-
- )}
-
- {tokens && tokens.length > 0 ? (
- <>
-
- >
- ) : (
- <>No {currency.tokenTicker} tokens in this wallet>
- )}
+ ].slug.toUpperCase()}`
+ : 'USD'}
+ ) to create a token
+
+ )}
+
>
);
};
diff --git a/web/cashtab/src/components/Tokens/__tests__/CreateTokenForm.test.js b/web/cashtab/src/components/Tokens/__tests__/CreateTokenForm.test.js
--- a/web/cashtab/src/components/Tokens/__tests__/CreateTokenForm.test.js
+++ b/web/cashtab/src/components/Tokens/__tests__/CreateTokenForm.test.js
@@ -5,7 +5,7 @@
import CreateTokenForm from '@components/Tokens/CreateTokenForm';
import BCHJS from '@psf/bch-js';
import useBCH from '@hooks/useBCH';
-import { walletWithBalancesAndTokensWithCorrectState } from '../../Wallet/__mocks__/walletAndBalancesMock';
+import { walletWithBalancesAndTokensWithCorrectState } from '../../Home/__mocks__/walletAndBalancesMock';
let useContextMock;
let realUseContext;
diff --git a/web/cashtab/src/components/Tokens/__tests__/Tokens.test.js b/web/cashtab/src/components/Tokens/__tests__/Tokens.test.js
--- a/web/cashtab/src/components/Tokens/__tests__/Tokens.test.js
+++ b/web/cashtab/src/components/Tokens/__tests__/Tokens.test.js
@@ -9,7 +9,7 @@
walletWithBalancesMock,
walletWithoutBalancesMock,
walletWithBalancesAndTokensWithCorrectState,
-} from '../../Wallet/__mocks__/walletAndBalancesMock';
+} from '../../Home/__mocks__/walletAndBalancesMock';
import { BrowserRouter as Router } from 'react-router-dom';
let realUseContext;
diff --git a/web/cashtab/src/components/Tokens/__tests__/__snapshots__/CreateTokenForm.test.js.snap b/web/cashtab/src/components/Tokens/__tests__/__snapshots__/CreateTokenForm.test.js.snap
--- a/web/cashtab/src/components/Tokens/__tests__/__snapshots__/CreateTokenForm.test.js.snap
+++ b/web/cashtab/src/components/Tokens/__tests__/__snapshots__/CreateTokenForm.test.js.snap
@@ -2,46 +2,374 @@
exports[`Wallet with BCH balances and tokens and state field 1`] = `
+
+ Create a Token
+
-
-
-
+ Token Name
+
+
+
+ Ticker
+
+
+
+ Decimals
+
+
+
+ Supply
+
+
+
+ Document URL
+
+
+
+
+ Add Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click, or drag file to this area to upload
+
+
+ Only jpg or png accepted
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create eToken
+
`;
diff --git a/web/cashtab/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap b/web/cashtab/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap
--- a/web/cashtab/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap
+++ b/web/cashtab/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap
@@ -3,349 +3,496 @@
exports[`Wallet with BCH balances 1`] = `
Array [
- You need some
- XEC
- in your wallet to create tokens.
-
,
-
- 0
-
- XEC
-
,
-
+
+ MigrationTestAlpha
+
-
-
-
-
-
-
-
-
-
- If you would like to request an icon for an eToken that has already been created, please email icons@e.cash.
-
-
+ 0
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
,
-
-
-
-
-
-
- Create eToken
-
+
+ Create a Token
+
+
+ You need at least
+
+ 5.5
+
+ XEC
+ (
+ $
+ NaN
+
+ USD
+ ) to create a token
+
,
-
- You need at least
-
- 5.5
-
- XEC
- (
- $
- NaN
-
- USD
- ) to create a token
-
,
- "No ",
- "eToken",
- " tokens in this wallet",
]
`;
exports[`Wallet with BCH balances and tokens 1`] = `
Array [
- You need some
- XEC
- in your wallet to create tokens.
-
,
-
- 0
-
- XEC
-
,
-
+
+ MigrationTestAlpha
+
-
-
-
-
-
-
-
-
-
- If you would like to request an icon for an eToken that has already been created, please email icons@e.cash.
-
-
+ 0
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
,
-
-
-
-
-
-
- Create eToken
-
+
+ Create a Token
+
+
+ You need at least
+
+ 5.5
+
+ XEC
+ (
+ $
+ NaN
+
+ USD
+ ) to create a token
+
,
-
- You need at least
-
- 5.5
-
- XEC
- (
- $
- NaN
-
- USD
- ) to create a token
-
,
- "No ",
- "eToken",
- " tokens in this wallet",
]
`;
exports[`Wallet with BCH balances and tokens and state field 1`] = `
Array [
- 0.06
-
- XEC
-
,
-
- $
- NaN
-
- USD
-
,
-
+
+ MigrationTestAlpha
+
-
-
-
-
-
-
-
-
-
- If you would like to request an icon for an eToken that has already been created, please email icons@e.cash.
-
-
+ 0.06
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
,
+
+ Create a Token
+
+
+
+ Token Name
+
+
+
+ Ticker
+
+
+
+ Decimals
+
+
+
+ Supply
+
+
+
+ Document URL
+
+
+
+ Add Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click, or drag file to this area to upload
+
+
+ Only jpg or png accepted
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Create eToken
-
+ Create eToken
+
,
- ,
]
`;
exports[`Wallet without BCH balance 1`] = `
Array [
- You need some
- XEC
- in your wallet to create tokens.
-
,
-
- 0
-
- XEC
-
,
-
+
+ MigrationTestAlpha
+
-
-
-
-
-
-
-
-
-
- If you would like to request an icon for an eToken that has already been created, please email icons@e.cash.
-
-
+ 0
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
,
-
-
-
-
-
-
- Create eToken
-
+
+ Create a Token
+
+
+ You need at least
+
+ 5.5
+
+ XEC
+ (
+ $
+ NaN
+
+ USD
+ ) to create a token
+
,
-
- You need at least
-
- 5.5
-
- XEC
- (
- $
- NaN
-
- USD
- ) to create a token
-
,
- "No ",
- "eToken",
- " tokens in this wallet",
]
`;
exports[`Without wallet defined 1`] = `
Array [
- You need some
- XEC
- in your wallet to create tokens.
-
,
-
- 0
-
- XEC
-
,
-
-
-
-
-
-
-
-
-
-
- If you would like to request an icon for an eToken that has already been created, please email icons@e.cash.
-
-
+ 0
+
+ XEC
+
+
+ $
+ NaN
+
+ USD
,
-
-
-
-
-
-
- Create eToken
-
+
+ Create a Token
+
+
+ You need at least
+
+ 5.5
+
+ XEC
+ (
+ $
+ NaN
+
+ USD
+ ) to create a token
+
,
-
- You need at least
-
- 5.5
-
- XEC
- (
- $
- NaN
-
- USD
- ) to create a token
-
,
- "No ",
- "eToken",
- " tokens in this wallet",
]
`;
diff --git a/web/cashtab/src/components/Wallet/TokenListItem.js b/web/cashtab/src/components/Wallet/TokenListItem.js
deleted file mode 100644
--- a/web/cashtab/src/components/Wallet/TokenListItem.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import makeBlockie from 'ethereum-blockies-base64';
-import { Img } from 'react-image';
-import { currency } from '@components/Common/Ticker';
-
-const TokenIcon = styled.div`
- height: 32px;
- width: 32px;
-`;
-
-const BalanceAndTicker = styled.div`
- font-size: 1rem;
-`;
-
-const Wrapper = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 15px 25px;
- border-radius: 16px;
- background: ${props => props.theme.tokenListItem.background};
- margin-bottom: 10px;
- box-shadow: ${props => props.theme.tokenListItem.boxShadow};
- border: 1px solid ${props => props.theme.tokenListItem.border};
-
- :hover {
- transform: translateY(-2px);
- box-shadow: rgb(136 172 243 / 25%) 0px 10px 30px,
- rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px;
- transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
- }
-`;
-
-const TokenListItem = ({ ticker, balance, tokenId }) => {
- return (
-
-
- {currency.tokenIconsUrl !== '' ? (
-
- }
- />
- ) : (
-
- )}
-
-
- {balance} {ticker}
-
-
- );
-};
-
-TokenListItem.propTypes = {
- ticker: PropTypes.string,
- balance: PropTypes.string,
- tokenId: PropTypes.string,
-};
-
-export default TokenListItem;
diff --git a/web/cashtab/src/components/Wallet/Wallet.js b/web/cashtab/src/components/Wallet/Wallet.js
deleted file mode 100644
--- a/web/cashtab/src/components/Wallet/Wallet.js
+++ /dev/null
@@ -1,333 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { WalletContext } from '@utils/context';
-import OnBoarding from '@components/OnBoarding/OnBoarding';
-import { QRCode } from '@components/Common/QRCode';
-import { currency } from '@components/Common/Ticker.js';
-import { Link } from 'react-router-dom';
-import TokenList from './TokenList';
-import TxHistory from './TxHistory';
-import ApiError from '@components/Common/ApiError';
-import BalanceHeader from '@components/Common/BalanceHeader';
-import BalanceHeaderFiat from '@components/Common/BalanceHeaderFiat';
-import { LoadingCtn, ZeroBalanceHeader } from '@components/Common/Atoms';
-import { getWalletState } from '@utils/cashMethods';
-
-export const Tabs = styled.div`
- margin: auto;
- margin-bottom: 12px;
- display: inline-block;
- text-align: center;
-`;
-export const TabLabel = styled.button`
- :focus,
- :active {
- outline: none;
- }
-
- border: none;
- background: none;
- font-size: 20px;
- cursor: pointer;
-
- @media (max-width: 400px) {
- font-size: 16px;
- }
-
- ${({ active, ...props }) =>
- active &&
- `
- color: ${props.theme.primary};
- `}
-`;
-export const TabLine = styled.div`
- margin: auto;
- transition: margin-left 0.5s ease-in-out, width 0.5s 0.1s;
- height: 4px;
- border-radius: 5px;
- background-color: ${props => props.theme.primary};
- pointer-events: none;
-
- margin-left: 69.5%;
- width: 29%;
-
- ${({ left, ...props }) =>
- left &&
- `
- margin-left: 3%
- width: 63%;
- `}
-`;
-export const TabPane = styled.div`
- ${({ active }) =>
- !active &&
- `
- display: none;
- `}
-`;
-
-export const SwitchBtnCtn = styled.div`
- display: flex;
- align-items: center;
- justify-content: center;
- align-content: space-between;
- margin-bottom: 15px;
- .nonactiveBtn {
- color: ${props => props.theme.wallet.text.secondary};
- background: ${props =>
- props.theme.wallet.switch.inactive.background} !important;
- box-shadow: none !important;
- }
- .slpActive {
- background: ${props =>
- props.theme.wallet.switch.activeToken.background} !important;
- box-shadow: ${props =>
- props.theme.wallet.switch.activeToken.shadow} !important;
- }
-`;
-
-export const SwitchBtn = styled.div`
- font-weight: bold;
- display: inline-block;
- cursor: pointer;
- color: ${props => props.theme.contrast};
- font-size: 14px;
- padding: 6px 0;
- width: 100px;
- margin: 0 1px;
- text-decoration: none;
- background: ${props => props.theme.primary};
- box-shadow: ${props => props.theme.wallet.switch.activeCash.shadow};
- user-select: none;
- :first-child {
- border-radius: 100px 0 0 100px;
- }
- :nth-child(2) {
- border-radius: 0 100px 100px 0;
- }
-`;
-
-export const Links = styled(Link)`
- color: ${props => props.theme.wallet.text.secondary};
- width: 100%;
- font-size: 16px;
- margin: 10px 0 20px 0;
- border: 1px solid ${props => props.theme.wallet.text.secondary};
- padding: 14px 0;
- display: inline-block;
- border-radius: 3px;
- transition: all 200ms ease-in-out;
- svg {
- fill: ${props => props.theme.wallet.text.secondary};
- }
- :hover {
- color: ${props => props.theme.primary};
- border-color: ${props => props.theme.primary};
- svg {
- fill: ${props => props.theme.primary};
- }
- }
- @media (max-width: 768px) {
- padding: 10px 0;
- font-size: 14px;
- }
-`;
-
-export const ExternalLink = styled.a`
- color: ${props => props.theme.wallet.text.secondary};
- width: 100%;
- font-size: 16px;
- margin: 0 0 20px 0;
- border: 1px solid ${props => props.theme.wallet.text.secondary};
- padding: 14px 0;
- display: inline-block;
- border-radius: 3px;
- transition: all 200ms ease-in-out;
- svg {
- fill: ${props => props.theme.wallet.text.secondary};
- transition: all 200ms ease-in-out;
- }
- :hover {
- color: ${props => props.theme.primary};
- border-color: ${props => props.theme.primary};
- svg {
- fill: ${props => props.theme.primary};
- }
- }
- @media (max-width: 768px) {
- padding: 10px 0;
- font-size: 14px;
- }
-`;
-
-export const AddrSwitchContainer = styled.div`
- text-align: center;
- padding: 6px 0 12px 0;
-`;
-
-const WalletInfo = () => {
- const ContextValue = React.useContext(WalletContext);
- const { wallet, fiatPrice, apiError, cashtabSettings } = ContextValue;
- const walletState = getWalletState(wallet);
- const { balances, parsedTxHistory, tokens } = walletState;
-
- const [isCashAddress, setIsCashAddress] = React.useState(true);
- const [activeTab, setActiveTab] = React.useState('txHistory');
-
- const hasHistory = parsedTxHistory && parsedTxHistory.length > 0;
-
- const handleChangeAddress = () => {
- setIsCashAddress(!isCashAddress);
- };
-
- return (
- <>
- {!balances.totalBalance && !apiError && !hasHistory ? (
- <>
-
-
- 🎉
-
- Congratulations on your new wallet!{' '}
-
- 🎉
-
- Start using the wallet immediately to receive{' '}
- {currency.ticker} payments, or load it up with{' '}
- {currency.ticker} to send to others
-
-
- >
- ) : (
- <>
-
- {fiatPrice !== null && !isNaN(balances.totalBalance) && (
-
- )}
- >
- )}
- {apiError && }
-
- {wallet && ((wallet.Path245 && wallet.Path145) || wallet.Path1899) && (
- <>
- {wallet.Path1899 ? (
- <>
-
- >
- ) : (
- <>
-
- >
- )}
- >
- )}
-
-
- handleChangeAddress()}
- className={isCashAddress ? null : 'nonactiveBtn'}
- >
- {currency.ticker}
-
- handleChangeAddress()}
- className={isCashAddress ? 'nonactiveBtn' : 'slpActive'}
- >
- {currency.tokenTicker}
-
-
- {hasHistory && parsedTxHistory && (
- <>
-
- setActiveTab('txHistory')}
- >
- Transaction History
-
- setActiveTab('tokens')}
- >
- eTokens
-
-
-
-
-
-
-
-
- {tokens && tokens.length > 0 ? (
-
- ) : (
-
- Tokens sent to your {currency.tokenTicker}{' '}
- address will appear here
-
- )}
-
- >
- )}
- >
- );
-};
-
-const Wallet = () => {
- const ContextValue = React.useContext(WalletContext);
- const { wallet, previousWallet, loading } = ContextValue;
-
- return (
- <>
- {loading ? (
-
- ) : (
- <>
- {(wallet && wallet.Path1899) ||
- (previousWallet && previousWallet.path1899) ? (
-
- ) : (
-
- )}
- >
- )}
- >
- );
-};
-
-export default Wallet;
diff --git a/web/cashtab/src/hooks/__tests__/useBCH.test.js b/web/cashtab/src/hooks/__tests__/useBCH.test.js
--- a/web/cashtab/src/hooks/__tests__/useBCH.test.js
+++ b/web/cashtab/src/hooks/__tests__/useBCH.test.js
@@ -148,17 +148,14 @@
it('sends XEC correctly with an encrypted OP_RETURN message', async () => {
const { sendXec } = useBCH();
const BCH = new BCHJS();
- const { expectedTxId, utxos, wallet, destinationAddress, sendAmount } =
- sendBCHMock;
- const expectedPubKeyResponse = {
- success: true,
- publicKey:
- '03451a3e61ae8eb76b8d4cd6057e4ebaf3ef63ae3fe5f441b72c743b5810b6a389',
- };
-
- BCH.encryption.getPubKey = jest
- .fn()
- .mockResolvedValue(expectedPubKeyResponse);
+ const {
+ expectedTxId,
+ expectedHex,
+ utxos,
+ wallet,
+ destinationAddress,
+ sendAmount,
+ } = sendBCHMock;
BCH.RawTransactions.sendRawTransaction = jest
.fn()
@@ -595,15 +592,6 @@
'bitcoincash:qqvuj09f80sw9j7qru84ptxf0hyqffc38gstxfs5ru';
const message =
'This message is encrypted by ecies-lite with default parameters';
- const expectedPubKeyResponse = {
- success: true,
- publicKey:
- '03208c4f52229e021ddec5fc6e07a59fd66388ac52bc2a2c1e0f1afb24b0e275ac',
- };
-
- BCH.encryption.getPubKey = jest
- .fn()
- .mockResolvedValue(expectedPubKeyResponse);
const result = await handleEncryptedOpReturn(
BCH,
@@ -642,23 +630,100 @@
}
});
+ it(`handleEncryptedOpReturn() correctly throws error when attempting to encrypt a message based on an invalid cash address`, async () => {
+ const { handleEncryptedOpReturn } = useBCH();
+ const BCH = new BCHJS();
+ const destinationAddress = 'bitcoincash:qqvINVALIDADDRESSSSSSru';
+ const message =
+ 'This message is encrypted by ecies-lite with default parameters';
+
+ const expectedError = {
+ error: `Unsupported address format : ${destinationAddress}`,
+ success: false,
+ };
+
+ let thrownError;
+ try {
+ await handleEncryptedOpReturn(
+ BCH,
+ destinationAddress,
+ Buffer.from(message),
+ );
+ } catch (err) {
+ thrownError = err;
+ }
+
+ expect(thrownError).toStrictEqual(expectedError);
+ });
+
+ it(`handleEncryptedOpReturn() correctly throws error when attempting to encrypt a message based on null cash address input`, async () => {
+ const { handleEncryptedOpReturn } = useBCH();
+ const BCH = new BCHJS();
+ const destinationAddress = null;
+ const message =
+ 'This message is encrypted by ecies-lite with default parameters';
+ const expectedError = 'Input must be a valid Bitcoin Cash address.';
+
+ let thrownError;
+ try {
+ await handleEncryptedOpReturn(
+ BCH,
+ destinationAddress,
+ Buffer.from(message),
+ );
+ } catch (err) {
+ thrownError = err;
+ }
+
+ expect(thrownError).toStrictEqual(new Error(expectedError));
+ });
+
it(`getRecipientPublicKey() correctly retrieves the public key of a cash address`, async () => {
const { getRecipientPublicKey } = useBCH();
const BCH = new BCHJS();
- const expectedPubKeyResponse = {
- success: true,
- publicKey:
- '03208c4f52229e021ddec5fc6e07a59fd66388ac52bc2a2c1e0f1afb24b0e275ac',
- };
- const expectedPubKey =
- '03208c4f52229e021ddec5fc6e07a59fd66388ac52bc2a2c1e0f1afb24b0e275ac';
- const destinationAddress =
- 'bitcoincash:qqvuj09f80sw9j7qru84ptxf0hyqffc38gstxfs5ru';
- BCH.encryption.getPubKey = jest
- .fn()
- .mockResolvedValue(expectedPubKeyResponse);
- expect(await getRecipientPublicKey(BCH, destinationAddress)).toBe(
- expectedPubKey,
+ expect(
+ await getRecipientPublicKey(
+ BCH,
+ 'bitcoincash:qqvuj09f80sw9j7qru84ptxf0hyqffc38gstxfs5ru',
+ ),
+ ).toStrictEqual(
+ '03208c4f52229e021ddec5fc6e07a59fd66388ac52bc2a2c1e0f1afb24b0e275ac',
);
});
+
+ it(`getRecipientPublicKey() correctly throws error for an invalid cash address`, async () => {
+ const { getRecipientPublicKey } = useBCH();
+ const BCH = new BCHJS();
+ const destinationAddress = 'bitcoincash:qqvuj0INVALIDDDDDDDDDDs5ru';
+
+ const expectedError = {
+ error: `Unsupported address format : ${destinationAddress}`,
+ success: false,
+ };
+
+ let thrownError;
+ try {
+ await getRecipientPublicKey(BCH, destinationAddress);
+ } catch (err) {
+ thrownError = err;
+ }
+
+ expect(thrownError).toStrictEqual(expectedError);
+ });
+
+ it(`getRecipientPublicKey() correctly throws error for a null cash address input`, async () => {
+ const { getRecipientPublicKey } = useBCH();
+ const BCH = new BCHJS();
+ const destinationAddress = null;
+ const expectedError = 'Input must be a valid Bitcoin Cash address.';
+
+ let thrownError;
+ try {
+ await getRecipientPublicKey(BCH, destinationAddress);
+ } catch (err) {
+ thrownError = err;
+ }
+
+ expect(thrownError).toStrictEqual(new Error(expectedError));
+ });
});