Feat new UI receive

packages/neuron-ui/public/css/fonts.css

@@ -25,3 +25,15 @@
   src: url('../fonts/D-DIN-PRO-500-Medium.otf') format('opentype'),
       url('../fonts/D-DIN-PRO-500-Medium.ttf') format('opentype');
 }
+
+@font-face {
+  font-family: 'JetBrains Mono Medium';
+  src: url('../fonts/JetBrainsMonoNL-Medium.otf') format('opentype'),
+      url('../fonts/JetBrainsMonoNL-Medium.ttf') format('opentype');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('../fonts/JetBrainsMonoNL-Regular.otf') format('opentype'),
+      url('../fonts/JetBrainsMonoNL-Regular.ttf') format('opentype');
+}

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

@@ -81,11 +81,7 @@ const ClearCache = ({ dispatch }: { dispatch: StateDispatch }) => {
       <div className={styles.clearedDate}>{t('settings.data.cache-cleared-on', { date: clearedDate })}</div>
       <Button label={t('settings.data.clear-cache')} onClick={showDialog} disabled={isClearing}>
         {isClearing ? (
-          <Spinner
-            label={t('settings.data.clearing-cache')}
-            labelPosition="right"
-            styles={{ root: { marginRight: 5 } }}
-          />
+          <Spinner label={t('settings.data.clearing-cache')} labelPosition="right" />
         ) : (
           (t('settings.data.clear-cache') as string)
         )}

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

@@ -52,11 +52,7 @@ const SetItem = () => {
             onClick={onConfirm}
           >
             {isSaving && savingType === 'move' ? (
-              <Spinner
-                label={t('settings.data.move-data-finish')}
-                labelPosition="right"
-                styles={{ root: { marginRight: 5 }, label: { color: '#FFF' } }}
-              />
+              <Spinner label={t('settings.data.move-data-finish')} labelPosition="right" />
             ) : (
               (t('settings.data.move-data-finish') as string)
             )}
@@ -70,11 +66,7 @@ const SetItem = () => {
             onClick={onConfirm}
           >
             {isSaving && savingType === 'resync' ? (
-              <Spinner
-                label={t('settings.data.re-sync')}
-                labelPosition="right"
-                styles={{ root: { marginRight: 5 }, label: { color: '#FFF' } }}
-              />
+              <Spinner label={t('settings.data.re-sync')} labelPosition="right" />
             ) : (
               (t('settings.data.re-sync') as string)
             )}

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useCallback, useRef } from 'react'
-import { Slider, SpinnerSize } from 'office-ui-fabric-react'
+import { Slider } from 'office-ui-fabric-react'
 import { useTranslation, Trans } from 'react-i18next'
 import TextField from 'widgets/TextField'
-import Spinner from 'widgets/Spinner'
+import Spinner, { SpinnerSize } from 'widgets/Spinner'
 import Button from 'widgets/Button'
 import { ReactComponent as Attention } from 'widgets/Icons/Attention.svg'
 import { openExternal } from 'services/remote'

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

@@ -112,11 +112,7 @@ const GeneralSetting = ({ updater }: GeneralSettingProps) => {
               disabled={updater.checking}
             >
               {updater.checking ? (
-                <Spinner
-                  styles={{ root: { marginRight: 5 } }}
-                  label={t('updates.checking-updates')}
-                  labelPosition="right"
-                />
+                <Spinner label={t('updates.checking-updates')} labelPosition="right" />
               ) : (
                 (t('updates.check-updates') as string)
               )}

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

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Panel, PanelType, SpinnerSize } from 'office-ui-fabric-react'
+import { Panel, PanelType } from 'office-ui-fabric-react'
 import { useState as useGlobalState } from 'states'
 import { RoutePath } from 'utils'
-import Spinner from 'widgets/Spinner'
+import Spinner, { SpinnerSize } from 'widgets/Spinner'
 
 export const LaunchScreen = () => {
   const {

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

@@ -94,7 +94,7 @@ const TransactionStatus = ({
   }
   return (
     <div className={styles.txStatus} data-status={status}>
-      {status === 'confirming' ? <Confirming className={styles.confirm} /> : null}
+      {status === 'confirming' ? <Confirming /> : null}
       <span>{t(`overview.statusLabel.${status}`)}</span>
       {confirmations ? <span className={styles.confirmText}>{confirmations}</span> : null}
     </div>
@@ -320,7 +320,6 @@ const Overview = () => {
             title: t('overview.status'),
             dataIndex: 'status',
             align: 'left',
-            className: styles.txStatusTh,
             render(_, __, item) {
               return (
                 <TransactionStatus

packages/neuron-ui/src/components/Overview/overview.module.scss

@@ -83,14 +83,9 @@
   }
 }
 
-.txStatusTh {
-  padding-left: 34px !important;
-}
-
 .txStatus {
   display: flex;
   position: relative;
-  padding-left: 16px;
   align-items: center;
 
   .confirmText {
@@ -99,9 +94,8 @@
     margin-left: 4px;
   }
 
-  .confirm {
-    position: absolute;
-    left: -4px;
+  & > svg {
+    margin-right: 4px;
   }
 
   &[data-status="failed"] {

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

@@ -35,7 +35,11 @@ const getNetworkTypeLable = (type: 'ckb' | 'ckb_testnet' | 'ckb_dev' | string) =
   }
 }
 
-type ComponentProps = { head: React.ReactNode; notice?: State.PageNotice; className?: string }
+type ComponentProps = {
+  head: React.ReactNode
+  notice?: State.PageNotice
+  className?: string
+} & React.AllHTMLAttributes<HTMLDivElement>
 const PageContainer: React.FC<ComponentProps> = props => {
   const {
     app: { showWaitForFullySynced },
@@ -61,7 +65,7 @@ const PageContainer: React.FC<ComponentProps> = props => {
         setTheme(res.result ? 'dark' : 'light')
       }
     })
-  })
+  }, [])
   const onSetTheme = useCallback(() => {
     const newTheme = theme === 'dark' ? 'light' : 'dark'
     setThemeAPI(newTheme).then(res => {

packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss

@@ -103,6 +103,12 @@
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
+
+    @media (prefers-color-scheme: dark) {
+      path {
+        fill: #8DA394;
+      }
+    }
   }
 }
 

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

@@ -0,0 +1,50 @@
+import { AddressPrefix, addressToScript, bech32Address } from '@nervosnetwork/ckb-sdk-utils'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { copyCanvas, downloadCanvas } from 'widgets/QRCode'
+
+export const useCopyAndDownloadQrCode = () => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const onDownloadQrCode = useCallback(() => {
+    const canvasElement = ref.current?.querySelector('canvas')
+    if (canvasElement) {
+      downloadCanvas(canvasElement)
+    }
+  }, [ref])
+  const [showCopySuccess, setShowCopySuccess] = useState(false)
+  const onCopyQrCode = useCallback(() => {
+    setShowCopySuccess(false)
+    const canvasElement = ref.current?.querySelector('canvas')
+    if (canvasElement) {
+      copyCanvas(canvasElement)
+      setTimeout(() => {
+        setShowCopySuccess(true)
+      }, 1)
+    }
+  }, [ref])
+  return {
+    ref,
+    onDownloadQrCode,
+    onCopyQrCode,
+    showCopySuccess,
+  }
+}
+
+const toShortAddr = (addr: string) => {
+  try {
+    const script = addressToScript(addr)
+    const isMainnet = addr.startsWith('ckb')
+    return bech32Address(script.args, { prefix: isMainnet ? AddressPrefix.Mainnet : AddressPrefix.Testnet })
+  } catch {
+    return ''
+  }
+}
+
+export const useSwitchAddress = (address: string) => {
+  const [isInShortFormat, setIsInShortFormat] = useState(false)
+  const showAddress = useMemo(() => (isInShortFormat ? toShortAddr(address) : address), [address, isInShortFormat])
+  return {
+    address: showAddress,
+    isInShortFormat,
+    setIsInShortFormat,
+  }
+}

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

@@ -1,108 +1,47 @@
-import React, { useCallback, useMemo, useState } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
+import React, { useMemo } from 'react'
+import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { addressToScript, bech32Address, AddressPrefix } from '@nervosnetwork/ckb-sdk-utils'
-import Button from 'widgets/Button'
-import QRCode from 'widgets/QRCode'
-import CopyZone from 'widgets/CopyZone'
-import { RoutePath } from 'utils'
-import { useState as useGlobalState, useDispatch } from 'states'
-import { ReactComponent as AddressToggleIcon } from 'widgets/Icons/AddressTransform.svg'
-import VerifyHardwareAddress from 'components/VerifyHardwareAddress'
-import styles from './receive.module.scss'
-
-const toShortAddr = (addr: string) => {
-  try {
-    const script = addressToScript(addr)
-    const isMainnet = addr.startsWith('ckb')
-    return bech32Address(script.args, { prefix: isMainnet ? AddressPrefix.Mainnet : AddressPrefix.Testnet })
-  } catch {
-    return ''
-  }
-}
+import { useState as useGlobalState } from 'states'
+import PageContainer from 'components/PageContainer'
+import SignleAddressReceive from './singleAddressReceive'
+import MultiAddressReceive from './multiAddressReceive'
 
 const Receive = () => {
-  const { wallet } = useGlobalState()
-  const dispatch = useDispatch()
+  const {
+    app: { pageNotice },
+    wallet,
+  } = useGlobalState()
   const [t] = useTranslation()
   const { address } = useParams<{ address: string }>()
-  const navigate = useNavigate()
-  const [displayVerifyDialog, setDisplayVerifyDialog] = useState(false)
-  const [isInShortFormat, setIsInShortFormat] = useState(false)
-  const { addresses } = wallet
+  const { addresses, id: walletId } = wallet
   const isSingleAddress = addresses.length === 1
 
   const accountAddress = useMemo(() => {
-    let addr = ''
     if (isSingleAddress) {
-      addr = addresses[0].address
-    } else {
-      addr = (address || addresses.find(a => a.type === 0 && a.txCount === 0)?.address) ?? ''
+      return addresses[0].address
     }
-    return isInShortFormat ? toShortAddr(addr) : addr
-  }, [address, addresses, isSingleAddress, isInShortFormat])
-
-  const onAddressBookClick = useCallback(() => {
-    navigate(RoutePath.Addresses)
-  }, [navigate])
-
-  const onVerifyAddressClick = useCallback(() => {
-    setDisplayVerifyDialog(true)
-  }, [])
+    return (address || addresses.find(a => a.type === 0 && a.txCount === 0)?.address) ?? ''
+  }, [address, addresses, isSingleAddress])
 
   if (!accountAddress) {
     return <div>{t('receive.address-not-found')}</div>
   }
 
   return (
-    <div
+    <PageContainer
       onContextMenu={e => {
         e.stopPropagation()
         e.preventDefault()
       }}
+      head={t('receive.title')}
+      notice={pageNotice}
     >
-      <div className={styles.title}>{t('receive.title')}</div>
-      <QRCode value={accountAddress} size={220} includeMargin dispatch={dispatch} />
-      <div className={styles.address}>
-        <CopyZone content={accountAddress} name={t('receive.copy-address')} style={{ lineHeight: '1.625rem' }}>
-          {accountAddress}
-        </CopyZone>
-        <button
-          type="button"
-          className={styles.addressToggle}
-          onClick={() => setIsInShortFormat(is => !is)}
-          title={t(isInShortFormat ? `receive.turn-into-full-version-fomrat` : `receive.turn-into-deprecated-format`)}
-        >
-          <AddressToggleIcon />
-        </button>
-      </div>
-      {isSingleAddress ? null : <p className={styles.notation}>{t('receive.prompt')}</p>}
-      {isSingleAddress ? null : (
-        <Button
-          type="primary"
-          className={styles.addressBook}
-          label={t('receive.address-book')}
-          onClick={onAddressBookClick}
-        />
-      )}
-      {isSingleAddress && (
-        <Button
-          type="primary"
-          className={styles.addressBook}
-          label={t('receive.verify-address')}
-          onClick={onVerifyAddressClick}
-        />
-      )}
-      {displayVerifyDialog && (
-        <VerifyHardwareAddress
-          address={accountAddress}
-          wallet={wallet}
-          onDismiss={() => {
-            setDisplayVerifyDialog(false)
-          }}
-        />
+      {isSingleAddress ? (
+        <SignleAddressReceive address={accountAddress} wallet={wallet} />
+      ) : (
+        <MultiAddressReceive address={accountAddress} addresses={addresses} walletId={walletId} />
       )}
-    </div>
+    </PageContainer>
   )
 }