How to Display NFT Gift Animations in Telegram

apiTON — Wed, 29 Jan 2025 14:33:34 +0000

How to Display NFT Gift Animations in Telegram

The introduction of NFT gifts in Telegram has raised numerous questions among developers, particularly regarding integration with the TON (The Open Network) blockchain. In this article, we’ll explore the technical aspects of working with animated NFTs and demonstrate how to implement their display in your projects.

I am the developer of the TON Blockchain Explorer, integrated into Telegram, and will guide you through one key question:

How to display NFT animations in your own projects.

Let’s examine the following NFT contract:

0:3a4f57aded85be8f7d1651b8e9d7749662014e08f6bcd3afaf2175c83188a7da

From this contract, we can extract data such as attributes, descriptions, and other metadata:

https://nft.fragment.com/gift/hexpot-10348.json

By clicking the More button, you can retrieve all available information directly:

Here, you’ll find a URL with a key and filename:

https://nft.fragment.com/gift/hexpot-10348.lottie.json

Lottie Format Basics

The animation uses the Lottie format:

Lottie is a library developed by Airbnb that renders animations in JSON format, created using Adobe After Effects. It allows developers to easily integrate high-quality animations into mobile and web apps while maintaining smooth performance and scalability.

Web Implementation Example:

https://jsfiddle.net/w5dsp16v/

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

<body>
    <div id="animation-container"></div>

    <script>
        const animation = lottie.loadAnimation({
            container: document.getElementById('animation-container'),
            path: 'https://nft.fragment.com/gift/hexpot-10348.lottie.json'
        });
    </script>
</body>

Telegram-Specific Solution

Telegram uses the .tgs format for stickers:

.tgs files are gzipped Lottie JSON files, playable via the rlottie library.

Implementation Workflow:

Download Lottie JSON
Compress with GZIP
Send as Telegram document

Go Code Example:

package main

import (
    "bytes"
    "compress/gzip"
    "github.com/aaapi-net/hog"
    tele "gopkg.in/telebot.v3"
)

func getTgsAnimation(lottieUrl string) ([]byte, error) {
    data, err := hog.Get(lottieUrl).AsBytes()
    if err != nil {
        return nil, err
    }

    gz, err := compress(data)
    if err != nil {
        return nil, err
    }

    return gz, nil
}

func compress(data []byte) ([]byte, error) {
    var buf bytes.Buffer

    writer := gzip.NewWriter(&buf)
    _, err := writer.Write(data)
    if err != nil {
        return nil, err
    }

    if err := writer.Close(); err != nil {
        return nil, err
    }

    return buf.Bytes(), nil
}

func sendLottieAnimation(c tele.Context, lottieUrl string) error {
    tgsAnimation, err := getTgsAnimation(lottieUrl)
    if err != nil {
        panic(err)
    }

    file := tele.FromReader(bytes.NewReader(tgsAnimation))

    photo := &tele.Document{
        File:                 file,
        MIME:                 "application/x-tgsticker",
        FileName:             "hexpot-10348.tgs",
        DisableTypeDetection: true,
    }

    return c.Send(photo)
}

Key Takeaways

Use native .tgs format for Telegram compatibility
Avoid MP4/GIF conversions to preserve quality
Leverage Telegram's built-in Lottie support

Feel free to contact about TON Blockchain development @apitonDev.

Share your implementations below!

DEV Community: apiTON

How to Display NFT Gift Animations in Telegram

How to Display NFT Gift Animations in Telegram

Lottie Format Basics

Web Implementation Example:

Telegram-Specific Solution

Implementation Workflow:

Go Code Example:

Key Takeaways