Merge branch 'main' into display-founders-allocation

ourzora · Mar 28, 2023 · 2f06f43 · 2f06f43
2 parents 4841a87 + aa94ec9
commit 2f06f43
Show file tree

Hide file tree

Showing 13 changed files with 190 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,8 @@
 
 This is Nouns Builder front-end mono-repo. You can find Nouns Builder deployed on:
 
-- [Mainnet](nous.build)
-- [Goerli testnet](testnet.nouns.build)
+- [Mainnet](//nouns.build)
+- [Goerli testnet](//testnet.nouns.build)
 
 For an introduction to Nouns Builder and its concept, you can find further [documentation here](https://docs.zora.co/docs/smart-contracts/nouns-builder/intro). You can also find [Nouns Protocol here](https://github.com/ourzora/nouns-protocol).
 

diff --git a/apps/web/src/components/Home/Marquee.css.ts b/apps/web/src/components/Home/Marquee.css.ts
@@ -0,0 +1,30 @@
+import { style } from '@vanilla-extract/css'
+
+const baseStyles = {
+  height: '110px',
+  width: 'auto',
+}
+
+const getMobileStyle = (width: string) => {
+  return {
+    '@media': {
+      'screen and (max-width: 768px)': {
+        height: 'auto',
+        width: width,
+      },
+    },
+  }
+}
+
+export const Unlock = style([baseStyles, getMobileStyle('130px')])
+export const PurpleGalaxy = style([baseStyles, getMobileStyle('34px')])
+export const The = style([baseStyles, getMobileStyle('62px')])
+export const BlueWheel = style([baseStyles, getMobileStyle('36px')])
+export const Possibilities = style([baseStyles, getMobileStyle('225px')])
+export const Of = style([baseStyles, getMobileStyle('38px')])
+export const GreenClover = style([baseStyles, getMobileStyle('36px')])
+export const Collective = style([baseStyles, getMobileStyle('180px')])
+export const PurpleStar = style([baseStyles, getMobileStyle('36px')])
+export const BlueSun = style([baseStyles, getMobileStyle('36px')])
+export const NounsGlasses = style([baseStyles, getMobileStyle('62px')])
+export const Creation = style([baseStyles, getMobileStyle('157px')])
diff --git a/apps/web/src/components/Home/Marquee.tsx b/apps/web/src/components/Home/Marquee.tsx
@@ -1,33 +1,45 @@
 import { Flex, atoms } from '@zoralabs/zord'
 import { motion } from 'framer-motion'
+import Image from 'next/image'
 import React from 'react'
 
 import { useLayoutStore } from 'src/stores'
 
+import {
+  BlueSun,
+  BlueWheel,
+  Collective,
+  Creation,
+  GreenClover,
+  NounsGlasses,
+  Of,
+  Possibilities,
+  PurpleGalaxy,
+  PurpleStar,
+  The,
+  Unlock,
+} from './Marquee.css'
+
 const Marquee = () => {
   const { isMobile } = useLayoutStore()
   return (
     <Flex direction={'column'} align={'center'} mt={{ '@initial': 'x4', '@768': 'x32' }}>
       <Flex gap={'x2'} mb={'x1'}>
-        <img
-          src={'/home/unlock.svg'}
-          alt={'unlock'}
-          width={isMobile ? '130px' : 'auto'}
-        />
+        <Image src={'/home/unlock.svg'} alt={'unlock'} className={Unlock} />
         <motion.div
           className={atoms({ display: 'flex', alignItems: 'center' })}
           animate={{ rotate: 360 }}
           transition={{ ease: 'linear', duration: 2, repeat: Infinity }}
         >
-          <img
+          <Image
             src={'/home/purple_galaxy.svg'}
             alt={'purple galaxy icon'}
-            width={isMobile ? '34px' : 'auto'}
+            className={PurpleGalaxy}
           />
         </motion.div>
       </Flex>
       <Flex gap={'x2'} mb={'x1'}>
-        <img src={'/home/the.svg'} alt={'the'} width={isMobile ? '62px' : 'auto'} />
+        <Image src={'/home/the.svg'} alt={'the'} className={The} />
         <motion.div
           className={atoms({ display: 'flex', alignItems: 'center' })}
           animate={{ rotate: [36, 72, 108, 144, 180, 216, 252, 288, 324, 396] }}
@@ -37,20 +49,16 @@ const Marquee = () => {
             repeat: Infinity,
           }}
         >
-          <img
-            src={'/home/blue_wheel.svg'}
-            alt={'blue wheel'}
-            width={isMobile ? '36px' : 'auto'}
-          />
+          <Image src={'/home/blue_wheel.svg'} alt={'blue wheel'} className={BlueWheel} />
         </motion.div>
-        <img
+        <Image
           src={'/home/possibilities.svg'}
           alt={'possibilities'}
-          width={isMobile ? '225px' : 'auto'}
+          className={Possibilities}
         />
       </Flex>
       <Flex gap={'x2'} mb={'x1'}>
-        <img src={'/home/of.svg'} alt={'of'} width={isMobile ? '38px' : 'auto'} />
+        <Image src={'/home/of.svg'} alt={'of'} className={Of} />
         <motion.div
           className={atoms({ display: 'flex', alignItems: 'center' })}
           animate={{ rotate: -360 }}
@@ -60,17 +68,13 @@ const Marquee = () => {
             repeat: Infinity,
           }}
         >
-          <img
+          <Image
             src={'/home/green_clover.svg'}
             alt={'green clover icon'}
-            width={isMobile ? '36px' : 'auto'}
+            className={GreenClover}
           />
         </motion.div>
-        <img
-          src={'/home/collective.svg'}
-          alt={'collective'}
-          width={isMobile ? '180px' : 'auto'}
-        />
+        <Image src={'/home/collective.svg'} alt={'collective'} className={Collective} />
 
         <Flex
           ml={isMobile ? 'x4' : 'x12'}
@@ -95,10 +99,10 @@ const Marquee = () => {
             }}
             transition={{ duration: 2, repeat: Infinity }}
           >
-            <img
+            <Image
               src={'/home/purple_star.svg'}
               alt={'purple star icon'}
-              width={isMobile ? '36px' : 'auto'}
+              className={PurpleStar}
             />
           </motion.div>
           <motion.div
@@ -119,25 +123,17 @@ const Marquee = () => {
             }}
             transition={{ duration: 2, repeat: Infinity, delay: 1 }}
           >
-            <img
-              src={'/home/blue_sun.svg'}
-              alt={'blue sun icon'}
-              width={isMobile ? '36px' : 'auto'}
-            />
+            <Image src={'/home/blue_sun.svg'} alt={'blue sun icon'} className={BlueSun} />
           </motion.div>
         </Flex>
       </Flex>
       <Flex gap={'x2'} mb={'x1'}>
-        <img
+        <Image
           src={'/home/nouns_glasses.svg'}
           alt={'small nouns glasses logo'}
-          width={isMobile ? '62px' : 'auto'}
-        />
-        <img
-          src={'/home/creation.svg'}
-          alt={'creation'}
-          width={isMobile ? '157px' : 'auto'}
+          className={NounsGlasses}
         />
+        <Image src={'/home/creation.svg'} alt={'creation'} className={Creation} />
       </Flex>
     </Flex>
   )

