- Create a new
invitationsfolder in thezomesof the consuming DNA. - Add a new
Cargo.tomlin that folder. In its content, paste theCargo.tomlcontent from any zome. - Change the
nameproperties of theCargo.tomlfile toinvitations. - Add this zome as a dependency in the
Cargo.tomlfile:
[dependencies]
hc_zome_invitations = {git = "https://github.com/eyss/invitations", package = "hc_zome_invitations"}- Create a
srcfolder besides theCargo.tomlwith this content:
extern crate hc_zome_invitations;- Add the zome into your
dna.yamlfile with the nameinvitations. - Compile the DNA with the usual
CARGO_TARGET_DIR=target cargo build --release --target wasm32-unknown-unknown.
-
Install the module with
npm install "https://github.com/eyss/invitations#ui-build". -
Import and create the mobx store for profiles and for this module, and define the custom elements you need in your app:
import {
ProfilePrompt,
SearchAgent,
ProfilesStore,
profilesStoreContext,
ListProfiles,
} from "@holochain-open-dev/profiles";
import {
InvitationsList,
CreateInvitations,
InvitationsStore,
} from "@eyss/invitations";
import { AppWebsocket } from "@holochain/conductor-api";
import { HolochainClient } from "@holochain-open-dev/cell-client";
import { LitElement, html } from "lit";
import { ScopedElementsMixin } from "@open-wc/scoped-elements";
import { ContextProvider } from "@lit-labs/context";
class InvitationsTest extends ScopedElementsMixin(LitElement) {
static get properties() {
return {
loaded: {
type: Boolean,
},
};
}
async firstUpdated() {
const appWebsocket = await AppWebsocket.connect("ws://localhost:8888");
const appInfo = await appWebsocket.appInfo({
installed_app_id: "test-app",
});
const cellData = appInfo.cell_data[0];
const cellClient = new HolochainClient(appWebsocket, cellData);
new ContextProvider(
this,
profilesStoreContext,
new ProfilesStore(cellClient, {
avatarMode: "avatar",
})
);
const invitationsStore = new InvitationsStore(cellClient, {
clearOnInvitationComplete: false,
});
new ContextProvider(this, invitationsStoreContext, invitationsStore);
this.loaded = true;
}
render() {
if (!this.loaded) return html`<span>Loading...</span>`;
return html`
<profile-prompt>
<create-invitation></create-invitation>
<invitations-list include-myself></invitations-list>
</profile-prompt>
`;
}
static get scopedElements() {
return {
"create-invitation": ProfilePrompt,
"invitations-list": SearchAgent,
"list-profiles": ListProfiles,
};
}
}
customElements.define("invitations-test", InvitationsTest);...
<body>
<profile-prompt style="height: 400px; width: 500px">
<create-invitation></create-invitations>
<invitations-list></invitations-list>
</profile-prompt>
</body>Take into account that at this point the elements already expect a holochain conductor running at ws://localhost:8888.
You can see a full working example here.
Visit the developer setup.