Ethereum Ecosystem Support Program

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

Stack

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.

Local development

The project is bootstrapped with create-next-app, with a custom scaffolding.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open 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.

testing w/hCaptcha locally

We can use hCaptcha testing keys (already defined on .env.local.example) to be able to test forms locally.

Project Structure

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.
  • 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 in foundations and components for better scaling.
  • utils
  • constants.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.

Salesforce Integration

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).

Connected App

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.

Configuration

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

Common issues

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.

When adding new Grants

Check that the hardwired string value of Proactive_Community_Grants_Round__c is defined on Salesforce, otherwise submission will fail.

Grantees List data source

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.

Tutorials

Learning NextJS

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.

Adding ChakraUI to a NextJS project

This is a very clear and step-by-step guide on it.

Learning ChakraUI

We recommend checking the official docs.