Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes, Examples and UI Hints #335

Merged
merged 11 commits into from
Dec 20, 2024
5 changes: 5 additions & 0 deletions src/pages/mini-apps/commands/connect-wallet.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,8 @@ Wallet auth returns a wallet address upon completion. If you don't want to use S
just use the `walletAuth` command and skip the verification of the payload.

<Link href="/mini-apps/commands/wallet-auth">Go to Wallet Auth Section</Link>

**Use Case:** This command is useful for applications that require user authentication via their Ethereum wallet,
allowing for secure access without traditional credentials.

**Example:** An app that allows users to manage their assets and trade tokens directly from their wallet without needing to create a separate account.
12 changes: 9 additions & 3 deletions src/pages/mini-apps/commands/pay.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,14 @@ import Tabs, { TabItem } from '@/components/Tabs'

# Pay

Pay, as the name suggests, allows developers to build native payment experiences directly inside of their mini app.
At launch, WLD and USDC.e will be supported. Payments are easy to use and only have three simple steps.
This command is essential for applications that need to facilitate payments directly within the app,
enabling seamless transactions for users. At launch, WLD and USDC.e will be supported.

**Example:** Enabling an e-commerce platform to allow users to purchase digital goods using cryptocurrencies,
providing a smooth checkout experience.


Payments are easy to use and only have three simple steps.

1. Creating the transaction
2. Sending the command
Expand Down Expand Up @@ -88,7 +94,7 @@ export async function POST(req: NextRequest) {
description: 'Test example payment for minikit',
}

if (MiniKit.isInstalled()) {
if (!MiniKit.isInstalled()) {
return
}

Expand Down
11 changes: 9 additions & 2 deletions src/pages/mini-apps/commands/sign-message.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,14 @@ import Tabs, { TabItem } from '@/components/Tabs'

# Sign Message

Sign message lets you create an EIP-191 signature.
Sign message lets you create an [EIP-191](https://eips.ethereum.org/EIPS/eip-191).
You should verify the signature.

**Use Case:** This command is useful for applications that need to sign messages for verification purposes,
ensuring that the message was indeed created by the owner of the wallet.

**Example:** A voting app that requires users to sign a message to prove ownership
of their wallet before allowing them to vote.

## Using the command

Expand All @@ -13,7 +20,7 @@ Sign message lets you create an EIP-191 signature.

### Sending the command & handling the response

The response will include a signature compliant with [EIP-191](https://eips.ethereum.org/EIPS/eip-191).
The response will include a signature compliant with EIP-191.
michalstruck marked this conversation as resolved.
Show resolved Hide resolved
You should verify the signature.


Expand Down
7 changes: 6 additions & 1 deletion src/pages/mini-apps/commands/sign-typed-data.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
# Sign Typed Data

Sign Typed Data lets you create an EIP-712 [signature](https://eips.ethereum.org/EIPS/eip-712).
Sign Typed Data lets you create an [EIP-712 signature](https://eips.ethereum.org/EIPS/eip-712).

**Use Case:** This command is essential for applications that require structured data to be signed.

**Example:** An insurance platform that requires users to sign typed data to confirm the terms of their insurance policy.


## Using the command

Expand Down
6 changes: 6 additions & 0 deletions src/pages/mini-apps/commands/verify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ The verify command lets you use <Link href="/world-id/id/cloud">incognito action

To use incognito actions, first create one in the <Link href="https://developer.worldcoin.org/">Developer Portal</Link>.

**Use Case:** This command is crucial for applications that require user verification to access certain features,
ensuring that only verified humans can perform actions. You can set up the incognito action limiting the number of times a user can perform an action.

**Example:** An game that requires users to verify their identity before playing to have a bot free experience.


## Using the command

<Tabs>
Expand Down
25 changes: 17 additions & 8 deletions src/pages/mini-apps/design/app-guidelines.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,22 @@ Mini apps are inherently accessed via mobile, so your application UI should look
</div>
## Scroll Bounce on IOS.

We recommend you avoid scroll bounce error on iOS devices. This error might happen when you use vh, vw or 100%.
Try disabling autoscroll & maybe fixed position elements or using 100dvh instead of 100vh.
We recommend you avoid scroll bounce error on iOS devices. Try disabling autoscroll & maybe fixed position elements or using 100dvh instead of 100vh.

If you are not using a bottom navigation bar, you can use the following CSS to disable the scroll bounce error:

```css
html,body {
width: 100vw;
height: 100vh;
overscroll-behavior: none;
overflow: hidden;
}
```

## App Icon

Your app icon should be a **square** image with a non white background.

## Load times
For mini apps, 2-3 seconds max for initial load and under 1 second for subsequent actions should be your target.
Expand All @@ -68,12 +81,8 @@ These languages are particularly important given our users:

## Usernames

You should never display the user's wallet address; instead, always use their username.
Usernames are ENS-compatible identifiers for every World App user, ensuring consistency and easy recognition.
For example, when displaying transaction history, show the username instead of the wallet address to make it more user-friendly and private.
For implementation details, refer to the documentation <Link href="https://usernames.worldcoin.org/docs">World Usernames Documentation</Link>.

If you use Sign in with World ID you should not be doing any transactions with the user's wallet address. Instead, you should be using the username.
You should never display the user's wallet address, always use their username.
If you use Sign in with World ID you should not be doing any transactions with the user's wallet address, instead you should be using the username.
Sign in with World ID and Verify offer the same World ID guarantees, but Verify is more reliable.


Expand Down
9 changes: 6 additions & 3 deletions src/pages/mini-apps/reference/api.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Link } from '@/components/Link'

# API Reference

MiniKit introduces a new api for verifying transactions.
Expand Down Expand Up @@ -204,6 +206,7 @@ Detailed are a just a few values in the return that could be confusing. See the
</Col>
</Row>

## Get Usernames{{ tag: "GET", label: "https://usernames.worldcoin.org/api/v1/" }}
Usernames are our third party ENS compatible name service. Here you can find detailed [documentation](https://usernames.worldcoin.org/docs) and
try the endpoints.
## Usernames
Usernames are ENS-compatible identifiers for every World App user, ensuring consistency and easy recognition.
For example, when displaying transaction history, show the username instead of the wallet address to make it more user-friendly and private.
For implementation details, refer to the documentation <Link href="https://usernames.worldcoin.org/docs">World Usernames Documentation</Link>.
13 changes: 11 additions & 2 deletions src/pages/world-id/sign-in/pitfalls.mdx
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
# Sign In with World ID Common Pitfalls

<br/>
<br />

## Invalid Redirect URI

Ensure you've added your application's sign in callback URL to the list of allowed Redirect URIs in the Developer Portal.

<Note>Redirect URIs using `http`, `localhost`, or port numbers are only allowed for Staging applications.</Note>

### Redirect URI Example

```tsx
https://example.com/path/to/auth/callback/worldcoin
```

## Unauthenticated Errors

Ensure your Client ID and Client Secret are properly set in your environment variables according to your authentication library's documentation.

<Note>The Client Secret should never be exposed in client-side code. If accidentally committed to your codebase, you should rotate the client secret in the Developer Portal.</Note>
<Note>
The Client Secret should never be exposed in client-side code. If accidentally committed to your codebase, you
should rotate the client secret in the Developer Portal.
</Note>
Loading