open-index/open-npm huggingface dataset:
npm package: @peerpiper/qrcode-scanner-svelte
Description: QR Code scanner in a Svelte Component
Latest version: 1.0.7

# PWA QR Code Scanner

QR Code scanner in a Svelte Component

## Use

[Demo](https://peerpiper.github.io/qrcode-scanner-svelte)

Basic

```js
<Scanner />
```

Custom

```js

    let result

    <Scanner bind:result>
        <!-- Insert custom results component if you want to do something unique with the QR code data -->
		<!-- override default by placing handler in here  -->
		{#if result}
			<div>
				The result is: {result}
			</div>
			<div>
				<button on:click={() => (result = null)}>Scan again</button>
			</div>
		{/if}
	</Scanner>
```
npm package: @peerpiper/web3-wallet-connector
Description: Embed this Connector on your website to enable your visitors to use Web3 on your site!
Latest version: 0.1.19

# Web3 Wallet Connector

Embed this Connector on your website to enable your visitors to use Web3 on your site!

Your visitors get to choose their wallet, so the integration is simple for you.

## Install Latest Version

```bash
npm i github:PeerPiper/web3-wallet-connector
```

## Vanilla JS Bindings

You can use the Wallet as an ES Module, IIFE, or UMD module.

For example, in your client side (browser) code, you can import an ES module and mount it to the DOM using `new`. Pass it the URL where to load the Wallet, then set your wallet object to be the event detail returned when the wallet is ready.

```js
// see ./src/routes/vanilla.svelte

import Web3WalletMenu from '@peerpiper/web3-wallet-connector/bundled/es/Web3WalletMenu.svelte.js';

let wallet, signature;

const menu = new Web3WalletMenu({
	target: document.body,
	props: {
		inputUrl: 'https://peerpiper.github.io/iframe-wallet-sdk/' // default
	}
});

menu.$on('walletReady', async (event) => {
	wallet = event.detail.wallet;

	// now you can use wallet
	signature = await wallet.ed25519.sign({ someData: 'some data' });
});
```

## Svelte Bindings

Import the Svelte component into your project:

```js
import { Web3WalletMenu } from "@peerpiper/web3-wallet-connector"

let wallet
let inputUrl = 'https://peerpiper.github.io/iframe-wallet-sdk/'; // the default URL, can be anywhere

<Web3WalletMenu
	{inputUrl}
	on:walletReady={(e) => {
		wallet = e.detail.wallet;
	}}
/>

// use any method available from their Wallet provider
wallet.ed25519.sign(someData)
wallet.proxcryptor.selfEncrypt(someSecret)
wallet.arweaveWalletAPI.signTransaction(txData)

```

### Deatiled Svelte Usage

Use the PeerPiper wallet on your website to connect directly with your users. Allows them to "sign in" with their keypair, subscribe to each others' data feeds.

The wallet Frontend is written in Svelte and easy to use:

Step 1: Install the waller connector:

```bash
npm i github:PeerPiper/web3-wallet-connector
```

Step 2: Load the Wallet component

```svelte
<script lang="ts">
	import { onMount } from 'svelte';

	let wallet; // the variable you interact with the wallet functions
	let Web3WalletMenu; // the Component variable
	let inputUrl = 'https://peerpiper.github.io/iframe-wallet-sdk/'; // the default URL, can be your own or the user's own URL

	onMount(async () => {
		({ Web3WalletMenu } = await import('@peerpiper/web3-wallet-connector'));
	});
</script>

// in your Svelte app
<div class="">
	<!-- Anywhere in your app, it will be fixed in the upper right hand corner of the page -->
	{#if Web3WalletMenu}
		<svelte:component this={Web3WalletMenu} bind:wallet {inputUrl} />
	{:else}
		Loading Web3 Wallet...<br />
	{/if}
</div>
```