npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fun-wallet

v0.3.4

Published

Fun Wallet provides modular access control functionality by leveraging account abstraction

Downloads

17

Readme

backdrop

Overview

The FunWallet SDK empowers developers to access all of web3's features while working within web2 frameworks. Leveraging the FunWallet SDK, developers can create, deploy and interact with smart contract wallets through customized, modular access control.

Features

  • 💰 Automate Defi Actions for an EOA
  • ⛽ Sponsor/Gasless Transactions
  • 🔄 Swap tokens with Uniswap

Table of Contents

  1. Install packages

  2. Add Imports

  3. Create EOA Instance

  4. Create a FunWallet

  5. Add Module

  6. Deploy FunWallet

  7. Create Token Transfer & Deploy Onchain

Quickstart

FunWallet is the simplest way to create a wallet in your React.js web application. It comes with sensible defaults out of the box so you can focus on building.

Find a live demo here.

1. Install

Download our package. If necessary, also download ethers.js.

npm install @fun-wallet/sdk [email protected]

If you do not have an API Key, request to join our private beta. If you have an API Key, go to the API Dashboard to view your API Key.

2. Create Wallet

First, set your environment variables for how your FunWallet will interact with blockchains. This information includes your API_KEY.

const options = {
    chain: CHAIN_ID,
    apiKey: API_KEY,
    gasSponsor: {
        sponsorAddress: SPONSOR_ADDRESS,
        token: "USDC"
    }
}
import { ethers } from "ethers"
import { FunWallet, TokenSponsor, configureEnvironment } from "@fun-wallet/sdk"
import { Eoa } from "@fun-wallet/sdk/auth"

// Configure gas mechanics to pay gas in USDC
const options = {
    chain: CHAIN_ID,
    apiKey: API_KEY,
    gasSponsor: {
        sponsorAddress: SPONSOR_ADDRESS,
        token: "USDC"
    }
}
await configureEnvironment(options)

/*
Get the user's EOA. This is used to:
- Fund the FunWallet with ETH
- Stake USDC in the Paymaster on behalf of the FunWallet
*/
const provider = new ethers.providers.Web3Provider(window.ethereum, "any")
await provider.send("eth_requestAccounts", [])
const eoa = provider.getSigner()
const auth = new Eoa({ signer: eoa })

// Get FunWallet associated with EOA
const uniqueId = await auth.getUniqueId()
const wallet = new FunWallet({ uniqueId })

3. Run Transactions

Execute transactions or swaps in one line of code.

// Transfer 5 USDC to TO_ADDR.
const transferReceipt = await wallet.transfer(auth, TO_ADDR, 5, "USDC")
// Swap 5 USDC for ETH
const swapReceipt = await wallet.swap(auth, "ETH", "USDC", 5, swapOptions)
import { ethers } from "ethers"
import { FunWallet, TokenSponsor, configureEnvironment } from "@fun-wallet/sdk"
import { Eoa } from "@fun-wallet/sdk/auth"

// Configure gas mechanics to pay gas in USDC
const options = {
  chain: CHAIN_ID,
  apiKey: API_KEY,
  gasSponsor: {
    sponsorAddress: SPONSOR_ADDRESS,
    token: "USDC"
  }
}
await configureEnvironment(options)

/*
Get the user's EOA. This is used to:
- Fund the FunWallet with ETH
- Stake USDC in the Paymaster on behalf of the FunWallet
*/
const provider = new ethers.providers.Web3Provider(window.ethereum, "any")
await provider.send('eth_requestAccounts', [])
const eoa = provider.getSigner()
const auth = new Eoa({ signer: eoa })

// Get FunWallet associated with EOA
const uniqueId = await auth.getUniqueId()
const wallet = new FunWallet({ uniqueId })

// Generate & deploy/execute Transactions that approve & send USDC & ETH from eoa to the Paymaster contract,
// enabling wallet to transact by draining this staked USDC
const sponsor = new TokenSponsor()
const sponsorStakeTx = await sponsor.stake(auth.getUniqueId(), 2)
const approveTx = await sponsor.approve("USDC", 10)
const stakeTx = await sponsor.stakeToken("USDC", await wallet.getAddress(), 10)
await auth.sendTxs([sponsorStakeTx, approveTx, stakeTx])
await configureEnvironment({gasSponsor: {sponsorAddress: auth.getUniqueId()}})

// Send 0.1 ETH from the EOA to
// Perform a transfer of 0.1 ETH from wallet to TO_ADDR
// This logs the difference between the amount of staked USDC in the Paymaster before & after a FunWallet transaction
await fundWallet(eoa, wallet, 0.1)
console.log(sponsor.getTokenBalance("USDC", wallet.getAddress()))
wallet.transfer(auth, { TO_ADDR, 0.1, "ETH" } )
console.log(sponsor.getTokenBalance("USDC", wallet.getAddress()))

Testing With a Fork Environment

1. [Easy] Testing with remote bundler

You can run any file inside of the test/fork folder and see the result. By default, the tests will run with Fun managed bundler and on the Fun testnet, which is a fork from ethereum mainnet.

Starting point: /fun-wallet-sdk

npm run test-funtestnet

or

env REMOTE_TEST=true npx mocha test/fork/Swap.js

2. [Pro] Testing with local bundler

You need to spin up a bundler and local fork at your local environment and then run tests. Please follow the following steps.

1. Clone the Bundler Repo

Starting point: ~/{HOME_DIR}

git clone https://github.com/TheFunGroup/bundler.git

2. Set Up the Fork and Bundler Locally

Once the bundler is cloned, follow the instructions in https://github.com/TheFunGroup/bundler/blob/main/README.md before moving onto the following steps

3. Run Test

Now the local fork is setup, you can run any file inside of the test folder and see the result.

Starting point: /fun-wallet-sdk

npm run test-localfork

or

env REMOTE_TEST=false npx mocha test/fork/Swap.js

Testing With a Goerli Environment

You can run any file inside of the test/goerli folder and see the result.

Starting point: /fun-wallet-sdk

npm run test-goerli

or

npx mocha test/goerli/Factory.js

More Documentation

For more detailed information on how to use the FunWallet SDK, please refer to the FunWallet Documentation.

Fun Team Twitter