diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx
index 9d32acdf6..d530d25a4 100644
--- a/ts/components/session/LeftPaneSectionHeader.tsx
+++ b/ts/components/session/LeftPaneSectionHeader.tsx
@@ -22,8 +22,8 @@ const Tab = ({
}) => {
const handleClick = onSelect
? () => {
- onSelect(type);
- }
+ onSelect(type);
+ }
: undefined;
return (
@@ -68,14 +68,13 @@ export const LeftPaneSectionHeader = (props: Props) => {
);
};
-export const LeftPaneBanner = (Props: any) => {
-
+export const LeftPaneBanner = () => {
const [completion, setCompletion] = useState(80);
const [bodyText, setBodyText] = useState(window.i18n('recoveryPhraseSecureMessage'));
const [buttonText, setButtonText] = useState(window.i18n('recoveryPhraseSecureButtonText'));
const [recoveryPhraseHidden, setRecoveryPhraseHidden] = useState(true);
const [isCompleted, setIsCompleted] = useState(false);
- const [bannerTitle, setBannerTitle] = useState(window.i18n("recoveryPhraseSecureTitle"));
+ const [bannerTitle, setBannerTitle] = useState(window.i18n('recoveryPhraseSecureTitle'));
const recoveryPhrase = UserUtils.getCurrentRecoveryPhrase();
const secondsBeforeRemoval = 2 * 1000;
const completionText = `${completion}%`;
@@ -84,7 +83,7 @@ export const LeftPaneBanner = (Props: any) => {
setRecoveryPhraseHidden(false);
setBodyText(window.i18n('recoveryPhraseInfoMessage'));
setButtonText(window.i18n('copy'));
- }
+ };
const handleSecureClick = () => {
if (completion === 80) {
@@ -92,14 +91,14 @@ export const LeftPaneBanner = (Props: any) => {
setBodyText(window.i18n('recoveryPhraseRevealMessage'));
setButtonText(window.i18n('recoveryPhraseRevealButtonText'));
}
- }
+ };
const BannerInner = (props: any) => {
const dispatch = useDispatch();
const handleCopyPhraseClick = async () => {
await navigator.clipboard.writeText(recoveryPhrase);
- setCompletion(100)
+ setCompletion(100);
setBannerTitle(window.i18n('recoveryPhraseCompleteTitle'));
setBodyText('');
setRecoveryPhraseHidden(true);
@@ -109,63 +108,57 @@ export const LeftPaneBanner = (Props: any) => {
setTimeout(() => {
dispatch(disableRecoveryPhrasePrompt());
}, secondsBeforeRemoval);
- }
+ };
- let onClick =
- completion === 80 ? handleSecureClick :
- completion === 90 ?
- recoveryPhraseHidden ?
- handleShowRecoveryClick :
- handleCopyPhraseClick
- : null;
+ const onClick =
+ completion === 80
+ ? handleSecureClick
+ : completion === 90
+ ? recoveryPhraseHidden
+ ? handleShowRecoveryClick
+ : handleCopyPhraseClick
+ : null;
- // TODO: This can be refactored down. all returns have p tag + button, final has conditional phrase element.
return (
-
- {bodyText}
-
- {!recoveryPhraseHidden &&
+ {bodyText}
+ {!recoveryPhraseHidden && (
+ className="left-pane-banner___phrase"
+ onClick={handleShowRecoveryClick}
+ >
{recoveryPhrase}
- }
- {!isCompleted &&
+ )}
+ {!isCompleted && (
- }
+ )}
- )
- }
+ );
+ };
- const useColumn = completion === 90 && handleShowRecoveryClick;
+ const flexDirection = completion === 90 && handleShowRecoveryClick ? 'column' : 'row';
const theme = useTheme();
return (
-
+
-
+
-
+
{bannerTitle} {completionText}
-
+
- )
-}
+ );
+};
interface StyledProgressBarContainerProps {
theme: DefaultTheme;
@@ -196,15 +189,12 @@ export const StyledBannerTitle = styled.div`
line-height: 1.3;
font-size: ${(p: StyledBannerTitle) => p.theme.common.fonts.md};
font-weight: bold;
- margin:
- ${Constants.UI.SPACING.marginSm}
- ${Constants.UI.SPACING.marginSm}
- 0
+ margin: ${Constants.UI.SPACING.marginSm} ${Constants.UI.SPACING.marginSm} 0
${Constants.UI.SPACING.marginSm};
span {
- color: ${(p: StyledBannerTitle) => p.theme.colors.textAccent};
- }
+ color: ${(p: StyledBannerTitle) => p.theme.colors.textAccent};
+ }
`;
interface StyledLeftPaneBannerProps {
@@ -219,13 +209,12 @@ export const StyledLeftPaneBanner = styled.div`
border-bottom: ${(p: StyledLeftPaneBannerProps) => p.border};
opacity: 1;
transition: opacity 2s;
- ${(p: StyledLeftPaneBannerProps) => p.isCompleted === true ?
- `
+ ${(p: StyledLeftPaneBannerProps) =>
+ p.isCompleted === true
+ ? `
opacity: 0;
`
- :
- null
- }
+ : null}
`;
const StyledBannerInner = styled.div`
@@ -252,14 +241,6 @@ const StyledRecoveryPhrase = styled.p`
border: ${(props: StyledRecoveryPhraseProps) => props.theme.colors.sessionBorderHighContrast};
`;
-
-// 90%
-
-// tap and hold the redacted words to reveal your recovery phrase then store it safely to secure
-
-// meet your recovery phrase
-// your recovery phrase is the master key to your session ID - you can use it to restore your Session ID if you lose access to your device, Store your recovery phrase in a safe place, and don't give it to anyone.
-
interface StyledBannerContainerProps {
flexDirection?: string;
}
@@ -267,7 +248,7 @@ export const StyledBannerContainer = styled.div`
display: flex;
flex-direction: ${(p: StyledBannerContainerProps) => p.flexDirection};
justify-content: space-between;
- padding: ${Constants.UI.SPACING.marginSm}
+ padding: ${Constants.UI.SPACING.marginSm};
`;
export const StyledLeftPaneHeaderContainer = styled.div`
diff --git a/ts/state/ducks/userConfig.tsx b/ts/state/ducks/userConfig.tsx
index 20316fcdf..af64b2cb4 100644
--- a/ts/state/ducks/userConfig.tsx
+++ b/ts/state/ducks/userConfig.tsx
@@ -22,10 +22,8 @@ const userConfigSlice = createSlice({
state.audioAutoplay = !state.audioAutoplay;
},
disableRecoveryPhrasePrompt: state => {
- console.log('setting recovery phrase state');
- state.showRecoveryPhrasePrompt = false
+ state.showRecoveryPhrasePrompt = false;
},
-
},
});
diff --git a/ts/state/selectors/userConfig.ts b/ts/state/selectors/userConfig.ts
index 1e3de4c7c..9c8641cb2 100644
--- a/ts/state/selectors/userConfig.ts
+++ b/ts/state/selectors/userConfig.ts
@@ -9,7 +9,6 @@ export const getAudioAutoplay = createSelector(
(state: UserConfigState): boolean => state.audioAutoplay
);
-
export const getShowRecoveryPhrasePrompt = createSelector(
getUserConfig,
(state: UserConfigState): boolean => state.showRecoveryPhrasePrompt