LaconicNetwork/stargaze-studio
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #160 from public-awesome/develop

Browse Source 
Sync development > main
This commit is contained in:
Serkan Reis 2023-05-03 22:08:38 +03:00 committed by GitHub
commit 686b7494ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 275 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@ -1,4 +1,4 @@
APP_VERSION=0.6.0
APP_VERSION=0.6.1
NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
NEXT_PUBLIC_SG721_CODE_ID=2092

155
components/LogModal.tsx Normal file
View File

@ -0,0 +1,155 @@
import { useLogStore } from 'contexts/log'
import { useRef, useState } from 'react'
import { FaCopy, FaEraser } from 'react-icons/fa'
import { copy } from 'utils/clipboard'
import type { LogItem } from '../contexts/log'
import { removeLogItem, setLogItemList } from '../contexts/log'
import { Button } from './Button'
import { Tooltip } from './Tooltip'
export interface LogModalProps {
tempLogItem?: LogItem
}
export const LogModal = (props: LogModalProps) => {
const logs = useLogStore()
const [isChecked, setIsChecked] = useState(false)
const checkBoxRef = useRef<HTMLInputElement>(null)
const handleCheckBox = () => {
checkBoxRef.current?.click()
}
return (
<div>
<input className="modal-toggle" defaultChecked={false} id="my-modal-8" ref={checkBoxRef} type="checkbox" />
<label className="cursor-pointer modal" htmlFor="my-modal-8">
<label
className={`absolute top-[15%] bottom-5 left-[21.5%] lg:max-w-[70%] ${
logs.itemList.length > 4 ? 'max-h-[750px]' : 'max-h-[500px]'
} border-2 no-scrollbar modal-box`}
htmlFor="temp"
>
<div className="text-xl font-bold">
<table className="table w-full h-1/2">
<thead className="sticky inset-x-0 top-0 bg-blue-400/20 backdrop-blur-sm">
<tr>
<th className="text-lg font-bold bg-transparent">#</th>
<th className="text-lg font-bold bg-transparent">Type</th>
<th className="text-lg font-bold bg-transparent">Message</th>
<th className="text-lg font-bold bg-transparent">
Time (UTC +{-new Date().getTimezoneOffset() / 60}){' '}
</th>
<th className="bg-transparent" />
</tr>
</thead>
<tbody>
{logs.itemList.length > 0 &&
logs.itemList.map((logItem, index) => (
<tr key={logItem.id} className="p-0 border-b-2 border-teal-200/10 border-collapse">
<td className="ml-8 w-[5%] font-mono text-base font-bold bg-transparent">{index + 1}</td>
<td
className={`w-[5%] font-mono text-base font-bold bg-transparent ${
logItem.type === 'Error' ? 'text-red-400' : ''
}`}
>
{logItem.type || 'Info'}
</td>
<td className="w-[70%] text-sm font-bold bg-transparent">
<Tooltip backgroundColor="bg-transparent" label="" placement="bottom">
<button
className="group flex overflow-auto space-x-2 max-w-xl font-mono text-base text-white/80 hover:underline no-scrollbar"
onClick={() => void copy(logItem.message)}
type="button"
>
<span>{logItem.message}</span>
<FaCopy className="opacity-0 group-hover:opacity-100" />
</button>
</Tooltip>
</td>
<td className="w-[20%] font-mono text-base bg-transparent">
{logItem.timestamp ? new Date(logItem.timestamp).toLocaleString() : ''}
</td>
<th className="bg-transparent">
<div className="flex items-center space-x-8">
<Button
className="bg-clip-text border-blue-200"
onClick={(e) => {
e.preventDefault()
removeLogItem(logItem.id)
}}
variant="outline"
>
<FaEraser />
</Button>
</div>
</th>
</tr>
//line break
))}
</tbody>
</table>
<br />
</div>
<div className="flex flex-row">
<div className="flex justify-start ml-4 w-full">
<Button className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-700">
<label
className="w-full h-full text-white bg-gray-600 hover:bg-gray-700 rounded border-0 btn modal-button"
htmlFor="my-modal-8"
>
Go Back
</label>
</Button>
<Button
className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-700"
onClick={() => {
window.localStorage.setItem('error_list', '')
setLogItemList([])
}}
>
<label
className="w-full h-full text-white bg-blue-400 hover:bg-blue-500 rounded border-0 btn modal-button"
htmlFor="my-modal-8"
>
Clear
</label>
</Button>
</div>
<div className="flex justify-end w-full">
<Button
className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-700"
onClick={() => {
const csv = logs.itemList
.map((logItem) => {
return `${logItem.type as string},${logItem.message},${
logItem.timestamp ? new Date(logItem.timestamp).toUTCString().replace(',', '') : ''
}`
})
.join('\n')
const blob = new Blob([csv], { type: 'text/csv' })
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.setAttribute('hidden', '')
a.setAttribute('href', url)
a.setAttribute('download', 'studio_logs.csv')
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}}
>
<label
className="w-full h-full text-white bg-stargaze hover:bg-stargaze/80 rounded border-0 btn modal-button"
htmlFor="my-modal-8"
>
Download
</label>
</Button>
</div>
</div>
</label>
</label>
</div>
)
}

