Merge pull request #1371 from emeraldpay/feature/new-ui-storybook

solution: add storybook for new ui
emeraldpay · Dec 31, 2023 · 9336089 · 9336089
2 parents 978132d + 017ab2a
commit 9336089
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 169 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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);