Skip to content

Commit 5ee7e8b

Browse files
walker27walker27
committed
wip: close perun channel
1 parent 62091de commit 5ee7e8b

File tree

5 files changed

+227
-83
lines changed

5 files changed

+227
-83
lines changed

‎packages/neuron-ui/src/components/PaymentChannel/components/ChannelCard/ChannelCard.module.scss‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.overviewItem {
2+
background: var(--table-head-background-color);
3+
border-radius: 16px;
4+
min-width: 302px;
5+
}
6+
7+
.overviewItemContent {
8+
padding: 16px 16px 12px;
9+
10+
.itemCell {
11+
display: flex;
12+
margin-bottom: 4px;
13+
14+
p {
15+
flex: 1;
16+
color: var(--input-second-color);
17+
font-size: 12px;
18+
}
19+
20+
h2 {
21+
flex: 1;
22+
color: var(--main-text-color);
23+
font-size: 14px;
24+
}
25+
}
26+
27+
.time {
28+
color: var(--primary-color);
29+
}
30+
31+
.address {
32+
font-family: 'JetBrains Mono';
33+
margin: 4px 0 12px;
34+
font-weight: 500;
35+
}
36+
}
37+
38+
.overviewItemActions {
39+
border-top: 1px solid var(--input-border-color);
40+
41+
button {
42+
gap: 4px;
43+
color: var(--secondary-text-color);
44+
45+
&:hover {
46+
color: var(--primary-color);
47+
48+
svg {
49+
50+
g,
51+
path {
52+
fill: var(--primary-color);
53+
}
54+
}
55+
}
56+
57+
&[data-color='error'] {
58+
&:hover {
59+
color: var(--error-color);
60+
61+
svg {
62+
63+
g,
64+
path {
65+
fill: var(--error-color);
66+
}
67+
}
68+
}
69+
}
70+
}
71+
}

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
2+
import { PerunClose, PerunSend } from 'widgets/Icons/icon'
3+
import styles from './ChannelCard.module.scss'
4+
import Button from 'widgets/Button'
5+
import * as wire from 'utils/perun-wallet-wrapper/wire'
6+
import { bigintFromBEBytes, isSuccessResponse } from 'utils'
7+
import { channelIdToString } from 'utils/perun-wallet-wrapper/translator'
8+
import { perunServiceAction, showErrorMessage } from 'services/remote'
9+
10+
type ChannelCardProps = {
11+
channelId: string
12+
channelState: wire.State
13+
key: string
14+
onClose: (channelId: string) => void
15+
onSend: (channelId: string) => void
16+
}
17+
export default function ChannelCard(props: ChannelCardProps) {
18+
const { channelState, key, onClose, onSend } = props
19+
return (
20+
<div key={key} className={styles.overviewItem}>
21+
<div className={styles.overviewItemContent}>
22+
{/* <div className={styles.itemCell}>
23+
<p>Channel with</p>
24+
<p>
25+
at <span className={styles.time}>0x241872 20:15:24</span>
26+
</p>
27+
</div> */}
28+
<div className={styles.itemCell}>
29+
<p>Id</p>
30+
{/* <p>
31+
at <span className={styles.time}>0x241872 20:15:24</span>
32+
</p> */}
33+
</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>
42+
</div>
43+
</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+
}
61+
}}
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>
76+
)
77+
}

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

Lines changed: 32 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ import { type CKBComponents } from '@ckb-lumos/lumos/rpc'
2626
import {
2727
SerializeOffChainParticipant,
2828
SerializeSEC1EncodedPubKey,
29-
} from '@ckb-connect/perun-wallet-wrapper/dist/ckb/serialization'
30-
import { channelIdToString, channelIdFromString } from '@ckb-connect/perun-wallet-wrapper/dist/translator'
31-
import * as wire from '@ckb-connect/perun-wallet-wrapper/dist/wire'
29+
} from 'utils/perun-wallet-wrapper/ckb/serialization'
30+
import { channelIdToString, channelIdFromString } from 'utils/perun-wallet-wrapper/translator'
31+
import * as wire from 'utils/perun-wallet-wrapper/wire'
3232