26
components/Sidebar.tsx
View File

@ -3,21 +3,36 @@
import clsx from 'clsx'
import { Anchor } from 'components/Anchor'
import { setLogItemList, useLogStore } from 'contexts/log'
import { useWallet } from 'contexts/wallet'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
// import BrandText from 'public/brand/brand-text.svg'
import { footerLinks, socialsLinks } from 'utils/links'
import { BADGE_HUB_ADDRESS, BASE_FACTORY_ADDRESS, NETWORK } from '../utils/constants'
import { Conditional } from './Conditional'
import { IncomeDashboardDisclaimer } from './IncomeDashboardDisclaimer'
import { LogModal } from './LogModal'
import { SidebarLayout } from './SidebarLayout'
import { WalletLoader } from './WalletLoader'
export const Sidebar = () => {
const router = useRouter()
const wallet = useWallet()
const logs = useLogStore()
useEffect(() => {
if (logs.itemList.length === 0) return
console.log('Stringified log item list: ', JSON.stringify(logs.itemList))
window.localStorage.setItem('logs', JSON.stringify(logs.itemList))
}, [logs])
useEffect(() => {
console.log(window.localStorage.getItem('logs'))
setLogItemList(JSON.parse(window.localStorage.getItem('logs') || '[]'))
}, [])
return (
<SidebarLayout>
@ -25,7 +40,6 @@ export const Sidebar = () => {
<Anchor href="/" onContextMenu={(e) => [e.preventDefault(), router.push('/brand')]}>
<img alt="Brand Text" className="w-full" src="/stargaze_logo_800.svg" />
</Anchor>
{/* wallet button */}
<WalletLoader />
{/* main navigation routes */}
@ -205,9 +219,17 @@ export const Sidebar = () => {
</div>
<IncomeDashboardDisclaimer creatorAddress={wallet.address ? wallet.address : ''} />
<LogModal />
<div className="flex-grow" />
{logs.itemList.length > 0 && (
<label
className="w-[65%] h-[4px] text-lg font-bold text-white normal-case bg-blue-500 hover:bg-blue-600 border-none animate-none btn modal-button"
htmlFor="my-modal-8"
>
View Logs
</label>
)}
{/* Stargaze network status */}
<div className="text-sm capitalize">Network: {wallet.network}</div>

3
components/collections/creation/CollectionDetails.tsx
View File

@ -10,10 +10,12 @@ import { FormGroup } from 'components/FormGroup'
import { useInputState } from 'components/forms/FormInput.hooks'
import { InputDateTime } from 'components/InputDateTime'
import { Tooltip } from 'components/Tooltip'
import { addLogItem } from 'contexts/log'
import type { ChangeEvent } from 'react'
import { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import { SG721_UPDATABLE_CODE_ID } from 'utils/constants'
import { uid } from 'utils/random'
import { TextInput } from '../../forms/FormInput'
import type { MinterType } from '../actions/Combobox'
@ -89,6 +91,7 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [

18
components/collections/creation/UploadDetails.tsx
View File

@ -13,10 +13,12 @@ import { useInputState } from 'components/forms/FormInput.hooks'
import { MetadataInput } from 'components/MetadataInput'
import { MetadataModal } from 'components/MetadataModal'
import { SingleAssetPreview } from 'components/SingleAssetPreview'
import { addLogItem } from 'contexts/log'
import type { ChangeEvent } from 'react'
import { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import type { UploadServiceType } from 'services/upload'
import { uid } from 'utils/random'
import { naturalCompare } from 'utils/sort'
import type { MinterType } from '../actions/Combobox'
@ -106,6 +108,12 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
for (let i = 0; i < sortedFileNames.length; i++) {
if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) {
toast.error('The file names should be in numerical order starting from 1.')
addLogItem({
id: uid(),
message: 'The file names should be in numerical order starting from 1.',
type: 'Error',
timestamp: new Date(),
})
//clear the input
event.target.value = ''
return
@ -152,6 +160,12 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
for (let i = 0; i < sortedFileNames.length; i++) {
if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) {
toast.error('The file names should be in numerical order starting from 1.')
addLogItem({
id: uid(),
message: 'The file names should be in numerical order starting from 1.',
type: 'Error',
timestamp: new Date(),
})
event.target.value = ''
return
}
@ -174,9 +188,10 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
setMetadataFilesArray([])
return toast.error(`Invalid metadata file: ${metadataFile.name}`)
}
} catch (error) {
} catch (error: any) {
event.target.value = ''
setMetadataFilesArray([])
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
return toast.error(`Invalid metadata file: ${metadataFile.name}`)
}
}
@ -237,6 +252,7 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
onChange(data)
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
}
}, [
assetFilesArray,

27
contexts/log.ts Normal file
View File

@ -0,0 +1,27 @@
import create from 'zustand'
export interface LogItem {
id: string
message: string
type?: string
timestamp?: Date
code?: number
source?: string
connectedWallet?: string
}
export const useLogStore = create(() => ({
itemList: [] as LogItem[],
}))
export const setLogItemList = (list: LogItem[]) => {
useLogStore.setState({ itemList: list })
}
export const addLogItem = (item: LogItem) => {
useLogStore.setState((prev) => ({ itemList: [...prev.itemList, item] }))
}
export const removeLogItem = (id: string) => {
useLogStore.setState((prev) => ({ itemList: prev.itemList.filter((item) => item.id !== id) }))
}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "stargaze-studio",
"version": "0.6.0",
"version": "0.6.1",
"workspaces": [
"packages/*"
],

16
pages/badges/create.tsx
View File

@ -22,6 +22,7 @@ import { TextInput } from 'components/forms/FormInput'
import { useInputState } from 'components/forms/FormInput.hooks'
import { Tooltip } from 'components/Tooltip'
import { useContracts } from 'contexts/contracts'
import { addLogItem } from 'contexts/log'
import { useWallet } from 'contexts/wallet'
import type { Badge } from 'contracts/badgeHub'
import type { DispatchExecuteArgs as BadgeHubDispatchExecuteArgs } from 'contracts/badgeHub/messages/execute'
@ -41,6 +42,7 @@ import { copy } from 'utils/clipboard'
import { BADGE_HUB_ADDRESS, BLOCK_EXPLORER_URL, NETWORK } from 'utils/constants'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
import { uid } from 'utils/random'
import { resolveAddress } from 'utils/resolveAddress'
import { truncateMiddle } from 'utils/text'
@ -97,6 +99,7 @@ const BadgeCreationPage: NextPage = () => {
}, 100)
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
setReadyToCreateBadge(false)
}
@ -127,6 +130,7 @@ const BadgeCreationPage: NextPage = () => {
return imageUploadDetails?.imageUrl as string
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setCreatingBadge(false)
setUploading(false)
throw new Error("Couldn't upload the image.")
@ -252,13 +256,15 @@ const BadgeCreationPage: NextPage = () => {
})
.catch((error: { message: any }) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
setIsAddingKeysComplete(false)
setCreatingBadge(false)
})
}
} catch (err: any) {
toast.error(err.message, { style: { maxWidth: 'none' } })
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setCreatingBadge(false)
setUploading(false)
}
@ -296,6 +302,12 @@ const BadgeCreationPage: NextPage = () => {
const url = new URL(badgeDetails.external_url)
} catch (e: any) {
throw new Error(`Invalid external url: Make sure to include the protocol (e.g. https://)`)
addLogItem({
id: uid(),
message: 'Invalid external url: Make sure to include the protocol (e.g. https://)',
type: 'Error',
timestamp: new Date(),
})
}
}
}

