diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 535df27ae..b54eb4459 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -33,6 +33,27 @@
       "group": "test",
       "label": "test",
       "script": "test"
+    },
+    {
+      "type": "npm",
+      "label": "storybook:react-app",
+      "script": "storybook",
+      "path": "packages/react-app",
+      "problemMatcher": []
+    },
+    {
+      "type": "npm",
+      "label": "storybook:react-app:electron",
+      "script": "storybook:electron",
+      "path": "packages/react-app",
+      "problemMatcher": []
+    },
+    {
+      "type": "npm",
+      "label": "storybook:ui",
+      "script": "storybook",
+      "path": "packages/ui",
+      "problemMatcher": []
     }
   ]
 }
diff --git a/packages/react-app/stories/CreateTransaction/index.tsx b/packages/react-app/stories/CreateTransaction/index.tsx
new file mode 100644
index 000000000..69488a295
--- /dev/null
+++ b/packages/react-app/stories/CreateTransaction/index.tsx
@@ -0,0 +1,150 @@
+import { WalletEntry } from '@emeraldpay/emerald-vault-core';
+import { BlockchainCode } from '@emeraldwallet/core';
+import { TxAction, accounts, tokens } from '@emeraldwallet/store';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { CreateTransaction } from '../../src/transaction';
+import { MemoryApiMock } from '../__mocks__/apiMock';
+import { BackendMock } from '../__mocks__/backendMock';
+import { providerForStore } from '../storeProvider';
+import withTheme from '../themeProvider';
+
+const api = new MemoryApiMock();
+const backend = new BackendMock();
+
+const entries: WalletEntry[] = [
+  {
+    id: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-0',
+    address: {
+      type: 'xpub',
+      value: 'vpub_common',
+    },
+    key: {
+      type: 'hd-path',
+      hdPath: "m/84'/1'/0'/0/0",
+      seedId: 'c782ff2b-ba6e-43e2-9e2d-92d05cc37b03',
+    },
+    xpub: [
+      {
+        role: 'receive',
+        xpub: 'vpub_receive',
+      },
+      {
+        role: 'change',
+        xpub: 'vpub_change',
+      },
+    ],
+    blockchain: 1,
+    createdAt: new Date(),
+    addresses: [],
+  },
+  {
+    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(),
+  },
+  {
+    id: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-2',
+    address: {
+      type: 'single',
+      value: '0x1',
+    },
+    key: {
+      type: 'hd-path',
+      hdPath: "m/44'/61'/0'/0/0'",
+      seedId: 'c782ff2b-ba6e-43e2-9e2d-92d05cc37b03',
+    },
+    blockchain: 101,
+    createdAt: new Date(),
+  },
+];
+
+api.vault.addEntry('2a19e023-f119-4dab-b2cb-4b3e73fa32c9-0', {
+  address: 'addr',
+  hdPath: "m/84'/1'/0'/1/0",
+  role: 'change',
+});
+
+storiesOf('CreateTransaction', module)
+  .addDecorator(
+    providerForStore(api, backend, [
+      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',
+          },
+          {
+            name: 'Wrapped Ether',
+            blockchain: 101,
+            address: '0x1953cab0E5bFa6D4a9BaD6E05fD46C1CC6527a5a',
+            symbol: 'WETC',
+            decimals: 18,
+            type: 'ERC20',
+          },
+        ],
+      },
+      accounts.actions.setBalanceAction({
+        address: 'tb1',
+        balance: '100000000/SAT',
+        entryId: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-0',
+        utxo: [
+          {
+            address: 'tb1',
+            txid: 'tx_0',
+            value: '100000000/SAT',
+            vout: 0,
+          },
+        ],
+      }),
+      accounts.actions.setBalanceAction({
+        address: '0x0',
+        balance: '1000000000000000000/WEI',
+        entryId: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1',
+      }),
+      accounts.actions.setBalanceAction({
+        address: '0x1',
+        balance: '1000000000000000000/WEI',
+        entryId: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-2',
+      }),
+      tokens.actions.setTokenBalance(BlockchainCode.ETH, '0x0', '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', {
+        decimals: 18,
+        symbol: 'WETH',
+        unitsValue: '1000000000000000000',
+      }),
+      tokens.actions.setTokenBalance(BlockchainCode.ETC, '0x1', '0x1953cab0E5bFa6D4a9BaD6E05fD46C1CC6527a5a', {
+        decimals: 18,
+        symbol: 'WETC',
+        unitsValue: '1000000000000000000',
+      }),
+    ]),
+  )
+  .addDecorator(withTheme)
+  .add('transfer', () => <CreateTransaction entryId="2a19e023-f119-4dab-b2cb-4b3e73fa32c9-0" />)
+  .add('approve', () => (
+    <CreateTransaction action={TxAction.APPROVE} entryId="2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1" />
+  ))
+  .add('convert', () => (
+    <CreateTransaction action={TxAction.CONVERT} entryId="2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1" />
+  ));
diff --git a/packages/react-app/stories/LedgerWait/index.tsx b/packages/react-app/stories/LedgerWait/index.tsx
index 3652aac10..bf45218ce 100644
--- a/packages/react-app/stories/LedgerWait/index.tsx
+++ b/packages/react-app/stories/LedgerWait/index.tsx
@@ -8,5 +8,4 @@ import withTheme from '../themeProvider';
 storiesOf('WaitLedger', module)
   .addDecorator(withProvider)
   .addDecorator(withTheme)
