Try โ€‚โ€‰HackMD

How to add your own Custom token lists on CoW Swap Widget?

On CoW Swap, you can decide what token lists do you see in your UI. The same thing applies for the CoW Swap Widget.

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

In order to create your own custom token list and add it to your widget, you need to select "add custom token list" in the widget configurator.

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

But before doing so, we need to create the file/Url where the token list lies and from where the widget will pull the tokens from.

First thing we need to take into consideration is the format of the token list. The format is a standard json schema that has the following variables:

{
    "name": "Master CoW's Token list",
    "timestamp": "2024-02-27T16:30:00Z",
    "version": { #Important to keep track of the list versioning in the case that you want to perform updates/upgrades to such list
        "major": 0,
        "minor": 0,
        "patch": 1
    },
    
    "logoURI": "URL of the logo we want to give to the list",
    "tokens": [
        {
            "chainId": # indicating the chain where the token is,
            "address": "Address of the token",
            "name": "Full Name of the token",
            "symbol": "3 character name of the ",
            "decimals": # of decimals the token , 
            "logoURI": "URL of the token logo"
        },
       .
       .
       .
       As many tokens as you want
               ]
}

By following this format, we can input as many tokens in our list as we want.

Note: the more tokens that we add, the longer it will take to load balances.

Now that we have the format, is time to select the tokens we want to add to our list. For example, lets use this newly token list by Master CoW.

{
    "name": "Master CoWs Token List",
    "timestamp": "2024-03-27T16:30:00Z",
    "version": {
        "major": 0,
        "minor": 0,
        "patch": 1
    },
    "logoURI": "https://ipfs.cow.fi/ipfs/QmYK6v8knxT7ZfmS6FPpd9u1dKLxtZMKSrdQtur4ofShM3?pinataGatewayToken=MzQoKxPtVypjPgvG7fN47-FynJlKEStEQTyI-uG15v8jeAL5zpLuUj8pqWwhEu1T": [
        {
            "chainId": 1,
            "address": "0xdef1ca1fb7fbcdc777520aa7f396b4e015f497ab",
            "name": "CoW Protocol",
            "symbol": "COW",
            "decimals": 18,
            "logoURI": "https://assets.coingecko.com/coins/images/24384/standard/cow.png?1696523567"
        },
        {
            "chainId": 1,
            "address": "0xb131f4a55907b10d1f0a50d8ab8fa09ec342cd74",
            "name": "Memecoin",
            "symbol": "MEME",
            "decimals": 18,
            "logoURI": "https://assets.coingecko.com/coins/images/32528/thumb/memecoin_%282%29.png?1698912168"
        },
        {
            "chainId": 1,
            "address": "0xbe042e9d09cb588331ff911c2b46fd833a3e5bd6",
            "name": "Pepe Token",
            "symbol": "PEPE",
            "decimals": 18,
            "logoURI": "https://assets.coingecko.com/coins/images/31482/thumb/photo_2023-08-25_07-54-16.jpg?1696530294"
        },
    ]
}

Now that we have our list, we need to host this file publicly somewhere. Ideally in a CDN (Amazon S3 and similars) or IPFS. It'll be served to all users of your app in the client side. Here are some external guides on how to upload files to Amazon S3 bucket and how to pin files to IPFS.

Creating your own Github Repository

We first need to have a Github account created. Once we have the account created we see the following page where we need to click on "new"

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

Once we have clicked on new repository, we need to then assign a name to our repository, and after that, click on "create new repository"

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

Voila! We now have our own Github repository

via GIPHY

Inside our repository, we now have to create our own file to upload our token list.

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

Once we have the new file opened, we then proceed to copy the list created previously on this article.

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

Once we are done with our token list, we simply click on "commit changes" and done :)

Addding our custom token list to the widget

In order to get the raw address of our token list, we need click on the top right side of Github file, we click on the "raw" button to copy the raw file address:

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

Once we have copied the raw address of our own new repository example: https://raw.githubusercontent.com/cowmarketing/cowidget-custom-token-lists/main/mastercow-token-list

We proceed to go to the widget configurator, to add a custom token list and copy the URL there to then click on "Add":

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

Once we have done this, we should see the list on the Active token list section:

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

VOILA! You have now created your own Token list for the widget.

In the event that you have already deployed the widget, and added the custom token list later, there are two options to include the new token list:

  1. Redeploy the widget from the configurator
  2. Add the new token list URL wherever you are running the widget code. This URL can be found here:
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More โ†’

You now have your own custom token list in your widget!

via GIPHY

About CoW DAO

CoW DAO is an open organization of developers, market makers, and community contributors on a mission to create a fairer, more protective financial system. CoW DAO currently supports CoW Swap, CoW Protocol, and MEV Blocker โ€” DeFi products that leverage order flow auctions to protect users from MEV attacks and give them more than they ask for.