Differential D19604 Diff 58737 cashtab/src/components/Common/HideBalanceSwitch.tsx

Changeset View

Standalone View

cashtab/src/components/Common/HideBalanceSwitch.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 from 'react';		import React from 'react';
import Eye from 'assets/eye.png';
import EyeInvisible from 'assets/eye-invisible.png';
import styled from 'styled-components';		import styled from 'styled-components';
import CashtabSettings from 'config/CashtabSettings';		import CashtabSettings from 'config/CashtabSettings';
		import { ReactComponent as EyeIcon } from 'assets/visible.svg';
		import { ReactComponent as EyeInvisibleIcon } from 'assets/hidden.svg';

interface HideBalanceSwitchProps {		interface HideBalanceSwitchProps {
settings: CashtabSettings;		settings: CashtabSettings;
updateCashtabState: (updates: {		updateCashtabState: (updates: {
[key: string]: CashtabSettings;		[key: string]: CashtabSettings;
}) => Promise<boolean>;		}) => Promise<boolean>;
}		}

Show All 9 Lines	): void => {
settings: {		settings: {
...settings,		...settings,
balanceVisible: e.target.checked,		balanceVisible: e.target.checked,
},		},
});		});
};		};

const SwitchInputWrapper = styled.label`		const SwitchInputWrapper = styled.label`
width: 38px;
height: 100%;		height: 100%;
flex-shrink: 0;		flex-shrink: 0;
display: inline-block;		display: inline-block;
position: relative;		position: relative;
cursor: pointer;		cursor: pointer;
`;		`;

const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`		const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
display: none;		display: none;
`;		`;

const CustomCheckbox = styled.div<{ checked: boolean }>`		const CustomCheckbox = styled.div<{ checked: boolean }>`
width: 100%;		width: 100%;
height: 100%;		height: 100%;
background-color: ${({ checked }) =>		color: ${({ checked }) =>
checked		checked
? props => props.theme.secondaryBackground		? props => props.theme.primaryText
: props => props.theme.accent};		: props => props.theme.accent};
border-radius: 5px;
display: flex;		display: flex;
align-items: center;		align-items: center;
justify-content: center;		justify-content: center;
transition: background-color 0.2s;		transition: color 0.2s;

img {		svg {
width: 20px;		width: 25px;
height: 20px;		height: 25px;
opacity: ${({ checked }) => (checked ? '0.5' : '1')};		}
		:hover {
		color: ${props => props.theme.accent};
}		}
`;		`;

return (		return (
<SwitchInputWrapper>		<SwitchInputWrapper>
<HiddenCheckbox		<HiddenCheckbox
checked={settings.balanceVisible}		checked={settings.balanceVisible}
onChange={handleShowHideBalance}		onChange={handleShowHideBalance}
/>		/>
<CustomCheckbox checked={settings.balanceVisible}>		<CustomCheckbox checked={settings.balanceVisible}>
<img		{settings.balanceVisible ? (
src={settings.balanceVisible ? Eye : EyeInvisible}		<EyeIcon title="Visible" fill="currentColor" />
alt="toggle icon"		) : (
/>		<EyeInvisibleIcon title="Hidden" fill="currentColor" />
		)}
</CustomCheckbox>		</CustomCheckbox>
</SwitchInputWrapper>		</SwitchInputWrapper>
);		);
};		};

export default HideBalanceSwitch;		export default HideBalanceSwitch;