Skip to content

Commit

Permalink
Merge branch 'main' into proposal-template-droposal
Browse files Browse the repository at this point in the history
  • Loading branch information
neokry authored Apr 27, 2023
2 parents bf1a316 + 80f7179 commit 73754b4
Show file tree
Hide file tree
Showing 50 changed files with 1,405 additions and 870 deletions.
4 changes: 4 additions & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm format && pnpm eslint && git add .
2 changes: 1 addition & 1 deletion .husky/pre-push
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

pnpm format && pnpm type-check && pnpm eslint
pnpm type-check && pnpm eslint
54 changes: 54 additions & 0 deletions apps/web/src/components/Artwork/ArtworkPreview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { Flex } from '@zoralabs/zord'

import {
artworkPreviewGenerateButton,
artworkPreviewImageWrapper,
} from 'src/components/Fields/styles.css'
import { ImageProps } from 'src/hooks/useArtworkUpload'
import { Playground } from 'src/modules/create-dao'

import { Icon } from '../Icon'
import AnimatedModal from '../Modal/AnimatedModal'

export interface ArtworkPreviewProps {
canvas: React.MutableRefObject<null>
generatedImages: any[]
generateStackedImage: () => Promise<void>
images: ImageProps[] | undefined
}

export const ArtworkPreview: React.FC<ArtworkPreviewProps> = ({
canvas,
generatedImages,
generateStackedImage,
images,
}) => {
return (
<Flex align={'center'} justify={'center'} direction={'column'}>
<Flex className={artworkPreviewImageWrapper} mb={'x8'}>
<img height={'100%'} width={'100%'} src={generatedImages[0]} />
<canvas ref={canvas} style={{ display: 'none' }} />
</Flex>
<Flex
mb={'x6'}
align={'center'}
onClick={() => generateStackedImage()}
className={artworkPreviewGenerateButton}
>
<Flex w={'x6'} h={'x6'} mr={'x2'}>
<Icon id="refresh" />
</Flex>
<Flex>Generate Randomized Preview</Flex>
</Flex>
<Flex></Flex>
{images && (
<AnimatedModal
size={'large'}
trigger={<Flex>See more in Advanced Preview Playground</Flex>}
>
<Playground images={images} />
</AnimatedModal>
)}
</Flex>
)
}
124 changes: 124 additions & 0 deletions apps/web/src/components/Artwork/ArtworkUpload.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import { Box, Flex, Stack } from '@zoralabs/zord'
import React, { BaseSyntheticEvent, ReactElement } from 'react'

import {
defaultFileDownloadStyle,
defaultHelperTextStyle,
defaultInputLabelStyle,
defaultUploadButtonStyle,
defaultUploadStyle,
dropAreaErrorStyle,
dropAreaStyle,
noneSelectedStyle,
uploadErrorBox,
uploadSuccessBox,
} from 'src/components/Fields/styles.css'
import { Icon } from 'src/components/Icon'
import { ArtworkUploadError, ImageProps } from 'src/hooks/useArtworkUpload'
import { LayerOrdering } from 'src/modules/create-dao/components/Artwork/LayerOrdering'

interface ArtworkFormProps {
inputLabel: string | ReactElement
helperText?: string
errorMessage?: any
fileCount: number | string
traitCount: number
onUpload: (e: BaseSyntheticEvent) => void
uploadArtworkError: ArtworkUploadError | undefined
ipfsUploadError: boolean
images: ImageProps[] | undefined
fileType?: string
}

