Update subgraph URLs and run format (#6)

* Update subgraph README.md
* Update subgraph URLs for Base, Optimism, and Ethereum
* format project

README.md

@@ -1,6 +1,7 @@
 # Nouns Builder Subgraph
 
 ## Index
+
 - [Getting Started](#getting-started)
 - [Step 1 - Install Dependencies](#step-1---install-dependencies)
 - [Step 2 - Set Up a Personal Goldsky API Key](#step-2---set-up-a-personal-goldsky-api-key)
@@ -12,9 +13,11 @@
 - [(DEPRECATED) Local Development with Docker Compose (TODO: fix - pnpm create:local step not working)](#local-development-with-docker-compose)
 
 ## Getting Started
+
 👉 [Read the Goldsky docs](https://docs.goldsky.com/subgraphs/deploying-subgraphs)
 
 The Nouns Builder subgraph supports eight networks:
+
 - `ethereum`
 - `ethereum-sepolia`
 - `base`
@@ -25,41 +28,49 @@ The Nouns Builder subgraph supports eight networks:
 - `zora-sepolia`
 
 ### Step 1 - Install Dependencies
+
 Navigate to the subgraph directory and run:
+
 ```bash
 # FROM: ./apps/subgraph
 pnpm install
 ```
 
 ### Step 2 - Set Up a Personal Goldsky API Key
+
 1. Request to join the team account at [goldsky.com](https://goldsky.com).
 2. Create an API key on your Settings page.
 3. Install the Goldsky CLI:
-    ```bash
-    curl https://goldsky.com | sh  
-    ```  
+   ```bash
+   curl https://goldsky.com | sh
+   ```
 
 ### Step 3 - Log in with the API Key
+
 Use the API key you created:
+
 ```bash
 # FROM: ./apps/subgraph
 goldsky login
 ```
 
 ### Step 4 - Build the Subgraph from Source
+
 Run the following commands (these scripts are defined in `package.json`):
+
 ```bash
 # FROM: ./apps/subgraph
 pnpm prepare:<desired network>
 pnpm codegen
 pnpm build
-```  
+```
 
 This will generate types, build the subgraph, and create a local `subgraph.yaml` file.
 
 ### Step 5 - Deploy the Subgraph to Production
 
 #### IMPORTANT:
+
 **To avoid downtime during upgrades, maintain a backup subgraph. If issues arise, you can redirect traffic to the backup rather than waiting for redeployment or rollback, which can take hours.**
 
 - The subgraph name follows the pattern `nouns-builder-<network>` regardless of version, don't clients do not need to be notified for non-breaking changes.
@@ -73,7 +84,7 @@ This will generate types, build the subgraph, and create a local `subgraph.yaml`
 # FROM: ./apps/subgraph
 # Example with specVersion 0.0.6
 
-goldsky subgraph deploy nouns-builder-<network>/0.0.6 --path .        
+goldsky subgraph deploy nouns-builder-<network>/0.0.6 --path .
 goldsky subgraph tag create nouns-builder-<network>/0.0.6 --tag latest
 # API endpoint format will be: api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-ethereum-sepolia/latest/gn
 ```
@@ -96,6 +107,7 @@ The subgraph is currently deployed to the following networks:
 - TODO: [Base Sepolia](https://api.goldsky.com/api/public/project_cm33ek8kjx6pz010i2c3w8z25/subgraphs/nouns-builder-base-sepolia/latest/gn)
 
 ## (DEPRECATED) Local Development with Docker Compose (TODO: fix - pnpm create:local step not working)
+
 - Generate the subgraph.yml file with `pnpm prepare:<desired network>`
 - Generate types with `pnpm codegen`
 - Build the subgraph with `pnpm build`

apps/subgraph/README.md

@@ -1,51 +1,61 @@
 # Nouns Builder Subgraph
 
 ## Getting Started
+
 👉 [Read the Goldsky docs](https://docs.goldsky.com/subgraphs/deploying-subgraphs)
 
 The Nouns Builder subgraph supports four networks:
+
 - `ethereum`
 - `ethereum-sepolia`
 - `base`
 - `optimism`
 - `zora`
 
 ### Step 1 - Install Dependencies
+
 Navigate to the subgraph directory and run:
+
 ```bash
 # FROM: ./apps/subgraph
 pnpm install
 ```
 
 ### Step 2 - Set Up a Personal Goldsky API Key
+
 1. Request to join the team account at [goldsky.com](https://goldsky.com).
 2. Create an API key on your Settings page.
 3. Install the Goldsky CLI:
-    ```bash
-    curl https://goldsky.com | sh  
-    ```  
+   ```bash
+   curl https://goldsky.com | sh
+   ```
 
 ### Step 3 - Log in with the API Key
+
 Use the API key you created:
+
 ```bash
 # FROM: ./apps/subgraph
 goldsky login
 ```
 
 ### Step 4 - Build the Subgraph from Source
+
 Run the following commands (these scripts are defined in `package.json`):
+
 ```bash
 # FROM: ./apps/subgraph
 pnpm prepare:<desired network>
 pnpm codegen
 pnpm build:subgraph
-```  
+```
 
 This will generate types, build the subgraph, and create a local `subgraph.yaml` file.
 
 ### Step 5 - Deploy the Subgraph to Production
 
 #### IMPORTANT:
+
 **To avoid downtime during upgrades, maintain a backup subgraph. If issues arise, you can redirect traffic to the backup rather than waiting for redeployment or rollback, which can take hours.**
 
 - The subgraph name follows the pattern `nouns-builder-<network>`, so clients won’t need to update their URI for minor version changes.
@@ -58,7 +68,7 @@ This will generate types, build the subgraph, and create a local `subgraph.yaml`
 # FROM: ./apps/subgraph
 # Example with specVersion 0.0.6
 
-goldsky subgraph deploy nouns-builder-<network>/0.0.6 --path .        
+goldsky subgraph deploy nouns-builder-<network>/0.0.6 --path .
 goldsky subgraph tag create nouns-builder-<network>/0.0.6 --tag latest
 # API endpoint format: api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-ethereum-sepolia/latest/gn
 ```
@@ -72,15 +82,16 @@ You can now query the subgraph in the Goldsky GraphQL playground to test your ch
 The subgraph is currently deployed to the following networks:
 
 - [Ethereum](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-ethereum/latest/gn)
-- [Ethereum Sepolia](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-ethereum-sepolia/latest/gn)
+- [Base](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-base/latest/gn)
 - [Optimism](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-optimism/latest/gn)
-- TODO: [Optimism Sepolia](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-optimism-sepolia/latest/gn)
 - TODO: [Zora](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-zora/latest/gn)
-- TODO: [Zora Sepolia](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-zora-sepolia/latest/gn)
-- TODO: [Base](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-base/latest/gn)
-- TODO: [Base Sepolia](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-base-sepolia/latest/gn)
+- TODO?: [Ethereum Sepolia](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-ethereum-sepolia/latest/gn)
+- TODO?: [Optimism Sepolia](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-optimism-sepolia/latest/gn)
+- TODO?: [Zora Sepolia](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-zora-sepolia/latest/gn)
+- TODO?: [Base Sepolia](https://api.goldsky.com/api/public/<project name>/subgraphs/nouns-builder-base-sepolia/latest/gn)
 
 ## Local Development with Docker Compose
+
 - Generate types with `pnpm codegen`
 - Build the subgraph with `pnpm build:subgraph`
 - Run the local graph node with `pnpm local-node`

apps/web/src/components/Artwork/ArtworkPreview.tsx

@@ -17,12 +17,9 @@ export interface ArtworkPreviewProps {
   images: ImageProps[] | undefined
 }
 
-export const ArtworkPreview: React.FC<ArtworkPreviewProps> = ({
-  canvas,
-  generatedImages,
-  generateStackedImage,
-  images,
-}) => {
+export const ArtworkPreview: React.FC<ArtworkPreviewProps> = (
+  { canvas, generatedImages, generateStackedImage, images }
+) => {
   return (
     <Flex align={'center'} justify={'center'} direction={'column'}>
       <Flex className={artworkPreviewImageWrapper} mb={'x8'}>

apps/web/src/components/Artwork/LayerOrdering.tsx

@@ -19,13 +19,9 @@ interface LayerOrderingProps {
   setOrderedLayers: (orderedLayers: OrderedTraits) => void
 }
 
-export const LayerOrdering: React.FC<LayerOrderingProps> = ({
-  title,
-  images,
-  artwork,
-  orderedLayers,
-  setOrderedLayers,
-}) => {
+export const LayerOrdering: React.FC<LayerOrderingProps> = (
+  { title, images, artwork, orderedLayers, setOrderedLayers }
+) => {
   /*  init layers and drag and drop  */
   const [dragAndDrop, setDragAndDrop] = React.useState<DragAndDropProps | null>(null)
   React.useEffect(() => {

apps/web/src/components/Avatar/Avatar.tsx

@@ -12,14 +12,9 @@ export interface AvatarProps extends Omit<BoxProps, 'size'> {
   src?: string | null
 }
 
-export function Avatar({
-  address,
-  className,
-  size,
-  variant,
-  src,
-  ...props
-}: AvatarProps) {
+export function Avatar(
+  { address, className, size, variant, src, ...props }: AvatarProps
+) {
   const background = useMemo(() => {
     if (address && !src) {
       const gradient = gradientForAddress(address)

apps/web/src/components/BridgeModal/NetworkSelector.tsx

@@ -13,10 +13,9 @@ export interface NetworkSelectorProps {
   setSelectedChain: (value: Chain) => void
 }
 
-export const NetworkSelector: React.FC<NetworkSelectorProps> = ({
-  selectedChain,
-  setSelectedChain,
-}) => {
+export const NetworkSelector: React.FC<NetworkSelectorProps> = (
+  { selectedChain, setSelectedChain }
+) => {
   const [isOpenChainMenu, setIsOpenChainMenu] = React.useState(false)
 
   const onChainChange = (chainId: number) => {

apps/web/src/components/DisplayPanel.tsx

@@ -1,13 +1,9 @@
 import { Flex, Text } from '@zoralabs/zord'
 import React from 'react'
 
-export const DisplayPanel = ({
-  title,
-  description,
-}: {
-  title: string
-  description: string
-}) => {
+export const DisplayPanel = (
+  { title, description }: { title: string; description: string }
+) => {
   return (
     <Flex
       borderRadius={'phat'}

apps/web/src/components/Fields/Date.tsx

@@ -28,19 +28,21 @@ interface DateProps {
   disabled?: boolean
 }
 
-const Date: React.FC<DateProps> = ({
-  inputLabel,
-  formik,
-  id,
-  errorMessage,
-  autoSubmit,
-  value,
-  placeholder,
-  altFormat,
-  enableTime = false,
-  dateFormat = 'Y-m-d',
-  disabled = false,
-}) => {
+const Date: React.FC<DateProps> = (
+  {
+    inputLabel,
+    formik,
+    id,
+    errorMessage,
+    autoSubmit,
+    value,
+    placeholder,
+    altFormat,
+    enableTime = false,
+    dateFormat = 'Y-m-d',
+    disabled = false,
+  }
+) => {
   const ref = React.useRef(null)
 
   React.useEffect(() => {

apps/web/src/components/Fields/FieldSwitch.tsx

@@ -42,14 +42,9 @@ interface FieldSwitchProps {
   parentValues?: any
 }
 
-const FieldSwitch: React.FC<FieldSwitchProps> = ({
-  field,
-  formik,
-  autoSubmit,
-  submitCallback,
-  options,
-  parentValues,
-}) => {
+const FieldSwitch: React.FC<FieldSwitchProps> = (
+  { field, formik, autoSubmit, submitCallback, options, parentValues }
+) => {
   /*
 
         handle smartInput onChange

apps/web/src/components/Fields/NumberInput.tsx

@@ -17,15 +17,17 @@ interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
   disableWheelEvent?: boolean
 }
 
-const NumberInput = ({
-  label,
-  className,
-  errorMessage,
-  hasError,
-  value,
-  disableWheelEvent = true,
-  ...rest
-}: NumberInputProps) => {
+const NumberInput = (
+  {
+    label,
+    className,
+    errorMessage,
+    hasError,
+    value,
+    disableWheelEvent = true,
+    ...rest
+  }: NumberInputProps
+) => {
   return (
     <Box as="fieldset" className={defaultFieldsetStyle}>
       {errorMessage && (

apps/web/src/components/Fields/Radio.tsx

@@ -13,14 +13,16 @@ interface RadioProps<T> {
   flexDirection?: Atoms['flexDirection']
 }
 
-export function Radio<T extends React.Key | boolean>({
-  formik,
-  id,
-  options,
-  value,
-  inputLabel,
-  flexDirection = 'column',
-}: React.PropsWithChildren<RadioProps<T>>) {
+export function Radio<T extends React.Key | boolean>(
+  {
+    formik,
+    id,
+    options,
+    value,
+    inputLabel,
+    flexDirection = 'column',
+  }: React.PropsWithChildren<RadioProps<T>>
+) {
   const handleSelection = (val: T) => {
     formik.setFieldValue(id, val)
   }

apps/web/src/components/Fields/StickySave.tsx

@@ -33,13 +33,9 @@ const confirmAnimation = {
   },
 }
 
-const StickySave: React.FC<StickySaveProps> = ({
-  confirmText,
-  saveButtonText,
-  disabled,
-  isSubmitting,
-  onSave,
-}) => {
+const StickySave: React.FC<StickySaveProps> = (
+  { confirmText, saveButtonText, disabled, isSubmitting, onSave }
+) => {
   const [hasConfirmed, setHasConfirmed] = React.useState<boolean>(false)
   const [showConfirmBanner, setShowConfirmBanner] = React.useState<boolean>(false)
   const previousSubmitting = usePrevious(isSubmitting)