Skip to content

Commit 96976cc

Browse files
walker27walker27
committed
wip: update
1 parent 53c2fb3 commit 96976cc

File tree

10 files changed

+231
-494
lines changed

10 files changed

+231
-494
lines changed

‎packages/neuron-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@
4747
"displayName": "UI Tests"
4848
},
4949
"dependencies": {
50-
"@ckb-connect/perun-wallet-wrapper": "1.0.5",
5150
"@ckb-lumos/base": "0.23.0",
5251
"@ckb-lumos/bi": "0.23.0",
5352
"@ckb-lumos/codec": "0.23.0",
@@ -59,6 +58,7 @@
5958
"@ckb-lumos/rpc": "0.23.0",
6059
"@grpc/grpc-js": "^1.14.1",
6160
"@grpc/proto-loader": "^0.8.0",
61+
"ahooks": "^3.9.6",
6262
"canvg": "3.0.11",
6363
"i18next": "23.7.11",
6464
"immer": "9.0.21",

‎packages/neuron-ui/src/components/PaymentChannel/api.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { perunServiceAction } from "services/remote";
2+
import { getParticipantByAddressAndPubkey, isSuccessResponse } from "utils";
3+
import * as wire from "utils/perun-wallet-wrapper/wire";
4+
5+
6+
7+
export async function getChannels(publicKey: string, address: string) {
8+
const actionRes = await perunServiceAction({
9+
type: 'get',
10+
payload: {
11+
requester: getParticipantByAddressAndPubkey(address, publicKey),
12+
},
13+
})
14+
if (!isSuccessResponse(actionRes)) {
15+
return []
16+
}
17+
const channelStates = actionRes.result.channels.states.map(channelState => {
18+
const { id: idObj, version, app, allocation, data, isFinal } = channelState;
19+
const id = idObj.data;
20+
const alloc = wire.Allocation.create(allocation);
21+
const state = wire.State.create({
22+
id,
23+
version,
24+
app,
25+
allocation: alloc,
26+
data,
27+
isFinal,
28+
})
29+
return state;
30+
});
31+
return channelStates as wire.State[];
32+
}
33+
34+
export async function updateChannel(channelId: string, swapAmount: number) {
35+
36+
const res = await perunServiceAction({
37+
type: 'update',
38+
payload: {
39+
channelId: channelId,
40+
index: 0,
41+
amount: swapAmount,
42+
},
43+
})
44+
45+
46+
return res;
47+
48+
}

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

Lines changed: 68 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,72 +6,93 @@ import * as wire from 'utils/perun-wallet-wrapper/wire'
66
import { bigintFromBEBytes, isSuccessResponse } from 'utils'
77
import { channelIdToString } from 'utils/perun-wallet-wrapper/translator'
88
import { perunServiceAction, showErrorMessage } from 'services/remote'
9+
import PerunSendPayment from 'components/PerunSendPayment'
10+
import { useState } from 'react'
11+
import { updateChannel } from 'components/PaymentChannel/api'
912

1013
type ChannelCardProps = {
11-
channelId: string
1214
channelState: wire.State
1315
key: string
1416
onClose: (channelId: string) => void
1517
onSend: (channelId: string) => void
1618
}
19+
enum DialogType {
20+
closeChannel = 'closeChannel',
21+
send = 'send',
22+
}
1723
export default function ChannelCard(props: ChannelCardProps) {
18-
const { channelState, key, onClose, onSend } = props
24+
const { channelState, onClose, onSend } = props
25+
const [dialogType, setDialogType] = useState<DialogType | undefined>(undefined)
1926
return (
20-
<div key={key} className={styles.overviewItem}>
21-
<div className={styles.overviewItemContent}>
22-
{/* <div className={styles.itemCell}>
27+
<>
28+
<div className={styles.overviewItem}>
29+
<div className={styles.overviewItemContent}>
30+
{/* <div className={styles.itemCell}>
2331
<p>Channel with</p>
2432
<p>
2533
at <span className={styles.time}>0x241872 20:15:24</span>
2634
</p>
2735
</div> */}
28-
<div className={styles.itemCell}>
29-
<p>Id</p>
30-
{/* <p>
36+
<div className={styles.itemCell}>
37+
<p>Id</p>
38+
{/* <p>
3139
at <span className={styles.time}>0x241872 20:15:24</span>
3240
</p> */}
41+
</div>
42+
<h2 className={styles.address}>{channelIdToString(channelState.id)}</h2>
43+
<div className={styles.itemCell}>
44+
<p>My Token Locked</p>
45+
<p>Funds other party</p>
46+
</div>
47+
<div className={styles.itemCell}>
48+
<h2>{`${bigintFromBEBytes(channelState.allocation?.balances?.balances[0].balance[0]!.data) / BigInt(1e8)}`} CKB</h2>
49+
<h2>{`${bigintFromBEBytes(channelState.allocation?.balances?.balances[0].balance[1]!.data) / BigInt(1e8)}`} CKB</h2>
50+
</div>
3351
</div>
34-
<h2 className={styles.address}>{channelIdToString(channelState.id)}</h2>
35-
<div className={styles.itemCell}>
36-
<p>My Token Locked</p>
37-
<p>Funds other party</p>
38-
</div>
39-
<div className={styles.itemCell}>
40-
<h2>{`${bigintFromBEBytes(channelState.allocation?.balances?.balances[0].balance[0]!.data) / BigInt(1e8)}`} CKB</h2>
41-
<h2>{`${bigintFromBEBytes(channelState.allocation?.balances?.balances[0].balance[1]!.data) / BigInt(1e8)}`} CKB</h2>
52+
53+
<div className={styles.overviewItemActions}>
54+
<Button
55+
type="text"
56+
data-color="error"
57+
onClick={async () => {
58+
const res = await perunServiceAction({
59+
type: 'close',
60+
payload: {
61+
channelId: channelState.id,
62+
},
63+
})
64+
if (!isSuccessResponse(res)) {
65+
showErrorMessage('Close Channel Failed', res.message as string);
66+
// handleRejected(res.message as string)
67+
return
68+
}
69+
}}
70+
// onClick={() => onClose(channelId)}
71+
>
72+
<PerunClose />
73+
Close
74+
</Button>
75+
<Button
76+
type="text"
77+
onClick={() => setDialogType(DialogType.send)}
78+
>
79+
<PerunSend />
80+
Send
81+
</Button>
4282
</div>
4383
</div>
44-
45-
<div className={styles.overviewItemActions}>
46-
<Button
47-
type="text"
48-
data-color="error"
49-
onClick={async () => {
50-
const res = await perunServiceAction({
51-
type: 'close',
52-
payload: {
53-
channelId: channelState.id,
54-
},
55-
})
56-
if (!isSuccessResponse(res)) {
57-
showErrorMessage('Close Channel Failed', res.message as string);
58-
// handleRejected(res.message as string)
59-
return
60-
}
84+
{dialogType === DialogType.send && (
85+
<PerunSendPayment
86+
onConfirm={async (swapAmount) => {
87+
const res = await updateChannel(channelIdToString(channelState.id), BigInt(swapAmount! * 1e8))
88+
console.log("update res", res, swapAmount);
89+
// close
90+
setDialogType(undefined);
6191
}}
62-
// onClick={() => onClose(channelId)}
63-
>
64-
<PerunClose />
65-
Close
66-
</Button>
67-
<Button
68-
type="text"
69-
// onClick={() => onSend(channelId)}
70-
>
71-
<PerunSend />
72-
Send
73-
</Button>
74-
</div>
75-
</div>
92+
onClose={() => setDialogType(undefined)}
93+
/>
94+
)}
95+
</>
96+
7697
)
7798
}

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

Lines changed: 12 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,10 @@ import PerunCreationRequestList from 'components/PerunCreationRequestList'
5656
import PerunLockedInChannels from 'components/PerunLockedInChannels'
5757
import PerunCloseChannel from 'components/PerunCloseChannel'
5858
import PerunOpenChannel from 'components/PerunOpenChannel'
59-
import PerunSendPayment from 'components/PerunSendPayment'
60-
import type { State } from 'utils/perun-wallet-wrapper/wire'
61-
import RowExtend from './RowExtend'
6259
import styles from './perun.module.scss'
6360
import ChannelCard from './components/ChannelCard'
61+
import { useInterval, useRequest } from 'ahooks'
62+
import { getChannels } from './api'
6463

6564
enum DialogType {
6665
creationRequest = 'creationRequest',
@@ -76,64 +75,31 @@ const PaymentChannel = () => {
7675
perun: { requests }, // channels
7776
} = useGlobalState()
7877
const [t, _] = useTranslation()
79-
const [channels, setChannels] = useState<wire.State[]>([])
8078
const [dialogType, setDialogType] = useState<DialogType | undefined>(undefined)
8179

8280
const [myPubKey, setMyPubKey] = useState<string>('')
8381

84-
const [requesterId, setRequesterId] = useState('');
8582

86-
const [expandedRow, setExpandedRow] = useState<number | null>(null)
83+
const { data: channels = [], run: syncChannels } = useRequest(async () => {
84+
const list = await getChannels(myPubKey, wallet.addresses[0].address)
85+
return list;
86+
}, {
87+
ready: !!myPubKey, // && (wallet.addresses.length > 0)
88+
manual: true,
89+
})
90+
91+
useInterval(syncChannels, !!myPubKey ? 5000 : 0)
8792

8893
const assets = ['CKB']
8994

9095
useEffect(() => {
9196
getCurrentWalletAccountExtendedPubKey({ type: 0, index: 0 }).then(res => {
9297
if (isSuccessResponse(res)) {
9398
setMyPubKey(res.result)
94-
setRequesterId(getParticipantByAddressAndPubkey(wallet.addresses[0].address, res.result));
9599
}
96100
})
97101
}, [])
98102

99-
console.log('channels', channels);
100-
101-
useEffect(() => {
102-
if (requesterId) {
103-
(async () => {
104-
const actionRes = await perunServiceAction({
105-
type: 'get',
106-
payload: {
107-
requester: requesterId,
108-
},
109-
})
110-
111-
console.log('actionRes--get--', actionRes)
112-
if (!isSuccessResponse(actionRes)) {
113-
return
114-
}
115-
const channelStates = actionRes.result.channels.states.map(channelState => {
116-
const { id: idObj, version, app, allocation, data, isFinal } = channelState;
117-
const id = idObj.data;
118-
const alloc = wire.Allocation.create(allocation);
119-
const state = wire.State.create({
120-
id,
121-
version,
122-
app,
123-
allocation: alloc,
124-
data,
125-
isFinal,
126-
})
127-
return state;
128-
});
129-
console.log({ channelStates })
130-
setChannels(channelStates);
131-
})()
132-
133-
}
134-
135-
}, [requesterId, requests])
136-
137103
return (
138104
<PageContainer
139105
head={
@@ -242,7 +208,7 @@ const PaymentChannel = () => {
242208
myPubKey={myPubKey}
243209
/>
244210

245-
{dialogType === DialogType.send && <PerunSendPayment onClose={() => setDialogType(undefined)} />}
211+
{/* {dialogType === DialogType.send && <PerunSendPayment onClose={() => setDialogType(undefined)} />} */}
246212
</div>
247213
</PageContainer>
248214
)

‎packages/neuron-ui/src/components/PaymentChannel/index_o.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import Button from 'widgets/Button'
1313
import PageContainer from 'components/PageContainer'
1414
import { PerunIcon } from 'widgets/Icons/icon'
1515
import { type CKBComponents } from '@ckb-lumos/lumos/rpc'
16-
import { channelIdToString, channelIdFromString } from '@ckb-connect/perun-wallet-wrapper/dist/translator'
17-
import * as wire from '@ckb-connect/perun-wallet-wrapper/dist/wire'
16+
import { channelIdToString, channelIdFromString } from 'utils/perun-wallet-wrapper/translator'
17+
import * as wire from 'utils/perun-wallet-wrapper/wire'
1818

1919
import { ControllerResponse } from 'services/remote/remoteApiWrapper'
2020
import {
@@ -39,7 +39,7 @@ import {
3939
bigIntStringToHex,
4040
} from 'utils'
4141
import { PasswordDialog } from 'components/SignAndVerify'
42-
import { State } from '@ckb-connect/perun-wallet-wrapper/dist/wire'
42+
import { State } from 'utils/perun-wallet-wrapper/wire'
4343
import TextField from 'widgets/TextField'
4444
import styles from './perun.module.scss'
4545
import PaymentChannelDemo from './demo'

0 commit comments

Comments
 (0)