feat: Manage Nervos DAO with multisig address

Author: devchenyan

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

@@ -298,12 +298,58 @@ const useApproveAction = () => {
   }
 }
 
+const useDaoDepositAction = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [sendFromMultisig, setSendFromMultisig] = useState<MultisigConfig | undefined>()
+  const onOpenSendDialog = useCallback(
+    (option: MultisigConfig) => {
+      setIsDialogOpen(true)
+      setSendFromMultisig(option)
+    },
+    [setIsDialogOpen, setSendFromMultisig]
+  )
+  const closeDialog = useCallback(() => {
+    setIsDialogOpen(false)
+  }, [setIsDialogOpen])
+
+  return {
+    action: onOpenSendDialog,
+    closeDialog,
+    sendFromMultisig,
+    isDialogOpen,
+  }
+}
+
+const useDaoWithdrawAction = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [sendFromMultisig, setSendFromMultisig] = useState<MultisigConfig | undefined>()
+  const onOpenSendDialog = useCallback(
+    (option: MultisigConfig) => {
+      setIsDialogOpen(true)
+      setSendFromMultisig(option)
+    },
+    [setIsDialogOpen, setSendFromMultisig]
+  )
+  const closeDialog = useCallback(() => {
+    setIsDialogOpen(false)
+  }, [setIsDialogOpen])
+
+  return {
+    action: onOpenSendDialog,
+    closeDialog,
+    sendFromMultisig,
+    isDialogOpen,
+  }
+}
+
 export const useActions = ({ deleteConfigById }: { deleteConfigById: (id: number) => void }) => {
   return {
     deleteAction: useDeleteAction(deleteConfigById),
     infoAction: useInfoAction(),
     sendAction: useSendAction(),
     approveAction: useApproveAction(),
+    daoDepositAction: useDaoDepositAction(),
+    daoWithdrawAction: useDaoWithdrawAction(),
   }
 }
 

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

@@ -30,6 +30,8 @@ import {
   Confirming,
   Question,
   LineDownArrow,
+  DAODeposit,
+  DAOWithdrawal,
 } from 'widgets/Icons/icon'
 import AttentionCloseDialog from 'widgets/Icons/Attention.png'
 import { HIDE_BALANCE, NetworkType } from 'utils/const'
@@ -68,6 +70,14 @@ const tableActions = [
     key: ApproveKey,
     icon: <Confirm />,
   },
+  {
+    key: 'daoDeposit',
+    icon: <DAODeposit />,
+  },
+  {
+    key: 'daoWithdraw',
+    icon: <DAOWithdrawal />,
+  },
 ]
 
 const LearnMore = React.memo(({ t }: { t: TFunction }) => (
@@ -120,7 +130,9 @@ const MultisigAddress = () => {
     configs: allConfigs,
     isLightClient,
   })
-  const { deleteAction, infoAction, sendAction, approveAction } = useActions({ deleteConfigById })
+  const { deleteAction, infoAction, sendAction, approveAction, daoDepositAction, daoWithdrawAction } = useActions({
+    deleteConfigById,
+  })
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
 
   const onClickItem = useCallback(
@@ -142,6 +154,12 @@ const MultisigAddress = () => {
         case 'approve':
           approveAction.action(multisigConfig)
           break
+        case 'daoDeposit':
+          daoDepositAction.action(multisigConfig)
+          break
+        case 'daoWithdraw':
+          daoWithdrawAction.action(multisigConfig)
+          break
         default:
           break
       }
@@ -522,6 +540,22 @@ const MultisigAddress = () => {
           onCancel={onCancel}
         />
       ) : null}
+
+      {daoDepositAction.sendFromMultisig && daoDepositAction.isDialogOpen ? (
+        <SendFromMultisigDialog
+          closeDialog={daoDepositAction.closeDialog}
+          multisigConfig={daoDepositAction.sendFromMultisig}
+          balance={sendTotalBalance}
+        />
+      ) : null}
+
+      {daoWithdrawAction.sendFromMultisig && daoWithdrawAction.isDialogOpen ? (
+        <SendFromMultisigDialog
+          closeDialog={daoWithdrawAction.closeDialog}
+          multisigConfig={daoWithdrawAction.sendFromMultisig}
+          balance={sendTotalBalance}
+        />
+      ) : null}
     </div>
   )
 }

packages/neuron-ui/src/locales/en.json

@@ -1128,7 +1128,9 @@
           "info": "Info",
           "send": "Send",
           "approve": "Approve",
-          "delete": "Delete"
+          "delete": "Delete",
+          "daoDeposit": "DAO Deposit",
+          "daoWithdraw": "DAO Withdraw"
         }
       },
       "import-dialog": {

packages/neuron-ui/src/widgets/Icons/DAODeposit.svg

@@ -62,6 +62,8 @@ import { ReactComponent as QuestionSvg } from './Question.svg'
 import { ReactComponent as DetailsSvg } from './Details.svg'
 import { ReactComponent as ConfirmSvg } from './Confirm.svg'
 import { ReactComponent as UploadSvg } from './Upload.svg'
+import { ReactComponent as DAODepositSvg } from './DAODeposit.svg'
+import { ReactComponent as DAOWithdrawalSvg } from './DAOWithdrawal.svg'
 
 import styles from './icon.module.scss'
 
@@ -140,3 +142,5 @@ export const Question = WrapSvg(QuestionSvg)
 export const Details = WrapSvg(DetailsSvg)
 export const Confirm = WrapSvg(ConfirmSvg)
 export const Upload = WrapSvg(UploadSvg)
+export const DAODeposit = WrapSvg(DAODepositSvg)
+export const DAOWithdrawal = WrapSvg(DAOWithdrawalSvg)