feat: support new customized assets (#2667)

* feat: support new customized assets

* fix: issue 230

* fix: pr

---------

Co-authored-by: chenyan <sgt39007@163.com>

packages/neuron-ui/src/components/NFTSend/NFTSend.module.scss

@@ -1,89 +1,24 @@
 @import '../../styles/mixin.scss';
 
-.title {
-  @include page-title;
-}
-
-.card {
-  background: #fff;
-  padding: 20px;
-  margin: 20px auto;
-  border-radius: 6px;
-  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.12);
-}
+.container {
+  width: 648px;
 
-.send {
-  display: flex;
-  flex-direction: column;
-  padding: 15px 30px 20px;
-
-  .address {
-    grid-area: address;
-  }
-
-  .description {
-    grid-area: description;
-  }
-
-  .descriptionField {
-    & > div {
-      border-color: transparent transparent #aaa !important;
-    }
-  }
-  .remoteError {
-    display: flex;
-    align-items: center;
-    height: 15px;
-    padding-bottom: 15px;
-    grid-area: remote-error;
-    font-size: 0.75rem;
-    color: #d50000;
-    svg {
-      width: 15px;
-      height: 15px;
-      margin-right: 5px;
-    }
+  .textFieldClass {
+    margin-bottom: 10px;
   }
 }
 
-.footer {
+.remoteError {
   display: flex;
-  justify-content: flex-end;
-}
-
-.modal {
-  @include overlay;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
   align-items: center;
-  &[hidden] {
-    display: none;
-  }
-  h2 {
-    @include dialog-title;
-  }
-  .passwordDialog {
-    @include dialog-container;
-    background: #fff;
-    padding: 49px 73px;
-  }
-  .dialogFooter {
-    @include dialog-footer;
-    button {
-      margin-left: 5px;
-    }
+  height: 15px;
+  padding-bottom: 15px;
+  grid-area: remote-error;
+  font-size: 0.75rem;
+  color: #d50000;
+  svg {
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
   }
 }
-
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100vh;
-}

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

@@ -1,13 +1,11 @@
 import React, { useState, useCallback, useReducer, useMemo, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation, useParams } from 'react-router-dom'
 import { useState as useGlobalState, useDispatch, AppActions } from 'states'
 import { isMainnet as isMainnetUtil, isSuccessResponse, validateAddress } from 'utils'
 import useGetCountDownAndFeeRateStats from 'utils/hooks/useGetCountDownAndFeeRateStats'
 import TextField from 'widgets/TextField'
+import Dialog from 'widgets/Dialog'
 import { generateNFTSendTransaction } from 'services/remote'
-import Button from 'widgets/Button'
-import { ReactComponent as Attention } from 'widgets/Icons/Attention.svg'
 import { isErrorWithI18n } from 'exceptions'
 import styles from './NFTSend.module.scss'
 
@@ -36,8 +34,20 @@ const reducer: React.Reducer<typeof initState, { type: Fields; payload: string }
   }
 }
 
-const NFTSend = () => {
-  const { nftId } = useParams<{ nftId: string }>()
+const NFTSend = ({
+  onCancel,
+  cell,
+}: {
+  onCancel: () => void
+  cell: {
+    nftId: string
+    outPoint: {
+      index: string
+      txHash: string
+    }
+  }
+}) => {
+  const { nftId, outPoint } = cell
   const {
     wallet: { id: walletId },
     app: {
@@ -95,15 +105,13 @@ const NFTSend = () => {
             actionType: 'send-nft',
           },
         })
+
+        onCancel()
       }
     },
     [isSubmittable, globalDispatch, walletId]
   )
 
-  const location = useLocation()
-
-  const outPoint = location.state?.outPoint
-
   useEffect(() => {
     const clearTimer = () => {
       if (timerRef.current) {
@@ -144,44 +152,36 @@ const NFTSend = () => {
   }, [isSubmittable, globalDispatch, sendState, walletId, outPoint, suggestFeeRate])
 
   return (
-    <div>
-      <div className={styles.title}>{`#${nftId} mNFT`}</div>
-      <form onSubmit={onSubmit}>
-        <div className={styles.card}>
-          <div className={styles.send}>
-            <TextField
-              label={t('s-udt.send.address')}
-              value={sendState.address}
-              required
-              field={Fields.Address}
-              onChange={onInput}
-              error={addressError}
-            />
-            <div className={styles.description}>
-              <TextField
-                label={t('s-udt.send.description')}
-                value={sendState.description}
-                field={Fields.Description}
-                onChange={onInput}
-                placeholder={t('s-udt.send.click-to-edit')}
-                className={styles.descriptionField}
-              />
-            </div>
-            <div className={styles.remoteError}>
-              {remoteError ? (
-                <>
-                  <Attention />
-                  {remoteError}
-                </>
-              ) : null}
-            </div>
-          </div>
-        </div>
-      </form>
-      <div className={styles.footer}>
-        <Button type="submit" label={t('s-udt.send.submit')} onClick={onSubmit} disabled={!isSubmittable} />
+    <Dialog
+      show
+      title={`${t('special-assets.transfer-nft')} #${nftId} mNFT`}
+      disabled={!isSubmittable}
+      onCancel={onCancel}
+      onConfirm={onSubmit}
+      confirmText={t('wizard.next')}
+    >
+      <div className={styles.container}>
+        <TextField
+          className={styles.textFieldClass}
+          label={t('migrate-sudt.address')}
+          placeholder={t('s-udt.send.input-address')}
+          value={sendState.address}
+          rows={sendState.address ? 2 : 1}
+          field={Fields.Address}
+          onChange={onInput}
+          error={addressError}
+        />
+        <TextField
+          label={t('s-udt.send.description')}
+          value={sendState.description}
+          field={Fields.Description}
+          onChange={onInput}
+          placeholder={t('s-udt.send.input-description')}
+          className={styles.descriptionField}
+          error={remoteError}
+        />
       </div>
-    </div>
+    </Dialog>
   )
 }
 

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 leastSUDTAccountCapacity = BigInt(MIN_CKB_REQUIRED_BY_NORMAL_SUDT) * BigIn
 
 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) < leastSUDTAccountCapacity, [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;
-}
+}