Skip to content

Commit

Permalink
Merge pull request #1384 from emeraldpay/feature/storybooks-for-web-demo
Browse files Browse the repository at this point in the history
storybooks for web demo
  • Loading branch information
splix authored Jun 9, 2024
2 parents 9ded35e + 18c8a80 commit 3b9f750
Show file tree
Hide file tree
Showing 27 changed files with 922 additions and 92 deletions.
3 changes: 1 addition & 2 deletions packages/react-app/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@ const config = {
stories: [
'../stories/**/*.stories.tsx'
],

docs: {
autodocs: true
autodocs: false
}
};

Expand Down
8 changes: 5 additions & 3 deletions packages/react-app/src/app/layout/Header/Title.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { IState, screen } from '@emeraldwallet/store';
import { Theme, createStyles } from '@material-ui/core';
import {Theme, createStyles, Typography} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import * as React from 'react';
import { connect } from 'react-redux';
Expand All @@ -17,9 +17,11 @@ const useStyles = makeStyles<Theme>((theme) =>
brandPart: {
color: theme.palette.primary.main,
marginRight: '4px',
float: 'left',
},
productPart: {
color: theme.palette.secondary.main,
float: 'left',
},
}),
);
Expand All @@ -34,8 +36,8 @@ const Component: React.FC<DispatchProps> = ({ gotoWalletsScreen }) => {
return (
<div className={styles.root}>
<div className={styles.title} onClick={gotoWalletsScreen}>
<span className={styles.brandPart}>Emerald</span>
<span className={styles.productPart}>Wallet</span>
<Typography className={styles.brandPart}>Emerald</Typography>
<Typography className={styles.productPart}>Wallet</Typography>
</div>
</div>
);
Expand Down
16 changes: 8 additions & 8 deletions packages/react-app/src/message/SignMessage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,9 @@ const useStyles = makeStyles(
marginBottom: 10,
width: '100%',
},
typeAutoDetected: {
marginLeft: 20,
}
}),
);

