diff --git a/packages/react-app/stories/ExampleWeb/ERC20Allowance.stories.tsx b/packages/react-app/stories/ExampleWeb/ERC20Allowance.stories.tsx
new file mode 100644
index 000000000..db6ee3de3
--- /dev/null
+++ b/packages/react-app/stories/ExampleWeb/ERC20Allowance.stories.tsx
@@ -0,0 +1,114 @@
+import {providerForStore} from "../storeProvider";
+import {Meta} from "@storybook/react";
+import * as React from 'react';
+import {accounts, allowances, tokens} from "@emeraldwallet/store";
+import {BackendMock, MemoryApiMock} from "../__mocks__";
+import {WalletEntry} from "@emeraldpay/emerald-vault-core";
+import {BlockchainCode} from "@emeraldwallet/core";
+import WalletAllowance from "../../src/wallets/WalletDetails/WalletAllowance";
+import {tokenDAI, tokenWETH} from "../wallets";
+
+const api = new MemoryApiMock();
+const backend = new BackendMock();
+
+const entries: WalletEntry[] = [
+  {
+    id: '2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1',
+    address: {
+      type: 'single',
+      value: '0x1d1C7DB10aa1a6067Ba81F0Dd6FD4F26FC594f13',
+    },
+    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',
+  }),
+
+  allowances.actions.setAllowance({
+    address: '0x1d1C7DB10aa1a6067Ba81F0Dd6FD4F26FC594f13',
+    allowance: "1000000000000000000",
+    available: "700000000000000000",
+    blockchain: BlockchainCode.ETH,
+    contractAddress: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
+    ownerAddress: "0x1d1C7DB10aa1a6067Ba81F0Dd6FD4F26FC594f13",
+    spenderAddress: "0x7992586aCaEcA5b19B973c1cd12B695131c0B736",
+    timestamp: Date.now() - 12345678,
+  }, [
+    tokenWETH, tokenDAI
+  ]),
+
+  allowances.actions.setAllowance({
+    address: '0x1d1C7DB10aa1a6067Ba81F0Dd6FD4F26FC594f13',
+    allowance: "20000000000000000000000",
+    available: "17500000000000000000",
+    blockchain: BlockchainCode.ETH,
+    contractAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+    ownerAddress: "0x1d1C7DB10aa1a6067Ba81F0Dd6FD4F26FC594f13",
+    spenderAddress: "0x7992586aCaEcA5b19B973c1cd12B695131c0B736",
+    timestamp: Date.now() - 12345678,
+  }, [
+    tokenWETH, tokenDAI
+  ]),
+
+  allowances.actions.setAllowance({
+    address: '0x1d1C7DB10aa1a6067Ba81F0Dd6FD4F26FC594f13',
+    allowance: "99000000000000000000000000000000000000000000",
+    available: "9161660000000000000",
+    blockchain: BlockchainCode.ETH,
+    contractAddress: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
+    ownerAddress: "0xCb1c1a86bcae979B971c192Cc5D2B6551311B73e",
+    spenderAddress: "0x1d1C7DB10aa1a6067Ba81F0Dd6FD4F26FC594f13",
+    timestamp: Date.now() - 12345678,
+  }, [
+    tokenWETH, tokenDAI
+  ]),
+
+];
+
+
+export default {
+  title: 'Example Web / ERC20 Allowance',
+  decorators: [providerForStore(api, backend, actions),],
+} as Meta;
+
+export const Default = {
+  name: 'ERC20 Allowance',
+  render: () => <WalletAllowance walletId="2a19e023-f119-4dab-b2cb-4b3e73fa32c9" />
+};
diff --git a/packages/react-app/stories/ExampleWeb/ETHSignMessage.stories.tsx b/packages/react-app/stories/ExampleWeb/ETHSignMessage.stories.tsx
new file mode 100644
index 000000000..80b90368b
--- /dev/null
+++ b/packages/react-app/stories/ExampleWeb/ETHSignMessage.stories.tsx
@@ -0,0 +1,19 @@
+import {providerForStore} from "../storeProvider";
+import {Meta} from "@storybook/react";
+import * as React from "react";
+import {BackendMock, MemoryApiMock} from "../__mocks__";
+import SignMessage from "../../src/message/SignMessage";
+import {createWallets} from "../wallets";
+
+const api = new MemoryApiMock();
+const backend = new BackendMock();
+
+export default {
+  title: 'Example Web / ETH Sign Message',
+  decorators: [providerForStore(api, backend, [...createWallets]), ],
+} as Meta;
+
+export const Default = {
+  name: 'ETH Sign Message',
+  render: () => <SignMessage walletId="8ff89b7d-8a73-4ee0-ad5b-8ac1f04a49ef" />
+};
diff --git a/packages/react-app/stories/ExampleWeb/SwapWETH.stories.tsx b/packages/react-app/stories/ExampleWeb/SwapWETH.stories.tsx
new file mode 100644
index 000000000..82cb4ab66
--- /dev/null
+++ b/packages/react-app/stories/ExampleWeb/SwapWETH.stories.tsx
@@ -0,0 +1,85 @@
+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: '0x1d1C7DB10aa1a6067Ba81F0Dd6FD4F26FC594f13',
+    },
+    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.ERC20_CONVERT,
+    }
+  }),
+];
+
+
+export default {
+  title: 'Example Web / ETH to WETH Conversion',
+  decorators: [providerForStore(api, backend, actions),],
+} as Meta;
+
+export const Default = {
+  name: 'ETH to WETH Conversion',
+  render: () => <CreateTransaction action={TxAction.CONVERT} entryId="2a19e023-f119-4dab-b2cb-4b3e73fa32c9-1" />
+};
diff --git a/packages/react-app/stories/__mocks__/vaultMock.ts b/packages/react-app/stories/__mocks__/vaultMock.ts
index 7f65f7740..788b92728 100644
--- a/packages/react-app/stories/__mocks__/vaultMock.ts
+++ b/packages/react-app/stories/__mocks__/vaultMock.ts
@@ -73,7 +73,6 @@ export class VaultMock implements IEmeraldVault {
   readonly vault: MemoryVault;
 
   constructor(vault: MemoryVault) {
-    console.log("create vault mock", vault);
     this.vault = vault;
   }
 
@@ -162,7 +161,6 @@ export class VaultMock implements IEmeraldVault {
     blockchain: number,
     hdpaths: string[],
   ): Promise<SeedAddresses> {
-    console.log("call listSeedAddresses", this);
     if (typeof seedId == 'object') {
       if (seedId.type == 'id') {
         const seed: IdSeedReference = seedId;
diff --git a/packages/react-app/stories/storeProvider.tsx b/packages/react-app/stories/storeProvider.tsx
index ac49aa8ed..e5b774feb 100644
--- a/packages/react-app/stories/storeProvider.tsx
+++ b/packages/react-app/stories/storeProvider.tsx
@@ -19,7 +19,6 @@ import { VaultMock } from './__mocks__';
 import {DecoratorFunction, Renderer, Args} from "@storybook/types";
 
 function createApi(api: MemoryApiMock): WalletApi {
-  console.log("create api");
   return new ApiMock(
     new AddressBookMock(api.addressBook),
     new AllowancesMock(api.allowances),
diff --git a/packages/react-app/stories/wallets.ts b/packages/react-app/stories/wallets.ts
index c9c0a7428..b52ff5428 100644
--- a/packages/react-app/stories/wallets.ts
+++ b/packages/react-app/stories/wallets.ts
@@ -1,5 +1,5 @@
 import { Wallet } from '@emeraldpay/emerald-vault-core';
-import { BlockchainCode } from '@emeraldwallet/core';
+import {BlockchainCode, TokenData} from '@emeraldwallet/core';
 import { accounts, settings, tokens } from '@emeraldwallet/store';
 
 export const ledgerSeedId = '7befa8b6-670d-467a-8ddd-a9615087ba14';
@@ -115,6 +115,47 @@ export const wallet5: Wallet = {
   createdAt: new Date(),
 };
 
+export const tokenDAI: TokenData = {
+  name: 'Dai Stablecoin',
+  blockchain: 100,
+  address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+  symbol: 'DAI',
+  decimals: 18,
+  type: 'ERC20',
+  stablecoin: true,
+}
+
+export const tokenUSDT: TokenData = {
+  name: 'Tether USD',
+  blockchain: 100,
+  address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
+  symbol: 'USDT',
+  decimals: 6,
+  type: 'ERC20',
+  stablecoin: true,
+}
+
+export const tokenUSDC: TokenData = {
+  name: 'USD Coin',
+  blockchain: 100,
+  address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+  symbol: 'USDC',
+  decimals: 6,
+  type: 'ERC20',
+  stablecoin: true,
+}
+
+export const tokenWETH: TokenData = {
+  name: 'Wrapped Ether',
+  blockchain: 100,
+  address: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
+  symbol: 'WETH',
+  decimals: 18,
+  type: 'ERC20',
+  stablecoin: false,
+  pinned: true,
+}
+
 export const initLauncher = [
   {
     type: 'LAUNCHER/OPTIONS',
@@ -123,33 +164,10 @@ export const initLauncher = [
   {
     type: 'LAUNCHER/TOKENS',
     payload: [
-      {
-        name: 'Dai Stablecoin',
-        blockchain: 100,
-        address: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
-        symbol: 'DAI',
-        decimals: 18,
-        type: 'ERC20',
-        stablecoin: true,
-      },
-      {
-        name: 'Tether USD',
-        blockchain: 100,
-        address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
-        symbol: 'USDT',
-        decimals: 6,
-        type: 'ERC20',
-        stablecoin: true,
-      },
-      {
-        name: 'USD Coin',
-        blockchain: 100,
-        address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
-        symbol: 'USDC',
-        decimals: 6,
-        type: 'ERC20',
-        stablecoin: true,
-      },
+      tokenDAI,
+      tokenUSDT,
+      tokenUSDC,
+      tokenWETH,
     ],
   },
 ];
diff --git a/packages/store/src/allowances/actions.ts b/packages/store/src/allowances/actions.ts
index 5bbb8f280..ce08c04f8 100644
--- a/packages/store/src/allowances/actions.ts
+++ b/packages/store/src/allowances/actions.ts
@@ -1,5 +1,6 @@
 import { Dispatched } from '../types';
-import { ActionTypes, AllowanceRaw, InitAllowanceAction } from './types';
+import {ActionTypes, AllowanceCommon, AllowanceRaw, InitAllowanceAction, SetAllowanceAction} from './types';
+import {TokenData} from "@emeraldwallet/core";
 
 export function initAddressAllowance(allowance: AllowanceRaw): Dispatched<void, InitAllowanceAction> {
   return (dispatch, getState, extra) => {
@@ -18,3 +19,10 @@ export function initAddressAllowance(allowance: AllowanceRaw): Dispatched<void,
     );
   };
 }
+
+export function setAllowance(allowance: AllowanceCommon, tokens: TokenData[]): SetAllowanceAction {
+  return {
+    type: ActionTypes.SET_ALLOWANCE,
+    payload: { allowance, tokens },
+  };
+}
diff --git a/packages/store/src/allowances/reducer.ts b/packages/store/src/allowances/reducer.ts
index fb97e6bd9..e77d3f1b5 100644
--- a/packages/store/src/allowances/reducer.ts
+++ b/packages/store/src/allowances/reducer.ts
@@ -15,25 +15,23 @@ const INITIAL_STATE: AllowanceState = {};
 
 function setAllowance(
   state: AllowanceState,
-  {
-    payload: {
-      allowance: {
-        address,
-        blockchain,
-        allowance,
-        available,
-        contractAddress,
-        ownerAddress,
-        ownerControl,
-        spenderAddress,
-        spenderControl,
-        timestamp,
-      },
-      tokens,
-    },
-  }: SetAllowanceAction,
+  value: SetAllowanceAction,
 ): AllowanceState {
-  const tokenRegistry = new TokenRegistry(tokens);
+
+  const {
+    address,
+    blockchain,
+    allowance,
+    available,
+    contractAddress,
+    ownerAddress,
+    ownerControl,
+    spenderAddress,
+    spenderControl,
+    timestamp,
+  } = value.payload.allowance;
+
+  const tokenRegistry = new TokenRegistry(value.payload.tokens);
 
   if (tokenRegistry.hasAddress(blockchain, contractAddress)) {
     const token = tokenRegistry.byAddress(blockchain, contractAddress);
diff --git a/packages/store/src/allowances/types.ts b/packages/store/src/allowances/types.ts
index c3f957e9f..ad9e8c1f6 100644
--- a/packages/store/src/allowances/types.ts
+++ b/packages/store/src/allowances/types.ts
@@ -41,17 +41,35 @@ export enum ActionTypes {
 }
 
 export interface AllowanceRaw {
+  /**
+   * User's address. Either owner or spender, doesn't matter just any of the sides that belongs to the user because it's used as a key in the state
+   */
   address: string;
+  /**
+   * The max amount allowed
+   */
   allowance: string;
+  /**
+   * Actual amount that can be used (on owner's balance)
+   */
   available: string;
   blockchain: BlockchainCode;
+  /**
+   * ERC20 address
+   */
   contractAddress: string;
+  /**
+   * Who has provided the allowance
+   */
   ownerAddress: string;
+  /**
+   * Who can spend the allowance
+   */
   spenderAddress: string;
   timestamp: number;
 }
 
-interface AllowanceCommon extends AllowanceRaw {
+export interface AllowanceCommon extends AllowanceRaw {
   ownerControl?: AddressApi.AddressControl;
   spenderControl?: AddressApi.AddressControl;
 }