Differential D10252 Diff 30343 web/cashtab/src/components/Configure/Configure.js

Changeset View

Standalone View

web/cashtab/src/components/Configure/Configure.js

Show All 21 Lines	import {
ThemedCopyOutlined,		ThemedCopyOutlined,
ThemedWalletOutlined,		ThemedWalletOutlined,
ThemedDollarOutlined,		ThemedDollarOutlined,
} from '@components/Common/CustomIcons';		} from '@components/Common/CustomIcons';
import { ReactComponent as Trashcan } from '@assets/trashcan.svg';		import { ReactComponent as Trashcan } from '@assets/trashcan.svg';
import { ReactComponent as Edit } from '@assets/edit.svg';		import { ReactComponent as Edit } from '@assets/edit.svg';
import { Event } from '@utils/GoogleAnalytics';		import { Event } from '@utils/GoogleAnalytics';
import ApiError from '@components/Common/ApiError';		import ApiError from '@components/Common/ApiError';
		import { formatSavedBalance } from '@utils/validation';

const { Panel } = Collapse;		const { Panel } = Collapse;

const SettingsLink = styled.a`		const SettingsLink = styled.a`
text-decoration: underline;		text-decoration: underline;
color: ${props => props.theme.primary};		color: ${props => props.theme.primary};
:visited {		:visited {
text-decoration: underline;		text-decoration: underline;
Show All 30 Lines	@media (max-width: 500px) {
justify-content: center;		justify-content: center;
margin-bottom: 15px;		margin-bottom: 15px;
}		}

h3 {		h3 {
font-size: 16px;		font-size: 16px;
color: ${props => props.theme.wallet.text.secondary};		color: ${props => props.theme.wallet.text.secondary};
margin: 0;		margin: 0;
text-align: left;		text-align: center;
white-space: nowrap;		white-space: nowrap;
overflow: hidden;		overflow: hidden;
text-overflow: ellipsis;		text-overflow: ellipsis;
}		}
		h3.overflow {
		width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		}
		h3.overflow:hover {
		background-color: #eee;
		overflow: visible;
		inline-size: 100px;
		white-space: normal;
		}
		`;

		const SWBalance = styled.div`
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		word-wrap: break-word;
		hyphens: auto;
		@media (max-width: 500px) {
		width: 100%;
		justify-content: center;
		margin-bottom: 15px;
		}
		div {
		font-size: 13px;
		color: ${props => props.theme.wallet.text.secondary};
		margin: 0;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		}
		div.overflow {
		width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		}
		div.overflow:hover {
		background-color: #eee;
		overflow: visible;
		inline-size: 150px;
		white-space: normal;
		}
`;		`;

const SWButtonCtn = styled.div`		const SWButtonCtn = styled.div`
width: 50%;		width: 50%;
display: flex;		display: flex;
align-items: center;		align-items: center;
justify-content: flex-end;		justify-content: flex-end;
@media (max-width: 500px) {		@media (max-width: 500px) {
▲ Show 20 Lines • Show All 445 Lines • ▼ Show 20 Lines	return (
<AWRow>		<AWRow>
<h3>{wallet.name}</h3>		<h3>{wallet.name}</h3>
<h4>Currently active</h4>		<h4>Currently active</h4>
</AWRow>		</AWRow>
<div>		<div>
{savedWallets.map(sw => (		{savedWallets.map(sw => (
<SWRow key={sw.name}>		<SWRow key={sw.name}>
<SWName>		<SWName>
<h3>{sw.name}</h3>		<h3 className="overflow">
		{sw.name}
		</h3>
</SWName>		</SWName>
		<SWBalance>
		<div className="overflow">
		[
		{sw && sw.state
		? formatSavedBalance(
		sw.state.balances
		.totalBalance,
		)
		: 'N/A'}{' '}
		XEC]
		</div>
		</SWBalance>
<SWButtonCtn>		<SWButtonCtn>
<Edit		<Edit
onClick={() =>		onClick={() =>
showPopulatedRenameWalletModal(		showPopulatedRenameWalletModal(
sw,		sw,
)		)
}		}
/>		/>
▲ Show 20 Lines • Show All 53 Lines • Show Last 20 Lines