npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mytonswap/widget

v2.0.17

Published

MyTonSwap Widget - Easy to use swap widget for React on TON Blockchain

Downloads

2,974

Readme

Preview GitHub package.json version GitHub last commit GitHub Actions Workflow Status NPM Downloads GitHub License

MyTonSwap Widget

@mytonswap/widget is a customizable Swap component that enables developers to integrate swap functionality on the TON blockchain directly into their React applications. With this widget, users can seamlessly swap assets and connect to the TON blockchain via TonConnect.

  • 📃 Docs: https://mytonswap.com/docs
  • 🌐 Demo & Preview: https://widget.mytonswap.com
  • 👨‍💻 Code Examples: HTML, React, Vue

Features

  • Swap Functionality: Easily swap assets on the TON blockchain.
  • TonConnect Integration: Connect to the TON blockchain through TonConnect for secure and convenient user authentication.
  • Easy Integration: Add and configure the widget in your React project effortlessly.
  • Responsive Design: The widget is optimized for different devices and screen sizes.
  • Customizable: Adapt the widget’s appearance to match your application’s style.

Installation

Install the widget using npm or yarn:

# Using npm
npm install @mytonswap/widget

# Using yarn
yarn add @mytonswap/widget

Using CDN

<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@mytonswap/widget@latest/dist/cdn/mytonswap-widget.js"
></script>

Usage

After installation, you can integrate the @mytonswap/widget components in your React app as follows:

Swap Component

import "./App.css";
import { useEffect, useRef } from "react";
import { createSwap } from "@mytonswap/widget";
import { useTonConnectUI } from "@tonconnect/ui-react";

function App() {
    const [tc] = useTonConnectUI();
    const initMount = useRef(false);

    useEffect(() => {
        if (tc) {
            if (initMount) {
                return;
            }
            initMount.current = true;
            createSwap("swap-component", { tonConnectInstance: tc });
        }
    }, [tc]);
    return (
        <div className="App">
            <div id="swap-component"></div>
        </div>
    );
}

export default App;
:root {
    --border-color: #f4f4f5;
    --primary-color: #22c55e;
    --secondary-color: #ebebeb;
    --background-color: #ffffff;
    --modal-background-color: #ffffff;
    --swap-container-background: #f4f4f5;
    --swap-container-border-color: #ffffff;
    --input-card-color: #ffffff;
    --input-card-pay-color: #ffffff;
    --input-card-receive-color: #d0d5dd;
    --input-token-color: #f4f4f5;
    --change-direction-background-color: #22c55e;
    --change-direction-icon-color: #f4f4f5;
    --light-shade-color: #f4f4f5;
    --slippage-box-color: #71717a;
    --text-black-color: #000000;
    --text-white-color: #ffffff;
    --text-fade-color: #9caacb;
    --skeleton-shine-color: #9c9c9c;
    --price-impact-color: #e64646;
}

Wallet Button

import "./App.css";
import { useEffect } from "react";
import { createWalletProfile } from "@mytonswap/widget";
import { useTonConnectUI } from "@tonconnect/ui-react";

function App() {
    const [tc] = useTonConnectUI();
    useEffect(() => {
        if (tc) {
            createWalletProfile("wallet-button", {
                tonConnectInstance: tc,
                position: "bottom-right",
            });
        }
    }, [tc]);
    return (
        <div className="App">
            <div id="wallet-button"></div>
        </div>
    );
}

export default App;

Theme & Customization

You can fully customize the appearance of the @mytonswap/widget by defining css variables for widget like example down bellow.

:root {
    --border-color: #f4f4f5;
    --primary-color: #22c55e;
    --secondary-color: #ebebeb;
    --background-color: #ffffff;
    --modal-background-color: #ffffff;
    --swap-container-background: #f4f4f5;
    --swap-container-border-color: #ffffff;
    --input-card-color: #ffffff;
    --input-card-pay-color: #ffffff;
    --input-card-receive-color: #d0d5dd;
    --input-token-color: #f4f4f5;
    --change-direction-background-color: #22c55e;
    --change-direction-icon-color: #f4f4f5;
    --light-shade-color: #f4f4f5;
    --slippage-box-color: #71717a;
    --text-black-color: #000000;
    --text-white-color: #ffffff;
    --text-fade-color: #9caacb;
    --skeleton-shine-color: #9c9c9c;
    --price-impact-color: #e64646;
}

Default Tokens

You can specify default tokens to be displayed in the swap interface by passing a defaultTokens property to the createSwap function. This property should be an array of token objects, each containing the necessary details such as the token's address.

function App() {
    const [tc] = useTonConnectUI();
    useEffect(() => {
        if (tc) {
            createSwap("swap-component", {
                tonConnectInstance: tc,
                options: {
                    default_pay_token:
                        "EQD4P32U10snNoIavoq6cYPTQR82ewAjO20epigrWRAup54_",
                    default_receive_token:
                        "EQD-cvR0Nz6XAyRBvbhz-abTrRC6sI5tvHvvpeQraV9UAAD7",
                },
            });
        }
    }, [tc]);
    return (
        <div className="App">
            <div id="swap-component"></div>
        </div>
    );
}

Pinned tokens

You can pin specific tokens to the top of the token selection list by using the pin_tokens property to the createSwap function. This ensures that these tokens are always easily accessible to users.

function App() {
    const [tc] = useTonConnectUI();
    useEffect(() => {
        if (tc) {
            createSwap("swap-component", {
                tonConnectInstance: tc,
                options: {
                    pin_tokens: [
                        "EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c",
                        "EQD-cvR0Nz6XAyRBvbhz-abTrRC6sI5tvHvvpeQraV9UAAD7",
                    ],
                },
            });
        }
    }, [tc]);
    return (
        <div className="App">
            <div id="swap-component"></div>
        </div>
    );
}

AppId

This feature allows partners to be uniquely identified when using the widget, enabling better tracking and analytics for partner-related swaps.

function App() {
    const [tc] = useTonConnectUI();
    useEffect(() => {
        if (tc) {
            createSwap("swap-component", {
                tonConnectInstance: tc,
                options: {
                    app_id: "your_app_id",
                },
            });
        }
    }, [tc]);
    return (
        <div className="App">
            <div id="swap-component"></div>
        </div>
    );
}

Contributing

We welcome contributions to improve @mytonswap/widget. To contribute, follow these steps:

  1. Fork the repository.
  2. Create a new branch: git checkout -b feature-name.
  3. Make your changes and commit them: git commit -m 'Add feature'.
  4. Push to the branch: git push origin feature-name.
  5. Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Support For issues or questions, feel free to open an issue on our GitHub repository.