Log in
Updated 677 days ago

Topping

A tool who allows you to visualize and manage the assets inside your Gelato Gasless Wallet.

  • Crypto / Web3
  • Ethereum
  • Polygon
  • Arbitrum
  • Safe
  • Account Abstraction
Members 1
Team info →
youtu.be/PsePoKQUrgw
github.com/emoreno911/Topping
topping.vercel.app
Topping Logo

The cherry on the top of Gelato Gasless Wallet

The complexity of blockchain technology can be a barrier for non-tech users, particularly when it comes to understanding gas fees and storing private keys. Account abstraction allows smart contracts to interact with multiple accounts on behalf of a user, eliminating the need for users to have gas or an externally-owned account (EOA). Gasless transactions take this concept further by allowing a third party to pay for gas on behalf of the user, removing the need for users to understand gas altogether. To bring more users we need to make it easy for them and gasless wallets are a step in the right direction.

The goal of Topping is to allow users to visualize and manipulate the assets inside a Gelato Gasless Wallet. Here users can send and receive any tokens/NFTs just by login with their social accounts and without the need of any extra extension, like Metamask.

How it works?

  1. Select the network where you want to work with
  2. Login or create a new account with Web3Auth
  3. Now you have an address to receive Tokens and NFTs
  4. You can check your balances and transactions history right there
  5. You can send Tokens and NFTs too

Technologies and Services

  • NextJS
  • EthersJS
  • Tailwind
  • Alchemy API
  • Gelato Gasless Wallet

Limitations of this version

  1. Only testnets, Mumbai and Arbitrum Goerli at the moment.
  2. Needs some extra security like 2FA with Authenticator or a PIN code to authorize transactions.

Future improvements

  1. Create a browser extension and integrate EIP-1271 to interact with other dApps.

Getting Started

Environment variables

NEXT_PUBLIC_GASLESSWALLET_KEY = <Your 1Balance sponsorKey>
NEXT_PUBLIC_ALCHEMY_KEY_GOERLI = <Your Alchemy API key for Goerli>
NEXT_PUBLIC_ALCHEMY_KEY_MUMBAI = <Your Alchemy API key for Mumbai>
NEXT_PUBLIC_ALCHEMY_KEY_AGOR = <Your Alchemy API key for Arbitrum Goerli>

Create a .env file and fill it with those variables.

This is a Next.js project bootstrapped with create-next-app.

First, initialize the project with:

npm install
# or
yarn install

Then, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.