jarrodwatts / wallabypay

A simple web3 application that allows users to connect or create a wallet, and send funds to other users.

Wallaby Pay 🦘

An open-source web3 product to help you build your own frontend web3 applications.

What is this?

Wallaby Pay is a simple web3 application that allows users to connect or create a wallet, and send funds to other users. It uses the Polygon zkEVM to allow for fast, cheap transactions between users, but works out of the box with any EVM-compatible blockchain!

Features

Wallaby Pay uses modern frontend tools and libraries to create a simple, yet powerful web3 application. It includes features such as:

• Creating wallets for users by having them sign in with Google, Facebook, or Apple.
• Transferring funds between users by looking up their Lens handle.
• Loading the user's transaction history from the blockchain.
• Viewing the user's balance in the wallet.

Under the hood, it is powered by the following tools:

• Polygon zkEVM for fast, cheap transactions on the blockchain.
• thirdweb for wallet connection and web3 functionality.
• Covalent for wallet-level transaction history.
• Lens Protocol for social features.
• Next.js as the React framework.
• React Query for data fetching.
• Tailwind CSS & shadcn/ui as the UI library.

Get Started (Running Locally)

To get Wallaby Pay running on your local machine, it's a simple 3-step process. You'll need to have Node.js installed on your machine first.

1. Clone the repo 🌞

To start exploring the code, clone the repo and run the following commands:

# Install dependencies
npm install

2. Create an environment variables file 🏋

Next, you'll need to create a .env.local file in the root directory of the project. This file will contain your environment variables. You can use the .env.example file as a template.

It contains two variables:

• NEXT_PUBLIC_THIRDWEB_KEY: A thirdweb API public key. Used for RPC calls and wallet creation.
• NEXT_PUBLIC_COVALENT_API_KEY: A Covalent API public key. Used for fetching recent transactions in the useTransactionHistory hook.

3. Run the app! ⭐️

Start the development server by running the following command:

# Start the development server
npm run dev

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

4. Get some test funds 💰

To get some test funds, you can use the Polygon Faucet to receive free ETH on the Polygon zkEVM chain.