> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ton.org/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.ton.org/feedback

```json
{
  "path": "/ecosystem/ton-connect/manifest",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# TON Connect manifests

export const Aside = ({type = "note", title = "", icon = "", iconType = "regular", children}) => {
  const asideVariants = ["note", "tip", "caution", "danger"];
  const asideComponents = {
    note: {
      outerStyle: "border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10",
      innerStyle: "text-sky-900 dark:text-sky-200",
      calloutType: "note",
      icon: <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 text-sky-500" aria-label="Note">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 1.3C10.14 1.3 12.7 3.86 12.7 7C12.7 10.14 10.14 12.7 7 12.7C5.48908 12.6974 4.0408 12.096 2.97241 11.0276C1.90403 9.9592 1.30264 8.51092 1.3 7C1.3 3.86 3.86 1.3 7 1.3ZM7 0C3.14 0 0 3.14 0 7C0 10.86 3.14 14 7 14C10.86 14 14 10.86 14 7C14 3.14 10.86 0 7 0ZM8 3H6V8H8V3ZM8 9H6V11H8V9Z"></path>
        </svg>
    },
    tip: {
      outerStyle: "border-emerald-500/20 bg-emerald-50/50 dark:border-emerald-500/30 dark:bg-emerald-500/10",
      innerStyle: "text-emerald-900 dark:text-emerald-200",
      calloutType: "tip",
      icon: <svg width="11" height="14" viewBox="0 0 11 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="text-emerald-600 dark:text-emerald-400/80 w-3.5 h-auto" aria-label="Tip">
          <path d="M3.12794 12.4232C3.12794 12.5954 3.1776 12.7634 3.27244 12.907L3.74114 13.6095C3.88471 13.8248 4.21067 14 4.46964 14H6.15606C6.41415 14 6.74017 13.825 6.88373 13.6095L7.3508 12.9073C7.43114 12.7859 7.49705 12.569 7.49705 12.4232L7.50055 11.3513H3.12521L3.12794 12.4232ZM5.31288 0C2.52414 0.00875889 0.5 2.26889 0.5 4.78826C0.5 6.00188 0.949566 7.10829 1.69119 7.95492C2.14321 8.47011 2.84901 9.54727 3.11919 10.4557C3.12005 10.4625 3.12175 10.4698 3.12261 10.4771H7.50342C7.50427 10.4698 7.50598 10.463 7.50684 10.4557C7.77688 9.54727 8.48281 8.47011 8.93484 7.95492C9.67728 7.13181 10.1258 6.02703 10.1258 4.78826C10.1258 2.15486 7.9709 0.000106649 5.31288 0ZM7.94902 7.11267C7.52078 7.60079 6.99082 8.37878 6.6077 9.18794H4.02051C3.63739 8.37878 3.10743 7.60079 2.67947 7.11294C2.11997 6.47551 1.8126 5.63599 1.8126 4.78826C1.8126 3.09829 3.12794 1.31944 5.28827 1.3126C7.2435 1.3126 8.81315 2.88226 8.81315 4.78826C8.81315 5.63599 8.50688 6.47551 7.94902 7.11267ZM4.87534 2.18767C3.66939 2.18767 2.68767 3.16939 2.68767 4.37534C2.68767 4.61719 2.88336 4.81288 3.12521 4.81288C3.36705 4.81288 3.56274 4.61599 3.56274 4.37534C3.56274 3.6515 4.1515 3.06274 4.87534 3.06274C5.11719 3.06274 5.31288 2.86727 5.31288 2.62548C5.31288 2.38369 5.11599 2.18767 4.87534 2.18767Z"></path>
        </svg>
    },
    caution: {
      outerStyle: "border-amber-500/20 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/10",
      innerStyle: "text-amber-900 dark:text-amber-200",
      calloutType: "warning",
      icon: <svg className="flex-none w-5 h-5 text-amber-400 dark:text-amber-300/80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-label="Warning">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
    },
    danger: {
      outerStyle: "border-red-500/20 bg-red-50/50 dark:border-red-500/30 dark:bg-red-500/10",
      innerStyle: "text-red-900 dark:text-red-200",
      calloutType: "danger",
      icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" className="text-red-600 dark:text-red-400/80 w-4 h-4" aria-label="Danger">
          <path d="M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zm41.6-48c-4.3 7.4-4.3 16.6 0 24l88.3 152.9c4.3 7.4 12.2 12 20.8 12l176.6 0c8.6 0 16.5-4.6 20.8-12L453.4 268c4.3-7.4 4.3-16.6 0-24L365.1 91.1c-4.3-7.4-12.2-12-20.8-12l-176.6 0c-8.6 0-16.5 4.6-20.8 12L58.6 244zM256 128c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"></path>
        </svg>
    }
  };
  let variant = type;
  let gotInvalidVariant = false;
  if (!asideVariants.includes(type)) {
    gotInvalidVariant = true;
    variant = "danger";
  }
  const iconVariants = ["regular", "solid", "light", "thin", "sharp-solid", "duotone", "brands"];
  if (!iconVariants.includes(iconType)) {
    iconType = "regular";
  }
  return <>
      <div className={`callout my-4 px-5 py-4 overflow-hidden rounded-2xl flex gap-3 border ${asideComponents[variant].outerStyle}`} data-callout-type={asideComponents[variant].calloutType}>
        <div className="mt-0.5 w-4" data-component-part="callout-icon">
          {}
          {icon === "" ? asideComponents[variant].icon : <Icon icon={icon} iconType={iconType} size={14} />}
        </div>
        <div className={`text-sm prose min-w-0 w-full ${asideComponents[variant].innerStyle}`} data-component-part="callout-content">
          {gotInvalidVariant ? <p>
              <span className="font-bold">
                Invalid <code>type</code> passed!
              </span>
              <br />
              <span className="font-bold">Received: </span>
              {type}
              <br />
              <span className="font-bold">Expected one of: </span>
              {asideVariants.join(", ")}
            </p> : <>
              {title && <p className="font-bold">{title}</p>}
              {children}
            </>}
        </div>
      </div>
    </>;
};

TON Connect manifests are specially formatted JSON files that define meta information to either pass it from your dApp to the wallet ([app manifest](#app-manifest)) or to set up subsequent wallet interactions with the TON Connect protocol ([wallet manifest](#wallet-manifest)).

## App manifest

App manifest is a small JSON file that lets wallets discover information about your dApp. It should be named `tonconnect-manifest.json` and correspond to the following definition.

| Field              | Requirement | Description                                                                                                                                                                                                            |
| ------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `url`              | required    | Defines the app URL. It will be used to open the dApp after clicking its icon in the wallet. It is recommended to pass the URL without closing the slash, e.g., `https://mydapp.com` instead of `https://mydapp.com/`. |
| `name`             | required    | Defines the app name. Typically, a simple word. Shouldn't be used as an identifier.                                                                                                                                    |
| `iconUrl`          | required    | Defines the URL to the app icon. It must be in `PNG` or `ICO` format. `SVG` icons are not supported. An 180x180 px PNG icon is optimal.                                                                                |
| `termsOfUseUrl`    | optional    | Only needed for apps to be featured in the wallet's recommendation lists.                                                                                                                                              |
| `privacyPolicyUrl` | optional    | Only needed for apps to be featured in the wallet's recommendation lists.                                                                                                                                              |