export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
inputLabel,
helperText,
errorMessage,
fileCount,
traitCount,
onUpload,
uploadArtworkError,
ipfsUploadError,
images,
fileType,
}) => {
const dropInput = React.useRef<HTMLInputElement>(null)
React.useEffect(() => {
if (dropInput.current !== null) {
dropInput.current.setAttribute('directory', '')
dropInput.current.setAttribute('webkitdirectory', '')
}
}, [dropInput])

return (
<Box mb={'x3'}>
<label className={defaultInputLabelStyle}>{inputLabel}</label>
{!!helperText && helperText?.length ? (
<Stack mb={'x8'}>
<Box className={defaultHelperTextStyle}>{helperText} </Box>
<Flex align={'center'}>
<a href={'/nouns.zip'} download className={defaultFileDownloadStyle}>
<Icon id="download" mr={'x2'} />
Download demo folder
</a>
</Flex>
</Stack>
) : null}
<div className={errorMessage ? dropAreaErrorStyle : dropAreaStyle}>
<Box
as={'label'}
h={'x16'}
w={'100%'}
px={'x8'}
htmlFor="file-upload"
className={defaultUploadButtonStyle}
>
<Box as="span">Upload</Box>
{(fileCount && <Box as="span">{fileCount} Files</Box>) || (
<Box as="span" className={noneSelectedStyle}>
None Selected
</Box>
)}
</Box>
<input
className={defaultUploadStyle}
id="file-upload"
name="file"
type="file"
multiple={true}
ref={dropInput}
onChange={onUpload}
/>
</div>
{((uploadArtworkError || ipfsUploadError) && (
<Box py={'x4'} className={uploadErrorBox}>
{ipfsUploadError && (
<Box>There was an issue uploading your files to ipfs. Please try again.</Box>
)}

<Box as={'ul'} m={'x0'}>
{uploadArtworkError?.maxTraits && <li>{uploadArtworkError.maxTraits}</li>}
{uploadArtworkError?.mime && <li>{uploadArtworkError.mime}</li>}
{uploadArtworkError?.directory && <li>{uploadArtworkError.directory}</li>}
{uploadArtworkError?.dimensions && <li>{uploadArtworkError.dimensions}</li>}
</Box>
</Box>
)) ||
(traitCount > 0 && (
<>
<Box p={'x4'} fontSize={12} className={uploadSuccessBox}>
<Box as={'ul'} m={'x0'}>
<li>
{traitCount > 1 ? `${traitCount} traits` : `${traitCount} trait`}{' '}
&#9733;
</li>
<li>supported file type: {fileType} &#9733;</li>
<li>correct folder structure &#9733;</li>
</Box>
</Box>
{images && <LayerOrdering images={images} />}
</>
))}
</Box>
)
}
2 changes: 2 additions & 0 deletions apps/web/src/components/Artwork/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './ArtworkPreview'
export * from './ArtworkUpload'
3 changes: 3 additions & 0 deletions apps/web/src/components/Icon/assets/warning.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions apps/web/src/components/Icon/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ import Plus from './assets/plus.svg'
import Refresh from './assets/refresh.svg'
import Trash from './assets/trash.svg'
import Twitter from './assets/twitter.svg'
import Warning from './assets/warning-16.svg'
import Warning16 from './assets/warning-16.svg'
import Warning from './assets/warning.svg'

export const icons = {
airdrop: Airdrop,
Expand Down Expand Up @@ -74,7 +75,7 @@ export const icons = {
trash: Trash,
twitter: Twitter,
warning: Warning,
'warning-16': Warning,
'warning-16': Warning16,
}

export type IconType = keyof typeof icons
4 changes: 4 additions & 0 deletions apps/web/src/constants/cacheTimes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,8 @@ export const CACHE_TIMES = {
maxAge: ONE_DAY,
swr: ONE_WEEK,
},
DECODE: {
maxAge: ONE_DAY,
swr: ONE_WEEK,
},
}
2 changes: 2 additions & 0 deletions apps/web/src/hooks/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@ export * from './useIsMounted'
export * from './usePrevious'
export * from './useTimeout'
export * from './useVotes'
export * from './useArtworkPreview'
export * from './useArtworkUpload'
Loading

0 comments on commit 73754b4

Please sign in to comment.