storybooks for web demo

packages/react-app/.storybook/main.js

@@ -4,9 +4,8 @@ const config = {
   stories: [
     '../stories/**/*.stories.tsx'
   ],
-
   docs: {
-    autodocs: true
+    autodocs: false
   }
 };
 

packages/react-app/src/app/layout/Header/Title.tsx

@@ -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';
@@ -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',
     },
   }),
 );
@@ -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>
   );

packages/react-app/src/message/SignMessage.tsx

@@ -58,6 +58,9 @@ const useStyles = makeStyles(
       marginBottom: 10,
       width: '100%',
     },
+    typeAutoDetected: {
+      marginLeft: 20,
+    }
   }),
 );
 
@@ -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

packages/react-app/src/transactions/TxDetails/TxStatus.tsx

@@ -18,6 +18,7 @@ const useStyles = makeStyles((theme) =>
     block: {
       alignItems: 'center',
       display: 'flex',
+      fontFamily: theme.typography.fontFamily,
     },
     error: {
       color: theme.palette.error.main,

packages/react-app/src/transactions/TxHistory/List/Transaction.tsx

@@ -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';
@@ -103,6 +103,7 @@ const useStyles = makeStyles((theme) =>
     changeItemCoin: {
       lineHeight: '24px',
       textAlign: 'right',
+      color: theme.palette.text.primary,
     },
     container: {
       boxSizing: 'border-box',
@@ -182,6 +183,7 @@ const useStyles = makeStyles((theme) =>
     },
     transactionLabelText: {
       marginRight: 10,
+      color: theme.palette.text.primary,
     },
   }),
 );
@@ -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>
@@ -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()}>
@@ -388,7 +390,7 @@ const Transaction: React.FC<OwnProps & StateProps & DispatchProps> = ({
                     amountValue
                   )}{' '}
                   {amountUnit}
-                </div>
+                </Typography>
                 <div className={styles.changeItemAmount}>
                   {change.walletInstance.id === walletId ? (
                     <div />
@@ -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>
             );

packages/react-app/src/wallets/WalletDetails/WalletAllowance.tsx

@@ -56,6 +56,10 @@ const useStyles = makeStyles((theme) =>
     allowanceAddressIcon: {
       marginRight: 5,
     },
+    allowanceAddressDescription: {
+      textAlign: 'right',
+      display: 'block',
+    },
     allowanceActions: {
       display: 'flex',
       justifyContent: 'end',
@@ -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 ? (

packages/react-app/stories/ExampleWeb/Blockchains.stories.tsx

@@ -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),
+  }
+};

packages/react-app/stories/ExampleWeb/CancelTx.stories.tsx

@@ -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" />
+};