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" }) });
}
}, []);
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
- 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".
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 atlocalhost: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
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 runningeth_sendTransaction
. However, currency support is limited tocUSD
. 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.