본문으로 건너뛰기

셀프 커스터디 지갑

셀프 커스터디 지갑은 사용자가 제어하는 device에 private key를 저장한다. 제3자는 key를 보유하지 않으며 사용자를 대신해 transaction을 authorize할 수 없다. device와 recovery passphrase를 잃으면 asset 접근 권한은 영구적으로 사라진다. Sui와 호환되는 모든 셀프 커스터디 지갑은 Wallet Standard를 구현하므로, Sui dApp Kit 및 다른 앱은 wallet별 code 없이도 wallet을 자동으로 탐색하고 연결할 수 있다.

Phantom​

Phantom은 Chrome, Firefox, Edge, Brave에서 사용할 수 있는 셀프 커스터디 multi-chain browser extension wallet이며, iOS와 Android용 mobile app도 제공한다. private key를 device에 저장하고 password로 암호화한다.

Sui에서 Phantom은 다음을 지원한다:

  • SUI 및 Sui-native token 송수신
  • app 안에서 token swap
  • NFT 관리
  • staking
  • Wallet Standard를 통한 Sui app 연결

시작하려면 phantom.com에서 Phantom을 설치하고 Sui account를 만들거나 import한다. Phantom은 Sui network를 자동으로 감지한다. 다른 곳에 이미 Sui account가 있다면 기존 recovery passphrase 또는 private key를 사용해 import할 수 있다.

Ledger​

Ledger는 컴퓨터나 phone과 물리적으로 분리된 dedicated secure element chip에 private key를 저장하는 hardware wallet이다. transaction은 device 자체에서 signing되므로 private key는 hardware를 떠나지 않는다.

Sui에서 Ledger는 다음을 지원한다:

  • Ledger Live를 통한 SUI 및 Sui token native 송수신
  • 확인 전에 사람이 읽을 수 있는 transaction 세부 정보를 device 화면에 표시하는 Clear Signing
  • hardware signer를 지원하는 third-party Sui wallet 및 app 연결

Sui에서 Ledger를 사용하려면 Ledger Wallet을 통해 Ledger device에 Sui app을 설치한다. Ledger device를 Ledger Wallet 같은 wallet 또는 Slush 같은 호환 Sui wallet에 연결한다.

app 통합​

Sui dApp Kit은 Sui app을 build하기 위한 공식 SDK이다. Phantom과 Ledger를 포함하여 Wallet Standard를 구현하는 모든 wallet은 wallet별 configuration 없이 자동으로 감지되어 connection UI에 표시된다.

Sui dApp Kit 2.0은 두 package로 구성된다:

  • @mysten/dapp-kit-core: vanilla JavaScript, React, Vue 또는 다른 framework와 함께 동작하는 framework-agnostic core.
  • @mysten/dapp-kit-react: hook과 미리 build된 component를 포함하며 core package 위에 build된 React binding.

설치​

React application의 경우:

npm i @mysten/dapp-kit-react @mysten/sui

vanilla JavaScript 또는 다른 framework의 경우:

npm i @mysten/dapp-kit-core @mysten/sui

dApp Kit instance 설정​

dApp Kit instance를 초기화할 configuration file을 만든다. createDAppKit 함수는 wallet connection, network configuration, Sui client access를 관리한다.

`

Parameter필수설명
networksYesapp이 지원하는 network 목록
defaultNetworkNoinitial network. 기본값은 networks 배열의 첫 번째 항목
createClientYes지정된 network에 대한 SuiClient를 반환하는 factory function
autoConnectNoload 시 마지막으로 사용한 wallet에 다시 연결한다. 기본값은 true
enableBurnerWalletNodevelopment-only burner wallet을 활성화한다. 기본값은 false
walletInitializersNoWallet Standard 밖의 wallet에 대한 custom wallet registration
slushWalletConfigNoSlush Wallet을 활성화하고 구성한다. 비활성화하려면 null로 설정

provider 추가​

component tree 전체에서 모든 hook을 사용할 수 있도록 application을 DAppKitProvider로 감싼다:

ConnectButton은 완전한 wallet connection UI를 렌더링한다. 사용자가 설치한 browser extension wallet 중 Wallet Standard를 구현하는 wallet을 추가 configuration 없이 자동으로 나열한다.

wallet state 읽기​

hook을 사용해 연결된 wallet 및 account 정보를 가져온다:

Hook설명
useWallets감지된 모든 Wallet Standard wallet을 반환
useWalletConnectionconnection status, connected wallet, current account를 반환
useCurrentWallet현재 연결된 wallet을 반환
useCurrentAccount현재 선택된 account를 반환
useDAppKitdApp Kit instance와 해당 action을 반환

사용 가능한 wallet 나열​

transaction signing 및 실행​

사용자가 Ledger 같은 hardware wallet을 통해 연결되어 있으면 signAndExecuteTransaction은 signing request를 device로 routing한다. 사용자가 hardware device에서 승인하면 host wallet은 signed transaction을 Sui network에 제출하고 digest와 effect를 app에 반환한다.

선호 wallet​

특정 wallet을 connection UI의 맨 위에 정렬하려면 createDAppKit에서 preferredWallets를 사용한다. wallet은 이름으로 match된다:

export const dAppKit = createDAppKit({
  networks: ['mainnet'],
  createClient: (network) =>
    new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] }),
  walletInitializers: [],
});

wallet ordering 및 filtering은 ConnectModal component를 통해서도 제어할 수 있다.