45
pages/collections/create.tsx
View File

@ -29,6 +29,7 @@ import type { WhitelistDetailsDataProps } from 'components/collections/creation/
import { Conditional } from 'components/Conditional'
import { LoadingModal } from 'components/LoadingModal'
import { useContracts } from 'contexts/contracts'
import { addLogItem } from 'contexts/log'
import { useWallet } from 'contexts/wallet'
import type { DispatchExecuteArgs as BaseFactoryDispatchExecuteArgs } from 'contracts/baseFactory/messages/execute'
import { dispatchExecute as baseFactoryDispatchExecute } from 'contracts/baseFactory/messages/execute'
@ -56,6 +57,7 @@ import {
} from 'utils/constants'
import { withMetadata } from 'utils/layout'
import { links } from 'utils/links'
import { uid } from 'utils/random'
import type { MinterType } from '../../components/collections/actions/Combobox'
import type { UploadMethod } from '../../components/collections/creation/UploadDetails'
@ -127,19 +129,25 @@ const CollectionCreationPage: NextPage = () => {
checkwalletBalance()
setReadyToCreateVm(true)
})
.catch((err) => {
if (String(err.message).includes('Insufficient wallet balance'))
toast.error(`${err.message}`, { style: { maxWidth: 'none' } })
else toast.error(`Error in Whitelist Configuration: ${err.message}`, { style: { maxWidth: 'none' } })
.catch((error) => {
if (String(error.message).includes('Insufficient wallet balance')) {
toast.error(`${error.message}`, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
} else {
toast.error(`Error in Whitelist Configuration: ${error.message}`, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
}
setReadyToCreateVm(false)
})
})
.catch((err) => {
toast.error(`Error in Royalty Details: ${err.message}`, { style: { maxWidth: 'none' } })
.catch((error) => {
toast.error(`Error in Royalty Details: ${error.message}`, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setReadyToCreateVm(false)
})
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
setReadyToCreateVm(false)
}
@ -157,17 +165,20 @@ const CollectionCreationPage: NextPage = () => {
checkwalletBalance()
setReadyToCreateBm(true)
})
.catch((err) => {
toast.error(`${err.message}`, { style: { maxWidth: 'none' } })
.catch((error) => {
toast.error(`${error.message}`, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setReadyToCreateBm(false)
})
})
.catch((err) => {
toast.error(`Error in Royalty Configuration: ${err.message}`, { style: { maxWidth: 'none' } })
.catch((error) => {
toast.error(`Error in Royalty Configuration: ${error.message}`, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setReadyToCreateBm(false)
})
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
}
}
@ -180,12 +191,14 @@ const CollectionCreationPage: NextPage = () => {
.then(() => {
setReadyToUploadAndMint(true)
})
.catch((err) => {
toast.error(`${err.message}`, { style: { maxWidth: 'none' } })
.catch((error) => {
toast.error(`${error.message}`, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setReadyToUploadAndMint(false)
})
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
}
}
@ -245,6 +258,7 @@ const CollectionCreationPage: NextPage = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' }, duration: 10000 })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setCreatingCollection(false)
setUploading(false)
}
@ -307,6 +321,7 @@ const CollectionCreationPage: NextPage = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' }, duration: 10000 })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setCreatingCollection(false)
setUploading(false)
}
@ -367,6 +382,7 @@ const CollectionCreationPage: NextPage = () => {
})
.catch((error) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
setCreatingCollection(false)
setIsMintingComplete(false)
@ -388,6 +404,7 @@ const CollectionCreationPage: NextPage = () => {
})
.catch((error) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
setCreatingCollection(false)
})
@ -396,6 +413,7 @@ const CollectionCreationPage: NextPage = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setCreatingCollection(false)
setUploading(false)
}
@ -583,6 +601,7 @@ const CollectionCreationPage: NextPage = () => {
)
.catch((error) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
setIsMintingComplete(false)
setCreatingCollection(false)
@ -607,6 +626,7 @@ const CollectionCreationPage: NextPage = () => {
)
.catch((error) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
setIsMintingComplete(false)
setCreatingCollection(false)
@ -617,6 +637,7 @@ const CollectionCreationPage: NextPage = () => {
})
.catch((error) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
addLogItem({ id: uid(), message: error.message, type: 'Error', timestamp: new Date() })
setUploading(false)
setCreatingCollection(false)
})