A method to get an image from an ERC20 contract.

njrapidinnovation commented 1 year ago

🧐 Motivation There are multiple benefits of getting an image directly from a smart contract of an ERC20 token.

Transparency and Decentralisation : By fetching an image from a smart contract, token creators can ensure that the image is stored on the blockchain and is accessible to anyone with access to the contract. This can help to increase Transparency and Decentralisation, which are key principles of blockchain technology.
Security: Storing the image on the blockchain can also improve security, as it is more difficult for malicious actors to tamper with or modify the image. This can help to protect the integrity of the token and reduce the risk of fraud or hacking.
Cost-effectiveness: Using a smart contract to store an image can be a cost-effective approach, as it eliminates the need for a centralised server or other infrastructure to store the image. This can help to reduce overhead costs for token creators and make it easier to launch a new token or project.
Flexibility : Fetching images from smart contracts can be a flexible approach, as the image can be updated or changed at any time by the contract owner. This can allow token creators to adapt to changing market conditions or user feedback and make adjustments to their branding as needed.
Improved Accessibility : Fetching images from smart contracts can improve accessibility for users who may have difficulty accessing traditional images or visual content. For example, users with visual impairments may be able to access alternative text descriptions of the image, which can help to make the token more inclusive and accessible.
Ease of Implementation : Fetching images from smart contracts can be a relatively easy and straightforward process, particularly if standardised protocols are used. This can make it easier for token creators to integrate the image into their project and reduce the risk of errors or complications.
Ease of Update : As the token's admin, if you need to update the image, you can simply update it in the smart contract and all third-party services that fetch the image will display the updated image in real-time. This can save time and money, as it eliminates the need to inform each third-party service separately and ensures that the image is updated consistently across all platforms.

📝 Details

A method to set the SVG image in string format.
A method to get the SVG image url in string format.

I took inspiration from generateNftSvgByTokenId method in On-chain-svg-nft-tickets

njrapidinnovation commented 1 year ago

I think we can use this as an ERC20 extension.

Amxx commented 1 year ago

Hello @njrapidinnovation

Is there a standard way for frontends/explorer/UI to fetch an ERC-20 logo/image? I'm not aware of such an ERC.

njrapidinnovation commented 1 year ago

Hi @Amxx , no there is no such ERC yet or a standard way, but we can fetch a url for an SVG image.

Below is the code to see such an example , this function will return a BTC SVG format image url paste that in browser to see the results.

CODE SNIPPET:-

  function getBtcLogo() public view returns (string memory) {
    return string(abi.encodePacked(
      'data:image/svg+xml;base64,',
      Base64.encode(bytes(abi.encodePacked(
        '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 4091.27 4091.73" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">'
        '<g id="Layer_x0020_1">' '<metadata id="CorelCorpID_0Corel-Layer"/>'
        '<g id="_1421344023328">'
        '<path fill="#F7931A" fill-rule="nonzero" d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"/>'
        '<path fill="white" fill-rule="nonzero" d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"/>'
        '</g>'
        '</g>'
        '</svg>'
      ))
    )));
  }

