From 7f0041e641e1386c8f166c9c5662a5a48ef859e2 Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Fri, 29 Nov 2024 09:32:55 -0300 Subject: [PATCH 1/4] added max load times --- src/pages/mini-apps/design/app-guidelines.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/pages/mini-apps/design/app-guidelines.mdx b/src/pages/mini-apps/design/app-guidelines.mdx index 126f4014..d0e34198 100644 --- a/src/pages/mini-apps/design/app-guidelines.mdx +++ b/src/pages/mini-apps/design/app-guidelines.mdx @@ -46,6 +46,11 @@ Mini apps are inherently accessed via mobile, so your application UI should look + +## Load times +For mini apps, 2-3 seconds max for initial load and under 1 second for subsequent actions should be your target. +However, always test for real-world scenarios and provide visual feedback during loading to maintain user trust. + ## Localisation Many of our users are located around the world. Apps that are localised for each region will perform significantly better. You can recognize the user's locale by using the Accept-Language header From ef1e49caa912d76d6fb6421283826fe0bdecdf09 Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Fri, 29 Nov 2024 10:47:36 -0300 Subject: [PATCH 2/4] added webview specs, details on wallet auth and troubleshooting for universal links --- src/components/Navigation.tsx | 1 + src/pages/mini-apps/more/troubleshooting.mdx | 3 +++ src/pages/mini-apps/more/webview-spec.mdx | 23 ++++++++++++++++++++ 3 files changed, 27 insertions(+) create mode 100644 src/pages/mini-apps/more/webview-spec.mdx diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 5c6313fb..9522fbe3 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -273,6 +273,7 @@ export const miniAppsNavigation = [ { title: 'Promotion', href: '/mini-apps/more/promotion' }, { title: 'Grants', href: '/mini-apps/more/grants' }, { title: 'Troubleshooting', href: '/mini-apps/more/troubleshooting' }, + { title: 'Webview Specifications', href: '/mini-apps/more/webview-spec' }, ], }, ] diff --git a/src/pages/mini-apps/more/troubleshooting.mdx b/src/pages/mini-apps/more/troubleshooting.mdx index 0aa36a3e..8252ed8c 100644 --- a/src/pages/mini-apps/more/troubleshooting.mdx +++ b/src/pages/mini-apps/more/troubleshooting.mdx @@ -29,3 +29,6 @@ export const MiniKitProvider = ({ children }: { children: ReactNode }) => { return <>{children} } ``` +### Universal Links on iOS +Go to notes long press the link and click open in world app on iOS to reset it. +This will happen if you selected open in browser a long time ago, needs to be reset diff --git a/src/pages/mini-apps/more/webview-spec.mdx b/src/pages/mini-apps/more/webview-spec.mdx new file mode 100644 index 00000000..bb57521a --- /dev/null +++ b/src/pages/mini-apps/more/webview-spec.mdx @@ -0,0 +1,23 @@ +# Webview Specifications + +The widget is opened within the World App via a WebView. This means providers can tailor their solutions by considering the specific features and restrictions of these platforms. + +### **Capabilities:** + +- **WebView Engine:** + - **Android:** Uses Android's native WebView implementation. + - **iOS:** Uses **WKWebView**, the recommended web rendering engine on iOS, offering enhanced security and performance. +- **File System and Camera Access:** + - Access to the camera and file system (e.g., for file uploads) is possible if the user grants permission. +- **Cookies and DOM Storage:** + - Supported on both platforms with explicit activation for Android and default behavior for iOS. + +### **Restrictions:** + +- **Geolocation and Other Extra Permissions:** + - By default, neither platform enables geolocation or additional permissions. Each new type of permission must be discussed and implemented separately if required. +- **New Windows:** + - Opening new browser windows is prohibited. All navigation remains within the current WebView instance. +- **Zooming:** + - **Android:** Not restricted by default. + - **iOS:** Disabled. \ No newline at end of file From 3faa162fe6217ad7baff87f44e2329f09b7744bc Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Fri, 29 Nov 2024 12:32:54 -0300 Subject: [PATCH 3/4] Added usage of MiniKit.isInstalled function --- src/pages/mini-apps/quick-start/installing.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/mini-apps/quick-start/installing.mdx b/src/pages/mini-apps/quick-start/installing.mdx index e3b62fa2..233061ab 100644 --- a/src/pages/mini-apps/quick-start/installing.mdx +++ b/src/pages/mini-apps/quick-start/installing.mdx @@ -86,7 +86,7 @@ export default async function Root({ 3. Check if MiniKit is installed and ready to use -`MiniKit.isInstalled()` will only return true if the app is opened and properly initialized inside the World App. +`MiniKit.isInstalled()` will only return true if the app is opened and properly initialized inside the World App. This is useful to distinguish between a user opening your app in the browser or in the World App. ```tsx // ... From bac4089780e8d98dbaac28ec373b567dda590bb3 Mon Sep 17 00:00:00 2001 From: Mateo Sauton Date: Fri, 29 Nov 2024 12:58:22 -0300 Subject: [PATCH 4/4] added details on wallet auth --- src/pages/mini-apps/commands/wallet-auth.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/pages/mini-apps/commands/wallet-auth.mdx b/src/pages/mini-apps/commands/wallet-auth.mdx index bd8c6ca9..9890a579 100644 --- a/src/pages/mini-apps/commands/wallet-auth.mdx +++ b/src/pages/mini-apps/commands/wallet-auth.mdx @@ -5,6 +5,18 @@ import Tabs, { TabItem } from '@/components/Tabs' Wallet Auth is our native support for Sign in With Ethereum. +Wallet Auth is a command that: + +- Authenticates users through their Ethereum wallet using the SIWE protocol (EIP-4361). +- Provides the user's Ethereum address after successful authentication. +- Verifies ownership of the wallet address via a signed message. + +With this, developers can: + +- Identify users securely and without centralized credentials. +- Implement token-based access controls. +- Enable blockchain-related features like transactions tied to the authenticated address. + ## Creating the nonce Since the user can modify the client, it's important to create the nonce in the backend. **The nonce must be at least 8 alphanumeric characters in length.**