Migration to extensions checklist

[rin-st]

Use this as example Challenge 0 example

Checklist
1. Branches
Use

git switch --orphan challenge-[n]-[challenge-name]--extension

To create the branch, so the new branch has no files or history (we don't need a history in this branch because we won't merge this branch to main).

Add an empty commit and push the branch:

git commit --allow-empty -m "Init challenge n extension"
git push

And then use this branch as the starting branch to build the extension running:

git checkout -b chn-extension-init

From challenge-[n]-[challenge-name]--extension branch.

• Completed

2. README.md
Surface structure of extension:

├── README.md
└── extension
    ├── README.md.args.mjs
    └── packages

Copy README.md from current challenge version and place it in the root of extension. This README will be used by the SRE website.

Change this part:

git clone https://github.com/scaffold-eth/se-2-challenges.git challenge-0-simple-nft
cd challenge-0-simple-nft
git checkout challenge-0-simple-nft
yarn install

to:

npx create-eth@latest -e sre-challenge-0 challenge-0-simple-nft
cd challenge-0-simple-nft

• Completed

3. README.md.args.mjs
Create README.md.args.mjs inside extension folder. Structure of the file:

export const skipQuickStart = true;

export const extraContents = `... `;

We're setting skipQuickStart to true since the default quick start is not very good for us, as in the case of extensions it will be written before the description.

extraContents is mostly the same as main README.md, except ## Checkpoint 0: 📦 Environment 📚: node/yarn/git and npx create-eth parts are removed since we don't need those parts from inside an already created instance. Also yarn chain/deploy/start is a bit different.
Use \ before backticks

• Completed

4. packages/hardhat
Add your

• contracts
• deployments files
• tests
• (optional) (?) openzeppelin contracts mostly uses ^0.8.20, so probably you need to change solidity versions in contracts. For example I needed to change version from 0.8.4 to 0.8.20 in challenge 2 since it uses Ownable of openzeppelin
• (optional) add deps to package.json if needed

5. packages/nextjs
Add your

• pages/components/api routes
• public folder with hero.png and thumbnail-challenge-n.png file. Change n to number of your challenge. Take these files from public folder of that challenge branch inse-2-challenges repository.
  Template files are mostly the same. What needed to be changed:
• /app/layout.tsx.args.mjs: change number of the challenge in title
• page.tsx.args.mjs challenge number inside externalExtensionName. Change description, take it from return of homepage component of se-2-challenges challenge branch. Remove w-[75%] and similar classNames of wrapper div if needed
• /components/Header.tsx.args.mjs change menuIconImports, menuObjects and logoSubtitle. Don't include home and debug pages
• /utils/scaffold-eth/getMetadata.ts.args.mjs change challenge number inside thumbnailPath
• next.config.args.mjs most likely you don't need that file
• just copy all other args.mjs files from challenge 0 PR
• (optional) package.json add deps if needed

6. New template files

• create new branch on create-eth with your template.mjs files
• branch from your second branch (see point 1), so it will be third branch of your challenge. Add .args.mjs files
• merge both branches when approved

If I forgot something or if you find something new please add it to this checklist

Thank you!

[rin-st]

@damianmarti checklist is updated. You can check changes using edited button or just read the whole list again

[damianmarti]

@rin-st thanks!!

What about adding to the first step something like this:

Use

git switch --orphan challenge-[n]-[challenge-name]--extension

To create the branch, so the new branch has no files or history (we don't need a history in this branch because we won't merge this branch to main).

And then use this branch as the starting branch to build the extension running:

git checkout -b chn-extension-init

From challenge-[n]-[challenge-name]--extension branch.

[rin-st]

What about adding to the first step something like this:

Probably we will need a branch like base-challenge-template and branch all extensions from it so it will be easy to change common things in one place, for example tailwind theme. But not sure it's worth it. For now I used --orphan too. We can change it later if needed.

So updated as you said, thanks!

[damianmarti]

@rin-st great!

Maybe we can add something like this after the git switch --orphan:

Add an empty commit and push the branch:

git commit --allow-empty -m "Init challenge n extension"
git push

[rin-st]

Thanks! Updated

[damianmarti]

@rin-st I think in step 5 is missing to add ScaffoldEthAppWithProviders.tsx.args.mjs to components with

export const globalClassNames = "font-space-grotesk";

[damianmarti]

@rin-st Oh, sorry, it's there:

just copy all other args.mjs files from challenge 0 PR