RyanPaulGannon / merklin

Some web3 shenanigans with Nuxt 3, Vite, UnoCSS, HeadlessUI, and ethers.js

M Ξ R K L I N

website: merklin.xyz (repo)

MΞRKLIN is an attempt to build an open-source web-only (PWA) EVM wallet explorer similar to Zapper, Zerion, etc. It's made with Nuxt 3 and the goal is to provide an educational resource and to introduce Vue to the web3 stack.

The idea is to focus primarily on on-chain analytics and visualization, i.a.

• Detailed insights of wallet activity
• Funds spent on gas fees
• Ingoing/outgoing addresses, transaction frequency, etc.
• Asset distribution across networks
• NFT storage location and mutability
• Network status and comparison
• etc.

For now, only Ethereum and L2 scaling solutions: Arbitrum, Optimism, zkSync, Polygon, etc.

Adding the Bitcoin and Lightning networks is also very important, but that's for later.

Concepts

Privacy first

Pseudonymity is a core concept of decentralized protocols and preserving it is highest priority. This means, data should only be stored locally on a user's device and different addresses should never be linked together, except on the blockchain itself.

Approachability

We are still early! It's important that users who are new to decentralized applications have an easy entry point and can playfully learn how to use the app. For that, UX is key.

Web-only

No native apps! Native apps are not suitable for web3 as they are subject to App Store / Play Store T&Cs and lock out a big part of the global population. Instead, let's leverage the web platform to deliver a native-like mobile experience. More on that in this post.

Related to this, some wise words from @jack:

Principles

1. The idea is to learn and have fun.
2. Let's stick with the fundamentals and focus on solving problems.
3. The fundamentals are pseudonymity and censorship resistance.
4. DX is everything.
5. Code is art.
6. 🌺 Aloha Spirit.

Stack

Vue, Nuxt, Typescript, Vite, Vitest, Pinia, UnoCSS, HeadlessUI, chart.js, ethers.js, wagmi/core.

Setup

Clone the repo, install the dependencies with pnpm, and you're ready to go.

Dev server launches by default on http://localhost:3050.

pnpm install
pnpm dev

Documentation

Ideally, all code that is not self-explanatory should have documentation in the form of comments to make it easy for collaborators to understand. I hope this will improve as the project matures. At some point there might also be real docs based on Docus.

CI

When opening a PR to main, GitHub actions will run the following checks:

• Lint (ESLint)
• Typecheck (vue-tsc)
• Build and run tests (Vitest) for Linux, OS X, and Windows

Please make sure they pass!

Contribute

Feel free to play around and contribute, open issues, report bugs, and give feedback. The best way to start is to drop a comment on an issue you want to work on, that way we can avoid overlap.

Releases are generated with bumpp. To make the changelog work properly and to get your work included please use commit messages based on Conventional Commits and @commitlint/config-conventional, e.g.

• chore: upgrade deps
• fix: a bug
• test: something

Don't be afraid to ask questions! You can start a thread under Discussions for topics related to MΞRKLIN specifically or consult the web3 channel in the Nuxt Discord for more general questions about web3 and Nuxt. At some point we might also have our own Discord server.

---

Development insights are available on RepoTracker.

Here's a list of web3 projects that already use Vue in their stack.