Giter Site home page Giter Site logo

tarunmangukiya / mm-snap-receiver-details Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 3.73 MB

MetaMask Snap to view receiver details like ENS, Lens, Gnosis Safe or more before sending transaction. This can help end user to verify receiver and adds extra layer of safety.

JavaScript 2.77% TypeScript 96.00% Shell 1.23%

mm-snap-receiver-details's Introduction

MetaMask Snap: Receiver Details

Receiver Details is a MetaMask snap that shows more details about receiver including their ENS, Lens, Unstoppable Domains, or if it is a new address, or Gnosis Safe.

What is Receiver Details Snap?

In today's world, we are always stressed about sending funds using MetaMask as we are interacting with users using addresses. This is a major reason for stress and anxiety for people interacting with MetaMask. Also, there have been many cases where people have lost their funds due to sending funds to

By using Receiver Details Snap, users can validate the address before even sending funds. We show details like

  • An ENS address linked with address on all the networks even if user is sending funds on Polygon, Linea, Optimism and others.
  • A Lens profile (name and handle)
  • Unstoppable Domains
  • Check if it's a new address
  • If receiver is Gnosis Safe, then show it's safe to send funds

Getting Started

There are 3 parts of Receiver MetaMask Snap

  1. Snap - code for MetaMask Snap
  2. APIs - API used to retrieve details about receiver
  3. Site - Used to install and interact with snap for testing

We are using yarn workspaces to manage these projects.

Initial Setup

We are using Node v18.0.0 for development. If you are using nvm then you can run nvm use command to change Node version.

You need install dependencies using yarn install before running the project for development.

Run the project locally

To run this snap locally, you need to run following command

yarn start

By running this command, there are 3 projects as mentioned above boots up.

Now you can interact with snap from http://localhost:8000/ endpoint. This is how the site looks like:

MetaMask Receiver Details Snap

Testing Snap

Install Snap

Snaps are only supported in developer version on MetaMask. You need to install MetaMask Flask from here before proceeding.

Once you open up snap website in browser as shown in above step, you need to click on Connect. This will ask you to install Receiver Details Snap in your MetaMask. Click on Connect and Install as shown in below given screenshots.

Install Snap

Use Snap

Once Snap is installed. You can send transaction to any address and view their details.

There are 4 example transactions we have given for instant try:

  • Click "Send Ether" button and you will see that the receiver is tarunm. eth.
  • Click "Send USDC" can be used to check ERC20 transfers. You will see that the receiver is tarunm.eth.
  • Click "Send to Gnosis Safe" button and you will see that the you can safely send funds to this address as it is Gnosis Safe.
  • Click "Send" button and the snap will give you a warning to check address as it's a new address. We decide this by checking addresses' transactions count.

Use Snap

Future Roadmap

  • [] Add support for Etherscan to detect receiver contract type.
  • [] Add support to show receiver's profile picture from ENS/Lens

Feedback and Suggestions

If you have any feedback or suggestion, feel free to open an issue.

mm-snap-receiver-details's People

Contributors

tarunmangukiya avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.