Fractl is a framework-agnostic UI library for interacting with blockchains, smart contracts, and wallets. Built for an ecosystem of fragmented ecosystems.
The first set of components in
pnpm add fractl-uiand a core package for the appropriate network(s).
EVM: fractl-ui/evm wagmi viem
starknet: fractl-ui/starknet
fuel: fractl-ui/fuel fuels
The general pattern stays the same across core packages. refer to the specific documentation for more details.
Using the evm as an example:
<body>
<fractl-modal />
<script>
/* import fractl-modal from @fractl-ui/ui. (Web Components do not need named imports) */
import 'fractl-ui'
import { addEvm } from '@fractl-ui/evm'
/* setup wagmi regularly */
import { wagmiConfig } from './lib/wagmiConfig'
/* addEvm returns an object. So we need to pass it to fractl-modal using javascript */
const connections = addEvm({config: wagmiConfig})
document.querySelector('fractl-modal')!.config = connections
</script>
</body>Fractl will manage it's state internally and pass updates to wagmi, which you can listen to in your app.
Fractl is still very early and some important features will require the API is going to change (for example, to use multiple networks together). That said, Fractl UI and Fractl EVM work relatively well as they are. You should stick to a fixed version if you do decide to use it.
PRs and issues welcome. Fractl's UI is built with svelte, compiled to web components. Chain specific packages are written in typescript. If you'd like to try making a new core package, please open an issue first to avoid duplicating work.
- Rainbowkit, ConnectKit, and Web3modal for prior work and inspiration
- Zora Labs for the Zorbs