Expand Down Expand Up @@ -333,18 +336,15 @@ const SignMessage: React.FC<OwnProps & StateProps & DispatchPros> = ({
<MenuItem value={MessageType.EIP191}>Unstructured / EIP-191</MenuItem>
<MenuItem value={MessageType.EIP712}>Structured / EIP-712</MenuItem>
</TextField>
</FormRow>
{messageType === MessageType.AUTO && (
<FormRow>
<FormLabel />
<div className={styles.validation}>
{messageType === MessageType.AUTO && (
<Chip
className={styles.typeAutoDetected}
color="primary"
label={validation === Validation.EIP712 ? 'Structured / EIP-712' : 'Unstructured / EIP-191'}
/>
</div>
</FormRow>
)}
)}
</FormRow>

<FormRow>
<FormLabel top>Message</FormLabel>
<TextField
Expand Down
1 change: 1 addition & 0 deletions packages/react-app/src/transactions/TxDetails/TxStatus.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const useStyles = makeStyles((theme) =>
block: {
alignItems: 'center',
display: 'flex',
fontFamily: theme.typography.fontFamily,
},
error: {
color: theme.palette.error.main,
Expand Down
18 changes: 10 additions & 8 deletions packages/react-app/src/transactions/TxHistory/List/Transaction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
TextField,
Tooltip,
createStyles,
makeStyles,
makeStyles, Typography,
} from '@material-ui/core';
import CheckIcon from '@material-ui/icons/Check';
import CloseIcon from '@material-ui/icons/Close';
Expand Down Expand Up @@ -103,6 +103,7 @@ const useStyles = makeStyles((theme) =>
changeItemCoin: {
lineHeight: '24px',
textAlign: 'right',
color: theme.palette.text.primary,
},
container: {
boxSizing: 'border-box',
Expand Down Expand Up @@ -182,6 +183,7 @@ const useStyles = makeStyles((theme) =>
},
transactionLabelText: {
marginRight: 10,
color: theme.palette.text.primary,
},
}),
);
Expand Down Expand Up @@ -334,20 +336,20 @@ const Transaction: React.FC<OwnProps & StateProps & DispatchProps> = ({
/>
) : (
<>
<div className={styles.transactionLabelText}>Tx {label}</div>
<Typography className={styles.transactionLabelText}>Tx {label}</Typography>
<IconButton className={styles.button} onClick={onEditLabel}>
<EditIcon fontSize="inherit" />
</IconButton>
</>
)}
</div>
<div className={styles.transactionDetails}>
<div className={styles.transactionDetailsInfo}>
<Typography className={styles.transactionDetailsInfo}>
{sinceTime} /{' '}
{confirmations >= CONFIRMED[blockchainCode]
? 'Confirmed'
: `${confirmations > 0 ? confirmations : 'No'} confirmation`}
</div>
</Typography>
<IconButton className={styles.button} onClick={onOpenMenu}>
<MoreIcon fontSize="inherit" />
</IconButton>
Expand Down Expand Up @@ -378,7 +380,7 @@ const Transaction: React.FC<OwnProps & StateProps & DispatchProps> = ({

return (
<div className={index > 0 ? styles.changeItem : undefined} key={`${change.address}-${index}`}>
<div className={styles.changeItemCoin}>
<Typography className={styles.changeItemCoin}>
<span>{change.direction === Direction.EARN ? '+' : '-'}&nbsp;</span>
{approxZero ? (
<Tooltip title={change.amountValue.toString()}>
Expand All @@ -388,7 +390,7 @@ const Transaction: React.FC<OwnProps & StateProps & DispatchProps> = ({
amountValue
)}{' '}
{amountUnit}
</div>
</Typography>
<div className={styles.changeItemAmount}>
{change.walletInstance.id === walletId ? (
<div />
Expand All @@ -410,9 +412,9 @@ const Transaction: React.FC<OwnProps & StateProps & DispatchProps> = ({
{change.walletInstance.name}
</div>
)}
<div className={styles.changeItemAmountFiat}>
<Typography className={styles.changeItemAmountFiat}>
{formatFiatAmount(getFiatValue(change.amountValue))}
</div>
</Typography>
</div>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ const useStyles = makeStyles((theme) =>
allowanceAddressIcon: {
marginRight: 5,
},
allowanceAddressDescription: {
textAlign: 'right',
display: 'block',
},
allowanceActions: {
display: 'flex',
justifyContent: 'end',
Expand Down Expand Up @@ -164,6 +168,9 @@ const WalletAllowance: React.FC<OwnProps & StateProps & DispatchProps> = ({
)}
<Address address={type === AllowanceType.ALLOWED_FOR ? spenderAddress : ownerAddress} />
</div>
<Typography variant="caption" className={styles.allowanceAddressDescription}>
{type === AllowanceType.ALLOWED_FOR ? 'Allowed To Address' : 'Allowed By Address'}
</Typography>
</div>
<div className={styles.allowanceActions}>
{type === AllowanceType.ALLOWED_FOR ? (
Expand Down
51 changes: 51 additions & 0 deletions packages/react-app/stories/ExampleWeb/Blockchains.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import {BlockchainCode} from '@emeraldwallet/core';
import type {Meta, StoryObj} from '@storybook/react';
import SelectHDPath from '../../src/create-account/SelectHDPath';
import {createSeeds, createWallets, initLauncher, ledgerSeedId} from "../wallets";
import {providerForStore} from "../storeProvider";
import {createNew} from './data';
import {accounts} from "@emeraldwallet/store";

const { api, backend} = createNew()

let seedId = 'e23378da-d4b2-4843-ae4d-f42888a11b58';

api.vault.addSeedAddress(
seedId,
"m/44'/60'/0'/0/0",
'0xc4cf138d349ead73f7a93306096a626c40f56653',
);
api.vault.addSeedAddress(
seedId,
"m/84'/0'/0'/0/0",
'bc1qqvc28z0kgc7fmdfu440sd7knpgzytgnurszh6t',
);

let configure = [
accounts.actions.setSeedsAction([
{
id: seedId,
type: 'mnemonic',
createdAt: new Date(),
available: true,
},
]),
]


export default {
title: 'Example Web / Multiple Blockchains',
component: SelectHDPath,
decorators: [providerForStore(api, backend, [...initLauncher, ...configure])],
} as Meta;

type Story = StoryObj<typeof SelectHDPath>;

export const Default: Story = {
name: 'Multiple Blockchains',
args: {
seed: { type: 'id', value: seedId },
blockchains: [BlockchainCode.BTC, BlockchainCode.ETH],
onChange: (accountId, indexes) => console.log('Account selected', accountId, indexes),
}
};
100 changes: 100 additions & 0 deletions packages/react-app/stories/ExampleWeb/CancelTx.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import {providerForStore} from "../storeProvider";
import {Meta} from "@storybook/react";
import * as React from 'react';
import {accounts, StoredTransaction, tokens, TxAction, txStash} from "@emeraldwallet/store";
import {CreateTransaction} from "../../src/transaction";
import {BackendMock, MemoryApiMock} from "../__mocks__";
import {WalletEntry} from "@emeraldpay/emerald-vault-core";
import {BlockchainCode, TokenRegistry, workflow} from "@emeraldwallet/core";
import {State, Status} from "@emeraldwallet/core/lib/persistentState";

const api = new MemoryApiMock();
const backend = new BackendMock();

const entries: WalletEntry[] = [
{
id: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1',
address: {
type: 'single',
value: '0x0',
},
key: {
type: 'hd-path',
hdPath: "m/44'/60'/0'/0/0",
seedId: 'c782ff2b-ba6e-43e2-9e2d-92d05cc37b03',
},
blockchain: 100,
createdAt: new Date(),
},
];

let actions = [
accounts.actions.setWalletsAction([
{
entries,
id: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9',
createdAt: new Date(),
},
]),
{
type: 'LAUNCHER/TOKENS',
payload: [
{
name: 'Wrapped Ether',
blockchain: 100,
address: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
symbol: 'WETH',
decimals: 18,
type: 'ERC20',
},
],
},

accounts.actions.setBalanceAction({
address: '0x0',
balance: '1000000000000000000/WEI',
entryId: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1',
}),
tokens.actions.setTokenBalance(BlockchainCode.ETH, '0x0', '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', {
decimals: 18,
symbol: 'WETH',
unitsValue: '1000000000000000000',
}),

txStash.actions.setTransaction({
blockchain: BlockchainCode.ETH,
amount: '1000000000000000000/WEI',
asset: 'ETH',
target: workflow.TxTarget.MANUAL,
type: "transfer",
meta: {
type: workflow.TxMetaType.ETHER_CANCEL,
}
}),
];

// @ts-ignore
let prevTx: StoredTransaction = {
blockchain: 100,
changes: [],
convertChanges: undefined,
meta: {
txId: "0xc88ffa6d41ac14f583b86aa27674ddcc442c12e1d5bb6bb7aa2c7c77824e50d3",
blockchain: BlockchainCode.ETH,
timestamp: new Date(),
},
sinceTimestamp: new Date(),
state: State.SUBMITTED,
status: Status.UNKNOWN,
txId: "0xc88ffa6d41ac14f583b86aa27674ddcc442c12e1d5bb6bb7aa2c7c77824e50d3",
}

export default {
title: 'Example Web / Cancel Tx',
decorators: [providerForStore(api, backend, actions),],
} as Meta;

export const Default = {
name: 'Cancel Tx',
render: () => <CreateTransaction action={TxAction.CANCEL} storedTx={prevTx} entryId="2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1" />
};
Loading

0 comments on commit 3b9f750

Please sign in to comment.