From 498ba16642eca70bac3d191edd41ac2278e625d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sun, 28 Jul 2024 19:35:34 -0300 Subject: [PATCH 01/43] refactor(cli-template-monorepo-ethers): update cli-template-monorepo-ethers web app UI re #836 --- .../apps/web-app/.env.development | 2 +- .../apps/web-app/.env.production | 7 +- .../apps/web-app/.gitignore | 32 ++++ .../web-app/contract-artifacts/Feedback.json | 9 +- .../apps/web-app/next.config.mjs | 3 +- .../apps/web-app/package.json | 11 +- .../web-app/src/app/api/feedback/route.ts | 18 +- .../apps/web-app/src/app/api/join/route.ts | 18 +- .../apps/web-app/src/app/group/page.tsx | 165 ++++++++++++++++ .../apps/web-app/src/app/layout.tsx | 17 +- .../apps/web-app/src/app/page.tsx | 101 +++++----- .../apps/web-app/src/app/proofs/page.tsx | 179 ++++++++++-------- .../apps/web-app/src/app/providers.tsx | 13 ++ .../web-app/src/components/PageContainer.tsx | 114 +++++------ .../apps/web-app/src/components/Stepper.tsx | 54 ++++-- .../apps/web-app/src/context/LogContext.tsx | 37 ++++ .../web-app/src/context/SemaphoreContext.tsx | 94 +++++++++ .../web-app/src/hooks/useSemaphoreIdentity.ts | 23 +++ .../web-app/src/icons/IconAddCircleFill.tsx | 19 ++ .../apps/web-app/src/icons/IconCheck.tsx | 19 ++ .../web-app/src/icons/IconChevronLeft.tsx | 19 ++ .../web-app/src/icons/IconChevronRight.tsx | 19 ++ .../web-app/src/icons/IconRefreshLine.tsx | 19 ++ .../apps/web-app/src/styles/colors.ts | 32 ++++ .../web-app/src/styles/components/Button.ts | 77 ++++++++ .../web-app/src/styles/components/Link.ts | 9 + .../web-app/src/styles/components/Tooltip.ts | 13 ++ .../web-app/src/styles/components/index.ts | 9 + .../apps/web-app/src/styles/index.ts | 16 ++ .../apps/web-app/src/styles/styles.ts | 25 +++ 30 files changed, 911 insertions(+), 262 deletions(-) create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/app/providers.tsx create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/context/LogContext.tsx create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/context/SemaphoreContext.tsx create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/hooks/useSemaphoreIdentity.ts create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconAddCircleFill.tsx create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconCheck.tsx create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronLeft.tsx create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronRight.tsx create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconRefreshLine.tsx create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/colors.ts create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Button.ts create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Link.ts create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Tooltip.ts create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/index.ts create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/index.ts create mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/styles.ts diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/.env.development b/packages/cli-template-monorepo-ethers/apps/web-app/.env.development index 1d41062f3..1bed8b578 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/.env.development +++ b/packages/cli-template-monorepo-ethers/apps/web-app/.env.development @@ -1,4 +1,4 @@ NEXT_PUBLIC_DEFAULT_NETWORK=localhost -NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS=0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9 +NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS=0xcf7ed3acca5a467e9e704c703e8d87f634fb0fc9 NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS=0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0 NEXT_PUBLIC_GROUP_ID=0 diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/.env.production b/packages/cli-template-monorepo-ethers/apps/web-app/.env.production index fa2cbb454..2a44517a9 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/.env.production +++ b/packages/cli-template-monorepo-ethers/apps/web-app/.env.production @@ -1,5 +1,8 @@ NEXT_PUBLIC_DEFAULT_NETWORK=sepolia -NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS= +NEXT_PUBLIC_INFURA_API_KEY=abf67af1010b4b8d877e04244f1eac3d +NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS=0x8860ffD389afF6930481b953AaC095c9F85cCAae NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS=0x1e0d7FF1610e480fC93BdEC510811ea2Ba6d7c2f NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK=https://api.defender.openzeppelin.com/actions/20fce2ae-844b-4ec0-a6a2-90a3350a9d2c/runs/webhook/303216d1-fa7d-4fca-8c5b-7ba1ba544fc7/2T7i9xrkZA5j37hoaQLUuw -NEXT_PUBLIC_GROUP_ID= +NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT=https://api.gelato.digital/relays/v2/sponsored-call +NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID=11155111 +NEXT_PUBLIC_GROUP_ID=1 diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/.gitignore b/packages/cli-template-monorepo-ethers/apps/web-app/.gitignore index d183c4f53..8e8b00f60 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/.gitignore +++ b/packages/cli-template-monorepo-ethers/apps/web-app/.gitignore @@ -1,5 +1,14 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + # next.js /.next/ /out/ @@ -7,3 +16,26 @@ # production /build +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# Auto Generated PWA files +public/sw.js +public/workbox-*.js +public/worker-*.js +public/sw.js.map +public/workbox-*.js.map +public/worker-*.js.map diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/contract-artifacts/Feedback.json b/packages/cli-template-monorepo-ethers/apps/web-app/contract-artifacts/Feedback.json index 123448e9e..5b51c7a42 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/contract-artifacts/Feedback.json +++ b/packages/cli-template-monorepo-ethers/apps/web-app/contract-artifacts/Feedback.json @@ -9,11 +9,6 @@ "internalType": "address", "name": "semaphoreAddress", "type": "address" - }, - { - "internalType": "uint256", - "name": "_groupId", - "type": "uint256" } ], "stateMutability": "nonpayable", @@ -92,8 +87,8 @@ "type": "function" } ], - "bytecode": "0x608060405234801561001057600080fd5b5060405161083f38038061083f833981810160405281019061003291906101a8565b816000806101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff1602179055508060018190555060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663c96e71fb600154306040518363ffffffff1660e01b81526004016100d6929190610206565b600060405180830381600087803b1580156100f057600080fd5b505af1158015610104573d6000803e3d6000fd5b50505050505061022f565b600080fd5b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b600061013f82610114565b9050919050565b61014f81610134565b811461015a57600080fd5b50565b60008151905061016c81610146565b92915050565b6000819050919050565b61018581610172565b811461019057600080fd5b50565b6000815190506101a28161017c565b92915050565b600080604083850312156101bf576101be61010f565b5b60006101cd8582860161015d565b92505060206101de85828601610193565b9150509250929050565b6101f181610172565b82525050565b61020081610134565b82525050565b600060408201905061021b60008301856101e8565b61022860208301846101f7565b9392505050565b6106018061023e6000396000f3fe608060405234801561001057600080fd5b506004361061004c5760003560e01c80637b5d2534146100515780637b85d27a1461006f578063a0f44c921461008b578063eed02e4b146100a9575b600080fd5b6100596100c5565b6040516100669190610301565b60405180910390f35b6100896004803603810190610084919061037e565b6100e9565b005b6100936101ea565b6040516100a09190610409565b60405180910390f35b6100c360048036038101906100be9190610424565b6101f0565b005b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1681565b60006040518060c001604052808781526020018681526020018581526020018481526020016001548152602001836008806020026040519081016040528092919082600860200280828437600081840152601f19601f820116905080830192505050505050815250905060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0d898dd600154836040518363ffffffff1660e01b81526004016101b0929190610578565b600060405180830381600087803b1580156101ca57600080fd5b505af11580156101de573d6000803e3d6000fd5b50505050505050505050565b60015481565b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16631783efc3600154836040518363ffffffff1660e01b815260040161024d9291906105a2565b600060405180830381600087803b15801561026757600080fd5b505af115801561027b573d6000803e3d6000fd5b5050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006102c76102c26102bd84610282565b6102a2565b610282565b9050919050565b60006102d9826102ac565b9050919050565b60006102eb826102ce565b9050919050565b6102fb816102e0565b82525050565b600060208201905061031660008301846102f2565b92915050565b600080fd5b6000819050919050565b61033481610321565b811461033f57600080fd5b50565b6000813590506103518161032b565b92915050565b600080fd5b60008190508260206008028201111561037857610377610357565b5b92915050565b6000806000806000610180868803121561039b5761039a61031c565b5b60006103a988828901610342565b95505060206103ba88828901610342565b94505060406103cb88828901610342565b93505060606103dc88828901610342565b92505060806103ed8882890161035c565b9150509295509295909350565b61040381610321565b82525050565b600060208201905061041e60008301846103fa565b92915050565b60006020828403121561043a5761043961031c565b5b600061044884828501610342565b91505092915050565b61045a81610321565b82525050565b600060089050919050565b600081905092915050565b6000819050919050565b600061048c8383610451565b60208301905092915050565b6000602082019050919050565b6104ae81610460565b6104b8818461046b565b92506104c382610476565b8060005b838110156104f45781516104db8782610480565b96506104e683610498565b9250506001810190506104c7565b505050505050565b6101a0820160008201516105136000850182610451565b5060208201516105266020850182610451565b5060408201516105396040850182610451565b50606082015161054c6060850182610451565b50608082015161055f6080850182610451565b5060a082015161057260a08501826104a5565b50505050565b60006101c08201905061058e60008301856103fa565b61059b60208301846104fc565b9392505050565b60006040820190506105b760008301856103fa565b6105c460208301846103fa565b939250505056fea2646970667358221220f33606b2d5ad7c0dfc5d22afb43476e1974ea7fd160e1f28203a3e433f29cb4964736f6c63430008170033", - "deployedBytecode": "0x608060405234801561001057600080fd5b506004361061004c5760003560e01c80637b5d2534146100515780637b85d27a1461006f578063a0f44c921461008b578063eed02e4b146100a9575b600080fd5b6100596100c5565b6040516100669190610301565b60405180910390f35b6100896004803603810190610084919061037e565b6100e9565b005b6100936101ea565b6040516100a09190610409565b60405180910390f35b6100c360048036038101906100be9190610424565b6101f0565b005b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1681565b60006040518060c001604052808781526020018681526020018581526020018481526020016001548152602001836008806020026040519081016040528092919082600860200280828437600081840152601f19601f820116905080830192505050505050815250905060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0d898dd600154836040518363ffffffff1660e01b81526004016101b0929190610578565b600060405180830381600087803b1580156101ca57600080fd5b505af11580156101de573d6000803e3d6000fd5b50505050505050505050565b60015481565b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16631783efc3600154836040518363ffffffff1660e01b815260040161024d9291906105a2565b600060405180830381600087803b15801561026757600080fd5b505af115801561027b573d6000803e3d6000fd5b5050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006102c76102c26102bd84610282565b6102a2565b610282565b9050919050565b60006102d9826102ac565b9050919050565b60006102eb826102ce565b9050919050565b6102fb816102e0565b82525050565b600060208201905061031660008301846102f2565b92915050565b600080fd5b6000819050919050565b61033481610321565b811461033f57600080fd5b50565b6000813590506103518161032b565b92915050565b600080fd5b60008190508260206008028201111561037857610377610357565b5b92915050565b6000806000806000610180868803121561039b5761039a61031c565b5b60006103a988828901610342565b95505060206103ba88828901610342565b94505060406103cb88828901610342565b93505060606103dc88828901610342565b92505060806103ed8882890161035c565b9150509295509295909350565b61040381610321565b82525050565b600060208201905061041e60008301846103fa565b92915050565b60006020828403121561043a5761043961031c565b5b600061044884828501610342565b91505092915050565b61045a81610321565b82525050565b600060089050919050565b600081905092915050565b6000819050919050565b600061048c8383610451565b60208301905092915050565b6000602082019050919050565b6104ae81610460565b6104b8818461046b565b92506104c382610476565b8060005b838110156104f45781516104db8782610480565b96506104e683610498565b9250506001810190506104c7565b505050505050565b6101a0820160008201516105136000850182610451565b5060208201516105266020850182610451565b5060408201516105396040850182610451565b50606082015161054c6060850182610451565b50608082015161055f6080850182610451565b5060a082015161057260a08501826104a5565b50505050565b60006101c08201905061058e60008301856103fa565b61059b60208301846104fc565b9392505050565b60006040820190506105b760008301856103fa565b6105c460208301846103fa565b939250505056fea2646970667358221220f33606b2d5ad7c0dfc5d22afb43476e1974ea7fd160e1f28203a3e433f29cb4964736f6c63430008170033", + "bytecode": "0x608060405234801561001057600080fd5b506040516108473803806108478339818101604052810190610032919061017d565b806000806101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff16021790555060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16635c3f3b60306040518263ffffffff1660e01b81526004016100cb91906101b9565b6020604051808303816000875af11580156100ea573d6000803e3d6000fd5b505050506040513d601f19601f8201168201806040525081019061010e919061020a565b60018190555050610237565b600080fd5b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b600061014a8261011f565b9050919050565b61015a8161013f565b811461016557600080fd5b50565b60008151905061017781610151565b92915050565b6000602082840312156101935761019261011a565b5b60006101a184828501610168565b91505092915050565b6101b38161013f565b82525050565b60006020820190506101ce60008301846101aa565b92915050565b6000819050919050565b6101e7816101d4565b81146101f257600080fd5b50565b600081519050610204816101de565b92915050565b6000602082840312156102205761021f61011a565b5b600061022e848285016101f5565b91505092915050565b610601806102466000396000f3fe608060405234801561001057600080fd5b506004361061004c5760003560e01c80637b5d2534146100515780637b85d27a1461006f578063a0f44c921461008b578063eed02e4b146100a9575b600080fd5b6100596100c5565b6040516100669190610301565b60405180910390f35b6100896004803603810190610084919061037e565b6100e9565b005b6100936101ea565b6040516100a09190610409565b60405180910390f35b6100c360048036038101906100be9190610424565b6101f0565b005b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1681565b60006040518060c001604052808781526020018681526020018581526020018481526020016001548152602001836008806020026040519081016040528092919082600860200280828437600081840152601f19601f820116905080830192505050505050815250905060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0d898dd600154836040518363ffffffff1660e01b81526004016101b0929190610578565b600060405180830381600087803b1580156101ca57600080fd5b505af11580156101de573d6000803e3d6000fd5b50505050505050505050565b60015481565b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16631783efc3600154836040518363ffffffff1660e01b815260040161024d9291906105a2565b600060405180830381600087803b15801561026757600080fd5b505af115801561027b573d6000803e3d6000fd5b5050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006102c76102c26102bd84610282565b6102a2565b610282565b9050919050565b60006102d9826102ac565b9050919050565b60006102eb826102ce565b9050919050565b6102fb816102e0565b82525050565b600060208201905061031660008301846102f2565b92915050565b600080fd5b6000819050919050565b61033481610321565b811461033f57600080fd5b50565b6000813590506103518161032b565b92915050565b600080fd5b60008190508260206008028201111561037857610377610357565b5b92915050565b6000806000806000610180868803121561039b5761039a61031c565b5b60006103a988828901610342565b95505060206103ba88828901610342565b94505060406103cb88828901610342565b93505060606103dc88828901610342565b92505060806103ed8882890161035c565b9150509295509295909350565b61040381610321565b82525050565b600060208201905061041e60008301846103fa565b92915050565b60006020828403121561043a5761043961031c565b5b600061044884828501610342565b91505092915050565b61045a81610321565b82525050565b600060089050919050565b600081905092915050565b6000819050919050565b600061048c8383610451565b60208301905092915050565b6000602082019050919050565b6104ae81610460565b6104b8818461046b565b92506104c382610476565b8060005b838110156104f45781516104db8782610480565b96506104e683610498565b9250506001810190506104c7565b505050505050565b6101a0820160008201516105136000850182610451565b5060208201516105266020850182610451565b5060408201516105396040850182610451565b50606082015161054c6060850182610451565b50608082015161055f6080850182610451565b5060a082015161057260a08501826104a5565b50505050565b60006101c08201905061058e60008301856103fa565b61059b60208301846104fc565b9392505050565b60006040820190506105b760008301856103fa565b6105c460208301846103fa565b939250505056fea264697066735822122078569abd7f309f3107c4d19e9b4a4f4812522ccc5dc57c7ccbe2b06a5ba461b064736f6c63430008170033", + "deployedBytecode": "0x608060405234801561001057600080fd5b506004361061004c5760003560e01c80637b5d2534146100515780637b85d27a1461006f578063a0f44c921461008b578063eed02e4b146100a9575b600080fd5b6100596100c5565b6040516100669190610301565b60405180910390f35b6100896004803603810190610084919061037e565b6100e9565b005b6100936101ea565b6040516100a09190610409565b60405180910390f35b6100c360048036038101906100be9190610424565b6101f0565b005b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1681565b60006040518060c001604052808781526020018681526020018581526020018481526020016001548152602001836008806020026040519081016040528092919082600860200280828437600081840152601f19601f820116905080830192505050505050815250905060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0d898dd600154836040518363ffffffff1660e01b81526004016101b0929190610578565b600060405180830381600087803b1580156101ca57600080fd5b505af11580156101de573d6000803e3d6000fd5b50505050505050505050565b60015481565b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16631783efc3600154836040518363ffffffff1660e01b815260040161024d9291906105a2565b600060405180830381600087803b15801561026757600080fd5b505af115801561027b573d6000803e3d6000fd5b5050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006102c76102c26102bd84610282565b6102a2565b610282565b9050919050565b60006102d9826102ac565b9050919050565b60006102eb826102ce565b9050919050565b6102fb816102e0565b82525050565b600060208201905061031660008301846102f2565b92915050565b600080fd5b6000819050919050565b61033481610321565b811461033f57600080fd5b50565b6000813590506103518161032b565b92915050565b600080fd5b60008190508260206008028201111561037857610377610357565b5b92915050565b6000806000806000610180868803121561039b5761039a61031c565b5b60006103a988828901610342565b95505060206103ba88828901610342565b94505060406103cb88828901610342565b93505060606103dc88828901610342565b92505060806103ed8882890161035c565b9150509295509295909350565b61040381610321565b82525050565b600060208201905061041e60008301846103fa565b92915050565b60006020828403121561043a5761043961031c565b5b600061044884828501610342565b91505092915050565b61045a81610321565b82525050565b600060089050919050565b600081905092915050565b6000819050919050565b600061048c8383610451565b60208301905092915050565b6000602082019050919050565b6104ae81610460565b6104b8818461046b565b92506104c382610476565b8060005b838110156104f45781516104db8782610480565b96506104e683610498565b9250506001810190506104c7565b505050505050565b6101a0820160008201516105136000850182610451565b5060208201516105266020850182610451565b5060408201516105396040850182610451565b50606082015161054c6060850182610451565b50608082015161055f6080850182610451565b5060a082015161057260a08501826104a5565b50505050565b60006101c08201905061058e60008301856103fa565b61059b60208301846104fc565b9392505050565b60006040820190506105b760008301856103fa565b6105c460208301846103fa565b939250505056fea264697066735822122078569abd7f309f3107c4d19e9b4a4f4812522ccc5dc57c7ccbe2b06a5ba461b064736f6c63430008170033", "linkReferences": {}, "deployedLinkReferences": {} } diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/next.config.mjs b/packages/cli-template-monorepo-ethers/apps/web-app/next.config.mjs index 2233f10f5..ae9ad74ec 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/next.config.mjs +++ b/packages/cli-template-monorepo-ethers/apps/web-app/next.config.mjs @@ -14,7 +14,8 @@ const nextConfig = withPWA({ })({ env: { INFURA_API_KEY: process.env.INFURA_API_KEY, - ETHEREUM_PRIVATE_KEY: process.env.ETHEREUM_PRIVATE_KEY + ETHEREUM_PRIVATE_KEY: process.env.ETHEREUM_PRIVATE_KEY, + GELATO_RELAYER_API_KEY: process.env.GELATO_RELAYER_API_KEY } }) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/package.json b/packages/cli-template-monorepo-ethers/apps/web-app/package.json index e0865a66c..4bf511896 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/package.json +++ b/packages/cli-template-monorepo-ethers/apps/web-app/package.json @@ -9,6 +9,12 @@ "lint": "next lint" }, "dependencies": { + "@chakra-ui/next-js": "^2.2.0", + "@chakra-ui/react": "^2.8.2", + "@chakra-ui/theme": "^3.3.1", + "@chakra-ui/theme-tools": "^2.1.2", + "@emotion/react": "^11.11.3", + "@emotion/styled": "^11.11.0", "@semaphore-protocol/core": "4.0.0", "@semaphore-protocol/data": "4.0.0", "@semaphore-protocol/utils": "4.0.0", @@ -16,13 +22,14 @@ "next": "14.1.0", "next-pwa": "^5.6.0", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^4.8.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", - "dotenv": "^16.4.5", + "dotenv": "^16.4.4", "eslint": "^8", "eslint-config-next": "14.1.0", "typescript": "^5" diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/api/feedback/route.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/api/feedback/route.ts index 795b2c5dd..45698f55c 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/api/feedback/route.ts +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/api/feedback/route.ts @@ -3,26 +3,14 @@ import { NextRequest } from "next/server" import Feedback from "../../../../contract-artifacts/Feedback.json" export async function POST(req: NextRequest) { - if (typeof process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS !== "string") { - throw new Error("Please, define NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS in your .env file") - } - - if (typeof process.env.NEXT_PUBLIC_DEFAULT_NETWORK !== "string") { - throw new Error("Please, define NEXT_PUBLIC_DEFAULT_NETWORK in your .env file") - } - - if (typeof process.env.INFURA_API_KEY !== "string" && process.env.NEXT_PUBLIC_DEFAULT_NETWORK !== "localhost") { - throw new Error("Please, define INFURA_API_KEY in your .env file") - } - if (typeof process.env.ETHEREUM_PRIVATE_KEY !== "string") { throw new Error("Please, define ETHEREUM_PRIVATE_KEY in your .env file") } const ethereumPrivateKey = process.env.ETHEREUM_PRIVATE_KEY - const ethereumNetwork = process.env.NEXT_PUBLIC_DEFAULT_NETWORK - const infuraApiKey = process.env.INFURA_API_KEY - const contractAddress = process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS + const ethereumNetwork = process.env.NEXT_PUBLIC_DEFAULT_NETWORK as string + const infuraApiKey = process.env.NEXT_PUBLIC_INFURA_API_KEY as string + const contractAddress = process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string const provider = ethereumNetwork === "localhost" diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/api/join/route.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/api/join/route.ts index 608055f9e..1d0ee24b9 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/api/join/route.ts +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/api/join/route.ts @@ -3,26 +3,14 @@ import { NextRequest } from "next/server" import Feedback from "../../../../contract-artifacts/Feedback.json" export async function POST(req: NextRequest) { - if (typeof process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS !== "string") { - throw new Error("Please, define NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS in your .env file") - } - - if (typeof process.env.NEXT_PUBLIC_DEFAULT_NETWORK !== "string") { - throw new Error("Please, define NEXT_PUBLIC_DEFAULT_NETWORK in your .env file") - } - - if (typeof process.env.INFURA_API_KEY !== "string" && process.env.NEXT_PUBLIC_DEFAULT_NETWORK !== "localhost") { - throw new Error("Please, define INFURA_API_KEY in your .env file") - } - if (typeof process.env.ETHEREUM_PRIVATE_KEY !== "string") { throw new Error("Please, define ETHEREUM_PRIVATE_KEY in your .env file") } const ethereumPrivateKey = process.env.ETHEREUM_PRIVATE_KEY - const ethereumNetwork = process.env.NEXT_PUBLIC_DEFAULT_NETWORK - const infuraApiKey = process.env.INFURA_API_KEY - const contractAddress = process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS + const ethereumNetwork = process.env.NEXT_PUBLIC_DEFAULT_NETWORK as string + const infuraApiKey = process.env.NEXT_PUBLIC_INFURA_API_KEY as string + const contractAddress = process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string const provider = ethereumNetwork === "localhost" diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx new file mode 100644 index 000000000..80468a5ad --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx @@ -0,0 +1,165 @@ +"use client" +import Stepper from "@/components/Stepper" +import { useLogContext } from "@/context/LogContext" +import { useSemaphoreContext } from "@/context/SemaphoreContext" +import IconRefreshLine from "@/icons/IconRefreshLine" +import { Box, Button, Divider, Heading, HStack, Link, Text, useBoolean, VStack } from "@chakra-ui/react" +import { useRouter } from "next/navigation" +import { useCallback, useEffect, useMemo } from "react" +import Feedback from "../../../contract-artifacts/Feedback.json" +import { ethers } from "ethers" +import useSemaphoreIdentity from "@/hooks/useSemaphoreIdentity" + +export default function GroupsPage() { + const router = useRouter() + const { setLog } = useLogContext() + const { _users, refreshUsers, addUser } = useSemaphoreContext() + const [_loading, setLoading] = useBoolean() + const { _identity } = useSemaphoreIdentity() + + useEffect(() => { + if (_users.length > 0) { + setLog(`${_users.length} user${_users.length > 1 ? "s" : ""} retrieved from the group 🤙🏽`) + } + }, [_users, setLog]) + + const users = useMemo(() => [..._users].reverse(), [_users]) + + const joinGroup = useCallback(async () => { + if (!_identity) { + return + } + + setLoading.on() + setLog(`Joining the Feedback group...`) + + let joinedGroup: boolean = false + + if (process.env.NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK) { + const response = await fetch(process.env.NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + abi: Feedback.abi, + address: process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, + functionName: "joinGroup", + functionParameters: [_identity.commitment.toString()] + }) + }) + + if (response.status === 200) { + joinedGroup = true + } + } else if ( + process.env.NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT && + process.env.NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID && + process.env.GELATO_RELAYER_API_KEY + ) { + const iface = new ethers.Interface(Feedback.abi) + const request = { + chainId: process.env.NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID, + target: process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS, + data: iface.encodeFunctionData("joinGroup", [_identity.commitment.toString()]), + sponsorApiKey: process.env.GELATO_RELAYER_API_KEY + } + const response = await fetch(process.env.NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(request) + }) + + if (response.status === 201) { + joinedGroup = true + } + } else { + const response = await fetch("api/join", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + identityCommitment: _identity.commitment.toString() + }) + }) + + if (response.status === 200) { + joinedGroup = true + } + } + + if (joinedGroup) { + addUser(_identity.commitment.toString()) + + setLog(`You have joined the Feedback group event 🎉 Share your feedback anonymously!`) + } else { + setLog("Some error occurred, please try again!") + } + + setLoading.off() + }, [_identity, addUser, setLoading, setLog]) + + const userHasJoined = useMemo( + () => _identity !== undefined && _users.includes(_identity.commitment.toString()), + [_identity, _users] + ) + + return ( + <> + + Groups + + + + + Semaphore groups + {" "} + are{" "} + + Lean incremental Merkle trees + {" "} + in which each leaf contains an identity commitment for a user. Groups can be abstracted to represent + events, polls, or organizations. + + + + + + + Group users ({_users.length}) + + + + + {_users.length > 0 && ( + + {users.map((user, i) => ( + + + {_identity?.commitment.toString() === user ? {user} : user} + + + ))} + + )} + + + + + + + + router.push("/")} + onNextClick={userHasJoined ? () => router.push("/proofs") : undefined} + /> + + ) +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx index e6a6d1aac..1ea9068df 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx @@ -1,9 +1,8 @@ import PageContainer from "@/components/PageContainer" import type { Metadata } from "next" -import { Inter } from "next/font/google" -import "./globals.css" - -const inter = Inter({ subsets: ["latin"] }) +import Providers from "./providers" +import { LogContextProvider } from "@/context/LogContext" +import { SemaphoreContextProvider } from "@/context/SemaphoreContext" export const metadata: Metadata = { title: "Semaphore Demo", @@ -32,8 +31,14 @@ export default function RootLayout({ }>) { return ( - - {children} + + + + + {children} + + + ) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx index 1469af1e5..02e026fce 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx @@ -1,93 +1,94 @@ "use client" +import { Box, Button, Divider, Heading, HStack, Link, Text } from "@chakra-ui/react" import { Identity } from "@semaphore-protocol/core" import { useRouter } from "next/navigation" -import { useCallback, useContext, useEffect, useState } from "react" +import { useCallback, useEffect, useState } from "react" import Stepper from "../components/Stepper" -import LogsContext from "../context/LogsContext" +import { useLogContext } from "../context/LogContext" export default function IdentitiesPage() { const router = useRouter() - const { setLogs } = useContext(LogsContext) + const { setLog } = useLogContext() const [_identity, setIdentity] = useState() useEffect(() => { const privateKey = localStorage.getItem("identity") if (privateKey) { - const identity = new Identity(privateKey) + const identity = Identity.import(privateKey) setIdentity(identity) - setLogs("Your Semaphore identity has been retrieved from the browser cache 👌🏽") + setLog("Your Semaphore identity has been retrieved from the browser cache 👌🏽") } else { - setLogs("Create your Semaphore identity 👆🏽") + setLog("Create your Semaphore identity 👆🏽") } - }, [setLogs]) + }, [setLog]) const createIdentity = useCallback(async () => { const identity = new Identity() setIdentity(identity) - localStorage.setItem("identity", identity.privateKey.toString()) + localStorage.setItem("identity", identity.export()) - setLogs("Your new Semaphore identity has just been created 🎉") - }, [setLogs]) + setLog("Your new Semaphore identity has just been created 🎉") + }, [setLog]) return ( <> -

