지갑 설정
앱체인에 지갑을 연결하고 최종 사용자 지갑 UX를 설계하는 방법
앱체인과 상호작용하기 위한 지갑 설정은 쉽습니다. 가장 간단한 방법은 앱체인의 블록 탐색기를 사용하는 것입니다. 블록 탐색기는 MetaMask나 다른 EVM 호환 지갑에 네트워크를 추가할 수 있는 원클릭 옵션을 제공합니다.
MetaMask 또는 다른 지갑에 앱체인 추가하기
- 앱체인의 블록 탐색기를 방문하세요(예:
https://explorer.your-appchain.syndicate.io). - 지갑을 연결하세요.
- "MetaMask에 추가" 또는 "네트워크 추가" 버튼을 클릭하세요.
- 지갑에서 네트워크 추가를 승인하세요.
- MetaMask에서 지갑 상단의 네트워크 드롭다운을 클릭하여 네트워크 간 전환할 수 있습니다. MetaMask는 선택한 네트워크에 대해 올바른 RPC, 체인 ID 및 통화 기호를 자동으로 사용합니다.
- MetaMask 설정의 "네트워크"에서 네트워크를 확인하고 관리할 수 있습니다.
MetaMask 네트워크 구성에 대한 자세한 정보는 MetaMask 네트워크 구성 가이드를 참조하세요.
최종 사용자 지갑 UX 설계하기
- 사용자의 기존 지갑 사용하기(WalletConnect, MetaMask와 같은 주입된 지갑, Coinbase Wallet 확장 프로그램)
- 예제 앱에서 사용하는 것처럼 임베디드 지갑 제공업체(예: Para)를 사용하여 사용자로부터 지갑을 완전히 추상화하기
1. 기존 지갑 연결하기
아래는 WalletConnect와 주입된 지갑을 사용하는 wagmi의 최소 설정입니다. rpcUrl, chainId 및 currency를 앱체인 값으로 대체하세요.
const appchain = {
id: 12345, // your appchain id
name: "Your Appchain",
nativeCurrency: { name: "Token", symbol: "TOK", decimals: 18 },
rpcUrls: { default: { http: ["https://rpc.your-appchain.syndicate.io"] } },
};
const wagmiConfig = createConfig({
chains: [appchain],
transports: { [appchain.id]: http("https://rpc.your-appchain.syndicate.io") },
connectors: [
injected({ shimDisconnect: true }),
walletConnect({ projectId: "YOUR_WC_PROJECT_ID" }),
],
ssr: true,
});2. 임베디드 지갑
확장 프로그램 없이 원활한 온보딩을 선호한다면 임베디드 지갑(예: Para)을 사용하세요. 이것이 예제 앱(Adrift)이 사용자를 온보딩하는 방식입니다.
const appchain = {
id: 12345, // your appchain id
name: 'Your Appchain',
nativeCurrency: { name: 'Token', symbol: 'TOK', decimals: 18 },
rpcUrls: { default: { http: ['https://rpc.your-appchain.syndicate.io'] } },
}
<ParaProviderBase
config={{ appName: 'Your App' }}
externalWalletConfig={{
wallets: [],
evmConnector: { config: { chains: [appchain], ssr: true } },
}}
paraClientConfig={{ apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY, env: 'production' }}
>
{children}
</ParaProviderBase>연결되면 Para의 viem 클라이언트를 사용하여 앱체인에 트랜잭션을 서명하고 전송하세요.
예제 앱 가이드에서 전체 과정을 확인하세요: 지갑 설정 (예제 앱)