0xcert · MoMannn · Jan 22, 2020 · Jan 22, 2020 · Jan 22, 2020
diff --git a/README.md b/README.md
@@ -1 +1,13 @@
-# api-example-deployment
+This is an example of how to 0xcertAPI deployments.
+
+The example is wrapped in a simple dApp to showcase not only functionalities but also the basic principles of handling blockchain communication through 0xcertAPI. Main logic is isolated in `src/example.ts` while response handling is located in `index.ts`.
+
+Project stucture:
+
+| Path | Description
+|-|-
+| src/example.ts | Main logic showing the use.
+| src/config.ts | Configuration file.
+| index.html | Front end styling.
+| index.ts | Controller connecting front end to the logic.
+| package.json | Dependencies.
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <title>0xcertAPI example for creating a deployment.</title>
+    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8" />
+  </head>
+
+  <body>
+    <button id="btnInitialize">Initialize</button>
+    <button id="btnCreateDeployment">Create deployment</button>
+    <button id="btnGetDeployInfo">Get deploy information</button>
+    <div id="console">
+      <div>Console output.</div>
+    </div>
+    <script src="index.ts"></script>
+  </body>
+</html>
diff --git a/index.ts b/index.ts
@@ -0,0 +1,72 @@
+import { init, getDeploymentInfo, createDeployment } from "./src/example";
+import { config } from "./src/config";
+
+const divConsole = document.getElementById("console");
+const btnInitialize = document.getElementById("btnInitialize");
+const btnCreateDeployment = document.getElementById("btnCreateDeployment");
+const btnGetDeployInfo = document.getElementById("btnGetDeployInfo");
+
+btnInitialize.addEventListener("click", async () => {
+  try {
+    await init();
+    printMessage("Initialized.");
+  } catch (e) {
+    printError(e);
+  }
+});
+
+btnCreateDeployment.addEventListener("click", async () => {
+  if (config.client === null) {
+    printWarning("First initialize the client.");
+    return;
+  }
+  printMessage("Deploying asset ledger");
+  try {
+    const deployment = await createDeployment();
+    printMessage(deployment.data);
+  } catch (e) {
+    printError(e);
+  }
+});
+
+btnGetDeployInfo.addEventListener("click", async () => {
+  if (config.deploymentRef === "") {
+    printWarning("First create a deployment.");
+    return;
+  }
+  try {
+    const deployment = await getDeploymentInfo();
+    printMessage(deployment.data);
+  } catch (e) {
+    printError(e);
+  }
+});
+
+function printMessage(message: any) {
+  if (typeof message !== "string") {
+    message = JSON.stringify(message, null, 2);
+  }
+  const div = document.createElement("div");
+  div.innerText = message;
+  divConsole.prepend(div);
+}
+
+function printWarning(message: any) {
+  if (typeof message !== "string") {
+    message = JSON.stringify(message, null, 2);
+  }
+  const div = document.createElement("div");
+  div.innerText = "Warning: " + message;
+  div.className = "warning";
+  divConsole.prepend(div);
+}
+
+function printError(message: any) {
+  if (typeof message !== "string") {
+    message = JSON.stringify(message, null, 2);
+  }
+  const div = document.createElement("div");
+  div.innerText = "Error: " + message;
+  div.className = "error";
+  divConsole.prepend(div);
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "api-example-deployment",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@0xcert/client": "1.0.0-beta",
+    "@0xcert/ethereum-metamask-provider": "2.0.0-beta"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.6.1"
+  },
+  "keywords": []
+}
diff --git a/src/config.ts b/src/config.ts
@@ -0,0 +1,4 @@
+export const config = {
+  deploymentRef: "",
+  client: null
+};
diff --git a/src/example.ts b/src/example.ts
@@ -0,0 +1,55 @@
+import {
+  MetamaskProvider,
+  buildGatewayConfig,
+  NetworkKind
+} from "@0xcert/ethereum-metamask-provider";
+import { Client, Priority, AssetLedgerCapability } from "@0xcert/client";
+import { config } from "./config";
+
+// We create a new instance of metamask provider.
+const provider = new MetamaskProvider({
+  gatewayConfig: buildGatewayConfig(NetworkKind.RINKEBY)
+});
+
+export async function init() {
+  // We first check if metamask is already enabled.
+  if (!(await provider.isEnabled())) {
+    // If metamask is not enabled, we enable it.
+    await provider.enable();
+  }
+
+  config.client = new Client({
+    provider,
+    apiUrl: "https://api-staging.0xcert.org"
+  });
+
+  return config.client.init();
+}
+
+export async function createDeployment() {
+  const deployment = await config.client.createDeployment(
+    {
+      name: "Math Course Certificate",
+      symbol: "MCC",
+      uriPrefix: "https://0xcert.org/assets/",
+      uriPostfix: ".json",
+      schemaId:
+        "3f4a0870cd6039e6c987b067b0d28de54efea17449175d7a8cd6ec10ab23cc5d", // base asset schemaId
+      capabilities: [
+        AssetLedgerCapability.TOGGLE_TRANSFERS,
+        AssetLedgerCapability.DESTROY_ASSET,
+        AssetLedgerCapability.REVOKE_ASSET,
+        AssetLedgerCapability.UPDATE_ASSET
+      ],
+      ownerId: config.client.provider.accountId
+    },
+    Priority.LOW
+  );
+
+  config.deploymentRef = deployment.data.ref;
+  return deployment;
+}
+
+export async function getDeploymentInfo() {
+  return config.client.getDeployment(config.deploymentRef);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,48 @@
+button {
+  background-color: #0c71ff;
+  border: none;
+  color: white;
+  padding: 10px 25px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 14px;
+  border-radius: 5px;
+  margin: 1px;
+}
+
+button:hover {
+  background-color: #3c8cff;
+}
+
+#console {
+  background-color: black;
+  margin: 30px auto;
+  max-height: 200px;
+  padding: 10px;
+  overflow: auto;
+  border-radius: 5px;
+  font-size: 14px;
+  font-family: "Courier New", Courier, monospace;
+}
+
+#console div {
+  color: white;
+  margin-left: 30px;
+  position: relative;
+}
+
+#console div.error {
+  color: red;
+}
+
+#console div.warning {
+  color: yellow;
+}
+
+#console div::before {
+  color: white;
+  content: ">";
+  position: absolute;
+  left: -20px;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "rootDir": "src",
+    "moduleResolution": "node"
+  }
+}