Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { Loading, SigningReqContext } from '@polkadot/extension-ui/components'
import useTranslation from '@polkadot/extension-ui/hooks/useTranslation'
import Request from '@polkadot/extension-ui/Popup/Signing/Request'
import TransactionIndex from '@polkadot/extension-ui/Popup/Signing/TransactionIndex'
import type { SignerPayloadJSON } from '@polkadot/types/types'
import React, { useContext, useEffect, useState } from 'react'
import Header from '../components/Header'
const Signing: React.FC = () => {
const { t } = useTranslation()
const requests = useContext(SigningReqContext)
const [requestIndex, setRequestIndex] = useState(0)
const onNextClick = () => setRequestIndex((requestIndex) => requestIndex + 1)
const onPreviousClick = () =>
setRequestIndex((requestIndex) => requestIndex - 1)
useEffect(() => {
setRequestIndex((requestIndex) =>
requestIndex < requests.length ? requestIndex : requests.length - 1
)
}, [requests])
// protect against removal overflows/underflows
const request =
requests.length !== 0
? requestIndex >= 0
? requestIndex < requests.length
? requests[requestIndex]
: requests[requests.length - 1]
: requests[0]
: null
const isTransaction = !!(request?.request?.payload as SignerPayloadJSON)
?.blockNumber
if (!request) return <Loading />
return (
<>
<Header
text={
isTransaction ? t<string>('Transaction') : t<string>('Sign message')
}
/>
{requests.length > 1 && (
<TransactionIndex
index={requestIndex}
onNextClick={onNextClick}
onPreviousClick={onPreviousClick}
totalItems={requests.length}
/>
)}
<Request
account={request.account}
buttonText={
isTransaction ? t('Sign the transaction') : t('Sign the message')
}
isFirst={requestIndex === 0}
request={request.request}
signId={request.id}
url={request.url}
/>
</>
)
}
export default Signing