# wallet-standard-list

> Custom Element that creates a list of 'connect wallet' buttons for wallet-standard wallets

Latest version **0.2.0** (published 2023-09-07) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install wallet-standard-list
pnpm add wallet-standard-list
yarn add wallet-standard-list
bun add wallet-standard-list
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-09-07 |
| First published | 2023-08-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | socean |

## Links

- npm: https://www.npmjs.com/package/wallet-standard-list
- Repository: https://github.com/igneous-labs/wallet-standard-list
- Issues: https://github.com/igneous-labs/wallet-standard-list/issues
- npm.io page: https://npm.io/package/wallet-standard-list

## Dependencies (1)

- [@wallet-standard/app](https://npm.io/package/@wallet-standard/app.md) ^1

## Recent versions

- 0.2.0 (latest) — 2023-09-07
- 0.1.2 — 2023-09-05
- 0.1.1 — 2023-09-05
- 0.1.0 — 2023-08-29

## README

# wallet-standard-list

Custom element for displaying a "connect wallet" button for every wallet-standard wallet registered.

All HTML elements within are NOT encapsulated in the shadow DOM and completely unstyled to allow for complete styling customization.

## Example

First, add the element to the custom element registry:

```js
import { defineCustomElement } from "wallet-standard-list";

defineCustomElement(); // accepts an optional string arg for the custom element tag name, otherwise defaults to "wallet-standard-list"
```

You can now use it in your html:

```html
<wallet-standard-list
  required-features="solana:signAndSendTransaction, solana:signTransaction"
></wallet-standard-list>
```

## Basic Styling Example

```css
wallet-standard-list {
  display: inline-flex; /* custom element default to display: inline */
  flex-direction: column;
  gap: 0.25rem;
}

wallet-standard-list > button {
  display: flex;
  align-items: center;
  height: 3rem;
  font-size: 1rem;
}

wallet-standard-list > button > img {
  height: 75%;
  margin-right: 1rem;
}
```

You can see the result of these basic styles in the example web-app in `example/`

## Usage

### Filtering Wallets by Features

The `required-features` attribute allows users to filter standard wallets by [wallet-standard features](https://wallet-standard.github.io/wallet-standard/interfaces/_wallet_standard_base.Wallet.html#features) using a comma-separated list of feature names, displaying buttons only for wallets that have all required features.

### Connecting a Wallet

On click, each button initiates the connect wallet flow with the respective wallet.

On connect success, a `CustomEvent` is emitted with the following type:

```js
{
  type: "wallet-standard-list:wallet-connected",
  bubbles: true,
  detail: Wallet, // standard wallet that connected
}
```

### Using the Connected Wallet

On successful connection, the connected wallet is made available through the element's `connectedWallet` property.

```js
const transaction = ...;
const wallet = document.querySelector(
  "wallet-standard-list"
).connectedWallet;
const account = wallet.accounts[0];
const [{ signature }] = await wallet.features[
  "solana:signAndSendTransaction"
].signAndSendTransaction({
  chain: "solana:mainnet",
  account,
  transaction,
});
```

See `example/index.html` for a full example

### Disconnecting the Connected Wallet

Disconnecting the connected wallet must be handled by the app by calling the element's `disconnect()` method.

```js
document.querySelector("wallet-standard-list").disconnect();
```

On `disconnect()` call, a `CustomEvent` is immediately emitted with the following type:

```js
{
  type: "wallet-standard-list:wallet-disconnected",
  bubbles: true,
  detail: Wallet, // standard wallet to disconnect
}
```

The wallet might run some additional cleanup in the background at the same time.

### Others

The list of all filtered standard wallets is available through the element's `wallets` property.

```js
const allWallets = document.querySelector("wallet-standard-list").wallets;
```

---
_Source: https://npm.io/package/wallet-standard-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._