wip: update

Author: walker27

packages/neuron-ui/src/components/PaymentChannel/components/Console/index.tsx

@@ -1,9 +1,9 @@
 import { useState as useGlobalState } from 'states'
 import { useTranslation } from 'react-i18next'
 import { useInterval, useRequest } from 'ahooks'
-import { getChannels, openChannel } from '../../api'
+import { getChannels, openChannel, restoreChannels } from '../../api'
 import { useEffect, useMemo, useState } from 'react'
-import { getCurrentWalletAccountExtendedPubKey, showErrorMessage } from 'services/remote'
+import { getCurrentWalletAccountExtendedPubKey, perunServiceAction, showErrorMessage } from 'services/remote'
 import styles from '../../perun.module.scss'
 import {
   AddSimple,
@@ -46,21 +46,22 @@ enum DialogType {
 type PerunConsoleProps = {
   publicKey: string
   address: string
-  onClose?: () => void
 }
 
 export default function PerunConsole(props: PerunConsoleProps) {
-  const { publicKey: myPubKey, address: myAddress, onClose } = props
+  const { publicKey: myPubKey, address: myAddress } = props
   const {
     wallet,
     perun: { requests }, // channels
   } = useGlobalState()
   const [t] = useTranslation()
   const [dialogType, setDialogType] = useState<DialogType | undefined>(undefined)
   const channelInfoMap = useChannelInfoMap()
+  
   // const [pendingChannels, setPendingChannels] = useState<ChannelInfo[]>([])
   // const [channelMap, setChannelMap] = useState<Record<string, ChannelInfo>>({})
   const { data: channelStates = [], run: syncChannels } = useRequest(async () => {
+    console.log("?")
     const list = await getChannels(myPubKey, myAddress)
     return list;
   }, {
@@ -70,14 +71,21 @@ export default function PerunConsole(props: PerunConsoleProps) {
 
   useInterval(syncChannels, !!myPubKey ? 5000 : 0)
 
+
+  useEffect(() => {
+    restoreChannels()
+  }, [])
+
   // const assets = ['CKB']
   console.log("perun requests", requests);
   console.log("perun channle states", channelStates);
 
   return (
     <div className={styles.container}>
       <div className='flex flex-row justify-between items-center mb-4'>
-        <Button type="danger" className={styles.createBtn} onClick={() => { }}>
+        <Button type="danger" className={styles.createBtn} onClick={() => {
+          perunServiceAction({ type: "stop-runner" })
+        }}>
           Exit
         </Button>
         <Button type="primary" className={styles.createBtn} onClick={() => setDialogType(DialogType.openChannel)}>

packages/neuron-ui/src/components/PaymentChannel/demo.tsx

@@ -46,6 +46,7 @@ import {
   isSuccessResponse,
   clsx,
   getParticipantByAddressAndPubkey,
+  isMainnet,
 } from 'utils'
 import { PasswordDialog } from 'components/SignAndVerify'
 
@@ -55,6 +56,7 @@ import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import PerunConsole from './components/Console'
 import AddressSelector from './components/AddressSelector'
+import { useRequest } from 'ahooks'
 
 
 
@@ -64,11 +66,34 @@ const PaymentChannel = () => {
     chain: { networkID },
     settings: { networks },
     wallet,
+    perun: { runnerState }
   } = useGlobalState()
   const [t, _] = useTranslation()
-  const [enable, setEnable] = useState(false);
-  const [publicKey, setMyPubKey] = useState('')
-  const [address, setMyAddress] = useState('')
+  const [enable, setEnable] = useState(runnerState.running);
+  const [publicKey, setMyPubKey] = useState(runnerState.context?.publicKey ?? "")
+  const [address, setMyAddress] = useState(runnerState.context?.address ?? "")
+  const isTestnet = !isMainnet(networks, networkID)
+
+  const { loading, run: startRunner } = useRequest(async (cfg: NonNullable<Perun.RunnerStatus['context']>) => {
+    const res = await perunServiceAction({ type: "start-runner", payload: cfg })
+    return res;
+  }, {
+    manual: true,
+  })
+
+  useEffect(() => {
+    if(!enable && runnerState.running) {
+      setEnable(true)
+    }
+    if (enable && !runnerState.running) {
+      setEnable(false)
+    }
+    if (enable && !runnerState.running && runnerState.message) {
+      showErrorMessage('Error', runnerState.message);
+    }
+  }, [enable, runnerState.running, runnerState.message])
+
+
   return (
     <PageContainer
       head={
@@ -103,10 +128,20 @@ const PaymentChannel = () => {
 
               <Button
                 type="primary"
+                loading={loading}
                 className={styles.startButton}
-                // todo start channel-service-runner
-                // then invoke restore-channel
-                onClick={() => { setEnable(true) }}
+                onClick={async () => {
+                  if (!isTestnet) {
+                    showErrorMessage('Error', t('perun.testnet-only'))
+                    return;
+                  }
+                  await startRunner({
+                    walletId: wallet.id,
+                    publicKey: publicKey,
+                    address: address,
+                    network: isTestnet ? 'testnet' : 'mainnet',
+                  })
+                }}
               >
                 Start
               </Button>
@@ -116,8 +151,6 @@ const PaymentChannel = () => {
             <PerunConsole
               publicKey={publicKey}
               address={address}
-              // todo
-              onClose={() =>{}}
             />
           )
       }

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

@@ -20,6 +20,7 @@ import {
   AppUpdater as AppUpdaterSubject,
   PerunRequest as PerunRequestSubject,
   PerunChannel as PerunChannelSubject,
+  PerunRunnerState as PerunRunnerStateSubject,
 } from 'services/subjects'
 
 import Badge from 'widgets/Badge'
@@ -105,10 +106,15 @@ const Navbar = () => {
       dispatch({ type: PaymentChannelActions.UpdatePerunChannel, payload })
     })
 
+    const perunRunnerStateSubscription = PerunRunnerStateSubject.subscribe((payload: Perun.RunnerStatus) => {
+      dispatch({ type: PaymentChannelActions.UpdateRunnerState, payload })
+    })
+
     return () => {
       appUpdaterSubscription.unsubscribe()
       perunRequestSubscription.unsubscribe()
       perunChannelSubscription.unsubscribe()
+      perunRunnerStateSubscription.unsubscribe()
     }
   }, [dispatch])
 

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

@@ -837,6 +837,7 @@
       "export": "Export Tx"
     },
     "perun": {
+      "testnet-only": "Perun is only available on testnet",
       "no-data": "No data",
       "create-new-channel": "Create New Channel",
       "of-open-channels": "#of open channels",

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

@@ -42,4 +42,4 @@ export const verifyMessage = remoteApi<Controller.VerifyMessageParams, 'old-sign
 
 // Perun
 export const respondPerunRequest = remoteApi<Controller.RespondPerunRequestParams>('respond-perun-request')
-export const perunServiceAction = remoteApi<Controller.PerunServiceActionParams>('perun-service-action')
+export const perunServiceAction = remoteApi<Perun.ServiceActionParams>('perun-service-action')

packages/neuron-ui/src/services/remote/wallets.ts

@@ -32,7 +32,8 @@ const SubjectConstructor = <T>(
     | 'show-global-dialog'
     | 'no-disk-space'
     | 'perun-requests'
-    | 'perun-channels',
+    | 'perun-channels'
+    | 'perun-runner-state',
   isMulti?: boolean
 ) => {
   return ipcRenderer
@@ -73,6 +74,7 @@ export const Migrate = SubjectConstructor<'need-migrate' | 'migrating' | 'failed
 export const NoDiskSpace = SubjectConstructor<boolean>('no-disk-space')
 export const PerunRequest = SubjectConstructor<Subject.PerunRequest>('perun-requests')
 export const PerunChannel = SubjectConstructor<Subject.PerunChannel[]>('perun-channels')
+export const PerunRunnerState = SubjectConstructor<Perun.RunnerStatus>('perun-runner-state')
 
 export default {
   DataUpdate,
@@ -91,4 +93,5 @@ export default {
   Migrate,
   PerunRequest,
   PerunChannel,
+  PerunRunnerState,
 }

packages/neuron-ui/src/services/subjects.ts

@@ -1,6 +1,9 @@
 export const perunState: State.Perun = {
-  channels: [],
+  // channels: [],
   requests: [],
+  runnerState: {
+    running: false,
+  }
 }
 
 export default perunState

packages/neuron-ui/src/states/init/perun.ts

@@ -77,6 +77,7 @@ export enum PaymentChannelActions {
 
   UpdatePerunRequest = 'UpdatePerunRequest',
   UpdatePerunChannel = 'UpdatePerunChannel',
+  UpdateRunnerState = 'UpdateRunnerState',
 }
 
 export type StateAction =
@@ -129,18 +130,22 @@ export type StateAction =
   | { type: AppActions.SignVerify; payload: string }
   | { type: AppActions.UpdateConsumeCells; payload?: { outPoint: OutPoint; capacity: string }[] }
   | { type: AppActions.SetLockWindowInfo; payload: Required<State.App>['lockWindowInfo'] }
+  // | {
+  //   type: PaymentChannelActions.UpdatePerunState
+  //   payload: State.Perun
+  // }
   | {
-      type: PaymentChannelActions.UpdatePerunState
-      payload: State.Perun
-    }
+    type: PaymentChannelActions.UpdatePerunRequest
+    payload: Perun.ReadableMessage.Request[]
+  }
   | {
-      type: PaymentChannelActions.UpdatePerunRequest
-      payload: Perun.ReadableMessage.Request[]
-    }
+    type: PaymentChannelActions.UpdatePerunChannel
+    payload: State.PerunChannel[]
+  }
   | {
-      type: PaymentChannelActions.UpdatePerunChannel
-      payload: State.PerunChannel[]
-    }
+    type: PaymentChannelActions.UpdateRunnerState
+    payload: Perun.RunnerStatus
+  }
 
 export type StateDispatch = React.Dispatch<StateAction> // TODO: add type of payload
 
@@ -341,7 +346,7 @@ export const reducer = produce((state: Draft<State.AppWithNeuronWallet>, action:
        */
       state.app.showTopAlert =
         state.app.notifications.findIndex(message => message.timestamp === action.payload) ===
-        state.app.notifications.length - 1
+          state.app.notifications.length - 1
           ? false
           : state.app.showTopAlert
       state.app.notifications = state.app.notifications.filter(({ timestamp }) => timestamp !== action.payload)
@@ -416,9 +421,9 @@ export const reducer = produce((state: Draft<State.AppWithNeuronWallet>, action:
     case AppActions.SetPageNotice: {
       state.app.pageNotice = action.payload
         ? {
-            ...action.payload,
-            index: (state.app.pageNotice?.index ?? 0) + 1,
-          }
+          ...action.payload,
+          index: (state.app.pageNotice?.index ?? 0) + 1,
+        }
         : action.payload
       break
     }
@@ -441,9 +446,12 @@ export const reducer = produce((state: Draft<State.AppWithNeuronWallet>, action:
       state.perun.requests = action.payload
       break
     }
-
-    case PaymentChannelActions.UpdatePerunChannel: {
-      state.perun.channels = action.payload
+    // case PaymentChannelActions.UpdatePerunChannel: {
+    //   state.perun.channels = action.payload
+    //   break
+    // }
+    case PaymentChannelActions.UpdateRunnerState: {
+      state.perun.runnerState = action.payload
       break
     }
 

packages/neuron-ui/src/states/stateProvider/reducer.ts

@@ -378,8 +378,9 @@ declare namespace State {
   }
 
   interface Perun {
-    channels: PerunChannel[]
+    // channels: PerunChannel[]
     requests: Perun.ReadableMessage.Request[]
+    runnerState: Perun.RunnerStatus
   }
 
   interface AppWithNeuronWallet {