Skip to content

Commit 1860b0e

Browse files
author
Jimmy Chu
authored
Fixing issue when there is no accounts can be selected (jimmychu0807#230)
* Fixing issue when there is no accounts can be selected * prettier
1 parent eb17e21 commit 1860b0e

10 files changed

Lines changed: 80 additions & 68 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,15 @@ and open `build/index.html` in your favorite browser.
4040

4141
### Try the Hosted Version
4242

43+
Connecting to Polkadot:<br/>
44+
https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=wss://rpc.polkadot.io
45+
46+
Connecting to your local Substrate node (only works with Chrome and Firefox as it uses insecure websocket connection):<br/>
47+
https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=ws://localhost:9944
48+
4349
Connecting to the development Substrate node:<br/>
4450
https://substrate-developer-hub.github.io/substrate-front-end-template
4551

46-
Connecting to your local Substrate node:<br/>
47-
https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=ws://localhost:9944
4852

4953
## Configuration
5054

‎public/assets/main.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
.github-fork-ribbon.right-bottom:before {
22
background-color: #222;
33
}
4+
5+
.ui.statistic.block_number > .value {
6+
font-size: 2.4rem !important;
7+
line-height: 4rem !important;
8+
}

‎src/AccountSelector.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ import {
1313

1414
import { useSubstrate, useSubstrateState } from './substrate-lib'
1515

16+
const CHROME_EXT_URL =
17+
'https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd'
18+
const FIREFOX_ADDON_URL =
19+
'https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/'
20+
1621
const acctAddr = acct => (acct ? acct.address : '')
1722

1823
function Main(props) {
@@ -35,7 +40,9 @@ function Main(props) {
3540
// Set the initial address
3641
useEffect(() => {
3742
// `setCurrentAccount()` is called only when currentAccount is null (uninitialized)
38-
!currentAccount && setCurrentAccount(keyring.getPair(initialAddress))
43+
!currentAccount &&
44+
initialAddress.length > 0 &&
45+
setCurrentAccount(keyring.getPair(initialAddress))
3946
}, [currentAccount, setCurrentAccount, keyring, initialAddress])
4047

4148
const onChange = addr => {
@@ -63,14 +70,15 @@ function Main(props) {
6370
<Menu.Menu position="right" style={{ alignItems: 'center' }}>
6471
{!currentAccount ? (
6572
<span>
66-
Add your account with the{' '}
67-
<a
68-
target="_blank"
69-
rel="noopener noreferrer"
70-
href="https://github.com/polkadot-js/extension"
71-
>
72-
Polkadot JS Extension
73+
Create an account with Polkadot-JS Extension (
74+
<a target="_blank" rel="noreferrer" href={CHROME_EXT_URL}>
75+
Chrome
76+
</a>
77+
,&nbsp;
78+
<a target="_blank" rel="noreferrer" href={FIREFOX_ADDON_URL}>
79+
Firefox
7380
</a>
81+
)&nbsp;
7482
</span>
7583
) : null}
7684
<CopyToClipboard text={acctAddr(currentAccount)}>

‎src/Balances.js‎

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from 'react'
2-
import { Table, Grid, Button } from 'semantic-ui-react'
2+
import { Table, Grid, Button, Label } from 'semantic-ui-react'
33
import { CopyToClipboard } from 'react-copy-to-clipboard'
44
import { useSubstrateState } from './substrate-lib'
55

@@ -34,48 +34,54 @@ export default function Main(props) {
3434
return (
3535
<Grid.Column>
3636
<h1>Balances</h1>
37-
<Table celled striped size="small">
38-
<Table.Body>
39-
<Table.Row>
40-
<Table.Cell width={3} textAlign="right">
41-
<strong>Name</strong>
42-
</Table.Cell>
43-
<Table.Cell width={10}>
44-
<strong>Address</strong>
45-
</Table.Cell>
46-
<Table.Cell width={3}>
47-
<strong>Balance</strong>
48-
</Table.Cell>
49-
</Table.Row>
50-
{accounts.map(account => (
51-
<Table.Row key={account.address}>
37+
{accounts.length === 0 ? (
38+
<Label basic color="yellow">
39+
No accounts to be shown
40+
</Label>
41+
) : (
42+
<Table celled striped size="small">
43+
<Table.Body>
44+
<Table.Row>
5245
<Table.Cell width={3} textAlign="right">
53-
{account.meta.name}
46+
<strong>Name</strong>
5447
</Table.Cell>
5548
<Table.Cell width={10}>
56-
<span style={{ display: 'inline-block', minWidth: '31em' }}>
57-
{account.address}
58-
</span>
59-
<CopyToClipboard text={account.address}>
60-
<Button
61-
basic
62-
circular
63-
compact
64-
size="mini"
65-
color="blue"
66-
icon="copy outline"
67-
/>
68-
</CopyToClipboard>
49+
<strong>Address</strong>
6950
</Table.Cell>
7051
<Table.Cell width={3}>
71-
{balances &&
72-
balances[account.address] &&
73-
balances[account.address]}
52+
<strong>Balance</strong>
7453
</Table.Cell>
7554
</Table.Row>
76-
))}
77-
</Table.Body>
78-
</Table>
55+
{accounts.map(account => (
56+
<Table.Row key={account.address}>
57+
<Table.Cell width={3} textAlign="right">
58+
{account.meta.name}
59+
</Table.Cell>
60+
<Table.Cell width={10}>
61+
<span style={{ display: 'inline-block', minWidth: '31em' }}>
62+
{account.address}
63+
</span>
64+
<CopyToClipboard text={account.address}>
65+
<Button
66+
basic
67+
circular
68+
compact
69+
size="mini"
70+
color="blue"
71+
icon="copy outline"
72+
/>
73+
</CopyToClipboard>
74+
</Table.Cell>
75+
<Table.Cell width={3}>
76+
{balances &&
77+
balances[account.address] &&
78+
balances[account.address]}
79+
</Table.Cell>
80+
</Table.Row>
81+
))}
82+
</Table.Body>
83+
</Table>
84+
)}
7985
</Grid.Column>
8086
)
8187
}

‎src/BlockNumber.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ function Main(props) {
4242
<Card>
4343
<Card.Content textAlign="center">
4444
<Statistic
45+
className="block_number"
4546
label={(finalized ? 'Finalized' : 'Current') + ' Block'}
4647
value={blockNumber}
4748
/>

‎src/Interactor.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { TxButton, TxGroupButton } from './substrate-lib/components'
77
const argIsOptional = arg => arg.type.toString().startsWith('Option<')
88

99
function Main(props) {
10-
const { api, jsonrpc, currentAccount } = useSubstrateState()
10+
const { api, jsonrpc } = useSubstrateState()
1111
const [status, setStatus] = useState(null)
1212

1313
const [interxType, setInterxType] = useState('EXTRINSIC')
@@ -244,7 +244,6 @@ function Main(props) {
244244
))}
245245
<Form.Field style={{ textAlign: 'center' }}>
246246
<InteractorSubmit
247-
accountPair={currentAccount}
248247
setStatus={setStatus}
249248
attrs={{
250249
interxType,

‎src/TemplateModule.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useSubstrateState } from './substrate-lib'
55
import { TxButton } from './substrate-lib/components'
66

77
function Main(props) {
8-
const { api, currentAccount } = useSubstrateState()
8+
const { api } = useSubstrateState()
99

1010
// The transaction submission status
1111
const [status, setStatus] = useState('')
@@ -54,7 +54,6 @@ function Main(props) {
5454
</Form.Field>
5555
<Form.Field style={{ textAlign: 'center' }}>
5656
<TxButton
57-
accountPair={currentAccount}
5857
label="Store Something"
5958
type="SIGNED-TX"
6059
setStatus={setStatus}

‎src/Transfer.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function Main(props) {
1212

1313
const { addressTo, amount } = formState
1414

15-
const { keyring, currentAccount } = useSubstrateState()
15+
const { keyring } = useSubstrateState()
1616
const accounts = keyring.getPairs()
1717

1818
const availableAccounts = []
@@ -76,7 +76,6 @@ export default function Main(props) {
7676
</Form.Field>
7777
<Form.Field style={{ textAlign: 'center' }}>
7878
<TxButton
79-
accountPair={currentAccount}
8079
label="Submit"
8180
type="SIGNED-TX"
8281
setStatus={setStatus}

‎src/Upgrade.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React, { useState } from 'react'
22
import { Form, Input, Grid } from 'semantic-ui-react'
33
import { TxButton } from './substrate-lib/components'
4-
import { useSubstrateState } from './substrate-lib'
54

65
export default function Main(props) {
76
const [status, setStatus] = useState('')
87
const [proposal, setProposal] = useState({})
9-
const { currentAccount } = useSubstrateState()
108

119
const bufferToHex = buffer => {
1210
return Array.from(new Uint8Array(buffer))
@@ -39,7 +37,6 @@ export default function Main(props) {
3937
</Form.Field>
4038
<Form.Field style={{ textAlign: 'center' }}>
4139
<TxButton
42-
accountPair={currentAccount}
4340
label="Upgrade"
4441
type="UNCHECKED-SUDO-TX"
4542
setStatus={setStatus}

‎src/substrate-lib/components/TxButton.js‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { useSubstrateState } from '../'
77
import utils from '../utils'
88

99
function TxButton({
10-
accountPair = null,
1110
label,
1211
setStatus,
1312
color = 'blue',
@@ -17,7 +16,7 @@ function TxButton({
1716
disabled = false,
1817
}) {
1918
// Hooks
20-
const { api } = useSubstrateState()
19+
const { api, currentAccount } = useSubstrateState()
2120
const [unsub, setUnsub] = useState(null)
2221
const [sudoKey, setSudoKey] = useState(null)
2322

@@ -45,21 +44,15 @@ function TxButton({
4544

4645
const getFromAcct = async () => {
4746
const {
48-
address,
4947
meta: { source, isInjected },
50-
} = accountPair
51-
let fromAcct
48+
} = currentAccount
5249

53-
// signer is from Polkadot-js browser extension
5450
if (isInjected) {
51+
// signer is from Polkadot-js browser extension
5552
const injected = await web3FromSource(source)
56-
fromAcct = address
5753
api.setSigner(injected.signer)
58-
} else {
59-
fromAcct = accountPair
6054
}
61-
62-
return fromAcct
55+
return currentAccount
6356
}
6457

6558
const txResHandler = ({ status }) =>
@@ -263,7 +256,9 @@ function TxButton({
263256
!palletRpc ||
264257
!callable ||
265258
!allParamsFilled() ||
266-
((isSudo() || isUncheckedSudo()) && !isSudoer(accountPair))
259+
// These txs required currentAccount to be set
260+
((isSudo() || isUncheckedSudo() || isSigned()) && !currentAccount) ||
261+
((isSudo() || isUncheckedSudo()) && !isSudoer(currentAccount))
267262
}
268263
>
269264
{label}
@@ -273,7 +268,6 @@ function TxButton({
273268

274269
// prop type checking
275270
TxButton.propTypes = {
276-
accountPair: PropTypes.object,
277271
setStatus: PropTypes.func.isRequired,
278272
type: PropTypes.oneOf([
279273
'QUERY',

0 commit comments

Comments
 (0)