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);

Playground Deposit