npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@apophis-sdk/preact

v0.1.0-alpha.2

Published

Preact integration of the [Crypto Me](https://github.com/Kiruse/Apophis SDK) web3 wallet integration framework.

Downloads

150

Readme

@apophis-sdk/preact

Preact integration of the [Crypto Me](https://github.com/Kiruse/Apophis SDK) web3 wallet integration framework.

Installation

Install with your favorite package manager's equivalent of:

$ npm i preact @preact/signals @apophis-sdk/core @apophis-sdk/preact

Note that Apophis SDK is an ESModule package.

Usage

Apophis SDK consists of two pieces: Wallet Integrations & Frontend Integrations. You will need at least one of both. @apophis-sdk/preact is a frontend integration for Preact.

Generally, components in this package are designed to populate the signals object from the @apophis-sdk/core package. This package exposes only two read/write signals:

  • signer exposes the currently active signer, representative of the user. Typically, Dapps are built to support one user at a time (e.g. per browser tab). This signal is primarily used in the UI. In logic, you will typically need to specify the desired signer directly.
  • network is used to get the active network. This is primarily used in the UI, but some Cosmos API logic uses it as fallback value if no NetworkConfig was passed.

Various other read-only signals are derived from the above:

  • signDatas is a Map<NetworkConfig, SignData> containing the signing data for all of the networks that were connected to the signer.
  • signData is the signing data for the currently active network.
  • chainId is the chain ID of the currently active network.
  • address is the address of the currently active signer & network.
  • bech32Prefix is the bech32 prefix for the currently active network.

The best use for the signDatas signal is to respond to keychain changes (i.e. when the user chooses a different account within their wallet). Both signData & address will update when either the network or the keychain changes.

Components

There are various components designed to facilitate user interaction & connection to Cosmos wallets:

  • WalletSelector is an inline component listing your enabled wallets & allowing the user to select one. Upon selection, the it will attempt to connect to the wallet. Upon success, it will fill the signals.signer signal.
  • WalletModal is a dialog wrapper component around WalletSelector.
  • Address is designed to show & optionally truncate an address. It comes with a built-in copy icon button.
  • UserAddress is a wrapper around Address that will show & automatically update the address when the signals.signer changes.

UX Recommendations

Cosmos is a vast & heterogenous ecosystem. Cosmos is also excessively overwhelming for newcomers. I thus strongly recommend that Dapp designers & developers abstract away the details of Cosmos chains, and instead of requiring the user to make a conscious decision about which network they intend to use, you should infer it based on the user's actions & intents.

Think of your Dapp as self-contained. Tackle design from a user's perspective. Imagine the user has no knowledge of our ecosystem at all. They just want to get something done. For example, simply sending some funds across chains. Most Dapps first ask you where these funds are coming from. Heck if I know, I just want to send some $WHALE to my friend! So, let them search for $WHALE instead, and then let them choose which network they intend to use, showing balances for each. Then, depending on the recipient's address, extract the Bech32 prefix and find the appropriate network. If multiple, let them choose. The less the user has to think about their actions, the better.

In my own project, I infer the network based on the recipient's address. When selecting a conversation, Dropnote detects the recipient, extracts the Bech32 prefix, and automatically chooses the first matching network. The network dropdown is now filtered to only show networks with the detected prefix. In the case of Neutron, this matches Mainnet & Testnet. In the case of Terra, this would match Mainnet & Classic. When creating a new conversation, the user must enter the recipient's address, which triggers the same network detection logic.