# WorldCoin's WorldApp's Mini-App's THE VERSION OF THE WORLDCOIN's WORLDAPP's MINI-APPS UI KIT TO USE IS 1.0.1 ## Introduction Mini apps enable third-party developers to create native-like applications within World App. Building a mini app will provide access to worldapp's rapidly growing user network and monetization opportunities via WLD and USDC. In addition, mini apps introduce smart contract support natively inside of World App. ## Overview World apps are basically simple web apps that open in a webview inside of the World App. Since these mini apps are all about mobile, the UI's gotta feel mobile-friendly. They even have this MiniApps UI Kit, which is just a React design system to speed up building them. ## Critical Implementation Notes - **CRITICAL**: create the following files in this order (ALWAYS FOR WORLDCOIN MINI-APPS): 1. `src/app/layout.tsx` - Set up the root layout with required fonts and styles 2. `src/app/globals.css` - Configure global styles and Tailwind 3. `src/components/MiniKitProvider.tsx` - MiniKit Provider component that installs the SDK and makes it easy to access MiniKit inside your app - **CRITICAL**: Only import the following components from '@worldcoin/mini-apps-ui-kit-react': AlertDialog, BottomBar, Button, Checkbox, Chip, CircularState, ColorPicker, Drawer, Flag, Input, LiveFeedback, NumberPad, OTPField, PasswordField, Pill, Select, Switch, ToggleGroupRoot, ToggleGroupItem. Do not import anything else from this package. - **CRITICAL** DO NOT import Tabs, TabsContent, TabsList, or TabsTrigger from '@worldcoin/mini-apps-ui-kit-react' it does not exist. - **CRITICAL** 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. - **CRITICAL** Whether user mentions or not try and use the MiniKit.isInstalled() function to check if the user is in the World App or not (AND create it this way it says "Inside World App" or "Inside Ohara" ALWAYS) ## Layout and Global Styles src/app/layout.tsx ```tsx import '@worldcoin/mini-apps-ui-kit-react/styles.css'; import './globals.css'; export const metadata = { title: '', description: '', }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return (

{children}

); } ``` src/app/globals.css ```css @tailwind base; @tailwind components; @tailwind utilities; @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&display=swap"); :root { --font-sans: 'Rubik', sans-serif; --font-display: 'Sora', sans-serif; --font-mono: 'DM Mono', monospace; } body { font-family: var(--font-sans); background-color: #f5f5f5; } ``` src/components/MiniKitProvider.tsx (basic MiniKitProvider component) ```tsx 'use client' import { ReactNode, useEffect, useState } from 'react' import { MiniKit } from '@worldcoin/minikit-js' interface MiniKitProviderProps { children: ReactNode; } export default function MiniKitProvider({ children }: MiniKitProviderProps) { const [isInstalled, setIsInstalled] = useState(false); useEffect(() => { const appId = 'app_example_id'; try { MiniKit.install(appId); setIsInstalled(MiniKit.isInstalled()); } catch (error) { console.error('Failed to install MiniKit:', error); setIsInstalled(false); } }, []); return (

