From a51434fe889d072f9e920a441f229aadc6b86812 Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Wed, 11 Dec 2024 10:59:10 -0300 Subject: [PATCH 01/10] Added Scroll bounce on iOS fix hint --- src/pages/mini-apps/design/app-guidelines.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/mini-apps/design/app-guidelines.mdx b/src/pages/mini-apps/design/app-guidelines.mdx index d0e34198..42cb5504 100644 --- a/src/pages/mini-apps/design/app-guidelines.mdx +++ b/src/pages/mini-apps/design/app-guidelines.mdx @@ -45,6 +45,10 @@ Mini apps are inherently accessed via mobile, so your application UI should look ✅ Good Example
Bottom tab navigation and anchored buttons +## 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. ## Load times From 407e9cd53b00630ccd4e1aaa909c33b8b5c32f8e Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Thu, 12 Dec 2024 14:43:07 -0300 Subject: [PATCH 02/10] Redirect examples for Sign In --- src/pages/world-id/sign-in/pitfalls.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/pages/world-id/sign-in/pitfalls.mdx b/src/pages/world-id/sign-in/pitfalls.mdx index ddf6d133..a2f32a70 100644 --- a/src/pages/world-id/sign-in/pitfalls.mdx +++ b/src/pages/world-id/sign-in/pitfalls.mdx @@ -8,6 +8,13 @@ Ensure you've added your application's sign in callback URL to the list of allow Redirect URIs using `http`, `localhost`, or port numbers are only allowed for Staging applications. +```{{ title: 'Redirect URI Example' }} +https://example.com/path/to/auth/callback +``` +```{{ title: 'Next.js example' }} +https://example.com/api/auth/callback. +``` + ## Unauthenticated Errors Ensure your Client ID and Client Secret are properly set in your environment variables according to your authentication library's documentation. From 077582ef060b48d3f3ab6a499d73072b5fafcad4 Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Thu, 12 Dec 2024 14:48:30 -0300 Subject: [PATCH 03/10] Fixed use of IsInstalled command --- src/pages/mini-apps/commands/pay.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/mini-apps/commands/pay.mdx b/src/pages/mini-apps/commands/pay.mdx index 1641572c..4856f62d 100644 --- a/src/pages/mini-apps/commands/pay.mdx +++ b/src/pages/mini-apps/commands/pay.mdx @@ -88,7 +88,7 @@ export async function POST(req: NextRequest) { description: 'Test example payment for minikit', } - if (MiniKit.isInstalled()) { + if (!MiniKit.isInstalled()) { return } From 61a0c566c04cc5ba70c500b6f4894ddad1f3a332 Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Thu, 12 Dec 2024 16:03:54 -0300 Subject: [PATCH 04/10] Added Example & Use Cases for Mini App Commands --- src/pages/mini-apps/commands/connect-wallet.mdx | 5 +++++ src/pages/mini-apps/commands/pay.mdx | 10 ++++++++-- src/pages/mini-apps/commands/sign-message.mdx | 11 +++++++++-- src/pages/mini-apps/commands/sign-typed-data.mdx | 7 ++++++- src/pages/mini-apps/commands/verify.mdx | 6 ++++++ 5 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/pages/mini-apps/commands/connect-wallet.mdx b/src/pages/mini-apps/commands/connect-wallet.mdx index a3df0c92..dd3cedb6 100644 --- a/src/pages/mini-apps/commands/connect-wallet.mdx +++ b/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. Go to Wallet Auth Section + +**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. diff --git a/src/pages/mini-apps/commands/pay.mdx b/src/pages/mini-apps/commands/pay.mdx index 4856f62d..b933e2d7 100644 --- a/src/pages/mini-apps/commands/pay.mdx +++ b/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 diff --git a/src/pages/mini-apps/commands/sign-message.mdx b/src/pages/mini-apps/commands/sign-message.mdx index 0c4b8f99..291b4a92 100644 --- a/src/pages/mini-apps/commands/sign-message.mdx +++ b/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:** An app that requires users to sign a message to prove ownership +of their wallet before allowing them to access premium features or content. ## 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. diff --git a/src/pages/mini-apps/commands/sign-typed-data.mdx b/src/pages/mini-apps/commands/sign-typed-data.mdx index 543ac088..140816e1 100644 --- a/src/pages/mini-apps/commands/sign-typed-data.mdx +++ b/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 diff --git a/src/pages/mini-apps/commands/verify.mdx b/src/pages/mini-apps/commands/verify.mdx index 7522b9d8..b2cf5ddf 100644 --- a/src/pages/mini-apps/commands/verify.mdx +++ b/src/pages/mini-apps/commands/verify.mdx @@ -6,6 +6,12 @@ The verify command lets you use incognito action To use incognito actions, first create one in the Developer Portal. +**Use Case:** This command is crucial for applications that require user verification to access certain features, +ensuring that only legitimate users can perform sensitive actions. + +**Example:** A voting application that requires users to verify their identity before casting a vote. + + ## Using the command From 4d9d090547c960f96faa6d8eb78c29630947bebe Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Tue, 17 Dec 2024 10:17:37 -0300 Subject: [PATCH 05/10] Updated Usernames and moved it to technical references --- src/pages/mini-apps/design/app-guidelines.mdx | 8 ++------ src/pages/mini-apps/reference/api.mdx | 9 ++++++--- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/pages/mini-apps/design/app-guidelines.mdx b/src/pages/mini-apps/design/app-guidelines.mdx index 42cb5504..14e781c3 100644 --- a/src/pages/mini-apps/design/app-guidelines.mdx +++ b/src/pages/mini-apps/design/app-guidelines.mdx @@ -68,12 +68,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 World Usernames Documentation. - -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. diff --git a/src/pages/mini-apps/reference/api.mdx b/src/pages/mini-apps/reference/api.mdx index eaa38bc3..24d4cf22 100644 --- a/src/pages/mini-apps/reference/api.mdx +++ b/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 -## 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. \ No newline at end of file +## 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 World Usernames Documentation. \ No newline at end of file From c80739d1c6b2a831f31d77a287cbbd6e197a35c6 Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Tue, 17 Dec 2024 12:57:29 -0300 Subject: [PATCH 06/10] Added Scroll bounce hint & App icon in docs --- src/pages/mini-apps/design/app-guidelines.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/pages/mini-apps/design/app-guidelines.mdx b/src/pages/mini-apps/design/app-guidelines.mdx index 14e781c3..6125a6bc 100644 --- a/src/pages/mini-apps/design/app-guidelines.mdx +++ b/src/pages/mini-apps/design/app-guidelines.mdx @@ -50,6 +50,18 @@ Mini apps are inherently accessed via mobile, so your application UI should look 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. +```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. From 53163d70f33ddd81b0b4d024bd32a0bca9ddfdf7 Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Thu, 19 Dec 2024 12:46:14 -0300 Subject: [PATCH 07/10] reviewed changes --- src/pages/mini-apps/commands/sign-message.mdx | 4 ++-- src/pages/mini-apps/commands/verify.mdx | 4 ++-- src/pages/mini-apps/design/app-guidelines.mdx | 3 ++- src/pages/world-id/sign-in/pitfalls.mdx | 4 ++-- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/pages/mini-apps/commands/sign-message.mdx b/src/pages/mini-apps/commands/sign-message.mdx index 291b4a92..4f9a087d 100644 --- a/src/pages/mini-apps/commands/sign-message.mdx +++ b/src/pages/mini-apps/commands/sign-message.mdx @@ -9,8 +9,8 @@ Sign message lets you create an [EIP-191](https://eips.ethereum.org/EIPS/eip-191 **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:** An app that requires users to sign a message to prove ownership -of their wallet before allowing them to access premium features or content. +**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 diff --git a/src/pages/mini-apps/commands/verify.mdx b/src/pages/mini-apps/commands/verify.mdx index b2cf5ddf..7351c8ac 100644 --- a/src/pages/mini-apps/commands/verify.mdx +++ b/src/pages/mini-apps/commands/verify.mdx @@ -7,9 +7,9 @@ The verify command lets you use incognito action To use incognito actions, first create one in the Developer Portal. **Use Case:** This command is crucial for applications that require user verification to access certain features, -ensuring that only legitimate users can perform sensitive actions. +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:** A voting application that requires users to verify their identity before casting a vote. +**Example:** An game that requires users to verify their identity before playing to have a bot free experience. ## Using the command diff --git a/src/pages/mini-apps/design/app-guidelines.mdx b/src/pages/mini-apps/design/app-guidelines.mdx index 6125a6bc..c13af8f4 100644 --- a/src/pages/mini-apps/design/app-guidelines.mdx +++ b/src/pages/mini-apps/design/app-guidelines.mdx @@ -47,8 +47,9 @@ Mini apps are inherently accessed via mobile, so your application UI should look ## 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%. +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 { diff --git a/src/pages/world-id/sign-in/pitfalls.mdx b/src/pages/world-id/sign-in/pitfalls.mdx index a2f32a70..ec722a10 100644 --- a/src/pages/world-id/sign-in/pitfalls.mdx +++ b/src/pages/world-id/sign-in/pitfalls.mdx @@ -9,10 +9,10 @@ Ensure you've added your application's sign in callback URL to the list of allow Redirect URIs using `http`, `localhost`, or port numbers are only allowed for Staging applications. ```{{ title: 'Redirect URI Example' }} -https://example.com/path/to/auth/callback +https://example.com/path/to/auth/calback/worldcoin ``` ```{{ title: 'Next.js example' }} -https://example.com/api/auth/callback. +https://example.com/api/auth/callback ``` ## Unauthenticated Errors From b4ae15216cc7bc7afc630b62c2fb67f5d1d61051 Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Thu, 19 Dec 2024 12:59:26 -0300 Subject: [PATCH 08/10] final adjustments --- src/pages/mini-apps/design/app-guidelines.mdx | 2 +- src/pages/world-id/sign-in/pitfalls.mdx | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/mini-apps/design/app-guidelines.mdx b/src/pages/mini-apps/design/app-guidelines.mdx index c13af8f4..01e9d9fb 100644 --- a/src/pages/mini-apps/design/app-guidelines.mdx +++ b/src/pages/mini-apps/design/app-guidelines.mdx @@ -48,7 +48,7 @@ Mini apps are inherently accessed via mobile, so your application UI should look ## Scroll Bounce on IOS. We recommend you avoid scroll bounce error on iOS devices. -Try disabling autoscroll & maybe fixed position elements or using 100dvh instead of 100vh. +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 diff --git a/src/pages/world-id/sign-in/pitfalls.mdx b/src/pages/world-id/sign-in/pitfalls.mdx index ec722a10..4fa31191 100644 --- a/src/pages/world-id/sign-in/pitfalls.mdx +++ b/src/pages/world-id/sign-in/pitfalls.mdx @@ -11,9 +11,6 @@ Ensure you've added your application's sign in callback URL to the list of allow ```{{ title: 'Redirect URI Example' }} https://example.com/path/to/auth/calback/worldcoin ``` -```{{ title: 'Next.js example' }} -https://example.com/api/auth/callback -``` ## Unauthenticated Errors From fa40fd3b123a241629efdae9cdb589b50249061d Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Thu, 19 Dec 2024 18:25:41 -0300 Subject: [PATCH 09/10] Resolved conflict in app_guidelines.mdx --- src/pages/mini-apps/design/app-guidelines.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/mini-apps/design/app-guidelines.mdx b/src/pages/mini-apps/design/app-guidelines.mdx index 01e9d9fb..99729c9b 100644 --- a/src/pages/mini-apps/design/app-guidelines.mdx +++ b/src/pages/mini-apps/design/app-guidelines.mdx @@ -47,8 +47,8 @@ Mini apps are inherently accessed via mobile, so your application UI should look ## Scroll Bounce on IOS. -We recommend you avoid scroll bounce error on iOS devices. -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 From 19ea93a443517601ef78e72e3c87adcdae60d83c Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Fri, 20 Dec 2024 15:57:26 -0300 Subject: [PATCH 10/10] deployment conflict solved --- src/pages/world-id/sign-in/pitfalls.mdx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/pages/world-id/sign-in/pitfalls.mdx b/src/pages/world-id/sign-in/pitfalls.mdx index 4fa31191..91a1f891 100644 --- a/src/pages/world-id/sign-in/pitfalls.mdx +++ b/src/pages/world-id/sign-in/pitfalls.mdx @@ -1,6 +1,6 @@ # Sign In with World ID Common Pitfalls -
+
## Invalid Redirect URI @@ -8,12 +8,17 @@ Ensure you've added your application's sign in callback URL to the list of allow Redirect URIs using `http`, `localhost`, or port numbers are only allowed for Staging applications. -```{{ title: 'Redirect URI Example' }} -https://example.com/path/to/auth/calback/worldcoin +### 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. -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. \ No newline at end of file + + 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. +