Here is a generic example of an app manifest:

```jsonc theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
{
  "url": "<app-url>",                        // required
  "name": "<app-name>",                      // required
  "iconUrl": "<app-icon-url>",               // required
  "termsOfUseUrl": "<terms-of-use-url>",     // optional
  "privacyPolicyUrl": "<privacy-policy-url>" // optional
}
```

For a web dApp, place its manifest at `https://[myapp.com]/tonconnect-manifest.json` so that wallets can fetch it with a simple GET request.

<Aside>
  Application manifest must be publicly available with CORS disabled, without any authorization required, and without a Cloudflare or similar service proxying them. If hosting that way is troublesome on your own, consider using a trusted CDN.
</Aside>

<Aside type="caution" title="Manifest URL must be an absolute URL">
  Wallets fetch the manifest independently from outside the app. A relative path like `/tonconnect-manifest.json` will fail silently. Always use the full URL: `https://<APP_URL>/tonconnect-manifest.json`.

  Replace `<APP_URL>` with the public HTTPS origin that serves `tonconnect-manifest.json`.

  Ensure that `iconUrl` in the manifest points to a valid, accessible image. If the icon returns 404, wallet connection may fail with a generic error.
</Aside>

## Wallet manifest

Wallet manifest is a JSON configuration that defines how your wallet interacts with the TON Connect.

