Fixes, Examples and UI Hints (#335)

* Added Scroll bounce on iOS fix hint

* Redirect examples for Sign In

* Fixed use of IsInstalled command

* Added Example & Use Cases for Mini App Commands

* Updated Usernames and moved it to technical references

* Added Scroll bounce hint & App icon in docs

src/pages/mini-apps/commands/connect-wallet.mdx

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

src/pages/mini-apps/commands/pay.mdx

@@ -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
@@ -88,7 +94,7 @@ export async function POST(req: NextRequest) {
           description: 'Test example payment for minikit',
         }
 
-        if (MiniKit.isInstalled()) {
+        if (!MiniKit.isInstalled()) {
           return
         }
 

src/pages/mini-apps/commands/sign-message.mdx

@@ -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
 
@@ -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.
     You should verify the signature.
 
 

src/pages/mini-apps/commands/sign-typed-data.mdx

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

src/pages/mini-apps/commands/verify.mdx

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

src/pages/mini-apps/design/app-guidelines.mdx

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

src/pages/mini-apps/reference/api.mdx

@@ -1,3 +1,5 @@
+import { Link } from '@/components/Link'
+
 # API Reference
 
 MiniKit introduces a new api for verifying transactions.
@@ -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>.

src/pages/world-id/sign-in/pitfalls.mdx

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