Skip to content

Commit

Permalink
chore: changes to Minipay overview page (#1534)
Browse files Browse the repository at this point in the history
  • Loading branch information
therealharpaljadeja authored Oct 14, 2024
1 parent 1db52b4 commit ca532ff
Showing 1 changed file with 12 additions and 21 deletions.
33 changes: 12 additions & 21 deletions docs/developer/build-on-minipay/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,56 +9,47 @@ 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.

<img
src={"/img/doc-images/minipay/build-on-minipay/minipay-1.png"}
style={{ width: 250 }}
alt="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.

<img
src={"/img/doc-images/minipay/build-on-minipay/minipay-2.png"}
style={{ width: 250 }}
alt="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".

<img
src={"/img/doc-images/minipay/build-on-minipay/minipay-3.png"}
Expand All @@ -70,7 +61,7 @@ MiniPay is available inside Opera Mini on Android phones only. To ensure that yo
One can also setup their project, using the MiniPay template available [here](https://github.com/celo-org/minipay-template)
:::

### Testing Local Development with MiniPay
#### 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.

Expand Down

0 comments on commit ca532ff

Please sign in to comment.