Prerequisites
Before integrating use cases, you need to handle the following things:
- Connect the extension
- Fetch vaults and accounts
- Subscribe to events
- Manage errors (won't be covered in this tutorial, please navigate to the error list)
- Install our providers package: @cedelabs/providers (opens in a new tab):
npm install @cedelabs/providers
- Detect the extension, connect to it and fetch vaults and accounts:
import { CedeProvider } from "@cedelabs/providers";
let provider;
let vaults;
const init = async () => {
// Await for the provider to be injected in the DOM
provider = await detectCedeProvider();
// If cede.store is not yet installed
if (!provider) {
window.open("https://cede.store", "_blank"); // open cede.store page
}
vaults = await provider.request({ method: "connect" });
};
init();
console.log(vaults);
// {
// "id": "481728-243105-531283-310234-915058",
// "name": "Main vault",
// "image": "chrome-extension://...",
// "accounts": [
// {
// "id": "coinbase-936876-766863-135773-381831",
// "exchangeId": "coinbase",
// "accountName": "Coinbase 1",
// "permissions": [
// "trade",
// "read",
// "withdraw"
// ],
// "status": "online",
// "settings": {
// "hiddenTokens": []
// },
// "isOauth": true
// }
// ],
// "isActive": true
// }
- To subscribe to events, you need to use the
on
method. All available events can be found here.
const onDisconnect = () => {
// handle disconnection
};
const addConnection = (accounts: string[]) => {
// handle accounts change
};
const onAccountsChanged = (accounts: string[]) => {
// handle disconnection
if (!accounts.length) {
onDisconnect();
return;
}
// handle accounts change
addConnection(accounts);
};
const onUnlock = () => {
// handle unlock logic
vaults = provider.getVaultPreviews();
};
const onExchangesStatusesUpdate = (exchangesStatusesUpdate: {
hasBackOnline: Array<string>;
hasGoneOffline: Array<string>;
}) => {
// handle exchange statuses change
};
provider.on("accountsChanged", onAccountsChanged);
provider.on("lock", onDisconnect);
provider.on("unlock", onUnlock);
provider.on("exchangesStatusesUpdate", onExchangesStatusesUpdate);