stargaze-studio/components/WhitelistUpload.tsx
Arda Nakışçı ff5a8d2e7d
Whitelist txt upload component (#9)
* Update ts config

* Update network chain id

* Create whitelist upload component

* Use whitelist component in contract ui

* Add whitelist component to collection info component
2022-07-29 10:39:03 +03:00

47 lines
1.5 KiB
TypeScript

import clsx from 'clsx'
import React from 'react'
import { toast } from 'react-hot-toast'
interface WhitelistUploadProps {
onChange: (data: string[]) => void
}
export const WhitelistUpload = ({ onChange }: WhitelistUploadProps) => {
const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (!event.target.files) return toast.error('Error opening file')
if (event.target.files[0].type !== 'text/plain') return toast.error('Invalid file type')
const reader = new FileReader()
reader.onload = (e: ProgressEvent<FileReader>) => {
const text = e.target?.result?.toString()
let newline = '\n'
if (text?.includes('\r')) newline = '\r'
if (text?.includes('\r\n')) newline = '\r\n'
const data = text?.split(newline)
return onChange([...new Set(data?.filter((address) => address !== '') || [])])
}
reader.readAsText(event.target.files[0])
}
return (
<div
className={clsx(
'flex relative justify-center items-center mt-2 space-y-4 w-full h-32',
'rounded border-2 border-white/20 border-dashed',
)}
>
<input
accept=".txt"
className={clsx(
'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
)}
id="whitelist-file"
multiple
onChange={onFileChange}
type="file"
/>
</div>
)
}