셀프 커스터디 지갑

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

Phantom

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

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

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

시작하려면 phantom.com에서 Phantom을 설치하고 Sui 계정을 만들거나 import한다. Phantom은 Sui network를 자동으로 감지한다. 다른 곳에 이미 Sui 계정이 있다면 기존 복구 패스프레이즈 또는 개인 키를 사용해 import할 수 있다.

Ledger

Ledger는 컴퓨터나 phone과 물리적으로 분리된 dedicated secure element chip에 개인 키를 저장하는 하드웨어 지갑이다. 트랜잭션은 device 자체에서 signing되므로 개인 키는 hardware를 떠나지 않는다.

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

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

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

app 통합

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

Sui dApp Kit 2.0은 두 패키지로 구성된다:

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

설치

React 애플리케이션의 경우:

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

vanilla JavaScript 또는 다른 프레임워크의 경우:

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

dApp Kit instance 설정

dApp Kit 인스턴스를 초기화할 configuration file을 만든다. createDAppKit 함수는 지갑 connection, network configuration, Sui 클라이언트 access를 관리한다.

`

File not found in manifest: packages/dapp-kit-next/packages/dapp-kit-core/src/core/index.ts. You probably need to run `pnpm prebuild` and restart the site.

Parameter	Required	Description
networks	Yes	List of networks the app supports
defaultNetwork	No	Initial network. Defaults to first in the networks array
createClient	Yes	Factory function that returns a SuiClient for a given network
autoConnect	No	Reconnects to the last used wallet on load. Defaults to true
enableBurnerWallet	No	Enables a development-only burner wallet. Defaults to false
walletInitializers	No	Custom wallet registrations for wallets outside the Wallet Standard
slushWalletConfig	No	Enables and configures Slush Wallet. Set to null to disable

Add the provider

Wrap your application with DAppKitProvider to make all hooks available throughout the component tree:

File not found in manifest: packages/dapp-kit-next/packages/dapp-kit-react/src/components/DAppKitProvider.tsx. You probably need to run `pnpm prebuild` and restart the site.

ConnectButton renders a complete wallet connection UI. It automatically lists any browser extension wallets the user has installed that implement the Wallet Standard with no additional configuration required.

Read wallet state

Use hooks to access information about the connected wallet and account:

Hook	Description
useWallets	Returns all detected Wallet Standard wallets
useWalletConnection	Returns connection status, connected wallet, and current account
useCurrentWallet	Returns the currently connected wallet
useCurrentAccount	Returns the currently selected account
useDAppKit	Returns the dApp Kit instance and its actions

File not found in manifest: packages/dapp-kit-next/packages/dapp-kit-react/src/hooks/useWalletConnection.ts. You probably need to run `pnpm prebuild` and restart the site.

File not found in manifest: packages/dapp-kit-next/packages/dapp-kit-react/src/hooks/useCurrentWallet.ts. You probably need to run `pnpm prebuild` and restart the site.

File not found in manifest: packages/dapp-kit-next/packages/dapp-kit-react/src/hooks/useCurrentAccount.ts. You probably need to run `pnpm prebuild` and restart the site.

List available wallets

File not found in manifest: packages/dapp-kit-next/packages/dapp-kit-react/src/hooks/useWallets.ts. You probably need to run `pnpm prebuild` and restart the site.

Sign and execute a transaction

File not found in manifest: packages/dapp-kit-next/packages/dapp-kit-react/src/hooks/useDAppKit.ts. You probably need to run `pnpm prebuild` and restart the site.

When the user is connected through a hardware wallet such as Ledger, signAndExecuteTransaction routes the signing request to the device. Once the user approves on the hardware device, the host wallet submits the signed transaction to the Sui network and returns the digest and effects to your app.

Preferred wallets

createDAppKit에서 preferredWallets를 사용해 특정 지갑을 연결 UI의 상단으로 정렬한다. 지갑은 이름으로 match된다.

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

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