The Ethereum Ecosystem Support Program exists to provide both financial and non-financial support to projects and entities within the greater Ethereum community, in order to accelerate the growth of the ecosystem. The Ecosystem Support Program is an expansion of the original Ethereum Grants Program which mainly focused on financial support. Our focus is on deploying our resources where they will have the biggest impact.
This repository holds the codebase to our website, esp.ethereum.foundation
The main stack used in the project includes:
- Next.js.
- TypeScript.
- ChakraUI as component library.
- react-hook-form to validate forms.
- Framer Motion to animate buttons.
- ESLint and Prettier for linting and code formatting.
The project is bootstrapped with create-next-app, with a custom scaffolding.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
We can use hCaptcha testing keys (already defined on .env.local.example) to be able to test forms locally.
The following list describes the main elements of the project structure:
public: contains static assets like fonts and images.src: contains the source code.components: React components.- components with state are directly located inside
/components. forms: components used in forms.api.ts: this file contains the api fetching logic details used when submitting the forms data.
layout: components used to contain and apply different layouts to different pages.UI: stateless (functional) components.
- components with state are directly located inside
hooks: custom hooks.middlewares: custom middlewares (required for captcha input validation).pages: includes components that renders to pages and NextJS API Routes.theme: contains the Chakra UI custom theme, organized infoundationsandcomponentsfor better scaling.utilsconstants.ts: this is the global constants file (we have another one for specific form constants), containing URLs and lists of elements we use across the site.global.css: global stylesheet.types.ts: contains the custom defined TypeScript types and interfaces.
For the custom integration with the Salesforce API, we rely on the JSforce library. Some operations are not documented and were the result of lots of googling, SO and Github issues scanning.
The Salesforce API field names (listed on types.ts) are defined in Salesforce for each corresponding object (Lead, Contract, etc).
To enable a custom API integration with Salesforce, you need to create a Connected App. You'll need an account with admin permissions. Go to Setup > App Manager > New connected app to create a new one.
Check that your Connected App is configured with the following parameters
- Callback URL: https://salesforce.com
- Selected OAuth Scopes:
- Manage user data via APIs (api)
- Manage user data via Web browsers (web)
- Perform requests at any time (refresh_token, offline_access)
- Connected App policies:
- IP Relaxation: Relax IP Restrictions
- Permitted Users: All users may self-authorized
- Refresh Token Policy: Refresh token is valid until revoked
Some common issues regarding Salesforce data types
Picklist: if you get the error
Error 'bad value for restricted picklist field' appears when a record is created
when creating a new record, try disabling the 'Restrict picklist to the values defined in the value set' option for the corresponding field.
Checkbox: besides how you're handling this input on the UI (e.g.: a radio button), Salesforce expects the value to be a boolean (true,false), so remember to convert the string before submitting the data.
Check that the hardwired string value of Proactive_Community_Grants_Round__c is defined on Salesforce, otherwise submission will fail.
The data published in the Latest Grantees list is being pulled from a Google Spreadsheet maintained by the ESP Team. This document uses Markdown syntax as it's also being used as source for other pages.
To accomplish that, we publish the content of the document as CSV and then render it in the LatestGranteesList component. This includes some parsing work, from CSV to JSON and then rendering the Markdown. This process happens server-side only, on build time, so the resulting page is completely static.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
This is a very clear and step-by-step guide on it.
We recommend checking the official docs.