From a22fb7c5e4f8400bc833f62464d3ac12ff0889a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E5=9B=BD=E5=AE=87?= <841185308@qq.com>
Date: Tue, 11 Jul 2023 11:01:09 +0800
Subject: [PATCH 1/2] feat: Adapt storybook v7, remove
 deprecations[ComponentStory, storiesOf] (#2766)

* feat: Adapt storybook v7, remove deprecations[ComponentStory, storiesOf]

* fix: Add .story directory to eslint.
---
 packages/neuron-ui/.storybook/main.ts         |  25 +-
 packages/neuron-ui/package.json               |   5 +
 .../src/stories/Addresses.stories.tsx         |  18 +-
 .../src/stories/AlertDialog.stories.tsx       |  30 +-
 .../neuron-ui/src/stories/Balance.stories.tsx |  25 +-
 .../src/stories/BalanceSyncIcon.stories.tsx   |  19 +-
 .../src/stories/Breadcrum.stories.tsx         |  41 ++-
 .../CompensationPeriodTooltip.stories.tsx     |  67 +++-
 .../CompensationProgressBar.stories.tsx       |  50 +--
 .../src/stories/CopyZone.stories.tsx          |  39 ++-
 .../src/stories/CustomizedAsset.stories.tsx   |  30 +-
 .../stories/DatetimePickerDialog.stories.tsx  |  27 +-
 .../src/stories/DepositDialog.stories.tsx     |  18 +-
 .../neuron-ui/src/stories/Dialog.stories.tsx  |  51 ++--
 .../stories/ExperimentalRibbon.stories.tsx    |  19 +-
 .../src/stories/GeneralSetting.stories.tsx    |  68 +++--
 .../src/stories/GlobalDialog.stories.tsx      |  40 ++-
 .../neuron-ui/src/stories/History.stories.tsx |  69 +++--
 .../neuron-ui/src/stories/Navbar.stories.tsx  |  19 +-
 .../src/stories/NervosDAO.stories.tsx         |  28 +-
 .../src/stories/NervosDAORecord.stories.tsx   | 289 +++++++++---------
 .../src/stories/NetworkSetting.stories.tsx    |  39 ++-
 .../src/stories/NetworkStatus.stories.tsx     |  93 +++---
 .../src/stories/Overview.stories.tsx          |  43 +--
 .../src/stories/Pagination.stories.tsx        |  68 +++--
 .../src/stories/PasswordRequest.stories.tsx   |  66 +++-
 .../neuron-ui/src/stories/Receive.stories.tsx |  32 +-
 .../src/stories/RingProgressBar.stories.tsx   |  47 +--
 .../src/stories/SUDTAccountList.stories.tsx   |  16 +-
 .../src/stories/SUDTAccountPile.stories.tsx   |  29 +-
 .../src/stories/SUDTCreateDialog.stories.tsx  |  35 ++-
 .../src/stories/SUDTReceiveDialog.stories.tsx |  26 +-
 .../src/stories/SUDTSend.stories.tsx          |  14 +-
 .../src/stories/SUDTUpdateDialog.stories.tsx  |  91 +++---
 .../src/stories/ScriptTag.stories.tsx         |  48 ++-
 .../src/stories/SendFieldset.stories.tsx      |  55 ++--
 .../src/stories/SendMetaInfo.stories.tsx      |  32 +-
 .../src/stories/SettingTabs.stories.tsx       |  38 ++-
 .../src/stories/SignAndVerify.stories.tsx     |  17 +-
 .../src/stories/SpecialAsset.stories.tsx      |  50 ++-
 .../src/stories/SpecialAssetList.stories.tsx  |  16 +-
 .../neuron-ui/src/stories/Table.stories.tsx   | 197 ++++++------
 .../src/stories/TextField.stories.tsx         |  34 ++-
 .../neuron-ui/src/stories/Toolip.stories.tsx  |  88 +++---
 .../stories/TransactionFeePanel.stories.tsx   |  22 +-
 .../src/stories/TransactionList.stories.tsx   |  83 ++---
 .../src/stories/WalletSetting.stories.tsx     |  40 ++-
 .../src/stories/WithdrawDialog.stories.tsx    |  18 +-
 .../src/widgets/RadioGroup/index.tsx          |   2 +-
 49 files changed, 1354 insertions(+), 962 deletions(-)

diff --git a/packages/neuron-ui/.storybook/main.ts b/packages/neuron-ui/.storybook/main.ts
index 1c2bd5971a..3cf0dbf366 100644
--- a/packages/neuron-ui/.storybook/main.ts
+++ b/packages/neuron-ui/.storybook/main.ts
@@ -1,21 +1,24 @@
 export default {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/preset-create-react-app", "storybook-addon-react-router-v6"],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+    'storybook-addon-react-router-v6',
+  ],
   framework: {
-    name: "@storybook/react-webpack5",
-    options: {}
+    name: '@storybook/react-webpack5',
+    options: {},
   },
   webpackFinal: config => {
     config.resolve.alias = {
       ...config.resolve.alias,
-      electron: require.resolve('./electron')
-    };
-    return config;
+      electron: require.resolve('./electron'),
+    }
+    return config
   },
   docs: {
-    autodocs: true
-  },
-  features: {
-    storyStoreV7: false,
+    autodocs: true,
   },
 }
diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json
index 9a69346b86..a1e5f3605e 100644
--- a/packages/neuron-ui/package.json
+++ b/packages/neuron-ui/package.json
@@ -28,6 +28,11 @@
     "registry": "https://registry.npmjs.org/"
   },
   "lint-staged": {
+    ".storybook/**/*.{js,cjs,mjs,jsx,ts,tsx}": [
+      "prettier --ignore-path ../../.prettierignore --write",
+      "eslint --fix",
+      "git add"
+    ],
     "src/**/*.{js,cjs,mjs,jsx,ts,tsx}": [
       "prettier --ignore-path ../../.prettierignore --write",
       "eslint --fix",
diff --git a/packages/neuron-ui/src/stories/Addresses.stories.tsx b/packages/neuron-ui/src/stories/Addresses.stories.tsx
index 32d309513e..7b8baf483e 100644
--- a/packages/neuron-ui/src/stories/Addresses.stories.tsx
+++ b/packages/neuron-ui/src/stories/Addresses.stories.tsx
@@ -1,21 +1,23 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Addresses from 'components/Addresses'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import addressesStates from './data/addresses'
 
-export default {
-  title: 'Addresses',
+const meta: Meta<typeof Addresses> = {
   component: Addresses,
   decorators: [withRouter],
   argTypes: {
     wallet: { control: 'object', isGlobal: true },
   },
 }
+export default meta
 
-const Template: ComponentStory<typeof Addresses> = () => <Addresses />
+type Story = StoryObj<typeof Addresses>
 
-export const ContentList = Template.bind({})
-ContentList.args = { wallet: { addresses: addressesStates['Content List'] } }
+export const ContentList: Story = {
+  args: {
+    wallet: { addresses: addressesStates['Content List'] },
+  },
+}
 
-export const EmptyList = Template.bind({})
+export const EmptyList: Story = {}
diff --git a/packages/neuron-ui/src/stories/AlertDialog.stories.tsx b/packages/neuron-ui/src/stories/AlertDialog.stories.tsx
index 432cd9f727..58eb543ad7 100644
--- a/packages/neuron-ui/src/stories/AlertDialog.stories.tsx
+++ b/packages/neuron-ui/src/stories/AlertDialog.stories.tsx
@@ -1,24 +1,18 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import AlertDialog from 'widgets/AlertDialog'
 
-const props = {
-  show: true,
-  title: 'This is the title of alert dialog',
-  message:
-    'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-  dispatch: () => {},
+const meta: Meta<typeof AlertDialog> = {
+  component: AlertDialog,
+  args: {
+    title: 'This is the title of alert dialog',
+    message: 'Here is the alert dialog message',
+    type: 'success',
+    show: false,
+  },
 }
 
-const stories = storiesOf('Alert Dialog', module)
-stories.add('basic alert dialog', () => {
-  return <AlertDialog {...props} type="failed" />
-})
+export default meta
 
-stories.add('basic alert dialog', () => {
-  return <AlertDialog {...props} type="success" />
-})
+type Story = StoryObj<typeof AlertDialog>
 
-stories.add('basic alert dialog', () => {
-  return <AlertDialog {...props} type="warning" />
-})
+export const Default: Story = {}
diff --git a/packages/neuron-ui/src/stories/Balance.stories.tsx b/packages/neuron-ui/src/stories/Balance.stories.tsx
index 97fba47cb8..ffff3847d1 100644
--- a/packages/neuron-ui/src/stories/Balance.stories.tsx
+++ b/packages/neuron-ui/src/stories/Balance.stories.tsx
@@ -1,12 +1,19 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Balance from 'widgets/Balance'
 
-const balances = ['0', '0.00000001', '0.99999999', '1', '1.000000001', '111111111111111111111111111111111.111111111111']
+const meta: Meta<typeof Balance> = {
+  component: Balance,
+  args: {
+    balance: '0',
+  },
+}
 
-const stories = storiesOf('Balance', module)
-balances.forEach(balance => {
-  stories.add(`Balance ${balance} CKB`, () => {
-    return <Balance balance={balance} />
-  })
-})
+export default meta
+
+type Story = StoryObj<typeof Balance>
+
+export const Default: Story = {
+  args: {
+    balance: '0.00000001',
+  },
+}
diff --git a/packages/neuron-ui/src/stories/BalanceSyncIcon.stories.tsx b/packages/neuron-ui/src/stories/BalanceSyncIcon.stories.tsx
index 6f29bca505..3126097631 100644
--- a/packages/neuron-ui/src/stories/BalanceSyncIcon.stories.tsx
+++ b/packages/neuron-ui/src/stories/BalanceSyncIcon.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
 import { ConnectionStatus, SyncStatus } from 'utils'
-import BalanceSyncIcon, { BalanceSyncIconProps } from 'components/BalanceSyncingIcon'
+import BalanceSyncIcon from 'components/BalanceSyncingIcon'
 
-export default {
-  title: 'Balance Sync Icon',
+const meta: Meta<typeof BalanceSyncIcon> = {
   component: BalanceSyncIcon,
   argTypes: {
     connectionStatus: { control: 'radio', options: ['online', 'offline', 'connecting'] },
@@ -12,6 +12,17 @@ export default {
     connectionStatus: ConnectionStatus.Connecting,
     syncStatus: SyncStatus.SyncNotStart,
   },
+  decorators: [
+    Component => (
+      <div style={{ backgroundColor: '#eee' }}>
+        <Component />
+      </div>
+    ),
+  ],
 }
 
-export const Basic = (props: BalanceSyncIconProps) => <BalanceSyncIcon {...props} />
+export default meta
+
+type Story = StoryObj<typeof BalanceSyncIcon>
+
+export const Default: Story = {}
diff --git a/packages/neuron-ui/src/stories/Breadcrum.stories.tsx b/packages/neuron-ui/src/stories/Breadcrum.stories.tsx
index a9f4324b98..a355c5a03b 100644
--- a/packages/neuron-ui/src/stories/Breadcrum.stories.tsx
+++ b/packages/neuron-ui/src/stories/Breadcrum.stories.tsx
@@ -1,13 +1,24 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
-import Breadcrum, { BreadcumProps } from 'widgets/Breadcrum'
+import Breadcrum from 'widgets/Breadcrum'
 
-const stories = storiesOf('Breadcum', module).addDecorator(withRouter())
+const meta: Meta<typeof Breadcrum> = {
+  component: Breadcrum,
+  decorators: [withRouter()],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Breadcrum>
+
+export const Empty: Story = {
+  args: {
+    pages: [],
+  },
+}
 
-const propsList: { [name: string]: BreadcumProps } = {
-  empty: { pages: [] },
-  root: {
+export const Root: Story = {
+  args: {
     pages: [
       {
         label: 'root',
@@ -15,13 +26,19 @@ const propsList: { [name: string]: BreadcumProps } = {
       },
     ],
   },
-  '2 layers': {
+}
+
+export const TwoLayers: Story = {
+  args: {
     pages: [
       { label: 'root', link: 'root' },
       { label: 'first', link: 'first' },
     ],
   },
-  '3 layers': {
+}
+
+export const ThreeLayers: Story = {
+  args: {
     pages: [
       { label: 'root', link: 'root' },
       { label: 'first', link: 'first' },
@@ -29,9 +46,3 @@ const propsList: { [name: string]: BreadcumProps } = {
     ],
   },
 }
-
-Object.entries(propsList).forEach(([name, props]) => {
-  stories.add(name, () => {
-    return <Breadcrum {...props} />
-  })
-})
diff --git a/packages/neuron-ui/src/stories/CompensationPeriodTooltip.stories.tsx b/packages/neuron-ui/src/stories/CompensationPeriodTooltip.stories.tsx
index a9e9ee6345..cf4f9638ee 100644
--- a/packages/neuron-ui/src/stories/CompensationPeriodTooltip.stories.tsx
+++ b/packages/neuron-ui/src/stories/CompensationPeriodTooltip.stories.tsx
@@ -1,9 +1,6 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import CompensationPeriodTooltip, { CompensationPeriodTooltipProps } from 'components/CompensationPeriodTooltip'
 
-const stories = storiesOf('Compensation Period Tooltip', module)
-
 const props: { [index: string]: CompensationPeriodTooltipProps } = {
   normalStart: {
     depositEpochValue: 0,
@@ -56,19 +53,19 @@ const props: { [index: string]: CompensationPeriodTooltipProps } = {
     endEpochValue: 180,
     isWithdrawn: true,
   },
-  'immature for withdraw': {
+  immatureForWithdraw: {
     depositEpochValue: 1,
     baseEpochTimestamp: Date.now(),
     baseEpochValue: 4.9,
     endEpochValue: 181,
   },
-  'base less than deposit': {
+  baseLessThanDeposit: {
     depositEpochValue: 1,
     baseEpochTimestamp: Date.now(),
     baseEpochValue: 0,
     endEpochValue: 181,
   },
-  'base larger than end': {
+  baseLargerThanEnd: {
     depositEpochValue: 0,
     baseEpochTimestamp: Date.now(),
     baseEpochValue: 181,
@@ -76,8 +73,54 @@ const props: { [index: string]: CompensationPeriodTooltipProps } = {
   },
 }
 
-Object.keys(props).forEach(key => {
-  stories.add(key, () => {
-    return <CompensationPeriodTooltip {...props[key]} />
-  })
-})
+const meta: Meta<typeof CompensationPeriodTooltip> = {
+  component: CompensationPeriodTooltip,
+}
+
+export default meta
+
+type Story = StoryObj<typeof CompensationPeriodTooltip>
+
+export const NormalStart: Story = {
+  args: props.normalStart,
+}
+
+export const NormalEnd: Story = {
+  args: props.normalEnd,
+}
+
+export const SuggestedStart: Story = {
+  args: props.suggestedStart,
+}
+
+export const SuggestedEnd: Story = {
+  args: props.suggestedEnd,
+}
+
+export const EndingStart: Story = {
+  args: props.endingStart,
+}
+
+export const WithdrawInNormal: Story = {
+  args: props.withdrawInNormal,
+}
+
+export const WithdrawInSuggested: Story = {
+  args: props.withdrawInSuggested,
+}
+
+export const WithdrawnInEnding: Story = {
+  args: props.withdrawnInEnding,
+}
+
+export const ImmatureForWithdraw: Story = {
+  args: props.immatureForWithdraw,
+}
+
+export const BaseLessThanDeposit: Story = {
+  args: props.baseLessThanDeposit,
+}
+
+export const BaseLargerThanEnd: Story = {
+  args: props.baseLargerThanEnd,
+}
diff --git a/packages/neuron-ui/src/stories/CompensationProgressBar.stories.tsx b/packages/neuron-ui/src/stories/CompensationProgressBar.stories.tsx
index 5f81e48a0d..43b8105f23 100644
--- a/packages/neuron-ui/src/stories/CompensationProgressBar.stories.tsx
+++ b/packages/neuron-ui/src/stories/CompensationProgressBar.stories.tsx
@@ -1,39 +1,39 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import CompensationProgressBar from 'components/CompensationProgressBar'
 
-export default {
-  title: 'Compensation Progress Bar',
+const meta: Meta<typeof CompensationProgressBar> = {
   component: CompensationProgressBar,
+  args: {
+    style: { width: '300px' },
+  },
 }
 
-const Template: ComponentStory<typeof CompensationProgressBar> = (args: any) => (
-  <CompensationProgressBar style={{ width: '300px' }} {...args} />
-)
+export default meta
 
-export const Normal = Template.bind({})
-Normal.args = { currentEpochValue: 0, endEpochValue: 180 }
+type Story = StoryObj<typeof CompensationProgressBar>
 
-export const Suggested = Template.bind({})
-Suggested.args = { currentEpochValue: 139, endEpochValue: 180 }
+export const Normal: Story = {
+  args: { currentEpochValue: 0, endEpochValue: 180 },
+}
 
-export const Requested = Template.bind({})
-Requested.args = { currentEpochValue: 175, endEpochValue: 180 }
+export const Suggested: Story = {
+  args: { currentEpochValue: 139, endEpochValue: 180 },
+}
 
-export const End = Template.bind({})
-End.args = { currentEpochValue: 180, endEpochValue: 180 }
+export const Requested: Story = {
+  args: { currentEpochValue: 175, endEpochValue: 180 },
+}
 
-export const WithdrawnInPeriod = Template.bind({})
-WithdrawnInPeriod.args = { currentEpochValue: 160, endEpochValue: 180, withdrawEpochValue: 30 }
+export const End: Story = { args: { currentEpochValue: 180, endEpochValue: 180 } }
 
-export const WithdrawnOuterPeriod = Template.bind({})
-WithdrawnOuterPeriod.args = { currentEpochValue: 181, endEpochValue: 180, withdrawEpochValue: 30 }
+export const WithdrawnInPeriod: Story = { args: { currentEpochValue: 160, endEpochValue: 180, withdrawEpochValue: 30 } }
+
+export const WithdrawnOuterPeriod: Story = {
+  args: { currentEpochValue: 181, endEpochValue: 180, withdrawEpochValue: 30 },
+}
 
-export const CurrentLessThanEnd = Template.bind({})
-CurrentLessThanEnd.args = { currentEpochValue: 181, endEpochValue: 180 }
+export const CurrentLessThanEnd: Story = { args: { currentEpochValue: 181, endEpochValue: 180 } }
 
-export const CurrentLessThanBegin = Template.bind({})
-CurrentLessThanBegin.args = { currentEpochValue: 0, endEpochValue: 181 }
+export const CurrentLessThanBegin: Story = { args: { currentEpochValue: 0, endEpochValue: 181 } }
 
-export const Pending = Template.bind({})
-Pending.args = { pending: true, currentEpochValue: 0, endEpochValue: 0 }
+export const Pending: Story = { args: { pending: true, currentEpochValue: 0, endEpochValue: 0 } }
diff --git a/packages/neuron-ui/src/stories/CopyZone.stories.tsx b/packages/neuron-ui/src/stories/CopyZone.stories.tsx
index c5dfb92bb5..e8002c8864 100644
--- a/packages/neuron-ui/src/stories/CopyZone.stories.tsx
+++ b/packages/neuron-ui/src/stories/CopyZone.stories.tsx
@@ -1,19 +1,28 @@
 import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import CopyZone from 'widgets/CopyZone'
 
-const stories = storiesOf('Copy Zone', module)
+const meta: Meta<typeof CopyZone> = {
+  component: CopyZone,
+}
 
-stories.add('Basic', () => {
-  return (
-    <CopyZone
-      content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-      style={{ maxWidth: '300px' }}
-    >
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </CopyZone>
-  )
-})
+export default meta
+
+type Story = StoryObj<typeof CopyZone>
+
+export const Default: Story = {
+  args: {
+    content:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    style: { maxWidth: '500px' },
+    children: (
+      <>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </>
+    ),
+  },
+}
diff --git a/packages/neuron-ui/src/stories/CustomizedAsset.stories.tsx b/packages/neuron-ui/src/stories/CustomizedAsset.stories.tsx
index d9251e7bff..25d1212839 100644
--- a/packages/neuron-ui/src/stories/CustomizedAsset.stories.tsx
+++ b/packages/neuron-ui/src/stories/CustomizedAsset.stories.tsx
@@ -1,13 +1,12 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import CustomizedAsset from 'components/CustomizedAsset'
 
-export default {
-  title: 'Customized Asset',
+const meta: Meta<typeof CustomizedAsset> = {
   component: CustomizedAsset,
 }
+export default meta
 
-const Template: ComponentStory<typeof CustomizedAsset> = (props: any) => <CustomizedAsset {...props} />
+type Story = StoryObj<typeof CustomizedAsset>
 
 const baseProps = {
   tokenId: 'token id',
@@ -23,14 +22,17 @@ const baseProps = {
   isOnline: false,
 }
 
-export const ckb = Template.bind({})
-ckb.args = { type: 'ckb', ...baseProps }
-ckb.storyName = 'type = ckb'
+export const ckb: Story = {
+  args: { type: 'ckb', ...baseProps },
+  name: 'type = ckb',
+}
 
-export const sudt = Template.bind({})
-sudt.args = { type: 'sudt', ...baseProps }
-sudt.storyName = 'type = sudt'
+export const sudt: Story = {
+  args: { type: 'sudt', ...baseProps },
+  name: 'type = sudt',
+}
 
-export const unknown = Template.bind({})
-unknown.args = { type: 'unknown', ...baseProps }
-unknown.storyName = 'type = unknown'
+export const unknown: Story = {
+  args: { type: 'unknown', ...baseProps },
+  name: 'type = unknown',
+}
diff --git a/packages/neuron-ui/src/stories/DatetimePickerDialog.stories.tsx b/packages/neuron-ui/src/stories/DatetimePickerDialog.stories.tsx
index adcb978936..71eb34fda2 100644
--- a/packages/neuron-ui/src/stories/DatetimePickerDialog.stories.tsx
+++ b/packages/neuron-ui/src/stories/DatetimePickerDialog.stories.tsx
@@ -1,14 +1,19 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import DatetimePickerDialog from 'widgets/DatetimePickerDialog'
 
-const stories = storiesOf('Datetime Picker', module)
+const meta: Meta<typeof DatetimePickerDialog> = {
+  component: DatetimePickerDialog,
+}
 
-stories.add('Basic Datetime Picker', () => (
-  <DatetimePickerDialog
-    show
-    notice="According to the actual running block height, there may have some time variances in locktime."
-    onConfirm={console.info}
-    onCancel={() => {}}
-  />
-))
+export default meta
+
+type Story = StoryObj<typeof DatetimePickerDialog>
+
+export const Default: Story = {
+  args: {
+    show: false,
+    notice: 'According to the actual running block height, there may have some time variances in locktime.',
+    onConfirm: console.info,
+    onCancel: () => {},
+  },
+}
diff --git a/packages/neuron-ui/src/stories/DepositDialog.stories.tsx b/packages/neuron-ui/src/stories/DepositDialog.stories.tsx
index 2e5261404e..1347498b2e 100644
--- a/packages/neuron-ui/src/stories/DepositDialog.stories.tsx
+++ b/packages/neuron-ui/src/stories/DepositDialog.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import DepositDialog from 'components/DepositDialog'
 
@@ -20,7 +19,14 @@ const props = {
   onIsBalanceReservedChange: action('on is balance reserved change'),
 }
 
-const stories = storiesOf('Deposit Dialog', module)
-stories.add('Basic', () => {
-  return <DepositDialog {...props} />
-})
+const meta: Meta<typeof DepositDialog> = {
+  component: DepositDialog,
+}
+
+export default meta
+
+type Story = StoryObj<typeof DepositDialog>
+
+export const Default: Story = {
+  args: props,
+}
diff --git a/packages/neuron-ui/src/stories/Dialog.stories.tsx b/packages/neuron-ui/src/stories/Dialog.stories.tsx
index 4be6d83019..eadba1c1d1 100644
--- a/packages/neuron-ui/src/stories/Dialog.stories.tsx
+++ b/packages/neuron-ui/src/stories/Dialog.stories.tsx
@@ -1,25 +1,34 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Dialog from 'widgets/Dialog'
 
-const stories = storiesOf('Dialog', module)
+const meta: Meta<typeof Dialog> = {
+  component: Dialog,
+}
 
-stories.add('Basic Dialog', () => (
-  <Dialog show title="title" subTitle="subTitle" onConfirm={console.info} onCancel={() => {}}>
-    是否开始下载
-  </Dialog>
-))
+export default meta
 
-stories.add('Confirm Dialog', () => (
-  <Dialog
-    show
-    title="dialog title"
-    subTitle="dialog subTitle"
-    showHeader={false}
-    showCancel={false}
-    onConfirm={console.info}
-    onCancel={() => {}}
-  >
-    当前已是最新版本
-  </Dialog>
-))
+type Story = StoryObj<typeof Dialog>
+
+export const Default: Story = {
+  args: {
+    show: true,
+    title: 'title',
+    subTitle: 'subTitle',
+    onConfirm: console.info,
+    onCancel: () => {},
+    children: '是否开始下载',
+  },
+}
+
+export const Confirm: Story = {
+  args: {
+    show: true,
+    title: 'dialog title',
+    subTitle: 'dialog subTitle',
+    showHeader: false,
+    showCancel: false,
+    onConfirm: console.info,
+    onCancel: () => {},
+    children: '当前已是最新版本',
+  },
+}
diff --git a/packages/neuron-ui/src/stories/ExperimentalRibbon.stories.tsx b/packages/neuron-ui/src/stories/ExperimentalRibbon.stories.tsx
index 62af6a131f..331877151f 100644
--- a/packages/neuron-ui/src/stories/ExperimentalRibbon.stories.tsx
+++ b/packages/neuron-ui/src/stories/ExperimentalRibbon.stories.tsx
@@ -1,9 +1,16 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import ExperimentalRibbon from 'widgets/ExperimentalRibbon'
 
-const stories = storiesOf('Experimental Ribbon', module)
+const meta: Meta<typeof ExperimentalRibbon> = {
+  component: ExperimentalRibbon,
+}
 
-stories.add('Basic', () => {
-  return <ExperimentalRibbon tag="story" />
-})
+export default meta
+
+type Story = StoryObj<typeof ExperimentalRibbon>
+
+export const Default: Story = {
+  args: {
+    tag: 'story',
+  },
+}
diff --git a/packages/neuron-ui/src/stories/GeneralSetting.stories.tsx b/packages/neuron-ui/src/stories/GeneralSetting.stories.tsx
index 07117e3c9f..5b6da49df7 100644
--- a/packages/neuron-ui/src/stories/GeneralSetting.stories.tsx
+++ b/packages/neuron-ui/src/stories/GeneralSetting.stories.tsx
@@ -1,47 +1,55 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import GeneralSetting from 'components/GeneralSetting'
+import { withRouter } from 'storybook-addon-react-router-v6'
 import { initStates } from 'states'
 
-export default {
-  title: 'GeneralSettings',
+const meta: Meta<typeof GeneralSetting> = {
   component: GeneralSetting,
+  decorators: [withRouter()],
 }
 
-const Template: ComponentStory<typeof GeneralSetting> = (props: any) => <GeneralSetting {...props} />
+export default meta
 
-export const Normal = Template.bind({})
-Normal.args = {
-  updater: initStates.updater,
+type Story = StoryObj<typeof GeneralSetting>
+
+export const Default: Story = {
+  args: {
+    updater: initStates.updater,
+  },
 }
 
-export const Checking = Template.bind({})
-Checking.args = {
-  updater: {
-    ...initStates.updater,
-    checking: true,
+export const Checking: Story = {
+  args: {
+    updater: {
+      ...initStates.updater,
+      checking: true,
+    },
   },
 }
 
-export const HasUpdater = Template.bind({})
-HasUpdater.args = {
-  updater: {
-    ...initStates.updater,
-    version: '0.110.1',
-    releaseNotes: 'release 0.110.1',
+export const HasUpdater: Story = {
+  args: {
+    updater: {
+      ...initStates.updater,
+      releaseDate: '2023-05-31T13:15:58.827Z',
+      version: '0.110.1',
+      releaseNotes: 'release 0.110.1',
+    },
   },
 }
 
-export const DownloadUpdate = Template.bind({})
-DownloadUpdate.args = {
-  updater: {
-    checking: false,
-    isUpdated: false,
-    downloadProgress: 0.1,
-    progressInfo: null,
-    version: '0.110.1',
-    releaseDate: '2023-05-31T13:15:58.827Z',
-    releaseNotes: 'release 0.110.1',
-    errorMsg: '',
+export const DownloadUpdate: Story = {
+  args: {
+    updater: {
+      ...initStates.updater,
+      checking: false,
+      isUpdated: false,
+      downloadProgress: 0.1,
+      progressInfo: null,
+      version: '0.110.1',
+      releaseDate: '2023-05-31T13:15:58.827Z',
+      releaseNotes: 'release 0.110.1',
+      errorMsg: '',
+    },
   },
 }
diff --git a/packages/neuron-ui/src/stories/GlobalDialog.stories.tsx b/packages/neuron-ui/src/stories/GlobalDialog.stories.tsx
index 862d0580bf..073d88f741 100644
--- a/packages/neuron-ui/src/stories/GlobalDialog.stories.tsx
+++ b/packages/neuron-ui/src/stories/GlobalDialog.stories.tsx
@@ -1,16 +1,34 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import GlobalDialog from 'widgets/GlobalDialog'
 
-const stories = storiesOf('Global Dialog', module)
+const meta: Meta<typeof GlobalDialog> = {
+  component: GlobalDialog,
+  args: {
+    onDismiss: action('Dismiss'),
+    onBackUp: action('onBackUp'),
+    onOk: action('onOk'),
+  },
+}
 
-const types: State.GlobalDialogType[] = ['unlock-success', 'rebuild-sync', null]
+export default meta
 
-types.forEach(type => {
-  stories.add(type || 'Null', () => {
-    return (
-      <GlobalDialog type={type} onDismiss={action('Dismiss')} onBackUp={action('onBackUp')} onOk={action('onOk')} />
-    )
-  })
-})
+type Story = StoryObj<typeof GlobalDialog>
+
+export const Default: Story = {
+  args: {
+    type: null,
+  },
+}
+
+export const UnlockSuccess: Story = {
+  args: {
+    type: 'unlock-success',
+  },
+}
+
+export const RebuildSync: Story = {
+  args: {
+    type: 'rebuild-sync',
+  },
+}
diff --git a/packages/neuron-ui/src/stories/History.stories.tsx b/packages/neuron-ui/src/stories/History.stories.tsx
index c1984ad6c9..6a21db619f 100644
--- a/packages/neuron-ui/src/stories/History.stories.tsx
+++ b/packages/neuron-ui/src/stories/History.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import History from 'components/History'
 import { initStates } from 'states'
@@ -93,8 +92,7 @@ const states: { [title: string]: any } = {
   },
 }
 
-export default {
-  title: 'History',
+const meta: Meta<typeof History> = {
   component: History,
   decorators: [withRouter],
   argTypes: {
@@ -102,39 +100,50 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof History> = () => <History />
+export default meta
 
-export const HasNotTransactions = Template.bind({})
-HasNotTransactions.args = {
-  chain: { ...initStates.chain, transactions: states['Has not transactions'].chain.transactions },
-}
+type Story = StoryObj<typeof History>
 
-export const OneItem = Template.bind({})
-OneItem.args = { chain: { ...initStates.chain, transactions: states['1 item and PageNo.1'].chain.transactions } }
-OneItem.storyName = '1 item and PageNo.1'
+export const HasNotTransactions: Story = {
+  args: {
+    chain: {
+      ...initStates.chain,
+      transactions: states['Has not transactions'].chain.transactions,
+    },
+  },
+}
 
-export const MoreItem = Template.bind({})
-MoreItem.args = { chain: { ...initStates.chain, transactions: states['15 items and PageNo.1'].chain.transactions } }
-MoreItem.storyName = '15 items and PageNo.1'
+export const OneItem: Story = {
+  args: { chain: { ...initStates.chain, transactions: states['1 item and PageNo.1'].chain.transactions } },
+  name: '1 item and PageNo.1',
+}
 
-export const MorePage = Template.bind({})
-MorePage.args = { chain: { ...initStates.chain, transactions: states['16 items and PageNo.2'].chain.transactions } }
-MorePage.storyName = '16 items and PageNo.2'
+export const MoreItem: Story = {
+  args: { chain: { ...initStates.chain, transactions: states['15 items and PageNo.1'].chain.transactions } },
+  name: '15 items and PageNo.1',
+}
 
-export const MoreItemOnPage = Template.bind({})
-MoreItemOnPage.args = {
-  chain: { ...initStates.chain, transactions: states['200 items and PageNo.1'].chain.transactions },
+export const MorePage: Story = {
+  args: { chain: { ...initStates.chain, transactions: states['16 items and PageNo.2'].chain.transactions } },
+  name: '16 items and PageNo.2',
+}
+export const MoreItemOnPage: Story = {
+  args: {
+    chain: { ...initStates.chain, transactions: states['200 items and PageNo.1'].chain.transactions },
+  },
+  name: '200 items and PageNo.1',
 }
-MoreItemOnPage.storyName = '200 items and PageNo.1'
 
-export const MoreItemOnNextPage = Template.bind({})
-MoreItemOnNextPage.args = {
-  chain: { ...initStates.chain, transactions: states['200 items and PageNo.2'].chain.transactions },
+export const MoreItemOnNextPage: Story = {
+  args: {
+    chain: { ...initStates.chain, transactions: states['200 items and PageNo.2'].chain.transactions },
+  },
+  name: '200 items and PageNo.2',
 }
-MoreItemOnNextPage.storyName = '200 items and PageNo.2'
 
-export const MoreItemOnPage14 = Template.bind({})
-MoreItemOnPage14.args = {
-  chain: { ...initStates.chain, transactions: states['200 items and PageNo.14'].chain.transactions },
+export const MoreItemOnPage14: Story = {
+  args: {
+    chain: { ...initStates.chain, transactions: states['200 items and PageNo.14'].chain.transactions },
+  },
+  name: '200 items and PageNo.14',
 }
-MoreItemOnPage14.storyName = '200 items and PageNo.14'
diff --git a/packages/neuron-ui/src/stories/Navbar.stories.tsx b/packages/neuron-ui/src/stories/Navbar.stories.tsx
index 60e2733993..f4d5b24c27 100644
--- a/packages/neuron-ui/src/stories/Navbar.stories.tsx
+++ b/packages/neuron-ui/src/stories/Navbar.stories.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Navbar from 'containers/Navbar'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import { initStates } from 'states'
 
 const wallets: State.WalletIdentity[] = [{ id: 'wallet id', name: 'wallet name' }]
 
-export default {
-  title: 'Navbar',
+const meta: Meta<typeof Navbar> = {
   component: Navbar,
   decorators: [withRouter],
   argTypes: {
@@ -16,8 +14,13 @@ export default {
   },
 }
 
-export const Basic: ComponentStory<typeof Navbar> = () => <Navbar />
-Basic.args = {
-  wallet: { ...initStates.wallet, id: 'wallet id', name: '中文钱包的名字最多可以达到二十个中文字符' },
-  settings: { ...initStates.settings, wallets },
+export default meta
+
+type Story = StoryObj<typeof Navbar>
+
+export const Default: Story = {
+  args: {
+    wallet: { ...initStates.wallet, id: 'wallet id', name: '中文钱包的名字最多可以达到二十个中文字符' },
+    settings: { ...initStates.settings, wallets },
+  },
 }
diff --git a/packages/neuron-ui/src/stories/NervosDAO.stories.tsx b/packages/neuron-ui/src/stories/NervosDAO.stories.tsx
index babd7da869..9959f84ff3 100644
--- a/packages/neuron-ui/src/stories/NervosDAO.stories.tsx
+++ b/packages/neuron-ui/src/stories/NervosDAO.stories.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import NervosDAO from 'components/NervosDAO'
+import { withRouter } from 'storybook-addon-react-router-v6'
 import { initStates } from 'states'
 import transactions from './data/transactions'
 import addresses from './data/addresses'
@@ -103,8 +103,7 @@ const stateTemplate = {
   },
 }
 
-export default {
-  title: 'Nervos DAO',
+const meta: Meta<typeof NervosDAO> = {
   component: NervosDAO,
   argTypes: {
     app: { control: 'object', isGlobal: true },
@@ -113,17 +112,22 @@ export default {
     settings: { control: 'object', isGlobal: true },
     nervosDAO: { control: 'object', isGlobal: true },
   },
+  decorators: [withRouter],
 }
 
-const Template: ComponentStory<typeof NervosDAO> = () => <NervosDAO />
+export default meta
 
-export const HasNoReceipts = Template.bind({})
-HasNoReceipts.args = {
-  ...stateTemplate,
-  nervosDAO: {
-    records: [],
+type Story = StoryObj<typeof NervosDAO>
+
+export const HasNoReceipts: Story = {
+  args: {
+    ...stateTemplate,
+    nervosDAO: {
+      records: [],
+    },
   },
 }
 
-export const HasReceipts = Template.bind({})
-HasReceipts.args = stateTemplate
+export const HasReceipts: Story = {
+  args: stateTemplate,
+}
diff --git a/packages/neuron-ui/src/stories/NervosDAORecord.stories.tsx b/packages/neuron-ui/src/stories/NervosDAORecord.stories.tsx
index 94053d1802..b817918fb0 100644
--- a/packages/neuron-ui/src/stories/NervosDAORecord.stories.tsx
+++ b/packages/neuron-ui/src/stories/NervosDAORecord.stories.tsx
@@ -1,12 +1,14 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
 import NervosDAORecord, { DAORecordProps } from 'components/NervosDAORecord'
 
-export default {
-  title: 'Nervos DAO Record',
+const meta: Meta<typeof NervosDAORecord> = {
   component: NervosDAORecord,
+  decorators: [withRouter],
 }
 
+export default meta
+
 const basicProps: Omit<DAORecordProps, 'onToggle'> = {
   capacity: '10200000000',
   lock: {
@@ -42,156 +44,167 @@ const basicProps: Omit<DAORecordProps, 'onToggle'> = {
   blockNumber: '7712',
 }
 
-const Template: ComponentStory<typeof NervosDAORecord> = props => {
-  return <NervosDAORecord {...props} />
-}
-
-export const Depositing = Template.bind({})
-Depositing.args = {
-  ...basicProps,
-  blockNumber: undefined as any,
-  status: 'sent',
-}
-
-export const ImmatureForWithdraw = Template.bind({})
-ImmatureForWithdraw.args = {
-  ...basicProps,
-  depositEpoch: '0xa000100030a', // 778.1
-  currentEpoch: '0xa000000030e', // 782
-}
-
-export const Deposited4Epochs = Template.bind({})
-Deposited4Epochs.args = {
-  ...basicProps,
-  depositEpoch: '0xa000000030b', // 779
-  currentEpoch: '0xa000000030f', // 783
-}
-
-export const Deposited4Point1Epochs = Template.bind({})
-Deposited4Point1Epochs.args = {
-  ...basicProps,
-  depositEpoch: '0xa000900030a', // 778.9
-  currentEpoch: '0xa000000030f', // 783
-}
-
-export const DepositedLess138Epochs = Template.bind({})
-DepositedLess138Epochs.args = {
-  ...basicProps,
-  depositEpoch: '0xa0001000285', // 645.1
-  currentEpoch: '0xa000000030f', // 783
-}
-DepositedLess138Epochs.storyName = 'Deposited 137.9 epochs'
+type Story = StoryObj<typeof NervosDAORecord>
 
-export const Deposited138Epochs = Template.bind({})
-Deposited138Epochs.args = {
-  ...basicProps,
-  depositEpoch: '0xa0000000285', // 645
-  currentEpoch: '0xa000000030f', // 783
+export const Depositing: Story = {
+  args: {
+    ...basicProps,
+    blockNumber: undefined as any,
+    status: 'sent',
+  },
 }
-Deposited138Epochs.storyName = 'Deposited 138 epochs'
 
-export const DepositedBigThan138Epochs = Template.bind({})
-DepositedBigThan138Epochs.args = {
-  ...basicProps,
-  depositEpoch: '0xa0009000284', // 644.9
-  currentEpoch: '0xa000000030f', // 783
-}
-DepositedBigThan138Epochs.storyName = 'Deposited 138.1 epochs'
-
-export const Withdrawing = Template.bind({})
-Withdrawing.args = {
-  ...basicProps,
-  depositInfo: {
-    txHash: 'deposit tx hash',
-    timestamp: new Date('2020-02-02').getTime().toString(),
-  },
-  withdrawInfo: {
-    txHash: 'withdraw tx hash',
-    timestamp: new Date('2020-02-03').getTime().toString(),
-  },
-  depositEpoch: '0xa000900030a', // 778.9
-  currentEpoch: '0xa000000030f', // 783
-  status: 'sent',
+export const ImmatureForWithdraw: Story = {
+  args: {
+    ...basicProps,
+    depositEpoch: '0xa000100030a', // 778.1
+    currentEpoch: '0xa000000030e', // 782
+  },
 }
 
-export const Withdrawn5Epochs = Template.bind({})
-Withdrawn5Epochs.args = {
-  ...basicProps,
-  depositInfo: {
-    txHash: 'deposit tx hash',
-    timestamp: new Date('2020-02-02').getTime().toString(),
+export const Deposited4Epochs: Story = {
+  args: {
+    ...basicProps,
+    depositEpoch: '0xa000000030b', // 779
+    currentEpoch: '0xa000000030f', // 783
   },
-  withdrawInfo: {
-    txHash: 'withdraw tx hash',
-    timestamp: new Date('2020-02-03').getTime().toString(),
-  },
-  depositEpoch: '0xa0000000300', // 768
-  currentEpoch: '0xa000000030f', // 783
 }
 
-export const ImmatureForUnlock = Template.bind({})
-ImmatureForUnlock.args = {
-  ...basicProps,
-  depositInfo: {
-    txHash: 'deposit tx hash',
-    timestamp: new Date('2020-02-02').getTime().toString(),
-  },
-  withdrawInfo: {
-    txHash: 'withdraw tx hash',
-    timestamp: new Date('2020-02-03').getTime().toString(),
+export const Deposited4Point1Epochs: Story = {
+  args: {
+    ...basicProps,
+    depositEpoch: '0xa000900030a', // 778.9
+    currentEpoch: '0xa000000030f', // 783
   },
-  depositEpoch: '0xa0000000300', // 768
-  currentEpoch: '0xa00010003b4', // 948.1
 }
 
-export const Unlockable = Template.bind({})
-Unlockable.args = {
-  ...basicProps,
-  depositInfo: {
-    txHash: 'deposit tx hash',
-    timestamp: new Date('2020-02-02').getTime().toString(),
-  },
-  withdrawInfo: {
-    txHash: 'withdraw tx hash',
-    timestamp: new Date('2020-02-03').getTime().toString(),
+export const DepositedLess138Epochs: Story = {
+  args: {
+    ...basicProps,
+    depositEpoch: '0xa0001000285', // 645.1
+    currentEpoch: '0xa000000030f', // 783
   },
-  depositEpoch: '0xa000900030a', // 778.9
-  currentEpoch: '0xa0009000476', // 1142.9
+  name: 'Deposited 137.9 epochs',
 }
 
-export const Unlocking = Template.bind({})
-Unlocking.args = {
-  ...basicProps,
-  depositInfo: {
-    txHash: 'deposit tx hash',
-    timestamp: new Date('2020-02-02').toString().toString(),
-  },
-  withdrawInfo: {
-    txHash: 'withdraw tx hash',
-    timestamp: new Date('2020-02-03').getTime().toString(),
-  },
-  unlockInfo: {
-    txHash: 'unlock tx hash',
-    timestamp: new Date().getTime().toString(),
+export const Deposited138Epochs: Story = {
+  args: {
+    ...basicProps,
+    depositEpoch: '0xa0000000285', // 645
+    currentEpoch: '0xa000000030f', // 783
   },
-  depositEpoch: '0xa000900030a', // 778.9
-  currentEpoch: '0xa0009000476', // 1142.9
-  status: 'pending',
+  name: 'Deposited 138 epochs',
 }
 
-export const Unfolded = Template.bind({})
-Unfolded.args = {
-  ...basicProps,
-  depositOutPoint: undefined,
-  depositEpoch: '0xa0009000284', // 644.9
-  currentEpoch: '0xa000000030f', // 783
-  depositTimestamp: (Date.now() - 25 * 3600000).toString(),
-  unlockInfo: {
-    timestamp: Date.now().toString(),
-    txHash: 'unlock tx hash',
-  },
-  withdrawInfo: {
-    timestamp: (Date.now() - 24 * 3600_000).toString(),
-    txHash: 'withdraw tx hash',
+export const DepositedBigThan138Epochs: Story = {
+  args: {
+    ...basicProps,
+    depositEpoch: '0xa0009000284', // 644.9
+    currentEpoch: '0xa000000030f', // 783
+  },
+  name: 'Deposited 138.1 epochs',
+}
+
+export const Withdrawing: Story = {
+  args: {
+    ...basicProps,
+    depositInfo: {
+      txHash: 'deposit tx hash',
+      timestamp: new Date('2020-02-02').getTime().toString(),
+    },
+    withdrawInfo: {
+      txHash: 'withdraw tx hash',
+      timestamp: new Date('2020-02-03').getTime().toString(),
+    },
+    depositEpoch: '0xa000900030a', // 778.9
+    currentEpoch: '0xa000000030f', // 783
+    status: 'sent',
+  },
+}
+
+export const Withdrawn5Epochs: Story = {
+  args: {
+    ...basicProps,
+    depositInfo: {
+      txHash: 'deposit tx hash',
+      timestamp: new Date('2020-02-02').getTime().toString(),
+    },
+    withdrawInfo: {
+      txHash: 'withdraw tx hash',
+      timestamp: new Date('2020-02-03').getTime().toString(),
+    },
+    depositEpoch: '0xa0000000300', // 768
+    currentEpoch: '0xa000000030f', // 783
+  },
+}
+
+export const ImmatureForUnlock: Story = {
+  args: {
+    ...basicProps,
+    depositInfo: {
+      txHash: 'deposit tx hash',
+      timestamp: new Date('2020-02-02').getTime().toString(),
+    },
+    withdrawInfo: {
+      txHash: 'withdraw tx hash',
+      timestamp: new Date('2020-02-03').getTime().toString(),
+    },
+    depositEpoch: '0xa0000000300', // 768
+    currentEpoch: '0xa00010003b4', // 948.1
+  },
+}
+
+export const Unlockable: Story = {
+  args: {
+    ...basicProps,
+    depositInfo: {
+      txHash: 'deposit tx hash',
+      timestamp: new Date('2020-02-02').getTime().toString(),
+    },
+    withdrawInfo: {
+      txHash: 'withdraw tx hash',
+      timestamp: new Date('2020-02-03').getTime().toString(),
+    },
+    depositEpoch: '0xa000900030a', // 778.9
+    currentEpoch: '0xa0009000476', // 1142.9
+  },
+}
+
+export const Unlocking: Story = {
+  args: {
+    ...basicProps,
+    depositInfo: {
+      txHash: 'deposit tx hash',
+      timestamp: new Date('2020-02-02').getTime().toString(),
+    },
+    withdrawInfo: {
+      txHash: 'withdraw tx hash',
+      timestamp: new Date('2020-02-03').getTime().toString(),
+    },
+    unlockInfo: {
+      txHash: 'unlock tx hash',
+      timestamp: new Date().getTime().toString(),
+    },
+    depositEpoch: '0xa000900030a', // 778.9
+    currentEpoch: '0xa0009000476', // 1142.9
+    status: 'pending',
+  },
+}
+
+export const Unfolded: Story = {
+  args: {
+    ...basicProps,
+    depositOutPoint: undefined,
+    depositEpoch: '0xa0009000284', // 644.9
+    currentEpoch: '0xa000000030f', // 783
+    depositTimestamp: (Date.now() - 25 * 3600000).toString(),
+    unlockInfo: {
+      timestamp: Date.now().toString(),
+      txHash: 'unlock tx hash',
+    },
+    withdrawInfo: {
+      timestamp: (Date.now() - 24 * 3600_000).toString(),
+      txHash: 'withdraw tx hash',
+    },
   },
 }
diff --git a/packages/neuron-ui/src/stories/NetworkSetting.stories.tsx b/packages/neuron-ui/src/stories/NetworkSetting.stories.tsx
index 327f205142..eb5e5bcb0f 100644
--- a/packages/neuron-ui/src/stories/NetworkSetting.stories.tsx
+++ b/packages/neuron-ui/src/stories/NetworkSetting.stories.tsx
@@ -1,12 +1,11 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import NetworkSetting from 'components/NetworkSetting'
 import { initStates } from 'states'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
 const states: { [title: string]: State.Network[] } = {
-  'Empty List': [],
-  'Content List': [
+  EmptyList: [],
+  ContentList: [
     {
       id: 'Mainnet',
       name: 'Mainnet',
@@ -34,14 +33,26 @@ const states: { [title: string]: State.Network[] } = {
   ],
 }
 
-const stories = storiesOf('NetworkSetting', module).addDecorator(withRouter())
+const meta: Meta<typeof NetworkSetting> = {
+  component: NetworkSetting,
+  decorators: [withRouter],
+}
+
+export default meta
 
-Object.entries(states).forEach(([title, networks]) => {
-  stories.add(title, () => (
-    <NetworkSetting
-      {...initStates}
-      chain={{ ...initStates.chain, networkID: networks.length ? networks[0].id : '' }}
-      settings={{ ...initStates.settings, networks }}
-    />
-  ))
-})
+type Story = StoryObj<typeof NetworkSetting>
+
+function getArgs(networks: State.Network[] = []) {
+  return {
+    ...initStates,
+    chain: { ...initStates.chain, networkID: networks.length ? networks[0].id : '' },
+    settings: { ...initStates.settings, networks },
+  }
+}
+export const EmptyList: Story = {
+  args: getArgs(states.EmptyList),
+}
+
+export const ContentList: Story = {
+  args: getArgs(states.ContentList),
+}
diff --git a/packages/neuron-ui/src/stories/NetworkStatus.stories.tsx b/packages/neuron-ui/src/stories/NetworkStatus.stories.tsx
index 0477336375..7c40df09db 100644
--- a/packages/neuron-ui/src/stories/NetworkStatus.stories.tsx
+++ b/packages/neuron-ui/src/stories/NetworkStatus.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import NetworkStatus, { NetworkStatusProps } from 'components/NetworkStatus'
 
 const defaultProps: Omit<NetworkStatusProps, 'syncPercents' | 'syncBlockNumbers'> = {
@@ -16,8 +15,7 @@ const defaultProps: Omit<NetworkStatusProps, 'syncPercents' | 'syncBlockNumbers'
   onOpenValidTarget: () => {},
 }
 
-export default {
-  title: 'Network Status',
+const meta: Meta<typeof NetworkStatus> = {
   component: NetworkStatus,
   parameters: {
     layout: 'padded',
@@ -32,56 +30,65 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof NetworkStatus> = (props: any) => <NetworkStatus {...props} />
+export default meta
 
-export const Online = Template.bind({})
-Online.args = {
-  ...defaultProps,
-  syncPercents: 1,
-  syncBlockNumbers: '1/200',
+type Story = StoryObj<typeof NetworkStatus>
+
+export const Online: Story = {
+  args: {
+    ...defaultProps,
+    syncPercents: 1,
+    syncBlockNumbers: '1/200',
+  },
 }
 
-export const Offline = Template.bind({})
-Offline.args = {
-  ...defaultProps,
-  syncPercents: 1,
-  syncBlockNumbers: '1/100',
+export const Offline: Story = {
+  args: {
+    ...defaultProps,
+    syncPercents: 1,
+    syncBlockNumbers: '1/100',
+  },
 }
 
-export const isLookingValidTarget = Template.bind({})
-isLookingValidTarget.args = {
-  ...defaultProps,
-  syncPercents: 1,
-  syncBlockNumbers: '1/100',
-  isLookingValidTarget: true,
+export const isLookingValidTarget: Story = {
+  args: {
+    ...defaultProps,
+    syncPercents: 1,
+    syncBlockNumbers: '1/100',
+    isLookingValidTarget: true,
+  },
 }
 
-export const SyncedFinishedAndNotip = Template.bind({})
-SyncedFinishedAndNotip.args = {
-  ...defaultProps,
-  syncPercents: 100,
-  syncBlockNumbers: '100/0',
+export const SyncedFinishedAndNotip: Story = {
+  args: {
+    ...defaultProps,
+    syncPercents: 100,
+    syncBlockNumbers: '100/0',
+  },
+  storyName: '100 synced and 0 tip',
 }
-SyncedFinishedAndNotip.storyName = '100 synced and 0 tip'
 
-export const SyncedFinishedAndEmptytip = Template.bind({})
-SyncedFinishedAndEmptytip.args = {
-  ...defaultProps,
-  syncPercents: 100,
-  syncBlockNumbers: '-/100',
+export const SyncedFinishedAndEmptytip: Story = {
+  args: {
+    ...defaultProps,
+    syncPercents: 100,
+    syncBlockNumbers: '-/100',
+  },
+  storyName: '100 synced and empty tip',
 }
-SyncedFinishedAndEmptytip.storyName = '100 synced and empty tip'
 
-export const NotSycnedAnd100Tip = Template.bind({})
-NotSycnedAnd100Tip.args = {
-  ...defaultProps,
-  syncPercents: 0,
-  syncBlockNumbers: '-/100',
+export const NotSycnedAnd100Tip: Story = {
+  args: {
+    ...defaultProps,
+    syncPercents: 0,
+    syncBlockNumbers: '-/100',
+  },
 }
 
-export const NotSyncedAndEmptyTip = Template.bind({})
-NotSyncedAndEmptyTip.args = {
-  ...defaultProps,
-  syncPercents: 0,
-  syncBlockNumbers: '-/-',
+export const NotSyncedAndEmptyTip: Story = {
+  args: {
+    ...defaultProps,
+    syncPercents: 0,
+    syncBlockNumbers: '-/-',
+  },
 }
diff --git a/packages/neuron-ui/src/stories/Overview.stories.tsx b/packages/neuron-ui/src/stories/Overview.stories.tsx
index 27877f07a1..f530bbfdd8 100644
--- a/packages/neuron-ui/src/stories/Overview.stories.tsx
+++ b/packages/neuron-ui/src/stories/Overview.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Overview from 'components/Overview'
 import { initStates } from 'states'
 import { withRouter } from 'storybook-addon-react-router-v6'
@@ -12,8 +11,7 @@ const chain = {
   tipBlockNumber: '123',
 }
 
-export default {
-  title: 'Overview',
+const meta: Meta<typeof Overview> = {
   component: Overview,
   decorators: [withRouter],
   argTypes: {
@@ -21,27 +19,32 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof Overview> = () => <Overview />
+export default meta
 
-export const HasNoActivities = Template.bind({})
-HasNoActivities.args = {
-  chain: { ...chain, transactions: { ...chain.transactions, items: [] } },
+type Story = StoryObj<typeof Overview>
+
+export const HasNoActivities: Story = {
+  args: {
+    chain: { ...chain, transactions: { ...chain.transactions, items: [] } },
+  },
 }
 
-export const Has10Activities = Template.bind({})
-Has10Activities.args = {
-  chain: {
-    ...chain,
-    transactions: { ...chain.transactions, items: chain.transactions.items.slice(0, 10) },
+export const Has10Activities: Story = {
+  args: {
+    chain: {
+      ...chain,
+      transactions: { ...chain.transactions, items: chain.transactions.items.slice(0, 10) },
+    },
   },
 }
 
-export const HasOver10Activities = Template.bind({})
-HasOver10Activities.args = {
-  chain: {
-    ...initStates.chain,
-    networkID: 'testnet',
-    transactions: { ...initStates.chain.transactions, items: transactions[`Content List`] },
-    tipBlockNumber: '123',
+export const HasOver10Activities: Story = {
+  args: {
+    chain: {
+      ...initStates.chain,
+      networkID: 'testnet',
+      transactions: { ...initStates.chain.transactions, items: transactions[`Content List`] },
+      tipBlockNumber: '123',
+    },
   },
 }
diff --git a/packages/neuron-ui/src/stories/Pagination.stories.tsx b/packages/neuron-ui/src/stories/Pagination.stories.tsx
index d4f5f21fcf..a5944281f6 100644
--- a/packages/neuron-ui/src/stories/Pagination.stories.tsx
+++ b/packages/neuron-ui/src/stories/Pagination.stories.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import Pagination from 'widgets/Pagination'
 
-export default {
-  title: 'Pagination',
+const onChange = action('onclick')
+
+const meta: Meta<typeof Pagination> = {
   component: Pagination,
   argTypes: {
     onChange: {
@@ -15,39 +15,43 @@ export default {
   },
 }
 
-const onChange = action('onclick')
+export default meta
 
-const Template: ComponentStory<typeof Pagination> = (props: any) => <Pagination {...props} />
+type Story = StoryObj<typeof Pagination>
 
-export const OnlyOnePage = Template.bind({})
-OnlyOnePage.args = {
-  pageNo: 1,
-  count: 10,
-  pageSize: 15,
-  onChange,
+export const OnlyOnePage: Story = {
+  args: {
+    pageNo: 1,
+    count: 10,
+    pageSize: 15,
+    onChange,
+  },
+  storyName: '1 page',
 }
-OnlyOnePage.storyName = '1 page'
-
-export const AtTheFirstPage = Template.bind({})
-AtTheFirstPage.args = {
-  pageNo: 1,
-  count: 100,
-  pageSize: 15,
-  onChange,
+
+export const AtTheFirstPage: Story = {
+  args: {
+    pageNo: 1,
+    count: 100,
+    pageSize: 15,
+    onChange,
+  },
 }
 
-export const AtTheLastPage = Template.bind({})
-AtTheLastPage.args = {
-  pageNo: 7,
-  count: 100,
-  pageSize: 15,
-  onChange,
+export const AtTheLastPage: Story = {
+  args: {
+    pageNo: 7,
+    count: 100,
+    pageSize: 15,
+    onChange,
+  },
 }
 
-export const MoreThan5Pages = Template.bind({})
-MoreThan5Pages.args = {
-  pageNo: 6,
-  count: 100,
-  pageSize: 15,
-  onChange,
+export const MoreThan5Pages: Story = {
+  args: {
+    pageNo: 6,
+    count: 100,
+    pageSize: 15,
+    onChange,
+  },
 }
diff --git a/packages/neuron-ui/src/stories/PasswordRequest.stories.tsx b/packages/neuron-ui/src/stories/PasswordRequest.stories.tsx
index ffa1658ffc..0b28b821f6 100644
--- a/packages/neuron-ui/src/stories/PasswordRequest.stories.tsx
+++ b/packages/neuron-ui/src/stories/PasswordRequest.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import PasswordRequest from 'components/PasswordRequest'
@@ -8,7 +8,7 @@ import { initStates, NeuronWalletContext } from 'states'
 const dispatch = action('Dispatch')
 
 const states: { [title: string]: State.AppWithNeuronWallet } = {
-  'Wallet not Found': {
+  WalletNotFound: {
     ...initStates,
     app: {
       ...initStates.app,
@@ -18,7 +18,7 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       },
     },
   },
-  'Empty Password of Delete Wallet': {
+  EmptyPasswordOfDeleteWallet: {
     ...initStates,
     settings: {
       ...initStates.settings,
@@ -32,7 +32,7 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       },
     },
   },
-  'Content Password of Delete Wallet': {
+  ContentPasswordOfDeleteWallet: {
     ...initStates,
     settings: {
       ...initStates.settings,
@@ -46,7 +46,7 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       },
     },
   },
-  'Empty Password of Backup Wallet': {
+  EmptyPasswordOfBackupWallet: {
     ...initStates,
     settings: {
       ...initStates.settings,
@@ -60,7 +60,7 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       },
     },
   },
-  'Content Password of Backup Wallet': {
+  ContentPasswordOfBackupWallet: {
     ...initStates,
     settings: {
       ...initStates.settings,
@@ -74,7 +74,7 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       },
     },
   },
-  'Empty Password of Unlock': {
+  EmptyPasswordOfUnlock: {
     ...initStates,
     settings: {
       ...initStates.settings,
@@ -88,7 +88,7 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       },
     },
   },
-  'Send Transaction': {
+  SendTransaction: {
     ...initStates,
     settings: {
       ...initStates.settings,
@@ -104,12 +104,46 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
   },
 }
 
-const stories = storiesOf('PasswordRequest', module).addDecorator(withRouter())
+const meta: Meta<State.AppWithNeuronWallet> = {
+  component: PasswordRequest,
+  decorators: [
+    withRouter(),
+    (Component, { args }) => (
+      <NeuronWalletContext.Provider value={{ state: args, dispatch }}>
+        <Component />
+      </NeuronWalletContext.Provider>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof PasswordRequest>
+
+export const WalletNotFound: Story = {
+  args: states.WalletNotFound,
+}
+
+export const EmptyPasswordOfDeleteWallet: Story = {
+  args: states.EmptyPasswordOfDeleteWallet,
+}
+
+export const ContentPasswordOfDeleteWallet: Story = {
+  args: states.ContentPasswordOfDeleteWallet,
+}
+
+export const EmptyPasswordOfBackupWallet: Story = {
+  args: states.EmptyPasswordOfBackupWallet,
+}
+
+export const ContentPasswordOfBackupWallet: Story = {
+  args: states.ContentPasswordOfBackupWallet,
+}
+
+export const EmptyPasswordOfUnlock: Story = {
+  args: states.EmptyPasswordOfUnlock,
+}
 
-Object.entries(states).forEach(([title, state]) => {
-  stories.add(title, () => (
-    <NeuronWalletContext.Provider value={{ state, dispatch }}>
-      <PasswordRequest />
-    </NeuronWalletContext.Provider>
-  ))
-})
+export const SendTransaction: Story = {
+  args: states.SendTransaction,
+}
diff --git a/packages/neuron-ui/src/stories/Receive.stories.tsx b/packages/neuron-ui/src/stories/Receive.stories.tsx
index 491b91b9bf..4bd1c05c1b 100644
--- a/packages/neuron-ui/src/stories/Receive.stories.tsx
+++ b/packages/neuron-ui/src/stories/Receive.stories.tsx
@@ -1,12 +1,10 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Receive from 'components/Receive'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import { initStates } from 'states'
 import addresses from './data/addresses'
 
-export default {
-  title: 'Receive',
+const meta: Meta<typeof Receive> = {
   component: Receive,
   decorators: [withRouter],
   argTypes: {
@@ -14,20 +12,24 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof Receive> = () => <Receive />
+export default meta
 
-export const HasNoAddresses = Template.bind({})
-HasNoAddresses.args = {
-  wallet: {
-    ...initStates.wallet,
-    addresses: addresses['Empty List'],
+type Story = StoryObj<typeof Receive>
+
+export const HasNoAddresses: Story = {
+  args: {
+    wallet: {
+      ...initStates.wallet,
+      addresses: addresses['Empty List'],
+    },
   },
 }
 
-export const HasAddresses = Template.bind({})
-HasAddresses.args = {
-  wallet: {
-    ...initStates.wallet,
-    addresses: addresses['Content List'],
+export const HasAddresses: Story = {
+  args: {
+    wallet: {
+      ...initStates.wallet,
+      addresses: addresses['Content List'],
+    },
   },
 }
diff --git a/packages/neuron-ui/src/stories/RingProgressBar.stories.tsx b/packages/neuron-ui/src/stories/RingProgressBar.stories.tsx
index 5767c4708e..fbb0e5056a 100644
--- a/packages/neuron-ui/src/stories/RingProgressBar.stories.tsx
+++ b/packages/neuron-ui/src/stories/RingProgressBar.stories.tsx
@@ -1,33 +1,36 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import RingProgressBar from 'widgets/RingProgressBar'
 
-export default {
-  title: 'Ring Progress Bar',
+const meta: Meta<typeof RingProgressBar> = {
   component: RingProgressBar,
 }
 
-const Template: ComponentStory<typeof RingProgressBar> = (props: any) => <RingProgressBar {...props} />
+export default meta
 
-export const CssColor = Template.bind({})
-CssColor.args = {
-  color: 'red',
-  backgroundColor: 'lightgray',
-  size: '300px',
-  percents: 10,
+type Story = StoryObj<typeof RingProgressBar>
+
+export const CssColor: Story = {
+  args: {
+    color: 'red',
+    backgroundColor: 'lightgray',
+    size: '300px',
+    percents: 10,
+  },
 }
 
-export const HexColor = Template.bind({})
-HexColor.args = {
-  color: '#ccc',
-  size: '300px',
-  percents: 10,
+export const HexColor: Story = {
+  args: {
+    color: '#ccc',
+    size: '300px',
+    percents: 10,
+  },
 }
 
-export const ThirtyPercent = Template.bind({})
-ThirtyPercent.args = {
-  color: 'red',
-  strokeWidth: '20px',
-  size: '300px',
-  percents: 30,
+export const ThirtyPercent: Story = {
+  args: {
+    color: 'red',
+    strokeWidth: '20px',
+    size: '300px',
+    percents: 30,
+  },
 }
diff --git a/packages/neuron-ui/src/stories/SUDTAccountList.stories.tsx b/packages/neuron-ui/src/stories/SUDTAccountList.stories.tsx
index 22d2adffc8..a3f3f50605 100644
--- a/packages/neuron-ui/src/stories/SUDTAccountList.stories.tsx
+++ b/packages/neuron-ui/src/stories/SUDTAccountList.stories.tsx
@@ -1,10 +1,14 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import SUDTAccountList from 'components/SUDTAccountList'
 
-const stories = storiesOf('sUDT Account List', module).addDecorator(withRouter())
+const meta: Meta<typeof SUDTAccountList> = {
+  component: SUDTAccountList,
+  decorators: [withRouter],
+}
 
-stories.add('Basic', () => {
-  return <SUDTAccountList />
-})
+export default meta
+
+type Story = StoryObj<typeof SUDTAccountList>
+
+export const Default: Story = {}
diff --git a/packages/neuron-ui/src/stories/SUDTAccountPile.stories.tsx b/packages/neuron-ui/src/stories/SUDTAccountPile.stories.tsx
index ed3fccccba..723786874a 100644
--- a/packages/neuron-ui/src/stories/SUDTAccountPile.stories.tsx
+++ b/packages/neuron-ui/src/stories/SUDTAccountPile.stories.tsx
@@ -1,10 +1,7 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import SUDTAccountPile, { SUDTAccountPileProps } from 'components/SUDTAccountPile'
 
-const stories = storiesOf('sUD Account Pile', module)
-
 const eventListeners = {
   onClick: (e: any) => action('Click')(e.target.dataset.id, e.currentTarget.dataset.role),
 }
@@ -42,8 +39,22 @@ const piles: { [accountType: string]: SUDTAccountPileProps } = {
   },
 }
 
-Object.entries(piles).forEach(([accountType, accountProps]) => {
-  stories.add(accountType, () => {
-    return <SUDTAccountPile {...accountProps} />
-  })
-})
+const meta: Meta<typeof SUDTAccountPile> = {
+  component: SUDTAccountPile,
+}
+
+export default meta
+
+type Story = StoryObj<typeof SUDTAccountPile>
+
+export const sUDT: Story = {
+  args: piles.sUDT,
+}
+
+export const Unknown: Story = {
+  args: piles.Unknown,
+}
+
+export const selected: Story = {
+  args: piles.selected,
+}
diff --git a/packages/neuron-ui/src/stories/SUDTCreateDialog.stories.tsx b/packages/neuron-ui/src/stories/SUDTCreateDialog.stories.tsx
index bcaab872db..744a73dc7c 100644
--- a/packages/neuron-ui/src/stories/SUDTCreateDialog.stories.tsx
+++ b/packages/neuron-ui/src/stories/SUDTCreateDialog.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import SUDTCreateDialog, { TokenInfo, SUDTCreateDialogProps } from 'components/SUDTCreateDialog'
 
@@ -21,13 +20,31 @@ const baseProps = {
 }
 const propsList: { [name: string]: SUDTCreateDialogProps } = {
   Basic: baseProps,
-  'Insufficient For SUDT': { ...baseProps, insufficient: { ckb: false, sudt: true } },
-  'Insufficient For CKB': { ...baseProps, insufficient: { ckb: true, sudt: false } },
-  'Insufficient For CKB and SUDT': { ...baseProps, insufficient: { ckb: true, sudt: true } },
+  InsufficientForSUDT: { ...baseProps, insufficient: { ckb: false, sudt: true } },
+  InsufficientForCKB: { ...baseProps, insufficient: { ckb: true, sudt: false } },
+  InsufficientForCKBAndSUDT: { ...baseProps, insufficient: { ckb: true, sudt: true } },
 }
 
-const stories = storiesOf('Create sUDT Account', module)
+const meta: Meta<typeof SUDTCreateDialog> = {
+  component: SUDTCreateDialog,
+}
+
+export default meta
+
+type Story = StoryObj<typeof SUDTCreateDialog>
+
+export const Basic: Story = {
+  args: propsList.Basic,
+}
 
-Object.entries(propsList).forEach(([name, props]) => {
-  stories.add(name, () => <SUDTCreateDialog {...props} />)
-})
+export const InsufficientForSUDT: Story = {
+  args: propsList.InsufficientForSUDT,
+}
+
+export const InsufficientForCKB: Story = {
+  args: propsList.InsufficientForCKB,
+}
+
+export const InsufficientForCKBAndSUDT: Story = {
+  args: propsList.InsufficientForCKBAndSUDT,
+}
diff --git a/packages/neuron-ui/src/stories/SUDTReceiveDialog.stories.tsx b/packages/neuron-ui/src/stories/SUDTReceiveDialog.stories.tsx
index 2ae56bc63b..8de39e5d01 100644
--- a/packages/neuron-ui/src/stories/SUDTReceiveDialog.stories.tsx
+++ b/packages/neuron-ui/src/stories/SUDTReceiveDialog.stories.tsx
@@ -1,19 +1,23 @@
-import React from 'react'
 import { withRouter } from 'storybook-addon-react-router-v6'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import SUDTReceiveDialog from 'components/SUDTReceiveDialog'
 
-const stories = storiesOf('SUDT Receive', module).addDecorator(withRouter())
+const meta: Meta<typeof SUDTReceiveDialog> = {
+  component: SUDTReceiveDialog,
+  decorators: [withRouter],
+}
 
-const ComponentParams = () => (
-  <SUDTReceiveDialog
-    data={{
+export default meta
+
+type Story = StoryObj<typeof SUDTReceiveDialog>
+
+export const Default: Story = {
+  args: {
+    data: {
       address: 'ckt1q9gry5zg8stq8ruq5wfz3lm5wn2k7qw3ulsfmdhe98f2j1',
       accountName: 'account name',
       tokenName: 'token name',
       symbol: 'CKB',
-    }}
-  />
-)
-
-stories.add('basic', () => <ComponentParams />)
+    },
+  },
+}
diff --git a/packages/neuron-ui/src/stories/SUDTSend.stories.tsx b/packages/neuron-ui/src/stories/SUDTSend.stories.tsx
index 7a6422ef18..378e2ac3cd 100644
--- a/packages/neuron-ui/src/stories/SUDTSend.stories.tsx
+++ b/packages/neuron-ui/src/stories/SUDTSend.stories.tsx
@@ -1,8 +1,14 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import SUDTSend from 'components/SUDTSend'
 
-const stories = storiesOf('sUDT Send', module).addDecorator(withRouter())
+const meta: Meta<typeof SUDTSend> = {
+  component: SUDTSend,
+  decorators: [withRouter],
+}
 
-stories.add('Basic', () => <SUDTSend />)
+export default meta
+
+type Story = StoryObj<typeof SUDTSend>
+
+export const Default: Story = {}
diff --git a/packages/neuron-ui/src/stories/SUDTUpdateDialog.stories.tsx b/packages/neuron-ui/src/stories/SUDTUpdateDialog.stories.tsx
index 527494bad7..be229e7765 100644
--- a/packages/neuron-ui/src/stories/SUDTUpdateDialog.stories.tsx
+++ b/packages/neuron-ui/src/stories/SUDTUpdateDialog.stories.tsx
@@ -1,54 +1,45 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import SUDTUpdateDialog from 'components/SUDTUpdateDialog'
+import SUDTUpdateDialog, { TokenInfo } from 'components/SUDTUpdateDialog'
 
-const stories = storiesOf('Update sUDT Account', module)
+const meta: Meta<typeof SUDTUpdateDialog> = {
+  component: SUDTUpdateDialog,
+}
 
-stories.add('sUDT Token', () => {
-  return (
-    <SUDTUpdateDialog
-      isCKB={false}
-      isMainnet
-      accountName="account name"
-      tokenName="token name"
-      symbol="symbol"
-      decimal="8"
-      tokenId="token id"
-      accountId="account id"
-      balance="200"
-      onSubmit={info => {
-        return new Promise(resolve => {
-          action('submit')(info)
-          resolve(true)
-        })
-      }}
-      onCancel={() => action('cancel')()}
-      existingAccountNames={['name1', 'name2']}
-    />
-  )
-})
+export default meta
 
-stories.add('CKB', () => {
-  return (
-    <SUDTUpdateDialog
-      isCKB
-      isMainnet={false}
-      accountName="account name"
-      tokenName="token name"
-      symbol="symbol"
-      decimal="8"
-      tokenId="token id"
-      balance="200"
-      accountId="account id"
-      onSubmit={info => {
-        return new Promise(resolve => {
-          action('submit')(info)
-          resolve(true)
-        })
-      }}
-      onCancel={() => action('cancel')()}
-      existingAccountNames={['name1', 'name2']}
-    />
-  )
-})
+type Story = StoryObj<typeof SUDTUpdateDialog>
+
+const commArgs = {
+  accountName: 'account name',
+  tokenName: 'token name',
+  symbol: 'symbol',
+  decimal: '8',
+  tokenId: 'token id',
+  accountId: 'account id',
+  balance: '200',
+  onSubmit: (info: Omit<TokenInfo, 'isCKB'>) => {
+    return new Promise<boolean>(resolve => {
+      action('submit')(info)
+      resolve(true)
+    })
+  },
+  onCancel: () => action('cancel')(),
+  existingAccountNames: ['name1', 'name2'],
+}
+
+export const SUDTToken: Story = {
+  args: {
+    ...commArgs,
+    isCKB: false,
+    isMainnet: true,
+  },
+}
+
+export const CKB: Story = {
+  args: {
+    ...commArgs,
+    isCKB: true,
+    isMainnet: false,
+  },
+}
diff --git a/packages/neuron-ui/src/stories/ScriptTag.stories.tsx b/packages/neuron-ui/src/stories/ScriptTag.stories.tsx
index 0992493ef7..0c5978d95c 100644
--- a/packages/neuron-ui/src/stories/ScriptTag.stories.tsx
+++ b/packages/neuron-ui/src/stories/ScriptTag.stories.tsx
@@ -1,11 +1,8 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import { action } from '@storybook/addon-actions'
 import ScriptTag from 'components/ScriptTag'
 
-const stories = storiesOf('Script Tag', module).addDecorator(withRouter())
-
 const scripts: Record<string, CKBComponents.Script> = {
   secp256k1_blake160: {
     codeHash: '0x9bd7e06f3ecf4be0f2fcd2188b23f1b9fcc88e5d4b65a8637b17723bbda3cce8',
@@ -29,6 +26,43 @@ const scripts: Record<string, CKBComponents.Script> = {
   },
 }
 
-Object.entries(scripts).forEach(([title, script]) => {
-  stories.add(title, () => <ScriptTag isMainnet={false} script={script} onClick={action('click')} />)
-})
+const meta: Meta<typeof ScriptTag> = {
+  component: ScriptTag,
+  decorators: [withRouter],
+  args: {
+    isMainnet: false,
+    onClick: action('click'),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ScriptTag>
+
+export const Secp256k1Blake160: Story = {
+  args: {
+    script: scripts.secp256k1_blake160,
+  },
+  name: 'secp256k1_blake160',
+}
+
+export const AnyoneCanPay: Story = {
+  args: {
+    script: scripts.anyone_can_pay,
+  },
+  name: 'anyone_can_pay',
+}
+
+export const Multisig: Story = {
+  args: {
+    script: scripts.multisig,
+  },
+  name: 'multisig',
+}
+
+export const Locktime: Story = {
+  args: {
+    script: scripts.locktime,
+  },
+  name: 'locktime',
+}
diff --git a/packages/neuron-ui/src/stories/SendFieldset.stories.tsx b/packages/neuron-ui/src/stories/SendFieldset.stories.tsx
index 0e96fb1693..7d9aa80848 100644
--- a/packages/neuron-ui/src/stories/SendFieldset.stories.tsx
+++ b/packages/neuron-ui/src/stories/SendFieldset.stories.tsx
@@ -1,43 +1,42 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import SendFieldset from 'components/SendFieldset'
 
-export default {
-  title: 'Send Fieldset',
+const meta: Meta<typeof SendFieldset> = {
   component: SendFieldset,
   argTypes: {
-    onOutputAdd: { table: { disable: true } },
     onOutputRemove: { table: { disable: true } },
     onLocktimeClick: { table: { disable: true } },
     onItemChange: { table: { disable: true } },
-    onScan: { table: { disable: true } },
     onSendMaxClick: { table: { disable: true } },
   },
 }
 
-const Template: ComponentStory<typeof SendFieldset> = (props: any) => <SendFieldset {...props} />
+export default meta
 
-export const Common = Template.bind({})
-Common.args = {
-  idx: 100,
-  item: {
-    disabled: false,
-    date: '',
-    address: '',
-    amount: '',
-  },
-  errors: {
-    addrError: undefined,
-    amountError: undefined,
+type Story = StoryObj<typeof SendFieldset>
+
+export const Default: Story = {
+  args: {
+    idx: 100,
+    item: {
+      disabled: false,
+      date: '',
+      address: '',
+      amount: '',
+    },
+    errors: {
+      addrError: undefined,
+      amountError: undefined,
+    },
+    isSendMax: false,
+    isMaxBtnDisabled: false,
+    isMaxBtnShow: false,
+    isRemoveBtnShow: false,
+    onOutputRemove: (e: any) => action('Remove Transaction Output')(JSON.stringify(e.target.dataset)),
+    onLocktimeClick: (e: any) => action('Timelock Click')(JSON.stringify(e.target.dataset)),
+    onItemChange: (e: any) => action('Item Change')(JSON.stringify(e.target.dataset), e.target.value),
+    onSendMaxClick: (e: any) => action('Click Send Max button')(JSON.stringify(e.target.dataset)),
+    isMainnet: false,
   },
-  isSendMax: false,
-  isMaxBtnDisabled: false,
-  isMaxBtnShow: false,
-  isRemoveBtnShow: false,
-  onOutputRemove: (e: any) => action('Remove Transaction Output')(JSON.stringify(e.target.dataset)),
-  onLocktimeClick: (e: any) => action('Timelock Click')(JSON.stringify(e.target.dataset)),
-  onItemChange: (e: any) => action('Item Change')(JSON.stringify(e.target.dataset), e.target.value),
-  onSendMaxClick: (e: any) => action('Click Send Max button')(JSON.stringify(e.target.dataset)),
-  isMainnet: false,
 }
diff --git a/packages/neuron-ui/src/stories/SendMetaInfo.stories.tsx b/packages/neuron-ui/src/stories/SendMetaInfo.stories.tsx
index 52e29aa9c6..c11e85aed7 100644
--- a/packages/neuron-ui/src/stories/SendMetaInfo.stories.tsx
+++ b/packages/neuron-ui/src/stories/SendMetaInfo.stories.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import SendMetaInfo from 'components/SendMetaInfo'
 
-export default {
-  title: 'Send Meta Info',
+const meta: Meta<typeof SendMetaInfo> = {
   component: SendMetaInfo,
   argTypes: {
     handleDescriptionChange: {
@@ -20,17 +19,20 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof SendMetaInfo> = (props: any) => <SendMetaInfo {...props} />
+export default meta
 
-export const Common = Template.bind({})
-Common.args = {
-  outputs: [],
-  errorMessage: '',
-  totalAmount: '',
-  sending: false,
-  description: '',
-  fee: '',
-  price: '',
-  handleDescriptionChange: (e: React.ChangeEvent<HTMLInputElement>) => action('Update Description')(e.target.value),
-  handlePriceChange: (value: string) => action('Update Price')(value),
+type Story = StoryObj<typeof SendMetaInfo>
+
+export const Default: Story = {
+  args: {
+    outputs: [],
+    errorMessage: '',
+    totalAmount: '',
+    sending: false,
+    description: '',
+    fee: '',
+    price: '',
+    handleDescriptionChange: (e: React.ChangeEvent<HTMLInputElement>) => action('Update Description')(e.target.value),
+    handlePriceChange: (value: string) => action('Update Price')(value),
+  },
 }
diff --git a/packages/neuron-ui/src/stories/SettingTabs.stories.tsx b/packages/neuron-ui/src/stories/SettingTabs.stories.tsx
index 44990757d4..09fae07706 100644
--- a/packages/neuron-ui/src/stories/SettingTabs.stories.tsx
+++ b/packages/neuron-ui/src/stories/SettingTabs.stories.tsx
@@ -1,23 +1,31 @@
 import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import { action } from '@storybook/addon-actions'
 import SettingTabs from 'components/SettingTabs'
 import { initStates, NeuronWalletContext } from 'states'
 
-const stories = storiesOf('Settings', module).addDecorator(withRouter())
-
 const dispatch = (dispatchAction: any) => action('dispatch')(dispatchAction)
 
-stories.add('Setting Tabs', () => {
-  return (
-    <NeuronWalletContext.Provider
-      value={{
-        state: initStates,
-        dispatch,
-      }}
-    >
-      <SettingTabs />
-    </NeuronWalletContext.Provider>
-  )
-})
+const meta: Meta<typeof SettingTabs> = {
+  component: SettingTabs,
+  decorators: [
+    withRouter(),
+    Component => (
+      <NeuronWalletContext.Provider
+        value={{
+          state: initStates,
+          dispatch,
+        }}
+      >
+        <Component />
+      </NeuronWalletContext.Provider>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof SettingTabs>
+
+export const Default: Story = {}
diff --git a/packages/neuron-ui/src/stories/SignAndVerify.stories.tsx b/packages/neuron-ui/src/stories/SignAndVerify.stories.tsx
index b284b86979..943420a91f 100644
--- a/packages/neuron-ui/src/stories/SignAndVerify.stories.tsx
+++ b/packages/neuron-ui/src/stories/SignAndVerify.stories.tsx
@@ -1,9 +1,14 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import SignAndVerify from 'components/SignAndVerify'
+import { withRouter } from 'storybook-addon-react-router-v6'
 
-const stories = storiesOf('Sign and Verify', module)
+const meta: Meta<typeof SignAndVerify> = {
+  component: SignAndVerify,
+  decorators: [withRouter()],
+}
 
-stories.add('Basic', () => {
-  return <SignAndVerify />
-})
+export default meta
+
+type Story = StoryObj<typeof SignAndVerify>
+
+export const Default: Story = {}
diff --git a/packages/neuron-ui/src/stories/SpecialAsset.stories.tsx b/packages/neuron-ui/src/stories/SpecialAsset.stories.tsx
index 4b354650ff..03bc9f6015 100644
--- a/packages/neuron-ui/src/stories/SpecialAsset.stories.tsx
+++ b/packages/neuron-ui/src/stories/SpecialAsset.stories.tsx
@@ -1,11 +1,10 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import SpecialAsset, { SpecialAssetProps } from 'components/SpecialAsset'
 
 const props: {
   [name: string]: Omit<SpecialAssetProps, 'onAction'>
 } = {
-  'Type and Data': {
+  TypeAndData: {
     cell: {
       outPoint: {
         txHash: '',
@@ -87,7 +86,7 @@ const props: {
       type: '',
     },
   },
-  'User defined asset': {
+  UserDefinedAsset: {
     cell: {
       capacity: '123456789012345678',
       outPoint: {
@@ -197,10 +196,41 @@ const props: {
   },
 }
 
-const stories = storiesOf('Special Asset', module)
+const meta: Meta<typeof SpecialAsset> = {
+  component: SpecialAsset,
+  args: {
+    onAction: console.info,
+  },
+}
+
+export default meta
 
-Object.keys(props).forEach(name => {
-  stories.add(name, () => {
-    return <SpecialAsset {...props[name]} onAction={console.info} />
-  })
-})
+type Story = StoryObj<typeof SpecialAsset>
+
+export const TypeAndData: Story = {
+  args: props.TypeAndData,
+}
+
+export const Type: Story = {
+  args: props.Type,
+}
+
+export const Data: Story = {
+  args: props.Data,
+}
+
+export const UserDefinedAsset: Story = {
+  args: props.UserDefinedAsset,
+}
+
+export const Locked: Story = {
+  args: props.Locked,
+}
+
+export const Claim: Story = {
+  args: props.Claim,
+}
+
+export const Offline: Story = {
+  args: props.Offline,
+}
diff --git a/packages/neuron-ui/src/stories/SpecialAssetList.stories.tsx b/packages/neuron-ui/src/stories/SpecialAssetList.stories.tsx
index 4123133642..fb53994ae6 100644
--- a/packages/neuron-ui/src/stories/SpecialAssetList.stories.tsx
+++ b/packages/neuron-ui/src/stories/SpecialAssetList.stories.tsx
@@ -1,10 +1,14 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import SpecialAssetList from 'components/SpecialAssetList'
 
-const stories = storiesOf('Special Asset List', module).addDecorator(withRouter())
+const meta: Meta<typeof SpecialAssetList> = {
+  component: SpecialAssetList,
+  decorators: [withRouter],
+}
 
-stories.add('basic', () => {
-  return <SpecialAssetList />
-})
+export default meta
+
+type Story = StoryObj<typeof SpecialAssetList>
+
+export const Default: Story = {}
diff --git a/packages/neuron-ui/src/stories/Table.stories.tsx b/packages/neuron-ui/src/stories/Table.stories.tsx
index 2af90ce8a4..50a90080bc 100644
--- a/packages/neuron-ui/src/stories/Table.stories.tsx
+++ b/packages/neuron-ui/src/stories/Table.stories.tsx
@@ -1,114 +1,121 @@
 import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Table from 'widgets/Table'
 import { HIDE_BALANCE } from 'utils/const'
 
-export default {
-  title: 'Table',
+const meta: Meta<typeof Table> = {
   component: Table,
   argTypes: {
     head: { control: 'text' },
   },
 }
 
-const Template: ComponentStory<typeof Table> = props => <Table {...props} />
+export default meta
 
-export const EmptyTable = Template.bind({})
-EmptyTable.args = {
-  columns: [
-    {
-      title: 'a',
-      dataIndex: 'a',
-    },
-    {
-      title: 'b',
-      dataIndex: 'b',
-    },
-  ],
-  dataSource: [],
+type Story = StoryObj<typeof Table>
+
+export const EmptyTable: Story = {
+  args: {
+    columns: [
+      {
+        title: 'a',
+        dataIndex: 'a',
+      },
+      {
+        title: 'b',
+        dataIndex: 'b',
+      },
+    ],
+    dataSource: [],
+  },
 }
 
-export const DataTable = Template.bind({})
-DataTable.args = {
-  columns: [
-    {
-      title: 'a',
-      dataIndex: 'a',
-    },
-    {
-      title: 'b',
-      dataIndex: 'b',
-    },
-  ],
-  dataSource: [
-    {
-      a: 10,
-      b: 'aaa',
-    },
-    {
-      a: 20,
-      b: 'bbb',
-    },
-  ],
+export const DataTable: Story = {
+  args: {
+    columns: [
+      {
+        title: 'a',
+        dataIndex: 'a',
+      },
+      {
+        title: 'b',
+        dataIndex: 'b',
+      },
+    ],
+    dataSource: [
+      {
+        a: 10,
+        b: 'aaa',
+      },
+      {
+        a: 20,
+        b: 'bbb',
+      },
+    ],
+  },
 }
 
-export const TableWithHead = Template.bind({})
-TableWithHead.args = {
-  columns: [
-    {
-      title: '时间',
-      dataIndex: 'a',
-    },
-    {
-      title: '类型',
-      dataIndex: 'b',
-    },
-  ],
-  dataSource: [
-    {
-      a: 10,
-      b: 'aaa',
-    },
-    {
-      a: 20,
-      b: 'bbb',
-    },
-  ],
-  head: <div style={{ padding: '16px' }}>head</div>,
+export const TableWithHead: Story = {
+  args: {
+    columns: [
+      {
+        title: '时间',
+        dataIndex: 'a',
+      },
+      {
+        title: '类型',
+        dataIndex: 'b',
+      },
+    ],
+    dataSource: [
+      {
+        a: 10,
+        b: 'aaa',
+      },
+      {
+        a: 20,
+        b: 'bbb',
+      },
+    ],
+    head: <div style={{ padding: '16px' }}>head</div>,
+  },
 }
 
-export const TableWithColumnRender = Template.bind({})
-TableWithColumnRender.args = {
-  columns: [
-    {
-      title: '时间',
-      dataIndex: 'a',
-      align: 'center',
-    },
-    {
-      title: '类型',
-      dataIndex: 'b',
-    },
-    {
-      title: '余额',
-      dataIndex: 'balance',
-      isBalance: true,
-      render(v: string, _idx, _item, showBalance) {
-        return <span style={{ color: v.includes('-') ? undefined : '#00C891' }}>{showBalance ? v : HIDE_BALANCE}</span>
+export const TableWithColumnRender: Story = {
+  args: {
+    columns: [
+      {
+        title: '时间',
+        dataIndex: 'a',
+        align: 'center',
+      },
+      {
+        title: '类型',
+        dataIndex: 'b',
       },
-    },
-  ],
-  dataSource: [
-    {
-      a: 10,
-      b: 'aaa',
-      balance: '9850000',
-    },
-    {
-      a: 20,
-      b: 'bbb',
-      balance: '-0.1',
-    },
-  ],
-  head: <div style={{ padding: '16px' }}>head</div>,
+      {
+        title: '余额',
+        dataIndex: 'balance',
+        isBalance: true,
+        render(v: string, _idx, _item, showBalance) {
+          return (
+            <span style={{ color: v.includes('-') ? undefined : '#00C891' }}>{showBalance ? v : HIDE_BALANCE}</span>
+          )
+        },
+      },
+    ],
+    dataSource: [
+      {
+        a: 10,
+        b: 'aaa',
+        balance: '9850000',
+      },
+      {
+        a: 20,
+        b: 'bbb',
+        balance: '-0.1',
+      },
+    ],
+    head: <div style={{ padding: '16px' }}>head</div>,
+  },
 }
diff --git a/packages/neuron-ui/src/stories/TextField.stories.tsx b/packages/neuron-ui/src/stories/TextField.stories.tsx
index b0fb3bb93d..03bd6bd4cd 100644
--- a/packages/neuron-ui/src/stories/TextField.stories.tsx
+++ b/packages/neuron-ui/src/stories/TextField.stories.tsx
@@ -1,9 +1,7 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import TextField from 'widgets/TextField'
 
-export default {
-  title: 'TextField',
+const meta: Meta<typeof TextField> = {
   component: TextField,
   argTypes: {
     onChange: {
@@ -14,16 +12,20 @@ export default {
   },
 }
 
-const Template: ComponentStory<typeof TextField> = (props: any) => <TextField {...props} />
-export const Basic = Template.bind({})
-Basic.args = {
-  label: 'label',
-  required: false,
-  stack: false,
-  field: 'field',
-  value: 'value',
-  error: 'error',
-  type: 'text',
-  suffix: 'suffix',
-  onChange: () => {},
+export default meta
+
+type Story = StoryObj<typeof TextField>
+
+export const Default: Story = {
+  args: {
+    label: 'label',
+    required: false,
+    stack: false,
+    field: 'field',
+    value: 'value',
+    error: 'error',
+    type: 'text',
+    suffix: 'suffix',
+    onChange: () => {},
+  },
 }
diff --git a/packages/neuron-ui/src/stories/Toolip.stories.tsx b/packages/neuron-ui/src/stories/Toolip.stories.tsx
index abb7a08841..33c6c7ced0 100644
--- a/packages/neuron-ui/src/stories/Toolip.stories.tsx
+++ b/packages/neuron-ui/src/stories/Toolip.stories.tsx
@@ -1,9 +1,8 @@
 import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Tooltip from 'widgets/Tooltip'
 
-export default {
-  title: 'Tooltip',
+const meta: Meta<typeof Tooltip> = {
   component: Tooltip,
   argTypes: {
     children: {
@@ -12,52 +11,63 @@ export default {
       },
     },
   },
+  decorators: [
+    (Component, { args, parameters }) => (
+      <div style={{ width: parameters.width ?? '800px', backgroundColor: '#FFF' }}>
+        <Component {...args} />
+      </div>
+    ),
+  ],
 }
 
-const Template: ComponentStory<typeof Tooltip> = (props: any) => (
-  <div style={{ width: '800px', backgroundColor: '#FFF' }}>
-    <Tooltip {...props} />
-  </div>
-)
-export const Basic = Template.bind({})
-Basic.args = {
-  tip: 'This is a tooltip',
-  children: <span>show tooltip</span>,
-}
+export default meta
+
+type Story = StoryObj<typeof Tooltip>
 
-export const TipWithReactChildren = Template.bind({})
-TipWithReactChildren.args = {
-  tip: <span>This is a tooltip</span>,
-  children: <span>show tooltip</span>,
+export const Basic: Story = {
+  args: {
+    tip: 'This is a tooltip',
+    children: <span>show tooltip</span>,
+  },
 }
-TipWithReactChildren.argTypes = {
-  tip: {
-    table: {
-      disable: true,
+
+export const TipWithReactChildren: Story = {
+  args: {
+    tip: <span>This is a tooltip</span>,
+    children: <span>show tooltip</span>,
+  },
+  argTypes: {
+    tip: {
+      table: {
+        disable: true,
+      },
     },
   },
 }
 
-const TemplateShortWidth: ComponentStory<typeof Tooltip> = (props: any) => (
-  <div style={{ width: '60px', backgroundColor: '#FFF' }}>
-    <Tooltip {...props} />
-  </div>
-)
-export const BasicShortWidth = TemplateShortWidth.bind({})
-BasicShortWidth.args = {
-  tip: 'This is a tooltip',
-  children: <span>tooltip</span>,
+export const BasicShortWidth: Story = {
+  args: {
+    tip: 'This is a tooltip',
+    children: <span>tooltip</span>,
+  },
+  parameters: {
+    width: '60px',
+  },
 }
 
-export const TipWithReactChildrenShortWidth = TemplateShortWidth.bind({})
-TipWithReactChildrenShortWidth.args = {
-  tip: <span>This is a tooltip</span>,
-  children: <span>tooltip</span>,
-}
-TipWithReactChildrenShortWidth.argTypes = {
-  tip: {
-    table: {
-      disable: true,
+export const TipWithReactChildrenShortWidth: Story = {
+  args: {
+    tip: <span>This is a tooltip</span>,
+    children: <span>tooltip</span>,
+  },
+  argTypes: {
+    tip: {
+      table: {
+        disable: true,
+      },
     },
   },
+  parameters: {
+    width: '60px',
+  },
 }
diff --git a/packages/neuron-ui/src/stories/TransactionFeePanel.stories.tsx b/packages/neuron-ui/src/stories/TransactionFeePanel.stories.tsx
index 6267861ea8..4902627c16 100644
--- a/packages/neuron-ui/src/stories/TransactionFeePanel.stories.tsx
+++ b/packages/neuron-ui/src/stories/TransactionFeePanel.stories.tsx
@@ -1,19 +1,19 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import TransactionFeePanel from 'components/TransactionFeePanel'
 
-const states = {
-  default: {
-    cycles: '180',
+const meta: Meta<typeof TransactionFeePanel> = {
+  component: TransactionFeePanel,
+}
+
+export default meta
+
+type Story = StoryObj<typeof TransactionFeePanel>
+
+export const Default: Story = {
+  args: {
     price: '10',
     fee: '0',
     onPriceChange: (args: any) => action(args),
   },
 }
-
-const stories = storiesOf('Transaction Fee', module)
-
-Object.entries(states).forEach(([title, props]) => {
-  stories.add(title, () => <TransactionFeePanel {...props} />)
-})
diff --git a/packages/neuron-ui/src/stories/TransactionList.stories.tsx b/packages/neuron-ui/src/stories/TransactionList.stories.tsx
index 493b9911a3..3f61563d6d 100644
--- a/packages/neuron-ui/src/stories/TransactionList.stories.tsx
+++ b/packages/neuron-ui/src/stories/TransactionList.stories.tsx
@@ -1,42 +1,47 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import TransactionList from 'components/TransactionList'
 import transactions from './data/transactions'
 
-const stories = storiesOf('TransactionList', module)
-Object.entries(transactions).forEach(([title, list]) => {
-  stories.add(title, () => (
-    <TransactionList
-      isMainnet
-      bestKnownBlockNumber={123}
-      walletID="1"
-      walletName="wallet name"
-      items={list}
-      dispatch={() => {}}
-    />
-  ))
-})
-
-stories.add('With empty pending list', () => (
-  <TransactionList
-    isMainnet
-    bestKnownBlockNumber={123}
-    walletID="1"
-    walletName="wallet name"
-    items={transactions['Content List'].filter(item => item.status !== 'pending')}
-    dispatch={() => {}}
-  />
-))
-
-stories.add('Shimmered List', () => {
-  return (
-    <TransactionList
-      isMainnet
-      bestKnownBlockNumber={123}
-      walletID="1"
-      walletName="wallet name"
-      items={[]}
-      dispatch={() => {}}
-    />
-  )
-})
+const meta: Meta<typeof TransactionList> = {
+  component: TransactionList,
+}
+
+export default meta
+
+type Story = StoryObj<typeof TransactionList>
+
+const commArgs = {
+  isMainnet: true,
+  bestKnownBlockNumber: 123,
+  walletID: '1',
+  walletName: 'wallet name',
+  dispatch: () => {},
+}
+
+export const EmptyList: Story = {
+  args: {
+    ...commArgs,
+    items: transactions['Empty List'],
+  },
+}
+
+export const ContentList: Story = {
+  args: {
+    ...commArgs,
+    items: transactions['Content List'],
+  },
+}
+
+export const WithEmptyPendingList: Story = {
+  args: {
+    ...commArgs,
+    items: transactions['Content List'].filter(item => item.status !== 'pending'),
+  },
+}
+
+export const ShimmeredList: Story = {
+  args: {
+    ...commArgs,
+    items: [],
+  },
+}
diff --git a/packages/neuron-ui/src/stories/WalletSetting.stories.tsx b/packages/neuron-ui/src/stories/WalletSetting.stories.tsx
index 06646967db..219204eb88 100644
--- a/packages/neuron-ui/src/stories/WalletSetting.stories.tsx
+++ b/packages/neuron-ui/src/stories/WalletSetting.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import WalletSetting from 'components/WalletSetting'
 import { initStates } from 'states'
@@ -18,15 +17,30 @@ const states: { [title: string]: State.WalletIdentity[] } = {
   ],
 }
 
-const stories = storiesOf('WalletSetting', module).addDecorator(withRouter())
+const meta: Meta<typeof WalletSetting> = {
+  component: WalletSetting,
+  decorators: [withRouter],
+  args: {
+    dispatch: () => {},
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof WalletSetting>
+
+const getArgs = (wallets: State.WalletIdentity[]) => {
+  return {
+    ...initStates,
+    wallet: { ...initStates.wallet, id: wallets.length ? wallets[0].id : '' },
+    settings: { ...initStates.settings, wallets },
+  }
+}
+
+export const EmptyList: Story = {
+  args: getArgs(states['Empty List']),
+}
 
-Object.entries(states).forEach(([title, wallets]) => {
-  stories.add(title, () => (
-    <WalletSetting
-      {...initStates}
-      wallet={{ ...initStates.wallet, id: wallets.length ? wallets[0].id : '' }}
-      settings={{ ...initStates.settings, wallets }}
-      dispatch={() => {}}
-    />
-  ))
-})
+export const ContentList: Story = {
+  args: getArgs(states['Content List']),
+}
diff --git a/packages/neuron-ui/src/stories/WithdrawDialog.stories.tsx b/packages/neuron-ui/src/stories/WithdrawDialog.stories.tsx
index c6925ae0c6..db3c160041 100644
--- a/packages/neuron-ui/src/stories/WithdrawDialog.stories.tsx
+++ b/packages/neuron-ui/src/stories/WithdrawDialog.stories.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import WithdrawDialog from 'components/WithdrawDialog'
 
 const props = {
@@ -39,7 +38,14 @@ const props = {
   currentEpoch: '0x00000000',
 }
 
-const stories = storiesOf('Withdraw Dialog', module)
-stories.add('Basic', () => {
-  return <WithdrawDialog {...props} />
-})
+const meta: Meta<typeof WithdrawDialog> = {
+  component: WithdrawDialog,
+}
+
+export default meta
+
+type Story = StoryObj<typeof WithdrawDialog>
+
+export const Default: Story = {
+  args: props,
+}
diff --git a/packages/neuron-ui/src/widgets/RadioGroup/index.tsx b/packages/neuron-ui/src/widgets/RadioGroup/index.tsx
index 93ae341904..fb56c07757 100644
--- a/packages/neuron-ui/src/widgets/RadioGroup/index.tsx
+++ b/packages/neuron-ui/src/widgets/RadioGroup/index.tsx
@@ -18,7 +18,7 @@ export interface RadioGroupProps {
 }
 
 const RadioGroup = ({ defaultValue, options, onChange, itemClassName = '', className = '' }: RadioGroupProps) => {
-  const [checkedValue, setCheckedValue] = useState(defaultValue || options[0].value)
+  const [checkedValue, setCheckedValue] = useState(defaultValue || options[0]?.value)
 
   const handleChange = useCallback(
     (e: React.SyntheticEvent<HTMLInputElement>) => {

From 85ec4bf6575d02110842ce577bdb28444d53c293 Mon Sep 17 00:00:00 2001
From: devchenyan <sgt39007@163.com>
Date: Wed, 12 Jul 2023 18:01:12 +0800
Subject: [PATCH 2/2] Fix multisig address (#2767)

* fix: multisig address

* fix

* fix: PageContainer

* feat: update style
---
 .../src/components/MultisigAddress/hooks.ts   |  2 +-
 .../src/components/MultisigAddress/index.tsx  | 16 +++-
 .../PageContainer/pageContainer.module.scss   |  1 +
 .../src/components/SendFieldset/index.tsx     |  6 +-
 .../SendFromMultisigDialog/hooks.ts           | 77 +++++++++----------
 .../SendFromMultisigDialog/index.tsx          | 11 +--
 .../sendFromMultisigDialog.module.scss        | 16 +++-
 packages/neuron-ui/src/locales/en.json        |  3 +
 packages/neuron-ui/src/locales/zh-tw.json     |  3 +
 packages/neuron-ui/src/locales/zh.json        |  3 +
 10 files changed, 82 insertions(+), 56 deletions(-)

diff --git a/packages/neuron-ui/src/components/MultisigAddress/hooks.ts b/packages/neuron-ui/src/components/MultisigAddress/hooks.ts
index 4449c24a99..c302ce905e 100644
--- a/packages/neuron-ui/src/components/MultisigAddress/hooks.ts
+++ b/packages/neuron-ui/src/components/MultisigAddress/hooks.ts
@@ -134,7 +134,7 @@ export const useConfigManage = ({ walletId, isMainnet }: { walletId: string; isM
   const configs = useMemo<MultisigConfig[]>(
     () =>
       searchKeywords
-        ? allConfigs.filter(v => v.alias?.includes(searchKeywords) || v.fullPayload === searchKeywords)
+        ? allConfigs.filter(v => v.alias?.includes(searchKeywords) || v.fullPayload.includes(searchKeywords))
         : allConfigs,
     [allConfigs, searchKeywords]
   )
diff --git a/packages/neuron-ui/src/components/MultisigAddress/index.tsx b/packages/neuron-ui/src/components/MultisigAddress/index.tsx
index afafdbf3d4..96e6d5d3b6 100644
--- a/packages/neuron-ui/src/components/MultisigAddress/index.tsx
+++ b/packages/neuron-ui/src/components/MultisigAddress/index.tsx
@@ -183,7 +183,13 @@ const MultisigAddress = () => {
                   render(_, __, item) {
                     return (
                       <label htmlFor={`${item.id}`}>
-                        <input id={`${item.id}`} data-config-id={item.id} type="checkbox" onChange={onChangeChecked} />
+                        <input
+                          id={`${item.id}`}
+                          data-config-id={item.id}
+                          type="checkbox"
+                          onChange={onChangeChecked}
+                          checked={selectIds.includes(item.id)}
+                        />
                         <span />
                       </label>
                     )
@@ -264,7 +270,9 @@ const MultisigAddress = () => {
                   isBalance: true,
                   render(_, __, item, show) {
                     return (
-                      <div>{show ? shannonToCKBFormatter(multisigBanlances[item.fullPayload]) : HIDE_BALANCE} CKB</div>
+                      <div>
+                        {show ? shannonToCKBFormatter(multisigBanlances[item.fullPayload] || '0') : HIDE_BALANCE} CKB
+                      </div>
                     )
                   },
                 },
@@ -346,8 +354,8 @@ const MultisigAddress = () => {
 
       <AlertDialog
         show={showDeleteDialog}
-        title={t('send.remove-receiving-address')}
-        message={t('send.remove-receiving-address-msg')}
+        title={t('multisig-address.remove-multisig-address')}
+        message={t('multisig-address.remove-multisig-address-msg')}
         type="warning"
         onCancel={() => setShowDeleteDialog(false)}
         onOk={() => {
diff --git a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
index f1560472da..e9aff35acd 100755
--- a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
+++ b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  height: 100vh;
 
   .head {
     display: flex;
diff --git a/packages/neuron-ui/src/components/SendFieldset/index.tsx b/packages/neuron-ui/src/components/SendFieldset/index.tsx
index 6cfb58c604..936097785c 100644
--- a/packages/neuron-ui/src/components/SendFieldset/index.tsx
+++ b/packages/neuron-ui/src/components/SendFieldset/index.tsx
@@ -8,7 +8,7 @@ import { ReactComponent as Attention } from 'widgets/Icons/ExperimentalAttention
 import TimeClock from 'widgets/Icons/TimeClock.svg'
 
 import { formatDate } from 'widgets/DatetimePickerDialog'
-import { localNumberFormatter, PlaceHolders, isSecp256k1Address, clsx } from 'utils'
+import { localNumberFormatter, isSecp256k1Address, clsx } from 'utils'
 import { ErrorWithI18n } from 'exceptions'
 
 import styles from './sendFieldset.module.scss'
@@ -109,8 +109,8 @@ const SendFieldset = ({
         label={t('send.amount')}
         field="amount"
         data-idx={idx}
-        value={localNumberFormatter(item.amount)}
-        placeholder={isSendMax ? PlaceHolders.send.Calculating : PlaceHolders.send.Amount}
+        value={item.amount ? localNumberFormatter(item.amount) : ''}
+        placeholder={t('send.input-amount')}
         onChange={onItemChange}
         disabled={item.disabled}
         suffix={
diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts b/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts
index 251830d086..5929f40a96 100644
--- a/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts
+++ b/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts
@@ -120,8 +120,8 @@ export const useSendInfo = ({
       setSendInfoList(v => {
         const copy = [...v]
         if (field === 'amount') {
-          const amount = value.replace(/,/g, '') || '0'
-          if (Number.isNaN(+amount) || /[^\d.]/.test(amount) || +amount < 0) {
+          const amount = value.replace(/,/g, '') || undefined
+          if (amount && (Number.isNaN(+amount) || /[^\d.]/.test(amount) || +amount < 0)) {
             return copy
           }
           copy[+idx][field] = amount
@@ -173,45 +173,40 @@ export const useSendInfo = ({
     }, 300)
   }, [sendInfoList, setErrorMessage, multisigConfig, dispatch, t, isMainnet, outputErrors])
   const [isSendMax, setIsSendMax] = useState(false)
-  const onSendMaxClick = useCallback(
-    (e: React.BaseSyntheticEvent) => {
-      const {
-        dataset: { isOn = 'false' },
-      } = e.currentTarget
-      setIsSendMax(isOn === 'false')
-      if (isOn === 'false') {
-        generateMultisigTxWith(generateMultisigSendAllTx)({
-          sendInfoList,
-          setErrorMessage,
-          multisigConfig,
-          dispatch,
-          t,
-          isMainnet,
-        }).then(res => {
-          if (res && res.outputs && res.outputs.length) {
-            setSendInfoList(v => [
-              ...v.slice(0, v.length - 1),
-              {
-                ...v[v.length - 1],
-                amount: shannonToCKBFormatter(res.outputs[res.outputs.length - 1].capacity, false, ''),
-                disabled: true,
-              },
-            ])
-          }
-        })
-      } else {
-        setSendInfoList(v => [
-          ...v.slice(0, v.length - 1),
-          {
-            ...v[v.length - 1],
-            amount: '0',
-            disabled: false,
-          },
-        ])
-      }
-    },
-    [setIsSendMax, sendInfoList, setErrorMessage, multisigConfig, dispatch, t, isMainnet]
-  )
+  const onSendMaxClick = useCallback(() => {
+    if (!isSendMax) {
+      setIsSendMax(true)
+      generateMultisigTxWith(generateMultisigSendAllTx)({
+        sendInfoList,
+        setErrorMessage,
+        multisigConfig,
+        dispatch,
+        t,
+        isMainnet,
+      }).then(res => {
+        if (res && res.outputs && res.outputs.length) {
+          setSendInfoList(v => [
+            ...v.slice(0, v.length - 1),
+            {
+              ...v[v.length - 1],
+              amount: shannonToCKBFormatter(res.outputs[res.outputs.length - 1].capacity, false, ''),
+              disabled: true,
+            },
+          ])
+        }
+      })
+    } else {
+      setIsSendMax(false)
+      setSendInfoList(v => [
+        ...v.slice(0, v.length - 1),
+        {
+          ...v[v.length - 1],
+          amount: '0',
+          disabled: false,
+        },
+      ])
+    }
+  }, [setIsSendMax, sendInfoList, setErrorMessage, multisigConfig, dispatch, t, isMainnet])
   const isMaxBtnDisabled = useMemo(() => {
     try {
       validateOutputs(sendInfoList, isMainnet, true)
diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx b/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx
index 4f96b56649..4d1ee1f68e 100644
--- a/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx
+++ b/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx
@@ -6,7 +6,7 @@ import { Copy } from 'widgets/Icons/icon'
 import CopyZone from 'widgets/CopyZone'
 import TextField from 'widgets/TextField'
 import SendFieldset from 'components/SendFieldset'
-import { calculateFee, isMainnet as isMainnetUtil, shannonToCKBFormatter, validateTotalAmount } from 'utils'
+import { calculateFee, isMainnet as isMainnetUtil, shannonToCKBFormatter, validateTotalAmount, clsx } from 'utils'
 import { useState as useGlobalState } from 'states'
 import { ReactComponent as Add } from 'widgets/Icons/Add.svg'
 import Button from 'widgets/Button'
@@ -122,19 +122,20 @@ const SendFromMultisigDialog = ({
           <div className={styles.sendFieldContainer}>
             {sendInfoList.map((item, idx) => (
               <SendFieldset
-                key={item.address || idx}
+                // eslint-disable-next-line react/no-array-index-key
+                key={idx}
                 idx={idx}
                 item={item}
                 errors={outputErrors[idx]}
                 isSendMax={isSendMax}
                 isMaxBtnDisabled={isMaxBtnDisabled}
                 isTimeLockable={false}
-                isMaxBtnShow={false}
+                isMaxBtnShow={idx === sendInfoList.length - 1}
                 isRemoveBtnShow={sendInfoList.length > 1}
                 onOutputRemove={deleteSendInfo}
                 onItemChange={onSendInfoChange}
                 onSendMaxClick={onSendMaxClick}
-                className={styles.flexWrap}
+                className={clsx(styles.flexWrap, styles.sendItem)}
                 isMainnet={isMainnet}
               />
             ))}
@@ -161,7 +162,7 @@ const SendFromMultisigDialog = ({
               value={`${shannonToCKBFormatter(fee)} CKB`}
               readOnly
               disabled
-              width="100%"
+              width="230px"
             />
           </div>
         </div>
diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss b/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss
index aebee65b67..3e2306c2f9 100644
--- a/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss
+++ b/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss
@@ -3,7 +3,7 @@
 }
 
 .container {
-  width: 680px;
+  width: 730px;
 
   .header {
     display: flex;
@@ -90,11 +90,23 @@
 .flexWrap {
   padding: 0;
   display: flex;
+  align-items: baseline;
   column-gap: 16px;
   & > div {
-    flex: 1;
+    &:first-child {
+      flex: 1;
+    }
   }
   &:last-child {
     margin-top: 16px;
   }
 }
+
+.sendItem {
+  & > div {
+    input {
+      width: 125px !important;
+      height: 56px !important;
+    }
+  }
+}
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
index 5d8bb60f59..1de6326692 100644
--- a/packages/neuron-ui/src/locales/en.json
+++ b/packages/neuron-ui/src/locales/en.json
@@ -204,6 +204,7 @@
       "address": "Send to",
       "input-address": "Please input receiving address",
       "amount": "Amount (CKB)",
+      "input-amount": "Please input amount",
       "send": "Send",
       "reset": "Reset",
       "confirm-password": "Confirm Password",
@@ -1026,6 +1027,8 @@
         "notice": "Only one configuration can be imported at a time. If the content of the file is an array, the first one is imported by default."
       },
       "delete-failed": "Delete multisig config failed",
+      "remove-multisig-address": "Remove Multisig Address",
+      "remove-multisig-address-msg": "Are you sure you want to remove the selected multisig address?",
       "send-ckb": {
         "title": "Send CKB from multisig address",
         "detail": "Send CKB from {{m}}-of-{{n}} multisig address: <0></0>",
diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
index 93c0de254b..4abbab3527 100644
--- a/packages/neuron-ui/src/locales/zh-tw.json
+++ b/packages/neuron-ui/src/locales/zh-tw.json
@@ -197,6 +197,7 @@
       "address": "收款地址",
       "input-address": "請輸入收款地址",
       "amount": "转账金額（CKB）",
+      "input-amount": "請輸入转账金額",
       "send": "發送",
       "reset": "重置",
       "confirm-password": "確認密碼",
@@ -996,6 +997,8 @@
         "notice": "導入配置一次只能導入一個，如果是文件內容是數組默認取第一個導入"
       },
       "delete-failed": "刪除多簽配置失敗",
+      "remove-multisig-address": "刪除多簽地址",
+      "remove-multisig-address-msg": "確定要刪除所選多簽地址？",
       "send-ckb": {
         "title": "多簽地址轉賬",
         "detail": "從 {{m}}-of-{{n}} 多簽地址 <0></0> 轉賬",
diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
index 88ad263fe5..584a014e26 100644
--- a/packages/neuron-ui/src/locales/zh.json
+++ b/packages/neuron-ui/src/locales/zh.json
@@ -197,6 +197,7 @@
       "address": "收款地址",
       "input-address": "请输入收款地址",
       "amount": "转账金额（CKB）",
+      "input-amount": "请输入转账金额",
       "send": "发送",
       "reset": "重置",
       "confirm-password": "确认密码",
@@ -1018,6 +1019,8 @@
         "notice": "导入配置一次只能导入一个，如果是文件内容是数组默认取第一个导入"
       },
       "delete-failed": "删除多签配置失败",
+      "remove-multisig-address": "刪除多签地址",
+      "remove-multisig-address-msg": "确定要刪除所选多签地址？",
       "send-ckb": {
         "title": "多签地址转账",
         "detail": "从 {{m}}-of-{{n}} 多签地址 <0></0> 转账",