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.

Get Started with Building on MiniPay

1. Create your MiniPay dApp using Celo Composer (less than 5 mins)

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

2. Get Testnet tokens from faucet.celo.org

3. Installing MiniPay

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 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.

4. Test your DApp inside MiniPay

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

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

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

info

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

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.

• 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.