banklessdao / bankless-academy Goto Github PK

sign a transaction with your wallet

sign transaction example: https://github.com/Web3Modal/web3modal/blob/master/example/src/App.tsx

• get POAP list from https://api.poap.xyz/actions/scan/ETH_ADDRESS
• create filter to only display "Bankless" POAPS for now
• display POAP on address hover
  

Build an automatic network switcher that pushes infos to Metamask similar to https://zapper.fi

Let's add support for:

• Ethereum
• Polygon (Main / Mumbai)
• Kovan testnet so we can use Aave on testnet (https://docs.aave.com/faq/testing-aave)

It looks like server side rendering with Next.js (or something else?) is also calling the Umami API instead of just from the frontend.

How to reproduce:

• go to https://app.banklessacademy.com/
• check out the realtime logs at https://umami.bankless.community/realtime (ask me for access if needed)

-> both environments (dev and prod) seemed to be called at the same time (at least for the first rendering)

Umami config: https://github.com/BanklessDAO/bankless-academy/blob/main/src/pages/_app.tsx

I've been making some research and experimentations about this tech these last weeks.
More infos on: https://lottiefiles.com/
Demo for the POAP: https://krux.co/poap.html

Designer can create super lightweight animations via Adobe After Effects, then export them in lottie format (it's just a simple .json file)
After Effects tutorial: https://www.youtube.com/watch?v=d1wDl5A9yQk

We can use this in order to have animated content and also to have a more interacted website (hover POAP, congrats for quiz, claim POAP).

This is most probably the tech behind the Coinbase earn animations slides.

• update src/layout/LanguageModeSwitcher.tsx component
• setup https://www.i18next.com
• create a multi language folder structure for quests content: en/, fr/, es/, ...

do signature verification in the backend
use ReCaptcha or other fun interactive way to verify if human

https://www.npmjs.com/package/@slider-captcha/react
https://www.npmjs.com/package/react-google-recaptcha

share signature via Twitter post to reduce Sybil attack

give extra POAP or verified status

twitter verification example: https://faucet.rinkeby.io/

feature description
At the end of a quest, the user needs to claim a POAP.

technical details

• create a test POAP + hardcode the claiming code in notion for now: https://potion-api.vercel.app/table?id=588737bf3969480eaade26ec1a7d9dcd
• link the "Claim POAP" button to a backend API so we can make an on-chain verification of the quest before claiming the POAP for them
• on-chain verification is out of scope, just add a TODO comment for now
• make the number of POAPs claimed dynamic based on the number of POAP distributed via the API
  

additional help

• it's possible to get the number of POAPs distributed via https://thegraph.com/legacy-explorer/subgraph/poap-xyz/poap-xdai using { event(id: "885") { tokenCount transferCount } }
• check https://github.com/poap-xyz/poap-gallery/blob/master/src/store/api.js to understand how https://poap.gallery/event/885 works

store claiming codes in database

using a desktop with is touchscreen is detected as a mobile device and won't show the prev/next buttons

• create view for src/pages/quest/[slug].tsx
• store steps in local storage
• keyboard shortcuts (prev/next/quiz answer)
• handle learning content types (text, video, illustration)
• quiz type
• quest type
• claim POAP page
• update step state in /quests page
  

The Quest
Here's a recap on what to implement for the "Intro to DeFi" Quest:

• [step 1] the user needs to switch to Kovan test ETH -> detect when he's on the rigth network + update 🟧 to ✅
• [step 2] the user needs to get some Kovan test ETH (let's use https://ethdrop.dev for now) -> track in the frontend when the test ETH has arrived into the user's wallet + update from 🟧 (no transaction came from 0x55555513537ec7f03a0af928bce4b200e6d677dd to his wallet) to ⚙️ (waiting for tx confirmation) to ✅ (tx confirmed)
• [step 3] the user needs to send back part of the test ETH he received back to https://kovan.etherscan.io/address/0x55555513537ec7f03a0af928bce4b200e6d677dd -> track in the frontend when the test ETH has left the user's wallet + update from 🟧 (no transaction sent from his wallet to 0x55555513537ec7f03a0af928bce4b200e6d677dd) to ⚙️ (waiting for tx confirmation) to ✅ (tx confirmed)

UI sketch

__
Pradhumma's transaction verification demo with Moralis: https://codesandbox.io/s/transaction-verification-h2m8d?file=/src/App.js

The last “Next” button of the lesson should be a GOLD gradient!

add analytics + screen recording

Try to implement the new glass morphism style theme in Chakra UI: https://www.figma.com/file/RAaaNdsEWC9tuPuoX35Fsz/Academy?node-id=1017%3A2208

this should almost already work since the Notion API converts the code to HTML

https://www.figma.com/file/RAaaNdsEWC9tuPuoX35Fsz/Academy?node-id=215%3A1179

The goal is have to implement social metadata infos (title + description + image).

Get data from https://github.com/BanklessDAO/bankless-academy/blob/main/src/constants/quests.ts for the quest pages (ex: in https://app.banklessacademy.com/quest/wallet-basics):

• title = quest.name
• description = quest.description
• image = quest.questImageLink

Use these default (add to a constant var in https://github.com/BanklessDAO/bankless-academy/blob/main/src/constants/index.ts) info for all the other pages:

• title = Bankless Academy
• description = Your educational platform to become a Bankless Jedi
• image = https://banklessacademy.com/bankless_academy_image_meta_v3.png

Use Static Generation pre-rendering: https://nextjs.org/docs/basic-features/pages#static-generation-recommended

add definitions on text hover
assign colors to specific text
https://www.notion.so/bankless/Key-Terms-7d84bc670ac847dfb8955d2e6908a81d

for later:
insert before keyword?
insert after keyword?

feature description

• add a faucet button in the Aave quest that points to a backend API
• check in the backend that the wallet address has a wallet quest POAP by checking with https://api.poap.xyz/actions/scan/0xBD19a3F0A9CaCE18513A1e2863d648D13975CB30 and filtering with poapEventId (id is 4652)
• if the previous condition is meet & his wallet balance is low (<0.1 ETH for example), send some Kovan test ETH to that address
• ideally show feedback state in the frontend (waiting for transaction confirmation / transaction done)

comments

The first quest POAP (wallet quest) is going to act as a Sybil attack mechanism if we already check the wallet signature + twitter link verification. We can add a reCAPTCHA feature in the future to increase protection.

we have a list of potential quizzes and would like to know which ones are the most relevant

• project info
• links to Notion
• Chakra UI
• ...

• Improve the quest overview modal in QuestCards.tsx
  
• [TEMP] remove multi language
• [TEMP] remove dark mode for now + force light mode
• improve learning content display
• improve quiz answer display
• [TEMP] hide quest + about pages
• improve UI for quest difficulty

Move all the content (https://www.notion.so/bankless/OnBoard-Content-Overview-f0d55570c18c48a5959b0a41ad3e99b9?p=4587b1b1062a42f9baac08e1e589141e) to https://github.com/BanklessDAO/onboard/blob/main/src/constants/quests.ts
See if it's possible to automate the process via command line via Notion APIs.