-
Notifications
You must be signed in to change notification settings - Fork 0
/
KittyCards.js
139 lines (125 loc) · 3.84 KB
/
KittyCards.js
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
134
135
136
137
138
139
import React from 'react'
import {
Button,
Card,
Grid,
Message,
Modal,
Form,
Label,
} from 'semantic-ui-react'
import KittyAvatar from './KittyAvatar'
import { TxButton } from './substrate-lib/components'
const TransferModal = props => {
const { kitty, accountPair, setStatus } = props;
const [open, setOpen] = React.useState(false);
const [formValue, setFormValue] = React.useState({});
const formChange = key => (ev, el) => {
setFormValue({ ...formValue, [key]: el.value });
};
const confirmAndClose = unsub => {
unsub()
setOpen(false)
}
return <Modal onClose={() => setOpen(false)} onOpen={() => setOpen(true)} open={open}
trigger={<Button basic color='blue'>Transfer</Button>}>
{/* The title of the modal */}
<Modal.Header>Kitty Transfer</Modal.Header>
<Modal.Content><Form>
{/* The modal's inputs fields */}
<Form.Input fluid label='Kitty ID' readOnly value={kitty.id}/>
<Form.Input fluid label='Receiver' placeholder='Receiver Address' onChange={formChange('target')}/>
</Form></Modal.Content>
<Modal.Actions>
{/* The cancel button */}
<Button basic color='grey' onClick={() => setOpen(false)}>Cancel</Button>
{/* The TxButton component */}
<TxButton
accountPair={accountPair} label='Transfer' type='SIGNED-TX' setStatus={setStatus}
onClick={confirmAndClose}
attrs={{
palletRpc: 'substrateKitties',
callable: 'transfer',
inputParams: [formValue.target, kitty.id],
paramFields: [true, true]
}}
/>
</Modal.Actions>
</Modal>;
};
// Use props
const KittyCard = props => {
const { kitty, accountPair, setStatus } = props;
const { id = null, dna = null, owner = null, gender = null, price = null } = kitty;
const displayDna = dna && dna.toJSON();
const isSelf = accountPair.address === kitty.owner;
return <Card>
{ isSelf && <Label as='a' floating color='teal'>Mine</Label> }
{/* Render the Kitty Avatar */}
<KittyAvatar dna={dna.toU8a()} />
<Card.Content>
{/* Display the Kitty ID */}
<Card.Header style={{ fontSize: '1em', overflowWrap: 'break-word' }}>
ID: {id}
</Card.Header>
{/* Display the Kitty DNA */}
<Card.Meta style={{ fontSize: '.9em', overflowWrap: 'break-word' }}>
DNA: {displayDna}
</Card.Meta>
{/* Display the Kitty ID, Gender, Owner and Price */}
<Card.Description>
<p style={{ overflowWrap: 'break-word' }}>
Gender: {gender}
</p>
<p style={{ overflowWrap: 'break-word' }}>
Owner: {owner}
</p>
<p style={{ overflowWrap: 'break-word' }}>
Price: {price}
</p>
</Card.Description>
</Card.Content>
// ...
{/* Render the transfer button using TransferModal */}
<Card.Content extra style={{ textAlign: 'center' }}>{
owner === accountPair.address
? <TransferModal kitty={kitty} accountPair={accountPair} setStatus={setStatus}/>
: ''
}</Card.Content>
</Card>;
};
const KittyCards = props => {
const { kitties, accountPair, setStatus } = props
{
/* Check the number of Kitties */
}
if (kitties.length === 0) {
return (
<Message info>
<Message.Header>
No Kitty found here... Create one now!
<span role="img" aria-label="point-down">
👇
</span>
</Message.Header>
</Message>
)
}
{
/* Render Kitties using Kitty Card in a grid */
}
return (
<Grid columns={3}>
{kitties.map((kitty, i) => (
<Grid.Column key={`kitty-${i}`}>
<KittyCard
kitty={kitty}
accountPair={accountPair}
setStatus={setStatus}
/>
</Grid.Column>
))}
</Grid>
)
}
export default KittyCards