feat: Add a window/dialog after successful transaction actions

packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss

@@ -64,19 +64,10 @@
 }
 
 .fee {
-  display: flex;
-  justify-content: space-between;
   font-size: 14px;
   line-height: 20px;
   margin-top: 4px;
   color: var(--main-text-color);
-  gap: 24px;
-
-  & > div {
-    &:first-child {
-      flex-shrink: 0;
-    }
-  }
 }
 
 .rewards {
@@ -128,6 +119,7 @@
 .isBalanceReserved {
   display: flex;
   align-items: center;
+  margin-top: 12px;
 
   & > input {
     display: none;
@@ -162,3 +154,22 @@
     }
   }
 }
+
+.notification {
+  color: var(--notice-text-color);
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  align-items: center;
+  word-break: break-word;
+  margin-top: 12px;
+  background-color: var(--warn-background-color);
+  font-size: 12px;
+  line-height: 24px;
+  padding: 8px 14px;
+  border: 1px solid rgba(252, 136, 0, 0.2);
+  border-radius: 4px;
+  span {
+    font-weight: 500;
+  }
+}

packages/neuron-ui/src/components/DepositDialog/hooks.ts

@@ -238,10 +238,10 @@ export const useBalanceReserved = () => {
 }
 
 export const useOnDepositDialogSubmit = ({
-  onCloseDepositDialog,
+  onDepositSuccess,
   walletID,
 }: {
-  onCloseDepositDialog: () => void
+  onDepositSuccess: () => void
   walletID: string
 }) => {
   const dispatch = useDispatch()
@@ -251,10 +251,10 @@ export const useOnDepositDialogSubmit = ({
       payload: {
         walletID,
         actionType: 'send',
+        onSuccess: onDepositSuccess,
       },
     })
-    onCloseDepositDialog()
-  }, [dispatch, walletID, onCloseDepositDialog])
+  }, [dispatch, walletID, onDepositSuccess])
 }
 
 export const useOnDepositDialogCancel = ({

packages/neuron-ui/src/components/DepositDialog/index.tsx

@@ -8,6 +8,7 @@ import { localNumberFormatter, shannonToCKBFormatter } from 'utils'
 import { Attention, Success } from 'widgets/Icons/icon'
 import Dialog from 'widgets/Dialog'
 import Tooltip from 'widgets/Tooltip'
+import Alert from 'widgets/Alert'
 import styles from './depositDialog.module.scss'
 import {
   useBalanceReserved,
@@ -31,6 +32,7 @@ interface DepositDialogProps {
   suggestFeeRate: number
   walletID: string
   globalAPC: number
+  onDepositSuccess: () => void
 }
 
 const RfcLink = React.memo(() => (
@@ -57,6 +59,7 @@ const DepositDialog = ({
   isTxGenerated,
   suggestFeeRate,
   globalAPC,
+  onDepositSuccess,
 }: DepositDialogProps) => {
   const [t, { language }] = useTranslation()
   const disabled = !isTxGenerated
@@ -73,7 +76,7 @@ const DepositDialog = ({
     showDepositDialog: show,
     slidePercent,
   })
-  const onConfirm = useOnDepositDialogSubmit({ onCloseDepositDialog, walletID })
+  const onConfirm = useOnDepositDialogSubmit({ onDepositSuccess, walletID })
   const onCancel = useOnDepositDialogCancel({ onCloseDepositDialog, resetDepositValue, setIsBalanceReserved })
   const onSubmit = useCallback(
     (e: React.FormEvent) => {
@@ -189,6 +192,9 @@ const DepositDialog = ({
               <p>{globalAPC}%</p>
             </div>
           </div>
+          <Alert status="warn" className={styles.notification}>
+            <span>{t('nervos-dao.attention')}</span>
+          </Alert>
         </form>
       )}
     </Dialog>

packages/neuron-ui/src/components/DepositRulesDialog/depositRulesDialog.module.scss

@@ -0,0 +1,28 @@
+@import '../../styles/mixin.scss';
+
+.container {
+  width: 680px;
+
+  .content {
+    background: var(--table-head-background-color);
+    border-radius: 8px;
+
+    .item {
+      padding: 16px;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid var(--divide-line-color);
+      font-size: 14px;
+      color: var(--main-text-color);
+      &:last-child {
+        border-bottom: none;
+      }
+      p {
+        margin: 0;
+      }
+      .description {
+        font-weight: 500;
+      }
+    }
+  }
+}

packages/neuron-ui/src/components/DepositRulesDialog/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Dialog from 'widgets/Dialog'
+import styles from './depositRulesDialog.module.scss'
+
+const DepositRulesDialog = ({ show, onClose }: { show: boolean; onClose: () => void }) => {
+  const [t] = useTranslation()
+
+  return (
+    <Dialog
+      show={show}
+      title={t('nervos-dao.deposit-rules')}
+      onCancel={onClose}
+      onConfirm={onClose}
+      showCancel={false}
+      confirmText={t('deposit-rules.get')}
+      className={styles.container}
+    >
+      <div className={styles.content}>
+        {[
+          // TODO: calculating by the capacity of the lock
+          ['deposit-rules.minimum-deposit', '102 CKB'],
+          ['deposit-rules.single-compensation-cycle', 'deposit-rules.single-compensation-cycle-description'],
+          ['deposit-rules.withdraw', 'deposit-rules.withdraw-description'],
+          ['deposit-rules.unlock', 'deposit-rules.unlock-description'],
+        ].map(([title, description]) => (
+          <div className={styles.item}>
+            <p>{t(title)}</p>
+            <p className={styles.description}>{t(description)}</p>
+          </div>
+        ))}
+      </div>
+    </Dialog>
+  )
+}
+
+DepositRulesDialog.displayName = 'DepositRulesDialog'
+
+export default DepositRulesDialog

packages/neuron-ui/src/components/NervosDAO/hooks.ts

@@ -2,7 +2,8 @@ import { useEffect, useCallback, useState } from 'react'
 import { AppActions, StateAction } from 'states/stateProvider/reducer'
 import { updateNervosDaoData, clearNervosDaoData } from 'states/stateProvider/actionCreators'
 
-import { calculateAPC, CONSTANTS, isSuccessResponse } from 'utils'
+import { NavigateFunction } from 'react-router-dom'
+import { calculateAPC, CONSTANTS, isSuccessResponse, RoutePath } from 'utils'
 
 import { generateDaoWithdrawTx, generateDaoClaimTx } from 'services/remote'
 import { ckbCore, getHeader } from 'services/chain'
@@ -131,6 +132,7 @@ export const useOnWithdrawDialogSubmit = ({
               payload: {
                 walletID,
                 actionType: 'send',
+                onSuccess: () => {},
               },
             })
           } else {
@@ -158,12 +160,14 @@ export const useOnActionClick = ({
   dispatch,
   walletID,
   setActiveRecord,
+  navigate,
 }: {
   records: Readonly<State.NervosDAORecord[]>
   clearGeneratedTx: () => void
   dispatch: React.Dispatch<StateAction>
   walletID: string
   setActiveRecord: React.Dispatch<State.NervosDAORecord>
+  navigate: NavigateFunction
 }) =>
   useCallback(
     (e: any) => {
@@ -174,7 +178,9 @@ export const useOnActionClick = ({
       }
       const record = records.find(r => r.outPoint.txHash === outPoint.txHash && r.outPoint.index === outPoint.index)
       if (record) {
-        if (record.depositOutPoint) {
+        if (record.status === 'sent') {
+          navigate(`${RoutePath.History}/${record.depositInfo?.txHash}`)
+        } else if (record.depositOutPoint) {
           generateDaoClaimTx({
             walletID,
             withdrawingOutPoint: record.outPoint,
@@ -192,6 +198,7 @@ export const useOnActionClick = ({
                   payload: {
                     walletID,
                     actionType: 'send',
+                    onSuccess: () => {},
                   },
                 })
               } else {