diff --git a/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts b/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.schema.ts
@@ -14,7 +14,10 @@ const allocationSchema = Yup.object().shape({
   allocationPercentage: Yup.number()
     .transform((value) => (isNaN(value) ? undefined : value))
     .required('*')
-    .min(1, '> 0') // (condition, errorMessage) - allocation represented as % must be greater than or equal to 0
+    .when('admin', (admin, schema) => {
+      if (!admin) return schema.min(1, '> 0') // (condition, errorMessage) - allocation represented as % must be greater than or equal to 0
+      return schema
+    })
     .max(100, '< 100')
     .integer('Must be whole number'),
   endDate: Yup.string()
@@ -25,6 +28,7 @@ const allocationSchema = Yup.object().shape({
       const now = new Date()
       return date > now
     }),
+  admin: Yup.boolean(),
 })
 
 export const validationSchemaContributions = Yup.object().shape({

diff --git a/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.tsx b/apps/web/src/modules/create-dao/components/AllocationForm/AllocationForm.tsx
@@ -25,6 +25,7 @@ export interface TokenAllocation {
   allocationPercentage: number | string
   founderAddress: string
   endDate: string
+  admin?: boolean
 }
 
 export interface FounderAllocationFormValues {
@@ -42,6 +43,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
     activeSection,
     setFulfilledSections,
     vetoPower,
+    vetoerAddress,
     auctionSettings: { auctionDuration },
   } = useFormStore(
     (state) => ({
@@ -52,6 +54,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
       activeSection: state.activeSection,
       setFulfilledSections: state.setFulfilledSections,
       vetoPower: state.vetoPower,
+      vetoerAddress: state.vetoerAddress,
       auctionSettings: state.auctionSettings,
     }),
     shallow
@@ -73,13 +76,15 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
             founderAddress: signerAddress || '',
             allocationPercentage: '',
             endDate: '',
+            admin: true,
           },
         ]
       : [
           {
             founderAddress: signerAddress || '',
             allocationPercentage: founderAllocation[0].allocationPercentage,
             endDate: founderAllocation[0].endDate,
+            admin: true,
           },
           ...founderAllocation.slice(1),
         ]
@@ -108,6 +113,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
     setFounderAllocation(
       founderAllocation.map((allocation, idx) => ({
         ...allocation,
+        admin: undefined,
         founderAddress: founderAllocationAddresses[idx],
       }))
     )
@@ -138,6 +144,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
                   formik={formik}
                   auctionDuration={auctionDuration!}
                   vetoPower={vetoPower}
+                  vetoerAddress={vetoerAddress}
                   touched={formik.touched}
                   values={formik.values}
                   errors={formik.errors}

diff --git a/apps/web/src/modules/create-dao/components/AllocationForm/FounderAllocationFields.tsx b/apps/web/src/modules/create-dao/components/AllocationForm/FounderAllocationFields.tsx
@@ -17,6 +17,7 @@ interface FounderAllocationFieldsProps {
   values: FounderAllocationFormValues
   auctionDuration: Duration
   vetoPower?: boolean
+  vetoerAddress: string
   errors?: FormikErrors<FounderAllocationFormValues>
   touched: FormikTouched<FounderAllocationFormValues>
   formik: FormikProps<FounderAllocationFormValues>
@@ -27,6 +28,7 @@ interface FounderAllocationFieldsProps {
 export const FounderAllocationFields = ({
   values,
   vetoPower,
+  vetoerAddress,
   auctionDuration,
   errors,
   touched,
@@ -45,6 +47,7 @@ export const FounderAllocationFields = ({
       <Stack>
         {values.founderAllocation.map((founder, index) => {
           const isFounder = index === 0
+          const isVetoer = vetoPower && vetoerAddress === founder.founderAddress
 
           const error =
             typeof errors?.founderAllocation === 'object'
@@ -129,8 +132,12 @@ export const FounderAllocationFields = ({
                   </Button>
                 )}
 
-                {isFounder && vetoPower === true && (
-                  <Flex align={'center'} color="warning">
+                {isVetoer && (
+                  <Flex
+                    align={'center'}
+                    ml={isFounder ? undefined : 'x2'}
+                    color="warning"
+                  >
                     <Icon size="sm" id="warning-16" fill="warning" />
                     <Flex fontWeight={'display'} ml={'x2'}>
                       This address has proposal veto power

diff --git a/apps/web/src/modules/create-dao/components/Artwork/ArtworkUpload.tsx b/apps/web/src/modules/create-dao/components/Artwork/ArtworkUpload.tsx
@@ -124,7 +124,9 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
           uri: upload?.ipfs?.uri || '',
           url: encodeURI(
             getFetchableUrl(upload?.ipfs?.uri) +
-              `/${upload.webkitRelativePath.split('/').slice(1).join('/')}` || ''
+              `/${sanitizeFileName(
+                upload.webkitRelativePath.split('/').slice(1).join('/')
+              )}` || ''
           ),
           path: upload.webkitRelativePath,
           content: upload?.content,

diff --git a/apps/web/src/modules/create-dao/components/ReviewAndDeploy/ReviewAndDeploy.tsx b/apps/web/src/modules/create-dao/components/ReviewAndDeploy/ReviewAndDeploy.tsx
@@ -70,6 +70,7 @@ export const ReviewAndDeploy: React.FC<ReviewAndDeploy> = ({ title }) => {
     ipfsUpload,
     setFulfilledSections,
     vetoPower,
+    vetoerAddress,
   } = useFormStore()
 
   const handlePrev = () => {
@@ -125,7 +126,7 @@ export const ReviewAndDeploy: React.FC<ReviewAndDeploy> = ({ title }) => {
       : BigNumber.from('0'),
     vetoer:
       vetoPower === true
-        ? ethers.utils.getAddress(founderParams?.[0].wallet as AddressType)
+        ? ethers.utils.getAddress(vetoerAddress as AddressType)
         : ethers.utils.getAddress(NULL_ADDRESS),
   }