跳至主要内容

🪝 安裝

使用快速入門或手動設置來啟動 KryptoGO Kit。

快速入門​

要建立新的 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文件。

更多範例​

要查看一些運行中的KryptoGO Kit範例,甚至使用它們來自動搭建新項目,請查看官方範例。