@initia/wallet-widget
v0.175.0
Published
## Getting started
Downloads
1,335
Keywords
Readme
Initia Wallet Widget
Getting started
To get started, import the script:
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@initia/wallet-widget/dist/index.js" type="module" async defer></script>
</head>
<body>
<div id="address"></div>
<button id="onboard">Onboard</button>
<button id="disconnect">Disconnect</button>
<button id="send">Send</button>
<div id="tx-hash"></div>
<script src="index.js"></script>
</body>
</html>To ensure that you're always using the latest version of the widget, it's recommended to append a random string in the CDN URL. This will force the browser to fetch the script again whenever the page is reloaded.
Once the script is loaded, you can access the createWalletWidget() method in the window object.
window.onload = async () => {
// If your layer's chain.json has already been registered in [initia-labs/initia-registry](https://github.com/initia-labs/initia-registry):
const widget = await window.createWalletWidget({ chainId: "YOUR_CHAIN_ID" })
// or, to manually register your layer:
const layer = {
chain_id: "YOUR_CHAIN_ID",
chain_name: "YOUR_CHAIN_NAME",
apis: {
rpc: [{ address: "YOUR_RPC_URL" }],
rest: [{ address: "YOUR_LCD_URL" }],
},
fees: {
fee_tokens: [{ denom: "YOUR_FEE_DENOM", fixed_min_gas_price: 0.15 }],
},
bech32_prefix: "init",
}
const widget = await window.createWalletWidget({ customLayer: layer })
const { address$, onboard, disconnect, requestTx } = widget
address$.subscribe((address) => {
document.getElementById("address").textContent = address
})
async function send() {
const messages = [
{
typeUrl: "/cosmos.bank.v1beta1.MsgSend",
value: {
fromAddress: address$.value,
toAddress: address$.value,
amount: [{ amount: "1000000", denom: "uinit" }],
},
},
]
document.getElementById("tx-hash").textContent = "Loading..."
const transactionHash = await requestTx({ messages })
document.getElementById("tx-hash").textContent = transactionHash
}
document.getElementById("onboard").addEventListener("click", onboard)
document.getElementById("disconnect").addEventListener("click", disconnect)
document.getElementById("send").addEventListener("click", send)
}Interface
interface WalletWidget {
/** The current wallet address. */
address$: BehaviorSubject<string>
/** The current wallet account. */
account$: BehaviorSubject<AccountData | null>
/** The current connected wallet. */
wallet$: BehaviorSubject<WidgetWallet | null>
/** Current connected Keplr provider. */
keplr$: BehaviorSubject<Keplr | null>
/** Current connected Ethereum provider. */
ethereum$: BehaviorSubject<Eip1193Provider | null>
/** Indicates whether the wallet connection is being established. */
isLoading$: BehaviorSubject<boolean>
/** Triggers the wallet connection process. */
onboard: () => void
/** Displays the wallet interface for managing assets. */
view: (event?: MouseEvent) => void
/** Signs and broadcasts a transaction, returning the transaction hash. */
requestTx: (txBodyValue: TxBodyValue, options?: RequestTxOptions) => Promise<string>
/** Utilizes the @initia/initia.js library to broadcast transactions. */
requestInitiaTx: (tx: { msgs: Msg[]; memo?: string }, options?: RequestTxOptions) => Promise<string>
/** Signs arbitrary data with the wallet. */
signArbitrary: (data: string | Uint8Array) => Promise<string>
/** Verifies a signature against the provided data. */
verifyArbitrary: (data: string | Uint8Array, signature: string) => Promise<boolean>
/** Disconnects the wallet. */
disconnect: () => Promise<void>
}interface WidgetConfig {
/**
* The chain ID for the wallet connection.
* This only works if your chain is registered in initia-registry.
* Default: "initiation-2".
*/
chainId?: string
/**
* Custom layer configuration.
* This option is for when your chain is not yet registered in initia-registry.
*/
customLayer?: Chain
/**
* Protobuf types for transaction serialization.
* Only required if you need custom message signing.
*/
protoTypes?: Iterable<[string, GeneratedType]>
/**
* Amino converters for encoding/decoding transactions.
* Only required if you need custom message signing.
*/
aminoConverters?: AminoConverters
/**
* Flag to use the Initia Wallet as a signer only, without other functionalities.
* Set to `true` if you want to use the gas value estimated by the widget instead of the Initia wallet extension.
*/
useWalletAsSignerOnly?: boolean
/**
* Flag to use Keplr as a Direct signer.
* Set to `true` if you want to use Keplr as a Direct signer instead of a the Amino signer.
*/
useKeplrAsDirectSigner?: boolean
/**
* Additional wallets to be supported by the widget.
* Use this if you want to declare custom wallet extension providers that we do not provide.
*/
additionalWallets?: WidgetWallet[]
/** Function to filter and select specific types of wallets. */
filterWallet?: (type: WidgetWallet) => boolean
/** Adjustment factor for transaction gas estimation. */
gasAdjustment?: number
/** URL for api. */
apiUrl?: string
/** URL for dex api. */
dexApiUrl?: string
/** URL for fetching registry information. */
registryUrl?: string
/** URL for block explorer. */
explorerUrl?: string
/** URL for fetching the swap list configuration. */
swaplistUrl?: string
/** URL for fetching error messages or logs. */
errorsUrl?: string
/** URLs for various module configurations. */
modules?: {
usernames: string
dex_utils: string
swap_transfer: string
}
/** Theme configuration for the widget UI. */
theme?: WidgetTheme
}Usage in React projects
Usage in React Projects If you are using React and want to integrate the Wallet Widget into your project, you can utilize the core functionality by installing @initia/react-wallet-widget.
Preview build results before deploying to CDN
pnpm build
pnpm --filter demo dev