Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@mroz22
mroz22 committed Aug 31, 2022
1 parent e5c8746 commit 4698803
Show file tree
Hide file tree
Showing 29 changed files with 384 additions and 170 deletions.
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"main": "src/index",
"author": "SatoshiLabs s.r.o.",
"license": "SEE LICENSE IN LICENSE.md",
"sideEffects": false,
"scripts": {
"lint": "yarn lint:js && yarn lint:styles",
"lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
Expand All @@ -24,6 +23,7 @@
"lottie-react": "^2.3.1",
"polished": "^4.2.2",
"react-date-range": "^1.4.0",
"react-intl": "^6.0.5",
"react-select": "^5.4.0",
"react-svg": "^15.1.6",
"react-truncate": "^2.4.0",
Expand Down
99 changes: 59 additions & 40 deletions packages/components/src/components/Passphrase/PassphraseTypeCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,36 @@
// pull this component up to some share logic.

// todo: reorganize imports

import React, { useState, useRef, useEffect, useCallback } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';

import { AnimatePresence, motion } from 'framer-motion';
import styled, { css } from 'styled-components';

import { useKeyPress } from '@trezor/react-utils';
import { setCaretPosition } from '@trezor/dom-utils';
import styled, { css } from 'styled-components';
import { countBytesInString } from '@trezor/utils';

// ok
import {
Button,
useTheme,
variables,
Input,
Tooltip,
TooltipProps,
Checkbox,
Icon,
motionProps,
} from '@trezor/components';
import { countBytesInString } from '@trezor/utils';

// move to another package, shared package should not import from suite

// moved
} from '../..';
import PasswordStrengthIndicator from './PasswordStrengthIndicator';

const MAX_LENGTH = 50;

// todo: refactor these, translations, modal, etc
// import { useTranslation } from '@suite-hooks';
// import { OpenGuideFromTooltip } from '@guide-components';
// import { Translation } from '@suite-components/Translation';

// import { isAndroid } from '@trezor/suite/src/utils/suite/env';

