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

added max load times, webview spec, universal links troubleshooting and details on wallet auth. #325

Merged
merged 4 commits into from
Dec 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
],
},
]
Expand Down
12 changes: 12 additions & 0 deletions src/pages/mini-apps/commands/wallet-auth.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,18 @@ import Tabs, { TabItem } from '@/components/Tabs'

Wallet Auth is our native support for <Link href="https://eips.ethereum.org/EIPS/eip-4361">Sign in With Ethereum</Link>.

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.**
Expand Down
5 changes: 5 additions & 0 deletions src/pages/mini-apps/design/app-guidelines.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ Mini apps are inherently accessed via mobile, so your application UI should look
</div>
</div>


## 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 <Link href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language">Accept-Language</Link> header
Expand Down
3 changes: 3 additions & 0 deletions src/pages/mini-apps/more/troubleshooting.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
23 changes: 23 additions & 0 deletions src/pages/mini-apps/more/webview-spec.mdx
Original file line number Diff line number Diff line change
@@ -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.
2 changes: 1 addition & 1 deletion src/pages/mini-apps/quick-start/installing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
// ...
Expand Down