Differential D19604 Diff 58919 cashtab/src/components/App/App.tsx

Changeset View

Standalone View

cashtab/src/components/App/App.tsx

// Copyright (c) 2024 The Bitcoin developers		// Copyright (c) 2024 The Bitcoin developers
// Distributed under the MIT software license, see the accompanying		// Distributed under the MIT software license, see the accompanying
// file COPYING or http://www.opensource.org/licenses/mit-license.php.		// file COPYING or http://www.opensource.org/licenses/mit-license.php.

import React, { useState, useContext, useEffect, useRef } from 'react';		import React, { useState, useContext, useEffect, useRef } from 'react';
import { Tooltip } from 'react-tooltip';		import { Tooltip } from 'react-tooltip';
import {		import { DogeIcon, HomeIcon, TokensIcon } from 'components/Common/CustomIcons';
HomeIcon,		import { ReactComponent as ToolsIcon } from 'assets/tools.svg';
SendIcon,		import { ReactComponent as SettingsIcon } from 'assets/settings-icon.svg';
ReceiveIcon,		import { ReactComponent as SendReceiveIcon } from 'assets/send-receive.svg';
SettingsIcon,
AirdropIcon,
BankIcon,
WalletIcon,
ContactsIcon,
ThemedSignAndVerifyMsg,
TokensIcon,
RewardIcon,
NftIcon,
DogeIcon,
} from 'components/Common/CustomIcons';
import Spinner from 'components/Common/Spinner';		import Spinner from 'components/Common/Spinner';
import { ThemeProvider } from 'styled-components';		import { ThemeProvider } from 'styled-components';
import { theme } from 'assets/styles/theme';		import { theme } from 'assets/styles/theme';
import Home from 'components/Home/Home';		import Home from 'components/Home/Home';
import Receive from 'components/Receive/Receive';		import Receive from 'components/Receive/Receive';
import CreateToken from 'components/Etokens/CreateToken';		import CreateToken from 'components/Etokens/CreateToken';
import SendXec from 'components/Send/SendXec';		import SendXec from 'components/Send/SendXec';
import Token from 'components/Etokens/Token';		import Token from 'components/Etokens/Token';
Show All 27 Lines
import Header from 'components/Header';		import Header from 'components/Header';
import { Bounce, ToastContainer } from 'react-toastify';		import { Bounce, ToastContainer } from 'react-toastify';
import PullToRefresh from 'components/Common/PullToRefresh';		import PullToRefresh from 'components/Common/PullToRefresh';
import {		import {
ExtensionFrame,		ExtensionFrame,
GlobalStyle,		GlobalStyle,
CustomApp,		CustomApp,
Footer,		Footer,
NavWrapper,
NavItem,
NavIcon,
NavMenu,
NavButton,		NavButton,
WalletBody,		WalletBody,
ScreenWrapper,		ScreenWrapper,
WalletCtn,		WalletCtn,
CashtabLogo,		CashtabLogo,
EasterEgg,		EasterEgg,
DesktopLogo,		DesktopLogo,
} from 'components/App/styles';		} from 'components/App/styles';
Show All 12 Lines	const {
update,		update,
refreshTransactionHistory,		refreshTransactionHistory,
ecashWallet,		ecashWallet,
apiError,		apiError,
} = ContextValue;		} = ContextValue;
const { wallets, tokens } = cashtabState;		const { wallets, tokens } = cashtabState;
const hasWallet = ecashWallet !== null;		const hasWallet = ecashWallet !== null;
const [navMenuClicked, setNavMenuClicked] = useState(false);		const [navMenuClicked, setNavMenuClicked] = useState(false);
const handleNavMenuClick = () => setNavMenuClicked(!navMenuClicked);
const location = useLocation();		const location = useLocation();
const navigate = useNavigate();		const navigate = useNavigate();

