iframe-wallet

v0.0.13

Published

2 years ago

This wallet is not a browser extension.

Downloads

0High
0Medium
0Low

douganderson444

iFrame Wallet

This wallet is not a browser extension.

Work in progress. Not yet ready for production. Feel free to contribute.

This is an experimental new type of cryptographic wallet intended to be embedded in an iFrame in the parent website (as opposed to the typical way that it's in a browser extension).

Background

Read the blog post.

When a wallet is in a browser extension, there are many use restrictions for developers and barriers to entry for new userss:

Developers must

work around extension globals injected
itegrate each wallet
only offer a list of preselected wallet options to their users
more integration work when a new wallet if offered

To adopt the current wallet model, users must:

have a browser that can be extended (no mobile?)
must want to download & install (ugh, I have to install something? Really?)
actually download and install
choose only from app-chosen wallets, instead of their own
work within the chosen wallet capabilities (many wallets don't offer encryption or key type options)

So since we have barriers to adoption and dev limitations, we can look at another way.

What if the wallet was just a website? Not just any website, but a website:

with miminal or zero javascript dependencies (to minimize XSS risk)
configurable, so user could choose to use their own wallet
hostable from content verifiable sources, such as IPFS (content identifiable)
hostable from sandboxable sources, such as Deno
Zero barrier to entry (no download)
Portable to mobile
extensible by devs and users (add your own CSS, confirmation components, anything)

Then perhaps we could have greater adoption and get this Web3 thing really rolling?

Install

npm install @douganderson444/iframe-wallet

Usage

npm run dev

Dev Notes

Use in Svelte Apps

For non-Svelte App use, see Custom Elements note below.

For Svelte apps, import the Portal Component and instantiate it in your app

<script>
	import Portal from 'iframe-wallet'

	let portal

	function handleSign(){
		portal.ed25519.sign(data)
	}
</script>

<Portal origin={'https://iframe-wallet.pages.dev'} bind:portal />

Building Portal Component

This package uses Custom Elements for the Portal build.

At this time, SvelteKit doesn't support this, so we use Rollup to build the Portal.svelte component into <web3-wallet-portal></web3-wallet-portal> custom element that can be used by HTML websites or any other framework, such as React, Vue, etc.

Read more about custom elements here.

This build is done by npm run build:components which runs Rollups and outputs the build and bundled components as Javascript classes in build/components

These custom elements can then be imported by other website using

<head>
	<!-- UMD -->
	<script src="https://iframe-wallet.pages.dev/components/umd/Portal.min.js"></script>

	<!-- IIFE -->
	<!-- <script defer src='https://iframe-wallet.pages.dev/components/iife/Portal.min.js'></script> -->

	<!-- ES -->
	<!-- <script type="module" src='https://iframe-wallet.pages.dev/components/es/Portal.min.js'></script> -->
</head>

<body>
	<web3-wallet-portal></web3-wallet-portal>
	<web3-wallet-portal origin="https://iframe-wallet.pages.dev/"></web3-wallet-portal>
</body>

<script>
	const el = document.querySelector('my-element');
	let portal = el.portal;
	console.log('The portal accessor variable is', { portal });
</script>

When this package is deployed to a website (reference deployment: https://iframe-wallet.pages.dev/) then the Wallet Portal can be accessed from this deployment via:

https://iframe-wallet.pages.dev/components/es/Portal.min.js https://iframe-wallet.pages.dev/components/iife/Portal.min.js https://iframe-wallet.pages.dev/components/umd/Portal.min.js

Custom confirmation components

To add a (Svelte) confirmation Components to a crypto method handler:

let confirmed = await get(confirm)('<method.name.path>', origin);

Where <method.name.path> is something like 'connect' or 'sign' or 'arweaveWalletAPI.sign'.

To add a custom confirmation component:

Create the custom component
Wrap Custom component in $lib/handlers/DefaultConfirmation.svelte
Import the Custom Confirm component and inject logic to src\lib\handlers\confirm\index.ts

let customizedComponents = {
	connect: { component: Connect }  // existing custom confirm component
	<namespace>: {
		<methodName>: {
			component: <CustomComponentName>
		}
	}
};

Contributing

Don't add any JavaScript dependencies unless you absolutely have to, we're trying to minimize any chance of attacks. Rust+ Wasm would be preferred. Otherwise Issues and PRs accepted.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme