-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
Extrinsics.tsx
133 lines (116 loc) · 3.66 KB
/
Extrinsics.tsx
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
// Copyright 2017-2019 @polkadot/app-explorer authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import styled from 'styled-components';
import { registry } from '@polkadot/react-api';
import { AddressMini, Call, Column, LinkPolkascan } from '@polkadot/react-components';
import { formatNumber } from '@polkadot/util';
import translate from '../translate';
interface Props extends I18nProps {
blockNumber?: BlockNumber;
label?: React.ReactNode;
value?: Extrinsic[] | null;
}
function renderSigner ({ t }: Props, extrinsic: Extrinsic): React.ReactNode {
if (!extrinsic.isSigned) {
return null;
}
return (
<div className='explorer--BlockByHash-header'>
<div>
<AddressMini value={extrinsic.signer} />
</div>
<div className='explorer--BlockByHash-nonce'>
{t('index')} {formatNumber(extrinsic.nonce)}
</div>
</div>
);
}
// FIXME This is _very_ similar to what we have in democracy/Item
function renderExtrinsic (props: Props): (_: Extrinsic, __: number) => React.ReactNode {
const { blockNumber, t } = props;
return function ExplorerExtrinsic (extrinsic: Extrinsic, index: number): React.ReactNode {
const { meta, method, section } = registry.findMetaCall(extrinsic.callIndex);
const isMortal = extrinsic.era.isMortalEra;
let eraEnd;
let eraStart;
if (blockNumber && isMortal) {
const mortalEra = extrinsic.era.asMortalEra;
eraEnd = mortalEra.death(blockNumber.toNumber());
eraStart = mortalEra.birth(blockNumber.toNumber());
}
return (
<article key={`extrinsic:${index}`}>
<div className='header'>
<h3>
{section}.{method} (#{formatNumber(index)})
</h3>
{renderSigner(props, extrinsic)}
</div>
<details>
<summary>{
meta && meta.documentation
? meta.documentation.join(' ')
: t('Details')
}</summary>
<Call
className='details'
mortality={
isMortal
? blockNumber
? t('mortal, valid from #{{startAt}} to #{{endsAt}}', {
replace: {
endsAt: formatNumber(eraEnd),
startAt: formatNumber(eraStart)
}
})
: t('mortal')
: t('immortal')
}
tip={extrinsic.tip.toBn()}
value={extrinsic}
withHash
/>
</details>
{
extrinsic.isSigned
? <LinkPolkascan data={extrinsic.hash.toHex()} type='extrinsic' />
: null
}
</article>
);
};
}
function renderContent (props: Props): React.ReactNode {
const { value = [] } = props;
return (value || []).map(renderExtrinsic(props));
}
function Extrinsics (props: Props): React.ReactElement<Props> {
const { className, label, t } = props;
return (
<Column
className={className}
emptyText={t('No pending extrinsics are in the queue')}
headerText={label || t('extrinsics')}
>
{renderContent(props)}
</Column>
);
}
export default translate(styled(Extrinsics)`
.explorer--BlockByHash-header {
position: absolute;
top: 0.25rem;
right: 0.75rem;
}
.explorer--BlockByHash-nonce {
font-size: 0.75rem;
margin-right: 2.25rem;
margin-top: -0.625rem;
opacity: 0.45;
text-align: right;
}
`);