// Track navigation history to detect if we can go back		// Track navigation history to detect if we can go back
const navigationStackRef = useRef<string[]>([location.pathname]);		const navigationStackRef = useRef<string[]>([location.pathname]);
const isNavigatingBackRef = useRef(false);		const isNavigatingBackRef = useRef(false);

// Track navigation history - add to stack on forward navigation		// Track navigation history - add to stack on forward navigation
▲ Show 20 Lines • Show All 301 Lines • ▼ Show 20 Lines	return (
onClick={() => navigate('/')}		onClick={() => navigate('/')}
>		>
<span>Transactions</span>		<span>Transactions</span>
<HomeIcon />		<HomeIcon />
</NavButton>		</NavButton>

<NavButton		<NavButton
aria-label="Send Screen"		aria-label="Send Screen"
active={location.pathname === '/send'}		active={
		location.pathname === '/send' \|\|
		location.pathname === '/receive'
		}
onClick={() => navigate('/send')}		onClick={() => navigate('/send')}
>		>
<span>Send</span>		<span>Send / Receive</span>
<SendIcon />		<SendReceiveIcon />
</NavButton>		</NavButton>
<NavButton		<NavButton
aria-label="Tokens"		aria-label="Tokens"
active={location.pathname === '/etokens'}		active={
		location.pathname === '/etokens' \|\|
		location.pathname === '/create-token' \|\|
		location.pathname ===
		'/create-nft-collection'
		}
onClick={() => navigate('/etokens')}		onClick={() => navigate('/etokens')}
>		>
<span>Tokens</span>		<span>Tokens</span>
<TokensIcon />		<TokensIcon />
</NavButton>		</NavButton>
<NavButton		<NavButton
aria-label="Receive"		aria-label="Agora"
active={location.pathname === '/receive'}		active={location.pathname === '/agora'}
onClick={() => navigate('receive')}		onClick={() => navigate('/agora')}
		>
		<span>Agora</span>
		<DogeIcon />
		</NavButton>
		<NavButton
		aria-label="Tools"
		active={
		location.pathname === '/contacts' \|\|
		location.pathname === '/signverifymsg' \|\|
		location.pathname === '/airdrop' \|\|
		location.pathname === '/rewards'
		}
		onClick={() => navigate('/contacts')}
		>
		<span>Tools</span>
		<ToolsIcon />
		</NavButton>
		<NavButton
		aria-label="Settings"
		active={location.pathname === '/configure'}
		onClick={() => navigate('/configure')}
>		>
<span>Receive</span>		<span>Settings</span>
<ReceiveIcon />		<SettingsIcon />
</NavButton>		</NavButton>
<NavWrapper		{/* <NavWrapper
className="nav-menu-container"		className="nav-menu-container"
title="Show Other Screens"		title="Show Other Screens"
onClick={() => {		onClick={() => {
handleNavMenuClick();		handleNavMenuClick();
}}		}}
>		>
<NavIcon clicked={navMenuClicked} />		<NavIcon clicked={navMenuClicked} />
<NavMenu		<NavMenu
▲ Show 20 Lines • Show All 91 Lines • ▼ Show 20 Lines	return (
location.pathname === '/configure'		location.pathname === '/configure'
}		}
onClick={() => navigate('/configure')}		onClick={() => navigate('/configure')}
>		>
<p>Settings</p>		<p>Settings</p>
<SettingsIcon />		<SettingsIcon />
</NavItem>		</NavItem>
</NavMenu>		</NavMenu>
</NavWrapper>		</NavWrapper> */}
</Footer>		</Footer>
)}		)}
</WalletBody>		</WalletBody>
<Tooltip		<Tooltip
id="cashtab-tooltip"		id="cashtab-tooltip"
place="bottom-end"		place="bottom-end"
opacity={1}		opacity={1}
style={{ zIndex: 1000 }}		style={{ zIndex: 1000 }}
/>		/>
</CustomApp>		</CustomApp>
</ThemeProvider>		</ThemeProvider>
);		);
};		};

export default App;		export default App;