Asset Chain Telegram Mini App Demo

This project shows builders how to develop Telegram Mini Apps on Asset Chain. It uses Next.js, wagmi for Asset Chain wallet connections, and various injected providers for ease of use.

Table of content

• Getting Started

• Contributing

• License

• Support

Getting Started

1. Clone the Repository:

   git clone https://github.com/xendfinance/assetchain-telegram-demo-app.git demo-app
   cd demo-app

2. Install Dependencies: Run the following command to install the necessary packages:

   npm install

3. Start the Development Server: Run the server locally:

   npm run dev

4. Environment Variables:

   • Rename .env.example to .env.local and configure the following parameters:

     • NEXT_PUBLIC_PROJECT_ID="": Add your project ID from Reown.

     • NEXT_PUBLIC_INFURA_KEY="": Add your Infura API key from Infura.

     • NEXT_PUBLIC_MANIFEST_URL="": Add a manifest URL. Example: "https://ton-connect.github.io/demo-dapp-with-react-ui/tonconnect-manifest.json".

Connecting to Injected Providers

To connect the app with different Ethereum wallet providers, you can modify the default connector in your src/hooks/useEvmWallet.tsx file based on your needs.

Injected Providers Setup

1. Use Injected Provider: This sets the default connector to detect and use any wallet injected into the browser, such as MetaMask or Coinbase Wallet.

   import { injected } from "@wagmi/core";
   const defaultConnector = injected();

2. Use Coinbase Provider: To connect with Coinbase Wallet, change the configuration:

   import { coinbaseConfig } from "../configs/wagmiConfig";
   const defaultConnector = coinbaseConfig;

3. Use MetaMask Provider: If you prefer MetaMask as your default wallet provider, configure it like so:

   import { metaMaskConfig } from "../configs/wagmiConfig";
   const defaultConnector = metaMaskConfig;

4. Use WalletConnect Provider: To integrate WalletConnect, which supports mobile wallets, adjust the default connector to:

   import { walletConnectConfig } from "../configs/wagmiConfig";
   const defaultConnector = walletConnectConfig;

---

Network Configuration

const defaultChainId = AssetChainMainnet.id; // AssetChainTestnet.id

Explanation

• defaultChainId: Sets the initial chain ID configuration for connecting.

• AssetChainMainnet.id: The default chain ID is currently set to the AssetChain mainnet ID. This is useful for production use.

• AssetChainTestnet.id: You can switch to the testnet for testing and development purposes by changing the comment.

With this setup, you'll be able to connect your Telegram mini app to various Asset Chain, giving your users flexibility in interacting with blockchain-enabled features.

Contributing

See CONTRIBUTING.md for contribution and pull request protocol. We expect contributors to follow our guide when submitting code or comments.

License

This project is licensed under the GNU General Public License v3.0. See the LICENSE file for details.

Contact

For questions or suggestions, just say Hi on Telegram. We're always glad to help.