Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

merge-main-to-public #815

Closed
wants to merge 27 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
3986258
[ENG-3842] feat: Add the mixpanel events for featured apps in the ext…
dhriaznov Mar 11, 2024
07cc83f
Update src/app/utils/mixpanel.ts
dhriaznov Mar 12, 2024
f50379f
Add the MIX_PANEL_TOKEN_EXPLORE_APP import
dhriaznov Mar 12, 2024
b23e451
Add the MIX_PANEL_TOKEN_EXPLORE_APP to the .env.example file, as well…
dhriaznov Mar 13, 2024
0d302cd
Add lazy loading for the mixpanel instances
dhriaznov Mar 13, 2024
b5cdcff
Trigger CI build
dhriaznov Mar 14, 2024
6adb01f
Merge branch 'develop' into denys/eng-3842-add-the-mixpanel-events-fo…
dhriaznov Mar 14, 2024
f946599
Merge branch 'develop' into denys/eng-3842-add-the-mixpanel-events-fo…
teebszet Mar 15, 2024
45cf27e
Merge pull request #148 from secretkeylabs/release/v0.32.3
teebszet Mar 19, 2024
b510d70
Merge branch 'develop' into denys/eng-3842-add-the-mixpanel-events-fo…
dhriaznov Mar 19, 2024
10653d1
[ENG-3477] feat: Open the onboarding screen right after user installs…
dhriaznov Mar 21, 2024
c11a9d2
Merge branch 'develop' into denys/eng-3842-add-the-mixpanel-events-fo…
dhriaznov Mar 21, 2024
6c08ff9
[ENG-3937] Replace the old STX logo leftovers on the web-extension (#…
dhriaznov Mar 25, 2024
3980cae
fix: remove satributes component from receive section in payment addr…
fedeerbes Mar 25, 2024
a62315f
fix: qr config, avoid hiding dots covered by image (#154)
fedeerbes Mar 25, 2024
5759028
[ENG-3972] fix: Issue with balance sip-10 tokens fiat value does not …
dhriaznov Mar 25, 2024
59ae427
Add sighash none warning (#152)
victorkirov Mar 25, 2024
66fafe6
[ENG-3340] feat: Add UI warning about the Non default sighash Ledger …
dhriaznov Mar 25, 2024
f13eb25
[ENG-3956] setup healthcheck test (#153)
Christine-Pinto Mar 25, 2024
9e3ba2b
Merge pull request #130 from secretkeylabs/denys/eng-3842-add-the-mix…
dhriaznov Mar 25, 2024
b0f8c32
Sats connect RPC support (#141)
m-aboelenein Mar 27, 2024
7473e00
feat: add support for BLOCK9_450, BLOCK286 and LEGACY satributes (#156)
fedeerbes Mar 27, 2024
98ef0f9
release: v0.33.0
Mar 27, 2024
1bf2015
Merge branch 'main' into release/v0.33.0
teebszet Mar 27, 2024
dcd7859
fix: add mixpanel types and fix type errors (#165)
teebszet Mar 28, 2024
34cd1d1
Merge branch 'develop' into release/v0.33.0
teebszet Mar 28, 2024
489ab8d
Merge pull request #161 from secretkeylabs/release/v0.33.0
teebszet Apr 2, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[ENG-3477] feat: Open the onboarding screen right after user installs…
… the extension (#86)

* [ENG-3477] feat: Open the onboarding screen right after user installs the extension

* Use the ui-library/button component instead of the ActionButton

* Remove the tabs permission from the manifest config

* Remove the custom old button styles

* Fix the onboarding animation container

* Improve the account restore/creation flow accessibility
  • Loading branch information
dhriaznov authored Mar 21, 2024
commit 10653d1fe1ece807f92c12a6ec194b961ab4c84e
24 changes: 16 additions & 8 deletions src/app/components/passwordInput/index.tsx
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import EyeSlash from '@assets/img/createPassword/EyeSlash.svg';
import PasswordIcon from '@assets/img/createPassword/Password.svg';
import ActionButton from '@components/button';
import { animated, useTransition } from '@react-spring/web';
import Button from '@ui-library/button';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled, { useTheme } from 'styled-components';
@@ -20,6 +21,7 @@ interface PasswordInputProps {
stackButtonAlignment?: boolean;
loading?: boolean;
createPasswordFlow?: boolean;
autoFocus?: boolean;
}

interface StrengthBarProps {
@@ -90,9 +92,13 @@ const ButtonsContainer = styled.div<ButtonContainerProps>((props) => ({
marginBottom: props.theme.spacing(8),
}));

const Button = styled.button({
const StyledButton = styled.button({
background: 'none',
display: 'flex',
transition: 'opacity 0.1s ease',
'&:hover, &:focus': {
opacity: 0.8,
},
});

const ErrorMessage = styled.h2((props) => ({
@@ -166,6 +172,7 @@ function PasswordInput(props: PasswordInputProps): JSX.Element {
stackButtonAlignment = false,
loading,
createPasswordFlow,
autoFocus = false,
} = props;

const { t } = useTranslation('translation', { keyPrefix: 'CREATE_PASSWORD_SCREEN' });
@@ -310,25 +317,26 @@ function PasswordInput(props: PasswordInputProps): JSX.Element {
type={isPasswordVisible ? 'text' : 'password'}
value={enteredPassword}
onChange={handlePasswordChange}
autoFocus={autoFocus}
/>
<Button onClick={handleTogglePasswordView}>
<StyledButton onClick={handleTogglePasswordView}>
<img src={isPasswordVisible ? Eye : EyeSlash} alt="show-password" height={24} />
</Button>
</StyledButton>
</PasswordInputContainer>
{error && <ErrorMessage>{error}</ErrorMessage>}
{checkPasswordStrength ? renderStrengthBar() : null}
<ButtonsContainer stackButtonAlignment={stackButtonAlignment} ifError={error !== ''}>
<ButtonContainer stackButtonAlignment={stackButtonAlignment}>
<ActionButton text={t('BACK_BUTTON')} onPress={handleBack} transparent />
<Button title={t('BACK_BUTTON')} onClick={handleBack} variant="secondary" />
</ButtonContainer>
<ButtonContainer stackButtonAlignment={stackButtonAlignment}>
<ActionButton
processing={loading}
<Button
loading={loading}
disabled={
!enteredPassword || (!!checkPasswordStrength && score <= PasswordStrength.WeakScore)
}
text={t('CONTINUE_BUTTON')}
onPress={handleContinue}
title={t('CONTINUE_BUTTON')}
onClick={handleContinue}
/>
</ButtonContainer>
</ButtonsContainer>
23 changes: 18 additions & 5 deletions src/app/components/seedPhraseInput/index.tsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import styled from 'styled-components';

const Label = styled.label`
${(props) => props.theme.body_medium_m};
${(props) => props.theme.typography.body_medium_m};
display: block;
margin-bottom: ${(props) => props.theme.spacing(4)}px;
`;
@@ -14,7 +14,7 @@ const InputGroup = styled.div`
`;

const Input = styled.input`
${(props) => props.theme.body_medium_m};
${(props) => props.theme.typography.body_medium_m};
max-width: 144px;
min-height: ${(props) => props.theme.spacing(22)}px;
background-color: ${(props) => props.theme.colors.elevation0};
@@ -52,9 +52,14 @@ type SeedWordInputProps = {
handleKeyDownInput: (e: React.KeyboardEvent<HTMLInputElement>) => void;
handlePaste: (pastedText: string) => void;
disabled?: boolean;
autoFocus?: boolean;
};

const SeedWordInput = React.forwardRef<HTMLInputElement, SeedWordInputProps>(
({ value, index, handleChangeInput, handleKeyDownInput, disabled, handlePaste }, ref) => {
(
{ value, index, handleChangeInput, handleKeyDownInput, disabled, handlePaste, autoFocus },
ref,
) => {
const DEV_MODE = process.env.NODE_ENV === 'development';
const [showValue, setShowValue] = useState(DEV_MODE);

@@ -89,6 +94,7 @@ const SeedWordInput = React.forwardRef<HTMLInputElement, SeedWordInputProps>(
onBlur={handleBlurInput}
disabled={disabled}
ref={ref}
autoFocus={autoFocus}
/>
</InputGroup>
</div>
@@ -116,7 +122,7 @@ const InputGrid = styled.div<{ visible?: boolean }>`
`;

const ErrorMessage = styled.p<{ visible: boolean }>`
${(props) => props.theme.body_s};
${(props) => props.theme.typography.body_s};
visibility: ${(props) => (props.visible ? 'visible' : 'hidden')};
text-align: center;
color: ${(props) => props.theme.colors.feedback.error};
@@ -125,11 +131,16 @@ const ErrorMessage = styled.p<{ visible: boolean }>`
`;

const TransparentButton = styled.button`
${(props) => props.theme.body_m};
${(props) => props.theme.typography.body_m};
background-color: transparent;
border: none;
color: ${(props) => props.theme.colors.white_200};
text-decoration: underline;
transition: color 0.1s ease;
:hover,
:focus {
color: ${(props) => props.theme.colors.white_400};
}
`;

const seedInit: string[] = [];
@@ -210,6 +221,7 @@ export default function SeedPhraseInput({
ref={(el) => {
inputsRef.current[index] = el;
}}
autoFocus={index === 0}
/>
))}
</InputGrid>
@@ -228,6 +240,7 @@ export default function SeedPhraseInput({
inputsRef.current[index] = el;
}}
disabled={!show24Words}
autoFocus={index === 0}
/>
);
})}
19 changes: 7 additions & 12 deletions src/app/screens/backupWallet/index.tsx
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import backup from '@assets/img/backupWallet/backup.svg';
import ActionButton from '@components/button';
import useSeedVault from '@hooks/useSeedVault';
import { generateMnemonic } from '@secretkeylabs/xverse-core';
import Button from '@ui-library/button';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
@@ -30,14 +31,14 @@ const ContentContainer = styled.div((props) => ({
}));

const Title = styled.h1((props) => ({
...props.theme.body_bold_l,
...props.theme.typography.body_bold_l,
textAlign: 'center',
}));

const SubTitle = styled.h2((props) => ({
...props.theme.body_l,
...props.theme.typography.body_l,
textAlign: 'center',
marginTop: props.theme.spacing(4),
marginTop: props.theme.space.xs,
color: props.theme.colors.white_200,
}));

@@ -47,11 +48,7 @@ const BackupActionsContainer = styled.div((props) => ({
justifyContent: 'space-between',
marginTop: props.theme.spacing(20),
width: '100%',
}));

const TransparentButtonContainer = styled.div((props) => ({
marginRight: props.theme.spacing(8),
width: '100%',
columnGap: props.theme.space.xs,
}));

function BackupWallet(): JSX.Element {
@@ -103,10 +100,8 @@ function BackupWallet(): JSX.Element {
<Title>{t('SCREEN_TITLE')}</Title>
<SubTitle>{t('SCREEN_SUBTITLE')}</SubTitle>
<BackupActionsContainer>
<TransparentButtonContainer>
<ActionButton onPress={handleSkip} transparent text={t('BACKUP_SKIP_BUTTON')} />
</TransparentButtonContainer>
<ActionButton onPress={handleBackup} text={t('BACKUP_BUTTON')} />
<Button onClick={handleSkip} variant="secondary" title={t('BACKUP_SKIP_BUTTON')} />
<Button onClick={handleBackup} title={t('BACKUP_BUTTON')} />
</BackupActionsContainer>
</ContentContainer>
</Container>
14 changes: 8 additions & 6 deletions src/app/screens/backupWalletSteps/index.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
import { useWalletExistsContext } from '@components/guards/onboarding';
import PasswordInput from '@components/passwordInput';
import Steps from '@components/steps';
import useSeedVault from '@hooks/useSeedVault';
import useWalletReducer from '@hooks/useWalletReducer';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import useSeedVault from '@hooks/useSeedVault';
import SeedCheck from './seedCheck';
import VerifySeed from './verifySeed';

const Container = styled.div((props) => ({
display: 'flex',
flex: 1,
flexDirection: 'column',
paddingLeft: props.theme.spacing(8),
paddingRight: props.theme.spacing(8),
paddingTop: props.theme.spacing(12),
paddingLeft: props.theme.space.m,
paddingRight: props.theme.space.m,
paddingTop: props.theme.space.l,
}));

const SeedContainer = styled.div((props) => ({
paddingTop: props.theme.spacing(21),
}));

const PasswordContainer = styled.div((props) => ({
marginTop: props.theme.spacing(32),
marginBottom: props.theme.spacing(32),
marginTop: props.theme.space.xxxl,
marginBottom: props.theme.space.xxxl,
display: 'flex',
flex: 1,
}));
@@ -107,6 +107,7 @@ export default function BackupWalletSteps(): JSX.Element {
handleContinue={handleNewPasswordContinue}
handleBack={handleNewPasswordBack}
checkPasswordStrength
autoFocus
/>
</PasswordContainer>,
<PasswordContainer key="CONFIRM_PASSWORD">
@@ -118,6 +119,7 @@ export default function BackupWalletSteps(): JSX.Element {
handleContinue={handleConfirmPasswordContinue}
handleBack={handleConfirmPasswordBack}
passwordError={error}
autoFocus
/>
</PasswordContainer>,
];
33 changes: 10 additions & 23 deletions src/app/screens/backupWalletSteps/seedCheck.tsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,29 @@
import SeedphraseView from '@components/seedPhraseView';
import Button from '@ui-library/button';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';

interface ButtonProps {
enabled: boolean;
}

const Container = styled.div({
display: 'flex',
flexDirection: 'column',
flex: 1,
});

const Heading = styled.p((props) => ({
...props.theme.body_l,
...props.theme.typography.body_l,
color: props.theme.colors.white_200,
marginBottom: props.theme.spacing(20),
}));

const Label = styled.p((props) => ({
...props.theme.body_medium_m,
...props.theme.typography.body_medium_m,
color: props.theme.colors.white_0,
marginBottom: props.theme.spacing(4),
}));

const ContinueButton = styled.button<ButtonProps>((props) => ({
display: 'flex',
...props.theme.body_bold_m,
fontSize: 12,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderRadius: props.theme.radius(1),
backgroundColor: props.theme.colors.action.classic,
marginBottom: props.theme.spacing(30),
color: props.theme.colors.elevation0,
width: '100%',
height: 44,
opacity: props.enabled ? 1 : 0.6,
const ContinueButton = styled(Button)((props) => ({
marginBottom: props.theme.space.xxxl,
}));

interface SeedCheckPros {
@@ -57,9 +42,11 @@ export default function SeedCheck(props: SeedCheckPros): JSX.Element {
<Label>{t('SEED_PHRASE_VIEW_LABEL')}</Label>
<SeedphraseView seedPhrase={seedPhrase} isVisible={isVisible} setIsVisible={setIsVisible} />
{showButton && (
<ContinueButton enabled={isVisible} onClick={onContinue}>
{t('SEED_PHRASE_VIEW_CONTINUE')}
</ContinueButton>
<ContinueButton
disabled={!isVisible}
onClick={onContinue}
title={t('SEED_PHRASE_VIEW_CONTINUE')}
/>
)}
</Container>
);
17 changes: 9 additions & 8 deletions src/app/screens/backupWalletSteps/verifySeed.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import ActionButton from '@components/button';
import Button from '@ui-library/button';
import { generateMnemonic } from 'bip39';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -27,7 +27,7 @@ const TransparentButtonContainer = styled.div((props) => ({
}));

const Heading = styled.h3((props) => ({
...props.theme.body_l,
...props.theme.typography.body_l,
color: props.theme.colors.white_200,
marginBottom: props.theme.spacing(16),
}));
@@ -40,16 +40,17 @@ const WordGrid = styled.div`
`;

const WordButton = styled.button`
${(props) => props.theme.body_medium_m};
${(props) => props.theme.typography.body_medium_m};
color: ${(props) => props.theme.colors.white_0};
background-color: ${(props) => props.theme.colors.elevation3};
display: flex;
justify-content: center;
align-items: center;
padding: ${(props) => props.theme.spacing(6)}px;
border-radius: ${(props) => props.theme.radius(1)}px;
transition: all 0.1s ease;
:hover:enabled {
transition: opacity 0.1s ease;
:hover:enabled,
:focus:enabled {
opacity: 0.8;
}
:active:enabled {
@@ -58,12 +59,12 @@ const WordButton = styled.button`
`;

const NthSpan = styled.span`
${(props) => props.theme.body_bold_l};
${(props) => props.theme.typography.body_bold_l};
color: ${(props) => props.theme.colors.white_0};
`;

const ErrorMessage = styled.p<{ visible: boolean }>`
${(props) => props.theme.body_s};
${(props) => props.theme.typography.body_s};
color: ${(props) => props.theme.colors.feedback.error};
visibility: ${(props) => (props.visible ? 'initial' : 'hidden')};
`;
@@ -151,7 +152,7 @@ export default function VerifySeed({
<ErrorMessage visible={!!err}>{err}</ErrorMessage>
<ButtonsContainer>
<TransparentButtonContainer>
<ActionButton onPress={onBack} transparent text={t('SEED_PHRASE_BACK_BUTTON')} />
<Button onClick={onBack} variant="secondary" title={t('SEED_PHRASE_BACK_BUTTON')} />
</TransparentButtonContainer>
</ButtonsContainer>
</Container>
Loading
Loading