feat: support new customized assets

nervosnetwork · May 14, 2023 · 1cfd17f · 1cfd17f
1 parent 93a5da4
commit 1cfd17f
Show file tree

Hide file tree

Showing 21 changed files with 1,012 additions and 328 deletions.
diff --git a/packages/neuron-ui/src/components/SUDTMigrateDialog/index.tsx b/packages/neuron-ui/src/components/SUDTMigrateDialog/index.tsx
@@ -1,7 +1,9 @@
-import React, { useMemo } from 'react'
+/* eslint-disable no-console */
+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 +23,58 @@ 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>
   )
 }
 

diff --git a/packages/neuron-ui/src/components/SUDTMigrateDialog/sUDTMigrateDialog.module.scss b/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;
-}
+}
diff --git a/packages/neuron-ui/src/components/SUDTMigrateToExistAccountDialog/index.tsx b/packages/neuron-ui/src/components/SUDTMigrateToExistAccountDialog/index.tsx
@@ -1,29 +1,32 @@
+/* eslint-disable no-console */
 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 { AnyoneCanPayLockInfoOnAggron, getSUDTAmount, isSuccessResponse, validateSpecificAddress } from 'utils'
 import InputSelect from 'widgets/InputSelect'
 import { generateSudtMigrateAcpTx } from 'services/remote'
 import { AppActions, useDispatch } from 'states'
 import { isErrorWithI18n } from 'exceptions'
