@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 someCosmos
API logic uses it as fallback value if noNetworkConfig
was passed.
Various other read-only signals are derived from the above:
signDatas
is aMap<NetworkConfig, SignData>
containing the signing data for all of the networks that wereconnect
ed to thesigner
.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 thesignals.signer
signal.WalletModal
is a dialog wrapper component aroundWalletSelector
.Address
is designed to show & optionally truncate an address. It comes with a built-in copy icon button.UserAddress
is a wrapper aroundAddress
that will show & automatically update the address when thesignals.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.