work

.github/workflows/lint.yaml

@@ -0,0 +1,43 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  ci:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [lts/*]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+
+      - name: Setup node env
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Run hardhat node, deploy contracts (& generate contracts typescript output)
+        run: yarn chain & yarn deploy
+
+      - name: Run hardhat lint
+        run: yarn hardhat:lint --max-warnings=0
+
+      - name: Run nextjs lint
+        run: yarn next:lint --max-warnings=0
+
+      - name: Check typings on nextjs
+        run: yarn next:check-types

.github/workflows/nextjs.yml

@@ -0,0 +1,62 @@
+name: Deploy Next.js site to Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"  # Updated to match your local Node.js version
+          cache: yarn
+
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            node_modules
+            .yarn/cache
+            packages/nextjs/.next/cache
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock', '**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build with Next.js
+        working-directory: packages/nextjs
+        env:
+          NEXT_PUBLIC_ALCHEMY_API_KEY: ${{ secrets.NEXT_PUBLIC_ALCHEMY_API_KEY }}
+          NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID }}
+        run: yarn build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: packages/nextjs/out
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4
+

.gitignore

@@ -0,0 +1,31 @@
+# dependencies
+node_modules
+.env
+.env.local
+packages/nextjs/.env.local
+packages/nextjs/.env
+packages/hardhat/.env.local
+packages/hardhat/.env
+# yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+packages/nextjs/.yarn/
+packages/nextjs/.next/
+packages/hardhat/.yarn/
+
+# eslint
+.eslintcache
+
+# misc
+.DS_Store
+
+# IDE
+.vscode
+.idea
+
+# cli
+dist

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged --verbose

.lintstagedrc.js

@@ -0,0 +1,21 @@
+const path = require("path");
+
+const buildNextEslintCommand = (filenames) =>
+  `yarn next:lint --fix --file ${filenames
+    .map((f) => path.relative(path.join("packages", "nextjs"), f))
+    .join(" --file ")}`;
+
+const checkTypesNextCommand = () => "yarn next:check-types";
+
+const buildHardhatEslintCommand = (filenames) =>
+  `yarn hardhat:lint-staged --fix ${filenames
+    .map((f) => path.relative(path.join("packages", "hardhat"), f))
+    .join(" ")}`;
+
+module.exports = {
+  "packages/nextjs/**/*.{ts,tsx}": [
+    buildNextEslintCommand,
+    checkTypesNextCommand,
+  ],
+  "packages/hardhat/**/*.{ts,tsx}": [buildHardhatEslintCommand],
+};

.yarnrc.yml

