Take you to develop a Web3 RWA(Real World Assets) wallet from scratch

Use competitions to promote project implementation

Recently, I signed up for a new Polkadot Hackathon competition. The prize money for this competition is very generous. The first place is about 40,000 US dollars, but I have no idea whether I can win the prize.

In fact, the main purpose of participating in the competition is to create a sense of urgency for me to promote the implementation of my idea. This time I plan to build a Web3 RWA wallet, and this time the code is also directly open source.

During the project landing process, I can write a small book to introduce the technical principles of this project, etc.

In fact, I wanted to write a full-stack Web3 training course for a long time, but it never landed because I have been participating in various Web3 hackathon competitions or researching new technologies.

Wallet development will involve front-end, back-end, browser plug-ins, Web3 and other knowledge.

In this process, I hope to sort out some related technologies for developing this wallet little by little, and finally form a book.

Eventually, this book will be published on the blockchain by Web3Blog.World, the Web3 book publishing platform that I am also developing.

At that time, each chapter will have a one-time payment logic on the corresponding blockchain to support the needs of some readers who do not want to read the original book but only read some chapters.

The project code is open source

This Web3 RWA wallet project is completely open source.

Current project status: https://github.com/Web3Hacker-World/Discussions/issues/15

During the competition, the code was put here: https://github.com/NftTopBest/hackathon-2023-summer/tree/main/projects/01-NFT-Fi-Twitter/code After the competition, it will be moved to the Web3Hacker-World organization headquarters: https://github.com/Web3Hacker-World/web3-rwa-wallet

Applicable people and content planning of the book

This book is suitable for those who have a certain programming foundation, preferably with a front-end foundation, but if you think you have more learning ability or time, you can also participate with zero foundation, but it will be more difficult!

Each chapter is actually the process of advancing the development of this wallet and the problems we encounter every day.

This book is actually a tutorial book that focuses on actual combat. The best way to learn a certain technology is to learn or read a certain knowledge with goals and questions.

For example, after confirming that I wanted to write my own wallet for Web3Hacker.World, I started to study the wallet principle of MetaMask.

In the process of researching the principles, I wrote an article to introduce the knowledge I learned.

This process may be tortuous and lengthy, but I think it will be more meaningful than simply learning a certain technical knowledge point and then developing it all at once.

So after writing a few articles, I decided to turn this into a book.

In this way, in the process of developing the wallet together with everyone, we can gradually sort out this knowledge information and share it with more people.

At the same time, in the process of learning together, you may also think of some functions of the wallet waiting to be developed, then you can use your spare time to participate in the development of the code of this part of the module, and then output the chapters of the book.

This may be a process of Learn by doing, and we may be more like Learn by building && booking.

At present, the chapters of the book are still clear, because the wallet has just begun to be developed.

But the ultimate intention of the tutorial is to hope that everyone can learn with me step by step how to develop and implement the wallet.

In the last month, I will strive to update the wallet code every day, and there will be a 10-minute video demonstration at 21:00 every day to explain the progress code of the day.

Of course, if you have any questions, you can also answer them in the video conference.

Note, the video will be shared online!

Articles related to this book that have been published so far:

• \MetaMask's key encryption logic\ This article is a translated article , will be rearranged later

• \Web3 Development Technology Update: Still using web3.js or ethers.js? Try Wagmi and Viem!\

• \WebExt Bridge in action\

Early Bird Program

• The price limit for the top 10 is 99RMB.

• 11 - 100 people limit the price to 199RMB.

• The final price of this book will be 300RMB, and will receive lifetime update support.

• After becoming a member, forward and recommend new members, old members will get 20% rebates, and new members will get 20% rebates.

Additionally, this book will be part of the Full Stack Life Hacker Handbook, but that book will be priced higher and will be a membership access to all Web3Hacker.World resources.

This book is directly open to buyers of the Full Stack Life Hacker Handbook book and Web3Hacker.World's seed user members and hacker members without additional payment.

