Stelo allows you to explore the frontier of web3 with confidence that you won't get phished.
Read more about Stelo and download the latest version from the Chrome Webstore on stelolabs.com.
Stelo sits in between websites and extension based wallets (like MetaMask) to interpret and enrich transactions with relevant onchain and offchain data.
Technically, Stelo is able to inject into the transaction flow by wrapping the window.ethereum
object that is inserted into the page and called by extension based wallets.
The relevant code for this process is in this file and extracted below.
export class RPCProviderFacade {
constructor() {
if (window.ethereum) {
log("wrapping window.ethereum");
this.wrap(window.ethereum);
if (!!window.ethereum?.providers?.length) {
window.ethereum?.providers.forEach(this.wrap.bind(this));
}
} else {
log("adding ethereum#initialized event listener ");
window.addEventListener("ethereum#initialized", () => {
log("ethereum#initialized: wrapping window.ethereum");
this.wrap(window.ethereum);
});
}
}
Stelo does not modify the request as long as the user accepts the request in Stelo.
async waitForDecision(request: EthersRequest) {
const rpcRequestId = uuidv4();
const event = new CustomEvent("STELO", {
detail: {
rpcRequestId,
...request,
userAddress: window.ethereum.selectedAddress,
},
});
window.dispatchEvent(event);
return new Promise((res, rej) => {
window.addEventListener("message", (event) => {
if (
event.data.origin === "stelo" &&
event.data.rpcRequestId === rpcRequestId
) {
event.data.approval
? res(undefined)
: rej({ message: "User Rejected Tx in Stelo" });
}
});
});
}
If you'd like to install Stelo locally instead of from the Chrome store you can download the latest release build here.
Note that you will not receive updates that may contain crucial security improvements.
- Unzip the build.
- Add the extension to Chrome.
- navigate to
chrome://extensions/
in your web browser. - Enable Developer mode (There should be a toggle in the upper right corner).
- Click
Load Unpacked
(This should open up a file picker). - Select the newly created
./release
folder at the root of this project's directory.
- navigate to
If you'd like to build Stelo yourself you can do so as well.
Note that you will not receive updates that may contain crucial security improvements.
- install node.js 16
- install yarn
- After cloning this repository and changing into its directory.
yarn install
to install the projects dependenciesyarn build
to generate a static build. (this will create a./apps/ext/release
folder).- Add the extension to Chrome.
- navigate to
chrome://extensions/
in your web browser. - Enable Developer mode (There should be a toggle in the upper right corner).
- Click
Load Unpacked
(This should open up a file picker). - Select the newly created
./apps/ext/release
folder.
- navigate to