Here is an example of a custodian manifest:

```json theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
{
  "app_name": "[custodian]",
  "name": "[Custodian]",
  "image": "https://cdn.[custodian].com/ton-connect-icon.png",
  "about_url": "https://[custodian].com",
  "universal_url": "https://wallet.[custodian].com/ton-connect",
  "bridge": [
    {
      "type": "sse",
      "url": "https://bridge.[custodian].com/bridge"
    }
  ],
  "platforms": ["ios", "android", "web", "windows", "macos", "linux"],
  "features": [
    {
      "name": "SendTransaction",
      "maxMessages": 4,
      "extraCurrencySupported": false
    }
  ]
}
```

<Aside>
  There, the bridge refers to the way connectivity between the wallet and dApp is achieved. It can either be a JavaScript one, extending the `window` object, or an HTTP one, requiring a separate service to be running.

  For more details, see the respective reference section: [WalletKit reference](/ecosystem/walletkit/overview).
</Aside>

### Primary properties

* `app_name`: A unique identifier for the wallet. This string should be lowercase, without spaces or special characters. It will be used as an identifier in connection events and must match the `ConnectEventSuccess.device.appName` value.

* `name`: The display name of the wallet that will be shown to users in dApp interfaces. For your custodian, simply use "\[Custodian]" or "\[Custodian] Wallet" as appropriate.

* `image`: A URL pointing to the wallet's icon. This should be a high-quality image with the following specifications:

  * Resolution: 288×288 pixels
  * Background: Non-transparent
  * Corners: Non-rounded
  * Format: PNG

  Examples:

  * `https://wallet.tg/images/logo-288.png`
  * `https://tonkeeper.com/assets/tonconnect-icon.png`

### Connection properties

* `about_url`: A URL to the wallet information or landing page. This helps new TON users learn about your wallet.

* `universal_url`: The base part of the wallet's universal URL that will handle TON Connect parameters. This is a critical component for enabling connections via universal links. For your custodian, this could be something like `https://wallet.[custodian].com/ton-connect`.

* `bridge`: An array specifying connectivity options between dApps and the wallet.
  * HTTP bridge setups should include:

    ```json theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
    "bridge": [
      {
        "type": "sse",
        "url": "https://bridge.[custodian].com/bridge"
      }
    ]
    ```

    There, `url` points to the publicly exposed bridge.

  * JavaScript bridge setups should include:

    ```json theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
    "bridge": [
      {
        "type": "js",
        "key": "[custodian]"
      }
    ]
    ```

    In the above, `key` points to the property name within the `window` object on the same web page.

### Platform and feature support

* `platforms`: An array listing all platforms where the wallet is available. This can include any of the following values: `"ios"`, `"android"`, `"chrome"`, `"firefox"`, `"safari"`, `"windows"`, `"macos"`, `"linux"`, `"web"`. Include only the platforms that you actually support.

* `features`: This section defines the capabilities of the wallet:

  ```json theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  "features": [
    {
      "name": "SendTransaction",
      "maxMessages": 4,
      "extraCurrencySupported": false
    }
  ]
  ```

  * `name`: Currently, only "SendTransaction" is defined in the protocol.
  * `maxMessages`: The maximum number of messages the wallet can sign in a single transaction (4 is standard for many wallets).
  * `extraCurrencySupported`: Whether the wallet supports additional currencies beyond TON. Set to `false` initially; you can update this later if you add support.