const Wrapper = styled.div<Pick<Props, 'type' | 'singleColModal'>>`
const Wrapper = styled.div<Pick<PassphraseTypeCardProps, 'type' | 'singleColModal'>>`
display: flex;
flex: 1;
/* align-items: center; */
Expand All @@ -61,7 +57,7 @@ const Wrapper = styled.div<Pick<Props, 'type' | 'singleColModal'>>`
`}
`;

const IconWrapper = styled.div<Pick<Props, 'type'>>`
const IconWrapper = styled.div<Pick<PassphraseTypeCardProps, 'type'>>`
width: 38px;
height: 38px;
background: ${props =>
Expand Down Expand Up @@ -96,7 +92,7 @@ const WalletTitle = styled.div<{ withMargin: boolean }>`
${props => props.withMargin && `margin-bottom: 5px;`}
`;

const Description = styled.div<Pick<Props, 'authConfirmation'>>`
const Description = styled.div<Pick<PassphraseTypeCardProps, 'authConfirmation'>>`
display: flex;
color: ${props => props.theme.TYPE_LIGHT_GREY};
font-size: ${variables.FONT_SIZE.TINY};
Expand Down Expand Up @@ -172,10 +168,7 @@ const RetryButton = styled(Button)`
margin-top: 16px;
`;

// todo: how about translations? pass translation component? pass translated string?
const Translation = ({ id }: { id: string }) => <div>{id}</div>;

type Props = {
type PassphraseTypeCardProps = {
title?: React.ReactNode;
description?: React.ReactNode;
submitLabel: React.ReactNode;
Expand All @@ -185,13 +178,17 @@ type Props = {
authConfirmation?: boolean;
onSubmit: (value: string, passphraseOnDevice?: boolean) => void;
recreateWallet?: () => void;
learnMoreTooltipOnClick?: TooltipProps['guideAnchor'];
learnMoreTooltipAppendTo?: TooltipProps['appendTo'];
};

const DOT = '●';

export const PassphraseTypeCard = (props: Props) => {
export const PassphraseTypeCard = (props: PassphraseTypeCardProps) => {
console.log('PassphraseTypeCard', props);

const theme = useTheme();
// const { translationString } = useTranslation();
const intl = useIntl();
const [value, setValue] = useState('');
const [enabled, setEnabled] = useState(!props.authConfirmation);
const [showPassword, setShowPassword] = useState(false);
Expand All @@ -208,7 +205,6 @@ export const PassphraseTypeCard = (props: Props) => {
const { onSubmit } = props;
const submit = useCallback(
(value: string, passphraseOnDevice?: boolean) => {
console.log('enabled', enabled);
if (!enabled) return;
onSubmit(value, passphraseOnDevice);
},
Expand Down Expand Up @@ -309,16 +305,22 @@ export const PassphraseTypeCard = (props: Props) => {
>
{props.type === 'hidden' ? (
<Tooltip
// title={<Translation id="TR_WHAT_IS_PASSPHRASE" />}
// guideAnchor={instance => (
// <OpenGuideFromTooltip
// dataTest="@tooltip/guideAnchor"
// id="/security/passphrase.md"
// instance={instance}
// />
// )}
// content={<Translation id="TR_HIDDEN_WALLET_TOOLTIP" />}
title={<div>"todo: pass tooltip as prop?"</div>}
appendTo={props.learnMoreTooltipAppendTo}
title={
<FormattedMessage
id="TR_WHAT_IS_PASSPHRASE"
defaultMessage="Learn more about the difference"
/>
}
guideAnchor={props.learnMoreTooltipOnClick}
content={
<FormattedMessage
id="TR_HIDDEN_WALLET_TOOLTIP"
defaultMessage={
'Passphrases add a custom phrase (e.g. a word, sentence, or string of characters) to your recovery seed. This creates a hidden wallet; each hidden wallet can use its own passphrase. Your standard wallet will still be accessible without a passphrase.'
}
/>
}
dashed
>
<>{props.title}</>
Expand All @@ -345,13 +347,24 @@ export const PassphraseTypeCard = (props: Props) => {
<InputWrapper authConfirmation={props.authConfirmation}>
<PassphraseInput
data-test="@passphrase/input"
// placeholder={translationString('TR_ENTER_PASSPHRASE')}
placeholder="todo: pass as prop? translation?"
placeholder={intl.formatMessage({
defaultMessage: 'Enter passphrase',
id: 'TR_ENTER_PASSPHRASE',
})}
onChange={onPassphraseChange}
value={displayValue}
innerRef={ref}
bottomText={
isTooLong ? <Translation id="TR_PASSPHRASE_TOO_LONG" /> : null
isTooLong ? (
<FormattedMessage
id="TR_PASSPHRASE_TOO_LONG"
defaultMessage={
'Passphrase length has exceed the allowed limit.'
}
/>
) : (
'not too long'
)
}
inputState={isTooLong ? 'error' : undefined}
noTopLabel
Expand Down Expand Up @@ -386,7 +399,12 @@ export const PassphraseTypeCard = (props: Props) => {
onClick={() => setEnabled(!enabled)}
isChecked={enabled}
>
<Translation id="TR_I_UNDERSTAND_PASSPHRASE" />
<FormattedMessage
id="TR_I_UNDERSTAND_PASSPHRASE"
defaultMessage={
'I understand, passphrases cannot be retrieved unlike everyday passwords'
}
/>
</Checkbox>
</Content>
)}
Expand All @@ -410,7 +428,6 @@ export const PassphraseTypeCard = (props: Props) => {
</ActionButton>
</motion.div>
)}

{/* Offer entering passphrase on a device */}
{props.offerPassphraseOnDevice && (
<OnDeviceActionButton
Expand All @@ -419,10 +436,12 @@ export const PassphraseTypeCard = (props: Props) => {
onClick={() => submit(value, true)}
fullWidth
>
<Translation id="TR_ENTER_PASSPHRASE_ON_DEVICE" />
<FormattedMessage
id="TR_ENTER_PASSPHRASE_ON_DEVICE"
defaultMessage="Enter passphrase on Trezor"
/>
</OnDeviceActionButton>
)}

{/* Try again button shows while confirming a passphrase */}
{props.recreateWallet && (
<RetryButton
Expand All @@ -431,7 +450,7 @@ export const PassphraseTypeCard = (props: Props) => {
color={theme.TYPE_LIGHT_GREY}
onClick={props.recreateWallet}
>
<Translation id="TR_TRY_AGAIN" />
<FormattedMessage id="TR_TRY_AGAIN" defaultMessage={'Try again'} />
</RetryButton>
)}
</Actions>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/Tooltip/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import React, { ReactNode, useMemo, useRef, useState } from 'react';
import { motion, Variants } from 'framer-motion';
import { filterProps, motion, Variants } from 'framer-motion';
import Tippy, { TippyProps } from '@tippyjs/react/headless';
import { Instance } from 'tippy.js';
import { transparentize } from 'polished';
Expand Down
4 changes: 4 additions & 0 deletions packages/components/src/config/motion.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,7 @@ export const EXPAND = {
exit: 'initial',
transition: { duration: 0.24, ease: 'easeInOut' },
};

export const transitionEase = [0.65, 0, 0.35, 1];
export const enterEase = [0.33, 1, 0.68, 1];
export const exitEase = [0.32, 0, 0.67, 0];
2 changes: 1 addition & 1 deletion packages/connect-explorer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ To run the explorer locally:

`yarn workspace @trezor/connect-explorer dev` - runs dev server on port 8088

When `connect-exporer` is run locally, WebUSB is disabled because [@trezor/connect-popup](../connect-popup) runs on a different domain and Chrome does not allow `navigator.usb.requestDevice` calls between cross-site elements since v72. Further investigation needed to see if we can fix that. Until then, run [Bridge](https://suite.trezor.io/web/bridge/) to connect to Trezor.
When `connect-explorer` is run locally, WebUSB is disabled because [@trezor/connect-popup](../connect-popup) runs on a different domain and Chrome does not allow `navigator.usb.requestDevice` calls between cross-site elements since v72. Further investigation needed to see if we can fix that. Until then, run [Bridge](https://suite.trezor.io/web/bridge/) to connect to Trezor.

Alternatively, use the [online explorer](https://trezor.github.io/trezor-suite/connect-explorer), which is pointing to the latest stable version of [@trezor/connect](../connect).

Expand Down
10 changes: 6 additions & 4 deletions packages/connect-popup/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,20 @@
"@trezor/components": "*",
"@trezor/connect": "9.0.0",
"@trezor/connect-ui": "*",
"@trezor/urls": "*",
"react": "17.0.2",
"styled-components": "^5.3.5"
"@trezor/urls": "*"
},
"devDependencies": {
"@types/react": "^17.0.0",
"@types/react": "17.0.2",
"@types/styled-components": "^5.1.25",
"jest": "^26.6.3",
"rimraf": "^3.0.2",
"typescript": "4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.7.4"
},
"peerDependencies": {
"react": "17.0.2",
"styled-components": "^5.3.5"
}
}
36 changes: 16 additions & 20 deletions packages/connect-popup/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// origin: https://github.com/trezor/connect/blob/develop/src/js/popup/popup.js/
import React from 'react';
import {
POPUP,
UI_REQUEST,
Expand All @@ -12,7 +11,6 @@ import {
UI,
createUiResponse,
} from '@trezor/connect';
import { Transport, Passphrase, PassphraseOnDevice } from '@trezor/connect-ui';

import * as view from './view';
import {
Expand All @@ -22,6 +20,7 @@ import {
initMessageChannel,
postMessageToParent,
postMessage,
renderConnectUI,
} from './view/common';
import {
showFirmwareUpdateNotification,
Expand Down Expand Up @@ -85,7 +84,7 @@ const handleMessage = (event: MessageEvent<PopupEvent | UiEvent>) => {
}
break;
case UI_REQUEST.TRANSPORT:
showView(<Transport />);
renderConnectUI(message);
break;
case UI_REQUEST.SELECT_DEVICE:
view.selectDevice(message.payload);
Expand Down Expand Up @@ -152,26 +151,23 @@ const handleMessage = (event: MessageEvent<PopupEvent | UiEvent>) => {
break;
// comes first
case UI_REQUEST.REQUEST_PASSPHRASE:
showView(
<Passphrase
{...message.payload}
onPassphraseSubmit={(value: string, passphraseOnDevice?: boolean) => {
console.log('on psas', value, passphraseOnDevice);
postMessage(
createUiResponse(UI.RECEIVE_PASSPHRASE, {
value,
passphraseOnDevice,
// todo: what is this param?
save: true,
}),
);
}}
/>,
);
renderConnectUI({
...message,
onPassphraseSubmit: (value: string, passphraseOnDevice?: boolean) => {
postMessage(
createUiResponse(UI.RECEIVE_PASSPHRASE, {
value,
passphraseOnDevice,
// todo: what is this param?
save: true,
}),
);
},
});
break;
// comes when user clicks "enter on device"
case UI_REQUEST.REQUEST_PASSPHRASE_ON_DEVICE:
showView(<PassphraseOnDevice />);
renderConnectUI(message);
break;
case UI_REQUEST.INVALID_PASSPHRASE:
view.initInvalidPassphraseView(message.payload);
Expand Down
Loading

0 comments on commit 4698803

Please sign in to comment.