I am Bruce from Web3Hacker.World, I was All In Web3 in May 2022, and I participated in more than 10 hackathons in a row and got about 15 track awards and Grants within three months). 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 various DApps with different practical application scenarios. Participate in various hackathon competitions and try Obtain investment from Web3 investment agency.

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. We will continue to share the latest technological developments in Web3, and create an open hacker community and produce truly non-Ponzi Web3 products.

question

I saw Bob Jiang's question about multi-chain in the newly created group of LXDAO today

Developer Perspective

For contract developers (deployment), there are so many chains, each of which must be deployed. Is there any scheme to minimize developer effort? (Currently known layer2, there are 4 or 5, each of which needs to be deployed, and some contracts need to be slightly adjusted to manage multiple versions, and gas is required for each deployment)

END USER PERSPECTIVE The second question is for end users. After there are multiple layer2s, users need to switch to the corresponding layer2 network every time before using a service, and need to have the gas of this layer2 network to use it normally. User experience, very poor!

TL;DR

1. This can be completely solved by EIP2535 + DevOps. Our \BuidlerProtocol\ uses EIP2535 to land, because the code logic has far exceeded 24kb, and we also added some scripts, so that when we update or deploy the contract, it will automatically update our front-end Some parameter data related to chain and contract. At the same time, because EIP2535 is used to update large contracts, it is especially valuable, we only need to update the contract of the shard. We don't even need to change the contract address of the DApp. If the ABI does not change, the DApp is completely indifferent.

2. In this regard, users need to have a wallet that can land on AA and is different from MetaMask to solve this problem. Our new Web3 UWA Wallet is thinking and redesigning and developing a new wallet from this aspect.

View

Because we believe that the value of web3 does not lie in any chain, but in the true value of the product. The world will have only one chain or some logic to form a chain.

You can think about our real world: a product in different countries has almost the same price (except taxes and transaction fees), but in different currencies.

Currently, I just feel like different chains have different fee costs, almost like taxes and tx fees in the real world, in the end, the fastest and cheapest chain will win the race, but the value of the product wins all chains.

That's why we started building a Web3 RWA wallet, which, unlike MetaMask, focuses on bringing real-world assets to Web3.

Past review

• \The latest technology stack updates related to Web3 development && how does MetaMask save your wallet key? \

• \Web3 Development Technology Update: Still using web3.js or ethers.js? Try Wagmi and Viem!\

• \Resignation All in Web3 year review and some views on Web3 NFT (1)\

• \Resignation All in Web3 year review and some views on Web3 NFT (2)
  *\Some thoughts on 2023-2025 is Web3's iPhone moment article\

• \Some Tips for Applying for Alliance Investment Incubation\

• \Introduce the necessary out-of-the-box Web3 metaverse NFT development necessary scaffolding for Web3 bounty hackers\

• \A solution to make your NFT have unlimited possibilities\

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. We will continue to share the latest technological development of Web3, and create an open hacker community and produce truly non-Ponzi Web3 products

This article was compiled when we studied the logic of message transmission between different modules of the browser extension organized by webext-bridge in the process of developing the RWA wallet of Web3. In the end, we will have two open source project outputs:

• WebExtension Vite Starter Web3 RWA Wallet Full Stack Developer Tutorial write a using \vitesse-webext\ A book on developing RWA wallets

• Web3 RWA Wallet

This article introduces the usage of WebExt Bridge.

WebExt Bridge allows you to have a more unified and convenient message transmission logic when developing browser extensions.

TL;DR

• content-script <=> background, popup, option

// content-script
const yourJsonDataToPass = { what: ‘ever json you want to pass here’ }
await sendMessage(‘eventNameA’, yourJsonDataToPass, ‘background’)
onMessage(‘eventNameB’, async (msg) => { console. log(msg) })

// background or popup

// currentTabId only can get in background script, so you should store it in storage so in popup we can get the tabId
const currentTabId = ref(‘’)
browser.tabs.onActivated.addListener(async ({ tabId }) => {
currentTabId.value = tabId
})
onMessage(‘eventNameA’, async (msg) => { console. log(msg) })
await sendMessage(‘eventNameB’, yourJsonDataToPass, `content-script@${tabId}`)

