Web3Hacker.World is an ecosystem built around the concept of Everything can be Web3, which gathers programmers and hackers, seed users who are curious about new things, and vc investors. There are currently 19 paid members

I am Bruce from Web3Hacker.World. I was All In Web3 in May 2022. After that, I participated in more than 10 hackathons in a row and got about 15 track awards and Grants within three months, with a cumulative output value of 700,000 About RMB (including subsequent participation in other teams). Later, I experienced a rest, moved to the seaside (lazy for a few months), and learned a lot of new technologies. Now a new round of Web3 nuggets has begun. This wave mainly revolves around the BuidlerProtocol created by me to create a cross-chain Web3 App Store ecological platform of Everything can be Web3 to create a variety of DApps with different actual RWA (Real World Assets) application scenarios. Hackathon competition and try to get early seed users of RWA. In this process, I will use Web3 technology to develop a series of products, and synchronously output and summarize and share some relevant technical materials for developing these products.

This week, I started to sign up for the Polkadot Hackathon. This time I plan to make an NFT-Fi-Twitter browser plug-in, which allows Twitter users to post NFT-Gating twitter or comments, and users who want to view encrypted content need to Pay $BST to unlock (the corresponding NFT will be obtained as a payment certificate when you pay to unlock), and a series of technical expansions need to be studied in the process of doing it.

All relevant information and content can be viewed and discussed through our github discussion section, welcome to visit: ​https://github.com/orgs/Web3Hacker-World/discussions

• NFT-Fi-Twitter: BuidlerProtocol application wallet that can be injected into various pages

  • content inject part: the content data list and new content form are injected into the page

  • options: The UI of the entire onboard module is set up. In order to realize the key storage function of the wallet, I translated How does MetaMask save your wallet key? This article, but the author is actually a Chinese, only written in English article

• vue3-wagmi Students who develop the Web3 components of the vue ecosystem are welcome to sign up, and Web3Hacker.World will launch incentive mechanisms in succession

• wagmi-cn will organize the translation of wagmi and viem documents that have nothing to do with react (ie the general part)

• Browser plug-in development related technologies: Plasmo / vitesse-webext

  • Plasmo

    • This technology has attracted attention last year, but there has been no actual combat. The NFT-Fi-Twitter browser extension for this project also re-read a wave of his documents and sample codes at the beginning, but it was not used in the end.

    • Because the vue technology stack is used, although there are vue sample codes in it, the actual large-scale engineering development still requires a lot of configuration and modular design

    • Although open source, I haven't seen many low-level configurations that can be set freely. It feels a bit tied up. If you want to modify a vite configuration, you have to go through additional documents or codes.

• Ended up using vitesse-webext

• This is a variant of vitesse

• Although his existing code logic has not fully designed a large-scale engineering and open architecture design, we can freely modify some underlying settings

• Our previous Craft V1 and last year's web3-framework were actually further developed on the basis of it

• At present, our Craft V2, Nuxt3 version is also developed on the basis of its Nuxt variant with an additional design architecture to inherit the layer mode

• The design ideas of these various variants are the same, to create a unified and consistent code architecture design that can simplify the programmer's development mind

• In fact, most of the kits in this series are the same

  • Vue3, Vite, pnpm, esbuild

  • File based routing

    • It is not supported in the webext version, we also modified it this week, and designed the routing prefix of options/popup

  • Components are automatically imported

  • State management via Pinia

    • The webext version does not yet use Pinia

  • Layout system

    • It was not supported in the webext version, we also implemented it this week

  • UnoCSS

  • Quickly use various Icons without importing

• We have made further modifications according to the needs of Web3 development

  • Introduced using Wagmi 4.5k star

    • Its initial positioning is React Hooks of Ethereum (but EVM compatible ones are available)

    • The latter abstracts a set of ts native apis, so we can encapsulate a set of vue composables apis on this basis

      • See a project in its awesome repository

        • A vagmi, but the author actually abandoned the pit

          • It is estimated that there are relatively few people who use Vue to develop Web3. There are few users. This buddy can’t stand the loneliness and abandons the pit (and he said that he will no longer do Web3 development)

          • I feel that there needs to be a non-Ponzi Web3 incentive at the level of software open source to promote the iterative development of code tools, but the core is that the author himself has this enthusiasm and a certain background support to promote it, and love power alone cannot be maintained for a long time

        • There are actually other vue stacks on the market, but they are not very active

      • Web3Hacker.World also opened a pit last week, but it has not pushed the code yet: https://github.com/Web3Hacker-World/Discussions/issues/17, welcome vue3 technology stack students to sign up in the post

  • ethersjs is replaced by Viem

    • Wagmi and Viem are developed by the same very active team that started Wagmmi 16 months ago https://twitter.com/wagmi_sh/status/1655993650621317149

    • This time, based on the intensive development of the past 16 months, an additional abstraction Viem, used to replace ethers.js

    • We also spent a lot of time this week on a wave of in-depth research, and will follow up to organize the translation of Wagmmi and Viem's Chinese documents. These materials will eventually be put on BuidlerProtocol and provided to our hackers in the NFT-Gating mode of Web3 Member use

    • Interested students are welcome to sign up: https://github.com/Web3Hacker-World/Discussions/issues/18