Asset Chain Telegram Mini App Demo

PreviousSetting up an Indexer NextEVM-Gas-Optimizations

Last updated 6 months ago

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

Clone the Repository:

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

Install Dependencies: Run the following command to install the necessary packages:
```
npm install
```
Start the Development Server: Run the server locally:
```
npm run dev
```
Environment Variables:
- Rename .env.example to .env.local and configure the following parameters:
  - NEXT_PUBLIC_PROJECT_ID="": Add your project ID from .
  - NEXT_PUBLIC_INFURA_KEY="": Add your Infura API key from .
  - 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

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();
```

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

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

Use MetaMask Provider: If you prefer MetaMask as your default wallet provider, configure it like so:
```
import { metaMaskConfig } from "../configs/wagmiConfig";
const defaultConnector = metaMaskConfig;
```
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

License

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

Contact