Skip to content

argentlabs/dappland

Repository files navigation

Dappland logo animated

The home for all dapps in the Starknet ecosystem

Built with ❤️ by Argent

Node.js CI

🧭 Explore the Starknet ecosystem

Visit Dappland to explore the most influential dapps in the Starknet ecosystem.

To use them, download Argent X, the only open source wallet for Starknet

✅ Add your dapp to Dappland

If you are building a dapp on Starknet and want to showcase it in Dappland, you just need to submit a PR to this repository.

Steps:

  1. Create your images: 320x320 logo, 1920x400 banner and 700x400 preview. Use the Dappland Figma template to help you.
  2. Please optimise your images using tinypng.com – JPGs are best for photos and PNGs for graphics. Or you can convert to WebP.
  3. Fork this repo and create a new folder with your dapp name under /public/dapps/
  4. Add your optimised images to the folder
  5. Copy dapp_data_example.json, rename it with your dapp's name in lowercase and move it to /data
  6. Fill out the fields in the json file with your dapp's data
  7. Ensure the json points to your images, i.e.
  "media": {
    "logoUrl": "/dapps/yourdapp/yourdapp-logo.png",
    "bannerUrl": "/dapps/yourdapp/yourdapp-banner.png",
    "previewUrl": "/dapps/yourdapp/yourdapp-preview.png",
    … etc
  }
  1. Create the PR

And that's it! 🚀

Someone from the Argent team will review the PR and contact you if they need to clarify anything.

For any questions reach us on:

📣 Share your dapp rating with the world

Embed the Dappland rating widget

Dappland rating widget

Using the widget

<a href="https://www.dappland.com/your_dapp_name" style="display:inline-block;position:relative">
  <div style="position:absolute;top:0;right:0;bottom:0;left:0;"></div>
  <iframe src="https://www.dappland.com/widgets/rating?dappname=your_dapp_name" width="260" height="176" frameBorder="0" title="Dappland Widget"></iframe>
</a>
  1. Copy and paste the snippet above
  2. In <a href="…"> change your_dapp_name to exactly the same as the name of your dapp as shown in your Dappland url.
  3. Also change your_dapp_name in the <iframe src="…">
  4. (Optional) you can also set the theme to theme=light or theme=dark 😎 (default uses the device settings).
    Just add the theme param to the url after your dappname.
  5. That's it!

Widget example

briq on Dappland is https://www.dappland.com/briq, so would be

<a href="https://www.dappland.com/briq" style="display:inline-block;position:relative">
  <div style="position:absolute;top:0;right:0;bottom:0;left:0;"></div>
  <iframe src="https://www.dappland.com/widgets/rating?dappname=briq" width="260" height="176" frameBorder="0" title="Dappland Widget"></iframe>
</a>

🛠 Development

Dappland is a Next.js project setup with Tailwind CSS and TypeScript.

Run locally with npm:

npm install
npm run dev