RESULT:-

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZlcnNpb249IjEuMSIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGltYWdlLXJlbmRlcmluZz0ib3B0aW1pemVRdWFsaXR5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgdmlld0JveD0iMCAwIDQwOTEuMjcgNDA5MS43MyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnhvZG09Imh0dHA6Ly93d3cuY29yZWwuY29tL2NvcmVsZHJhdy9vZG0vMjAwMyI+PGcgaWQ9IkxheWVyX3gwMDIwXzEiPjxtZXRhZGF0YSBpZD0iQ29yZWxDb3JwSURfMENvcmVsLUxheWVyIi8+PGcgaWQ9Il8xNDIxMzQ0MDIzMzI4Ij48cGF0aCBmaWxsPSIjRjc5MzFBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik00MDMwLjA2IDI1NDAuNzdjLTI3My4yNCwxMDk2LjAxIC0xMzgzLjMyLDE3NjMuMDIgLTI0NzkuNDYsMTQ4OS43MSAtMTA5NS42OCwtMjczLjI0IC0xNzYyLjY5LC0xMzgzLjM5IC0xNDg5LjMzLC0yNDc5LjMxIDI3My4xMiwtMTA5Ni4xMyAxMzgzLjIsLTE3NjMuMTkgMjQ3OSwtMTQ4OS45NSAxMDk2LjA2LDI3My4yNCAxNzYzLjAzLDEzODMuNTEgMTQ4OS43NiwyNDc5LjU3bDAuMDIgLTAuMDJ6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTI5NDcuNzcgMTc1NC4zOGM0MC43MiwtMjcyLjI2IC0xNjYuNTYsLTQxOC42MSAtNDUwLC01MTYuMjRsOTEuOTUgLTM2OC44IC0yMjQuNSAtNTUuOTQgLTg5LjUxIDM1OS4wOWMtNTkuMDIsLTE0LjcyIC0xMTkuNjMsLTI4LjU5IC0xNzkuODcsLTQyLjM0bDkwLjE2IC0zNjEuNDYgLTIyNC4zNiAtNTUuOTQgLTkyIDM2OC42OGMtNDguODQsLTExLjEyIC05Ni44MSwtMjIuMTEgLTE0My4zNSwtMzMuNjlsMC4yNiAtMS4xNiAtMzA5LjU5IC03Ny4zMSAtNTkuNzIgMjM5Ljc4YzAsMCAxNjYuNTYsMzguMTggMTYzLjA1LDQwLjUzIDkwLjkxLDIyLjY5IDEwNy4zNSw4Mi44NyAxMDQuNjIsMTMwLjU3bC0xMDQuNzQgNDIwLjE1YzYuMjYsMS41OSAxNC4zOCwzLjg5IDIzLjM0LDcuNDkgLTcuNDksLTEuODYgLTE1LjQ2LC0zLjg5IC0yMy43MywtNS44N2wtMTQ2LjgxIDU4OC41N2MtMTEuMTEsMjcuNjIgLTM5LjMxLDY5LjA3IC0xMDIuODcsNTMuMzMgMi4yNSwzLjI2IC0xNjMuMTcsLTQwLjcyIC0xNjMuMTcsLTQwLjcybC0xMTEuNDYgMjU2Ljk4IDI5Mi4xNSA3Mi44M2M1NC4zNSwxMy42MyAxMDcuNjEsMjcuODkgMTYwLjA2LDQxLjNsLTkyLjkgMzczLjAzIDIyNC4yNCA1NS45NCA5MiAtMzY5LjA3YzYxLjI2LDE2LjYzIDEyMC43MSwzMS45NyAxNzguOTEsNDYuNDNsLTkxLjY5IDM2Ny4zMyAyMjQuNTEgNTUuOTQgOTIuODkgLTM3Mi4zM2MzODIuODIsNzIuNDUgNjcwLjY3LDQzLjI0IDc5MS44MywtMzAzLjAyIDk3LjYzLC0yNzguNzggLTQuODYsLTQzOS41OCAtMjA2LjI2LC01NDQuNDQgMTQ2LjY5LC0zMy44MyAyNTcuMTgsLTEzMC4zMSAyODYuNjQsLTMyOS42MWwtMC4wNyAtMC4wNXptLTUxMi45MyA3MTkuMjZjLTY5LjM4LDI3OC43OCAtNTM4Ljc2LDEyOC4wOCAtNjkwLjk0LDkwLjI5bDEyMy4yOCAtNDk0LjJjMTUyLjE3LDM3Ljk5IDY0MC4xNywxMTMuMTcgNTY3LjY3LDQwMy45MXptNjkuNDMgLTcyMy4zYy02My4yOSwyNTMuNTggLTQ1My45NiwxMjQuNzUgLTU4MC42OSw5My4xNmwxMTEuNzcgLTQ0OC4yMWMxMjYuNzMsMzEuNTkgNTM0Ljg1LDkwLjU1IDQ2OC45NCwzNTUuMDVsLTAuMDIgMHoiLz48L2c+PC9nPjwvc3ZnPg==

RESULT IN BROWSER:-

Amxx commented 1 year ago

If there is no standard interface to query, what is it that you expect us to implement?

njrapidinnovation commented 1 year ago

I want you guys to implement an ERC20 extension that can store SVG image data in an optimized way, allowing for updates and retrieval through a function.

abhi3700 commented 1 year ago

I think you should create an ERC in this repo & wait for the community to reply to your thread.

Amxx commented 1 year ago

I want you guys to implement an ERC20 extension that can store SVG image data in an optimized way, allowing for updates and retrieval through a function.

Each image is different, so we can't provide one image data. Since there is no standard query function, we can't provide a public interfaces. We already provide Base64.encode which is the one tool you need that is generic.

Also, the image data should NOT be in storage. it should be provided by a pure function. Putting that would just be wastefull. I also think updating the image would not be a good idea (for many reasons).

OpenZeppelin / openzeppelin-contracts

A method to get an image from an ERC20 contract. #4130