-  .add('default', () => <WaitLedger onConnected={action('Connected')} />)
-  .add('full size', () => <WaitLedger onConnected={action('Connected')} />);
+  .add('default', () => <WaitLedger onConnected={action('Connected')} />);
diff --git a/packages/react-app/stories/ModifyTx/index.tsx b/packages/react-app/stories/ModifyTx/index.tsx
deleted file mode 100644
index 7b36ef2aa..000000000
--- a/packages/react-app/stories/ModifyTx/index.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import {
-  BitcoinRawTransaction,
-  BlockchainCode,
-  PersistentState,
-  TokenRegistry,
-  blockchainCodeToId,
-} from '@emeraldwallet/core';
-import { StoredTransaction, accounts } from '@emeraldwallet/store';
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import CreateCancelTransaction from '../../src/transaction/CreateCancelTransaction';
-import { MemoryApiMock } from '../__mocks__/apiMock';
-import { BackendMock as BackendMockBase } from '../__mocks__/backendMock';
-import { providerForStore } from '../storeProvider';
-import withTheme from '../themeProvider';
-
-const { ChangeType, Direction, State, Status } = PersistentState;
-
-class BackendMock extends BackendMockBase {
-  getBtcTx(): Promise<BitcoinRawTransaction | null> {
-    return Promise.resolve({
-      vout: [
-        {
-          scriptPubKey: {
-            address: 'tb1q2h3wgjasuprzrmcljkpkcyeh69un3r0tzf9nnn',
-          },
-          value: 0.00001,
-        },
-        {
-          scriptPubKey: {
-            address: 'tb1q8grga8c48wa4dsevt0v0gcl6378rfljj6vrz0u',
-          },
-          value: 0.01208976,
-        },
-      ],
-      vin: [
-        {
-          txid: 'fd53023c4a9627c26c5d930f3149890b2eecf4261f409bd1a340454b7dede244',
-          sequence: 0,
-          vout: 0,
-        },
-      ],
-    });
-  }
-}
-
-const blockchainId = blockchainCodeToId(BlockchainCode.BTC);
-
-const api = new MemoryApiMock();
-const backend = new BackendMock();
-const tokenRegistry = new TokenRegistry([]);
-
-api.balances.set({
-  address:
-    'vpub5b2pFUoFBwGLT1jwWQ69V2hCi7nhLTy67k1NkfSxhEfYknh1uSLF' +
-    'o6v4oXeBv7PuoxVAFKyjrai2zdcSG82venvnSwmsUhFXET6Mhb4wUqN',
-  amount: '0.01210185',
-  asset: 'BTC',
-  blockchain: blockchainId,
-  utxo: [
-    {
-      amount: '1210185',
-      txid: 'fd53023c4a9627c26c5d930f3149890b2eecf4261f409bd1a340454b7dede244',
-      vout: 0,
-    },
-  ],
-});
-
-api.vault.addEntry('2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1', {
-  address: 'tb1qjg445dvh6krr6gtmuh4eqgua372vxaf4q07nv9',
-  hdPath: "m/84'/1'/0'/1/0",
-  role: 'change',
-});
-api.vault.addEntry('2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1', {
-  address: 'tb1q8grga8c48wa4dsevt0v0gcl6378rfljj6vrz0u',
-  hdPath: "m/84'/1'/0'/1/1",
-  role: 'change',
-});
-
-const tx = new StoredTransaction(
-  tokenRegistry,
-  {
-    blockchain: blockchainId,
-    changes: [
-      {
-        address: 'tb1qjg445dvh6krr6gtmuh4eqgua372vxaf4q07nv9',
-        amount: '1210185',
-        asset: 'BTC',
-        direction: Direction.SPEND,
-        type: ChangeType.TRANSFER,
-        wallet: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1',
-      },
-      {
-        address: 'tb1q2h3wgjasuprzrmcljkpkcyeh69un3r0tzf9nnn',
-        amount: '1000',
-        asset: 'BTC',
-        direction: Direction.EARN,
-        type: ChangeType.TRANSFER,
-      },
-      {
-        address: 'tb1q8grga8c48wa4dsevt0v0gcl6378rfljj6vrz0u',
-        amount: '1208976',
-        asset: 'BTC',
-        direction: Direction.EARN,
-        type: ChangeType.TRANSFER,
-        wallet: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1',
-      },
-    ],
-    sinceTimestamp: new Date('2022-01-01T10:00:00'),
-    state: State.PREPARED,
-    status: Status.UNKNOWN,
-    txId: 'f0b3ef3ee04f8879f82fd0a1fd2e1d0c3576522d5aa75a6f724a6690e6c3b971',
-  },
-  null,
-);
-
-storiesOf('ModifyTx', module)
-  .addDecorator(
-    providerForStore(api, backend, [
-      accounts.actions.setWalletsAction([
-        {
-          id: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9',
-          createdAt: new Date(),
-          entries: [
-            {
-              id: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1',
-              blockchain: blockchainId,
-              createdAt: new Date(),
-              address: {
-                type: 'single',
-                value: 'xpub',
-              },
-              key: {
-                type: 'hd-path',
-                hdPath: "m/84'/1'/0'/0/0",
-                seedId: '28a0de6c-1721-496a-a8ec-beef05e8ede0',
-              },
-              xpub: [
-                {
-                  role: 'change',
-                  xpub:
-                    'vpub5b2pFUoFBwGLT1jwWQ69V2hCi7nhLTy67k1NkfSxhEfYknh1uSLF' +
-                    'o6v4oXeBv7PuoxVAFKyjrai2zdcSG82venvnSwmsUhFXET6Mhb4wUqN',
-                },
-                {
-                  role: 'receive',
-                  xpub:
-                    'vpub5b2pFUoFBwGLQK7qL5PfTGcqpwF2ZgVigxeuGAX7yi1yLvJQzvv4' +
-                    '5pKp1ttKczCRZUyksSr55Mma9F9h6kH6zqX7sGS2Z3TumLV5DFGYaji',
-                },
-              ],
-            },
-          ],
-        },
-      ]),
-    ]),
-  )
-  .addDecorator(withTheme)
-  .add('cancel bitcoin', () => <CreateCancelTransaction entryId={'2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1'} tx={tx} />);
diff --git a/packages/react-app/stories/__mocks__/backendMock.ts b/packages/react-app/stories/__mocks__/backendMock.ts
index 28659e4d7..5c1041834 100644
--- a/packages/react-app/stories/__mocks__/backendMock.ts
+++ b/packages/react-app/stories/__mocks__/backendMock.ts
@@ -6,6 +6,7 @@ import {
   EthereumRawReceipt,
   EthereumRawTransaction,
   blockchainIdToCode,
+  isBitcoin,
 } from '@emeraldwallet/core';
 
 export class BlockchainMock {
@@ -42,14 +43,39 @@ export class BackendMock implements BackendApi {
     });
   }
 
