toniengelhardt / merklin Goto Github PK

View Code? Open in Web Editor NEW

32.0 6.0 10.0 5.46 MB

Open-source Ethereum wallet explorer made with Nuxt and Ethers.

Home Page: https://app.merklin.xyz

License: MIT License

Vue 66.50% TypeScript 32.22% CSS 1.00% Shell 0.28%

ethers nuxt web3 vue

merklin's Introduction

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

The idea is to learn and have fun.
Let's stick with the fundamentals and focus on solving problems.
The fundamentals are pseudonymity and censorship resistance.
DX is everything.
Code is art.
🌺 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.

merklin's People

Contributors

Stargazers

Watchers

Forkers

ryanpaulgannon psipherious labscrypto xstarlink omahs krismo-pl johnson86tw callixtebailly ideatrails jclaudan

merklin's Issues

Temporary icon

Refresh button

Without a wallet connected there is no way to detect updates, therefore we need a refresh button.

Historical Ethereum price

For now, daily is good enough, but later hourly would be better.

Detect ERC20 tokens

Network status for Arbitrum

Move feeds to server functions and cache

Move all the price feeds into server functions and cache them to avoid excessive use of requests.

Switching network

Dropdown is already working, actual network switch still has to be implemented.

At a later stage it would make more sense to display activity etc. from all networks simultaneously and then have a multi-select to show/hide specific networks.

In an ideal future it should not really matter (except security, etc.) on which network your assets are at any given time...

Dynamically adjust status bar color based on theme color

Install PWA module

Test action not working

Some issue with Playwright apparently.

Characterize "unknown" transactions

We have to compute the transaction type for transactions that are still shown as "unknown", aka. mints, swaps, etc.

Labels for addresses

Assets page

Use without wallet connection

Make it work without connecting a wallet.

Build error with BigInt literals

Hey @RyanPaulGannon,

I just found out that BigInt literals cause a problem when building the app. I think there are ways to change the Vite build config to make it work, but for now I fixed it by just replacing

priceFeed.getRoundData(55340232221128668506n)

with

priceFeed.getRoundData(BigInt('55340232221128668506'))

The error doesn't occur on the dev server, just when building the app.