Build on MiniPay

Building DApps for MiniPay Wallet

---

Welcome to the MiniPay wallet integration guide. MiniPay is one of the fastest growing wallets that was built out by Opera on Celo that seeks to create a simple user experience to use DApps. MiniPay is available as a standalone app and inside the Opera Mini browser on Android phones thereby allowing DApp developers to tap into a distribution of 100M users on integration.

This guide provides information on how to develop and test your dApp for MiniPay.

info

Install the new MiniPay standalone app now! 🎉 📥

Get Started with Building on MiniPay

To get started with MiniPay, we recommend testing the wallet and building a sample dApp using our starter kit. The following steps will guide you through setting up MiniPay, building your dApp, and testing it in the wallet.

1. Installing MiniPay

MiniPay is designed for mainstream adoption and web2 users, offering a different experience compared to most web3 wallets. Its primary focus is on providing a seamless user experience. When testing MiniPay, take note of the following:

• Currency presentation: Balances are displayed in your local currency.
• Stablecoin support: Only stablecoins, such as cUSD, USDC, and USDT, are available to simplify the user experience and enhance trust.
• Streamlined design: The pocket swap feature allows for easy swaps between stablecoins by dragging one pocket into another.

info

MiniPay is currently available only on Celo and Celo Testnet and does not support other blockchain networks.

MiniPay can be accessed via Opera Mini and as a standalone App, currently available only on Android.

To ensure your dApp operates correctly within the MiniPay environment, follow these steps to set up and test your dApp:

• Install the MiniPay standalone app: Download the app from the PlayStore on your Android device. Download MiniPay
• Create an Account: Set up your MiniPay account by following the on-screen instructions using your Google account and phone number before proceeding with dApp testing.

2. Create Your MiniPay dApp Using the Celo Composer MiniPay Template

Follow the Quickstart Guide for an end-to-end dApp setup and deployment.

npx @celo/celo-composer@latest create -t minipay

3. Get Testnet Tokens

To test your dApp, request test tokens from the Celo faucet.

4. Test your dApp inside MiniPay

warning

It is not possible anymore to test MiniPay in the Android Studio Emmulator!

1. Open the MiniPay app on your phone and navigate to settings.

2. In the "About" section, enable developer mode by tapping the "Version" number until the confirmation message appears.

3. Return to the settings menu, where you will now see "Developer Settings."

4. In "Developer Settings," enable developer mode and toggle "Use Testnet" to connect to the Alfajores L2 testnet.

5. To test your dApp, click "Load Test Page" and enter the URL of your dApp. If testing a local deployment, use ngrok to expose your localhost environment.

6. Once the URL is entered, click "Go" to launch the site tester and view your dApp.

5. Testing Local Development with MiniPay

If you're developing your dApp locally (e.g., on localhost:3000 using Next.js or a similar framework), use ngrok to tunnel traffic over HTTP, allowing real-time testing within MiniPay. If this is your first time working with ngrok, we recommend checking out our more in depth guide for the ngrok setup.

• Install ngrok: If you haven't already, install ngrok. You can find instructions on their official website.
• Start Your Local Server: Ensure your local development server is running. For instance, if you're using Next.js, you might run npm run dev to start your server at localhost:3000.
• Tunnel Traffic with ngrok: In your terminal, run the following command to start an ngrok tunnel:

ngrok http 3000

This will provide you with a public URL that tunnels to your localhost.

• Test in MiniPay: Copy the provided ngrok URL and use it inside the MiniPay app to test your DApp.

Get your dApp ready for MiniPay

warning

MiniPay uses Custom Fee Abstraction based transactions, which is not yet supported by Ethers.js, so if you are using Ethers.js for smart contract interactions in your dapp, those won't work inside of MiniPay. Make sure to use viem or wagmi. If you are using web3.js make sure to use our custom built plugin for fee abstraction.

1. Viem

Viem is another library gaining traction. Here's how you can integrate it:

import { createWalletClient, custom } from "viem";
import { celo, celoAlfajores } from "viem/chains";

const client = createWalletClient({
  chain: celo,
  // chain: celoAlfajores, // For Celo Testnet
  transport: custom(window.ethereum),
});

const [address] = await client.getAddresses();

2. Wagmi

Wagmi.js is an emerging library in the Ethereum ecosystem. To integrate it with MiniPay's provider, you can use the useConnect hook:

import { useConnect } from "wagmi";
import { InjectedConnector } from "wagmi/connectors/injected";

const { connect } = useConnect({
  connector: new InjectedConnector(),
});

useEffect(() => {
  connect();
}, []);

This code sets up an InjectedConnector and then utilizes the connect method from the useConnect hook. The useEffect ensures that the connection is established when the page loads.

In the Viem example, we're creating a wallet client that specifies the chain and a custom transport using window.ethereum. The getAddresses method then retrieves the connected addresses.

Important Notes

• Ensure the "Connect Wallet" button is hidden when your DApp is loaded inside the MiniPay app, as the wallet connection is implicit.

Code Example to hide Connect Wallet button if the user is using MiniPay wallet

export default function Header() {
  // State variable that determines whether to hide the button or not.
  const [hideConnectBtn, setHideConnectBtn] = useState(false);
  const { connect } = useConnect();

  useEffect(() => {
    if (window.ethereum && window.ethereum.isMiniPay) {
      // User is using MiniPay so hide connect wallet button.
      setHideConnectBtn(true);

      connect({ connector: injected({ target: "metaMask" }) });
    }
  }, []);

  return (
    <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
      {/* Conditional rendering of Connect Wallet button */}
      {!hideConnectBtn && (
        <ConnectButton
          showBalance={{
            smallScreen: true,
            largeScreen: false,
          }}
        />
      )}
    </div>
  );
}

• Always verify the existence of window.provider before initializing your web3 library to ensure seamless compatibility with the MiniPay wallet.
• When using ngrok, remember that the tunneling URL is temporary. You'll get a new URL every time you restart ngrok.
• Be cautious about exposing sensitive information or functionality when using public tunneling services like ngrok. Always use them in a controlled environment.
• MiniPay currently supports setting the feeCurrency property when running eth_sendTransaction. However, currency support is limited to cUSD. More currencies might be supported in future.
• MiniPay only accepts legacy transactions at the moment. EIP-1559 properties won't be considered when handling requests.