-  estimateFee(blockchain: BlockchainCode, blocks: number, mode: EstimationMode): Promise<number> {
+  estimateFee(
+    blockchain: BlockchainCode,
+    blocks: number,
+    mode: EstimationMode,
+  ): Promise<number | Record<string, string>> {
     switch (mode) {
       case 'avgLast':
-        return Promise.resolve(1000);
-      case 'avgMiddle':
-        return Promise.resolve(3000);
+        return Promise.resolve(
+          isBitcoin(blockchain)
+            ? 1000
+            : {
+                max: '100000000000',
+                priority: '1000000',
+              },
+        );
       case 'avgTail5':
-        return Promise.resolve(1500);
+        return Promise.resolve(
+          isBitcoin(blockchain)
+            ? 2000
+            : {
+                max: '200000000000',
+                priority: '2000000',
+              },
+        );
+      case 'avgMiddle':
+        return Promise.resolve(
+          isBitcoin(blockchain)
+            ? 3000
+            : {
+                max: '300000000000',
+                priority: '3000000',
+              },
+        );
     }
 
     return Promise.resolve(0);
diff --git a/packages/react-app/stories/__mocks__/index.ts b/packages/react-app/stories/__mocks__/index.ts
new file mode 100644
index 000000000..6c09431c5
--- /dev/null
+++ b/packages/react-app/stories/__mocks__/index.ts
@@ -0,0 +1,21 @@
+/* eslint sort-exports/sort-exports: error */
+
+export {
+  AddressBookMock,
+  AllowancesMock,
+  BalancesMock,
+  CacheMock,
+  MemoryAddressBook,
+  MemoryAllowances,
+  MemoryBalances,
+  MemoryCache,
+  MemoryTxHistory,
+  MemoryTxMeta,
+  MemoryXPubPos,
+  TxHistoryMock,
+  TxMetaMock,
+  XPubPosMock,
+} from './persistentStateMock';
+export { ApiMock, MemoryApiMock } from './apiMock';
+export { BackendMock, BlockchainMock } from './backendMock';
+export { MemoryVault, REAL_BTC_TX, VaultMock } from './vaultMock';
diff --git a/packages/react-app/stories/storeProvider.tsx b/packages/react-app/stories/storeProvider.tsx
index 9040bed9e..07fb521f7 100644
--- a/packages/react-app/stories/storeProvider.tsx
+++ b/packages/react-app/stories/storeProvider.tsx
@@ -4,7 +4,7 @@ import { DecoratorFunction } from '@storybook/addons/dist/ts3.9/types';
 import * as React from 'react';
 import { ReactElement } from 'react';
 import { Provider } from 'react-redux';
-import { Action } from 'redux';
+import { AnyAction } from 'redux';
 import { ApiMock, MemoryApiMock } from './__mocks__/apiMock';
 import { BackendMock } from './__mocks__/backendMock';
 import {
@@ -34,11 +34,11 @@ function createApi(api: MemoryApiMock): WalletApi {
 export function providerForStore(
   api: MemoryApiMock,
   backend: BackendMock,
-  actions: Array<Action | Dispatched> = [],
+  actions: Array<AnyAction | Dispatched> = [],
 ): DecoratorFunction<ReactElement> {
   const store = createStore(createApi(api), backend);
 
-  actions?.forEach((action) => store.dispatch(action as Action));
+  actions?.forEach((action) => store.dispatch(action as AnyAction));
 
   return (story) => <Provider store={store}>{story()}</Provider>;
 }