{children}

); } ``` ## Mini Apps UI Kit Components The following components are available in the Mini Apps UI Kit. These are just example code snippets, you will need to implement them in your own way. ### Typography Worldcoin's typography system uses TWK Lausanne font and consists of several text styles optimized for different use cases. Each style is carefully crafted to maintain readability and visual hierarchy across our applications. Please ensure you have the proper license to use TWK Lausanne before implementing these typography styles. ### AlertDialog AlertDialog is a modal dialog that interrupts the user with important content and expects a response. This component is built on top of Vaul and the Dialog component from Radix UI. (An example of an AlertDialog component is below) ```tsx import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@worldcoin/mini-apps-ui-kit-react'; render: () => Are you sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. ``` ### BottomBar A container for action buttons at the bottom of a view Provides a consistent layout for primary and secondary actions, supporting both horizontal and vertical arrangements. ```tsx import { BottomBar, Button } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### Button A versatile button component that supports different variants, sizes, and states with optional icon support. ```tsx import { Button } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### ListItem A versatile list item component that can be styled with different variants: duotone (alternating backgrounds), outline (bordered), and ghost (minimal). Used for displaying content in list format with consistent height and alignment. ```tsx import { ListItem } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### Checkbox A checkbox component that allows users to select one or multiple options. Built on top of Radix UI's Checkbox primitive for accessibility and customization. | Name | Description | Default | |------|-------------|---------| | checked | The controlled checked state of the checkbox | boolean | - | | asChild | Whether to forward the root element | boolean | - | | defaultChecked | The initial checked state when the checkbox is uncontrolled | boolean | - | | onChange | Event handler called when the checked state changes | (checked: boolean) => void | - | | disabled | Whether the checkbox is disabled | boolean | false | | required | Whether the checkbox is required | boolean | - | | name | The name of the checkbox | string | - | | value | The value of the checkbox | string | - | ```tsx import { Checkbox } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### Chip A chip component that displays labels with optional icons and different variants including success, warning, error, and important states. | Name | Description | Default | |------|-------------|---------| | label* | The label text displayed on the chip. | string | - | | variant | The variant of the chip. Default value is "default", "success", "warning", "error", or "important". | union | "default" | | icon | Optional icon to display alongside the label. | ReactNode | - | | className | Optional additional CSS class names. | string | - | ```tsx import { Chip } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### CircularState A circular state component that displays a loading spinner with a label. | Name | Description | Control | |------|-------------|---------| | value* | the state to display in the circular icon. | success, error, warning, pending, critical | | size | string | example: md | ```tsx import { CircularState } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### ColorPicker A color picker input component with a visual color preview. | Property | Description | Type | Default | |----------|-------------|------|---------| | value | The currently selected color value | string | - | | children* | ColorPickerItem components to render as options | ReactNode | - | | onChange | Callback fired when the selected color changes | (value: string) => void | - | | disabled | Whether the color picker is disabled | boolean | false | ```tsx import {ColorPickerGroup, ColorPickerItem } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### Drawer A drawer component that slides up from the bottom of the screen. This component is built on top of Vaul and the Dialog component from Radix UI. (An example of a Drawer component is below) ```tsx import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DialogTrigger, Button } from '@worldcoin/mini-apps-ui-kit-react'; Drawer title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

``` ### Flag A flag component that displays a country's flag. | Property | Description | Default | |----------|-------------|---------| | countryCode | ISO 3166-1 alpha-2 country code (e.g. 'US', 'GB', 'FR') | - | | size | Width and height in pixels for the flag SVG. Defaults to 40px if not specified. | - | example: 40 | ```tsx import { Flag } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### Input A customizable text input component that supports adornments and various states. ```tsx import { Input } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### LiveFeedback Name | Description | Default | Control |------|-------------|---------| state | The current state of the feedback. Controls which icon and label are shown. | pending, success, failed | ```tsx import { LiveFeedback } from '@worldcoin/mini-apps-ui-kit-react'; import { Button } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### NumberPad A numeric keypad component that allows users to input numbers and decimals. Includes a delete button and validates input to ensure only valid numbers are entered. ```tsx import { NumberPad } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### OTPField A one-time password input field that allows entering numeric codes. | Name | Description | Type | Default | |------------------|-----------------------------------------------------------------------------|----------------------------------------|------------| | maxLength | The number of input slots/characters in the OTP field. | number | 6 | | error | Whether the OTP field is in an error state. Displays error styling if true. | boolean | - | | pattern | Custom regex pattern to validate the input. | string | - | | mode | The input mode: 'digits', 'chars', or 'digitsAndChars'. | "digits" \| "chars" \| "digitsAndChars" | "digits" | | value | The current value of the OTP input (controlled). | string | - | | onChange | Callback fired when the input value changes. | (newValue: string) => unknown | - | | onComplete | Callback fired when all slots are filled. | (...args: any[]) => unknown | - | | pasteTransformer | Function to transform pasted text before inserting. | (pastedText: string) => string | - | ```tsx import { OTPField } from '@worldcoin/mini-apps-ui-kit-react'; ``` ### Pill A pill component that displays a label with a background color. ```tsx import { Pill } from '@worldcoin/mini-apps-ui-kit-react'; Pill Label ``` ### Token A component that displays a token symbol. Only WLD, ETH, USDC, and BTC are supported by this component. | Name | Description | Default | |------|-------------|---------| | value* | The token symbol to display (BTC, ETH, USDC, or WLD) | - | | size | Width and height in pixels of the token icon | 40 | ```tsx ``` ### Switch | Name | Description | Default | |------|-------------|---------| | checked | The checked state of the switch. | boolean | | onChange | Callback function that is triggered when the checked state changes. | (checked: boolean) => void | | disabled | The disabled state of the switch. | boolean | ```tsx ``` ### Select | Name | Description | Control | |------|-------------|---------| | options | The options to display in the select dropdown. | [ { "value": "10", "label": "$10" }, { "value": "25", "label": "$25" }, { "value": "50", "label": "$50" }, { "value": "100", "label": "$100" } ] | | placeholder | The placeholder text to display when no value is selected. (string) | "Value" | ```tsx

Mini Golf World