Skip to content

createWallet

The createWallet function initializes the embedded wallet and exposes web3 providers to the web page.

Example

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(/* ... */)

Reference

appId

Identifier of your application. This allows your integration to have its own settings — allowed parent origins, feature flags, and per-dApp analytics scope.

INFO

This is only required for production. See the App ID guide for registration. You can omit it during local development; the wallet will load with a localhost-only allow-list.

walletUrl

Origin of the Drop wallet iframe. Defaults to https://dropwallet.app.

Only override this to point at a preview deployment or a local wallet instance — production dApps should always leave the default.

signerUrl

Origin of the Drop signer popup used for passkey flows. Defaults to the canonical signer. Same rules as walletUrl apply.

providers

List of web3 providers you want to expose to your dApp, with their optional configuration.

Ethereum & EVM-compatible chains

By default, an EIP-1193 provider is returned.

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

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

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

Additionally, the provider is announced to the web page following EIP-6963. If you want to disable this behavior, pass the eip6963 option.

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

If your dApp expects the provider to be available at window.ethereum, you can also inject it there by passing the dangerouslyInjectWindow option.

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

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

Solana

By default, a Phantom-like provider is returned.

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

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

solanaProvider.connect()

Additionally, the provider is announced to the web page following Wallet Standard. If you want to disable this behavior, pass the walletStandard option.

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

If your dApp expects the provider to be available at window.solana, you can also inject it there by passing the dangerouslyInjectWindow option.

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

window.solana.connect()

Bitcoin

By default, a Sats Connect v1 provider is returned.

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

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

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

Additionally, the provider is announced to the web page following Wallet Standard. If you want to disable this behavior, pass the walletStandard option.

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

Universal

Drop ships with a universal provider that lets you use a single connect flow for a multi-chain dApp. It is recommended to interact with the provider via Wallet Standard. The universal provider registers itself with the name Drop Universal.

Example
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()

Once the universal provider is connected, you can use the other providers as you are used to.

INFO

The universal provider will only connect other providers that are also enabled in the config.

Additionally, the provider is accessible from the wallet instance.

Example
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()

Return value

createWallet returns a Wallet instance with the following methods:

getProvider(chain)

Returns a promise resolving to the web3 provider for the given chain ('bitcoin', 'ethereum', 'solana', or 'universal'). Resolves to null if the provider was not enabled in the providers config.

renderWidget(element)

Attaches the wallet iframe to a specific DOM element so the user sees the wallet UI. Pass null to detach the iframe back to document.body. The React bindings handle this for you via <WalletWidget>.

setWidgetConfig(config)

Forwards a widget configuration (theme, size, shape, compact) to the embedded wallet. The React bindings handle this for you via <WalletWidget>.

disconnect()

Forwards a wallet:disconnect message to the iframe. Useful if you want to programmatically log the user out without waiting for them to click the in-widget disconnect button.