@@ -0,0 +1,13 @@
+enableColors: true
+
+nmHoistingLimits: workspaces
+
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 BuidlGuidl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,91 @@
+# Pixel Canvas
+
+## Team Members
+- Michael (@zoomerfren.lens)
+
+## Project Description
+**Pixel Canvas** is a decentralized platform that empowers users to collaboratively create vibrant pixel art on a 64x64 canvas. Participants can paint individual pixels or upload entire images, utilizing **PaintTokens**—an ERC20-based cryptocurrency—to purchase and set pixel colors. The system leverages smart contracts deployed on the **Lens Network** to manage token transactions and ensure secure, ownership-based modifications of the canvas. This seamless integration of blockchain technology fosters a community-driven art experience, allowing anyone to contribute to and own a piece of the collective masterpiece.
+
+## Source Code
+[github.com/joaolago1113/pixel_canvas](https://github.com/joaolago1113/pixel_canvas)
+
+## Technical Overview
+
+### Smart Contracts
+
+- **Location:** `packages/hardhat/contracts/CollaborativeArtCanvas.sol` and `packages/hardhat/contracts/PaintToken.sol`
+
+- **PaintToken.sol:**
+  - **Description:** Manages the creation, distribution, and burning of PaintTokens, ensuring a controlled token economy within the platform.
+  - **Deployment Address:** [0x78094a9d21b6e9a57e66c37885405b43a0784ddc](https://block-explorer.testnet.lens.dev/token/0x78094a9d21b6e9a57e66c37885405b43a0784ddc)
+
+- **CollaborativeArtCanvas.sol:**
+  - **Description:** Handles the canvas state, pixel color updates, and interactions with PaintTokens, enabling users to paint and own pixels securely.
+  - **Deployment Address:** [0x809fc41d9a8af8a74e965760d0daf264ff1910fc](https://block-explorer.testnet.lens.dev/address/0x809fc41d9a8af8a74e965760d0daf264ff1910fc)
+
+### Frontend Integration
+
+- **ConnectKit Integration:** Utilizes ConnectKit for seamless wallet connection and management, providing a polished and user-friendly authentication experience.
+- **React & Next.js:** Built with modern React patterns and Next.js for optimal performance and developer experience.
+
+### Key Features
+
+- **64x64 Collaborative Canvas:** A fixed-size canvas where users can paint pixels individually or apply entire images.
+- **PaintTokens (ERC20):** A cryptocurrency used to set pixel colors, ensuring secure and transparent transactions.
+- **Smart Contract Integration:** Utilizes Solidity contracts deployed on the Lens Network to manage token supply, ownership, and pixel modifications securely.
+- **Image Upload Capability:** Allows users to upload images, which can be applied to specific areas of the canvas by selecting designated regions.
+- **User-Friendly Frontend:** An intuitive Next.js interface that facilitates easy interaction with the canvas, token purchases, and image uploads.
+
+## Getting Started
+
+1. **Clone the Repository:**
+   ```bash
+   git clone https://github.com/joaolago1113/pixel_canvas.git
+   cd pixel_canvas
+   ```
+
+2. **Install Dependencies:**
+   ```bash
+   yarn install
+   ```
+
+3. **Configure Environment Variables:**
+   - Create a `.env.local` file in `packages/nextjs/` and add your WalletConnect Project ID:
+     ```
+     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your-walletconnect-project-id
+     ```
+
+4. **Compile Smart Contracts:**
+   ```bash
+   cd packages/hardhat
+   npx hardhat compile
+   ```
+
+5. **Deploy Contracts (If Not Already Deployed):**
+   ```bash
+   npx hardhat run scripts/deploy.js --network lensTestnet
+   ```
+
+6. **Run the Frontend:**
+   ```bash
+   cd ../nextjs
+   yarn dev
+   ```
+
+7. **Access the Application:**
+   - Open [http://localhost:3000](http://localhost:3000) in your browser to start painting!
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request for any enhancements or bug fixes.
+
+## License
+
+This project is licensed under the MIT License.
+
+## Acknowledgements
+
+- [OpenZeppelin](https://openzeppelin.com/) for their robust smart contract libraries
+- [Lens Protocol](https://lens.xyz/) for their innovative social network infrastructure
+- [ConnectKit](https://github.com/family/connectkit) for their excellent wallet connection interface and components
+

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "pixel_canvas",
+  "version": "0.0.1",
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  },
+  "scripts": {
+    "account": "yarn workspace @se-2/hardhat account",
+    "chain": "yarn workspace @se-2/hardhat chain",
+    "compile": "yarn workspace @se-2/hardhat compile",
+    "deploy": "yarn workspace @se-2/hardhat deploy",
+    "flatten": "yarn workspace @se-2/hardhat flatten",
+    "fork": "yarn workspace @se-2/hardhat fork",
+    "format": "yarn next:format && yarn hardhat:format",
+    "generate": "yarn workspace @se-2/hardhat generate",
+    "hardhat-verify": "yarn workspace @se-2/hardhat hardhat-verify",
+    "hardhat:format": "yarn workspace @se-2/hardhat format",
+    "hardhat:lint": "yarn workspace @se-2/hardhat lint",
+    "hardhat:lint-staged": "yarn workspace @se-2/hardhat lint-staged",
+    "hardhat:test": "yarn workspace @se-2/hardhat test",
+    "postinstall": "husky install",
+    "next:build": "yarn workspace @se-2/nextjs build",
+    "next:check-types": "yarn workspace @se-2/nextjs check-types",
+    "next:format": "yarn workspace @se-2/nextjs format",
+    "next:lint": "yarn workspace @se-2/nextjs lint",
+    "next:serve": "yarn workspace @se-2/nextjs serve",
+    "precommit": "lint-staged",
+    "start": "yarn workspace @se-2/nextjs dev",
+    "test": "yarn hardhat:test",
+    "vercel": "yarn workspace @se-2/nextjs vercel",
+    "vercel:yolo": "yarn workspace @se-2/nextjs vercel:yolo",
+    "verify": "yarn workspace @se-2/hardhat verify"
+  },
+  "devDependencies": {
+    "husky": "~8.0.3",
+    "lint-staged": "~13.2.2"
+  },
+  "packageManager": "yarn@3.2.3",
+  "engines": {
+    "node": ">=18.17.0"
+  }
+}

packages/hardhat/.env.example

@@ -0,0 +1,11 @@
+# Template for Hardhat environment variables.
+
+# To use this template, copy this file, rename it .env, and fill in the values.
+
+# If not set, we provide default values (check `hardhat.config.ts`) so developers can start prototyping out of the box,
+# but we recommend getting your own API Keys for Production Apps.
+
+# To access the values stored in this .env file you can use: process.env.VARIABLENAME
+ALCHEMY_API_KEY=
+DEPLOYER_PRIVATE_KEY=
+ETHERSCAN_API_KEY=

packages/hardhat/.eslintignore

@@ -0,0 +1,8 @@
+# folders
+artifacts
+cache
+contracts
+node_modules/
+typechain-types
+# files
+**/*.json

packages/hardhat/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "env": {
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "extends": ["plugin:prettier/recommended", "plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/no-explicit-any": ["off"],
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto"
+      }
+    ]
+  }
+}