Bitget Wallet OmniConnect SDK

本节旨在指导您如何使用OmniConnect使已集成WalletConnect的DApps在 Telegram Mini App 内与Bitget Wallet和Bitget Wallet Lite建立连接。按照下面提供的内容将帮助您快速实现此功能。

如果您还不熟悉如何开发Telegram Mini App或使用WalletConnect连接钱包，建议首先仔细阅读以下文档：

Telegram App 开发指南

WalletConnect

预期结果示例

由于Telegram上的平台限制，WalletConnect目前无法在Telegram Mini App内正常运行。如果您在Telegram Mini App内开发DApp，您可能会遇到类似问题：无论您是尝试连接钱包还是提示签名，WalletConnect都无法成功启动Bitget Wallet或Bitget Wallet Lite，要么卡在启动界面，要么完全没有响应。

通过根据本文档配置您的项目，您可以快速解决这些问题，使您的DApp能够在Telegram Mini App内正确使用WalletConnect，实现以下功能：

通过点击连接，弹出窗口将显示Bitget Wallet入口，允许用户连接其Bitget Wallet或Bitget Wallet Lite。

点击Bitget Wallet或Bitget Wallet Lite后，用户将成功重定向到Bitget Wallet进行连接和签名。

开发流程

接下来，我们将使用WalletConnect官方演示代码来演示如何通过几个简单配置实现上述结果。

1. 安装项目依赖


npm i @bitget-wallet/omni-connect @reown/appkit-adapter-wagmi @tanstack/react-query @wagmi/core @web3modal/wagmi networks react react-dom viem wagmi

2. DApp 初始化 WalletConnect 逻辑

此步骤的关键是将featuredWalletIds传递到createWeb3Modal方法中。通过此配置，Bitget Wallet和Bitget Wallet Lite将显示在WalletConnect的钱包选择弹窗中。


featuredWalletIds: [
    "38f5d18bd8522c244bdd70cb4a68e0e718865155811c043f052fb9f1c51de662", // Bitget Wallet项目ID
    "21c3a371f72f0057186082edb2ddd43566f7e908508ac3e85373c6d1966ed614", // Bitget Wallet Lite项目ID
],


// 0. 设置queryClient
const queryClient = new QueryClient();
 
// 1. 从https://cloud.walletconnect.com获取projectId
const projectId = import.meta.env.VITE_PROJECT_ID;
if (!projectId) throw new Error("项目ID未定义");
 
// 2. 创建wagmiConfig
const metadata = {
  name: "Web3Modal",
  description: "Web3Modal示例",
  url: "https://web3modal.com",
  icons: ["https://avatars.githubusercontent.com/u/37784886"],
};
 
// 定义链
const chains = [mainnet, arbitrum] as const;
 
// 创建连接器
const connectors: CreateConnectorFn[] = [];
connectors.push(walletConnect({ projectId, metadata, showQrModal: false }));
connectors.push(injected({ shimDisconnect: true }));
 
connectors.push(
  authConnector({
    options: { projectId },
    socials: ["google", "x", "github", "discord", "apple"], // 这将创建一个非托管钱包（有关更多信息，请参见https://secure.walletconnect.com/dashboard）
    showWallets: true,
    email: true,
    walletFeatures: false,
  })
);
 
const wagmiConfig = createConfig({
  chains, // 在此使用定义的链
  transports: {
    [mainnet.id]: http(),
    [arbitrum.id]: http(),
  },
  connectors: connectors,
});
 
// 3. 创建模态框
createWeb3Modal({
  wagmiConfig,
  projectId,
  featuredWalletIds: ["38f5d18bd8522c244bdd70cb4a68e0e718865155811c043f052fb9f1c51de662", // Bitget Wallet项目ID
    "21c3a371f72f0057186082edb2ddd43566f7e908508ac3e85373c6d1966ed614", // Bitget Wallet Lite项目ID
  ],
});

3. DApp 初始化逻辑和@bitget-wallet/omni-connect

