feat: support new customized assets

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

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SpecialAssetCell } from 'components/SpecialAssetList'
 import { MIN_CKB_REQUIRED_BY_NORMAL_SUDT, SHANNON_CKB_RATIO } from 'utils/const'
+import Dialog from 'widgets/Dialog'
 import styles from './sUDTMigrateDialog.module.scss'
 
 const items = [
@@ -21,31 +22,56 @@ const leastSUDTAcccountCapacity = BigInt(MIN_CKB_REQUIRED_BY_NORMAL_SUDT) * BigI
 
 const SUDTMigrateDialog = ({
   cell,
+  isDialogOpen,
+  onCancel,
   openDialog,
 }: {
   cell: SpecialAssetCell
-  openDialog?: (e: React.SyntheticEvent) => void
+  isDialogOpen: boolean
+  onCancel: () => void
+  openDialog?: (type: string) => void
 }) => {
   const [t] = useTranslation()
   const isNewSUDTAccountDisabled = useMemo(() => BigInt(cell.capacity) < leastSUDTAcccountCapacity, [cell.capacity])
+  const [type, setType] = useState<string>('')
+
+  const handleClick = (e: React.SyntheticEvent<HTMLDivElement>) => setType(e.currentTarget.dataset.type!)
+  const handleCancel = () => {
+    setType('')
+    onCancel?.()
+  }
+
   return (
-    <div className={styles.container}>
-      <p>{t('migrate-sudt.title')}</p>
-      {items.map((v, idx) => (
-        <div
-          key={v.title}
-          data-type={v.type}
-          className={`${isNewSUDTAccountDisabled && idx === 0 ? styles.disabled : ''} ${styles.actionContainer}`}
-          onClick={isNewSUDTAccountDisabled && idx === 0 ? undefined : openDialog}
-          onKeyPress={() => {}}
-          role="button"
-          tabIndex={idx}
-        >
-          <div>{t(v.title)}</div>
-          <div className={styles.subTitle}>{t(v.subTitle)}</div>
-        </div>
-      ))}
-    </div>
+    <Dialog
+      className={styles.container}
+      show={isDialogOpen}
+      title={t('migrate-sudt.title')}
+      onCancel={handleCancel}
+      cancelText={t('migrate-sudt.cancel')}
+      confirmText={t('migrate-sudt.next')}
+      confirmProps={{ onClick: () => openDialog?.(type) }}
+      disabled={!type}
+    >
+      <>
+        <div className={styles.chooseTitle}>{t('migrate-sudt.choose-title')}</div>
+        {items.map((v, idx) => (
+          <div
+            key={v.title}
+            data-type={v.type}
+            className={`${isNewSUDTAccountDisabled && idx === 0 ? styles.disabled : ''} ${styles.actionContainer} ${
+              v.type === type ? styles.active : ''
+            } `}
+            onClick={isNewSUDTAccountDisabled && idx === 0 ? undefined : handleClick}
+            onKeyPress={() => {}}
+            role="button"
+            tabIndex={idx}
+          >
+            <div className={styles.title}>{t(v.title)}</div>
+            <div className={styles.subTitle}>{t(v.subTitle)}</div>
+          </div>
+        ))}
+      </>
+    </Dialog>
   )
 }
 

packages/neuron-ui/src/components/SUDTMigrateDialog/sUDTMigrateDialog.module.scss

@@ -1,22 +1,45 @@
 @import '../../styles/mixin.scss';
 
 .container {
-  padding: 12px 48px;
+  width: 680px;
+
+  .chooseTitle {
+    margin: -4px 0 8px 0;
+    color: var(--secondary-text-color);
+  }
+  .title {
+    color: var(--main-text-color);
+    font-weight: 500;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
 }
 
 .actionContainer {
-  border: 1px solid #000;
-  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 16px;
   margin-bottom: 12px;
   font-size: 14px;
   cursor: pointer !important;
 
+  &:hover,
+  &.active {
+    &,
+    .title,
+    .subTitle {
+      color: var(--primary-color);
+      border-color: var(--primary-color);
+    }
+  }
+
   * {
     cursor: pointer !important;
   }
 
   .subTitle {
-    font-size: 12px;
+    font-size: 14px;
+    color: var(--third-text-color);
   }
 
   &.disabled {
@@ -30,4 +53,4 @@
 
 .dialog {
   @include dialog-container;
-}
+}

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SpecialAssetCell } from 'components/SpecialAssetList'
-import Button from 'widgets/Button'
 import TextField from 'widgets/TextField'
+import Dialog from 'widgets/Dialog'
 import { AnyoneCanPayLockInfoOnAggron, getSUDTAmount, isSuccessResponse, validateSpecificAddress } from 'utils'
 import InputSelect from 'widgets/InputSelect'
 import { generateSudtMigrateAcpTx } from 'services/remote'
@@ -12,20 +12,22 @@ import styles from './sUDTMigrateToExistAccountDialog.module.scss'
 
 const SUDTMigrateToExistAccountDialog = ({
   cell,
-  closeDialog,
   tokenInfo,
   sUDTAccounts,
   isMainnet,
   walletID,
   isLightClient,
+  isDialogOpen,
+  onCancel,
 }: {
   cell: SpecialAssetCell
-  closeDialog: () => void
   tokenInfo?: Controller.GetTokenInfoList.TokenInfo
   sUDTAccounts: State.SUDTAccount[]
   isMainnet: boolean
   walletID: string
   isLightClient: boolean
+  isDialogOpen: boolean
+  onCancel: () => void
 }) => {
   const [t] = useTranslation()
   const [address, setAddress] = useState('')
@@ -54,7 +56,7 @@ const SUDTMigrateToExistAccountDialog = ({
       outPoint: cell.outPoint,
       acpAddress: address,
     }).then(res => {
-      closeDialog()
+      onCancel()
       if (isSuccessResponse(res)) {
         if (res.result) {
           dispatch({
@@ -82,13 +84,22 @@ const SUDTMigrateToExistAccountDialog = ({
         })
       }
     })
-  }, [cell.outPoint, address, t, closeDialog, dispatch, walletID])
+  }, [cell.outPoint, address, t, onCancel, dispatch, walletID])
+
   return (
-    <div>
-      <p>{t('migrate-sudt.transfer-to-exist-account.title')}</p>
-      <div>
+    <Dialog
+      className={styles.container}
+      show={isDialogOpen}
+      title={t('migrate-sudt.transfer-to-exist-account.title')}
+      onCancel={onCancel}
+      cancelText={t('migrate-sudt.back')}
+      confirmText={t('migrate-sudt.next')}
+      confirmProps={{ onClick: onSumbit }}
+      disabled={!address || !!addressError}
+    >
+      <>
         <div className={styles.addressContainer}>
-          <div>{`${t('migrate-sudt.address')} *`}</div>
+          <div className={styles.addressLabel}>{t('migrate-sudt.address')}</div>
           <InputSelect
             options={sUDTAddresses.map(v => ({ label: v, value: v }))}
             onChange={onAddressChange}
@@ -105,17 +116,8 @@ const SUDTMigrateToExistAccountDialog = ({
           required
           disabled
         />
-      </div>
-      <div className={styles.actions}>
-        <Button label={t('migrate-sudt.cancel')} type="cancel" onClick={closeDialog} />
-        <Button
-          label={t('migrate-sudt.confirm')}
-          type="primary"
-          onClick={onSumbit}
-          disabled={!address || !!addressError}
-        />
-      </div>
-    </div>
+      </>
+    </Dialog>
   )
 }
 

packages/neuron-ui/src/components/SUDTMigrateToExistAccountDialog/sUDTMigrateToExistAccountDialog.module.scss

@@ -1,37 +1,30 @@
 @import '../../styles/mixin.scss';
 
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 8px;
-
-  & > button {
-    margin-left: 4px;
-  }
+.container {
+  width: 680px;
 }
 
 .addressContainer {
-  width: 424px;
-  margin-bottom: 8px;
+  margin-bottom: 20px;
+
+  .addressLabel::after {
+    display: inline;
+    content: '*';
+    padding-left: 10px;
+  }
 
   & > div:first-child {
     font-size: 0.875rem;
     line-height: 1.125rem;
-    color: #000000;
-    margin-bottom: 2px;
+    color: #8da394;
+    margin-bottom: 10px;
     display: block;
   }
-
-  .addressInputSelect {
-    & > div:first-child {
-      height: 26px;
-    }
-  }
 }
 
 .error {
   color: red;
   font-size: 12px;
   width: 100%;
   word-break: break-all;
-}
+}

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

@@ -5,6 +5,7 @@ import { useSUDTAccountInfoErrors } from 'utils'
 export type TokenInfoType = Omit<Controller.GetTokenInfoList.TokenInfo, 'tokenID'> & {
   tokenId: string
   accountName: string
+  balance?: string
 }
 
 export const useTokenInfo = ({
@@ -24,6 +25,7 @@ export const useTokenInfo = ({
     symbol: '',
     tokenName: '',
     decimal: '',
+    balance: '',
   })
   useEffect(() => {
     if (findTokenInfo) {
@@ -33,6 +35,7 @@ export const useTokenInfo = ({
         symbol: findTokenInfo.symbol,
         tokenName: findTokenInfo.tokenName,
         decimal: findTokenInfo.decimal,
+        balance: '',
       })
     }
   }, [findTokenInfo])