Dappland

How to add your Dapp to Dappland

If you are currently working on a dApp in the StarkNet ecosystem, dappland is built to give you a wider reach.

Optimizing Images

To ensure all images are of the same resolution, we have created some specific standards you need to adhere to. Here are the required images, and their required resolutions:

1. dApp logo - 320 x 320px

2. dApp banner - 1920 x 400px

3. dApp preview - 700 x 400px

You can also further optimize your images here – JPGs are best for photos and PNGs for graphics.

PS: Here's a Figma template created to help you do this easily. Just create a copy and customize it to fit your dApp.

Dappland content templateFigma

Adding dApp Information

To help make this tutorial intuitive, we describe adding an example dApp called docsdapp to Dappland.

Having optimized our images, it's now time to draft out the content for our page. This will be divided into 2 sections:

Adding dApp images

1. Head over to the official repo here, and create a fork.

2. Navigate to /public/dapps and create a folder with the name of your dApp.

3. Add all your optimized images to the folder.

Adding other information

We created a sample JSON file here, which you would need to copy to the /data folder. Rename this file with your dApp name in small letters i.e docsdapp.json.

Having done this, we will need to edit/customize the information present in the JSON file to match our dApp.

The sample JSON code contains very detailed instructions, you should be able to customize it, following the given instructions.

{
  "name": "DocsDapp",
  "description": "An example dapp to educate developers on how they could add their dapps to Dappland",
  "short_description": "Argent Dappland example",
  "tags": [
    "Onramps",
    "Social",
    "DAOs"
  ], //Remove all that don't apply
  "contracts": [
    {
      "name": "docsDapp contract",
      "functionality": "This contract is used to share docs with users",
      "address": "0x06e0d9c78d2e51bd2c9017771fb038ddab1cd224ed5ad603bf96f06060714751"
    }
  ],
  "goerliContracts": [
      {
        "name": "docsDapp goerli contract",
        "address": "0x06e0d9c78d2e51bd2c9017771fb038ddab1cd224ed5ad603bf96f06060714751"
      }
  ],
  "audits": [
    {
      "name": "Nethermind audits",
      "url": "https://docsdapp-nethermind-audit.com"
    }
  ],
  "verified": false, // Change to true if all contracts verified on starkscan
  "dotw": false, //leave 'false'
  "links": {
    "dappUrl": "https://app.docsdapp.com",
    "website": "https://docsdapp.com",
    "careers": "https://docsdapp.com/careers",
    "twitter": "https://twitter.com/docsdapp",
    "telegram": "",
    "discord": "",
    "github": "https://github.com/docsdapp",
    "youtube": "",
    "medium": "",
    "mirror": "https://mirror.xyz/docsdapp"
  },
  "twitterName": "docsdapp",
  "teamInfo": {
    "founded": "2022-05-24T00:00:00.000Z",
    "anonymous": false // If at least one of the founders has a public profile with their real name linked to the project, set this to true.
  },
  "tokens": [
    { // Delete contents if no token
      "address": "0x00da114221cb83fa859dbdb4c44beeaa0bb37c7537ad5ae66fe5e0efd20e6eb3", // Starknet token address
      "symbol": "DAI"
    }
  ],
  "media": {
    "logoUrl": "/dapps/docsdapp/dapp-logo-docsdapp.png",
    "bannerUrl": "/dapps/docsdapp/dapp-preview-docsdapp.png",
    "previewUrl": "/dapps/docsdapp/dapp-header-docsdapp.png",
    "gallery": [
      {
        "url": "/dapps/docsdapp/dapp-header-docsdapp.png",
        "description": "Gallery Preview"
      }
    ]
  }
}

Ensure all your Image URLs point to the images which we earlier uploaded to /public/dapps

Create a Pull Request

Having completed the steps above, we are now fully ready to go live! Head over to your forked repository, and create a Pull request.

Once you've opened a Pull request, someone from the Argent team will review it and contact you if there is any need for clarification.