在此步骤中，关键是在DApp页面初始化期间执行overrideWindowOpen()方法。这将解决WalletConnect在Telegram Mini App内无法正确启动Bitget Wallet或Bitget Wallet Lite的问题。

注意：overrideWindowOpen()方法依赖于Telegram Mini App提供的 API，因此只能在Telegram Mini App内执行。确保此方法不会在其他环境中执行。


useEffect(() => {
  const initOverrideWindowOpen = async () => {
    // 检查是否为Telegram Mini App环境
    const isTMA = await isTelegramEnvironment()
    if (!isTMA) {
      return
    }
    // 执行@bitget-wallet/omni-connect初始化
    overrideWindowOpen()
  }
  initOverrideWindowOpen()
}, [])

此时，您已完成在Telegram Mini App内使用WalletConnect连接到Bitget Wallet或Bitget Wallet Lite的配置。总结一下，两个关键配置是：

1. 在Wallet Connect初始化期间在featuredWalletIds内配置 Bitget Wallet ID。
2. 在初始化过程中调用@bitget-wallet/omni-connect的overrideWindowOpen()方法。

完整示例


import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import { createWeb3Modal } from "@web3modal/wagmi/react";
 
import { http, createConfig, WagmiProvider } from "wagmi";
import { mainnet, arbitrum } from "viem/chains";
import { walletConnect, injected } from "wagmi/connectors";
import type { CreateConnectorFn } from "@wagmi/core";
 
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { authConnector } from "@web3modal/wagmi";
import { isTelegramEnvironment, overrideWindowOpen } from "@bitget-wallet/omni-connect";
 
import "./styles.css";
 
// 0. 设置queryClient
const queryClient = new QueryClient();
 
// 1. 在https://cloud.walletconnect.com获取projectId
const projectId = import.meta.env.VITE_PROJECT_ID;
if (!projectId) throw new Error("项目ID未定义");
 
// 2. 创建wagmiConfig
const metadata = {
  name: "Web3Modal",
  description: "Web3Modal示例",
  url: "https://web3modal.com",
  icons: ["https://avatars.githubusercontent.com/u/37784886"],
};
 
// 定义链
const chains = [mainnet, arbitrum] as const;
 
// 创建连接器
const connectors: CreateConnectorFn[] = [];
connectors.push(walletConnect({ projectId, metadata, showQrModal: false }));
connectors.push(injected({ shimDisconnect: true }));
 
connectors.push(
  authConnector({
    options: { projectId },
    socials: ["google", "x", "github", "discord", "apple"], // 这将创建一个非托管钱包（请查看https://secure.walletconnect.com/dashboard获取更多信息）
    showWallets: true,
    email: true,
    walletFeatures: false,
  })
);
 
const wagmiConfig = createConfig({
  chains, // 在此使用定义的链
  transports: {
    [mainnet.id]: http(),
    [arbitrum.id]: http(),
  },
  connectors: connectors,
});
 
// 3. 创建模态框
createWeb3Modal({
  wagmiConfig,
  projectId,
  featuredWalletIds: [
    "38f5d18bd8522c244bdd70cb4a68e0e718865155811c043f052fb9f1c51de662", // Bitget Wallet项目ID
    "21c3a371f72f0057186082edb2ddd43566f7e908508ac3e85373c6d1966ed614", // Bitget Wallet Lite项目ID
  ],
 
});
 
const App = () => {
  useEffect(() => {
    const initOverrideWindowOpen = async () => {
        // 检查环境是否为Telegram Mini App
        const isTMA = await isTelegramEnvironment();
        if (!isTMA) {
          return;
        }
        // 执行@bitget-wallet/omni-connect的初始化方法
        overrideWindowOpen();
    };
    initOverrideWindowOpen();
  }, []);
 
  return (
    <React.StrictMode>
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <div className="centered-div">
            <w3m-button />
          </div>
        </QueryClientProvider>
      </WagmiProvider>
    </React.StrictMode>
  );
};
 
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <App />
);

附录

@bitget-wallet/omni-connect