feat(neuron-ui): add popping messages on copying and updating

Author: Keith-CY

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

@@ -21,7 +21,7 @@ import {
 } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
-import { updateTransactionList } from 'states/stateProvider/actionCreators'
+import { updateTransactionList, addPopup } from 'states/stateProvider/actionCreators'
 
 import { showErrorMessage } from 'services/remote'
 
@@ -281,11 +281,11 @@ const Overview = ({
     if (defaultAddress) {
       window.navigator.clipboard.writeText(defaultAddress.identifier)
       hideMinerInfo()
-      // TODO: Add notification
+      addPopup('lock-arg-copid')(dispatch)
     } else {
       showErrorMessage(t('messages.error'), t('messages.can-not-find-the-default-address'))
     }
-  }, [defaultAddress, t, hideMinerInfo])
+  }, [defaultAddress, t, hideMinerInfo, dispatch])
 
   return (
     <Stack tokens={{ childrenGap: 15 }} verticalFill horizontalAlign="stretch">

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

@@ -5,10 +5,12 @@ import { Stack, Text, TextField, TooltipHost, Modal, FontSizes, IconButton } fro
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import QRCode from 'widgets/QRCode'
+import { addPopup } from 'states/stateProvider/actionCreators'
 
 const Receive = ({
   wallet: { addresses = [] },
   match: { params },
+  dispatch,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps<{ address: string }>>) => {
   const [t] = useTranslation()
   const [showLargeQRCode, setShowLargeQRCode] = useState(false)
@@ -23,7 +25,8 @@ const Receive = ({
 
   const copyAddress = useCallback(() => {
     window.navigator.clipboard.writeText(accountAddress)
-  }, [accountAddress])
+    addPopup('addr-copied')(dispatch)
+  }, [accountAddress, dispatch])
 
   if (!accountAddress) {
     return <div>{t('receive.address-not-found')}</div>
@@ -55,7 +58,13 @@ const Receive = ({
         </Stack>
 
         <Stack style={{ alignSelf: 'center' }}>
-          <QRCode value={accountAddress} onQRCodeClick={() => setShowLargeQRCode(true)} size={256} exportable />
+          <QRCode
+            value={accountAddress}
+            onQRCodeClick={() => setShowLargeQRCode(true)}
+            size={256}
+            exportable
+            dispatch={dispatch}
+          />
         </Stack>
       </Stack>
 
@@ -78,7 +87,7 @@ const Receive = ({
           </Text>
         </Stack>
         <Stack tokens={{ padding: '15px' }}>
-          <QRCode value={accountAddress} size={400} />
+          <QRCode value={accountAddress} size={400} dispatch={dispatch} />
         </Stack>
       </Modal>
     </>

packages/neuron-ui/src/containers/Notification/Notification.module.scss

@@ -0,0 +1,33 @@
+.autoDismissMessages {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  position: absolute;
+  right: 0;
+
+  &>div {
+    max-width: auto;
+    margin: 3px;
+    animation: autoDismiss 2.5s ease-out forwards;
+    transform-origin: center top;
+    box-sizing: border-box;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
+  }
+}
+
+@keyframes autoDismiss {
+  from {
+    transform: translateX(110%)
+  }
+
+  15%,
+  85% {
+
+    transform: translateX(0)
+  }
+
+
+  100% {
+    transform: translateX(110%)
+  }
+}

packages/neuron-ui/src/containers/Notification/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { MessageBar, MessageBarType, IconButton } from 'office-ui-fabric-react'
 import { NeuronWalletContext } from 'states/stateProvider'
 import { StateWithDispatch, AppActions } from 'states/stateProvider/reducer'
+import styles from './Notification.module.scss'
 
 const notificationType = (type: 'success' | 'warning' | 'alert') => {
   switch (type) {
@@ -29,7 +30,7 @@ const DismissButton = ({ onDismiss }: { onDismiss: React.MouseEventHandler<HTMLB
 
 const NoticeContent = ({ dispatch }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const {
-    app: { notifications = [] },
+    app: { notifications = [], popups = [] },
   } = useContext(NeuronWalletContext)
   const [t] = useTranslation()
   const onDismiss = useCallback(() => {
@@ -38,28 +39,36 @@ const NoticeContent = ({ dispatch }: React.PropsWithoutRef<StateWithDispatch & R
       payload: null,
     })
   }, [dispatch])
-  if (!notifications.length) {
-    return null
-  }
 
   const notification = notifications[0]
 
   return (
-    <MessageBar
-      messageBarType={notificationType(notification.type)}
-      styles={{
-        root: {
-          flexDirection: 'row',
-        },
-        actions: {
-          margin: 0,
-          marginRight: '12px',
-        },
-      }}
-      actions={<DismissButton onDismiss={onDismiss} />}
-    >
-      {t(notification.content)}
-    </MessageBar>
+    <div>
+      {notifications.length ? (
+        <MessageBar
+          messageBarType={notificationType(notification.type)}
+          styles={{
+            root: {
+              flexDirection: 'row',
+            },
+            actions: {
+              margin: 0,
+              marginRight: '12px',
+            },
+          }}
+          actions={<DismissButton onDismiss={onDismiss} />}
+        >
+          {t(notification.content)}
+        </MessageBar>
+      ) : null}
+      <div className={styles.autoDismissMessages}>
+        {popups.map(popup => (
+          <MessageBar key={`${popup.timestamp}`} messageBarType={MessageBarType.success}>
+            {t(popup.text)}
+          </MessageBar>
+        ))}
+      </div>
+    </div>
   )
 }
 

packages/neuron-ui/src/index.tsx

@@ -5,6 +5,7 @@ import { loadTheme, getTheme } from 'office-ui-fabric-react'
 import {
   AddCircle as AddIcon,
   Alert as AlertIcon,
+  Checkmark as SuccessIcon,
   Close as DismissIcon,
   Copy as CopyIcon,
   Down as ArrowDownIcon,
@@ -58,6 +59,7 @@ const { semanticColors } = theme
 registerIcons({
   icons: {
     errorbadge: <AlertIcon size="16px" />,
+    completed: <SuccessIcon size="16px" />,
     MiniCopy: <CopyIcon size="small" />,
     Search: <SearchIcon size="16px" color={semanticColors.menuIcon} />,
     FirstPage: <LinkTopIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,

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

@@ -217,7 +217,17 @@
       "invalid-mnemonic": "Invalid mnemonic words",
       "camera-not-available-or-disabled": "Camera is unavailable or disabled",
       "can-not-find-the-default-address": "Cannot find the default address",
-      "amount-too-small": "Amount should not be less than 61 CKB"
+      "amount-too-small": "Amount should not be less than 61 CKB",
+      "create-wallet-successfully": "Create a wallet successfully",
+      "import-wallet-successfully": "Import a wallet successfully",
+      "update-wallet-successfully": "Update the wallet successfully",
+      "delete-wallet-successfully": "Delete the wallet successfully",
+      "create-network-successfully": "Create a network successfully",
+      "update-network-successfully": "Update the network successfully",
+      "delete-network-successfully": "Delete the network successfully",
+      "addr-copied": "Address has been copied to the clipboard",
+      "qrcode-copied": "QR Code has been copied to the clipboard",
+      "lock-arg-copid": "Lock Arg has been copied to the clipboard"
     },
     "sync": {
       "syncing": "Syncing",

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

@@ -217,7 +217,17 @@
       "invalid-mnemonic": "助记词不合法",
       "camera-not-available-or-disabled": "摄像头不可用或被禁用",
       "can-not-find-the-default-address": "未获得默认地址",
-      "amount-too-small": "金额应不小于 61 CKB"
+      "amount-too-small": "金额应不小于 61 CKB",
+      "create-wallet-successfully": "新建钱包成功",
+      "import-wallet-successfully": "导入钱包成功",
+      "update-wallet-successfully": "已更新钱包信息",
+      "delete-wallet-successfully": "已删除钱包",
+      "create-network-successfully": "新节点已添加",
+      "update-network-successfully": "已更新节点信息",
+      "delete-network-successfully": "节点已删除",
+      "addr-copied": "地址已复制到剪贴板",
+      "qrcode-copied": "二维码已复制到剪贴板",
+      "lock-arg-copid": "Lock Arg 已复制到剪贴板"
     },
     "sync": {
       "syncing": "同步中",

packages/neuron-ui/src/states/initStates/app.ts

@@ -31,6 +31,7 @@ const appState: State.App = {
     transactions: null,
     wizard: null,
   },
+  popups: [],
   notifications: [],
   loadings: {
     sending: false,

packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts

@@ -85,7 +85,21 @@ export const addNotification = ({ type, content }: { type: 'alert'; content: str
   })
 }
 
+export const addPopup = (text: string) => (dispatch: StateDispatch) => {
+  dispatch({
+    type: AppActions.PopIn,
+    payload: { text: `messages.${text}`, timestamp: Date.now() },
+  })
+  setTimeout(() => {
+    dispatch({
+      type: AppActions.PopOut,
+      payload: null,
+    })
+  }, 3000)
+}
+
 export default {
   initAppState,
   addNotification,
+  addPopup,
 }

packages/neuron-ui/src/states/stateProvider/actionCreators/settings.ts

@@ -1,7 +1,7 @@
 import { createNetwork as createRemoteNetwork, updateNetwork as updateRemoteNetwork } from 'services/remote'
 import { addressBook } from 'utils/localCache'
 import { Routes } from 'utils/const'
-import { addNotification } from './app'
+import { addNotification, addPopup } from './app'
 
 import { AppActions, StateDispatch } from '../reducer'
 
@@ -20,6 +20,7 @@ export const createNetwork = (params: Controller.CreateNetworkParams) => (dispat
         type: AppActions.Ignore,
         payload: null,
       })
+      addPopup('create-network-successfully')(dispatch)
       history.push(Routes.SettingsNetworks)
     } else {
       addNotification({ type: 'alert', content: res.message.title })(dispatch)
@@ -30,10 +31,7 @@ export const createNetwork = (params: Controller.CreateNetworkParams) => (dispat
 export const updateNetwork = (params: Controller.UpdateNetworkParams) => (dispatch: StateDispatch, history: any) => {
   updateRemoteNetwork(params).then(res => {
     if (res.status) {
-      dispatch({
-        type: AppActions.Ignore,
-        payload: null,
-      })
+      addPopup('update-network-successfully')(dispatch)
       history.push(Routes.SettingsNetworks)
     } else {
       addNotification({ type: 'alert', content: res.message.title })(dispatch)