Identities

+ + Identities + -

+ The identity of a user in the Semaphore protocol. A{" "} - + Semaphore identity - {" "} + {" "} consists of an{" "} - EdDSA - {" "} + {" "} public/private key pair and a commitment, used as the public identifier of the identity. -

- -
- -
-

Identity

- {_identity && ( - - )} -
- - {_identity ? ( -
-
-

Private Key: {_identity.privateKey.toString()}

-

Commitment: {_identity.commitment.toString()}

-
-
- ) : ( -
- -
+ + + + + + + Identity + + + + {_identity && ( + + + Private Key (base64):
{_identity.export()} + + + Public Key:
[{_identity.publicKey[0].toString()},{" "} + {_identity.publicKey[1].toString()}] + + + Commitment:
{_identity.commitment.toString()} + + )} -
+ + + + + - router.push("/groups"))} /> + router.push("/group"))} /> ) } diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx index de060019a..88fffa390 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx @@ -1,78 +1,96 @@ "use client" -import { Group, Identity, generateProof } from "@semaphore-protocol/core" +import Stepper from "@/components/Stepper" +import { useLogContext } from "@/context/LogContext" +import { useSemaphoreContext } from "@/context/SemaphoreContext" +import IconRefreshLine from "@/icons/IconRefreshLine" +import { Box, Button, Divider, Heading, HStack, Link, Text, useBoolean, VStack } from "@chakra-ui/react" +import { generateProof, Group } from "@semaphore-protocol/core" +import { encodeBytes32String, ethers } from "ethers" import { useRouter } from "next/navigation" -import { useCallback, useContext, useEffect, useState } from "react" +import { useCallback, useEffect, useMemo } from "react" import Feedback from "../../../contract-artifacts/Feedback.json" -import Stepper from "../../components/Stepper" -import LogsContext from "../../context/LogsContext" -import SemaphoreContext from "../../context/SemaphoreContext" +import useSemaphoreIdentity from "@/hooks/useSemaphoreIdentity" export default function ProofsPage() { const router = useRouter() - const { setLogs } = useContext(LogsContext) - const { _users, _feedback, refreshFeedback, addFeedback } = useContext(SemaphoreContext) - const [_loading, setLoading] = useState(false) - const [_identity, setIdentity] = useState() - - useEffect(() => { - const privateKey = localStorage.getItem("identity") - - if (!privateKey) { - router.push("/") - return - } - - setIdentity(new Identity(privateKey)) - }, [router]) + const { setLog } = useLogContext() + const { _users, _feedback, refreshFeedback, addFeedback } = useSemaphoreContext() + const [_loading, setLoading] = useBoolean() + const { _identity } = useSemaphoreIdentity() useEffect(() => { if (_feedback.length > 0) { - setLogs(`${_feedback.length} feedback retrieved from the group 🤙🏽`) + setLog(`${_feedback.length} feedback retrieved from the group 🤙🏽`) } - }, [_feedback, setLogs]) + }, [_feedback, setLog]) + + const feedback = useMemo(() => [..._feedback].reverse(), [_feedback]) const sendFeedback = useCallback(async () => { if (!_identity) { return } - if (typeof process.env.NEXT_PUBLIC_GROUP_ID !== "string") { - throw new Error("Please, define NEXT_PUBLIC_GROUP_ID in your .env file") - } - const feedback = prompt("Please enter your feedback:") if (feedback && _users) { - setLoading(true) + setLoading.on() - setLogs(`Posting your anonymous feedback...`) + setLog(`Posting your anonymous feedback...`) try { const group = new Group(_users) - const { points, merkleTreeDepth, merkleTreeRoot, nullifier, message } = await generateProof( + const message = encodeBytes32String(feedback) + + const { points, merkleTreeDepth, merkleTreeRoot, nullifier } = await generateProof( _identity, group, - feedback, + message, process.env.NEXT_PUBLIC_GROUP_ID as string ) - let response: any - - if (process.env.OPENZEPPELIN_AUTOTASK_WEBHOOK) { - response = await fetch(process.env.OPENZEPPELIN_AUTOTASK_WEBHOOK, { + let feedbackSent: boolean = false + const params = [merkleTreeDepth, merkleTreeRoot, nullifier, message, points] + if (process.env.NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK) { + const response = await fetch(process.env.NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ abi: Feedback.abi, - address: process.env.FEEDBACK_CONTRACT_ADDRESS, + address: process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS, functionName: "sendFeedback", - functionParameters: [merkleTreeDepth, merkleTreeRoot, nullifier, message, points] + functionParameters: params }) }) + + if (response.status === 200) { + feedbackSent = true + } + } else if ( + process.env.NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT && + process.env.NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID && + process.env.GELATO_RELAYER_API_KEY + ) { + const iface = new ethers.Interface(Feedback.abi) + const request = { + chainId: process.env.NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID, + target: process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS, + data: iface.encodeFunctionData("sendFeedback", params), + sponsorApiKey: process.env.GELATO_RELAYER_API_KEY + } + const response = await fetch(process.env.NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(request) + }) + + if (response.status === 201) { + feedbackSent = true + } } else { - response = await fetch("api/feedback", { + const response = await fetch("api/feedback", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ @@ -83,71 +101,80 @@ export default function ProofsPage() { points }) }) + + if (response.status === 200) { + feedbackSent = true + } } - if (response.status === 200) { + if (feedbackSent) { addFeedback(feedback) - setLogs(`Your feedback has been posted 🎉`) + setLog(`Your feedback has been posted 🎉`) } else { - setLogs("Some error occurred, please try again!") + setLog("Some error occurred, please try again!") } } catch (error) { console.error(error) - setLogs("Some error occurred, please try again!") + setLog("Some error occurred, please try again!") } finally { - setLoading(false) + setLoading.off() } } - }, [_identity, _users, addFeedback, setLogs]) + }, [_identity, _users, addFeedback, setLoading, setLog]) return ( <> -

Proofs

+ + Proofs + -

+ Semaphore members can anonymously{" "} - + prove - {" "} + {" "} that they are part of a group and send their anonymous messages. Messages could be votes, leaks, - reviews, feedback, etc. -

- -
- -
-

Feedback messages ({_feedback.length})

- -
- -
- -
+ + {_feedback.length > 0 && ( -
- {_feedback.map((f, i) => ( -
-

{f}

-
+ + {feedback.map((f, i) => ( + + {f} + ))} -
+ )} -
+ + + + + - router.push("/groups")} /> + router.push("/group")} /> ) } diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/providers.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/providers.tsx new file mode 100644 index 000000000..910643fc2 --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/providers.tsx @@ -0,0 +1,13 @@ +"use client" + +import { CacheProvider } from "@chakra-ui/next-js" +import { ChakraProvider } from "@chakra-ui/react" +import theme from "../styles/index" + +export default function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx index 63b1499ee..686123c67 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx @@ -1,13 +1,10 @@ "use client" -import LogsContext from "@/context/LogsContext" -import SemaphoreContext from "@/context/SemaphoreContext" -import useSemaphore from "@/hooks/useSemaphore" +import { useLogContext } from "@/context/LogContext" import shortenString from "@/utils/shortenString" -import { SupportedNetwork } from "@semaphore-protocol/utils" +import { Container, HStack, Icon, IconButton, Link, Spinner, Stack, Text } from "@chakra-ui/react" import { usePathname } from "next/navigation" -import { useEffect, useState } from "react" -import Link from "next/link" +import { FaGithub } from "react-icons/fa" export default function PageContainer({ children @@ -15,15 +12,9 @@ export default function PageContainer({ children: React.ReactNode }>) { const pathname = usePathname() - const semaphore = useSemaphore() - const [_logs, setLogs] = useState("") + const { log } = useLogContext() - useEffect(() => { - semaphore.refreshUsers() - semaphore.refreshFeedback() - }, []) - - function getExplorerLink(network: SupportedNetwork, address: string) { + function getExplorerLink(network: string, address: string) { switch (network) { case "sepolia": return `https://sepolia.etherscan.io/address/${address}` @@ -35,64 +26,47 @@ export default function PageContainer({ } return ( -
-
- - Feedback + <> + + + {shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])} - -
- -
- - - {children} - - -
+ + } + /> + + -
+ + + {children} + + -
- {_logs.endsWith("...")} -

{_logs || `Current step: ${pathname}`}

-
-
+ + {log.endsWith("...") && } + {log || `Current step: ${pathname}`} + + ) } diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx index 55cc89330..2a99262e2 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx @@ -1,3 +1,9 @@ +"use client" + +import { Button, HStack, Text } from "@chakra-ui/react" +import IconChevronLeft from "../icons/IconChevronLeft" +import IconChevronRight from "../icons/IconChevronRight" + export type StepperProps = { step: number onPrevClick?: () => void @@ -6,24 +12,38 @@ export type StepperProps = { export default function Stepper({ step, onPrevClick, onNextClick }: StepperProps) { return ( -
- {onPrevClick !== undefined ? ( - - ) : ( - - )} + + -

{step.toString()}/3

+ + {step.toString()}/3 + - {onNextClick !== undefined ? ( - - ) : ( - - )} -
+ + ) } diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/context/LogContext.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/context/LogContext.tsx new file mode 100644 index 000000000..8885447f1 --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/context/LogContext.tsx @@ -0,0 +1,37 @@ +"use client" + +import React, { createContext, ReactNode, useContext, useState } from "react" + +export type LogContextType = { + log: string + setLog: (logs: string) => void +} + +const LogContext = createContext(null) + +interface ProviderProps { + children: ReactNode +} + +export const LogContextProvider: React.FC = ({ children }) => { + const [log, setLog] = useState("") + + return ( + + {children} + + ) +} + +export const useLogContext = () => { + const context = useContext(LogContext) + if (context === null) { + throw new Error("LogContext must be used within a LogContextProvider") + } + return context +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/context/SemaphoreContext.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/context/SemaphoreContext.tsx new file mode 100644 index 000000000..425b545ef --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/context/SemaphoreContext.tsx @@ -0,0 +1,94 @@ +"use client" + +import React, { createContext, ReactNode, useCallback, useContext, useEffect, useState } from "react" +import { SemaphoreEthers } from "@semaphore-protocol/data" +import { decodeBytes32String, toBeHex } from "ethers" + +export type SemaphoreContextType = { + _users: string[] + _feedback: string[] + refreshUsers: () => Promise + addUser: (user: string) => void + refreshFeedback: () => Promise + addFeedback: (feedback: string) => void +} + +const SemaphoreContext = createContext(null) + +interface ProviderProps { + children: ReactNode +} + +const ethereumNetwork = + process.env.NEXT_PUBLIC_DEFAULT_NETWORK === "localhost" + ? "http://127.0.0.1:8545" + : process.env.NEXT_PUBLIC_DEFAULT_NETWORK + +export const SemaphoreContextProvider: React.FC = ({ children }) => { + const [_users, setUsers] = useState([]) + const [_feedback, setFeedback] = useState([]) + + const refreshUsers = useCallback(async (): Promise => { + const semaphore = new SemaphoreEthers(ethereumNetwork, { + address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS, + projectId: process.env.NEXT_PUBLIC_INFURA_API_KEY + }) + + const members = await semaphore.getGroupMembers(process.env.NEXT_PUBLIC_GROUP_ID as string) + + setUsers(members.map((member) => member.toString())) + }, []) + + const addUser = useCallback( + (user: any) => { + setUsers([..._users, user]) + }, + [_users] + ) + + const refreshFeedback = useCallback(async (): Promise => { + const semaphore = new SemaphoreEthers(ethereumNetwork, { + address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS, + projectId: process.env.NEXT_PUBLIC_INFURA_API_KEY + }) + + const proofs = await semaphore.getGroupValidatedProofs(process.env.NEXT_PUBLIC_GROUP_ID as string) + + setFeedback(proofs.map(({ message }: any) => decodeBytes32String(toBeHex(message, 32)))) + }, []) + + const addFeedback = useCallback( + (feedback: string) => { + setFeedback([..._feedback, feedback]) + }, + [_feedback] + ) + + useEffect(() => { + refreshUsers() + refreshFeedback() + }, [refreshFeedback, refreshUsers]) + + return ( + + {children} + + ) +} + +export const useSemaphoreContext = () => { + const context = useContext(SemaphoreContext) + if (context === null) { + throw new Error("SemaphoreContext must be used within a SemaphoreContextProvider") + } + return context +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/hooks/useSemaphoreIdentity.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/hooks/useSemaphoreIdentity.ts new file mode 100644 index 000000000..26e2ba773 --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/hooks/useSemaphoreIdentity.ts @@ -0,0 +1,23 @@ +import { useEffect, useState } from "react" +import { Identity } from "@semaphore-protocol/core" +import { useRouter } from "next/navigation" + +export default function useSemaphoreIdentity() { + const router = useRouter() + const [_identity, setIdentity] = useState() + + useEffect(() => { + const privateKey = localStorage.getItem("identity") + + if (!privateKey) { + router.push("/") + return + } + + setIdentity(new Identity(privateKey)) + }, [router]) + + return { + _identity + } +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconAddCircleFill.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconAddCircleFill.tsx new file mode 100644 index 000000000..1f40a342e --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconAddCircleFill.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconAddCircleFillProps = { + width?: number + height?: number + color?: string +} + +export default function IconAddCircleFill({ width, height, color }: IconAddCircleFillProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconCheck.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconCheck.tsx new file mode 100644 index 000000000..2bb55d4c7 --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconCheck.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconCheckProps = { + width?: number + height?: number + color?: string +} + +export default function IconCheck({ width, height, color }: IconCheckProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronLeft.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronLeft.tsx new file mode 100644 index 000000000..d92ded273 --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronLeft.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconChevronLeftProps = { + width?: number + height?: number + color?: string +} + +export default function IconChevronLeft({ width, height, color }: IconChevronLeftProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronRight.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronRight.tsx new file mode 100644 index 000000000..df604b5ba --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronRight.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconChevronRightProps = { + width?: number + height?: number + color?: string +} + +export default function IconChevronRight({ width, height, color }: IconChevronRightProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconRefreshLine.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconRefreshLine.tsx new file mode 100644 index 000000000..8363091d5 --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconRefreshLine.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconRefreshLineProps = { + width?: number + height?: number + color?: string +} + +export default function IconRefreshLine({ width, height, color }: IconRefreshLineProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/colors.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/colors.ts new file mode 100644 index 000000000..5e79392cc --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/colors.ts @@ -0,0 +1,32 @@ +const colors = { + darkBlue: "#0E101B", + darkBlueBg: "#00020D", + primary: { + 50: "#f0f4fe", + 100: "#dde6fc", + 200: "#c3d4fa", + 300: "#9abaf6", + 400: "#6a95f0", + 500: "#4771ea", + 600: "#3555df", + 700: "#2940cc", + 800: "#2735a6", + 900: "#253183", + 950: "#1b2050" + }, + text: { + 50: "#f7f7f8", + 100: "#eeeef0", + 200: "#d9d9de", + 300: "#b8b9c1", + 400: "#92939e", + 500: "#747583", + 600: "#5e5f6b", + 700: "#4d4e57", + 800: "#42424a", + 900: "#3a3a40", + 950: "#26262b" + } +} + +export default colors diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Button.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Button.ts new file mode 100644 index 000000000..13df87d6b --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Button.ts @@ -0,0 +1,77 @@ +import { StyleFunctionProps, SystemStyleObject } from "@chakra-ui/theme-tools" +import { font } from "../styles" + +const Button = { + baseStyle: { + _focus: { + boxShadow: "none" + }, + borderRadius: "100px", + fontFamily: font.style.fontFamily, + fontWeight: "400", + paddingLeft: "18px !important", + paddingRight: "18px !important" + }, + defaultProps: { + colorScheme: "white" + }, + variants: { + solid: (props: StyleFunctionProps): SystemStyleObject => { + const { colorScheme: c } = props + + if (c === "primary") { + const bgGradient = "linear(to-r, primary.500, primary.800)" + const color = "white" + + return { + bgGradient, + color, + transitionDuration: "200ms", + transitionTimingFunction: "linear", + _hover: { + bg: `${c}.800`, + _disabled: { + bgGradient + } + }, + _active: { bg: `${c}.800` } + } + } + + const bg = c + + return { + bg, + color: `darkBlueBg`, + transitionDuration: "200ms", + transitionTimingFunction: "linear", + _hover: { + bg: `primary.200`, + _disabled: { + bg + } + }, + _active: { bg: `primary.200` } + } + }, + outline: (props: StyleFunctionProps): SystemStyleObject => { + const { colorScheme: c } = props + + return { + color: c, + transitionDuration: "200ms", + transitionTimingFunction: "linear", + borderWidth: "1.2px", + borderColor: c, + _hover: { + color: c, + borderColor: "primary.200", + _disabled: { + bg: c + } + } + } + } + } +} +export default Button diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Link.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Link.ts new file mode 100644 index 000000000..e4a03d42b --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Link.ts @@ -0,0 +1,9 @@ +const Link = { + baseStyle: { + _focus: { + boxShadow: "none" + } + } +} + +export default Link diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Tooltip.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Tooltip.ts new file mode 100644 index 000000000..6df3a97d7 --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Tooltip.ts @@ -0,0 +1,13 @@ +import { SystemStyleObject } from "@chakra-ui/react" + +const Tooltip = { + baseStyle: (): SystemStyleObject => ({ + borderRadius: "4px", + py: "10px", + px: "15px", + fontWeight: "bold", + maxW: "350px" + }) +} + +export default Tooltip diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/index.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/index.ts new file mode 100644 index 000000000..c4bd4fbdd --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/index.ts @@ -0,0 +1,9 @@ +import Button from "./Button" +import Link from "./Link" +import Tooltip from "./Tooltip" + +export default { + Link, + Button, + Tooltip +} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/index.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/index.ts new file mode 100644 index 000000000..ffbe97221 --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/index.ts @@ -0,0 +1,16 @@ +import { extendTheme } from "@chakra-ui/react" +import colors from "./colors" +import components from "./components" +import styles, { font } from "./styles" + +const config = { + fonts: { + heading: font.style.fontFamily, + body: "DM Sans, sans-serif" + }, + colors, + styles, + components +} + +export default extendTheme(config) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/styles.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/styles.ts new file mode 100644 index 000000000..f2d2dfa43 --- /dev/null +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/styles.ts @@ -0,0 +1,25 @@ +import { SystemStyleObject } from "@chakra-ui/react" +import { Styles } from "@chakra-ui/theme-tools" +import { Outfit } from "next/font/google" + +export const font = Outfit({ subsets: ["latin"] }) + +const styles: Styles = { + global: (): SystemStyleObject => ({ + body: { + bg: "darkBlueBg", + color: "text.100", + minHeight: "100vh", + display: "flex", + flexDirection: "column" + }, + "h1, h2, h3, h4": { + fontWeight: "500 !important" + }, + a: { + color: "primary.400 !important" + } + }) +} + +export default styles From 112bf90109fffcf7280514eb7242c0d388b34887 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sun, 28 Jul 2024 19:39:02 -0300 Subject: [PATCH 02/43] refactor(cli-template-monorepo-subgraph): update cli-template-monorepo-subgraph web app UI re #836 --- .../apps/web-app/.env.development | 2 +- .../apps/web-app/.env.production | 7 +- .../apps/web-app/.gitignore | 32 ++++ .../web-app/contract-artifacts/Feedback.json | 9 +- .../apps/web-app/next.config.mjs | 3 +- .../apps/web-app/package.json | 22 ++- .../web-app/src/app/api/feedback/route.ts | 18 +- .../apps/web-app/src/app/api/join/route.ts | 18 +- .../apps/web-app/src/app/group/page.tsx | 165 ++++++++++++++++ .../apps/web-app/src/app/layout.tsx | 17 +- .../apps/web-app/src/app/page.tsx | 101 +++++----- .../apps/web-app/src/app/proofs/page.tsx | 179 ++++++++++-------- .../apps/web-app/src/app/providers.tsx | 13 ++ .../web-app/src/components/PageContainer.tsx | 114 +++++------ .../apps/web-app/src/components/Stepper.tsx | 54 ++++-- .../apps/web-app/src/context/LogContext.tsx | 37 ++++ .../web-app/src/context/SemaphoreContext.tsx | 94 +++++++++ .../web-app/src/hooks/useSemaphoreIdentity.ts | 23 +++ .../web-app/src/icons/IconAddCircleFill.tsx | 19 ++ .../apps/web-app/src/icons/IconCheck.tsx | 19 ++ .../web-app/src/icons/IconChevronLeft.tsx | 19 ++ .../web-app/src/icons/IconChevronRight.tsx | 19 ++ .../web-app/src/icons/IconRefreshLine.tsx | 19 ++ .../apps/web-app/src/styles/colors.ts | 32 ++++ .../web-app/src/styles/components/Button.ts | 77 ++++++++ .../web-app/src/styles/components/Link.ts | 9 + .../web-app/src/styles/components/Tooltip.ts | 13 ++ .../web-app/src/styles/components/index.ts | 9 + .../apps/web-app/src/styles/index.ts | 16 ++ .../apps/web-app/src/styles/styles.ts | 25 +++ 30 files changed, 917 insertions(+), 267 deletions(-) create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/app/group/page.tsx create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/app/providers.tsx create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/context/LogContext.tsx create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.tsx create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphoreIdentity.ts create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconAddCircleFill.tsx create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconCheck.tsx create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronLeft.tsx create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronRight.tsx create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconRefreshLine.tsx create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/colors.ts create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Button.ts create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Link.ts create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Tooltip.ts create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/index.ts create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/index.ts create mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/styles.ts diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/.env.development b/packages/cli-template-monorepo-subgraph/apps/web-app/.env.development index 1d41062f3..1bed8b578 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/.env.development +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/.env.development @@ -1,4 +1,4 @@ NEXT_PUBLIC_DEFAULT_NETWORK=localhost -NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS=0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9 +NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS=0xcf7ed3acca5a467e9e704c703e8d87f634fb0fc9 NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS=0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0 NEXT_PUBLIC_GROUP_ID=0 diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/.env.production b/packages/cli-template-monorepo-subgraph/apps/web-app/.env.production index fa2cbb454..2a44517a9 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/.env.production +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/.env.production @@ -1,5 +1,8 @@ NEXT_PUBLIC_DEFAULT_NETWORK=sepolia -NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS= +NEXT_PUBLIC_INFURA_API_KEY=abf67af1010b4b8d877e04244f1eac3d +NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS=0x8860ffD389afF6930481b953AaC095c9F85cCAae NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS=0x1e0d7FF1610e480fC93BdEC510811ea2Ba6d7c2f NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK=https://api.defender.openzeppelin.com/actions/20fce2ae-844b-4ec0-a6a2-90a3350a9d2c/runs/webhook/303216d1-fa7d-4fca-8c5b-7ba1ba544fc7/2T7i9xrkZA5j37hoaQLUuw -NEXT_PUBLIC_GROUP_ID= +NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT=https://api.gelato.digital/relays/v2/sponsored-call +NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID=11155111 +NEXT_PUBLIC_GROUP_ID=1 diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/.gitignore b/packages/cli-template-monorepo-subgraph/apps/web-app/.gitignore index d183c4f53..8e8b00f60 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/.gitignore +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/.gitignore @@ -1,5 +1,14 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + # next.js /.next/ /out/ @@ -7,3 +16,26 @@ # production /build +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# Auto Generated PWA files +public/sw.js +public/workbox-*.js +public/worker-*.js +public/sw.js.map +public/workbox-*.js.map +public/worker-*.js.map diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/contract-artifacts/Feedback.json b/packages/cli-template-monorepo-subgraph/apps/web-app/contract-artifacts/Feedback.json index 123448e9e..5b51c7a42 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/contract-artifacts/Feedback.json +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/contract-artifacts/Feedback.json @@ -9,11 +9,6 @@ "internalType": "address", "name": "semaphoreAddress", "type": "address" - }, - { - "internalType": "uint256", - "name": "_groupId", - "type": "uint256" } ], "stateMutability": "nonpayable", @@ -92,8 +87,8 @@ "type": "function" } ], - "bytecode": "0x608060405234801561001057600080fd5b5060405161083f38038061083f833981810160405281019061003291906101a8565b816000806101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff1602179055508060018190555060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663c96e71fb600154306040518363ffffffff1660e01b81526004016100d6929190610206565b600060405180830381600087803b1580156100f057600080fd5b505af1158015610104573d6000803e3d6000fd5b50505050505061022f565b600080fd5b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b600061013f82610114565b9050919050565b61014f81610134565b811461015a57600080fd5b50565b60008151905061016c81610146565b92915050565b6000819050919050565b61018581610172565b811461019057600080fd5b50565b6000815190506101a28161017c565b92915050565b600080604083850312156101bf576101be61010f565b5b60006101cd8582860161015d565b92505060206101de85828601610193565b9150509250929050565b6101f181610172565b82525050565b61020081610134565b82525050565b600060408201905061021b60008301856101e8565b61022860208301846101f7565b9392505050565b6106018061023e6000396000f3fe608060405234801561001057600080fd5b506004361061004c5760003560e01c80637b5d2534146100515780637b85d27a1461006f578063a0f44c921461008b578063eed02e4b146100a9575b600080fd5b6100596100c5565b6040516100669190610301565b60405180910390f35b6100896004803603810190610084919061037e565b6100e9565b005b6100936101ea565b6040516100a09190610409565b60405180910390f35b6100c360048036038101906100be9190610424565b6101f0565b005b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1681565b60006040518060c001604052808781526020018681526020018581526020018481526020016001548152602001836008806020026040519081016040528092919082600860200280828437600081840152601f19601f820116905080830192505050505050815250905060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0d898dd600154836040518363ffffffff1660e01b81526004016101b0929190610578565b600060405180830381600087803b1580156101ca57600080fd5b505af11580156101de573d6000803e3d6000fd5b50505050505050505050565b60015481565b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16631783efc3600154836040518363ffffffff1660e01b815260040161024d9291906105a2565b600060405180830381600087803b15801561026757600080fd5b505af115801561027b573d6000803e3d6000fd5b5050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006102c76102c26102bd84610282565b6102a2565b610282565b9050919050565b60006102d9826102ac565b9050919050565b60006102eb826102ce565b9050919050565b6102fb816102e0565b82525050565b600060208201905061031660008301846102f2565b92915050565b600080fd5b6000819050919050565b61033481610321565b811461033f57600080fd5b50565b6000813590506103518161032b565b92915050565b600080fd5b60008190508260206008028201111561037857610377610357565b5b92915050565b6000806000806000610180868803121561039b5761039a61031c565b5b60006103a988828901610342565b95505060206103ba88828901610342565b94505060406103cb88828901610342565b93505060606103dc88828901610342565b92505060806103ed8882890161035c565b9150509295509295909350565b61040381610321565b82525050565b600060208201905061041e60008301846103fa565b92915050565b60006020828403121561043a5761043961031c565b5b600061044884828501610342565b91505092915050565b61045a81610321565b82525050565b600060089050919050565b600081905092915050565b6000819050919050565b600061048c8383610451565b60208301905092915050565b6000602082019050919050565b6104ae81610460565b6104b8818461046b565b92506104c382610476565b8060005b838110156104f45781516104db8782610480565b96506104e683610498565b9250506001810190506104c7565b505050505050565b6101a0820160008201516105136000850182610451565b5060208201516105266020850182610451565b5060408201516105396040850182610451565b50606082015161054c6060850182610451565b50608082015161055f6080850182610451565b5060a082015161057260a08501826104a5565b50505050565b60006101c08201905061058e60008301856103fa565b61059b60208301846104fc565b9392505050565b60006040820190506105b760008301856103fa565b6105c460208301846103fa565b939250505056fea2646970667358221220f33606b2d5ad7c0dfc5d22afb43476e1974ea7fd160e1f28203a3e433f29cb4964736f6c63430008170033", - "deployedBytecode": "0x608060405234801561001057600080fd5b506004361061004c5760003560e01c80637b5d2534146100515780637b85d27a1461006f578063a0f44c921461008b578063eed02e4b146100a9575b600080fd5b6100596100c5565b6040516100669190610301565b60405180910390f35b6100896004803603810190610084919061037e565b6100e9565b005b6100936101ea565b6040516100a09190610409565b60405180910390f35b6100c360048036038101906100be9190610424565b6101f0565b005b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1681565b60006040518060c001604052808781526020018681526020018581526020018481526020016001548152602001836008806020026040519081016040528092919082600860200280828437600081840152601f19601f820116905080830192505050505050815250905060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0d898dd600154836040518363ffffffff1660e01b81526004016101b0929190610578565b600060405180830381600087803b1580156101ca57600080fd5b505af11580156101de573d6000803e3d6000fd5b50505050505050505050565b60015481565b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16631783efc3600154836040518363ffffffff1660e01b815260040161024d9291906105a2565b600060405180830381600087803b15801561026757600080fd5b505af115801561027b573d6000803e3d6000fd5b5050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006102c76102c26102bd84610282565b6102a2565b610282565b9050919050565b60006102d9826102ac565b9050919050565b60006102eb826102ce565b9050919050565b6102fb816102e0565b82525050565b600060208201905061031660008301846102f2565b92915050565b600080fd5b6000819050919050565b61033481610321565b811461033f57600080fd5b50565b6000813590506103518161032b565b92915050565b600080fd5b60008190508260206008028201111561037857610377610357565b5b92915050565b6000806000806000610180868803121561039b5761039a61031c565b5b60006103a988828901610342565b95505060206103ba88828901610342565b94505060406103cb88828901610342565b93505060606103dc88828901610342565b92505060806103ed8882890161035c565b9150509295509295909350565b61040381610321565b82525050565b600060208201905061041e60008301846103fa565b92915050565b60006020828403121561043a5761043961031c565b5b600061044884828501610342565b91505092915050565b61045a81610321565b82525050565b600060089050919050565b600081905092915050565b6000819050919050565b600061048c8383610451565b60208301905092915050565b6000602082019050919050565b6104ae81610460565b6104b8818461046b565b92506104c382610476565b8060005b838110156104f45781516104db8782610480565b96506104e683610498565b9250506001810190506104c7565b505050505050565b6101a0820160008201516105136000850182610451565b5060208201516105266020850182610451565b5060408201516105396040850182610451565b50606082015161054c6060850182610451565b50608082015161055f6080850182610451565b5060a082015161057260a08501826104a5565b50505050565b60006101c08201905061058e60008301856103fa565b61059b60208301846104fc565b9392505050565b60006040820190506105b760008301856103fa565b6105c460208301846103fa565b939250505056fea2646970667358221220f33606b2d5ad7c0dfc5d22afb43476e1974ea7fd160e1f28203a3e433f29cb4964736f6c63430008170033", + "bytecode": "0x608060405234801561001057600080fd5b506040516108473803806108478339818101604052810190610032919061017d565b806000806101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff16021790555060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16635c3f3b60306040518263ffffffff1660e01b81526004016100cb91906101b9565b6020604051808303816000875af11580156100ea573d6000803e3d6000fd5b505050506040513d601f19601f8201168201806040525081019061010e919061020a565b60018190555050610237565b600080fd5b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b600061014a8261011f565b9050919050565b61015a8161013f565b811461016557600080fd5b50565b60008151905061017781610151565b92915050565b6000602082840312156101935761019261011a565b5b60006101a184828501610168565b91505092915050565b6101b38161013f565b82525050565b60006020820190506101ce60008301846101aa565b92915050565b6000819050919050565b6101e7816101d4565b81146101f257600080fd5b50565b600081519050610204816101de565b92915050565b6000602082840312156102205761021f61011a565b5b600061022e848285016101f5565b91505092915050565b610601806102466000396000f3fe608060405234801561001057600080fd5b506004361061004c5760003560e01c80637b5d2534146100515780637b85d27a1461006f578063a0f44c921461008b578063eed02e4b146100a9575b600080fd5b6100596100c5565b6040516100669190610301565b60405180910390f35b6100896004803603810190610084919061037e565b6100e9565b005b6100936101ea565b6040516100a09190610409565b60405180910390f35b6100c360048036038101906100be9190610424565b6101f0565b005b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1681565b60006040518060c001604052808781526020018681526020018581526020018481526020016001548152602001836008806020026040519081016040528092919082600860200280828437600081840152601f19601f820116905080830192505050505050815250905060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0d898dd600154836040518363ffffffff1660e01b81526004016101b0929190610578565b600060405180830381600087803b1580156101ca57600080fd5b505af11580156101de573d6000803e3d6000fd5b50505050505050505050565b60015481565b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16631783efc3600154836040518363ffffffff1660e01b815260040161024d9291906105a2565b600060405180830381600087803b15801561026757600080fd5b505af115801561027b573d6000803e3d6000fd5b5050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006102c76102c26102bd84610282565b6102a2565b610282565b9050919050565b60006102d9826102ac565b9050919050565b60006102eb826102ce565b9050919050565b6102fb816102e0565b82525050565b600060208201905061031660008301846102f2565b92915050565b600080fd5b6000819050919050565b61033481610321565b811461033f57600080fd5b50565b6000813590506103518161032b565b92915050565b600080fd5b60008190508260206008028201111561037857610377610357565b5b92915050565b6000806000806000610180868803121561039b5761039a61031c565b5b60006103a988828901610342565b95505060206103ba88828901610342565b94505060406103cb88828901610342565b93505060606103dc88828901610342565b92505060806103ed8882890161035c565b9150509295509295909350565b61040381610321565b82525050565b600060208201905061041e60008301846103fa565b92915050565b60006020828403121561043a5761043961031c565b5b600061044884828501610342565b91505092915050565b61045a81610321565b82525050565b600060089050919050565b600081905092915050565b6000819050919050565b600061048c8383610451565b60208301905092915050565b6000602082019050919050565b6104ae81610460565b6104b8818461046b565b92506104c382610476565b8060005b838110156104f45781516104db8782610480565b96506104e683610498565b9250506001810190506104c7565b505050505050565b6101a0820160008201516105136000850182610451565b5060208201516105266020850182610451565b5060408201516105396040850182610451565b50606082015161054c6060850182610451565b50608082015161055f6080850182610451565b5060a082015161057260a08501826104a5565b50505050565b60006101c08201905061058e60008301856103fa565b61059b60208301846104fc565b9392505050565b60006040820190506105b760008301856103fa565b6105c460208301846103fa565b939250505056fea264697066735822122078569abd7f309f3107c4d19e9b4a4f4812522ccc5dc57c7ccbe2b06a5ba461b064736f6c63430008170033", + "deployedBytecode": "0x608060405234801561001057600080fd5b506004361061004c5760003560e01c80637b5d2534146100515780637b85d27a1461006f578063a0f44c921461008b578063eed02e4b146100a9575b600080fd5b6100596100c5565b6040516100669190610301565b60405180910390f35b6100896004803603810190610084919061037e565b6100e9565b005b6100936101ea565b6040516100a09190610409565b60405180910390f35b6100c360048036038101906100be9190610424565b6101f0565b005b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1681565b60006040518060c001604052808781526020018681526020018581526020018481526020016001548152602001836008806020026040519081016040528092919082600860200280828437600081840152601f19601f820116905080830192505050505050815250905060008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff1663d0d898dd600154836040518363ffffffff1660e01b81526004016101b0929190610578565b600060405180830381600087803b1580156101ca57600080fd5b505af11580156101de573d6000803e3d6000fd5b50505050505050505050565b60015481565b60008054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16631783efc3600154836040518363ffffffff1660e01b815260040161024d9291906105a2565b600060405180830381600087803b15801561026757600080fd5b505af115801561027b573d6000803e3d6000fd5b5050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60006102c76102c26102bd84610282565b6102a2565b610282565b9050919050565b60006102d9826102ac565b9050919050565b60006102eb826102ce565b9050919050565b6102fb816102e0565b82525050565b600060208201905061031660008301846102f2565b92915050565b600080fd5b6000819050919050565b61033481610321565b811461033f57600080fd5b50565b6000813590506103518161032b565b92915050565b600080fd5b60008190508260206008028201111561037857610377610357565b5b92915050565b6000806000806000610180868803121561039b5761039a61031c565b5b60006103a988828901610342565b95505060206103ba88828901610342565b94505060406103cb88828901610342565b93505060606103dc88828901610342565b92505060806103ed8882890161035c565b9150509295509295909350565b61040381610321565b82525050565b600060208201905061041e60008301846103fa565b92915050565b60006020828403121561043a5761043961031c565b5b600061044884828501610342565b91505092915050565b61045a81610321565b82525050565b600060089050919050565b600081905092915050565b6000819050919050565b600061048c8383610451565b60208301905092915050565b6000602082019050919050565b6104ae81610460565b6104b8818461046b565b92506104c382610476565b8060005b838110156104f45781516104db8782610480565b96506104e683610498565b9250506001810190506104c7565b505050505050565b6101a0820160008201516105136000850182610451565b5060208201516105266020850182610451565b5060408201516105396040850182610451565b50606082015161054c6060850182610451565b50608082015161055f6080850182610451565b5060a082015161057260a08501826104a5565b50505050565b60006101c08201905061058e60008301856103fa565b61059b60208301846104fc565b9392505050565b60006040820190506105b760008301856103fa565b6105c460208301846103fa565b939250505056fea264697066735822122078569abd7f309f3107c4d19e9b4a4f4812522ccc5dc57c7ccbe2b06a5ba461b064736f6c63430008170033", "linkReferences": {}, "deployedLinkReferences": {} } diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/next.config.mjs b/packages/cli-template-monorepo-subgraph/apps/web-app/next.config.mjs index 2233f10f5..ae9ad74ec 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/next.config.mjs +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/next.config.mjs @@ -14,7 +14,8 @@ const nextConfig = withPWA({ })({ env: { INFURA_API_KEY: process.env.INFURA_API_KEY, - ETHEREUM_PRIVATE_KEY: process.env.ETHEREUM_PRIVATE_KEY + ETHEREUM_PRIVATE_KEY: process.env.ETHEREUM_PRIVATE_KEY, + GELATO_RELAYER_API_KEY: process.env.GELATO_RELAYER_API_KEY } }) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json index 56e8a4fc9..f56791a4b 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json @@ -1,28 +1,36 @@ { - "name": "monorepo-subgraph-web-app", - "version": "0.1.0", + "name": "web-app", + "version": "1.0.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", - "start": "next start", - "lint": "next lint" + "lint": "next lint", + "start": "next start" }, "dependencies": { + "@chakra-ui/next-js": "^2.2.0", + "@chakra-ui/react": "^2.8.2", + "@chakra-ui/theme": "^3.3.1", + "@chakra-ui/theme-tools": "^2.1.2", + "@emotion/react": "^11.11.3", + "@emotion/styled": "^11.11.0", "@semaphore-protocol/core": "4.0.0", "@semaphore-protocol/data": "4.0.0", + "ethers": "^6.11.0", "@semaphore-protocol/utils": "4.0.0", - "ethers": "^6.11.1", + "framer-motion": "^11.0.5", "next": "14.1.0", "next-pwa": "^5.6.0", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-icons": "^4.8.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", - "dotenv": "^16.4.5", + "dotenv": "^16.4.4", "eslint": "^8", "eslint-config-next": "14.1.0", "typescript": "^5" diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/api/feedback/route.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/api/feedback/route.ts index 795b2c5dd..45698f55c 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/api/feedback/route.ts +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/api/feedback/route.ts @@ -3,26 +3,14 @@ import { NextRequest } from "next/server" import Feedback from "../../../../contract-artifacts/Feedback.json" export async function POST(req: NextRequest) { - if (typeof process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS !== "string") { - throw new Error("Please, define NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS in your .env file") - } - - if (typeof process.env.NEXT_PUBLIC_DEFAULT_NETWORK !== "string") { - throw new Error("Please, define NEXT_PUBLIC_DEFAULT_NETWORK in your .env file") - } - - if (typeof process.env.INFURA_API_KEY !== "string" && process.env.NEXT_PUBLIC_DEFAULT_NETWORK !== "localhost") { - throw new Error("Please, define INFURA_API_KEY in your .env file") - } - if (typeof process.env.ETHEREUM_PRIVATE_KEY !== "string") { throw new Error("Please, define ETHEREUM_PRIVATE_KEY in your .env file") } const ethereumPrivateKey = process.env.ETHEREUM_PRIVATE_KEY - const ethereumNetwork = process.env.NEXT_PUBLIC_DEFAULT_NETWORK - const infuraApiKey = process.env.INFURA_API_KEY - const contractAddress = process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS + const ethereumNetwork = process.env.NEXT_PUBLIC_DEFAULT_NETWORK as string + const infuraApiKey = process.env.NEXT_PUBLIC_INFURA_API_KEY as string + const contractAddress = process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string const provider = ethereumNetwork === "localhost" diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/api/join/route.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/api/join/route.ts index 608055f9e..1d0ee24b9 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/api/join/route.ts +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/api/join/route.ts @@ -3,26 +3,14 @@ import { NextRequest } from "next/server" import Feedback from "../../../../contract-artifacts/Feedback.json" export async function POST(req: NextRequest) { - if (typeof process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS !== "string") { - throw new Error("Please, define NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS in your .env file") - } - - if (typeof process.env.NEXT_PUBLIC_DEFAULT_NETWORK !== "string") { - throw new Error("Please, define NEXT_PUBLIC_DEFAULT_NETWORK in your .env file") - } - - if (typeof process.env.INFURA_API_KEY !== "string" && process.env.NEXT_PUBLIC_DEFAULT_NETWORK !== "localhost") { - throw new Error("Please, define INFURA_API_KEY in your .env file") - } - if (typeof process.env.ETHEREUM_PRIVATE_KEY !== "string") { throw new Error("Please, define ETHEREUM_PRIVATE_KEY in your .env file") } const ethereumPrivateKey = process.env.ETHEREUM_PRIVATE_KEY - const ethereumNetwork = process.env.NEXT_PUBLIC_DEFAULT_NETWORK - const infuraApiKey = process.env.INFURA_API_KEY - const contractAddress = process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS + const ethereumNetwork = process.env.NEXT_PUBLIC_DEFAULT_NETWORK as string + const infuraApiKey = process.env.NEXT_PUBLIC_INFURA_API_KEY as string + const contractAddress = process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string const provider = ethereumNetwork === "localhost" diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/group/page.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/group/page.tsx new file mode 100644 index 000000000..80468a5ad --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/group/page.tsx @@ -0,0 +1,165 @@ +"use client" +import Stepper from "@/components/Stepper" +import { useLogContext } from "@/context/LogContext" +import { useSemaphoreContext } from "@/context/SemaphoreContext" +import IconRefreshLine from "@/icons/IconRefreshLine" +import { Box, Button, Divider, Heading, HStack, Link, Text, useBoolean, VStack } from "@chakra-ui/react" +import { useRouter } from "next/navigation" +import { useCallback, useEffect, useMemo } from "react" +import Feedback from "../../../contract-artifacts/Feedback.json" +import { ethers } from "ethers" +import useSemaphoreIdentity from "@/hooks/useSemaphoreIdentity" + +export default function GroupsPage() { + const router = useRouter() + const { setLog } = useLogContext() + const { _users, refreshUsers, addUser } = useSemaphoreContext() + const [_loading, setLoading] = useBoolean() + const { _identity } = useSemaphoreIdentity() + + useEffect(() => { + if (_users.length > 0) { + setLog(`${_users.length} user${_users.length > 1 ? "s" : ""} retrieved from the group 🤙🏽`) + } + }, [_users, setLog]) + + const users = useMemo(() => [..._users].reverse(), [_users]) + + const joinGroup = useCallback(async () => { + if (!_identity) { + return + } + + setLoading.on() + setLog(`Joining the Feedback group...`) + + let joinedGroup: boolean = false + + if (process.env.NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK) { + const response = await fetch(process.env.NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + abi: Feedback.abi, + address: process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, + functionName: "joinGroup", + functionParameters: [_identity.commitment.toString()] + }) + }) + + if (response.status === 200) { + joinedGroup = true + } + } else if ( + process.env.NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT && + process.env.NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID && + process.env.GELATO_RELAYER_API_KEY + ) { + const iface = new ethers.Interface(Feedback.abi) + const request = { + chainId: process.env.NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID, + target: process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS, + data: iface.encodeFunctionData("joinGroup", [_identity.commitment.toString()]), + sponsorApiKey: process.env.GELATO_RELAYER_API_KEY + } + const response = await fetch(process.env.NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(request) + }) + + if (response.status === 201) { + joinedGroup = true + } + } else { + const response = await fetch("api/join", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + identityCommitment: _identity.commitment.toString() + }) + }) + + if (response.status === 200) { + joinedGroup = true + } + } + + if (joinedGroup) { + addUser(_identity.commitment.toString()) + + setLog(`You have joined the Feedback group event 🎉 Share your feedback anonymously!`) + } else { + setLog("Some error occurred, please try again!") + } + + setLoading.off() + }, [_identity, addUser, setLoading, setLog]) + + const userHasJoined = useMemo( + () => _identity !== undefined && _users.includes(_identity.commitment.toString()), + [_identity, _users] + ) + + return ( + <> + + Groups + + + + + Semaphore groups + {" "} + are{" "} + + Lean incremental Merkle trees + {" "} + in which each leaf contains an identity commitment for a user. Groups can be abstracted to represent + events, polls, or organizations. + + + + + + + Group users ({_users.length}) + + + + + {_users.length > 0 && ( + + {users.map((user, i) => ( + + + {_identity?.commitment.toString() === user ? {user} : user} + + + ))} + + )} + + + + + + + + router.push("/")} + onNextClick={userHasJoined ? () => router.push("/proofs") : undefined} + /> + + ) +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/layout.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/layout.tsx index e6a6d1aac..1ea9068df 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/layout.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/layout.tsx @@ -1,9 +1,8 @@ import PageContainer from "@/components/PageContainer" import type { Metadata } from "next" -import { Inter } from "next/font/google" -import "./globals.css" - -const inter = Inter({ subsets: ["latin"] }) +import Providers from "./providers" +import { LogContextProvider } from "@/context/LogContext" +import { SemaphoreContextProvider } from "@/context/SemaphoreContext" export const metadata: Metadata = { title: "Semaphore Demo", @@ -32,8 +31,14 @@ export default function RootLayout({ }>) { return ( - - {children} + + + + + {children} + + + ) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/page.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/page.tsx index 1469af1e5..02e026fce 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/page.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/page.tsx @@ -1,93 +1,94 @@ "use client" +import { Box, Button, Divider, Heading, HStack, Link, Text } from "@chakra-ui/react" import { Identity } from "@semaphore-protocol/core" import { useRouter } from "next/navigation" -import { useCallback, useContext, useEffect, useState } from "react" +import { useCallback, useEffect, useState } from "react" import Stepper from "../components/Stepper" -import LogsContext from "../context/LogsContext" +import { useLogContext } from "../context/LogContext" export default function IdentitiesPage() { const router = useRouter() - const { setLogs } = useContext(LogsContext) + const { setLog } = useLogContext() const [_identity, setIdentity] = useState() useEffect(() => { const privateKey = localStorage.getItem("identity") if (privateKey) { - const identity = new Identity(privateKey) + const identity = Identity.import(privateKey) setIdentity(identity) - setLogs("Your Semaphore identity has been retrieved from the browser cache 👌🏽") + setLog("Your Semaphore identity has been retrieved from the browser cache 👌🏽") } else { - setLogs("Create your Semaphore identity 👆🏽") + setLog("Create your Semaphore identity 👆🏽") } - }, [setLogs]) + }, [setLog]) const createIdentity = useCallback(async () => { const identity = new Identity() setIdentity(identity) - localStorage.setItem("identity", identity.privateKey.toString()) + localStorage.setItem("identity", identity.export()) - setLogs("Your new Semaphore identity has just been created 🎉") - }, [setLogs]) + setLog("Your new Semaphore identity has just been created 🎉") + }, [setLog]) return ( <> -

Identities

+ + Identities + -

+ The identity of a user in the Semaphore protocol. A{" "} - + Semaphore identity - {" "} + {" "} consists of an{" "} - EdDSA - {" "} + {" "} public/private key pair and a commitment, used as the public identifier of the identity. -

- -
- -
-

Identity

- {_identity && ( - - )} -
- - {_identity ? ( -
-
-

Private Key: {_identity.privateKey.toString()}

-

Commitment: {_identity.commitment.toString()}

-
-
- ) : ( -
- -
+ + + + + + + Identity + + + + {_identity && ( + + + Private Key (base64):
{_identity.export()} + + + Public Key:
[{_identity.publicKey[0].toString()},{" "} + {_identity.publicKey[1].toString()}] + + + Commitment:
{_identity.commitment.toString()} + + )} -
+ + + + + - router.push("/groups"))} /> + router.push("/group"))} /> ) } diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/proofs/page.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/proofs/page.tsx index de060019a..88fffa390 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/proofs/page.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/proofs/page.tsx @@ -1,78 +1,96 @@ "use client" -import { Group, Identity, generateProof } from "@semaphore-protocol/core" +import Stepper from "@/components/Stepper" +import { useLogContext } from "@/context/LogContext" +import { useSemaphoreContext } from "@/context/SemaphoreContext" +import IconRefreshLine from "@/icons/IconRefreshLine" +import { Box, Button, Divider, Heading, HStack, Link, Text, useBoolean, VStack } from "@chakra-ui/react" +import { generateProof, Group } from "@semaphore-protocol/core" +import { encodeBytes32String, ethers } from "ethers" import { useRouter } from "next/navigation" -import { useCallback, useContext, useEffect, useState } from "react" +import { useCallback, useEffect, useMemo } from "react" import Feedback from "../../../contract-artifacts/Feedback.json" -import Stepper from "../../components/Stepper" -import LogsContext from "../../context/LogsContext" -import SemaphoreContext from "../../context/SemaphoreContext" +import useSemaphoreIdentity from "@/hooks/useSemaphoreIdentity" export default function ProofsPage() { const router = useRouter() - const { setLogs } = useContext(LogsContext) - const { _users, _feedback, refreshFeedback, addFeedback } = useContext(SemaphoreContext) - const [_loading, setLoading] = useState(false) - const [_identity, setIdentity] = useState() - - useEffect(() => { - const privateKey = localStorage.getItem("identity") - - if (!privateKey) { - router.push("/") - return - } - - setIdentity(new Identity(privateKey)) - }, [router]) + const { setLog } = useLogContext() + const { _users, _feedback, refreshFeedback, addFeedback } = useSemaphoreContext() + const [_loading, setLoading] = useBoolean() + const { _identity } = useSemaphoreIdentity() useEffect(() => { if (_feedback.length > 0) { - setLogs(`${_feedback.length} feedback retrieved from the group 🤙🏽`) + setLog(`${_feedback.length} feedback retrieved from the group 🤙🏽`) } - }, [_feedback, setLogs]) + }, [_feedback, setLog]) + + const feedback = useMemo(() => [..._feedback].reverse(), [_feedback]) const sendFeedback = useCallback(async () => { if (!_identity) { return } - if (typeof process.env.NEXT_PUBLIC_GROUP_ID !== "string") { - throw new Error("Please, define NEXT_PUBLIC_GROUP_ID in your .env file") - } - const feedback = prompt("Please enter your feedback:") if (feedback && _users) { - setLoading(true) + setLoading.on() - setLogs(`Posting your anonymous feedback...`) + setLog(`Posting your anonymous feedback...`) try { const group = new Group(_users) - const { points, merkleTreeDepth, merkleTreeRoot, nullifier, message } = await generateProof( + const message = encodeBytes32String(feedback) + + const { points, merkleTreeDepth, merkleTreeRoot, nullifier } = await generateProof( _identity, group, - feedback, + message, process.env.NEXT_PUBLIC_GROUP_ID as string ) - let response: any - - if (process.env.OPENZEPPELIN_AUTOTASK_WEBHOOK) { - response = await fetch(process.env.OPENZEPPELIN_AUTOTASK_WEBHOOK, { + let feedbackSent: boolean = false + const params = [merkleTreeDepth, merkleTreeRoot, nullifier, message, points] + if (process.env.NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK) { + const response = await fetch(process.env.NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ abi: Feedback.abi, - address: process.env.FEEDBACK_CONTRACT_ADDRESS, + address: process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS, functionName: "sendFeedback", - functionParameters: [merkleTreeDepth, merkleTreeRoot, nullifier, message, points] + functionParameters: params }) }) + + if (response.status === 200) { + feedbackSent = true + } + } else if ( + process.env.NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT && + process.env.NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID && + process.env.GELATO_RELAYER_API_KEY + ) { + const iface = new ethers.Interface(Feedback.abi) + const request = { + chainId: process.env.NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID, + target: process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS, + data: iface.encodeFunctionData("sendFeedback", params), + sponsorApiKey: process.env.GELATO_RELAYER_API_KEY + } + const response = await fetch(process.env.NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(request) + }) + + if (response.status === 201) { + feedbackSent = true + } } else { - response = await fetch("api/feedback", { + const response = await fetch("api/feedback", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ @@ -83,71 +101,80 @@ export default function ProofsPage() { points }) }) + + if (response.status === 200) { + feedbackSent = true + } } - if (response.status === 200) { + if (feedbackSent) { addFeedback(feedback) - setLogs(`Your feedback has been posted 🎉`) + setLog(`Your feedback has been posted 🎉`) } else { - setLogs("Some error occurred, please try again!") + setLog("Some error occurred, please try again!") } } catch (error) { console.error(error) - setLogs("Some error occurred, please try again!") + setLog("Some error occurred, please try again!") } finally { - setLoading(false) + setLoading.off() } } - }, [_identity, _users, addFeedback, setLogs]) + }, [_identity, _users, addFeedback, setLoading, setLog]) return ( <> -

Proofs

+ + Proofs + -

+ Semaphore members can anonymously{" "} - + prove - {" "} + {" "} that they are part of a group and send their anonymous messages. Messages could be votes, leaks, - reviews, feedback, etc. -

- -
- -
-

Feedback messages ({_feedback.length})

- -
- -
- -
+ + {_feedback.length > 0 && ( -
- {_feedback.map((f, i) => ( -
-

{f}

-
+ + {feedback.map((f, i) => ( + + {f} + ))} -
+ )} -
+ + + + + - router.push("/groups")} /> + router.push("/group")} /> ) } diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/providers.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/providers.tsx new file mode 100644 index 000000000..910643fc2 --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/providers.tsx @@ -0,0 +1,13 @@ +"use client" + +import { CacheProvider } from "@chakra-ui/next-js" +import { ChakraProvider } from "@chakra-ui/react" +import theme from "../styles/index" + +export default function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx index 63b1499ee..686123c67 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx @@ -1,13 +1,10 @@ "use client" -import LogsContext from "@/context/LogsContext" -import SemaphoreContext from "@/context/SemaphoreContext" -import useSemaphore from "@/hooks/useSemaphore" +import { useLogContext } from "@/context/LogContext" import shortenString from "@/utils/shortenString" -import { SupportedNetwork } from "@semaphore-protocol/utils" +import { Container, HStack, Icon, IconButton, Link, Spinner, Stack, Text } from "@chakra-ui/react" import { usePathname } from "next/navigation" -import { useEffect, useState } from "react" -import Link from "next/link" +import { FaGithub } from "react-icons/fa" export default function PageContainer({ children @@ -15,15 +12,9 @@ export default function PageContainer({ children: React.ReactNode }>) { const pathname = usePathname() - const semaphore = useSemaphore() - const [_logs, setLogs] = useState("") + const { log } = useLogContext() - useEffect(() => { - semaphore.refreshUsers() - semaphore.refreshFeedback() - }, []) - - function getExplorerLink(network: SupportedNetwork, address: string) { + function getExplorerLink(network: string, address: string) { switch (network) { case "sepolia": return `https://sepolia.etherscan.io/address/${address}` @@ -35,64 +26,47 @@ export default function PageContainer({ } return ( -
-
- - Feedback + <> + + + {shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])} - -
- -
- - - {children} - - -
+ + } + /> + + -
+ + + {children} + + -
- {_logs.endsWith("...")} -

{_logs || `Current step: ${pathname}`}

-
-
+ + {log.endsWith("...") && } + {log || `Current step: ${pathname}`} + + ) } diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/Stepper.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/Stepper.tsx index 55cc89330..2a99262e2 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/Stepper.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/Stepper.tsx @@ -1,3 +1,9 @@ +"use client" + +import { Button, HStack, Text } from "@chakra-ui/react" +import IconChevronLeft from "../icons/IconChevronLeft" +import IconChevronRight from "../icons/IconChevronRight" + export type StepperProps = { step: number onPrevClick?: () => void @@ -6,24 +12,38 @@ export type StepperProps = { export default function Stepper({ step, onPrevClick, onNextClick }: StepperProps) { return ( -
- {onPrevClick !== undefined ? ( - - ) : ( - - )} + + -

{step.toString()}/3

+ + {step.toString()}/3 + - {onNextClick !== undefined ? ( - - ) : ( - - )} -
+ + ) } diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/LogContext.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/LogContext.tsx new file mode 100644 index 000000000..8885447f1 --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/LogContext.tsx @@ -0,0 +1,37 @@ +"use client" + +import React, { createContext, ReactNode, useContext, useState } from "react" + +export type LogContextType = { + log: string + setLog: (logs: string) => void +} + +const LogContext = createContext(null) + +interface ProviderProps { + children: ReactNode +} + +export const LogContextProvider: React.FC = ({ children }) => { + const [log, setLog] = useState("") + + return ( + + {children} + + ) +} + +export const useLogContext = () => { + const context = useContext(LogContext) + if (context === null) { + throw new Error("LogContext must be used within a LogContextProvider") + } + return context +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.tsx new file mode 100644 index 000000000..425b545ef --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.tsx @@ -0,0 +1,94 @@ +"use client" + +import React, { createContext, ReactNode, useCallback, useContext, useEffect, useState } from "react" +import { SemaphoreEthers } from "@semaphore-protocol/data" +import { decodeBytes32String, toBeHex } from "ethers" + +export type SemaphoreContextType = { + _users: string[] + _feedback: string[] + refreshUsers: () => Promise + addUser: (user: string) => void + refreshFeedback: () => Promise + addFeedback: (feedback: string) => void +} + +const SemaphoreContext = createContext(null) + +interface ProviderProps { + children: ReactNode +} + +const ethereumNetwork = + process.env.NEXT_PUBLIC_DEFAULT_NETWORK === "localhost" + ? "http://127.0.0.1:8545" + : process.env.NEXT_PUBLIC_DEFAULT_NETWORK + +export const SemaphoreContextProvider: React.FC = ({ children }) => { + const [_users, setUsers] = useState([]) + const [_feedback, setFeedback] = useState([]) + + const refreshUsers = useCallback(async (): Promise => { + const semaphore = new SemaphoreEthers(ethereumNetwork, { + address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS, + projectId: process.env.NEXT_PUBLIC_INFURA_API_KEY + }) + + const members = await semaphore.getGroupMembers(process.env.NEXT_PUBLIC_GROUP_ID as string) + + setUsers(members.map((member) => member.toString())) + }, []) + + const addUser = useCallback( + (user: any) => { + setUsers([..._users, user]) + }, + [_users] + ) + + const refreshFeedback = useCallback(async (): Promise => { + const semaphore = new SemaphoreEthers(ethereumNetwork, { + address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS, + projectId: process.env.NEXT_PUBLIC_INFURA_API_KEY + }) + + const proofs = await semaphore.getGroupValidatedProofs(process.env.NEXT_PUBLIC_GROUP_ID as string) + + setFeedback(proofs.map(({ message }: any) => decodeBytes32String(toBeHex(message, 32)))) + }, []) + + const addFeedback = useCallback( + (feedback: string) => { + setFeedback([..._feedback, feedback]) + }, + [_feedback] + ) + + useEffect(() => { + refreshUsers() + refreshFeedback() + }, [refreshFeedback, refreshUsers]) + + return ( + + {children} + + ) +} + +export const useSemaphoreContext = () => { + const context = useContext(SemaphoreContext) + if (context === null) { + throw new Error("SemaphoreContext must be used within a SemaphoreContextProvider") + } + return context +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphoreIdentity.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphoreIdentity.ts new file mode 100644 index 000000000..26e2ba773 --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphoreIdentity.ts @@ -0,0 +1,23 @@ +import { useEffect, useState } from "react" +import { Identity } from "@semaphore-protocol/core" +import { useRouter } from "next/navigation" + +export default function useSemaphoreIdentity() { + const router = useRouter() + const [_identity, setIdentity] = useState() + + useEffect(() => { + const privateKey = localStorage.getItem("identity") + + if (!privateKey) { + router.push("/") + return + } + + setIdentity(new Identity(privateKey)) + }, [router]) + + return { + _identity + } +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconAddCircleFill.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconAddCircleFill.tsx new file mode 100644 index 000000000..1f40a342e --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconAddCircleFill.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconAddCircleFillProps = { + width?: number + height?: number + color?: string +} + +export default function IconAddCircleFill({ width, height, color }: IconAddCircleFillProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconCheck.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconCheck.tsx new file mode 100644 index 000000000..2bb55d4c7 --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconCheck.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconCheckProps = { + width?: number + height?: number + color?: string +} + +export default function IconCheck({ width, height, color }: IconCheckProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronLeft.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronLeft.tsx new file mode 100644 index 000000000..d92ded273 --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronLeft.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconChevronLeftProps = { + width?: number + height?: number + color?: string +} + +export default function IconChevronLeft({ width, height, color }: IconChevronLeftProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronRight.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronRight.tsx new file mode 100644 index 000000000..df604b5ba --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronRight.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconChevronRightProps = { + width?: number + height?: number + color?: string +} + +export default function IconChevronRight({ width, height, color }: IconChevronRightProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconRefreshLine.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconRefreshLine.tsx new file mode 100644 index 000000000..8363091d5 --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconRefreshLine.tsx @@ -0,0 +1,19 @@ +import { Icon } from "@chakra-ui/react" +import React from "react" + +export type IconRefreshLineProps = { + width?: number + height?: number + color?: string +} + +export default function IconRefreshLine({ width, height, color }: IconRefreshLineProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/colors.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/colors.ts new file mode 100644 index 000000000..5e79392cc --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/colors.ts @@ -0,0 +1,32 @@ +const colors = { + darkBlue: "#0E101B", + darkBlueBg: "#00020D", + primary: { + 50: "#f0f4fe", + 100: "#dde6fc", + 200: "#c3d4fa", + 300: "#9abaf6", + 400: "#6a95f0", + 500: "#4771ea", + 600: "#3555df", + 700: "#2940cc", + 800: "#2735a6", + 900: "#253183", + 950: "#1b2050" + }, + text: { + 50: "#f7f7f8", + 100: "#eeeef0", + 200: "#d9d9de", + 300: "#b8b9c1", + 400: "#92939e", + 500: "#747583", + 600: "#5e5f6b", + 700: "#4d4e57", + 800: "#42424a", + 900: "#3a3a40", + 950: "#26262b" + } +} + +export default colors diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Button.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Button.ts new file mode 100644 index 000000000..13df87d6b --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Button.ts @@ -0,0 +1,77 @@ +import { StyleFunctionProps, SystemStyleObject } from "@chakra-ui/theme-tools" +import { font } from "../styles" + +const Button = { + baseStyle: { + _focus: { + boxShadow: "none" + }, + borderRadius: "100px", + fontFamily: font.style.fontFamily, + fontWeight: "400", + paddingLeft: "18px !important", + paddingRight: "18px !important" + }, + defaultProps: { + colorScheme: "white" + }, + variants: { + solid: (props: StyleFunctionProps): SystemStyleObject => { + const { colorScheme: c } = props + + if (c === "primary") { + const bgGradient = "linear(to-r, primary.500, primary.800)" + const color = "white" + + return { + bgGradient, + color, + transitionDuration: "200ms", + transitionTimingFunction: "linear", + _hover: { + bg: `${c}.800`, + _disabled: { + bgGradient + } + }, + _active: { bg: `${c}.800` } + } + } + + const bg = c + + return { + bg, + color: `darkBlueBg`, + transitionDuration: "200ms", + transitionTimingFunction: "linear", + _hover: { + bg: `primary.200`, + _disabled: { + bg + } + }, + _active: { bg: `primary.200` } + } + }, + outline: (props: StyleFunctionProps): SystemStyleObject => { + const { colorScheme: c } = props + + return { + color: c, + transitionDuration: "200ms", + transitionTimingFunction: "linear", + borderWidth: "1.2px", + borderColor: c, + _hover: { + color: c, + borderColor: "primary.200", + _disabled: { + bg: c + } + } + } + } + } +} +export default Button diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Link.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Link.ts new file mode 100644 index 000000000..e4a03d42b --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Link.ts @@ -0,0 +1,9 @@ +const Link = { + baseStyle: { + _focus: { + boxShadow: "none" + } + } +} + +export default Link diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Tooltip.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Tooltip.ts new file mode 100644 index 000000000..6df3a97d7 --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Tooltip.ts @@ -0,0 +1,13 @@ +import { SystemStyleObject } from "@chakra-ui/react" + +const Tooltip = { + baseStyle: (): SystemStyleObject => ({ + borderRadius: "4px", + py: "10px", + px: "15px", + fontWeight: "bold", + maxW: "350px" + }) +} + +export default Tooltip diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/index.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/index.ts new file mode 100644 index 000000000..c4bd4fbdd --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/index.ts @@ -0,0 +1,9 @@ +import Button from "./Button" +import Link from "./Link" +import Tooltip from "./Tooltip" + +export default { + Link, + Button, + Tooltip +} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/index.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/index.ts new file mode 100644 index 000000000..ffbe97221 --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/index.ts @@ -0,0 +1,16 @@ +import { extendTheme } from "@chakra-ui/react" +import colors from "./colors" +import components from "./components" +import styles, { font } from "./styles" + +const config = { + fonts: { + heading: font.style.fontFamily, + body: "DM Sans, sans-serif" + }, + colors, + styles, + components +} + +export default extendTheme(config) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/styles.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/styles.ts new file mode 100644 index 000000000..f2d2dfa43 --- /dev/null +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/styles.ts @@ -0,0 +1,25 @@ +import { SystemStyleObject } from "@chakra-ui/react" +import { Styles } from "@chakra-ui/theme-tools" +import { Outfit } from "next/font/google" + +export const font = Outfit({ subsets: ["latin"] }) + +const styles: Styles = { + global: (): SystemStyleObject => ({ + body: { + bg: "darkBlueBg", + color: "text.100", + minHeight: "100vh", + display: "flex", + flexDirection: "column" + }, + "h1, h2, h3, h4": { + fontWeight: "500 !important" + }, + a: { + color: "primary.400 !important" + } + }) +} + +export default styles From 5165a12efd45b27b2305510ec9a8433d30c8f389 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sun, 28 Jul 2024 19:49:33 -0300 Subject: [PATCH 03/43] refactor(cli-template-monorepo-subgraph): rename subgraph web app on package.json re #836 --- .../apps/web-app/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json index f56791a4b..10f565054 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json @@ -1,12 +1,12 @@ { - "name": "web-app", - "version": "1.0.0", + "name": "monorepo-subgraph-web-app", + "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", - "lint": "next lint", - "start": "next start" + "start": "next start", + "lint": "next lint" }, "dependencies": { "@chakra-ui/next-js": "^2.2.0", From a3d84f370251a346c199eeba02ea056181f82028 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Tue, 30 Jul 2024 10:57:15 -0300 Subject: [PATCH 04/43] refactor: update yarn.lock re #836 --- yarn.lock | 207 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 199 insertions(+), 8 deletions(-) diff --git a/yarn.lock b/yarn.lock index 36cb51e84..f9fd5999f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2169,7 +2169,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/next-js@npm:^2.1.5": +"@chakra-ui/next-js@npm:^2.1.5, @chakra-ui/next-js@npm:^2.2.0": version: 2.2.0 resolution: "@chakra-ui/next-js@npm:2.2.0" dependencies: @@ -2563,7 +2563,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/react@npm:^2.8.1": +"@chakra-ui/react@npm:^2.8.1, @chakra-ui/react@npm:^2.8.2": version: 2.8.2 resolution: "@chakra-ui/react@npm:2.8.2" dependencies: @@ -2838,7 +2838,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/theme-tools@npm:2.1.2, @chakra-ui/theme-tools@npm:^2.1.1": +"@chakra-ui/theme-tools@npm:2.1.2, @chakra-ui/theme-tools@npm:^2.1.1, @chakra-ui/theme-tools@npm:^2.1.2": version: 2.1.2 resolution: "@chakra-ui/theme-tools@npm:2.1.2" dependencies: @@ -2863,7 +2863,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/theme@npm:3.3.1, @chakra-ui/theme@npm:^3.3.0": +"@chakra-ui/theme@npm:3.3.1, @chakra-ui/theme@npm:^3.3.0, @chakra-ui/theme@npm:^3.3.1": version: 3.3.1 resolution: "@chakra-ui/theme@npm:3.3.1" dependencies: @@ -3757,6 +3757,25 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.12.0": + version: 11.12.0 + resolution: "@emotion/babel-plugin@npm:11.12.0" + dependencies: + "@babel/helper-module-imports": "npm:^7.16.7" + "@babel/runtime": "npm:^7.18.3" + "@emotion/hash": "npm:^0.9.2" + "@emotion/memoize": "npm:^0.9.0" + "@emotion/serialize": "npm:^1.2.0" + babel-plugin-macros: "npm:^3.1.0" + convert-source-map: "npm:^1.5.0" + escape-string-regexp: "npm:^4.0.0" + find-root: "npm:^1.1.0" + source-map: "npm:^0.5.7" + stylis: "npm:4.2.0" + checksum: 10/fe6f4522ea2b61ef4214dd0b0f3778aad9c18434b47e50ae5091af226526bf305455c313065826a090682520c9462c151d4df62ec128f14671d3125afc05b148 + languageName: node + linkType: hard + "@emotion/cache@npm:^11.11.0": version: 11.11.0 resolution: "@emotion/cache@npm:11.11.0" @@ -3770,6 +3789,19 @@ __metadata: languageName: node linkType: hard +"@emotion/cache@npm:^11.13.0": + version: 11.13.1 + resolution: "@emotion/cache@npm:11.13.1" + dependencies: + "@emotion/memoize": "npm:^0.9.0" + "@emotion/sheet": "npm:^1.4.0" + "@emotion/utils": "npm:^1.4.0" + "@emotion/weak-memoize": "npm:^0.4.0" + stylis: "npm:4.2.0" + checksum: 10/090c8ad2e5b23f1b3a95e94f1f0554a40ed1dcd844c9d31629a68ff824eff40f32d1362f67aefa440ee0aabd5a8cabcc76870fd6d77144d3ff251bdcdf1420b9 + languageName: node + linkType: hard + "@emotion/hash@npm:^0.9.1": version: 0.9.1 resolution: "@emotion/hash@npm:0.9.1" @@ -3777,6 +3809,13 @@ __metadata: languageName: node linkType: hard +"@emotion/hash@npm:^0.9.2": + version: 0.9.2 + resolution: "@emotion/hash@npm:0.9.2" + checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387 + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:1.2.2, @emotion/is-prop-valid@npm:^1.2.2": version: 1.2.2 resolution: "@emotion/is-prop-valid@npm:1.2.2" @@ -3809,6 +3848,13 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.9.0": + version: 0.9.0 + resolution: "@emotion/memoize@npm:0.9.0" + checksum: 10/038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1 + languageName: node + linkType: hard + "@emotion/react@npm:^11.11.1": version: 11.11.4 resolution: "@emotion/react@npm:11.11.4" @@ -3830,6 +3876,27 @@ __metadata: languageName: node linkType: hard +"@emotion/react@npm:^11.11.3": + version: 11.13.0 + resolution: "@emotion/react@npm:11.13.0" + dependencies: + "@babel/runtime": "npm:^7.18.3" + "@emotion/babel-plugin": "npm:^11.12.0" + "@emotion/cache": "npm:^11.13.0" + "@emotion/serialize": "npm:^1.3.0" + "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.1.0" + "@emotion/utils": "npm:^1.4.0" + "@emotion/weak-memoize": "npm:^0.4.0" + hoist-non-react-statics: "npm:^3.3.1" + peerDependencies: + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/3dd2b3ffac51f0fa67ef3cb85d4064fd7ddc1212b587e3b328a1eade47024690175518d63c4cbabf28afa07e29187136b26d646e395158f6574fa6321a0b68f9 + languageName: node + linkType: hard + "@emotion/serialize@npm:^1.1.2, @emotion/serialize@npm:^1.1.3, @emotion/serialize@npm:^1.1.4": version: 1.1.4 resolution: "@emotion/serialize@npm:1.1.4" @@ -3843,6 +3910,19 @@ __metadata: languageName: node linkType: hard +"@emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.0": + version: 1.3.0 + resolution: "@emotion/serialize@npm:1.3.0" + dependencies: + "@emotion/hash": "npm:^0.9.2" + "@emotion/memoize": "npm:^0.9.0" + "@emotion/unitless": "npm:^0.9.0" + "@emotion/utils": "npm:^1.4.0" + csstype: "npm:^3.0.2" + checksum: 10/3ab17aa0dabdc77d5d573ef07df63e91e778c0637f4b7f690fde46ab0007496c8dfbf32d2836d3b22ac2ba2d8c58570da51092ba7ff068d4d790147de2352465 + languageName: node + linkType: hard + "@emotion/sheet@npm:^1.2.2": version: 1.2.2 resolution: "@emotion/sheet@npm:1.2.2" @@ -3850,6 +3930,13 @@ __metadata: languageName: node linkType: hard +"@emotion/sheet@npm:^1.4.0": + version: 1.4.0 + resolution: "@emotion/sheet@npm:1.4.0" + checksum: 10/8ac6e9bf6b373a648f26ae7f1c24041038524f4c72f436f4f8c4761c665e58880c3229d8d89b1f7a4815dd8e5b49634d03e60187cb6f93097d7f7c1859e869d5 + languageName: node + linkType: hard + "@emotion/styled@npm:^11.11.0": version: 11.11.5 resolution: "@emotion/styled@npm:11.11.5" @@ -3877,6 +3964,13 @@ __metadata: languageName: node linkType: hard +"@emotion/unitless@npm:^0.9.0": + version: 0.9.0 + resolution: "@emotion/unitless@npm:0.9.0" + checksum: 10/242754aa2f7368b5c2a5dbe61bf0a2bb0bfb4de091fe2388282f8c014c0796d0ca166b1639cf4f5f0e57e59258b622e7946a2e976ed5a56e06a5a306ca25adca + languageName: node + linkType: hard + "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" @@ -3886,6 +3980,15 @@ __metadata: languageName: node linkType: hard +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.1.0": + version: 1.1.0 + resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.1.0" + peerDependencies: + react: ">=16.8.0" + checksum: 10/33a10f44a873b3f5ccd2a1a3d13c2f34ed628f5a2be1ccf28540a86535a14d3a930afcbef209d48346a22ec60ff48f43c86ee9c846b9480d23a55a17145da66c + languageName: node + linkType: hard + "@emotion/utils@npm:^1.2.1": version: 1.2.1 resolution: "@emotion/utils@npm:1.2.1" @@ -3893,6 +3996,13 @@ __metadata: languageName: node linkType: hard +"@emotion/utils@npm:^1.4.0": + version: 1.4.0 + resolution: "@emotion/utils@npm:1.4.0" + checksum: 10/e4cdb51819db01fec21c3e35a1391900c9e7f3ac1e7ecb419c8e408464830cd7ef6e1a116381cbfe3fb1039406fb7ed35f16a1575d502c92bc9f81bc13a3ee5a + languageName: node + linkType: hard + "@emotion/weak-memoize@npm:^0.3.1": version: 0.3.1 resolution: "@emotion/weak-memoize@npm:0.3.1" @@ -3900,6 +4010,13 @@ __metadata: languageName: node linkType: hard +"@emotion/weak-memoize@npm:^0.4.0": + version: 0.4.0 + resolution: "@emotion/weak-memoize@npm:0.4.0" + checksum: 10/db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52 + languageName: node + linkType: hard + "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0": version: 4.4.0 resolution: "@eslint-community/eslint-utils@npm:4.4.0" @@ -12582,7 +12699,7 @@ __metadata: languageName: node linkType: hard -"dotenv@npm:^16.0.2, dotenv@npm:^16.4.5": +"dotenv@npm:^16.0.2, dotenv@npm:^16.4.4, dotenv@npm:^16.4.5": version: 16.4.5 resolution: "dotenv@npm:16.4.5" checksum: 10/55a3134601115194ae0f924e54473459ed0d9fc340ae610b676e248cca45aa7c680d86365318ea964e6da4e2ea80c4514c1adab5adb43d6867fb57ff068f95c8 @@ -13765,6 +13882,21 @@ __metadata: languageName: node linkType: hard +"ethers@npm:^6.11.0": + version: 6.13.2 + resolution: "ethers@npm:6.13.2" + dependencies: + "@adraffy/ens-normalize": "npm:1.10.1" + "@noble/curves": "npm:1.2.0" + "@noble/hashes": "npm:1.3.2" + "@types/node": "npm:18.15.13" + aes-js: "npm:4.0.0-beta.5" + tslib: "npm:2.4.0" + ws: "npm:8.17.1" + checksum: 10/e611c2e2c5340982dfd1f004895f55abda11748a7edec9e6315226dec42d58aa61b827dd389ec904db5f9a244c475ae795e528da579251fdf62e914bde12809e + languageName: node + linkType: hard + "ethers@npm:^6.11.1, ethers@npm:^6.4.0": version: 6.12.1 resolution: "ethers@npm:6.12.1" @@ -14575,6 +14707,26 @@ __metadata: languageName: node linkType: hard +"framer-motion@npm:^11.0.5": + version: 11.3.19 + resolution: "framer-motion@npm:11.3.19" + dependencies: + tslib: "npm:^2.4.0" + peerDependencies: + "@emotion/is-prop-valid": "*" + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + "@emotion/is-prop-valid": + optional: true + react: + optional: true + react-dom: + optional: true + checksum: 10/05db4f4b6ad0a63e8494d122b2261412b8db7a4a2971ece1d58693dd51885e0a1405e684d730c45e8194bfbceccfa13a707db3744d870902a768285615f892b1 + languageName: node + linkType: hard + "framesync@npm:6.1.2": version: 6.1.2 resolution: "framesync@npm:6.1.2" @@ -20171,13 +20323,19 @@ __metadata: version: 0.0.0-use.local resolution: "monorepo-ethers-web-app@workspace:packages/cli-template-monorepo-ethers/apps/web-app" dependencies: + "@chakra-ui/next-js": "npm:^2.2.0" + "@chakra-ui/react": "npm:^2.8.2" + "@chakra-ui/theme": "npm:^3.3.1" + "@chakra-ui/theme-tools": "npm:^2.1.2" + "@emotion/react": "npm:^11.11.3" + "@emotion/styled": "npm:^11.11.0" "@semaphore-protocol/core": "npm:4.0.0" "@semaphore-protocol/data": "npm:4.0.0" "@semaphore-protocol/utils": "npm:4.0.0" "@types/node": "npm:^20" "@types/react": "npm:^18" "@types/react-dom": "npm:^18" - dotenv: "npm:^16.4.5" + dotenv: "npm:^16.4.4" eslint: "npm:^8" eslint-config-next: "npm:14.1.0" ethers: "npm:^6.11.1" @@ -20185,6 +20343,7 @@ __metadata: next-pwa: "npm:^5.6.0" react: "npm:^18" react-dom: "npm:^18" + react-icons: "npm:^4.8.0" typescript: "npm:^5" languageName: unknown linkType: soft @@ -20234,20 +20393,28 @@ __metadata: version: 0.0.0-use.local resolution: "monorepo-subgraph-web-app@workspace:packages/cli-template-monorepo-subgraph/apps/web-app" dependencies: + "@chakra-ui/next-js": "npm:^2.2.0" + "@chakra-ui/react": "npm:^2.8.2" + "@chakra-ui/theme": "npm:^3.3.1" + "@chakra-ui/theme-tools": "npm:^2.1.2" + "@emotion/react": "npm:^11.11.3" + "@emotion/styled": "npm:^11.11.0" "@semaphore-protocol/core": "npm:4.0.0" "@semaphore-protocol/data": "npm:4.0.0" "@semaphore-protocol/utils": "npm:4.0.0" "@types/node": "npm:^20" "@types/react": "npm:^18" "@types/react-dom": "npm:^18" - dotenv: "npm:^16.4.5" + dotenv: "npm:^16.4.4" eslint: "npm:^8" eslint-config-next: "npm:14.1.0" - ethers: "npm:^6.11.1" + ethers: "npm:^6.11.0" + framer-motion: "npm:^11.0.5" next: "npm:14.1.0" next-pwa: "npm:^5.6.0" react: "npm:^18" react-dom: "npm:^18" + react-icons: "npm:^4.8.0" typescript: "npm:^5" languageName: unknown linkType: soft @@ -22894,6 +23061,15 @@ __metadata: languageName: node linkType: hard +"react-icons@npm:^4.8.0": + version: 4.12.0 + resolution: "react-icons@npm:4.12.0" + peerDependencies: + react: "*" + checksum: 10/5cc20509ca0b182f1e7bf42c271846c48f688c8922e2439f48728805adc93ba18476a13588cbe91ee43a2d03b2787e0dc0b5cc4b9c4e4ae3426f4464b3c1b734 + languageName: node + linkType: hard + "react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" @@ -28492,6 +28668,21 @@ __metadata: languageName: node linkType: hard +"ws@npm:8.17.1": + version: 8.17.1 + resolution: "ws@npm:8.17.1" + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: ">=5.0.2" + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + checksum: 10/4264ae92c0b3e59c7e309001e93079b26937aab181835fb7af79f906b22cd33b6196d96556dafb4e985742dd401e99139572242e9847661fdbc96556b9e6902d + languageName: node + linkType: hard + "ws@npm:8.5.0": version: 8.5.0 resolution: "ws@npm:8.5.0" From e79e8738e7dce36471bd5c3c430c7121a4c7a0e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Wed, 7 Aug 2024 20:25:59 -0300 Subject: [PATCH 05/43] chore: fix indentation error on yarn.lock re 836 --- .../apps/web-app/package.json | 14 ++++---- .../apps/web-app/package.json | 16 ++++----- yarn.lock | 36 ++----------------- 3 files changed, 18 insertions(+), 48 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/package.json b/packages/cli-template-monorepo-ethers/apps/web-app/package.json index 63e02909d..835e50b88 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/package.json +++ b/packages/cli-template-monorepo-ethers/apps/web-app/package.json @@ -9,6 +9,12 @@ "lint": "next lint" }, "dependencies": { + "@chakra-ui/next-js": "^2.2.0", + "@chakra-ui/react": "^2.8.2", + "@chakra-ui/theme": "^3.3.1", + "@chakra-ui/theme-tools": "^2.1.2", + "@emotion/react": "^11.11.3", + "@emotion/styled": "^11.11.0", "@semaphore-protocol/core": "4.0.1", "@semaphore-protocol/data": "4.0.1", "@semaphore-protocol/utils": "4.0.1", @@ -17,13 +23,7 @@ "next-pwa": "^5.6.0", "react": "^18", "react-dom": "^18", - "react-icons": "^4.8.0", - "@chakra-ui/next-js": "^2.2.0", - "@chakra-ui/react": "^2.8.2", - "@chakra-ui/theme": "^3.3.1", - "@chakra-ui/theme-tools": "^2.1.2", - "@emotion/react": "^11.11.3", - "@emotion/styled": "^11.11.0" + "react-icons": "^4.8.0" }, "devDependencies": { "@types/node": "^20", diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json index 814062b34..81b70d0f4 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json @@ -9,22 +9,22 @@ "lint": "next lint" }, "dependencies": { + "@chakra-ui/next-js": "^2.2.0", + "@chakra-ui/react": "^2.8.2", + "@chakra-ui/theme": "^3.3.1", + "@chakra-ui/theme-tools": "^2.1.2", + "@emotion/react": "^11.11.3", + "@emotion/styled": "^11.11.0", "@semaphore-protocol/core": "4.0.1", "@semaphore-protocol/data": "4.0.1", "@semaphore-protocol/utils": "4.0.1", "ethers": "^6.11.1", + "framer-motion": "^11.0.5", "next": "14.1.0", "next-pwa": "^5.6.0", "react": "^18", "react-dom": "^18", - "react-icons": "^4.8.0", - "@chakra-ui/next-js": "^2.2.0", - "@chakra-ui/react": "^2.8.2", - "@chakra-ui/theme": "^3.3.1", - "@chakra-ui/theme-tools": "^2.1.2", - "@emotion/react": "^11.11.3", - "@emotion/styled": "^11.11.0", - "framer-motion": "^11.0.5" + "react-icons": "^4.8.0" }, "devDependencies": { "@types/node": "^20", diff --git a/yarn.lock b/yarn.lock index 5b424c5d2..dcb84e6a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13882,21 +13882,6 @@ __metadata: languageName: node linkType: hard -"ethers@npm:^6.11.0": - version: 6.13.2 - resolution: "ethers@npm:6.13.2" - dependencies: - "@adraffy/ens-normalize": "npm:1.10.1" - "@noble/curves": "npm:1.2.0" - "@noble/hashes": "npm:1.3.2" - "@types/node": "npm:18.15.13" - aes-js: "npm:4.0.0-beta.5" - tslib: "npm:2.4.0" - ws: "npm:8.17.1" - checksum: 10/e611c2e2c5340982dfd1f004895f55abda11748a7edec9e6315226dec42d58aa61b827dd389ec904db5f9a244c475ae795e528da579251fdf62e914bde12809e - languageName: node - linkType: hard - "ethers@npm:^6.11.1, ethers@npm:^6.4.0": version: 6.12.1 resolution: "ethers@npm:6.12.1" @@ -20323,7 +20308,7 @@ __metadata: version: 0.0.0-use.local resolution: "monorepo-ethers-web-app@workspace:packages/cli-template-monorepo-ethers/apps/web-app" dependencies: - "@chakra-ui/next-js": "npm:^2.2.0" + "@chakra-ui/next-js": "npm:^2.2.0" "@chakra-ui/react": "npm:^2.8.2" "@chakra-ui/theme": "npm:^3.3.1" "@chakra-ui/theme-tools": "npm:^2.1.2" @@ -20393,7 +20378,7 @@ __metadata: version: 0.0.0-use.local resolution: "monorepo-subgraph-web-app@workspace:packages/cli-template-monorepo-subgraph/apps/web-app" dependencies: - "@chakra-ui/next-js": "npm:^2.2.0" + "@chakra-ui/next-js": "npm:^2.2.0" "@chakra-ui/react": "npm:^2.8.2" "@chakra-ui/theme": "npm:^3.3.1" "@chakra-ui/theme-tools": "npm:^2.1.2" @@ -20408,7 +20393,7 @@ __metadata: dotenv: "npm:^16.4.4" eslint: "npm:^8" eslint-config-next: "npm:14.1.0" - ethers: "npm:^6.11.0" + ethers: "npm:^6.11.1" framer-motion: "npm:^11.0.5" next: "npm:14.1.0" next-pwa: "npm:^5.6.0" @@ -28668,21 +28653,6 @@ __metadata: languageName: node linkType: hard -"ws@npm:8.17.1": - version: 8.17.1 - resolution: "ws@npm:8.17.1" - peerDependencies: - bufferutil: ^4.0.1 - utf-8-validate: ">=5.0.2" - peerDependenciesMeta: - bufferutil: - optional: true - utf-8-validate: - optional: true - checksum: 10/4264ae92c0b3e59c7e309001e93079b26937aab181835fb7af79f906b22cd33b6196d96556dafb4e985742dd401e99139572242e9847661fdbc96556b9e6902d - languageName: node - linkType: hard - "ws@npm:8.5.0": version: 8.5.0 resolution: "ws@npm:8.5.0" From 23df12dcc52cefd40cc58bc63101fe3c74cfddd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Mon, 12 Aug 2024 19:42:12 -0300 Subject: [PATCH 06/43] chore: update cli monorepo package.json re #836 --- .../apps/web-app/package.json | 6 +++--- .../apps/web-app/package.json | 6 +++--- yarn.lock | 12 ++++++------ 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/package.json b/packages/cli-template-monorepo-ethers/apps/web-app/package.json index c9a65fdf2..402d7dbee 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/package.json +++ b/packages/cli-template-monorepo-ethers/apps/web-app/package.json @@ -9,15 +9,15 @@ "lint": "next lint" }, "dependencies": { - "@semaphore-protocol/core": "4.0.2", - "@semaphore-protocol/data": "4.0.2", - "@semaphore-protocol/utils": "4.0.2", "@chakra-ui/next-js": "^2.2.0", "@chakra-ui/react": "^2.8.2", "@chakra-ui/theme": "^3.3.1", "@chakra-ui/theme-tools": "^2.1.2", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", + "@semaphore-protocol/core": "4.0.2", + "@semaphore-protocol/data": "4.0.2", + "@semaphore-protocol/utils": "4.0.2", "ethers": "^6.11.1", "next": "14.1.0", "next-pwa": "^5.6.0", diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json index 6c1e2810d..06c778f2a 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json @@ -9,15 +9,15 @@ "lint": "next lint" }, "dependencies": { - "@semaphore-protocol/core": "4.0.2", - "@semaphore-protocol/data": "4.0.2", - "@semaphore-protocol/utils": "4.0.2", "@chakra-ui/next-js": "^2.2.0", "@chakra-ui/react": "^2.8.2", "@chakra-ui/theme": "^3.3.1", "@chakra-ui/theme-tools": "^2.1.2", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", + "@semaphore-protocol/core": "4.0.2", + "@semaphore-protocol/data": "4.0.2", + "@semaphore-protocol/utils": "4.0.2", "ethers": "^6.11.1", "framer-motion": "^11.0.5", "next": "14.1.0", diff --git a/yarn.lock b/yarn.lock index 26d8046b2..0db1873a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20308,15 +20308,15 @@ __metadata: version: 0.0.0-use.local resolution: "monorepo-ethers-web-app@workspace:packages/cli-template-monorepo-ethers/apps/web-app" dependencies: - "@semaphore-protocol/core": "npm:4.0.2" - "@semaphore-protocol/data": "npm:4.0.2" - "@semaphore-protocol/utils": "npm:4.0.2" "@chakra-ui/next-js": "npm:^2.2.0" "@chakra-ui/react": "npm:^2.8.2" "@chakra-ui/theme": "npm:^3.3.1" "@chakra-ui/theme-tools": "npm:^2.1.2" "@emotion/react": "npm:^11.11.3" "@emotion/styled": "npm:^11.11.0" + "@semaphore-protocol/core": "npm:4.0.2" + "@semaphore-protocol/data": "npm:4.0.2" + "@semaphore-protocol/utils": "npm:4.0.2" "@types/node": "npm:^20" "@types/react": "npm:^18" "@types/react-dom": "npm:^18" @@ -20378,15 +20378,15 @@ __metadata: version: 0.0.0-use.local resolution: "monorepo-subgraph-web-app@workspace:packages/cli-template-monorepo-subgraph/apps/web-app" dependencies: - "@semaphore-protocol/core": "npm:4.0.2" - "@semaphore-protocol/data": "npm:4.0.2" - "@semaphore-protocol/utils": "npm:4.0.2" "@chakra-ui/next-js": "npm:^2.2.0" "@chakra-ui/react": "npm:^2.8.2" "@chakra-ui/theme": "npm:^3.3.1" "@chakra-ui/theme-tools": "npm:^2.1.2" "@emotion/react": "npm:^11.11.3" "@emotion/styled": "npm:^11.11.0" + "@semaphore-protocol/core": "npm:4.0.2" + "@semaphore-protocol/data": "npm:4.0.2" + "@semaphore-protocol/utils": "npm:4.0.2" "@types/node": "npm:^20" "@types/react": "npm:^18" "@types/react-dom": "npm:^18" From d20f5c82ece06a5ea303bbae93d7efccce9c238f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sat, 31 Aug 2024 14:36:33 -0300 Subject: [PATCH 07/43] chore(cli-template-monorepo-ethers): remove .env values --- .../cli-template-monorepo-ethers/apps/web-app/.env.production | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/.env.production b/packages/cli-template-monorepo-ethers/apps/web-app/.env.production index 2a44517a9..1bea727d0 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/.env.production +++ b/packages/cli-template-monorepo-ethers/apps/web-app/.env.production @@ -1,8 +1,8 @@ NEXT_PUBLIC_DEFAULT_NETWORK=sepolia NEXT_PUBLIC_INFURA_API_KEY=abf67af1010b4b8d877e04244f1eac3d -NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS=0x8860ffD389afF6930481b953AaC095c9F85cCAae +NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS= NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS=0x1e0d7FF1610e480fC93BdEC510811ea2Ba6d7c2f NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK=https://api.defender.openzeppelin.com/actions/20fce2ae-844b-4ec0-a6a2-90a3350a9d2c/runs/webhook/303216d1-fa7d-4fca-8c5b-7ba1ba544fc7/2T7i9xrkZA5j37hoaQLUuw NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT=https://api.gelato.digital/relays/v2/sponsored-call NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID=11155111 -NEXT_PUBLIC_GROUP_ID=1 +NEXT_PUBLIC_GROUP_ID= From 00e2403de15a85923929e24a5a14687ccf83f755 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sat, 31 Aug 2024 14:38:07 -0300 Subject: [PATCH 08/43] chore(cli-template-monorepo-subgraph): change .env values --- .../apps/web-app/.env.production | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/.env.production b/packages/cli-template-monorepo-subgraph/apps/web-app/.env.production index 2a44517a9..1bea727d0 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/.env.production +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/.env.production @@ -1,8 +1,8 @@ NEXT_PUBLIC_DEFAULT_NETWORK=sepolia NEXT_PUBLIC_INFURA_API_KEY=abf67af1010b4b8d877e04244f1eac3d -NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS=0x8860ffD389afF6930481b953AaC095c9F85cCAae +NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS= NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS=0x1e0d7FF1610e480fC93BdEC510811ea2Ba6d7c2f NEXT_PUBLIC_OPENZEPPELIN_AUTOTASK_WEBHOOK=https://api.defender.openzeppelin.com/actions/20fce2ae-844b-4ec0-a6a2-90a3350a9d2c/runs/webhook/303216d1-fa7d-4fca-8c5b-7ba1ba544fc7/2T7i9xrkZA5j37hoaQLUuw NEXT_PUBLIC_GELATO_RELAYER_ENDPOINT=https://api.gelato.digital/relays/v2/sponsored-call NEXT_PUBLIC_GELATO_RELAYER_CHAIN_ID=11155111 -NEXT_PUBLIC_GROUP_ID=1 +NEXT_PUBLIC_GROUP_ID= From bb7a20002232caef5988928f81d59cad8fc74ca0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sat, 31 Aug 2024 14:50:28 -0300 Subject: [PATCH 09/43] chore(cli-template-monorepo-ethers): update .gitignore file --- .../apps/web-app/.gitignore | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/.gitignore b/packages/cli-template-monorepo-ethers/apps/web-app/.gitignore index 8e8b00f60..55811698f 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/.gitignore +++ b/packages/cli-template-monorepo-ethers/apps/web-app/.gitignore @@ -1,11 +1,5 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -# dependencies -/node_modules -/.pnp -.pnp.js -.yarn/install-state.gz - # testing /coverage @@ -20,14 +14,6 @@ .DS_Store *.pem -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# vercel -.vercel - # typescript *.tsbuildinfo next-env.d.ts From cb0d19dfbc645281f4f5657501e665e05fa2413d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sat, 31 Aug 2024 14:52:19 -0300 Subject: [PATCH 10/43] chore(cli-template-monorepo-subgraph): update .gitignore file --- .../apps/web-app/.gitignore | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/.gitignore b/packages/cli-template-monorepo-subgraph/apps/web-app/.gitignore index 8e8b00f60..55811698f 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/.gitignore +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/.gitignore @@ -1,11 +1,5 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -# dependencies -/node_modules -/.pnp -.pnp.js -.yarn/install-state.gz - # testing /coverage @@ -20,14 +14,6 @@ .DS_Store *.pem -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# vercel -.vercel - # typescript *.tsbuildinfo next-env.d.ts From 668db3fa612835dc921d09f6d2e26ba694b7bb10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sun, 8 Sep 2024 12:46:57 -0300 Subject: [PATCH 11/43] style(cli-template-monorepo-ethers): update globals.css --- .../apps/web-app/src/app/globals.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css index 505ae8579..9c278aec8 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css @@ -72,14 +72,14 @@ h2 { } h3 { - font-size: 1.125rem; + font-size: 1.5rem; font-weight: 500; } .divider { height: 1px; background: var(--slate500); - margin: 2rem 0; + margin: 0.5rem 0; } .stepper { @@ -93,7 +93,7 @@ a { } .button { - background-color: var(--blue800); + background-color: var(--blue600); width: 100%; padding: 0.8rem 1rem; border: 1px; @@ -203,4 +203,4 @@ a { to { transform: rotate(360deg); } -} +} \ No newline at end of file From fa138795bee28957072c3d5739b94f7c38921d6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sun, 8 Sep 2024 12:54:29 -0300 Subject: [PATCH 12/43] refactor(cli-template-monorepo-ethers): replace chakra with plain html+css on cli-ethers page.tsx --- .../apps/web-app/src/app/page.tsx | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx index 02e026fce..f354bc99a 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx @@ -1,6 +1,5 @@ "use client" -import { Box, Button, Divider, Heading, HStack, Link, Text } from "@chakra-ui/react" import { Identity } from "@semaphore-protocol/core" import { useRouter } from "next/navigation" import { useCallback, useEffect, useState } from "react" @@ -38,55 +37,56 @@ export default function IdentitiesPage() { return ( <> - - Identities - +

Identities

- +

The identity of a user in the Semaphore protocol. A{" "} - + Semaphore identity - {" "} + {" "} consists of an{" "} - EdDSA - {" "} + {" "} public/private key pair and a commitment, used as the public identifier of the identity. - +

- +
- - - Identity - - +
+

Identity

+
{_identity && ( - - +
+

Private Key (base64):
{_identity.export()} - - +

+

Public Key:
[{_identity.publicKey[0].toString()},{" "} {_identity.publicKey[1].toString()}] - - +

+

Commitment:
{_identity.commitment.toString()} - - +

+
)} - - - + +
- +
router.push("/group"))} /> From 5b752cc69b91f966f2894d7c7fed268a38829d64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sun, 8 Sep 2024 22:48:56 -0300 Subject: [PATCH 13/43] style(cli-template-monorepo-ethers): import globals css in layout --- .../cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx index 1ea9068df..14112c488 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx @@ -3,6 +3,7 @@ import type { Metadata } from "next" import Providers from "./providers" import { LogContextProvider } from "@/context/LogContext" import { SemaphoreContextProvider } from "@/context/SemaphoreContext" +import "./globals.css" export const metadata: Metadata = { title: "Semaphore Demo", From 049e58461d3766f79eb0816519e5d6c0528e66e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sun, 8 Sep 2024 23:37:59 -0300 Subject: [PATCH 14/43] style(cli-template-monorepo-ethers): remove chakra ui elements --- .../web-app/src/icons/IconAddCircleFill.tsx | 19 ----- .../apps/web-app/src/icons/IconCheck.tsx | 19 ----- .../web-app/src/icons/IconChevronLeft.tsx | 19 ----- .../web-app/src/icons/IconChevronRight.tsx | 19 ----- .../web-app/src/icons/IconRefreshLine.tsx | 19 ----- .../apps/web-app/src/styles/colors.ts | 32 -------- .../web-app/src/styles/components/Button.ts | 77 ------------------- .../web-app/src/styles/components/Link.ts | 9 --- .../web-app/src/styles/components/Tooltip.ts | 13 ---- .../web-app/src/styles/components/index.ts | 9 --- .../apps/web-app/src/styles/index.ts | 16 ---- .../apps/web-app/src/styles/styles.ts | 25 ------ 12 files changed, 276 deletions(-) delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconAddCircleFill.tsx delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconCheck.tsx delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronLeft.tsx delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronRight.tsx delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconRefreshLine.tsx delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/colors.ts delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Button.ts delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Link.ts delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Tooltip.ts delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/index.ts delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/index.ts delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/styles/styles.ts diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconAddCircleFill.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconAddCircleFill.tsx deleted file mode 100644 index 1f40a342e..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconAddCircleFill.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconAddCircleFillProps = { - width?: number - height?: number - color?: string -} - -export default function IconAddCircleFill({ width, height, color }: IconAddCircleFillProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconCheck.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconCheck.tsx deleted file mode 100644 index 2bb55d4c7..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconCheck.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconCheckProps = { - width?: number - height?: number - color?: string -} - -export default function IconCheck({ width, height, color }: IconCheckProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronLeft.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronLeft.tsx deleted file mode 100644 index d92ded273..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronLeft.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconChevronLeftProps = { - width?: number - height?: number - color?: string -} - -export default function IconChevronLeft({ width, height, color }: IconChevronLeftProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronRight.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronRight.tsx deleted file mode 100644 index df604b5ba..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconChevronRight.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconChevronRightProps = { - width?: number - height?: number - color?: string -} - -export default function IconChevronRight({ width, height, color }: IconChevronRightProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconRefreshLine.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconRefreshLine.tsx deleted file mode 100644 index 8363091d5..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/icons/IconRefreshLine.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconRefreshLineProps = { - width?: number - height?: number - color?: string -} - -export default function IconRefreshLine({ width, height, color }: IconRefreshLineProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/colors.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/colors.ts deleted file mode 100644 index 5e79392cc..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/colors.ts +++ /dev/null @@ -1,32 +0,0 @@ -const colors = { - darkBlue: "#0E101B", - darkBlueBg: "#00020D", - primary: { - 50: "#f0f4fe", - 100: "#dde6fc", - 200: "#c3d4fa", - 300: "#9abaf6", - 400: "#6a95f0", - 500: "#4771ea", - 600: "#3555df", - 700: "#2940cc", - 800: "#2735a6", - 900: "#253183", - 950: "#1b2050" - }, - text: { - 50: "#f7f7f8", - 100: "#eeeef0", - 200: "#d9d9de", - 300: "#b8b9c1", - 400: "#92939e", - 500: "#747583", - 600: "#5e5f6b", - 700: "#4d4e57", - 800: "#42424a", - 900: "#3a3a40", - 950: "#26262b" - } -} - -export default colors diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Button.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Button.ts deleted file mode 100644 index 13df87d6b..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Button.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { StyleFunctionProps, SystemStyleObject } from "@chakra-ui/theme-tools" -import { font } from "../styles" - -const Button = { - baseStyle: { - _focus: { - boxShadow: "none" - }, - borderRadius: "100px", - fontFamily: font.style.fontFamily, - fontWeight: "400", - paddingLeft: "18px !important", - paddingRight: "18px !important" - }, - defaultProps: { - colorScheme: "white" - }, - variants: { - solid: (props: StyleFunctionProps): SystemStyleObject => { - const { colorScheme: c } = props - - if (c === "primary") { - const bgGradient = "linear(to-r, primary.500, primary.800)" - const color = "white" - - return { - bgGradient, - color, - transitionDuration: "200ms", - transitionTimingFunction: "linear", - _hover: { - bg: `${c}.800`, - _disabled: { - bgGradient - } - }, - _active: { bg: `${c}.800` } - } - } - - const bg = c - - return { - bg, - color: `darkBlueBg`, - transitionDuration: "200ms", - transitionTimingFunction: "linear", - _hover: { - bg: `primary.200`, - _disabled: { - bg - } - }, - _active: { bg: `primary.200` } - } - }, - outline: (props: StyleFunctionProps): SystemStyleObject => { - const { colorScheme: c } = props - - return { - color: c, - transitionDuration: "200ms", - transitionTimingFunction: "linear", - borderWidth: "1.2px", - borderColor: c, - _hover: { - color: c, - borderColor: "primary.200", - _disabled: { - bg: c - } - } - } - } - } -} -export default Button diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Link.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Link.ts deleted file mode 100644 index e4a03d42b..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Link.ts +++ /dev/null @@ -1,9 +0,0 @@ -const Link = { - baseStyle: { - _focus: { - boxShadow: "none" - } - } -} - -export default Link diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Tooltip.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Tooltip.ts deleted file mode 100644 index 6df3a97d7..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/Tooltip.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { SystemStyleObject } from "@chakra-ui/react" - -const Tooltip = { - baseStyle: (): SystemStyleObject => ({ - borderRadius: "4px", - py: "10px", - px: "15px", - fontWeight: "bold", - maxW: "350px" - }) -} - -export default Tooltip diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/index.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/index.ts deleted file mode 100644 index c4bd4fbdd..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/components/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import Button from "./Button" -import Link from "./Link" -import Tooltip from "./Tooltip" - -export default { - Link, - Button, - Tooltip -} diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/index.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/index.ts deleted file mode 100644 index ffbe97221..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { extendTheme } from "@chakra-ui/react" -import colors from "./colors" -import components from "./components" -import styles, { font } from "./styles" - -const config = { - fonts: { - heading: font.style.fontFamily, - body: "DM Sans, sans-serif" - }, - colors, - styles, - components -} - -export default extendTheme(config) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/styles.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/styles.ts deleted file mode 100644 index f2d2dfa43..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/styles/styles.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { SystemStyleObject } from "@chakra-ui/react" -import { Styles } from "@chakra-ui/theme-tools" -import { Outfit } from "next/font/google" - -export const font = Outfit({ subsets: ["latin"] }) - -const styles: Styles = { - global: (): SystemStyleObject => ({ - body: { - bg: "darkBlueBg", - color: "text.100", - minHeight: "100vh", - display: "flex", - flexDirection: "column" - }, - "h1, h2, h3, h4": { - fontWeight: "500 !important" - }, - a: { - color: "primary.400 !important" - } - }) -} - -export default styles From 9d2a4f246e24e00010b624d0e1a508eced391a67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sun, 8 Sep 2024 23:40:26 -0300 Subject: [PATCH 15/43] refactor(cli-template-monorepo-ethers): remove chakra ui from layout --- .../apps/web-app/src/app/layout.tsx | 18 +++++++++--------- .../apps/web-app/src/app/providers.tsx | 13 ------------- 2 files changed, 9 insertions(+), 22 deletions(-) delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/app/providers.tsx diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx index 14112c488..ef445e8dc 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx @@ -1,10 +1,12 @@ import PageContainer from "@/components/PageContainer" import type { Metadata } from "next" -import Providers from "./providers" import { LogContextProvider } from "@/context/LogContext" import { SemaphoreContextProvider } from "@/context/SemaphoreContext" import "./globals.css" +import { Inter } from "next/font/google" +const inter = Inter({ subsets: ["latin"] }) + export const metadata: Metadata = { title: "Semaphore Demo", description: "A zero-knowledge protocol for anonymous signaling on Ethereum.", @@ -32,14 +34,12 @@ export default function RootLayout({ }>) { return ( - - - - - {children} - - - + + + + {children} + + ) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/providers.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/providers.tsx deleted file mode 100644 index 910643fc2..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/providers.tsx +++ /dev/null @@ -1,13 +0,0 @@ -"use client" - -import { CacheProvider } from "@chakra-ui/next-js" -import { ChakraProvider } from "@chakra-ui/react" -import theme from "../styles/index" - -export default function Providers({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ) -} From feae24c0d4ac0dbdebcc8cf13bdc8594c9e784c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Sun, 8 Sep 2024 23:41:21 -0300 Subject: [PATCH 16/43] refactor(cli-template-monorepo-ethers): remove chakra ui from PageContainer, Stepper --- .../web-app/src/components/PageContainer.tsx | 87 ++++++++++--------- .../apps/web-app/src/components/Stepper.tsx | 62 ++++++------- 2 files changed, 74 insertions(+), 75 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx index 686123c67..5909c65c5 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx @@ -2,9 +2,8 @@ import { useLogContext } from "@/context/LogContext" import shortenString from "@/utils/shortenString" -import { Container, HStack, Icon, IconButton, Link, Spinner, Stack, Text } from "@chakra-ui/react" +import Link from "next/link" import { usePathname } from "next/navigation" -import { FaGithub } from "react-icons/fa" export default function PageContainer({ children @@ -27,46 +26,54 @@ export default function PageContainer({ return ( <> - - - {shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])} - - - } - /> - - + - - - {children} - - +
{children}
- - {log.endsWith("...") && } - {log || `Current step: ${pathname}`} - +
+ +
+ {log.endsWith("...")} +

{log || `Current step: ${pathname}`}

+
) } diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx index 2a99262e2..69428e941 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx @@ -1,9 +1,5 @@ "use client" -import { Button, HStack, Text } from "@chakra-ui/react" -import IconChevronLeft from "../icons/IconChevronLeft" -import IconChevronRight from "../icons/IconChevronRight" - export type StepperProps = { step: number onPrevClick?: () => void @@ -12,38 +8,34 @@ export type StepperProps = { export default function Stepper({ step, onPrevClick, onNextClick }: StepperProps) { return ( - - +
+ {onPrevClick !== undefined ? ( + + ) : ( + + )} - - {step.toString()}/3 - +

{step.toString()}/3

- - + {onNextClick !== undefined ? ( + + ) : ( + + )} +
) } From 1b377f7ccbfca3919b2c0eb428adf3aadf80a61e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Thu, 19 Sep 2024 21:36:56 +0200 Subject: [PATCH 17/43] style(cli-template-monorepo-ethers): add font link --- .../apps/web-app/src/app/layout.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx index ef445e8dc..138bb727a 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/layout.tsx @@ -34,6 +34,14 @@ export default function RootLayout({ }>) { return ( + + + + + From 6a323fd06c1afc1979ae9a4d99f4a39849d8e4c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Thu, 19 Sep 2024 21:38:49 +0200 Subject: [PATCH 18/43] chore(cli-template-monorepo-ethers): remove unused groups page --- .../apps/web-app/src/app/groups/page.tsx | 142 ------------------ 1 file changed, 142 deletions(-) delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/app/groups/page.tsx diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/groups/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/groups/page.tsx deleted file mode 100644 index 8e72752ef..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/groups/page.tsx +++ /dev/null @@ -1,142 +0,0 @@ -"use client" - -import { Identity } from "@semaphore-protocol/core" -import { useRouter } from "next/navigation" -import { useCallback, useContext, useEffect, useState } from "react" -import Feedback from "../../../contract-artifacts/Feedback.json" -import Stepper from "@/components/Stepper" -import LogsContext from "@/context/LogsContext" -import SemaphoreContext from "@/context/SemaphoreContext" - -export default function GroupsPage() { - const router = useRouter() - const { setLogs } = useContext(LogsContext) - const { _users, refreshUsers, addUser } = useContext(SemaphoreContext) - const [_loading, setLoading] = useState(false) - const [_identity, setIdentity] = useState() - - useEffect(() => { - const privateKey = localStorage.getItem("identity") - - if (!privateKey) { - router.push("/") - return - } - - setIdentity(new Identity(privateKey)) - }, [router]) - - useEffect(() => { - if (_users.length > 0) { - setLogs(`${_users.length} user${_users.length > 1 ? "s" : ""} retrieved from the group 🤙🏽`) - } - }, [_users, setLogs]) - - const joinGroup = useCallback(async () => { - if (!_identity) { - return - } - - setLoading(true) - setLogs(`Joining the Feedback group...`) - - let response: any - - if (process.env.OPENZEPPELIN_AUTOTASK_WEBHOOK) { - response = await fetch(process.env.OPENZEPPELIN_AUTOTASK_WEBHOOK, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - abi: Feedback.abi, - address: process.env.FEEDBACK_CONTRACT_ADDRESS, - functionName: "joinGroup", - functionParameters: [_identity.commitment.toString()] - }) - }) - } else { - response = await fetch("api/join", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - identityCommitment: _identity.commitment.toString() - }) - }) - } - - if (response.status === 200) { - addUser(_identity.commitment.toString()) - - setLogs(`You have joined the Feedback group event 🎉 Share your feedback anonymously!`) - } else { - setLogs("Some error occurred, please try again!") - } - - setLoading(false) - }, [_identity, addUser, setLogs]) - - const userHasJoined = useCallback((identity: Identity) => _users.includes(identity.commitment.toString()), [_users]) - - return ( - <> -

Groups

- -

- - Semaphore groups - {" "} - are{" "} - - Lean incremental Merkle trees - {" "} - in which each leaf contains an identity commitment for a user. Groups can be abstracted to represent - events, polls, or organizations. -

- -
- -
-

Group users ({_users.length})

- -
- -
- -
- - {_users.length > 0 && ( -
- {_users.map((user, i) => ( -
-

{user.toString()}

-
- ))} -
- )} - -
- - router.push("/")} - onNextClick={_identity && userHasJoined(_identity) ? () => router.push("/proofs") : undefined} - /> - - ) -} From 6beb26d11fa2fa7dafbbaffd2a0c9de237e5ca2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Thu, 19 Sep 2024 21:39:32 +0200 Subject: [PATCH 19/43] style(cli-template-monorepo-ethers): remove chakra ui from group page --- .../apps/web-app/src/app/group/page.tsx | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx index 80468a5ad..1e9fa2131 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx @@ -2,19 +2,18 @@ import Stepper from "@/components/Stepper" import { useLogContext } from "@/context/LogContext" import { useSemaphoreContext } from "@/context/SemaphoreContext" -import IconRefreshLine from "@/icons/IconRefreshLine" -import { Box, Button, Divider, Heading, HStack, Link, Text, useBoolean, VStack } from "@chakra-ui/react" import { useRouter } from "next/navigation" import { useCallback, useEffect, useMemo } from "react" import Feedback from "../../../contract-artifacts/Feedback.json" import { ethers } from "ethers" import useSemaphoreIdentity from "@/hooks/useSemaphoreIdentity" +import { useState } from "react" export default function GroupsPage() { const router = useRouter() const { setLog } = useLogContext() const { _users, refreshUsers, addUser } = useSemaphoreContext() - const [_loading, setLoading] = useBoolean() + const [_loading, setLoading] = useState(false) const { _identity } = useSemaphoreIdentity() useEffect(() => { @@ -30,7 +29,7 @@ export default function GroupsPage() { return } - setLoading.on() + setLoading(true) setLog(`Joining the Feedback group...`) let joinedGroup: boolean = false @@ -93,7 +92,7 @@ export default function GroupsPage() { setLog("Some error occurred, please try again!") } - setLoading.off() + setLoading(false) }, [_identity, addUser, setLoading, setLog]) const userHasJoined = useMemo( @@ -103,63 +102,64 @@ export default function GroupsPage() { return ( <> - - Groups - +

Groups

- - +

+ Semaphore groups - {" "} + {" "} are{" "} - + Lean incremental Merkle trees - {" "} + {" "} in which each leaf contains an identity commitment for a user. Groups can be abstracted to represent events, polls, or organizations. - +

- +
- - - Group users ({_users.length}) - - - + +
{_users.length > 0 && ( - +
{users.map((user, i) => ( - - +
+

{_identity?.commitment.toString() === user ? {user} : user} - - +

+
))} - +
)} - - - + Join group + {_loading &&
} + +
- +
- router.push("/")} - onNextClick={userHasJoined ? () => router.push("/proofs") : undefined} - /> + router.push("/")} onNextClick={() => router.push("/proofs")} /> ) } From eac8263f26699c42fa19d6ecbeeae4c3668fe4cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Thu, 19 Sep 2024 21:40:44 +0200 Subject: [PATCH 20/43] style(cli-template-monorepo-ethers): remove chakra ui from proof page --- .../apps/web-app/src/app/proofs/page.tsx | 68 +++++++++---------- 1 file changed, 31 insertions(+), 37 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx index 88fffa390..df4cd5895 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx @@ -3,7 +3,6 @@ import Stepper from "@/components/Stepper" import { useLogContext } from "@/context/LogContext" import { useSemaphoreContext } from "@/context/SemaphoreContext" -import IconRefreshLine from "@/icons/IconRefreshLine" import { Box, Button, Divider, Heading, HStack, Link, Text, useBoolean, VStack } from "@chakra-ui/react" import { generateProof, Group } from "@semaphore-protocol/core" import { encodeBytes32String, ethers } from "ethers" @@ -126,53 +125,48 @@ export default function ProofsPage() { return ( <> - - Proofs - +

Proofs

- +

Semaphore members can anonymously{" "} - + prove - {" "} + {" "} that they are part of a group and send their anonymous messages. Messages could be votes, leaks, - reviews, or feedback. - - - - - - - Feedback ({_feedback.length}) - - - + +

{_feedback.length > 0 && ( - - {feedback.map((f, i) => ( - - {f} - +
+ {_feedback.map((f, i) => ( +
+

{f}

+
))} - +
)} - - - +
+ +
- +
router.push("/group")} /> From b631283dd38b42d7f393d6a91ae07b368ee56b6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Thu, 19 Sep 2024 21:41:31 +0200 Subject: [PATCH 21/43] style(cli-template-monorepo-ethers): update css and add class names --- .../apps/web-app/src/app/globals.css | 138 +++++++++++++----- .../apps/web-app/src/app/page.tsx | 2 +- .../web-app/src/components/PageContainer.tsx | 4 +- .../apps/web-app/src/components/Stepper.tsx | 10 +- 4 files changed, 113 insertions(+), 41 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css index 9c278aec8..bbba9d464 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css @@ -2,15 +2,19 @@ --slate100: #f1f5f9; --slate200: #e2e8f0; --slate300: #cbd5e1; - --slate400: #94a3b8; + --slate400: #718096; --slate500: #64748b; --slate700: #334155; - --blue200: #bfdbfe; - --blue500: #3b82f6; - --blue600: #2563eb; - --blue700: #1d4ed8; - --blue800: #1e40af; - --blue900: #1e3a8a; + --blue100: #dde6fc; + --blue200: #c3d4fa; + --blue300: #9abaf6; + --blue400: #6a95f0; + --blue500: #4771ea; + --blue600: #3555df; + --blue700: #2940cc; + --blue800: #2735a6; + --blue900: #253183; + --blue950: #1b2050; --darkBlueBg: #00020d; } @@ -18,6 +22,7 @@ box-sizing: border-box; padding: 0; margin: 0; + font-family:"Outfit", sans-serif;; } html, @@ -33,13 +38,26 @@ body { p { line-height: 1.5rem; + font-weight: 300; + overflow-wrap: break-word; + font-size: 1rem; +} + +b { + font-weight: 600; +} + +.key-wrapper { + padding-bottom: 1.5rem; + padding-left: 0.5rem; } .container { display: flex; flex-direction: column; height: 100%; - max-width: 32rem; + max-width: 40vw; + min-width: 35rem; margin: auto; padding: 1rem; @@ -69,17 +87,23 @@ h2 { font-size: 2.25rem; font-weight: 500; margin-bottom: 1rem; + line-height: 1.2; } h3 { - font-size: 1.5rem; + font-size: 1.15rem; font-weight: 500; + margin-bottom: 1.5rem; } .divider { - height: 1px; - background: var(--slate500); - margin: 0.5rem 0; + opacity: 0.6; + border: 0; + border-style: solid; + border-bottom-width: 1px; + width: 100%; + border-color: var(--slate400); + margin: 2rem 0; } .stepper { @@ -89,31 +113,41 @@ h3 { } a { - color: var(--blue500); + color: var(--blue400); + text-decoration: none; +} + +a:hover { + text-decoration: underline; + text-decoration-color: var(--blue400); } .button { - background-color: var(--blue600); - width: 100%; - padding: 0.8rem 1rem; - border: 1px; border-radius: 100px; - cursor: pointer; - color: var(--slate100); - font-size: 1.125rem; - font-weight: 500; - transition: all 200ms linear; - margin-top: 1rem; - margin-bottom: 1.5rem; - opacity: 0.9; - display: flex; - justify-content: center; - height: 3rem; - align-items: center; + font-weight: 400; + transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; + transition-duration: 200ms; + padding-left: 18px!important; + padding-right: 18px!important; + height: 2.5rem; + min-width: 2.5rem; + font-size: 1rem; + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; + -webkit-padding-end: 1rem; + padding-inline-end: 1rem; + background: var(--blue500); + color: white; + background-image: linear-gradient(to right, var(--blue500), var(--blue800)); + transition-timing-function: linear; + width: 100%; + border: none; } .button:hover { - background-color: var(--blue900); + background-color: var(--blue800); + background-image: none; + cursor: pointer; } .button:disabled { @@ -123,14 +157,19 @@ a { .button:disabled:hover { background-color: var(--blue800); + background-image: none; } .button-stepper { cursor: pointer; - color: var(--blue600); + color: var(--blue500); font-size: 1.1rem; border: none; background: none; + min-width: 3rem; + margin: 0 1rem; + display: flex; + justify-content: center; } .button-link { @@ -141,19 +180,39 @@ a { background: none; } +.icon-next { + display: inline-flex; + align-self: flex-start; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; +} + +.icon-next svg { + width: 1em; + height: 1em; + display: inline-block; + line-height: 1em; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + color: currentColor; + vertical-align:super +} + .box { - padding: 0.8rem; - border-style: solid; - border-width: 1px; - border-color: var(--slate500); - border-radius: 4px; + padding: 0.7rem 0; + border-bottom: 1px solid white; } .box-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - margin: 0.5rem; + margin: 0.5rem 0; + font-size: 1rem; } .header { @@ -203,4 +262,9 @@ a { to { transform: rotate(360deg); } +} + +.feedback-wrapper { + max-height: 50vh; + overflow-y: scroll; } \ No newline at end of file diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx index f354bc99a..7c4fa3c84 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx @@ -66,7 +66,7 @@ export default function IdentitiesPage() {
{_identity && ( -
+

Private Key (base64):
{_identity.export()}

diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx index 5909c65c5..29d4cd766 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx @@ -28,9 +28,9 @@ export default function PageContainer({ <>
- + {/* Feedback - + */}
) : ( - + )}

{step.toString()}/3

@@ -32,6 +32,14 @@ export default function Stepper({ step, onPrevClick, onNextClick }: StepperProps type="button" > Next + + + + + ) : ( From 686bf9e002569a1fdeb2422159c782e8b04cff7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Tue, 24 Sep 2024 16:41:22 +0200 Subject: [PATCH 22/43] style(cli-template-monorepo-ethers): add css declarations --- .../apps/web-app/src/app/globals.css | 138 +++++++++++++----- 1 file changed, 99 insertions(+), 39 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css index bbba9d464..8d7ea0ee2 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css @@ -1,10 +1,4 @@ :root { - --slate100: #f1f5f9; - --slate200: #e2e8f0; - --slate300: #cbd5e1; - --slate400: #718096; - --slate500: #64748b; - --slate700: #334155; --blue100: #dde6fc; --blue200: #c3d4fa; --blue300: #9abaf6; @@ -16,6 +10,17 @@ --blue900: #253183; --blue950: #1b2050; --darkBlueBg: #00020d; + --slate50: #f7f7f8; + --slate100: #eeeef0; + --slate200: #d9d9de; + --slate300: #b8b9c1; + --slate400: #92939e; + --slate500: #747583; + --slate600: #5e5f6b; + --slate700: #4d4e57; + --slate800: #42424a; + --slate900: #3a3a40; + --slate950: #26262b; } * { @@ -63,6 +68,7 @@ b { padding: 1rem; min-height: calc(100vh - 3.5rem); + padding-bottom: 5rem; } .container #body { @@ -75,14 +81,6 @@ b { margin-bottom: 1rem; } -ol { - padding: 1rem; -} - -li { - margin-top: 1rem; -} - h2 { font-size: 2.25rem; font-weight: 500; @@ -93,7 +91,6 @@ h2 { h3 { font-size: 1.15rem; font-weight: 500; - margin-bottom: 1.5rem; } .divider { @@ -166,31 +163,74 @@ a:hover { font-size: 1.1rem; border: none; background: none; - min-width: 3rem; + width: 4rem; margin: 0 1rem; display: flex; justify-content: center; } -.button-link { +.button-stepper:hover { + text-decoration: underline; +} + +.refresh-wrapper { + color: var(--slate400); + display: flex; + align-items: center; +} + +.refresh-wrapper:hover { + text-decoration: underline; +} + +.refresh-button { cursor: pointer; color: var(--slate300); font-size: 1.1rem; border: none; background: none; + padding-right: 1rem; + display: flex; + align-items: center; +} + +.refresh-button:hover { + text-decoration: underline; +} + +.refresh-span { + width: 1.5em; + height: 1em; + display: inline-block; + line-height: 1em; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + color: currentColor; + vertical-align: middle; } -.icon-next { +.refresh-icon { + margin-inline-end: 0.5rem +} + +.stepper-icon { display: inline-flex; - align-self: flex-start; + align-self: center; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; - -webkit-margin-start: 0.5rem; +} + +.left-pad { + margin-inline-end: 0.5rem; +} + +.right-pad { margin-inline-start: 0.5rem; } -.icon-next svg { +.stepper-icon svg { width: 1em; height: 1em; display: inline-block; @@ -203,15 +243,15 @@ a:hover { } .box { - padding: 0.7rem 0; border-bottom: 1px solid white; + padding: 0.8rem 0; + max-height: 50px; } .box-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - margin: 0.5rem 0; font-size: 1rem; } @@ -230,6 +270,7 @@ a:hover { .header-right { display: flex; gap: 1.5rem; + align-items: center; } .footer { @@ -247,24 +288,43 @@ a:hover { background: var(--slate500); } -.loader { - width: 25px; - height: 25px; - border-radius: 50%; - border-top: 2px solid var(--slate100); - border-right: 2px solid transparent; - animation: spin 1s linear infinite; - z-index: 20; - margin-left: 1rem; +.users-wrapper,.feedback-wrapper { + max-height: 300px; + overflow-y: scroll; } -@keyframes spin { - to { - transform: rotate(360deg); - } +.keys-header { + margin-bottom: 1.5rem; } -.feedback-wrapper { - max-height: 50vh; - overflow-y: scroll; +.users-header { + font-weight: 700; + font-size: 1.125rem; + font-family: 'DM Sans', sans-serif; +} + +.join-group-button, .send-feedback-button { + margin-top: 1.5rem; +} + +.github-icon { + width: 1.5rem; + height: 1.5rem; + display: inline-block; + line-height: 1em; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + color: currentColor; +} + +.github-button { + cursor: pointer; + color: var(--slate100); + font-size: 1.1rem; + border: none; + background: none; + padding-right: 1rem; + display: flex; + align-items: center; } \ No newline at end of file From c8e84e44e734c5d844cee83245e63f3e0d115402 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Tue, 24 Sep 2024 16:46:36 +0200 Subject: [PATCH 23/43] style(cli-template-monorepo-ethers): add github icon --- .../web-app/src/components/PageContainer.tsx | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx index 29d4cd766..5ff2e108e 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx @@ -43,26 +43,22 @@ export default function PageContainer({ >
{shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])}
 - +
From 46a441780a21edb8eb8d47f1325a2b40bdeebe4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Tue, 24 Sep 2024 16:47:51 +0200 Subject: [PATCH 24/43] style(cli-template-monorepo-ethers): add left arrow on stepper --- .../apps/web-app/src/components/Stepper.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx index cd5240e4f..ab10ba036 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/Stepper.tsx @@ -16,6 +16,14 @@ export default function Stepper({ step, onPrevClick, onNextClick }: StepperProps onClick={onPrevClick || undefined} type="button" > + + + + + Prev ) : ( @@ -32,7 +40,7 @@ export default function Stepper({ step, onPrevClick, onNextClick }: StepperProps type="button" > Next - + ) : ( - + )}
) From 98dae9e4e64102c5a1eeea569ef48158d589105f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Tue, 24 Sep 2024 16:48:38 +0200 Subject: [PATCH 25/43] style(cli-template-monorepo-ethers): remove chakra from proofs page --- .../apps/web-app/src/app/proofs/page.tsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx index df4cd5895..c4a670419 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx @@ -3,11 +3,10 @@ import Stepper from "@/components/Stepper" import { useLogContext } from "@/context/LogContext" import { useSemaphoreContext } from "@/context/SemaphoreContext" -import { Box, Button, Divider, Heading, HStack, Link, Text, useBoolean, VStack } from "@chakra-ui/react" import { generateProof, Group } from "@semaphore-protocol/core" import { encodeBytes32String, ethers } from "ethers" import { useRouter } from "next/navigation" -import { useCallback, useEffect, useMemo } from "react" +import { useCallback, useEffect, useMemo, useState } from "react" import Feedback from "../../../contract-artifacts/Feedback.json" import useSemaphoreIdentity from "@/hooks/useSemaphoreIdentity" @@ -15,7 +14,7 @@ export default function ProofsPage() { const router = useRouter() const { setLog } = useLogContext() const { _users, _feedback, refreshFeedback, addFeedback } = useSemaphoreContext() - const [_loading, setLoading] = useBoolean() + const [_loading, setLoading] = useState(false) const { _identity } = useSemaphoreIdentity() useEffect(() => { @@ -34,7 +33,7 @@ export default function ProofsPage() { const feedback = prompt("Please enter your feedback:") if (feedback && _users) { - setLoading.on() + setLoading(true) setLog(`Posting your anonymous feedback...`) @@ -118,7 +117,7 @@ export default function ProofsPage() { setLog("Some error occurred, please try again!") } finally { - setLoading.off() + setLoading(false) } } }, [_identity, _users, addFeedback, setLoading, setLog]) @@ -144,7 +143,15 @@ export default function ProofsPage() {

Feedback ({_feedback.length})

-
@@ -159,7 +166,7 @@ export default function ProofsPage() {
)} -
+
{_users.length > 0 && ( -
+
{users.map((user, i) => (

@@ -145,7 +153,7 @@ export default function GroupsPage() {

)} -
+
- router.push("/")} onNextClick={() => router.push("/proofs")} /> + router.push("/")} + onNextClick={userHasJoined ? () => router.push("/proofs") : undefined} + /> ) } diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx index 7c4fa3c84..ee800be1f 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/page.tsx @@ -61,7 +61,7 @@ export default function IdentitiesPage() {
-
+

Identity

From 23d7a3f105f1467390f0af9a1f80cc284bb2a79e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Tue, 24 Sep 2024 16:51:53 +0200 Subject: [PATCH 27/43] style(cli-template-monorepo-ethers): remove chakra libraries from package.json --- .../cli-template-monorepo-ethers/apps/web-app/package.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/package.json b/packages/cli-template-monorepo-ethers/apps/web-app/package.json index 5d840244f..422af0649 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/package.json +++ b/packages/cli-template-monorepo-ethers/apps/web-app/package.json @@ -9,10 +9,6 @@ "lint": "next lint" }, "dependencies": { - "@chakra-ui/next-js": "^2.2.0", - "@chakra-ui/react": "^2.8.2", - "@chakra-ui/theme": "^3.3.1", - "@chakra-ui/theme-tools": "^2.1.2", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@semaphore-protocol/core": "4.0.3", From f82e88454a622187d4d4169d8aca7c3861aac9ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Tue, 24 Sep 2024 16:56:18 +0200 Subject: [PATCH 28/43] refactor(cli-template-monorepo-ethers): update yarn.lock file after package.json modified --- yarn.lock | 4 ---- 1 file changed, 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index 76815f82c..cb7f111b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20308,10 +20308,6 @@ __metadata: version: 0.0.0-use.local resolution: "monorepo-ethers-web-app@workspace:packages/cli-template-monorepo-ethers/apps/web-app" dependencies: - "@chakra-ui/next-js": "npm:^2.2.0" - "@chakra-ui/react": "npm:^2.8.2" - "@chakra-ui/theme": "npm:^3.3.1" - "@chakra-ui/theme-tools": "npm:^2.1.2" "@emotion/react": "npm:^11.11.3" "@emotion/styled": "npm:^11.11.0" "@semaphore-protocol/core": "npm:4.0.3" From 50f8795cc442ab436c1306cfe365314ef5455080 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Tue, 24 Sep 2024 17:00:00 +0200 Subject: [PATCH 29/43] style(cli-template-monorepo-ethers): fix deepscan issues --- .../apps/web-app/src/app/proofs/page.tsx | 4 ++-- .../apps/web-app/src/components/PageContainer.tsx | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx index c4a670419..0ee9a92fd 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/proofs/page.tsx @@ -156,9 +156,9 @@ export default function ProofsPage() {
- {_feedback.length > 0 && ( + {feedback.length > 0 && (
- {_feedback.map((f, i) => ( + {feedback.map((f, i) => (

{f}

diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx index 5ff2e108e..f89dfabba 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx @@ -2,7 +2,6 @@ import { useLogContext } from "@/context/LogContext" import shortenString from "@/utils/shortenString" -import Link from "next/link" import { usePathname } from "next/navigation" export default function PageContainer({ From 527840e0efca3982a6582ccf7045a60798392cb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Mon, 7 Oct 2024 22:57:46 -0300 Subject: [PATCH 30/43] chore(cli-template-monorepo-ethers): remove unused packages and update dotenv version --- .../cli-template-monorepo-ethers/apps/web-app/package.json | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/package.json b/packages/cli-template-monorepo-ethers/apps/web-app/package.json index 422af0649..edb000242 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/package.json +++ b/packages/cli-template-monorepo-ethers/apps/web-app/package.json @@ -9,8 +9,6 @@ "lint": "next lint" }, "dependencies": { - "@emotion/react": "^11.11.3", - "@emotion/styled": "^11.11.0", "@semaphore-protocol/core": "4.0.3", "@semaphore-protocol/data": "4.0.3", "@semaphore-protocol/utils": "4.0.3", @@ -18,14 +16,13 @@ "next": "14.1.0", "next-pwa": "^5.6.0", "react": "^18", - "react-dom": "^18", - "react-icons": "^4.8.0" + "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", - "dotenv": "^16.4.4", + "dotenv": "^16.4.5", "eslint": "^8", "eslint-config-next": "14.1.0", "typescript": "^5" From 00bd68588d7a659a166f30deb0564fc662673db0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Mon, 7 Oct 2024 23:39:18 -0300 Subject: [PATCH 31/43] style(cli-template-monorepo-ethers): update stylesheet --- .../apps/web-app/src/app/globals.css | 36 ++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css index 8d7ea0ee2..5edfdd0e9 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css @@ -34,6 +34,7 @@ html, body { max-width: 100vw; overflow-x: hidden; + height: 100vh; } body { @@ -63,11 +64,9 @@ b { height: 100%; max-width: 40vw; min-width: 35rem; - margin: auto; padding: 1rem; - - min-height: calc(100vh - 3.5rem); + height: calc(100vh - 7rem - 1px); padding-bottom: 5rem; } @@ -139,6 +138,9 @@ a:hover { transition-timing-function: linear; width: 100%; border: none; + display: flex; + align-items: center; + justify-content: center; } .button:hover { @@ -258,7 +260,8 @@ a:hover { .header { display: flex; justify-content: space-between; - padding: 1.5rem; + padding: 0 1.5rem; + height: 3.5rem; } .header-left { @@ -327,4 +330,29 @@ a:hover { padding-right: 1rem; display: flex; align-items: center; + box-sizing: border-box; + display: inline-block; + overflow: visible !important; + fill: currentColor; + color: #f0f6fc !important; + vertical-align: middle !important; + width: 2rem; + height: 2rem; +} + +.loader { + width: 25px; + height: 25px; + border-radius: 50%; + border-top: 2px solid var(--slate100); + border-right: 2px solid transparent; + animation: spin 1s linear infinite; + z-index: 20; + margin-left: 0.5rem; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } } \ No newline at end of file From e2da130ca35fcd38df48961a084c06e3aacec7a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Mon, 7 Oct 2024 23:39:49 -0300 Subject: [PATCH 32/43] chore(cli-template-monorepo-ethers): update github logo --- .../web-app/src/components/PageContainer.tsx | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx index f89dfabba..bf4ddd318 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx @@ -42,22 +42,24 @@ export default function PageContainer({ >
{shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])}
- + + +
From 147846a3307d9b7bc1877cd5b2a1ba7082859170 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Mon, 7 Oct 2024 23:40:34 -0300 Subject: [PATCH 33/43] chore(cli-template-monorepo-ethers): add loader to join group button --- .../apps/web-app/src/app/group/page.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx index 59df2c17c..28dfc4465 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/group/page.tsx @@ -161,6 +161,7 @@ export default function GroupsPage() { type="button" > Join group + {_loading &&
}
From 69191948f5b651996fc7234e21b3e42faa46240c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Mon, 7 Oct 2024 23:49:25 -0300 Subject: [PATCH 34/43] chore(cli-template-monorepo-subgraph): update packages --- .../apps/web-app/package.json | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json index 68337d317..ef177887f 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/package.json +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/package.json @@ -9,28 +9,20 @@ "lint": "next lint" }, "dependencies": { - "@chakra-ui/next-js": "^2.2.0", - "@chakra-ui/react": "^2.8.2", - "@chakra-ui/theme": "^3.3.1", - "@chakra-ui/theme-tools": "^2.1.2", - "@emotion/react": "^11.11.3", - "@emotion/styled": "^11.11.0", "@semaphore-protocol/core": "4.0.3", "@semaphore-protocol/data": "4.0.3", "@semaphore-protocol/utils": "4.0.3", "ethers": "^6.11.1", - "framer-motion": "^11.0.5", "next": "14.1.0", "next-pwa": "^5.6.0", "react": "^18", - "react-dom": "^18", - "react-icons": "^4.8.0" + "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", - "dotenv": "^16.4.4", + "dotenv": "^16.4.5", "eslint": "^8", "eslint-config-next": "14.1.0", "typescript": "^5" From fea5568023e13bda8b7e42396108ba6c38e1a4f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Mon, 7 Oct 2024 23:50:22 -0300 Subject: [PATCH 35/43] style(cli-template-monorepo-subgraph): update stylesheet --- .../apps/web-app/src/app/globals.css | 260 ++++++++++++++---- 1 file changed, 206 insertions(+), 54 deletions(-) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/globals.css b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/globals.css index 505ae8579..5edfdd0e9 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/globals.css +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/globals.css @@ -1,29 +1,40 @@ :root { - --slate100: #f1f5f9; - --slate200: #e2e8f0; - --slate300: #cbd5e1; - --slate400: #94a3b8; - --slate500: #64748b; - --slate700: #334155; - --blue200: #bfdbfe; - --blue500: #3b82f6; - --blue600: #2563eb; - --blue700: #1d4ed8; - --blue800: #1e40af; - --blue900: #1e3a8a; + --blue100: #dde6fc; + --blue200: #c3d4fa; + --blue300: #9abaf6; + --blue400: #6a95f0; + --blue500: #4771ea; + --blue600: #3555df; + --blue700: #2940cc; + --blue800: #2735a6; + --blue900: #253183; + --blue950: #1b2050; --darkBlueBg: #00020d; + --slate50: #f7f7f8; + --slate100: #eeeef0; + --slate200: #d9d9de; + --slate300: #b8b9c1; + --slate400: #92939e; + --slate500: #747583; + --slate600: #5e5f6b; + --slate700: #4d4e57; + --slate800: #42424a; + --slate900: #3a3a40; + --slate950: #26262b; } * { box-sizing: border-box; padding: 0; margin: 0; + font-family:"Outfit", sans-serif;; } html, body { max-width: 100vw; overflow-x: hidden; + height: 100vh; } body { @@ -33,18 +44,30 @@ body { p { line-height: 1.5rem; + font-weight: 300; + overflow-wrap: break-word; + font-size: 1rem; +} + +b { + font-weight: 600; +} + +.key-wrapper { + padding-bottom: 1.5rem; + padding-left: 0.5rem; } .container { display: flex; flex-direction: column; height: 100%; - max-width: 32rem; - + max-width: 40vw; + min-width: 35rem; margin: auto; padding: 1rem; - - min-height: calc(100vh - 3.5rem); + height: calc(100vh - 7rem - 1px); + padding-bottom: 5rem; } .container #body { @@ -57,28 +80,25 @@ p { margin-bottom: 1rem; } -ol { - padding: 1rem; -} - -li { - margin-top: 1rem; -} - h2 { font-size: 2.25rem; font-weight: 500; margin-bottom: 1rem; + line-height: 1.2; } h3 { - font-size: 1.125rem; + font-size: 1.15rem; font-weight: 500; } .divider { - height: 1px; - background: var(--slate500); + opacity: 0.6; + border: 0; + border-style: solid; + border-bottom-width: 1px; + width: 100%; + border-color: var(--slate400); margin: 2rem 0; } @@ -89,31 +109,44 @@ h3 { } a { - color: var(--blue500); + color: var(--blue400); + text-decoration: none; +} + +a:hover { + text-decoration: underline; + text-decoration-color: var(--blue400); } .button { - background-color: var(--blue800); - width: 100%; - padding: 0.8rem 1rem; - border: 1px; border-radius: 100px; - cursor: pointer; - color: var(--slate100); - font-size: 1.125rem; - font-weight: 500; - transition: all 200ms linear; - margin-top: 1rem; - margin-bottom: 1.5rem; - opacity: 0.9; + font-weight: 400; + transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; + transition-duration: 200ms; + padding-left: 18px!important; + padding-right: 18px!important; + height: 2.5rem; + min-width: 2.5rem; + font-size: 1rem; + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; + -webkit-padding-end: 1rem; + padding-inline-end: 1rem; + background: var(--blue500); + color: white; + background-image: linear-gradient(to right, var(--blue500), var(--blue800)); + transition-timing-function: linear; + width: 100%; + border: none; display: flex; - justify-content: center; - height: 3rem; align-items: center; + justify-content: center; } .button:hover { - background-color: var(--blue900); + background-color: var(--blue800); + background-image: none; + cursor: pointer; } .button:disabled { @@ -123,43 +156,112 @@ a { .button:disabled:hover { background-color: var(--blue800); + background-image: none; } .button-stepper { cursor: pointer; - color: var(--blue600); + color: var(--blue500); font-size: 1.1rem; border: none; background: none; + width: 4rem; + margin: 0 1rem; + display: flex; + justify-content: center; +} + +.button-stepper:hover { + text-decoration: underline; +} + +.refresh-wrapper { + color: var(--slate400); + display: flex; + align-items: center; +} + +.refresh-wrapper:hover { + text-decoration: underline; } -.button-link { +.refresh-button { cursor: pointer; color: var(--slate300); font-size: 1.1rem; border: none; background: none; + padding-right: 1rem; + display: flex; + align-items: center; +} + +.refresh-button:hover { + text-decoration: underline; +} + +.refresh-span { + width: 1.5em; + height: 1em; + display: inline-block; + line-height: 1em; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + color: currentColor; + vertical-align: middle; +} + +.refresh-icon { + margin-inline-end: 0.5rem +} + +.stepper-icon { + display: inline-flex; + align-self: center; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.left-pad { + margin-inline-end: 0.5rem; +} + +.right-pad { + margin-inline-start: 0.5rem; +} + +.stepper-icon svg { + width: 1em; + height: 1em; + display: inline-block; + line-height: 1em; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + color: currentColor; + vertical-align:super } .box { - padding: 0.8rem; - border-style: solid; - border-width: 1px; - border-color: var(--slate500); - border-radius: 4px; + border-bottom: 1px solid white; + padding: 0.8rem 0; + max-height: 50px; } .box-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - margin: 0.5rem; + font-size: 1rem; } .header { display: flex; justify-content: space-between; - padding: 1.5rem; + padding: 0 1.5rem; + height: 3.5rem; } .header-left { @@ -171,6 +273,7 @@ a { .header-right { display: flex; gap: 1.5rem; + align-items: center; } .footer { @@ -188,6 +291,55 @@ a { background: var(--slate500); } +.users-wrapper,.feedback-wrapper { + max-height: 300px; + overflow-y: scroll; +} + +.keys-header { + margin-bottom: 1.5rem; +} + +.users-header { + font-weight: 700; + font-size: 1.125rem; + font-family: 'DM Sans', sans-serif; +} + +.join-group-button, .send-feedback-button { + margin-top: 1.5rem; +} + +.github-icon { + width: 1.5rem; + height: 1.5rem; + display: inline-block; + line-height: 1em; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + color: currentColor; +} + +.github-button { + cursor: pointer; + color: var(--slate100); + font-size: 1.1rem; + border: none; + background: none; + padding-right: 1rem; + display: flex; + align-items: center; + box-sizing: border-box; + display: inline-block; + overflow: visible !important; + fill: currentColor; + color: #f0f6fc !important; + vertical-align: middle !important; + width: 2rem; + height: 2rem; +} + .loader { width: 25px; height: 25px; @@ -196,11 +348,11 @@ a { border-right: 2px solid transparent; animation: spin 1s linear infinite; z-index: 20; - margin-left: 1rem; + margin-left: 0.5rem; } @keyframes spin { to { transform: rotate(360deg); } -} +} \ No newline at end of file From aa4595a9142f551f78d8756be918562cebf91537 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Mon, 7 Oct 2024 23:51:10 -0300 Subject: [PATCH 36/43] style(cli-template-monorepo-subgraph): update user interface --- .../apps/web-app/src/app/group/page.tsx | 90 +++++++++++-------- .../apps/web-app/src/app/layout.tsx | 27 ++++-- .../apps/web-app/src/app/page.tsx | 60 ++++++------- .../apps/web-app/src/app/proofs/page.tsx | 85 +++++++++--------- .../web-app/src/components/PageContainer.tsx | 84 ++++++++--------- .../apps/web-app/src/components/Stepper.tsx | 78 ++++++++-------- .../apps/web-app/src/hooks/useSemaphore.ts | 22 ++--- 7 files changed, 241 insertions(+), 205 deletions(-) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/group/page.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/group/page.tsx index 80468a5ad..28dfc4465 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/group/page.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/group/page.tsx @@ -2,19 +2,18 @@ import Stepper from "@/components/Stepper" import { useLogContext } from "@/context/LogContext" import { useSemaphoreContext } from "@/context/SemaphoreContext" -import IconRefreshLine from "@/icons/IconRefreshLine" -import { Box, Button, Divider, Heading, HStack, Link, Text, useBoolean, VStack } from "@chakra-ui/react" import { useRouter } from "next/navigation" import { useCallback, useEffect, useMemo } from "react" import Feedback from "../../../contract-artifacts/Feedback.json" import { ethers } from "ethers" import useSemaphoreIdentity from "@/hooks/useSemaphoreIdentity" +import { useState } from "react" export default function GroupsPage() { const router = useRouter() const { setLog } = useLogContext() const { _users, refreshUsers, addUser } = useSemaphoreContext() - const [_loading, setLoading] = useBoolean() + const [_loading, setLoading] = useState(false) const { _identity } = useSemaphoreIdentity() useEffect(() => { @@ -30,7 +29,7 @@ export default function GroupsPage() { return } - setLoading.on() + setLoading(true) setLog(`Joining the Feedback group...`) let joinedGroup: boolean = false @@ -93,7 +92,7 @@ export default function GroupsPage() { setLog("Some error occurred, please try again!") } - setLoading.off() + setLoading(false) }, [_identity, addUser, setLoading, setLog]) const userHasJoined = useMemo( @@ -103,57 +102,70 @@ export default function GroupsPage() { return ( <> - - Groups - +

Groups

- - +

+ Semaphore groups - {" "} + {" "} are{" "} - + Lean incremental Merkle trees - {" "} + {" "} in which each leaf contains an identity commitment for a user. Groups can be abstracted to represent events, polls, or organizations. - - - - - - - Group users ({_users.length}) - - - + +

{_users.length > 0 && ( - +
{users.map((user, i) => ( - - +
+

{_identity?.commitment.toString() === user ? {user} : user} - - +

+
))} - +
)} - - - + Join group + {_loading &&
} + +
- +
) { return ( - - - - - {children} - - - + + + + + + + + + {children} + + ) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/page.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/page.tsx index 02e026fce..ee800be1f 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/page.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/page.tsx @@ -1,6 +1,5 @@ "use client" -import { Box, Button, Divider, Heading, HStack, Link, Text } from "@chakra-ui/react" import { Identity } from "@semaphore-protocol/core" import { useRouter } from "next/navigation" import { useCallback, useEffect, useState } from "react" @@ -38,55 +37,56 @@ export default function IdentitiesPage() { return ( <> - - Identities - +

Identities

- +

The identity of a user in the Semaphore protocol. A{" "} - + Semaphore identity - {" "} + {" "} consists of an{" "} - EdDSA - {" "} + {" "} public/private key pair and a commitment, used as the public identifier of the identity. - +

- +
- - - Identity - - +
+

Identity

+
{_identity && ( - - +
+

Private Key (base64):
{_identity.export()} - - +

+

Public Key:
[{_identity.publicKey[0].toString()},{" "} {_identity.publicKey[1].toString()}] - - +

+

Commitment:
{_identity.commitment.toString()} - - +

+
)} - - - + +
- +
router.push("/group"))} /> diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/proofs/page.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/proofs/page.tsx index 88fffa390..0ee9a92fd 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/proofs/page.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/app/proofs/page.tsx @@ -3,12 +3,10 @@ import Stepper from "@/components/Stepper" import { useLogContext } from "@/context/LogContext" import { useSemaphoreContext } from "@/context/SemaphoreContext" -import IconRefreshLine from "@/icons/IconRefreshLine" -import { Box, Button, Divider, Heading, HStack, Link, Text, useBoolean, VStack } from "@chakra-ui/react" import { generateProof, Group } from "@semaphore-protocol/core" import { encodeBytes32String, ethers } from "ethers" import { useRouter } from "next/navigation" -import { useCallback, useEffect, useMemo } from "react" +import { useCallback, useEffect, useMemo, useState } from "react" import Feedback from "../../../contract-artifacts/Feedback.json" import useSemaphoreIdentity from "@/hooks/useSemaphoreIdentity" @@ -16,7 +14,7 @@ export default function ProofsPage() { const router = useRouter() const { setLog } = useLogContext() const { _users, _feedback, refreshFeedback, addFeedback } = useSemaphoreContext() - const [_loading, setLoading] = useBoolean() + const [_loading, setLoading] = useState(false) const { _identity } = useSemaphoreIdentity() useEffect(() => { @@ -35,7 +33,7 @@ export default function ProofsPage() { const feedback = prompt("Please enter your feedback:") if (feedback && _users) { - setLoading.on() + setLoading(true) setLog(`Posting your anonymous feedback...`) @@ -119,60 +117,63 @@ export default function ProofsPage() { setLog("Some error occurred, please try again!") } finally { - setLoading.off() + setLoading(false) } } }, [_identity, _users, addFeedback, setLoading, setLog]) return ( <> - - Proofs - +

Proofs

- +

Semaphore members can anonymously{" "} - + prove - {" "} + {" "} that they are part of a group and send their anonymous messages. Messages could be votes, leaks, - reviews, or feedback. - - - - - - - Feedback ({_feedback.length}) - - - + +

- {_feedback.length > 0 && ( - + {feedback.length > 0 && ( +
{feedback.map((f, i) => ( - - {f} - +
+

{f}

+
))} - +
)} - - - +
+ +
- +
router.push("/group")} /> diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx index 686123c67..bf4ddd318 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx @@ -2,9 +2,7 @@ import { useLogContext } from "@/context/LogContext" import shortenString from "@/utils/shortenString" -import { Container, HStack, Icon, IconButton, Link, Spinner, Stack, Text } from "@chakra-ui/react" import { usePathname } from "next/navigation" -import { FaGithub } from "react-icons/fa" export default function PageContainer({ children @@ -27,46 +25,52 @@ export default function PageContainer({ return ( <> - - - {shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])} - - - } - /> - - + - - - {children} - - +
{children}
- - {log.endsWith("...") && } - {log || `Current step: ${pathname}`} - +
+ +
+ {log.endsWith("...")} +

{log || `Current step: ${pathname}`}

+
) } diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/Stepper.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/Stepper.tsx index 2a99262e2..ab10ba036 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/Stepper.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/Stepper.tsx @@ -1,9 +1,5 @@ "use client" -import { Button, HStack, Text } from "@chakra-ui/react" -import IconChevronLeft from "../icons/IconChevronLeft" -import IconChevronRight from "../icons/IconChevronRight" - export type StepperProps = { step: number onPrevClick?: () => void @@ -12,38 +8,50 @@ export type StepperProps = { export default function Stepper({ step, onPrevClick, onNextClick }: StepperProps) { return ( - - +
+ {onPrevClick !== undefined ? ( + + ) : ( + + )} - - {step.toString()}/3 - +

{step.toString()}/3

- - + {onNextClick !== undefined ? ( + + ) : ( + + )} +
) } diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphore.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphore.ts index 7af264f82..4f5dab63e 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphore.ts +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphore.ts @@ -1,4 +1,4 @@ -import { SemaphoreSubgraph } from "@semaphore-protocol/data" +import { SemaphoreEthers } from "@semaphore-protocol/data" import { decodeBytes32String, toBeHex } from "ethers" import { useCallback, useState } from "react" import { SemaphoreContextType } from "../context/SemaphoreContext" @@ -9,15 +9,17 @@ const ethereumNetwork = : process.env.NEXT_PUBLIC_DEFAULT_NETWORK export default function useSemaphore(): SemaphoreContextType { - const [_users, setUsers] = useState([]) + const [_users, setUsers] = useState([]) const [_feedback, setFeedback] = useState([]) const refreshUsers = useCallback(async (): Promise => { - const semaphore = new SemaphoreSubgraph(ethereumNetwork) + const semaphore = new SemaphoreEthers(ethereumNetwork, { + address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS + }) - const group = await semaphore.getGroup(process.env.NEXT_PUBLIC_GROUP_ID as string, { members: true }) + const members = await semaphore.getGroupMembers(process.env.NEXT_PUBLIC_GROUP_ID as string) - setUsers(group.members!) + setUsers(members) }, []) const addUser = useCallback( @@ -28,13 +30,13 @@ export default function useSemaphore(): SemaphoreContextType { ) const refreshFeedback = useCallback(async (): Promise => { - const semaphore = new SemaphoreSubgraph(ethereumNetwork) - - const group = await semaphore.getGroup(process.env.NEXT_PUBLIC_GROUP_ID as string, { - validatedProofs: true + const semaphore = new SemaphoreEthers(ethereumNetwork, { + address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS }) - setFeedback(group.validatedProofs!.map(({ message }: any) => decodeBytes32String(toBeHex(message, 32)))) + const proofs = await semaphore.getGroupValidatedProofs(process.env.NEXT_PUBLIC_GROUP_ID as string) + + setFeedback(proofs.map(({ message }: any) => decodeBytes32String(toBeHex(message, 32)))) }, []) const addFeedback = useCallback( From 4369dae7d1902bb534e8de0c87f3ab438706e5c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Mon, 7 Oct 2024 23:56:33 -0300 Subject: [PATCH 37/43] chore: update yarn.lock --- yarn.lock | 171 +++--------------------------------------------------- 1 file changed, 7 insertions(+), 164 deletions(-) diff --git a/yarn.lock b/yarn.lock index cb7f111b0..51a36c95e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2169,7 +2169,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/next-js@npm:^2.1.5, @chakra-ui/next-js@npm:^2.2.0": +"@chakra-ui/next-js@npm:^2.1.5": version: 2.2.0 resolution: "@chakra-ui/next-js@npm:2.2.0" dependencies: @@ -2563,7 +2563,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/react@npm:^2.8.1, @chakra-ui/react@npm:^2.8.2": +"@chakra-ui/react@npm:^2.8.1": version: 2.8.2 resolution: "@chakra-ui/react@npm:2.8.2" dependencies: @@ -2838,7 +2838,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/theme-tools@npm:2.1.2, @chakra-ui/theme-tools@npm:^2.1.1, @chakra-ui/theme-tools@npm:^2.1.2": +"@chakra-ui/theme-tools@npm:2.1.2, @chakra-ui/theme-tools@npm:^2.1.1": version: 2.1.2 resolution: "@chakra-ui/theme-tools@npm:2.1.2" dependencies: @@ -2863,7 +2863,7 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/theme@npm:3.3.1, @chakra-ui/theme@npm:^3.3.0, @chakra-ui/theme@npm:^3.3.1": +"@chakra-ui/theme@npm:3.3.1, @chakra-ui/theme@npm:^3.3.0": version: 3.3.1 resolution: "@chakra-ui/theme@npm:3.3.1" dependencies: @@ -3757,25 +3757,6 @@ __metadata: languageName: node linkType: hard -"@emotion/babel-plugin@npm:^11.12.0": - version: 11.12.0 - resolution: "@emotion/babel-plugin@npm:11.12.0" - dependencies: - "@babel/helper-module-imports": "npm:^7.16.7" - "@babel/runtime": "npm:^7.18.3" - "@emotion/hash": "npm:^0.9.2" - "@emotion/memoize": "npm:^0.9.0" - "@emotion/serialize": "npm:^1.2.0" - babel-plugin-macros: "npm:^3.1.0" - convert-source-map: "npm:^1.5.0" - escape-string-regexp: "npm:^4.0.0" - find-root: "npm:^1.1.0" - source-map: "npm:^0.5.7" - stylis: "npm:4.2.0" - checksum: 10/fe6f4522ea2b61ef4214dd0b0f3778aad9c18434b47e50ae5091af226526bf305455c313065826a090682520c9462c151d4df62ec128f14671d3125afc05b148 - languageName: node - linkType: hard - "@emotion/cache@npm:^11.11.0": version: 11.11.0 resolution: "@emotion/cache@npm:11.11.0" @@ -3789,19 +3770,6 @@ __metadata: languageName: node linkType: hard -"@emotion/cache@npm:^11.13.0": - version: 11.13.1 - resolution: "@emotion/cache@npm:11.13.1" - dependencies: - "@emotion/memoize": "npm:^0.9.0" - "@emotion/sheet": "npm:^1.4.0" - "@emotion/utils": "npm:^1.4.0" - "@emotion/weak-memoize": "npm:^0.4.0" - stylis: "npm:4.2.0" - checksum: 10/090c8ad2e5b23f1b3a95e94f1f0554a40ed1dcd844c9d31629a68ff824eff40f32d1362f67aefa440ee0aabd5a8cabcc76870fd6d77144d3ff251bdcdf1420b9 - languageName: node - linkType: hard - "@emotion/hash@npm:^0.9.1": version: 0.9.1 resolution: "@emotion/hash@npm:0.9.1" @@ -3809,13 +3777,6 @@ __metadata: languageName: node linkType: hard -"@emotion/hash@npm:^0.9.2": - version: 0.9.2 - resolution: "@emotion/hash@npm:0.9.2" - checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387 - languageName: node - linkType: hard - "@emotion/is-prop-valid@npm:1.2.2, @emotion/is-prop-valid@npm:^1.2.2": version: 1.2.2 resolution: "@emotion/is-prop-valid@npm:1.2.2" @@ -3848,13 +3809,6 @@ __metadata: languageName: node linkType: hard -"@emotion/memoize@npm:^0.9.0": - version: 0.9.0 - resolution: "@emotion/memoize@npm:0.9.0" - checksum: 10/038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1 - languageName: node - linkType: hard - "@emotion/react@npm:^11.11.1": version: 11.11.4 resolution: "@emotion/react@npm:11.11.4" @@ -3876,27 +3830,6 @@ __metadata: languageName: node linkType: hard -"@emotion/react@npm:^11.11.3": - version: 11.13.0 - resolution: "@emotion/react@npm:11.13.0" - dependencies: - "@babel/runtime": "npm:^7.18.3" - "@emotion/babel-plugin": "npm:^11.12.0" - "@emotion/cache": "npm:^11.13.0" - "@emotion/serialize": "npm:^1.3.0" - "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.1.0" - "@emotion/utils": "npm:^1.4.0" - "@emotion/weak-memoize": "npm:^0.4.0" - hoist-non-react-statics: "npm:^3.3.1" - peerDependencies: - react: ">=16.8.0" - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 10/3dd2b3ffac51f0fa67ef3cb85d4064fd7ddc1212b587e3b328a1eade47024690175518d63c4cbabf28afa07e29187136b26d646e395158f6574fa6321a0b68f9 - languageName: node - linkType: hard - "@emotion/serialize@npm:^1.1.2, @emotion/serialize@npm:^1.1.3, @emotion/serialize@npm:^1.1.4": version: 1.1.4 resolution: "@emotion/serialize@npm:1.1.4" @@ -3910,19 +3843,6 @@ __metadata: languageName: node linkType: hard -"@emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.0": - version: 1.3.0 - resolution: "@emotion/serialize@npm:1.3.0" - dependencies: - "@emotion/hash": "npm:^0.9.2" - "@emotion/memoize": "npm:^0.9.0" - "@emotion/unitless": "npm:^0.9.0" - "@emotion/utils": "npm:^1.4.0" - csstype: "npm:^3.0.2" - checksum: 10/3ab17aa0dabdc77d5d573ef07df63e91e778c0637f4b7f690fde46ab0007496c8dfbf32d2836d3b22ac2ba2d8c58570da51092ba7ff068d4d790147de2352465 - languageName: node - linkType: hard - "@emotion/sheet@npm:^1.2.2": version: 1.2.2 resolution: "@emotion/sheet@npm:1.2.2" @@ -3930,13 +3850,6 @@ __metadata: languageName: node linkType: hard -"@emotion/sheet@npm:^1.4.0": - version: 1.4.0 - resolution: "@emotion/sheet@npm:1.4.0" - checksum: 10/8ac6e9bf6b373a648f26ae7f1c24041038524f4c72f436f4f8c4761c665e58880c3229d8d89b1f7a4815dd8e5b49634d03e60187cb6f93097d7f7c1859e869d5 - languageName: node - linkType: hard - "@emotion/styled@npm:^11.11.0": version: 11.11.5 resolution: "@emotion/styled@npm:11.11.5" @@ -3964,13 +3877,6 @@ __metadata: languageName: node linkType: hard -"@emotion/unitless@npm:^0.9.0": - version: 0.9.0 - resolution: "@emotion/unitless@npm:0.9.0" - checksum: 10/242754aa2f7368b5c2a5dbe61bf0a2bb0bfb4de091fe2388282f8c014c0796d0ca166b1639cf4f5f0e57e59258b622e7946a2e976ed5a56e06a5a306ca25adca - languageName: node - linkType: hard - "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" @@ -3980,15 +3886,6 @@ __metadata: languageName: node linkType: hard -"@emotion/use-insertion-effect-with-fallbacks@npm:^1.1.0": - version: 1.1.0 - resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.1.0" - peerDependencies: - react: ">=16.8.0" - checksum: 10/33a10f44a873b3f5ccd2a1a3d13c2f34ed628f5a2be1ccf28540a86535a14d3a930afcbef209d48346a22ec60ff48f43c86ee9c846b9480d23a55a17145da66c - languageName: node - linkType: hard - "@emotion/utils@npm:^1.2.1": version: 1.2.1 resolution: "@emotion/utils@npm:1.2.1" @@ -3996,13 +3893,6 @@ __metadata: languageName: node linkType: hard -"@emotion/utils@npm:^1.4.0": - version: 1.4.0 - resolution: "@emotion/utils@npm:1.4.0" - checksum: 10/e4cdb51819db01fec21c3e35a1391900c9e7f3ac1e7ecb419c8e408464830cd7ef6e1a116381cbfe3fb1039406fb7ed35f16a1575d502c92bc9f81bc13a3ee5a - languageName: node - linkType: hard - "@emotion/weak-memoize@npm:^0.3.1": version: 0.3.1 resolution: "@emotion/weak-memoize@npm:0.3.1" @@ -4010,13 +3900,6 @@ __metadata: languageName: node linkType: hard -"@emotion/weak-memoize@npm:^0.4.0": - version: 0.4.0 - resolution: "@emotion/weak-memoize@npm:0.4.0" - checksum: 10/db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52 - languageName: node - linkType: hard - "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0": version: 4.4.0 resolution: "@eslint-community/eslint-utils@npm:4.4.0" @@ -12699,7 +12582,7 @@ __metadata: languageName: node linkType: hard -"dotenv@npm:^16.0.2, dotenv@npm:^16.4.4, dotenv@npm:^16.4.5": +"dotenv@npm:^16.0.2, dotenv@npm:^16.4.5": version: 16.4.5 resolution: "dotenv@npm:16.4.5" checksum: 10/55a3134601115194ae0f924e54473459ed0d9fc340ae610b676e248cca45aa7c680d86365318ea964e6da4e2ea80c4514c1adab5adb43d6867fb57ff068f95c8 @@ -14692,26 +14575,6 @@ __metadata: languageName: node linkType: hard -"framer-motion@npm:^11.0.5": - version: 11.3.19 - resolution: "framer-motion@npm:11.3.19" - dependencies: - tslib: "npm:^2.4.0" - peerDependencies: - "@emotion/is-prop-valid": "*" - react: ^18.0.0 - react-dom: ^18.0.0 - peerDependenciesMeta: - "@emotion/is-prop-valid": - optional: true - react: - optional: true - react-dom: - optional: true - checksum: 10/05db4f4b6ad0a63e8494d122b2261412b8db7a4a2971ece1d58693dd51885e0a1405e684d730c45e8194bfbceccfa13a707db3744d870902a768285615f892b1 - languageName: node - linkType: hard - "framesync@npm:6.1.2": version: 6.1.2 resolution: "framesync@npm:6.1.2" @@ -20308,15 +20171,13 @@ __metadata: version: 0.0.0-use.local resolution: "monorepo-ethers-web-app@workspace:packages/cli-template-monorepo-ethers/apps/web-app" dependencies: - "@emotion/react": "npm:^11.11.3" - "@emotion/styled": "npm:^11.11.0" "@semaphore-protocol/core": "npm:4.0.3" "@semaphore-protocol/data": "npm:4.0.3" "@semaphore-protocol/utils": "npm:4.0.3" "@types/node": "npm:^20" "@types/react": "npm:^18" "@types/react-dom": "npm:^18" - dotenv: "npm:^16.4.4" + dotenv: "npm:^16.4.5" eslint: "npm:^8" eslint-config-next: "npm:14.1.0" ethers: "npm:^6.11.1" @@ -20324,7 +20185,6 @@ __metadata: next-pwa: "npm:^5.6.0" react: "npm:^18" react-dom: "npm:^18" - react-icons: "npm:^4.8.0" typescript: "npm:^5" languageName: unknown linkType: soft @@ -20374,28 +20234,20 @@ __metadata: version: 0.0.0-use.local resolution: "monorepo-subgraph-web-app@workspace:packages/cli-template-monorepo-subgraph/apps/web-app" dependencies: - "@chakra-ui/next-js": "npm:^2.2.0" - "@chakra-ui/react": "npm:^2.8.2" - "@chakra-ui/theme": "npm:^3.3.1" - "@chakra-ui/theme-tools": "npm:^2.1.2" - "@emotion/react": "npm:^11.11.3" - "@emotion/styled": "npm:^11.11.0" "@semaphore-protocol/core": "npm:4.0.3" "@semaphore-protocol/data": "npm:4.0.3" "@semaphore-protocol/utils": "npm:4.0.3" "@types/node": "npm:^20" "@types/react": "npm:^18" "@types/react-dom": "npm:^18" - dotenv: "npm:^16.4.4" + dotenv: "npm:^16.4.5" eslint: "npm:^8" eslint-config-next: "npm:14.1.0" ethers: "npm:^6.11.1" - framer-motion: "npm:^11.0.5" next: "npm:14.1.0" next-pwa: "npm:^5.6.0" react: "npm:^18" react-dom: "npm:^18" - react-icons: "npm:^4.8.0" typescript: "npm:^5" languageName: unknown linkType: soft @@ -23042,15 +22894,6 @@ __metadata: languageName: node linkType: hard -"react-icons@npm:^4.8.0": - version: 4.12.0 - resolution: "react-icons@npm:4.12.0" - peerDependencies: - react: "*" - checksum: 10/5cc20509ca0b182f1e7bf42c271846c48f688c8922e2439f48728805adc93ba18476a13588cbe91ee43a2d03b2787e0dc0b5cc4b9c4e4ae3426f4464b3c1b734 - languageName: node - linkType: hard - "react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1" From 7f1947c489e07013938dc0c7ed83f053cdd478e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Thu, 17 Oct 2024 20:06:06 -0300 Subject: [PATCH 38/43] style: change styling and add feedback link --- .../apps/web-app/src/app/globals.css | 5 ++++- .../apps/web-app/src/components/PageContainer.tsx | 9 ++++----- .../apps/web-app/src/app/globals.css | 5 ++++- .../apps/web-app/src/components/PageContainer.tsx | 9 ++++----- 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css index 5edfdd0e9..738c3fa56 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/app/globals.css @@ -68,6 +68,7 @@ b { padding: 1rem; height: calc(100vh - 7rem - 1px); padding-bottom: 5rem; + min-height: calc(100vh - 3.5rem); } .container #body { @@ -267,7 +268,9 @@ a:hover { .header-left { font-size: 1.125rem; font-weight: 500; - text-decoration: none; + text-decoration: none !important; + display: flex; + align-items: center; } .header-right { diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx index bf4ddd318..d42262b66 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx @@ -3,6 +3,7 @@ import { useLogContext } from "@/context/LogContext" import shortenString from "@/utils/shortenString" import { usePathname } from "next/navigation" +import Link from "next/link" export default function PageContainer({ children @@ -26,11 +27,9 @@ export default function PageContainer({ return ( <>
-
- {/* - Feedback - */} -
+ + Feedback +
-
- {/* - Feedback - */} -
+ + Feedback +
Date: Thu, 17 Oct 2024 20:16:28 -0300 Subject: [PATCH 39/43] chore(cli-template-monorepo-subgraph): remove unused styles and icons --- .../web-app/src/icons/IconAddCircleFill.tsx | 19 ----- .../apps/web-app/src/icons/IconCheck.tsx | 19 ----- .../web-app/src/icons/IconChevronLeft.tsx | 19 ----- .../web-app/src/icons/IconChevronRight.tsx | 19 ----- .../web-app/src/icons/IconRefreshLine.tsx | 19 ----- .../apps/web-app/src/styles/colors.ts | 32 -------- .../web-app/src/styles/components/Button.ts | 77 ------------------- .../web-app/src/styles/components/Link.ts | 9 --- .../web-app/src/styles/components/Tooltip.ts | 13 ---- .../web-app/src/styles/components/index.ts | 9 --- .../apps/web-app/src/styles/index.ts | 16 ---- .../apps/web-app/src/styles/styles.ts | 25 ------ 12 files changed, 276 deletions(-) delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconAddCircleFill.tsx delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconCheck.tsx delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronLeft.tsx delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronRight.tsx delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconRefreshLine.tsx delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/colors.ts delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Button.ts delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Link.ts delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Tooltip.ts delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/index.ts delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/index.ts delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/styles.ts diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconAddCircleFill.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconAddCircleFill.tsx deleted file mode 100644 index 1f40a342e..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconAddCircleFill.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconAddCircleFillProps = { - width?: number - height?: number - color?: string -} - -export default function IconAddCircleFill({ width, height, color }: IconAddCircleFillProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconCheck.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconCheck.tsx deleted file mode 100644 index 2bb55d4c7..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconCheck.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconCheckProps = { - width?: number - height?: number - color?: string -} - -export default function IconCheck({ width, height, color }: IconCheckProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronLeft.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronLeft.tsx deleted file mode 100644 index d92ded273..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronLeft.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconChevronLeftProps = { - width?: number - height?: number - color?: string -} - -export default function IconChevronLeft({ width, height, color }: IconChevronLeftProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronRight.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronRight.tsx deleted file mode 100644 index df604b5ba..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconChevronRight.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconChevronRightProps = { - width?: number - height?: number - color?: string -} - -export default function IconChevronRight({ width, height, color }: IconChevronRightProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconRefreshLine.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconRefreshLine.tsx deleted file mode 100644 index 8363091d5..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/icons/IconRefreshLine.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Icon } from "@chakra-ui/react" -import React from "react" - -export type IconRefreshLineProps = { - width?: number - height?: number - color?: string -} - -export default function IconRefreshLine({ width, height, color }: IconRefreshLineProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/colors.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/colors.ts deleted file mode 100644 index 5e79392cc..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/colors.ts +++ /dev/null @@ -1,32 +0,0 @@ -const colors = { - darkBlue: "#0E101B", - darkBlueBg: "#00020D", - primary: { - 50: "#f0f4fe", - 100: "#dde6fc", - 200: "#c3d4fa", - 300: "#9abaf6", - 400: "#6a95f0", - 500: "#4771ea", - 600: "#3555df", - 700: "#2940cc", - 800: "#2735a6", - 900: "#253183", - 950: "#1b2050" - }, - text: { - 50: "#f7f7f8", - 100: "#eeeef0", - 200: "#d9d9de", - 300: "#b8b9c1", - 400: "#92939e", - 500: "#747583", - 600: "#5e5f6b", - 700: "#4d4e57", - 800: "#42424a", - 900: "#3a3a40", - 950: "#26262b" - } -} - -export default colors diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Button.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Button.ts deleted file mode 100644 index 13df87d6b..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Button.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { StyleFunctionProps, SystemStyleObject } from "@chakra-ui/theme-tools" -import { font } from "../styles" - -const Button = { - baseStyle: { - _focus: { - boxShadow: "none" - }, - borderRadius: "100px", - fontFamily: font.style.fontFamily, - fontWeight: "400", - paddingLeft: "18px !important", - paddingRight: "18px !important" - }, - defaultProps: { - colorScheme: "white" - }, - variants: { - solid: (props: StyleFunctionProps): SystemStyleObject => { - const { colorScheme: c } = props - - if (c === "primary") { - const bgGradient = "linear(to-r, primary.500, primary.800)" - const color = "white" - - return { - bgGradient, - color, - transitionDuration: "200ms", - transitionTimingFunction: "linear", - _hover: { - bg: `${c}.800`, - _disabled: { - bgGradient - } - }, - _active: { bg: `${c}.800` } - } - } - - const bg = c - - return { - bg, - color: `darkBlueBg`, - transitionDuration: "200ms", - transitionTimingFunction: "linear", - _hover: { - bg: `primary.200`, - _disabled: { - bg - } - }, - _active: { bg: `primary.200` } - } - }, - outline: (props: StyleFunctionProps): SystemStyleObject => { - const { colorScheme: c } = props - - return { - color: c, - transitionDuration: "200ms", - transitionTimingFunction: "linear", - borderWidth: "1.2px", - borderColor: c, - _hover: { - color: c, - borderColor: "primary.200", - _disabled: { - bg: c - } - } - } - } - } -} -export default Button diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Link.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Link.ts deleted file mode 100644 index e4a03d42b..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Link.ts +++ /dev/null @@ -1,9 +0,0 @@ -const Link = { - baseStyle: { - _focus: { - boxShadow: "none" - } - } -} - -export default Link diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Tooltip.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Tooltip.ts deleted file mode 100644 index 6df3a97d7..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/Tooltip.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { SystemStyleObject } from "@chakra-ui/react" - -const Tooltip = { - baseStyle: (): SystemStyleObject => ({ - borderRadius: "4px", - py: "10px", - px: "15px", - fontWeight: "bold", - maxW: "350px" - }) -} - -export default Tooltip diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/index.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/index.ts deleted file mode 100644 index c4bd4fbdd..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/components/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import Button from "./Button" -import Link from "./Link" -import Tooltip from "./Tooltip" - -export default { - Link, - Button, - Tooltip -} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/index.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/index.ts deleted file mode 100644 index ffbe97221..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { extendTheme } from "@chakra-ui/react" -import colors from "./colors" -import components from "./components" -import styles, { font } from "./styles" - -const config = { - fonts: { - heading: font.style.fontFamily, - body: "DM Sans, sans-serif" - }, - colors, - styles, - components -} - -export default extendTheme(config) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/styles.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/styles.ts deleted file mode 100644 index f2d2dfa43..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/styles/styles.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { SystemStyleObject } from "@chakra-ui/react" -import { Styles } from "@chakra-ui/theme-tools" -import { Outfit } from "next/font/google" - -export const font = Outfit({ subsets: ["latin"] }) - -const styles: Styles = { - global: (): SystemStyleObject => ({ - body: { - bg: "darkBlueBg", - color: "text.100", - minHeight: "100vh", - display: "flex", - flexDirection: "column" - }, - "h1, h2, h3, h4": { - fontWeight: "500 !important" - }, - a: { - color: "primary.400 !important" - } - }) -} - -export default styles From 447d0efb0f65a8c51af80c72f28b6e4b494c8014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Fri, 18 Oct 2024 15:07:54 -0300 Subject: [PATCH 40/43] chore: remove unused context logs --- .../apps/web-app/src/context/LogsContext.ts | 11 ----------- .../web-app/src/context/SemaphoreContext.ts | 19 ------------------- .../apps/web-app/src/context/LogsContext.ts | 11 ----------- .../web-app/src/context/SemaphoreContext.ts | 19 ------------------- 4 files changed, 60 deletions(-) delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/context/LogsContext.ts delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/context/SemaphoreContext.ts delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/context/LogsContext.ts delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.ts diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/context/LogsContext.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/context/LogsContext.ts deleted file mode 100644 index 5f5e17692..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/context/LogsContext.ts +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react" - -export type LogsContextType = { - _logs: string - setLogs: (logs: string) => void -} - -export default React.createContext({ - _logs: "", - setLogs: (logs: string) => logs -}) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/context/SemaphoreContext.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/context/SemaphoreContext.ts deleted file mode 100644 index 4cac350ed..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/context/SemaphoreContext.ts +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react" - -export type SemaphoreContextType = { - _users: string[] - _feedback: string[] - refreshUsers: () => Promise - addUser: (user: string) => void - refreshFeedback: () => Promise - addFeedback: (feedback: string) => void -} - -export default React.createContext({ - _users: [], - _feedback: [], - refreshUsers: () => Promise.resolve(), - addUser: () => {}, - refreshFeedback: () => Promise.resolve(), - addFeedback: () => {} -}) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/LogsContext.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/LogsContext.ts deleted file mode 100644 index 5f5e17692..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/LogsContext.ts +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react" - -export type LogsContextType = { - _logs: string - setLogs: (logs: string) => void -} - -export default React.createContext({ - _logs: "", - setLogs: (logs: string) => logs -}) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.ts deleted file mode 100644 index 4cac350ed..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.ts +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react" - -export type SemaphoreContextType = { - _users: string[] - _feedback: string[] - refreshUsers: () => Promise - addUser: (user: string) => void - refreshFeedback: () => Promise - addFeedback: (feedback: string) => void -} - -export default React.createContext({ - _users: [], - _feedback: [], - refreshUsers: () => Promise.resolve(), - addUser: () => {}, - refreshFeedback: () => Promise.resolve(), - addFeedback: () => {} -}) From 3ca27ca5d71e28934b6c684b13ea7ca4299bad54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Fri, 18 Oct 2024 15:08:42 -0300 Subject: [PATCH 41/43] chore(cli-template-monorepo-subgraph): change data source subgraph web app --- .../apps/web-app/src/context/SemaphoreContext.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.tsx index 425b545ef..fd67bcf29 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/context/SemaphoreContext.tsx @@ -1,7 +1,7 @@ "use client" import React, { createContext, ReactNode, useCallback, useContext, useEffect, useState } from "react" -import { SemaphoreEthers } from "@semaphore-protocol/data" +import { SemaphoreSubgraph } from "@semaphore-protocol/data" import { decodeBytes32String, toBeHex } from "ethers" export type SemaphoreContextType = { @@ -29,10 +29,7 @@ export const SemaphoreContextProvider: React.FC = ({ children }) const [_feedback, setFeedback] = useState([]) const refreshUsers = useCallback(async (): Promise => { - const semaphore = new SemaphoreEthers(ethereumNetwork, { - address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS, - projectId: process.env.NEXT_PUBLIC_INFURA_API_KEY - }) + const semaphore = new SemaphoreSubgraph(ethereumNetwork) const members = await semaphore.getGroupMembers(process.env.NEXT_PUBLIC_GROUP_ID as string) @@ -47,10 +44,7 @@ export const SemaphoreContextProvider: React.FC = ({ children }) ) const refreshFeedback = useCallback(async (): Promise => { - const semaphore = new SemaphoreEthers(ethereumNetwork, { - address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS, - projectId: process.env.NEXT_PUBLIC_INFURA_API_KEY - }) + const semaphore = new SemaphoreSubgraph(ethereumNetwork) const proofs = await semaphore.getGroupValidatedProofs(process.env.NEXT_PUBLIC_GROUP_ID as string) From 8cd92dfb8325fd5e0bfd6a3662c2530cf2f6d33b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Fri, 18 Oct 2024 15:12:55 -0300 Subject: [PATCH 42/43] chore: change repo url --- .../apps/web-app/src/components/PageContainer.tsx | 2 +- .../apps/web-app/src/components/PageContainer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx index d42262b66..98e441b50 100644 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-ethers/apps/web-app/src/components/PageContainer.tsx @@ -42,7 +42,7 @@ export default function PageContainer({
{shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])}
 diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx index d42262b66..f4240ef7b 100644 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx +++ b/packages/cli-template-monorepo-subgraph/apps/web-app/src/components/PageContainer.tsx @@ -42,7 +42,7 @@ export default function PageContainer({
{shortenString(process.env.NEXT_PUBLIC_FEEDBACK_CONTRACT_ADDRESS as string, [6, 4])}
 From 65a080631b32f24e07f7d07acc08929402f624f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= Date: Fri, 18 Oct 2024 18:31:48 -0300 Subject: [PATCH 43/43] chore: remove unused hook useSemaphore --- .../apps/web-app/src/hooks/useSemaphore.ts | 57 ------------------- .../apps/web-app/src/hooks/useSemaphore.ts | 57 ------------------- 2 files changed, 114 deletions(-) delete mode 100644 packages/cli-template-monorepo-ethers/apps/web-app/src/hooks/useSemaphore.ts delete mode 100644 packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphore.ts diff --git a/packages/cli-template-monorepo-ethers/apps/web-app/src/hooks/useSemaphore.ts b/packages/cli-template-monorepo-ethers/apps/web-app/src/hooks/useSemaphore.ts deleted file mode 100644 index 4f5dab63e..000000000 --- a/packages/cli-template-monorepo-ethers/apps/web-app/src/hooks/useSemaphore.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { SemaphoreEthers } from "@semaphore-protocol/data" -import { decodeBytes32String, toBeHex } from "ethers" -import { useCallback, useState } from "react" -import { SemaphoreContextType } from "../context/SemaphoreContext" - -const ethereumNetwork = - process.env.NEXT_PUBLIC_DEFAULT_NETWORK === "localhost" - ? "http://127.0.0.1:8545" - : process.env.NEXT_PUBLIC_DEFAULT_NETWORK - -export default function useSemaphore(): SemaphoreContextType { - const [_users, setUsers] = useState([]) - const [_feedback, setFeedback] = useState([]) - - const refreshUsers = useCallback(async (): Promise => { - const semaphore = new SemaphoreEthers(ethereumNetwork, { - address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS - }) - - const members = await semaphore.getGroupMembers(process.env.NEXT_PUBLIC_GROUP_ID as string) - - setUsers(members) - }, []) - - const addUser = useCallback( - (user: any) => { - setUsers([..._users, user]) - }, - [_users] - ) - - const refreshFeedback = useCallback(async (): Promise => { - const semaphore = new SemaphoreEthers(ethereumNetwork, { - address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS - }) - - const proofs = await semaphore.getGroupValidatedProofs(process.env.NEXT_PUBLIC_GROUP_ID as string) - - setFeedback(proofs.map(({ message }: any) => decodeBytes32String(toBeHex(message, 32)))) - }, []) - - const addFeedback = useCallback( - (feedback: string) => { - setFeedback([..._feedback, feedback]) - }, - [_feedback] - ) - - return { - _users, - _feedback, - refreshUsers, - addUser, - refreshFeedback, - addFeedback - } -} diff --git a/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphore.ts b/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphore.ts deleted file mode 100644 index 4f5dab63e..000000000 --- a/packages/cli-template-monorepo-subgraph/apps/web-app/src/hooks/useSemaphore.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { SemaphoreEthers } from "@semaphore-protocol/data" -import { decodeBytes32String, toBeHex } from "ethers" -import { useCallback, useState } from "react" -import { SemaphoreContextType } from "../context/SemaphoreContext" - -const ethereumNetwork = - process.env.NEXT_PUBLIC_DEFAULT_NETWORK === "localhost" - ? "http://127.0.0.1:8545" - : process.env.NEXT_PUBLIC_DEFAULT_NETWORK - -export default function useSemaphore(): SemaphoreContextType { - const [_users, setUsers] = useState([]) - const [_feedback, setFeedback] = useState([]) - - const refreshUsers = useCallback(async (): Promise => { - const semaphore = new SemaphoreEthers(ethereumNetwork, { - address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS - }) - - const members = await semaphore.getGroupMembers(process.env.NEXT_PUBLIC_GROUP_ID as string) - - setUsers(members) - }, []) - - const addUser = useCallback( - (user: any) => { - setUsers([..._users, user]) - }, - [_users] - ) - - const refreshFeedback = useCallback(async (): Promise => { - const semaphore = new SemaphoreEthers(ethereumNetwork, { - address: process.env.NEXT_PUBLIC_SEMAPHORE_CONTRACT_ADDRESS - }) - - const proofs = await semaphore.getGroupValidatedProofs(process.env.NEXT_PUBLIC_GROUP_ID as string) - - setFeedback(proofs.map(({ message }: any) => decodeBytes32String(toBeHex(message, 32)))) - }, []) - - const addFeedback = useCallback( - (feedback: string) => { - setFeedback([..._feedback, feedback]) - }, - [_feedback] - ) - - return { - _users, - _feedback, - refreshUsers, - addUser, - refreshFeedback, - addFeedback - } -}