🪝 安裝

快速入門

要建立新的 KryptoGO Kit + wagmi + Next.js 應用程式，請使用以下其中一個指令和您偏好的套件管理器：

npm init @kryptogo/kryptogokit@latest
# or
yarn create @kryptogo/kryptogokit@latest
# or
pnpm create @kryptogo/kryptogokit@latest

這將提示您輸入專案名稱，生成一個包含範本專案的新目錄，並安裝所有所需的相依套件。

或者，您可以手動將 KryptoGOKit 整合到現有的專案中。

手動設置

安裝 KryptoGOKit 及其相依套件 wagmi 和 ethers。

npm install @kryptogo/kryptogokit wagmi ethers

匯入

匯入 kryptogokit、wagmi 和 ethers。

import '@kryptogo/kryptogokit/styles.css';

import {
  getDefaultWallets,
  KG WalletKitProvider,
} from '@kryptogo/kryptogokit';
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

設定

設定您所需的鏈接並生成所需的連接器。您還需要設定 wagmi 客戶端。

...
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
  [
    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'My KryptoGO Kit App',
  chains
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

閱讀更多關於使用 wagmi 配置鏈接和提供者。

包裝提供者

使用 KryptogoKitProvider 和 WagmiConfig 包裝您的應用程式。

const App = () => {
  return (
    <WagmiConfig client={wagmiClient}>
      <KryptogoKitProvider chains={chains}>
        </* Your App */>
      </KryptogoKitProvider>
    </WagmiConfig>
  );
};

添加連接按鈕

然後，在您的應用程式中，匯入並渲染 ConnectButton 元件。

import { ConnectButton } from '@kryptogo/kryptogokit';

export const YourApp = () => {
  return <ConnectButton />;
};

KryptoGO Kit 現在將管理您使用者的錢包選擇，顯示錢包和交易資訊，並處理網路和錢包切換。

Remix

當使用 Remix 時，必須將 KryptoGO Kit 添加到您的伺服器相依套件清單，因為它是作為 ESM 套件發布的。

添加您自己的功能

現在，您的使用者可以連接他們的錢包，您可以使用 wagmi 開始構建應用程式的其餘部分。

使用 wagmi 的全面 React Hooks 套件，可以發送交易、與合約互動、解析 ENS 詳細資訊等等。

更多詳細資訊，請參閱wagmi文件。

快速入門​

手動設置​

匯入​

設定​

包裝提供者​

添加連接按鈕​

Remix​

添加您自己的功能​

更多範例​