3333
import { ControllerResponse } from 'services/remote/remoteApiWrapper'
3434
import {
@@ -60,6 +60,7 @@ import PerunSendPayment from 'components/PerunSendPayment'
6060
import type { State } from 'utils/perun-wallet-wrapper/wire'
6161
import RowExtend from './RowExtend'
6262
import styles from './perun.module.scss'
63+
import ChannelCard from './components/ChannelCard'
6364

6465
enum DialogType {
6566
creationRequest = 'creationRequest',
@@ -111,90 +112,28 @@ const PaymentChannel = () => {
111112
if (!isSuccessResponse(actionRes)) {
112113
return
113114
}
114-
115-
const id = actionRes.result.channels.states[0].id.data
116-
const { version } = actionRes.result.channels.states[0]
117-
const { app } = actionRes.result.channels.states[0]
118-
119-
const alloc = wire.Allocation.create({
120-
assets: [new Uint8Array(32)],
121-
balances: wire.Balances.create({
122-
balances: [
123-
{
124-
balance: [
125-
actionRes.result.channels.states[0].allocation.balances.balances[0].balance[0].data,
126-
actionRes.result.channels.states[0].allocation.balances.balances[0].balance[1].data,
127-
],
128-
},
129-
],
130-
}),
131-
locked: [],
132-
})
133-
const { data } = actionRes.result.channels.states[0]
134-
const { isFinal } = actionRes.result.channels.states[0]
135-
136-
const state = wire.State.create({
137-
id,
138-
version,
139-
app,
140-
allocation: alloc,
141-
data,
142-
isFinal,
143-
})
144-
setChannels(prev => {
145-
if(!!prev.find(item => item.id === state.id)) {
146-
// todo
147-
return prev
148-
}
149-
return [...prev, state]
150-
})
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);
151131
})()
152132

153133
}
154134

155135
}, [requesterId, requests])
156136

157-
158-
const handleExpandClick = (idx: number | null) => {
159-
setExpandedRow(prevIndex => (prevIndex === idx ? null : idx))
160-
}
161-
162-
// const columns: TableProps<wire.State[]>['columns'] = [
163-
// {
164-
// title: t('history.table.asset'),
165-
// dataIndex: 'allocation',
166-
// align: 'left',
167-
// minWidth: '150px',
168-
// render: (_, __, item) => JSON.stringify(item.allocation),
169-
// },
170-
// {
171-
// title: t('perun.creation-time'),
172-
// dataIndex: 'createdAt',
173-
// align: 'left',
174-
// minWidth: '150px',
175-
// render: (_, __, item) => item.createdAt,
176-
// sortable: true,
177-
// },
178-
// {
179-
// title: t('history.table.status'),
180-
// dataIndex: 'status',
181-
// align: 'left',
182-
// minWidth: '50px',
183-
// render(_, __, item) {
184-
// return 'status'
185-
// },
186-
// },
187-
// {
188-
// title: t('history.table.operation'),
189-
// dataIndex: 'operation',
190-
// align: 'center',
191-
// minWidth: '72px',
192-
// render(_, idx) {
193-
// return <ArrowNext className={styles.arrow} data-is-expand-show={expandedRow === idx} />
194-
// },
195-
// },
196-
// ]
197-
198137
return (
199138
<PageContainer
200139
head={
@@ -271,6 +210,18 @@ const PaymentChannel = () => {
271210
onRowClick={(_, __, idx) => handleExpandClick(idx)}
272211
/> */}
273212
</div>
213+
<div className={styles.overviewWrap}>
214+
{channels.map(item => (
215+
<ChannelCard
216+
key={channelIdToString(item.id)}
217+
channelState={item}
218+
onClose={() => { }}
219+
onSend={() => { }}
220+
// onClose={() => setShowCloseChannelDialog(true)}
221+
// onSend={() => setShowSendDialog(true)}
222+
/>
223+
))}
224+
</div>
274225
</div>
275226

276227
{dialogType === DialogType.creationRequest && requests.length > 0 && (

0 commit comments

Comments
 (0)