feat: events

Author: devchenyan

packages/neuron-ui/package.json

@@ -53,7 +53,7 @@
     "@nervosnetwork/ckb-sdk-core": "0.109.0",
     "@nervosnetwork/ckb-sdk-utils": "0.109.0",
     "canvg": "2.0.0",
-    "ckb-walletconnect-wallet-sdk": "0.0.1-alpha.9",
+    "ckb-walletconnect-wallet-sdk": "0.0.1-alpha.10",
     "i18next": "21.10.0",
     "immer": "9.0.21",
     "jsqr": "1.4.0",

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

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { askForCameraAccess } from 'services/remote'
 import Dialog from 'widgets/Dialog'
+import LoadingDialog from 'widgets/LoadingDialog'
 import AlertDialog from 'widgets/AlertDialog'
 import { isSuccessResponse } from 'utils'
 import jsQR from 'jsqr'
@@ -20,7 +21,7 @@ const CameraScanDialog = ({ close, onConfirm }: { close: () => void; onConfirm:
   const videoRef = useRef<HTMLVideoElement>()
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const canvas2dRef = useRef<CanvasRenderingContext2D>()
-  const [dialogType, setDialogType] = useState<'' | 'no-camera' | 'access-fail' | 'scan'>('')
+  const [dialogType, setDialogType] = useState<'' | 'opening' | 'access-fail' | 'scan'>('')
 
   const drawLine = (begin: Point, end: Point) => {
     if (!canvas2dRef.current) return
@@ -60,6 +61,7 @@ const CameraScanDialog = ({ close, onConfirm }: { close: () => void; onConfirm:
 
     askForCameraAccess().then(accessRes => {
       if (isSuccessResponse(accessRes)) {
+        setDialogType('opening')
         navigator.mediaDevices
           .getUserMedia({
             audio: false,
@@ -105,6 +107,8 @@ const CameraScanDialog = ({ close, onConfirm }: { close: () => void; onConfirm:
         </div>
       </Dialog>
 
+      <LoadingDialog show={dialogType === 'opening'} message={t('wallet-connect.camera-connecting')} />
+
       <AlertDialog
         show={dialogType === 'access-fail'}
         title={t('wallet-connect.camera-fail')}

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

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useState as useGlobalState } from 'states'
 import { connect, disconnect, approveSession, rejectSession, approveRequest, rejectRequest } from 'services/remote'
 import { ControllerResponse } from 'services/remote/remoteApiWrapper'
@@ -53,7 +53,7 @@ export const useWalletConnect = () => {
     [requests]
   )
 
-  const userName = `${identity.slice(0, 6)}...${identity.slice(-6)}`
+  const userName = useMemo(() => `${identity.slice(0, 6)}...${identity.slice(-6)}`, [identity])
 
   return {
     proposals,

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

@@ -1146,6 +1146,7 @@
       "scan-qrcode": "Scan the QR code in the screen",
       "no-camera-tip": "Don't have a camera? Use the uri to connect",
       "camera-fail": "Unable to acquire camera data",
+      "camera-connecting": "Connecting Camera...",
       "camera-msg": "Please check that the settings allow Neuron to access the camera",
       "screen-fail": "Unable to get screen data",
       "screen-msg": "Please check that the settings allow Neuron to access the screen",

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

@@ -1117,6 +1117,7 @@
       "scan-qrcode": "掃描屏幕二維碼",
       "no-camera-tip": "沒有攝像頭？使用連結碼連結",
       "camera-fail": "無法獲取攝像頭數據",
+      "camera-connecting": "正在連結攝像頭",
       "camera-msg": "請檢查設置是否允許Neuron訪問攝像頭",
       "screen-fail": "無法獲取屏幕數據",
       "screen-msg": "請檢查設置是否允許Neuron訪問屏幕",

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

@@ -1138,6 +1138,7 @@
       "scan-qrcode": "扫描屏幕二维码",
       "no-camera-tip": "没有摄像头？使用连接码连接",
       "camera-fail": "无法获取摄像头数据",
+      "camera-connecting": "正在连接摄像头",
       "camera-msg": "请检查设置是否允许Neuron访问摄像头",
       "screen-fail": "无法获取屏幕数据",
       "screen-msg": "请检查设置是否允许Neuron访问屏幕",

packages/neuron-wallet/package.json

@@ -57,7 +57,7 @@
     "async": "3.2.4",
     "bn.js": "4.12.0",
     "chalk": "3.0.0",
-    "ckb-walletconnect-wallet-sdk": "0.0.1-alpha.9",
+    "ckb-walletconnect-wallet-sdk": "0.0.1-alpha.10",
     "dotenv": "8.6.0",
     "electron-log": "4.4.8",
     "electron-updater": "4.6.5",

packages/neuron-wallet/src/controllers/wallet-connect.ts

@@ -13,13 +13,15 @@ import {
   Session,
   SessionRequest,
   SignedTransaction,
-  Chain,
 } from 'ckb-walletconnect-wallet-sdk'
 import WalletConnectSubject from '../models/subjects/wallet-connect-subject'
 import { CurrentWalletSubject } from '../models/subjects/wallets'
 import { CurrentNetworkIDSubject } from '../models/subjects/networks'
 import { AccountExtendedPublicKey } from '../models/keys/key'
+import { Address as AddressInterface } from '../models/address'
 import { AddressType } from '../models/keys/address'
+import TxDbChangedSubject from '../models/subjects/tx-db-changed-subject'
+import AddressDbChangedSubject from '../models/subjects/address-db-changed-subject'
 import logger from '../utils/logger'
 import { ResponseCode } from '../utils/const'
 import WalletsService from '../services/wallets'
@@ -28,25 +30,57 @@ import AddressService from '../services/addresses'
 
 class Adapter implements CKBWalletAdapter {
   private walletID: string = ''
+  private extendedKey: AccountExtendedPublicKey
 
-  constructor(props: { walletID: string }) {
+  constructor(props: { walletID: string; extendedKey: string }) {
     this.walletID = props.walletID
+    this.extendedKey = AccountExtendedPublicKey.parse(props.extendedKey)
   }
 
   public async ckb_getAddresses(params: GetAddressesParams): Promise<{
     [scriptBase: string]: Address[]
   }> {
     const scriptBaseList = Object.keys(params)
     if (scriptBaseList.length) {
-      const addresses = (await AddressService.getAddressesByWalletId(this.walletID))
-        .filter(item => item.addressType === AddressType.Receiving)
-        .map(({ address, blake160: identifier, balance, description = '', addressIndex: index = '' }) => ({
+      const { page, type } = params[scriptBaseList[0]]
+      const { size = 10, before, after } = page
+      let resList = [] as AddressInterface[]
+      if (type === 'generate') {
+        resList =
+          (await AddressService.generateAndSaveForExtendedKey({
+            walletId: this.walletID,
+            extendedKey: this.extendedKey,
+            receivingAddressCount: size,
+          })) || []
+      } else {
+        const list = (await AddressService.getAddressesWithBalancesByWalletId(this.walletID)).filter(
+          item => item.addressType === AddressType.Receiving
+        )
+
+        if (before) {
+          const beforeItem = list.find(item => item.address === before)
+          if (beforeItem) {
+            resList = list.filter(item => item.addressIndex < beforeItem.addressIndex).slice(-size)
+          }
+        } else if (after) {
+          const afterItem = list.find(item => item.address === after)
+          if (afterItem) {
+            resList = list.filter(item => item.addressIndex > afterItem.addressIndex).slice(size)
+          }
+        } else {
+          resList = list.slice(0, size)
+        }
+      }
+
+      const addresses = resList.map(
+        ({ address, blake160: identifier, balance, description = '', addressIndex: index = '' }) => ({
           address,
           identifier,
           description,
           balance: balance!,
           index,
-        }))
+        })
+      )
       return Promise.resolve({
         [scriptBaseList[0]]: addresses,
       })
@@ -81,33 +115,45 @@ export default class WalletConnectController {
   private sessions: Session[] = []
   private requests: SessionRequest[] = []
 
-  private identity: string = ''
-  private chain: Chain = 'devnet'
+  private addresses: AddressInterface[] = []
 
-  private async init() {
+  private getWallet() {
     const currentWallet = WalletsService.getInstance().getCurrent()
-    const network = NetworksService.getInstance().getCurrent()
+    if (currentWallet) {
+      const { extendedKey, id } = currentWallet.toJSON()
+      const identity = AccountExtendedPublicKey.parse(extendedKey).addressPublicKey(AddressType.Receiving, 0)
 
-    if (!currentWallet) {
-      return
+      return {
+        identity,
+        id,
+        extendedKey,
+      }
     }
+    return {
+      identity: '',
+    }
+  }
 
-    const { extendedKey, id } = currentWallet.toJSON()
-    this.identity = AccountExtendedPublicKey.parse(extendedKey).addressPublicKey(AddressType.Receiving, 0)
-
+  private getNetwork() {
+    const network = NetworksService.getInstance().getCurrent()
     switch (network?.chain) {
       case 'ckb':
-        this.chain = 'mainnet'
-        break
+        return 'mainnet'
       case 'ckb_testnet':
-        this.chain = 'testnet'
-        break
+      case 'light_client_testnet':
+        return 'testnet'
       case 'ckb_dev':
-        this.chain = 'devnet'
-        break
+        return 'devnet'
       default:
-        this.chain = 'devnet'
-        break
+        return 'devnet'
+    }
+  }
+
+  private async init() {
+    const wallet = this.getWallet()
+
+    if (!wallet.id) {
+      return
     }
 
     const core = new Core({
@@ -124,7 +170,8 @@ export default class WalletConnectController {
         description: 'Neuron Wallet is a CKB wallet produced by Nervos Foundation. ',
       },
       adapter: new Adapter({
-        walletID: id,
+        walletID: wallet.id,
+        extendedKey: wallet.extendedKey,
       }),
     })
 
@@ -143,23 +190,89 @@ export default class WalletConnectController {
     })
   }
 
+  private async updateAddresses(emitEvent: boolean = true) {
+    const { id } = this.getWallet()
+    if (id) {
+      const list = await AddressService.getAddressesWithBalancesByWalletId(id)
+      const receriveList = list.filter(item => item.addressType === AddressType.Receiving)
+
+      if (!this.addresses.length) {
+        this.addresses = receriveList
+        return
+      }
+
+      if (receriveList.length > this.addresses.length) {
+        const addresses = receriveList
+          .slice(this.addresses.length)
+          .map(({ address, blake160: identifier, balance, description = '', addressIndex: index = '' }) => ({
+            address,
+            identifier,
+            description,
+            balance: balance!,
+            index,
+          }))
+        if (emitEvent) {
+          WalletConnectController.client?.changeAddresses({
+            addresses,
+            changeType: 'add',
+          })
+        }
+      } else if (receriveList.length === this.addresses.length) {
+        const addresses = [] as Address[]
+        receriveList.forEach((item, index) => {
+          if (item.txCount && (this.addresses[index]?.txCount || 0) < item.txCount)
+            addresses.push({
+              address: item.address,
+              identifier: item.blake160,
+              description: item.description || '',
+              balance: item.balance!,
+              index,
+            })
+        })
+        if (emitEvent) {
+          WalletConnectController.client?.changeAddresses({
+            addresses,
+            changeType: 'consume',
+          })
+        }
+      }
+      this.addresses = receriveList
+    }
+  }
+
   constructor() {
     this.init()
 
     CurrentWalletSubject.pipe(debounceTime(50)).subscribe(async params => {
       if (params.currentWallet && WalletConnectController.client) {
-        WalletConnectController.client.disconnectAllSessions()
-        this.init()
+        const { identity, id, extendedKey } = this.getWallet()
+        if (id) {
+          WalletConnectController.client.updateAdapter(new Adapter({ walletID: id, extendedKey }))
+          WalletConnectController.client.changeAccount(identity)
+          this.updateAddresses(false)
+          this.notify()
+        }
       }
     })
 
-    CurrentNetworkIDSubject.subscribe(async ({ currentNetworkID }) => {
-      const currentNetwork = NetworksService.getInstance().get(currentNetworkID)
-      if (currentNetwork && WalletConnectController.client) {
+    CurrentNetworkIDSubject.subscribe(() => {
+      if (WalletConnectController.client) {
         WalletConnectController.client.disconnectAllSessions()
         this.init()
       }
     })
+
+    TxDbChangedSubject.getSubject()
+      .pipe(debounceTime(500))
+      .subscribe(async () => {
+        this.updateAddresses()
+      })
+
+    AddressDbChangedSubject.getSubject()
+      .pipe(debounceTime(200))
+      .subscribe(async () => {
+        this.updateAddresses()
+      })
   }
 
   public async connect(uri: string) {
@@ -183,10 +296,11 @@ export default class WalletConnectController {
   public async approveSession(params: { id: number; scriptBases: string[] }) {
     await WalletConnectController.client?.approve({
       id: params.id,
-      chain: this.chain,
-      identity: this.identity,
+      network: this.getNetwork(),
+      identity: this.getWallet().identity,
       scriptBases: params.scriptBases,
     } as ApproveParams)
+    this.updateAddresses(false)
     return {
       status: ResponseCode.Success,
     }
@@ -218,7 +332,7 @@ export default class WalletConnectController {
       proposals: this.proposals,
       sessions: this.sessions,
       requests: this.requests,
-      identity: this.identity,
+      identity: this.getWallet().identity,
     })
   }
 }