From 017ab2a9dc068dd37b8cc4e58308d6936280f5f8 Mon Sep 17 00:00:00 2001 From: Sergei Novikov Date: Fri, 29 Dec 2023 13:39:01 +0300 Subject: [PATCH] solution: add storybook for new ui --- .vscode/tasks.json | 21 +++ .../stories/CreateTransaction/index.tsx | 150 +++++++++++++++++ .../react-app/stories/LedgerWait/index.tsx | 3 +- packages/react-app/stories/ModifyTx/index.tsx | 159 ------------------ .../stories/__mocks__/backendMock.ts | 36 +++- packages/react-app/stories/__mocks__/index.ts | 21 +++ packages/react-app/stories/storeProvider.tsx | 6 +- 7 files changed, 227 insertions(+), 169 deletions(-) create mode 100644 packages/react-app/stories/CreateTransaction/index.tsx delete mode 100644 packages/react-app/stories/ModifyTx/index.tsx create mode 100644 packages/react-app/stories/__mocks__/index.ts 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', () => ) + .add('approve', () => ( + + )) + .add('convert', () => ( + + )); 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', () => ) - .add('full size', () => ); + .add('default', () => ); 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 { - 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', () => ); 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 { + estimateFee( + blockchain: BlockchainCode, + blocks: number, + mode: EstimationMode, + ): Promise> { 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 = [], + actions: Array = [], ): DecoratorFunction { const store = createStore(createApi(api), backend); - actions?.forEach((action) => store.dispatch(action as Action)); + actions?.forEach((action) => store.dispatch(action as AnyAction)); return (story) => {story()}; }