+import Dialog from 'widgets/Dialog'
 import styles from './sUDTMigrateToExistAccountDialog.module.scss'
 
 const SUDTMigrateToExistAccountDialog = ({
   cell,
-  closeDialog,
   tokenInfo,
   sUDTAccounts,
   isMainnet,
   walletID,
+  isDialogOpen,
+  onCancel,
 }: {
   cell: SpecialAssetCell
-  closeDialog: () => void
   tokenInfo?: Controller.GetTokenInfoList.TokenInfo
   sUDTAccounts: State.SUDTAccount[]
   isMainnet: boolean
   walletID: string
+  isDialogOpen: boolean
+  onCancel: () => void
 }) => {
   const [t] = useTranslation()
   const [address, setAddress] = useState('')
@@ -52,7 +55,7 @@ const SUDTMigrateToExistAccountDialog = ({
       outPoint: cell.outPoint,
       acpAddress: address,
     }).then(res => {
-      closeDialog()
+      onCancel()
       if (isSuccessResponse(res)) {
         if (res.result) {
           dispatch({
@@ -80,18 +83,28 @@ 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.cancel')}
+      confirmText={t('migrate-sudt.confirm')}
+      confirmProps={{ onClick: onSumbit }}
+      disabled={!address || !!addressError}
+    >
+      <>
         <div className={styles.addressContainer}>
           <div>{`${t('migrate-sudt.address')} *`}</div>
           <InputSelect
             options={sUDTAddresses.map(v => ({ label: v, value: v }))}
             onChange={onAddressChange}
             value={address}
             className={styles.addressInputSelect}
+            isNewUI
           />
           {addressError && <div className={styles.error}>{addressError}</div>}
         </div>
@@ -102,17 +115,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>
   )
 }
 

diff --git a/...rc/components/SUDTMigrateToExistAccountDialog/sUDTMigrateToExistAccountDialog.module.scss b/...rc/components/SUDTMigrateToExistAccountDialog/sUDTMigrateToExistAccountDialog.module.scss
@@ -1,17 +1,10 @@
 @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;
 
   & > div:first-child {
@@ -21,17 +14,11 @@
     margin-bottom: 2px;
     display: block;
   }
-
-  .addressInputSelect {
-    & > div:first-child {
-      height: 26px;
-    }
-  }
 }
 
 .error {
   color: red;
   font-size: 12px;
   width: 100%;
   word-break: break-all;
-}
+}
diff --git a/packages/neuron-ui/src/components/SUDTMigrateToNewAccountDialog/index.tsx b/packages/neuron-ui/src/components/SUDTMigrateToNewAccountDialog/index.tsx
@@ -1,34 +1,38 @@
+/* eslint-disable no-console */
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SpecialAssetCell } from 'components/SpecialAssetList'
-import Button from 'widgets/Button'
+// import Button from 'widgets/Button'
 import TextField from 'widgets/TextField'
 import { getSUDTAmount, isSuccessResponse } from 'utils'
 import { generateSudtMigrateAcpTx } from 'services/remote'
 import { AppActions, useDispatch } from 'states'
+import Dialog from 'widgets/Dialog'
 import { useTokenInfo, TokenInfoType } from './hooks'
 import styles from './sUDTMigrateToNewAccountDialog.module.scss'
 
 const fields: { key: keyof TokenInfoType; label: string }[] = [
-  { key: 'accountName', label: 'account-name' },
   { key: 'tokenId', label: 'token-id' },
+  { key: 'accountName', label: 'account-name' },
   { key: 'tokenName', label: 'token-name' },
   { key: 'symbol', label: 'symbol' },
   { key: 'decimal', label: 'decimal' },
 ]
 
 const SUDTMigrateToNewAccountDialog = ({
   cell,
-  closeDialog,
   tokenInfo: findTokenInfo,
   sUDTAccounts,
   walletID,
+  isDialogOpen,
+  onCancel,
 }: {
   cell: SpecialAssetCell
-  closeDialog: () => void
   tokenInfo?: Controller.GetTokenInfoList.TokenInfo
   sUDTAccounts: State.SUDTAccount[]
   walletID: string
+  isDialogOpen: boolean
+  onCancel: () => void
 }) => {
   const [t] = useTranslation()
   const dispatch = useDispatch()
@@ -47,7 +51,7 @@ const SUDTMigrateToNewAccountDialog = ({
     generateSudtMigrateAcpTx({
       outPoint: cell.outPoint,
     }).then(res => {
-      closeDialog()
+      onCancel()
       if (isSuccessResponse(res)) {
         if (res.result) {
           dispatch({
@@ -84,31 +88,40 @@ const SUDTMigrateToNewAccountDialog = ({
         })
       }
     })
-  }, [cell, t, closeDialog, walletID, tokenInfo, dispatch, sudtAmount])
+  }, [cell, t, onCancel, walletID, tokenInfo, dispatch, sudtAmount])
+
+  const renderList = fields.map(field => (
+    <TextField
+      key={field.key}
+      label={t(`s-udt.create-dialog.${field.label}`)}
+      onChange={onChangeTokenInfo}
+      field={field.key}
+      value={tokenInfo[field.key]}
+      required
+      error={tokenInfoErrors[field.key]}
+      disabled={(!!findTokenInfo && field.key !== 'accountName') || field.key === 'tokenId'}
+      autoFocus
+    />
+  ))
+  renderList.splice(
+    1,
+    0,
+    <TextField label={t(`migrate-sudt.balance`)} field="balance" value={sudtAmount.amount} required disabled />
+  )
+
   return (
-    <div>
-      <p>{t('migrate-sudt.turn-into-new-account.title')}</p>
-      <div>
-        {fields.map(field => (
-          <TextField
-            key={field.key}
-            label={t(`s-udt.create-dialog.${field.label}`)}
-            onChange={onChangeTokenInfo}
-            field={field.key}
-            value={tokenInfo[field.key]}
-            required
-            error={tokenInfoErrors[field.key]}
-            disabled={(!!findTokenInfo && field.key !== 'accountName') || field.key === 'tokenId'}
-            autoFocus
-          />
-        ))}
-        <TextField label={t(`migrate-sudt.balance`)} field="balance" value={sudtAmount.amount} 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" disabled={confirmDisabled} onClick={onSumbit} />
-      </div>
-    </div>
+    <Dialog
+      className={styles.container}
+      show={isDialogOpen}
+      title={t('migrate-sudt.turn-into-new-account.title')}
+      onCancel={onCancel}
+      cancelText={t('migrate-sudt.cancel')}
+      confirmText={t('migrate-sudt.confirm')}
+      confirmProps={{ onClick: onSumbit }}
+      disabled={confirmDisabled}
+    >
+      <div className={styles.filedWrap}>{renderList}</div>
+    </Dialog>
   )
 }