argentlabs / dappland

https://dappland.com
830 stars 281 forks source link
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="https://github.com/argentlabs/dappland/blob/develop/…"> 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="https://github.com/argentlabs/dappland/raw/develop/…">
  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