• Except for content-script, it is relatively simple for other parties to send and receive messages to each other, no need to attach tabId

default setting

I have prepared a demo code in the webext-bridge branch, so that everyone can try it quickly.

git clone — depth=1 git@github.com:Web3HackerWorld/vitesse-webext-tutorial.git — branch webext-bridge
cd vitesse-webext-tutorial
pnpm i
pnpm dev

The pnpm dev command uses run-p to run multiple scripts starting with dev: at the same time, where dev:html is to automatically open a local webpage for you, so that you can directly view the effect of the browser extension.

After opening the page, our Vitesse webext tutorial browser extension will not appear, you need to open chrome://extensions/, click Load unpacked, and then navigate to the extensions directory of this code.

Note that after modifying the manifest.ts file, you need to manually delete the extension and then click the Load unpacked button to load it again. Other code modifications can be done by installing [Extensions Reloader](https://chrome.google.com/webstore /detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid) to facilitate you to click the button to refresh the extension. Of course, you can directly open chrome://extensions/ and click the reload button in the lower right corner of your extension.

1. content-script <=> background

content-script => background

1. In content-script (/src/contentScripts/views/App.vue) define content-scipt=>background send button code

<button @click=”doContentScriptToBackground”>
content-script=>background
</button>

import { sendMessage } from ‘webext-bridge/content-script’

const clickCount = ref(1)
const doContentScriptToBackground = async () => {
await sendMessage(‘content-scipt=>background’, {
count: clickCount. value,
}, ‘background’)
clickCount. value++
}

1. Define the receiving function of the message in background (/src/background/main.ts)

onMessage(‘content-script=>background’, async (msg) => {
console.log(‘====> msg :’, msg)
const keys = Object. keys(msg)
const { sender, data } = msg
console.log(‘====> keys, sender, data :’, keys, sender, data)
})

1. Open the service worker of your extension (open chrome://extensions/, find the Vitesse WebExt Tutorial extension, there is an Inspect views service worker button, click it and it will pop up

1. Click the content-scipt=>background button injected by the extension on the webpage, and you will see a log similar to this in the service worker.

content-script <= background

At this point, we can trigger the content-script<=background event when background receives a content-scipt=>background message.

1. Add the following code in App.vue (/src/contentScripts/views/App.vue) to define the content-scipt<=background event.

onMessage(‘content-script<=background’, async (msg) => {
// eslint-disable-next-line no-console
console.log(‘====> content-scipt<=background msg :’, msg)
return { cool: ‘Got you! I am cool from content-script’ }
})

1. The content-scipt=>background event callback function in background (/src/background/main.ts) defines the code that sends a message to content-scipt<=background, here we take a trick, in Click on the web interface to trigger the event background, and immediately trigger a new event to the front-end content-script, the complete code is as follows:

onMessage(‘content-script=>background’, async (msg) => {
// eslint-disable-next-line no-console
console.log(‘====> msg :’, msg)
const keys = Object. keys(msg)
const { sender, data } = msg
// eslint-disable-next-line no-console
console.log(‘====> keys, sender, data :’, keys, sender, data)

const rz = await sendMessage(‘content-scipt<=background’, {
time: new Date(),
}, `content-script@${currentTabId}`)
// eslint-disable-next-line no-console
console.log(‘====> response from content-sciript’, rz)

return { yaha: ‘hoho’ }
})

we are here too Added the return data to the previous sendMessage, so we also modified the previous doContentScriptToBackground function

const doContentScriptToBackground = async () => {
const rz = await sendMessage(‘content-scipt=>background’, {
count: clickCount. value,
}, ‘background’)
clickCount. value++
// eslint-disable-next-line no-console

console.log(‘====> doContentScriptToBackground sendMessage rz :’, rz)
}

Click the reload button of the extension to reload the extension to trigger the refresh of service worker, and then refresh the web page http://localhost:5173/, you may need to switch to another tab and then switch back, because We need to get the currently active tabId in background

let currentTabId = 0
// communication example: send previous tab title from background page
// see shim.d.ts for type declaration
browser.tabs.onActivated.addListener(async ({ tabId }) => {
currentTabId = tabId
})

1. Finally, you can click the button on the webpage to trigger the content-scipt=>background event again. After background receives this event, it also triggers a new content-scipt<=background event to the webpage contentScripts

content-script <=> popup

1. In content-script (/src/contentScripts/views/App.vue), define the code of content-scipt=>popup to send the button and the event code of content-scipt<=popup to receive the message.

<br>
<br>
<button @click=”doContentScriptToPopup”>
content-script=>popup
</button>

const doContentScriptToPopup = async () => {
const rz = await sendMessage(‘content-scipt=>popup’, {
count: clickCount. value,
}, ‘popup’)
clickCount. value++
// eslint-disable-next-line no-console
console.log(‘====> doContentScriptToPopup sendMessage rz :’, rz)
}

onMessage(‘content-script<=popup’, async (msg) => {
// eslint-disable-next-line no-console
console.log(‘====> content-scipt<=popup msg :’, msg)
return { cool: ‘Got you popup! I am cool from content-script’ }
})

1. Define the event content-script=>popup and the sendMessageToContentScript button in popup (/src/popup/views/popup.vue), so that we can click the button in the popup to trigger logic to send a message to contentScript. We defined currentTabId in storage, so that we can get the currently active tabId in popup, so that there is a way to send a message to the content-script of the tabId.

import { currentTabId } from ‘~/logic/storage’

const count = ref(0)
onMessage(‘content-script=>popup’, async (msg) => {
// eslint-disable-next-line no-console
console.log(‘====> content-scipt=>popup msg :’, msg)
count.value = msg.data.count
return { cool: ‘Got you! I am cool from popup’ }
})

const sendMessageToContentScript = async () => {
console.log(‘====> currentTabId.value :’, currentTabId.value)
const rz = await sendMessage(‘content-scipt<=popup’, {
time: new Date(),
}, `content-script@${currentTabId.value}`)
// eslint-disable-next-line no-console
console.log(‘====> response from content-sciript’, rz)
}

currentTabId {{ currentTabId }} <br >
count from content-script: {{ count }}
<button class=”mt-2 btn” @click=”sendMessageToContentScript”>
content-scipt&lt;= popup
</button>

1. Now you can right-click the browser extension icon, click the menu item Inspect Popup at the bottom of the pop-up menu, and then click content-script=>popup on the left, you can see content-script to popup The message has been sent, and the event receiving callback inpopupreturns{ cool: ‘Got you! I am cool from popup’ }tocontent-script. Note that the event monitoring of content-scipt=>popupcan only be registered successfully ifpopupis opened here. If thepopuppop-up window has not been opened, click oncontent-scipt=>popupon the page and an error will be reported. of. Because thepopup` code doesn’t run at all. All such scenarios are estimated to be used less in actual development.

1. Then click the content-scipt<=popup button in popup, then you can see the content-scipt<=popup event listener callback triggered by content-script, and return { cool: ‘Got you popup! I am cool from content-script’ } gave popup

popup <=> background

1. Add event listener and send code in background

onMessage(‘background<=popup’, async (msg) => {
// eslint-disable-next-line no-console
console.log(‘====> msg :’, msg)
const keys = Object. keys(msg)
const { sender, data } = msg
// eslint-disable-next-line no-console
console.log(‘====> keys, sender, data :’, keys, sender, data)

const rz = await sendMessage(‘background=>popup’, {
time: new Date(),
}, ‘popup’)
// eslint-disable-next-line no-console
console.log(‘====> response from popup’, rz)

return { yoho: ‘huhu’ }
})

1. Add event listener and send code in popup

onMessage(‘background=>popup’, async (msg) => {
// eslint-disable-next-line no-console
console.log(‘====> background=>popup msg :’, msg)
count.value = msg.data.count
return { cool: ‘Got you! I am cool from popup’ }
})

const sendMessageToBackground = async () => {
const rz = await sendMessage(‘background<=popup’, {
time: new Date(),
}, ‘background’)
// eslint-disable-next-line no-console
console.log(‘====> response from background’, rz)
}

<br>
<br>
<button class=”mt-2 btn” @click=”sendMessageToBackground”>
background&lt;= popup
</button>

1. As shown in the figure, open the console of service worker (lower right) and the console of popup (upper right)

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 various DApps with different practical application scenarios. Participate in various hackathon competitions and try Obtain investment from Web3 investment agency. In this process, I will use Web3 technology to develop a series of products and actually use them in the process. For example, use the Web3 blog platform to share our subsequent paid-to-read articles Web3NFT.Social.

— -

Past review

• \The latest technology stack updates related to Web3 development && how does MetaMask save your wallet key? \

• \Web3 Development Technology Update: Still using web3.js or ethers.js? Try Wagmi and Viem!\

• \Resignation All in Web3 year review and some views on Web3 NFT (1)\

• \Resignation All in Web3 year review and some views on Web3 NFT (2)
  *\Some thoughts on 2023–2025 is Web3’s iPhone moment article\

• \Some Tips for Applying for Alliance Investment Incubation\

• \Introduce the necessary out-of-the-box Web3 metaverse NFT development necessary scaffolding for Web3 bounty hackers\

  \A solution to make your NFT have unlimited possibilities\

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

TL;DR

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

detail version

• 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

Hello, this article is the weekly update log of Web3Hacker.World, which will synchronize the progress and information of the Web3Hacker.World ecology.

Weekly recommended news links will be added in the next issue, and contributions are welcome at https://github.com/Web3Hacker-World/Discussions/issues/10 (future data sources will be read from the Web3Hacker.News platform)

Source of this issue: https://github.com/Web3Hacker-World/Discussions/issues/9

Note that the source links include some PR links, etc., because some projects are not yet public, so non-hacker member users may have errors that they cannot be found when clicking some PR links. To access all private codes, you need to become a hacker member. For seed user members and VC members, after some products of Web3Hacker.World are launched, NFT will be issued to obtain access to paid content.

Web3 Tea Party

Another week has passed, and last week the newly joined hacker members suggested that we could create an article such as a weekly progress report to synchronize information with everyone.

I actually thought about doing this very early, including doing weekly tea parties for all staff. However, given that there are not enough hacker members and the technical framework of Web3Hacker.World has not yet been fully formed, from my point of view, it seems that the content of the tea party is not rich enough. You can try launching this week to see everyone's feedback.

The Web3 tea party is currently tentatively scheduled to be every Sunday at 15:00 pm. Mainly to prevent crashes with other conferences, the tea party mainly provides weekly progress sharing of Web3Hacker.World and free sharing of any information that they think can be shared with everyone. Currently only members of . Web3Hacker.World can participate (Hacker Members, Seed User Members, VC Members).

##BS-Craft At present, the main line of Web3Hacker.World is to promote the development of bs-craft technical framework, and eventually become a standard development framework platform and protocol for everything can be NFT.

At present, this technical framework system has been migrated to Web3Hacker.News, Web3Blog.World, Web3NFT.Social products.

This week, we mainly put the core architecture of BS-Craft on the ground. The technology is based on Nuxt3 / EthersJS / LitProtocol. At the same time, we applied the layer extension method of nuxt3 when refactoring Web3Hacker.News

export default defineNuxtConfig({
   extends: [
     '../bs-craft',
     // https://nuxt.com/docs/guide/going-further/layers#git-repository
     // 'github:Web3Hacker-World/bs-craft#v0.0.1', // require to setup GIGET_AUTH=<token>
   ]
})

The current development mode is to clone the bs-craft code to the local parent at the same level as your project, and then use the relative path to expand. In the future official version, you can directly use the github link to import the specified version.

The Layer architecture mode of NuxtJS 3 brings great convenience to program architecture reuse. At the same time, when we develop new projects, we can submit code in our new projects without worrying about program code logic reuse. Once our new project enters a stage, we can in turn abstract part of the code logic into the bs-craft library for reuse by other projects.

One step further, the official NuxtLab is also developing a logic low-code platform Nuxt Studio.

Another praise, the designers of NuxtLab are very good, and the development team is also a bigwig in the industry~~

##Web3Hacker.News

This project was started in March, and it was positioned as a Web3 version of HackerNews based on BuidlerProtocol. At that time, only the basic functions of Web2 were realized. In the process of doing it, a new hole Web3Blog.World (current domain name Web3NFT.Social) was opened.

Now Web3Blog.World V1 version is completed, so we will go back and develop Web3Hacker.News based on the nuxt layer of bs-craft to expand the model, and then we will quickly refactor Web3Blog.World to extend bs-craft version. I believe the reconstruction speed will be very fast. Because most of the functions are available out of the box.

Open source contribution nuxt3 content

When using docus.dev as a document site, I found that its multi-language architecture function is not perfect enough. After further searching, I found that other people also have this demand. In the past two weeks, I spent half a day researching docus.dev and content. I only configured it so that it can display documents in a certain language separately, and then deployed it to https://zh-docs.web3hacker.world/

The final effect should be similar to vitepress, etc. You can have a multi-language switcher in the upper right corner of docs.web3hacker.world, so that you can switch to different languages ​​of the same document at the same time without switching domain names.

It took about 10 hours yesterday to submit a PR to content, which enables multi-language switching, but there are still remaining bugs. PR: https://github.com/nuxt/content/pull/2075#issuecomment-1556179705 Legacy Bugs: https://github.com/NftTopBest/nuxt-content/issues/1

By the way, if this PR is successfully implemented, someone will be willing to pay 0.04 BTC https://github.com/nuxt-themes/docus/issues/770

Register for the Polkadot 2023 Summer Hackathon

Earlier CZ replied to Elon Musk on Twitter about how Web3 can help Twitter reduce bots etc. In fact, I started thinking about this idea last year, but at that time Web3 technology was not yet mature, and I hadn’t figured out how to implement it. In fact, the current Mask plug-in can also solve this problem. I'm not sure about the market share of Mask products though. For me, this hackathon will be used to advance the development of NFT-Fi-Twitter. Of course it will also be based on BuidlerProtocol. In the long run, this will eventually become a window for BuidlerProtocol to link to all external web platforms. In the short term, it is hoped that the PoC version will be launched within a month, and a natural income of 1w/month is enough within a few months.

Of course, the development direction is estimated to be similar to Mask, and a plug-in system will also be designed to allow third-party developers to join in module development.

In addition, students who are interested in participating in this Polkadot Hackathon are welcome to sign up, and they can sign up before July 4th.

Opened a few pits

In the process of developing bs-craft, I have studied the related architecture of nuxt3 in depth. This market is a blank, and it is also a very optimistic technology development direction (compared with the technical ecology of react, it feels too messy) .

There are still many gaps in the ecology of Nuxt that can be filled, so a few pits were opened, hacker members are welcome to join in to fill the pits, and there will be a revenue-related distribution mechanism in the future (of course, it will be distributed based on the $BST of our BuidlerProtocol https://zh- docs.web3hacker.world/buidlers.space/what-is-bst)

nuxtcn.web3hacker.world

• Will translate nuxt3 related documentation, blog content, etc.

Writing a Book Web3-Nuxt3 Full Stack Developer Guide

This book is positioned around the Nuxt3 technology stack to integrate Web3 and BuidlerProtocol to develop Web3 full-stack application products.

• Record the development process and code logic of bs-craft

• Analyze the core logic of nuxt3

• Comes with the development practice of several products of Web3Hacker.World

Buidler Protocol JS SDK

This project will abstract the various functions of BuidlerProtocol into a set of js sdk

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