Skip to content

Commit

Permalink
Merge branch 'develop' into add-staking-page-revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
@vsubhuman
vsubhuman committed Nov 30, 2021
2 parents 09a1ac7 + 26b4128 commit acedda4
Show file tree
Hide file tree
Showing 13 changed files with 1,202 additions and 328 deletions.
2 changes: 2 additions & 0 deletions packages/yoroi-ergo-connector/package.json
View file
Expand Up @@ -4,6 +4,8 @@
"description": "",
"scripts": {
"keygen": "crx keygen",
"ergo": "npm start --prefix example-ergo",
"cardano": "npm start --prefix example-cardano",
"prod:compress": "node ../../scripts/compress",
"prod:custom": "node ./build.js",
"prod:nightly": "npm run prod:custom -- --yoroiExtensionId=poonlenmfdfbjfeeballhiibknlknepo && npm run prod:compress -- --env 'nightly' --app-id 'yoroi-ergo-connector-nightly' --zip-only --codebase 'https://yoroiwallet.com/dw/yoroi-ergo-connector-nightly.crx' --key ./keys/nightly-key.pem",
Expand Down
12 changes: 12 additions & 0 deletions packages/yoroi-extension/app/assets/images/arrow-left.inline.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions packages/yoroi-extension/app/assets/images/arrow-right.inline.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
264 changes: 178 additions & 86 deletions packages/yoroi-extension/app/ergo-connector/components/signin/CardanoSignTxPage.js
View file
Expand Up @@ -2,7 +2,7 @@
// @flow
import React, { Component } from 'react';
import type { Node } from 'react';
import { intlShape } from 'react-intl';
import { intlShape, defineMessages } from 'react-intl';
import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
import styles from './SignTxPage.scss';
import { Button } from '@mui/material';
Expand Down Expand Up @@ -37,6 +37,8 @@ import type {
CardanoTx,
} from '../../../../chrome/extension/ergo-connector/types';
import type { CardanoConnectorSignRequest } from '../../types';
import ArrowRight from '../../../assets/images/arrow-right.inline.svg';
import CardanoUtxoDetails from './CardanoUtxoDetails';
import type CardanoTxRequest from '../../../api/ada';

type Props = {|
Expand All @@ -55,6 +57,25 @@ type Props = {|
+getCurrentPrice: (from: string, to: string) => ?number,
|};

const messages = defineMessages({
title: {
id: 'connector.signin.title',
defaultMessage: '!!!Sign transaction',
},
txDetails: {
id: 'connector.signin.txDetails',
defaultMessage: '!!!Transaction Details',
},
receiver: {
id: 'connector.signin.receiver',
defaultMessage: '!!!Receiver',
},
more: {
id: 'connector.signin.more',
defaultMessage: '!!!more'
}
});

@observer
class SignTxPage extends Component<Props> {
static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
Expand All @@ -64,6 +85,10 @@ class SignTxPage extends Component<Props> {
form: ReactToolboxMobxForm = new ReactToolboxMobxForm(
{
fields: {
showUtxoDetails: {
type: 'boolean',
value: false,
},
walletPassword: {
type: 'password',
label: this.context.intl.formatMessage(globalMessages.walletPasswordLabel),
Expand Down Expand Up @@ -103,6 +128,10 @@ class SignTxPage extends Component<Props> {
});
}

toggleUtxoDetails: boolean => void = (newState) => {
this.form.$('showUtxoDetails').set(newState);
}

getTicker: $ReadOnly<TokenRow> => Node = tokenInfo => {
const fingerprint = this.getFingerprint(tokenInfo);
return fingerprint !== undefined
Expand Down Expand Up @@ -130,6 +159,22 @@ class SignTxPage extends Component<Props> {
return this.props.getTokenInfo(tokenEntry);
}

renderBundle: {|
amount: MultiToken,
render: TokenEntry => Node,
|} => Node = (request) => {
return (
<>
{request.render(request.amount.getDefaultEntry())}
{request.amount.nonDefaultEntries().map(entry => (
<React.Fragment key={entry.identifier}>
{request.render(entry)}
</React.Fragment>
))}
</>
);
}

renderAmountDisplay: {|
entry: TokenEntry,
|} => Node = (request) => {
Expand Down Expand Up @@ -238,102 +283,149 @@ class SignTxPage extends Component<Props> {
);
}

renderAddresses(): Node {
const addresses = this.props.txData.outputs.map(({ address }) => address);
return (
<div className={styles.toAddresses}>
{addresses.slice(0, 2).map((address, idx) => {
if (idx >= 1) {
return (
<button
className={styles.more}
type="button"
onClick={() => this.toggleUtxoDetails(true)}
key={address}
>
{addresses.length - 1}&nbsp;
<span>{this.context.intl.formatMessage(messages.more)}</span>
</button>
);
}
return (<p key={address}>{address}</p>);
})}
</div>
)
}


render(): Node {
const { form } = this;
const walletPasswordField = form.$('walletPassword');

const { intl } = this.context;
const { txData, onCancel, } = this.props;
const { showUtxoDetails } = form.values();
return (
<>
<ProgressBar step={2} />
<div className={styles.component}>
<div>
<div className={styles.addressHeader}>
<div className={styles.addressFrom}>
<p className={styles.label}>
{intl.formatMessage(globalMessages.fromAddresses)}:{' '}
<span>{txData.inputs.length}</span>
</p>
</div>
<div className={styles.addressFrom}>
<p className={styles.label}>
{intl.formatMessage(globalMessages.amount)}
</p>
</div>
</div>
<div className={styles.addressFromList}>
{txData.inputs.map((address, addressIndex) => {
return this.renderRow({
kind: 'in',
address,
addressIndex,
transform: amount => amount.abs().negated(),
});
})}
</div>
<div className={styles.addressHeader}>
<div className={styles.addressTo}>
<p className={styles.label}>
{intl.formatMessage(globalMessages.toAddresses)}:{' '}
<span>{txData.outputs.length}</span>
</p>
{
!showUtxoDetails ?(
<div>
<div>
<h1 className={styles.title}>{intl.formatMessage(messages.title)}</h1>
</div>
<div className={styles.transactionWrapper}>
<p className={styles.transactionId}>
{intl.formatMessage(messages.receiver)}
</p>
<div className={styles.hash}>{this.renderAddresses()}</div>
<button
onClick={() => this.toggleUtxoDetails(true)}
type='button'
className={styles.utxo}
>
<p>{intl.formatMessage(messages.txDetails)}</p>
<ArrowRight />
</button>
</div>
<div className={styles.info}>
<div className={styles.infoRaw}>
<p className={styles.label}>
{intl.formatMessage(globalMessages.amount)}
</p>
<div className={styles.labelValue}>
{this.renderAmountDisplay({
entry: {
identifier: txData.amount.defaults.defaultIdentifier,
networkId: txData.amount.defaults.defaultNetworkId,
amount: txData.amount.get(
txData.amount.defaults.defaultIdentifier
) ?? (new BigNumber('0'))
},
})}
</div>
</div>
<div className={styles.infoRaw}>
<p className={styles.label}>
{intl.formatMessage(globalMessages.feeLabel)}
</p>
<div className={styles.labelValue}>
{this.renderAmountDisplay({
entry: {
identifier: txData.fee.tokenId,
networkId: txData.fee.networkId,
amount: (new BigNumber(txData.fee.amount)).negated(),
},
})}
</div>
</div>
<div className={styles.totalAmoundCard}>
<p className={styles.totalAmoundLable}>
{intl.formatMessage(globalMessages.walletSendConfirmationTotalLabel)}
</p>
<div className={styles.totalAmound}>
{this.renderAmountDisplay({
entry: {
identifier: txData.total.defaults.defaultIdentifier,
networkId: txData.total.defaults.defaultNetworkId,
amount: txData.total.get(
txData.amount.defaults.defaultIdentifier
) ?? (new BigNumber('0')),
},
})}
</div>
</div>
</div>
<div className={styles.passwordInput}>
<TextField
type="password"
className={styles.walletPassword}
{...walletPasswordField.bind()}
error={walletPasswordField.error}
/>
</div>
<div className={styles.wrapperBtn}>
<Button
variant="secondary"
className="secondary"
onClick={onCancel}
>
{intl.formatMessage(globalMessages.cancel)}
</Button>
<Button
variant="primary"
disabled={!walletPasswordField.isValid}
onClick={this.submit.bind(this)}
>
{intl.formatMessage(globalMessages.confirm)}
</Button>
</div>
</div>
<div className={styles.addressTo}>
<p className={styles.label}>
{intl.formatMessage(globalMessages.amount)}
</p>
</div>
</div>
<div className={styles.addressToList}>
{txData.outputs.map((address, addressIndex) => {
return this.renderRow({
kind: 'in',
address,
addressIndex,
transform: amount => amount.abs(),
});
})}
</div>
<div className={styles.addressHeader}>
<div className={styles.addressTo}>
<p className={styles.label}>
{intl.formatMessage(globalMessages.feeLabel)}
</p>
</div>
</div>
<div className={styles.addressToList}>
<div className={styles.amount}>
{this.renderAmountDisplay({
entry: {
identifier: txData.fee.tokenId,
networkId: txData.fee.networkId,
amount: (new BigNumber(txData.fee.amount)).negated(),
},
})}
</div>
</div>
</div>
<div className={styles.passwordInput}>
<TextField
type="password"
className={styles.walletPassword}
{...walletPasswordField.bind()}
error={walletPasswordField.error}
/>
</div>
<div className={styles.wrapperBtn}>
<Button variant="secondary" className="secondary" onClick={onCancel}>
{intl.formatMessage(globalMessages.cancel)}
</Button>
<Button
variant="primary"
disabled={!walletPasswordField.isValid}
onClick={this.submit.bind(this)}
>
{intl.formatMessage(globalMessages.confirm)}
</Button>
</div>
) : (
<CardanoUtxoDetails
txData={txData}
onCopyAddressTooltip={this.props.onCopyAddressTooltip}
addressToDisplayString={this.props.addressToDisplayString}
getCurrentPrice={this.props.getCurrentPrice}
getTokenInfo={this.props.getTokenInfo}
notification={this.props.notification}
selectedExplorer={this.props.selectedExplorer}
unitOfAccountSetting={this.props.unitOfAccountSetting}
toggleUtxoDetails={this.toggleUtxoDetails}
/>
)
}
</div>
</>
);
Expand Down

0 comments on commit acedda4

Please sign in to comment.