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 inside Opera Mini browser on Android phones thereby allowing DApp developers to tap into a distribution of 100M users on integration. This guide will help you build DApps for MiniPay.

Overview

We'll walk you through the process of integrating the windows.provider object provided by the MiniPay wallet's webview with popular web3 JavaScript libraries.

When your website is loaded inside the MiniPay app's webview, the MiniPay wallet injects a Web3 provider via the windows object, akin to window.ethereum. This provider is compatible with viem and wagmi libraries that accept a Wallet Client object.

To check if your app is in the context of MiniPay, you can verify it using window.ethereum.isMiniPay.

// If you are using React.js you can check for it on mount
useEffect(() => {
  if (window.ethereum && window.ethereum.isMiniPay) {
    // User is using MiniPay wallet

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

info

MiniPay is only available on Celo and Celo Testnet. MiniPay is not available to be used on other chains.

Installing MiniPay

MiniPay is available inside Opera Mini on Android phones only. To ensure that your DApp functions as expected within the MiniPay environment, it's crucial to test it inside the MiniPay app. Here's how you can set up and test your DApp:

• Download Opera Mini Beta: Start by downloading the Opera Mini Beta application from the PlayStore on your Android phone.Download Opera Mini Beta
• Access MiniPay through Opera Mini Beta: Once you've downloaded the latest version of Opera Mini Beta application, click on the following link on your phone to access MiniPay: Access MiniPay
• Create an Account: Before you can test your DApp, you need to create an account on the MiniPay app. Follow the on-screen instructions to set up your account.

Test your DApp inside MiniPay

1. Open the MiniPay app on your phone and click on compass icon.

2. Click on "Test Page" to open the MiniPay test page.

3. Enter the URL of your DApp and click on "Go".

info

One can also setup their project, using the MiniPay template available here

Testing Local Development with MiniPay

If you're developing your DApp locally (e.g., on localhost:3000 using Next.js or a similar framework), you can use ngrok to tunnel the traffic over HTTP. This allows you to test the localhost version in real-time inside MiniPay.

• 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 supported by Ethers.js and web3.js.

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.