https://github.com/douganderson444/svelte-web3-wallet-connector
https://github.com/douganderson444/svelte-web3-wallet-connector
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/douganderson444/svelte-web3-wallet-connector
- Owner: DougAnderson444
- Created: 2022-02-03T18:10:48.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-20T11:43:27.000Z (over 2 years ago)
- Last Synced: 2025-01-24T19:47:15.176Z (4 months ago)
- Language: JavaScript
- Size: 1.44 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
{
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
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'));
});
// in your Svelte app
{#if Web3WalletMenu}
{:else}
Loading Web3 Wallet...
{/if}
```