Skip to main content

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

Get the new MiniPay standalone app now! 🎉 📥

info

Install the new MiniPay standalone app now! 🎉 📥

Get Started with Building on MiniPay​

To get started building for MiniPay we recommend testing out the wallet and building an example dapp with our starter kit. Follow the steps below to get a good understanding what it means to build for MiniPay.

1. Installing MiniPay​

As MiniPay was built for mainstream adoption and web2 users, it might have a different feel than most web3 wallets that you are used to. MiniPay has a special focus on a seamless user experience. When you test it out make sure to notice how:

  • currencies are presented: amounts are shown in your local currency
  • focus on stablecoins: only stablecoins are available, like cUSD, USDC and USDT, to simplify the user experience and build trust
  • very seamless design: notice the pocket swap where you can just pull one stablecoin pocket into the other to execute a swap
info

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

MiniPay is available inside Opera Mini and as a standalone App, so far only on Android. 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:

  • Install the MiniPay standalone app: Start by downloading the MiniPay standalone application from the PlayStore on your Android phone. Download 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 using your Google account and your phone number.

2. Create your MiniPay dApp using Celo Composer and selecting the MiniPay template (less than 5 mins).​

Follow the Quickstart guide to set up your dapp end-to-end till a live deployment.

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

3. Get Testnet tokens to test your application​

You can get test tokens from the Celo faucet.

4. Test your DApp inside MiniPay​

  1. Open the MiniPay app on your phone and go to settings.
Open MiniPay dApp store
  1. Navigate into the "About" section and enable the developer mode by clicking "Version" number until you see a message pop up that you have enabled developer mode.
Open MiniPay dApp test page
  1. When you go back into settings you should now see the option for "Developer Settings".
MiniPay dApp testing
  1. Navigate into the "Developer Settings", enable the "Developer Mode", and enable the Celo testnet Alfajores L2 by toggling "Use test net"..
MiniPay dApp testing
  1. To test your website, click "Load Test Page". A popup to enter a URL should appear. Enter the URL of your dapp here. If you want to show a local deployment, you can use ngrok.
MiniPay dApp testing
  1. When you have entered the URL of your DApp clicked on "Go", you should now get redirected to the site tester.
MiniPay dApp testing

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), you can use ngrok to tunnel the traffic over HTTP. This allows you to test the localhost version in real-time inside 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.