Skip to content

createWallet

createWallet 함수는 임베디드 지갑을 초기화하고 웹 페이지에 web3 provider를 노출합니다.

예제

ts
import { createWallet } from '@money-sdk/core'

const wallet = createWallet({
  appId: '<YOUR_APP_ID>',
  providers: {
    bitcoin: true,
    ethereum: true,
    solana: true,
  },
})

const ethereumProvider = await wallet.getProvider('ethereum')

ethereumProvider.request(/* ... */)

레퍼런스

appId

여러분 애플리케이션의 식별자입니다. 이를 통해 여러분의 통합은 고유한 설정 — 허용되는 상위 origin, 기능 플래그, dApp별 분석 범위 — 을 가질 수 있습니다.

INFO

이 값은 프로덕션에서만 필수입니다. 등록은 App ID 가이드를 참조하세요. 로컬 개발 중에는 생략할 수 있으며, 지갑은 localhost 전용 허용 목록으로 로드됩니다.

walletUrl

Drop 지갑 iframe의 origin입니다. 기본값은 https://dropwallet.app입니다.

프리뷰 배포나 로컬 지갑 인스턴스를 가리키도록 할 때만 이를 재정의하세요 — 프로덕션 dApp은 항상 기본값을 유지해야 합니다.

signerUrl

passkey 플로우에 사용되는 Drop 서명자 팝업의 origin입니다. 기본값은 표준 서명자입니다. walletUrl과 동일한 규칙이 적용됩니다.

providers

dApp에 노출하려는 web3 provider 목록과 선택적 설정입니다.

Ethereum 및 EVM 호환 체인

기본적으로 EIP-1193 provider가 반환됩니다.

예제
ts
const wallet = createWallet({
  providers: {
    ethereum: true,
  },
})

const ethereumProvider = await wallet.getProvider('ethereum')

ethereumProvider.request(/* ... */)

또한 provider는 EIP-6963에 따라 웹 페이지에 공지됩니다. 이 동작을 비활성화하려면 eip6963 옵션을 전달하세요.

예제
ts
const wallet = createWallet({
  providers: {
    ethereum: {
      eip6963: false,
    },
  },
})

dApp이 provider가 window.ethereum에서 사용 가능하기를 기대한다면, dangerouslyInjectWindow 옵션을 전달하여 그곳에 주입할 수도 있습니다.

예제
ts
const wallet = createWallet({
  providers: {
    ethereum: {
      dangerouslyInjectWindow: true,
    },
  },
})

window.ethereum.request(/* ... */)

Solana

기본적으로 Phantom 유사 provider가 반환됩니다.

예제
ts
const wallet = createWallet({
  providers: {
    solana: true,
  },
})

const solanaProvider = await wallet.getProvider('solana')

solanaProvider.connect()

또한 provider는 Wallet Standard에 따라 웹 페이지에 공지됩니다. 이 동작을 비활성화하려면 walletStandard 옵션을 전달하세요.

예제
ts
const wallet = createWallet({
  providers: {
    solana: {
      walletStandard: false,
    },
  },
})

dApp이 provider가 window.solana에서 사용 가능하기를 기대한다면, dangerouslyInjectWindow 옵션을 전달하여 그곳에 주입할 수도 있습니다.

예제
ts
const wallet = createWallet({
  providers: {
    solana: {
      dangerouslyInjectWindow: true,
    },
  },
})

window.solana.connect()

Bitcoin

기본적으로 Sats Connect v1 provider가 반환됩니다.

예제
ts
const wallet = createWallet({
  providers: {
    bitcoin: true,
  },
})

const bitcoinProvider = await wallet.getProvider('bitcoin')

bitcoinProvider.connect(/* ... */)

또한 provider는 Wallet Standard에 따라 웹 페이지에 공지됩니다. 이 동작을 비활성화하려면 walletStandard 옵션을 전달하세요.

예제
ts
const wallet = createWallet({
  providers: {
    bitcoin: {
      walletStandard: false,
    },
  },
})

Universal

Drop은 멀티체인 dApp에서 단일 연결 플로우를 사용할 수 있게 해주는 universal provider를 제공합니다. Wallet Standard를 통해 provider와 상호작용하는 것을 권장합니다. universal provider는 Drop Universal이라는 이름으로 자신을 등록합니다.

예제
ts
import { createWallet } from '@money-sdk/core'

const wallet = createWallet({
  providers: {
    ethereum: true,
    solana: true,
    universal: true,
  },
})
tsx
import { useWallets, useConnect } from '@wallet-standard/react'
import { useMemo } from 'react'

const wallets = useWallets()
const universalWallet = useMemo(
  () => wallets.find(({ name }) => name === 'Drop Universal'),
  [wallets],
)

const [connecting, connect] = useConnect(universalWallet)

/** Connect Ethereum and Solana at the same time. */
const accounts = connect()

universal provider가 연결되면, 다른 provider들은 평소처럼 사용할 수 있습니다.

INFO

universal provider는 설정에서 함께 활성화된 다른 provider만 연결합니다.

또한 provider는 지갑 인스턴스에서 접근할 수 있습니다.

예제
ts
import { createWallet } from '@money-sdk/core'

const wallet = createWallet({
  providers: {
    bitcoin: true,
    ethereum: true,
    solana: true,
    universal: true,
  },
})

const provider = await wallet.getProvider('universal')

/** Connect Bitcoin, Ethereum and Solana at the same time. */
const accounts = provider.connect()

반환 값

createWallet은 다음 메서드를 가진 Wallet 인스턴스를 반환합니다:

getProvider(chain)

지정된 체인('bitcoin', 'ethereum', 'solana' 또는 'universal')의 web3 provider로 해결되는 promise를 반환합니다. 해당 provider가 providers 설정에서 활성화되지 않았다면 null로 해결됩니다.

renderWidget(element)

사용자가 지갑 UI를 볼 수 있도록 지갑 iframe을 특정 DOM 요소에 연결합니다. iframe을 document.body로 다시 분리하려면 null을 전달하세요. React 바인딩은 <WalletWidget>을 통해 이를 대신 처리합니다.

setWidgetConfig(config)

위젯 설정(theme, size, shape, compact)을 임베디드 지갑에 전달합니다. React 바인딩은 <WalletWidget>을 통해 이를 대신 처리합니다.

disconnect()

iframe에 wallet:disconnect 메시지를 전달합니다. 사용자가 위젯 내부의 disconnect 버튼을 클릭할 때까지 기다리지 않고 프로그래밍 방식으로 사용자를 로그아웃시키고 싶을 때 유용합니다.