diff --git a/docs/developer/build-on-minipay/overview.mdx b/docs/developer/build-on-minipay/overview.mdx index 441e098bf2..3fa49ac63d 100644 --- a/docs/developer/build-on-minipay/overview.mdx +++ b/docs/developer/build-on-minipay/overview.mdx @@ -9,40 +9,31 @@ description: A guide for building on MiniPay and Celo. Welcome to the MiniPay wallet integration guide. [MiniPay](https://www.opera.com/products/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 +### Get Started with Building on MiniPay -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. +#### 1. Create your MiniPay dApp using Celo Composer (less than 5 mins) -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](https://viem.sh/docs/introduction)** and **[wagmi](https://wagmi.sh/)** libraries that accept a [Wallet Client](https://viem.sh/docs/clients/wallet#json-rpc-accounts) object. - -To check if your app is in the context of MiniPay, you can verify it using `window.ethereum.isMiniPay`. +```bash +npx @celo/celo-composer@latest create -t minipay +``` -```js -// 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 +#### 2. Get Testnet tokens from [faucet.celo.org](https://faucet.celo.org/) - connect({ connector: injected({ target: "metaMask" }) }); - } -}, []); -``` +#### 3. Installing MiniPay :::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](https://play.google.com/store/apps/details?id=com.opera.mini.native.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](https://opmini.page.link/d6VPt8LBwbAxstun8) - **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 +#### 4. Test your DApp inside MiniPay -1. Open the MiniPay app on your phone and click on compass icon. +Open the MiniPay app on your phone and click on compass icon. Open MiniPay dApp store -2. Click on "Test Page" to open the MiniPay test page. +Click on "Test Page" to open the MiniPay test page. Open MiniPay dApp test page -3. Enter the URL of your DApp and click on "Go". +Enter the URL of your DApp and click on "Go".