Skip to content

Commit

Permalink
Merge pull request #2323 from Emurgo/add-wallet-list-dialog
Browse files Browse the repository at this point in the history 
Add wallet list dialog
  • Loading branch information
@vsubhuman
vsubhuman committed Oct 11, 2021
2 parents f118964 + 7219449 commit 433503e
Show file tree
Hide file tree
Showing 13 changed files with 526 additions and 66 deletions.
8 changes: 6 additions & 2 deletions packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js
View file
Expand Up @@ -112,8 +112,12 @@ export default class NavWalletDetailsRevamp extends Component<Props> {
</div>
<div className={styles.fixedAmount}>
<p>
{/* TODO: fix value */}
!!2,000,00 USD
{/* TODO: fix value to USD */}
{this.renderAmountDisplay({
shouldHideBalance,
amount: totalAmount,
})}{' '}
USD
</p>
</div>
</div>
Expand Down
123 changes: 95 additions & 28 deletions ...n/app/components/topbar/NavPlateRevamp.js → ...nsion/app/components/topbar/WalletCard.js
View file
Expand Up @@ -3,13 +3,13 @@ import React, { Component } from 'react';
import type { Node } from 'react';
import { observer } from 'mobx-react';
import { intlShape, defineMessages } from 'react-intl';
import styles from './NavPlateRevamp.scss';
import styles from './WalletCard.scss';
import WalletAccountIcon from './WalletAccountIcon';
import ConceptualIcon from '../../assets/images/wallet-nav/conceptual-wallet.inline.svg';
import TrezorIcon from '../../assets/images/wallet-nav/trezor-wallet.inline.svg';
import LedgerIcon from '../../assets/images/wallet-nav/ledger-wallet.inline.svg';
import { MultiToken } from '../../api/common/lib/MultiToken';

import classnames from 'classnames';
import { truncateToken, splitAmount } from '../../utils/formatters';
import type { WalletChecksum } from '@emurgo/cip4-js';
import type { $npm$ReactIntl$IntlFormat, $npm$ReactIntl$MessageDescriptor } from 'react-intl';
Expand All @@ -25,8 +25,13 @@ import { getTokenName } from '../../stores/stateless/tokenHelpers';
import { hiddenAmount } from '../../utils/strings';
import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
import RandomIcon from '../../assets/images/sidebar/revamp/wallet.inline.svg';

const messages = defineMessages({
tokenTypes: {
id: 'wallet.topbar.dialog.tokenTypes',
defaultMessage: '!!!Token types',
},
standardWallet: {
id: 'wallet.nav.type.standard',
defaultMessage: '!!!Standard wallet',
Expand All @@ -52,11 +57,15 @@ type Props = {|
conceptualWalletName: string,
|},
+rewards: null | void | MultiToken,

+shouldHideBalance: boolean,
+walletAmount: null | MultiToken,
+getTokenInfo: ($ReadOnly<Inexact<TokenLookupKey>>) => $ReadOnly<TokenRow>,
+isCurrentWallet?: boolean,
+onSelect?: void => void,
|};

type State = {| +isActionsShow: boolean |};

function constructPlate(
plate: WalletChecksum,
saturationFactor: number,
Expand All @@ -75,11 +84,23 @@ function constructPlate(
}

@observer
export default class NavPlateRevamp extends Component<Props> {
export default class WalletCard extends Component<Props, State> {
static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
intl: intlShape.isRequired,
};

static defaultProps: {|
isCurrentWallet: boolean,
onSelect: void,
|} = {
onSelect: undefined,
isCurrentWallet: false,
};

state: State = {
isActionsShow: false,
};

getEra: ConceptualWallet => void | $Exact<$npm$ReactIntl$MessageDescriptor> = wallet => {
if (!isCardanoHaskell(wallet.getNetworkInfo())) {
return undefined;
Expand Down Expand Up @@ -110,49 +131,95 @@ export default class NavPlateRevamp extends Component<Props> {
return ConceptualIcon;
};

showActions: void => void = () => {
this.setState({ isActionsShow: true });
};
hideActions: void => void = () => {
this.setState({ isActionsShow: false });
};

render(): Node {
const { intl, shouldHideBalance } = this.context;
const { intl } = this.context;
const { shouldHideBalance } = this.props;
const { isActionsShow } = this.state;

const [, iconComponent] = this.props.plate
? constructPlate(this.props.plate, 0, styles.icon)
: [];

const typeText = [
// this.getEra(this.props.wallet.conceptualWallet),
this.getType(this.props.wallet.conceptualWallet),
]
const typeText = [this.getType(this.props.wallet.conceptualWallet)]
.filter(text => text != null)
.map(text => intl.formatMessage(text))
.join(' - ');
const totalAmount = this.getTotalAmount();

const wrapperClassname = classnames(
styles.cardWrapper,
this.props.isCurrentWallet !== null &&
this.props.isCurrentWallet === true &&
styles.currentCardWrapper
);

return (
<div className={styles.wrapper}>
<div className={styles.header}>
<h5 className={styles.name}>{this.props.wallet.conceptualWalletName}</h5>
{' · '}
<div className={styles.type}>{typeText}</div>
</div>
<div className={styles.card}>
<div>{iconComponent}</div>
<div className={styles.content}>
<div className={styles.amount}>
{this.renderAmountDisplay({
shouldHideBalance,
amount: totalAmount,
})}
<button
className={wrapperClassname}
type="button"
onClick={this.props.onSelect}
onMouseEnter={this.showActions}
onMouseLeave={this.hideActions}
>
<div className={styles.main}>
<div className={styles.header}>
<h5 className={styles.name}>{this.props.wallet.conceptualWalletName}</h5>
{' · '}
<div className={styles.type}>{typeText}</div>
</div>
<div className={styles.body}>
<div>{iconComponent}</div>
<div className={styles.content}>
<div className={styles.amount}>
{this.renderAmountDisplay({
shouldHideBalance,
amount: totalAmount,
})}
</div>
<div className={styles.fixedAmount}>
<p>
{/* TODO: fix value to USD */}
{this.renderAmountDisplay({
shouldHideBalance,
amount: totalAmount,
})}{' '}
USD
</p>
</div>
</div>
<div className={styles.fixedAmount}>
<p>
{/* TODO: fix value */}
!!2,000,00 USD
<div className={styles.extraInfo}>
<p className={styles.label}>
{intl.formatMessage(messages.tokenTypes)} <span className={styles.value}>20</span>
</p>
<p className={styles.label}>
NFTs <span className={styles.value}>2</span>
</p>
</div>
</div>
</div>
</div>
<div className={styles.actions}>
{isActionsShow ? (
<>
<button type="button" onClick={() => {}}>
<RandomIcon />
</button>
<button type="button" onClick={() => {}}>
<RandomIcon />
</button>
</>
) : null}
</div>
</button>
);
}

renderAmountDisplay: ({|
shouldHideBalance: boolean,
amount: ?MultiToken,
Expand Down
74 changes: 65 additions & 9 deletions ...app/components/topbar/NavPlateRevamp.scss → ...ion/app/components/topbar/WalletCard.scss
View file
@@ -1,7 +1,8 @@
@import '../../themes/mixins/loading-spinner';

.wrapper {
min-width: 300px;
.main {
font-family: var(--font-regular);
flex: 1;
canvas {
width: 32px !important;
height: 32px !important;
Expand All @@ -17,14 +18,13 @@
margin-bottom: 8px;
}

.card {
.body {
display: flex;
align-items: center;
}

.name {
margin-right: 5px;
font-family: var(--font-regular);
}

.type {
Expand All @@ -34,7 +34,6 @@
}
.data {
margin-left: 12px;
font-family: var(--font-regular);
}

.isLoading {
Expand All @@ -44,19 +43,20 @@
margin-bottom: 4px;
}

.fixedAmount {
color: #6b7384;
}
.amount {
font-family: var(--font-medium);

flex: 1;
.isLoading {
margin-left: 9px;
margin-bottom: 6px;
@include loading-spinner('../../assets/images/spinner-dark.svg', 16);
}
}
.fixedAmount {
color: #6b7384;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
Expand All @@ -65,3 +65,59 @@
line-height: 22px;
margin-left: 12px;
}

.extraInfo {
flex: 1;
text-align: left;
.label {
color: #6b7384;
line-height: 22px;
}
.value {
color: #2b2c32;
}
}
.actions {
min-width: 80px;
svg {
max-width: 24px;
max-height: 24px;
color: #6b7384;
}
button {
width: 40px;
height: 40px;
border-radius: 50%;
&:hover {
background: #eaedf2;
}
}
}

.cardWrapper {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--theme-wallet-dropdown-background-color);
border-radius: 8px;
border: 1px solid transparent;

& + & {
margin-top: 14px;
}

&:hover {
cursor: pointer;
border: 1px solid #eaedf2;
}
}

.currentCardWrapper {
border: 1px solid #3154cb;

&:hover {
cursor: pointer;
border: 1px solid #3154cb;
}
}

0 comments on commit 433503e

Please sign in to comment.