diff --git a/web/cashtab/extension/public/manifest.json b/web/cashtab/extension/public/manifest.json
--- a/web/cashtab/extension/public/manifest.json
+++ b/web/cashtab/extension/public/manifest.json
@@ -3,7 +3,7 @@
"name": "Cashtab",
"description": "A browser-integrated eCash wallet from Bitcoin ABC",
- "version": "1.0.0",
+ "version": "1.0.1",
"content_scripts": [
{
"matches": ["file://*/*", "http://*/*", "https://*/*"],
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,5 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
import 'antd/dist/antd.less';
+import { Spin } from 'antd';
+import { CashLoadingIcon } from '@components/Common/CustomIcons';
import '../index.css';
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
import { theme } from '@assets/styles/theme';
@@ -16,9 +18,9 @@
import Configure from '@components/Configure/Configure';
import NotFound from '@components/NotFound';
import CashTab from '@assets/cashtab_xec.png';
-import PopOut from '@assets/popout.svg';
import './App.css';
import { WalletContext } from '@utils/context';
+import { isValidStoredWallet } from '@utils/cashMethods';
import WalletLabel from '@components/Common/WalletLabel.js';
import {
Route,
@@ -27,6 +29,8 @@
useLocation,
useHistory,
} from 'react-router-dom';
+// Extension-only import used for open in new tab link
+import PopOut from '@assets/popout.svg';
const GlobalStyle = createGlobalStyle`
.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 {
@@ -84,13 +88,6 @@
border-top: 1px solid ${props => props.theme.wallet.borders.color};
`;
-const OpenInTabBtn = styled.button`
- background: none;
- border: none;
-`;
-const ExtTabImg = styled.img`
- max-width: 20px;
-`;
export const NavButton = styled.button`
:focus,
:active {
@@ -134,8 +131,10 @@
justify-content: center;
width: 100%;
min-height: 100vh;
- background: ${props => props.theme.app.sidebars};
+ background-image: ${props => props.theme.app.sidebars};
+ background-attachment: fixed;
`;
+
export const WalletCtn = styled.div`
position: relative;
width: 500px;
@@ -186,20 +185,29 @@
width: 110px;
}
`;
-export const AbcLogo = styled.img`
- width: 150px;
- @media (max-width: 768px) {
- width: 120px;
- }
+
+// Extension only styled components
+const OpenInTabBtn = styled.button`
+ background: none;
+ border: none;
+`;
+
+const ExtTabImg = styled.img`
+ max-width: 20px;
`;
const App = () => {
const ContextValue = React.useContext(WalletContext);
- const { wallet } = ContextValue;
+ const { wallet, loading } = ContextValue;
+ const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false);
+ // If wallet is unmigrated, do not show page until it has migrated
+ // An invalid wallet will be validated/populated after the next API call, ETA 10s
+ const validWallet = isValidStoredWallet(wallet);
const location = useLocation();
const history = useHistory();
const selectedKey =
location && location.pathname ? location.pathname.substr(1) : '';
+ // openInTab is an extension-only method
const openInTab = () => {
window.open(`index.html#/${selectedKey}`);
};
@@ -207,80 +215,100 @@
return (
-
-
-
-
-
- openInTab()}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (
-
+
+
+
+
+
+ {/*Begin extension-only components*/}
+ openInTab()}
+ >
+
+
+ {/*End extension-only components*/}
+
+
+
+
+
+
+
+
+
+
+
- )}
- />
-
-
-
-
-
-
-
- {wallet ? (
-
+ (
+
+ )}
+ />
+
+
+
+
+
+
+
+ {wallet ? (
+
- ) : null}
-
-
+ history.push('/send')}
+ >
+
+ Send
+
+ history.push('/configure')}
+ >
+
+ Settings
+
+
+ ) : null}
+
+
+
);
};
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
@@ -18,11 +18,8 @@
import Configure from '@components/Configure/Configure';
import NotFound from '@components/NotFound';
import CashTab from '@assets/cashtab_xec.png';
-import TabCash from '@assets/tabcash.png';
-import ABC from '@assets/logo_topright.png';
import './App.css';
import { WalletContext } from '@utils/context';
-import { checkForTokenById } from '@utils/tokenMethods.js';
import { isValidStoredWallet } from '@utils/cashMethods';
import WalletLabel from '@components/Common/WalletLabel.js';
import {
@@ -32,6 +29,10 @@
useLocation,
useHistory,
} 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';
const GlobalStyle = createGlobalStyle`
.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 {
@@ -75,6 +76,7 @@
font-family: 'Gilroy', sans-serif;
background-color: ${props => props.theme.app.background};
`;
+
const Footer = styled.div`
z-index: 2;
background-color: ${props => props.theme.footer.background};
@@ -163,6 +165,14 @@
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;
@@ -171,6 +181,22 @@
}
`;
+export const CashTabLogo = styled.img`
+ width: 120px;
+ @media (max-width: 768px) {
+ width: 110px;
+ }
+`;
+
+// AbcLogo styled component not included in extension, replaced by open in new tab link
+export const AbcLogo = styled.img`
+ width: 150px;
+ @media (max-width: 768px) {
+ width: 120px;
+ }
+`;
+
+// Easter egg styled component not used in extension/src/components/App.js
export const EasterEgg = styled.img`
position: fixed;
bottom: -195px;
@@ -189,19 +215,6 @@
}
`;
-export const CashTabLogo = styled.img`
- width: 120px;
- @media (max-width: 768px) {
- width: 110px;
- }
-`;
-export const AbcLogo = styled.img`
- width: 150px;
- @media (max-width: 768px) {
- width: 120px;
- }
-`;
-
const App = () => {
const ContextValue = React.useContext(WalletContext);
const { wallet, loading } = ContextValue;
@@ -209,16 +222,18 @@
// If wallet is unmigrated, do not show page until it has migrated
// An invalid wallet will be validated/populated after the next API call, ETA 10s
const validWallet = isValidStoredWallet(wallet);
+ const location = useLocation();
+ const history = useHistory();
+ const selectedKey =
+ location && location.pathname ? location.pathname.substr(1) : '';
+
+ // Easter egg boolean not used in extension/src/components/App.js
const hasTab = validWallet
? checkForTokenById(
wallet.state.tokens,
'50d8292c6255cda7afc6c8566fed3cf42a2794e9619740fe8f4c95431271410e',
)
: false;
- const location = useLocation();
- const history = useHistory();
- const selectedKey =
- location && location.pathname ? location.pathname.substr(1) : '';
return (
@@ -234,9 +249,12 @@
+ {/*Begin component not included in extension as desktop only*/}
{hasTab && (
)}
+ {/*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*/}