Anchor 의 Wallet Button 같이 Install, Connect, Wallet 정보 들을 일괄적으로 관리하는 기능을 만들려 할 때 useWallet() 의 정보들을 조합하는 방법을 안내합니다.

status

현재 상태를 알려줍니다.

import { useWallet, WalletStatus } from '@terra-money/wallet-provider'

const { status } = useWallet()

switch (status) {
	case WalletStatus.INITIALIZING:
		return <p>초기화 중... 아무런 기능도 실행되면 안됩니다.</p>
	case WalletStatus.WALLET_NOT_CONNECTED:
		return <p>연결된 Wallet 이 없습니다. Connect 와 Install 을 표시해야 합니다</p>
	case WalletStatus.WALLET_CONNECTED:
		return <p>연결된 Wallet 이 있습니다. Wallet 의 정보를 표시해줍니다</p>
	default:
		throw new Error('발생될 수 없습니다')
}

availableConnectTypes, connect()

현재 Web Browser 의 상태 (Mobile Browser 인지 확인, Desktop Chrome 의 경우 Chrome Extension 이 설치 되었는지...) 에 따라 연결 가능한 ConnectType 들을 확인하고, 해당 ConnectType 을 사용해서 Wallet 연결을 할 수 있습니다.

import { useWallet, WalletStatus } from '@terra-money/wallet-provider'

const { status, availableConnectTypes, connect } = useWallet()

switch (status) {
	case WalletStatus.WALLET_NOT_CONNECTED:
		return (
			<div>
				{
					availableConnectTypes.map(connectType => (
						<button key={connectType} onClick={() => connect(connectType)}>
							{connectType}
						</button>
					))
				}
			</div>
		)
}

이와 같이 처리할 수도 있고,

import { useWallet, WalletStatus, ConnectType } from '@terra-money/wallet-provider'

const { status, availableConnectTypes, connect } = useWallet()

switch (status) {
	case WalletStatus.WALLET_NOT_CONNECTED:
		return (
			<div>
				{
					availableConnectTypes.includes(ConnectType.CHROME_EXTENSION) &&
					<button onClick={() => connect(ConnectType.CHROME_EXTENSION)}>
						Connect Chrome Extension
					</button>
				}
				{
					availableConnectTypes.includes(ConnectType.WALLETCONNECT) &&
					<button onClick={() => connect(ConnectType.WALLETCONNECT)}>
						Connect Wallet Connect
					</button>
				}
				{
					availableConnectTypes.includes(ConnectType.READONLY) &&
					<button onClick={() => connect(ConnectType.READONLY)}>
						View an Address
					</button>
				}
			</div>
		)
}

이와 같이 Array.includes() 를 사용해서 별개로 처리할 수도 있습니다.

availableInstallTypes, install()

Chrome Extension 과 같이 설치가 필요한 ConnectType 들에 대한 정보를 제공합니다. 사용법은 availableConnectTypes + connect() 와 비슷합니다.

import { useWallet, WalletStatus, ConnectType } from '@terra-money/wallet-provider'

const { 
	status, 
	availableConnectTypes, 
	connect,
	availableInstallTypes,
	install,
} = useWallet()

switch (status) {
	case WalletStatus.WALLET_NOT_CONNECTED:
		return (
			<div>
				{
					// Chrome Extension 가 설치된 상태면 표시
					availableConnectTypes.includes(ConnectType.CHROME_EXTENSION) &&
					<button onClick={() => connect(ConnectType.CHROME_EXTENSION)}>
						Connect Chrome Extension
					</button>
				}
				{
					// Chrome Extension 을 설치할 수 있는 상황이면 표시
					availableInstallTypes.includes(ConnectType.CHROME_EXTENSION) &&
					<button onClick={() => install(ConnectType.CHROME_EXTENSION)}>
						Install Chrome Extension
					</button>
				}
			</div>
		)
}

현재 ConnectType.CHROME_EXTENSION 만 설치를 제공하고 있지 않습니다.

wallets, disconnect()

Wallet 이 연결된 상태에서는 wallets 와 disconnect() 를 사용할 수 있습니다.

import { useWallet, WalletStatus } from '@terra-money/wallet-provider'

const { status, wallets, disconnect } = useWallet()

switch (status) {
	case WalletStatus.WALLET_CONNECTED:
		return (
			<div>
				{
					// status 와 wallets 는 동기화되어서 오지 않습니다
					// status === WalletStatus.WALLET_CONNECTED 라도
					// 아주 잠깐의 시간동안 wallets가 Empty Array로 올 수 있습니다.
					wallets.length > 0 &&
					<div>
						<p>지갑의 정보를 표시할 수 있습니다.</p>
						<p>walletAddress: {wallets[0].walletAddress}</p>
					</div>
				}
				<button onClick={() => disconnect()}>
					Disconnect
				</button>
			</div>
		)
}