-
Notifications
You must be signed in to change notification settings - Fork 5
/
ordinalImage.tsx
100 lines (88 loc) · 3.47 KB
/
ordinalImage.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
import { useState } from 'react';
import './App.css';
import { OrdiNFTP2PKH } from 'scrypt-ord';
import { Addr, PandaSigner } from 'scrypt-ts';
import ImageUploading, { ImageListType } from 'react-images-uploading';
import { Container, Box, Typography, Button } from '@mui/material';
import { Navigate } from 'react-router-dom';
import { useAppProvider } from './AppContext';
function OrdinalImage(props) {
const { ordiAddress: _ordiAddress,
signer: _signer,
connected
} = useAppProvider();
const [images, setImages] = useState<ImageListType>([])
const onImagesChange = (imageList: ImageListType) => {
setImages(imageList);
}
const [_result, setResult] = useState<string | undefined>(undefined)
const inscribe = async () => {
try {
const signer = _signer as PandaSigner
const instance = new OrdiNFTP2PKH(Addr(_ordiAddress!.toByteString()))
await instance.connect(signer)
const image = images[0]
const b64 = Buffer.from(await image.file!.arrayBuffer()).toString('base64')
const inscribeTx = await instance.inscribeImage(b64, image.file!.type)
setResult(`Inscribe Tx: ${inscribeTx.id}`)
setImages([])
} catch (e: any) {
console.error('error', e)
setResult(`${e.message ?? e}`)
}
if (window.gtag) {
window.gtag('event', 'inscribe-image');
}
}
return (
<Container maxWidth="md">
{!connected() && (<Navigate to="/" />)}
<Box sx={{ my: 4 }}>
<Typography variant="h4" component="h1" gutterBottom align="center">
Inscribe Image
</Typography>
</Box>
<Box sx={{ mt: 3 }}>
{
<ImageUploading value={images} onChange={onImagesChange} dataURLKey="data_url" >
{
({ imageList, onImageUpload, onImageRemoveAll, isDragging, dragProps }) => (
<>
<Box sx={{ display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
<Button variant="contained" color="primary" onClick={onImageUpload}>
Select an image
</Button>
<Button variant='outlined' color="secondary" onClick={onImageRemoveAll}>
Remove selected
</Button>
</Box>
{
imageList.map(
(image, index) => (
<Box sx={{ position: 'relative', width: '100%', mt: 4, display: 'flex', justifyContent: 'center', alignItems: 'center' }} key={index}>
<Box sx={{ position: 'relative' }}>
<img src={image['data_url']} alt="" width='100%' />
<Box sx={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />
</Box>
<Button variant="contained" color="primary" sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', zIndex: 1 }} onClick={inscribe}>
Inscribe It!
</Button>
</Box>
)
)
}
</>
)
}
</ImageUploading>
}
</Box>
{
!_result
? ''
: (<Box sx={{ mt: 3 }}><Typography variant="body1">{_result}</Typography></Box>)
}
</Container>
);
}
export default OrdinalImage;